disaster_web3/src/view/components/PipeIine.vue

<template>
    <div > 
        <el-dialog
     v-model="dialogVisiblenode"
     align-center  :append-to-body="true"
     width="500"
     class="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"> 选择巷道</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" style="margin-top: 10px;"><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.96) '}"
   >
   <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="dialogVisiblenode = false">取消</el-button></div></div>
      <div class="footerbtn flex1"><div class="borderimg"><el-button @click="queding();dialogVisiblenode = false">
     确定
      </el-button></div></div>
    </div>
   </div>
   </el-dialog>
       </div>
     </template>
   <script setup>
import { ref, onMounted, reactive, } 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 zhCn from 'element-plus/es/locale/lang/zh-cn'
const props= defineProps({ });
let emit = defineEmits(['pipelineapi'])
let sdialog=ref({
    dianadddialog:false,

})
let formLabelWidth5=ref(99)
let tableHeight=ref(530);
 let tableData2 =ref([]);
 const multipleTableRef = ref()
const multipleSelection = ref([])
let  dialogVisiblenode=ref(false);
let total = ref(1);
let searchtaggd = ref("");
let searchtag=ref("");
const currentPage4 = ref(1);
const statusMap = {
  'CIRCULAR': '圆形',
  'RECTANGLE': '矩形',
  'SEMICIRCULAR': '半椭圆形',
  'SEMIELLIPTICAL': '半圆形',
  'EGG': '蛋形',
  'GOTHIC': '哥特形',
  'MODBASKETHANDLE': '更正蓝形',
  'ARCH': '拱形',
  'RECT_ROUND': '弧底矩形',
  'BASKETHANDLE': '蓝形',
  'HORSESHOE': '马蹄形',
  'RECT_TRIANGULAR': '三角底矩形',
  'VERT_ELLIPSE': '竖向椭圆',
  'HORZI_ELLIPSE': '水平椭圆',
  'CATENARY': '悬链式',
};
const pageSize4 = ref(5)
    onMounted(()=>{

})
// 巷道方法
// 选择巷道
const fireclick = () => {
    pipelinedata('');
}
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 != 0) {
        return 'evenRow';
    }
    return 'oddRow';

}
// 管道搜索
function searchgd() {
   
  searchtag.value=searchtaggd.value;
  
  pipelinedata( searchtaggd.value);
}
// 管道分页查询
const handleCurrentChange = (val) => {
    pipelinedata()
}
//管道数据查询
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) => {
            ElMessage.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=()=>{
      emit('pipelineapi', '');
     currentPage4.value=1;
       if(multipleSelection.value.length!=0){
      // firepid.value=multipleSelection.value[0].id;
      emit('pipelineapi',multipleSelection.value[0]);
     // console.log(multipleSelection.value[0])
       }else{
        
       }
  
     }
    //  确定
  const  queding=()=>{
       selectfun();
     }
     defineExpose({dialogVisiblenode,pipelinedata,searchtaggd});
   </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.20);
    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: 0px 10px 0 0;
        }

        h4 {
            font-weight: bold;
            font-size: 14px;
            color: #fff;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 14px;
        }
    }

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

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


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