浏览代码

708传感器监测点选中

tangjunhao 2 月之前
父节点
当前提交
bc8f8ebcd9

+ 147 - 35
src/control/vtkModel.js

@@ -57,6 +57,7 @@ export class VtkModel {
     this.isSelectPipe = false;
 
     this.isSelectSensor = false;
+    this.isSelectJC = false;
     //管道节点选择对象
     this.selectObj = null;
     //X,Y
@@ -343,11 +344,11 @@ delpump(){
   this.removepump();
   this.pmpActors=[];
 }
-addSensor(pid,site){
-  let pipe =this.pipeByPid(pid,site);
+addSensor(val){
+  let pipe =this.pipeByPid(val.pid,val.site);
   let point1 = this.pointByPipeNodeId(pipe.snId);
   let point2 = this.pointByPipeNodeId(pipe.enId);
-  let py = site/(1-site);
+  let py = val.site/(1-val.site);
   let pipsite_point=[
     (point1[0]+py*point2[0])/(1+py),
     (point1[1]+py*point2[1])/(1+py),
@@ -364,7 +365,8 @@ addSensor(pid,site){
     // actor.rotateY(90);// 绕y轴旋转
     //  存储传感器信息(结构化存储)
     const sensor = {
-      id: pid,
+      id: val.seid,
+      info: val,
       actor: actor,      // VTK Actor对象
    };
     this.cgqActors.push(sensor);
@@ -442,10 +444,10 @@ initCheckNodes(checkNodes){
       (point1[1]+py*point2[1])/(1+py),
       (point1[2]+py*point2[2])/(1+py),
       ] 
-      this.initjc(pipsite_point[0],pipsite_point[1],pipsite_point[2]);
+    this.initjc(checkNode,pipsite_point[0],pipsite_point[1],pipsite_point[2]);
   });
 }
-initjc(x,y,z) {
+initjc(info,x,y,z) {
   const mapper = vtkMapper.newInstance();
   mapper.setInputConnection(this.jcreader.getOutputPort());
   const actor = vtkActor.newInstance();
@@ -453,20 +455,25 @@ initjc(x,y,z) {
   actor.getProperty().setColor(JCDCOLOR);
   actor.setMapper(mapper);
   actor.setScale(0.2,0.2,0.2);//放大
-  this.jcdActors.push(actor);
+  const jc = {
+    id: info.cid,
+    info: info ,
+    actor: actor,
+  }
+  this.jcdActors.push(jc);
 }
 //显示监测点
 showjc(){
-  this.jcdActors.forEach((actor)=>{
+  this.jcdActors.forEach((jc) => {
     
-    this.renderer.addActor(actor);
+    this.renderer.addActor(jc.actor);
   });
   this.renderWindow.render();
 }
 //隐藏监测点
 removejc(){
-  this.jcdActors.forEach((actor)=>{
-    this.renderer.removeActor(actor);
+  this.jcdActors.forEach((jc) => {
+    this.renderer.removeActor(jc.actor);
   });
   this.renderWindow.render();
 }
@@ -972,6 +979,10 @@ safetypathremove(){
     this.cgqActors.forEach((sensor) => {
       this.renderer.removeActor(sensor.actor);
     });
+    this.jcdActors.forEach((jc) => {
+      this.renderer.removeActor(jc.actor);
+    });
+    
   }
   wayClearShow(){
     this.wayActors.forEach((wayAcotor) => {
@@ -1002,6 +1013,11 @@ safetypathremove(){
         this.renderer.addActor(sensor.actor);
       });
     }
+    if(this.isSelectJC) {
+      this.jcdActors.forEach((jc) => {
+        this.renderer.addActor(jc.actor);
+      });
+    }
     // this.addjc(495530.903,5403828.821,432.40);
     // this.addpname(495530.903,5403829.821,432.40);
     // this.addSoure(495530.903,5403829.821,432.40);
@@ -1016,6 +1032,7 @@ safetypathremove(){
     this.isSelectNode = true;
     this.isSelectPipe = false;
     this.isSelectSensor = false;
+    this.isSelectJC = false;
     this.modelShow();
     document.addEventListener("mousemove", throttleMouseHandler);
     this.renderWindow.render();
@@ -1024,6 +1041,7 @@ safetypathremove(){
     this.isSelectNode = false;
     this.isSelectPipe = true;
     this.isSelectSensor = false;
+    this.isSelectJC = false;
      document.addEventListener("mousemove", throttleMouseHandler);
     this.modelShow();
     this.renderWindow.render();
@@ -1032,6 +1050,16 @@ safetypathremove(){
     this.isSelectNode = false;
     this.isSelectPipe = false;
     this.isSelectSensor = true;
+    this.isSelectJC = false;
+     document.addEventListener("mousemove", throttleMouseHandler);
+    this.modelShow();
+    this.renderWindow.render();
+  }
+  selectJCs() {
+    this.isSelectNode = false;
+    this.isSelectPipe = false;
+    this.isSelectSensor = false;
+    this.isSelectJC = true;
      document.addEventListener("mousemove", throttleMouseHandler);
     this.modelShow();
     this.renderWindow.render();
@@ -1040,6 +1068,9 @@ safetypathremove(){
     this.isSelectNode = false;
     this.isSelectPipe = false;
     this.isSelectSensor = false;
+    this.isSelectJC = false;
+    this.selectObj = null;
+    document.removeEventListener("mousemove", throttleMouseHandler);
     this.modelShow();
     this.renderWindow.render();
   }
@@ -1164,34 +1195,83 @@ safetypathremove(){
 
   // 选中指定传感器
   selectBySensorId(sid) {
-    console.log("selectBySensorId", sid);
+    console.log("[selectBySensorId] Selecting sensor:", sid);
+
+    // 1. 清除上一次选中的 Actor(严格检查)
+    if (this.lastActor) {
+      // console.log("Last actor to remove:", this.lastActor);
+      const currentActors = this.renderer.getActors();
+      if (currentActors.includes(this.lastActor)) {
+        this.renderer.removeActor(this.lastActor);
+        // console.log("Actor removed. Current actors:", this.renderer.getActors());
+      } else {
+        // console.log("LastActor not found in renderer.");
+      }
+      this.renderWindow.render(); // 强制刷新
+    }
 
-    // 1. 清除上一次选中的 Actor(如果有)
-    console.log("Last actor before remove:", this.lastActor);
-    if (this.lastActor != null) {
-      console.log("Removing actor:", this.lastActor);
-      this.renderer.removeActor(this.lastActor);
+    // 2. 查找目标传感器
+    const targetSensor = this.cgqActors.find(sensor => sid === sensor.id);
+    if (!targetSensor) {
+      console.error(`Sensor ${sid} not found!`);
+      return;
     }
 
-    // 2. 遍历传感器数组,查找匹配的传感器
-    
-    this.cgqActors.forEach(sensor => {
-      if (sid === sensor.id) { 
-        // 3. 设置选中颜色
-        sensor.actor.getProperty().setColor(REA);
-        console.log("找到了")
-        // 4. 记录当前选中的 Actor 和传感器对象
-        this.lastActor = sensor.actor;
-        this.selectObj = { id: sid, type: "sensor" }; // 存储选中对象信息
-        
-        // 5. 重新添加 Actor 并渲染
-        this.renderer.addActor(this.lastActor);
-        this.renderWindow.render();
-        return; // 找到后退出循环
-      }
-    });
+    // 3. 确保 targetSensor.actor 不在渲染器中(避免重复添加)
+    const currentActors = this.renderer.getActors();
+    if (!currentActors.includes(targetSensor.actor)) {
+      this.renderer.addActor(targetSensor.actor);
+    }
+
+    // 4. 高亮选中
+    targetSensor.actor.getProperty().setColor(CYAN);
+    this.lastActor = targetSensor.actor; // 更新引用
+    this.selectObj = targetSensor.info;
+
+    // 5. 触发渲染
+    this.renderWindow.render();
+    // console.log(`Sensor ${sid} selected. Current actors:`, this.renderer.getActors());
   }
 
+  // 选中指定监测点
+  selectByJCId(cid) {
+    console.log("Selecting JC:", cid);
+
+    // 1. 清除上一次选中的 Actor(严格检查)
+    if (this.lastActor) {
+      // console.log("Last actor to remove:", this.lastActor);
+      const currentActors = this.renderer.getActors();
+      if (currentActors.includes(this.lastActor)) {
+        this.renderer.removeActor(this.lastActor);
+        // console.log("Actor removed. Current actors:", this.renderer.getActors());
+      } else {
+        // console.log("LastActor not found in renderer.");
+      }
+      this.renderWindow.render(); // 强制刷新
+    }
+
+    // 2. 查找目标传感器
+    const targetSensor = this.jcdActors.find(jc => cid === jc.id);
+    if (!targetSensor) {
+      console.error(`JC ${cid} not found!`);
+      return;
+    }
+
+    // 3. 确保 targetSensor.actor 不在渲染器中(避免重复添加)
+    const currentActors = this.renderer.getActors();
+    if (!currentActors.includes(targetSensor.actor)) {
+      this.renderer.addActor(targetSensor.actor);
+    }
+
+    // 4. 高亮选中
+    targetSensor.actor.getProperty().setColor(BROWN);
+    this.lastActor = targetSensor.actor; // 更新引用
+    this.selectObj = targetSensor.info;
+
+    // 5. 触发渲染
+    this.renderWindow.render();
+    // console.log(`Sensor ${sid} selected. Current actors:`, this.renderer.getActors());
+  }
 
 }
 function createRGBStringFromRGBValues(rgb) {
@@ -1264,7 +1344,16 @@ function processSelections(selections) {
     attributeID,
   } = selections[0].getProperties();
   if (vtkmodel.lastActor != null) {
-    vtkmodel.lastActor.getProperty().setColor(WHITE);
+    const lastSensor = vtkmodel.cgqActors.find(s => s.actor === vtkmodel.lastActor);
+    const lastJC = vtkmodel.jcdActors.find(j => j.actor === vtkmodel.lastActor);
+    if(lastSensor){
+      vtkmodel.lastActor.getProperty().setColor(SOURECOLOR);
+    }else if(lastJC){
+      vtkmodel.lastActor.getProperty().setColor(JCDCOLOR);
+    }else {
+      vtkmodel.lastActor.getProperty().setColor(WHITE);
+    }
+    
     vtkmodel.renderWindow.render();
   }
   vtkmodel.nodeActors.forEach((nodeActor) => {
@@ -1284,6 +1373,24 @@ function processSelections(selections) {
     }
   });
 
+  vtkmodel.cgqActors.forEach((sensor) => {
+    if (prop == sensor.actor) {
+      vtkmodel.selectObj = sensor.info;
+      prop.getProperty().setColor(REA);
+      vtkmodel.lastActor = prop;
+      // console.log(vtkmodel.selectObj );
+    }
+  });
+
+  vtkmodel.jcdActors.forEach((jc) => {
+    if (prop == jc.actor) {
+      vtkmodel.selectObj = jc.info;
+      prop.getProperty().setColor(REA);
+      vtkmodel.lastActor = prop;
+      // console.log(vtkmodel.selectObj );
+    }
+  });
+
   if (vtkmodel.isJg) {//结果数据选择cell
     if (vtkmodel.hardwareSelector.getFieldAssociation() ===
       FieldAssociations.FIELD_ASSOCIATION_POINTS) {//选择点
@@ -1354,6 +1461,11 @@ 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 YELLOW  = [1, 1, 0];
+const CYAN    = [0, 1, 1];
+const MAGENTA = [1, 0, 1];
+const GRAY    = [0.5, 0.5, 0.5];
+const BROWN      = [0.6, 0.4, 0.2];
 
 const JCDCOLOR = [0.5, 0.2, 0.1];
 const SOURECOLOR = [0.2, 0.5, 0];

+ 2 - 1
src/view/components/InfoVtkmodel.vue

@@ -82,6 +82,7 @@ async function readCheckNode(){
     request(params)
         .then((res) => {
           checkNodes.value= res.rows;
+          console.log("监测点信息:",checkNodes.value)
           vtkmodel.initCheckNodes(checkNodes.value);
         })
         .catch((err) => {
@@ -99,7 +100,7 @@ async function readSensor(){
         .then((res) => {
           console.log("readSensor",res);
            res.rows.forEach(element => {
-                vtkmodel.addSensor(element.pid,element.site)
+                vtkmodel.addSensor(element)
             });
         })
         .catch((err) => {

+ 3 - 0
src/view/components/MenuCheck.vue

@@ -315,6 +315,9 @@ const handleDelete = (val) => {
     tableobj.value = val;
     cid.value=val.cid
     console.log( tableobj.value );
+
+    vtkmodel.clearJgAddMode();
+    vtkmodel.selectByJCId(val.cid)
 }
 // 删除
 const shanchu = () => {

+ 4 - 4
src/view/components/MenuSensor.vue

@@ -131,7 +131,6 @@
         </el-dialog>
         <!-- 选择管道 -->
         <pipelines ref="pipeline" :selectstr="source.selectstr" @pipelineapi="pipelineapi" />
-           
           </div>
         </el-aside>
       </div>
@@ -148,6 +147,7 @@ import pipelines from "./PipeIine.vue"
 import { vtkmodel } from "@/control/vtkModel.js";
 import { timestampToTime } from '@/js/lindex.js'
 import emitter from "@/utils/emitter";
+
 let pipeline = ref();
 let currentrow=ref(true);
 let sendialogVisible = ref(false);
@@ -188,8 +188,8 @@ const handleDelete = (val) => {
     currentrow.value=true;
     console.log(val);
 
-    vtkmodel.clearJgAddMode();
-    vtkmodel.selectBySensorId(val.pid)
+    // vtkmodel.clearJgAddMode();
+    vtkmodel.selectBySensorId(val.seid)
 }
 // 删除
 const shanchu = () => {
@@ -249,7 +249,7 @@ const getsensor = () => {
              console.log(   res.rows)
              res.rows.forEach(element => {
                 console.log(1111)
-                vtkmodel.addSensor(element.pid,element.site)
+                vtkmodel.addSensor(element)
             });
                 vtkmodel.showSensor();
          

+ 362 - 0
src/view/components/SetJC.vue

@@ -0,0 +1,362 @@
+<template>
+  <div>
+    <el-dialog
+      width="300px"
+      v-model="dialoglog"
+      :modal="false"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      draggable
+      :fullscreen="false"
+      :modal-append-to-body="false"
+      modal-class="summary-dlg"
+      @close="closeDialog"
+      class="right log_class bgcolor tianjia asideg asidegbg leftbgimg"
+    >
+      <template #header="{ titleId, titleClass }">
+        <div class="my-header">
+          <el-image :src="icon" fit="contain"></el-image>
+          <h4 :id="titleId" :class="titleClass">{{ texttitle }}</h4>
+        </div>
+      </template>
+      <div class="mgstamkuang">
+      <ul>
+        <li><span>监测点编号:</span>{{JCinfo.cid}}</li>
+        <li><span>名称:</span>{{JCinfo.chname}}</li>
+        <li><span>所在巷道:</span>{{JCinfo.pname}}</li>
+      </ul>
+    </div>
+      <!-- <div class="dialog-footer footer_div l_btn">
+        <div class="footerbtn flex1">
+          <div class="borderimg">
+            <el-button @click=" closeDialog();dialoglog = false">取消</el-button>
+          </div>
+        </div>
+        <div class="footerbtn flex1">
+          <div class="borderimg">
+            <el-button @click="textclick(); dialoglog = false"> 确定 </el-button>
+          </div>
+        </div>
+      </div> -->
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, onBeforeUnmount,reactive,onUnmounted } from "vue";
+import { RouterView, RouterLink } from "vue-router";
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
+import icon from "@/assets/img/icon.png";
+import { vtkmodel } from "@/control/vtkModel.js";
+let emit = defineEmits(['Dtext','close'])
+
+let dialoglog = ref(false);
+let texttitle = ref("监测点信息");
+let JCinfo=ref({
+  cid: '',
+  chname:'',
+  pname:''
+ 
+})
+
+let timing = ref(null);
+//管道节点选择对象
+let selectObj =  ref(null);
+
+const closeDialog=()=>{
+  emit('close');
+  vtkmodel.selectNoting();
+
+  clearInterval(timing.value);
+}
+onBeforeUnmount(() => {
+  clearInterval(timing.value);
+});
+onMounted(() => {
+});
+onUnmounted(() => {
+    clearInterval(timing.value);
+})
+//选择结果定时器
+function jgSelect(){
+    timing.value = setInterval(() => {//定时器
+    selectObj.value=vtkmodel.selectObj;
+    // console.log("selectObj信息",selectObj.value)
+    if(selectObj.value==null){
+
+    }else{
+      JCinfo.value=selectObj.value;
+    }
+
+  }, 200);
+}
+
+defineExpose({ dialoglog,jgSelect,closeDialog});
+
+</script>
+<style lang="scss" scoped>
+.vtk {
+  position: absolute;
+  z-index: 150;
+  top: 70px;
+}
+.jc_padding .el-table tr {
+  height: 30px !important;
+  background: rgba(104, 173, 255, 0.3);
+  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;
+}
+
+.flex_a {
+  flex: 1;
+  padding: 0 19px;
+}
+
+.btns {
+  width: 72px;
+  height: 30px;
+  background-image: url(../../assets/img/Rectangle399.png);
+  background-repeat: no-repeat;
+  line-height: 30px;
+  overflow: hidden;
+  margin: 10px 0;
+
+  .spantext {
+    font-weight: bold;
+    font-size: 12px;
+    color: #ffffff;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.header_z {
+  box-shadow: none !important;
+  padding: 10px 20px !important;
+}
+
+.header_l {
+  line-height: 10px;
+  text-align: left;
+  padding: 0 20px;
+  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;
+
+  .el-image {
+    padding: 10px 10px 0 0;
+  }
+
+  h4 {
+    font-weight: bold;
+    font-size: 12px;
+    color: #68adff;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.jc_padding {
+  padding: 18px 10px;
+}
+
+.line {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+}
+
+.L_aside {
+  .iconimg {
+    width: 37px;
+    height: 36px;
+    margin: 0 7px 0 24px;
+  }
+}
+
+.ddd {
+  margin-top: 20px;
+
+  .ddd_div {
+    padding: 20px 0;
+    position: relative;
+  }
+
+  .class_btn {
+    position: absolute;
+    right: 0;
+    top: 21px;
+  }
+
+  .header_l {
+    line-height: 10px;
+    text-align: left;
+    padding: 0 20px;
+    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;
+
+    .el-image {
+      padding: 10px 10px 0 0;
+    }
+
+    h4 {
+      font-weight: bold;
+      font-size: 12px;
+      color: #68adff;
+      line-height: 14px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+}
+
+.el-dialog__title {
+  display: inline-block;
+}
+
+.bgcolor {
+  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;
+}
+
+.log_class {
+  .my-header {
+    display: flex;
+    align-items: center;
+    line-height: 10px;
+    height: 40px;
+    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;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+
+    .el-image {
+      padding: 0px 10px 0 0;
+    }
+
+    h4 {
+      font-weight: bold;
+      font-size: 12px;
+      color: #68adff;
+      line-height: 14px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+      // margin-top: 8px;
+    }
+  }
+
+  
+
+  .my_content {
+    width: 100%;
+    height: 90px;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    position: relative;
+
+    .radio-group {
+      display: flex;
+      justify-content: center;
+
+      .el-radio {
+        flex: 1;
+        justify-content: center;
+        font-weight: bold;
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 14px;
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    position: absolute;
+    bottom: 17px;
+    display: flex;
+
+    .footerbtn {
+      flex: 1;
+      text-align: center;
+    }
+  }
+}
+
+.my_content1 {
+  .el-table .cell {
+    font-weight: 400;
+    font-size: 12px;
+    color: #ffffff !important;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.borderimg {
+  width: 109px;
+  height: 30px;
+  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,
+      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;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.el-table,
+.el-table thead th {
+  background-color: rgba(13, 22, 57, 0.96) !important;
+}
+
+.el-form-item__label {
+  color: #ffffff !important;
+}
+
+.jiancedian {
+  width: 380px;
+  position: absolute;
+  right: 0;
+  top: 70px;
+  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;
+}
+</style>
+<style>
+.log_class {
+  background-color: rgba(13, 22, 57, 0.96) !important;
+}
+.right {
+  right: 0px;
+  position: absolute;
+  top: -7vh;
+}
+</style>

+ 362 - 0
src/view/components/SetSensor.vue

@@ -0,0 +1,362 @@
+<template>
+  <div>
+    <el-dialog
+      width="300px"
+      v-model="dialoglog"
+      :modal="false"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      draggable
+      :fullscreen="false"
+      :modal-append-to-body="false"
+      modal-class="summary-dlg"
+      @close="closeDialog"
+      class="right log_class bgcolor tianjia asideg asidegbg leftbgimg"
+    >
+      <template #header="{ titleId, titleClass }">
+        <div class="my-header">
+          <el-image :src="icon" fit="contain"></el-image>
+          <h4 :id="titleId" :class="titleClass">{{ texttitle }}</h4>
+        </div>
+      </template>
+      <div class="mgstamkuang">
+      <ul>
+        <li><span>传感器编号:</span>{{sensorinfo.seid}}</li>
+        <li><span>类型:</span>{{sensorinfo.type}}</li>
+        <li><span>所在巷道:</span>{{sensorinfo.pname}}</li>
+      </ul>
+    </div>
+      <!-- <div class="dialog-footer footer_div l_btn">
+        <div class="footerbtn flex1">
+          <div class="borderimg">
+            <el-button @click=" closeDialog();dialoglog = false">取消</el-button>
+          </div>
+        </div>
+        <div class="footerbtn flex1">
+          <div class="borderimg">
+            <el-button @click="textclick(); dialoglog = false"> 确定 </el-button>
+          </div>
+        </div>
+      </div> -->
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, onBeforeUnmount,reactive,onUnmounted } from "vue";
+import { RouterView, RouterLink } from "vue-router";
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
+import icon from "@/assets/img/icon.png";
+import { vtkmodel } from "@/control/vtkModel.js";
+let emit = defineEmits(['Dtext','close'])
+
+let dialoglog = ref(false);
+let texttitle = ref("传感器信息");
+let sensorinfo=ref({
+  seid: '',
+  type:'',
+  pname:''
+ 
+})
+
+let timing = ref(null);
+//管道节点选择对象
+let selectObj =  ref(null);
+
+const closeDialog=()=>{
+  emit('close');
+  vtkmodel.selectNoting();
+
+  clearInterval(timing.value);
+}
+onBeforeUnmount(() => {
+  clearInterval(timing.value);
+});
+onMounted(() => {
+});
+onUnmounted(() => {
+    clearInterval(timing.value);
+})
+//选择结果定时器
+function jgSelect(){
+    timing.value = setInterval(() => {//定时器
+    selectObj.value=vtkmodel.selectObj;
+    // console.log("selectObj信息",selectObj.value)
+    if(selectObj.value==null){
+
+    }else{
+      sensorinfo.value=selectObj.value;
+    }
+
+  }, 200);
+}
+
+
+defineExpose({ dialoglog,jgSelect,closeDialog});
+</script>
+<style lang="scss" scoped>
+.vtk {
+  position: absolute;
+  z-index: 150;
+  top: 70px;
+}
+.jc_padding .el-table tr {
+  height: 30px !important;
+  background: rgba(104, 173, 255, 0.3);
+  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;
+}
+
+.flex_a {
+  flex: 1;
+  padding: 0 19px;
+}
+
+.btns {
+  width: 72px;
+  height: 30px;
+  background-image: url(../../assets/img/Rectangle399.png);
+  background-repeat: no-repeat;
+  line-height: 30px;
+  overflow: hidden;
+  margin: 10px 0;
+
+  .spantext {
+    font-weight: bold;
+    font-size: 12px;
+    color: #ffffff;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.header_z {
+  box-shadow: none !important;
+  padding: 10px 20px !important;
+}
+
+.header_l {
+  line-height: 10px;
+  text-align: left;
+  padding: 0 20px;
+  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;
+
+  .el-image {
+    padding: 10px 10px 0 0;
+  }
+
+  h4 {
+    font-weight: bold;
+    font-size: 12px;
+    color: #68adff;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.jc_padding {
+  padding: 18px 10px;
+}
+
+.line {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+}
+
+.L_aside {
+  .iconimg {
+    width: 37px;
+    height: 36px;
+    margin: 0 7px 0 24px;
+  }
+}
+
+.ddd {
+  margin-top: 20px;
+
+  .ddd_div {
+    padding: 20px 0;
+    position: relative;
+  }
+
+  .class_btn {
+    position: absolute;
+    right: 0;
+    top: 21px;
+  }
+
+  .header_l {
+    line-height: 10px;
+    text-align: left;
+    padding: 0 20px;
+    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;
+
+    .el-image {
+      padding: 10px 10px 0 0;
+    }
+
+    h4 {
+      font-weight: bold;
+      font-size: 12px;
+      color: #68adff;
+      line-height: 14px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+}
+
+.el-dialog__title {
+  display: inline-block;
+}
+
+.bgcolor {
+  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;
+}
+
+.log_class {
+  .my-header {
+    display: flex;
+    align-items: center;
+    line-height: 10px;
+    height: 40px;
+    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;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+
+    .el-image {
+      padding: 0px 10px 0 0;
+    }
+
+    h4 {
+      font-weight: bold;
+      font-size: 12px;
+      color: #68adff;
+      line-height: 14px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+      // margin-top: 8px;
+    }
+  }
+
+  
+
+  .my_content {
+    width: 100%;
+    height: 90px;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    position: relative;
+
+    .radio-group {
+      display: flex;
+      justify-content: center;
+
+      .el-radio {
+        flex: 1;
+        justify-content: center;
+        font-weight: bold;
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 14px;
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    position: absolute;
+    bottom: 17px;
+    display: flex;
+
+    .footerbtn {
+      flex: 1;
+      text-align: center;
+    }
+  }
+}
+
+.my_content1 {
+  .el-table .cell {
+    font-weight: 400;
+    font-size: 12px;
+    color: #ffffff !important;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.borderimg {
+  width: 109px;
+  height: 30px;
+  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,
+      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;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.el-table,
+.el-table thead th {
+  background-color: rgba(13, 22, 57, 0.96) !important;
+}
+
+.el-form-item__label {
+  color: #ffffff !important;
+}
+
+.jiancedian {
+  width: 380px;
+  position: absolute;
+  right: 0;
+  top: 70px;
+  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;
+}
+</style>
+<style>
+.log_class {
+  background-color: rgba(13, 22, 57, 0.96) !important;
+}
+.right {
+  right: 0px;
+  position: absolute;
+  top: -7vh;
+}
+</style>

+ 201 - 161
src/view/components/tool.vue

@@ -1,188 +1,228 @@
 <template>
-    <!-- 工具栏 -->
-    <div class="vktool">
-      <ul>
-        <li class="list" v-for="(item,index) in toolarr" :key="index" @click="clicklist(index)">{{ item.name }}</li>
-      </ul>
-      <div class="elcheckbox">
-        <el-checkbox v-model="checked1" label="巷道名称" size="large" @change="changecheckbox($event)" />
-        <el-checkbox v-model="checked2" label="灾源点" size="large" @change="changecheckbox2($event)" />
-        <el-checkbox v-model="checked3" label="监测点" size="large" @change="changecheckbox3($event)" />
-        <el-checkbox v-model="checked4" label="传感器" size="large" @change="changecheckbox4($event)" />
-  </div>
+  <!-- 工具栏 -->
+  <div class="vktool">
+    <ul>
+      <li class="list" v-for="(item, index) in toolarr" :key="index" @click="clicklist(index)">{{ item.name }}</li>
+    </ul>
+    <div class="elcheckbox">
+      <el-checkbox v-model="checked1" label="巷道名称" size="large" @change="changecheckbox($event)" />
+      <el-checkbox v-model="checked2" label="灾源点" size="large" @change="changecheckbox2($event)" />
+      <el-checkbox v-model="checked3" label="监测点" size="large" @change="changecheckbox3($event)" />
+      <el-checkbox v-model="checked4" label="传感器" size="large" @change="changecheckbox4($event)" />
     </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 emitter from "@/utils/emitter";
-  
-  onMounted(() => {
- 
-  });
-  let checked1=ref(false);
-  let checked2=ref(false);
-  let checked3=ref(false);
-  let checked4=ref(false);
-  let toolarr=ref([
-    {
-      name:'X+'
-    },
-    {
-      name:'X-'
-    },
-    {
-      name:'Y+'
-    },
-    {
-      name:'Y-'
-    },
-    {
-      name:'Z+'
-    },
-    {
-      name:'Z-'
-    },
-    {
-      name:'复位'
-    },
-  ])
- 
-   const clicklist=(index)=>{
-   switch(index){
+    <!-- 监测点信息 -->
+    <setJC ref="dialogtrue1"  @close="close1"></setJC>
+    <!-- 传感器信息 -->
+    <setSensor ref="dialogtrue"  @close="close"></setSensor>
+  </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 emitter from "@/utils/emitter";
+import setSensor from "./SetSensor.vue";
+import setJC from "./SetJC.vue"
+let dialogtrue = ref();
+let dialogtrue1 = ref();
+
+onMounted(() => {
+
+});
+let checked1 = ref(false);
+let checked2 = ref(false);
+let checked3 = ref(false);
+let checked4 = ref(false);
+let toolarr = ref([
+  {
+    name: 'X+'
+  },
+  {
+    name: 'X-'
+  },
+  {
+    name: 'Y+'
+  },
+  {
+    name: 'Y-'
+  },
+  {
+    name: 'Z+'
+  },
+  {
+    name: 'Z-'
+  },
+  {
+    name: '复位'
+  },
+])
+
+const clicklist = (index) => {
+  switch (index) {
     case 0:
-    vtkmodel.x_up();
-    break;
+      vtkmodel.x_up();
+      break;
     case 1:
-    vtkmodel.x_down();
-    break;
+      vtkmodel.x_down();
+      break;
     case 2:
-    vtkmodel.y_up();
-    break;
+      vtkmodel.y_up();
+      break;
     case 3:
-    vtkmodel.y_down();
-    break;
+      vtkmodel.y_down();
+      break;
     case 4:
-    vtkmodel.z_up();
-    break;
+      vtkmodel.z_up();
+      break;
     case 5:
-    vtkmodel.z_down();
-    break;
+      vtkmodel.z_down();
+      break;
     case 6:
-    vtkmodel.xyz_back();
-    break;
+      vtkmodel.xyz_back();
+      break;
     default:
 
-   }
-   }
-   emitter.on('handleSelect',(data)=>{
-    checkeclear();
-
-  });
-  //  emitter.emit('checkeclear',(90));
-  const checkeclear=()=>{
-    checked2.value=false;
-    checked3.value=false;
-    checked4.value=false;
-    vtkmodel.removeSoure();
-    vtkmodel.removejc();
-    vtkmodel.removeSensor();
   }
+}
+emitter.on('handleSelect', (data) => {
+  checkeclear();
+
+});
+//  emitter.emit('checkeclear',(90));
+const checkeclear = () => {
+  checked2.value = false;
+  checked3.value = false;
+  checked4.value = false;
+  vtkmodel.removeSoure();
+  vtkmodel.removejc();
+  vtkmodel.removeSensor();
+}
 
 
-  const changecheckbox=(val)=>{
-    vtkmodel.delpump();//清除风机风门
-    if(checked1.value){
-      vtkmodel.showPname();
-    }else{
-      vtkmodel.removePname();
-    }
+const changecheckbox = (val) => {
+  vtkmodel.delpump();//清除风机风门
+  if (checked1.value) {
+    vtkmodel.showPname();
+  } else {
+    vtkmodel.removePname();
   }
-  const changecheckbox2=(val)=>{
-    vtkmodel.delpump();//清除风机风门
-    if(checked2.value){
-      vtkmodel.showSoure();
-    }else{
-      vtkmodel.removeSoure();
-    }
-    console.log(checked2.value);
+}
+const changecheckbox2 = (val) => {
+  vtkmodel.delpump();//清除风机风门
+  if (checked2.value) {
+    vtkmodel.showSoure();
+  } else {
+    vtkmodel.removeSoure();
   }
-  const changecheckbox3=(val)=>{
-    vtkmodel.delpump();//清除风机风门
-    if(checked3.value){
-      vtkmodel.showjc();
-    }else{
-      vtkmodel.removejc();
-    }
+  console.log(checked2.value);
+}
+const changecheckbox3 = (val) => {
+  vtkmodel.delpump();//清除风机风门
+  if (checked3.value) {
+    console.log("调用监测")
+    vtkmodel.showjc();
+    // 选中出弹窗
+    dialogtrue1.value.dialoglog = true;
+    vtkmodel.selectJCs();
+    dialogtrue1.value.jgSelect();
+  } else {
+    vtkmodel.removejc();
+    dialogtrue1.value.dialoglog = false;
+    dialogtrue1.value.closeDialog();
   }
-  const changecheckbox4=(val)=>{
-    console.log(val);
-    checked4.value=val;
-    vtkmodel.delpump();//清除风机风门
-    if(checked4.value){
-      vtkmodel.showSensor();
-    }else{
-      vtkmodel.removeSensor();
-    }
+}
+const changecheckbox4 = (val) => {
+  vtkmodel.delpump();//清除风机风门
+  if (checked4.value) {
+    console.log("调用传感")
+    vtkmodel.showSensor();
+    // 选中出弹窗
+    dialogtrue.value.dialoglog = true;
+    vtkmodel.selectSensors();
+    dialogtrue.value.jgSelect();
+  } else {
+    vtkmodel.removeSensor();
+    dialogtrue.value.dialoglog = false;
+    dialogtrue.value.closeDialog();
   }
-  emitter.on('myaddsg',(data)=>{
-    changecheckbox4(data);
-  })
+}
+emitter.on('myaddsg', (data) => {
+  changecheckbox4(data);
+})
 
-  onUnmounted(() =>{
+onUnmounted(() => {
 
-emitter.off('handleSelect');
-//emitter.off('myaddsg');
+  emitter.off('handleSelect');
+  //emitter.off('myaddsg');
 })
-  </script>
-  <style scoped>
-.vktool{
-    position: absolute;
-    top: 90px;
-    left: 30%;
-    z-index: 189;
-  }
-  .vktool ul{
-    display: flex;
-  }
-  .vktool .list{
- 
-    font-size: 14px;
-    text-align: center;
-    color: #fff;
-    /* line-height: 30px; */
-    background-color: rgba(61, 219, 252, 0.20) !important;
-    position: relative;
-    padding: 3px 8px;
-    margin-right: 10px;;
-  }
-  .vktool .list::before {
-      content: " ";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 200%;
-      height: 200%;
-      border: 1px solid rgba(61, 219, 252, 1);
-      transform-origin: 0 0;
-      transform: scale(0.5);
-  }
-.elcheckbox{
+
+const closeAll = () => {
+  dialogtrue.value.dialoglog = false;
+  dialogtrue1.value.dialoglog = false;
+}
+
+const close = () => {
+  checked4.value = false;
+}
+
+const close1= () => {
+  checked3.value = false
+}
+
+
+
+</script>
+<style scoped>
+.vktool {
+  position: absolute;
+  top: 90px;
+  left: 30%;
+  z-index: 189;
+}
+
+.vktool ul {
+  display: flex;
+}
+
+.vktool .list {
+
+  font-size: 14px;
+  text-align: center;
+  color: #fff;
+  /* line-height: 30px; */
+  background-color: rgba(61, 219, 252, 0.20) !important;
+  position: relative;
+  padding: 3px 8px;
+  margin-right: 10px;
+  ;
+}
+
+.vktool .list::before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  border: 1px solid rgba(61, 219, 252, 1);
+  transform-origin: 0 0;
+  transform: scale(0.5);
+}
+
+.elcheckbox {
   width: 245px;
   display: flex;
 }
-  </style>
-  <style>
-  
-  .vktool .el-checkbox.el-checkbox--large .el-checkbox__label{
-      color: #fff !important;
-    }
-.vktool  .el-checkbox{
+</style>
+<style>
+.vktool .el-checkbox.el-checkbox--large .el-checkbox__label {
+  color: #fff !important;
+}
+
+.vktool .el-checkbox {
   flex: 1;
-  margin-right:6px;
+  margin-right: 6px;
 
 }
-  </style>
-  
+</style>