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

/* 自定义tabs */
<template>
    <div class="body" :style="style">
        <img class="logo" src="../../assets/img/logo.png" alt="">
        <div class="title">{{ title }}</div>
        <div style="margin-top: 50px; height:85%;" @contextmenu="contextmenu">
            <el-scrollbar>
                <div class="scoll">
                    <div class="matrix" v-if="startList.length>0">
                        <div class="problemTitle">启动</div>
                        <MatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="startList">
                        </MatrixBlock>
                    </div>
                    <div class="matrix" v-if="stopList.length>0">
                        <div class="problemTitle">停机</div>
                        <MatrixBlock @on-click="handleDetial" @choose-click="handleClick" :dataList="stopList">
                        </MatrixBlock>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <div v-if="current===1" class="send" @click="handleSend">发送</div>
        <div class="success" v-if="showFlag&&current===0">指令发送成功</div>
    </div>
    <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose" :svgWeb="svgWeb"
        :stationName="stationName" :windturbine="currentWindturbine"></WindturbineDetailPages>
</template>

<script>
    import BackgroundData from 'utils/BackgroundData'
    import WindturbineDetailPages from "../WindturbineDetailPages.vue";
    import MatrixBlock from "../matrixBlock.vue";
    import MessageBridge from 'utils/MessageBridge'
    export default {
        name: 'gy-card',
        components: {
            MatrixBlock,
            WindturbineDetailPages
        },
        created: function () {
            this.initData();
            this.suggestion();
        },
        emits: ["parentRun"],
        props: {
            title: {
                type: String,
                default: '',
                required: true,

            },
            height: {
                type: Number,
                default: 200,
            },
        },
        data() {
            return {
                current:1,
                windturbinelist: {},
                titleList: [],
                startList: [],
                stopList: [],
                chooseList: [],
                sendList: [],
                currentWindturbine: {},
                dialogVisible: false,
                showSvg: false,
                showFlag: false,
                svgWeb: '',
                stationName: '',
                // 定时器
                timer: "",
                controlErorCodes: [
                    "控制成功",
                    "控制命令发送失败",
                    "无效的控制地址",
                    "被控设备异常",
                    "无效的控制功能",
                    "网络连接错误,检查场站通信",
                    "控制结果读取超时",
                    "未知错误",
                    "控制命令错误",
                    "收到无法识别数据",
                    "未读取到数据包",
                    "未知错误",
                    "风机操作过频繁",
                    "风机被挂牌",
                    "风机操作与风机状态不符",
                    "需要登录",
                ],
                boosterStation: {
                    'MHS_SYZ': {
                        name: '麻黄山升压站'
                    },
                    'NSS_SYZ': {
                        name: '牛首山升压站'
                    },
                    'QS_SYZ': {
                        name: '青山升压站'
                    },
                    'QS3_SYZ': {
                        name: '青山三期升压站'
                    },
                    'SBQ_SYZ': {
                        name: '石板泉升压站'
                    },
                    'XS_SYZ': {
                        name: '香山升压站'
                    },
                    'DWK_SYZ': {
                        name: '大武口升压站'
                    },
                    'PL_SYZ': {
                        name: '平罗升压站'
                    },
                    'PL2_SYZ': {
                        name: '平罗二期升压站'
                    },
                    'XH_SYZ': {
                        name: '宣和升压站'
                    },
                    'MCH_SYZ': {
                        name: '马场湖升压站'
                    },
                    'HZJ_SYZ': {
                        name: '海子井升压站'
                    },
                }
            }
        },
        computed: {
            style() {
                return `width: 100%; height: ${this.height}vh;`
            },
        },
        methods: {
            control(current){
                this.current = current
            },
            initData: function () {
                var mb = MessageBridge.getInstance();
                var vs = [{ key: "/topic/suggestion", action: this.suggestion }];
                var vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
                mb.register(vs);
                mb.register(vss);
            },
            suggestion(msg, headers) {
                this.titleList = msg?JSON.parse(msg):this.$store.state.suggestion
                if (this.current === 0) {
                    let dateList = []
                    this.titleList.forEach(item => {
                        item.operateStyle === 'Start' ? this.windturbinelist[item.windturbineId].controlType = 1 : this.windturbinelist[item.windturbineId].controlType = 2
                        dateList.push(this.windturbinelist[item.windturbineId])
                    })
                    let mss = {}
                    mss.type = 'send'
                    this.timer = setTimeout(() => {
                        this.menuClicked(mss, dateList, 'automatic')
                        this.showFlag = false
                        clearInterval(this.timer);
                    }, 3000);
                }
            },
            windturbineMessage(msg) {
                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];
                    this.stationName = this.boosterStation[arr[1]].name
                } else if (arr[0] === 'CONTROL_START' || arr[0] === 'CONTROL_STOP' || arr[0] === 'CONTROL_MAINTAIN') {
                    let windControlList=[];
                    let mss = {}
                    for(var i=1;i<arr.length;i++){
                        windControlList[i-1]=this.windturbinelist [arr[i]];
                        switch (arr[0]) {
                                case 'CONTROL_START':
                                    //mss.controlType = '1'
                                    windControlList[i-1].controlType = '1'
                                    break
                                case 'CONTROL_STOP':
                                    //mss.controlType = '2'
                                    windControlList[i-1].controlType = '2'
                                    break
                                case 'CONTROL_MAINTAIN':
                                    //mss.controlType = '6'
                                    windControlList[i-1].controlType = '6'
                                    break
                            }
                    }
                    /* arr.forEach(item =>{
                        if(item === (this.windturbinelist[item]?this.windturbinelist[item].windturbineId:'')){
                            windControlList.push(this.windturbinelist [item])
                            switch (arr[0]) {
                                case 'CONTROL_START':
                                    //mss.controlType = '1'
                                    break
                                case 'CONTROL_STOP':
                                    //mss.controlType = '2'
                                    break
                                case 'CONTROL_MAINTAIN':
                                    //mss.controlType = '6'
                                    break
                            }
                        }
                    }) */
                    //let windturbine = this.windturbinelist[arr[1]]
                    /* switch (arr[0]) {
                        case 'CONTROL_START':
                            mss.controlType = '1'
                            break
                        case 'CONTROL_STOP':
                            mss.controlType = '2'
                            break
                        case 'CONTROL_MAINTAIN':
                            mss.controlType = '6'
                            break
                    } */
                    mss.type = 'send'
                    this.menuClicked(mss, windControlList,true)
                }
                // 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;
                //     }
                // }
            },
            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.startList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
                this.stopList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
            },
            handleDetial(itm) {
                this.dialogVisible = true;
                this.currentWindturbine = itm;
            },
            handleClose() {
                this.dialogVisible = false
                this.showSvg = false
            },
            handleSend() {
                if (this.chooseList.length > 0) {
                    this.menuClicked({ type: "send" });
                }
            },
            /* 右键菜单 */
            contextmenu() {
                const { remote } = require("electron");
                var that = this;
                const menuTemplate = [
                    {
                        label: "发送",
                        click() {
                            that.menuClicked({ type: "send" });
                        },
                    },
                    {
                        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: "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") {
                    // 挂牌
                    this.chooseList.forEach(item => {
                        item.lockType = msg.value;
                    })
                    bd.windturbineControl(
                        this.chooseList,
                        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 => {
                            if (item.operateStyle === "Start") {
                                item.controlType = 1
                            } else if (item.operateStyle === "Stop") {
                                item.controlType = 2
                            }
                        })
                        sendList = this.chooseList
                    }
                    this.showFlag = true
                    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") {
                    // 标注
                    var vvs = this.getSelectedItems();
                    bd.marking(vvs);
                }
                this.clearSelected();
            },
            clearSelected() {
                this.startList.forEach(item => {
                    item.active = false
                })
                this.stopList.forEach(item => {
                    item.active = false
                })
                this.chooseList = []
            },
            /* 控制成功 */
            controlSuccess(msg) {
                var bd = BackgroundData.getInstance();
                console.log(msg);
                if (msg.data || msg.data !== {}) {
                    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,
                    });
                } else {
                    this.$notify({
                        title: "控制出现错误",
                        message: '控制失败，请重试',
                        type: "warning",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                }

            },

            /* 控制失败 */
            controlError(err) {
                this.$notify({
                    title: "控制出现错误",
                    message: err.message,
                    type: "warning",
                    position: "bottom-right",
                    offset: 60,
                    duration: 3000,
                });
            },
        },
        watch: {
            "$store.getters.windturbinelist": {
                deep: true,
                handler: function (json) {
                    this.windturbinelist = json
                    let arr = Object.keys(json).sort()
                    this.stopList = []
                    this.startList = []
                    for (var id of arr) {
                        var val = json[id];
                        this.chooseList.forEach(item => {
                            if (item.windturbineId === val.windturbineId) {
                                val.active = true
                            }
                        })
                        this.titleList.forEach(item => {
                            if (item.windturbineId === val.windturbineId) {
                                val.operateStyle = item.operateStyle
                                if (item.operateStyle === "Start" && val.status === 2) {
                                    this.startList.push(val)
                                } else if (item.operateStyle === "Stop" && val.status === 4) {
                                    this.stopList.push(val)
                                }
                            }
                        })
                    }
                    let checkoutList = BackgroundData.getInstance().checkouts;
                    checkoutList.forEach(item => {
                        let showIndex = null
                        let starFlag = false
                        let stopFlag = false
                        this.startList.forEach((param, index) => {
                            if (item.windturbineId === param.windturbineId) {
                                showIndex = index
                                starFlag = true
                            }
                        })
                        this.stopList.forEach((param, index) => {
                            if (item.windturbineId === param.windturbineId) {
                                showIndex = index
                                stopFlag = true
                            }
                        })
                        starFlag ? this.startList.splice(showIndex, 1) : '';
                        stopFlag ? this.stopList.splice(showIndex, 1) : '';
                    })
                },
            },
            "$store.getters.current": {
                handler: function (json) {
                    this.current = json
                    if (json === 0) {
                        let dateList = []
                        this.titleList.forEach(item => {
                            item.operateStyle === 'Start' ? this.windturbinelist[item.windturbineId].controlType = 1 : this.windturbinelist[item.windturbineId].controlType = 2
                            dateList.push(this.windturbinelist[item.windturbineId])
                        })
                        let mss = {}
                        mss.type = 'send'
                        this.timer = setTimeout(() => {
                            this.menuClicked(mss, dateList, 'automatic')
                            this.showFlag = false
                            clearInterval(this.timer);
                        }, 3000);
                    }
                }
            }
        },
    }
</script>

<style scoped="scoped">
    .body {
        border: 1px solid #373737;
        width: 100%;
        margin-left: 15px;
        margin-top: 20px;
    }

    .body .scoll {
        height: 91%;
    }

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

    .logo {
        position: absolute;
        top: 12px;
        left: 12px;
    }

    .matrix {
        margin-left: 20px;
        margin-right: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(31, 31, 31, 1);
    }

    .problemTitle {
        font-size: 12px;
        color: #BFBFBF;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 12px;
    }

    .send {
        width: 86px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(84, 183, 90, 1);
        color: #ffffff;
        font-size: 14px;
        position: absolute;
        bottom: 20px;
        right: 10px;
    }

    .success {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 250px;
        height: 48px;
        position: absolute;
        bottom: 20px;
        right: 20%;
        border: 1px solid rgba(55, 55, 55, 1);
        border-radius: 10px;
        color: #ffffff;
        font-size: 14px;
    }
</style>