neic-hefeng/src/components/check/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">
        <img class="logo" src="../../assets/img/logo.png" alt="">
        <div class="title">{{ title }}</div>
        <div class="record" @click="showRecord">校验记录</div>
        <div style="margin-top: 50px; margin-left: 20px; height: 80%;">
            <el-scrollbar>
                <div class="scoll" style="margin-left: 5px;">
                    <MatrixBlock  @on-click="handleClick" :dataList="showList"></MatrixBlock>
                </div>
            </el-scrollbar>
        </div>
        <OperationRecords ref="records" v-model="display" @closed="closed()"></OperationRecords>
        <WindturbineDetailPages v-model="dialogVisible" @close="handleClose" :windturbine="currentWindturbine">
    </WindturbineDetailPages>
    </div>
</template>

<script>
    import BackgroundData from 'utils/BackgroundData'
    import MatrixBlock from "../matrixBlock.vue";
    import OperationRecords from "./operationRecords.vue";
    import WindturbineDetailPages from "../WindturbineDetailPages.vue";
    export default {
        props: {
            title: {
                type: String,
                default: '校验区',
                required: true
            },
            height: {
                type: Number,
                default: 200,
            },
        },
        components: {
            MatrixBlock,
            OperationRecords,
            WindturbineDetailPages
        },
        data() {
            return {
                showList: [],
                arr: [],
                list: [],
                display:false,
                dialogVisible:false,
                currentWindturbine: {},
            }
        },
        methods: {
            dataDeal() {
                let flag = false
                let showList = []
                let arr = []
                let checks = BackgroundData.getInstance().checkouts;
                checks.forEach(item => {
                    if (item.status === this.list[item.windturbineId].status) {
                        showList.push(this.list[item.windturbineId])
                    } else {
                        BackgroundData.getInstance().removeCheckouts(item);
                    }
                    if ((new Date()).getTime() - item.checkTime > 120000) {
                        BackgroundData.getInstance().removeCheckouts(item);
                        arr.push(item.windturbineId)
                        flag = true
                    }
                })
                this.showList = showList
                if (flag) {
                    let mss = arr.join(',') + '风机超时未响应，已移除'
                    this.$notify({
                        title: "控制",
                        message: mss,
                        type: "warning",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                    flag = false
                }
            },
            showRecord(){
                this.display = true
                this.$refs.records.dataDeal() 
            },
            closed(){
                this.display = false
            },
            handleClick(itm) {
                this.dialogVisible = true;
                this.currentWindturbine = itm;
            },
            handleClose() {
                this.dialogVisible = false
            },
        },
        watch: {
            "$store.getters.windturbinelist": {
                deep: true,
                handler: function (json) {
                    this.list = json
                    this.arr = BackgroundData.getInstance().checkouts;
                    this.dataDeal()
                },
            },
        },
    }
</script>

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

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

    .record {
        position: absolute;
        color: #ffffff;
        font-size: 14px;
        right: 0;
        top: 23px;
        width: 80px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(37, 116, 219, 1);
    }

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