project-neic/src/components/area/windturbine/WindturbineMinCard.vue

/* 风机矩阵小卡片 */
<template>
    <div :class="cardStyle" @click="sigSelectClick">
        <el-row>
            <div :class="leftStyle">
                <el-row>
                    <div :class="title1Style">{{stationName}}</div>
                </el-row>
                <el-row>
                    <div :class="title2Style">{{windturbineName}}</div>
                </el-row>
            </div>
            <div :class="rightStyle">
                <el-row>
                    <div :class="contentStyle" style="font-size: 12px;position: absolute;right: 5px;">{{power.toFixed(2)}} kw</div>
                </el-row>
                <el-row>
                    <div :class="contentStyle" style="font-size: 12px;position: absolute;right: 5px;top:15px;">{{windSpeed.toFixed(2)}} m/s</div>
                </el-row>
                <el-row>
                    <div :class="contentStyle" style="font-size: 12px;position: absolute;right: 5px;top:30px;">{{rollSpeed.toFixed(2)}} rpm</div>
                </el-row>
            </div>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "WindturbineMinCard",
        props: {
            status: Number,
            power:Number,
            windSpeed:Number,
            rollSpeed:Number,
            windturbineId:String,
        },
        data() {
            return {
                sigSelect: false
            }
        },
        computed: {
            cardStyle: function () {
                if (this.sigSelect) {
                    return "card-style card-style-select-" + this.status;
                } else {
                    return "card-style card-style-" + this.status;
                }
            },
            leftStyle: function () {
                if (this.sigSelect) {
                    return "card-style-left card-left-style-select-" + this.status;
                } else {
                    return "card-style-left card-left-style-" + this.status;
                }
            },
            rightStyle: function () {
                return "card-right-style card-right-style-" + this.status;
            },
            title1Style: function () {
                return "card-title1-style card-title1-style-" + this.status;
            },
            title2Style: function () {
                return "card-title2-style card-title2-style-" + this.status;
            },
            contentStyle: function () {
                return "card-content-style-" + this.status;
            },
            stationName:function () {
                return this.windturbineId.slice(0,2);
            },
            windturbineName:function () {
                var vs = this.windturbineId.split('_');
                return vs[1];
            }
        },
        methods: {
            sigSelectClick() {
                let sigSelect = this.sigSelect
                if (sigSelect) {
                    this.sigSelect = false
                } else {
                    this.sigSelect = true
                }
                // todo retun id,父组件中接收id
            }
        }
    };
</script>
<style scoped>
    .card-style{
        position: relative;
        width: 116px;
        height: 50px;
        box-sizing: border-box;
        display: inline-block;
    }
    .card-style-0 {
        border: 2px solid rgb(255, 255, 255);
        background-color: rgba(255, 255, 255, 0.15);
        color: rgb(200, 200, 200);
    }
    .card-style-1 {
        border: 2px solid rgb(197, 48, 72);
        background-color: rgba(197, 48, 72, 0.15);
    }
    .card-style-2 {
        border: 2px solid rgb(05, 187, 76);
        background-color: rgba(05, 187, 76, 0.15);
    }
    .card-style-3 {
        border: 2px solid rgb(05, 187, 76);
        background-color: rgba(05, 187, 76, 0.15);
    }
    .card-style-4 {
        border: 2px solid rgb(75, 85, 174);
        background-color: rgba(75, 85, 174, 0.15);
    }
    .card-style-5 {
        border: 2px solid rgba(186, 50, 55);
        background-color: rgba(186, 50, 55, 0.15);
    }
    .card-style-6 {
        border: 2px solid rgb(225, 125, 36);
        background-color: rgba(225, 125, 36, 0.15);
    }
    .card-style-7 {
        border: 2px solid rgb(96, 103, 105);
        background-color: rgba(96, 103, 105, 0.15);
    }

    .card-style-select-0 {
        border: 2px solid rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.1);
        color: rgba(120, 120, 120,0.5);
    }
    .card-style-select-1 {
        border: 2px solid rgba(197, 48, 72, 0.5);
        background-color: rgba(197, 48, 72, 0.1);
    }
    .card-style-select-2 {
        border: 2px solid rgba(05, 187, 76, 0.5);
        background-color: rgba(05, 187, 76, 0.1);
    }
    .card-style-select-3 {
        border: 2px solid rgba(05, 187, 76, 0.5);
        background-color: rgba(05, 187, 76, 0.1);
    }
    .card-style-select-4 {
        border: 2px solid rgba(75, 85, 174, 0.5);
        background-color: rgba(75, 85, 174, 0.1);
    }
    .card-style-select-5 {
        border: 2px solid rgba(186, 50, 55, 0.5);
        background-color: rgba(186, 50, 55, 0.1);
    }
    .card-style-select-6 {
        border: 2px solid rgba(225, 125, 36, 0.5);
        background-color: rgba(225, 125, 36, 0.1);
    }
    .card-style-select-7 {
        border: 2px solid rgba(159, 163, 165, 0.5);
        background-color: rgba(159, 163, 165, 0.1);
    }
    .card-style-left{
        position: relative;
        width: 25px;
        height: 41px;
        box-sizing: border-box;
        margin: 3px;
        display: inline-block;
    }
    .card-left-style-0 {
        background-color: rgb(255, 255, 255);
        color: rgb(80, 80, 80);
    }
    .card-left-style-1 {
        background-color: rgb(121, 73, 81);
    }
    .card-left-style-2 {
        background-color: rgb(05, 187, 76);
    }
    .card-left-style-3 {
        background-color: rgb(05, 187, 76);
    }
    .card-left-style-4 {
        background-color: rgb(75, 85, 174);
    }
    .card-left-style-5 {
        background-color: rgb(186, 50, 55);
    }
    .card-left-style-6 {
        background-color: rgb(225, 125, 36);
    }
    .card-left-style-7 {
        background-color: rgb(159, 163, 165);
    }

    .card-left-style-select-0 {
        background-color: rgba(255, 255, 255,0.7);
        color: rgba(200, 200, 200,0.7);
    }
    .card-left-style-select-1 {
        background-color: rgba(121, 73, 81,0.7);
    }
    .card-left-style-select-2 {
        background-color: rgba(05, 187, 76,0.7);
    }
    .card-left-style-select-3 {
        background-color: rgba(05, 187, 76,0.7);
    }
    .card-left-style-select-4 {
        background-color: rgba(75, 85, 174,0.7);
    }
    .card-left-style-select-5 {
        background-color: rgba(186, 50, 55,0.7);
    }
    .card-left-style-select-6 {
        background-color: rgba(225, 125, 36,0.7);
    }
    .card-left-style-select-7 {
        background-color: rgba(159, 163, 165,0.7);
    }

    .card-left-style-select {
        position: relative;
        width: 25px;
        height: 41px;
        box-sizing: border-box;
        margin: 3px;
        display: inline-block;
    }

    .card-right-style{
        width: calc(116px - 4px - 6px - 25px);
        height: calc(50px - 2px);
        box-sizing: border-box;
        display: inline-block;
        position: absolute;
        right: 0px;
    }

    .card-right-style-0 {
        border-left: 2px dashed rgb(255, 255, 255);
        color: rgb(120, 120, 120);
    }
    .card-right-style-1 {
        border-left: 2px dashed rgb(121, 73, 81);
    }
    .card-right-style-2 {
        border-left: 2px dashed rgb(05, 187, 76);
    }
    .card-right-style-3 {
        border-left: 2px dashed rgb(05, 187, 76);
    }
    .card-right-style-4 {
        border-left: 2px dashed rgb(75, 85, 174);
    }
    .card-right-style-5 {
        border-left: 2px dashed rgb(186, 50, 55);
    }
    .card-right-style-6 {
        border-left: 2px dashed rgb(225, 125, 36);
    }
    .card-right-style-7 {
        border-left: 2px dashed rgb(159, 163, 165);
    }
    
    .card-right-style-select-0 {
        border-left: 2px dashed rgba(255, 255, 255,0.7);
        color: rgba(120, 120, 120,0.7);
    }
    .card-right-style-select-1 {
        border-left: 2px dashed rgba(121, 73, 81,0.7);
    }
    .card-right-style-select-2 {
        border-left: 2px dashed rgba(05, 187, 76,0.7);
    }
    .card-right-style-select-3 {
        border-left: 2px dashed rgba(05, 187, 76,0.7);
    }
    .card-right-style-select-4 {
        border-left: 2px dashed rgba(75, 85, 174,0.7);
    }
    .card-right-style-select-5 {
        border-left: 2px dashed rgba(186, 50, 55,0.7);
    }
    .card-right-style-select-6 {
        border-left: 2px dashed rgba(225, 125, 36,0.7);
    }
    .card-right-style-select-7 {
        border-left: 2px dashed rgba(159, 163, 165,0.7);
    }

    .card-title1-style{
        margin-top: 2px;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }
    .card-title1-style-1 {
        font-size: 14px;
    }
    .card-title2-style{
        margin-top: 2px;
        font-size: 12px;
        width: 100%;
        text-align: center;
    }
    .card-title2-style-1 {
        font-size: 12px;
    }
    .card-content-style{
        width: 100%;
        text-align: right;
        font-size: 12px;
    }
    .card-content-style-1 {
        font-size: 12px;
    }
</style>