路径

src/control/vtkModel.js

@@ -55,29 +55,29 @@ export class VtkModel {
     this.validNodes = [];//节点数据
     this.pipes = [];//管道数据
 
-    this.renderWindowWith =null;
-    this.renderer =null;
+    this.renderWindowWith = null;
+    this.renderer = null;
     this.renderWindow = null;
 
 
-        //选取
-        this.lastActor = null;
-        this.nodeActors = []; //节点actor 数据
-        this.pipeActors = []; //管道actor 数据
-        this.interactor = null;
-        this.apiSpecificRenderWindow = null;
-        this.hardwareSelector = null;
-
-     //模板数据
-     this.polyData = vtkPolyData.newInstance();
-     this.mapper = vtkMapper.newInstance();
-     this.actor = vtkActor.newInstance();
-     this.actor.getProperty().setRepresentation(Representation.SURFACE); //线    
-     this.actor.getProperty().setColor(WHITE);
-     this.mapper.setInputData(this.polyData);
-     this.actor.setMapper(this.mapper);
-
-       //点数据
+    //选取
+    this.lastActor = null;
+    this.nodeActors = []; //节点actor 数据
+    this.pipeActors = []; //管道actor 数据
+    this.interactor = null;
+    this.apiSpecificRenderWindow = null;
+    this.hardwareSelector = null;
+
+    //模板数据
+    this.polyData = vtkPolyData.newInstance();
+    this.mapper = vtkMapper.newInstance();
+    this.actor = vtkActor.newInstance();
+    this.actor.getProperty().setRepresentation(Representation.SURFACE); //线    
+    this.actor.getProperty().setColor(WHITE);
+    this.mapper.setInputData(this.polyData);
+    this.actor.setMapper(this.mapper);
+
+    //点数据
     this.actor2 = vtkActor.newInstance();
     this.actor2.getProperty().setRepresentation(Representation.POINTS); //点   
     this.actor2.getProperty().setColor(WHITE);
@@ -85,33 +85,102 @@ export class VtkModel {
     this.actor2.setMapper(this.mapper);
 
 
-      //结果数据
-      this.jgActor = vtkActor.newInstance();
-      this.jgMapper = vtkMapper.newInstance();
-      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);
-      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);
-      this.jgMapper.setLookupTable(ctf);
-      const lut = this.jgMapper.getLookupTable();
-      this.scalarBarActor.setScalarsToColors(lut);
-      this.jgActor.setMapper(this.jgMapper);
-  
+    //结果数据
+    this.jgActor = vtkActor.newInstance();
+    this.jgMapper = vtkMapper.newInstance();
+    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);
+    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);
+    this.jgMapper.setLookupTable(ctf);
+    const lut = this.jgMapper.getLookupTable();
+    this.scalarBarActor.setScalarsToColors(lut);
+    this.jgActor.setMapper(this.jgMapper);
+
+
+    this.ways = [];
+    this.wayActors = [];
+
   }
+  waysInit(ways) {
+    this.renderWindowWith.resize();
+    this.ways = ways;
 
-  initMode(rootContainer){
-    this.renderWindowWith =  vtkGenericRenderWindow.newInstance();
+    this.ways.forEach((way) => {
+      let nodes1 = [];
+      let nodes2 = [];
+      for (let index = 0; index < way.nrows.length - 1; index++) {
+        nodes1.push(way.nrows[index]);
+      }
+      for (let index = 1; index < way.nrows.length; index++) {
+        nodes2.push(way.nrows[index]);
+      }
+      for (let index = 0; index < nodes2.length; index++) {
+        const lineSource = vtkLineSource.newInstance();
+        let snode = nodes1[index];
+        let enode = nodes2[index];
+        let point1 = [parseFloat(snode.x), parseFloat(snode.y), parseFloat(snode.z)];
+        let point2 = [parseFloat(enode.x), parseFloat(enode.y), parseFloat(enode.z)];
+        lineSource.setPoint1(point1);
+        lineSource.setPoint2(point2);
+        lineSource.setResolution(12);
+        const actor = vtkActor.newInstance();
+        const mapper = vtkMapper.newInstance();
+        actor.setMapper(mapper);
+        actor.getProperty().setLineWidth(3);//设置线宽
+        if(way.safety=="safety"){
+          actor.getProperty().setColor(GREEN);
+        }else if(way.safety=="danger"){
+          actor.getProperty().setColor(REA);
+        }
+        const initialValues = {
+          base: 0,
+          center: point2,
+          height: 9,
+          radius: 5,
+          resolution: 2,
+          direction: [
+            point2[0]-point1[0],
+            point2[1]-point1[1],
+            point2[2]-point1[2],
+          ]
+        };
+        const vtk2d = vtkConeSource.newInstance(initialValues);
+        const mapper2 = vtkMapper.newInstance();
+        mapper2.setInputConnection(vtk2d.getOutputPort());
+        const actor2 = vtkActor.newInstance();
+        actor2.setMapper(mapper2);
+        if(way.safety=="safety"){
+          actor2.getProperty().setColor(GREEN);
+        }else if(way.safety=="danger"){
+          actor2.getProperty().setColor(REA);
+        }
+        this.wayActors.push(actor2);
+
+        mapper.setInputConnection(lineSource.getOutputPort());
+        this.wayActors.push(actor);
+      }
+    });
+    this.wayActors.forEach((wayAcotor) => {
+      this.renderer.addActor(wayAcotor);
+    });
+      // vtkmodel.renderer.resetCamera();
+    vtkmodel.renderWindow.render();
+  }
+
+  initMode(rootContainer) {
+    this.renderWindowWith = vtkGenericRenderWindow.newInstance();
     this.renderWindowWith.setContainer(rootContainer);
     this.renderer = this.renderWindowWith.getRenderer();
     this.renderer.setBackground(0.0, 0.0, 0.0, 0.0)
@@ -131,7 +200,7 @@ export class VtkModel {
     document.addEventListener("mousemove", throttleMouseHandler);
 
 
-    
+
     // //箭头
     // this.arrowActors = []; 
     // const viewColors = [
@@ -221,7 +290,7 @@ export class VtkModel {
   //添加箭头
   addArrow(velocitys) {
     this.clearArrow();
-    this.arrowActors=[];
+    this.arrowActors = [];
     velocitys.forEach(velocity => {
       velocity.points.forEach(point => {
         // const initialValues = { 
@@ -235,17 +304,18 @@ export class VtkModel {
         //   ] };
         // const vtk2d = vtk2DShape.newInstance(initialValues);
 
-        const initialValues = { 
-          base:0,
-          center: [point.x,point.y,point.z],
-          height:7,
-          radius:2,
-          resolution:3,
-          direction:[
+        const initialValues = {
+          base: 0,
+          center: [point.x, point.y, point.z],
+          height: 7,
+          radius: 8,
+          resolution: 3,
+          direction: [
             velocity.vector[0],
             velocity.vector[1],
             velocity.vector[2]
-          ] };
+          ]
+        };
         const vtk2d = vtkConeSource.newInstance(initialValues);
         const mapper = vtkMapper.newInstance();
         mapper.setInputConnection(vtk2d.getOutputPort());
@@ -257,14 +327,17 @@ export class VtkModel {
     });
     // this.renderWindow.render();
   }
-  clearArrow(){
-    if(this.arrowActors){
-      this.arrowActors.forEach(actor =>{
+  clearArrow() {
+    if (this.arrowActors) {
+      this.arrowActors.forEach(actor => {
         this.renderer.removeActor(actor);
       });
     }
   }
 
+
+
+
   modelInit(validNodes, pipes) {
     this.renderWindowWith.resize();
     this.validNodes = validNodes;
@@ -362,7 +435,7 @@ export class VtkModel {
     // physicalScale?: number;//物理尺度
     // physicalViewUp?: number[];//物理方向
     // physicalViewNorth?: number[];//物理北
-   
+
     console.log("透视或平行相机", cam.getParallelProjection());
     // cam.setParallelProjection(true);
     //  console.log("透视或平行相机",cam.getParallelProjection());
@@ -380,8 +453,8 @@ export class VtkModel {
     console.log("相机焦点", cam.getFocalPoint());// [495544.15625, 5403554.25, 467.62999725341797]
     cam.setFocalPoint(495544.15625, 5403554.25, 467.62999725341797);
     console.log("相机方向", cam.getViewUp());//[0,1,0]
-  // cam.setViewUp([0,1,1]);
-    console.log("近远平面",cam.getClippingRange());// [9141.491986233214, 9913.53967078369]
+    // cam.setViewUp([0,1,1]);
+    console.log("近远平面", cam.getClippingRange());// [9141.491986233214, 9913.53967078369]
     // cam.setClippingRange(9241.491986233214,9300.53967078369);
     this.renderWindow.render();
 
@@ -396,10 +469,15 @@ export class VtkModel {
     this.pipeActors.forEach((pipeActor) => {
       this.renderer.removeActor(pipeActor.actor);
     });
-
+  }
+  wayClearShow(){
+    this.wayActors.forEach((wayAcotor) => {
+      this.renderer.removeActor(wayAcotor);
+    });
   }
   modelShow() {
     this.modelClearShow();
+  
     if (!this.isSelectNode) {//不选择节点
       this.renderer.addActor(this.actor2);
     }
@@ -416,7 +494,7 @@ export class VtkModel {
         this.renderer.addActor(pipeActor.actor);
       });
     }
-    this.renderer.addActor( this.axesActor);
+    this.renderer.addActor(this.axesActor);
   }
 
 
@@ -465,6 +543,7 @@ export class VtkModel {
   clearModeAddJg() {
     this.renderer.addActor(this.jgActor);
     this.renderer.addActor(this.scalarBarActor);
+    this.wayClearShow();
     this.modelClearShow();
     this.isJg = true; //显示结果
   }
@@ -473,6 +552,7 @@ export class VtkModel {
     this.renderer.removeActor(this.jgActor);
     this.clearArrow();
     this.modelShow();
+    this.wayClearShow();
     this.isJg = false; //不显示结果
   }
   clearAll() {
@@ -480,6 +560,7 @@ export class VtkModel {
     this.renderer.removeActor(this.scalarBarActor);
     this.clearArrow();
     this.modelClearShow();
+    this.wayClearShow();
     this.renderWindow.render();
   }
 
@@ -522,7 +603,7 @@ export class VtkModel {
     }
   }
 }
-function   createRGBStringFromRGBValues(rgb){
+function createRGBStringFromRGBValues(rgb) {
   if (rgb.length !== 3) {
     return 'rgb(0, 0, 0)';
   }
@@ -563,8 +644,8 @@ function eventToWindowXY(event) {
   const x = Math.round((width * clientX) / window.innerWidth);
   const y = Math.round(height * (1 - clientY / window.innerHeight)); // Need to flip Y
   return [x, y];
-  
-  
+
+
 }
 function processSelections(selections) {
   if (!selections || selections.length === 0) {//没有选择
@@ -644,5 +725,6 @@ function processSelections(selections) {
 const throttleMouseHandler = throttle(pickOnMouseEvent, 20);
 const WHITE = [1, 0.2, 1];
 const GREEN = [0.1, 0.8, 0.1];
+const REA = [1, 0, 0];
 const vtkmodel = new VtkModel();
 export { vtkmodel };

src/view/index/tow-right.vue

@@ -1,56 +1,83 @@
 <template>
-    <!-- 底部导航栏 -->
-    <div class="first-right l_Dialog tablebk"  v-show="towshow">
-      <el-aside width="340px" class="L_aside L_aside1 asideg asidegbg leftbgimg1" >
-        <div class="demo-collapse jiancedian1 asideg1 jc_header collapseeion jianstyle">
-          <el-collapse accordion v-model="towactiveNames">
-            <el-collapse-item name="1" class="imgneon">
-              <template #title>
-                <el-icon class="iconimg Frame3" fit="contain"></el-icon>
-                灾害信息展示
-              </template>
-              <div class="rg_content">
-                <div class="rg-padding">
+  <!-- 底部导航栏 -->
+  <div class="first-right l_Dialog tablebk" v-show="towshow">
+    <el-aside width="340px" class="L_aside L_aside1 asideg asidegbg leftbgimg1">
+      <div class="demo-collapse jiancedian1 asideg1 jc_header collapseeion jianstyle">
+        <el-collapse accordion v-model="towactiveNames">
+          <el-collapse-item name="1" class="imgneon">
+            <template #title>
+              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
+              路径规划
+            </template>
+            <div class="rg_content">
+              <div class="rg-padding">
                 <div class="zongji">
                   <div class="zongjili img1">1<span>个</span></div>
                   <div class="zongjili img2">12<span>个</span></div>
                 </div>
-                <div  v-for="(item, index) in listArray" :key="index" >
-                    <el-image style="height: 100%" :src="item.img" fit="contain"></el-image>
-                    <!-- <span  :class="'span'+item.id">{{ item.name }}</span> -->
+                <div v-for="(item, index) in listArray" :key="index">
+                  <el-image style="height: 100%" :src="item.img" fit="contain"></el-image>
+                  <!-- <span  :class="'span'+item.id">{{ item.name }}</span> -->
                 </div>
-              
-              
               </div>
             </div>
-              <!-- <div class="mgsnoe" style="height: 200px"></div> -->
-            </el-collapse-item>
-          </el-collapse>
-     
-        </div>
-      </el-aside>
-  
-    </div>
-  </template>
-  <script setup>
-  import { ref, onMounted, reactive, } from "vue";
-  import { RouterView, RouterLink } from "vue-router"
-  import { request, uploadFile } from "@/utils/request";
-  import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-  import * as echarts from 'echarts'
-  import bt1 from "@/assets/img/Group1365.png"
-  import bt2 from "@/assets/img/Group1366.png"
-let towshow=ref(false);
-let towactiveNames = ref('1');
+            <!-- <div class="mgsnoe" style="height: 200px"></div> -->
+          </el-collapse-item>
+        </el-collapse>
+
+        <el-button type="" @click="getWayResult()" >测试</el-button>
+      </div>
+    </el-aside>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive } from "vue";
+import { RouterView, RouterLink } from "vue-router";
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
+import * as echarts from "echarts";
+import { vtkmodel } from "@/control/vtkModel.js";
+
+import bt1 from "@/assets/img/Group1365.png";
+import bt2 from "@/assets/img/Group1366.png";
+let towshow = ref(false);
+let towactiveNames = ref("1");
 let listArray = ref([
-     { id: 0,name:'危险路径',img:bt1 },
-     { id: 1,name:'安全路径',img:bt2},
-   ]);
-  defineExpose({towshow});
-  </script>
-  <style scoped>
- 
-  
-  </style>
+  { id: 0, name: "危险路径", img: bt1 },
+  { id: 1, name: "安全路径", img: bt2 },
+]);
+defineExpose({ towshow });
+
+let aid = 7;
+onMounted(() => {
 
-  
+});
+async function getWayResult() {
+  const params = {
+    transCode: "D10036",
+    aid: aid,
+  };
+  await request(params)
+    .then((res) => {
+      console.log(res.rows);
+      if (res.rows.length == 0) {
+        ElMessage({
+          message: "无路径数据！",
+          type: "error",
+        });
+      } else {
+        // vtkmodel.clearAll();
+        vtkmodel.waysInit(res.rows);
+      }
+    })
+    .catch((err) => {
+      if (err.returnMsg == "任务不存在！") {
+        ElMessage({
+          message: "未求解",
+          type: "error",
+        });
+      }
+    });
+}
+</script>
+<style scoped></style>