显示子系统
This commit is contained in:
liaoboping
parent
7d405680d1
commit
fd513da781
|
|
@ -117,12 +117,17 @@ export const constantRouterMap = [
|
|||
// component: () => import(/* webpackChunkName: "fail" */ '@/views/subsystem/sceneEditing/index.vue'),
|
||||
// meta: { title: '场景编辑子系统' },
|
||||
// },
|
||||
// {
|
||||
// path: '/subsystem/display',
|
||||
// name: 'SimulationSceneDisplay',
|
||||
// component: () => import(/* webpackChunkName: "fail" */ '@/views/subsystem/display/index.vue'),
|
||||
// meta: { title: '显示子系统' },
|
||||
// },
|
||||
{
|
||||
path: '/subsystem/displayEntry',
|
||||
name: 'SubsystemDisplayEntry',
|
||||
component: () => import(/* webpackChunkName: "fail" */ '@/views/subsystem/display/entry.vue'),
|
||||
},
|
||||
{
|
||||
path: '/subsystem/display',
|
||||
name: 'SubsystemDisplay',
|
||||
component: () => import(/* webpackChunkName: "fail" */ '@/views/subsystem/display/index.vue'),
|
||||
meta: { title: '显示子系统' },
|
||||
},
|
||||
// {
|
||||
// path: '/subsystem/evaluation',
|
||||
// name: 'SimulationSceneEvaluation',
|
||||
|
|
|
|||
164
src/views/subsystem/display/entry.vue
Normal file
164
src/views/subsystem/display/entry.vue
Normal file
|
|
@ -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>
|
||||
118
src/views/subsystem/display/index.vue
Normal file
118
src/views/subsystem/display/index.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user