1

src/views/ueScreen/components/options.ts

@@ -3,7 +3,7 @@ import * as echarts from 'echarts';
 export let option1 = {
     // 图例
     legend: {
-        top: '10px',
+        top: '0px',
         right: '20px',
         itemWidth: 12,
         itemHeight: 12,
@@ -145,7 +145,6 @@ export let option1 = {
             smooth: true
         }
     ],
-    // 背景透明（适配你的场景）
     backgroundColor: 'transparent'
 };
 

src/views/ueScreen/components/rightPage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="right_box">
         <div class="statistic">
-            <div>异常情况统计</div>
+            <Smalltitle title="异常情况统计" />
             <div class="error_list" ref="errorListRef">
                 <div v-for="item in errorList" :key="item" class="error_item">
                     <div class="item_info">
@@ -17,21 +17,21 @@
         </div>
         <!--  -->
         <div class="data_box">
-            <div>发电实时功率</div>
+            <Smalltitle title="发电实时功率" />
             <div class="echarts">
                 <EchartBoxTwo :option="option_fdssgl" ref="barChart" />
             </div>
         </div>
         <!--  -->
         <div class="data_box">
-            <div>发电总量趋势</div>
+            <Smalltitle title="发电总量趋势" />
             <div class="echarts">
                 <EchartBoxTwo :option="option_fdzlqs" ref="barChart" />
             </div>
         </div>
         <!--  -->
         <div class="data_box">
-            <div>电站负荷曲线</div>
+            <Smalltitle title="电站负荷曲线" />
             <div class="echarts3">
                 <EchartBoxTwo :option="option_dzfhqx" ref="barChart" />
             </div>
@@ -42,6 +42,7 @@
 <script setup lang="ts">
 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_fdzlqs = ref(option2);
@@ -58,6 +59,42 @@ const handleWheel = (event: WheelEvent) => {
     }
 };
 
+
+// 防抖函数
+// 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);
+//   };
+// };
+
+// // 窗口大小变化时触发的函数
+// 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();
+// });
+
+
 onMounted(() => {
     window.addEventListener('wheel', handleWheel, { passive: false });
     // passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
@@ -86,7 +123,7 @@ $vh_base: 1080;
 .right_box {
     display: flex;
     flex-direction: column;
-    gap: vh(20);
+    gap: vh(10);
     width: 100%;
     height: 100%;
     padding-bottom: vh(20);
@@ -101,16 +138,17 @@ $vh_base: 1080;
 }
 
 .data_box {
-    flex: 1.4;
+    // flex: 1.3;
     display: flex;
     flex-direction: column;
     gap: vh(10);
     width: 100%;
+    height: calc(26vh - vh(30));
     background-color: $background-color;
 
     .echarts {
         width: 100%;
-        height: 20vh;
+        height: calc(26vh - vh(30 + 40 + 10));
     }
 }
 

src/views/ueScreen/components/smalltitle.vue

@@ -23,7 +23,7 @@ const props = defineProps({
     background-image: url('@/assets/ueimg/title.png');
     background-size: cover;
     border: vw(1) solid rgba(255, 255, 255, 1);
-    width: vw(467);
+    width: 100%;
     height: vh(40);
     display: flex;
     align-items: center;