disaster_web3/src/view/components/Menumap.vue

<template>
    <div class="l_Dialog bou tablebk">
     <!--火灾左侧栏-->
     <div class="common-layout" style="margin: 0">
       <el-aside
       width="480px"
         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="btnicon">
               <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 type="index" label="编号"  width="70"/>
                                   <el-table-column prop="ptcode" label="平台code" />
                                   <el-table-column prop="ptid" label="映射编号" />
                                   <el-table-column prop="pname" label="所在巷道" />
                            
                               </el-table>
                               <div class="demo-pagination-block pagination" style="margin-top: 20px;">
                                            <el-config-provider :locale="zhCn">
                                            <el-pagination v-model:current-page="currentPage4"
                                                v-model:page-size="pageSize4" small background
                                                layout="prev, total,pager, next, jumpe," :total="parseInt(total)"
                                                class="mt-4" @current-change="handleCurrentChange" />
                                   </el-config-provider>
                                  </div>
                           </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="addsg('2')">
                             修改
                                 </el-button></div></div> -->
                                 <div class="footerbtn flex1">
                               <div class="borderimg"><el-button @click="amend()">
                                       修改
                                   </el-button></div>
                           </div>
                           <div class="footerbtn flex1">
                               <div class="borderimg"><el-button @click="shanchu()">
                                       删除
                                   </el-button></div>
                           </div>
                        
                          
                       </div>
                   </div>
               </div>
           </div>
       </div>
       </el-collapse-item>
           </el-collapse>
       <!-- 添加 -->
       <el-dialog v-model="addVisible" draggable :modal="false" 
       modal-class="summary-dlg" align-center  :append-to-body="true"
       @close="clearvtk" 
       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" :inline="true" :model="senobj">
               <el-form-item label="平台编号" :label-width="formLabelWidth6">
                   <el-input v-model="senobj.ptcode" maxlength="15" @input="senobj.ptcode = senobj.ptcode.replace(/[\u4e00-\u9fa5\s]/g, '')" class="w-50 m-2" placeholder="请输入" />
               </el-form-item>
               <div class="demo-input-suffix firsttitle magintop guand_1">
                   <el-form-item label="巷道名称" :label-width="formLabelWidth6">
                       <el-input v-model="source.selectstr" disabled   class="w-50 m-2" placeholder="巷道名称" />
                   </el-form-item>
                   <div class="btn2">
                       <el-button type="primary" @click="fireclick();">选择巷道</el-button>
                   </div>
               </div>
              
           </el-form>
           <div class="dialog-footer footer_div l_btn">
               <div class="footerbtn flex1">
                   <div class="borderimg"><el-button @click="clearvtk();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 v-model="dialogsgdelect" draggable :modal="false" modal-class="summary-dlg" 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>
       <!-- 选择管道 -->
       <pipelines ref="pipeline" :selectstr="source.selectstr" @pipelineapi="pipelineapi" />
          
         </div>
       </el-aside>
     </div>
   </div>
</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 { message } from '@/utils/message';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import icon from "@/assets/img/icon.png";
import pipelines from "./PipeIine.vue"
import { vtkmodel } from "@/control/vtkModel.js";
import { timestampToTime } from '@/js/lindex.js'
const currentPage4 = ref(1);
const pageSize4 = ref(4)
let total = ref(1);


let pipeline = ref();
let currentrow=ref(true);
let sendialogVisible = ref(false);
let addVisible = ref(false);
let dialogsgdelect = ref(false)
let classradio1 = ref('Fire');
const formLabelWidth6 = ref(100);
let coolactiveName1 = ref(["1", "2"]);
let add = ref("")
const resultactiveName = ref("first");
let tableHeight = ref(200);
let tableData = ref([]);
let tableobj = ref({});
let zqname = ref();
let tishi=ref();
let senobj = ref({
    ptcode:'',
    ptid:null,
    pid:null,
    pcode:'',
    pname:''



})
let source = ref({
   selectstr: '',
})
let firepid = ref("")
const tableRowClassName = ({ row, rowIndex }) => {
   if (rowIndex % 2 != 0) {
       return 'evenRow';
   }
   return 'oddRow';

}
  //  节点分页查询
  const handleCurrentChange = (val) => {
    getsensor();
  }
// 选中一行
const handleDelete = (val) => {
   tableobj.value = val;
   currentrow.value=true;
   console.log(val);
  // console.log(tableobj.value)
}
// 删除
const shanchu = () => {
   if (JSON.stringify(tableobj.value) == '{}') {
       message.error("你还没有选中删除的项目")
   } else {
       dialogsgdelect.value = true
       zqname.value = tableobj.value.ptcode;
   }
}
const fundeledata = () => {

   const params = {
       transCode: 'M00008',
       ptid: tableobj.value.ptid
   }
   request(params)
       .then((res) => {
           message.success({
                 message: '平台巷道映射删除成功'
             })
           getsensor();
       })
       .catch((err) => {
           message.error(err.returnMsg)
       })
}
onMounted(() => {
   getsensor();
});
// 查询
const getsensor = () => {

const params = {
   transCode: 'M00006',
   count: pageSize4.value,
   page: currentPage4.value,


}
request(params)
   .then((res) => {
       tableData.value = res.rows;
       total.value = res.total;
        tableobj.value={};
      
  
   })
   .catch((err) => {
       message.error(err.returnMsg)
   })
}
//添加
const addsg = () => {
   add.value = "添加";
   tishi.value= add.value;
   currentrow.value=false;
   addVisible.value = true;
   senobj.value.ptid = null;
   senobj.value.ptcode = '';
   senobj.value.pid =null;
   senobj.value.pcode = null;
   source.value.selectstr = '';
   tableobj.value={};
  
}
// 添加修改的接口
const addEied = () => {
    if (senobj.value.ptcode == '') {
        message.error("平台编号不能为空")
        return;
    }
    if (source.value.selectstr == '') {
        message.error("请选择巷道")
        return;
    }

   const params = {
       transCode: 'M00007',
       ptid: senobj.value.ptid ,
       ptcode:senobj.value.ptcode,
       pid: senobj.value.pid,
       pcode: senobj.value.pcode,
       pname:source.value.selectstr 
   }
   console.log(params)
   request(params)
       .then((res) => {
           message.success({
                 message:'平台巷道映射'+tishi.value+'成功'
             })
           // tableData.value = res.rows;
           addVisible.value = false;
           getsensor();
           clearvtk();
       })
       .catch((err) => {
           const regex = /字段\d*/g;
           let Msg=err.returnMsg.replace(regex, '');
           message.error(Msg)
       })
}


//修改
const amend = () => {
   add.value = "修改";
   tishi.value= add.value;
   if (JSON.stringify(tableobj.value) == '{}') {
       message.error("你还没有选中修改的项目")
   } else {

    senobj.value.ptid = tableobj.value.ptid;
   senobj.value.ptcode = tableobj.value.ptcode;
   senobj.value.pid =tableobj.value.pid;
   senobj.value.pcode = tableobj.value.pcode;
   source.value.selectstr =tableobj.value.pname;
       addVisible.value = true;
   }
}
// 巷道方法
// 选择巷道
const fireclick = () => {
   pipeline.value.searchtaggd='';
   pipeline.value.dialogVisiblenode = true;
   pipeline.value.pipelinedata('');
 
}
//点击确定
const pipelineapi = (row) => {
   senobj.value.pid = row.id;
   senobj.value.pcode= row.code;
   source.value.selectstr = row.name;
   tableobj.value.pid = row.id;

   vtkmodel.clearJgAddMode();
   //选中指定管道
   vtkmodel.selectByPipeId(row.id);
}

const clearvtk = () => {
  vtkmodel.selectNoting();
}

defineExpose({ sendialogVisible, });
</script>