1

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>

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>