From 040aaab24664750068de9691b358e18c680c6e4e Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Sat, 15 Nov 2025 18:33:27 +0800
Subject: [PATCH 1/5] 1

---
 src/views/ueScreen/components/date.vue      |  3 +-
 src/views/ueScreen/components/leftPage.vue  |  9 +++---
 src/views/ueScreen/components/project.vue   |  2 +-
 src/views/ueScreen/components/rightPage.vue | 32 ++++++++++++---------
 src/views/ueScreen/index.vue                |  6 ++--
 5 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/views/ueScreen/components/date.vue b/src/views/ueScreen/components/date.vue
index 682ef36..d104b4d 100644
--- a/src/views/ueScreen/components/date.vue
+++ b/src/views/ueScreen/components/date.vue
@@ -13,7 +13,6 @@
         </li>
       </ul>
     </div>
-
     <!-- 月份选择器 -->
     <div class="picker-group">
       <div class="picker-input" @click="isMonthOpen = !isMonthOpen" :class="{ 'open': isMonthOpen }">
@@ -205,7 +204,7 @@ $vh_base: 1080;
   right: 0;
   max-height: vh(200); /* 限制最大高度并可滚动 */
   overflow-y: auto;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.3);
   border-radius: vw(4);
   box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
   list-style: none;
diff --git a/src/views/ueScreen/components/leftPage.vue b/src/views/ueScreen/components/leftPage.vue
index 453f35b..7b9784e 100644
--- a/src/views/ueScreen/components/leftPage.vue
+++ b/src/views/ueScreen/components/leftPage.vue
@@ -5,7 +5,7 @@
             <div class="left">
                 <span class="top">
                     <span class="num">365</span>
-                    <span class="unit">day</span>
+                    <!-- <span class="unit">day</span> -->
                 </span>
                 <span class="desc">
                     运行天数
@@ -103,7 +103,6 @@
 </template>
 <script lang="ts" setup>
 import SmallTitle from './smalltitle.vue';
-import { ref } from 'vue';
 
 // 模拟数据量，用于拖动条渲染
 const operationData = ref({
@@ -389,19 +388,19 @@ const powerGenerationData = ref([
 
                 .infoName {
                     margin-left: vw(17);
-                    font-size: vh(20);
+                    font-size: vw(16);
                     width: vw(200);
                     height: vh(28);
                 }
 
                 .infoValue {
                     margin-left: vw(62);
-                    font-size: vh(20);
+                    font-size: vw(16);
                 }
 
                 .infoUnit {
                     margin-left: vw(34);
-                    font-size: vh(18);
+                    font-size: vw(16);
                     color: rgba(125, 255, 253, 1);
                 }
             }
diff --git a/src/views/ueScreen/components/project.vue b/src/views/ueScreen/components/project.vue
index 0d12a21..7300d13 100644
--- a/src/views/ueScreen/components/project.vue
+++ b/src/views/ueScreen/components/project.vue
@@ -157,7 +157,7 @@ $vh_base: 1080;
   right: 0;
   max-height: vh(200); /* 限制最大高度并可滚动 */
   overflow-y: auto;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.3);
   border-radius: vw(4);
   box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
   list-style: none;
diff --git a/src/views/ueScreen/components/rightPage.vue b/src/views/ueScreen/components/rightPage.vue
index 55e2910..94ff0f3 100644
--- a/src/views/ueScreen/components/rightPage.vue
+++ b/src/views/ueScreen/components/rightPage.vue
@@ -49,9 +49,9 @@ import EchartBoxTwo from '@/components/EchartBox/index.vue';
 import { option1, option2, option3 } from './options';
 import Smalltitle from './smalltitle.vue';
 
-const option_fdssgl = ref(option1);
-const option_fdzlqs = ref(option2);
-const option_dzfhqx = ref(option3);
+const option_fdssgl = ref(null);
+const option_fdzlqs = ref(null);
+const option_dzfhqx = ref(null);
 const errorListRef = ref<HTMLElement | null>(null);
 const errorList = ref([1, 2, 3, 4, 5, 6, 7]);
 
@@ -67,23 +67,27 @@ const handleWheel = (event: WheelEvent) => {
 const reszieFont = () => {
     const fontSize = Math.sqrt(window.innerWidth) / 3;
 
-    option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
-    option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
-    option_fdssgl.value.legend.textStyle.fontSize = fontSize;
+    option1.xAxis.axisLabel.fontSize = fontSize;
+    option1.yAxis.axisLabel.fontSize = fontSize;
+    option1.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;
+    option2.xAxis.axisLabel.fontSize = fontSize;
+    option2.yAxis.axisLabel.fontSize = fontSize;
+    option2.legend.textStyle.fontSize = fontSize;
+    option2.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;
+    option3.xAxis.axisLabel.fontSize = fontSize;
+    option3.yAxis.axisLabel.fontSize = fontSize;
+    option3.legend.textStyle.fontSize = fontSize;
+
+    option_fdssgl.value = option1;
+    option_fdzlqs.value = option2;
+    option_dzfhqx.value = option3;
 }
 
 onMounted(() => {
+    reszieFont();
     window.addEventListener('resize', reszieFont);
-
     window.addEventListener('wheel', handleWheel, { passive: false });
     // passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
 });
diff --git a/src/views/ueScreen/index.vue b/src/views/ueScreen/index.vue
index 8260798..9690f5a 100644
--- a/src/views/ueScreen/index.vue
+++ b/src/views/ueScreen/index.vue
@@ -2,8 +2,8 @@
   <div class="ueScreen">
     <Header :isFull="isFull" @changePage="handleChangePage" />
     <div class="content_box">
-      <LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '0' }" />
-      <RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '0' }" />
+      <LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '1vw' }" />
+      <RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '1vw' }" />
     </div>
   </div>
 </template>
@@ -93,7 +93,7 @@ $vh_base: 1080;
 .ueScreen {
   width: 100vw;
   height: 100vh;
-  // background-image: url('@/assets/ueimg/bj.png');
+  background-image: url('@/assets/ueimg/bj.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;

From 880509a99b4f8d6be5668ea6a9a4851dd70e81a5 Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Sat, 15 Nov 2025 18:33:57 +0800
Subject: [PATCH 2/5] Merge branch 'lx' of
 http://192.168.110.2:3000/taoge_xiaodi/maintenance_system into szq


From 06f4b7a0e7fbd9fab646ac4f816099a4ec084755 Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Sat, 15 Nov 2025 19:26:27 +0800
Subject: [PATCH 3/5] 1

---
 .../ueimg/1.png => public/assets/ue1.png      | Bin
 .../ueimg/2.png => public/assets/ue2.png      | Bin
 .../ueimg/3.png => public/assets/ue3.png      | Bin
 .../ueimg/4.png => public/assets/ue4.png      | Bin
 .../ueimg/5.png => public/assets/ue5.png      | Bin
 src/views/ueScreen/components/date.vue        |   2 +-
 src/views/ueScreen/components/leftPage.vue    |  10 +++----
 src/views/ueScreen/components/project.vue     |  27 ++++++++++++------
 src/views/ueScreen/index.vue                  |   8 ++----
 9 files changed, 26 insertions(+), 21 deletions(-)
 rename src/assets/ueimg/1.png => public/assets/ue1.png (100%)
 rename src/assets/ueimg/2.png => public/assets/ue2.png (100%)
 rename src/assets/ueimg/3.png => public/assets/ue3.png (100%)
 rename src/assets/ueimg/4.png => public/assets/ue4.png (100%)
 rename src/assets/ueimg/5.png => public/assets/ue5.png (100%)

diff --git a/src/assets/ueimg/1.png b/public/assets/ue1.png
similarity index 100%
rename from src/assets/ueimg/1.png
rename to public/assets/ue1.png
diff --git a/src/assets/ueimg/2.png b/public/assets/ue2.png
similarity index 100%
rename from src/assets/ueimg/2.png
rename to public/assets/ue2.png
diff --git a/src/assets/ueimg/3.png b/public/assets/ue3.png
similarity index 100%
rename from src/assets/ueimg/3.png
rename to public/assets/ue3.png
diff --git a/src/assets/ueimg/4.png b/public/assets/ue4.png
similarity index 100%
rename from src/assets/ueimg/4.png
rename to public/assets/ue4.png
diff --git a/src/assets/ueimg/5.png b/public/assets/ue5.png
similarity index 100%
rename from src/assets/ueimg/5.png
rename to public/assets/ue5.png
diff --git a/src/views/ueScreen/components/date.vue b/src/views/ueScreen/components/date.vue
index d104b4d..af931a5 100644
--- a/src/views/ueScreen/components/date.vue
+++ b/src/views/ueScreen/components/date.vue
@@ -228,7 +228,7 @@ $vh_base: 1080;
 }
 
 .options li.selected {
-  // background-color: #e6f7ff;
+  background-color: #e6f7ff;
   color: #1890ff;
   font-weight: 500;
 }
diff --git a/src/views/ueScreen/components/leftPage.vue b/src/views/ueScreen/components/leftPage.vue
index b7e2723..1264f50 100644
--- a/src/views/ueScreen/components/leftPage.vue
+++ b/src/views/ueScreen/components/leftPage.vue
@@ -117,31 +117,31 @@ const infoList = ref([
         name: '变压器220KV',
         value: 564,
         unit: '（台）',
-        icon: 'src/assets/ueimg/1.png',
+        icon: 'public/assets/ue1.png',
     },
     {
         name: '开关柜220KV',
         value: 100,
         unit: '（台）',
-        icon: 'src/assets/ueimg/2.png',
+        icon: 'public/assets/ue2.png',
     },
     {
         name: '接地变110v',
         value: 564,
         unit: '（台）',
-        icon: 'src/assets/ueimg/3.png',
+        icon: 'public/assets/ue3.png',
     },
     {
         name: '电缆110v',
         value: 768,
         unit: '（回）',
-        icon: 'src/assets/ueimg/4.png',
+        icon: 'public/assets/ue4.png',
     },
     {
         name: 'GIS',
         value: 100,
         unit: '（个）',
-        icon: 'src/assets/ueimg/5.png',
+        icon: 'public/assets/ue5.png',
     },
 ])
 
diff --git a/src/views/ueScreen/components/project.vue b/src/views/ueScreen/components/project.vue
index 7300d13..6203c0e 100644
--- a/src/views/ueScreen/components/project.vue
+++ b/src/views/ueScreen/components/project.vue
@@ -114,8 +114,9 @@ $vh_base: 1080;
 .picker-input {
   // 关键修改：设置一个最大宽度，防止文本过长导致容器被撑破
   // 你可以根据需要调整这个值，vw(300) 表示在1920px宽的屏幕下，最大宽度是300px
-  max-width: 12vw; 
-  width: 100%; /* 让输入框尽可能利用可用空间，但不超过max-width */
+  max-width: 12vw;
+  width: 100%;
+  /* 让输入框尽可能利用可用空间，但不超过max-width */
   display: flex;
   gap: vw(8);
   justify-content: space-between;
@@ -123,16 +124,21 @@ $vh_base: 1080;
   padding: vh(8) vw(16);
   cursor: pointer;
   user-select: none;
-  box-sizing: border-box; /* 确保padding不会增加元素总宽度 */
+  box-sizing: border-box;
+  /* 确保padding不会增加元素总宽度 */
 }
 
 .picker-input .value {
   color: #fff;
   // 关键修改：添加文本省略样式
-  white-space: nowrap;      /* 强制文本在一行显示 */
-  overflow: hidden;         /* 隐藏溢出的文本 */
-  text-overflow: ellipsis;  /* 显示省略号 */
-  flex-grow: 1;             /* 让 .value 元素占据可用空间，将箭头推到最右边 */
+  white-space: nowrap;
+  /* 强制文本在一行显示 */
+  overflow: hidden;
+  /* 隐藏溢出的文本 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+  flex-grow: 1;
+  /* 让 .value 元素占据可用空间，将箭头推到最右边 */
 }
 
 .picker-input.open .arrow {
@@ -155,11 +161,13 @@ $vh_base: 1080;
   top: 110%;
   left: 0;
   right: 0;
-  max-height: vh(200); /* 限制最大高度并可滚动 */
+  max-height: vh(200);
+  /* 限制最大高度并可滚动 */
   overflow-y: auto;
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: vw(4);
-  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
+  box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15);
+  /* 更明显的阴影 */
   list-style: none;
   z-index: 10;
   padding: vh(4) 0;
@@ -181,6 +189,7 @@ $vh_base: 1080;
 }
 
 .options li.selected {
+  background-color: #e6f7ff;
   color: #1890ff;
   font-weight: 500;
 }
diff --git a/src/views/ueScreen/index.vue b/src/views/ueScreen/index.vue
index 9690f5a..ea90dd0 100644
--- a/src/views/ueScreen/index.vue
+++ b/src/views/ueScreen/index.vue
@@ -20,7 +20,6 @@ import usePermissionStore from '@/store/modules/permission';
 import to from 'await-to-js';
 
 const userStore = useUserStoreHook();
-const initDone = ref(false); // ✅ 控制页面是否渲染
 const isHideOther = ref(false);
 const isFull = ref(false);
 
@@ -38,12 +37,12 @@ const handleChangePage = () => {
   }
 };
 
+// 调用静默登录接口
 const silentLogin = async (isExpired = false) => {
   const token = getToken();
   if (token && !isExpired) return true;
 
   try {
-    // 调用静默登录接口
     await to(
       userStore.login({
         username: 'admin',
@@ -62,12 +61,9 @@ const silentLogin = async (isExpired = false) => {
   return true;
 };
 
-// ✅ 页面初始化逻辑
 const initPage = async () => {
   const logged = await silentLogin();
   if (!logged) return;
-
-  initDone.value = true; // ✅ 准备完成
 };
 
 onMounted(() => {
@@ -93,7 +89,7 @@ $vh_base: 1080;
 .ueScreen {
   width: 100vw;
   height: 100vh;
-  background-image: url('@/assets/ueimg/bj.png');
+  // background-image: url('@/assets/ueimg/bj.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;

From 119af564ba669b7e32d34d88b9896153945a6f1f Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Sat, 15 Nov 2025 19:31:22 +0800
Subject: [PATCH 4/5] 1

---
 src/views/ueScreen/components/leftPage.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/ueScreen/components/leftPage.vue b/src/views/ueScreen/components/leftPage.vue
index 1264f50..945f64a 100644
--- a/src/views/ueScreen/components/leftPage.vue
+++ b/src/views/ueScreen/components/leftPage.vue
@@ -117,31 +117,31 @@ const infoList = ref([
         name: '变压器220KV',
         value: 564,
         unit: '（台）',
-        icon: 'public/assets/ue1.png',
+        icon: '/assets/ue1.png',
     },
     {
         name: '开关柜220KV',
         value: 100,
         unit: '（台）',
-        icon: 'public/assets/ue2.png',
+        icon: '/assets/ue2.png',
     },
     {
         name: '接地变110v',
         value: 564,
         unit: '（台）',
-        icon: 'public/assets/ue3.png',
+        icon: '/assets/ue3.png',
     },
     {
         name: '电缆110v',
         value: 768,
         unit: '（回）',
-        icon: 'public/assets/ue4.png',
+        icon: '/assets/ue4.png',
     },
     {
         name: 'GIS',
         value: 100,
         unit: '（个）',
-        icon: 'public/assets/ue5.png',
+        icon: '/assets/ue5.png',
     },
 ])
 

From 89d6b3d52456d50f11e4a39d42d19d2acde6a205 Mon Sep 17 00:00:00 2001
From: shi <936384804@qq.com>
Date: Tue, 23 Dec 2025 09:48:47 +0800
Subject: [PATCH 5/5] 1

---
 src/components/AutoScroll/index.vue         | 151 +++++++++++++++++
 src/views/omScreen/components/rightPage.vue | 169 ++++++++++----------
 2 files changed, 236 insertions(+), 84 deletions(-)
 create mode 100644 src/components/AutoScroll/index.vue

diff --git a/src/components/AutoScroll/index.vue b/src/components/AutoScroll/index.vue
new file mode 100644
index 0000000..8ec2fe6
--- /dev/null
+++ b/src/components/AutoScroll/index.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="auto-scroll-container" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" ref="container">
+    <div class="auto-scroll-content" ref="content" :style="{ transform: scrollEnabled ? `translate3d(0, ${Math.round(scrollY)}px, 0)` : 'none' }">
+      <div class="auto-scroll-item" :class="safety ? 'safety' : ''" v-for="(item, index) in displayList" :key="index">
+        <slot :item="item" :index="index">{{ item }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  items: any[];
+  speed?: number;
+  height?: number;
+  minItems?: number;
+  autoScroll?: boolean;
+  safety?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  speed: 0.4,
+  minItems: 2,
+  autoScroll: true
+});
+
+const container = ref<HTMLElement | null>(null);
+const content = ref<HTMLElement | null>(null);
+
+let scrollY = 0;
+let animationFrameId: number | null = null;
+let manualPaused = false;
+let manualControl = false;
+
+// 是否满足滚动条件
+const scrollEnabled = computed(() => props.items.length >= props.minItems);
+
+// 展示数据列表（数据足够时复制一份）
+const displayList = computed(() => (scrollEnabled.value ? [...props.items, ...props.items] : props.items));
+
+// 修正 scrollY 范围
+function normalizeScrollY(contentHeight: number) {
+  scrollY = (((scrollY % contentHeight) + contentHeight) % contentHeight) - contentHeight;
+}
+
+// 滚动逻辑
+function step() {
+  if (!content.value) return;
+  const contentHeight = content.value.offsetHeight / 2;
+  scrollY -= props.speed;
+  normalizeScrollY(contentHeight);
+  content.value.style.transform = `translate3d(0, ${Math.round(scrollY)}px, 0)`;
+  animationFrameId = requestAnimationFrame(step);
+}
+
+function startScroll() {
+  if (!animationFrameId) {
+    animationFrameId = requestAnimationFrame(step);
+  }
+}
+
+function pauseScroll() {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId);
+    animationFrameId = null;
+  }
+}
+
+function onMouseEnter() {
+  if (!manualControl) pauseScroll();
+}
+
+function onMouseLeave() {
+  if (!manualControl && props.autoScroll && scrollEnabled.value) startScroll();
+}
+
+function onWheel(e: WheelEvent) {
+  if (!content.value || !container.value) return;
+
+  const contentHeight = content.value.offsetHeight / (scrollEnabled.value ? 2 : 1);
+  const containerHeight = container.value.offsetHeight;
+
+  if (contentHeight <= containerHeight) {
+    e.preventDefault();
+    return;
+  }
+
+  manualPaused = true;
+  pauseScroll();
+  scrollY -= e.deltaY;
+  normalizeScrollY(contentHeight);
+  content.value.style.transform = `translate3d(0, ${Math.round(scrollY)}px, 0)`;
+}
+
+// 生命周期
+onMounted(() => {
+  if (scrollEnabled.value && props.autoScroll) {
+    startScroll();
+  }
+  container.value?.addEventListener('wheel', onWheel, { passive: false });
+});
+
+onUnmounted(() => {
+  pauseScroll();
+  container.value?.removeEventListener('wheel', onWheel);
+});
+
+// 监听数据是否滚动条件满足
+watch(scrollEnabled, (newVal) => {
+  if (!newVal) {
+    pauseScroll();
+    scrollY = 0;
+    if (content.value) content.value.style.transform = 'none';
+  } else if (props.autoScroll && !manualPaused && !manualControl) {
+    startScroll();
+  }
+});
+
+// 暴露控制方法
+defineExpose({
+  pause: (): void => {
+    manualControl = true;
+    pauseScroll();
+  },
+  resume: (): void => {
+    manualControl = false;
+    if (scrollEnabled.value) startScroll();
+  },
+  reset: (): void => {
+    scrollY = 0;
+    if (content.value) {
+      content.value.style.transform = 'translate3d(0, 0, 0)';
+    }
+  }
+});
+</script>
+
+<style scoped>
+.auto-scroll-container {
+  overflow: hidden;
+  position: relative;
+}
+.auto-scroll-content {
+  display: flex;
+  flex-direction: column;
+  will-change: transform;
+}
+.safety:nth-child(odd) {
+  background-color: rgba(67, 226, 203, 0.2);
+}
+</style>
diff --git a/src/views/omScreen/components/rightPage.vue b/src/views/omScreen/components/rightPage.vue
index 3e98b03..ee89b5c 100644
--- a/src/views/omScreen/components/rightPage.vue
+++ b/src/views/omScreen/components/rightPage.vue
@@ -1,34 +1,58 @@
 <template>
     <div class="right_box">
-        <div class="data_box">
+        <div class="top_box">
             <Title title="年发电量" />
             <div class="echarts">
                 <EchartBoxTwo :option="option_fdssgl" ref="barChart" />
             </div>
         </div>
         <!--  -->
-        <div class="data_box">
+        <div class="end_box">
             <Title title="报警统计" />
-    
+            <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="cell-text">报警ID</div>
+                            <div class="cell-text">
+                                报警类型
+                            </div>
+                            <div class="cell-text">
+                                报警详情
+                            </div>
+                            <div class="cell-text">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</div>
+                            <div class="cell-text cursor-pointer">查看</div>
+                        </div>
+                    </template>
+                </AutoScroller>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import EchartBoxTwo from '@/components/EchartBox/index.vue';
-import { option1, option2, option3 } from './options';
+import AutoScroller from '@/components/AutoScroll/index.vue';
+import { option1 } from './options';
 import Title from './title.vue';
+import { dayjs } from 'element-plus';
 
 const option_fdssgl = ref(option1);
-const option_fdzlqs = ref(option2);
-const handleWheel = (event: WheelEvent) => {
-    const errorList = (event.target as HTMLElement).closest('.error_list');
-
-    if (errorList) {
-        event.preventDefault(); // 阻止页面或父元素的垂直滚动
-        errorList.scrollLeft += event.deltaY; // 横向滚动
-    }
-};
+const bjList = ref([
+    {createTime: '2025-11-11 11:11:11'},
+    {createTime: '2025-11-11 11:11:11'},
+    {createTime: '2025-11-11 11:11:11'},
+    {createTime: '2025-11-11 11:11:11'},
+    {createTime: '2025-11-11 11:11:11'},
+])
+const activebj = ref('')
 
 const reszieFont = () => {
     const fontSize = Math.sqrt(window.innerWidth) / 3;
@@ -36,27 +60,14 @@ 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(() => {
     window.addEventListener('resize', reszieFont);
-
-    window.addEventListener('wheel', handleWheel, { passive: false });
-    // passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
 });
 
 onUnmounted(() => {
     window.removeEventListener('resize', reszieFont);
-    window.removeEventListener('wheel', handleWheel);
 });
 </script>
 
@@ -85,15 +96,7 @@ $vh_base: 1080;
     margin-right: vw(20);
 }
 
-.statistic {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: vh(10);
-    background: $background-color;
-}
-
-.data_box {
+.top_box {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -107,60 +110,58 @@ $vh_base: 1080;
     }
 }
 
-.error_tip_box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: vw(5);
-    margin-right: vw(8);
-
-    img {
-        width: vw(20);
-        height: vh(20);
-    }
-
-    .error_tip {
-        height: vh(26);
-        width: vw(81);
-        border-radius: vw(13);
-        background: rgba(0, 255, 238, 0.12);
-        color: rgba(0, 255, 238, 1);
-        font-size: vw(10);
-        text-align: center;
-        line-height: vh(26);
-    }
+.end_box {
+    flex: 1;
+    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;
+.bj-list {
+    margin: vh(10) vw(10);
+    margin-top: vh(16);
+    font-family: 'Roboto Condensed';
+    font-size: vw(12);
 
-    .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(8);
+    &>div:first-child {
+        padding: vh(6) 0 vh(6) vw(8);
+        margin-bottom: vh(10);
+        background: rgba(67, 226, 203, 0.1);
+    }
 
-        .item_info {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            font-size: vw(14);
-            font-weight: bold;
-            margin-bottom: vh(10);
-        }
+    .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;
+    }
 
-        .item_headline {
-            font-size: vw(16);
-        }
+    .bj-content {
+        height: vh(180);
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+
+    .item {
+        padding: vh(6) 0;
+        padding-left: vw(8);
+    }
+
+    .cell-text {
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    .active {
+        color: rgb(66, 227, 203);
+        background: rgba(67, 226, 203, 0.15);
+    }
+
+    .ellipsis {
+        text-overflow: ellipsis;
     }
 }
 </style>