SmartSubstationPlatform/riis-web/src/views/basedata/substation/index.vue

<script lang="ts">
export default {
    name: "substation",
};
</script>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage, roleTypes } from 'element-plus';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
import {
    getdata,
    adddata,
    changestatus,
    deldata,
    deitdata,
    addArea,
    editArea,
    addInterval,
    editInterval,
    delarea,
    delinterval,
    changearea,
    changeinterval,
    uploadIcon,
    delIcon,
    delallIcon,
    uploadfile,
    stationOnline,
    sendMsgOfS
} from '@/api/substation';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
//定义变电站数据
const info: any = ref({
    stationName: '',
    stationCode: '',
    stationIp: '',
    nodeId: '',
    voltLevel: '',
    provinceName: '',
    cityName: '',
    companyName: '',
    stationAddress: '',
    introduction: '',
    contactPhone: '',
    contactPerson: '',
    isStationFlag: ''
});

//弹窗-变电站
const infoForm = ref();
const dialogVisible = ref(false)
const title = ref('')

//规则定义-区域
const arearules = ref({
    areaName: [
        { required: true, message: '请输入区域名称', trigger: 'blur' },
        { validator: stringlength, trigger: 'blur' }
    ],
})
//规则定义-间隔
const areules = ref({
    bayName: [
        { required: true, message: '请输入间隔名称', trigger: 'blur' },
        { validator: stringlength, trigger: 'blur' }
    ],
})
//区域名称长度
function stringlength(rule: any, value: any, callback: any) {
    if (value.length > 50) {
        return callback(new Error('字符最大长度不超过50'))
    }
    callback()
}
//区域 数据
const infoArea: any = ref({
    stationName: '',
    stationCode: '',
    areaName: '',
})
//弹窗-区域
const dialogArea = ref(false)
const AreaForm = ref();
//间隔 数据
const infoInterval: any = ref({
    stationName: '',
    stationCode: '',
    areaName: '',
    bayName: ''
})
//弹窗 间隔
const dialogInterval = ref(false)
const Intervalorm = ref();


//定义表格数据
const tableData: any = ref([]);
function gteTabledata() {
    const params = {
        name: menuname.value,
    }
    loading.value = true
    getdata(params).then((res: any) => {
        if (res.code == 0) {
            recurrence(res.data)
            tableData.value = res.data
            loading.value = false
        }


    }).catch(() => {
        loading.value = false
    })
}
// 增加ID
function recurrence(arr: any) {
    for (var i = 0; i < arr.length; i++) {
        arr[i]['id'] = i
        if (arr[i].children) {
            for (var j = 0; j < arr[i].children.length; j++) {
                arr[i].children[j]['id'] = '0' + i + j
                if (arr[i].children[j].children) {
                    for (var k = 0; k < arr[i].children[j].children.length; k++) {
                        arr[i].children[j].children[k]['id'] = '00' + i + j + k
                    }
                }
            }

        }
    }
}
const loading = ref(false);
//定义搜索框文本
const menuname = ref('')
//点击搜索
function search() {
    menuname.value = menuname.value.replace(/\s+/g, "");
    gteTabledata()
}
function handleDelete(row: any) {
    ElMessageBox.confirm('确定删除此' + row.type + '吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        if (row.type == '变电站') {
            const params = {
                stationId: row.stationId
            }
            deldata(params).then((res: any) => {
                if (res.code == 0) {
                    gteTabledata()
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                }

            })
        } else if (row.type == '区域') {
            const params = {
                areaId: row.areaId
            }
            delarea(params).then((res: any) => {
                if (res.code == 0) {
                    gteTabledata()
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                }
            })
        } else if (row.type == '间隔') {
            const params = {
                bayId: row.bayId
            }
            delinterval(params).then((res: any) => {
                if (res.code == 0) {
                    gteTabledata()
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                }

            })
        }
    })
}
// 新增变电站
function addClick() {
    info.value = {
        stationName: '',
        stationCode: '',
        stationIp: '',
        nodeId: '',
        voltLevel: '',
        provinceName: '',
        cityName: '',
        companyName: '',
        stationAddress: '',
        introduction: '',
        contactPhone: '',
        contactPerson: '',
        isStationFlag: '',
    };
    dialogVisible.value = true
    title.value = '新增变电站';
    iconall.value = []
}
//修改
const delimg = ref('')
const stationBled = ref(false)
function handleEdit(row: any) {
    if (row.type == '变电站') {
        iconall.value = row.images
        if (row.children) {
            stationBled.value = true
        } else {
            stationBled.value = false
        }
        delimg.value = row.stationId
        const infoo = JSON.parse(JSON.stringify(row))
        info.value = infoo
        dialogVisible.value = true
        title.value = '查看变电站信息';
    } else if (row.type == '区域') {
        const Areainfo = JSON.parse(JSON.stringify(row))
        infoArea.value = Areainfo
        dialogArea.value = true
        title.value = '修改区域';
    } else if (row.type == '间隔') {
        const Intervalinfo = JSON.parse(JSON.stringify(row))
        title.value = '修改间隔';
        infoInterval.value = Intervalinfo
        dialogInterval.value = true
    }

}
//新增区域
function menuclick(row: any) {
    infoArea.value = {
        stationName: row.stationName,
        stationCode: row.stationCode,
        areaName: '',
    }
    dialogArea.value = true
    title.value = '新增区域';
}
//新增间隔
function btnclick(row: any) {
    infoInterval.value = {
        stationName: row.stationName,
        stationCode: row.stationCode,
        areaName: row.areaName,
        bayName: '',
        areaId: row.areaId
    }
    dialogInterval.value = true
    title.value = '新增间隔';
}
//关闭弹窗
function handleClose() {
    if (infoForm.value != null) infoForm.value.resetFields();
    if (AreaForm.value != null) AreaForm.value.resetFields();
    if (Intervalorm.value != null) Intervalorm.value.resetFields();
    dialogVisible.value = false
    dialogArea.value = false
    dialogInterval.value = false
    if (iconall.value) {
        const params = {
            id: delimg.value,
            images: iconall.value.toString(),
        }
        delallIcon(params).then((res: any) => {
        })
    }
}
//区域弹窗
function AreaClick(formEl: any) {
    formEl.validate((valid: any) => {
        if (valid) {
            if (infoArea.value.areaId) {
                editArea(infoArea.value).then((item: any) => {
                    if (item.code == 0) {
                        gteTabledata()
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                        dialogArea.value = false;
                    }
                });
            } else {
                addArea(infoArea.value).then((res: any) => {
                    if (res.code == 0) {
                        dialogVisible.value = false
                        gteTabledata()
                        ElMessage({
                            message: '增加成功',
                            type: 'success',
                        })
                    }
                    dialogArea.value = false;
                })
            }

        }
    })

}
//间隔弹窗
function IntervalClick(formEl: any) {
    formEl.validate((valid: any) => {
        if (valid) {
            if (infoInterval.value.bayId) {
                editInterval(infoInterval.value).then((item: any) => {
                    if (item.code == 0) {
                        gteTabledata()
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                        dialogInterval.value = false;
                    }

                });
            } else {
                addInterval(infoInterval.value).then((res: any) => {
                    if (res.code == 0) {
                        dialogVisible.value = false
                        gteTabledata()
                        ElMessage({
                            message: '增加成功',
                            type: 'success',
                        })
                        dialogInterval.value = false;
                    }

                })
            }

        }
    })
}
//图片弹窗
const dialogimg = ref(false)
function bigimg(index: any) {
    dialogimg.value = true
}
function imgClose() {
    dialogimg.value = false
}
//停用或启用
const elMessage = ref('')

function switchChange(row: any) {
    if (row.datastatus == '0') {
        elMessage.value = "确定停用该" + row.type + "吗？"
    } else if (row.datastatus == '1') {
        elMessage.value = "确定启用该" + row.type + "吗？"
    }
    ElMessageBox.confirm(elMessage.value, "提示信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            if (row.type == '变电站') {
                let params = {
                    dataStatus: row.datastatus,
                    stationId: row.stationId,
                };

                changestatus(params).then((res: any) => {
                    if (res.code == 0) {
                        gteTabledata()
                        ElMessage({
                            type: "success",
                            message: "改变成功",
                        });

                    }

                });
            } else if (row.type == '区域') {
                let params = {
                    areaId: row.areaId,
                    dataStatus: row.datastatus,
                };

                changearea(params).then((res: any) => {
                    if (res.code == '0') {
                        gteTabledata()
                        ElMessage({
                            type: "success",
                            message: "改变成功",
                        });

                    }

                });
            } else if (row.type == '间隔') {
                let params = {
                    dataStatus: row.datastatus,
                    bayId: row.bayId,
                };

                changeinterval(params).then((res: any) => {
                    if (res.code == '0') {
                        gteTabledata()
                        ElMessage({
                            type: "success",
                            message: "改变成功",
                        });

                    }

                });
            }
        }).catch(() => {
            gteTabledata();
        });
}

//上传图标
const url = userStore.webApiBaseUrl;

function fileClick() {
    const avatar = document.getElementById('avatar');
    avatar?.click();
}
const iconall: any = ref([])
//上传文件
const type = ref('')
function importclick(row: any) {
    type.value = row
    const avatar = document.getElementById('avatar');
    avatar?.click();
}
function changeFiless(e: any) {

    if (type.value) {
        loading.value = true
        const files = new FormData()
        files.append('file', e.target.files[0])
        files.append('type', type.value)
        uploadfile(files).then((res: any) => {
            if (res.code != 1) {
                gteTabledata()
                ElMessage({
                    type: 'success',
                    message: '上传成功',
                })
            }
            loading.value = false
            var file: any = document.getElementById('avatar');
            file.value = '';
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '上传失败',
            })
            var file: any = document.getElementById('avatar');
            file.value = '';
        });
    } else {
        const files = new FormData()
        files.append('image', e.target.files[0])
        uploadIcon(files).then((res: any) => {
            if (res.code != 1) {
                gteTabledata()
                ElMessage({
                    type: 'success',
                    message: '上传成功',
                })
            }

            var file: any = document.getElementById('avatar');
            file.value = '';
        }).catch(() => {
            ElMessage({
                type: 'error',
                message: '上传失败',
            })
            var file: any = document.getElementById('avatar');
            file.value = '';
        });
    }


}
//时间转换
function dateFormat(row: any) {
    const daterc = row;
    if (daterc != null) {
        var date = new Date(daterc);
        var year = date.getFullYear();
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    }
}
//判断边缘节点是否在线
function StationOnline(stationCode: any) {
    const params = {
        stationcode: stationCode
    }
    stationOnline(params).then((res: any) => {
        if (res == 1) {
            const params = {
                stationcode: stationCode
            }
            sendMsgOfS(params).then((row: any) => {
                if (row.code == 0) {
                    ElMessage({
                        type: 'success',
                        message: '同步成功',
                    })
                }

            })
            gteTabledata()
        } else if (res == 0) {
            ElMessage({
                type: 'error',
                message: '当前变电站节点不在线，请稍后重试！',
            })
            gteTabledata()
        }
    })
}
onMounted(() => {
    gteTabledata()
})
//控制行变色
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}


</script>
<template>
    <div style="height: 17px;"></div>
    <div class="collectiontemplate-box">
        <section class="detail-box">
            <div
                style="display: flex;display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;  margin:15px 0px">
                <div style="display: flex;display: -webkit-flex;">
                    <el-input v-model="menuname" placeholder="请输入名称" clearable style="width:200px;margin-right:10px"
                        @clear="search()" @keyup.enter="search()" />
                    <el-button class="searchButton" type="primary" @click="search()">搜索</el-button>
                </div>
                <div>
                    <!-- <el-button v-hasPerm="['add:substation']" type="primary" @click="addClick">
                        <img src="@/assets/MenuIcon/jscz_xz.png" alt="" style="margin-right: 4px;">新增变电站</el-button> --> 
                    <el-button class="searchButton" type="primary" @click="importclick('02')">导入区域</el-button>
                    <el-button class="searchButton" type="primary" @click="importclick('03')">导入间隔</el-button>
                    <input type="file" id="avatar" style="display:none" @change="changeFiless">

                </div>
            </div>
            <div class="draggable">
                <el-table v-loading="loading" ref="multipleTable" :data="tableData" default-expand-all tooltip-effect="dark"
                    style="width: 100%;height: calc(80vh)" row-key="id" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px'}">
                    <el-table-column label="名称" prop="stationName" show-overflow-tooltip>
                        <template #default="scope">
                            <span v-if="scope.row.type == '变电站'">{{ scope.row.stationName }}<span
                                    style="display: inline-block;margin-left: 10px;color: #409EFF;"
                                    v-if="scope.row.isStationFlag == '1'">(边缘节点)
                                    <span
                                        style="display: inline-block;margin-left: 10px;color: #409EFF;text-decoration:underline;cursor: pointer;"
                                        @click="StationOnline(scope.row.stationCode)">向节点同步基础数据</span></span></span>
                            <span v-else-if="scope.row.type == '区域'">{{ scope.row.areaName }}</span>
                            <span v-else-if="scope.row.type == '间隔'">{{ scope.row.bayName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" width="100" align="center" prop="type">
                    </el-table-column>
                    <el-table-column label="状态" prop="datastatus" width="110" show-overflow-tooltip>
                        <template #default="scope">
                            <el-switch v-if="scope.row.type != '变电站'" v-model="scope.row.datastatus" active-value="1"
                                inactive-value="0" @change="switchChange(scope.row)" style="margin-right: 4px"></el-switch>
                            <span v-if="scope.row.datastatus == 1" class="effective">启用</span>
                            <span v-else style="color: #d7d7d7">停用</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="lastmodifier" label="最近修改者" width="120"></el-table-column>
                    <el-table-column prop="lastmodifydate" label="最近修改时间" width="200">
                        <template #default="scope">
                            {{ dateFormat(scope.row.lastmodifydate) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160" fixed="right" align="center"
                        style="display: flex; display: -webkit-flex;">
                        <template #default="scope">
                            <span
                                style="display: flex;display: -webkit-flex; justify-content: space-around;-webkit-justify-content: space-around; ">
                                <img v-hasPerm="['update:substation']" src="@/assets/newimg/ht_wxjl.png" alt=""
                                    v-if="scope.row.type == '变电站'" title="查看变电站信息" @click="handleEdit(scope.row)"
                                    style="cursor: pointer;">
                                <img v-hasPerm="['update:substation']" src="@/assets/newimg/ht_xg.png" alt=""
                                    v-if="scope.row.type != '变电站'" title="修改" @click="handleEdit(scope.row)"
                                    style="cursor: pointer;">
                                <img v-hasPerm="['add:substation']" src="@/assets/newimg/ht_qy.png" alt=""
                                    v-if="scope.row.type == '变电站'" title="新增区域" @click="menuclick(scope.row)"
                                    style="cursor: pointer;">
                                <img v-hasPerm="['add:substation']" src="@/assets/newimg/ht_qy1.png" alt="" v-else
                                    title="新增区域" style="cursor: pointer;">
                                <img v-hasPerm="['add:substation']" src="@/assets/newimg/ht_jg.png" alt=""
                                    v-if="scope.row.type == '区域'" title="新增间隔" @click="btnclick(scope.row)"
                                    style="cursor: pointer; ">
                                <img v-hasPerm="['add:substation']" src="@/assets/newimg/ht_jg1.png" alt="" v-else
                                    title="新增间隔"
                                    style="cursor: pointer;margin-left:5px;font-size:18px; color: rgb(153 214 255); ">
                                <img v-hasPerm="['del:substation']" src="@/assets/newimg/ht_sc.png" alt=""
                                    v-if="scope.row.datastatus == 0 && scope.row.type != '变电站'" title="删除"
                                    @click="handleDelete(scope.row)" style="cursor: pointer; ">
                                <img v-hasPerm="['del:substation']" src="@/assets/newimg/ht_sc1.png" alt=""
                                    v-else-if="scope.row.datastatus != 0 && scope.row.type != '变电站'" title="删除"
                                    style="cursor: pointer; ">
                            </span>
                        </template>
                    </el-table-column>
                </el-table>

            </div>

        </section>
        <!-- 查看图片 -->
        <el-dialog v-model="dialogimg" :close-on-click-modal="false" :before-close="imgClose" :title="title" append-to-body
            width="1200px" draggable>
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="(item, index) in iconall" :key="index">
                    <img :src="url + '/station/' + item" style="width:100%;height: 100%;cursor: pointer;">
                </el-carousel-item>
            </el-carousel>
        </el-dialog>
        <!-- 导入模板查看 -->
        <Eldialog v-if="dialogVisible" :title="'变电站信息'" :zIndex="2000" :width="'1180px'" :height="'600px'"
            @before-close="handleClose">
            <template v-slot:PopFrameContent>
                <el-form :model="info" label-width="90px" style="display: flex; flex-wrap: wrap; margin: 15px 5px 5px 5px ;"
                    ref="infoForm">
                    <el-form-item label="变电站名称" style="width:50%">
                        <el-input v-model="info.stationName" disabled style="width:90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="变电站编号" style="width:50%">
                        <el-input v-model="info.stationCode" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="变电站IP" style="width:50%">
                        <el-input v-model="info.stationIp" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="变电站节点ID" style="width:50%">
                        <el-input v-model="info.nodeId" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="电压等级" style="width:50%">
                        <el-input v-model="info.voltLevel" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="所属省份" style="width:50%">
                        <el-input v-model="info.provinceName" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="所属地市" style="width:50%">
                        <el-input v-model="info.cityName" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称" style="width:50%">
                        <el-input v-model="info.companyName" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" style="width:50%">
                        <el-input v-model="info.contactPhone" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" style="width:50%">
                        <el-input v-model="info.contactPerson" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="变电站地址" style="width:50%">
                        <el-input v-model="info.stationAddress" disabled style="width: 90%;margin-left: 8px;"
                            placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item label="是否边缘节点" style="width:50%">
                        <el-radio-group v-model="info.isStationFlag" disabled style="margin-left: 10px;">
                            <el-radio :label="'1'">是</el-radio>
                            <el-radio :label="'0'">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="变电站介绍" style="width:100%;">
                        <el-input type="textarea" disabled v-model="info.introduction" :autosize="{ minRows: 2 }"
                            style="width: 96%; margin-left: 8px;" placeholder="暂无信息"></el-input>
                    </el-form-item>
                    <el-form-item v-if="iconall" label="变电站图片" style="width:100%">
                        <div style="position: relative;">
                            <img :src="url + '/station/' + iconall" alt=""
                                style="width: 100px;height: 100px;cursor: pointer;  border-radius: 5px;  margin-left: 8px; overflow: hidden;">
                            <div
                                style="position: absolute;background: rgba(8, 8, 8, 0.116);width: 20px;height: 20px;top: 0px;right: 0px;overflow: hidden;display: flex;align-items: center;justify-content: center;cursor: pointer;">
                                <img src="@/assets/MenuIcon/u1151.png" alt="">
                                <el-image style="position: absolute;width:100%;height:100%; opacity: 0;"
                                    :src="url + '/station/' + iconall" :zoom-rate="1.2"
                                    :preview-src-list="[url + '/station/' + iconall]" :preview-teleported="true"
                                    fit="cover" />
                            </div>
                        </div>
                    </el-form-item>
                    <!-- <el-form-item label="变电站图片" style="width:100%;">
                        <div :class="item ? 'imgedit' : 'imgedit2'" v-if="iconall" v-for="(item, index) in iconall"
                            :key="index">
                            <div class="imgedit-top">
                                <img src="@/assets/MenuIcon/u1151.png" alt="" @click="bigimg(index)"
                                    style="margin-left: 10px;">
                                <img src="@/assets/MenuIcon/jscz_sc.png" @click="delimage(index)" alt=""
                                    style="margin-right: 10px;">
                            </div>
                            <img :src="url + '/station/' + item" style="width: 80px;height: 80px;cursor: pointer;">
                        </div>
                        <div class="addimg" @click="fileClick"> <img src="@/assets/MenuIcon/u1163.png" alt=""> </div>
                        <input type="file" id="avatar" style="display:none" @change="changeFiless">
                    </el-form-item> -->

                </el-form>
            </template>
        </Eldialog>
        <Eldialog v-if="dialogArea" :title="title" :zIndex="2000" :width="'600px'" :height="'600px'"
            @before-close="handleClose">
            <template v-slot:PopFrameContent>
                <el-form ref="AreaForm" :model="infoArea" label-width="90px" :rules="arearules" style="margin-top: 15px;">
                    <el-form-item label="所属变电站">
                        <el-input v-model="infoArea.stationName" style="width: 95%" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="变电站编号">
                        <el-input v-model="infoArea.stationCode" style="width: 95%" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="区域名称" prop="areaName">
                        <el-input v-model="infoArea.areaName" style="width: 95%" placeholder="请输入区域名称"> </el-input>
                    </el-form-item>
                </el-form>
                <span class="dialog-footer"
                    style="display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin: 10px 0px ;">
                    <div class="details-button" @click="handleClose">取消</div>
                    <div class="details-button" @click="AreaClick(AreaForm)">确定</div>
                </span>
            </template>
        </Eldialog>
        <Eldialog v-if="dialogInterval" :title="title" :zIndex="2000" :width="'600px'" :height="'600px'"
            @before-close="handleClose">
            <template v-slot:PopFrameContent>
                <el-form ref="Intervalorm" :model="infoInterval" label-width="90px" :rules="areules" style="margin-top: 15px;">
                    <el-form-item label="所属变电站">
                        <el-input v-model="infoInterval.stationName" style="width: 95%" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="变电站编号">
                        <el-input v-model="infoInterval.stationCode" style="width: 95%" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="所属区域">
                        <el-input v-model="infoInterval.areaName" style="width: 95%" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="间隔名称" prop="bayName">
                        <el-input v-model="infoInterval.bayName" style="width: 95%" placeholder="请输入区域名称"> </el-input>
                    </el-form-item>
                </el-form>
                <span class="dialog-footer"
                    style="display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin:10px 0px;">
                    <div class="details-button" @click="handleClose">取消</div>
                    <div class="details-button"  @click="IntervalClick(Intervalorm)">确定</div>
                </span>
            </template>
        </Eldialog>

    </div>
</template>
<style scoped lang="scss">
.addimg {
    width: 80px;
    height: 80px;
    border: 1px dashed #dcdfe6;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 8px;
}

.addimg:hover {
    border: 1.5px dashed #209F84;
}

.imgedit {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    position: relative;
}

.imgedit:hover {
    .imgedit-top {
        display: block;
        display: flex;
        align-items: center;
        justify-content: space-around;

        img {
            z-index: 2100;
            cursor: pointer;
            // opacity: 100%;
        }
    }
}

.imgedit-top {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 200;
    background: rgb(0, 0, 0, 0.2);
    // opacity: 20%;
    display: none;
}

.imgedit2 {
    display: none;
}

.collectiontemplate-box {
    padding: 5px 20px;
}

.detail-box {
    width: 100%;
    height: calc(89vh);
    // overflow: auto;
    background-color: #131a25;
    border: none;
    border-radius: 3px;
    padding: 5px 20px 0px;
    box-sizing: border-box;
    background: url(@/assets/navigation/ty_1614x988.png) ;
    background-size: 100% 100%;
}

:deep(.el-tooltip) {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    position: relative;
}



.delicon {
    width: 20px;
    height: 25px;
    position: relative;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    // margin-left: 20px;

}

.delicon:hover {
    // background-color: red;

    .delIcon {
        display: block !important;
        color: #fff;
        cursor: pointer;
    }

}

:deep(.el-form-item) {
    display: flex;
    align-items: center;
}

:deep(.el-form-item__label) {
    width: 125px !important;
}

:deep(.el-carousel__container) {
    height: 600px !important;
}

:deep(.el-form-item__error) {
    margin-left: 10px
}

#textarea .el-form-item__label {
    align-items: flex-start !important;
}

#textarea .el-form-item__content {
    margin-left: 5px !important;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
    border: none;
}

:deep(.el-input__wrapper) {
    background-color: rgba(19, 26, 37, 0);
}


</style>