故障时间展示调整

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"
+          name="add_circle"
-          size="xs"
+          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([]);