显示子系统

src/config/router.config.js

@@ -117,12 +117,17 @@ export const constantRouterMap = [
       //   component: () => import(/* webpackChunkName: "fail" */ '@/views/subsystem/sceneEditing/index.vue'),
       //   meta: { title: '场景编辑子系统' },
       // },
-      // {
+      {
-      //   path: '/subsystem/display',
+        path: '/subsystem/displayEntry',
-      //   name: 'SimulationSceneDisplay',
+        name: 'SubsystemDisplayEntry',
-      //   component: () => import(/* webpackChunkName: "fail" */ '@/views/subsystem/display/index.vue'),
+        component: () => import(/* webpackChunkName: "fail" */ '@/views/subsystem/display/entry.vue'),
-      //   meta: { title: '显示子系统' },
+      },
-      // },
+      {
+        path: '/subsystem/display',
+        name: 'SubsystemDisplay',
+        component: () => import(/* webpackChunkName: "fail" */ '@/views/subsystem/display/index.vue'),
+        meta: { title: '显示子系统' },
+      },
       // {
       //   path: '/subsystem/evaluation',
       //   name: 'SimulationSceneEvaluation',

src/views/subsystem/display/entry.vue

@@ -0,0 +1,164 @@
+<template>
+  <Grid :columns="[3, 4, 3]" class="page-display-entry">
+    <ModuleWrapper title="推演实例" style="grid-area: 1 / 2 / 2 / 3">
+      <template #extra>
+        <a-button
+          type="text-primary"
+          icon="sync"
+          style="font-size: 24px; line-height: 1.2"
+          @click="getRoomList"
+        ></a-button>
+      </template>
+      <Flex v-loading="room.loading" fd="co" class="normal">
+        <Flex fw="w" ac="fs" class="room-list flex-1">
+          <div class="room-item" v-for="item in room.listData" :key="item.id">
+            <Flex class="room-card">
+              <Flex fd="co" jc="c" class="room-info flex-1">
+                <Flex ai="c" jc="sb">
+                  <div class="room-name">
+                    <a-icon type="home" style="margin-right: 10px" />
+                    {{ item.roomName }}
+                  </div>
+                  <div class="room-status" :style="{ color: statusMapColor[item.status] }">
+                    {{ statusMpText[item.status] }}
+                  </div>
+                </Flex>
+                <div class="room-scenario-relation">想定名称：{{ item.scenarioName }}</div>
+                <div class="room-create-time">{{ item.createTime.slice(0, 19).replace('T', ' ') }}</div>
+              </Flex>
+              <Flex class="room-enter" ai="c" title="查看详情" @click="handleSelectRoom(item)">
+                <a-icon type="right" style="font-size: 20px" />
+              </Flex>
+            </Flex>
+          </div>
+        </Flex>
+        <Flex ai="c" jc="c">
+          <a-pagination
+            v-model="room.pagination.pageNum"
+            :total="room.pagination.total"
+            :pageSize="room.pagination.pageSize"
+            show-less-items
+            :showTotal="(total) => `共${total}条`"
+            @change="getRoomList"
+          />
+        </Flex>
+      </Flex>
+    </ModuleWrapper>
+  </Grid>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+
+export default {
+  name: 'SubsystemDisplayEntry',
+  data() {
+    return {
+      ws: null,
+      room: {
+        loading: false,
+        listData: [],
+        pagination: {
+          total: 0,
+          pageNum: 1,
+          pageSize: 10,
+        },
+      },
+      statusMpText: {
+        0: '待推演',
+        1: '推演中',
+        2: '暂停中',
+        3: '已结束',
+      },
+      statusMapColor: {
+        0: '#00C7FE',
+        1: '#33FF00',
+        2: '#FFFF99',
+        3: '#FF0000',
+      },
+    }
+  },
+  created() {
+    this.getRoomList()
+  },
+  methods: {
+    async getRoomList() {
+      try {
+        this.room.loading = true
+        const res = await getAction('/scenario/room/list', {
+          pageNum: this.room.pagination.pageNum,
+          pageSize: this.room.pagination.pageSize,
+        })
+        this.room.listData = res.data.data
+        this.room.pagination.total = res.data.totalCount
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.room.loading = false
+      }
+    },
+    handleSelectRoom(item) {
+      this.$router.push({
+        name: 'SubsystemDisplay',
+        params: {
+          roomId: item.id,
+          roomName: item.roomName,
+          scenarioId: item.scenarioId,
+          scenarioName: item.scenarioName,
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.page-display-entry {
+  height: 100%;
+  color: #ffffff;
+  background-color: #022234;
+  padding: 20px;
+}
+.room-item {
+  width: 50%;
+  height: 20%;
+  padding: 10px;
+  .room-card {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    border: 1px solid #00d5fe;
+    .room-info {
+      padding: 10px;
+      border-right: 1px solid #00d5fe;
+    }
+    .room-name {
+      font-size: 26px;
+      font-weight: bolder;
+    }
+    .room-status {
+      font-size: 20px;
+      font-weight: bolder;
+    }
+    .room-create-time {
+      font-size: 14px;
+      font-style: italic;
+      color: #888888;
+    }
+    .room-enter {
+      border-radius: 0 10px 10px 0;
+      cursor: pointer;
+      padding: 0 10px;
+    }
+    .room-enter:hover {
+      background-color: #10475f;
+    }
+  }
+}
+::v-deep {
+  .ant-pagination-total-text {
+    font-size: 16px;
+    color: #ffffff;
+  }
+}
+</style>

src/views/subsystem/display/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <Flex fd="co" class="page-display">
+    <Flex ai="c" jc="sb" class="page-display-header">
+      <span class="page-display-title">显示子系统</span>
+      <span class="page-display-title">推演想定【{{ roomName }}-{{ scenarioName }}】</span>
+      <span class="page-display-title">剩余 {{ roomInfo.remainTimeStr }}</span>
+    </Flex>
+    <Grid class="page-display-main flex-1 oh">
+      <div
+        ref="display-cesium-container"
+        class="display-cesium-container"
+        id="display-cesium-container"
+        style="grid-area: 1 / 1 / 2 / 2"
+      ></div>
+    </Grid>
+  </Flex>
+</template>
+
+<script>
+import { postAction } from '@/api/manage'
+
+export default {
+  name: 'SubsystemDisplay',
+  data() {
+    return {
+      ws: null,
+      roomInfo: {
+        remainTimeStr: '',
+        remainTime: '',
+        duringTime: '',
+      },
+      roomId: '',
+      roomName: '',
+      scenarioId: '',
+      scenarioName: '',
+      cesium: null,
+    }
+  },
+  created() {
+    this.roomId = this.$route.params.roomId
+    this.roomName = this.$route.params.roomName
+    this.scenarioId = this.$route.params.scenarioId
+    this.scenarioName = this.$route.params.scenarioName
+    this.initWebsocket()
+  },
+  mounted() {
+    this.cesium = new window.MyCesium('display-cesium-container')
+    this.getZzbzllTreeData(true)
+  },
+  beforeDestroy() {
+    this.closeWebsocket()
+  },
+  methods: {
+    initWebsocket() {
+      this.ws = new window.MyWebsocket(`/ws/${this.scenarioId}/${this.roomId}`, (error, response) => {
+        if (error) return this.$message.error(error.message)
+        switch (response.cmdType) {
+          case 'update_time':
+            this.roomInfo.remainTimeStr = response.data.update_time_str
+            this.roomInfo.remainTime = response.data.remain_time
+            this.roomInfo.duringTime = response.data.during_time
+            break
+          default:
+            break
+        }
+      })
+    },
+    closeWebsocket() {
+      this.ws && this.ws.close()
+    },
+    async getZzbzllTreeData(initPlot = false) {
+      try {
+        const res = await postAction(`/scenario/resource/`, {
+          scenarioId: this.scenarioId,
+        })
+        if (initPlot) {
+          this.initPlot(res.data)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    initPlot(plots) {
+      plots.forEach((item) => {
+        if (item.lng && item.lat) {
+          this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.page-display {
+  height: 100%;
+  color: #ffffff;
+  .page-display-header {
+    height: 50px;
+    background-color: #0a2a3d;
+    padding: 0 20px;
+    .page-display-title {
+      color: #00d5fe;
+      font-size: 18px;
+      font-weight: bolder;
+      letter-spacing: 2px;
+    }
+  }
+  .page-display-main {
+    background-color: #022234;
+  }
+}
+.display-cesium-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

src/views/subsystem/model/index.vue

@@ -3,7 +3,7 @@
     <Flex ai="c" jc="sb" class="page-model-header">
       <span class="page-model-title">系统控制子系统</span>
       <span class="page-model-title">推演想定【{{ roomName }}-{{ scenarioName }}】</span>
-      <span class="page-model-title">剩余 {{ roomInfo.remainTime }}</span>
+      <span class="page-model-title">剩余 {{ roomInfo.remainTimeStr }}</span>
     </Flex>
     <Grid class="page-model-main flex-1 oh" :columns="['320px', 1, '320px']" :rows="['30px', 1]" gap="0px">
       <div class="tool-wrapper" style="grid-area: 1 / 1 / 2 / 4"></div>
@@ -177,8 +177,9 @@ export default {
     return {
       ws: null,
       roomInfo: {
-        currentTime: '',
+        remainTimeStr: '',
         remainTime: '',
+        duringTime: '',
       },
       roomId: '',
       roomName: '',
@@ -318,7 +319,9 @@ export default {
         if (error) return this.$message.error(error.message)
         switch (response.cmdType) {
           case 'update_time':
-            this.roomInfo.remainTime = response.data
+            this.roomInfo.remainTimeStr = response.data.update_time_str
+            this.roomInfo.remainTime = response.data.remain_time
+            this.roomInfo.duringTime = response.data.during_time
             break
           default:
             break

src/views/user/Welcome.vue

@@ -59,7 +59,7 @@ export default {
           moduleCode: 'display_system',
           moduleName: '显示子系统',
           icon: require('@/assets/images/simulation-scene/system-icon/display.png'),
-          modulePath: '/simulationScene/display',
+          modulePath: '/subsystem/displayEntry',
         },
         {
           moduleCode: 'evaluation_system',