neic-hefeng/src/components/control/controlAllArea.vue

<template>
    <div class="problem" @contextmenu="contextmenu">
        <div class="body">
            <img class="logo" src="../../assets/img/logo.png" alt="">
            <div class="titleBar">
                <div class="title">设备区</div>
                <el-select @change="listedChange()" class="inputs" v-model="selectValue" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-top: 20px; margin-left: 35px; height:85%;">
                <el-scrollbar>
                    <div class="scoll">
                        <div class="matrix" v-if="showList.length>0">
                            <!-- <div class="problemTitle">待启动</div> -->
                            <MatrixBlock @choose-click="handleClick" @on-click="handleDetails" :dataList="showList">
                            </MatrixBlock>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
        <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose" :svgWeb="svgWeb"
            :windturbine="currentWindturbine"></WindturbineDetailPages>
    </div>
</template>

<script>
    import WindturbineDetailPages from "../WindturbineDetailPages.vue";
    import MatrixBlock from "../matrixBlock.vue";
    import BackgroundData from 'utils/BackgroundData'
    import MessageBridge from 'utils/MessageBridge'
    export default {
        name: "ProblemArea",
        components: {
            WindturbineDetailPages,
            MatrixBlock,
        },
        props: {
            current: {
                type: Number,
            },
            datas: {
                type: String,
            },
        },
        data() {
            return {
                dataList: [],
                showList: [],
                chooseList: [],
                totleList: [],
                currentWindturbine: {},
                dialogVisible: false,
                showSvg: false,
                svgWeb: '',
                windturbinelist: {},
                options: [
                    {
                        value: '0',
                        label: '问题设备'
                    },
                    {
                        value: '1',
                        label: '故障'
                    },
                    {
                        value: '2',
                        label: '维护'
                    },
                    {
                        value: '3',
                        label: '离线'
                    },
                    {
                        value: '4',
                        label: '挂牌'
                    },
                    {
                        value: '5',
                        label: '麻黄山'
                    },
                    {
                        value: '6',
                        label: '牛首山'
                    },
                    {
                        value: '7',
                        label: '青山'
                    },
                    {
                        value: '8',
                        label: '石板泉'
                    },
                    {
                        value: '9',
                        label: '香山'
                    },
                ],
                selectValue: '0',
                controlErorCodes: [
                    "控制成功",
                    "控制命令发送失败",
                    "无效的控制地址",
                    "被控设备异常",
                    "无效的控制功能",
                    "网络连接错误,检查场站通信",
                    "控制结果读取超时",
                    "未知错误",
                    "控制命令错误",
                    "收到无法识别数据",
                    "未读取到数据包",
                    "未知错误",
                    "风机操作过频繁",
                    "风机被挂牌",
                    "风机操作与风机状态不符",
                    "需要登录",
                ],
            };
        },
        computed: {},
        created: function () {
            this.initData();
            this.controls()
            console.log(this.datas);

        },
        methods: {
            controls() {
                let json = this.$store.state.windturbinelist
                this.dataList = []
                this.showList = []
                let arr = Object.keys(json).sort()
                for (var id of arr) {
                    var val = json[id];
                    this.chooseList.forEach(item => {
                        if (item.windturbineId === val.windturbineId) {
                            val.active = true
                        }
                    })
                    this.dataList.push(val)
                    switch (Number(this.selectValue)) {
                        case 0:
                            if (val.status === 5 || val.status === 6 || val.status === 7 || val.lockValue > 0) {
                                this.showList.push(val)
                            }
                            break;
                        case 1:
                            val.status === 5 ? this.showList.push(val) : ''
                            break;
                        case 2:
                            val.status === 6 ? this.showList.push(val) : ''
                            break;
                        case 3:
                            val.status === 7 ? this.showList.push(val) : ''
                            break;
                        case 4:
                            val.lockValue > 0 ? this.showList.push(val) : ''
                            break;
                        case 5:
                            val.windturbineId.substring(0, 2) === 'MG' ? this.showList.push(val) : ''
                            break;
                        case 6:
                            val.windturbineId.substring(0, 2) === 'NG' ? this.showList.push(val) : ''
                            break;
                        case 7:
                            val.windturbineId.substring(0, 2) === 'QG' ? this.showList.push(val) : ''
                            break;
                        case 8:
                            val.windturbineId.substring(0, 2) === 'SG' ? this.showList.push(val) : ''
                            break;
                        case 9:
                            val.windturbineId.substring(0, 2) === 'XG' ? this.showList.push(val) : ''
                            break;

                    }
                    // if (val.lockValue > 0) {
                    //     this.listedList.push(val)
                    // }
                }
                console.log(this.showList);
                let checkoutList = BackgroundData.getInstance().checkouts;
                checkoutList.forEach(item => {
                    let showIndex = null
                    this.showList.forEach((param, index) => {
                        if (item.windturbineId === param.windturbineId) {
                            showIndex = index
                        }
                    })
                    this.showList.splice(showIndex, 1);
                })
                console.log(this.showList);
            },

            initData: function () {
                var mb = MessageBridge.getInstance();
                var vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
                mb.register(vss);
            },
            windturbineMessage(msg) {
                if (this.$store.state.current === 2) {
                    let arr = []
                    if (msg === 'CLOSE') {
                        arr.push(msg)
                    } else {
                        arr = msg.split('-')
                    }
                    this.dialogVisible = false
                    this.showSvg = false
                    this.svgWeb = ''
                    console.log(arr);
                    if (arr[0] === 'OPEN_FJ') {
                        this.currentWindturbine = this.windturbinelist[arr[1]]
                        this.dialogVisible = true;
                    } else if (arr[0] === 'CLOSE') {
                        this.dialogVisible = false
                    } else if (arr[0] === 'OPEN_SYZ') {
                        this.showSvg = true
                        this.dialogVisible = true
                        this.svgWeb = arr[1];
                    } else if (arr[0] === 'CONTROL_START' || arr[0] === 'CONTROL_STOP' || arr[0] === 'CONTROL_MAINTAIN') {
                        let windControlList = [];
                        let mss = {}
                        arr.forEach(item => {
                            if (item === (this.windturbinelist[item] ? this.windturbinelist[item].windturbineId : '')) {
                                switch (arr[0]) {
                                    case 'CONTROL_START':
                                        this.windturbinelist[item].controlType = '1'
                                        break
                                    case 'CONTROL_STOP':
                                        this.windturbinelist[item].controlType = '2'
                                        break
                                    case 'CONTROL_MAINTAIN':
                                        this.windturbinelist[item].controlType = '6'
                                        break
                                    case 'CONTROL_UNMAINTAIN':
                                        this.windturbinelist[item].controlType = '8'
                                        break
                                }
                                windControlList.push(this.windturbinelist[item])
                            }
                        })
                        mss.type = 'send'
                        this.menuClicked(mss, windControlList, 'automatic')
                    }
                    else if (arr[0] === 'CONTROL_LOCK_OVERHAUL' || arr[0] === 'CONTROL_LOCK_MAINTAIN' || arr[0] === 'CONTROL_LOCK_LNVOLVED_OVERHAUL' ||
                        arr[0] === 'CONTROL_LOCK_LNVOLVED_MAINTAIN' || arr[0] === 'CONTROL_LOCK_LNVOLVED_PG' || arr[0] === 'CONTROL_LOCK_LNVOLVED_WEATHER' || arr[0] === 'CONTROL_UNLOCK') {
                        let windturbine = this.windturbinelist[arr[1]]
                        switch (arr[0]) {
                            case 'CONTROL_LOCK_OVERHAUL':
                                this.menuClicked({ type: "lock", value: "CheckLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_MAINTAIN':
                                this.menuClicked({ type: "lock", value: "FaultLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_LNVOLVED_OVERHAUL':
                                this.menuClicked({ type: "lock", value: "StationCheckLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_LNVOLVED_MAINTAIN':
                                this.menuClicked({ type: "lock", value: "StationFaulLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_LNVOLVED_PG':
                                this.menuClicked({ type: "lock", value: "StationPowerLineLock" }, windturbine);
                                break;
                            case 'CONTROL_LOCK_LNVOLVED_WEATHER':
                                this.menuClicked({ type: "lock", value: "StationWeatherLock" }, windturbine);
                                break;
                            case 'CONTROL_UNLOCK':
                                this.menuClicked({ type: "lock", value: "UnLock" }, windturbine);
                                break;
                        }
                    }
                }

            },
            /* 右键菜单 */
            contextmenu() {
                const remote = require('electron').remote;
                var that = this;
                let menuTemplate = []
                if (this.selectValue === '0' || this.selectValue === '1' || this.selectValue === '2' || this.selectValue === '3' || this.selectValue === '4') {
                    menuTemplate = [
                        // {
                        //     label: "标注",
                        //     click() {
                        //         that.menuClicked({ type: "marking" });
                        //     },
                        // },
                        {
                            label: "挂牌",
                            submenu: [
                                {
                                    label: "检修",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "CheckLock" });
                                    },
                                },
                                {
                                    label: "故障维修",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "FaultLock" });
                                    },
                                },
                                {
                                    label: "场内受累检修",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "StationCheckLock" });
                                    },
                                },
                                {
                                    label: "场内受累故障",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "StationFaulLock" });
                                    },
                                },
                                {
                                    label: "场外受累电网",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "StationPowerLineLock" });
                                    },
                                },
                                {
                                    label: "场外受累天气",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "StationWeatherLock" });
                                    },
                                },
                            ],
                        },
                        {
                            label: "取消挂牌",
                            click() {
                                that.menuClicked({ type: "lock", value: "UnLock" });
                            },
                        },
                    ];
                } else {
                    menuTemplate = [
                        {
                            label: "启动",
                            click() {
                                that.menuClicked({ type: "send", controlType: '1' });
                            },
                        },
                        {
                            label: "停机",
                            click() {
                                that.menuClicked({ type: "send", controlType: '2' });
                            },
                        },
                        {
                            label: "复位",
                            click() {
                                that.menuClicked({ type: "send", controlType: '5' });
                            },
                        },
                        {
                            label: "维护",
                            click() {
                                that.menuClicked({ type: "send", controlType: '6' });
                            },
                        },
                        {
                            label: "取消维护",
                            click() {
                                that.menuClicked({ type: "send", controlType: '8' });
                            },
                        },
                        {
                            label: "挂牌",
                            submenu: [
                                {
                                    label: "检修",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "CheckLock" });
                                    },
                                },
                                {
                                    label: "故障维修",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "FaultLock" });
                                    },
                                },
                                {
                                    label: "场内受累检修",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "StationCheckLock" });
                                    },
                                },
                                {
                                    label: "场内受累故障",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "StationFaulLock" });
                                    },
                                },
                                {
                                    label: "场外受累电网",
                                    click() {
                                        that.menuClicked({
                                            type: "lock",
                                            value: "StationPowerLineLock",
                                        });
                                    },
                                },
                                {
                                    label: "场外受累天气",
                                    click() {
                                        that.menuClicked({ type: "lock", value: "StationWeatherLock" });
                                    },
                                },
                            ],
                        },
                        {
                            label: "取消挂牌",
                            click() {
                                that.menuClicked({ type: 'lock', value: 'UnLock' });
                            },
                        },
                        // {
                        //     label: "标注",
                        //     click() {
                        //         that.menuClicked({ type: "marking" });
                        //     },
                        // },
                    ];
                }

                const menu = remote.Menu.buildFromTemplate(menuTemplate);

                menu.popup(remote.getCurrentWindow());
            },

            menuClicked(msg, windturbine, automatic) {
                var bd = BackgroundData.getInstance();
                if (!bd.LoginUser) {
                    this.$notify({
                        title: "请登录",
                        message: "控制风机需要先登录！",
                        type: "warning",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                    return;
                }
                if (msg.type == "lock") {
                    // 挂牌
                    let sendList = []
                    // 挂牌
                    if (windturbine) {
                        windturbine.lockType = msg.value;
                        sendList.push(windturbine)
                    } else {
                        this.chooseList.forEach(item => {
                            item.lockType = msg.value;
                        })
                        sendList = this.chooseList
                    }

                    if (sendList.length > 0) {
                        bd.windturbineControl(
                            sendList,
                            true,
                            '',
                            '',
                            this.controlSuccess,
                            this.controlError
                        );
                    }
                } else if (msg.type == "send") {
                    // 发送
                    let sendList = []
                    if (automatic) {
                        sendList = windturbine
                    }
                    else if (windturbine) {
                        windturbine.controlType = msg.controlType
                        sendList.push(windturbine)
                    } else {
                        this.chooseList.forEach(item => {
                            item.controlType = Number(msg.controlType)
                        })
                        sendList = this.chooseList
                    }
                    if (sendList.length > 0) {
                        bd.checkout(sendList);
                        if (automatic) {
                            bd.windturbineControl(
                                sendList,
                                false,
                                'automatic',
                                '',
                                this.controlSuccess,
                                this.controlError
                            );
                        } else {
                            bd.windturbineControl(
                                sendList,
                                false,
                                '',
                                '',
                                this.controlSuccess,
                                this.controlError
                            );
                        }
                    }
                } else if (msg.type == "marking") {
                    // 标注
                    bd.marking(this.chooseList);
                }
                this.clearSelected();
            },

            /* 清除所有选择 */
            clearSelected() {
                this.chooseList = []
            },
            /* 控制成功 */
            controlSuccess(msg) {
                console.log(msg);
                var mss = '';     // 信息
                var iserror = false;// 是否有控制错误的风机
                for (var v in msg.data) {
                    var val = msg.data[v];
                    if (val.errorCode > 0) {
                        iserror = true;
                        mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]}\n`;
                    }
                }
                var tp = iserror ? "warning" : "success";
                var dt = iserror ? 0 : 4500;
                if (!iserror) {
                    mss = "控制成功";
                }

                this.$notify({
                    title: "控制",
                    message: mss,
                    type: tp,
                    position: "bottom-right",
                    offset: 60,
                    duration: 3000,
                });
            },

            /* 控制失败 */
            controlError(err) {
                this.$notify({
                    title: "控制出现错误",
                    message: err.message,
                    type: "warning",
                    position: "bottom-right",
                    offset: 60,
                    duration: 3000,
                });
            },
            handleClick(values) {
                if (values.active) {
                    let showIndex = null
                    this.chooseList.forEach((item, index) => {
                        if (item.windturbineId === values.windturbineId) {
                            showIndex = index
                        }
                    })
                    this.chooseList.splice(showIndex, 1);
                } else {
                    this.chooseList.push(values)
                }
                this.showList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
            },
            listedChange() {
                this.chooseList = []
                this.showList = []
                this.dataList.forEach(val => {
                    val.active = false
                    switch (Number(this.selectValue)) {
                        case 0:
                            if (val.status === 5 || val.status === 6 || val.status === 7 || val.lockValue > 0) {
                                this.showList.push(val)
                            }
                            break;
                        case 1:
                            val.status === 5 ? this.showList.push(val) : ''
                            break;
                        case 2:
                            val.status === 6 ? this.showList.push(val) : ''
                            break;
                        case 3:
                            val.status === 7 ? this.showList.push(val) : ''
                            break;
                        case 4:
                            val.lockValue > 0 ? this.showList.push(val) : ''
                            break;
                        case 5:
                            val.windturbineId.substring(0, 2) === 'MG' ? this.showList.push(val) : ''
                            break;
                        case 6:
                            val.windturbineId.substring(0, 2) === 'NG' ? this.showList.push(val) : ''
                            break;
                        case 7:
                            val.windturbineId.substring(0, 2) === 'QG' ? this.showList.push(val) : ''
                            break;
                        case 8:
                            val.windturbineId.substring(0, 2) === 'SG' ? this.showList.push(val) : ''
                            break;
                        case 9:
                            val.windturbineId.substring(0, 2) === 'XG' ? this.showList.push(val) : ''
                            break;

                    }
                })
            },
            handleDetails(itm) {
                this.dialogVisible = true;
                this.currentWindturbine = itm;
            },
            handleClose() {
                this.dialogVisible = false
                this.showSvg = false
            },
        },
        watch: {
            "$store.getters.windturbinelist": {
                deep: true,
                handler: function (json) {
                    this.windturbinelist = json
                    this.dataList = []
                    this.showList = []
                    let arr = Object.keys(json).sort()
                    for (var id of arr) {
                        var val = json[id];
                        this.chooseList.forEach(item => {
                            if (item.windturbineId === val.windturbineId) {
                                val.active = true
                            }
                        })
                        this.dataList.push(val)
                        switch (Number(this.selectValue)) {
                            case 0:
                                if (val.status === 5 || val.status === 6 || val.status === 7 || val.lockValue > 0) {
                                    this.showList.push(val)
                                }
                                break;
                            case 1:
                                val.status === 5 ? this.showList.push(val) : ''
                                break;
                            case 2:
                                val.status === 6 ? this.showList.push(val) : ''
                                break;
                            case 3:
                                val.status === 7 ? this.showList.push(val) : ''
                                break;
                            case 4:
                                val.lockValue > 0 ? this.showList.push(val) : ''
                                break;
                            case 5:
                                val.windturbineId.substring(0, 2) === 'MG' ? this.showList.push(val) : ''
                                break;
                            case 6:
                                val.windturbineId.substring(0, 2) === 'NG' ? this.showList.push(val) : ''
                                break;
                            case 7:
                                val.windturbineId.substring(0, 2) === 'QG' ? this.showList.push(val) : ''
                                break;
                            case 8:
                                val.windturbineId.substring(0, 2) === 'SG' ? this.showList.push(val) : ''
                                break;
                            case 9:
                                val.windturbineId.substring(0, 2) === 'XG' ? this.showList.push(val) : ''
                                break;

                        }
                        // if (val.lockValue > 0) {
                        //     this.listedList.push(val)
                        // }
                    }
                    console.log(this.showList);
                    let checkoutList = BackgroundData.getInstance().checkouts;
                    checkoutList.forEach(item => {
                        let showIndex = null
                        this.showList.forEach((param, index) => {
                            if (item.windturbineId === param.windturbineId) {
                                showIndex = index
                            }
                        })
                        this.showList.splice(showIndex, 1);
                    })
                    console.log(this.showList);
                },
            },
        },
    };
</script>
<style scoped>
    .problem {
        height: 100%;
    }

    .body {
        border: 1px solid #373737;
        width: 100%;
        margin-left: 15px;
        margin-top: 10px;
        height: 61vh;
    }

    .body .scoll {
        height: 91%;
    }

    .titleBar {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .title {
        color: #ffffff;
        font-size: 14px;
        margin-left: 32px;
        /* margin-top: 12px; */
        margin-bottom: 10px;
        /* width: 570px; */
        width: 29vw;
        height: 50px;
        display: flex;
        align-items: center;
        position: absolute;
        background-color: #000000;
    }

    .title::before {
        z-index: 1;
        content: '';
        position: absolute;
        left: -18px !important;
        /* top: 30px !important; */
        width: 5px;
        height: 5px;
        background-color: #54B75A;
        border-radius: 50%;
    }

    .inputs {
        border: none;
        width: 174px !important;
        margin-left: 110px;
    }

    .el-input__inner {
        background-color: rgb(100, 100, 100) !important;
        color: rgb(220, 220, 220) !important;
        border: 1px solid red !important;
    }

    .logo {
        position: absolute;
        top: 2px;
        left: 12px;
    }
</style>