disaster_web3/src/view/components/NodeLine.vue

<template>
    <div>
        <el-dialog v-model="dialogVisiblenode"        width="700"
        :z-index='9999'
        align-center :append-to-body="true"
            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" style="margin-top: 10px;">
                            <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%" @selection-change="projectsSelectionChange"  @select="projectsSelectionSelect"
                    show-header="false"
                    :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="id" label='节点编号' />
                    <el-table-column property="name" label="名称" />
                    <el-table-column property="ntype" label="类型" />
                    <el-table-column property="x" label="x" />
                    <el-table-column property="y" label="y" />
                    <el-table-column property="z" label="z" />

                </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; searchtag='';">取消</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,ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import icon from "@/assets/img/icon.png";
const props = defineProps({});
let emit = defineEmits(['queding'])
let sdialog = ref({
    dianadddialog: false,

})
let formLabelWidth5 = ref(99)
let tableHeight = ref(500);
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 pageSize4 = ref(5)
onMounted(() => {

})
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 != 0) {
        return 'evenRow';
    }
    return 'oddRow';

}
//节点分页查询
const handleCurrentChange = (val) => {
    pipelinedata('');
}
//节点数据查询
const pipelinedata = () => {
    const params = {
        transCode: 'D00000',
        count: pageSize4.value,
        page: currentPage4.value,
        searchtag: searchtag.value,
    }
    request(params)
        .then((res) => {
            tableData2.value = res.rows;
            total.value = res.total;
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
function searchgd() {
    searchtag.value=searchtaggd.value;
    pipelinedata();
}

const projectsSelectionChange = (val) => {
    // console.log(11111)
    // console.log(val)
    // if (val.length > 1) {
    //     // 获取已选中的行数据
    //     const selected = val.find(item => item.id === row.id);
    //     // 如果已选中，则取消选中
    //     // if (selected) {
    //     //   this.$refs.multipleTable.toggleRowSelection(row, false);
    //     // }
    //   }
}
//选中项
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;
    }
    // console.log(row);
    if (selection.length == 1) {
        multipleSelection.value = selection;
    } else if (selection.length == 0) {

    }
}
const selectfun = () => {
    currentPage4.value = 1;
    if (multipleSelection.value.length != 0) {
        console.log(multipleSelection.value[0]);
        emit('queding', multipleSelection.value[0]);
  
    } else {

    }

}
//  确定
const queding = () => {
    searchtag.value='';
    selectfun();
}
defineExpose({ dialogVisiblenode, pipelinedata,searchtaggd });
</script>

<style lang="scss" scoped>
 .dialog_class .my-header .el-image {
    padding: 0px 10px 0 0 !important;
  }
  .dialog_class .my-header h4{
    font-size: 14px;
  }
.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(111, 138, 170, 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;
    }
}

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

.dialog_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: 14px;
            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;
    }

}



.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;
}
 .el-table__fixed-header-wrapper .el-table-column--selection{
    display: none;
// border: 1px solid red;
// text-indent:-999999px;
}

</style>