全部想定

2025-08-12 09:24:09 +08:00 · 2025-08-12 09:24:09 +08:00 · 26bca983ad
commit 26bca983ad
parent a60e2f84a8
7 changed files with 217 additions and 15 deletions
--- 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) {
--- a/src/components/Common/Directives/Loading.js
+++ 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 = `<i aria-label="图标: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></i>`
+}
+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)
+  },
+}
--- 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
  },
--- 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
--- a/src/views/simulationScene/centralControl/index.vue
+++ b/src/views/simulationScene/centralControl/index.vue
@ -16,9 +16,36 @@
        </div>
      </div>
    </ModuleWrapper>
-    <ModuleWrapper title="想定信息">
+    <ModuleWrapper v-if="!loadedScenario" title="全部想定" style="grid-column: 1 / 3">
+      <div class="normal" v-flex.v="['c']" v-loading="loading">
+        <div class="scenario-wrapper" v-grid-box="{ columns: [1, 1, 1, 1, 1], rows: [1, 1] }">
+          <div v-for="item in scenarioList" :key="item.id" class="scenario-item">
+            <img
+              class="scenario-image"
+              :src="item.image || '/mockData/68ab3707-2552-4b78-bfc0-cec3502ec62f.png'"
+              alt=""
+            />
+            <div class="scenario-mask"></div>
+            <div class="scenario-brief">
+              <div class="scenario-name">{{ item.name }}</div>
+              <div class="scenario-author">{{ item.author }}</div>
+            </div>
+            <div class="scenario-reload" title="载入想定" @click="handleLoadSenario(item)">
+              <a-icon type="reload" />
+            </div>
+          </div>
+        </div>
+        <a-pagination
+          v-model="pagination.current"
+          :pageSize.sync="pagination.pageSize"
+          :total="pagination.total"
+          @change="getScenarioList"
+        />
+      </div>
+    </ModuleWrapper>
+    <ModuleWrapper v-if="loadedScenario" title="想定信息">
      <template #extra>
-        <a-button type="primary">加载想定</a-button>
+        <a-button type="primary" shape="circle" icon="close" @click="handleCloseSenario()" />
      </template>
      <div class="normal" v-flex.v>
        <div v-flex="['c', 'sb']" style="margin-bottom: 10px">
@ -62,11 +89,11 @@
        </div>
      </div>
    </ModuleWrapper>
-    <ModuleWrapper title="输入输出事件">
+    <ModuleWrapper v-if="loadedScenario" title="输入输出事件">
      <template #extra>
        <a-checkbox v-model="visible">显示</a-checkbox>
      </template>
-      <div class="io-event-list">
+      <div class="io-event-list" test="1" style="display: block">
        <div v-for="item in ioEventList" :key="item.id" class="io-event-item">
          <span style="margin-right: 20px">{{ item.eventTime }}</span>
          <span>{{ item.eventDesc }}</span>
@ -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 = ''
+    },
+  },
 }
 </script>

@ -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;
--- a/src/views/simulationScene/display/index.vue
+++ b/src/views/simulationScene/display/index.vue
@ -1,11 +1,20 @@
 <template>
-  <div>SimulationSceneDisplay</div>
+  <div class="disply-page">
+    <div class="cesium-container" id="cesium-container"></div>
+  </div>
 </template>

 <script>
 export default {
  name: 'SimulationSceneDisplay',
+  mounted() {
+    this.cesium = new window.MyCesium('cesium-container')
+  },
 }
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.cesium-container {
+  height: 100%;
+}
+</style>
--- a/src/views/simulationScene/sceneEditing/index.vue
+++ b/src/views/simulationScene/sceneEditing/index.vue
@ -31,10 +31,13 @@
        <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">
+          <div v-for="item in zt.ztList" :key="item.label" class="zt-item" v-flex="['c']">
            <span>{{ item.label }}：</span>
            <img :src="item.icon" alt="" />
            <span>{{ item.text }}</span>
+            <div v-if="'progress' in item" class="progress-bar" v-flex>
+              <div class="progress" :style="{ width: item.progress }"></div>
+            </div>
          </div>
        </div>
      </div>
@ -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;