模板加载

src/control/vtkModel.js

@@ -0,0 +1,109 @@
+import * as d3 from "d3-scale";
+import { formatDefaultLocale } from "d3-format";
+import "@kitware/vtk.js/Rendering/Profiles/Geometry";
+import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";
+import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
+import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
+import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
+import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
+import { Representation } from "@kitware/vtk.js/Rendering/Core/Property/Constants";
+import vtkPolyData from "@kitware/vtk.js/Common/DataModel/PolyData";
+
+import vtkOpenGLHardwareSelector from '@kitware/vtk.js/Rendering/OpenGL/HardwareSelector';
+import {
+  FieldDataTypes,
+  FieldAssociations,
+} from '@kitware/vtk.js/Common/DataModel/DataSet/Constants';
+
+export class VtkModel {
+  constructor() {
+    this.renderWindowWith = vtkFullScreenRenderWindow.newInstance();
+    this.renderer = this.renderWindowWith.getRenderer();
+    this.renderWindow = this.renderWindowWith.getRenderWindow();
+
+    //模板数据
+    this.polyData = vtkPolyData.newInstance();
+    
+    this.mapper = vtkMapper.newInstance();
+    this.actor = vtkActor.newInstance();
+    this.actor.getProperty().setRepresentation(Representation.SURFACE); //线    
+    this.actor.getProperty().setColor([0,0.0,1]);
+   
+    this.mapper.setInputData(this.polyData);
+    this.actor.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.actor);
+    this.renderer.addActor(this.actor2);
+
+    //选取
+    const openGLRenderWindow = this.renderWindowWith.getApiSpecificRenderWindow();
+    const selector = vtkOpenGLHardwareSelector.newInstance({
+      captureZValues: true,
+    });
+    selector.setFieldAssociation(FieldAssociations.FIELD_ASSOCIATION_POINTS);
+    selector.attach(openGLRenderWindow, this.renderer)
+
+
+
+    //结果数据
+    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);
+
+    //修改设条颜色
+    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);
+  }
+  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);
+    };
+  }
+  clearModeAddJg(){
+    this.renderer.addActor(this.jgActor);
+    this.renderer.addActor(this.scalarBarActor);
+    this.renderer.removeActor(this.actor);
+    this.renderer.removeActor(this.actor2);
+  }
+  clearJgAddMode(){
+    this.renderer.addActor(this.actor);
+    this.renderer.addActor(this.actor2);
+    this.renderer.removeActor(this.scalarBarActor);
+    this.renderer.removeActor(this.jgActor);
+  } 
+
+}
+const vtkmodel = new VtkModel();
+export { vtkmodel };

src/view/components/InfoAnimation.vue

@@ -93,60 +93,11 @@ import t2 from "@/assets/img/t2.png";
 import t3 from "@/assets/img/t3.png";
 import t4 from "@/assets/img/t4.png";
 
-import * as d3 from "d3-scale";
-import { formatDefaultLocale } from "d3-format";
-
-import "@kitware/vtk.js/Rendering/Profiles/Geometry";
-import vtkRenderWindowWithControlBar from "@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar";
-import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";
-
-import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
-import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
-import vtkUnstructuredDataReader from "../../reader/UnstructuredDataReader.js";
-import { createFireControl } from "../../control/fireControl.js";
-import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
-import vtkLookupTable from "@kitware/vtk.js/Common/Core/LookupTable";
+
+import { vtkmodel } from "@/control/vtkModel.js"
+import { createFireControl } from "@/control/fireControl.js"
 import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
-import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
-import { I } from "@kitware/vtk.js/macros2.js";
-import { Representation } from "@kitware/vtk.js/Rendering/Core/Property/Constants";
-
-import vtkConeSource from "@kitware/vtk.js/Filters/Sources/ConeSource";
-import vtkSphereMapper from "@kitware/vtk.js/Rendering/Core/SphereMapper";
-import vtkPixelSpaceCallbackMapper from "@kitware/vtk.js/Rendering/Core/PixelSpaceCallbackMapper";
-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";
-
-const renderWindowWith = vtkFullScreenRenderWindow.newInstance();
-// renderWindowWith.setBackground(22, 26, 42);
-const renderer = renderWindowWith.getRenderer();
-// renderer.setBackground(0, 0, 0);
-const renderWindow = renderWindowWith.getRenderWindow();
-const resetCamera = renderer.resetCamera;
-const render = renderWindow.render;
-const mapper = vtkMapper.newInstance();
-const actor = vtkActor.newInstance();
-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);
+
 const activeNames = ref(['1'])
 let emit = defineEmits([]);
 const props = defineProps({
@@ -344,6 +295,7 @@ const accident5 = (val) => {
 const init = () => { };
 onMounted(() => {
   init();
+ 
 });
 
 const fcon = createFireControl();
@@ -398,6 +350,7 @@ async function getMonitor() {
 }
 //获取任务信息
 async function readJob() {
+  vtkmodel.clearModeAddJg();//隐藏模版显示结果
   const params = {
     transCode: "D10017",
     aid: aid.value,
@@ -460,6 +413,11 @@ function vtkScalarRead() {
     });
 }
 function vtkShow() {
+  
+  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);
   console.log("scalarArray:", scalarArray);
@@ -470,16 +428,18 @@ 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); //设置范围
   actor.setMapper(mapper);
-  renderer.addActor(actor);
   scalarBarActor.setAxisLabel(formInline.value.region);
   mapper.clearColorArrays(); //强制重建颜色
   actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
-  renderer.resetCamera();
-  renderWindow.render();
+
+
+  vtkmodel.renderer.resetCamera();
+  vtkmodel.renderWindow.render();
 }
 
 function getMinMax(scalars) {
@@ -497,27 +457,7 @@ function getMinMax(scalars) {
   }
   // console.log("max，min:", max.value, min.value);
 }
-//设置
-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);
-  };
-}
+
 const handleClick = () => {
 
 }

src/view/components/InfoVtkmodel.vue

@@ -1,26 +1,131 @@
-<template>
-    <div class="vtk"> 
-          <div class="left_container">
-          <h2 > 我是路由</h2>
-         </div>
-       </div>
-     </template>
-   <script setup>
-   import { ref, onMounted, reactive, } from "vue";
-    import {RouterView,RouterLink } from "vue-router"
-     import { request, uploadFile } from "@/utils/request";
-    onMounted(()=>{
-     //  projectlist()
+<template></template>
+<script setup>
+import { ref, onMounted, reactive } from "vue";
+import { RouterView, RouterLink } from "vue-router";
+import { request, uploadFile } from "@/utils/request";
+import { vtkmodel } from "@/control/vtkModel.js";
 
+onMounted(() => {
+  readNodeAndPipe();
+});
+const nodes = ref([]); //节点数据
+const pipes = ref([]); //管道数据
+const delNodes = ref([]); //无效节点
+const validNodes = ref([]); //有效节点
+async function readNodeAndPipe() {
+  const params = {
+    transCode: "D00000",
+    count: 1000,
+    page: 1,
+  };
+  await request(params)
+    .then((res) => {
+      if (res.returnCode == "000000000") {
+        nodes.value = res.rows;
+        readePipe();
+      } else {
+        ElMessage({
+          message: res.returnMsg,
+          type: "error",
+        });
+      }
+    })
+    .catch((err) => {});
+}
+async function readePipe() {
+  const params = {
+    transCode: "D00001",
+    count: 1000,
+    page: 1,
+  };
+  await request(params)
+    .then((res) => {
+      if (res.returnCode == "000000000") {
+        pipes.value = res.rows;
+        lineShow();
+      } else {
+        ElMessage({
+          message: res.returnMsg,
+          type: "error",
+        });
+      }
+    })
+    .catch((err) => {});
+}
+
+/**
+ * 在管道中已存在的点才可以使用
+ */
+function nodeIsValid(node) {
+  let isValid = false;
+  pipes.value.forEach((pipe) => {
+    if (node.id == pipe.snId || node.id == pipe.enId) {
+      isValid = true;
+      return isValid;
+    }
+  });
+  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;
+  // let index = 0;
+  // validNodes.value.forEach((node) => {
+  //   if(node.id == nid) {
+  //     return index;
+  //   }
+  //   index++;
+  // });
+  // return index;
+}
 
-})
-    
-   </script>
-   <style scoped>
-.vtk{
+function lineShow() {
+  console.log("模板加载..");
+  const points = vtkmodel.polyData.getPoints();
+  const lines = vtkmodel.polyData.getLines();
+
+  //判断NODE 是否在管道中使用
+  nodes.value.forEach((node) => {
+    if (!nodeIsValid(node)) {
+      delNodes.value.push(node);
+    } else {
+      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]);
+
+  vtkmodel.renderer.resetCamera();
+  vtkmodel.renderWindow.render();
+}
+</script>
+<style scoped>
+.vtk {
   position: absolute;
   z-index: 150;
-  top:70px;
-
+  top: 70px;
 }
-   </style>
+</style>