切换场景和结束样式调整

src/layouts/LineLayout.vue

@@ -2,26 +2,20 @@
   <q-layout view="hHh LpR fFf">
     <q-header reveal class="bg-primary text-white">
       <q-toolbar>
-        <q-btn-dropdown color="info" label="切换场景">
-          <q-list>
-            <q-item
-              v-for="(item, index) in projectInfo.mapInfoLinks"
-              :key="index"
-              :disable="item.id == lineStore.mapId"
-              clickable
-              v-close-popup
-              @click="switchScene(item)"
-            >
-              <q-item-section>
-                <q-item-label>{{ item.name }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-btn-dropdown>
+        <q-select
+          dark
+          dense
+          label-color="grey-13"
+          v-model="sceneInfo"
+          @update:model-value="switchScene"
+          :options="sceneOptions"
+          :option-label="(item) => item.name"
+          label="切换场景"
+        ></q-select>
         <q-toolbar-title> {{ projectName }} </q-toolbar-title>
         <q-btn
-          color="info"
-          label="销毁仿真"
+          color="red"
+          label="结束"
           class="q-mr-md"
           @click="destroySimAndBack"
         />
@@ -62,7 +56,7 @@ import {
   nextTick,
 } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
-import { usePslStore } from 'src/stores/psl-store.ts';
+import { usePslStore } from 'src/stores/psl-store';
 import { useRoute, useRouter } from 'vue-router';
 import { destroySimulation } from 'src/api/Simulation';
 import StateProperties from 'src/components/line-app/StateProperties.vue';
@@ -90,6 +84,11 @@ const drawerRight = ref(false);
 
 const projectName = computed(() => projectInfo.name);
 
+const sceneOptions = computed(() => {
+  return projectInfo.mapInfoLinks || [];
+});
+const sceneInfo = ref();
+
 function onResize() {
   const clientWidth = document.documentElement.clientWidth;
   const clientHeight = document.documentElement.clientHeight;
@@ -131,6 +130,7 @@ onMounted(async () => {
           return item.id == lineStore.mapId;
         });
         if (find) {
+          sceneInfo.value = find;
           sceneName = getSceneNameFn(find);
         }
         lineStore.addAllScene(projectInfo.mapInfoLinks || []);
@@ -197,22 +197,36 @@ watch(
   }
 );
 function destroySimAndBack() {
-  if (simulationId) {
-    destroySimulation({ simulationId });
-  }
-  backConfirm();
+  $q.dialog({
+    title: '确认',
+    message: `确认结束项目 "${projectName.value}" 吗?`,
+    cancel: true,
+  }).onOk(async () => {
+    try {
+      if (simulationId) {
+        await destroySimulation({ simulationId });
+      }
+      backConfirm();
+    } catch (err) {
+      const error = err as ApiError;
+      $q.notify({
+        type: 'negative',
+        message: error.title,
+      });
+      backConfirm();
+    }
+  });
 }
 
 function switchScene(val: MapInfo) {
   if (val.id == lineStore.mapId) return;
-  scene && scene.unbindDom();
   lineStore.setMapId(val.id);
   sceneName = getSceneNameFn(val);
   lineStore.setSceneName(sceneName);
-  scene = lineApp.getScene(sceneName);
   const dom = document.getElementById('line-app-container');
   if (dom) {
-    scene.bindDom(dom);
+    lineApp.switchScene(sceneName, dom);
+    scene = lineApp.getScene(sceneName);
     scene.reload();
   }
 }