切换

src/view/myIndex.vue

@@ -18,14 +18,14 @@
         <div class="leftdialong" v-show="dialogVisible">
           <div class="time">当前时间：{{ count }}</div>
           <div class="block">
-            <el-form-item label="标   量">
+            <el-form-item label="物理量">
               <el-cascader
                 transfer="true"
+                placeholder="灾情/物理量"
                 clearable
                 :popper-append-to-body="false"
                 v-model="arrvalue"
                 :options="options"
-                :props="props"
                 @change="handleChange($event)"
               ></el-cascader>
             </el-form-item>
@@ -99,12 +99,12 @@ import vtkLookupTable from "@kitware/vtk.js/Common/Core/LookupTable";
 import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
 import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
 import { I } from "@kitware/vtk.js/macros2.js";
-const props = {};
+// const props = {};
 let time = 3 * 60;
 let listArray = reactive([
   { id: 0, img: p1, name: "灾情演化" },
   { id: 1, img: p2, name: "演化过程" },
-  { id: 2, img: p3, name: "动画" },
+  { id: 2, img: p3, name: "灾情历史" },
   { id: 3, img: p4, name: "日志" },
 ]);
 let dialogVisible = ref(false);
@@ -143,7 +143,7 @@ let options = reactive([
     children: [
       {
         value: "Height",
-        label: "水位高度源",
+        label: "水位高度",
       },
     ],
   },
@@ -185,7 +185,7 @@ const mapper = vtkMapper.newInstance();
 // mapper.setScalarModeToUsePointData();
 const actor = vtkActor.newInstance();
 const reader = vtkUnstructuredDataReader.newInstance();
-
+const scalarBarActor = vtkScalarBarActor.newInstance();
 // 用来修改状态、触发更新的函数
 function inOpacity() {
   opacity.value = opacity.value + 0.1;
@@ -238,12 +238,12 @@ function play(time) {
       setTimeout(resolve, timeout);
     });
   let timer = async (timeout) => {
-    while (count.value < endtime.value) {
-      if (isstop.value == true) {
+    while (count.value < endtime.value&&isstop.value) {
+      // if (isstop.value == true) {
         await sleep(time);
         changeScalar();
         count.value++;
-      }
+      // }
     }
   };
   timer(time);
@@ -280,6 +280,7 @@ function changeScalar() {
   dataArray.setData(scalarArray);
   getMinMax(scalarArray);
   mapper.setScalarRange(min.value, max.value); //设置范围
+  scalarBarActor.setAxisLabel(arrvalue[1]);
   polydata.getPointData().setScalars(dataArray);
   mapper.clearColorArrays(); //强制重建颜色
   actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
@@ -333,7 +334,7 @@ onMounted(() => {
     const polydata = reader.getOutputData(0);
     const scalars = reader.getOutputData(1);
     const scalarArray = scalars.get(arrvalue[1]);
-    console.log("scalarArray:", scalarArray);
+    // console.log("scalarArray:", scalarArray);
     const dataArray = vtkDataArray.newInstance({
       name: arrvalue[1],
       size: polydata.getNumberOfPoints(),
@@ -348,10 +349,10 @@ onMounted(() => {
     renderer.addActor(actor);
 
     let lut = mapper.getLookupTable();
-    const scalarBarActor = vtkScalarBarActor.newInstance();
+    
     renderer.addActor(scalarBarActor);
     scalarBarActor.setScalarsToColors(lut);
-    console.log("lut:", lut.getRange());
+    // console.log("lut:", lut.getRange());
     // Change the number of ticks (TODO: add numberOfTicks to ScalarBarActor)
     scalarBarActor.setGenerateTicks(generateTicks(5));
     scalarBarActor.setAxisLabel(arrvalue[1]);