project-neic/src/components/matrixBlock.vue

<template>
    <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
        <div :class="item.active?'box-' + item.status:'unbox-' + item.status" v-for="(item, index) in dataList"
            :key="index" @click="onSelectHandler(item)" @dblclick="sendMsg(item)" style="margin-right: 15px;">
            <div :class="item.active?'left-' + item.status:'unleft-' + item.status">
                <div>{{ item.windturbineId.slice(0, 2) }}</div>
                <div>{{ item.windturbineId.slice(5) }}</div>
            </div>
            <div :class="item.active?'right-' + item.status:'unright-' + item.status">
                <div class="rightrow">{{ item.windSpeed.toFixed(2) }} m/s</div>
                <div class="rightrow">{{ item.power.toFixed(2) }} kw</div>
                <div class="rightrow">{{ (item.modelId.indexOf("105") >= 0)?(item.rollSpeed *
                    9.55).toFixed(2):item.rollSpeed.toFixed(2) }} rpm</div>
            </div>
            <div class="locks" v-if="item.lockValue > 0">
                <el-popover placement="bottom-start" :width="150" trigger="hover" class="popoverBack"
                    :show-arrow="false">
                    <template #reference>
                        <img class="lock" src="../assets/img/type/lock.png" alt="">
                    </template>
                    <input class="lock_input" type="text" placeholder="" :value="item.lockValue ===9 ? item.lockValues:options[item.lockValue]" disabled>
                </el-popover>
            </div>
            <div class="locks" v-if="item.reasonType">
                <img class="lock" src="../assets/img/type/electricityRestrictions.png" alt="">
            </div>
        </div>
    </div>
    <WindturbineDetailPages v-model="dialogVisible" :showSvg="showSvg" @close="handleClose"
        :windturbine="currentWindturbine"></WindturbineDetailPages>
</template>
<script>
    import WindturbineDetailPages from "./WindturbineDetailPages.vue";
    export default {
        components: {
            WindturbineDetailPages,
        },
        props: {
            dataList: {
                type: Array,
                default: () => {
                    return []
                },
            },
            area: String,
        },
        mounted() {

        },
        updated() {
            
        },
        methods: {
            onSelectHandler(values) {
                if (this.area === 'problem') {
                    this.$emit('problem-click', values);
                } else {
                    this.$emit('choose-click', values);
                }
                // values.active = !values.active;
            },
            sendMsg: function (itm) {
                // this.dialogVisible = true;
                this.$emit('on-click', itm);
                // this.currentWindturbine = itm;
            },
            handleClose() {
                this.dialogVisible = false
                this.showSvg = false
            },
        },
        data() {
            return {
                dialogVisible: false,
                showSvg: false,
                currentWindturbine: {},
                options: {
                    8: '检修',
                    7: '故障维修',
                    2: '场内受累检修',
                    3: '场内受累故障',
                    4: '场外受累电网',
                    5: '场外受累天气',
                },
            };
        },
    }
</script>
<style scoped>
    .lock {
        width: 10px;
        height: 10px;
        position: relative;
        right: 6px;
        top: -15px;
    }

    .lock-on {
        width: 0px;
        height: 0px;
        opacity: 0;
    }

    .locks:hover .lock-on {
        position: fixed;
        display: flex;
        align-items: center;
        width: 80px;
        height: 30px;
        border: 1px solid #999999;
        background-color: #999999;
        opacity: 1;
        color: #ffffff;
        z-index: 999;
    }

    .lock_input {
        width: 140px;
        background-color: #292929;
        height: 40px;
        color: #ffffff;
    }

    .box-0 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, .05);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
        box-shadow: 0px 0px 6px #ffffff;
    }

    .unbox-0 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, .2);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
    }

    .left-0 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .unleft-0 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .right-0 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .unright-0 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .box-1 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(197, 48, 200, 1);
        background-color: rgba(197, 48, 200, .05);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
        box-shadow: 0px 0px 6px #ef3af2;
    }

    .unbox-1 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(197, 48, 200, 1);
        background-color: rgba(197, 48, 200, .2);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
    }

    .left-1 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(197, 48, 200, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .unleft-1 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(197, 48, 200, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .right-1 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(197, 48, 200, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .unright-1 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(197, 48, 200, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .box-2 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(05, 187, 76, 1);
        background-color: rgba(05, 187, 76, .05);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
        box-shadow: 0px 0px 6px #09e45e;
    }

    .unbox-2 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(05, 187, 76, 1);
        background-color: rgba(05, 187, 76, .2);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
    }

    .left-2 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(05, 187, 76, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .unleft-2 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(05, 187, 76, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .right-2 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(05, 187, 76, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .unright-2 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(05, 187, 76, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .box-3 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(05, 187, 76, 1);
        background-color: rgba(05, 187, 76, .05);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
        box-shadow: 0px 0px 6px #09e45e;
    }

    .unbox-3 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(05, 187, 76, 1);
        background-color: rgba(05, 187, 76, .2);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
    }

    .left-3 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(05, 187, 76, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .unleft-3 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(05, 187, 76, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .right-3 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(05, 187, 76, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .unright-3 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(05, 187, 76, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .box-4 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(75, 85, 174, 1);
        background-color: rgba(75, 85, 174, .05);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
        box-shadow: 0px 0px 6px #6876f2;
    }

    .unbox-4 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(75, 85, 174, 1);
        background-color: rgba(75, 85, 174, .2);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
    }

    .left-4 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(75, 85, 174, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .unleft-4 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(75, 85, 174, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .right-4 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(75, 85, 174, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .unright-4 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(75, 85, 174, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .box-5 {
        width: 133px;
        height: 48px;
        color: #ffffff;
        border: 2px solid rgba(186, 50, 55, 1);
        background-color: rgba(186, 50, 55, .05);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
        box-shadow: 0px 0px 6px #ff1313;
    }

    .unbox-5 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(186, 50, 55, 1);
        background-color: rgba(186, 50, 55, .2);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
    }

    .left-5 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(186, 50, 55, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .unleft-5 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(186, 50, 55, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .right-5 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(186, 50, 55, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .unright-5 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(186, 50, 55, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .box-6 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(225, 125, 36, 1);
        background-color: rgba(225, 125, 36, .05);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
        box-shadow: 0px 0px 6px #f28627;
    }

    .unbox-6 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(225, 125, 36, 1);
        background-color: rgba(225, 125, 36, .2);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
    }

    .left-6 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(225, 125, 36, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .unleft-6 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(225, 125, 36, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .right-6 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(225, 125, 36, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .unright-6 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(225, 125, 36, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .box-7 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(96, 103, 105, 1);
        background-color: rgba(96, 103, 105, .05);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
        box-shadow: 0px 0px 6px #ffffff;
    }

    .unbox-7 {
        width: 135px;
        height: 50px;
        color: #ffffff;
        border: 1px solid rgba(96, 103, 105, 1);
        background-color: rgba(96, 103, 105, .2);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 5px;
        margin-top: 10px;
    }

    .left-7 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(96, 103, 105, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .unleft-7 {
        width: 40%;
        height: 100%;
        font-size: 12px;
        color: rgba(96, 103, 105, 1);
        font-weight: 600;
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .right-7 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(96, 103, 105, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .unright-7 {
        width: 60%;
        height: 100%;
        font-size: 12px;
        color: rgba(96, 103, 105, 1);
        line-height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>