1

src/views/ueScreen/components/date.vue

@@ -13,7 +13,6 @@
         </li>
       </ul>
     </div>
-
     <!-- 月份选择器 -->
     <div class="picker-group">
       <div class="picker-input" @click="isMonthOpen = !isMonthOpen" :class="{ 'open': isMonthOpen }">
@@ -205,7 +204,7 @@ $vh_base: 1080;
   right: 0;
   max-height: vh(200); /* 限制最大高度并可滚动 */
   overflow-y: auto;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.3);
   border-radius: vw(4);
   box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
   list-style: none;
@@ -229,7 +228,7 @@ $vh_base: 1080;
 }
 
 .options li.selected {
-  // background-color: #e6f7ff;
+  background-color: #e6f7ff;
   color: #1890ff;
   font-weight: 500;
 }

src/views/ueScreen/components/leftPage.vue

@@ -5,7 +5,7 @@
             <div class="left">
                 <span class="top">
                     <span class="num">365</span>
-                    <span class="unit">day</span>
+                    <!-- <span class="unit">day</span> -->
                 </span>
                 <span class="desc">
                     运行天数
@@ -103,7 +103,6 @@
 </template>
 <script lang="ts" setup>
 import SmallTitle from './smalltitle.vue';
-import { ref } from 'vue';
 
 // 模拟数据量，用于拖动条渲染
 const operationData = ref({
@@ -118,31 +117,31 @@ const infoList = ref([
         name: '变压器220KV',
         value: 564,
         unit: '（台）',
-        icon: 'src/assets/ueimg/1.png',
+        icon: '/assets/ue1.png',
     },
     {
         name: '开关柜220KV',
         value: 100,
         unit: '（台）',
-        icon: 'src/assets/ueimg/2.png',
+        icon: '/assets/ue2.png',
     },
     {
         name: '接地变110v',
         value: 564,
         unit: '（台）',
-        icon: 'src/assets/ueimg/3.png',
+        icon: '/assets/ue3.png',
     },
     {
         name: '电缆110v',
         value: 768,
         unit: '（回）',
-        icon: 'src/assets/ueimg/4.png',
+        icon: '/assets/ue4.png',
     },
     {
         name: 'GIS',
         value: 100,
         unit: '（个）',
-        icon: 'src/assets/ueimg/5.png',
+        icon: '/assets/ue5.png',
     },
 ])
 
@@ -389,19 +388,19 @@ const powerGenerationData = ref([
 
                 .infoName {
                     margin-left: vw(17);
-                    font-size: vh(20);
+                    font-size: vw(16);
                     width: vw(200);
                     height: vh(28);
                 }
 
                 .infoValue {
                     margin-left: vw(62);
-                    font-size: vh(20);
+                    font-size: vw(16);
                 }
 
                 .infoUnit {
                     margin-left: vw(34);
-                    font-size: vh(18);
+                    font-size: vw(16);
                     color: rgba(125, 255, 253, 1);
                 }
             }

src/views/ueScreen/components/project.vue

@@ -115,7 +115,8 @@ $vh_base: 1080;
   // 关键修改：设置一个最大宽度，防止文本过长导致容器被撑破
   // 你可以根据需要调整这个值，vw(300) 表示在1920px宽的屏幕下，最大宽度是300px
   max-width: 12vw;
-  width: 100%; /* 让输入框尽可能利用可用空间，但不超过max-width */
+  width: 100%;
+  /* 让输入框尽可能利用可用空间，但不超过max-width */
   display: flex;
   gap: vw(8);
   justify-content: space-between;
@@ -123,16 +124,21 @@ $vh_base: 1080;
   padding: vh(8) vw(16);
   cursor: pointer;
   user-select: none;
-  box-sizing: border-box; /* 确保padding不会增加元素总宽度 */
+  box-sizing: border-box;
+  /* 确保padding不会增加元素总宽度 */
 }
 
 .picker-input .value {
   color: #fff;
   // 关键修改：添加文本省略样式
-  white-space: nowrap;      /* 强制文本在一行显示 */
+  white-space: nowrap;
-  overflow: hidden;         /* 隐藏溢出的文本 */
+  /* 强制文本在一行显示 */
-  text-overflow: ellipsis;  /* 显示省略号 */
+  overflow: hidden;
-  flex-grow: 1;             /* 让 .value 元素占据可用空间，将箭头推到最右边 */
+  /* 隐藏溢出的文本 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+  flex-grow: 1;
+  /* 让 .value 元素占据可用空间，将箭头推到最右边 */
 }
 
 .picker-input.open .arrow {
@@ -155,11 +161,13 @@ $vh_base: 1080;
   top: 110%;
   left: 0;
   right: 0;
-  max-height: vh(200); /* 限制最大高度并可滚动 */
+  max-height: vh(200);
+  /* 限制最大高度并可滚动 */
   overflow-y: auto;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.3);
   border-radius: vw(4);
-  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15);
+  /* 更明显的阴影 */
   list-style: none;
   z-index: 10;
   padding: vh(4) 0;
@@ -181,6 +189,7 @@ $vh_base: 1080;
 }
 
 .options li.selected {
+  background-color: #e6f7ff;
   color: #1890ff;
   font-weight: 500;
 }

src/views/ueScreen/components/rightPage.vue

@@ -49,9 +49,9 @@ import EchartBoxTwo from '@/components/EchartBox/index.vue';
 import { option1, option2, option3 } from './options';
 import Smalltitle from './smalltitle.vue';
 
-const option_fdssgl = ref(option1);
+const option_fdssgl = ref(null);
-const option_fdzlqs = ref(option2);
+const option_fdzlqs = ref(null);
-const option_dzfhqx = ref(option3);
+const option_dzfhqx = ref(null);
 const errorListRef = ref<HTMLElement | null>(null);
 const errorList = ref([1, 2, 3, 4, 5, 6, 7]);
 
@@ -67,23 +67,27 @@ const handleWheel = (event: WheelEvent) => {
 const reszieFont = () => {
     const fontSize = Math.sqrt(window.innerWidth) / 3;
 
-    option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
+    option1.xAxis.axisLabel.fontSize = fontSize;
-    option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
+    option1.yAxis.axisLabel.fontSize = fontSize;
-    option_fdssgl.value.legend.textStyle.fontSize = fontSize;
+    option1.legend.textStyle.fontSize = fontSize;
 
-    option_fdzlqs.value.xAxis.axisLabel.fontSize = fontSize;
+    option2.xAxis.axisLabel.fontSize = fontSize;
-    option_fdzlqs.value.yAxis.axisLabel.fontSize = fontSize;
+    option2.yAxis.axisLabel.fontSize = fontSize;
-    option_fdzlqs.value.legend.textStyle.fontSize = fontSize;
+    option2.legend.textStyle.fontSize = fontSize;
-    option_fdzlqs.value.yAxis.nameTextStyle.fontSize = fontSize;
+    option2.yAxis.nameTextStyle.fontSize = fontSize;
 
-    option_dzfhqx.value.xAxis.axisLabel.fontSize = fontSize;
+    option3.xAxis.axisLabel.fontSize = fontSize;
-    option_dzfhqx.value.yAxis.axisLabel.fontSize = fontSize;
+    option3.yAxis.axisLabel.fontSize = fontSize;
-    option_dzfhqx.value.legend.textStyle.fontSize = fontSize;
+    option3.legend.textStyle.fontSize = fontSize;
+
+    option_fdssgl.value = option1;
+    option_fdzlqs.value = option2;
+    option_dzfhqx.value = option3;
 }
 
 onMounted(() => {
+    reszieFont();
     window.addEventListener('resize', reszieFont);
-
     window.addEventListener('wheel', handleWheel, { passive: false });
     // passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
 });

src/views/ueScreen/index.vue

@@ -2,8 +2,8 @@
   <div class="ueScreen">
     <Header :isFull="isFull" @changePage="handleChangePage" />
     <div class="content_box">
-      <LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '0' }" />
+      <LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '1vw' }" />
-      <RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '0' }" />
+      <RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '1vw' }" />
     </div>
   </div>
 </template>
@@ -20,7 +20,6 @@ import usePermissionStore from '@/store/modules/permission';
 import to from 'await-to-js';
 
 const userStore = useUserStoreHook();
-const initDone = ref(false); // ✅ 控制页面是否渲染
 const isHideOther = ref(false);
 const isFull = ref(false);
 
@@ -38,12 +37,12 @@ const handleChangePage = () => {
   }
 };
 
+// 调用静默登录接口
 const silentLogin = async (isExpired = false) => {
   const token = getToken();
   if (token && !isExpired) return true;
 
   try {
-    // 调用静默登录接口
     await to(
       userStore.login({
         username: 'admin',
@@ -62,12 +61,9 @@ const silentLogin = async (isExpired = false) => {
   return true;
 };
 
-// ✅ 页面初始化逻辑
 const initPage = async () => {
   const logged = await silentLogin();
   if (!logged) return;
-
-  initDone.value = true; // ✅ 准备完成
 };
 
 onMounted(() => {