feat(omScreen): 优化页面布局样式并添加报警列表功能

- 在header组件中添加底部边距
- 调整leftPage组件样式并添加背景渐变
- 更新options.ts中的图表配置和月份数据
- 重构rightPage组件，添加报警列表展示和交互功能
- 统一使用渐变背景样式

src/views/omScreen/components/header.vue

@@ -138,6 +138,7 @@ $vh_base: 1080;
   display: flex;
   align-items: center;
   gap: vw(20);
+  margin-bottom: vh(20);
 
   .header_left_img {
     width: vw(48);

src/views/omScreen/components/leftPage.vue

@@ -34,12 +34,14 @@ import { ref } from 'vue';
 @import '@/views/omScreen/gis.scss';
 
 .leftpageContainer {
-margin-left: vw(20);
+    margin-left: vw(20);
+
     .middleInfo {
         background: linear-gradient(135.47deg, rgba(21, 49, 58, 0.82) 0%, rgba(39, 85, 94, 0.5) 100%);
+
         .middleInfoContainer {
             width: 100%;
-            height: vh(313);
+           height: vh(313);
             box-sizing: border-box;
             position: relative;
             background-size: 100% 100%;
@@ -57,6 +59,7 @@ margin-left: vw(20);
                 background: url('@/assets/projectLarge/xm-bg.png') center center no-repeat;
                 background-size: cover;
                 overflow-y: auto;
+
                 div {
                     margin-left: vw(20);
                     margin-bottom: vh(12);
@@ -93,7 +96,9 @@ margin-left: vw(20);
 
     // 底部信息
     .bottomInfo {
-       margin-top: vh(20);
+        margin-top: vh(20);
+        height: vh(580);
+        background: linear-gradient(135.47deg, rgba(21, 49, 58, 0.82) 0%, rgba(39, 85, 94, 0.5) 100%);
     }
 }
 </style>

src/views/omScreen/components/options.ts

@@ -1,3 +1,5 @@
+import axios from "axios";
+
 export let option1 = {
     tooltip: {
         trigger: 'axis',
@@ -39,18 +41,24 @@ export let option1 = {
             color: '#fff',
             fontSize: 12
         },
-        data: ['1月', '3月', '5月', '7月', '9月', '11月']
+      axisLine: {
+            lineStyle: {
+                color: 'rgba(0, 255, 238,1)'
+            }
+        },
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        // interval: 2
     },
     // Y轴
     yAxis: {
         type: 'value',
         name: 'kWh',
         
-        // axisLine: {
+        axisLine: {
-        //     lineStyle: {
+            lineStyle: {
-        //         color: '#fff'
+                color: 'rgba(0, 255, 238,1)'
-        //     }
+            }
-        // },
+        },
         axisTick: {
             show: false
         },
@@ -71,7 +79,7 @@ export let option1 = {
         {
             name: '发电量',
             type: 'line',
-            data: [150000, 700000, 400000, 550000, 650000, 850000, 300000, 800000, 600000],
+            data: [150000, 700000, 400000, 550000, 650000, 850000, 300000, 800000, 600000,1000000,1200000,1500000],
             lineStyle: {
                 color: 'rgba(0, 255, 238, 1)',
                 width: 3

src/views/omScreen/components/rightPage.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="right_box">
-        <div class="top_box">
+        <div class="data_box">
             <Title title="年发电量" />
             <div class="echarts">
                 <EchartBoxTwo :option="option_fdssgl" ref="barChart" />
@@ -41,6 +41,31 @@
                     <div class="warn_status">普通</div>
                 </div>
             </div>
+            <div class="bj-list">
+                <div class="bj-grid">
+                    <div>报警ID</div>
+                    <div>报警类型</div>
+                    <div>报警详情</div>
+                    <div>报警时间</div>
+                    <div>操作</div>
+                </div>
+                <AutoScroller :items="bjList" class="bj-content" :minItems="10">
+                    <template #default="{ item }">
+                        <!-- <div class="bj-grid item" :class="{ 'active': activebj === item.id }"> -->
+                        <div class="bj-grid item">
+                            <div class="cell-text">{{ item.id }}</div>
+                            <div class="cell-text">
+                                {{ item.grantType }}
+                            </div>
+                            <div class="cell-text">
+                                报警详情报警详情报警详情报警详情报警详情
+                            </div>
+                            <div class="cell-text">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</div>
+                            <div class="cell-text cursor-pointer" @click="handleClick(item.id)">查看</div>
+                        </div>
+                    </template>
+                </AutoScroller>
+            </div>
         </div>
     </div>
 </template>
@@ -53,15 +78,35 @@ import Title from './title.vue';
 import { dayjs } from 'element-plus';
 
 const option_fdssgl = ref(option1);
+
 const bjList = ref([
-    {createTime: '2025-11-11 11:11:11'},
+    { id: '1', grantType: '未处理', createTime: '2025-11-11 11:11:11' },
-    {createTime: '2025-11-11 11:11:11'},
+    { id: '2', grantType: '报警', createTime: '2025-11-11 11:11:11' },
-    {createTime: '2025-11-11 11:11:11'},
+    { id: '3', grantType: '事故', createTime: '2025-11-11 11:11:11' },
-    {createTime: '2025-11-11 11:11:11'},
+    { id: '4', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
-    {createTime: '2025-11-11 11:11:11'},
+    { id: '5', grantType: '未处理', createTime: '2025-11-11 11:11:11' },
+    { id: '7', grantType: '未处理', createTime: '2025-11-11 11:11:11' },
+    { id: '8', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
+    { id: '9', grantType: '未处理', createTime: '2025-11-11 11:11:11' },
+    { id: '10', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
+    { id: '11', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
+    { id: '12', grantType: '已处理', createTime: '2025-11-11 11:11:11' },
 ])
 const activebj = ref('')
 
+const handleClick = (id: string) => {
+    activebj.value = id;
+}
+
+const handleWheel = (event: WheelEvent) => {
+    const errorList = (event.target as HTMLElement).closest('.error_list');
+
+    if (errorList) {
+        event.preventDefault(); // 阻止页面或父元素的垂直滚动
+        errorList.scrollLeft += event.deltaY; // 横向滚动
+    }
+};
+
 const reszieFont = () => {
     const fontSize = Math.sqrt(window.innerWidth) / 3;
     option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
@@ -71,15 +116,20 @@ const reszieFont = () => {
 
 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>
 
 <style scoped lang="scss">
-$background-color: rgba(17, 25, 24, 0.3);
+$background-color: linear-gradient(135.47deg, rgba(21, 49, 58, 0.82) 0%, rgba(39, 85, 94, 0.5) 100%);
+;
 $vm_base: 1920;
 $vh_base: 1080;
 
@@ -128,22 +178,12 @@ $vh_base: 1080;
     margin-right: vw(20);
 }
 
-.statistic {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: vh(10);
-    background: $background-color;
-}
-
-
-
 .data_box {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: calc(40vh - vh(25));
-    background-color: $background-color;
+    background: $background-color;
 
     .echarts {
         width: 100%;
@@ -154,8 +194,8 @@ $vh_base: 1080;
 
 .bj_box {
     width: 100%;
-    height: calc(50vh - vh(25));
+    height: vh(576);
-    background-color: $background-color;
+    background: $background-color;
 
     .warnbox {
         width: 100%;
@@ -210,4 +250,60 @@ $vh_base: 1080;
         }
     }
 }
+
+.bj-list {
+    margin: vh(10) vw(10);
+    margin-top: vh(16);
+    font-family: 'Roboto Condensed';
+    font-size: vw(12);
+
+    &>div:first-child {
+        padding: vh(6) 0 vh(6) vw(8);
+        margin-bottom: vh(10);
+        background: rgba(67, 226, 203, 0.1);
+    }
+
+    .bj-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1.6fr 0.7fr;
+        gap: vw(8);
+        place-items: center;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .bj-grid.item:hover {
+        color: rgba(255, 87, 51, 1);
+        background: rgba(255, 87, 51, 0.15);
+    }
+    .bj-content {
+        height: vh(260);
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+
+    .item {
+        padding: vh(6) 0;
+        padding-left: vw(8);
+    }
+
+    .cell-text {
+        width: 100%;
+        text-align: center;
+        box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // .active {
+    //     color: rgba(255, 87, 51, 1);
+    //     background: rgba(255, 87, 51, 0.15);
+    // }
+
+    .ellipsis {
+        text-overflow: ellipsis;
+    }
+}
 </style>
+