319

src/view/components/InfoAnimation.vue

@@ -562,6 +562,7 @@ function vtkShow() {
   // console.log(dataArray);
   dataArray.setData(scalarArray);
   fcon.polydata.getPointData().setScalars(dataArray);
+  // fcon.polydata.getPointData().setOpacity(dataArray);
   mapper.setInputData(fcon.polydata);
   getMinMax(scalarArray);
    mapper.setScalarRange(parseFloat(min.value.toFixed(3)), parseFloat(max.value.toFixed(3))); //设置范围

src/view/result.vue

@@ -1,158 +1,162 @@
 <template>
-    <!--结果对比 -->
-    <div  class="resultyem" v-show="resultyem">
-        <div class="publicleft">
-          <div class="resultime">
-            <div class="text">指定时间</div>
-            <div class="time">{{timeline}}</div>
-          </div>
-          <!-- 动画 -->
-          <div class="animation_s">
-              <el-slider
-                :max="endtime"
-                :min="starttime"
-                v-model="formInline.count"
-                @change="sliderchange"
-              >
-              </el-slider>
-              <div class="tanniu">
-                <ul>
-                  <li>
-                    <el-image :src="t1" fit="contain"></el-image>
-                    <p>后退</p>
-                  </li>
-                  <li>
-                    <el-image :src="t2" fit="contain" ></el-image>
-                    <p>播放</p>
-                  </li>
-                  <li>
-                    <el-image :src="t3" fit="contain"></el-image>
-                    <p>暂停</p>
-                  </li>
-                  <li>
-                    <el-image :src="t4" fit="contain"></el-image>
-                    <p>快进</p>
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <!-- 物理量 -->
-            <div class="heigjie">
-            <div class="he_pading1 color1">
-              <el-form-item label="物理量:">
-                <el-select
-                  v-model="formInline.region"
-                  @change="regionchange($event)"
-                  placeholder="请选择"
-                >
-                  <el-option
-                    v-for="item in strResultFormatlist"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-              <!-- <div class="woter" v-else>
+  <!--结果对比 -->
+  <div class="resultyem" v-show="resultyem">
+    <div class="publicleft">
+      <div class="resultime">
+        <div class="text">指定时间</div>
+        <div class="time">{{ timeline }}</div>
+      </div>
+      <!-- 动画 -->
+      <div class="animation_s">
+        <el-slider
+          :max="endtime"
+          :min="starttime"
+          v-model="formInline.count"
+          @change="sliderchange"
+        >
+        </el-slider>
+        <div class="tanniu">
+          <ul>
+            <li>
+              <el-image :src="t1" fit="contain"></el-image>
+              <p>后退</p>
+            </li>
+            <li>
+              <el-image :src="t2" fit="contain"></el-image>
+              <p>播放</p>
+            </li>
+            <li>
+              <el-image :src="t3" fit="contain"></el-image>
+              <p>暂停</p>
+            </li>
+            <li>
+              <el-image :src="t4" fit="contain"></el-image>
+              <p>快进</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <!-- 物理量 -->
+      <div class="heigjie">
+        <div class="he_pading1 color1">
+          <el-form-item label="物理量:">
+            <el-select
+              v-model="formInline.region"
+              @change="regionchange($event)"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in strResultFormatlist"
+                :key="item.id"
+                :label="item.name"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <!-- <div class="woter" v-else>
                 <span>物理量：</span>
                 <span>水位</span>
               </div> -->
-            </div>
         </div>
       </div>
-        <div class="result_left results">
-                <resultLeft :formInline="formInline"/>
-    
     </div>
-    <div class="result_right results">
-          <resultRight :formInline="formInline"/>
- 
+    <div class="result_left results">
+      <resultLeft :region="formInline.region" :count="formInline.count"/>
     </div>
+    <div class="result_right results">
+      <resultRight :region="formInline.region" :count="formInline.count"/>
     </div>
-  </template>
-  <script setup>
-    import { ref, onMounted,onUnmounted, reactive, } from "vue";
-    import {RouterView,RouterLink } from "vue-router";
-    import { request, uploadFile } from "@/utils/request";
-    import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
-    import resultLeft from "./result/resultLeft.vue";
-    import resultRight from "./result/resultRight.vue"
-    import { timestampToTime } from "@/js/lindex.js";
-    import t1 from "@/assets/img/t1.png";
-    import t2 from "@/assets/img/t2.png";
-    import t3 from "@/assets/img/t3.png";
-    import t4 from "@/assets/img/t4.png";
-let resultyem=ref(false);
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, onUnmounted, reactive } from "vue";
+import { RouterView, RouterLink } from "vue-router";
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
+import resultLeft from "./result/resultLeft.vue";
+import resultRight from "./result/resultRight.vue";
+import { timestampToTime } from "@/js/lindex.js";
+import t1 from "@/assets/img/t1.png";
+import t2 from "@/assets/img/t2.png";
+import t3 from "@/assets/img/t3.png";
+import t4 from "@/assets/img/t4.png";
+let resultyem = ref(false);
 let timing = ref(null);
 let starttime = ref(1);
 let endtime = ref(60);
 let timenum = ref(2);
-let aid=ref(Number);
-let timeline=ref("2024-03-03 14:00");
+let aid = ref(Number);
+let timeline = ref("2024-03-03 14:00");
 const formInline = ref({
   region: "shanghai",
-  count:0
+  count: 0,
 });
 const strResultFormatlist = ref([]);
-const accident6 = (key,id) => {
-  aid.value=id;
+const accident6 = (key, id) => {
+  aid.value = id;
 
   if (key == "5") {
-    resultyem.value=true;
+    resultyem.value = true;
   } else {
-    resultyem.value= false;
+    resultyem.value = false;
   }
 };
-const newtime=()=>{
+const newtime = () => {
   timing.value = setInterval(() => {
-      const timestamp = new Date().getTime();
+    const timestamp = new Date().getTime();
     timeline.value = timestampToTime(timestamp);
-
-    }, 1000);
-}
+  }, 1000);
+};
 //滑块
 function sliderchange(val) {
-  fcon.step = count.value;
-  console.log( count.value );
+  // fcon.step = count.value;
+  // console.log(count.value);
 }
 // 物理量的选择
 function regionchange(val) {
-  console.log(val)
-  let newMap = new Map([['Temperature', '(℃)'], ['Pressure', '(kg/s)'],['Pressure', '(kg/s)'],['CO2', '(%)'],['CO2', '(%)'],['H2S', '(%)'],['Flow', '(Pa)'],['Height', 'm']])
+  console.log(val);
+  let newMap = new Map([
+    ["Temperature", "(℃)"],
+    ["Pressure", "(kg/s)"],
+    ["Pressure", "(kg/s)"],
+    ["CO2", "(%)"],
+    ["CO2", "(%)"],
+    ["H2S", "(%)"],
+    ["Flow", "(Pa)"],
+    ["Height", "m"],
+  ]);
   newMap.forEach((value, key) => {
     console.log(key, value);
-    if(key==val){
-    danwei.value=key+value;
+    if (key == val) {
+      danwei.value = key + value;
     }
-})
- 
+  });
 }
 
 onMounted(() => {
-  newtime()
+  newtime();
+});
+// 卸载时的操作
+onUnmounted(() => {
+  // 清除定时器
+  if (timing.value) {
+    clearInterval(timing.value);
+  }
 });
-  // 卸载时的操作
-  onUnmounted(() => {
-      // 清除定时器
-      if ( timing.value ) {
-        clearInterval( timing.value);
-      }
-    });
-defineExpose({accident6});
+defineExpose({ accident6 });
 </script>
-<style scoped  lang="scss">
-.heigjie{
+<style scoped lang="scss">
+.heigjie {
   width: 100%;
-    height: 50px;
-    line-height: 50px;
-    background-image: url(/src/assets/img/Group10.png) !important;
-    background-repeat: no-repeat;
-    background-position: center;
-    .he_pading1 {
-      padding: 10px 9px 0 7px;
-    }
-
-} 
+  height: 50px;
+  line-height: 50px;
+  background-image: url(/src/assets/img/Group10.png) !important;
+  background-repeat: no-repeat;
+  background-position: center;
+  .he_pading1 {
+    padding: 10px 9px 0 7px;
+  }
+}
 .animation_s {
   padding: 25px;
 }
@@ -173,74 +177,79 @@ defineExpose({accident6});
       font-style: normal;
       text-transform: none;
     }
-   }
   }
-.resultyem{
-width: 100%;
-position: absolute;
-z-index: 12;
-top:70px;
-color:#fff;
-    display: flex;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
 }
-.results{
-   flex: 1;
+.resultyem {
+  width: 100%;
+  position: absolute;
+  z-index: 12;
+  top: 70px;
+  color: #fff;
+  display: flex;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+}
+.results {
+  flex: 1;
 }
-.result_left,.result_right{
-    border-left: 2px solid;
-    /* border-right: 2px solid; */
-    /* border-image: linear-gradient(180deg, rgba(31, 107, 255, 0), rgba(255, 255, 255, 0.8)) 1 1; */
-    border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) 1 1;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+.result_left,
+.result_right {
+  border-left: 2px solid;
+  /* border-right: 2px solid; */
+  /* border-image: linear-gradient(180deg, rgba(31, 107, 255, 0), rgba(255, 255, 255, 0.8)) 1 1; */
+  border-image: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.5),
+      rgba(255, 255, 255, 0.5)
+    )
+    1 1;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
 }
-.publicleft{
-    width: 270px;
-    height: calc(100vh - 70px);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border:1px solid #fff */
+.publicleft {
+  width: 270px;
+  height: calc(100vh - 70px);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  /* border:1px solid #fff */
 }
-.resultime{
+.resultime {
   height: 70px;
-  border-bottom: 1px solid; 
-  border-image:  linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;
-
+  border-bottom: 1px solid;
+  border-image: linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;
 }
-.resultime .text{
-font-size: 14px;
-width: 88px;
-font-weight: bold;
-line-height: 70px;
-text-align: center;
-display: inline-block;
-border-right: 1px solid;
-border-image:  linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;
-float: left;
+.resultime .text {
+  font-size: 14px;
+  width: 88px;
+  font-weight: bold;
+  line-height: 70px;
+  text-align: center;
+  display: inline-block;
+  border-right: 1px solid;
+  border-image: linear-gradient(347deg, rgb(16, 92, 240), rgb(18, 48, 102)) 1 1;
+  float: left;
 }
-.resultime .time{
-line-height: 70px;
-font-family: Microsoft YaHei UI, Microsoft YaHei UI;
-font-weight: bold;
-font-size: 14px;
-color: #FF0F0F;
-line-height: 70px;
-text-align: left;
-text-align: center;
-font-style: normal;
-text-transform: none;
+.resultime .time {
+  line-height: 70px;
+  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+  font-weight: bold;
+  font-size: 14px;
+  color: #ff0f0f;
+  line-height: 70px;
+  text-align: left;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
 }
 </style>
 <style>
- .heigjie .el-form-item__label {
-    font-weight: 400;
-    font-size: 13px;
-    color: #ffffff;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
+.heigjie .el-form-item__label {
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
 }
-.heigjie  .el-select .el-input__inner {
-    color: #fff;
+.heigjie .el-select .el-input__inner {
+  color: #fff;
 }
-</style>
+</style>

src/view/result/resultLeft.vue

@@ -1,34 +1,107 @@
 <template>
-    <!--结果对比 -->
-    <div  class="result_left1">
+  <!--结果对比 -->
+  <div id="left" class="result_left1">
     <h1>我是Left组件</h1>
-    <h1>{{props.formInline}}</h1>
-    </div>
-  </template>
-  
-  <script setup>
+    <h1>{{ props.region }} {{ props.count }}</h1>
+  </div>
+</template>
 
-import { onMounted, ref } from 'vue';
+<script setup>
+import { onMounted, onUnmounted, onBeforeUnmount, ref } from "vue";
+import vtkRenderWindowWithControlBar from "@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar";
+import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
+import vtkConeSource from "@kitware/vtk.js/Filters/Sources/ConeSource";
+import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
+import { createFireControl } from "@/control/fireControl.js";
+import { Representation } from "@kitware/vtk.js/Rendering/Core/Property/Constants";
+import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
+let vtkObj = ref({});
 const props = defineProps({
-  formInline: {
-    type: Object,
-    // default: '',
-  },
+  region: "shanghai",
+  count: 0,
 });
-
 watch(
-  props,
+  props.count,
   (newVal, oldVal) => {
-    console.log("值改变了", newVal, oldVal);
+    console.log("值改变了", newVal.count, oldVal.count);
   },
   { deep: true }
 ); //深度监视
 onMounted(() => {
-  console.log()
+  const rootContainer = document.getElementById("left");
+  rootContainer.style.position = 'relative';
+  rootContainer.style.height = '100%';
+  vtkObj.value.fcon=createFireControl();
+  vtkObj.value.renderWindow = vtkRenderWindowWithControlBar.newInstance();
+  vtkObj.value.renderWindow.setContainer(rootContainer);
+  vtkObj.value.jgMapper = vtkMapper.newInstance();
+  vtkObj.value.jgActor = vtkActor.newInstance();
+  vtkObj.value.jgActor.getProperty().setRepresentation(Representation.SURFACE); //面    
+  vtkObj.value.jgActor.setMapper(vtkObj.value.jgMapper);
+  vtkObj.value.renderWindow.getRenderer().addActor(vtkObj.value.jgActor);
+  // vtkObj.value.renderWindow.getRenderer().resetCamera();
+  // vtkObj.value.renderWindow.getRenderWindow().render();
+  vtkGridRead(7);
 
 });
-watch
-</script>
-<style scoped>
 
-</style>
+function vtkGridRead(aid) {
+  const fcon =vtkObj.value.fcon;
+  fcon.aid = aid;
+  fcon
+    .initGemetry()
+    .then((result) => {
+      console.log(fcon.polydata);
+      vtkScalarRead(50);//步数
+    })
+    .catch((err) => {});
+}
+
+function vtkScalarRead(step) {
+  const fcon =vtkObj.value.fcon;
+  fcon
+    .getScalrsByStep(step)
+    .then((result) => {
+      console.log(fcon.scalar);
+      vtkShow();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+function vtkShow() {
+  console.log("执行了");
+  // const scalarBarActor = vtkmodel.scalarBarActor;
+  const mapper = vtkObj.value.jgMapper;
+  const actor = vtkObj.value.jgActor;
+  const fcon =vtkObj.value.fcon;
+  // console.log(formInline.value.region);
+  const scalarArray =fcon.scalar.get("Height");
+  if(!scalarArray||!fcon.polydata){
+    return;
+  }
+  // console.log("scalarArray:", scalarArray);
+  const dataArray = vtkDataArray.newInstance({
+    name: "Height",
+    size: fcon.polydata.getNumberOfPoints(),
+  });
+  // console.log(dataArray);
+  dataArray.setData(scalarArray);
+  fcon.polydata.getPointData().setScalars(dataArray);
+  mapper.setInputData(fcon.polydata);
+  mapper.clearColorArrays(); //强制重建颜色
+  // actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
+  // vtkmodel.renderer.resetCamera();
+  vtkObj.value.renderWindow.getRenderer().resetCamera();
+  vtkObj.value.renderWindow.getRenderWindow().render();
+}
+
+onBeforeUnmount(()=>{
+  vtkObj.value.jgMapper.delete();
+  vtkObj.value.jgActor.delete();
+  vtkObj.value.renderWindow.delete();
+  vtkObj.value=null;
+});
+watch;
+</script>
+<style scoped></style>

src/view/result/resultRight.vue

@@ -1,11 +1,19 @@
 <template>
-    <!--结果对比 -->
-    <div  class="resultRight">
+  <!--结果对比 -->
+  <div id="right" class="resultRight">
     <h1>我是resultRightt组件</h1>
-    </div>
-  </template>
-  <script setup>
-  import { onMounted, ref } from 'vue';
+  </div>
+</template>
+<script setup>
+import { onMounted, onUnmounted, onBeforeUnmount, ref } from "vue";
+import vtkRenderWindowWithControlBar from "@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar";
+import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
+import vtkConeSource from "@kitware/vtk.js/Filters/Sources/ConeSource";
+import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
+import { createFireControl } from "@/control/fireControl.js";
+import { Representation } from "@kitware/vtk.js/Rendering/Core/Property/Constants";
+import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
+let vtkObj = ref({});
 const props = defineProps({
   formInline: {
     type: Object,
@@ -13,6 +21,81 @@ const props = defineProps({
   },
 });
 
+onMounted(() => {
+  const rootContainer = document.getElementById("right");
+  rootContainer.style.position = 'relative';
+  rootContainer.style.height = '100%';
+  vtkObj.value.fcon=createFireControl();
+  vtkObj.value.renderWindow = vtkRenderWindowWithControlBar.newInstance();
+  vtkObj.value.renderWindow.setContainer(rootContainer);
+  vtkObj.value.jgMapper = vtkMapper.newInstance();
+  vtkObj.value.jgActor = vtkActor.newInstance();
+  vtkObj.value.jgActor.getProperty().setRepresentation(Representation.SURFACE); //面    
+  vtkObj.value.jgActor.setMapper(vtkObj.value.jgMapper);
+  vtkObj.value.renderWindow.getRenderer().addActor(vtkObj.value.jgActor);
+  // vtkObj.value.renderWindow.getRenderer().resetCamera();
+  // vtkObj.value.renderWindow.getRenderWindow().render();
+  vtkGridRead(7);
+});
+
+function vtkGridRead(aid) {
+  const fcon =vtkObj.value.fcon;
+  fcon.aid = aid;
+  fcon
+    .initGemetry()
+    .then((result) => {
+      console.log(fcon.polydata);
+      vtkScalarRead(50);//步数
+    })
+    .catch((err) => {});
+}
+
+function vtkScalarRead(step) {
+  const fcon =vtkObj.value.fcon;
+  fcon
+    .getScalrsByStep(step)
+    .then((result) => {
+      console.log(fcon.scalar);
+      vtkShow();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+function vtkShow() {
+  console.log("执行了");
+  // const scalarBarActor = vtkmodel.scalarBarActor;
+  const mapper = vtkObj.value.jgMapper;
+  const actor = vtkObj.value.jgActor;
+  const fcon =vtkObj.value.fcon;
+  // console.log(formInline.value.region);
+  const scalarArray =fcon.scalar.get("Height");
+  if(!scalarArray||!fcon.polydata){
+    return;
+  }
+  // console.log("scalarArray:", scalarArray);
+  const dataArray = vtkDataArray.newInstance({
+    name: "Height",
+    size: fcon.polydata.getNumberOfPoints(),
+  });
+  // console.log(dataArray);
+  dataArray.setData(scalarArray);
+  fcon.polydata.getPointData().setScalars(dataArray);
+  mapper.setInputData(fcon.polydata);
+  mapper.clearColorArrays(); //强制重建颜色
+  // actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
+  // vtkmodel.renderer.resetCamera();
+  vtkObj.value.renderWindow.getRenderer().resetCamera();
+  vtkObj.value.renderWindow.getRenderWindow().render();
+}
+
+onBeforeUnmount(()=>{
+  vtkObj.value.jgMapper.delete();
+  vtkObj.value.jgActor.delete();
+  vtkObj.value.renderWindow.delete();
+  vtkObj.value=null;
+});
+
+
 </script>
-<style scoped>
-</style>
+<style scoped></style>