maintenance_system/src/views/ueScreen/components/leftPage.vue

<template>
    <div class="leftpageContainer">
        <!-- 头部图表 -->
        <!-- 中部图表 -->
        <div class="middleInfo">
            <SmallTitle :title="'光伏电站总览'" />
            <div class="middleInfoContainer">
                <div class="totalView">
                    <div class="totalNum">
                        <span class="num">264966.00</span>
                        <span class="unit">kWh</span>
                    </div>
                    <div class="totalDesc">
                        累计总发电量
                    </div>
                </div>
                <div class="electricity">
                    <div class="dayNumbox">
                        <div class="left">
                            <img src="@/assets/ueimg/icon-2.png" alt="">
                        </div>
                        <div class="right">
                            <div class="title">日发电量</div>
                            <div class="num">2649 <span class="unit">kWh</span></div>
                        </div>
                    </div>
                    <div class="monthNumBox">
                        <div class="left">
                            <img src="@/assets/ueimg/icon-2.png" alt="">
                        </div>
                        <div class="right">
                            <div class="title">月发电量</div>
                            <div class="num">2649 <span class="unit">kWh</span></div>
                        </div>
                    </div>
                    <div class="yearNumBox">
                        <div class="left">
                            <img src="@/assets/ueimg/icon-2.png" alt="">
                        </div>
                        <div class="right">
                            <div class="title">年发电量</div>
                            <div class="num">2649 <span class="unit">kWh</span></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 底部信息 -->
        <div class="bottomInfo">
            <SmallTitle :title="'主规模设备'" />
            <div class="infoContainer">
                <div v-for="item in infoList" :key="item.name" class="infoItem">
                    <div class="infoIcon">
                        <img :src="item.icon" alt="">
                    </div>
                    <div class="infoName">
                        {{ item.name }}
                    </div>
                    <div class="infoValue">
                        {{ item.value }}
                    </div>
                    <div class="infoUnit">
                        {{ item.unit }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import SmallTitle from './smalltitle.vue';
import { ref } from 'vue';
const infoList = ref([
    {
        name: '变压器220KV',
        value: 564,
        unit: '（台）',
        icon: 'src/assets/ueimg/1.png',
    },
    {
        name: '开关柜220KV',
        value: 100,
        unit: '（台）',
        icon: 'src/assets/ueimg/2.png',
    },
    {
        name: '接地变110v',
        value: 564,
        unit: '（台）',
        icon: 'src/assets/ueimg/3.png',
    },
    {
        name: '电缆110v',
        value: 768,
        unit: '（回）',
        icon: 'src/assets/ueimg/4.png',
    },
    {
        name: 'GIS',
        value: 100,
        unit: '（个）',
        icon: 'src/assets/ueimg/5.png',
    },
])

</script>
<style scoped lang="scss">
@import '@/views/ueScreen/gis.scss';

.leftpageContainer {

    //  中部信息
    .middleInfo {

        .middleInfoContainer {
            // margin-top: vh(12);
            width: vw(467);
            height: vh(313);
            // padding: vw(8);
            box-sizing: border-box;
            position: relative;
            background-image: url('@/assets/ueimg/circle1.png');
            background-size: 100% 100%;
            .totalView {
                display: flex;
                flex-direction: column;
                align-items: center;
                .totalNum {
                    margin-top: vh(31);
                    .num {
                        font-size: vh(36);
                        font-family: 'LCDFont';
                    }
                    .unit {
                        margin-left: vw(11);
                    }
                }

                .totalDesc {
                    font-size: vh(12);
                    margin-top: vh(8);
                }
            }

            .electricity {
                width: vw(462);
                display: flex;
                justify-content: space-around;
                position: absolute;
                bottom: vh(27.51);
                .dayNumbox,
                .monthNumBox,
                .yearNumBox {
                    display: flex;
                    align-items: center;
                    height: vh(60);

                    .left {
                        img {
                            width: vw(48);
                            height: vh(48);
                        }
                    }

                    .right {
                        .title {
                            font-size: vh(16);
                        }
                        .num {
                            margin-top: vh(10.28);
                            font-family: 'D-Din';
                            font-size: vh(24);
                            text-shadow: 0px 0px 6px rgba(0, 255, 238, 1);

                            .unit {
                                font-size: vh(16);
                            }
                        }
                    }
                }
            }
        }
    }

    // 底部信息
    .bottomInfo {
        .infoContainer {
            .infoItem {
                display: flex;
                align-items: center;
                width: vw(465.8);
                height: vh(74);
                background-image: url('@/assets/ueimg/item.png');
                background-size: cover;
                padding: vw(8);
                margin-top: vh(12);
                box-sizing: border-box;

                .infoIcon {
                    img {
                        width: vw(42);
                        height: vh(42);
                    }
                }

                .infoName {
                    margin-left: vw(17);
                    font-size: vh(20);
                    width: vw(200);
                    height: vh(28);
                }

                .infoValue {
                    margin-left: vw(82);
                    font-size: vh(20);
                }

                .infoUnit {
                    margin-left: vw(34);
                    font-size: vh(20);
                    color: rgba(125, 255, 253, 1);
                }
            }
        }
    }
}
</style>