neic-hefeng/src/components/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: 91%;">
            <el-scrollbar>
                <div class="scoll">
                    <div class="matrix" v-if="faultList.length>0">
                        <div class="problemTitle">故障</div>
                        <MatrixBlock @on-click="handleClick" :dataList="faultList"></MatrixBlock>
                    </div>
                    <div class="matrix" v-if="maintainList.length>0">
                        <div class="problemTitle">维护</div>
                        <MatrixBlock @on-click="handleClick" :dataList="maintainList"></MatrixBlock>
                    </div>
                    <div class="matrix" v-if="offlineList.length>0">
                        <div class="problemTitle">离线</div>
                        <MatrixBlock @on-click="handleClick" :dataList="offlineList"></MatrixBlock>
                    </div>
                    <div class="matrix" v-if="listedList.length>0">
                        <div class="problemTitle">挂牌</div>
                        <MatrixBlock @on-click="handleClick" :dataList="listedList"></MatrixBlock>
                    </div>
                    <div class="matrix" v-if="listedList.length>0">
                        <div class="problemTitle">挂牌</div>
                        <MatrixBlock @on-click="handleClick" :dataList="listedList"></MatrixBlock>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
    import BackgroundData from 'utils/BackgroundData'
    // import ProblemMatrixCard from "./problem/ProblemMatrixCard.vue";
    import MatrixBlock from "./matrixBlock.vue";
    /**
     * todo 拖动
     * todo 控制区
     *
     * 动态值:
     * 1. gy-card-area-label中的 height,margin-top
     * 2. gy-card-circle-yellow中的颜色
     * 3. gy-card-content-25 中的高度
     *
     * 使用事例:
     * <gy-card title="校验区" area-style="check" circle-style="green" content-style="44">
     * <div>动态内容</div>
     * </gy-card>
     */
    export default {
        name: 'gy-card',
        components: {
            // ProblemMatrixCard,
            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 {
                dialogVisible: false,
                currentWindturbine: {},
                values: [],
                hover: false,
                big: false,
                current: 0,
                faultList: [],
                maintainList: [],
                offlineList: [],
                listedList: [],
                chooseList: [],
                totleList: [],
                titleList: [
                    {
                        id: 0,
                        title: '麻黄山',
                    },
                    {
                        id: 1,
                        title: '牛首山',
                    },
                    {
                        id: 2,
                        title: '青山',
                    },
                    {
                        id: 3,
                        title: '石板泉',
                    },
                    {
                        id: 4,
                        title: '香山',
                    },
                ],
            }
        },
        computed: {
            style() {
                return `width: 100%; height: 82%;`
            },
            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`;
                }
            }
        },
        methods: {
            handleClick(values) {
                console.log(this.chooseList, 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)
                }
            },
            /* 右键菜单 */
            contextmenu() {
                const { remote } = require("electron");
                var that = this;
                const 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) {
                var bd = BackgroundData.getInstance();
                if (!bd.LoginUser) {
                    this.$notify({
                        title: "请登录",
                        message: "控制风机需要先登录！",
                        type: "warning",
                        position: "bottom-right",
                        offset: 60,
                    });
                    return;
                }
                if (msg.type == "lock") {
                    // 挂牌
                    var los = this.getSelectedItems();
                    for (var id in los) {
                        los[id].lockType = msg.value;
                    }
                    bd.windturbineControl(
                        los,
                        true,
                        this.controlSuccess,
                        this.controlError
                    );
                } else if (msg.type == "send") {
                    // 发送
                    var vs = this.getSelectedItems(true);
                    for (var item in los) {
                        los[item].controlType = Number(msg.controlType)
                    }
                    bd.windturbineControl(
                        vs,
                        false,
                        this.controlSuccess,
                        this.controlError
                    );
                } else if (msg.type == "marking") {
                    // 标注
                    var vvs = this.getSelectedItems();
                    bd.marking(vvs);
                }
                this.clearSelected();
            },
            /* 获取选中的项目，isControl：是否是控制 */
            getSelectedItems() {
                // isControl
                var ls = new Array();
                this.$refs.malfunction.outputSelectedItems(ls);
                return ls;
            },
            /* 清除所有选择 */
            clearSelected() {
                this.$refs.malfunction.clearSelected();
            },
            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)
            },
            clear(vs) {
                var ll = new Array();
                this.values.forEach((item) => {
                    var it = vs[item.windturbineId];
                    if (typeof it === "undefined") {
                        ll.push(item);
                    }
                });
                for (var v1 in ll) {
                    var ind = this.values.indexOf(ll[v1]);
                    if (ind < 0) continue;
                    this.values.splice(ind, 1);
                }
            },
            showWindows(item) {
                this.dialogVisible = true;
                this.currentWindturbine = item;
            }
        },
        watch: {
            "$store.getters.windturbinelist": {
                deep: true,
                handler: function (json) {
                    var vs = {};
                    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
                            }
                        })
                        this.totleList.push(val)
                        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);
                    //   this.clear(vs);
                },
            },
        },
    }
</script>

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

    .body .scoll {
        height: 91%;
    }

    .title {
        color: #ffffff;
        font-size: 14px;
        margin-left: 32px;
        /* margin-top: 12px; */
        margin-bottom: 10px;
        width: 570px;
        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: 2px;
        left: 18px;
    }

    .matrix {
        margin-left: 32px;
        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;
    }

    .gy-card-header {
        position: relative;
        height: 40px;
        background-color: #292929;
        color: white;
        box-sizing: border-box;
    }

    .gy-card-content-89 {
        position: relative;
        height: calc(89vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .gy-card-content-44 {
        position: relative;
        height: calc(44vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .gy-card-content-37 {
        position: relative;
        height: calc(37vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .gy-card-content-25 {
        position: relative;
        height: calc(25vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .gy-card-circle {
        position: relative;
        top: 7px;
        display: inline-block;
        width: 7px;
        height: 7px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

    .gy-card-circle-green {
        background-color: #008000;
    }

    .gy-card-circle-yellow {
        background-color: #ffff00;
    }

    .gy-card-title {
        position: relative;
        top: 10px;
        left: 10px;
    }

    .gy-card-decoration01 {
        position: absolute;
        right: 80px;
    }

    .gy-card-decoration02 {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .gy-card-area-problem {
        position: relative;
        height: 89vh;
        background-color: #292929;
        border-radius: 7px;
        margin: 0px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-alarm {
        position: relative;
        height: 25vh;
        margin-top: 10px;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-check {
        position: relative;
        height: 44vh;
        background-color: #292929;
        border-radius: 7px;
        margin-top: 10px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-control {
        position: relative;
        width: 100%;
        height: 44vh;
        background-color: #292929;
        border-radius: 7px;
        margin: 0px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-label {
        position: relative;
        height: 25vh;
        margin-top: 10px;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-recommended {
        position: relative;
        height: 37vh;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-header-hover {
        position: relative;
        height: 40px;
        background-color: #292929;
        color: white;
        box-sizing: border-box;
    }

    .gy-card-area-problem:hover {
        position: relative;
        height: 89vh;
        background-color: #292929;
        border-radius: 7px;
        margin: 0px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-alarm:hover {
        position: relative;
        height: 25vh;
        margin-top: 10px;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-label:hover {
        position: relative;
        height: 25vh;
        margin-top: 10px;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .gy-card-area-recommended:hover {
        position: relative;
        height: 37vh;
        background-color: #292929;
        border-radius: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }


    .gy-card-area-big {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background-color: #292929;
        border-radius: 7px;
        margin: 0px;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
        z-index: 900;
    }

    .gy-card-content-big {
        position: relative;
        height: calc(100vh - 50px);
        background-color: #000000;
        color: white;
        box-sizing: border-box;
        border-radius: 7px;
    }

    .el-scrollbar__wrap {
        overflow: scroll;
        width: 110%;
        height: 120%;
    }

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .scroll {
        color: #ffffff;
        min-height: 300px;
        height: 400px;
    }


    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        color: #ffffff;
        height: 25px;
        border: 1px solid blue;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .content_on {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        color: #ffffff;
        height: 25px;
        border: 1px solid blue;
        margin-right: 10px;
        margin-bottom: 10px;
        background-color: chartreuse;
    }
</style>