disaster/src/view/components/MenuMine.vue

<template>
    <div class="l_Dialog">
        <el-dialog v-model="dialogVisible" width="480" align-center :modal="false" :close-on-click-modal="false"
            draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
            class="dialog_class bgcolor zhucentent  ">
            <template #header="{ titleId, titleClass }">
                <div class="my-header xinxi_header">
                    <el-image :src="icon" fit="contain"></el-image>
                    <h4 :id="titleId" :class="titleClass">矿井信息</h4>

                </div>
            </template>
            <div class="classtab">
                <el-tabs v-model="resultactiveName" type="card" class="demo-tabs" @tab-click="handleClick"
                    :stretch="true">
                    <el-tab-pane label="节点信息" name="first">
                        <div class="asides_content">
                            <div class="jc_content tablecolor jc_content">

                                <div class="font12 my_content1">
                                    <div class=" btncolor tablefocus bmar">

                                        <el-table :data="tableData2" 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.9) ' }">
                                            <el-table-column type="index" label="节点编号" width="80px" />
                                            <el-table-column prop="name" label="节点名称" />
                                            <el-table-column prop="x" label="X" />
                                            <el-table-column prop="y" label="Y" />
                                            <el-table-column prop="z" label="Z" />
                                        </el-table>
                                        <div class="demo-pagination-block pagination" style="margin-top: 20px;">
                                            <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" />
                                        </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="nodedelete()">
                                                删除
                                            </el-button></div>
                                    </div>
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="accident()">
                                                修改
                                            </el-button></div>
                                    </div>
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button
                                                @click="dialogVisible = false; currentrow = false;">
                                                确认
                                            </el-button></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="巷道信息" name="second">
                        <div class="asides_content">
                            <div class="jc_content tablecolor jc_content">

                                <div class="font12 my_content1">
                                    <div class="btncolor tablefocus bmar">
                                        <el-table :row-class-name="tableRowClassName" :max-height="tableHeight"
                                            ref="multipleTableRef" :highlight-current-row="currentrow1"
                                            @row-click="handleDelete2($event)" :data="tableData3" style="width: 100%"
                                            :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.96) ' }">
                                            <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 pagination" style="margin-top: 20px;">
                                            <el-pagination v-model:current-page="gd.currentPage4"
                                                v-model:page-size="gd.pageSize4" small background
                                                layout="prev, total,pager, next, jumpe," :total="parseInt(gd.total)"
                                                class="mt-4" @current-change="handleCurrentChange2" />
                                        </div>
                                    </div>
                                </div>
                                <div class="dialog-footer footer_div l_btn">
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="guandaoadd();">添加</el-button></div>
                                    </div>
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="nodedelete2();">
                                                删除
                                            </el-button></div>
                                    </div>
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button @click="accident2()">
                                                修改
                                            </el-button></div>
                                    </div>
                                    <div class="footerbtn flex1">
                                        <div class="borderimg"><el-button
                                                @click="dialogVisible = false; currentrow1 = false">
                                                确认
                                            </el-button></div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="设备信息" name="third">

                    </el-tab-pane>
                    <el-tab-pane label="网络信息" name="thirds">

                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog v-model="sdialog.adddialog" 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">{{ zhtext }}</h4>
                </div>
            </template>
            <div>

                <el-form>
                    <el-form-item label="名称" :label-width="formLabelWidth6">
                        <el-input v-model="nodeobj.name"    maxlength="12" class="w-50 m-2" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="X" :label-width="formLabelWidth6">
                        <el-input v-model="nodeobj.x"  maxlength="10" oninput ="value=value.replace(/[^0-9.]/g,'')" class="w-50 m-2" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="Y" :label-width="formLabelWidth6">
                        <el-input v-model="nodeobj.y"  maxlength="10" oninput ="value=value.replace(/[^0-9.]/g,'')" class="w-50 m-2" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="Z" :label-width="formLabelWidth6">
                        <el-input v-model="nodeobj.z"  maxlength="10" oninput ="value=value.replace(/[^0-9.]/g,'')" class="w-50 m-2" placeholder="请输入" />
                    </el-form-item>

                </el-form>
            </div>
            <div class="dialog-footer footer_div l_btn">
                <div class="footerbtn flex1">
                    <div class="borderimg"><el-button @click="sdialog.adddialog = false">取消</el-button>
                    </div>
                </div>
                <div class="footerbtn flex1">
                    <div class="borderimg"><el-button @click="nodeconfirm()">
                            确定
                        </el-button></div>
                </div>
            </div>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog v-model="sdialog.dialogsgdelect" 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="sdialog.dialogsgdelect = false">取消</el-button></div>
                </div>
                <div class="footerbtn flex1">
                    <div class="borderimg"><el-button @click="nodedeleteapi(); sdialog.dialogsgdelect = false">
                            确定
                        </el-button></div>
                </div>
            </div>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog v-model="sdialog.gdadddialog" 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">{{ zhtext }}</h4>
                </div>
            </template>
            <div>
                <el-form-item label="名称" :label-width="formLabelWidth7">
                    <el-input v-model="guandaoobj.name"  maxlength="12" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <div class="demo-input-suffix firsttitle magintop guand_1">
                    <el-form-item label="开始节点" :label-width="formLabelWidth7">
                        <el-input v-model="guandaoobj.snId" class="w-50 m-2" oninput ="value=value.replace(/[^0-9.]/g,'')"  placeholder="请选择节点序号" />
                    </el-form-item>
                    <div class="btn2">
                        <el-button type="primary" @click="nodeclick('start');">选择开始节点</el-button>
                    </div>
                </div>
                <div class="demo-input-suffix firsttitle magintop guand_1">
                    <el-form-item label="结束节点" :label-width="formLabelWidth7">
                        <el-input v-model="guandaoobj.enId" oninput ="value=value.replace(/[^0-9.]/g,'')"  class="w-50 m-2" placeholder="请选择节点序号" />
                    </el-form-item>
                    <div class="btn2">
                        <el-button type="primary" @click="nodeclick('end');">选择结束节点</el-button>
                    </div>
                </div>
                <el-form-item label="粗糙系数" :label-width="formLabelWidth7">
                    <el-input v-model="guandaoobj.roughCoe" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <div class="demo-input-suffix firsttitle magintop guand_1">
                    <el-form-item label="截面类型" :label-width="formLabelWidth7">
                        <el-select v-model="guandaoobj.sectionType" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.id" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                        <div class="btn2">
                            <div class="elimg"  v-if="guandaoobj.sectionType=='CIRCULAR'">
                            <el-image :src="y" fit="contain"></el-image></div>
                            <div class="elimg"  v-else-if="guandaoobj.sectionType=='RECTANGLE'" ><el-image :src="j" fit="contain"></el-image></div>
                            <div class="elimg" v-else><el-image :src="g" fit="contain"></el-image></div>
                        </div>
                    </el-form-item>
                </div>
                <el-form-item label="截面参数1" :label-width="formLabelWidth7">
                    <el-input v-model="guandaoobj.sectionPara1" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="截面参数2" :label-width="formLabelWidth7">
                    <el-input v-model="guandaoobj.sectionPara2" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="截面参数3" :label-width="formLabelWidth7">
                    <el-input v-model="guandaoobj.sectionPara3" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="截面参数4" :label-width="formLabelWidth7">
                    <el-input v-model="guandaoobj.sectionPara4" class="w-50 m-2" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="截面参数5" :label-width="formLabelWidth7">
                    <el-input v-model="guandaoobj.sectionPara5" 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.gdadddialog = false">取消</el-button>
                    </div>
                </div>
                <div class="footerbtn flex1">
                    <div class="borderimg"><el-button @click="guandaoapi(); sdialog.gdadddialog = false">
                            确定
                        </el-button></div>
                </div>
            </div>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog v-model="sdialog.guddialogsgdelect" 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="sdialog.guddialogsgdelect = false">取消</el-button></div>
                </div>
                <div class="footerbtn flex1">
                    <div class="borderimg"><el-button @click="gddelete(); sdialog.guddialogsgdelect = false">
                            确定
                        </el-button></div>
                </div>
            </div>
        </el-dialog>
        <Node-Select ref="nodeselect" @queding="queding" />
    </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 icon from "@/assets/img/icon.png";
import g from "@/assets/img/g.jpg";
import j from "@/assets/img/j.jpg";
import y from "@/assets/img/y.jpg";
import { timestampToTime } from '@/js/lindex.js';
import NodeSelect from "./NodeLine.vue";
let nodeselect = ref();
let dialogVisible = ref(false);
let tableData2 = ref([]);
let classradio1 = ref('Fire');
let formLabelWidth6 = ref(70);
let formLabelWidth7 = ref(100)
const resultactiveName = ref("first");
let tableHeight = ref(570);
let total = ref(1);
let searchtag = ref("");
let options = ref([{
    label: 'CIRCULAR', value: "CIRCULAR"
},
{
    label: 'RECTANGLE', value: "RECTANGLE"
},
])
const currentPage4 = ref(1);
const pageSize4 = ref(5)
let currentrow = ref(false);
let currentrow1 = ref(false);
let sdialog = ref({
    adddialog: false,
    dialogsgdelect: false,
    gdadddialog: false,
    guddialogsgdelect: false,
})
let sideid = ref("");
let tableData3 = ref();
let zqname = ref("");
let zhtext = ref("添加");
let nodedata = ref({});
let gddata = ref({});
let nodeobj = ref({
    name: "",
    x: "",
    y: "",
    z: "",

})
let guandaoobj = ref({
    pid: '',
    name: '',
    snId: 0,
    enId: 0,
    roughCoe: '',
    sectionType: 'circle',
    sectionPara1: '',
    sectionPara2: '',
    sectionPara3: '',
    sectionPara4: '',
    sectionPara5: '',
})
let gd = ref({
    total: 1,
    currentPage4: 1,
    pageSize4: 5,
})
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 != 0) {
        return 'evenRow';
    }
    return 'oddRow';

}
onMounted(() => {
    pipelinedata()
})
// tab选项事件
const handleClick = (Tab, val) => {
    switch (Tab.props.name) {
        case 'first':
            pipelinedata()
            break;
        case "second":
            guandaodata();
            break;
        case 'third':
            break;
        case 'thirds':
            break;
    }
}
//  节点分页查询
const handleCurrentChange = (val) => {
    pipelinedata();
}
// 管道分页查询
const handleCurrentChange2 = (val) => {
    guandaodata();
}
//节点数据查询
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)
        })
}
//节点的添加
const addsg = () => {
    zhtext.value = '添加';
    currentrow.value = false;
    sdialog.value.adddialog = true;
    nodeobj.value.name = "";
    nodeobj.value.x = "";
    nodeobj.value.y = "";
    nodeobj.value.z = "";
    nodeobj.value.nid = '';

}
//节点添加api
const nodeconfirm = () => {
    if(nodeobj.value.name==null){
    ElMessage.error('名称不能为空')
           
    }else if(nodeobj.value.x==null){
        ElMessage.error('X不能为空')
    }else if(nodeobj.value.y==null){
        ElMessage.error('Y不能为空')
    }else if(nodeobj.value.z==null){
        ElMessage.error("Z不能为空")
    } else{
    
    const params = {
        transCode: 'D10000',
        nid: nodeobj.value.nid,
        name: nodeobj.value.name,
        x: nodeobj.value.x,
        y: nodeobj.value.y,
        z: nodeobj.value.z,
        desc: "",
        ntype: "mid",
    }
    request(params)
        .then((res) => {
            sdialog.value.adddialog = false;
            pipelinedata();
            ElMessage({
                message: res.returnMsg,
                type: 'success',
            })

        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
    }
}
//选中node节点的一行
const handleDelete = (val) => {
    currentrow.value = true;
    nodedata.value = val;

}
const handleDelete2 = (val) => {
    currentrow1.value = true;
    gddata.value = val;

}
//node删除
const nodedelete = () => {
    console.log(nodedata.value);
    if (JSON.stringify(nodedata.value) == '{}') {
        ElMessage.error("你还没有选中修改的项目")
    } else {
        sdialog.value.dialogsgdelect = true;
        zqname.value = nodedata.value.name;
    }
}
const nodedeleteapi = () => {
    const params = {
        transCode: 'D10001',
        nid: nodedata.value.id,
    }
    request(params)
        .then((res) => {
            pipelinedata();
            ElMessage({
                message: res.returnMsg,
                type: 'success',
            })

        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
//节点修改
const accident = () => {
    if (JSON.stringify(nodedata.value) == '{}') {
        ElMessage.error("你还没有选中修改的项目")
    } else {
        zhtext.value = '修改';
        sdialog.value.adddialog = true;
        nodeobj.value.name = nodedata.value.name;
        nodeobj.value.x = nodedata.value.x;
        nodeobj.value.y = nodedata.value.y;
        nodeobj.value.z = nodedata.value.z;
        nodeobj.value.nid = nodedata.value.id;
    }
}
//巷道查询
const guandaodata = () => {
    const params = {
        transCode: 'D00001',
        count: gd.value.pageSize4,
        page: gd.value.currentPage4,
        searchtag: '',
    }
    request(params)
        .then((res) => {
            tableData3.value = res.rows;
            gd.value.total = res.total;
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
// 节点选中开始结束
const nodeclick = (val) => {
    console.log(111);
    nodeselect.value.searchtaggd='';
    nodeselect.value.dialogVisiblenode = true;
    nodeselect.value.pipelinedata("");
    sideid.value = val;

}
//节点确定的方法
const queding = (row) => {
    if (sideid.value == 'start') {
        guandaoobj.value.snId = row.id;
    } else {
        guandaoobj.value.enId = row.id;
    }

}
// 管道的add
const guandaoadd = () => {
    sdialog.value.gdadddialog = true;
    currentrow1.value = false;
    guandaoobj.value.pid = '';
    guandaoobj.value.name = '';
    guandaoobj.value.snId = 0;
    guandaoobj.value.enId = 0;
    guandaoobj.value.roughCoe = '';
    guandaoobj.value.sectionType = 'circle';
    guandaoobj.value.sectionPara1 = '';
    guandaoobj.value.sectionPara2 = '';
    guandaoobj.value.sectionPara3 = '';
    guandaoobj.value.sectionPara4 = '';
    guandaoobj.value.sectionPara5 = '';
}
// 管道增加修改的接口
const guandaoapi = () => {
    const params = {
        transCode: 'D10002',
        pid: guandaoobj.value.pid,
        name: guandaoobj.value.name,
        snId: guandaoobj.value.snId,
        enId: guandaoobj.value.enId,
        roughCoe: guandaoobj.value.roughCoe,
        sectionType: guandaoobj.value.sectionType,
        sectionPara1: guandaoobj.value.sectionPara1,
        sectionPara2: guandaoobj.value.sectionPara2,
        sectionPara3: guandaoobj.value.sectionPara3,
        sectionPara4: guandaoobj.value.sectionPara4,
        sectionPara5: guandaoobj.value.sectionPara5,

    }
    request(params)
        .then((res) => {
            ElMessage({
                message: res.returnMsg,
                type: 'success',
            })
            guandaodata();
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
// 管道删除
//node删除
const nodedelete2 = () => {
    console.log(gddata.value);
    if (JSON.stringify(gddata.value) == '{}') {
        ElMessage.error("你还没有选中修改的项目")
    } else {
        sdialog.value.guddialogsgdelect = true;
        zqname.value = gddata.value.name;
    }
}
const gddelete = () => {
    const params = {
        transCode: 'D10003',
        pid: gddata.value.id,
    }
    request(params)
        .then((res) => {
            guandaodata();
            ElMessage({
                message: res.returnMsg,
                type: 'success',
            })

        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
// 管道修改
const accident2 = () => {
    if (JSON.stringify(gddata.value) == '{}') {
        ElMessage.error("你还没有选中修改的项目")
    } else {
        zhtext.value = '修改';
        sdialog.value.gdadddialog = true;
        guandaoobj.value.pid = gddata.value.id;
        guandaoobj.value.name = gddata.value.name;
        guandaoobj.value.snId = gddata.value.snId;
        guandaoobj.value.enId = gddata.value.enId;
        guandaoobj.value.roughCoe = gddata.value.roughCoe;
        guandaoobj.value.sectionType = gddata.value.sectionType;
        guandaoobj.value.sectionPara1 = gddata.value.sectionPara1;
        guandaoobj.value.sectionPara2 = gddata.value.sectionPara2;
        guandaoobj.value.sectionPara3 = gddata.value.sectionPara3;
        guandaoobj.value.sectionPara4 = gddata.value.sectionPara4;
        guandaoobj.value.sectionPara5 = gddata.value.sectionPara5;;
    }

}

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

<style lang="scss" scoped>
.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;
    }

    .Frame2 {
        background-image: url(../assets/img/Frame2.png);
        background-size: 100%;
        background-position: center;
    }

    .Frame3 {
        background-image: url(../assets/img/Frame3.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    .el-collapse,
    .el-collapse-item__header {
        border: none;

        ul li {
            text-align: left;
        }

        .inputkuang {
            height: 30px;
            width: 100%;
            background: rgba(13, 22, 57, 0.4);
            position: relative;

            .righttext {
                display: inline-block;
                position: absolute;
                right: 10px;
                top: 3px;
            }
        }

        .inputtext_1 {
            font-weight: 400;
            font-size: 13px;
            color: #FFFFFF;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            padding: 13px 0 7px 0;
            display: inline-block;

        }
    }
}

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

.tianjia {
    display: inline-block;
}

.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: 12px;
            color: #68ADFF;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

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

}

.l_btn .borderimg {
    width: 70px;
    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); */
    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;
}

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

.L_aside {
    height: calc(100vh - 70px);
    position: absolute;
    top: 70px;
    overflow: hidden;
}

.asides_content {
    .el-form-item__label {
        color: #FFFFFF !important;
    }
}

.asdis_btn {
    display: flex;
    margin-top: 9px;

    .btn {
        flex: 1;
        width: 145px;
        height: 54px;
        background-image: url(../assets/img/Rectangle5.png);
        background-repeat: no-repeat;
        line-height: 54px;

        .spantext {
            font-weight: bold;
            font-size: 12px;
            color: #FFFFFF;
            text-align: center;
            font-style: normal;
            text-transform: none;

        }
    }
}

.logs {
    margin-top: 25px;
    border-radius: 0px 0px 0px 0px;
    border-top: 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);

    h4 {
        padding: 10px 0;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.logs_pading {
    padding: 13px 20px 23px 24px;
}

.newtime {
    height: 112px;
    padding: 38px;
    font-weight: bold;
    font-size: 20px;
    color: #FF0F0F;
    line-height: 23px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.animation_s {
    padding: 25px;
}

.tanniu ul {
    margin-top: 40px;
    display: flex;

    li {
        flex: 1;
        text-align: center;

        p {
            text-align: center;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 14px;
            font-style: normal;
            text-transform: none;
        }
    }
}

.jiancedian {
    width: 371px;
    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>
/* //.bgcolor */
.bgcolor {
    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;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
}

.dialog_class {
    background-color: rgba(13, 22, 57, 0.9) !important;

}

.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
    padding: 0 !important;
    margin: 0 !important;
}

.el-dialog {
    --el-dialog-padding-primary: 0px !important;
}

.el-dialog__headerbtn {
    position: absolute;
    top: 2px !important;
    right: 0;
    padding: 0;
    width: 40px !important;
    height: 40px !important;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: var(--el-message-close-size, 16px);
}

.el-icon {
    color: #68ADFF !important;
}

.l_btn .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); */
    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;
}

.l_btn .el-button {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    color: #fff;
    background: rgba(104, 173, 255, 0.3);
    border: 1px solid rgba(31, 107, 255, 1);
}

.class_footer {
    position: absolute;
    bottom: 17px;
}

.footer_div {
    height: 90px;
    padding: 30px 0;
}

.l_btn {
    width: 100%;

    bottom: 17px;
    display: flex;
    border-radius: 4px;

}

.el-table .el-table__cell {
    padding: 0 !important;
    height: 30px;
    line-height: 30px;
}

/* .el-table tr,.el-table th.el-table__cell{
            background-color: rgba(13, 22, 57, 0.96) !important;
        } */
.el-table__row {
    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;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    /* box-shadow: inset 0px 0px 17px 5px rgba(12,97,197,0.2); */
    border: none !important;
    /* border-radius: 0px 0px 0px 0px;
border-bottom: 1px solid;
border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;  */
}

.oddRow {
    background-color: rgba(104, 173, 255, 0.20) !important;
}

.evenRow {
    /* // background-color: rgba(13, 22, 57, 0.96) !important; */
    background-color: rgba(104, 173, 255, 0.02) !important;
}

.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--border .el-table__inner-wrapper::after,
.el-table--border::after,
.el-table--border::before,
.el-table__inner-wrapper::before {
    height: 0 !important;
    background-color: rgba(red, green, blue, 0) !important;
}

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: rgba(255, 255, 25, 0) !important;
}

.el-button:focus,
.el-button:hover {
    background: rgba(104, 173, 255, 1) !important;
    font-weight: bold;
    color: #000 !important;
    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-input__wrapper {

    height: 30px;
    background: rgba(104, 173, 255, 0.3) !important;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2) !important;
    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;
}

.selecwidth .el-input__wrapper {
    height: auto !important;
}

.selecwidth .el-select__tags {
    max-width: 200px !important;
}

.ddd_div .el-input__inner {
    border: none;
    /* background: rgba(104,173,255,0.3); */

}

.ddd_div .el-form-item__label {
    color: #fff !important;
}

.ddd_div .demo-input-suffix {
    width: 100%;
}

.ddd .el-form-item {
    width: 80%;
}

/* .el-input__inner::placeholder {
			color: #fff !important;
		} */
.flex1 {
    flex: 1;
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: #fff !important;
    background: #fff !important;
}

.el-radio__inner {
    border: 2px solid #fff !important;
    background-color: rgba(104, 173, 255, 0) !important;
    border: 1px solid #68ADFF;
}

.asideg .el-collapse-item__header {
    height: 50px !important;
    width: 100%;

    background-position: left;
    border: none !important;
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 18px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.leftbgimg .el-collapse-item__header {
    background-image: url(../assets/img/Group10.png) !important;
}

.asideg1 .jc_header {
    width: 100%;
    height: 52px;
    line-height: 69px;
    background-image: url(../assets/img/Group24.png) !important;
    background-repeat: no-repeat;
    background-position: center;

}

.jc_tile {
    padding-left: 20px;
}

.he_pading {
    padding: 19px 14px 0 31px;
}

.asideg1 .el-form-item__label {
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.asideg .el-collapse {
    --el-collapse-header-bg-color: none !important;
}

.asideg .el-collapse-item__arrow {
    margin: 0 8px 0 auto;
    font-weight: 800;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 20px !important;
}

.el-collapse-item__content {
    background: rgba(13, 22, 57, 0.2);
}

.asideg .el-input__wrapper {
    background: rgba(104, 173, 255, 0) !important;
    border: 1px solid rgba(31, 107, 255, 1);
    border-radius: 4px;
    box-shadow: none !important;
}

.asideg .el-input__inner {
    color: rgba(255, 15, 15, 1);
    font-weight: 400;
    font-size: 16px;
}

.el-collapse {
    --el-collapse-header-bg-color: rgba(104, 173, 255, 0) !important;
    --el-collapse-header-text-color: var(--el-text-color-primary);
    --el-collapse-header-font-size: 13px;
    --el-collapse-content-text-color: rgba(104, 173, 255, 0) !important;
    --el-collapse-content-bg-color: rgba(104, 173, 255, 0) !important;
}

.asideg .el-collapse-item__content {
    height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 0 !important;
}

.asideg .el-collapse-item__wrap {

    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 4px 4px 4px 4px;
    border-bottom: 1px solid;
    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
}

#textarea_id {
    height: 226px;
    background: rgba(104, 173, 255, 0) !important;
    border: 1px solid rgba(31, 107, 255, 1);
    border-radius: 4px;
    box-shadow: none !important;
}

.asides_content .el-form-item__label {
    color: #FFFFFF !important;
    font-weight: 400;
    font-size: 13px;
    line-height: 33px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.el-form-item {
    width: 100%;
}

.el-select__wrapper {
    background-color: rgba(104, 173, 255, 0) !important;
}

.el-select__wrapper.is-hovering:not(.is-focused),
.el-select__wrapper {
    box-shadow: none !important;
    border: 1px solid rgba(31, 107, 255, 1);
    border-radius: 4px;
    box-shadow: none !important;
}

/* Webkit内核浏览器（Chrome、Safari等）*/
::-webkit-scrollbar {
    width: 4px;
    /* 设置滚动条宽度 */
    background-color: #161A2A;
    /* 设置滚动条背景颜色 */
}

/* 滑块样式 */
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    /* 设置滑块边角半径 */
    background-color: rgba(31, 107, 255, 1);
    /* 设置滑块背景颜色 */
}

/* 滑块在hover状态时的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* 设置滑块在hover状态下的背景颜色 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
    background-color: rgba(104, 173, 255, 0.4)
        /* 设置滚动条轨道背景颜色 */
}

.classtab .el-tabs--card>.el-tabs__header .el-tabs__item {
    position: relative;
    /* border-top: 1px solid;
    border-left: 1px solid;
    border-bottom: 1px solid;

 
    border-radius: 0px 0px 0px 0px; */
}

.classtab .el-tabs--card>.el-tabs__header .el-tabs__item::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border-right: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-image: linear-gradient(180deg, rgb(31, 107, 255), rgba(31, 107, 255, 0.48)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    transform-origin: 0 0;
    transform: scale(0.5);
}

.classtab .el-tabs__item {
    /* width:120px; */
    height: 48px;
    padding: 0 10px !important;
    font-weight: bold;
    font-size: 12px;
    color: #68ADFF;
    line-height: 16px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.el-tabs--card>.el-tabs__header,
.el-tabs--card>.el-tabs__header,
.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none !important;
}

.classtab .el-tabs {
    --el-tabs-header-height: 48px !important;
}

.classtab .el-tabs__header {
    margin: 0 !important;
}

.classtab .is-active {
    height: 48px;
    background: radial-gradient(ellipse at 54px 0px, #3AA0FF -37%, #123066 53%);
    border-radius: 0px 0px 0px 0px;
    color: #fff !important;
    border-left: 1px solid rgba(16, 92, 240, 1);
    border-right: 1px solid rgba(18, 48, 102, 1);

    border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
}

.classtab .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.classtab .el-tabs--card>.el-tabs__header .el-tabs__item {
    border: none !important;
}

.classtab .el-tabs__content {
    border: 1px solid;
    color: rgba(255, 15, 15, 1) !important;
    border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(18, 48, 102, 1)) 1 1;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
    position: relative;
}

.el-select__input {
    font-size: 12px;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 新的css */
/* .classtab {
    display: flex;
} */

.classtab .el-tabs__item {
    /* flex: 1 */
}

.xinxi_header {
    border-bottom: none !important;
}

.classtab .el-tabs__nav {
    /* width: 480px; */
}

.zhucentent .el-table__header tr {
    background-color: none !important;
}

.el-table .el-table__header tr {
    background-color: rgba(104, 173, 255, 0) !important;
}

.oddRow {
    /* //background-color: rgba(104, 173, 255, 0.2) !important; */
    background: rgba(104, 173, 255, 0.33) !important;
}

.evenRow {
    background-color: rgba(13, 22, 57, 0.96) !important;
}

.el-overlay-dialog {
    pointer-events: none;
}

.summary-dlg {
    pointer-events: none;
}

.el-dialog__wrapper,
.el-overlay-dialog {
    pointer-events: none;
}

.el-dialog {
    pointer-events: auto;
}

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


}

.guand_1 {
    display: flex;
}

.guand_1 .asdis_btn {
    margin-top: -9px;
}

.magintop .el-form-item {
    margin-right: 20px;
}

.pagination {
    padding: 0 20px;
}

.el-pagination__total {
    color: #fff !important;
}
.elimg{
    width: 100px;
    height: 50px;
    position: absolute;
    position: absolute;
    overflow: hidden;
    top: -8px;
    right: -22px;
}
.elimg .el-image{
    height: 50px;
}
</style>