后处理检测点

src/control/fireControl.js

@@ -10,7 +10,7 @@ export class fireControl {
         //总步数
         this.stepsum=10;
         //url
-        this._url ="http://192.168.0.131:8187/TransServlet?channelNo=service&clientToken=e47b87eec69545559d1e81e56626da68&userId=5f06c8bc77234f969d13e160b54c27e3&aid=";
+        this._url =import.meta.env.VITE_BASE_URL+"/TransServlet?channelNo=service&clientToken=e47b87eec69545559d1e81e56626da68&userId=5f06c8bc77234f969d13e160b54c27e3&aid=";
         //几何数据
         this.polydata;
         //Scalars 数据 array[setp]=Map(scalars,value[points]=array),
@@ -43,6 +43,7 @@ export class fireControl {
             this.scalar=scalarMap;
         });
     }
+
     
 }
 

src/view/components/tanimation.vue

@@ -14,28 +14,40 @@
             <div class="newtime">{{ newtime }}</div>
           </el-tab-pane>
           <el-tab-pane label="指定时间" name="second">
-            <div class="newtime">{{ newtime }}</div></el-tab-pane
-          >
+            <div class="newtime">
+              <el-date-picker
+                v-model="zdtime"
+                type="datetime"
+                placeholder="Select date and time"
+                @change="zdtimechange"
+              /></div
+          ></el-tab-pane>
           <el-tab-pane label="动画演示" name="third">
             <div class="animation_s">
-              <el-slider :max="endtime" :min="starttime"></el-slider>
+              <el-slider
+                :max="endtime"
+                :min="starttime"
+                v-model="count"
+                @change="sliderchange"
+              >
+              </el-slider>
               <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
               <div class="tanniu">
                 <ul>
                   <li>
-                    <el-image :src="t1" fit="contain"></el-image>
+                    <el-image :src="t1" fit="contain" @click="Prev"></el-image>
                     <p>后退</p>
                   </li>
                   <li>
-                    <el-image :src="t2" fit="contain"></el-image>
+                    <el-image :src="t2" fit="contain" @click="play(500)"></el-image>
                     <p>播放</p>
                   </li>
                   <li>
-                    <el-image :src="t3" fit="contain"></el-image>
+                    <el-image :src="t3" fit="contain" @click="suspend"></el-image>
                     <p>暂停</p>
                   </li>
                   <li>
-                    <el-image :src="t4" fit="contain"></el-image>
+                    <el-image :src="t4" fit="contain" @click="increment"></el-image>
                     <p>快进</p>
                   </li>
                 </ul>
@@ -47,42 +59,44 @@
     </el-aside>
     <!-- 监测点 -->
     <!-- 监测点 -->
-      <div class="jiancedian asideg1" v-show="monitor">
-        <div class="jc_header he_pading color1">
-          <el-form-item label="污染物选择:">
-            <el-select v-model="formInline.region" 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>
-        <div class="jc_content tablecolor">
-          <div class="jc_padding">
-            <div class="xian">
-              <el-table
-                :data="tableData2"
-                style="width: 100%"
-                @current-change="handleCurrentChange"
-                :row-class-name="tableRowClassName"
-                :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
-              >
-                <el-table-column prop="date" label="监测点名称" width="120" />
-                <el-table-column prop="name" label="水位(m)" />
-                <el-table-column prop="name" label="流量(m³/s)" />
-              </el-table>
-            </div>
-          </div>
-          <div class="jc_header color1">
-            <span class="jc_tile">锋面定义</span>
+    <div class="jiancedian asideg1" v-show="monitor">
+      <div class="jc_header he_pading color1">
+        <el-form-item label="污染物选择:">
+          <el-select
+            v-model="formInline.region"
+            @change="regionchange"
+            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>
+      <div class="jc_content tablecolor">
+        <div class="jc_padding">
+          <div class="xian">
+            <el-table
+              :data="tableData2"
+              style="width: 100%"
+              @current-change="handleCurrentChange"
+              :row-class-name="tableRowClassName"
+              :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
+            >
+              <el-table-column prop="name" label="监测点名称" width="120" />
+              <el-table-column prop="value" label="值" />
+            </el-table>
           </div>
-          <div style="height: 200px"></div>
         </div>
+        <div class="jc_header color1">
+          <span class="jc_tile">锋面定义</span>
+        </div>
+        <div style="height: 200px"></div>
       </div>
-   
+    </div>
   </div>
 </template>
 
@@ -140,6 +154,20 @@ const reader = vtkUnstructuredDataReader.newInstance();
 const scalarBarActor = vtkScalarBarActor.newInstance();
 actor.getProperty().setRepresentation(Representation.SURFACE); //面
 
+scalarBarActor.setGenerateTicks(generateTicks(5));
+scalarBarActor.setDrawAboveRangeSwatch(true);
+//修改设条颜色
+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);
+mapper.setLookupTable(ctf);
+const lut = mapper.getLookupTable();
+scalarBarActor.setScalarsToColors(lut);
+renderer.addActor(scalarBarActor);
+
 let emit = defineEmits([]);
 const props = defineProps({
   classradio: {
@@ -148,19 +176,19 @@ const props = defineProps({
   },
 });
 
+const count = ref(0);
+const isstop = ref(false);
+
 const monitor = ref(false);
-const strResultFormatlist = ref([
-  { id: 0, name: "灾情演化", value: ".vtk" },
-  { id: 1, name: "演化过程", value: ".mesh" },
-]);
+const strResultFormatlist = ref([]);
 let url = ref("http://localhost:8080/?aid=0");
 // 推演结果
 const resultactiveName = ref("first");
 let newtime = ref("");
+
 let starttime = ref(1);
 let endtime = ref(60);
 let timenum = ref(2);
-let isstop = ref(false);
 let aid = ref();
 const percentage = ref(20);
 const customColor = ref("#409eff");
@@ -171,34 +199,16 @@ const tableRowClassName = ({ row, rowIndex }) => {
   return "oddRow";
 };
 const formInline = ref({
-  user: "11",
   region: "shanghai",
-  date: "",
 });
 
 const tableData = ref([]);
-const tableData2 = [
-  {
-    date: "站点1",
-    name: "2",
-    address: "10",
-  },
-  {
-    date: "站点1",
-    name: "2",
-    address: "10",
-  },
-  {
-    date: "站点1",
-    name: "2",
-    address: "10",
-  },
+const tableData2 = ref([
   {
-    date: "站点1",
-    name: "2",
-    address: "10",
+    name: "",
+    value: "",
   },
-];
+]);
 const handleCurrentChange = ({ row, rowIndex }) => {
   console.log(row);
 };
@@ -220,14 +230,119 @@ const job = ref({
   acctime: "", //	事故开始时间
   totaltime: "", //	模拟时长
   coids: "", //	物理属性ID逗号分隔
+  cocodes: "", //物理属性code逗号分隔
 });
 
+const zdtime = ref("");
+const chvals = ref([]);
+const cocodes = ref([]);
+const cocodeIndex = ref(0);
+//滑块
+function sliderchange(val) {
+  fcon.step = count.value;
+  vtkScalarRead();
+}
+//播放
+function play(time) {
+  isstop.value = true;
+  const sleep = (timeout = time) =>
+    new Promise((resolve, reject) => {
+      setTimeout(resolve, timeout);
+    });
+  let timer = async (timeout) => {
+    while (count.value < endtime.value && isstop.value) {
+      if (isstop.value == true) {
+        await sleep(time);
+        count.value++;
+        fcon.step = count.value;
+        vtkScalarRead();
+      }
+    }
+  };
+  timer(time);
+}
+function increment() {
+  isstop.value = false;
+  if (count.value == endtime.value) {
+    return;
+  }
+  count.value++;
+  fcon.step = count.value;
+  vtkScalarRead();
+}
+//暂停
+function suspend() {
+  isstop.value = false;
+}
+//回到上一页
+function Prev() {
+  isstop.value = false;
+  count.value--;
+  fcon.step = count.value;
+  vtkScalarRead();
+}
+
+function zdtimechange() {
+  const zdtimestamp = Date.parse(zdtime.value);
+  const zdtimeDate = new Date(zdtimestamp);
+  reddate(zdtimeDate);
+  vtkScalarRead();
+}
+function regionchange() {
+  for (let index = 0; index < cocodes.value.length; index++) {
+    if (formInline.value.region == cocodes.value[index].cocode) {
+      cocodeIndex.value = index + 1;
+      break;
+    }
+  }
+  tableData2.value = [];
+  for (let i = 0; i < chvals.value.length; i++) {
+    let chval = chvals.value[i];
+    if (cocodeIndex.value == 1) {
+      tableData2.value.push({
+        name: chval.chcode,
+        value: chval.v1,
+      });
+    }
+    if (cocodeIndex.value == 2) {
+      tableData2.value.push({
+        name: chval.chcode,
+        value: chval.v2,
+      });
+    }
+    if (cocodeIndex.value == 3) {
+      tableData2.value.push({
+        name: chval.chcode,
+        value: chval.v3,
+      });
+    }
+    if (cocodeIndex.value == 4) {
+      tableData2.value.push({
+        name: chval.chcode,
+        value: chval.v4,
+      });
+    }
+    if (cocodeIndex.value == 5) {
+      tableData2.value.push({
+        name: chval.chcode,
+        value: chval.v5,
+      });
+    }
+    if (cocodeIndex.value == 6) {
+      tableData2.value.push({
+        name: chval.chcode,
+        value: chval.v6,
+      });
+    }
+  }
+  vtkShow();
+}
 // aid获取
 const accident5 = (val) => {
   aid.value = val;
   console.log(aid.value);
   console.log(11111);
-  console.log("props.classradio",props.classradio);
+  console.log("props.classradio", props.classradio);
   if (props.classradio == "Fire") {
     monitor.value = true;
   } else if (props.classradio == "Water") {
@@ -241,9 +356,50 @@ const accident5 = (val) => {
 const init = () => {};
 onMounted(() => {
   init();
- 
 });
 const fcon = createFireControl();
+//监测点数据获取
+async function getMonitor() {
+  const params = {
+    transCode: "D10016",
+    aid: aid.value,
+    step: fcon.step,
+  };
+  await request(params)
+    .then((res) => {
+      if (res.returnCode == "000000000") {
+        cocodes.value = res.cocodes;
+        chvals.value = res.chvals;
+        formInline.value.region = cocodes.value[0].cocode;
+        cocodeIndex.value = 1;
+        strResultFormatlist.value = [];
+        for (let index = 0; index < cocodes.value.length; index++) {
+          const cocode = cocodes.value[index];
+          strResultFormatlist.value.push({
+            id: index,
+            name: cocode.cocode,
+            value: cocode.cocode,
+          });
+        }
+        tableData2.value = [];
+        for (let i = 0; i < chvals.value.length; i++) {
+          let chval = chvals.value[i];
+          tableData2.value.push({
+            name: chval.chcode,
+            value: chval.v1,
+          });
+        }
+        vtkGridRead();
+      } else {
+        ElMessage({
+          message: res.returnMsg,
+          type: "error",
+        });
+      }
+    })
+    .catch((err) => {});
+}
+//获取任务信息
 async function readJob() {
   const params = {
     transCode: "D10017",
@@ -254,8 +410,9 @@ async function readJob() {
       if (res.returnCode == "000000000") {
         //成功
         job.value = res;
-        console.log("job", job.value);
+
         reddate(new Date());
+        getMonitor();
       } else {
         ElMessage({
           message: res.returnMsg,
@@ -267,76 +424,67 @@ async function readJob() {
 }
 //获取当前时间最近的步数 读取文件
 //当前时间=开始时间+输出步长*输出次数
-function reddate(date){
+function reddate(date) {
   //当前时间
-  const timestamp =date.getTime();
+  const timestamp = date.getTime();
   newtime.value = timestampToTime(timestamp);
   const accstamp = Date.parse(job.value.acctime);
-  var timeDifference = timestamp - accstamp;
-  fcon.stepsum=parseInt(job.value.totaltime)/parseInt(job.value.reportstep);
-  if(timeDifference<parseInt(job.value.totaltime)){//最长时间范围
-   fcon.step=timeDifference/parseInt(job.value.reportstep);
-  }else{
-    fcon.step=fcon.stepsum;
+  var timeDifference = parseInt((timestamp - accstamp) / 1000);
+  fcon.stepsum = parseInt(job.value.totaltime) / parseInt(job.value.reportstep);
+  max.value = fcon.stepsum;
+  if (timeDifference < parseInt(job.value.totaltime)) {
+    //最长时间范围
+    fcon.step = parseInt(timeDifference / parseInt(job.value.reportstep));
+  } else {
+    fcon.step = fcon.stepsum;
   }
-  vtkRead();
+  count.value = fcon.step;
 }
 
-function vtkRead() {
+function vtkGridRead() {
   fcon.aid = aid.value;
   fcon
     .initGemetry()
     .then((result) => {
       console.log(fcon.polydata);
-      fcon
-        .getScalrsByStep(fcon.step)
-        .then((result) => {
-          console.log(fcon.scalar);
-          const scalarArray = fcon.scalar.get("Height");
-          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);
-          getMinMax(scalarArray);
-          mapper.setScalarRange(min.value, max.value); //设置范围
-          actor.setMapper(mapper);
-          renderer.addActor(actor);
-          initScalarBar();
-          renderer.resetCamera();
-          renderWindow.render();
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+      vtkScalarRead();
     })
     .catch((err) => {});
 }
-function initScalarBar() {
-  const scalarBarActor = vtkScalarBarActor.newInstance();
-  let lut = mapper.getLookupTable();
-  scalarBarActor.setScalarsToColors(lut);
-  // console.log("lut:", lut.getRange());
-  // Change the number of ticks (TODO: add numberOfTicks to ScalarBarActor)
-  scalarBarActor.setGenerateTicks(generateTicks(5));
-  scalarBarActor.setAxisLabel("Height");
-  scalarBarActor.setDrawAboveRangeSwatch(true);
-  //修改设条颜色
-  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);
-  mapper.setLookupTable(ctf);
-  lut = mapper.getLookupTable();
-  scalarBarActor.setScalarsToColors(lut);
-  renderer.addActor(scalarBarActor);
+function vtkScalarRead() {
+  fcon
+    .getScalrsByStep(fcon.step)
+    .then((result) => {
+      console.log(fcon.scalar);
+      vtkShow();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+function vtkShow() {
+  console.log(formInline.value.region);
+  const scalarArray = fcon.scalar.get(formInline.value.region);
+  console.log("scalarArray:", scalarArray);
+  const dataArray = vtkDataArray.newInstance({
+    name: formInline.value.region,
+    size: fcon.polydata.getNumberOfPoints(),
+  });
+  console.log(dataArray);
+  dataArray.setData(scalarArray);
+  fcon.polydata.getPointData().setScalars(dataArray);
+  mapper.setInputData(fcon.polydata);
+  getMinMax(scalarArray);
+  mapper.setScalarRange(min.value, max.value); //设置范围
+  actor.setMapper(mapper);
+  renderer.addActor(actor);
+  scalarBarActor.setAxisLabel(formInline.value.region);
+  mapper.clearColorArrays(); //强制重建颜色
+  // actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
+  renderer.resetCamera();
+  renderWindow.render();
 }
+
 function getMinMax(scalars) {
   // console.log("getMinMax:",scalars);
   min.value = scalars[0];
@@ -676,7 +824,7 @@ defineExpose({ monitor, accident5 });
   position: fixed;
   right: 0;
   top: 70px;
-  background-color:rgba(13, 22, 57, 0.60) ;
+  background-color: rgba(13, 22, 57, 0.6);
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   border-radius: 4px 4px 4px 4px;
   border: 1px solid;
@@ -987,8 +1135,8 @@ defineExpose({ monitor, accident5 });
 ::-webkit-scrollbar-track {
   background-color: rgba(104, 173, 255, 0.4); /* 设置滚动条轨道背景颜色 */
 }
-.result{
-background-color: rgba(13, 22, 57, 0.60);
+.result {
+  background-color: rgba(13, 22, 57, 0.6);
 }
 .result .el-tabs__item {
   padding: 17.5px !important;