From d54897807fa8a8b978b17d9b764269491a212b75 Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Fri, 14 Nov 2025 19:01:12 +0800
Subject: [PATCH 1/3] 1

---
 src/views/ueScreen/components/right.vue | 130 ++++++++++++++++++++++++
 src/views/ueScreen/index.vue            |  25 ++++-
 2 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 src/views/ueScreen/components/right.vue

diff --git a/src/views/ueScreen/components/right.vue b/src/views/ueScreen/components/right.vue
new file mode 100644
index 0000000..af5a262
--- /dev/null
+++ b/src/views/ueScreen/components/right.vue
@@ -0,0 +1,130 @@
+<template>
+    <div class="right_box">
+        <div class="statistic">
+            <div>异常情况统计</div>
+            <div class="error_list" ref="errorListRef">
+                <div v-for="item in errorList" :key="item" class="error_item">
+                    <div class="item_info">
+                        <el-icon>
+                            <Warning />
+                        </el-icon>
+                        <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>
+            </div>
+        </div>
+        <!--  -->
+        <div class="echarts">
+            <div>发电实时功率</div>
+        </div>
+        <!--  -->
+        <div class="echarts">
+            <div>发电总量趋势</div>
+        </div>
+        <!--  -->
+        <div class="echarts">
+            <div>电站负荷曲线</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const errorListRef = ref<HTMLElement | null>(null);
+const errorList = ref([1, 2, 3, 4, 5, 6, 7]);
+
+const handleWheel = (event: WheelEvent) => {
+    const errorList = (event.target as HTMLElement).closest('.error_list');
+
+    if (errorList) {
+        // 确认是在 .errorList 区域内滚动
+        event.preventDefault(); // 阻止页面或父元素的垂直滚动
+        errorList.scrollLeft += event.deltaY; // 横向滚动
+    }
+};
+
+// 在组件挂载后，给 window 添加事件监听
+onMounted(() => {
+    window.addEventListener('wheel', handleWheel, { passive: false });
+    // passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
+});
+
+// 在组件卸载前，移除事件监听
+onUnmounted(() => {
+    window.removeEventListener('wheel', handleWheel);
+});
+</script>
+
+<style scoped lang="scss">
+$background-color: rgba(17, 25, 24, 0.3);
+$vm_base: 1920;
+$vh_base: 1080;
+
+// 计算vw
+@function vw($px) {
+    @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+    @return calc(($px / $vh_base) * 100vh);
+}
+
+.right_box {
+    display: flex;
+    flex-direction: column;
+    gap: vh(20);
+    width: 100%;
+    height: 100%;
+}
+
+.statistic {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: vh(10);
+    background: $background-color;
+}
+
+.echarts {
+    flex: 1.4;
+    width: 100%;
+    background-color: $background-color;
+}
+
+.error_list {
+    flex: 1;
+    display: flex;
+    gap: vw(10);
+    margin: vh(10) vw(15);
+    overflow: hidden;
+    flex-wrap: nowrap;
+    cursor: grabbing;
+
+    .error_item {
+        flex: 0 0 auto;
+        width: vw(300);
+        padding: vh(10) vw(10);
+        color: #fff;
+        background: rgba(255, 255, 255, 0.09);
+        border: 1px solid rgba(0, 255, 238, 0.5);
+        border-radius: vw(4);
+
+        .item_info {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: vw(14);
+            font-weight: bold;
+            margin-bottom: vh(10);
+        }
+
+        .item_headline {
+            font-size: vw(16);
+        }
+    }
+}
+</style>
diff --git a/src/views/ueScreen/index.vue b/src/views/ueScreen/index.vue
index 0f8eb33..6fb3f89 100644
--- a/src/views/ueScreen/index.vue
+++ b/src/views/ueScreen/index.vue
@@ -2,18 +2,41 @@
   <div class="ueScreen">
     <Header />
   </div>
+  <div class="right">
+    <Right />
+  </div>
 </template>
 
 <script setup lang="ts">
 import Header from './components/header.vue';
+import Right from './components/right.vue';
 </script>
 
 <style scoped lang="scss">
-@import '@/views/ueScreen/gis.scss';
+$vm_base: 1920;
+$vh_base: 1080;
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
+
 .ueScreen {
   width: 100vw;
   height: 100vh;
   background-color: rgba(4, 7, 17, 0.8);
   color: #fff;
 }
+
+.right {
+  position: absolute;
+  top: vh(60);
+  right: vw(20);
+  width: 25vw;
+  height: calc(100vh - vh(80));
+}
 </style>

From 88ca02ea23042d46a505d8f1cebd4d2ccb7bbb8f Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Sat, 15 Nov 2025 09:58:15 +0800
Subject: [PATCH 2/3] 1

---
 src/views/ueScreen/components/options.ts | 353 +++++++++++++++++++++++
 src/views/ueScreen/components/right.vue  |  34 ++-
 2 files changed, 379 insertions(+), 8 deletions(-)
 create mode 100644 src/views/ueScreen/components/options.ts

diff --git a/src/views/ueScreen/components/options.ts b/src/views/ueScreen/components/options.ts
new file mode 100644
index 0000000..17c3afd
--- /dev/null
+++ b/src/views/ueScreen/components/options.ts
@@ -0,0 +1,353 @@
+import * as echarts from 'echarts';
+
+export let option1 = {
+    // 图例
+    legend: {
+        top: '10px',
+        right: '20px',
+        itemWidth: 12,
+        itemHeight: 12,
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        data: [
+            { name: 'A区', itemStyle: { color: '#00bfff' } },
+            { name: 'B区', itemStyle: { color: '#00f5a6' } },
+            { name: 'C区', itemStyle: { color: '#ffa500' } }
+        ]
+    },
+    // 网格
+    grid: {
+        left: '3%',
+        right: '3%',
+        bottom: '3%',
+        top: '15%',
+        containLabel: true
+    },
+    // X轴
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
+    },
+    // Y轴
+    yAxis: {
+        type: 'value',
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            lineStyle: {
+                color: 'rgba(255,255,255,0.2)'
+            }
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 12
+        },
+        min: 0,
+        max: 100,
+        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 = {
+    // 图例
+    legend: {
+        top: '10px',
+        right: '20px',
+        itemWidth: 12,
+        itemHeight: 12,
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        data: [
+            { name: '发电量', itemStyle: { color: '#00f5a6' } },
+            { name: '发电趋势', itemStyle: { color: '#ffa500' } }
+        ]
+    },
+    // 网格
+    grid: {
+        left: '3%',
+        right: '3%',
+        bottom: '3%',
+        top: '15%',
+        containLabel: true
+    },
+    // X轴
+    xAxis: {
+        type: 'category',
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        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.2)'
+            }
+        },
+        axisLabel: {
+            color: '#fff',
+            fontSize: 14
+        },
+        min: 0,
+        max: 5000,
+        interval: 1000
+    },
+    // 系列
+    series: [
+        {
+            name: '发电量',
+            type: 'bar',
+            data: [2800, 1800, 1200, 1700, 1500],
+            itemStyle: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: 'rgba(0, 245, 166, 0.8)'
+                    }, {
+                        offset: 1, color: 'rgba(0, 245, 166, 0.2)'
+                    }]
+                },
+                borderRadius: [4, 4, 0, 0]
+            },
+            barWidth: '30px'
+        },
+        {
+            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: '5%',
+        textStyle: {
+            color: '#fff' // 若背景是深色，确保文字颜色可见
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
+    },
+    yAxis: {
+        name: '单位: Kwh',
+        type: 'value',
+        axisLabel: {
+            formatter: '{value}',
+            fontSize: 20
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: 'rgba(192, 192, 192, 0.3)',
+                width: 1,
+                type: [5, 10]
+            }
+        }
+    },
+    series: [
+        {
+            name: '光照度',
+            type: 'line',
+            data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
+            itemStyle: {
+                color: '#4895ef'
+            },
+            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, 15, 5, 2, 3, 2.5, 3, 4, 5.5],
+            itemStyle: {
+                color: '#98e6cd'
+            },
+            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'
+};
\ No newline at end of file
diff --git a/src/views/ueScreen/components/right.vue b/src/views/ueScreen/components/right.vue
index af5a262..c0eef4a 100644
--- a/src/views/ueScreen/components/right.vue
+++ b/src/views/ueScreen/components/right.vue
@@ -16,23 +16,36 @@
             </div>
         </div>
         <!--  -->
-        <div class="echarts">
+        <div class="data_box">
             <div>发电实时功率</div>
+            <div class="echarts">
+                <EchartBoxTwo :option="option_fdssgl" ref="barChart" />
+            </div>
         </div>
         <!--  -->
-        <div class="echarts">
+        <div class="data_box">
             <div>发电总量趋势</div>
+            <div class="echarts">
+                <EchartBoxTwo :option="option_fdzlqs" ref="barChart" />
+            </div>
         </div>
         <!--  -->
-        <div class="echarts">
+        <div class="data_box">
             <div>电站负荷曲线</div>
+            <div class="echarts3">
+                <EchartBoxTwo :option="option_dzfhqx" ref="barChart" />
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import EchartBoxTwo from '@/components/EchartBox/index.vue';
+import { option1, option2, option3 } from './options';
 
+const option_fdssgl = ref(option1);
+const option_fdzlqs = ref(option2);
+const option_dzfhqx = ref(option3);
 const errorListRef = ref<HTMLElement | null>(null);
 const errorList = ref([1, 2, 3, 4, 5, 6, 7]);
 
@@ -40,19 +53,16 @@ const handleWheel = (event: WheelEvent) => {
     const errorList = (event.target as HTMLElement).closest('.error_list');
 
     if (errorList) {
-        // 确认是在 .errorList 区域内滚动
         event.preventDefault(); // 阻止页面或父元素的垂直滚动
         errorList.scrollLeft += event.deltaY; // 横向滚动
     }
 };
 
-// 在组件挂载后，给 window 添加事件监听
 onMounted(() => {
     window.addEventListener('wheel', handleWheel, { passive: false });
     // passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
 });
 
-// 在组件卸载前，移除事件监听
 onUnmounted(() => {
     window.removeEventListener('wheel', handleWheel);
 });
@@ -89,10 +99,18 @@ $vh_base: 1080;
     background: $background-color;
 }
 
-.echarts {
+.data_box {
     flex: 1.4;
+    display: flex;
+    flex-direction: column;
+    gap: vh(10);
     width: 100%;
     background-color: $background-color;
+
+    .echarts {
+        width: 100%;
+        height: 20vh;
+    }
 }
 
 .error_list {

From 12bd03da73d54afb2156e2c8e51522dc80a57753 Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Sat, 15 Nov 2025 10:08:05 +0800
Subject: [PATCH 3/3] 1

---
 .../components/{right.vue => rightPage.vue}   |  1 +
 src/views/ueScreen/index.vue                  | 29 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)
 rename src/views/ueScreen/components/{right.vue => rightPage.vue} (99%)

diff --git a/src/views/ueScreen/components/right.vue b/src/views/ueScreen/components/rightPage.vue
similarity index 99%
rename from src/views/ueScreen/components/right.vue
rename to src/views/ueScreen/components/rightPage.vue
index c0eef4a..e41a298 100644
--- a/src/views/ueScreen/components/right.vue
+++ b/src/views/ueScreen/components/rightPage.vue
@@ -89,6 +89,7 @@ $vh_base: 1080;
     gap: vh(20);
     width: 100%;
     height: 100%;
+    padding-bottom: vh(20);
 }
 
 .statistic {
diff --git a/src/views/ueScreen/index.vue b/src/views/ueScreen/index.vue
index 6e2542f..f90f9f0 100644
--- a/src/views/ueScreen/index.vue
+++ b/src/views/ueScreen/index.vue
@@ -1,21 +1,24 @@
 <template>
   <div class="ueScreen">
     <Header />
-    <LeftPage />
-  </div>
-  <div class="right">
-    <Right />
+    <div class="content_box">
+      <LeftPage class="left" />
+      <!-- <div>ue</div> -->
+      <RightPage class="right" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import Header from './components/header.vue';
 import LeftPage from './components/leftPage.vue';
+import RightPage from './components/rightPage.vue';
 </script>
 
 <style scoped lang="scss">
 $vm_base: 1920;
 $vh_base: 1080;
+
 // 计算vw
 @function vw($px) {
   @return calc(($px / $vm_base) * 100vw);
@@ -33,11 +36,25 @@ $vh_base: 1080;
   color: #fff;
 }
 
+.content_box {
+  position: relative;
+  width: 100vw;
+  height: calc(100vh - 8vh);
+}
+
+.left {
+  position: absolute;
+  top: 0;
+  left: vw(20);
+  width: 25vw;
+  height: 100%;
+}
+
 .right {
   position: absolute;
-  top: vh(60);
+  top: 0;
   right: vw(20);
   width: 25vw;
-  height: calc(100vh - vh(80));
+  height: 100%;
 }
 </style>