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";
import emitter from "@/utils/emitter";
import { message } from '@/utils/message';
onBeforeMount(()=>{
 
})
onMounted(() => {
  const rootContainer = document.getElementById("infomodel");
  // rootContainer.style.position = "relative";
  // rootContainer.style.width = "100%";
  // rootContainer.style.height = "100%";
  vtkmodel.initMode(rootContainer);
  readNodeAndPipe();
  vtkmodel.clearJgAddMode();
  emitter.emit('accident');

  emitter.on("RefreshVtkmodel",RefreshVtkmodel)
});

onUnmounted (() => {
  emitter.off("RefreshVtkmodel",RefreshVtkmodel)
})

const nodes = ref([]); //节点数据
const pipes = ref([]); //管道数据
const delNodes = ref([]); //无效节点
const validNodes = ref([]); //有效节点

const checkNodes = ref([]); //监测点

const RefreshVtkmodel = () => {
  vtkmodel.clearAll();
  readNodeAndPipe();
}

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 {
        message.error({
          message: res.returnMsg,
        });
      }
    })
    .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 {
        message.error({
          message: res.returnMsg,
        });
      }
    })
    .catch((err) => {});
}

// 查询监测点
async function readCheckNode(){
    const params = {
        transCode: 'D10004',
    }
    request(params)
        .then((res) => {
          checkNodes.value= res.rows;
          console.log("监测点信息：",checkNodes.value)
          vtkmodel.initCheckNodes(checkNodes.value);
        })
        .catch((err) => {
            
        })
}

// 查询传感器
async function readSensor(){
    const params = {
        transCode: 'D10010',
         type: 'Fire'
    }
    request(params)
        .then((res) => {
          console.log("readSensor",res);
           res.rows.forEach(element => {
                vtkmodel.addSensor(element)
            });
        })
        .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);
     readCheckNode();
     readSensor();
  // vtkmodel.selectNodes();
  // vtkmodel.selectByNodeId(178);
  // vtkmodel.selectPipes();
  // vtkmodel.selectByPipeId(253);
  

  // 用于用aid直接访问项目的特殊情况
  emitter.emit('AccessProjectByAid');
}
</script>
<style scoped>
.vtk {
  position: absolute;
  z-index: 150;
  top: 70px;
}
span {
  position: absolute;
  top: 2px;
}
</style>
<style>
.vtkmodel1 canvas{
  /* background-color: rgba(51,51,51,0.7); */
  /* background-color:#B5C7F0 ;  */
  background-image: url(../../src/assets/img/BJ.png)!important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
</style>