结果渲染

src/view/components/tanimation.vue

@@ -48,42 +48,42 @@
     <!-- 监测点 -->
     <!-- 监测点 -->
     <div class="l_Dialog">
-    <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 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_header color1">
-          <span class="jc_tile">锋面定义</span>
+        <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>
+          <div style="height: 200px"></div>
         </div>
-        <div style="height: 200px"></div>
       </div>
     </div>
-    </div>
   </div>
 </template>
 
@@ -125,13 +125,13 @@ import vtkSphereSource from "@kitware/vtk.js/Filters/Sources/SphereSource";
 
 import vtkAxesActor from "@kitware/vtk.js/Rendering/Core/AxesActor";
 import vtkCubeAxesActor from "@kitware/vtk.js/Rendering/Core/CubeAxesActor";
-import vtk2DShape from '@kitware/vtk.js/Filters/Sources/Arrow2DSource';
-import vtkTriangleFilter from '@kitware/vtk.js/Filters/General/TriangleFilter';;
-
+import vtk2DShape from "@kitware/vtk.js/Filters/Sources/Arrow2DSource";
+import vtkTriangleFilter from "@kitware/vtk.js/Filters/General/TriangleFilter";
 
 const renderWindowWith = vtkFullScreenRenderWindow.newInstance();
+// renderWindowWith.setBackground(22, 26, 42);
 const renderer = renderWindowWith.getRenderer();
-// renderer.setBackground([0.1,0.2,0]);
+// renderer.setBackground(0, 0, 0);
 const renderWindow = renderWindowWith.getRenderWindow();
 const resetCamera = renderer.resetCamera;
 const render = renderWindow.render;
@@ -139,9 +139,7 @@ const mapper = vtkMapper.newInstance();
 const actor = vtkActor.newInstance();
 const reader = vtkUnstructuredDataReader.newInstance();
 const scalarBarActor = vtkScalarBarActor.newInstance();
-actor.getProperty().setRepresentation(Representation.SURFACE);//面
-
-
+actor.getProperty().setRepresentation(Representation.SURFACE); //面
 
 let emit = defineEmits([]);
 const props = defineProps({
@@ -205,48 +203,103 @@ const tableData2 = [
 const handleCurrentChange = ({ row, rowIndex }) => {
   console.log(row);
 };
+
+const min = ref(0);
+const max = ref(1);
+
+const job = ref({
+  jid: 0, //	任务ID
+  aid: 0, //	事故ID
+  starttime: "", //	结束时间
+  endtime: "", //	开始时间
+  state: "", //	状态
+  faildes: "", //	失败原因
+  dt: "", //	时间步长
+  dx: "", //	空间步长
+  reportstep: "", //	输出步长
+  interactionstep: "", //	交互步长
+  acctime: "", //	事故开始时间
+  totaltime: "", //	模拟时长
+  coids: "", //	物理属性ID逗号分隔
+});
+
 // aid获取
 const accident5 = (val) => {
   aid.value = val;
   console.log(aid.value);
   console.log(11111);
+  console.log("props.classradio",props.classradio);
   if (props.classradio == "Fire") {
     monitor.value = true;
   } else if (props.classradio == "Water") {
     monitor.value = true;
   }
-  fireRead()
+  //获取任务信息
+  readJob();
+  // fireRead()
 };
 
 const init = () => {};
 onMounted(() => {
-  console.log();
   init();
-  const timestamp = new Date().getTime();
-  timestampToTime(timestamp);
-  newtime.value = timestampToTime(timestamp);
+ 
 });
+const fcon = createFireControl();
+async function readJob() {
+  const params = {
+    transCode: "D10017",
+    aid: aid.value,
+  };
+  await request(params)
+    .then((res) => {
+      if (res.returnCode == "000000000") {
+        //成功
+        job.value = res;
+        console.log("job", job.value);
+        reddate(new Date());
+      } else {
+        ElMessage({
+          message: res.returnMsg,
+          type: "error",
+        });
+      }
+    })
+    .catch((err) => {});
+}
+//获取当前时间最近的步数 读取文件
+//当前时间=开始时间+输出步长*输出次数
+function reddate(date){
+  //当前时间
+  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;
+  }
+  vtkRead();
+}
 
-const min = ref(0);
-const max = ref(1);
-function fireRead() {
-  var fcon = createFireControl();
-  fcon.aid=aid.value;
+function vtkRead() {
+  fcon.aid = aid.value;
   fcon
     .initGemetry()
     .then((result) => {
-        console.log(fcon.polydata);
+      console.log(fcon.polydata);
       fcon
-        .getScalrsByStep(1)
+        .getScalrsByStep(fcon.step)
         .then((result) => {
-         console.log(fcon.scalar);
-          const scalarArray = fcon.scalar.get("Pressure");
+          console.log(fcon.scalar);
+          const scalarArray = fcon.scalar.get("Height");
           console.log("scalarArray:", scalarArray);
-          const dataArray = vtkDataArray.newInstance({ 
-            name: "Pressure",
+          const dataArray = vtkDataArray.newInstance({
+            name: "Height",
             size: fcon.polydata.getNumberOfPoints(),
           });
-          console.log(dataArray)
+          console.log(dataArray);
           dataArray.setData(scalarArray);
           fcon.polydata.getPointData().setScalars(dataArray);
           mapper.setInputData(fcon.polydata);
@@ -259,7 +312,7 @@ function fireRead() {
           renderWindow.render();
         })
         .catch((err) => {
-            console.log(err)
+          console.log(err);
         });
     })
     .catch((err) => {});
@@ -271,7 +324,7 @@ function initScalarBar() {
   // console.log("lut:", lut.getRange());
   // Change the number of ticks (TODO: add numberOfTicks to ScalarBarActor)
   scalarBarActor.setGenerateTicks(generateTicks(5));
-  scalarBarActor.setAxisLabel("Pressure");
+  scalarBarActor.setAxisLabel("Height");
   scalarBarActor.setDrawAboveRangeSwatch(true);
   //修改设条颜色
   const ctf = vtkColorTransferFunction.newInstance();