From 6252bf426c9b4ec3013024854f6d07682e421782 Mon Sep 17 00:00:00 2001
From: joylink_fanyuhong <18706759286@163.com>
Date: Wed, 20 Nov 2024 16:03:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=85=E9=9A=9C=E6=97=B6=E9=97=B4=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/LineMonitorPage.vue | 67 +++++++++++++++++++++++++++++++----
 1 file changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/pages/LineMonitorPage.vue b/src/pages/LineMonitorPage.vue
index bf49637..1ebd065 100644
--- a/src/pages/LineMonitorPage.vue
+++ b/src/pages/LineMonitorPage.vue
@@ -5,19 +5,73 @@
     </q-page-container>
     <div
       v-if="faultInfo"
-      style="position: fixed; right: 0; top: 10%; background: white"
+      style="
+        position: absolute;
+        right: 0;
+        top: 10px;
+        background: white;
+        width: 400px;
+      "
     >
       <div style="width: 100%; text-align: right" class="bg-primary q-pa-ms">
         <q-icon
-          name="close"
-          size="xs"
+          name="add_circle"
+          size="md"
+          v-if="faultInfoMin"
+          style="cursor: pointer"
+          @click="() => (faultInfoMin = false)"
+        />
+        <q-icon
+          name="remove_circle"
+          size="md"
+          v-if="!faultInfoMin"
+          style="cursor: pointer"
+          @click="() => (faultInfoMin = true)"
+        />
+        <q-icon
+          name="cancel"
+          size="md"
           style="cursor: pointer"
           @click="() => (faultInfo = false)"
         />
       </div>
-      <div class="q-pa-ms column" style="background: white; max-width: 400px">
+      <div
+        v-if="!faultInfoMin"
+        class="q-pa-ms"
+        style="
+          background: white;
+          max-width: 400px;
+          height: 268px;
+          overflow-y: scroll;
+        "
+      >
         <template v-for="(item, index) in timeInfoLabel" :key="index">
-          <q-chip
+          <div
+            class="row justify-between q-ma-sm bg-blue text-white"
+            style="border-radius: 5px; padding: 5px"
+          >
+            <div
+              style="
+                max-width: 250px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              "
+            >
+              {{ item.split('--')[0] }}
+              <q-tooltip>{{ item.split('--')[0] }}</q-tooltip>
+            </div>
+            <div>
+              <span>{{ item.split('--')[1] }}</span>
+              <q-icon
+                name="cancel"
+                size="xs"
+                style="cursor: pointer; margin-left: 10px"
+                @click="handleRemoveInfo(index)"
+              />
+            </div>
+          </div>
+          <!-- <q-chip
             removable
             @remove="handleRemoveInfo(index)"
             color="primary"
@@ -26,7 +80,7 @@
             :label="item"
           >
             <q-tooltip v-if="item.length > 34"> {{ item }} </q-tooltip>
-          </q-chip>
+          </q-chip> -->
         </template>
       </div>
     </div>
@@ -52,6 +106,7 @@ const route = useRoute();
 const lineStore = useLineStore();
 const lineNetStore = useLineNetStore();
 const faultInfo = ref(false);
+const faultInfoMin = ref(false);
 const alarmInfoList: AlarmInfo[] = reactive([]);
 let timeInterval = null;
 let timeInfoLabel: string[] = reactive([]);