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

/* 风机矩阵小卡片 */
<template>
    <div :class="cardStyle" @click="sigSelectClick">
        <el-row>
            <div :class="leftStyle">
                <el-row>
                    <div :class="title1Style">SG</div>
                </el-row>
                <el-row>
                    <div :class="title2Style">223</div>
                </el-row>
            </div>
            <div :class="rightStyle">
                <el-row>
                    <div :class="contentStyle">123.54 kw</div>
                </el-row>
                <el-row>
                    <div :class="contentStyle">8.23 m/s</div>
                </el-row>
                <el-row>
                    <div :class="contentStyle">1234.56 rpm</div>
                </el-row>
            </div>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "WindturbineMinCard",
        props: {
            status: Number,
        },
        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;
            }
        },
        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-1 {
        border: 2px solid #4952a6;
        background-color: rgba(73, 82, 166, 0.5);
    }

    .card-style-select-1 {
        border: 2px solid #4952a6;
        background-color: rgba(200, 10, 10, 0.3);
    }
    .card-style-left{
        position: relative;
        width: 25px;
        height: 41px;
        box-sizing: border-box;
        margin: 3px;
        display: inline-block;
    }
    .card-left-style-1 {
        background-color: rgba(73, 82, 166, 0.7);
    }

    .card-left-style-select-1 {
        position: relative;
        width: 25px;
        height: 41px;
        background-color: rgba(200, 40, 40, 0.5);
        box-sizing: border-box;
        margin: 3px;
        display: inline-block;
    }

    .card-right-style{
        position: relative;
        width: calc(116px - 4px - 6px - 25px);
        height: calc(50px - 2px);
        box-sizing: border-box;
        display: inline-block;
    }
    .card-right-style-1 {
        border-left: 2px dashed #4952a6;
    }
    .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>