全部想定

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) {

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)
+  },
+}

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
   },

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

src/views/simulationScene/centralControl/index.vue

@@ -11,14 +11,41 @@
           <img class="icon" :src="systemIconMap[block.moduleCode]" alt="" />
           <div class="title">{{ block.moduleName }}</div>
           <div :class="['status', `status-${block.moduleStatus}`]">
-            {{ systemStatusDesc[block.moduleStatus]  }}
+            {{ systemStatusDesc[block.moduleStatus] }}
           </div>
         </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;

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>

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: '毁伤', text: `0%` },
-          { label: '系统', progress: 100 },
+          { label: '系统', progress: `100%` },
-          { label: '电量', progress: 90 },
+          { label: '电量', progress: `90%` },
-          { label: '失火', progress: 0 },
+          { 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;