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

/* 自定义tabs */
<template>
    <!-- <transition>
        <div :class='areaClass' @mouseover="hover = false" @mouseleave="hover = false" onselectstart="return false">
            <div :class="headerClass">
                <div :class='circleClass'></div>
                <span class="gy-card-title">{{ title }}</span>
                <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
                <img class="gy-card-decoration02" src="../../assets/img/controlcenter/decoration02.png">
            </div>
            <div :class='contentClass'>
                <el-scrollbar style="height: 100%">
                    <slot></slot>
                </el-scrollbar>
            </div>
        </div>
    </transition> -->
    <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: 94%;" @contextmenu="contextmenu">
            <el-scrollbar>
                <div class="scoll">
                    <div class="matrix" v-if="faultList.length>0">
                        <div class="problemTitle">故障</div>
                        <MatrixBlock area="problem" @problem-click="handleClick" @on-click="handleDetails"
                            :dataList="faultList"></MatrixBlock>
                    </div>
                    <div class="matrix" v-if="maintainList.length>0">
                        <div class="problemTitle">维护</div>
                        <MatrixBlock area="problem" @problem-click="handleClick" @on-click="handleDetails"
                            :dataList="maintainList"></MatrixBlock>
                    </div>
                    <div class="matrix" v-if="offlineList.length>0">
                        <div class="problemTitle">离线</div>
                        <MatrixBlock area="problem" @problem-click="handleClick" @on-click="handleDetails"
                            :dataList="offlineList"></MatrixBlock>
                    </div>
                    <div class="matrix" v-if="listedList.length>0">
                        <div class="problemTitle">挂牌</div>
                        <MatrixBlock area="problem" @problem-click="handleClick" @on-click="handleDetails"
                            :dataList="listedList"></MatrixBlock>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
    <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose"
        :windturbine="currentWindturbine"></WindturbineDetailPages>
</template>

<script>
    import BackgroundData from 'utils/BackgroundData'
    import WindturbineDetailPages from "../WindturbineDetailPages.vue";
    import MatrixBlock from "../matrixBlock.vue";

    export default {
        name: 'gy-card',
        components: {
            WindturbineDetailPages,
            MatrixBlock
        },
        emits: ["parentRun"],
        props: {
            title: {
                type: String,
                default: '校验区',
                required: true
            },
            height: {
                type: Number,
                default: 200,
            },
            areaStyle: {
                type: String,
                default: 'check',
                required: true
            },
            circleStyle: {
                type: String,
                default: 'green',
                required: true
            },
            contentStyle: {
                type: String,
                default: '44',
                required: true
            },
            showFlag: {
                type: Boolean,
                default: false,
            }
        },
        data() {
            return {
                aaa: '3',
                dialogVisible: false,
                currentWindturbine: {},
                values: [],
                hover: false,
                big: false,
                current: 0,
                faultList: [],
                maintainList: [],
                offlineList: [],
                listedList: [],
                chooseList: [],
                titleList: [
                    {
                        id: 0,
                        title: '麻黄山',
                    },
                    {
                        id: 1,
                        title: '牛首山',
                    },
                    {
                        id: 2,
                        title: '青山',
                    },
                    {
                        id: 3,
                        title: '石板泉',
                    },
                    {
                        id: 4,
                        title: '香山',
                    },
                ],
                currentWindturbine: {},
                showSvg: false,
                controlErorCodes: [
                    "控制成功",
                    "控制命令发送失败",
                    "无效的控制地址",
                    "被控设备异常",
                    "网络连接错误,检查场站通信",
                    "控制结果读取超时",
                    "未知错误",
                    "控制命令错误",
                    "收到无法识别数据",
                    "未读取到数据包",
                    "未知错误",
                    "风机操作过频繁",
                    "风机被挂牌",
                    "风机操作与风机状态不符",
                    "需要登录",
                ],
            }
        },
        computed: {
            style() {
                return `width: 100%; height: ${this.height}vh;`
            },
            areaClass() {
                if (this.big) {
                    return `gy-card-area-big`;
                } else {
                    return `gy-card-area-${this.areaStyle}`;
                }
            },
            circleClass() {
                return `gy-card-circle gy-card-circle-${this.circleStyle}`;
            },
            contentClass() {
                if (this.big) {
                    return `gy-card-content-big`;
                } else {
                    return `gy-card-content-${this.contentStyle}`;
                }
            },
            headerClass() {
                if (this.hover) {
                    return `gy-card-header-hover`;
                } else {
                    return `gy-card-header`;
                }
            }
        },
        created() {
            this.deal()
        },
        methods: {
            deal() {
                let json = this.$store.state.windturbinelist
                this.faultList = []
                this.maintainList = []
                this.offlineList = []
                this.listedList = []
                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
                        }
                    })
                    switch (val.status) {
                        case 5:
                            this.faultList.push(val)
                            break;
                        case 6:
                            this.maintainList.push(val)
                            break;
                        case 7:
                            this.offlineList.push(val)
                            break;
                    }
                    if (val.lockValue > 0) {
                        this.listedList.push(val)
                    }
                }
            },
            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)
                }
                let flag = false
                this.faultList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active, flag = true } })
                flag ? '' : this.maintainList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active, flag = true } })
                flag ? '' : this.offlineList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active, flag = true } })
                flag ? '' : this.listedList.forEach(item => { if (item.windturbineId === values.windturbineId) { item.active = !item.active } })
            },
            /* 右键菜单 */
            contextmenu() {
                const { remote } = require("electron");
                var that = this;
                const 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" });
                        },
                    },
                ];
                const menu = remote.Menu.buildFromTemplate(menuTemplate);

                menu.popup(remote.getCurrentWindow());
            },
            menuClicked(msg) {
                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") {
                    // 发送
                    bd.checkout(this.chooseList);
                    bd.windturbineControl(
                        this.chooseList,
                        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,
                });
            },
            filter(value, windturbineId) {
                var array = [];
                var flag = false;
                for (var i = 0; i < value.length; i++) {
                    if (value[i].windturbineId == windturbineId) {
                        flag = true;
                        array.push(flag); // 风机是否已经存在
                        array.push(i); // 风机在values数组的位置
                        array.push(value[i].active); // 当前风机是否被选中
                        break;
                    }
                }
                return array;
            },
            changeTitle(id) {
                this.current = id
                this.$refs.malfunction.dateClick(id)
            },
            addCard(val) {
                var active = false;
                var array = this.filter(this.values, val.windturbineId);
                if (!array[0]) {
                    // 维护
                    val.active = active;
                    if (val.modelId.indexOf("105") >= 0) {
                        val.rollSpeed *= 9.55;
                    }
                    this.values.push(val);
                } else {
                    val.active = array[2];
                    this.values.splice(array[1], 1, val);
                }
                console.log(this.values)
            },
            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.faultList = []
                    this.maintainList = []
                    this.offlineList = []
                    this.listedList = []
                    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
                            }
                        })
                        switch (val.status) {
                            case 5:
                                this.faultList.push(val)
                                break;
                            case 6:
                                this.maintainList.push(val)
                                break;
                            case 7:
                                this.offlineList.push(val)
                                break;
                        }
                        if (val.lockValue > 0) {
                            this.listedList.push(val)
                        }
                    }
                    console.log(this.faultList);
                },
            },
        },
    }
</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;
    }

    
</style>