commit

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

src/layout/Aside/index.vue

@@ -1,69 +1,55 @@
 <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>
+      <dv-decoration-9 style="width:100px;height:100px;margin: 0 auto;" ><span style="color: #7ec699; text-shadow: 0 0 3px #7acaec;">任务栏</span></dv-decoration-9>
+      <dv-decoration-4 :reverse="true" style="width:200px;height:5px;" />
       <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/radarManagement">
-        <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/ECMManagement">
-        <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-submenu>
     <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;" slot="title">态势显控</dv-decoration-11>
     </el-menu-item>
     <el-menu-item index="/home/intel">
-        <i class="el-icon-tickets"></i>
-        <span slot="title">情报处理分发</span>
-      </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;" slot="title">情报处理分发</dv-decoration-11>
     </el-menu-item>
-      
+    <el-menu-item index="/home/dataManagement">
+        <dv-decoration-11 style="width:200px;height:60px;" slot="title">数据管理显控</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);
@@ -76,25 +62,75 @@ export default {
 }
 
 </script>
-<style scoped>
-.MainAside{
-   width: unset !important;
-   max-width: 300px;
-   background-color:rgb(0 43 54);
-   position: relative;
+<style  scoped>
+.MainAside {
+  width: unset !important;
+  max-width: 300px;
+  position: relative;
+}
+.MainAside::-webkit-scrollbar {
+     display: none;
 }
 
 .el-menu-vertical-demo:not(.el-menu--collapse) {
-    width: 200px;
-    min-height: 400px;
-  }
+  width: 200px;
+  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{
+}
+
+
+.el-menu {
   border: none;
 }
-.collapse{
+
+.el-menu--collapse {
+    width: 0px;
+}
+
+.collapse {
   position: absolute;
   bottom: 40px;
   width: 100%;
 }
-</style>
+</style>

src/layout/Footer/index.vue

@@ -1,75 +1,99 @@
 <template>
-    <el-footer class="MainFooter">
-        <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>
-        <span style="margin-top:4px;margin-left:10px;">平台信息</span>
-        <el-switch
-          style="margin-top:4px;margin-left:10px;"
-          v-model="platformshow"
-          :change = "platformShowChange()"
-          active-color="#13ce66"
-          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-footer>
+  <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>
+      <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;"
+        v-model="platformshow"
+        :change = "platformShowChange()"
+        active-color="#13ce66"
+        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"></el-input>
+      <dv-decoration-3 style="width:250px;height:30px;" />
+      <dv-decoration-10 style="width:300px;height:30px;" />
+  </el-footer>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 export default {
-    data(){
-      return{
-        platformshow: this.platformShow
+  data(){
+    return{
+      platformshow: this.platformShow,
+      config: {
+        //值
+        value: 0,
+        //颜色
+        colors: ['red'],
+        //边框宽度
+        borderWidth: 5
       }
-    },
-    computed: {
-    ...mapGetters([
-      'init',
-      'platformID'
-    ]),
+    }
   },
-    watch: {
-       init: {
-          handler: function(val, oldVal){
-            this.$wst.send({url:'getLeadPost',
-                      data:{'PlatformID': this.platformID}
-                      }) 
-          }
-       },
-       platformID: {
-          handler: function(val, oldVal){
-            
-          }
-       },
-    },
-    mounted(){
-      
+  computed: {
+  ...mapGetters([
+    'init',
+    'platformID',
+    'isCollapse'
+  ]),
+},
+  watch: {
+     init: {
+        handler: function(val, oldVal){
+          this.config.value = val
+        }
+     },
+     platformID: {
+        handler: function(val, oldVal){
+          
+        }
+     },
+  },
+  mounted(){
+    this.config.value
+  },
+  methods: {
+    platformShowChange(){
+      this.$store.commit('app/setPlatformShow',this.platformshow);
     },
-    methods: {
-      platformShowChange(){
-        this.$store.commit('app/setPlatformShow',this.platformshow);
-      }
-      
-  }
+    setCollapse(){
+      this.$store.commit('app/setIsCollapse',!this.isCollapse);
+    }
+    
+}
 }
 
 </script>
 <style  scoped>
 .MainFooter {
-    padding: 0px;
-    height: 30px !important;  
-    border-top: solid 1px #dcdfe6;
-    display: flex;
-    
+  padding: 0px;
+  height: 30px !important;  
+  display: flex;
+  color: #03d3ec;
+  
 }
 
 /deep/ .el-input--mini .el-input__inner {
-    height: 24px;
-    line-height: 24px;
-    background-color: #e1e1e1;
+  height: 24px;
+  line-height: 24px;
+  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,32 +1,51 @@
 <template>
-    <el-header class="MainHeader">
-     <h1 class="title">通用干扰平台任务模拟系统</h1>
-    </el-header>
+  <el-header class="MainHeader">
+  <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>
 export default {
-    data(){
-      return{
-    
+  data(){
+    return{
+  
+    }
+  },
+  methods: {
       }
-    },
-    methods: {
-        }
 }
 </script>
 <style lang="scss" scoped>
 .MainHeader {
-    padding: 0px;
-    line-height: 50px;
-    background:radial-gradient(ellipse farthest-corner at center center, white 0, green 100%);
-    border: 2px dashed red;
-    .title{
-      text-align: center;
-      vertical-align: middle;
-    }
-    
-}
-
-
+  position: relative;
+  padding: 0px;
+  display: flex;
+  justify-content: space-between;
+  height: 100px !important;
+  .title{
+    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;
+}
+  
+}
 </style>

src/layout/Main/index.vue

@@ -1,128 +1,206 @@
 <template>
-    <el-main class="Main">
-      <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>
-          </keep-alive>
-        </transition>
-      </div>
-      <transition name="el-fade-in-linear">
-      <div v-show ="platformShow"  class="right-container">
-        <el-card>
-          <div slot="header" class="clearfix">
-            <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-column prop="platformID" label="平台ID"></el-table-column>
-              <el-table-column prop="platformName" label="平台名称"></el-table-column>
-            </el-table>
-          </div>
-        </el-card>
-      </div> 
+  <el-main class="Main">
+    <div class="left-container">
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive :max="20">
+          <dv-border-box-8 style="padding:5px;">
+            <router-view :key="key" />
+          </dv-border-box-8>    
+        </keep-alive>
       </transition>
-    </el-main>
+    </div>
+    <transition name="el-fade-in-linear">
+    <div v-show ="platformShow"  class="right-container">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <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 >
+            <el-table-column prop="platformID" label="平台ID"></el-table-column>
+            <el-table-column prop="platformName" label="平台名称"></el-table-column>
+          </el-table>
+        </div>
+      </el-card>
+    </div> 
+    </transition>
+  </el-main>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 export default {
-  name: 'AppMain',
-  computed: {
-    ...mapGetters([
-      'init',
-      'platforms',
-      'platformShow',
-      'platformID'
-    ]),
-    key() {
-      return this.$router.path
-    }
-  },
-  watch: {
-       init: {
-          handler: function(val, oldVal){
-
-            this.$wst.send({url:'getPlatformTable'})
-  
-          }
-       },
-       platforms: {
-          handler: function(val, oldVal){
-            this.tableData = val;  
-          }
-       }
-  },
-  data(){
-    return{
-      tableData: [
-        ]
+name: 'AppMain',
+computed: {
+  ...mapGetters([
+    'init',
+    'platforms',
+    'platformShow',
+    'platformID'
+  ]),
+  key() {
+    return this.$router.path
+  }
+},
+watch: {
+     init: {
+        handler: function(val, oldVal){
+
+          this.$wst.send({url:'getPlatformTable'})
+
+        }
+     },
+     platforms: {
+        handler: function(val, oldVal){
+          this.tableData = val;  
+        }
+     }
+},
+data(){
+  return{
+    tableData: [
+      ]
+  }
+},
+mounted(){
+    if(this.init == 100) {
+         this.$wst.send({url:'getPlatformTable'})
     }
-  },
-  mounted(){
-      if(this.init == 100) {
-           this.$wst.send({url:'getPlatformTable'})
-      }
-  },
-  methods:{
-    handleCurrentChange(val) {
-      
-      this.$store.commit("app/setPlatformID",val.platformID)
-      }
+},
 
+methods:{
+  handleCurrentChange(val) {
+    
+    this.$store.commit("app/setPlatformID",val.platformID)
   }
-  
+
+}
+
 }
 </script>
 <style scoped>
 .Main{
-    background-color: var(--main-color);
-    position: relative;
-    padding: 10px !important;
-    height: calc(100vh - 90px);
-    overflow: hidden;
-    display: flex;
+  background-color: var(--main-color);
+  position: relative;
+  padding: 0px !important;
+  overflow: hidden;
+  display: flex;
+  color: white !important;
+  height: calc(100vh - 130px);
 }
 .left-container{
-  width: 100%;
+width: 100%;
 }
 .right-container{
-  position:fixed;
-  right: 30px;
-  width: 20%;
-  height: calc(100% - 150px);
-  z-index: 999;
-  
+position:fixed;
+right: 30px;
+top:120px;
+width: 20%;
+height: calc(100% - 150px);
+z-index: 999;
+
 }
 
 .right-container .el-card{
-  height: 100%;
-  background-color: #66b1ff;
+height: 100%;
+
 }
 
 .right-container .el-card /deep/ .el-card__body{
-  background-color: #66b1ff;
+
 }
 
 
-  .el-dropdown-link {
-    cursor: pointer;
-    color: #409EFF;
-  }
-  .el-icon-arrow-down {
-    font-size: 12px;
-  }
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409EFF;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
 
-.main-card{
-  height: 100%;
+/deep/ .el-card{
+background: transparent !important;
+border: none;
+color: white;
+height: 100%;
+}
+/deep/ .el-table{
+background: transparent !important;
+border: none;
+color: white;
 }
 
-.main-card /deep/ .el-card__body{
-  height: calc(100% - 40px);
+/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;
+}
+
+/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;
+height: calc(100% - 28px);
+}
+
+/deep/ .el-card__body .el-table{
+
+height: 100%;
+}
+
+/deep/ .el-card__header {
+background-color: #df8450;
+color: white;
+height: 28px;
+padding: 0px 20px;
+}
+
+
+
+/deep/input::-webkit-input-placeholder {
+color: #17a1e5;
+font-size: 15px;
+}
+
+/deep/.el-input__inner {
+background-color: transparent !important;
+border: 1px solid #1296db;
+color: #ffffff;
+}
+
+/deep/.el-form-item__label{
+color: white !important;
+}
 </style>
 

src/layout/index.vue

@@ -1,35 +1,40 @@
 <template>
-      <el-container class="outer-container">
-        <Header></Header>
-        <el-container class="center-container">
-          <Aside ></Aside>
-          <el-container direction="vertical" >
-            <Main></Main>
-          <Footer></Footer>
-        </el-container>
-        </el-container>
-      </el-container>
-  </template>
-  <script>
-  import { Header, Main, Aside, Footer } from './'
-  export default {
-    name: 'Layout',
-    components: {
-      Header,
-      Main,
-      Aside,
-      Footer
-    }
-  }
-  </script>
-  
-  <style scoped>
-  .outer-container{
-    height: 100vh;
-    flex-direction: column;
-  }
-  .center-container{
-    overflow: hidden;
-    height: calc(100vh - 90px);
-  }
-  </style>
+  <el-container class="outer-container">
+    <Header></Header>
+    <el-container class="center-container">
+      <Aside ></Aside>
+      <el-container direction="vertical" >
+        <Main></Main>
+      <Footer></Footer>
+    </el-container>
+    </el-container>
+  </el-container>
+</template>
+<script>
+import { Header, Main, Aside, Footer } from './'
+export default {
+name: 'Layout',
+components: {
+  Header,
+  Main,
+  Aside,
+  Footer
+}
+}
+</script>
+
+<style scoped>
+.outer-container{
+height: 100vh;
+flex-direction: column;
+-ms-flex-direction: column;
+flex-direction: column;
+background: url('~@/assets/image/bg.png');
+background-size: 100% 100%;
+}
+
+.center-container{
+overflow: hidden;
+height: calc(100vh - 130px);
+}
+</style>

src/main.js

@@ -10,6 +10,8 @@ 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:1235', {// 这里要填的是服务器的地址，可以换一个在线服务器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,
   radarInstances: state => state.app.radarInstances,

src/store/modules/app.js

@@ -2,6 +2,7 @@ const getDefaultState = () => {
   return {
     init: 0,
     map: null,
+    isCollapse: true,
     platforms: null,
     radarInstances: null,
     jamInstances: null,
@@ -104,6 +105,9 @@ const mutations = {
   },
   setDeviceZY(state, deviceZY) {
     state.deviceZY = deviceZY
+  },
+  setIsCollapse(state, isCollapse) {
+    state.isCollapse = isCollapse
   }
 }
 

src/views/taskManagement/index.vue

@@ -2,7 +2,7 @@
   <el-row :gutter="6">
     <el-col :span="12">
       <el-card class="box-card">
-        <div class="card-header">
+        <div slot="header" class="clearfix">
           <span>指挥电文管理</span>
         </div>
         <el-table :data="leadPost">