仿真模型子系统，场景编辑子系统
This commit is contained in:
parent
4d52b072c9
commit
f7945e711a
|
|
@ -13,7 +13,7 @@ plugins.push(['import', {
|
|||
'libraryName': 'ant-design-vue',
|
||||
'libraryDirectory': 'es',
|
||||
'style': true // `style: true` 会加载 less 文件
|
||||
}])
|
||||
}, 'ant-design-vue'])
|
||||
|
||||
module.exports = {
|
||||
presets: [
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "vue-antd-pro",
|
||||
"name": "jsse-front",
|
||||
"version": "3.0.2",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
@ -18,6 +18,8 @@
|
|||
"@antv/data-set": "^0.10.2",
|
||||
"ant-design-vue": "^1.7.8",
|
||||
"axios": "^0.26.1",
|
||||
"cesium": "1.101.0",
|
||||
"cesium-navigation-es6": "3.0.9",
|
||||
"core-js": "^3.21.1",
|
||||
"echarts": "^5.3.3",
|
||||
"enquire.js": "^2.1.6",
|
||||
|
|
|
|||
2
public/index.html
vendored
2
public/index.html
vendored
|
|
@ -22,7 +22,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong>We're sorry but jsse-front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app">
|
||||
<div class="first-loading-wrp">
|
||||
|
|
|
|||
BIN
public/mockData/9d47c8c8-30d8-3e78-944f-d48ca8084c58.png
Normal file
BIN
public/mockData/9d47c8c8-30d8-3e78-944f-d48ca8084c58.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/mockData/cb8917d8-6658-cf7f-dd4e-ea2e670edea8.png
Normal file
BIN
public/mockData/cb8917d8-6658-cf7f-dd4e-ea2e670edea8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
public/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png
Normal file
BIN
public/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
1
src/components/Common/Cesium/index.js
Normal file
1
src/components/Common/Cesium/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export default class MyCesium {}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<div class="module-wrapper" :style="wrapperStyle">
|
||||
<div class="module-wrapper-header">
|
||||
<div class="module-wrapper-title">{{ title }}</div>
|
||||
<slot name="title">
|
||||
<div class="module-wrapper-title">{{ title }}</div>
|
||||
</slot>
|
||||
<slot name="title-extra"></slot>
|
||||
<div style="flex: 1;"></div>
|
||||
<div style="flex: 1"></div>
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
<div class="module-wrapper-main">
|
||||
|
|
|
|||
|
|
@ -3,11 +3,15 @@ import ModuleWrapper from './Layout/ModuleWrapper.vue'
|
|||
import GridBox from './Directives/GridBox'
|
||||
import Flex from './Directives/Flex'
|
||||
|
||||
import MyCesium from './Cesium/index'
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.component('ModuleWrapper', ModuleWrapper)
|
||||
|
||||
Vue.directive('grid-box', GridBox)
|
||||
Vue.directive('flex', Flex)
|
||||
|
||||
window.MyCesium = MyCesium
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@ export const constantRouterMap = [
|
|||
{
|
||||
path: '/simulationScene/sceneEditing',
|
||||
name: 'SimulationSceneSceneEditing',
|
||||
component: () => import(/* webpackChunkName: "fail" */ '@/views/simulationScene/database/index.vue'),
|
||||
component: () => import(/* webpackChunkName: "fail" */ '@/views/simulationScene/sceneEditing/index.vue'),
|
||||
meta: { allow: true, title: '场景编辑子系统' },
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@ import './permission' // permission control
|
|||
import './utils/filter' // global filter
|
||||
import './global.less' // global style
|
||||
import * as echarts from 'echarts'
|
||||
console.log(echarts,'echarts')
|
||||
|
||||
import CommonRegister from './components/Common/register'
|
||||
|
||||
|
|
@ -54,5 +53,5 @@ new Vue({
|
|||
i18n,
|
||||
// init localstorage, vuex, Logo message
|
||||
created: bootstrap,
|
||||
render: h => h(App)
|
||||
render: (h) => h(App),
|
||||
}).$mount('#app')
|
||||
|
|
|
|||
|
|
@ -1,37 +1,34 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export default {
|
||||
namespace: true,
|
||||
|
||||
state: {
|
||||
systemModules: [
|
||||
{
|
||||
title: '数据库子系统',
|
||||
icon: require('@/assets/images/simulation-scene/system-icon/database.png'),
|
||||
statusKey: 'database',
|
||||
path: '/simulationScene/database',
|
||||
moduleName: '数据库子系统',
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'db_system',
|
||||
},
|
||||
{
|
||||
title: '仿真模型子系统',
|
||||
icon: require('@/assets/images/simulation-scene/system-icon/model.png'),
|
||||
statusKey: 'model',
|
||||
path: '/simulationScene/simulationModel',
|
||||
moduleName: '仿真模型子系统',
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'simulation_system',
|
||||
},
|
||||
{
|
||||
title: '场景编辑子系统',
|
||||
icon: require('@/assets/images/simulation-scene/system-icon/editing.png'),
|
||||
statusKey: 'editing',
|
||||
path: '/simulationScene/sceneEditing',
|
||||
moduleName: '场景编辑子系统',
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'scenario_system',
|
||||
},
|
||||
{
|
||||
title: '显示子系统',
|
||||
icon: require('@/assets/images/simulation-scene/system-icon/display.png'),
|
||||
statusKey: 'display',
|
||||
path: '/simulationScene/display',
|
||||
moduleName: '显示子系统',
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'display_system',
|
||||
},
|
||||
{
|
||||
title: '评估子系统',
|
||||
icon: require('@/assets/images/simulation-scene/system-icon/evaluation.png'),
|
||||
statusKey: 'evaluation',
|
||||
path: '/simulationScene/evaluation',
|
||||
moduleName: '评估子系统',
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'evaluation_system',
|
||||
},
|
||||
],
|
||||
systemStatusMap: {
|
||||
|
|
@ -42,14 +39,43 @@ export default {
|
|||
evaluation: 'running',
|
||||
},
|
||||
systemStatusDesc: {
|
||||
unstart: '未启动',
|
||||
running: '运行中',
|
||||
0: '未启动',
|
||||
1: '运行中',
|
||||
},
|
||||
systemIconMap: {
|
||||
db_system: require('@/assets/images/simulation-scene/system-icon/database.png'),
|
||||
simulation_system: require('@/assets/images/simulation-scene/system-icon/model.png'),
|
||||
scenario_system: require('@/assets/images/simulation-scene/system-icon/editing.png'),
|
||||
display_system: require('@/assets/images/simulation-scene/system-icon/display.png'),
|
||||
evaluation_system: require('@/assets/images/simulation-scene/system-icon/evaluation.png'),
|
||||
},
|
||||
systemPathMap: {
|
||||
db_system: '/simulationScene/database',
|
||||
simulation_system: '/simulationScene/simulationModel',
|
||||
scenario_system: '/simulationScene/sceneEditing',
|
||||
display_system: '/simulationScene/display',
|
||||
evaluation_system: '/simulationScene/evaluation',
|
||||
},
|
||||
},
|
||||
|
||||
getters: {},
|
||||
getters: {
|
||||
systemIconMap() {},
|
||||
},
|
||||
|
||||
mutations: {},
|
||||
mutations: {
|
||||
setSystemModules(state, payload) {
|
||||
state.systemModules = payload
|
||||
},
|
||||
},
|
||||
|
||||
actions: {},
|
||||
actions: {
|
||||
async getSystemModules({ commit }, payload) {
|
||||
try {
|
||||
const res = await request({ url: '/baseData/moduleStatus/list' })
|
||||
commit('setSystemModules', res.data.data)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,15 +3,15 @@
|
|||
<ModuleWrapper title="系统模块" style="grid-column: 1 / 3">
|
||||
<div class="normal" v-grid-box="{ columns: [1, 1, 1, 1, 1] }">
|
||||
<div
|
||||
v-for="(block, index) in systemModules"
|
||||
:key="index"
|
||||
:class="['system-block', `system-${systemStatusMap[block.statusKey]}`]"
|
||||
v-for="block in systemModules"
|
||||
:key="block.moduleCode"
|
||||
:class="['system-block', `system-${block.moduleStatus}`]"
|
||||
v-flex.v="['c', 'sb']"
|
||||
>
|
||||
<img class="icon" :src="block.icon" alt="" />
|
||||
<div class="title">{{ block.title }}</div>
|
||||
<div :class="['status', `status-${systemStatusMap[block.statusKey]}`]">
|
||||
{{ systemStatusDesc[systemStatusMap[block.statusKey]] }}
|
||||
<img class="icon" :src="systemIconMap[block.moduleCode]" alt="" />
|
||||
<div class="title">{{ block.moduleName }}</div>
|
||||
<div :class="['status', `status-${block.moduleStatus}`]">
|
||||
{{ systemStatusDesc[block.moduleStatus] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -155,6 +155,8 @@ export default {
|
|||
systemModules: (state) => state.simulation.systemModules,
|
||||
systemStatusMap: (state) => state.simulation.systemStatusMap,
|
||||
systemStatusDesc: (state) => state.simulation.systemStatusDesc,
|
||||
systemIconMap: (state) => state.simulation.systemIconMap,
|
||||
systemPathMap: (state) => state.simulation.systemPathMap,
|
||||
}),
|
||||
},
|
||||
watch: {},
|
||||
|
|
@ -188,17 +190,17 @@ export default {
|
|||
line-height: 1;
|
||||
color: #ffffff;
|
||||
}
|
||||
.status-running {
|
||||
.status-1 {
|
||||
background-color: #11b740;
|
||||
}
|
||||
.status-unstart {
|
||||
.status-0 {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
}
|
||||
.system-unstart {
|
||||
.system-0 {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.system-running:hover {
|
||||
.system-1:hover {
|
||||
border-color: #00f2fe;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,63 +21,6 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$http({
|
||||
url: '/baseData/moduleStatus/list',
|
||||
}).then((res) => {
|
||||
console.log('----res----', res)
|
||||
const data = {
|
||||
code: 200,
|
||||
message: 'ok',
|
||||
data: {
|
||||
code: 200,
|
||||
message: 'ok',
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
moduleName: '数据库子系统',
|
||||
moduleUrl: '/',
|
||||
sortOrder: 1,
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'db_system',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
moduleName: '仿真模型子系统',
|
||||
moduleUrl: '/',
|
||||
sortOrder: 2,
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'simulation_system',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
moduleName: '场景编辑子系统',
|
||||
moduleUrl: '/',
|
||||
sortOrder: 3,
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'scenario_system',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
moduleName: '显示子系统',
|
||||
moduleUrl: '/',
|
||||
sortOrder: 4,
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'display_system',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
moduleName: '评估子系统',
|
||||
moduleUrl: '/',
|
||||
sortOrder: 5,
|
||||
moduleStatus: '0',
|
||||
moduleCode: 'evaluation_system',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,203 @@
|
|||
<template>
|
||||
<div>SimulationSceneSceneEditing</div>
|
||||
<div class="scene-editing-page" v-grid-box="{ columns: ['320px', 1, '320px'], rows: [45, 30, 25], gap: '0px' }">
|
||||
<ModuleWrapper title="作战/保障力量" style="grid-column: 1 / 2; grid-row: 1 / 2">
|
||||
<div class="normal" style="padding: 5px">
|
||||
<a-tree :treeData="zb.zbTreeData"></a-tree>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper title="装备元素" style="grid-column: 1 / 2; grid-row: 2 / 4">
|
||||
<div class="normal" style="padding: 5px" v-flex.v>
|
||||
<a-input-search v-model="ys.keyword" placeholder="输入关键词搜索..." @search="onSearch" />
|
||||
<div style="height: 0; flex: 1; overflow-y: auto">
|
||||
<a-row>
|
||||
<template v-for="item in ys.ysList">
|
||||
<a-col :key="item.id" :span="24">{{ item.title }}</a-col>
|
||||
<a-col v-for="it in item.children" :key="it.id" :span="12" v-flex.v="['c']">
|
||||
<img class="ys-image" :src="it.image" alt="" />
|
||||
<span>{{ it.title }}</span>
|
||||
</a-col>
|
||||
</template>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<div
|
||||
class="cesium-container"
|
||||
id="cesium-container"
|
||||
style="grid-column: 2 / 3; grid-row: 1 / 7; overflow: hidden"
|
||||
></div>
|
||||
<ModuleWrapper title="作战单元状态" style="grid-column: 3 / 4; grid-row: 1 / 3">
|
||||
<div class="normal" style="padding: 15px 0">
|
||||
<div style="height: 100%; padding: 0 15px; overflow-y: auto">
|
||||
<img class="image" :src="zt.image" />
|
||||
<div class="name">{{ zt.name }}</div>
|
||||
<div v-for="item in zt.ztList" :key="item.label" class="zt-item">
|
||||
<span>{{ item.label }}：</span>
|
||||
<img :src="item.icon" alt="" />
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper title="作战单元武器" style="grid-column: 3 / 4; grid-row: 3 / 4">
|
||||
<div class="normal" style="padding: 15px 0">
|
||||
<div style="height: 100%; padding: 0 15px; overflow-y: auto">
|
||||
<div v-for="(item, index) in zzdywq.wqList" :key="index" class="wq-item" v-flex>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SimulationSceneSceneEditing',
|
||||
data() {
|
||||
return {
|
||||
cesium: null,
|
||||
zb: {
|
||||
zbTreeData: [
|
||||
{
|
||||
key: '1',
|
||||
title: '红方',
|
||||
children: [
|
||||
{
|
||||
key: '1-1',
|
||||
title: '作战力量',
|
||||
children: [
|
||||
{ key: '1-1-1', title: '左翼夺控群火力分队' },
|
||||
{ key: '1-1-2', title: '左翼攻击分队' },
|
||||
{ key: '1-1-3', title: '右翼攻击分队' },
|
||||
{ key: '1-1-4', title: '右翼夺控群反装甲分队' },
|
||||
{ key: '1-1-5', title: '防空火力队' },
|
||||
{ key: '1-1-6', title: '左翼牵制群右翼攻击分队' },
|
||||
{ key: '1-1-7', title: '电子对抗兵队超短波干扰分队' },
|
||||
{ key: '1-1-8', title: '纵深夺控群火力分队' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '1-2',
|
||||
title: '保障力量',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
title: '蓝方',
|
||||
children: [
|
||||
{ key: '1-1', title: '作战力量' },
|
||||
{ key: '1-2', title: '保障力量' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
ys: {
|
||||
keyword: '',
|
||||
ysList: [
|
||||
{
|
||||
id: '1',
|
||||
title: '红方',
|
||||
children: [
|
||||
{ id: '1-1', title: '反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '1-2', title: '红箭10反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '1-3', title: '装甲突击车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '1-4', title: 'VT5坦克', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '1-5', title: '餐饮车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '1-6', title: '物资运输车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '1-7', title: '油罐车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '1-8', title: '雷达车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '蓝方',
|
||||
children: [
|
||||
{ id: '2-1', title: '反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '2-2', title: '红箭10反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '2-3', title: '装甲突击车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '2-4', title: 'VT5坦克', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '2-5', title: '餐饮车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '2-6', title: '物资运输车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '2-7', title: '油罐车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
{ id: '2-8', title: '雷达车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
zt: {
|
||||
image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png',
|
||||
name: '轮式装甲突击车',
|
||||
ztList: [
|
||||
{ label: '推演方', text: `红方` },
|
||||
{ label: '航向', text: `0度` },
|
||||
{ label: '航速', text: `0.00公里/小时(停车)` },
|
||||
{ label: '经度', text: `东经120°53'56″` },
|
||||
{ label: '纬度', text: `北纬24°34'17″` },
|
||||
{ label: '高度/深度', text: `0.00米` },
|
||||
{ label: '毁伤', icon: '/mockData/9d47c8c8-30d8-3e78-944f-d48ca8084c58.png' },
|
||||
{ label: '系统', progress: 100 },
|
||||
{ label: '电量', progress: 90 },
|
||||
{ label: '失火', progress: 0 },
|
||||
{ label: '状态', text: `未分配任务` },
|
||||
],
|
||||
},
|
||||
zzdywq: {
|
||||
placeholder: ' '.repeat(100),
|
||||
wqList: [
|
||||
{ title: '240×7.62毫米高射机炮[20发备弹]' },
|
||||
{ title: '16×AT-14型“短号”反坦克导弹' },
|
||||
{ title: '6×巡飞弹' },
|
||||
{ title: '4×无人侦察机' },
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.cesium = new window.MyCesium('cesium-container')
|
||||
},
|
||||
methods: {
|
||||
onSearch(e) {
|
||||
console.log('----', e, e.target.value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.scene-editing-page {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.ys-image {
|
||||
width: 74px;
|
||||
height: 62px;
|
||||
object-fit: cover;
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: #0c3040;
|
||||
}
|
||||
.name {
|
||||
color: #00baff;
|
||||
text-decoration: underline;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.zt-item {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 2px;
|
||||
color: #bbdded;
|
||||
}
|
||||
.wq-item {
|
||||
text-decoration: underline;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0px;
|
||||
color: #00baff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,137 @@
|
|||
<template>
|
||||
<div class="simulation-model-page" v-flex.v>
|
||||
<div style="flex: 1">
|
||||
|
||||
</div>
|
||||
<div class="simulation-model-page" v-grid-box="{ columns: ['320px', 1, '320px'], rows: [1, 1], gap: '0px' }">
|
||||
<ModuleWrapper title="作战/保障力量" style="grid-column: 1 / 2; grid-row: 1 / 2">
|
||||
<div class="normal" style="padding: 5px">
|
||||
<a-tree :treeData="zb.zbTreeData"> </a-tree>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper style="grid-column: 1 / 2; grid-row: 2 / 3">
|
||||
<template #title>
|
||||
<a-radio-group v-model="qd.qdlx" button-style="solid">
|
||||
<a-radio-button value="xqqd">需求清单</a-radio-button>
|
||||
<a-radio-button value="bzqd">保障清单</a-radio-button>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<div class="normal" style="padding: 5px">
|
||||
<a-table rowKey="id" :columns="qd.qdColumns" :dataSource="qd.qdList" :pagination="false" bordered></a-table>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<div
|
||||
class="cesium-container"
|
||||
id="cesium-container"
|
||||
style="grid-column: 2 / 3; grid-row: 1 / 3; overflow: hidden"
|
||||
></div>
|
||||
<ModuleWrapper title="保障实体属性" style="grid-column: 3 / 4; grid-row: 1 / 2">
|
||||
<div class="normal" style="padding: 15px 0">
|
||||
<div style="height: 100%; padding: 0 15px; overflow-y: auto">
|
||||
<img class="image" :src="sx.image" />
|
||||
<div class="name">{{ sx.name }}</div>
|
||||
<div v-for="item in sx.sxList" :key="item.label" class="sx-item">
|
||||
<span>{{ item.label }}：</span>
|
||||
<img :src="item.icon" alt="" />
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper title="资源" style="grid-column: 3 / 4; grid-row: 2 / 3">
|
||||
<div class="normal" style="padding: 15px 0">
|
||||
<div style="height: 100%; padding: 0 15px; overflow-y: auto">
|
||||
<div v-for="item in zy.zyList" :key="item.label" class="zy-item" v-flex>
|
||||
<span>{{ item.label }}：</span>
|
||||
<span style="flex: 1; white-space: nowrap; overflow: hidden" v-html="zy.placeholder"></span>
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SimulationSceneSimulationModel',
|
||||
data() {
|
||||
return {
|
||||
cesium: null,
|
||||
zb: {
|
||||
zbTreeData: [
|
||||
{
|
||||
key: '1',
|
||||
title: '红方',
|
||||
children: [
|
||||
{
|
||||
key: '1-1',
|
||||
title: '作战力量',
|
||||
children: [
|
||||
{ key: '1-1-1', title: '左翼夺控群火力分队' },
|
||||
{ key: '1-1-2', title: '左翼攻击分队' },
|
||||
{ key: '1-1-3', title: '右翼攻击分队' },
|
||||
{ key: '1-1-4', title: '右翼夺控群反装甲分队' },
|
||||
{ key: '1-1-5', title: '防空火力队' },
|
||||
{ key: '1-1-6', title: '左翼牵制群右翼攻击分队' },
|
||||
{ key: '1-1-7', title: '电子对抗兵队超短波干扰分队' },
|
||||
{ key: '1-1-8', title: '纵深夺控群火力分队' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '1-2',
|
||||
title: '保障力量',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
title: '蓝方',
|
||||
children: [
|
||||
{ key: '1-1', title: '作战力量' },
|
||||
{ key: '1-2', title: '保障力量' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
qd: {
|
||||
qdlx: 'xqqd',
|
||||
qdColumns: [
|
||||
{ dataIndex: 'dj', title: '等级', width: '62px', align: 'center' },
|
||||
{ dataIndex: 'bzxq', title: '保障需求' },
|
||||
],
|
||||
qdList: [
|
||||
{ id: '1', dj: '紧急', bzxq: '500枚防空导弹、6辆装甲车' },
|
||||
{ id: '2', dj: '加急', bzxq: '5吨汽油、100套军装' },
|
||||
{ id: '3', dj: '一般', bzxq: '15箱消炎药、6箱葡萄糖滴' },
|
||||
{ id: '4', dj: '一般', bzxq: '一吨饮用水' },
|
||||
{ id: '5', dj: '一般', bzxq: '1吨燃油、厨房抽烟机设备一' },
|
||||
],
|
||||
},
|
||||
sx: {
|
||||
image: '/mockData/cb8917d8-6658-cf7f-dd4e-ea2e670edea8.png',
|
||||
name: '医院',
|
||||
sxList: [
|
||||
{ label: '推演方', text: `红方` },
|
||||
{ label: '经度', text: `东经120°12'03″` },
|
||||
{ label: '纬度', text: `北纬24°51'09″` },
|
||||
{ label: '高度/深度', text: `326米` },
|
||||
{ label: '图标', icon: '/mockData/9d47c8c8-30d8-3e78-944f-d48ca8084c58.png' },
|
||||
{ label: '医师', text: `36人` },
|
||||
{ label: '护士', text: `100人` },
|
||||
],
|
||||
},
|
||||
zy: {
|
||||
placeholder: ' '.repeat(100),
|
||||
zyList: [
|
||||
{ label: '血液', text: `100L` },
|
||||
{ label: '药材', text: `1.5吨` },
|
||||
{ label: '氧气', text: `100m3` },
|
||||
{ label: '床位', text: `56个` },
|
||||
{ label: '手术台', text: `10台` },
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.cesium = new window.MyCesium('cesium-container')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -16,4 +139,29 @@ export default {
|
|||
.simulation-model-page {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: #0c3040;
|
||||
}
|
||||
.name {
|
||||
color: #00baff;
|
||||
text-decoration: underline;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.sx-item {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 2px;
|
||||
color: #bbdded;
|
||||
}
|
||||
.zy-item {
|
||||
text-decoration: underline;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0px;
|
||||
color: #00baff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,23 +2,23 @@
|
|||
<div class="system-select-page" v-grid-box="{ columns: [1, 1, 1, 1, 1, 1], rows: [1, 1], gap: '40px' }">
|
||||
<div
|
||||
v-for="(block, index) in systemModules"
|
||||
:key="index"
|
||||
:class="['system-block', `system-${systemStatusMap[block.statusKey]}`]"
|
||||
:key="block.moduleCode"
|
||||
:class="['system-block', `system-${block.moduleStatus}`]"
|
||||
:style="blockStyleMap[index]"
|
||||
v-flex.v="['c', 'sb']"
|
||||
@click="handleClick(block)"
|
||||
>
|
||||
<img class="icon" :src="block.icon" alt="" />
|
||||
<div class="title">{{ block.title }}</div>
|
||||
<div :class="['status', `status-${systemStatusMap[block.statusKey]}`]">
|
||||
{{ systemStatusDesc[systemStatusMap[block.statusKey]] }}
|
||||
<img class="icon" :src="systemIconMap[block.moduleCode]" alt="" />
|
||||
<div class="title">{{ block.moduleName }}</div>
|
||||
<div :class="['status', `status-${block.moduleStatus}`]">
|
||||
{{ systemStatusDesc[block.moduleStatus] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'SimulationSceneSystemSelect',
|
||||
|
|
@ -38,12 +38,18 @@ export default {
|
|||
systemModules: (state) => state.simulation.systemModules,
|
||||
systemStatusMap: (state) => state.simulation.systemStatusMap,
|
||||
systemStatusDesc: (state) => state.simulation.systemStatusDesc,
|
||||
systemIconMap: (state) => state.simulation.systemIconMap,
|
||||
systemPathMap: (state) => state.simulation.systemPathMap,
|
||||
}),
|
||||
},
|
||||
mounted() {
|
||||
this.getSystemModules()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getSystemModules']),
|
||||
handleClick(block) {
|
||||
if (this.systemStatusMap[block.statusKey] === 'unstart') return
|
||||
this.$router.push(block.path)
|
||||
if (block.moduleStatus === '0') return
|
||||
this.$router.push(this.systemPathMap[block.moduleCode])
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -75,17 +81,17 @@ export default {
|
|||
line-height: 1;
|
||||
color: #ffffff;
|
||||
}
|
||||
.status-running {
|
||||
.status-1 {
|
||||
background-color: #11b740;
|
||||
}
|
||||
.status-unstart {
|
||||
.status-0 {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
}
|
||||
.system-unstart {
|
||||
.system-0 {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.system-running:hover {
|
||||
.system-1:hover {
|
||||
border-color: #00f2fe;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ const GitRevision = new GitRevisionPlugin()
|
|||
const buildDate = JSON.stringify(new Date().toLocaleString())
|
||||
const createThemeColorReplacerPlugin = require('./config/plugin.config')
|
||||
|
||||
function resolve (dir) {
|
||||
function resolve(dir) {
|
||||
return path.join(__dirname, dir)
|
||||
}
|
||||
|
||||
// check Git
|
||||
function getGitHash () {
|
||||
function getGitHash() {
|
||||
try {
|
||||
return GitRevision.version()
|
||||
} catch (e) {}
|
||||
|
|
@ -25,7 +25,7 @@ const assetsCDN = {
|
|||
vue: 'Vue',
|
||||
'vue-router': 'VueRouter',
|
||||
vuex: 'Vuex',
|
||||
axios: 'axios'
|
||||
axios: 'axios',
|
||||
},
|
||||
css: [],
|
||||
// https://unpkg.com/browse/vue@2.6.10/
|
||||
|
|
@ -33,8 +33,8 @@ const assetsCDN = {
|
|||
'//cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
|
||||
'//cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js',
|
||||
'//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
|
||||
'//cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js'
|
||||
]
|
||||
'//cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js',
|
||||
],
|
||||
}
|
||||
|
||||
// vue.config.js
|
||||
|
|
@ -49,15 +49,16 @@ const vueConfig = {
|
|||
new webpack.DefinePlugin({
|
||||
APP_VERSION: `"${require('./package.json').version}"`,
|
||||
GIT_HASH: JSON.stringify(getGitHash()),
|
||||
BUILD_DATE: buildDate
|
||||
})
|
||||
]
|
||||
BUILD_DATE: buildDate,
|
||||
CESIUM_BASE_URL: JSON.stringify('./'),
|
||||
}),
|
||||
],
|
||||
// en_US: `if prod, add externals`
|
||||
// zh_CN: `这里是用来控制编译忽略外部依赖的，与 config.plugin('html') 配合可以编译时引入外部CDN文件依赖`
|
||||
// externals: isProd ? assetsCDN.externals : {}
|
||||
},
|
||||
|
||||
chainWebpack: config => {
|
||||
chainWebpack: (config) => {
|
||||
config.resolve.alias.set('@$', resolve('src'))
|
||||
|
||||
const svgRule = config.module.rule('svg')
|
||||
|
|
@ -74,7 +75,7 @@ const vueConfig = {
|
|||
.loader('file-loader')
|
||||
.options({
|
||||
name: 'assets/[name].[hash:8].[ext]',
|
||||
esModule: false
|
||||
esModule: false,
|
||||
})
|
||||
|
||||
// en_US: If prod is on assets require on cdn
|
||||
|
|
@ -96,12 +97,12 @@ const vueConfig = {
|
|||
|
||||
// 'primary-color': '#F5222D',
|
||||
// 'link-color': '#F5222D',
|
||||
'border-radius-base': '2px'
|
||||
'border-radius-base': '2px',
|
||||
},
|
||||
// DO NOT REMOVE THIS LINE
|
||||
javascriptEnabled: true
|
||||
}
|
||||
}
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
devServer: {
|
||||
|
|
@ -114,10 +115,10 @@ const vueConfig = {
|
|||
ws: false,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api': ''
|
||||
}
|
||||
}
|
||||
}
|
||||
'^/api': '',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
publicPath: '/',
|
||||
|
||||
|
|
@ -125,7 +126,7 @@ const vueConfig = {
|
|||
productionSourceMap: false,
|
||||
lintOnSave: undefined,
|
||||
// babel-loader no-ignore node_modules/*
|
||||
transpileDependencies: []
|
||||
transpileDependencies: ['@cesium/widgets', '@cesium/engine'],
|
||||
}
|
||||
|
||||
// preview.pro.loacg.com only do not use in your production;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user