src/pages/LineMonitorPage.vue

@@ -5,73 +5,19 @@
     </q-page-container>
     <div
       v-if="faultInfo"
-      style="
-        position: absolute;
-        right: 0;
-        top: 10px;
-        background: white;
-        width: 400px;
-      "
+      style="position: fixed; right: 0; top: 10%; background: white"
     >
       <div style="width: 100%; text-align: right" class="bg-primary q-pa-ms">
         <q-icon
-          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"
+          name="close"
+          size="xs"
           style="cursor: pointer"
           @click="() => (faultInfo = false)"
         />
       </div>
-      <div
-        v-if="!faultInfoMin"
-        class="q-pa-ms"
-        style="
-          background: white;
-          max-width: 400px;
-          height: 268px;
-          overflow-y: scroll;
-        "
-      >
+      <div class="q-pa-ms column" style="background: white; max-width: 400px">
         <template v-for="(item, index) in timeInfoLabel" :key="index">
-          <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
+          <q-chip
             removable
             @remove="handleRemoveInfo(index)"
             color="primary"
@@ -80,7 +26,7 @@
             :label="item"
           >
             <q-tooltip v-if="item.length > 34"> {{ item }} </q-tooltip>
-          </q-chip> -->
+          </q-chip>
         </template>
       </div>
     </div>
@@ -106,7 +52,6 @@ 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([]);