feat(omScreen): 优化大屏展示样式和功能

- 添加ueHeader.png作为头部背景图
- 调整左右页面布局和样式，增加滚动条
- 简化图表配置，移除无用选项
- 更新头部组件显示安全生产天数
- 优化图表数据展示和样式

src/views/omScreen/components/header.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="header">
     <div class="header-left">
-      <!-- <div>
+      <div class="header_left_img">
-        <el-date-picker v-model="value1" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD" class="datePicker" />
+        <img src="@/assets/large/secure.png" style="width: 100%; height: 100%" />
+      </div>
+      <div class="day_title">安全生产天数：</div>
+      <div class="header_left_text">
+        {{ 1 }}
+        <span class="day">天</span>
       </div>
-      <div>
-        <el-select v-model="value" placeholder="请选择项目">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </div> -->
     </div>
     <div class="header-center">新能源场站智慧运维大数据平台</div>
     <div class="header-right">
@@ -52,8 +52,6 @@
 declare var ue5: any;
 
 import '@/assets/styles/element.scss';
-// import DateSelector from './date.vue';
-// import ProjectSelector from './project.vue';
 
 
 defineProps({
@@ -69,25 +67,7 @@ const date: any = ref({
   hms: '',
   week: ''
 });
-const currentYear = ref(2025);
+
-const currentMonth = ref(11);
-const selectedProjectId = ref(1);
-const value1 = ref('');
-const value = ref('');
-const options = ref([
-  {
-    value: 1,
-    label: '田东县乡村振兴光伏发电项目'
-  },
-  {
-    value: 2,
-    label: '田东县乡村振兴光伏发电项目（二期）'
-  },
-  {
-    value: 3,
-    label: '长顺县朝核农业光伏电站'
-  }
-]);
 
 const setTime = () => {
   let date1 = new Date();
@@ -139,10 +119,18 @@ $vh_base: 1080;
 }
 
 .header {
-  width: 100%;
-  height: 8vh;
-  display: grid;
   grid-template-columns: 1fr 2fr 1fr;
+  width: 100%;
+  height: vh(80);
+  box-sizing: border-box;
+  padding: vh(4) vh(10);
+  display: flex;
+  justify-content: space-between;
+  background: url('@/assets/large/ueHeader.png') no-repeat center center;
+  background-size: 100% 100%;
+  color: #fff;
+
+  margin-bottom: vh(20);
 }
 
 .header-left {
@@ -150,12 +138,18 @@ $vh_base: 1080;
   display: flex;
   align-items: center;
   gap: vw(20);
-  // justify-content: space-between;
 
-  // &>div {
+  .header_left_img {
-  //   width: vw(240);
+    width: vw(48);
-  //   margin-right: vw(20);
+    height: vw(48);
-  // }
+    box-sizing: border-box;
+  }
+
+  .header_left_text {
+    font-size: vw(28);
+    font-weight: 700;
+    text-shadow: 0px vh(1.24) vh(6.21) rgba(25, 179, 250, 1);
+  }
 }
 
 .header-center {

src/views/omScreen/components/leftPage.vue

@@ -12,9 +12,7 @@
                     <div>建设单位：这里是建设单位的名称</div>
                     <div>总装机容量：200MW</div>
                 </div>
-
             </div>
-
         </div>
 
         <div class="bottomInfo">
@@ -30,27 +28,6 @@ import Title from './title.vue';
 import { ref } from 'vue';
 
 
-// 发电量数据
-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">
@@ -75,12 +52,13 @@ margin-left: vw(20);
                 right: 50%;
                 top: vh(150);
                 transform: translate(-50%, -50%);
-                width: vw(500);
+                width: vw(450);
                 height: vh(280);
                 background: url('@/assets/projectLarge/xm-bg.png') center center no-repeat;
-
+                background-size: cover;
+                overflow-y: auto;
                 div {
-                    margin-left: vw(60);
+                    margin-left: vw(20);
                     margin-bottom: vh(12);
                     width: vw(400);
                 }
@@ -89,6 +67,26 @@ margin-left: vw(20);
                     color: rgba(0, 255, 238, 1);
                     margin-top: vh(40);
                 }
+
+                // 自定义滚动条样式
+                &::-webkit-scrollbar {
+                    width: vh(8);
+                }
+
+                &::-webkit-scrollbar-track {
+                    background: rgba(255, 255, 255, 0.1);
+                    border-radius: vh(4);
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background: linear-gradient(135deg, rgba(41, 241, 250, 0.5), rgba(125, 246, 255, 0.5));
+                    border-radius: vh(4);
+                    border: vh(1) solid rgba(255, 255, 255, 0.2);
+                }
+
+                &::-webkit-scrollbar-thumb:hover {
+                    background: linear-gradient(135deg, rgba(125, 246, 255, 0.5), rgba(41, 241, 250, 0.5));
+                }
             }
         }
     }

src/views/omScreen/components/options.ts

@@ -1,5 +1,3 @@
-import * as echarts from 'echarts';
-
 export let option1 = {
     tooltip: {
         trigger: 'axis',
@@ -8,20 +6,20 @@ export let option1 = {
         }
     },
     // 图例
-    legend: {
+    // legend: {
-        top: '1%',
+    //     top: '1%',
-        itemWidth: 12,
+    //     itemWidth: 12,
-        itemHeight: 12,
+    //     itemHeight: 12,
-        textStyle: {
+    //     textStyle: {
-            color: '#fff',
+    //         color: '#fff',
-            fontSize: 14
+    //         fontSize: 14
-        },
+    //     },
-        data: [
+    //     data: [
-            { name: 'A区', itemStyle: { color: '#00bfff' } },
+    //         { name: 'A区', itemStyle: { color: '#00bfff' } },
-            { name: 'B区', itemStyle: { color: '#00f5a6' } },
+    //         { name: 'B区', itemStyle: { color: '#00f5a6' } },
-            { name: 'C区', itemStyle: { color: '#ffa500' } }
+    //         { name: 'C区', itemStyle: { color: '#ffa500' } }
-        ]
+    //     ]
-    },
+    // },
     // 网格
     grid: {
         left: '3%',
@@ -41,16 +39,18 @@ export let option1 = {
             color: '#fff',
             fontSize: 12
         },
-        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
+        data: ['1月', '3月', '5月', '7月', '9月', '11月']
     },
     // Y轴
     yAxis: {
         type: 'value',
-        axisLine: {
+        name: 'kWh',
-            lineStyle: {
+        
-                color: '#fff'
+        // axisLine: {
-            }
+        //     lineStyle: {
-        },
+        //         color: '#fff'
+        //     }
+        // },
         axisTick: {
             show: false
         },
@@ -61,169 +61,22 @@ export let option1 = {
         },
         axisLabel: {
             color: '#fff',
-            fontSize: 12
+            fontSize: 12,
         },
         min: 0,
-        max: 100,
+        interval: 100000
-        interval: 25
-    },
-    // 系列
-    series: [
-        {
-            name: 'A区',
-            type: 'line',
-            data: [15, 70, 40, 55, 65, 85, 30, 80, 60],
-            lineStyle: {
-                color: '#00bfff',
-                width: 2
-            },
-            areaStyle: {
-                color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0, color: 'rgba(0, 191, 255, 0.3)'
-                    }, {
-                        offset: 1, color: 'rgba(0, 191, 255, 0.0)'
-                    }]
-                }
-            },
-            symbol: 'none',
-            smooth: true
-        },
-        {
-            name: 'B区',
-            type: 'line',
-            data: [50, 20, 45, 50, 85, 70, 50, 60, 50],
-            lineStyle: {
-                color: '#00f5a6',
-                width: 2
-            },
-            areaStyle: {
-                color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0, color: 'rgba(0, 245, 166, 0.3)'
-                    }, {
-                        offset: 1, color: 'rgba(0, 245, 166, 0.0)'
-                    }]
-                }
-            },
-            symbol: 'none',
-            smooth: true
-        },
-        {
-            name: 'C区',
-            type: 'line',
-            data: [20, 50, 30, 35, 30, 35, 30, 35, 30],
-            lineStyle: {
-                color: '#ffa500',
-                width: 2
-            },
-            areaStyle: {
-                color: {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0, color: 'rgba(255, 165, 0, 0.3)'
-                    }, {
-                        offset: 1, color: 'rgba(255, 165, 0, 0.0)'
-                    }]
-                }
-            },
-            symbol: 'none',
-            smooth: true
-        }
-    ],
-    backgroundColor: 'transparent'
-};
-
-export let option2 = {
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'cross'
-        }
-    },
-    // 图例
-    legend: {
-        top: '3%',
-        itemWidth: 12,
-        itemHeight: 12,
-        textStyle: {
-            color: '#fff',
-            fontSize: 14
-        },
-        data: [
-            { name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } },
-            { name: '发电趋势', itemStyle: { color: '#ffa500' } }
-        ]
-    },
-    // 网格
-    grid: {
-        left: '3%',
-        right: '3%',
-        bottom: '5%',
-        top: '30%',
-        containLabel: true
-    },
-    // X轴
-    xAxis: {
-        type: 'category',
-        boundaryGap: true,
-        axisTick: {
-            show: false
-        },
-        axisLabel: {
-            color: '#fff',
-            fontSize: 14
-        },
-        data: ['周一', '周二', '周三', '周四', '周五']
-    },
-    // Y轴
-    yAxis: {
-        type: 'value',
-        name: '单位: Kwh',
-        nameTextStyle: {
-            color: '#fff',
-            fontSize: 14,
-        },
-        axisLine: {
-            lineStyle: {
-                color: '#fff'
-            }
-        },
-        axisTick: {
-            show: false
-        },
-        splitLine: {
-            lineStyle: {
-                color: 'rgba(255,255,255,0.3)'
-            }
-        },
-        axisLabel: {
-            color: '#fff',
-            fontSize: 14
-        },
-        interval: 1000
     },
     // 系列
     series: [
         {
             name: '发电量',
-            type: 'bar',
+            type: 'line',
-            data: [2800, 1800, 1200, 1700, 1500],
+            data: [150000, 700000, 400000, 550000, 650000, 850000, 300000, 800000, 600000],
-            itemStyle: {
+            lineStyle: {
+                color: 'rgba(0, 255, 238, 1)',
+                width: 3
+            },
+            areaStyle: {
                 color: {
                     type: 'linear',
                     x: 0,
@@ -231,135 +84,16 @@ export let option2 = {
                     x2: 0,
                     y2: 1,
                     colorStops: [{
-                        offset: 0, color: 'rgba(125, 255, 253, 1)'
+                        offset: 0, color: 'rgba(0, 255, 238, 0.3)'
                     }, {
-                        offset: 1, color: 'rgba(225, 255, 255, 0)'
+                        offset: 1, color: 'rgba(0, 255, 238, 0.0)'
                     }]
-                },
+                }
-                borderRadius: [4, 4, 0, 0]
             },
-            barWidth: '30px'
+            symbol: 'none',
-        },
+            smooth: true
-        {
-            name: '发电趋势',
-            type: 'line',
-            data: [1800, 4000, 2500, 4000, 2000],
-            lineStyle: {
-                color: 'rgba(255, 209, 92, 1)',
-                width: 2
-            },
-            symbol: 'circle',
-            symbolSize: 10,
-            itemStyle: {
-                color: 'rgba(255, 209, 92, 1)',
-                borderColor: '#fff',
-                borderWidth: 2
-            },
-            smooth: false
         }
     ],
-    // 背景透明
     backgroundColor: 'transparent'
 };
 
-export let option3 = {
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'cross'
-        }
-    },
-    legend: {
-        data: ['光照度', '功率'],
-        top: '1%',
-        textStyle: {
-            color: '#fff',
-            fontSize: 14
-        }
-    },
-    grid: {
-        left: '3%',
-        right: '5%',
-        bottom: '5%',
-        top: '15%',
-        containLabel: true
-    },
-    xAxis: {
-        type: 'category',
-        boundaryGap: true,
-        axisTick: {
-            show: false
-        },
-        axisLabel: {
-            color: '#fff',
-            fontSize: 12
-        },
-        data: ['00:00', '06:00', '12:00', '18:00', '24:00']
-    },
-    yAxis: {
-        type: 'value',
-        axisLine: {
-            lineStyle: {
-                color: '#fff',
-            }
-        },
-        axisLabel: {
-            color: '#fff',
-            fontSize: 12
-        },
-        interval: 6,
-        splitLine: {
-            show: true,
-            lineStyle: {
-                color: 'rgba(255, 255, 255, 0.3)',
-                width: 1,
-                type: [4, 3]
-            }
-        }
-    },
-    series: [
-        {
-            name: '光照度',
-            type: 'line',
-            data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
-            itemStyle: {
-                color: 'rgba(82, 155, 255, 1)'
-            },
-            areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgba(72, 149, 239, 0.8)'
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgba(72, 149, 239, 0.2)'
-                    }
-                ])
-            },
-            smooth: true
-        },
-        {
-            name: '功率',
-            type: 'line',
-            data: [2, 18, 5, 2, 6, 9, 12, 4, 5.5],
-            itemStyle: {
-                color: 'rgba(125, 255, 253, 1)'
-            },
-            areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgba(152, 230, 205, 0.8)'
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgba(152, 230, 205, 0.2)'
-                    }
-                ])
-            },
-            smooth: true
-        }
-    ],
-    backgroundColor: 'transparent'
-};

src/views/omScreen/components/rightPage.vue

@@ -16,11 +16,11 @@
 
 <script setup lang="ts">
 import EchartBoxTwo from '@/components/EchartBox/index.vue';
-import { option1, option2, option3 } from './options';
+import { option1} from './options';
 import Title from './title.vue';
 
 const option_fdssgl = ref(option1);
-const option_fdzlqs = ref(option2);
+
 const handleWheel = (event: WheelEvent) => {
     const errorList = (event.target as HTMLElement).closest('.error_list');
 
@@ -36,15 +36,7 @@ const reszieFont = () => {
     option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
     option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
     option_fdssgl.value.legend.textStyle.fontSize = fontSize;
-
+    
-    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(() => {

src/views/omScreen/index.vue

@@ -101,6 +101,7 @@ $vh_base: 1080;
   background-position: center center;
   color: #fff;
   overflow: hidden;
+    background-color: rgba(0, 0, 0, 0.2);
 }
 
 .content_box {