disaster/src/view/components/InfoBoundary.vue

<template>
    <!-- 所有弹出框 -->
    <div class="l_Dialog bou">
        <!--火灾左侧栏-->
        <div class="common-layout " style="margin: 0;">
            <el-aside width="591px" class="L_aside L_aside1 asideg asidegbg leftbgimg2" v-show="boun.collfire">
                <div class="demo-collapse">
                    <el-collapse v-model="coolactiveName1" accordion>
                        <el-collapse-item name="1">
                            <template #title>
                                <el-icon class="iconimg Frame2" fit="contain"></el-icon>
                                火灾<el-icon class="header-icon">
                                </el-icon>
                            </template>
                            <div class="asides_content">
                                <div class="jc_content tablecolor">

                                    <div class="jc_padding font12">
                                        <div class="xian btncolor tablefocus bmar">

                                            <el-table :data="ftableData" style="width: 100%" :max-height="tableHeight"
                                                :highlight-current-row="true" :row-class-name="tableRowClassName"
                                                @row-click="handleDelete($event)"
                                                :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.96) ' }">
                                                <el-table-column prop="nid" label="节点选择" />
                                                <!-- <el-table-column prop="type" label="边界类型" /> -->
              
                                          <el-table-column label="边界类型" prop="type" align="center" width="80px">
                                                        <template #default="scope">
                                                            {{
                                                            scope.row.type == 'massflow'
                                                                ? '流量边界'
                                                                : scope.row.type == 'Pressure'
                                                                ? '压力边界'
                                                                : '压力边界'
                                                            }}
                                                        </template>
                                                    </el-table-column> 
                                              <!-- <el-table-column  width="50">
                                                //         <template #default="scope">{{scope.row.type == massflow ? '流量边界' : scope.row.type ==	Pressure?'压力边界' }} </template>
                                                //     </el-table-column> -->
                                                <el-table-column prop="flow" label="流量(m³/s)" width="80" />
                                                <el-table-column prop="pressure" label="压强(pa)" width="70" />
                                                <el-table-column prop="temperature" label="温度(℃）" />
                                                <el-table-column prop="polcon1" label="污染物1浓度" width="95" />
                                                <el-table-column prop="polcon2" label="污染物2浓度" width="95" />
                                            </el-table>
                                            <div class="asdis_btn">
                                                <div class="flex_a">
                                                    <div class="btns" @click="bounadd(); dialog.dialogVisible = true;">
                                                        <span class="spantext">添加</span>
                                                    </div>
                                                </div>
                                                <div class="flex_a">
                                                    <div class="btns" @click="xiugai();"><span
                                                            class="spantext">修改</span></div>
                                                </div>
                                                <div class="flex_a">
                                                    <div class="btns" @click="sdialog.dialogsgdelect = true"><span
                                                            class="spantext">删除</span></div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </el-collapse-item>
                    </el-collapse>

                </div>

            </el-aside>

        </div>
        <!-- 突水 -->
        <div class="common-layout " style="margin: 0;">
            <el-aside width="231px" class="L_aside L_aside1 asideg asidegbg leftbgimg0 " v-show="boun.collwater">
                <div class="demo-collapse">
                    <el-collapse v-model="coolactiveName1" accordion>
                        <el-collapse-item name="2">

                            <template #title>
                                <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                                突水<el-icon class="header-icon">
                                </el-icon>
                            </template>
                            <div class="asides_content">
                                <div class="jc_content tablecolor">

                                    <div class="jc_padding font12">
                                        <div class="xian btncolor tablefocus bmar">

                                            <el-table :data="ftableData" style="width: 100%" :max-height="tableHeight"
                                                :highlight-current-row="true" :row-class-name="tableRowClassName"
                                                @row-click="handleDelete($event)"
                                                :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.96) ' }">
                                                <el-table-column prop="nid" label="节点选择" />
                                                <el-table-column prop="type" label="边界类型" />
                                            </el-table>
                                        </div>
                                    </div>
                                    <div class="asdis_btn padingcla">
                                        <div class="flex_a">
                                            <div class="btns" @click="bounadd(); dialog.dialogVisible = true;">
                                                <span class="spantext">添加</span>
                                            </div>
                                        </div>
                                        <div class="flex_a">
                                            <div class="btns" @click="xiugai();"><span class="spantext">修改</span></div>
                                        </div>
                                        <div class="flex_a">
                                            <div class="btns" @click="sdialog.dialogsgdelect = true"><span
                                                    class="spantext">删除</span></div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </el-collapse-item>
                    </el-collapse>

                </div>

            </el-aside>

        </div>
        <!-- 添加 -->
        <el-dialog v-model="dialog.dialogVisible" width="482" :modal="false" :close-on-click-modal="false" draggable
            class="dialog_class bgcolor  foter_l">

            <template #header="{ titleId, titleClass }">
                <div class="my-header">
                    <el-image :src="icon" fit="contain"></el-image>
                    <h4 :id="titleId" :class="titleClass">{{ buntext }}</h4>

                </div>
            </template>
            <div class="addye">
                <div class="fireclass" v-if="props.classradio == 'Fire'">
                    <el-form class="demo-form-inline" :inline="true" :model="bformInline">
                        <div class="l_padding input" style="padding:20px 20px 20px 24px; ">

                            <div class="demo-input-suffix firsttitle magintop">
                                <el-form-item label="节点名称" :label-width="formLabelWidth6">
                                    <el-input v-model="bformInline.nname" class="w-50 m-2" placeholder="节点名称" />
                                </el-form-item>
                                <div class="btn2">
                                    <el-button type="primary"
                                        @click="fireclick(); sdialog.dialogVisiblenode = true">选择节点</el-button>
                                </div>
                            </div>
                            <el-form-item label="边界类型" :label-width="formLabelWidth6">
                                <el-select v-model="bformInline.type" placeholder="请选择">
                                    <el-option v-for="item in bformInline.options" :key="item.id" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="流量(m³/s)" :label-width="formLabelWidth6">
                                <el-input v-model="bformInline.flow" class="w-50 m-2" placeholder="请输入" />
                            </el-form-item>
                            <el-form-item label="压强(pa)" :label-width="formLabelWidth6">
                                <el-input v-model="bformInline.pressure" class="w-50 m-2" placeholder="请输入" />
                            </el-form-item>
                            <el-form-item label="温度(℃）" :label-width="formLabelWidth6">
                                <el-input v-model="bformInline.temperature" class="w-50 m-2" placeholder="请输入" />
                            </el-form-item>
                            <el-form-item label="污染物1浓度" :label-width="formLabelWidth6">
                                <el-input v-model="bformInline.polcon1" class="w-50 m-2" placeholder="请输入" />
                            </el-form-item>
                            <el-form-item label="污染物2浓度" :label-width="formLabelWidth6">
                                <el-input v-model="bformInline.polcon2" class="w-50 m-2" placeholder="请输入" />
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="Waterclass" v-else>
                    <el-form class="demo-form-inline" :inline="true" :model="bformInline">
                        <div class="l_padding input" style="padding:20px 20px 20px 24px; ">

                            <div class="demo-input-suffix firsttitle magintop">
                                <el-form-item label="节点名称" :label-width="formLabelWidth6">
                                    <el-input v-model="bformInline.nname" class="w-50 m-2" placeholder="节点名称" />
                                </el-form-item>
                                <div class="btn2">
                                    <el-button type="primary"
                                        @click="fireclick(); sdialog.dialogVisiblenode = true">选择节点</el-button>
                                </div>
                            </div>
                            <el-form-item label="边界类型" :label-width="formLabelWidth6">
                                <el-select v-model="bformInline.type" placeholder="请选择">
                                    <el-option v-for="item in bformInline.options2" :key="item.id" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>

                <div class="dialog-footer footer_div l_btn">
                    <div class="footerbtn flex1">
                        <div class="borderimg"><el-button @click="dialog.dialogVisible = false">取消</el-button></div>
                    </div>
                    <div class="footerbtn flex1">
                        <div class="borderimg"><el-button @click="accidentboun(); dialog.dialogVisible = false">
                                确定
                            </el-button></div>
                    </div>
                </div>
            </div>
        </el-dialog>
            <!--  节点选择 -->
            <el-dialog v-model="sdialog.dialogVisiblenode" width="600px"
                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">
                    <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.96) ' }">
                        <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-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 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="selectfun();">
                                    确定
                                </el-button></div>
                        </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="fundeledata(); sdialog.dialogsgdelect = false">
                            确定
                        </el-button></div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, ref, onMounted, reactive } from "vue";
import { request, uploadFile } from "@/utils/request";
import icon from "@/assets/img/icon.png";
import closeimg from "@/assets/img/colse.png";
import { ElMessage, ElButton, ElDialog } from 'element-plus'
import { Calendar, Search } from '@element-plus/icons-vue'
const props = defineProps({
    classradio: String,



});
let sdialog = ref({
    dialogVisiblenode: false,
    dialogsgdelect: false,
})
let buntext = ref("")
const strResultFormatlist = reactive(

    { id: 0, name: "灾情演化", value: ".vtk" },
    { id: 1, name: "演化过程", value: ".mesh" }
);
let xiugaiobj = ref({});
let zqname = ref('');
let tableHeight = ref(400)
const multipleTableRef = ref()
const multipleSelection = ref([])
const formLabelWidth5 = ref(77);
const formLabelWidth6 = ref(120);
let tableData2 = ref([]);
let searchtaggd = ref("");
let total = ref(1);
const currentPage4 = ref(1);
const pageSize4 = ref(5)
let nid = ref();
let bid = ref();
let aid = ref();
let bformInline = ref({
    nname: '',
    type: 'Pressure',
    flow: '',
    pressure: '',
    temperature: '',
    polcon1: '',
    polcon2: '',
    user: '11',
    nodesel: '1',
    nodesselect: [
        {
            value: '1',
            label: '1',
        },
        {
            value: '2',
            label: '2',
        },
    ],
    region: 'massflow',
    options: [
        {
            value: 'massflow',
            label: '流量边界',
        },
        {
            value: 'Pressure',
            label: ' 压力边界',
        },
    ],
    region: '边界出口',
    options2: [
        {
            value: '边界出口',
        },
    ]

})
let coolactiveName1 = ref(["1", "2"]);
const ftableData = ref([])
const value = ref('')
const dialog = ref({
    dialogVisible: false,
});
const boun = ref({
    collfire: false,
    collwater: false,
});
// 节点选择
const fireclick = () => {
    pipelinedata('');
}
// 节点搜索
function searchgd() {
    pipelinedata(searchtaggd.value);
}


// 节点分页查询
const handleCurrentChange = (val) => {
    pipelinedata(searchtaggd.value)
}
//节点数据查询
const pipelinedata = (searchtag) => {
    const params = {
        transCode: 'D00000',
        count: pageSize4.value,
        page: currentPage4.value,
        searchtag: searchtag,
    }
    request(params)
        .then((res) => {
            tableData2.value = res.rows;
            total.value = res.total;
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
const selectfun = () => {
    sdialog.value.dialogVisiblenode = false;
    bformInline.value.nname = '';
    currentPage4.value = 1;
    console.log()
    if (multipleSelection.value.length != 0) {
        nid.value = multipleSelection.value[0].id;
        bformInline.value.nname = multipleSelection.value[0].name;
    } else {
        bformInline.value.nname = '';

    }
}
const projectsSelectionSelect = (selection, row) => {
    if (selection.length > 1) {
        multipleTableRef.value.clearSelection();
        multipleTableRef.value.toggleRowSelection(row, true);
        multipleSelection.value = selection[1];
        return;
    }
    if (selection.length == 1) {
        multipleSelection.value = selection;

    } else if (selection.length == 0) {

    }

    // console.log(row)
}
//边界添加前清空
const bounadd = () => {
    bid.value = '';
    bformInline.value.nname = '';
    bformInline.value.type = 'Pressure',
        bformInline.value.flow = '';
    bformInline.value.pressure = '';
    bformInline.value.temperature = '';
    bformInline.value.polcon1 = '';
    bformInline.value.polcon2 = '';
    buntext.value = '添加';
    if (props.classradio == "Fire") {
        bformInline.value.type = 'Pressure'
    } else if (props.classradio == "Water") {
        bformInline.value.type = '边界出口'
    } else {

    }

}
//修改
const xiugai = () => {
    buntext.value = '修改';
    if (JSON.stringify(xiugaiobj.value) == '{}') {
        ElMessage.error("你还没有选中修改的项目")
    } else {
        if (props.classradio == "Fire") {
            bformInline.value.type = 'Pressure'
        } else if (props.classradio == "Water") {
            bformInline.value.type = '边界出口'
        } else {

        }
        console.log(xiugaiobj.value);
        bid.value = xiugaiobj.value.bid;
        nid.value = xiugaiobj.value.nid;
        aid.value = xiugaiobj.value.aid;
        dialog.value.dialogVisible = true;
        bformInline.value.nname = xiugaiobj.value.nname
        bformInline.value.type = xiugaiobj.value.type
        bformInline.value.flow = xiugaiobj.value.flow
        bformInline.value.pressure = xiugaiobj.value.pressure
        bformInline.value.temperature = xiugaiobj.value.temperature
        bformInline.value.polcon1 = xiugaiobj.value.polcon1
        bformInline.value.polcon2 = xiugaiobj.value.polcon2
    }
}
//边界的添加
const accidentboun = () => {
    const params = {
        transCode: 'D10008',
        bid: bid.value,
        nid: nid.value,
        nname: bformInline.value.nname,
        type: bformInline.value.type,
        aid: aid.value,
        flow: bformInline.value.flow,
        pressure: bformInline.value.pressure,
        temperature: bformInline.value.temperature,
        polcon1: bformInline.value.polcon1,
        polcon2: bformInline.value.polcon2,
    }
    request(params)
        .then((res) => {
            addboundary(aid.value);

        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
// 边界数据的查询
const addboundary = (valaid) => {

    aid.value = valaid;
    const params = {
        transCode: 'D10007',
        aid: aid.value,
    }
    request(params)
        .then((res) => {
            ftableData.value = res.rows;

        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
//火灾边界条件删除
const handleDelete = (val) => {
    console.log(val);
    xiugaiobj.value = val;
    bid.value = val.bid;
    zqname.value = val.nname;

}
const fundeledata = () => {
    const params = {
        transCode: 'D10009',
        bid: bid.value,
    }
    console.log(params);
    request(params)
        .then((res) => {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            addboundary(aid.value);
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)

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

}
// 弹出框
const accident4 = (key) => {
    if (key == '2') {
        if (props.classradio == "Fire") {
            boun.value.collfire = true;
        } else if (props.classradio == "Water") {
            boun.value.collwater = true;
        } else {

        }

    } else {
        boun.value.collfire = false;
        boun.value.collwater = false;
    }

}
onMounted(() => {
});
defineExpose({ boun, accident4, addboundary });
</script>

<style lang="scss" scoped>
.bounclass .flex_a {
    display: flex;
    justify-content: center;

}

.bmar .el-table__header {
    margin: 0 !important;
}

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

.padingcla .flex_a {
    padding: 0 2px !important;
}

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

}

.tianjia {
    display: inline-block;
}

.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-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;
                color: rgba($color: #FFFFFF, $alpha: 0.8);
            }
        }

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

.tianjia {
    display: inline-block;
}

.el-dialog__title {
    display: inline-block;
}

.bgcolor {
    // width: 482px;
    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;
        }
    }

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

}

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

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

.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-size: cover;
        background-position-x: center !important;
        line-height: 54px;

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

        }
    }
}



.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>
.leftbgimg2 .el-collapse-item__header {
    background-image: url(../../assets/img/b1.png) !important;
    background-size: cover;
    background-position-x: center !important;
}

.leftbgimg0 .el-collapse-item__header {
    background-image: url(../../assets/img/b0.png) !important;
    background-size: cover;
    background-position-x: center !important;
}

.xian {
    border: 1px solid;
    -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;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
    background-color: rgba(13, 22, 57, 0.4);
}

.header_l {
    position: relative;
}

.header_l .closeimg {

    position: absolute;
    top: 10px;
    right: 0;

}


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


}

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


}

.font12 .el-table .cell {
    font-size: 12px !important;
}

.addye {
    width: 100%;
    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
    border-radius: 0px 0px 0px 0px;
    position: relative;
}
.log_class{
    background-color: rgba(13, 22, 57, 0.96) !important;   
}
</style>

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

.input ul li {
    text-align: left;
}

.input .el-form-item__label {
    color: #FFFFFF;
}

.input .el-input__inner {
    color: #FFFFFF;
}

.foter_l .el-dialog__footer {
    height: 40px;
}

.addye .footer_div {
    height: auto;
    padding-bottom: 30px;
}

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

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

.bou .el-table__header {
    margin: 0 !important;
}
</style>