disaster_web3/src/view/components/Menupath.vue

<template>
    <div class=" bou  tablebk">
         <div class="common-layout" style="margin: 0">
         <el-aside
         width="357px"
           class="L_aside L_aside1 asideg asidegbg leftbgimg1"
           v-show="sendialogVisible"
         >
           <div class="demo-collapse">
             <el-collapse v-model="coolactiveName1" accordion>
               <el-collapse-item name="1" class="imgneon">
                 <template #title>
                   <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                   路径预设<el-icon class="header-icon"> </el-icon>
                 </template>
     <div class="l_Dialog">
             <div class="classtab">
                 <div class="asides_content">
                     <div class="jc_content tablecolor jc_content">
 
                         <div class="font12 my_content1">
                             <div class="btncolor tablefocus bmar">
 
                                 <el-table :data="tableData" style="width:480px" :max-height="tableHeight"
                                 :highlight-current-row="currentrow" :row-class-name="tableRowClassName"
                                     @row-click="handleDelete($event)"
                                     :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0) ' }">
                                     <template v-slot:empty>
                                    <p>暂无数据</p>
                                    </template>
                                     <el-table-column prop="name" label="路径名称" />
                                     <!-- <el-table-column label="操作"  width="70px">
                                        <template #default="scope">
                                            <el-button
                                            size="small"
                                            type="success"
                                            @click="handledetection(scope.$index, scope.row)"
                                            >查看</el-button
                                            >
                                        </template>
                                        </el-table-column> -->
                                 </el-table>
                             </div>
                         </div>
                         <div class="dialog-footer footer_div l_btn">
                             <div class="footerbtn flex1">
                                 <div class="borderimg"><el-button @click="addsg();">添加</el-button></div>
                             </div>
                             <div class="footerbtn flex1">
                                 <div class="borderimg"><el-button @click="shanchu('1')">
                                         删除
                                     </el-button></div>
                             </div>
                             <div class="footerbtn flex1">
                                 <div class="borderimg"><el-button @click="amend()">
                                         修改
                                     </el-button></div>
                             </div>
                            
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <!-- 路劲预设节点 -->
         <div
                 class="xian tablefocus"
                      style="margin-top: 20px"
                      v-show="pathshownode"
                    >
                      <div class="header_l header_z headerimg">
                        <el-image :src="icon" fit="contain"></el-image>
                        <h4 class="tianjia">预设路径节点</h4>
                        <div class="closeimg" @click="pathshownode = false">
                         
                        </div>
                      </div>
                      <el-table
                        :data="childtableData"
                        style="width: 100%"
                        :max-height="tableHeight"
                        :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
                        @row-click="handleDelete3($event)"
                        :highlight-current-row="currentrow1" 
                      >
                      <template v-slot:empty>
                        <p>暂无数据</p>
                        </template>
                      <!-- <el-table-column prop="nid" label="节点编号" /> -->
                        <el-table-column prop="nname" label="节点名称" />
                      
                        <el-table-column prop="seq" label="排序" />
                      </el-table>
                      <div class="dialog-footer footer_div l_btn">
                             <div class="footerbtn flex1">
                                 <div class="borderimg"><el-button @click="cadd(); addVisiblenode=true">添加</el-button></div>
                             </div>
                             <div class="footerbtn flex1">
                                 <div class="borderimg"><el-button @click="childamend()">
                                         修改
                                     </el-button></div>
                             </div>
                             <div class="footerbtn flex1">
                                 <div class="borderimg"><el-button @click="shanchu('2')">
                                         删除
                                     </el-button></div>
                             </div>
                            
                             <div class="footerbtn flex1">
                                 <div class="borderimg"><el-button @click="pathshownode=false">
                                         关闭
                                     </el-button></div>
                             </div>
                         </div>
                    </div>
         </el-collapse-item>
             </el-collapse>
         <!-- 添加 -->
         <el-dialog    
         :append-to-body="true"  
            align-center
            :z-index='1000'
          v-model="addVisible" width="400" class="dialog_class bgcolor tianjia  foter_l tianjia">
 
             <template #header="{ titleId, titleClass }">
                 <div class="my-header ">
                     <el-image :src="icon" fit="contain"></el-image>
                     <h4 :id="titleId" :class="titleClass">{{ add }}</h4>
 
                 </div>
             </template>
             <el-form class="demo-form-inline" >
                 <el-form-item label="编号" :label-width="formLabelWidth6">
                     <el-input v-model="wuliobj.code"   maxlength="10" oninput ="value=value.replace(/[^\w\\/]/ig,'')"  class="w-50 m-2" placeholder="请输入" />
                 </el-form-item>
                 <el-form-item label="名称" :label-width="formLabelWidth6">
                     <el-input v-model="wuliobj.name" maxlength="18" class="w-50 m-2" placeholder="请输入" />
                 </el-form-item>
             </el-form>
             <div class="dialog-footer footer_div l_btn">
                 <div class="footerbtn flex1">
                     <div class="borderimg"><el-button @click="addVisible = false">取消</el-button></div>
                 </div>
                 <div class="footerbtn flex1">
                     <div class="borderimg"><el-button @click="addEied();">
                             确定
                         </el-button></div>
                 </div>
             </div>
         </el-dialog>
         <!-- 添加节点 -->
         <el-dialog   :append-to-body="true"  
         align-center
           :modal="false"
            :lock-scroll="false"
            :close-on-click-modal="false"
            modal-class="summary-dlg"
            draggable
            :fullscreen="false"
            :modal-append-to-body="false"
             :z-index='1000' v-model="addVisiblenode" width="400" class="dialog_class bgcolor tianjia  foter_l tianjia">
        <template #header="{ titleId, titleClass }">
            <div class="my-header ">
                <el-image :src="icon" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">{{ caddname }}</h4>

            </div>
        </template>
        <div class="demo-input-suffix firsttitle magintop">
        <el-form-item label="节点选择" :label-width="formLabelWidth6">
          <el-input
            v-model="selectstr"
            disabled
            class="w-50 m-2"
            placeholder="节点选择"
          />
        </el-form-item>
        <div class="btn2">
          <el-button
            type="primary"
            @click="
              nodeclick();
            "
            >选择节点</el-button
          >
        </div>
        <div class="btn2" style="padding-left: 10px">
          <el-button type="primary" @click="Dclick()">3D节点选择</el-button>
        </div>
      </div>
      <el-form-item label="排序" :label-width="formLabelWidth6">
                     <el-input v-model="seq"   oninput ="value=value.replace(/[^0-9]/g,'')"   maxlength="10" class="w-50 m-2" placeholder="请输入" />
                 </el-form-item>
        <div class="dialog-footer footer_div l_btn">
            <div class="footerbtn flex1">
                <div class="borderimg"><el-button @click="addVisiblenode = false">取消</el-button></div>
            </div>
            <div class="footerbtn flex1">
                <div class="borderimg"><el-button @click="addnode();">
                        确定
                    </el-button></div>
            </div>
        </div>
        </el-dialog>
         <!-- 删除 -->
         <el-dialog v-model="dialogsgdelect"  align-center  :append-to-body="true" width="400" class="dialog_class bgcolor tianjia">
 
             <template #header="{ titleId, titleClass }">
                 <div class="my-header ">
                     <el-image :src="icon" fit="contain"></el-image>
                     <h4 :id="titleId" :class="titleClass">删除框</h4>
 
                 </div>
             </template>
             <h4 class="delecttitle"> 是否确认删除 <span class="spanclad">{{ zqname }}</span></h4>
             <div class="dialog-footer footer_div l_btn">
                 <div class="footerbtn flex1">
                     <div class="borderimg"><el-button @click="dialogsgdelect = false">取消</el-button></div>
                 </div>
                 <div class="footerbtn flex1">
                     <div class="borderimg"><el-button @click="fundeledata();dialogsgdelect = false">
                             确定
                         </el-button></div>
                 </div>
             </div>
         </el-dialog>
           </div>
         <!--点击查看 -->
     </el-aside>
     </div>
     </div>
     <NodeSelect ref="NodeSelectref" @queding="queding"></NodeSelect>
     <selfdialogs ref="dialogtrue" @Dtext="Dtext"></selfdialogs>
 </template>
 
 <script setup>
 import { computed, ref, onMounted, reactive, toRef } from "vue";
 import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
 import icon from "@/assets/img/icon.png";
 import selfdialogs from "./SetNode.vue";
 import NodeSelect from "./NodeLine.vue";
 import { vtkmodel } from "@/control/vtkModel.js";;
 import { timestampToTime } from '@/js/lindex.js'
 import emitter from "@/utils/emitter";
 let addVisiblenode=ref(false);
 let pipeline = ref();
 let dialogtrue = ref();
 let selectstr=ref('');
 let caddname=ref('');
 let seq=ref();
 let NodeSelectref=ref();
 let sendialogVisible = ref(false);
 let currentrow=ref(true);
 let currentrow1=ref(false);
 let tishi=ref();
 let addVisible = ref(false);
 let dialogsgdelect = ref(false)
 let pathshownode=ref(false)
 let nid=ref();
 let childnodeobj=ref();
 let classradio1 = ref('Fire');
 const formLabelWidth6 = ref(100);
 let add = ref("")
 let delt=ref();
 const resultactiveName = ref("first");
 let coolactiveName1 = ref(["1", "2"]);
 let tableHeight = ref(200);
 let tableData = ref([]);
 let tableobj = ref({});
 let wnid=ref();
 let zqname = ref();
 let rowobj=ref([]);
 let wuliobj = ref({
    wid:'',
     code: '',
     name:'',
     density: "",
     diffcoe: '',
     speheat: '',
 })
 let childtableData=ref([]);
 let source = ref({
     selectstr: '',
     site: ''
 })
 let firepid = ref("")
 const tableRowClassName = ({ row, rowIndex }) => {
     if (rowIndex % 2 != 0) {
         return 'evenRow';
     }
     return 'oddRow';
 
 }

 // 选中一行
 const handleDelete = (val) => {
     currentrow.value=true;
     tableobj.value = val;
     handledetection(val);

 }
 // 删除
 const shanchu = (val) => {
    delt.value=val;
    if(val=='1'){
        if (JSON.stringify( tableobj.value ) == '{}') {
         ElMessage.error("你还没有选中删除的项目")
     } else {
         dialogsgdelect.value = true;
         zqname.value = tableobj.value.name;
     }
    }else{
        if ( JSON.stringify(childnodeobj.value) == '{}') {
         ElMessage.error("你还没有选中删除的项目")
     } else {
         dialogsgdelect.value = true;
         zqname.value = childnodeobj.value.nname;
     }   
    }
   
 }
 const fundeledata=()=>{
    if(delt.value=='1'){
        faterdelete();
    }else{
        childdelete();
    }

 }
//  父的删除
const faterdelete=()=>{
    const params = {
         transCode: 'D10032',
         wid: tableobj.value.wid,
     }
     request(params)
         .then((res) => {
            pathshownode.value=false;
            getsensor();
            ElMessage({
                message: '删除路径成功',
                type: 'success',
            })

         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
 }
 // 子节点的删除
 const childdelete=()=>{
    const params = {
         transCode: 'D10035',
         wnid: childnodeobj.value.wnid,
     }
     request(params)
         .then((res) => {
            ElMessage({
                  message: '预设路径节点删除成功',
                  type: 'success',
              })
            childdata();

         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
 }
 const handledetection=( row)=>{
    //wuliobj.value=row;
 
    rowobj.value=row;
    pathshownode.value=true;
    childdata();
 }

 const childdata = () => {
    vtkmodel.safetypathremove();
     const params = {
         transCode: 'D10033',
         wid: rowobj.value.wid
     }
     request(params)
         .then((res) => {
            childtableData.value=res.rows;
          childnodeobj.value={};
            if (res.rows.length == 0) {
        ElMessage({
          message: "无路径数据！",
          type: "error",
        });
      } else {
   
        // vtkmodel.clearAll();
        vtkmodel.safetypath(res.rows);
      }
          

         })
         .catch((err) => {
       
         })
 }
 emitter.on('handleSelect',(data)=>{
    vtkmodel.safetypathremove();

});
onUnmounted(() =>{

emitter.off('handleSelect')
})
 onMounted(() => {
     getsensor();
 });
 // 查询
 const getsensor = () => {
 
     const params = {
         transCode: 'D10030',
     }
     request(params)
         .then((res) => {
             tableData.value = res.rows;
              tableobj.value={};
         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
 }
 //添加
 const addsg = () => {
     add.value = "添加";
     tishi.value= add.value;
     currentrow.value=false;
     addVisible.value = true;
     wuliobj.value.wid = '';
     wuliobj.value.code = '';
     wuliobj.value.name = '';
     tableobj.value={};
 
 }
 // 添加修改的接口
 const addEied = () => {
     const params = {
         transCode: 'D10031',
         wid: wuliobj.value.wid,
         code: wuliobj.value.code,
         name:  wuliobj.value.name,
     }
     request(params)
         .then((res) => {
             tableData.value = res.rows;
             currentrow.value=false;
             addVisible.value=false;
             getsensor();
             ElMessage({
                message: tishi.value+'路径成功',
                type: 'success',
            })
         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
 }
 
 //修改
 const amend = () => {
     add.value = "修改";
     tishi.value= add.value;
     if (JSON.stringify(tableobj.value) == '{}') {
         ElMessage.error("你还没有选中修改的项目")
     } else {
     addVisible.value = true;
     wuliobj.value.wid= tableobj.value.wid;
     wuliobj.value.code =tableobj.value.code;
     wuliobj.value.name = tableobj.value.name;
     }
 }
 const changeModel = () => {
  vtkmodel.clearJgAddMode();
  vtkmodel.renderWindow.render();
};
 // 3D弹屏
const Dclick = () => {
    dialogtrue.value.dialoglog = true;
  vtkmodel.clearJgAddMode() ;
  vtkmodel.selectNodes();
  dialogtrue.value.jgSelect();
};
// 节点选择
const nodeclick = () => {
// defineExpose({ dialogVisiblenode, pipelinedata,searchtaggd });
    NodeSelectref.value.dialogVisiblenode=true;
    NodeSelectref.value.pipelinedata();
}
const Dtext=(val)=>{
  nid.value = val.id;
  selectstr.value= val.name;

}
//
const queding=(val)=>{
    // selectstr.value =  NodeSelectref.value.
    console.log(val)
    console.log(223333)
    selectstr.value =val.name;
    nid.value=val.id;

}

const cadd=()=>{
    caddname.value='添加'
    tishi.value= caddname.value;
    nid.value=null;
    selectstr.value=null;
    wnid.value='';
    seq.value='';
    childnodeobj.value={};

}
// 添加路径节点
const addnode=(val)=>{
    const params = {
         transCode: 'D10034',
         wid: rowobj.value.wid,
         wnid: wnid.value,
         nid:nid.value,
         seq:seq.value
     }
     console.log(seq.value)
     console.log(params);
     request(params)
         .then((res) => {
            addVisiblenode.value = false;
            ElMessage({
                  message: '预设路径节点'+tishi.value+'成功',
                  type: 'success',
              })
            childdata();
            currentrow1.value=false;
       
         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
         })
}
// 修改

const childamend=()=>{
    if(JSON.stringify(childnodeobj.value) == '{}'){
        ElMessage.error("你还没有选中修改的项目")
    }else{
        caddname.value='修改'
        tishi.value=caddname.value;
        addVisiblenode.value=true;
        selectstr.value=childnodeobj.value.nname;
        nid.value= childnodeobj.value.nid;
        wnid.value=childnodeobj.value.wnid;
        wuliobj.value.wid=childnodeobj.value.wid;
        seq.value= childnodeobj.value.seq;
    }
}
const handleDelete3=(val)=>{
    childnodeobj.value=val;
    console.log(childnodeobj.value);
  
    currentrow1.value=true;

}

 defineExpose({ sendialogVisible, });
 </script>
 <style scoped>
 .el-overlay-dialog,.summary-dlg,.el-dialog__wrapper {
    pointer-events: none
}
 </style>