diff --git a/src/assets/fonts/fonts.scss b/src/assets/fonts/fonts.scss
index a4a78ee..39e00ff 100644
--- a/src/assets/fonts/fonts.scss
+++ b/src/assets/fonts/fonts.scss
@@ -50,16 +50,16 @@
 //     font-style: normal;
 // }
 
-// @font-face {
-//     font-family: 'SourceHanSansCN-Normal';
-//     src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//暂时没用
-//     font-weight: normal;
-//     font-style: normal;
-// }
+@font-face {
+    font-family: 'SourceHanSansCN-Normal';
+    src: url('./ReflectTi/SourceHanSansCN-Normal.otf');//思源正常
+    font-weight: normal;
+    font-style: normal;
+}
 
 @font-face {
     font-family: 'SourceHanSansCN-Regular';
-    src: url('./ReflectTi/SourceHanSansCN-Regular.otf');
+    src: url('./ReflectTi/SourceHanSansCN-Regular.otf');//思源常规
     font-weight: normal;
     font-style: normal;
 }
diff --git a/src/assets/ueimg/Rectangle 766.png b/src/assets/ueimg/Rectangle 766.png
new file mode 100644
index 0000000..c26d46d
Binary files /dev/null and b/src/assets/ueimg/Rectangle 766.png differ
diff --git a/src/assets/ueimg/bj.png b/src/assets/ueimg/bj.png
index ae3587e..15ae153 100644
Binary files a/src/assets/ueimg/bj.png and b/src/assets/ueimg/bj.png differ
diff --git a/src/assets/ueimg/xuyi.png b/src/assets/ueimg/xuyi.png
deleted file mode 100644
index 19362b8..0000000
Binary files a/src/assets/ueimg/xuyi.png and /dev/null differ
diff --git a/src/views/ueScreen/components/leftPage.vue b/src/views/ueScreen/components/leftPage.vue
index c714379..1dada13 100644
--- a/src/views/ueScreen/components/leftPage.vue
+++ b/src/views/ueScreen/components/leftPage.vue
@@ -1,20 +1,57 @@
 <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="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 class="operationStats">
+                    <div class="statItem">
+                        <div class="statLabel">
+                            <span class="title">计划发电/实际发电</span>
+                            <div class="progressText"><span class="actual">{{ operationData.efficiencyActual }}</span>/{{
+                                operationData.efficiencyPlan }} <span class="unit"> kWh</span></div>
+                        </div>
+                        <div class="progressBar">
+                            <div class="progressTrack">
+                                <div class="progressFill status"
+                                    :style="{ width: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
+                                </div>
+                            </div>
+                            <div class="progressCircle"
+                                :style="{ left: (operationData.efficiencyActual / operationData.efficiencyPlan * 100) + '%' }">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="statItem">
+                        <div class="statLabel">
+                            <span>待处理工单数量</span>
+                            <div class="progressText"><span class="actual">{{ operationData.gdNum }}</span>/{{ operationData.gdNumTotal }}
+                                <span class="unit"> 个</span>
+                            </div>
+
+                        </div>
+                        <div class="progressBar">
+                            <div class="progressTrack">
+                                <div class="progressFill status"
+                                    :style="{ width: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
+                                </div>
+                            </div>
+                            <div class="progressCircle"
+                                :style="{ left: (operationData.gdNum / operationData.gdNumTotal * 100) + '%' }">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <!-- 中部图表 -->
         <div class="middleInfo">
             <SmallTitle :title="'光伏电站总览'" />
@@ -29,31 +66,13 @@
                     </div>
                 </div>
                 <div class="electricity">
-                    <div class="dayNumbox">
+                    <div v-for="item in powerGenerationData" :key="item.type" class="powerGenerationBox">
                         <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 class="title">{{ item.title }}</div>
+                            <div class="num">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
                         </div>
                     </div>
                 </div>
@@ -85,6 +104,15 @@
 <script lang="ts" setup>
 import SmallTitle from './smalltitle.vue';
 import { ref } from 'vue';
+
+// 模拟数据量，用于拖动条渲染
+const operationData = ref({
+    efficiencyPlan: 1500,
+    efficiencyActual: 125,
+    gdNumTotal: 100,
+    gdNum: 50,
+});
+
 const infoList = ref([
     {
         name: '变压器220KV',
@@ -118,15 +146,40 @@ const infoList = ref([
     },
 ])
 
+// 发电量数据
+const powerGenerationData = ref([
+    {
+        type: 'day',
+        title: '日发电量',
+        value: 2649,
+        unit: 'kWh'
+    },
+    {
+        type: 'month',
+        title: '月发电量',
+        value: 2649,
+        unit: 'kWh'
+    },
+    {
+        type: 'year',
+        title: '年发电量',
+        value: 2649,
+        unit: 'kWh'
+    }
+])
+
 </script>
 <style scoped lang="scss">
 @import '@/views/ueScreen/gis.scss';
 
 .leftpageContainer {
+
     // 头部图表
     .topInfoContainer {
-        width: vw(467);
+        width: 100%;
         height: vh(128);
+        display: flex;
+
         .left {
             width: vw(180);
             height: vh(140);
@@ -138,28 +191,105 @@ const infoList = ref([
             justify-content: center;
             align-items: center;
             position: relative;
+
             .top {
                 position: absolute;
                 top: vh(14);
+
                 .num {
                     font-size: vh(24);
                 }
+
                 .unit {
-                    font-size: vh(12);
+                    font-size: vh(16);
                     color: rgba(255, 255, 255, 0.7);
                 }
             }
+
             .desc {
                 font-size: vh(12);
             }
         }
+
+        .right {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: vw(10);
+            font-family: 'SourceHanSansCN-Regular';
+
+            .operationStats {
+                width: 100%;
+
+                .statItem {
+                    margin-bottom: vh(20);
+
+                    .statLabel {
+                        font-size: vh(16);
+                        color: rgba(255, 255, 255, 0.87);
+                        margin-bottom: vh(10);
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+
+                        .title {
+                            // width: vw(140);
+                        }
+                         .progressText {
+                            padding-right: vw(4);
+                            .actual {
+                            color: rgba(125, 246, 255, 1)
+                            }
+                        }
+                    }
+
+                    .progressBar {
+                        position: relative;
+                        margin-bottom: vh(20);
+
+                        .progressTrack {
+                            height: vh(10);
+                            background: rgba(255, 255, 255, 0.15);
+                            overflow: hidden;
+                            margin-bottom: vh(8);
+                            position: relative;
+
+                            .progressFill {
+                                height: 100%;
+                                transition: width 0.5s ease;
+
+                                &.status {
+                                    background: linear-gradient(259.28deg, rgba(41, 241, 250, 1) 0%, rgba(41, 241, 250, 0) 100%);
+                                }
+                            }
+                        }
+
+                        .progressCircle {
+                            position: absolute;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: vh(24);
+                            height: vh(24);
+                            border-radius: 50%;
+                            background: linear-gradient(135deg, #7df6ff 0%, #29f1fa 100%);
+                            box-shadow: 0 0 vh(10) rgba(41, 241, 250, 0.8);
+                            border: vh(2) solid rgba(255, 255, 255, 0.9);
+                            z-index: 10;
+                            transition: left 0.5s ease;
+                        }
+                    }
+                }
+            }
+        }
     }
+
     //  中部信息
     .middleInfo {
 
         .middleInfoContainer {
             // margin-top: vh(12);
-            width: vw(467);
+            width: 100%;
             height: vh(313);
             // padding: vw(8);
             box-sizing: border-box;
@@ -167,18 +297,23 @@ const infoList = ref([
             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);
+                        font-size: vh(16);
                     }
                 }
 
@@ -194,13 +329,13 @@ const infoList = ref([
                 justify-content: space-around;
                 position: absolute;
                 bottom: vh(27.51);
-                .dayNumbox,
-                .monthNumBox,
-                .yearNumBox {
+
+                .powerGenerationBox {
                     display: flex;
                     align-items: center;
                     height: vh(60);
-
+                    font-family: 'SourceHanSansCN-Regular';
+                    color: rgba(255, 255, 255, 1);
                     .left {
                         img {
                             width: vw(48);
@@ -212,6 +347,7 @@ const infoList = ref([
                         .title {
                             font-size: vh(16);
                         }
+
                         .num {
                             margin-top: vh(10.28);
                             font-family: 'D-Din';
@@ -234,14 +370,15 @@ const infoList = ref([
             .infoItem {
                 display: flex;
                 align-items: center;
-                width: vw(467);
+                width: 100%;
                 height: vh(74);
                 background-image: url('@/assets/ueimg/item.png');
                 background-size: cover;
                 padding: vw(8);
                 margin-top: vh(12);
                 box-sizing: border-box;
-
+                font-family: 'SourceHanSansCN-Regular';
+                color: rgba(255, 255, 255, 1);
                 .infoIcon {
                     img {
                         width: vw(42);
@@ -257,13 +394,13 @@ const infoList = ref([
                 }
 
                 .infoValue {
-                    margin-left: vw(82);
+                    margin-left: vw(62);
                     font-size: vh(20);
                 }
 
                 .infoUnit {
                     margin-left: vw(34);
-                    font-size: vh(20);
+                    font-size: vh(18);
                     color: rgba(125, 255, 253, 1);
                 }
             }
diff --git a/src/views/ueScreen/components/smalltitle.vue b/src/views/ueScreen/components/smalltitle.vue
index dc52aac..94a5875 100644
--- a/src/views/ueScreen/components/smalltitle.vue
+++ b/src/views/ueScreen/components/smalltitle.vue
@@ -20,10 +20,11 @@ const props = defineProps({
 @import '@/views/ueScreen/gis.scss';
 
 .title {
-    background-image: url('@/assets/ueimg/title.png');
+    background-image: url('@/assets/ueimg/Rectangle 766.png');
     background-size: cover;
-    border: vw(1) solid rgba(255, 255, 255, 1);
-    width: vw(467);
+    background-repeat: no-repeat;
+    border: vw(1) solid rgba(255, 255, 255, 0.1);
+    width: 100%;
     height: vh(40);
     display: flex;
     align-items: center;
diff --git a/src/views/ueScreen/index.vue b/src/views/ueScreen/index.vue
index f90f9f0..2cfeedb 100644
--- a/src/views/ueScreen/index.vue
+++ b/src/views/ueScreen/index.vue
@@ -32,7 +32,11 @@ $vh_base: 1080;
 .ueScreen {
   width: 100vw;
   height: 100vh;
-  background-color: rgba(4, 7, 17, 0.8);
+  // background-color: rgba(4, 7, 17, 0.8);
+  background-image: url('@/assets/ueimg/bj.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
   color: #fff;
 }