disaster_web3/src/view/components/InfoVtkmodel.vue

<template>
  <div class="vtkmodel1" id="infomodel"></div>
</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";
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";

onMounted(() => {

  const rootContainer = document.getElementById("infomodel");
  // rootContainer.style.position = "relative";
  // rootContainer.style.width = "100%";
  // rootContainer.style.height = "100%";
  vtkmodel.initMode(rootContainer);
  readNodeAndPipe();
  vtkmodel.clearJgAddMode();
});
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;
}

function lineShow() {
  console.log("模板加载..");
  //判断NODE 是否在管道中使用
  nodes.value.forEach((node) => {
    if (!nodeIsValid(node)) {
      delNodes.value.push(node);
    } else {
      validNodes.value.push(node);
    }
  });
  vtkmodel.modelInit(validNodes.value, pipes.value);
  // vtkmodel.selectNodes();
  // vtkmodel.selectByNodeId(178);
  // vtkmodel.selectPipes();
  // vtkmodel.selectByPipeId(253);

}
</script>
<style scoped>
.vtk {
  position: absolute;
  z-index: 150;
  top: 70px;
}
span {
  position: absolute;
  top: 2px;
}
</style>