From 7b4cdd2b3c2ff12db9a7c862fff1a41afc6cbcb5 Mon Sep 17 00:00:00 2001
From: ljx <15723110242@139.com>
Date: Mon, 3 Nov 2025 18:56:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc-auto-import.json                    |  10 +-
 .../largeScreen/components/optionList.ts      |   8 +-
 .../largeScreen/components/rightPage.vue      | 222 +++++++++++++++---
 3 files changed, 197 insertions(+), 43 deletions(-)

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index d1b1c9e..18f1776 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -5,10 +5,6 @@
     "ComputedRef": true,
     "DirectiveBinding": true,
     "EffectScope": true,
-    "ElLoading": true,
-    "ElMessage": true,
-    "ElMessageBox": true,
-    "ElNotification": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,
@@ -318,6 +314,10 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "ElMessage": true,
+    "ElLoading": true,
+    "ElMessageBox": true,
+    "ElNotification": true
   }
 }
diff --git a/src/views/largeScreen/components/optionList.ts b/src/views/largeScreen/components/optionList.ts
index 5836b87..64c426a 100644
--- a/src/views/largeScreen/components/optionList.ts
+++ b/src/views/largeScreen/components/optionList.ts
@@ -56,7 +56,7 @@ export const getOption = (xData: any, yData: any) => {
       {
         // show: true,
         start: 0,
-        end: 30,
+        end: 100,
         bottom: 2, // 下滑块距离x轴底部的距离
         height: 23
       },
@@ -177,7 +177,7 @@ export const getOption2 = (data: any) => {
         // show: true,
 
         start: 0,
-        end: 30,
+        end: 100,
         bottom: 2, // 下滑块距离x轴底部的距离
         height: 23
       },
@@ -322,7 +322,7 @@ export const getLineOption = (lineData: any) => {
       {
         // show: true,
         start: 0,
-        end: 30,
+        end: 100,
         bottom: 2, // 下滑块距离x轴底部的距离
         height: 23
       },
@@ -674,7 +674,7 @@ export const getBarOptions = (data: any) => {
       {
         // show: true,
         start: 0,
-        end: 30,
+        end: 100,
         bottom: 2, // 下滑块距离x轴底部的距离
         height: 23
       },
diff --git a/src/views/largeScreen/components/rightPage.vue b/src/views/largeScreen/components/rightPage.vue
index 93b0ad5..07531fb 100644
--- a/src/views/largeScreen/components/rightPage.vue
+++ b/src/views/largeScreen/components/rightPage.vue
@@ -5,28 +5,38 @@
       <div class="header">
         <img src="@/assets/large/right1.png" style="width: 17px; height: 18px" alt="" />
         <span class="title">告警信息中心</span>
-        <!-- <el-badge :value="unhandledCount" class="unhandled-badge" type="danger"> {{ unhandledCount }}条未处理 </el-badge> -->
         <span class="jgao">{{ alarmData.length }}条信息未处理</span>
       </div>
-      <!-- 告警卡片列表（可循环渲染，这里演示单条） -->
+      <!-- 告警卡片列表 -->
       <div class="alarm_list">
-        <el-card class="alarm-card" shadow="hover" v-for="(item, index) in alarmData" :key="index">
+        <div class="alarm-card" v-for="(item, index) in alarmData" :key="index">
           <div class="card-header">
             <img src="@/assets/large/right2.png" style="width: 15px; height: 15px" alt="" />
             <span class="card-title">{{ item.alarmMsg }}</span>
             <span class="time">{{ formatDate(item.alarmBeginTime) }}</span>
           </div>
-          <div class="card-content">
-            {{ item.advice }}
-          </div>
           <div class="card-footer">
             <el-tag type="danger" size="small">紧急</el-tag>
             <el-tag type="danger" size="small">处理</el-tag>
           </div>
-        </el-card>
+          <div class="card-content">
+            <!-- 文本容器：控制3行溢出 -->
+            <div class="text-container">
+              {{ item.advice }}
+            </div>
+            <!-- 查看更多按钮：右侧显示 -->
+            <div class="read-more" @click="open(item)">查看更多</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="detailBox" :class="{ 'show': newDetail }">
+      <div class="boxContent" v-html="newDetail?.advice"></div>
+      <!-- 假设 item 有 content 字段，根据实际调整 -->
+      <div class="close" @click="newDetail = null">
+        <CircleClose style="width: 1.2em; height: 1.2em" />
       </div>
     </div>
-
     <div class="overview">
       <div class="left_title">
         <div style="display: flex; align-items: center">
@@ -73,7 +83,7 @@
                 <span
                   class="progress-percent"
                   :class="{
-                    green1: item.rate >= 99, // 可根据需求调整颜色规则
+                    green1: item.rate >= 99,
                     orange1: item.rate < 99 && item.rate >= 90
                   }"
                   >{{ item.rate }}%</span
@@ -84,7 +94,7 @@
                   class="progress-fg"
                   :style="{ width: item.rate + '%' }"
                   :class="{
-                    green: item.rate >= 99, // 可根据需求调整颜色规则
+                    green: item.rate >= 99,
                     orange: item.rate < 99 && item.rate >= 90
                   }"
                 ></div>
@@ -93,7 +103,6 @@
           </div>
           <div class="container_item_two">
             <div>正常{{ item.normal }}台</div>
-
             <div>异常{{ item.abnormal }}台</div>
           </div>
         </div>
@@ -103,15 +112,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, nextTick, onUnmounted } from 'vue';
 import { getAlarmListOverview } from '@/api/large';
 import { formatDate } from '@/utils/index';
 
-const alarmData: any = ref({});
+const alarmData = ref<any[]>([]);
 const deviceStats = ref([
   {
     name: '光伏组件',
-    icon: '../../../assets/large/right5.png', // 示例图标
+    icon: '../../../assets/large/right5.png',
     total: '25,680',
     unit: '块',
     rate: 99.2,
@@ -155,13 +164,85 @@ const deviceStats = ref([
     abnormal: 12
   }
 ]);
+
+// 存储所有绑定的事件处理函数，用于卸载时解绑
+const eventHandlers: Array<() => void> = [];
+
+// 处理“查看更多/收起”逻辑
+const handleReadMore = async () => {
+  await nextTick();
+
+  const textContainers: any = document.querySelectorAll('.alarm-card .text-container');
+  const readMoreBtns: any = document.querySelectorAll('.alarm-card .read-more');
+
+  // 清空之前的事件绑定（避免重复绑定）
+  eventHandlers.forEach((handler) => handler());
+  eventHandlers.length = 0;
+
+  textContainers.forEach((textContainer, index) => {
+    const btn = readMoreBtns[index] as HTMLDivElement;
+    if (!btn) return;
+
+    // 关键修改：判断文本是否超过3行（scrollHeight > clientHeight 表示溢出）
+    const isOverflow = textContainer.scrollHeight > textContainer.clientHeight;
+    btn.style.display = isOverflow ? 'inline-block' : 'none';
+
+    // 定义点击事件处理函数
+    // const toggleExpand = () => {
+    //   const isExpanded = textContainer.style.webkitLineClamp === 'none';
+    //   if (isExpanded) {
+    //     // 收起：恢复3行限制
+    //     textContainer.style.webkitLineClamp = '3';
+    //     btn.textContent = '查看更多';
+    //   } else {
+    //     // 展开：取消行数限制
+    //     textContainer.style.webkitLineClamp = 'none';
+    //     btn.textContent = '收起';
+    //   }
+    // };
+
+    // 绑定点击事件并存储，用于后续解绑
+    // btn.addEventListener('click', toggleExpand);
+    // eventHandlers.push(() => {
+    //   btn.removeEventListener('click', toggleExpand);
+    // });
+  });
+};
+
+// 接口请求：获取告警数据后执行处理逻辑
 const getAlarm = () => {
   getAlarmListOverview().then((res) => {
     console.log(res);
     alarmData.value = res.data;
+    handleReadMore(); // 数据渲染后执行文本溢出处理
   });
 };
+// 初始化调用接口
 getAlarm();
+// 定义 item 类型（替换 any，提升类型安全性）
+interface ItemType {
+  id: string | number;
+  advice: string; // 存储富文本内容的字段，根据实际数据结构调整
+  // 其他字段...
+}
+const newDetail = ref(null);
+
+// 假设 item 是当前列表项（实际可能来自 v-for 循环）
+const item = ref<ItemType>({
+  id: 1,
+  advice: '<p>这是要显示的详情内容...</p>' // 示例富文本内容
+});
+
+// 切换展开/隐藏逻辑
+const open = (targetItem: ItemType) => {
+  // 如果当前展开的就是目标项 → 隐藏；否则 → 展开目标项
+  newDetail.value = newDetail.value === targetItem ? null : targetItem;
+  console.log(newDetail.value);
+};
+// 组件卸载时解绑所有事件（避免内存泄漏）
+onUnmounted(() => {
+  eventHandlers.forEach((handler) => handler());
+});
 </script>
 
 <style scoped lang="scss">
@@ -171,10 +252,9 @@ getAlarm();
 }
 
 .alarm-container {
-  border: 1px solid #1e2b3d; /* 深色背景模拟，可替换成项目背景 */
+  border: 1px solid #1e2b3d;
   border-radius: 8px;
   color: #fff;
-  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   padding: 10px;
 }
 
@@ -203,8 +283,8 @@ getAlarm();
 .alarm_list {
   width: 100%;
   padding: 5px 0;
-  height: 14vh;
-  overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+  height: 17vh;
+  // overflow-y: auto; /* 垂直方向超出时显示滚动条 */
 }
 // 滚动条优化
 .alarm_list::-webkit-scrollbar {
@@ -220,18 +300,19 @@ getAlarm();
 }
 /* 告警卡片 */
 .alarm-card {
+  height: 100%;
   background: rgba(12, 30, 53, 0.3);
   color: #fff;
   border: none;
   border-radius: 8px;
   border: 1px solid #f56c6c;
-  margin-top: 10px;
+  padding: 5px;
+  margin-bottom: 8px; /* 增加卡片间距，避免重叠 */
 }
 .card-header {
   display: flex;
   align-items: center;
-  // justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 .card-title {
   font-size: 16px;
@@ -244,16 +325,49 @@ getAlarm();
   color: #909399;
   margin-left: auto; /* 右对齐 */
 }
+/* 关键修改：卡片内容容器（承载文本和按钮） */
 .card-content {
   font-size: 13px;
   color: #dcdfe6;
-  margin-bottom: 12px;
+  // margin-bottom: 12px;
   line-height: 1.6;
+  position: relative;
+  width: 100%;
+  line-height: 1.5;
+  // padding-right: 70px; /* 给右侧按钮预留空间，避免超出卡片 */
+  min-height: 4.5em; /* 3行文本高度（1.5line-height * 3），确保按钮位置稳定 */
+}
+
+/* 关键修改：文本容器（限制3行） */
+.text-container {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3; /* 限制显示3行 */
+  overflow: hidden;
+  word-break: break-all;
+  padding-bottom: 2px; /* 避免文本底部被按钮遮挡 */
+}
+
+/* 关键修改：查看更多按钮（右侧显示+深色适配） */
+.read-more {
+  display: none;
+  position: absolute;
+  right: 0;
+  bottom: -20px;
+  /* 渐变遮罩改为卡片背景色，避免白色块 */
+  background: linear-gradient(to right, transparent, rgba(12, 30, 53, 0.3) 60%);
+  padding-left: 15px; /* 增加遮罩宽度，避免文字与按钮重叠 */
+  color: #1677ff;
+  cursor: pointer;
+  z-index: 1; /* 确保按钮在文本上方 */
+  white-space: nowrap; /* 按钮文字不换行 */
+  font-size: 13px; /* 与文本字号一致 */
 }
 .card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-bottom: 5px;
 }
 .left_title {
   width: 100%;
@@ -290,7 +404,7 @@ img {
 }
 .overview {
   width: 100%;
-  height: 28vh;
+  height: 25vh;
   padding: 10px;
   border-radius: 10px;
   border: 1px solid #1e2b3d;
@@ -301,7 +415,7 @@ img {
     width: 100%;
     font-size: 14px;
     line-height: 30px;
-    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+    overflow-y: auto;
   }
   // 滚动条优化
   .overview_content::-webkit-scrollbar {
@@ -325,15 +439,14 @@ img {
   border-radius: 10px;
 
   .stats-container {
-    width: 100%; /* 可根据实际场景调整宽度 */
+    width: 100%;
     height: 87%;
     padding: 10px;
     border-radius: 8px;
     box-sizing: border-box;
-    overflow-y: auto; /* 垂直方向超出时显示滚动条 */
+    overflow-y: auto;
     .container_item {
       width: 100%;
-
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -359,13 +472,10 @@ img {
             flex-direction: column;
             justify-content: space-between;
             padding-left: 10px;
-            // align-items: center;
           }
         }
-        /* 右侧区域：进度条 + 数据 */
         .card-right {
           display: flex;
-
           margin-left: 10px;
           justify-content: space-between;
           align-items: center;
@@ -381,7 +491,7 @@ img {
           font-weight: bold;
         }
         .abnormal {
-          color: #ff9900; /* 异常数据颜色 */
+          color: #ff9900;
         }
         .progress-bg {
           height: 6px;
@@ -397,7 +507,6 @@ img {
           width: 100px;
           transition: width 0.3s;
         }
-        /* 进度条颜色区分（可扩展更多规则） */
         .green {
           background-color: #28a745;
         }
@@ -429,14 +538,59 @@ img {
     width: 5px;
     height: 5px;
   }
-
   .stats-container::-webkit-scrollbar-thumb {
     background-color: #0ff;
     border-radius: 5px;
   }
-
   .stats-container::-webkit-scrollbar-track {
     background-color: rgba(0, 255, 255, 0.2);
   }
 }
+.detailBox {
+  display: flex;
+  position: absolute;
+  right: 0;
+  top: 10vh;
+  width: 300px;
+  padding: 20px 15px;
+  box-sizing: border-box;
+  /* background: rgba(138, 157, 161, 0.5); */
+  background: #040c1c;
+  // border: 2px dashed rgba(29, 214, 255, 0.3);
+  border-right: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  opacity: 0;
+  z-index: -1;
+
+  & > .boxContent {
+    flex: 1;
+    height: 300px;
+    max-height: 500px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track {
+      background: rgba(204, 204, 204, 0.1);
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(29, 214, 255, 0.78);
+      border-radius: 10px;
+    }
+  }
+
+  &.show {
+    right: 25vw;
+    opacity: 1;
+    z-index: 1;
+  }
+
+  .close {
+    position: absolute;
+    top: 3px;
+    right: 7px;
+    cursor: pointer;
+  }
+}
 </style>