首页拓扑图修改

whyczyk

2021-07-26 b72618fe9cfc46e7de0e38f51ba2440b86f08794

首页拓扑图修改

 src/components/PageHeader.vue

@@ -1,6 +1,10 @@
<template>
    <div class="pageHeader">
        <div class="headTitle">FMDS | 电机试验集中测控平台</div>
        <div class="headInfoCon">
            <div class="info">网络状态:正常</div>
            <div class="scrollCon"><span v-html="notice"></span></div>
        </div>
        <div class="headToolsCon">
            <div class="avatar">
                <span class="avatar-icon">
@@ -43,6 +47,7 @@
                pwd: {
                    show: false,
                },
                notice: '直流主配电柜A排电压过高报警'
            }
        },
        methods: {
@@ -88,7 +93,18 @@
    }

    .headToolsCon {
        width: 100%;
        height: 40px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        padding-right: 40px;
    }

    .headInfoCon {
        height: 40px;
        position: absolute;
        left: 0;
@@ -96,8 +112,45 @@
        z-index: 2;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        padding-right: 40px;
        ;
        padding-left: 40px;
    }

    .headInfoCon .info {
        font-size: 16px;
        display: flex;
        align-items: center;
        border-right: 1px solid #ffffff;
        padding-right: 8px;
        margin-right: 8px;
    }

    .headInfoCon .scrollCon {
        font-size: 16px;
        width: 290px;
        overflow: hidden;
    }

    .headInfoCon .scrollCon>span {
        display: block;
        margin-left: 100%;
        width: 290px;
        animation: myMove 8s linear infinite;
        animation-fill-mode: forwards;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*文字无缝滚动*/
    @keyframes myMove {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-580px);
        }
    }

    .avatar {

 src/pages/home/components/preOptionList.vue

New file
@@ -0,0 +1,278 @@
<template>
    <div class="pre-option-list">
        <table>
            <thead>
                <tr>
                    <th>状态名称</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, key) in list" :key="'key'+key">
                    <td>{{item.label}}</td>
                    <td>
                        <el-switch v-model="item.value" @change="changeOption(item)"></el-switch>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import MwSwitch from '@/components/smallModule/mwSwitch.vue';
    import {
        centralMonitorSysUpdateState,
        centralMonitorSysSTUpdateStatus,
        afeRectifierUpdateState2,
        rectifierPowerUpdateState,
        WaterCommUpdateStatus,
        OilCommUpdateStatus,
    } from "../topoGraphdiagram/js/api"
    export default {
        name: "preOptionList",
        props: {
            bigPower: {
                type: Number,
                default: 0
            },
            eleBoard: {
                type: Number,
                default: 0
            },
            AFEcabinet: {
                type: Number,
                default: 0
            },
            waterStation: {
                type: Number,
                default: 0
            },
            oilStation: {
                type: Number,
                default: 0
            },
            switch5000: {
                type: Number,
                default: 0
            },
            switch32001: {
                type: Number,
                default: 0
            },
            switch32002: {
                type: Number,
                default: 0
            },
            switch5200: {
                type: Number,
                default: 0
            },
        },
        components: {
            MwSwitch
        },
        data() {
            return {
                list: [{
                        devId: 10001,
                        label: '5000KV开关',
                        value: true,
                        on: 1,
                        off: 0
                    },
                    {
                        devId: 10003,
                        label: '3200KV1开关',
                        value: true,
                        on: 1,
                        off: 0
                    },
                    {
                        devId: 10004,
                        label: '3200KV2开关',
                        value: true,
                        on: 1,
                        off: 0
                    },
                    {
                        devId: 10002,
                        label: '5200KV开关',
                        value: true,
                        on: 1,
                        off: 0
                    },
                    {
                        devId: 10005,
                        label: '直流主配电板',
                        value: true,
                        on: 1,
                        off: 0
                    },
                    {
                        devId: 20001,
                        label: 'AFE变频器',
                        value: true,
                        on: 1,
                        off: 0
                    },
                    {
                        devId: 30001,
                        label: '大功率整流电源',
                        value: true,
                        on: 1,
                        off: 0
                    },
                    {
                        devId: 40002,
                        label: '水站',
                        value: true,
                        on: 1,
                        off: 0
                    },
                    {
                        devId: 40001,
                        label: '油站',
                        value: true,
                        on: 1,
                        off: 0
                    },
                ]
            }
        },
        methods: {
            changeOption(data) {
                let value = data.value ? data.on : data.off;
                if (data.devId == 10001 || data.devId == 10002 || data.devId == 10003 || data.devId == 10004) {
                    let postData1 = {
                        devId: data.devId,
                        switchClose: value
                    }
                    centralMonitorSysUpdateState(postData1).then(res => {
                        let rs = res.data;
                        if (rs.code == 1) {
                            this.$layer.msg("修改成功");
                        } else {
                            this.$layer.msg("修改失败");
                        }
                    }).catch(error => {

                    });
                } else if (data.devId == 10005) {
                    let postData2 = {
                        devId: data.devId,
                        switchCloseBusScreen: value
                    }
                    centralMonitorSysSTUpdateStatus(postData2).then(res => {
                        let rs = res.data;
                        if (rs.code == 1) {
                            this.$layer.msg("修改成功");
                        } else {
                            this.$layer.msg("修改失败");
                        }
                    }).catch(error => {

                    });
                } else if (data.devId == 20001) {
                    let postData3 = {
                        devId: data.devId,
                        inverterRun: value
                    }
                    afeRectifierUpdateState2(postData3).then(res => {
                        let rs = res.data;
                        if (rs.code == 1) {
                            this.$layer.msg("修改成功");
                        } else {
                            this.$layer.msg("修改失败");
                        }
                    }).catch(error => {

                    });
                } else if (data.devId == 30001) {
                    let postData4 = {
                        devId: data.devId,
                        rectifierPowerState: value
                    }
                    rectifierPowerUpdateState(postData4).then(res => {
                        let rs = res.data;
                        if (rs.code == 1) {
                            this.$layer.msg("修改成功");
                        } else {
                            this.$layer.msg("修改失败");
                        }
                    }).catch(error => {

                    });
                } else if (data.devId == 40002) {
                    let postData5 = {
                        devId: data.devId,
                        waterState: value
                    }
                    WaterCommUpdateStatus(postData5).then(res => {
                        let rs = res.data;
                        if (rs.code == 1) {
                            this.$layer.msg("修改成功");
                        } else {
                            this.$layer.msg("修改失败");
                        }
                    }).catch(error => {

                    });
                } else if (data.devId == 40001) {
                    let postData6 = {
                        devId: data.devId,
                        oilState: value
                    }
                    OilCommUpdateStatus(postData6).then(res => {
                        let rs = res.data;
                        if (rs.code == 1) {
                            this.$layer.msg("修改成功");
                        } else {
                            this.$layer.msg("修改失败");
                        }
                    }).catch(error => {

                    });
                }
            }
        },
        mounted() {
            console.log(this.AFEcabinet)
            this.list[0].value = this.switch5000 == 0 ? false : true;
            this.list[1].value = this.switch32001 == 0 ? false : true;
            this.list[2].value = this.switch32002 == 0 ? false : true;
            this.list[3].value = this.switch5200 == 0 ? false : true;
            this.list[4].value = this.eleBoard == 0 ? false : true;
            this.list[5].value = this.AFEcabinet == 0 ? false : true;
            this.list[6].value = this.bigPower == 0 ? false : true;
            this.list[7].value = this.waterStation == 0 ? false : true;
            this.list[8].value = this.oilStation == 0 ? false : true;
        }
    }
</script>

<style scoped>
    .pre-option-list {
        font-size: 16px;
        color: #FFFFFF;
    }

    .pre-option-list table {
        width: 100%;
        border-collapse: collapse;
    }

    .pre-option-list table th,
    .pre-option-list table td {
        border: 2px solid #6261CB;
        padding: 8px 8px;
        text-align: center;
    }

    .pre-option-list table th {
        color: #FFF034;
        border-top: 2px solid #797979;
        border-left: 2px solid #797979;
        border-right: 2px solid #797979;
    }
</style>

 src/pages/home/topoGraph.vue

@@ -2,6 +2,7 @@
    <div class="contentBox">
        <div class="tipTitle">系统拓扑</div>
        <div class="diagram-con">
            <el-button type="primary" size="mini" class="editBtn" @click="drawer=true">前置条件设置</el-button>
            <div class="diagram-stc" ref="static"></div>
            <div class="diagram-flush" ref="flush"></div>
            <axis :position="axis1" v-if="axis1.length>0"></axis>
@@ -369,6 +370,13 @@
                </div>
            </diagram-panel>
        </transition>

        <mw-drawer :visible.sync="drawer">
            <pre-option-list :bigPower="bigPower" :eleBoard="eleBoard" :AFEcabinet="AFEcabinet"
                :waterStation="waterStation" :oilStation="oilStation" :switch5000="switch5000"
                :switch32001="switch32001" :switch32002="switch32002" :switch5200="switch5200" v-if="drawer">
            </pre-option-list>
        </mw-drawer>
    </div>
</template>

@@ -376,6 +384,8 @@
    import gridCircuitDiagram from "@/pages/home/topoGraphdiagram/js/gridCircuitDiagram"
    import diagramStates from '@/pages/home/topoGraphdiagram/js/diagramStates'
    import DiagramPanel from '@/components/smallModule/DiagramPanel.vue';
    import MwDrawer from "@/components/smallModule/mwDrawer";
    import PreOptionList from "@/pages/home/components/preOptionList";
    import {
        deviceStateAllStatus,
        centralMonitorSysInfoByDevId,
@@ -383,7 +393,7 @@
        centralMonitorSysSTInfoByDevId,
        afeInverterInfoByDeviceId,
        WaterCommInfoByDevId,
        OilCommInfoByDevId
        OilCommInfoByDevId,
    } from "./topoGraphdiagram/js/api"
    import Axis from '@/components/smallModule/axis.vue';
    let diagram;
@@ -391,9 +401,13 @@
        components: {
            DiagramPanel,
            Axis,
            MwDrawer,
            PreOptionList
        },
        data() {
            return {
                type: 'kz',
                drawer: false,
                axis1: [],
                axis2: [],
                text1Pos: [],
@@ -514,142 +528,150 @@
                        this.deviceList.map(item => {
                            switch (item.position) {
                                case 5: // 大功率电源
                                    this.bigPower = item.commStatus;
                                    if (this.bigPower == 0) {
                                        diagramStates(diagram, 'bigPower');
                                    }
                                    rectifierPowerInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            this.bigPower = res.data.data.rectifierPowerState;
                                            if (this.bigPower == 0) {
                                                diagramStates(diagram, 'bigPower');
                                            }
                                            this.panel4 = res.data.data
                                            this.setDiagramByType()
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                                case 6: // 直流主配电板
                                    this.eleBoard = item.commStatus
                                    if (this.eleBoard == 0) {
                                        diagramStates(diagram, 'eleBoard');
                                    }
                                    centralMonitorSysSTInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            this.eleBoard = res.data.data.switchCloseBusScreen
                                            if (this.eleBoard == 0) {
                                                diagramStates(diagram, 'eleBoard');
                                            }
                                            this.panel5 = res.data.data
                                            this.setDiagramByType()
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                                case 8: // AFE变频
                                    this.AFEcabinet = item.commStatus
                                    if (this.AFEcabinet == 0) {
                                        diagramStates(diagram, 'AFEcabinet');
                                    }
                                case 7: // AFE变频
                                    afeInverterInfoByDeviceId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            this.AFEcabinet = res.data.data.inverterRun
                                            if (this.AFEcabinet == 0) {
                                                diagramStates(diagram, 'AFEcabinet');
                                            }
                                            this.panel7 = res.data.data
                                            this.setDiagramByType()
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                                case 9: // 水站
                                    this.waterStation = item.commStatus
                                    if (this.waterStation == 0) {
                                        diagramStates(diagram, 'waterStation');
                                    }
                                    WaterCommInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            this.waterStation = res.data.data.waterState
                                            if (this.waterStation == 0) {
                                                diagramStates(diagram, 'waterStation');
                                            }
                                            this.panel8 = res.data.data
                                            this.setDiagramByType()
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                                case 10: // 油站
                                    this.oilStation = item.commStatus
                                    if (this.oilStation == 0) {
                                        diagramStates(diagram, 'oilStation');
                                    }
                                    OilCommInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            this.oilStation = res.data.data.oilState
                                            if (this.oilStation == 0) {
                                                diagramStates(diagram, 'oilStation');
                                            }
                                            this.panel9 = res.data.data
                                            this.setDiagramByType()
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                                case 1: // 5000KV开关
                                    this.switch5000 = item.commStatus;
                                    if (this.switch5000 == 1) {
                                        diagramStates(diagram, 'switch5000');
                                    }
                                    centralMonitorSysInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            this.switch5000 = res.data.data.switchClose;
                                            if (this.switch5000 == 1) {
                                                diagramStates(diagram, 'switch5000');
                                            }
                                            this.panel1 = res.data.data
                                            this.setDiagramByType()
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                                case 2: // 3200KV1开关
                                    this.switch32001 = item.commStatus
                                    if (this.switch32001 == 1) {
                                        diagramStates(diagram, 'switch32001');
                                    }
                                    centralMonitorSysInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            this.switch32001 = res.data.data.switchClose
                                            if (this.switch32001 == 1) {
                                                diagramStates(diagram, 'switch32001');
                                            }
                                            this.panel2 = res.data.data
                                            this.setDiagramByType()
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                                case 3: // 3200KV2开关
                                    this.switch32002 = item.commStatus
                                    if (this.switch32002 == 1) {
                                        diagramStates(diagram, 'switch32002');
                                    }
                                    centralMonitorSysInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 0) {
                                        if (res.data.code == 1) {
                                            this.switch32002 = res.data.data.switchClose
                                            if (this.switch32002 == 1) {
                                                diagramStates(diagram, 'switch32002');
                                            }
                                            this.panel3 = res.data.data
                                            this.setDiagramByType()
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                                case 4: // 5200KV开关
                                    this.switch5200 = item.commStatus
                                    if (this.switch5200 == 1) {
                                        diagramStates(diagram, 'switch5200');
                                    }
                                    centralMonitorSysInfoByDevId({
                                        devId: item.deviceId
                                    }).then((res) => {
                                        if (res.data.code == 1) {
                                            this.switch5200 = res.data.data.switchClose
                                            if (this.switch5200 == 1) {
                                                diagramStates(diagram, 'switch5200');
                                            }
                                            this.panel6 = res.data.data
                                            this.setDiagramByType()
                                        }
                                    }).catch((err) => {
                                        console.log(err)
                                    });
                                    break;
                            }
                            this.setDiagramByType()
                        })
                    }
                }).catch((err) => {
@@ -870,6 +892,13 @@
        position: relative;
    }

    .diagram-con .editBtn {
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 15;
    }

    .panel7 .panel-item .label {
        width: 100px;
        text-align: right;

 src/pages/home/topoGraphdiagram/js/api.js

@@ -49,7 +49,7 @@
export const afeInverterInfoByDeviceId = (data) => {
  return axios({
    method: "GET",
    url: "/afeInverter/infoByDeviceId",
    url: "/afeRectifier/infoByDevId",
    params: data
  });
}
@@ -74,4 +74,71 @@
    url: "/OilComm/infoByDevId",
    params: data
  });
}

/**
 * 进出线屏开关状态-演示使用
 */
export const centralMonitorSysUpdateState = (data) => {
  return axios({
    method: "PUT",
    url: "/centralMonitorSys/updateState",
    params: data
  });
}

/**
 * 直流主配电柜状态-演示使用
 */
export const centralMonitorSysSTUpdateStatus = (data) => {
  return axios({
    method: "PUT",
    url: "/centralMonitorSysST/updateStatus",
    params: data
  });
}

/**
 * AFE变频器状态-演示使用
 */
export const afeRectifierUpdateState2 = (data) => {
  return axios({
    method: "PUT",
    url: "/afeRectifier/updateState2",
    params: data
  });
}


/**
 * 大功率整流状态-演示使用
 */
export const rectifierPowerUpdateState = (data) => {
  return axios({
    method: "PUT",
    url: "/rectifierPower/updateState",
    params: data
  });
}

/**
 * 水站状态-演示使用
 */
export const WaterCommUpdateStatus = (data) => {
  return axios({
    method: "PUT",
    url: "/WaterComm/updateStatus",
    params: data
  });
}

/**
 * 油站状态-演示使用
 */
export const OilCommUpdateStatus = (data) => {
  return axios({
    method: "PUT",
    url: "/OilComm/updateStatus",
    params: data
  });
}