大数据可视化界面

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
     "core-js": "^3.6.5",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.13",

public/index.html

@@ -12,7 +12,10 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    
+    <div id="app">
+   
+    </div>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/layout/Aside/index.vue

@@ -1,75 +1,61 @@
 <template>
   <el-aside class="MainAside">
-    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="rgb(0 43 54)"
-      text-color="#fff" active-text-color="#ffd04b" :default-active="$route.path" :collapse="isCollapse" router>
+    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="transparent"
+      text-color="#fff" active-text-color="#19c3eb" :default-active="$route.path" :collapse="isCollapse" router>
       <el-menu-item index="/home/taskManagement">
-        <i class="el-icon-picture-outline-round"></i>
-        <span slot="title">任务管理显控</span>
+        <dv-decoration-11 style="width:200px;height:60px;">任务管理显控</dv-decoration-11>
       </el-menu-item>
       <el-menu-item index="/home/networkManagement">
-        <i class="el-icon-s-help"></i>
-        <span slot="title">通信管理显控</span>
+        <dv-decoration-11 style="width:200px;height:60px;">通信管理显控</dv-decoration-11>
       </el-menu-item>
       <el-menu-item index="/home/functionalityManagement">
-        <i class="el-icon-data-line"></i>
-        <span slot="title">健康管理显控</span>
+        <dv-decoration-11 style="width:200px;height:60px;">健康管理显控</dv-decoration-11>
       </el-menu-item>
       <el-submenu index="1">
         <template slot="title">
-          <i class="el-icon-location"></i>
-          <span slot="title">侦察资源显控</span>
+          <dv-decoration-11 style="width:200px;height:60px;">侦察资源显控</dv-decoration-11>
         </template>
         <el-menu-item index="/home/radarInvestigation">
-          <i class="el-icon-camera-solid"></i>
-          <span slot="title">雷侦显控</span>
+          <dv-decoration-7 style="width:200px;height:60px;">雷侦显控</dv-decoration-7>
         </el-menu-item>
         <el-menu-item disabled index="/home/telecomInvestigation">
-          <i class="el-icon-camera-solid"></i>
-          <span slot="title">通侦显控</span>
+          <dv-decoration-7 style="width:200px;height:60px;">通侦显控</dv-decoration-7>
         </el-menu-item>
         <el-menu-item disabled index="/home/opticalInvestigation">
-          <i class="el-icon-camera-solid"></i>
-          <span slot="title">光电成像显控</span>
+          <dv-decoration-7 style="width:200px;height:60px;">光电成像显控</dv-decoration-7>
         </el-menu-item>
         <el-menu-item disabled index="/home/sarInvestigation">
-          <i class="el-icon-camera-solid"></i>
-          <span slot="title">雷达成像显控</span>
+          <dv-decoration-7 style="width:200px;height:60px;">雷达成像显控</dv-decoration-7>
         </el-menu-item>
       </el-submenu>
       <el-menu-item index="/home/intel">
-        <i class="el-icon-tickets"></i>
-        <span slot="title">情报处理分发</span>
+        <dv-decoration-11 style="width:200px;height:60px;">情报处理分发</dv-decoration-11>
       </el-menu-item>
       <el-menu-item index="/home/situation">
-        <i class="el-icon-camera-solid"></i>
-        <span slot="title">态势显控</span>
+        <dv-decoration-11 style="width:200px;height:60px;">态势显控</dv-decoration-11>
       </el-menu-item>
       <el-menu-item index="/home/dataManagement">
-        <i class="el-icon-receiving"></i>
-        <span slot="title">数据管理显控</span>
+        <dv-decoration-11 style="width:200px;height:60px;">数据管理显控</dv-decoration-11>
       </el-menu-item>
 
     </el-menu>
-    <div @click="(isCollapse = !isCollapse)" class="collapse">
-      <el-tooltip class="item" effect="dark" content="展开" placement="right">
-        <i class="el-icon-d-arrow-right"
-          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto; color: yellow;" v-if="isCollapse"></i>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="收缩" placement="right">
-        <i class="el-icon-d-arrow-left"
-          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto;color: yellow;" v-if="!isCollapse"></i>
-      </el-tooltip>
-    </div>
+    
   </el-aside>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'Aside',
   data() {
     return {
-      isCollapse: true
+      
     };
   },
+  computed: {
+    ...mapGetters([
+      'isCollapse'
+    ]),
+  },
   methods: {
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
@@ -82,11 +68,10 @@ export default {
 }
 
 </script>
-<style scoped>
+<style  scoped>
 .MainAside {
   width: unset !important;
   max-width: 300px;
-  background-color: rgb(0 43 54);
   position: relative;
 }
 
@@ -95,10 +80,57 @@ export default {
   min-height: 400px;
 }
 
+.el-menu-item:hover{
+    color: #f46827 !important;
+    background: none !important;
+    text-decoration: underline;
+    
+}
+.el-menu-item:hover i {
+      color: #f46827 !important;
+      }
+.el-menu-item{
+    padding-left: 0px !important;
+    height: 70px;
+}
+/deep/ .el-submenu__title{
+    padding-left: 0px !important;
+    height: 70px;
+}
+
+/deep/ .el-submenu__title:hover{
+    color: #f46827 !important;
+    background: none !important;
+    text-decoration: underline;
+    
+}
+
+/deep/ .el-submenu__title:hover i{
+    color: #f46827 !important;
+    background: none !important;
+    text-decoration: underline;
+    
+}
+
+/deep/ .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
+	display: none; 
+
+}
+
+/deep/ .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
+	display: none;
+
+}
+
+
 .el-menu {
   border: none;
 }
 
+.el-menu--collapse {
+    width: 0px;
+}
+
 .collapse {
   position: absolute;
   bottom: 40px;

src/layout/Footer/index.vue

@@ -1,7 +1,18 @@
 <template>
     <el-footer class="MainFooter">
+      <div @click="setCollapse()" class="collapse">
+      <el-tooltip class="item" effect="dark" content="展开" placement="right">
+        <i class="el-icon-d-arrow-right"
+          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto; color: #19c3eb;" v-if="isCollapse"></i>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="收缩" placement="right">
+        <i class="el-icon-d-arrow-left"
+          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto;color: #19c3eb" v-if="!isCollapse"></i>
+      </el-tooltip>
+       </div>
+        <dv-decoration-6 style="width:300px;height:30px;" />
         <span style="margin-top:4px;margin-left:10px;">初始化状态</span>
-        <el-progress :text-inside="true" :percentage="init" :stroke-width="16"  style="width:200px;margin-top: 5px;margin-left: 5px;"></el-progress>
+        <dv-percent-pond :config="{value: init}" style="width:200px;margin-top: 5px;margin-left: 5px;" />
         <span style="margin-top:4px;margin-left:10px;">平台信息</span>
         <el-switch
           style="margin-top:4px;margin-left:10px;"
@@ -11,7 +22,9 @@
           inactive-color="#ff4949">
         </el-switch>  
         <span style="margin-top:4px;margin-left:10px;">平台编号</span>
-        <el-input v-model="platformID" :disabled="true" style="margin-top:2px; margin-bottom:2px;width:100px;margin-left:10px;" class="platformId" size="mini" placeholder="请选择平台"></el-input>
+        <el-input v-model="platformID" :disabled="true" style="margin-top:2px; margin-bottom:2px;width:100px;margin-left:10px;" class="platformId" size="mini"></el-input>
+        <dv-decoration-3 style="width:250px;height:30px;" />
+        
     </el-footer>
 </template>
 <script>
@@ -19,21 +32,28 @@ import { mapGetters } from 'vuex'
 export default {
     data(){
       return{
-        platformshow: this.platformShow
+        platformshow: this.platformShow,
+        config: {
+					//值
+					value: 0,
+					//颜色
+					colors: ['red'],
+					//边框宽度
+					borderWidth: 5
+				}
       }
     },
     computed: {
     ...mapGetters([
       'init',
-      'platformID'
+      'platformID',
+      'isCollapse'
     ]),
   },
     watch: {
        init: {
           handler: function(val, oldVal){
-            this.$wst.send({url:'getLeadPost',
-                      data:{'PlatformID': this.platformID}
-                      }) 
+            this.config.value = val
           }
        },
        platformID: {
@@ -43,11 +63,14 @@ export default {
        },
     },
     mounted(){
-      
+      this.config.value
     },
     methods: {
       platformShowChange(){
         this.$store.commit('app/setPlatformShow',this.platformshow);
+      },
+      setCollapse(){
+        this.$store.commit('app/setIsCollapse',!this.isCollapse);
       }
       
   }
@@ -58,18 +81,19 @@ export default {
 .MainFooter {
     padding: 0px;
     height: 30px !important;  
-    border-top: solid 1px #dcdfe6;
     display: flex;
+    color: #03d3ec;
     
 }
 
 /deep/ .el-input--mini .el-input__inner {
     height: 24px;
     line-height: 24px;
-    background-color: #e1e1e1;
+    background-color: transparent;
+    color: white;
 }
 .platformId /deep/ .el-input__inner{
-    background-color: white !important;
-    color: black;
+    background-color: #282c34;
+    color: white;
 }
 </style>

src/layout/Header/index.vue

@@ -1,6 +1,9 @@
 <template>
     <el-header class="MainHeader">
-     <h1 class="title">通用侦察平台任务模拟系统</h1>
+    <dv-decoration-8 class="header-left-decoration"/>
+    <dv-decoration-5 class="header-center-decoration"/>
+    <dv-decoration-8 :reverse="true" class="header-right-decoration"/>
+    <div class="title">通用侦察平台任务模拟系统</div>
     </el-header>
 </template>
 <script>
@@ -16,14 +19,33 @@ export default {
 </script>
 <style lang="scss" scoped>
 .MainHeader {
+    position: relative;
     padding: 0px;
-    line-height: 50px;
-    background:radial-gradient(ellipse farthest-corner at center center, white 0, green 100%);
-    border: 2px dashed red;
+    display: flex;
+    justify-content: space-between;
+    height: 100px !important;
     .title{
-      text-align: center;
-      vertical-align: middle;
+      color: white;
+      position: absolute;
+      font-size: 30px;
+      font-weight: 700;
+      left: 50%;
+      top: 15px;
+      transform: translateX(-50%);
     }
+
+    .header-left-decoration {
+      width: 25%;
+      height: 60px;
+    }
+    .header-right-decoration {
+      width: 25%;
+      height: 60PX;
+    }
+    .header-center-decoration {
+      width: 40%;
+      margin-top: 20px;
+  }
     
 }
 

src/layout/Main/index.vue

@@ -3,9 +3,9 @@
       <div class="left-container">
         <transition name="fade-transform" mode="out-in">
           <keep-alive :max="20">
-            <el-card class="main-card">
-                <router-view :key="key" />
-            </el-card>
+            <dv-border-box-8 style="padding:5px;">
+              <router-view :key="key" />
+            </dv-border-box-8>    
           </keep-alive>
         </transition>
       </div>
@@ -16,7 +16,7 @@
             <span>平台</span>
           </div>
           <div>
-            <el-table :data="tableData" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style="font-size: 10px;width: 100%;" @current-change="handleCurrentChange" highlight-current-row border>
+            <el-table :data="tableData" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style="font-size: 10px;width: 100%;" @current-change="handleCurrentChange" highlight-current-row >
               <el-table-column prop="platformID" label="平台ID"></el-table-column>
               <el-table-column prop="platformName" label="平台名称"></el-table-column>
             </el-table>
@@ -80,7 +80,7 @@ export default {
 .Main{
     background-color: var(--main-color);
     position: relative;
-    padding: 10px !important;
+    padding: 0px !important;
     height: calc(100vh - 90px);
     overflow: hidden;
     display: flex;
@@ -99,11 +99,11 @@ export default {
 
 .right-container .el-card{
   height: 100%;
-  background-color: #66b1ff;
+ 
 }
 
 .right-container .el-card /deep/ .el-card__body{
-  background-color: #66b1ff;
+  
 }
 
 
@@ -115,12 +115,65 @@ export default {
     font-size: 12px;
   }
 
-.main-card{
-  height: 100%;
+/deep/ .el-card{
+  background: transparent !important;
+  border: none;
+  color: white;
+}
+/deep/ .el-table{
+  background: transparent !important;
+  border: none;
+  color: white;
+}
+
+/deep/  .el-table, .el-table__expanded-cell {
+    background-color: transparent;
+}
+
+/deep/ .el-table tr {
+    background-color: transparent!important;
+    border: none;
+}
+
+/deep/ .el-table td {
+    border: none;
+}
+/deep/ .el-table th {
+    background-color: transparent!important;
+    color: white;
+}
+/deep/ .el-table--enable-row-transition .el-table__body td, .el-table .cell{
+   background-color: transparent;
 }
 
-.main-card /deep/ .el-card__body{
-  height: calc(100% - 40px);
+/deep/ .el-table__body tr.current-row>td {
+   color: #3be5ca !important;
+   background-color: transparent !important;
+}
+
+/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{
+
+background-color: #212e3e !important;
+
+}
+.el-table::before {
+	 left: 0;
+	 bottom: 0;
+	 width: 100%;
+	 height: 0px;
+}
+
+
+/deep/ .el-card__body{
+
+  background-color: rgba(6,30,93,.5);
+  padding: 0 !important;
+}
+/deep/ .el-card__header {
+  background-color: #1981f6;
+  color: white;
+  height: 20px;
+  line-height: 5px;
 }
 
 

src/layout/index.vue

@@ -27,6 +27,12 @@
   .outer-container{
     height: 100vh;
     flex-direction: column;
+    background-image: url('~@/assets/image/bg.png');
+    background-size: 100% 100%;
+    -webkit-box-shadow: 0 0 3px #00f;
+    box-shadow: 0 0 3px #00f;
+    -ms-flex-direction: column;
+    flex-direction: column;
   }
   .center-container{
     overflow: hidden;

src/main.js

@@ -10,6 +10,9 @@ import websocket from 'vue-native-websocket'
 import wst from  '@/utils/websocket'
 import SvgIcon from '@/components/svgIcon/index.vue'// svg component
 import '@/assets/svg'  // 导入图标资源
+// 将自动注册所有组件为全局组件
+import dataV from '@jiaminghi/data-view'
+Vue.use(dataV)
 Vue.use(websocket, 'ws://localhost:1234', {// 这里要填的是服务器的地址，可以换一个在线服务器wss://echo.websocket.org
   reconnection: true, // (Boolean)是否自动重连，默认false
   reconnectionAttempts: Infinity, // 重连次数

src/store/getters.js

@@ -1,5 +1,6 @@
 const getters = {
   init: state => state.app.init,
+  isCollapse: state => state.app.isCollapse,
   map: state => state.app.map,
   platforms: state => state.app.platforms,
   esmInstances: state => state.app.esmInstances,

src/store/modules/app.js

@@ -2,6 +2,7 @@ const getDefaultState = () => {
   return {
     init: 0,
     map: null,
+    isCollapse: true,
     platforms: null,
     esmInstances: null,
     esmParams: null,
@@ -93,6 +94,9 @@ const mutations = {
   },
   setDeviceZY(state, deviceZY) {
     state.deviceZY = deviceZY
+  },
+  setIsCollapse(state, isCollapse) {
+    state.isCollapse = isCollapse
   }
 }
 

src/views/situation/index.vue

@@ -9,11 +9,10 @@
           <el-radio-button label="combine" @click="echartsChange()">融合态势</el-radio-button>
           <el-radio-button label="global" @click="echartsChange()">全局态势</el-radio-button>
         </el-radio-group>
-        <el-card class="box-card">
+        <!-- <dv-decoration-12 class="radar" /> -->
           <div class="echarts-box">
             <div id="mapEchart" class="mapecharts"></div>
           </div>
-        </el-card>
       </el-col>
 
       <!-- <el-col :span="6" style="display: flex;flex-direction: column; height: 100%;">
@@ -64,14 +63,12 @@ export default ({
   watch: {
     map: {
       handler: function (val, oldVal) {
-        mapred = map.friend;
-        mapblue = map.enemy;
+      
       }
     },
     init: {
       handler: function (val, oldVal) {
         console.log(val)
-        this.setTimer();
       }
     },
     platforms: {
@@ -275,6 +272,9 @@ export default ({
   },
   mounted() {
     this.echartsInit();
+  },
+  activated() {
+    this.echartsInit();
     // 页面加载设置高度自适应
     window.onresize = () => {
 
@@ -282,22 +282,22 @@ export default ({
     };
     // 页面加载设置高度自适应
     this.resizeDom()
-    if (this.init == 100) {
-      this.setTimer();
-    }
+    
+    this.setTimer();
+    
 
   },
-  beforeDestroy() {
+  deactivated() {
     this.timerDestory()
   },
   methods: {
     setTimer() {
-      if (this.timer == null) {
-        this.timer = setInterval(() => {
-          console.log('开始定时...每过一秒执行一次')
-          this.echartsInit()
-        }, 1000)
-      }
+      
+      this.timer = setInterval(() => {
+        setTimeout(this.echartsInit(), 0);
+        
+      }, 2000)
+      
     },
     //初始化echarts
     echartsInit() {
@@ -353,11 +353,12 @@ export default ({
     echartsChange() {
       this.timerDestory()
       this.echartsInit();
-      this.setTimer();
+      // this.setTimer();
     },
     timerDestory() {
       if (this.timer) {
         clearInterval(this.timer);
+        this.timer == null;
       }
     },
     submitForm(map) {
@@ -409,6 +410,11 @@ export default ({
   z-index: 999;
 }
 
+.radar {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
 .box-card {
   min-height: 100%;
   height: 100%;
@@ -422,9 +428,6 @@ export default ({
 .echarts-box {
   height: 100%;
   width: 100%;
-  background-image: url('~@/assets/image/map-bg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
 }
 
 .container {

src/views/taskManagement/index.vue

@@ -2,9 +2,9 @@
   <el-row :gutter="6">
     <el-col :span="12">
       <el-card class="box-card">
-        <div class="card-header">
-          <span>指挥电文管理</span>
-        </div>
+        <div slot="header" class="clearfix">
+            <span>指挥电文管理</span>
+          </div>
         <el-table :data="leadPost">
           <el-table-column prop="time" label="时间"></el-table-column>
           <el-table-column prop="GroupID" label="编队号"></el-table-column>