From 26bca983ad92b93ced5e3f41f105d8a54c5250a5 Mon Sep 17 00:00:00 2001 From: liaoboping <2824044657@qq.com> Date: Tue, 12 Aug 2025 09:24:09 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E9=83=A8=E6=83=B3=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/Directives/Flex.js | 6 +- src/components/Common/Directives/Loading.js | 49 +++++++ src/components/Common/register.js | 2 + src/core/lazy_use.js | 4 +- .../simulationScene/centralControl/index.vue | 137 +++++++++++++++++- src/views/simulationScene/display/index.vue | 13 +- .../simulationScene/sceneEditing/index.vue | 21 ++- 7 files changed, 217 insertions(+), 15 deletions(-) create mode 100644 src/components/Common/Directives/Loading.js diff --git a/src/components/Common/Directives/Flex.js b/src/components/Common/Directives/Flex.js index f5504b1..ad3cafd 100644 --- a/src/components/Common/Directives/Flex.js +++ b/src/components/Common/Directives/Flex.js @@ -4,6 +4,9 @@ const keyMaps = { fe: 'flex-end', sb: 'space-between', sa: 'space-around', + n: 'nowrap', + w: 'wrap', + wr: 'wrap-reverse', } export default { @@ -14,9 +17,10 @@ export default { el.style.flexDirection = 'column' } if (binding.value && binding.value instanceof Array) { - const [ai, jc] = binding.value + const [ai, jc, fw] = binding.value if (ai) el.style.alignItems = keyMaps[ai] || ai if (jc) el.style.justifyContent = keyMaps[jc] || jc + if (fw) el.style.flexWrap = keyMaps[fw] || fw } }, inserted(el, binding, vnode, oldVnode) { diff --git a/src/components/Common/Directives/Loading.js b/src/components/Common/Directives/Loading.js new file mode 100644 index 0000000..5e360aa --- /dev/null +++ b/src/components/Common/Directives/Loading.js @@ -0,0 +1,49 @@ +function initLoadingDom(el) { + el.loadingDom = document.createElement('div') + el.loadingDom.style.position = 'absolute' + el.loadingDom.style.backgroundColor = 'rgba(255,255,255,0.3)' + el.loadingDom.style.color = '#00f2fe' + el.loadingDom.style.fontSize = '40px' + el.loadingDom.style.display = 'flex' + el.loadingDom.style.alignItems = 'center' + el.loadingDom.style.justifyContent = 'center' +} +function appendLoadingDom(el) { + const { top, left, width, height } = el.getBoundingClientRect() + el.loadingDom.style.top = `${top}px` + el.loadingDom.style.left = `${left}px` + el.loadingDom.style.width = `${width}px` + el.loadingDom.style.height = `${height}px` + document.body.appendChild(el.loadingDom) + el.loadingDom.innerHTML = `` +} +function removeLoadingDom(el) { + document.body.removeChild(el.loadingDom) +} + +export default { + bind(el, binding, vnode, oldVnode) { + // console.log('----bind----', el, binding, vnode, oldVnode) + }, + inserted(el, binding, vnode, oldVnode) { + // console.log('----inserted----', el, binding, vnode, oldVnode) + initLoadingDom(el) + if (binding.value) { + appendLoadingDom(el) + } + }, + update(el, binding, vnode, oldVnode) { + // console.log('----update----', el, binding, vnode, oldVnode) + if (binding.value) { + appendLoadingDom(el) + } else { + removeLoadingDom(el) + } + }, + componentUpdated(el, binding, vnode, oldVnode) { + // console.log('----componentUpdated----', el, binding, vnode, oldVnode) + }, + unbind(el, binding, vnode, oldVnode) { + // console.log('----unbind----', el, binding, vnode, oldVnode) + }, +} diff --git a/src/components/Common/register.js b/src/components/Common/register.js index 8a49134..706a8a7 100644 --- a/src/components/Common/register.js +++ b/src/components/Common/register.js @@ -2,6 +2,7 @@ import ModuleWrapper from './Layout/ModuleWrapper.vue' import GridBox from './Directives/GridBox' import Flex from './Directives/Flex' +import Loading from './Directives/Loading' import MyCesium from './Cesium/index' @@ -11,6 +12,7 @@ export default { Vue.directive('grid-box', GridBox) Vue.directive('flex', Flex) + Vue.directive('loading', Loading) window.MyCesium = MyCesium }, diff --git a/src/core/lazy_use.js b/src/core/lazy_use.js index ccbf73c..2d3aa90 100644 --- a/src/core/lazy_use.js +++ b/src/core/lazy_use.js @@ -45,7 +45,8 @@ import { Descriptions, Space, message, - notification + notification, + Pagination, } from 'ant-design-vue' import Viser from 'viser-vue' @@ -99,6 +100,7 @@ Vue.use(Result) Vue.use(Statistic) Vue.use(Descriptions) Vue.use(Space) +Vue.use(Pagination) Vue.prototype.$confirm = Modal.confirm Vue.prototype.$message = message diff --git a/src/views/simulationScene/centralControl/index.vue b/src/views/simulationScene/centralControl/index.vue index 1b80964..9d45cdb 100644 --- a/src/views/simulationScene/centralControl/index.vue +++ b/src/views/simulationScene/centralControl/index.vue @@ -11,14 +11,41 @@
{{ block.moduleName }}
- {{ systemStatusDesc[block.moduleStatus] }} + {{ systemStatusDesc[block.moduleStatus] }}
- + +
+
+
+ +
+
+
{{ item.name }}
+
{{ item.author }}
+
+
+ +
+
+
+ +
+ +
@@ -62,11 +89,11 @@
- + -
+
{{ item.eventTime }} {{ item.eventDesc }} @@ -83,6 +110,15 @@ export default { name: 'SimulationSceneCentralControl', data() { return { + scenarioList: [], + loading: false, + loadedScenario: '', + pagination: { + current: 1, + pageSize: 10, + total: 0, + }, + runningMode: '1', radioType: 'xdsm', scenarioDetail: { @@ -159,7 +195,36 @@ export default { systemPathMap: (state) => state.simulation.systemPathMap, }), }, - watch: {}, + mounted() { + this.getScenarioList() + }, + methods: { + async getScenarioList() { + try { + this.loading = true + const res = await this.$http({ + url: '/baseData/scenario/list', + method: 'get', + params: { + pageNum: this.pagination.current, + pageSize: this.pagination.pageSize, + }, + }) + this.scenarioList = res.data.data + this.pagination.total = res.data.totalCount + } catch (error) { + console.log(error) + } finally { + this.loading = false + } + }, + handleLoadSenario(item) { + this.loadedScenario = item.id + }, + handleCloseSenario() { + this.loadedScenario = '' + }, + }, } @@ -204,6 +269,65 @@ export default { border-color: #00f2fe; } +.scenario-wrapper { + flex: 1; + width: 100%; + overflow: hidden; + margin-bottom: 20px; +} +.scenario-item { + position: relative; + cursor: pointer; + width: 100%; + height: 100%; + .scenario-image { + width: 100%; + height: 100%; + object-fit: cover; + } + .scenario-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + } + .scenario-brief { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 60px; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1)); + padding-left: 10px; + .scenario-name { + font-size: 20px; + line-height: 36px; + } + .scenario-author { + font-size: 12px; + line-height: 24px; + } + } + .scenario-reload { + position: absolute; + right: 20px; + bottom: 10px; + width: 40px; + height: 40px; + font-size: 40px; + line-height: 1; + display: none; + } + &:hover .scenario-reload { + display: block; + } + .scenario-reload:hover { + color: #00f2fe; + } +} + .scenario-info-wrapper { flex: 1; border: 1px solid #06445f; @@ -231,6 +355,7 @@ export default { background-color: #082532; padding: 20px; overflow-y: scroll; + display: block !important; .io-event-item { padding: 10px 0; font-size: 16px; diff --git a/src/views/simulationScene/display/index.vue b/src/views/simulationScene/display/index.vue index c4e364f..412d2b8 100644 --- a/src/views/simulationScene/display/index.vue +++ b/src/views/simulationScene/display/index.vue @@ -1,11 +1,20 @@ - + diff --git a/src/views/simulationScene/sceneEditing/index.vue b/src/views/simulationScene/sceneEditing/index.vue index 7d2b235..a3301cb 100644 --- a/src/views/simulationScene/sceneEditing/index.vue +++ b/src/views/simulationScene/sceneEditing/index.vue @@ -31,10 +31,13 @@
{{ zt.name }}
-
+
{{ item.label }}： {{ item.text }} +
+
+
@@ -136,10 +139,10 @@ export default { { 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: `0%` }, + { label: '系统', progress: `100%` }, + { label: '电量', progress: `90%` }, + { label: '失火', progress: `0%` }, { label: '状态', text: `未分配任务` }, ], }, @@ -192,6 +195,14 @@ export default { line-height: 30px; letter-spacing: 2px; color: #bbdded; + .progress-bar { + flex: 1; + height: 20px; + background-color: #9da0a1; + .progress { + background-color: #1b9b39; + } + } } .wq-item { text-decoration: underline;