disaster/src/view/components/SetNode.vue

<template>
  <div>
    <el-dialog
      width="300px"
      v-model="dialoglog"
      :modal="false"
      :close-on-click-modal="false"
      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>{{msg.id}}</li>
        <li><span>名称：</span>{{msg.name}}</li>
        <li><span>X：</span>{{msg.x}}</li>
        <li><span>y：</span>{{msg.y}}</li>
        <li><span>Z：</span>{{msg.z}}</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',])

let dialoglog = ref(false);
let texttitle = ref("节点信息");
let msg=ref({
  id: '',
  name: "",
  x:"",
  y: '',
  z: '',
 
})
defineExpose({ dialoglog,jgSelect});
let timing = ref(null);
//管道节点选择对象
let selectObj =  ref(null);
const textclick=()=>{
  emit('Dtext',selectObj.value);
  clearInterval(timing.value);
}
const closeDialog=()=>{
  clearInterval(timing.value);
}
onBeforeUnmount(() => {
  clearInterval(timing.value);
});
onMounted(() => {
});
onUnmounted(() => {
    clearInterval(timing.value);
})
//选择结果定时器
function jgSelect(){
    timing.value = setInterval(() => {//定时器
    selectObj.value=vtkmodel.selectObj;
    if(selectObj.value==null){

    }else{
      msg.value=selectObj.value;
    }

  }, 200);
}

</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 {
    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: 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;
    }
  }

  .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;
  }
}

.l_btn .borderimg {
  width: 70px;
  height: 30px;
  font-size: 12px;
  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); */
  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
    1;
  font-weight: bold;
  border-radius: 4px;
  display: flex;
  display: inline-block;
  box-sizing: border-box;
}

.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;
}

.L_aside {
  height: calc(100vh - 70px);
  position: absolute;
  top: 70px;
  overflow: hidden;
}

.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>