1

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',
+        top: '1%',
-        right: '20px',
         itemWidth: 12,
         itemHeight: 12,
         textStyle: {
@@ -20,20 +25,15 @@ export let option1 = {
     // 网格
     grid: {
         left: '3%',
-        right: '3%',
+        right: '5%',
-        bottom: '3%',
+        bottom: '5%',
         top: '15%',
         containLabel: true
     },
     // X轴
     xAxis: {
         type: 'category',
-        boundaryGap: false,
+        boundaryGap: true,
-        axisLine: {
-            lineStyle: {
-                color: '#fff'
-            }
-        },
         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',
+        top: '3%',
-        right: '20px',
         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%',
+        bottom: '5%',
-        top: '15%',
+        top: '30%',
         containLabel: true
     },
     // X轴
     xAxis: {
         type: 'category',
-        axisLine: {
+        boundaryGap: true,
-            lineStyle: {
-                color: '#fff'
-            }
-        },
         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%',
+        right: '5%',
-        bottom: '3%',
+        bottom: '5%',
+        top: '15%',
         containLabel: true
     },
     xAxis: {
         type: 'category',
-        boundaryGap: false,
+        boundaryGap: true,
-        data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
+        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: {
+        axisLine: {
-            formatter: '{value}',
+            lineStyle: {
-            fontSize: 20
+                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, [

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;
 
-// 防抖函数
+    option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
-// const debounce = <T,>(func: (this: T, ...args: any[]) => void, delay: number) => {
+    option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
-//   let timer: ReturnType<typeof setTimeout> | null = null;
+    option_fdssgl.value.legend.textStyle.fontSize = fontSize;
-//   return function (this: T, ...args: any[]) {
-//     const context = this;
-//     if (timer) clearTimeout(timer);
-//     timer = setTimeout(() => {
-//       func.apply(context, args);
-//     }, delay);
-//   };
-// };
 
-// // 窗口大小变化时触发的函数
+    option_fdzlqs.value.xAxis.axisLabel.fontSize = fontSize;
-// const handleResize = () => {
+    option_fdzlqs.value.yAxis.axisLabel.fontSize = fontSize;
-//   myMachineryChart.value && myMachineryChart.value.dispose();
+    option_fdzlqs.value.legend.textStyle.fontSize = fontSize;
-//   myOrderChart.value && myOrderChart.value.dispose();
+    option_fdzlqs.value.yAxis.nameTextStyle.fontSize = fontSize;
-//   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_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;

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';