添加搜索功能

src/layouts/DrawLayout.vue

@@ -64,6 +64,28 @@
             </template>
           </q-btn-toggle>
         </q-toolbar-title>
+        <q-btn square color="purple" style="margin-right: 10px" icon="search">
+          <q-popup-edit
+            ref="popupEdit"
+            v-model="searchId"
+            :cover="false"
+            :offset="[0, 10]"
+            v-slot="scope"
+          >
+            <q-input
+              color="accent"
+              v-model="scope.value"
+              label="设备Id"
+              dense
+              autofocus
+              @keyup.enter="scope.set"
+            >
+              <template v-slot:prepend>
+                <q-icon name="search" color="accent" />
+              </template>
+            </q-input>
+          </q-popup-edit>
+        </q-btn>
         <q-btn color="info" label="返回" @click="backConfirm" />
         <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
       </q-toolbar>
@@ -208,7 +230,6 @@ import { Separator } from 'src/graphics/separator/Separator';
 import { SeparatorDraw } from 'src/graphics/separator/SeparatorDrawAssistant';
 import { SectionLink } from 'src/graphics/sectionLink/SectionLink';
 import { SectionLinkDraw } from 'src/graphics/sectionLink/SectionLinkDrawAssistant';
-import { store } from 'quasar/wrappers';
 import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCountingSection';
 import { AxleCountingSectionDraw } from 'src/graphics/axleCountingSection/AxleCountingSectionAssistant';
 import { SectionDraw } from 'src/graphics/section/SectionDrawAssistant';
@@ -218,6 +239,7 @@ import { LogicSectionDraw } from 'src/graphics/logicSection/LogicSectionDrawAssi
 
 const route = useRoute();
 const router = useRouter();
+const searchId = ref('');
 
 const drawStore = useDrawStore();
 
@@ -229,6 +251,20 @@ watch(
     }
   }
 );
+watch(
+  () => searchId.value,
+  () => {
+    if (searchId.value) {
+      const device = drawStore
+        .getDrawApp()
+        .queryStore.queryById(searchId.value);
+      if (device) {
+        drawStore.getDrawApp().makeGraphicCenterShow(device);
+        drawStore.getDrawApp().updateSelected(device);
+      }
+    }
+  }
+);
 
 const leftDrawerOpen = ref(false);
 const rightDrawerOpen = ref(false);
@@ -390,7 +426,6 @@ function oneClickTurnoutSection() {
     .getDrawAssistant<SectionDraw>(Section.Type);
   SDA.generateTurnoutSection();
 }
-
 function backConfirm() {
   router.go(-1);
 }