Merge branch 'lx' of http://192.168.110.2:3000/taoge_xiaodi/maintenance_system into szq

src/assets/fonts/fonts.scss

@@ -11,14 +11,20 @@
     font-weight: normal;
     font-style: normal;
 }
-
+@font-face {
+    font-family: 'ue_title'; //UE标题体
+    src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
 // 思源字体
-// @font-face {
-//     font-family: 'SourceHanSansCN-Bold';
-//     src: url('./ReflectTi/SourceHanSansCN-Bold_0.otf'); //暂时没用
-//     font-weight: normal;
-//     font-style: normal;
-// }
+@font-face {
+    font-family: 'SourceHanSansCN-Bold';
+    src: url('./ReflectTi/SourceHanSansCN-Bold_0.otf'); //思源加粗
+    font-weight: normal;
+    font-style: normal;
+}
 // @font-face {
 //     font-family: 'SourceHanSansCN-ExtraLight';
 //     src: url('./ReflectTi/SourceHanSansCN-ExtraLight.otf');//暂时没用
@@ -154,7 +160,13 @@
     font-weight: normal;
     font-style: normal;
 }
-
+@font-face {
+    font-family: 'LCDFont'; //光伏电量字体
+    src: url('./LCD2 Bold.ttf');
+    font-weight: normal;
+    font-weight: normal;
+    font-style: normal;
+}
 @font-face {
     font-family: 'D-Din';
     src: url('./D-Din//D-DIN.ttf');

src/views/ueScreen/components/leftPage.vue

@@ -0,0 +1,273 @@
+<template>
+    <div class="leftpageContainer">
+        <!-- 头部图表 -->
+         <div class="topInfoContainer">
+           <div class="left">
+            <span class="top">
+                <span class="num">365</span>
+                <span class="unit">day</span>
+            </span>
+            <span class="desc">
+                运行天数
+            </span>
+           </div>
+           <div class="right">
+            
+           </div>
+         </div>
+        <!-- 中部图表 -->
+        <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 {
+    // 头部图表
+    .topInfoContainer {
+        width: vw(467);
+        height: vh(128);
+        .left {
+            width: vw(180);
+            height: vh(140);
+            background-image: url('@/assets/ueimg/bg1.png');
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            .top {
+                position: absolute;
+                top: vh(14);
+                .num {
+                    font-size: vh(24);
+                }
+                .unit {
+                    font-size: vh(12);
+                    color: rgba(255, 255, 255, 0.7);
+                }
+            }
+            .desc {
+                font-size: vh(12);
+            }
+        }
+    }
+    //  中部信息
+    .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/bg.png');
+            background-size: 100% 100%;
+            margin-bottom: vh(12);
+            .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(467);
+                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>

src/views/ueScreen/components/smalltitle.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="leftpageContainer">
+        <div class="bottomInfo">
+            <div class="title">
+                <span>{{ title }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+
+const props = defineProps({
+    title: {
+        type: Number||String,
+        default: ''
+    }
+})
+</script>
+<style scoped lang="scss">
+@import '@/views/ueScreen/gis.scss';
+
+.title {
+    background-image: url('@/assets/ueimg/title.png');
+    background-size: cover;
+    border: vw(1) solid rgba(255, 255, 255, 1);
+    width: vw(467);
+    height: vh(40);
+    display: flex;
+    align-items: center;
+    span {
+        margin-left: vw(41.42);
+        font-size: vh(20);
+        font-weight: 400;
+        letter-spacing: vw(1);
+        line-height: vh(19.08);
+        color: rgba(255, 255, 255, 1);
+        vertical-align: middle;
+        font-family: 'ue_title';
+    }
+}
+</style>

src/views/ueScreen/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="ueScreen">
     <Header />
+    <LeftPage />
   </div>
   <div class="right">
     <Right />
@@ -9,7 +10,7 @@
 
 <script setup lang="ts">
 import Header from './components/header.vue';
-import Right from './components/right.vue';
+import LeftPage from './components/leftPage.vue';
 </script>
 
 <style scoped lang="scss">