feat(omScreen): 添加光伏板清洁预警功能及图表展示

- 新增光伏板清洁预警模块，包含轮播展示和详情弹窗
- 在左侧页面添加发电提升对比图表
- 新增大标题组件用于模块标题展示
- 添加相关图片资源并更新package.json依赖
- 移除无用代码并优化样式

package.json

@@ -38,17 +38,18 @@
     "image-conversion": "2.1.1",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "mitt": "^3.0.1",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
     "screenfull": "6.0.2",
+    "swiper": "^12.0.3",
     "vue": "3.5.13",
     "vue-cropper": "1.1.1",
     "vue-i18n": "11.1.3",
     "vue-json-pretty": "2.4.0",
     "vue-router": "4.5.0",
     "vue-types": "6.0.0",
-    "vxe-table": "4.13.7",
+    "vxe-table": "4.13.7"
-    "mitt": "^3.0.1"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.276",

src/views/omScreen/components/bigtitle.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="title">
+    <img src="@/assets/projectLarge/biaoti2.png" alt="" />
+    <div class="title_list">
+      <div class="title_item" v-for="(item, index) in titles" :key="index" @click="handleClick(index)" :class="{ active2: activeIndex === index }">
+        {{ item }}
+      </div>
+      <div>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: [String, Array],
+    default: '标题'
+  },
+  prefix: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['change']);
+const activeIndex = ref(0);
+const titles = ref(Array.isArray(props.title) ? props.title : [props.title]);
+
+const handleClick = (index: number) => {
+  activeIndex.value = index;
+  emit('change', index + 1);
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/views/omScreen/gis.scss';
+
+.title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: vw(3);
+  font-family: '庞门正道标题体';
+  position: relative;
+
+  img {
+    width: 100%;
+  }
+
+  .title_list {
+    position: absolute;
+    top: 36%;
+    left: vw(52);
+    width: calc(100% - vw(60));
+    transform: translateY(-50%);
+    /* 垂直居中 */
+    font-size: vw(16);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & > div:first-child {
+      font-size: vw(20);
+    }
+  }
+
+  .title_item {
+    color: white;
+    font-family: 'Rang_men_zheng_title';
+    /* 默认颜色 */
+    transition: all 0.3s ease;
+    /* 平滑过渡动画 */
+
+    &.active2 {
+      transform: scale(1.1);
+      /* 激活时放大1.1倍 */
+    }
+  }
+}
+</style>

src/views/omScreen/components/center.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="center_box">
+        <!-- 总览 -->
         <div class="totalView">
             <div class="item">
                 <div class="item_content color1">
@@ -77,10 +78,167 @@
                 </div>
             </div>
         </div>
+        <!-- 监控总览 -->
+        <div class="monitorView">
+            <BigTitle title="光伏板清洁预警" />
+            <div class="monitorList">
+
+                <div class="box-swiper">
+                    <!-- 关键1：添加v-if控制组件重新渲染，确保数据加载后再初始化 -->
+                    <swiper ref="swiperRef" :slidesPerView="3" :loop="true" :spaceBetween="30"
+                        :pagination="{ clickable: true }" :modules="[Navigation]" class="mySwiper"
+                        :watchSlidesProgress="true" :initialSlide="0" @swiper="handleSwiperInit">
+                        <swiper-slide v-for="item in monitorData" :key="item.id">
+                            <div class="monitorItem">
+                                <div class="monitor">
+                                    <img :src="item.image" alt="">
+                                    <div class="monitorArea">{{ item.monitorArea }}</div>
+                                </div>
+                                <div class="monitorText">
+                                    <div>编号：{{ item.id }}</div>
+                                    <div>建议清洗时间：{{ item.suggestedCleanTime }}</div>
+                                    <div>效率衰减率：{{ item.efficiencyDecay }}</div>
+                                    <div class="level">预警等级：<span class="levelItem" :class="item.warningLevel">{{
+                                        item.warningText
+                                            }}</span></div>
+                                    <div class="monitorBtn">
+                                        <img src="@/assets/projectLarge/search.png" alt=""
+                                            @click.stop="handleClick(item.id)">
+                                    </div>
+                                </div>
+                            </div>
+                        </swiper-slide>
+                    </swiper>
+                    <!-- 空数据兜底 -->
+                    <!-- <div v-else class="empty-swiper">暂无摄像头数据</div> -->
+
+                    <!-- 关键2：修复按钮定位，确保可点击 -->
+                    <img src="../icon/prev.png" class="prev" @click="prev" alt="上一页" />
+                    <img src="../icon/prev.png" class="next" @click="next" alt="下一页" />
+                </div>
+            </div>
+        </div>
+        <div class="monitorDialog" v-if="isShow" @click.stop="isShow = false">
+            <div class="dialogTitle">光伏板清洁预警详情</div>
+            <div class="dialogBox">
+                <img src="https://img.js.design/assets/img/6937c6dc444590cd26b2ee60.jpg#b5bc92c6b719e7ceca875dfc4876bcb2"
+                    alt="">
+                <div class="dialogContent">
+                    <div>编号：A1-GFB001</div>
+                    <div>预警等级：紧急清洗</div>
+                    <div>上次清洗时间：YYYY-MM-DD HH:MM</div>
+                    <div>建议清洗时间：3天后</div>
+                    <div>效率衰减率：15%</div>
+                    <div>当前发电效率：82%</div>
+                    <div>预估清洗后效率恢复值：95%</div>
+                </div>
+            </div>
+
+        </div>
     </div>
 </template>
 <script setup lang="ts">
+import BigTitle from './bigtitle.vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Navigation } from 'swiper/modules'; // 导入原生Swiper类
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation'; // 补充导航样式
 
+const swiperRef = ref<typeof Swiper | null>(null);
+let swiperInstance = null;
+const handleSwiperInit = (swiper) => {
+    swiperInstance = swiper;
+};
+const checkSwiperInstance = () => {
+    if (swiperInstance) return; // 已有实例直接返回
+    if (swiperRef.value && (swiperRef.value as any).swiper) {
+        swiperInstance = (swiperRef.value as any).swiper;
+        return;
+    }
+};
+
+// 上一页/下一页方法
+const prev = () => {
+    if (!swiperInstance) {
+        checkSwiperInstance();
+        if (!swiperInstance) {
+            console.warn('Swiper实例未初始化');
+            return;
+        }
+    }
+    swiperInstance.slidePrev(500, true); // 500ms动画，触发回调
+};
+
+const next = () => {
+    if (!swiperInstance) {
+        checkSwiperInstance();
+        if (!swiperInstance) {
+            console.warn('Swiper实例未初始化');
+            return;
+        }
+    }
+    swiperInstance.slideNext(500, true);
+};
+
+
+
+
+// 弹窗是否显示
+const isShow = ref(false);
+// 点击按钮
+const handleClick = (id) => {
+    console.log(id);
+    isShow.value = true;
+}
+// 模拟监控数据
+const monitorData = [
+    {
+        id: 'A1-GFB001',
+        image: 'https://img.js.design/assets/img/6937c6dc444590cd26b2ee60.jpg#b5bc92c6b719e7ceca875dfc4876bcb2',
+        suggestedCleanTime: '3天后',
+        efficiencyDecay: '15%',
+        warningLevel: 'level2',
+        warningText: '紧急清洗',
+        monitorArea: 'A区'
+    },
+    {
+        id: 'A1-GFB002',
+        image: 'https://img.js.design/assets/img/6937c6dc444590cd26b2ee60.jpg#b5bc92c6b719e7ceca875dfc4876bcb2',
+        suggestedCleanTime: '5天后',
+        efficiencyDecay: '10%',
+        warningLevel: 'level1',
+        warningText: '一般清洗',
+        monitorArea: 'A区'
+    },
+    {
+        id: 'A1-GFB003',
+        image: 'https://img.js.design/assets/img/6937c6dc444590cd26b2ee60.jpg#b5bc92c6b719e7ceca875dfc4876bcb2',
+        suggestedCleanTime: '7天后',
+        efficiencyDecay: '8%',
+        warningLevel: 'level3',
+        warningText: '建议清洗',
+        monitorArea: 'A区'
+    },
+    {
+        id: 'A1-GFB004',
+        image: 'https://img.js.design/assets/img/6937c6dc444590cd26b2ee60.jpg#b5bc92c6b719e7ceca875dfc4876bcb2',
+        suggestedCleanTime: '10天后',
+        efficiencyDecay: '5%',
+        warningLevel: 'level4',
+        warningText: '正常状态',
+        monitorArea: 'A区'
+    },
+    {
+        id: 'A1-GFB004',
+        image: 'https://img.js.design/assets/img/6937c6dc444590cd26b2ee60.jpg#b5bc92c6b719e7ceca875dfc4876bcb2',
+        suggestedCleanTime: '10天后',
+        efficiencyDecay: '5%',
+        warningLevel: 'level4',
+        warningText: '正常状态',
+        monitorArea: 'A区'
+    }
+];
 </script>
 <style scoped lang="scss">
 @import '@/views/omScreen/gis.scss';
@@ -169,6 +327,7 @@
                     color: rgba(255, 128, 128, 1);
                 }
             }
+
             .count {
                 font-size: vh(12);
                 margin-top: vh(5);
@@ -176,5 +335,189 @@
             }
         }
     }
+
+    .monitorView {
+        position: fixed;
+        bottom: vh(8);
+        left: 50%;
+        transform: translateX(-50%);
+
+
+        .level1 {
+            color: rgba(255, 195, 0, 1);
+            background: rgba(255, 195, 0, 0.2);
+        }
+
+        .level2 {
+            color: rgba(255, 87, 51, 1);
+            background: rgba(255, 87, 51, 0.2);
+        }
+
+        .level3 {
+            color: rgba(30, 136, 229, 1);
+            background: rgba(30, 136, 229, 0.2);
+        }
+
+        .level4 {
+            color: rgba(67, 207, 124, 1);
+            background: rgba(67, 207, 124, 0.2);
+        }
+
+        margin: auto;
+        width: vw(880);
+        min-height: vh(240);
+        background: linear-gradient(224.18deg, rgba(21, 49, 58, 0.8) 0%, rgba(39, 85, 94, 0.5) 100%);
+        padding: vh(20) 0;
+        box-sizing: border-box;
+
+        .monitorItem {
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            font-size: vh(14);
+            color: rgba(255, 255, 255, 1);
+            width: vw(276);
+            height: vh(140);
+            background: rgba(9, 28, 27, 0.3);
+            padding: vh(10) vw(10);
+            box-sizing: border-box;
+            border-radius: 8px;
+
+            .monitor {
+                position: relative;
+                width: vw(120);
+
+                img {
+                    width: 100%;
+                    height: vh(91);
+                    border-radius: 8px;
+                    margin-right: vw(22);
+                }
+
+                .monitorArea {
+                    position: absolute;
+                    bottom: vh(4);
+                    left: vw(0);
+                    width: 100%;
+                    height: vh(24);
+                    line-height: vh(24);
+                    text-align: center;
+                    border-radius: 0px 0px 8px 8px;
+                    background: rgba(0, 0, 0, 0.5);
+                }
+            }
+
+            .monitorText {
+                position: relative;
+
+                div {
+                    margin-bottom: vh(5);
+                }
+
+                .level {
+                    .levelItem {
+                        padding: vh(2) vw(5);
+                        border-radius: 5px;
+                    }
+                }
+            }
+
+            .monitorBtn {
+                width: vw(18);
+                height: vh(18);
+                position: absolute;
+                top: 0;
+                right: vw(-10);
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+
+            }
+        }
+    }
+
+    .monitorDialog {
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: vw(400);
+        min-height: vh(260);
+        background: url('@/assets/projectLarge/tcbj.png') no-repeat;
+        background-size: 100% 100%;
+        padding: vh(20) vw(20);
+        box-sizing: border-box;
+        text-align: center;
+
+        .dialogTitle {
+            font-size: vh(20);
+            font-family: 'Rang_men_zheng_title';
+            color: rgba(255, 255, 255, 1);
+            // margin-top: vh(5);
+        }
+
+        .dialogBox {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: vh(20);
+        }
+
+        img {
+            width: vw(155);
+            height: vh(136);
+            border-radius: 8px;
+            margin-right: vw(20);
+        }
+
+        .dialogContent {
+            font-size: vh(12);
+            color: rgba(255, 255, 255, 1);
+            text-align: left;
+
+            div {
+                margin-bottom: vh(5);
+            }
+        }
+
+    }
+
+    .box-swiper {
+        position: relative;
+        padding: vh(20) 0;
+        height: 70%;
+        width: 100%;
+        margin: 0 auto;
+        min-height: vh(100);
+
+        .mySwiper {
+            height: 100%;
+            min-height: vh(80);
+            box-sizing: border-box;
+        }
+    }
+
+    .prev,
+    .next {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: vw(25);
+        height: auto;
+        cursor: pointer;
+        z-index: 100;
+        transition: all 0.2s ease;
+    }
+
+    .prev {
+        left: vw(10);
+        transform: translateY(-50%) rotate(180deg);
+    }
+
+    .next {
+        right: vw(10);
+    }
 }
 </style>

src/views/omScreen/components/leftPage.vue

@@ -16,18 +16,18 @@
         </div>
 
         <div class="bottomInfo">
-            <Title title="光伏版清洗" />
+            <Title title="光伏板清洗发电提升对比" />
-            <div class="infoContainer">
+            <div class="echarts">
-
+                <EchartBoxTwo :option="option_fdssgl" ref="barChart" />
             </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
 import Title from './title.vue';
-import { ref } from 'vue';
+import { option2 } from './options';
-
+import EchartBoxTwo from '@/components/EchartBox/index.vue';
-
+const option_fdssgl = ref(option2);
 
 </script>
 <style scoped lang="scss">
@@ -99,6 +99,9 @@ import { ref } from 'vue';
         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%);
+        .echarts {
+            height: vh(500);
+        }
     }
 }
 </style>

src/views/omScreen/components/options.ts

@@ -1,4 +1,4 @@
-import axios from "axios";
+
 
 export let option1 = {
     tooltip: {
@@ -105,3 +105,131 @@ export let option1 = {
     backgroundColor: 'transparent'
 };
 
+
+
+export let option2 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross'
+        }
+    },
+    // 图例
+    legend: {
+        top: '5%',
+        itemWidth: 12,
+        itemHeight: 12,
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        data: [
+            { name: '未清洁发电量', itemStyle: { color: 'rgba(255, 141, 26, 1)' } },
+            { name: '清洁后发电量', itemStyle: { color: 'rgba(13, 251, 172, 1)' } }
+        ]
+    },
+    // 网格
+    grid: {
+        left: '3%',
+        right: '5%',
+        bottom: '5%',
+        top: '15%',
+        containLabel: true
+    },
+    // X轴
+    xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+      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: {
+            lineStyle: {
+                color: 'rgba(0, 255, 238,1)'
+            }
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.2)'
+            }
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        min: 0,
+        interval: 200000
+    },
+    // 系列
+    series: [
+        {
+            name: '未清洁发电量',
+            type: 'line',
+            data: [150000, 700000, 400000, 550000, 650000, 850000, 300000, 800000, 600000,1000000,1200000,1500000],
+            lineStyle: {
+                color: 'rgba(255, 141, 26, 1)',
+                width: 3
+            },
+            areaStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(255, 141, 26, 0.3)'
+                    }, {
+                        offset: 1, color: 'rgba(255, 141, 26, 0.0)'
+                    }]
+                }
+            },
+            symbol: 'none',
+        },
+        {
+            name: '清洁后发电量',
+            type: 'line',
+            data: [200000, 800000, 500000, 650000, 750000, 950000, 400000, 900000, 700000,1100000,1300000,1600000],
+            lineStyle: {
+                color: 'rgba(13, 251, 172, 1)',
+                width: 3
+            },
+            areaStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(13, 251, 172, 0.3)'
+                    }, {
+                        offset: 1, color: 'rgba(13, 251, 172, 0.0)'
+                    }]
+                }
+            },
+            symbol: 'none',
+        }
+    ],
+    backgroundColor: 'transparent'
+};

src/views/omScreen/components/rightPage.vue

@@ -108,9 +108,10 @@ const handleWheel = (event: WheelEvent) => {
 };
 
 const reszieFont = () => {
-    const fontSize = Math.sqrt(window.innerWidth) / 3;
+    //注意删除
-    option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
+    // const fontSize = Math.sqrt(window.innerWidth) / 3;
-    option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
+    // option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
+    // option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
 
 }