创建仿真

src/api/PublishApi.ts

@@ -79,7 +79,7 @@ export async function getPublishLineNet(): Promise<Item> {
  * 获取发布地图详细信息
  * @param id 发布地图线路ID
  */
-export async function getPublishMapInfoByLineId(lineId: number): Promise<Item> {
+export async function getPublishMapInfoByLineId(lineId: string): Promise<Item> {
   const response = await api.get(`${PublishUriBase}/${lineId}`);
   return response.data;
 }

src/api/Simulation.ts

@@ -0,0 +1,21 @@
+import { api } from 'src/boot/axios';
+
+const UriBase = '/api/simulation';
+
+/**
+ * 创建仿真
+ * @param mapId 地图id
+ */
+export async function createSimulation(data: { mapId: number }) {
+  const response = await api.post(`${UriBase}/create`, data);
+  return response.data;
+}
+
+/**
+ * 销毁仿真
+ * @param simulationId 仿真id
+ */
+export async function destroySimulation(data: { simulationId: string }) {
+  const response = await api.post(`${UriBase}/destroy`, data);
+  return response.data;
+}

src/configs/UrlManage.ts

@@ -3,6 +3,7 @@ function getHost(): string {
   // return '192.168.3.47:9091';
   // return '192.168.3.37:9091';
   // return '192.168.3.15:9091';
+  // return '192.168.3.5:9091';
   return '192.168.3.233:9091';
 }
 
@@ -11,5 +12,5 @@ export function getHttpBase() {
 }
 
 export function getWebsocketUrl() {
-  return `ws://${getHost()}/ws-default`;
+  return `ws://${getHost()}/ws-bj`;
 }

src/drawApp/lineApp.ts

@@ -46,6 +46,7 @@ import {
   TrainWindowTemplate,
 } from 'src/graphics/trainWindow/TrainWindow';
 import { TrainWindowData } from './graphics/TrainWindowInteraction';
+import { useRoute } from 'vue-router';
 
 let lineApp: GraphicApp | null = null;
 let msgBroker: AppWsMsgBroker | null = null;
@@ -99,12 +100,14 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
 
 export async function loadLineDatas(app: GraphicApp) {
   const lineStore = useLineStore();
-  const lineId = lineStore.lineId;
-  if (!lineId) {
+  const route = useRoute();
+  const mapId = route.query.mapId as string;
+  const simulationId = route.query.simulationId;
+  if (!mapId || !simulationId) {
     return;
   }
   const { proto: base64, name: lineName } = await getPublishMapInfoByLineId(
-    lineId
+    mapId
   );
   lineStore.setLineName(lineName);
   if (base64) {
@@ -162,7 +165,7 @@ export async function loadLineDatas(app: GraphicApp) {
     msgBroker = new AppWsMsgBroker(app);
     const states: GraphicState[] = [];
     msgBroker.subscribe({
-      destination: `/queue/line/${lineId}/device`,
+      destination: `/simulation/${simulationId}/devices/status`,
       messageConverter: (message: Uint8Array) => {
         const storage = state.WsLineMessage.deserialize(message);
         storage.signal.forEach((item) => {

src/layouts/LineLayout.vue

@@ -14,10 +14,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, onUnmounted } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
 import { useRoute, useRouter } from 'vue-router';
 import { loadLineDatas, getLineApp } from 'src/drawApp/lineApp';
+import { destroySimulation } from 'src/api/Simulation';
 
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);
@@ -25,6 +26,7 @@ const headerHeight = ref(0);
 const route = useRoute();
 const router = useRouter();
 const lineStore = useLineStore();
+let simulationId = '';
 
 const mapName = computed(() => lineStore.lineName);
 
@@ -56,7 +58,7 @@ function backConfirm() {
 onMounted(() => {
   const dom = document.getElementById('line-app-container');
   if (dom) {
-    lineStore.setLineId(+route.params.id as number);
+    simulationId = route.query.simulationId as string;
     const lineApp = lineStore.initLineApp(dom);
     loadLineDatas(lineApp);
     onResize();
@@ -64,4 +66,9 @@ onMounted(() => {
     lineStore.setLineId(null);
   }
 });
+onUnmounted(() => {
+  if (simulationId) {
+    destroySimulation({ simulationId });
+  }
+});
 </script>

src/pages/PublishManage.vue

@@ -29,9 +29,8 @@
           <div class="q-gutter-sm row justify-center">
             <q-btn
               color="primary"
-              :disable="operateDisabled"
-              label="预览"
-              :to="`/linemap/${props.row.id}`"
+              label="创建仿真"
+              @click="create(props.row)"
             />
             <q-btn
               color="red"
@@ -48,11 +47,12 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue';
-import { useQuasar, type QTableColumn, QForm } from 'quasar';
+import { useQuasar, type QTableColumn } from 'quasar';
 import { pageQuery, deletePublish } from '../api/PublishApi';
 import { useRouter } from 'vue-router';
+import { createSimulation } from 'src/api/Simulation';
+import { ApiError } from 'src/boot/axios';
 const router = useRouter();
-
 const $q = useQuasar();
 
 const props = withDefaults(
@@ -66,19 +66,6 @@ const tableHeight = computed(() => {
   return props.sizeHeight - 32;
 });
 
-const typeOptions = [
-  { label: '线路', value: 'Line' },
-  { label: '线网', value: 'LineNetwork' },
-];
-
-const typeOptionsMap = computed(() => {
-  const obj: { [k: string]: string } = {};
-  typeOptions.forEach((item: { value: string; label: string }) => {
-    obj[item.value] = item.label;
-  });
-  return obj;
-});
-
 onMounted(() => {
   tableRef.value.requestServerInteraction();
 });
@@ -91,20 +78,6 @@ const columnDefs: QTableColumn[] = [
     required: true,
     align: 'center',
   },
-  {
-    name: 'type',
-    label: '类型',
-    field: (row) => {
-      return typeOptionsMap.value[row.type];
-    },
-    align: 'center',
-  },
-  {
-    name: 'lineId',
-    label: '线路Id',
-    field: 'lineId',
-    align: 'center',
-  },
   {
     name: 'publishAt',
     label: '发布时间',
@@ -147,31 +120,51 @@ async function onRequest(props: any) {
     pagination.value.sortBy = sortBy;
     pagination.value.descending = descending;
     rows.splice(0, rows.length, ...(pageData.records as []));
-  } catch (error: any) {
+  } catch (err) {
+    const error = err as ApiError;
     $q.notify({
       type: 'negative',
-      message: error.message,
+      message: error.title,
     });
   } finally {
     loading.value = false;
   }
 }
 
+async function create(row: any) {
+  createSimulation({ mapId: row.id })
+    .then((res) => {
+      const query = {
+        mapId: res.mapId,
+        simulationId: res.simulationId,
+      };
+      router.push({ path: '/linemap', query });
+    })
+    .catch((err) => {
+      const error = err as ApiError;
+      $q.notify({
+        type: 'negative',
+        message: error.title,
+      });
+    });
+}
+
 async function deleteData(row: any) {
   operateDisabled.value = true;
   $q.dialog({
     title: '确认',
-    message: `确认删除草稿图 "${row.name}" 吗?`,
+    message: `确认删除发布图 "${row.name}" 吗?`,
     cancel: true,
   })
     .onOk(async () => {
       try {
         await deletePublish(row.id);
         tableRef.value.requestServerInteraction(); // 刷新列表
-      } catch (error: any) {
+      } catch (err) {
+        const error = err as ApiError;
         $q.notify({
           type: 'negative',
-          message: error.message,
+          message: error.title,
         });
       }
     })

src/router/routes.ts

@@ -62,7 +62,7 @@ const routes: RouteRecordRaw[] = [
     component: () => import('layouts/DrawLayout.vue'),
   },
   {
-    path: '/linemap/:id/',
+    path: '/linemap',
     name: 'linemap',
     component: () => import('layouts/LineLayout.vue'),
   },