3.19

src/view/components/InfoAnimation.vue

@@ -1,7 +1,7 @@
 <template>
-  <!-- 所有弹出框 -->   <!-- 推演结果 -->
+  <!-- 所有弹出框 -->
+  <!-- 推演结果 -->
   <div class="l_Dialog">
- 
     <el-aside width="278px" class="L_aside1 asideg asidegbg leftbgimg" v-show="monitor">
       <div class="result result1">
         <el-tabs
@@ -56,9 +56,7 @@
             </div>
           </el-tab-pane>
         </el-tabs>
-        
       </div>
-       
     </el-aside>
     <!-- 监测点 -->
     <!-- 监测点 -->
@@ -117,21 +115,19 @@
                   <el-table-column prop="value" label="水位(m)" />
                   <el-table-column prop="value2" label="流量" />
                 </el-table>
-          
               </div>
             </div>
             <div class="jc_header color1">
-          <span class="jc_tile">信息展示</span>
-        </div>
-        <div class="msgval" style="height: 200px">
-        <ul>
-          <li  v-for="(item, i) in msgval"  :key="i"
-                 ><span class="namemgd">{{ item.name }}</span>
-                 <span class="namemgd2">{{ item.value}}</span>
+              <span class="jc_tile">信息展示</span>
+            </div>
+            <div class="msgval" style="height: 200px">
+              <ul>
+                <li v-for="(item, i) in msgval" :key="i">
+                  <span class="namemgd">{{ item.name }}</span>
+                  <span class="namemgd2">{{ item.value }}</span>
                 </li>
-        
-        </ul>
-        </div>
+              </ul>
+            </div>
           </div>
           <!-- <div class="mgsnoe" style="height: 200px"></div> -->
         </el-collapse-item>
@@ -166,7 +162,7 @@ const props = defineProps({
   },
 });
 let tableHeight = ref(400);
-let danwei=ref("");
+let danwei = ref("");
 let newcount = ref(0);
 const count = ref(0);
 const isstop = ref(false);
@@ -184,7 +180,7 @@ let aid = ref();
 let timing = ref(null);
 let timing3 = ref(null);
 let timing2 = ref(null);
-let jgSelectPointId=ref(0);
+let jgSelectPointId = ref(0);
 const percentage = ref(20);
 const customColor = ref("#409eff");
 const tableRowClassName = ({ row, rowIndex }) => {
@@ -227,9 +223,9 @@ const job = ref({
   coids: "", //	物理属性ID逗号分隔
   cocodes: "", //物理属性code逗号分隔
 });
-let msgval=ref([]);
+let msgval = ref([]);
 //选择结果存储
-const selobj=ref([]);
+const selobj = ref([]);
 const zdtime = ref("");
 const chvals = ref([]);
 const cocodes = ref([]);
@@ -238,9 +234,9 @@ const cocodeIndex = ref(0);
 const cocodeIsInit = ref("false");
 //滑块
 function sliderchange(val) {
-  newcount.value=count.value;
+  newcount.value = count.value;
   fcon.step = count.value;
-  console.log( count.value );
+  console.log(count.value);
   // console.log(count.value);
   // vtkScalarRead();
   // getMonitor();
@@ -258,7 +254,7 @@ function play(time) {
         await sleep(time);
         count.value++;
         fcon.step = count.value;
-        newcount.value=count.value;
+        newcount.value = count.value;
         // vtkScalarRead();
         // getMonitor();
       }
@@ -272,7 +268,7 @@ function increment() {
     return;
   }
   count.value++;
-  newcount.value=count.value;
+  newcount.value = count.value;
   fcon.step = count.value;
   // vtkScalarRead();
   // getMonitor();
@@ -286,7 +282,7 @@ function Prev() {
   isstop.value = false;
   count.value--;
   fcon.step = count.value;
-  newcount.value=count.value;
+  newcount.value = count.value;
   // vtkScalarRead();
   // getMonitor();
 }
@@ -298,15 +294,16 @@ function zdtimechange() {
   // vtkScalarRead();
   // getMonitor();
 }
-function chengeMonitor(){
-    for (let index = 0; index < cocodes.value.length; index++) {
+function chengeMonitor() {
+  for (let index = 0; index < cocodes.value.length; index++) {
     if (formInline.value.region == cocodes.value[index].cocode) {
       cocodeIndex.value = index + 1;
       break;
     }
   }
   tableData2.value = [];
-  if (props.classradio == "Fire") {//火
+  if (props.classradio == "Fire") {
+    //火
     for (let i = 0; i < chvals.value.length; i++) {
       let chval = chvals.value[i];
       if (cocodeIndex.value == 1) {
@@ -346,55 +343,60 @@ function chengeMonitor(){
         });
       }
     }
-  }else{//水
+  } else {
+    //水
     for (let i = 0; i < chvals.value.length; i++) {
       let chval = chvals.value[i];
-    
-        tableData2.value.push({
-          name: chval.chcode,
-          value: chval.v1,
-          value2: chval.v2,
-        });
-      
-    
+
+      tableData2.value.push({
+        name: chval.chcode,
+        value: chval.v1,
+        value2: chval.v2,
+      });
     }
   }
-
 }
 function regionchange(val) {
   // console.log(val)
-  let newMap = new Map([['Temperature', '(℃)'], ['Pressure', '(kg/s)'],['Pressure', '(kg/s)'],['CO2', '(%)'],['CO2', '(%)'],['H2S', '(%)'],['Flow', '(Pa)'],['Height', 'm']])
+  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;
     }
-})
+  });
   chengeMonitor();
   vtkShow();
 }
 // aid获取
-const accident5 = (val,key) => {
-
+const accident5 = (val, key) => {
   aid.value = val;
   resultactiveName.value = "first";
-if(key=='4'){
-  timehandclick();
-  if (props.classradio == "Fire") {
-    monitor.value = true;
-  } else if (props.classradio == "Water") {
-    monitor.value = true;
+  if (key == "4") {
+    timehandclick();
+    if (props.classradio == "Fire") {
+      monitor.value = true;
+    } else if (props.classradio == "Water") {
+      monitor.value = true;
+    }
+    cocodeIsInit.value = false;
+    //获取任务信息
+    readJob();
+    console.log(resultactiveName.value);
+  } else {
+    clearInterval(timing.value);
   }
-  cocodeIsInit.value = false;
-  //获取任务信息
-  readJob();
-  console.log(  resultactiveName.value)
-}else{
-  clearInterval(timing.value);
-}
-
 
-//   // fireRead()
+  //   // fireRead()
 };
 
 const fcon = createFireControl();
@@ -424,14 +426,22 @@ async function getMonitor() {
           cocodeIsInit.value = true;
           cocodes.value = res.cocodes;
           formInline.value.region = cocodes.value[0].cocode;
-          let newMap = new Map([['Temperature', '(℃)'], ['Pressure', '(kg/s)'],['Pressure', '(kg/s)'],['CO2', '(%)'],['CO2', '(%)'],['H2S', '(%)'],['Flow', '(Pa)'],['Height', 'm']])
+          let newMap = new Map([
+            ["Temperature", "(℃)"],
+            ["Pressure", "(kg/s)"],
+            ["Pressure", "(kg/s)"],
+            ["CO2", "(%)"],
+            ["CO2", "(%)"],
+            ["H2S", "(%)"],
+            ["Flow", "(Pa)"],
+            ["Height", "m"],
+          ]);
           newMap.forEach((value, key) => {
-            if(key== formInline.value.region ){
-            danwei.value=key+value;
+            if (key == formInline.value.region) {
+              danwei.value = key + value;
             }
-
-      })
-         // danwei.value=cocodes.value[0].cocode;
+          });
+          // danwei.value=cocodes.value[0].cocode;
           cocodeIndex.value = 1;
           strResultFormatlist.value = [];
           for (let index = 0; index < cocodes.value.length; index++) {
@@ -455,23 +465,24 @@ async function getMonitor() {
     .catch((err) => {});
 }
 //选择结果定时器
-function jgSelect(){
-    timing2.value = setInterval(() => {//定时器
-      if(jgSelectPointId.value!=vtkmodel.selectJgPointId){
-    //  console.log("pointid",vtkmodel.selectJgPointId);//选择的点数据
-          //获取点对应的Scalar
-          jgSelectPointId.value=vtkmodel.selectJgPointId;
-          selobj.value=[];
-          for (const key of fcon.scalar.keys()) {
-            selobj.value.push({
-              name:key,
-              value: fcon.scalar.get(key)[vtkmodel.selectJgPointId]
-            });
-          }
-         // console.log(vtkmodel.selectJgPointId,selobj.value)
-          msgval.value=selobj.value;
-          console.log( msgval.value);
+function jgSelect() {
+  timing2.value = setInterval(() => {
+    //定时器
+    if (jgSelectPointId.value != vtkmodel.selectJgPointId) {
+      //  console.log("pointid",vtkmodel.selectJgPointId);//选择的点数据
+      //获取点对应的Scalar
+      jgSelectPointId.value = vtkmodel.selectJgPointId;
+      selobj.value = [];
+      for (const key of fcon.scalar.keys()) {
+        selobj.value.push({
+          name: key,
+          value: fcon.scalar.get(key)[vtkmodel.selectJgPointId],
+        });
       }
+      // console.log(vtkmodel.selectJgPointId,selobj.value)
+      msgval.value = selobj.value;
+      console.log(msgval.value);
+    }
   }, 1000);
 }
 //获取任务信息
@@ -549,9 +560,11 @@ function vtkShow() {
 
   // console.log(formInline.value.region);
 
-
+  if (!fcon.scalar) {
+    return;
+  }
   const scalarArray = fcon.scalar.get(formInline.value.region);
-  if(!scalarArray||!fcon.polydata){
+  if (!scalarArray || !fcon.polydata) {
     return;
   }
   // console.log("scalarArray:", scalarArray);
@@ -565,7 +578,10 @@ function vtkShow() {
   // fcon.polydata.getPointData().setOpacity(dataArray);
   mapper.setInputData(fcon.polydata);
   getMinMax(scalarArray);
-   mapper.setScalarRange(parseFloat(min.value.toFixed(3)), parseFloat(max.value.toFixed(3))); //设置范围
+  mapper.setScalarRange(
+    parseFloat(min.value.toFixed(3)),
+    parseFloat(max.value.toFixed(3))
+  ); //设置范围
   // actor.setMapper(mapper);
   scalarBarActor.setAxisLabel(formInline.value.region);
   mapper.clearColorArrays(); //强制重建颜色
@@ -592,13 +608,13 @@ function getMinMax(scalars) {
 }
 
 const handleClick = (Tab, val) => {
-  resultactiveName.value=Tab.props.name;
+  resultactiveName.value = Tab.props.name;
   timehandclick();
 };
-const inittime=()=>{
+const inittime = () => {
   clearInterval(timing.value);
-}
-const timehandclick=()=>{
+};
+const timehandclick = () => {
   if (resultactiveName.value == "first") {
     timing.value = setInterval(() => {
       const timestamp = new Date().getTime();
@@ -606,19 +622,16 @@ const timehandclick=()=>{
       // console.log(   newtime.value );
       reddate(new Date());
     }, 1000);
- 
-  } else if ( resultactiveName.value == "second") {
+  } else if (resultactiveName.value == "second") {
     clearInterval(timing.value);
-  } else if ( resultactiveName.value== "third") {
+  } else if (resultactiveName.value == "third") {
     clearInterval(timing.value);
   }
-}
+};
 onBeforeUnmount(() => {
   clearInterval(timing.value);
 });
-onMounted(() => {
-
-});
+onMounted(() => {});
 
 watch(
   newcount,
@@ -1157,7 +1170,6 @@ defineExpose({ monitor, accident5 });
   width: 100%;
 }
 
-
 /* .el-input__inner::placeholder {
                 color: #fff !important;
             } */
@@ -1514,23 +1526,22 @@ defineExpose({ monitor, accident5 });
 .result1 .el-collapse-item__content {
   padding: 0 !important;
 }
-.msgval{
+.msgval {
   padding: 18px 10px;
 }
-.msgval ul li{
+.msgval ul li {
   display: flex;
 }
-.msgval ul li span{
+.msgval ul li span {
   display: inline-block;
   flex: 1;
-color: #fff;
-
+  color: #fff;
 }
-.namemgd{
+.namemgd {
   text-align: left;
   padding-left: 50px;
 }
-.namemgd2{
+.namemgd2 {
   text-align: left;
 }
 </style>

src/view/result/resultLeft.vue

@@ -1,12 +1,14 @@
 <template>
   <!--结果对比 -->
   <div id="left" class="result_left1">
-    <h1>我是Left组件</h1>
-    <h1>{{ props.region }} {{ props.count }}</h1>
+    <!-- <h1>我是Left组件</h1>
+    <h1>{{ props.region }} {{ props.count }} {{ props.aid }}</h1> -->
   </div>
 </template>
 
 <script setup>
+import * as d3 from "d3-scale";
+import { formatDefaultLocale } from "d3-format";
 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";
@@ -14,51 +16,114 @@ 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 vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
+import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
 import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
-let vtkObj = ref({});
+let vtkObj = {};
+let resetCameraFlag = false;
+let max, min;
 const props = defineProps({
-  region: "shanghai",
-  count: 0,
+  region: "Temperature",
+  count: 50,
+  aid: 49,
 });
 watch(
-  props.count,
+  () => [props.region, props.count, props.aid],
   (newVal, oldVal) => {
-    console.log("值改变了", newVal.count, oldVal.count);
+    if (newVal[1] != oldVal[1]) {
+      console.log("步数改变", newVal[1], oldVal[1]);
+      if (vtkObj.fcon) {
+        vtkScalarRead(props.count); //步数
+      }
+    }
+    if (newVal[0] != oldVal[0]) {
+      console.log("标量改变", newVal[0], oldVal[0]);
+      if (vtkObj.fcon) {
+        vtkShow();
+      }
+    }
+    if (newVal[2] != oldVal[2]) {
+      console.log("aid改变", newVal[0], oldVal[0]);
+      if (vtkObj.fcon) {
+        vtkGridRead(props.aid);
+      }
+    }
   },
   { deep: true }
 ); //深度监视
 onMounted(() => {
+  // vtkObj.renderWindow.getRenderer().resetCamera();
+  // vtkObj.renderWindow.getRenderWindow().render();
+  // vtkGridRead(7);
+  //  console.log("事故ID改变", newVal[1], oldVal[1]);
   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);
+  rootContainer.style.position = "relative";
+  rootContainer.style.width = "100%";
+  rootContainer.style.height = "100%";
+  vtkObj.fcon = createFireControl();
+  vtkObj.renderWindow = vtkRenderWindowWithControlBar.newInstance();
+  vtkObj.renderWindow.setContainer(rootContainer);
+  vtkObj.jgMapper = vtkMapper.newInstance();
+  vtkObj.jgActor = vtkActor.newInstance();
+  vtkObj.jgActor.getProperty().setRepresentation(Representation.SURFACE); //面
+  vtkObj.jgActor.setMapper(vtkObj.jgMapper);
+  vtkObj.renderWindow.getRenderer().addActor(vtkObj.jgActor);
 
+  vtkObj.scalarBarActor = vtkScalarBarActor.newInstance();
+  vtkObj.scalarBarActor.setGenerateTicks(generateTicks(5));
+  vtkObj.scalarBarActor.setDrawAboveRangeSwatch(true);
+  vtkObj.scalarBarActor.setDrawNanAnnotation(false);
+  vtkObj.scalarBarActor.setBoxPosition([1, 0]);
+  // 修改设条颜色
+  const ctf = vtkColorTransferFunction.newInstance();
+  ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
+  ctf.addRGBPoint(1.0, 0.0, 1.0, 0.5);
+  ctf.addRGBPoint(2.0, 0.0, 1.0, 0.0);
+  ctf.addRGBPoint(3.0, 1.0, 0.5, 0.0);
+  ctf.addRGBPoint(4.0, 1.0, 0.0, 0.0);
+  vtkObj.jgMapper.setLookupTable(ctf);
+  const lut = vtkObj.jgMapper.getLookupTable();
+  vtkObj.scalarBarActor.setScalarsToColors(lut);
+  vtkObj.renderWindow.getRenderer().addActor(vtkObj.scalarBarActor);
+  vtkGridRead(props.aid);
+  // vtkObj.renderWindow.getRenderer().resetCamera();
+  // vtkObj.renderWindow.getRenderWindow().render();
 });
+function generateTicks(numberOfTicks) {
+  return (helper) => {
+    const lastTickBounds = helper.getLastTickBounds();
+    // compute tick marks for axes
+    const scale = d3
+      .scaleLinear()
+      .domain([0.0, 1.0])
+      .range([lastTickBounds[0], lastTickBounds[1]]);
+    const samples = scale.ticks(numberOfTicks);
+    const ticks = samples.map((tick) => scale(tick));
+    // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works
+    formatDefaultLocale({ minus: "\u002D" });
+    const format = scale.tickFormat(ticks[0], ticks[ticks.length - 1], numberOfTicks);
+    const tickStrings = ticks
+      .map(format)
+      .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace
+    helper.setTicks(ticks);
+    helper.setTickStrings(tickStrings);
+  };
+}
 
 function vtkGridRead(aid) {
-  const fcon =vtkObj.value.fcon;
+  const fcon = vtkObj.fcon;
   fcon.aid = aid;
   fcon
     .initGemetry()
     .then((result) => {
       console.log(fcon.polydata);
-      vtkScalarRead(50);//步数
+      vtkScalarRead(props.count); //步数
     })
     .catch((err) => {});
 }
 
 function vtkScalarRead(step) {
-  const fcon =vtkObj.value.fcon;
+  const fcon = vtkObj.fcon;
   fcon
     .getScalrsByStep(step)
     .then((result) => {
@@ -71,37 +136,58 @@ function vtkScalarRead(step) {
 }
 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){
+  const scalarBarActor = vtkObj.scalarBarActor;
+  const mapper = vtkObj.jgMapper;
+  const actor = vtkObj.jgActor;
+  const fcon = vtkObj.fcon;
+  console.log(props.region);
+  const scalarArray = fcon.scalar.get(props.region);
+  if (!scalarArray || !fcon.polydata) {
     return;
   }
   // console.log("scalarArray:", scalarArray);
   const dataArray = vtkDataArray.newInstance({
-    name: "Height",
+    name: props.region,
     size: fcon.polydata.getNumberOfPoints(),
   });
   // console.log(dataArray);
   dataArray.setData(scalarArray);
   fcon.polydata.getPointData().setScalars(dataArray);
   mapper.setInputData(fcon.polydata);
+  getMinMax(scalarArray);
+  mapper.setScalarRange(parseFloat(min.toFixed(3)), parseFloat(max.toFixed(3))); //设置范围
+  scalarBarActor.setAxisLabel(props.region);
+
   mapper.clearColorArrays(); //强制重建颜色
-  // actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
+  actor.getProperty().setOpacity(props.count); //设置错误的透明度使得页面重新加载  不设置不刷新页面
   // vtkmodel.renderer.resetCamera();
-  vtkObj.value.renderWindow.getRenderer().resetCamera();
-  vtkObj.value.renderWindow.getRenderWindow().render();
+  if (!resetCameraFlag) {
+    vtkObj.renderWindow.getRenderer().resetCamera();
+    resetCameraFlag = true;
+  }
+  vtkObj.renderWindow.getRenderWindow().render();
 }
-
-onBeforeUnmount(()=>{
-  vtkObj.value.jgMapper.delete();
-  vtkObj.value.jgActor.delete();
-  vtkObj.value.renderWindow.delete();
-  vtkObj.value=null;
+function getMinMax(scalars) {
+  // console.log("getMinMax:",scalars);
+  min = scalars[0];
+  max = scalars[0];
+  for (let index = 0; index <= scalars.length; index++) {
+    let scalar = scalars[index];
+    if (min > scalar) {
+      min = scalar;
+    }
+    if (max < scalar) {
+      max = scalar;
+    }
+  }
+  // console.log("max，min:", max.value, min.value);
+}
+onBeforeUnmount(() => {
+  vtkObj.scalarBarActor.delete();
+  vtkObj.jgMapper.delete();
+  vtkObj.jgActor.delete();
+  vtkObj.renderWindow.delete();
+  vtkObj = null;
 });
-watch;
 </script>
 <style scoped></style>

src/view/result/resultRight.vue

@@ -1,10 +1,12 @@
 <template>
   <!--结果对比 -->
   <div id="right" class="resultRight">
-    <h1>我是resultRightt组件</h1>
+    <!-- <h1>我是resultRightt组件</h1> -->
   </div>
 </template>
 <script setup>
+import * as d3 from "d3-scale";
+import { formatDefaultLocale } from "d3-format";
 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";
@@ -12,46 +14,114 @@ 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 vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
+import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
 import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
-let vtkObj = ref({});
+let vtkObj = {};
+let resetCameraFlag = false;
+let max, min;
 const props = defineProps({
-  formInline: {
-    type: Object,
-    // default: '',
-  },
+  region: "Temperature",
+  count: 50,
+  aid: 49,
 });
-
+watch(
+  () => [props.region, props.count, props.aid],
+  (newVal, oldVal) => {
+    if (newVal[1] != oldVal[1]) {
+      console.log("步数改变", newVal[1], oldVal[1]);
+      if (vtkObj.fcon) {
+        vtkScalarRead(props.count); //步数
+      }
+    }
+    if (newVal[0] != oldVal[0]) {
+      console.log("标量改变", newVal[0], oldVal[0]);
+      if (vtkObj.fcon) {
+        vtkShow();
+      }
+    }
+    if (newVal[2] != oldVal[2]) {
+      console.log("aid改变", newVal[0], oldVal[0]);
+      if (vtkObj.fcon) {
+        vtkGridRead(props.aid);
+      }
+    }
+  },
+  { deep: true }
+); //深度监视
 onMounted(() => {
+  // vtkObj.renderWindow.getRenderer().resetCamera();
+  // vtkObj.renderWindow.getRenderWindow().render();
+  // vtkGridRead(7);
+  //  console.log("事故ID改变", newVal[1], oldVal[1]);
   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);
+  rootContainer.style.position = "relative";
+  rootContainer.style.width = "100%";
+  rootContainer.style.height = "100%";
+  vtkObj.fcon = createFireControl();
+  vtkObj.renderWindow = vtkRenderWindowWithControlBar.newInstance();
+  vtkObj.renderWindow.setContainer(rootContainer);
+  vtkObj.jgMapper = vtkMapper.newInstance();
+  vtkObj.jgActor = vtkActor.newInstance();
+  vtkObj.jgActor.getProperty().setRepresentation(Representation.SURFACE); //面
+  vtkObj.jgActor.setMapper(vtkObj.jgMapper);
+  vtkObj.renderWindow.getRenderer().addActor(vtkObj.jgActor);
+
+  vtkObj.scalarBarActor = vtkScalarBarActor.newInstance();
+  vtkObj.scalarBarActor.setGenerateTicks(generateTicks(5));
+  vtkObj.scalarBarActor.setDrawAboveRangeSwatch(true);
+  vtkObj.scalarBarActor.setDrawNanAnnotation(false);
+  vtkObj.scalarBarActor.setBoxPosition([1, 0]);
+  // 修改设条颜色
+  const ctf = vtkColorTransferFunction.newInstance();
+  ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
+  ctf.addRGBPoint(1.0, 0.0, 1.0, 0.5);
+  ctf.addRGBPoint(2.0, 0.0, 1.0, 0.0);
+  ctf.addRGBPoint(3.0, 1.0, 0.5, 0.0);
+  ctf.addRGBPoint(4.0, 1.0, 0.0, 0.0);
+  vtkObj.jgMapper.setLookupTable(ctf);
+  const lut = vtkObj.jgMapper.getLookupTable();
+  vtkObj.scalarBarActor.setScalarsToColors(lut);
+  vtkObj.renderWindow.getRenderer().addActor(vtkObj.scalarBarActor);
+  vtkGridRead(props.aid);
+  // vtkObj.renderWindow.getRenderer().resetCamera();
+  // vtkObj.renderWindow.getRenderWindow().render();
 });
+function generateTicks(numberOfTicks) {
+  return (helper) => {
+    const lastTickBounds = helper.getLastTickBounds();
+    // compute tick marks for axes
+    const scale = d3
+      .scaleLinear()
+      .domain([0.0, 1.0])
+      .range([lastTickBounds[0], lastTickBounds[1]]);
+    const samples = scale.ticks(numberOfTicks);
+    const ticks = samples.map((tick) => scale(tick));
+    // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works
+    formatDefaultLocale({ minus: "\u002D" });
+    const format = scale.tickFormat(ticks[0], ticks[ticks.length - 1], numberOfTicks);
+    const tickStrings = ticks
+      .map(format)
+      .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace
+    helper.setTicks(ticks);
+    helper.setTickStrings(tickStrings);
+  };
+}
 
 function vtkGridRead(aid) {
-  const fcon =vtkObj.value.fcon;
+  const fcon = vtkObj.fcon;
   fcon.aid = aid;
   fcon
     .initGemetry()
     .then((result) => {
       console.log(fcon.polydata);
-      vtkScalarRead(50);//步数
+      vtkScalarRead(props.count); //步数
     })
     .catch((err) => {});
 }
 
 function vtkScalarRead(step) {
-  const fcon =vtkObj.value.fcon;
+  const fcon = vtkObj.fcon;
   fcon
     .getScalrsByStep(step)
     .then((result) => {
@@ -64,38 +134,58 @@ function vtkScalarRead(step) {
 }
 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){
+  const scalarBarActor = vtkObj.scalarBarActor;
+  const mapper = vtkObj.jgMapper;
+  const actor = vtkObj.jgActor;
+  const fcon = vtkObj.fcon;
+  console.log(props.region);
+  const scalarArray = fcon.scalar.get(props.region);
+  if (!scalarArray || !fcon.polydata) {
     return;
   }
   // console.log("scalarArray:", scalarArray);
   const dataArray = vtkDataArray.newInstance({
-    name: "Height",
+    name: props.region,
     size: fcon.polydata.getNumberOfPoints(),
   });
   // console.log(dataArray);
   dataArray.setData(scalarArray);
   fcon.polydata.getPointData().setScalars(dataArray);
   mapper.setInputData(fcon.polydata);
+  getMinMax(scalarArray);
+  mapper.setScalarRange(parseFloat(min.toFixed(3)), parseFloat(max.toFixed(3))); //设置范围
+  scalarBarActor.setAxisLabel(props.region);
+
   mapper.clearColorArrays(); //强制重建颜色
-  // actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
+  actor.getProperty().setOpacity(props.count); //设置错误的透明度使得页面重新加载  不设置不刷新页面
   // vtkmodel.renderer.resetCamera();
-  vtkObj.value.renderWindow.getRenderer().resetCamera();
-  vtkObj.value.renderWindow.getRenderWindow().render();
+  if (!resetCameraFlag) {
+    vtkObj.renderWindow.getRenderer().resetCamera();
+    resetCameraFlag = true;
+  }
+  vtkObj.renderWindow.getRenderWindow().render();
 }
-
-onBeforeUnmount(()=>{
-  vtkObj.value.jgMapper.delete();
-  vtkObj.value.jgActor.delete();
-  vtkObj.value.renderWindow.delete();
-  vtkObj.value=null;
+function getMinMax(scalars) {
+  // console.log("getMinMax:",scalars);
+  min = scalars[0];
+  max = scalars[0];
+  for (let index = 0; index <= scalars.length; index++) {
+    let scalar = scalars[index];
+    if (min > scalar) {
+      min = scalar;
+    }
+    if (max < scalar) {
+      max = scalar;
+    }
+  }
+  // console.log("max，min:", max.value, min.value);
+}
+onBeforeUnmount(() => {
+  vtkObj.scalarBarActor.delete();
+  vtkObj.jgMapper.delete();
+  vtkObj.jgActor.delete();
+  vtkObj.renderWindow.delete();
+  vtkObj = null;
 });
-
-
 </script>
 <style scoped></style>