2024312

src/control/vtkModel.js

@@ -17,12 +17,28 @@ import {
 
 
 import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
-import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
-
+import vtkLineSource from '@kitware/vtk.js/Filters/Sources/LineSource';
 import vtkSphereMapper from '@kitware/vtk.js/Rendering/Core/SphereMapper';
 
 export class VtkModel {
   constructor() {
+
+    //当前显示 模版 还是结果
+    this.isJg = false;
+
+    /**
+     * 选择点线 
+     */
+    this.isSelectNode = false;
+    /**
+     * 选择管道 
+     */
+    this.isSelectPipe = false;
+
+    this.selectObj = null;
+    this.validNodes = [];//节点数据
+    this.pipes = [];//管道数据
+
     this.renderWindowWith = vtkFullScreenRenderWindow.newInstance();
     this.renderer = this.renderWindowWith.getRenderer();
     this.renderWindow = this.renderWindowWith.getRenderWindow();
@@ -32,53 +48,42 @@ export class VtkModel {
     this.mapper = vtkMapper.newInstance();
     this.actor = vtkActor.newInstance();
     this.actor.getProperty().setRepresentation(Representation.SURFACE); //线    
-    this.actor.getProperty().setColor([0,0.0,1]);
+    this.actor.getProperty().setColor(WHITE);
     this.mapper.setInputData(this.polyData);
     this.actor.setMapper(this.mapper);
-    // this.renderer.addActor(this.actor);
 
+    //点数据
+    this.actor2 = vtkActor.newInstance();
+    this.actor2.getProperty().setRepresentation(Representation.POINTS); //点   
+    this.actor2.getProperty().setColor(WHITE);
+    this.actor2.getProperty().setPointSize(2);
+    this.actor2.setMapper(this.mapper);
 
- 
 
-    //点数据
-    // this.actor2 = vtkActor.newInstance();
-    // this.actor2.getProperty().setRepresentation(Representation.POINTS); //点   
-    // this.actor2.getProperty().setColor([2,0,0]);
-    // this.actor2.getProperty().setPointSize(2);
-    // this.actor2.setMapper(this.mapper);  
-    // this.renderer.addActor(this.actor2);
-
-    // const sphereSource = vtkSphereSource.newInstance({
-    //   center: [0, 0, 0],
-    //   height: 1.0,
-    // });
-    // sphereSource.setThetaResolution(64);
-    // sphereSource.setPhiResolution(32);
-
-
-
-  
-    // this.pointerSource = vtkSphereSource.newInstance({
-    //   phiResolution: 15,
-    //   thetaResolution: 15,
-    //   radius: 0.01,
-    // });
-    // this.pointerMapper = vtkMapper.newInstance();
-    // this.pointerActor = vtkActor.newInstance();
-    // this.pointerActor.setMapper(this.pointerMapper);
-    // this.pointerMapper.setInputConnection(this.pointerSource.getOutputPort());
-    // this.renderer.addActor(this.pointerActor);
 
+    //选取
+    this.lastActor = null;
+    this.nodeActors = []; //节点actor 数据
+    this.pipeActors = []; //管道actor 数据
+    this.interactor = this.renderer.getRenderWindow().getInteractor();
+    this.apiSpecificRenderWindow = this.interactor.getView();
+    this.hardwareSelector = this.apiSpecificRenderWindow.getSelector();
+    this.hardwareSelector.setCaptureZValues(true);
+    this.hardwareSelector.setFieldAssociation(FieldAssociations.FIELD_ASSOCIATION_POINTS);
+    document.addEventListener("mousemove", throttleMouseHandler);
 
     //结果数据
     this.jgActor = vtkActor.newInstance();
     this.jgMapper = vtkMapper.newInstance();
-    this.jgActor.getProperty().setRepresentation(Representation.SURFACE); //线    
+    this.jgActor.getProperty().setRepresentation(Representation.SURFACE); //面    
+
+
     this.scalarBarActor = vtkScalarBarActor.newInstance();
     this.scalarBarActor.setGenerateTicks(this.generateTicks(5));
     this.scalarBarActor.setDrawAboveRangeSwatch(true);
-
-    //修改设条颜色
+    this.scalarBarActor.setDrawNanAnnotation(false);
+    this.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);
@@ -88,18 +93,9 @@ export class VtkModel {
     this.jgMapper.setLookupTable(ctf);
     const lut = this.jgMapper.getLookupTable();
     this.scalarBarActor.setScalarsToColors(lut);
+    this.jgActor.setMapper(this.jgMapper);
+
 
-    //选取
-    this.lastActor=null;
-    this.nodeActors =[]; //节点actor 数据
-    this.pipeActors =[]; //管道actor 数据
-    this.interactor = this.renderer.getRenderWindow().getInteractor();
-    this.apiSpecificRenderWindow = this.interactor.getView();
-    this.hardwareSelector = this.apiSpecificRenderWindow.getSelector();
-    this.hardwareSelector.setCaptureZValues(true);
-    this.hardwareSelector.setFieldAssociation(FieldAssociations.FIELD_ASSOCIATION_POINTS);
-    // document.removeEventListener("mousemove", throttleMouseHandler);
-    
   }
   generateTicks(numberOfTicks) {
     return (helper) => {
@@ -121,30 +117,145 @@ export class VtkModel {
       helper.setTickStrings(tickStrings);
     };
   }
-  clearModeAddJg(){
-    this.renderer.addActor(this.jgActor);
-    this.renderer.addActor(this.scalarBarActor);
 
+  modelInit(validNodes, pipes) {
+    this.validNodes = validNodes;
+    this.pipes = pipes;
+    this.modelCreate();
+  }
+  modelCreate() {
+    console.log("modelInit..");
+    const points = this.polyData.getPoints();
+    const lines = this.polyData.getLines();
+
+    //无节点actor
+    this.validNodes.forEach((node) => {
+      points.insertNextPoint(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
+    });
+    //无管道actor
+    this.pipes.forEach((pipe) => {
+      let sid = this.indexIdByPipeNodeId(pipe.snId);
+      let eid = this.indexIdByPipeNodeId(pipe.enId);
+      lines.insertNextCell([sid, eid]);
+    });
+
+    //有节点actors
+    const sphereSource = vtkSphereSource.newInstance({
+      center: [0, 0, 0],
+      radius: 4.0,
+    });
+    const mapper = vtkMapper.newInstance();
+    mapper.setInputConnection(sphereSource.getOutputPort());
+    this.validNodes.forEach((node) => {
+      const actor = vtkActor.newInstance();
+      actor.setMapper(mapper);
+      actor.setPosition(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
+      actor.getProperty().setColor(WHITE);
+      const nodeActor = {};
+      nodeActor.node = node;
+      nodeActor.actor = actor;
+      this.nodeActors.push(nodeActor);
+    });
+
+    //有管道actors
+    this.pipes.forEach((pipe) => {
+      const lineSource = vtkLineSource.newInstance();
+      let point1 = this.pointByPipeNodeId(pipe.snId);
+      let point2 = this.pointByPipeNodeId(pipe.enId);
+      lineSource.setPoint1(point1);
+      lineSource.setPoint2(point2);
+      lineSource.setResolution(12);
+      const actor = vtkActor.newInstance();
+      const mapper = vtkMapper.newInstance();
+      actor.setMapper(mapper);
+      actor.getProperty().setLineWidth(3);//设置线宽
+      actor.getProperty().setColor(WHITE);
+      mapper.setInputConnection(lineSource.getOutputPort());
+      const pipeActor = {};
+      pipeActor.pipe = pipe;
+      pipeActor.actor = actor;
+      this.pipeActors.push(pipeActor);
+    });
+
+    this.modelShow();
+    this.renderer.resetCamera();
+    this.renderWindow.render();
+  }
+
+  modelClearShow() {
+    this.renderer.removeActor(this.actor);
+    this.renderer.removeActor(this.actor2);
     this.nodeActors.forEach((nodeActor) => {
       this.renderer.removeActor(nodeActor.actor);
     });
     this.pipeActors.forEach((pipeActor) => {
       this.renderer.removeActor(pipeActor.actor);
-   });
-    this.renderer.removeActor(this.actor);
-  }
-  clearJgAddMode(){
-    this.renderer.addActor(this.actor);
-    this.nodeActors.forEach((nodeActor) => {
-      this.renderer.addActor(nodeActor.actor);
     });
-    this.pipeActors.forEach((pipeActor) => {
-      this.renderer.addActor(pipeActor.actor);
-   });
+  }
+  modelShow() {
+    this.modelClearShow();
+    if (!this.isSelectNode) {//不选择节点
+      this.renderer.addActor(this.actor2);
+    }
+    if (!this.isSelectPipe) {//不选择管道
+      this.renderer.addActor(this.actor);
+    }
+    if (this.isSelectNode) {//选择节点
+      this.nodeActors.forEach((nodeActor) => {
+        this.renderer.addActor(nodeActor.actor);
+      });
+    }
+    if (this.isSelectPipe) {//选择管道
+      this.pipeActors.forEach((pipeActor) => {
+        this.renderer.addActor(pipeActor.actor);
+      });
+    }
+  }
+  selectNodes() {
+    this.isSelectNode = true;
+    this.isSelectPipe = false;
+    this.modelShow();
+    this.renderWindow.render();
+  }
+  selectPipes() {
+    this.isSelectNode = false;
+    this.isSelectPipe = true;
+    this.modelShow();
+    this.renderWindow.render();
+  }
+  /**
+ * 根据id 获取对应的编号
+ */
+  indexIdByPipeNodeId(nid) {
+    for (let index = 0; index < this.validNodes.length; index++) {
+      const node = this.validNodes[index];
+      if (node.id == nid) {
+        return index;
+      }
+    }
+    return 0;
+  }
+  pointByPipeNodeId(nid) {
+    for (let index = 0; index < this.validNodes.length; index++) {
+      const node = this.validNodes[index];
+      if (node.id == nid) {
+        return [parseFloat(node.x), parseFloat(node.y), parseFloat(node.z)];
+      }
+    }
+    return 0;
+  }
+  clearModeAddJg() {
+    this.renderer.addActor(this.jgActor);
+    this.renderer.addActor(this.scalarBarActor);
+    this.modelClearShow();
+    this.isJg = true; //显示结果
+  }
+  clearJgAddMode() {
     this.renderer.removeActor(this.scalarBarActor);
     this.renderer.removeActor(this.jgActor);
-  } 
-
+    this.modelShow();
+    this.isJg = false; //不显示结果
+  }
 }
 
 function pickOnMouseEvent(event) {
@@ -177,16 +288,16 @@ function eventToWindowXY(event) {
 }
 function processSelections(selections) {
   if (!selections || selections.length === 0) {//没有选择
-    if(vtkmodel.lastActor==null){
+    if (vtkmodel.lastActor == null) {
 
-    }else{
-      vtkmodel.lastActor.getProperty().setColor(WHITE);
-      vtkmodel.renderWindow.render();
+    } else {
+      // vtkmodel.lastActor.getProperty().setColor(WHITE);
+      // vtkmodel.renderWindow.render();
     }
-    vtkmodel.lastActor=null;
+    // vtkmodel.lastActor = null;
     return;
   }
- 
+
   const {
     worldPosition: rayHitWorldPosition,
     compositeID,
@@ -194,28 +305,52 @@ function processSelections(selections) {
     propID,
     attributeID,
   } = selections[0].getProperties();
-  const input = prop.getMapper().getInputData();
-  if(vtkmodel.lastActor!=null){
+  if (vtkmodel.lastActor != null) {
     vtkmodel.lastActor.getProperty().setColor(WHITE);
     vtkmodel.renderWindow.render();
   }
-  vtkmodel.lastActor=prop;
-  prop.getProperty().setColor(GREEN);
   vtkmodel.nodeActors.forEach((nodeActor) => {
-     if(prop==nodeActor.actor){
-      //  console.log(nodeActor.node);
-    
-     }
-   });
-   vtkmodel.pipeActors.forEach((pipeActor) => {
-   if(prop==pipeActor.actor){
-       console.log(pipeActor.pipe);
-     }
+    if (prop == nodeActor.actor) {
+      vtkmodel.selectObj = nodeActor.node;
+      prop.getProperty().setColor(GREEN);
+      vtkmodel.lastActor = prop;
+    }
   });
-    vtkmodel.renderWindow.render();
+  vtkmodel.pipeActors.forEach((pipeActor) => {
+    if (prop == pipeActor.actor) {
+      vtkmodel.selectObj = pipeActor.pipe;
+      prop.getProperty().setColor(GREEN);
+      vtkmodel.lastActor = prop;
+    }
+  });
+
+  if (vtkmodel.isJg) {//结果数据选择cell
+    //选择Cell
+    const input = prop.getMapper().getInputData();
+    if (!input.getCells()) {
+      input.buildCells();
+    }
+    const cellPoints = input.getCellPoints(attributeID);
+    if (cellPoints) {
+      const pointIds = cellPoints.cellPointIds;
+      // Find the closest cell point, and use that as cursor position
+      const points = Array.from(pointIds).map((pointId) =>
+        input.getPoints().getPoint(pointId)
+      );
+      const scalarDataArray=input.getPointData().getScalars().getData();
+      pointIds.forEach(pointId=>{
+        console.log(input.getPointData().getScalars().getName());
+        console.log(scalarDataArray[pointId]);//节点标量数据
+      });
+      
+    }
+  }
+  vtkmodel.renderWindow.render();
+
+  // console.log(vtkmodel.selectObj);
 }
 const throttleMouseHandler = throttle(pickOnMouseEvent, 20);
-const WHITE = [1, 1, 1];
+const WHITE = [0, 0, 1];
 const GREEN = [0.1, 0.8, 0.1];
 const vtkmodel = new VtkModel();
 export { vtkmodel };

src/view/components/InfoAnimation.vue

@@ -2,21 +2,35 @@
   <!-- 所有弹出框 -->
   <div class="l_Dialog">
     <!-- 推演结果 -->
-    <el-aside width="278px" class="L_aside asideg asidegbg leftbgimg " v-show="monitor">
+    <el-aside width="278px" class="L_aside asideg asidegbg leftbgimg" v-show="monitor">
       <div class="result result1">
-        <el-tabs v-model="resultactiveName" type="card" class="demo-tabs" @tab-click="handleClick">
+        <el-tabs
+          v-model="resultactiveName"
+          type="card"
+          class="demo-tabs"
+          @tab-click="handleClick"
+        >
           <el-tab-pane label="当前时间" name="first">
             <div class="newtime">{{ newtime }}</div>
           </el-tab-pane>
           <el-tab-pane label="指定时间" name="second">
             <div class="newtime">
-              <el-date-picker v-model="zdtime" type="datetime" placeholder="Select date and time"
-                @change="zdtimechange" />
+              <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" v-model="count" @change="sliderchange">
+              <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">
@@ -46,15 +60,26 @@
     </el-aside>
     <!-- 监测点 -->
     <!-- 监测点 -->
-    <div class="demo-collapse jiancedian asideg1 jc_header  collapseeion jianstyle" v-show="monitor">
+    <div
+      class="demo-collapse jiancedian asideg1 jc_header collapseeion jianstyle"
+      v-show="monitor"
+    >
       <el-collapse accordion v-model="activeNames">
         <el-collapse-item name="1">
           <template #title>
             <div class="he_pading color1">
-              <el-form-item label="物理量:" v-if="props.classradio=='Fire'">
-                <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-form-item label="物理量:" v-if="props.classradio == 'Fire'">
+                <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 class="woter" v-else>
@@ -65,23 +90,32 @@
           </template>
           <div class="jc_content tablecolor">
             <div class="jc_padding">
-              <div class="xian"  v-if="props.classradio=='Fire'">
-                <el-table :data="tableData2" style="width: 100%" @current-change="handleCurrentChange"
-                  :row-class-name="tableRowClassName" :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }">
+              <div class="xian" v-if="props.classradio == 'Fire'">
+                <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="formInline.region" />
                 </el-table>
               </div>
-              <div class="xian"  v-else>
-                <el-table :data="tableData2" style="width: 100%" @current-change="handleCurrentChange"
-                  :row-class-name="tableRowClassName" :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }">
+              <div class="xian" v-else>
+                <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>
           </div>
-     
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -101,12 +135,11 @@ import t2 from "@/assets/img/t2.png";
 import t3 from "@/assets/img/t3.png";
 import t4 from "@/assets/img/t4.png";
 
-
-import { vtkmodel } from "@/control/vtkModel.js"
-import { createFireControl } from "@/control/fireControl.js"
+import { vtkmodel } from "@/control/vtkModel.js";
+import { createFireControl } from "@/control/fireControl.js";
 import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
-let labelval=ref('SOS');
-const activeNames = ref(['1'])
+let labelval = ref("SOS");
+const activeNames = ref(["1"]);
 let emit = defineEmits([]);
 const props = defineProps({
   classradio: {
@@ -115,7 +148,7 @@ const props = defineProps({
   },
 });
 
-let newcount =ref(0);
+let newcount = ref(0);
 const count = ref(0);
 const isstop = ref(false);
 const monitor = ref(false);
@@ -129,7 +162,7 @@ let starttime = ref(1);
 let endtime = ref(60);
 let timenum = ref(2);
 let aid = ref();
-let timing = ref(null)
+let timing = ref(null);
 const percentage = ref(20);
 const customColor = ref("#409eff");
 const tableRowClassName = ({ row, rowIndex }) => {
@@ -236,7 +269,7 @@ function zdtimechange() {
   getMonitor();
 }
 function regionchange() {
-  console.log(22222)
+  console.log(22222);
   for (let index = 0; index < cocodes.value.length; index++) {
     if (formInline.value.region == cocodes.value[index].cocode) {
       cocodeIndex.value = index + 1;
@@ -298,18 +331,24 @@ const accident5 = (val) => {
   cocodeIsInit.value = false;
   //获取任务信息
   readJob();
+  if (resultactiveName.value == "first") {
+    timing.value = setInterval(() => {
+      const timestamp = new Date().getTime();
+      newtime.value = timestampToTime(timestamp);
+      // reddate(new Date());
+    }, 1000);
+  } else {
+    timing.value = setInterval(() => {
+      const timestamp = new Date().getTime();
+      newtime.value = timestampToTime(timestamp);
+    }, 1000);
+  }
+
   // fireRead()
 };
 
-const init = () => { };
-onMounted(() => {
-  init();
- 
-});
-
 const fcon = createFireControl();
 
-
 //监测点数据获取
 async function getMonitor() {
   const params = {
@@ -320,7 +359,6 @@ async function getMonitor() {
   await request(params)
     .then((res) => {
       if (res.returnCode == "000000000") {
-
         chvals.value = res.chvals;
         tableData2.value = [];
         for (let i = 0; i < chvals.value.length; i++) {
@@ -332,7 +370,7 @@ async function getMonitor() {
         }
         //监测点类型初始化
         if (!cocodeIsInit.value) {
-          console.log(2222)
+          console.log(2222);
           cocodeIsInit.value = true;
           cocodes.value = res.cocodes;
           formInline.value.region = cocodes.value[0].cocode;
@@ -347,7 +385,7 @@ async function getMonitor() {
             });
           }
         } else {
-          regionchange();
+          // regionchange();
         }
       } else {
         ElMessage({
@@ -356,11 +394,11 @@ async function getMonitor() {
         });
       }
     })
-    .catch((err) => { });
+    .catch((err) => {});
 }
 //获取任务信息
 async function readJob() {
-  vtkmodel.clearModeAddJg();//隐藏模版显示结果
+  vtkmodel.clearModeAddJg(); //隐藏模版显示结果
   const params = {
     transCode: "D10017",
     aid: aid.value,
@@ -380,7 +418,7 @@ async function readJob() {
         });
       }
     })
-    .catch((err) => { });
+    .catch((err) => {});
 }
 //获取当前时间最近的步数 读取文件
 //当前时间=开始时间+输出步长*输出次数
@@ -399,9 +437,8 @@ function reddate(date) {
     fcon.step = fcon.stepsum;
   }
   count.value = fcon.step;
- newcount.value = count.value;
+  newcount.value = count.value;
   console.log(newcount.value);
-
 }
 
 function vtkGridRead() {
@@ -412,7 +449,7 @@ function vtkGridRead() {
       console.log(fcon.polydata);
       vtkScalarRead();
     })
-    .catch((err) => { });
+    .catch((err) => {});
 }
 function vtkScalarRead() {
   fcon
@@ -426,10 +463,10 @@ function vtkScalarRead() {
     });
 }
 function vtkShow() {
-  console.log("执行了")
-  const scalarBarActor= vtkmodel.scalarBarActor;
-  const mapper =vtkmodel.jgMapper;
-  const actor =vtkmodel.jgActor;
+  console.log("执行了");
+  const scalarBarActor = vtkmodel.scalarBarActor;
+  const mapper = vtkmodel.jgMapper;
+  const actor = vtkmodel.jgActor;
 
   console.log(formInline.value.region);
   const scalarArray = fcon.scalar.get(formInline.value.region);
@@ -441,7 +478,7 @@ function vtkShow() {
   console.log(dataArray);
   dataArray.setData(scalarArray);
   fcon.polydata.getPointData().setScalars(dataArray);
-  
+
   mapper.setInputData(fcon.polydata);
   getMinMax(scalarArray);
   mapper.setScalarRange(min.value, max.value); //设置范围
@@ -450,7 +487,6 @@ function vtkShow() {
   mapper.clearColorArrays(); //强制重建颜色
   actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
 
-
   vtkmodel.renderer.resetCamera();
   vtkmodel.renderWindow.render();
 }
@@ -471,46 +507,35 @@ function getMinMax(scalars) {
   // console.log("max，min:", max.value, min.value);
 }
 
-const handleClick = (Tab,val) => {
+const handleClick = (Tab, val) => {
   console.log(Tab.props.name);
-if(Tab.props.name=='first'){
-  timing.value = setInterval(() => {
-    const timestamp = new Date().getTime();
-    newtime.value = timestampToTime(timestamp);
-    reddate(new Date());
-  }, 1000);
-}else if(Tab.props.name=='second'){
-  clearInterval(timing.value);
-}else if(Tab.props.name=='third'){
-  clearInterval(timing.value);
-}
-}
+  if (Tab.props.name == "first") {
+    timing.value = setInterval(() => {
+      const timestamp = new Date().getTime();
+      newtime.value = timestampToTime(timestamp);
+      reddate(new Date());
+    }, 1000);
+  } else if (Tab.props.name == "second") {
+    clearInterval(timing.value);
+  } else if (Tab.props.name == "third") {
+    clearInterval(timing.value);
+  }
+};
 onBeforeUnmount(() => {
   clearInterval(timing.value);
 });
-onMounted(() => {
- if(resultactiveName.value=="first"){
-  timing.value = setInterval(() => {
-    const timestamp = new Date().getTime();
-    newtime.value = timestampToTime(timestamp);
-    reddate(new Date());
-  }, 1000);
- }else{
-  timing.value = setInterval(() => {
-    const timestamp = new Date().getTime();
-    newtime.value = timestampToTime(timestamp);
-  }, 1000);
- }
-
-
-});
-
-watch(newcount,(newVal,oldVal) => {
-  console.log('值改变了',newVal,oldVal)
-      fcon.step = newVal;
-      vtkScalarRead();
-      getMonitor();
-},{deep:true})//深度监视
+onMounted(() => {});
+
+watch(
+  newcount,
+  (newVal, oldVal) => {
+    console.log("值改变了", newVal, oldVal);
+    fcon.step = newVal;
+    vtkScalarRead();
+    getMonitor();
+  },
+  { deep: true }
+); //深度监视
 defineExpose({ monitor, accident5 });
 </script>
 
@@ -601,7 +626,8 @@ defineExpose({ monitor, accident5 });
   text-align: left;
   padding: 0 20px;
   // border-bottom: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   border-radius: 0px 0px 0px 0px;
 
@@ -633,7 +659,8 @@ defineExpose({ monitor, accident5 });
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   border-radius: 0px 0px 0px 0px;
   border: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .dialog_class {
@@ -643,7 +670,8 @@ defineExpose({ monitor, accident5 });
     text-align: left;
     padding: 0 20px;
     border-bottom: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48))
+      1 1;
     box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
     border-radius: 0px 0px 0px 0px;
 
@@ -714,7 +742,8 @@ defineExpose({ monitor, accident5 });
   background: rgba(104, 173, 255, 0.3);
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   /* border: 1px solid rgba(31, 107, 255, 1); */
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 
   border-radius: 4px;
   display: flex;
@@ -728,10 +757,14 @@ defineExpose({ monitor, accident5 });
   background: rgba(104, 173, 255, 0.3);
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   /* border: 1px solid rgba(31, 107, 255, 1); */
-  -o-border-image: linear-gradient(180deg,
+  -o-border-image: linear-gradient(
+      180deg,
       rgba(31, 107, 255, 1),
-      rgba(31, 107, 255, 0.48)) 1 1;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+      rgba(31, 107, 255, 0.48)
+    )
+    1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
   border-radius: 4px;
   display: flex;
   display: inline-block;
@@ -750,7 +783,6 @@ defineExpose({ monitor, accident5 });
 }
 
 .asides_content {
-
   //     background: rgba(13,22,57,0.4);
   // box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2);
   // border-radius: 0px 0px 0px 0px;
@@ -788,7 +820,8 @@ defineExpose({ monitor, accident5 });
   margin-top: 25px;
   border-radius: 0px 0px 0px 0px;
   border-top: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
 
   h4 {
@@ -852,7 +885,8 @@ defineExpose({ monitor, accident5 });
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   border-radius: 4px 4px 4px 4px;
   border: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 </style>
 
@@ -861,7 +895,8 @@ defineExpose({ monitor, accident5 });
 .bgcolor {
   border-radius: 0px 0px 0px 0px;
   border: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
 }
 
@@ -905,7 +940,8 @@ defineExpose({ monitor, accident5 });
   background: rgba(104, 173, 255, 0.3);
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   /* border: 1px solid rgba(31, 107, 255, 1); */
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 
   border-radius: 4px;
   display: flex;
@@ -953,7 +989,8 @@ defineExpose({ monitor, accident5 });
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   border-radius: 0px 0px 0px 0px;
   border: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .el-table td.el-table__cell,
@@ -961,7 +998,8 @@ defineExpose({ monitor, accident5 });
   /* box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2); */
   border-radius: 0px 0px 0px 0px;
   border-bottom: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .oddRow {
@@ -990,7 +1028,7 @@ defineExpose({ monitor, accident5 });
   background-color: rgba(red, green, blue, 0) !important;
 }
 
-.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
   background-color: rgba(104, 173, 255, 0) !important;
 }
 
@@ -1002,7 +1040,8 @@ defineExpose({ monitor, accident5 });
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   border-radius: 4px 4px 4px 4px;
   border: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .el-input__wrapper {
@@ -1011,7 +1050,8 @@ defineExpose({ monitor, accident5 });
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2) !important;
   border-radius: 0px 0px 0px 0px;
   border: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .ddd_div .el-input__inner {
@@ -1069,8 +1109,6 @@ defineExpose({ monitor, accident5 });
   background-image: url(../../assets/img/Group10.png) !important;
 }
 
-
-
 .jc_tile {
   padding-left: 20px;
 }
@@ -1133,7 +1171,8 @@ defineExpose({ monitor, accident5 });
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
   border-radius: 4px 4px 4px 4px;
   border-bottom: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 #textarea_id {
@@ -1213,9 +1252,9 @@ defineExpose({ monitor, accident5 });
   text-transform: none;
 }
 
-.el-tabs--card>.el-tabs__header,
-.el-tabs--card>.el-tabs__header,
-.el-tabs--card>.el-tabs__header .el-tabs__nav {
+.el-tabs--card > .el-tabs__header,
+.el-tabs--card > .el-tabs__header,
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
   border: none !important;
 }
 
@@ -1345,7 +1384,8 @@ defineExpose({ monitor, accident5 });
   box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2) !important;
   border-radius: 0px 0px 0px 0px;
   border: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .delecttitle {
@@ -1356,14 +1396,15 @@ defineExpose({ monitor, accident5 });
 .collapseeion .el-select .el-input__inner {
   color: #fff;
 }
-.el-collapse-item__wrap{
+.el-collapse-item__wrap {
   border-bottom: 1px solid;
-  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
-.el-collapse{
-  --el-collapse-border-color:rgba(31, 107, 255, 0.48);
+.el-collapse {
+  --el-collapse-border-color: rgba(31, 107, 255, 0.48);
 }
- .jc_header .el-collapse-item__header{
+.jc_header .el-collapse-item__header {
   width: 100%;
   height: 52px;
   line-height: 52px;
@@ -1372,16 +1413,16 @@ defineExpose({ monitor, accident5 });
   background-position: center;
 }
 .jianstyle .el-collapse-item__arrow {
-    margin: 0 8px 0 auto;
-    font-weight: 800;
-    color: #fff !important;
-    font-weight: bold !important;
-    font-size: 20px !important;
+  margin: 0 8px 0 auto;
+  font-weight: 800;
+  color: #fff !important;
+  font-weight: bold !important;
+  font-size: 20px !important;
 }
-.woter{
+.woter {
   margin-top: -15px;
 }
-.result1 .el-collapse-item__content{
-  padding:0 !important;
+.result1 .el-collapse-item__content {
+  padding: 0 !important;
 }
 </style>

src/view/components/InfoVtkmodel.vue

@@ -8,8 +8,8 @@ import { throttle } from "@kitware/vtk.js/macros";
 import vtkSphereSource from "@kitware/vtk.js/Filters/Sources/SphereSource";
 import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
 import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
-import vtkLineSource from '@kitware/vtk.js/Filters/Sources/LineSource';
-import vtkPointSource from '@kitware/vtk.js/Filters/Sources/PointSource';
+import vtkLineSource from "@kitware/vtk.js/Filters/Sources/LineSource";
+import vtkPointSource from "@kitware/vtk.js/Filters/Sources/PointSource";
 
 onMounted(() => {
   readNodeAndPipe();
@@ -20,9 +20,6 @@ const pipes = ref([]); //管道数据
 const delNodes = ref([]); //无效节点
 const validNodes = ref([]); //有效节点
 
-
-
-
 async function readNodeAndPipe() {
   const params = {
     transCode: "D00000",
@@ -64,7 +61,6 @@ async function readePipe() {
     .catch((err) => {});
 }
 
-
 /**
  * 在管道中已存在的点才可以使用
  */
@@ -78,33 +74,9 @@ function nodeIsValid(node) {
   });
   return isValid;
 }
-/**
- * 根据id 获取对应的编号
- */
-function indexIdByPipeNodeId(nid) {
-  for (let index = 0; index < validNodes.value.length; index++) {
-    const node = validNodes.value[index];
-    if (node.id == nid) {
-      return index;
-    }
-  }
-  return 0;
-}
-function pointByPipeNodeId(nid) {
-  for (let index = 0; index < validNodes.value.length; index++) {
-    const node = validNodes.value[index];
-    if (node.id == nid) {
-      return [parseFloat(node.x), parseFloat(node.y), parseFloat(node.z)];
-    }
-  }
-  return 0;
-}
 
 function lineShow() {
   console.log("模板加载..");
-  const points = vtkmodel.polyData.getPoints();
-  const lines = vtkmodel.polyData.getLines();
-
   //判断NODE 是否在管道中使用
   nodes.value.forEach((node) => {
     if (!nodeIsValid(node)) {
@@ -113,70 +85,9 @@ function lineShow() {
       validNodes.value.push(node);
     }
   });
-  // validNodes.value.forEach((node) => {
-  //   // console.log(node);
-  //   points.insertNextPoint(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
-  // });
-  // pipes.value.forEach((pipe) => {
-  //   let sid = indexIdByPipeNodeId(pipe.snId);
-  //   let eid = indexIdByPipeNodeId(pipe.enId);
-  //   // console.log(pipe.snId-1, pipe.enId-1,":",sid, eid);
-  //   lines.insertNextCell([sid, eid]);
-  // });
-
-  // points.insertNextPoint(1, 0, 0);
-  // points.insertNextPoint(0, 1, 0);
-  // points.insertNextPoint(0, 0, 1);
-  // lines.insertNextCell([0, 1]);
-  // lines.insertNextCell([1, 2]);
-  // lines.insertNextCell([2, 0]);
-
-  const sphereSource = vtkSphereSource.newInstance({
-    center: [0, 0, 0],
-    radius: 4.0,
-  });
-  // sphereSource.setThetaResolution(64);
-  // sphereSource.setPhiResolution(32);
-
-  const mapper = vtkMapper.newInstance();
-  mapper.setInputConnection(sphereSource.getOutputPort());
-  validNodes.value.forEach((node) => {
-     const actor = vtkActor.newInstance();
-    actor.setMapper(mapper);
-    actor.setPosition(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
-    vtkmodel.renderer.addActor(actor);
-    const nodeActor={};
-    nodeActor.node =node;
-    nodeActor.actor=actor;
-    vtkmodel.nodeActors.push(nodeActor);
-  });
-
-  pipes.value.forEach((pipe) => {
-    const lineSource = vtkLineSource.newInstance();
-    let point1 = pointByPipeNodeId(pipe.snId);
-    let point2 = pointByPipeNodeId(pipe.enId);
-    //  console.log(point1,":",point2);
-    // lines.insertNextCell([sid, eid]);
-    lineSource.setPoint1(point1);
-    lineSource.setPoint2(point2);
-    lineSource.setResolution(12);
-    const actor = vtkActor.newInstance();
-    const mapper = vtkMapper.newInstance();
-    actor.setMapper(mapper);
-    actor.getProperty().setLineWidth(3);//设置线宽
-    // actor.getProperty().setColor(WHITE);//设置线宽
-
-    mapper.setInputConnection(lineSource.getOutputPort());
-    vtkmodel.renderer.addActor(actor);
-
-    const pipeActor={};
-    pipeActor.pipe =pipe;
-    pipeActor.actor=actor;
-    vtkmodel.pipeActors.push(pipeActor);
-  });
-
-  vtkmodel.renderer.resetCamera();
-  vtkmodel.renderWindow.render();
+  vtkmodel.modelInit(validNodes.value, pipes.value);
+  // vtkmodel.selectNodes();
+  vtkmodel.selectPipes();
 }
 </script>
 <style scoped>