切换路由自动关闭弹框

src/components/dialog/FaultQueryDialog.vue

@@ -5,7 +5,7 @@
     @show="onDialogShow"
     title="故障查询"
     :width="990"
-    :height="580"
+    :height="600"
   >
     <div class="dialogContainer">
       <q-table
@@ -17,7 +17,7 @@
         :columns="columns"
         @request="onRequest"
         :rows-per-page-options="[10, 20, 50, 100]"
-        style="width: 500px; height: 580px"
+        style="width: 500px; height: 600px"
       >
         <template v-slot:body="props">
           <q-tr
@@ -45,7 +45,7 @@
         </template>
       </q-table>
 
-      <q-scroll-area style="width: 490px; height: 560px">
+      <q-scroll-area style="width: 490px; height: 580px">
         <div class="detaiRow">
           <div class="text">
             <span class="textHead">故障类型</span> ：{{
@@ -200,6 +200,11 @@ const onRequest: QTable['onRequest'] = async (props) => {
     rows.splice(0, rows.length, ...(resp.records as []));
     if (rows.length) {
       handleRowClick(rows[0]);
+    } else {
+      clickRowInfo.faultType = '';
+      clickRowInfo.faultNameShower = '';
+      clickRowInfo.faultDriverShower = '';
+      clickRowInfo.resultMsg = '';
     }
   } catch (err) {
     $q.notify({
@@ -331,7 +336,7 @@ const onDialogShow = () => {
     }
     .box-card {
       width: 450px;
-      height: 225px;
+      height: 235px;
       margin-bottom: 10px;
       padding: 0 5px;
       .head {

src/layouts/MainLayout.vue

@@ -108,7 +108,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
 import SysMenu from 'src/components/SysMenu.vue';
 import { useRouter, useRoute } from 'vue-router';
 import { Dialog, DialogChainObject, useQuasar } from 'quasar';
@@ -141,6 +141,17 @@ const router = useRouter();
 const route = useRoute();
 const lineStore = useLineStore();
 const lineNetStore = useLineNetStore();
+
+watch(
+  () => route.path,
+  () => {
+    if (!route.path.includes('line/monitor') && faultQueryDialogInstance) {
+      faultQueryDialogInstance.hide();
+      faultQueryDialogInstance = null;
+    }
+  }
+);
+
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;
   onResize();
@@ -187,8 +198,10 @@ onMounted(() => {
   socket = webSocketConnect(destination, handler);
 });
 
+let faultQueryDialogInstance: DialogChainObject | null = null;
 function openFaultQueryDialog() {
-  $q.dialog({
+  if (faultQueryDialogInstance) return;
+  faultQueryDialogInstance = $q.dialog({
     component: FaultQueryDialog,
   });
 }