From bcf74e463ca359471c24438f4651e5d26f281b05 Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Sat, 15 Nov 2025 14:21:50 +0800
Subject: [PATCH] 1

---
 src/assets/ueimg/tip.png                     | Bin 0 -> 489 bytes
 src/views/ueScreen/components/options.ts     |  95 +++++++++++--------
 src/views/ueScreen/components/rightPage.vue  |  92 ++++++++++--------
 src/views/ueScreen/components/smalltitle.vue |   6 +-
 4 files changed, 110 insertions(+), 83 deletions(-)
 create mode 100644 src/assets/ueimg/tip.png

diff --git a/src/assets/ueimg/tip.png b/src/assets/ueimg/tip.png
new file mode 100644
index 0000000000000000000000000000000000000000..373a35286fd2ae3464b9782b0c560d0dcdc78187
GIT binary patch
literal 489
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=jKx9jP7LeL$-D$|Sc;uILpXq-
zh9ji|C^y;D#WAE}&f8hueuoW2T>GWP!nQHKVsnrcYs+o#P)uU&sGZSjnijxmxX|y>
z_rjyr$=dtAYi!b07hrJ|U^!T?dX;U@zS=dX4c=&`=1y?$n^I&ow{Q1bwRowr;OcXs
z)7UjqW7`-N;-$9D`lK+?LC)tyoM^xU4WVO=nm1QxGaNYm`?=!5eYTTiS^LiSe{a9F
z!;|U3E)^eLeq)vcr5-ba<<hts_NkuH<>zK`m@hPKN_#8Q0)0;J)6UHdFPxpcD>FnG
z_6bFuZf;=sFi{~;u7#yxEz8PJ3K|SKDjw6=6B!q1JMOa4;9!vDlzQsu$#BB!f);-l
zlY?7RT4jJ3L$1)4)6I<x5gLk1|9mMZUoG;o{nykP!b_*<cUSHbO>pJ-!1utH0I^|)
z%kQYwteedhdKdrtdQIpI%bRVp?<{7yY`Vam^I3O7zEDhA<2;oexy^e$3T)ZGC>;E&
z@MU_-Rg1LlpLbag=yPhOTGR`#`TI-`6rzq7PMKfn-C!igp;`fqE(T9mKbLh*2~7Yc
CS-WNc

literal 0
HcmV?d00001

diff --git a/src/views/ueScreen/components/options.ts b/src/views/ueScreen/components/options.ts
index 14a5ba1..8260d82 100644
--- a/src/views/ueScreen/components/options.ts
+++ b/src/views/ueScreen/components/options.ts
@@ -1,10 +1,15 @@
 import * as echarts from 'echarts';
 
 export let option1 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross'
+        }
+    },
     // 图例
     legend: {
-        top: '0px',
-        right: '20px',
+        top: '1%',
         itemWidth: 12,
         itemHeight: 12,
         textStyle: {
@@ -20,20 +25,15 @@ export let option1 = {
     // 网格
     grid: {
         left: '3%',
-        right: '3%',
-        bottom: '3%',
+        right: '5%',
+        bottom: '5%',
         top: '15%',
         containLabel: true
     },
     // X轴
     xAxis: {
         type: 'category',
-        boundaryGap: false,
-        axisLine: {
-            lineStyle: {
-                color: '#fff'
-            }
-        },
+        boundaryGap: true,
         axisTick: {
             show: false
         },
@@ -41,7 +41,7 @@ export let option1 = {
             color: '#fff',
             fontSize: 12
         },
-        data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
+        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
     },
     // Y轴
     yAxis: {
@@ -149,10 +149,15 @@ export let option1 = {
 };
 
 export let option2 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross'
+        }
+    },
     // 图例
     legend: {
-        top: '10px',
-        right: '20px',
+        top: '3%',
         itemWidth: 12,
         itemHeight: 12,
         textStyle: {
@@ -160,7 +165,7 @@ export let option2 = {
             fontSize: 14
         },
         data: [
-            { name: '发电量', itemStyle: { color: '#00f5a6' } },
+            { name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } },
             { name: '发电趋势', itemStyle: { color: '#ffa500' } }
         ]
     },
@@ -168,18 +173,14 @@ export let option2 = {
     grid: {
         left: '3%',
         right: '3%',
-        bottom: '3%',
-        top: '15%',
+        bottom: '5%',
+        top: '30%',
         containLabel: true
     },
     // X轴
     xAxis: {
         type: 'category',
-        axisLine: {
-            lineStyle: {
-                color: '#fff'
-            }
-        },
+        boundaryGap: true,
         axisTick: {
             show: false
         },
@@ -207,15 +208,13 @@ export let option2 = {
         },
         splitLine: {
             lineStyle: {
-                color: 'rgba(255,255,255,0.2)'
+                color: 'rgba(255,255,255,0.3)'
             }
         },
         axisLabel: {
             color: '#fff',
             fontSize: 14
         },
-        min: 0,
-        max: 5000,
         interval: 1000
     },
     // 系列
@@ -232,9 +231,9 @@ export let option2 = {
                     x2: 0,
                     y2: 1,
                     colorStops: [{
-                        offset: 0, color: 'rgba(0, 245, 166, 0.8)'
+                        offset: 0, color: 'rgba(125, 255, 253, 1)'
                     }, {
-                        offset: 1, color: 'rgba(0, 245, 166, 0.2)'
+                        offset: 1, color: 'rgba(225, 255, 255, 0)'
                     }]
                 },
                 borderRadius: [4, 4, 0, 0]
@@ -272,35 +271,49 @@ export let option3 = {
     },
     legend: {
         data: ['光照度', '功率'],
-        top: '5%',
+        top: '1%',
         textStyle: {
-            color: '#fff' // 若背景是深色，确保文字颜色可见
+            color: '#fff',
+            fontSize: 14
         }
     },
     grid: {
         left: '3%',
-        right: '4%',
-        bottom: '3%',
+        right: '5%',
+        bottom: '5%',
+        top: '15%',
         containLabel: true
     },
     xAxis: {
         type: 'category',
-        boundaryGap: false,
-        data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
     },
     yAxis: {
-        name: '单位: Kwh',
         type: 'value',
-        axisLabel: {
-            formatter: '{value}',
-            fontSize: 20
+        axisLine: {
+            lineStyle: {
+                color: '#fff',
+            }
         },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        interval: 6,
         splitLine: {
             show: true,
             lineStyle: {
-                color: 'rgba(192, 192, 192, 0.3)',
+                color: 'rgba(255, 255, 255, 0.3)',
                 width: 1,
-                type: [5, 10]
+                type: [4, 3]
             }
         }
     },
@@ -310,7 +323,7 @@ export let option3 = {
             type: 'line',
             data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
             itemStyle: {
-                color: '#4895ef'
+                color: 'rgba(82, 155, 255, 1)'
             },
             areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -329,9 +342,9 @@ export let option3 = {
         {
             name: '功率',
             type: 'line',
-            data: [2, 15, 5, 2, 3, 2.5, 3, 4, 5.5],
+            data: [2, 18, 5, 2, 6, 9, 12, 4, 5.5],
             itemStyle: {
-                color: '#98e6cd'
+                color: 'rgba(125, 255, 253, 1)'
             },
             areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
diff --git a/src/views/ueScreen/components/rightPage.vue b/src/views/ueScreen/components/rightPage.vue
index 28ee673..55e2910 100644
--- a/src/views/ueScreen/components/rightPage.vue
+++ b/src/views/ueScreen/components/rightPage.vue
@@ -1,7 +1,12 @@
 <template>
     <div class="right_box">
         <div class="statistic">
-            <Smalltitle title="异常情况统计" />
+            <Smalltitle title="异常情况统计">
+                <div class="error_tip_box">
+                    <div class="error_tip">两条异常消息!</div>
+                    <img src="@/assets/ueimg/tip.png">
+                </div>
+            </Smalltitle>
             <div class="error_list" ref="errorListRef">
                 <div v-for="item in errorList" :key="item" class="error_item">
                     <div class="item_info">
@@ -11,7 +16,7 @@
                         <div class="ml-1">A区</div>
                         <div class="flex-grow text-right">2025-08-08 10:24:36</div>
                     </div>
-                    <div class="item_headline">异常情况统计异常情况统计异常情况统计异常情况统计-{{ item }}</div>
+                    <div class="item_headline">多晶硅智能组件异常，请及时处理！</div>
                 </div>
             </div>
         </div>
@@ -59,48 +64,32 @@ const handleWheel = (event: WheelEvent) => {
     }
 };
 
+const reszieFont = () => {
+    const fontSize = Math.sqrt(window.innerWidth) / 3;
 
-// 防抖函数
-// const debounce = <T,>(func: (this: T, ...args: any[]) => void, delay: number) => {
-//   let timer: ReturnType<typeof setTimeout> | null = null;
-//   return function (this: T, ...args: any[]) {
-//     const context = this;
-//     if (timer) clearTimeout(timer);
-//     timer = setTimeout(() => {
-//       func.apply(context, args);
-//     }, delay);
-//   };
-// };
+    option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
+    option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
+    option_fdssgl.value.legend.textStyle.fontSize = fontSize;
 
-// // 窗口大小变化时触发的函数
-// const handleResize = () => {
-//   myMachineryChart.value && myMachineryChart.value.dispose();
-//   myOrderChart.value && myOrderChart.value.dispose();
-//   initMachinerycharts();
-//   initOrderChart();
-// };
-// const debouncedHandleResize = debounce(handleResize, 300);
-// onMounted(() => {
-//   getOrderData();
-//   getConstructionUserData();
-//   getMachineryData();
-//   window.addEventListener('resize', debouncedHandleResize); //监听窗口变化重新生成echarts
-// });
-
-// onUnmounted(() => {
-//   window.removeEventListener('resize', debouncedHandleResize);
-//   stopMachineryScroll.value();
-//   stopOrderScroll.value();
-//   myMachineryChart.value && myMachineryChart.value.dispose();
-// });
+    option_fdzlqs.value.xAxis.axisLabel.fontSize = fontSize;
+    option_fdzlqs.value.yAxis.axisLabel.fontSize = fontSize;
+    option_fdzlqs.value.legend.textStyle.fontSize = fontSize;
+    option_fdzlqs.value.yAxis.nameTextStyle.fontSize = fontSize;
 
+    option_dzfhqx.value.xAxis.axisLabel.fontSize = fontSize;
+    option_dzfhqx.value.yAxis.axisLabel.fontSize = fontSize;
+    option_dzfhqx.value.legend.textStyle.fontSize = fontSize;
+}
 
 onMounted(() => {
+    window.addEventListener('resize', reszieFont);
+
     window.addEventListener('wheel', handleWheel, { passive: false });
     // passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
 });
 
 onUnmounted(() => {
+    window.removeEventListener('resize', reszieFont);
     window.removeEventListener('wheel', handleWheel);
 });
 </script>
@@ -123,7 +112,7 @@ $vh_base: 1080;
 .right_box {
     display: flex;
     flex-direction: column;
-    gap: vh(10);
+    gap: vh(15);
     width: 100%;
     height: 100%;
     padding-bottom: vh(20);
@@ -138,17 +127,40 @@ $vh_base: 1080;
 }
 
 .data_box {
-    // flex: 1.3;
     display: flex;
     flex-direction: column;
-    gap: vh(10);
     width: 100%;
-    height: calc(26vh - vh(30));
+    height: calc(26vh - vh(25));
     background-color: $background-color;
 
     .echarts {
         width: 100%;
-        height: calc(26vh - vh(30 + 40 + 10));
+        // 40是title的高度
+        height: calc(26vh - vh(20 + 40));
+    }
+}
+
+.error_tip_box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: vw(5);
+    margin-right: vw(8);
+
+    img {
+        width: vw(20);
+        height: vh(20);
+    }
+
+    .error_tip {
+        height: vh(26);
+        width: vw(81);
+        border-radius: vw(13);
+        background: rgba(0, 255, 238, 0.12);
+        color: rgba(0, 255, 238, 1);
+        font-size: vw(10);
+        text-align: center;
+        line-height: vh(26);
     }
 }
 
@@ -168,7 +180,7 @@ $vh_base: 1080;
         color: #fff;
         background: rgba(255, 255, 255, 0.09);
         border: 1px solid rgba(0, 255, 238, 0.5);
-        border-radius: vw(4);
+        border-radius: vw(8);
 
         .item_info {
             display: flex;
diff --git a/src/views/ueScreen/components/smalltitle.vue b/src/views/ueScreen/components/smalltitle.vue
index 1fefd0d..d84b5b3 100644
--- a/src/views/ueScreen/components/smalltitle.vue
+++ b/src/views/ueScreen/components/smalltitle.vue
@@ -3,6 +3,7 @@
         <div class="bottomInfo">
             <div class="title">
                 <span>{{ title }}</span>
+                <slot></slot>
             </div>
         </div>
     </div>
@@ -13,7 +14,7 @@ const props = defineProps({
     title: {
         type: Number||String,
         default: ''
-    }
+    },
 })
 </script>
 <style scoped lang="scss">
@@ -27,12 +28,13 @@ const props = defineProps({
     height: vh(40);
     display: flex;
     align-items: center;
+    justify-content: space-between;
+
     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';