disaster_web3/src/view/components/tool.vue

<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>
  </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){
    case 0:
    vtkmodel.x_up();
    break;
    case 1:
    vtkmodel.x_down();
    break;
    case 2:
    vtkmodel.y_up();
    break;
    case 3:
    vtkmodel.y_down();
    break;
    case 4:
    vtkmodel.z_up();
    break;
    case 5:
    vtkmodel.z_down();
    break;
    case 6:
    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();
  }


  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 changecheckbox3=(val)=>{
    vtkmodel.delpump();//清除风机风门
    if(checked3.value){
      vtkmodel.showjc();
    }else{
      vtkmodel.removejc();
    }
  }
  const changecheckbox4=(val)=>{
    console.log(val);
    checked4.value=val;
    vtkmodel.delpump();//清除风机风门
    if(checked4.value){
      vtkmodel.showSensor();
    }else{
      vtkmodel.removeSensor();
    }
  }
  emitter.on('myaddsg',(data)=>{
    changecheckbox4(data);
  })

  onUnmounted(() =>{

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{
  width: 245px;
  display: flex;
}
  </style>
  <style>
  
  .vktool .el-checkbox.el-checkbox--large .el-checkbox__label{
      color: #fff !important;
    }
.vktool  .el-checkbox{
  flex: 1;
  margin-right:6px;

}
  </style>