disaster_web3/src/view/components/MenuCheck.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 type="index" label="编号"  width="70" />
                                    <!-- <el-table-column prop="chcode" label="监测点编号"  width="100" /> -->
                                    <el-table-column prop="chname" label="监测点名称" />
                                    <el-table-column prop="pname" label="所在巷道" />
                                    <el-table-column prop="site" label="位置" />
                                </el-table>
                            </div>
                        </div>
                        <div class="dialog-footer footer_div l_btn">
                            <div class="footerbtn flex1">
                                <div class="borderimg"><el-button @click="addsg();sdialog.dianadddialog=true">添加</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="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>
        <!-- 添加 -->
        <el-dialog v-model="sdialog.dianadddialog"  align-center  :append-to-body="true" width="500px"  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">{{add}}</h4>

          </div>
          </template>
          <el-form-item label="监测点编号:"  :label-width="formLabelWidth5">
          <el-input  v-model="source.chcode"  maxlength="10" oninput ="value=value.replace(/[^\w\\/]/ig,'')"
              class="w-50 m-2"
              placeholder="请输入"  />
          </el-form-item>
          <el-form-item label="监测点名称:"  :label-width="formLabelWidth5">
          <el-input  v-model="source.chname"
          maxlength="10" 
              class="w-50 m-2"
              placeholder="请输入"  />
          </el-form-item>
          <div class="demo-input-suffix firsttitle magintop guand_1">
            
       <el-form-item label="巷道名称" :label-width="formLabelWidth5">
          <el-input  v-model="source.selectstr" disabled 
              class="w-50 m-2 text-disabled"
              placeholder="请选择巷道"  />
          </el-form-item>
          <div class="btn2">
          <el-button type="primary"  @click="fireclick();sdialog.dialogVisiblenode=true">选择巷道</el-button></div>
          </div>
          <div class="input">
          <el-form-item label="位置" :label-width="formLabelWidth5">
              <el-input-number v-model="source.site" :min="0" :max="10" 
              :precision="2" :step="0.1"
              controls-position="right"
              class="w-50 m-2"
              placeholder="位置"
              />
          </el-form-item>
          </div>
          <div class="dialog-footer footer_div l_btn">
              <div class="footerbtn flex1"><div class="borderimg"><el-button @click="sdialog.dianadddialog=false">取消</el-button></div></div>
              <div class="footerbtn flex1"><div class="borderimg"><el-button  @click="addEditaip(); ">
          确定
              </el-button></div></div>
          </div>
      </el-dialog> 
       <!-- 选择管道 -->
       <el-dialog
     v-model="sdialog.dialogVisiblenode"
     align-center  :append-to-body="true"
     width="600"
     class="dialog_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"> 选择巷道</h4>

          </div>
          </template>
   <div class="demo-input-suffix firsttitle leftbgimg2 my_content1">
      <div class="guand_1">
         <el-form-item label="巷道选择" :label-width="formLabelWidth5">
       <el-input  v-model="searchtaggd"
         class="w-50 m-2"
         placeholder="巷道"
         />
     </el-form-item>
     <div class="asdis_btn">
      <div class="flex_a"><div class="btns"  @click="searchgd"><span class="spantext">搜索</span></div></div>
  </div>
  </div>

   <el-table
      :row-class-name="tableRowClassName"
      :max-height="tableHeight"
     ref="multipleTableRef"
     :data="tableData2"
     style="width: 100%"
     @select="projectsSelectionSelect"
     :header-cell-style="{'background':'rgba(13, 22, 57, 0) '}"
   >
   <template v-slot:empty>
                        <p>暂无数据</p>
                        </template>
     <el-table-column type="selection" width="55" />
     <!-- <el-table-column property="snId" label="开始节点"/>
     <el-table-column property="enId" label="结束节点"/> -->
     <el-table-column property="id" label="编号" width="70"/>
     <el-table-column property="name" label="名称" width="70"/>
     <el-table-column property="sectionType" label="截面类型" width="120"/>
     <el-table-column property="roughCoe" label="粗糙系数"/>
     <!-- <el-table-column property="sectionPara1" label="截面参数1" width="90"/>
     <el-table-column property="sectionPara2" label="截面参数2" width="90" />
     <el-table-column property="sectionPara3" label="截面参数3" width="90"/>
     <el-table-column property="sectionPara4" label="截面参数4" width="90"/>
     <el-table-column property="sectionPara5" label="截面参数5" width="90"/> -->
     
   </el-table>
     <div class="demo-pagination-block" 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 class="dialog-footer footer_div l_btn">
      <div class="footerbtn flex1"><div class="borderimg"><el-button @click="sdialog.dialogVisiblenode = false">取消</el-button></div></div>
      <div class="footerbtn flex1"><div class="borderimg"><el-button @click="queding();sdialog.dialogVisiblenode = false">
     确定
      </el-button></div></div>
    </div>
   </div>
   </el-dialog>
</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,ElConfigProvider } 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 { timestampToTime } from '@/js/lindex.js'
let sendialogVisible = ref(false);
let currentrow=ref(true);
let addVisible = ref(false);
let dialogsgdelect = ref(false)
let classradio1 = ref('Fire');
const formLabelWidth6 = ref(100);
const formLabelWidth5=ref(90);
const multipleTableRef = ref()
const multipleSelection = ref([])
let tishi=ref();
let add = ref("");
let tableData2=ref([]);
let sdialog=ref({
    dianadddialog:false,
    dialogVisiblenode:false,
})
// const statusMap = {
//   'CIRCULAR': '圆形',
//   'RECTANGLE': '矩形',
//   'SEMICIRCULAR': '半椭圆形',
//   'SEMIELLIPTICAL': '半圆形',
//   'EGG': '蛋形',
//   'GOTHIC': '哥特形',
//   'MODBASKETHANDLE': '更正蓝形',
//   'ARCH': '拱形',
//   'RECT_ROUND': '弧底矩形',
//   'BASKETHANDLE': '蓝形',
//   'HORSESHOE': '马蹄形',
//   'RECT_TRIANGULAR': '三角底矩形',
//   'VERT_ELLIPSE': '竖向椭圆',
//   'HORZI_ELLIPSE': '水平椭圆',
//   'CATENARY': '悬链式',
// };
const statusMap = {
  'halfarch_1': '1-1断面',
  'halfarch_2': '2-2断面',
  'halfarch_3': '3-3断面',
  'halfarch_4': '4-4断面',
  'halfarch_5': '5-5断面',
  'halfarch_6': '6-6断面',
  'halfarch_7': '7-7断面',
  'halfarch_8': '8-8断面',
  'section9': '9-9断面',
  'section10': '10-10断面',
  'halfarch_11': '11-11断面',
  'halfarch_12': '12-12断面',
  'halfarch_13': '13-13断面',
  'halfarch_14': '14-14断面',
  'halfarch_15': '15-15断面',
  'halfarch_16': '16-16断面',
  'halfarch_17': '17-17断面',
  'halfarch_18': '18-18断面',
  'halfarch_19': '19-19断面',
  'halfarch_20': '20-20断面',
};
let coolactiveName1 = ref(["1", "2"]);
let total = ref(1);
let searchtaggd = ref("");
const currentPage4 = ref(1);
const pageSize4 = ref(5)
let cid=ref("");
let source=ref({
    selectstr:'',
    site:0,
    chname:'',
    chcode:''


})
let  firepid=ref("")
const resultactiveName = ref("first");
let tableHeight = ref(200);
let tableData = ref([]);
let tableobj = ref({});
let zqname = ref();
let senobj = ref({
    pid: 0,
    seid: 0,
    site: 0,
    type: "温度传感器"
})
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 != 0) {
        return 'evenRow';
    }
    return 'oddRow';

}
// 选中一行
const handleDelete = (val) => {
    currentrow.value=true;
    tableobj.value = val;
    cid.value=val.cid
    console.log( tableobj.value );
}
// 删除
const shanchu = () => {
    if (JSON.stringify(tableobj.value) == '{}') {
        message.error("你还没有选中删除的项目")
    } else {
        zqname.value = tableobj.value.pname;
        dialogsgdelect.value = true;
 
    }
}
const fundeledata=()=>{
    const params = {
        transCode: 'D10006',
        cid: cid.value
    }
    request(params)
        .then((res) => {
            message.success({
                message: '删除监测点成功'
            })
            getsensor();
        })
        .catch((err) => {
            message.error(err.returnMsg)
        })
}

onMounted(() => {
     getsensor();
});
// 查询
const getsensor = () => {
    const params = {
        transCode: 'D10004',
    }
    request(params)
        .then((res) => {
            tableData.value = res.rows;
            tableobj.value={};
        })
        .catch((err) => {
            message.error(err.returnMsg)
        })
}
//添加
const addsg = () => {
    add.value = "添加";
    tishi.value=add.value;
    addVisible.value = true; 
    currentrow.value=false;
    source.value.selectstr='';
    source.value.site=0;
   source.value.chname='';
    source.value.chcode='';
    firepid.value='';
    cid.value='';
    tableobj.value={};
}
// 添加修改的接口
const addEditaip=()=>{
    const params = {
        transCode: 'D10005',
        cid:cid.value,
        pid:firepid.value,
        site:source.value.site,
        chname:source.value.chname,
        chcode:source.value.chcode

    }
    request(params)
        .then((res) => {
            sdialog.value.dianadddialog=false;
            message.success({
                message: tishi.value+'监测点成功'
            })
      
            tableData.value = res.rows;
            getsensor();
        })
        .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 {
        sdialog.value.dianadddialog= true; 
        cid.value = tableobj.value.cid;
        source.value.chname = tableobj.value.chname;
        source.value.chcode = tableobj.value.chcode;
        source.value.site = tableobj.value.site;
        source.value.selectstr=tableobj.value.pname;
        firepid.value=tableobj.value.pid;
    }
}
// 选择巷道
const fireclick = () => {
    searchtaggd.value='';
    pipelinedata('');
}
// 节点搜索
function searchgd() {
    pipelinedata(searchtaggd.value);
}
// 节点分页查询
const handleCurrentChange = (val) => {
    pipelinedata(searchtaggd.value)
}
//节点数据查询
const pipelinedata = (searchtag) => {
    const params = {
        transCode: 'D00001',
        count: pageSize4.value,
        page: currentPage4.value,
        searchtag: searchtag,
    }
    request(params)
        .then((res) => {
           tableData2.value = res.rows.map(item => {
                    return {
                        ...item,
                        sectionType: statusMap[item.sectionType] || '未知' // 如果状态不存在，默认设置为'未知'
                    };
                    });
            total.value = res.total;
        })
        .catch((err) => {
            message.error(err.returnMsg)
        })
}
//选中项
const projectsSelectionSelect=(selection, row)=>{
       if(selection.length>1){
        multipleTableRef.value.clearSelection();
        multipleTableRef.value.toggleRowSelection(row,true);
        let arrp=[];
        arrp.push(selection[1])
        multipleSelection.value = arrp;
        return;
       }
        if(selection.length==1){
          multipleSelection.value=selection;
        
       }else if(selection.length==0){
      
       }
     }
     const  selectfun=()=>{
        source.value.selectstr='';
     currentPage4.value=1;
     console.log()
       if(multipleSelection.value.length!=0){
      firepid.value=multipleSelection.value[0].id;
      source.value.selectstr=multipleSelection.value[0].name;
      console.log(multipleSelection.value[0])
       }else{
        // selectstr.value='';
        
       }
  
     }
    //  确定
     const  queding=()=>{
       selectfun();
     
     }
defineExpose({ sendialogVisible, });
</script>