vuex

src/Global.js

@@ -8,7 +8,10 @@ companyInfo = {
 headapi = process.env.NODE_ENV === 'development' ? './api/' : '../';
  // headapi =  '/api/';
 
-
+// 左侧隐藏
+left_panel_state = function (state) {
+    return state
+};
 // 常用选项
 globalQuipState = function () {
     let option = [

src/api/Navs.js

@@ -11,7 +11,7 @@ let navs = [{
     "show": "1",
     "grouplist": "2,5",
     "memo": "",
-    "icon": "icon-home",
+    "icon": "icon_home",
     "childs": [
         {
             "clmid": "11",
@@ -26,7 +26,7 @@ let navs = [{
             "show": "1",
             "grouplist": "2,5",
             "memo": null,
-            "icon": "icon-home"
+            "icon": "icon_home"
         },
     ]
 }, {
@@ -42,7 +42,7 @@ let navs = [{
     "show": "1",
     "grouplist": "2,5",
     "memo": "",
-    "icon": "icon-location",
+    "icon": "icon_region",
     "childs": [
         {
             "clmid": "21",
@@ -50,14 +50,14 @@ let navs = [{
             "ordno": "0",
             "c_level": "2",
             "clmcode": "front_index",
-            "clmname": "区域管理",
+            "clmname": "监控区域管理",
             "clmurl": "/region",
             "prname": null,
             "en": "1",
             "show": "1",
             "grouplist": "2,5",
             "memo": null,
-            "icon": "home_icon"
+            "icon": "icon_region"
         },
     ]
 }, {
@@ -66,14 +66,14 @@ let navs = [{
     "ordno": "1",
     "c_level": "1",
     "clmcode": "index",
-    "clmname": "监测记录",
+    "clmname": "无线设备管理",
     "clmurl": "",
     "prname": "",
     "en": "1",
     "show": "1",
     "grouplist": "2,5",
     "memo": "",
-    "icon": "icon-list",
+    "icon": "icon_signEquip",
     "childs": [
         {
             "clmid": "31",
@@ -81,42 +81,14 @@ let navs = [{
             "ordno": "0",
             "c_level": "2",
             "clmcode": "front_index",
-            "clmname": "手机信号",
-            "clmurl": "/phoneSign",
+            "clmname": "无线设备管理",
+            "clmurl": "/signEquip",
             "prname": null,
             "en": "1",
             "show": "1",
             "grouplist": "2,5",
             "memo": null,
-            "icon": "home_icon"
-        }, {
-            "clmid": "32",
-            "spclmid": "0",
-            "ordno": "0",
-            "c_level": "2",
-            "clmcode": "front_index",
-            "clmname": "wifi信号",
-            "clmurl": "/wifiSign",
-            "prname": null,
-            "en": "1",
-            "show": "1",
-            "grouplist": "2,5",
-            "memo": null,
-            "icon": "home_icon"
-        },{
-            "clmid": "33",
-            "spclmid": "0",
-            "ordno": "0",
-            "c_level": "2",
-            "clmcode": "front_index",
-            "clmname": "白名单",
-            "clmurl": "/white",
-            "prname": null,
-            "en": "1",
-            "show": "1",
-            "grouplist": "2,5",
-            "memo": null,
-            "icon": "home_icon"
+            "icon": "icon_signEquip"
         },
     ]
 },
@@ -126,14 +98,14 @@ let navs = [{
         "ordno": "1",
         "c_level": "1",
         "clmcode": "index",
-        "clmname": "设备管理",
+        "clmname": "探测设备管理",
         "clmurl": "",
         "prname": "",
         "en": "1",
         "show": "1",
         "grouplist": "2,5",
         "memo": "",
-        "icon": "icon-equip",
+        "icon": "icon_equip",
         "childs": [
             {
                 "clmid": "41",
@@ -141,7 +113,7 @@ let navs = [{
                 "ordno": "0",
                 "c_level": "2",
                 "clmcode": "front_index",
-                "clmname": "设备管理",
+                "clmname": "探测设备管理",
                 "clmurl": "/equip",
                 "prname": null,
                 "en": "1",
@@ -158,14 +130,14 @@ let navs = [{
         "ordno": "1",
         "c_level": "1",
         "clmcode": "index",
-        "clmname": "二维码管理",
+        "clmname": "检测记录管理",
         "clmurl": "",
         "prname": "",
         "en": "1",
         "show": "1",
         "grouplist": "2,5",
         "memo": "",
-        "icon": "icon-qrcode",
+        "icon": "icon_record",
         "childs": [
             {
                 "clmid": "51",
@@ -173,8 +145,8 @@ let navs = [{
                 "ordno": "0",
                 "c_level": "2",
                 "clmcode": "front_index",
-                "clmname": "二维码管理",
-                "clmurl": "/qrcodemanage",
+                "clmname": "检测记录管理",
+                "clmurl": "/record",
                 "prname": null,
                 "en": "1",
                 "show": "1",
@@ -190,14 +162,76 @@ let navs = [{
         "ordno": "1",
         "c_level": "1",
         "clmcode": "index",
-        "clmname": "系统设置",
+        "clmname": "扫描策略管理",
+        "clmurl": "",
+        "prname": "",
+        "en": "1",
+        "show": "1",
+        "grouplist": "2,5",
+        "memo": "",
+        "icon": "icon_tactics",
+        "childs": [
+            {
+                "clmid": "61",
+                "spclmid": "0",
+                "ordno": "0",
+                "c_level": "2",
+                "clmcode": "front_index",
+                "clmname": "扫描策略管理",
+                "clmurl": "/tactics",
+                "prname": null,
+                "en": "1",
+                "show": "1",
+                "grouplist": "2,5",
+                "memo": null,
+                "icon": "home_icon"
+            },
+        ]
+    }, {
+        "clmid": "7",
+        "spclmid": "0",
+        "ordno": "1",
+        "c_level": "1",
+        "clmcode": "index",
+        "clmname": "任务计划管理",
+        "clmurl": "",
+        "prname": "",
+        "en": "1",
+        "show": "1",
+        "grouplist": "2,5",
+        "memo": "",
+        "icon": "icon_plan",
+        "childs": [
+            {
+                "clmid": "61",
+                "spclmid": "0",
+                "ordno": "0",
+                "c_level": "2",
+                "clmcode": "front_index",
+                "clmname": "任务计划管理",
+                "clmurl": "/plan",
+                "prname": null,
+                "en": "1",
+                "show": "1",
+                "grouplist": "2,5",
+                "memo": null,
+                "icon": "home_icon"
+            },
+        ]
+    }, {
+        "clmid": "8",
+        "spclmid": "0",
+        "ordno": "1",
+        "c_level": "1",
+        "clmcode": "index",
+        "clmname": "扫描任务管理",
         "clmurl": "",
         "prname": "",
         "en": "1",
         "show": "1",
         "grouplist": "2,5",
         "memo": "",
-        "icon": "icon-setting",
+        "icon": "icon_task",
         "childs": [
             {
                 "clmid": "61",
@@ -205,8 +239,8 @@ let navs = [{
                 "ordno": "0",
                 "c_level": "2",
                 "clmcode": "front_index",
-                "clmname": "固件管理",
-                "clmurl": "/hardware",
+                "clmname": "扫描任务管理",
+                "clmurl": "/task",
                 "prname": null,
                 "en": "1",
                 "show": "1",
@@ -214,14 +248,61 @@ let navs = [{
                 "memo": null,
                 "icon": "home_icon"
             },
+        ]
+    }, {
+        "clmid": "9",
+        "spclmid": "0",
+        "ordno": "1",
+        "c_level": "1",
+        "clmcode": "index",
+        "clmname": "统计报表",
+        "clmurl": "",
+        "prname": "",
+        "en": "1",
+        "show": "1",
+        "grouplist": "2,5",
+        "memo": "",
+        "icon": "icon_statistics",
+        "childs": [
             {
-                "clmid": "62",
+                "clmid": "61",
+                "spclmid": "0",
+                "ordno": "0",
+                "c_level": "2",
+                "clmcode": "front_index",
+                "clmname": "统计报表",
+                "clmurl": "/statistics",
+                "prname": null,
+                "en": "1",
+                "show": "1",
+                "grouplist": "2,5",
+                "memo": null,
+                "icon": "home_icon"
+            },
+        ]
+    }, {
+        "clmid": "10",
+        "spclmid": "0",
+        "ordno": "1",
+        "c_level": "1",
+        "clmcode": "index",
+        "clmname": "系统设定",
+        "clmurl": "",
+        "prname": "",
+        "en": "1",
+        "show": "1",
+        "grouplist": "2,5",
+        "memo": "",
+        "icon": "icon_setting",
+        "childs": [
+            {
+                "clmid": "61",
                 "spclmid": "0",
                 "ordno": "0",
                 "c_level": "2",
                 "clmcode": "front_index",
-                "clmname": "密码修改",
-                "clmurl": "/pwd",
+                "clmname": "系统设定",
+                "clmurl": "/setting",
                 "prname": null,
                 "en": "1",
                 "show": "1",

src/assets/css/cube.css

@@ -8,46 +8,50 @@ em,s,i {
 }
 .image-border {
     position: absolute;
-    width: 20px;
-    height: 20px;
+    width: 5px;
+    height: 5px;
 }
 
 .image-border1 {
-    top: 0px;
+    top: 0;
     left: 0;
-    border-left: 2px solid #6DC1FF;
-    border-top: 2px solid #6DC1FF;
+    border-left: 2px solid #00FEFF;
+    border-top: 2px solid #00FEFF;
 }
 
 .image-border2 {
     top: 0;
-    right: -2px;
-    border-right: 2px solid #6DC1FF;
-    border-top: 2px solid #6DC1FF;
+    right: 0px;
+    border-right: 2px solid #00FEFF;
+    border-top: 2px solid #00FEFF;
 }
 
 .image-border3 {
     bottom: 0;
     left: 0;
-    border-bottom: 2px solid #6DC1FF;
-    border-left: 2px solid #6DC1FF;
+    border-bottom: 2px solid #00FEFF;
+    border-left: 2px solid #00FEFF;
 }
 
 .image-border4 {
     bottom: 0;
-    right: -2px;
-    border-right: 2px solid #6DC1FF;
-    border-bottom: 2px solid #6DC1FF;
+    right: 0px;
+    border-right: 2px solid #00FEFF;
+    border-bottom: 2px solid #00FEFF;
 }
 
 .other-people {
-    border: 1px solid #01355B;
-    width: 200px;
-    height: 200px;
-    margin-left: 61px;
-    padding: 5px;
+    /*border: 1px solid #01355B;*/
+    width: 120px;
+    height: 26px;
+    line-height: 26px;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
     position: relative;
-    background: rgba(0,15,42,0.60);
+    text-align: center;
+    font-size: 14px;
+    /*background: rgba(0,15,42,0.60);*/
 }
 
 .other-image {
@@ -56,19 +60,9 @@ em,s,i {
 }
 
 .other-people-title {
-    position: absolute;
-    top: 1px;
-    left: 0;
-    right: 0;
-    width:164px;
-    height: 36px;
-    font-size: 16px;
-    line-height: 36px;
-    color: #6DC1FF;
-    margin: 0 auto;
     text-align: center;
-    background: url("../../assets/img/op_title.png")top center no-repeat;
-    background-size: 100%;
+    font-size: 14px;
+    color: #fff;
 }
 .cubeContent {
     width: 100%;

src/components/Detecter.vue

@@ -1,25 +1,25 @@
 <template>
     <div class="detecter">
         <div class="other-people">
-            <div class="image-border image-border1"></div>
-            <div class="image-border image-border2"></div>
-            <div class="image-border image-border3"></div>
-            <div class="image-border image-border4"></div>
-            <div class="regionList">
-                <div class="other-people-title">
-                    探测设备列表
-                </div>
-                <ul>
-                    <el-row :gutter="21">
-                        <el-col :span="8" v-for="(region,i) in regionList">
-                            <div :class="[{'regionItem':true},{'active':loftIndex == i }]" @click="handleSelect(i)">
-                                <div class="grid-content bg-purple"> {{region.Name}}</div>
-                            </div>
-                        </el-col>
-                    </el-row>
-                </ul>
+            <div class="other-people-title">
+                <div class="image-border image-border1"></div>
+                <div class="image-border image-border2"></div>
+                <div class="image-border image-border3"></div>
+                <div class="image-border image-border4"></div>
+                探测设备列表
             </div>
         </div>
+        <div class="regionList">
+            <ul>
+                <el-row :gutter="21">
+                    <el-col :span="8" v-for="(region,i) in regionList">
+                        <div :class="[{'regionItem':true},{'active':loftIndex == i }]" @click="handleSelect(i)">
+                            <div class="grid-content bg-purple"> {{region.Name}}</div>
+                        </div>
+                    </el-col>
+                </el-row>
+            </ul>
+        </div>
     </div>
 </template>
 
@@ -35,7 +35,7 @@
         methods: {
             handleSelect(i) {
                 this.loftIndex = parseInt(i);
-                this.$emit('ClickGetInfo', i);//触发事件
+                this.$router.push({path: '/equip', query: {id: parseInt(i)}});
             },
         }
     }
@@ -47,33 +47,30 @@
         overflow: hidden;
         display: block;
         margin: 0 auto;
+        margin-top: 20px;
     }
 
-    /deep/ .other-people {
-        width: 350px;
-        height: 142px;
-        margin-left: 0;
-        padding: 0;
-        padding-right: 5px;
-    }
     ul {
         width: 90%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        margin-top: 50px;
+        margin-top: 20px;
     }
+
     .regionItem {
-        border: 1px solid #6DC1FF;
-        color: #6DC1FF;
+        border: 1px solid #005EA2;
+        background: rgba(27,86,200,0.14);
+        color: #fff;
         padding-top: 5px;
         padding-bottom: 5px;
         margin-bottom: 8px;
-        border-radius: 5px;
+        border-radius: 0px;
         cursor: pointer;
+        font-size: 14px;
     }
+
     .regionItem.active {
-        background: #6DC1FF;
-        color: #fff;
+        background: #005EA2;
     }
 </style>

src/components/Headside.vue

@@ -6,29 +6,39 @@
                 <i class="dot"></i>
                 <em>检测中</em>
             </div>
+            <div class="fill_left" @click="left_part_hide">
+                <img src="../assets/img/headside/fill_left.png" height="14" width="18"/>
+            </div>
+            <div class="screen">
+                <img src="../assets/img/headside/screen_max.png" v-if="!screen_full" height="18" width="19"
+                     @click="full_screen"/>
+                <img src="../assets/img/headside/screen_min.png" v-if="screen_full" height="18" width="19"
+                     @click="cancle_screen"/>
+            </div>
             <div class="center">
-                保密会议室无线信号安全监控系统
+                无线信号安全监控系统
             </div>
-            <ul class="user-info-menu right-links list-inline list-unstyled" v-if="false">
-                <li class="dropdown user-profile">
-                    <el-dropdown>
-                         <i class="icon-user"></i>
-                          <span class="el-dropdown-link customer_serve">
-                            {{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
-                          </span>
-                        <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item icon="el-icon-plus" @click.native="logoutClick">退出登录</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
-                </li>
-
-            </ul>
+            <!--<ul class="user-info-menu right-links list-inline list-unstyled" v-if="false">-->
+            <!--<li class="dropdown user-profile">-->
+            <!--<el-dropdown>-->
+            <!--<i class="icon-user"></i>-->
+            <!--<span class="el-dropdown-link customer_serve">-->
+            <!--{{user.name}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
+            <!--</span>-->
+            <!--<el-dropdown-menu slot="dropdown">-->
+            <!--<el-dropdown-item icon="el-icon-plus" @click.native="logoutClick">退出登录</el-dropdown-item>-->
+            <!--</el-dropdown-menu>-->
+            <!--</el-dropdown>-->
+            <!--</li>-->
+
+            <!--</ul>-->
         </nav>
     </div>
 </template>
 <script>
     import axios from 'axios';
-
+    import Global from "../Global"
+    import { mapGetters, mapActions, mapState } from "vuex";
     let qs = require('qs');
     export default {
         data() {
@@ -38,27 +48,55 @@
                 },
                 newnum: '',
                 newnumState: false,
-                left_panel_state: false
+                screen_full: false,
+                left_panel_state: false,
             }
         },
-        mounted() {
-            this.readNewNum();
-//            定时轮询news
-            //设置10s刷新一次数据
-            // if (this.timer) {
-            //     clearInterval(this.timer);
-            // }else{
-            //     this.timer = setInterval(() => {
-            //         this.readNewNum();
-            //     },10000)
-            // }
+        computed:{
+            ...mapGetters({
+                'getCount': 'status/getCount'
+            })
         },
         methods: {
+            left_part_hide(){
+                this.$store.dispatch('status/addCount')
+            },
+            // 全屏
+            full_screen() {
+                this.screen_full = true;
+                let elem = document.body;
+                if (elem.webkitRequestFullScreen) {
+                    elem.webkitRequestFullScreen();
+                } else if (elem.mozRequestFullScreen) {
+                    elem.mozRequestFullScreen();
+                } else if (elem.requestFullScreen) {
+                    elem.requestFullscreen();
+                } else {
+                    this.screen_full = false;
+                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
+                }
+            },
+            // 取消全屏
+            cancle_screen() {
+                this.screen_full = false;
+                var elem = document;
+                if (elem.webkitCancelFullScreen) {
+                    elem.webkitCancelFullScreen();
+                } else if (elem.mozCancelFullScreen) {
+                    elem.mozCancelFullScreen();
+                } else if (elem.cancelFullScreen) {
+                    elem.cancelFullScreen();
+                } else if (elem.exitFullscreen) {
+                    elem.exitFullscreen();
+                } else {
+                    this.screen_full = true;
+                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
+                }
+            },
 //            隐藏左侧和显示
             left_hide: function () {
                 let that = this;
-                that.left_panel_state = !that.left_panel_state;
-                console.log(223);
+                // that.left_panel_state = !that.left_panel_state;
                 this.$emit('lefthide');
                 // if (!that.left_panel_state) {
                 //     this.$emit('left_hide_func');
@@ -66,51 +104,26 @@
                 //     this.$emit('right_hide_func');
                 // }
             },
-//            打开消息提示
-            checkNews: function () {
-                let that = this;
-                const h = this.$createElement;
-                this.$notify({
-                    title: '标题名称',
-                    position: 'top-left',
-                    message: h('i', {style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'),
-                    onClose: function () {
-                        //关闭时调用已读接口
-                    },
-                    onClick: function () {
-                        //关闭时调用已读接口
-                        this.close();//关闭notify
-                        let thisdata = {name: 'message', link: '/#/message'};
-                        that.$emit('navOpen', thisdata);//跳转新的message
-                    }
-                });
-            },
-//            读取消息提示数量
-            readNewNum: function () {
-                this.newnum = 0;
-                this.newnumState = false;
-//                ajax todo
-            },
-            // 退出登录
-            logoutClick: function () {
-                let that = this;
-                that.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning'
-                }).then(() => {
-                    let url = headapi + '?ctl=ajax&mod=index&act=logout';
-                    let param = {};
-                    let postdata = qs.stringify(param);
-                    axios.post(url, postdata).then(function (data) {
-                        that.$router.push({path: '/login', query: {status: 1}});
-                    }, function (response) {
-                        console.info(response);
-                    })
-                }).catch(() => {
-
-                });
-            },
+            // // 退出登录
+            // logoutClick: function () {
+            //     let that = this;
+            //     that.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
+            //         confirmButtonText: '确定',
+            //         cancelButtonText: '取消',
+            //         type: 'warning'
+            //     }).then(() => {
+            //         let url = headapi + '?ctl=ajax&mod=index&act=logout';
+            //         let param = {};
+            //         let postdata = qs.stringify(param);
+            //         axios.post(url, postdata).then(function (data) {
+            //             that.$router.push({path: '/login', query: {status: 1}});
+            //         }, function (response) {
+            //             console.info(response);
+            //         })
+            //     }).catch(() => {
+            //
+            //     });
+            // },
         },
         components: {}
     }
@@ -464,6 +477,7 @@
     .el-dropdown-menu__item {
         padding: 5px;
     }
+
     .icon-head {
         width: 18px;
         height: 18px;
@@ -473,11 +487,13 @@
         background: url("../assets/img/icon/header.png") top center no-repeat;
         background-size: 100%;
     }
+
     .watching {
         float: left;
         margin-left: 20px;
 
     }
+
     .watching .dot {
         width: 12px;
         height: 12px;
@@ -489,6 +505,7 @@
         animation: bulge 2s infinite ease-in-out;
         animation-delay: 0s;
     }
+
     .watching em {
         line-height: 45px;
         font-size: 14px;
@@ -525,6 +542,7 @@
             opacity: 0;
         }
     }
+
     .center {
         position: absolute;
         top: 0;
@@ -532,11 +550,14 @@
         right: 0;
         text-align: center;
         margin-top: 20px;
-        padding-bottom: 20px;
+        padding-bottom: 30px;
         font-size: 26px;
         color: #FFFFFF;
-        background: url("../assets/img/headbotter.png")bottom center no-repeat;
+        background: url("../assets/img/headbotter.png") bottom center no-repeat;
+        background-size: 100% 100%;
+        line-height: 30px;
     }
+
     .icon-user {
         width: 28px;
         height: 28px;
@@ -547,4 +568,21 @@
         background-size: 100%;
     }
 
+    .fill_left {
+        position: absolute;
+        float: left;
+        margin-top: 20px;
+        margin-left: 24%;
+        cursor: pointer;
+        z-index: 222;
+    }
+
+    .screen {
+        position: absolute;
+        right: 1%;
+        float: right;
+        margin-top: 20px;
+        cursor: pointer;
+        z-index: 222;
+    }
 </style>

src/components/Navside.vue

@@ -14,10 +14,6 @@
                         router
                         :collapse="isCollapse"
                 >
-                    <!--<el-menu-item class="el-submenu" index="1" route="/" title="系统首页">-->
-                    <!--<i class="icon-home"></i>-->
-                    <!--<span slot="title">系统首页</span>-->
-                    <!--</el-menu-item>-->
                     <el-submenu :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs">
                         <template slot="title">
                             <i :class="nav.icon"></i>
@@ -30,7 +26,7 @@
                     </el-submenu>
                     <el-submenu index="99">
                         <template slot="title">
-                            <i class="icon-logout"></i>
+                            <i class="icon_logout"></i>
                             <span>退出登陆</span>
                         </template>
                         <el-menu-item-group>
@@ -109,7 +105,7 @@
     .shortnav {
         position: absolute;
         width: 65px;
-        top: 48px;
+        top: 54px;
         bottom: 0;
         overflow: hidden;
         display: block;
@@ -169,66 +165,205 @@
         float: left;
     }
 
-    .icon-home {
+
+    .icon_home {
         width: 18px;
         height: 18px;
         float: left;
         margin-top: 20px;
-        background: url("../assets/img/icon/home.png") top center no-repeat;
+        background: url("../assets/img/navside/icon_home.png") top center no-repeat;
         background-size: 100%;
     }
 
-    .icon-location {
+    .icon_region {
         width: 18px;
         height: 18px;
         float: left;
         margin-top: 20px;
-        background: url("../assets/img/icon/location.png") top center no-repeat;
+        background: url("../assets/img/navside/icon_region.png") top center no-repeat;
         background-size: 100%;
     }
 
-    .icon-list {
+    .icon_signEquip {
         width: 18px;
-        height: 22px;
+        height: 18px;
         float: left;
         margin-top: 20px;
-        background: url("../assets/img/icon/list.png") top center no-repeat;
-        background-size: 100% 100%;
+        background: url("../assets/img/navside/icon_signEquip.png") top center no-repeat;
+        background-size: 100%;
     }
 
-    .icon-equip {
+    .icon_equip {
         width: 18px;
-        height: 22px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_equip.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    .icon_record {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_record.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    .icon_tactics {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_tactics.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    .icon_plan {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_plan.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    .icon_task {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_task.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    .icon_statistics {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_statistics.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    .icon_setting {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_setting.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+
+    .icon_logout {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_logout.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+
+
+    li:hover .icon_home {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_home_w.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    li:hover .icon_region {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_region_w.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    li:hover .icon_signEquip {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_signEquip_w.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    li:hover .icon_equip {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_equip_w.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    li:hover .icon_record {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_record_w.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    li:hover .icon_tactics {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_tactics_w.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    li:hover .icon_plan {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/navside/icon_plan_w.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    li:hover .icon_task {
+        width: 18px;
+        height: 18px;
         float: left;
         margin-top: 20px;
-        background: url("../assets/img/icon/equip.png") top center no-repeat;
+        background: url("../assets/img/navside/icon_task_w.png") top center no-repeat;
         background-size: 100%;
     }
 
-    .icon-qrcode {
+    li:hover .icon_statistics {
         width: 18px;
         height: 18px;
         float: left;
         margin-top: 20px;
-        background: url("../assets/img/icon/qrcode.png") top center no-repeat;
+        background: url("../assets/img/navside/icon_statistics_w.png") top center no-repeat;
         background-size: 100%;
     }
 
-    .icon-setting {
+    li:hover .icon_setting {
         width: 18px;
         height: 18px;
         float: left;
         margin-top: 20px;
-        background: url("../assets/img/icon/setting.png") top center no-repeat;
+        background: url("../assets/img/navside/icon_setting_w.png") top center no-repeat;
         background-size: 100%;
     }
 
-    .icon-logout {
+    li:hover .icon_logout{
         width: 18px;
         height: 18px;
         float: left;
         margin-top: 20px;
-        background: url("../assets/img/icon/logout.png") top center no-repeat;
+        background: url("../assets/img/navside/icon_logout_w.png") top center no-repeat;
         background-size: 100%;
     }
 

src/components/Navside2.vue

@@ -1,232 +0,0 @@
-<template>
-    <div id="navside" :class="[{'wild':wildState == 0},{'short':wildState != 0}]">
-        <img src="../assets/logo.png" class="logo" width="100%" height="60px" alt="">
-        <header class="logo-env">
-            <ul id="main-menu" class="main-menu" data-clmid="0" data-url="">
-                <li v-for="(nav,index) in navs" :key="index">
-                    <a @click="handleNodeClick(nav,index)">
-                        <i :class="nav.clicon"></i>
-                        <span class="title" :data-url="nav.clmurl">{{nav.clmname}}</span>
-                        <div v-if="nav.childs != ''  && nav.clmname != '退出系统' && nav.clmname != '首页' && nav.clmname != '关于我们'  ">
-                            <i class="el-icon-arrow-up" v-if="childs && index == hasChilds"></i>
-                            <i class="el-icon-arrow-down" v-else></i>
-                        </div>
-                    </a>
-                    <el-collapse-transition>
-                        <ul class="hide_tap child_tap" v-show="childs && index == hasChilds && showChilds">
-                            <li v-for="(child,j) in nav.childs" v-bind:key="j">
-                                <a @click="handleNodeClick(child,index)">
-                                    <i class="el-icon-info"></i>
-                                    <span class="title" :data-url="child.clmurl">{{child.clmname}}</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </el-collapse-transition>
-                </li>
-            </ul>
-        </header>
-    </div>
-</template>
-
-<script>
-    import Navs from '../api/Navs';
-    import axios from 'axios';
-
-    let qs = require('qs');
-    export default {
-        data() {
-            return {
-                wildState: 0,
-                appname: '',
-                showChilds: false,
-                hasChilds: '',
-                navs: [],
-                childs: [],
-                navshow: [false, false, false],
-            }
-        },
-        mounted() {
-            this.getTableQuery();
-        },
-        methods: {
-            hidePanel() {
-                this.wildState = 1;
-            },
-            showPanel() {
-                this.wildState = 0;
-            },
-            getTableQuery() {
-                // 菜单
-                this.navs = Navs;
-            },
-            handleNodeClick(menudata, index) {
-                let that = this;
-                let clmurl = menudata['clmurl'];
-                if (menudata.clmname == '退出系统') {
-                    that.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
-                        confirmButtonText: '确定',
-                        cancelButtonText: '取消',
-                        type: 'warning'
-                    }).then(() => {
-                        that.logout();
-                    }).catch(() => {
-                        that.$message({
-                            showClose: true,
-                            message: '您已取消退出操作',
-                        });
-                    });
-                } else {
-                    if (!clmurl) {
-                        that.hasChilds = index;
-                        that.showChilds = !that.showChilds;
-                        // that.showChilds = true;
-                    } else {
-                        that.$emit('navOpen', menudata);
-                    }
-                }
-            },
-            navshowClick: function (index) {
-                this.navshow = [false, false, false];
-                this.navshow[index] = true;
-            },
-            // 注销
-            logout() {
-                localStorage.usercode = '';
-                this.$router.push({path: '/login', query: {status: 1}});
-                // const that = this;
-                // let url = headapi + '?ctl=&act=logout';
-                // let param = {};
-                // let postdata = qs.stringify(param);
-                // axios.post(url, postdata).then(function (data) {
-                //     let json = data.data;
-                //     // that.$router.push({path: '/login', query: {status: 1}});
-                // }, function (response) {
-                //     console.info(response);
-                // })
-            }
-        },
-        components: {}
-    }
-</script>
-<style scoped>
-    ul, li {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-
-    #navside {
-        position: absolute;
-        top: 0px;
-        height: 100%;
-        overflow: hidden;
-        z-index: 2000;
-        background-color: #EFEFEF;
-        color: #333;
-        text-align: center;
-        line-height: 200px;
-        border-right: 6px solid #E6E6E6;
-    }
-
-    .wild {
-        width: 230px;
-    }
-
-    .short {
-        width: 0px !important;
-    }
-
-    .logo {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-bottom: 30px;
-    }
-
-    .main-menu {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-top: 20px;
-    }
-
-    .main-menu li {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        cursor: pointer;
-        border-bottom: 1px solid #E5E5E5;
-    }
-
-    .main-menu li a {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        height: 57px;
-        line-height: 57px;
-        color: #3B3B3B;
-        border-left: 3px solid #EFEFEF;
-        font-size: 16px;
-        text-align: center;
-    }
-
-    .main-menu li a:hover {
-        background-color: #fff;
-        border-left: 3px solid #03B1FF;
-        color: #03B1FF;
-    }
-
-    .main-menu a i {
-        float: left;
-        margin-top: 14px;
-        margin-left: 5px;
-    }
-
-    .main-menu a span {
-        min-width: 100px;
-        float: left;
-        text-align: left;
-        height: 57px;
-        text-indent: 6px;
-        line-height: 57px;
-        font-size: 16px;
-    }
-
-    .el-icon-arrow-right {
-        width: 10px;
-        height: 13px;
-        line-height: 13px;
-        color: #fff;
-        font-style: normal;
-        float: right;
-        font-size: 12px;
-    }
-
-    #main-menu li a > i {
-        width: 22px;
-        height: 22px;
-        float: left;
-        background-position: top center;
-        background-repeat: no-repeat;
-        margin-left: 33px;
-        margin-top: 18px;
-        margin-right: 21px;
-    }
-
-    .child_tap a i {
-        margin-left: 53px !important;
-        margin-right: 11px !important;
-    }
-
-    .child_tap a span {
-        font-size: 14px;
-    }
-
-
-
-
-</style>

src/components/Region.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="region">
         <div class="other-people">
-            <div class="image-border image-border1"></div>
-            <div class="image-border image-border2"></div>
-            <div class="image-border image-border3"></div>
-            <div class="image-border image-border4"></div>
+            <div class="other-people-title">
+                <div class="image-border image-border1"></div>
+                <div class="image-border image-border2"></div>
+                <div class="image-border image-border3"></div>
+                <div class="image-border image-border4"></div>
+                监控区域列表
+            </div>
+            </div>
             <div class="regionList">
-                <div class="other-people-title">
-                    监控区域列表
-                </div>
                 <ul>
                     <el-row :gutter="21">
                         <el-col :span="8" v-for="(region,i) in regionList">
@@ -20,7 +21,6 @@
                 </ul>
             </div>
         </div>
-    </div>
 </template>
 
 <script>
@@ -47,33 +47,28 @@
         overflow: hidden;
         display: block;
         margin: 0 auto;
+        margin-top: 20px;
     }
 
-    /deep/ .other-people {
-        width: 350px;
-        height: 142px;
-        margin-left: 0;
-        padding: 0;
-        padding-right: 5px;
-    }
     ul {
         width: 90%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        margin-top: 50px;
+        margin-top: 20px;
     }
     .regionItem {
-        border: 1px solid #6DC1FF;
-        color: #6DC1FF;
+        border: 1px solid #005EA2;
+        background: rgba(27,86,200,0.14);
+        color: #fff;
         padding-top: 5px;
         padding-bottom: 5px;
         margin-bottom: 8px;
-        border-radius: 5px;
+        border-radius: 0px;
         cursor: pointer;
+        font-size: 14px;
     }
     .regionItem.active {
-        background: #6DC1FF;
-        color: #fff;
+        background: #005EA2;
     }
 </style>

src/components/Task.vue

@@ -1,96 +1,97 @@
 <template>
     <div class="Task">
         <div class="other-people">
-            <div class="image-border image-border1"></div>
-            <div class="image-border image-border2"></div>
-            <div class="image-border image-border3"></div>
-            <div class="image-border image-border4"></div>
             <div class="other-people-title">
-                探测设备列表
+                <div class="image-border image-border1"></div>
+                <div class="image-border image-border2"></div>
+                <div class="image-border image-border3"></div>
+                <div class="image-border image-border4"></div>
+                扫描控制
             </div>
-            <div class="regionList">
-                <el-row>
-                    <el-col :span="24">
-                        <el-col :span="6"><em class="label">XXXX</em></el-col>
-                        <el-col :span="18">
-                            <el-select v-model="value" placeholder="请选择">
-                                <el-option
-                                        v-for="item in options"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value">
-                                </el-option>
-                            </el-select>
-                        </el-col>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-col :span="6"><em class="label">XXXX</em></el-col>
-                        <el-col :span="18">
-                            <el-select v-model="value" placeholder="请选择">
-                                <el-option
-                                        v-for="item in options"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value">
-                                </el-option>
-                            </el-select>
-                        </el-col>
+        </div>
+        <div class="regionList">
+            <el-row>
+                <el-col :span="24">
+                    <el-col :span="6"><em class="label">扫描策略</em></el-col>
+                    <el-col :span="18">
+                        <el-select v-model="scan.tactics" placeholder="请选择">
+                            <el-option
+                                    v-for="item in tactics_options"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
                     </el-col>
-                    <el-col :span="24">
-                        <el-col :span="6"><em class="label">XXXX</em></el-col>
-                        <el-col :span="18">
-                            <el-select v-model="value" placeholder="请选择">
-                                <el-option
-                                        v-for="item in options"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value">
-                                </el-option>
-                            </el-select>
-                        </el-col>
+                </el-col>
+                <el-col :span="24">
+                    <el-col :span="6"><em class="label">无线协议</em></el-col>
+                    <el-col :span="18">
+                        <el-select v-model="scan.agreement" placeholder="请选择">
+                            <el-option
+                                    v-for="item in agreement_options"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
                     </el-col>
-                    <el-col :span="24">
-                        <el-col :span="6"><em class="label">XXXX</em></el-col>
-                        <el-col :span="18">
-                            <el-select v-model="value" placeholder="请选择">
-                                <el-option
-                                        v-for="item in options"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value">
-                                </el-option>
-                            </el-select>
-                        </el-col>
+                </el-col>
+                <el-col :span="24">
+                    <el-col :span="6"><em class="label">起始频率</em></el-col>
+                    <el-col :span="18">
+                        <el-input v-model="scan.begin" type="number" placeholder="请输入内容"></el-input>
                     </el-col>
-                    <el-col :span="24">
-                        <el-col :span="6"><em class="label_checked">
-                            <el-checkbox v-model="checked">信号录制</el-checkbox>
-                        </em></el-col>
-                        <el-col :span="18">
-                            <el-button type="primary" size="small">开始扫码</el-button>
-                        </el-col>
+                </el-col>
+                <el-col :span="24">
+                    <el-col :span="6"><em class="label">截止频率</em></el-col>
+                    <el-col :span="18">
+                        <el-input v-model="scan.end" placeholder="请输入内容"></el-input>
                     </el-col>
-                    <el-col :span="24">
-                        <el-col :span="6"><em class="label">XXXX</em></el-col>
-                        <el-col :span="18">
-                         <span class="label_text">   2021-01-04 19:54:12</span>
-                        </el-col>
+                </el-col>
+                <el-col :span="24">
+                    <el-col :span="6"><em class="label">扫描距离</em></el-col>
+                    <el-col :span="18">
+                        <el-select v-model="scan.distance" placeholder="请选择">
+                            <el-option
+                                    v-for="item in distance_options"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
                     </el-col>
-                    <el-col :span="24">
-                        <el-col :span="6"><em class="label">XXXX</em></el-col>
-                        <el-col :span="18">
-                            <span class="label_text">   2021-01-04 19:54:12</span>
-                        </el-col>
+                </el-col>
+                <el-col :span="24">
+                    <el-col :span="6"><em class="label">检测周期</em></el-col>
+                    <el-col :span="18">
+                        <el-input v-model="scan.cycle" type="number" placeholder="请输入内容"></el-input>
                     </el-col>
-                    <el-col :span="24">
-                        <el-col :span="6"><em class="label">XXXX</em></el-col>
-                        <el-col :span="18">
-                            <span class="label_text">   2021-01-04 19:54:12</span>
-                        </el-col>
+                </el-col>
+                <el-col :span="24">
+                    <el-col :span="6"><em class="label_checked">
+                        <el-checkbox v-model="checked">信号录制</el-checkbox>
+                    </em></el-col>
+                    <el-col :span="18">
+                        <el-button type="primary" plain size="small" @click="startScan">开始扫描</el-button>
                     </el-col>
-                </el-row>
+                </el-col>
+                <ul class="scan_detail">
+                    <li>
+                        <em>开始时间: </em>
+                        <span>{{result.begin}}</span>
+                    </li>
+                    <li>
+                        <em>持续时间: </em>
+                        <span>{{result.hold}}</span>
+                    </li>
+                    <li>
+                        <em>数据大小: </em>
+                        <span>{{result.date}}</span>
+                    </li>
+                </ul>
+            </el-row>
 
-            </div>
         </div>
     </div>
 </template>
@@ -100,24 +101,117 @@
         data() {
             return {
                 checked: true,
-                options: [{
-                    value: '选项1',
-                    label: '黄金糕'
-                }, {
-                    value: '选项2',
-                    label: '双皮奶'
-                }, {
-                    value: '选项3',
-                    label: '蚵仔煎'
-                }, {
-                    value: '选项4',
-                    label: '龙须面'
-                }, {
-                    value: '选项5',
-                    label: '北京烤鸭'
-                }],
+                scan: {
+                    tactics: 0,
+                    agreement: 0,
+                    begin: 0,
+                    end: 0,
+                    distance: 0,
+                    cycle: 0,
+                },
+                result: {
+                    begin: '',
+                    hold: '',
+                    date: '',
+                },
+                tactics_options: [
+                    {
+                        value: 0,
+                        label: '自定义扫描'
+                    }
+                ],
+                agreement_options: [
+                    {
+                        value: 0,
+                        label: '中国移动GSM'
+                    }
+                ], distance_options: [
+                    {
+                        value: 0,
+                        label: '全覆盖'
+                    }, {
+                        value: 5,
+                        label: '5cm'
+                    }, {
+                        value: 20,
+                        label: '20cm'
+                    }, {
+                        value: 50,
+                        label: '50cm'
+                    }, {
+                        value: 100,
+                        label: '1m'
+                    }
+                ],
                 value: ''
             }
+        },
+        watch: {
+            scan: {
+                handler(newName, oldName) {
+                    if (parseInt(newName.begin) > 6000) {
+                        this.$notify.error({
+                            title: '错误',
+                            message: '起始频率不能大于6000'
+                        });
+                        return false
+                    }
+                    if (parseInt(newName.begin) < 0) {
+                        this.$notify.error({
+                            title: '错误',
+                            message: '起始频率不能小于0'
+                        });
+                        return false
+                    }
+                    if (parseInt(newName.end) > 6000) {
+                        this.$notify.error({
+                            title: '错误',
+                            message: '截止频率不能大于6000'
+                        });
+                        return false
+                    }
+                    if (parseInt(newName.end) < 0) {
+                        this.$notify.error({
+                            title: '错误',
+                            message: '截止频率不能小于0'
+                        });
+                        return false
+                    }
+                    if (parseInt(newName.end) < parseInt(newName.begin)) {
+                        this.$notify.error({
+                            title: '错误',
+                            message: '截止频率不能小于起始频率'
+                        });
+                        return false
+                    }
+
+                    // ...
+                },
+                deep: true,
+                immediate: true
+            }
+        },
+        mounted() {
+            this.init()
+        },
+        methods: {
+            init() {
+                this.writeScanResult();
+            },
+            // 扫描开始
+            startScan() {
+                this.$message({
+                    message: '扫描已开始',
+                    type: 'success'
+                });
+                this.writeScanResult();
+            },
+            // 渲染扫描状态
+            writeScanResult() {
+                this.result.begin = "2021-01-02 09:05:21";
+                this.result.hold = "1小时23分21秒";
+                this.result.date = "21G";
+            }
         }
     }
 </script>
@@ -128,14 +222,7 @@
         overflow: hidden;
         display: block;
         margin: 0 auto;
-    }
-
-    /deep/ .other-people {
-        width: 350px;
-        height: 472px;
-        margin-left: 0;
-        padding: 0;
-        padding-right: 5px;
+        margin-top: 20px;
     }
 
     .regionList {
@@ -143,7 +230,7 @@
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        margin-top: 50px;
+        margin-top: 20px;
         color: #6DC1FF;
     }
 
@@ -154,17 +241,21 @@
         margin: 0 auto;
         line-height: 40px;
         text-align: right;
+        color: #fff;
+        font-size: 14px;
     }
 
     .regionList /deep/ .el-input__inner {
-        background-color: #000;
+        background-color: rgba(0, 130, 255, 0.05);
         border: 1px solid #6DC1FF;
-        color: #6DC1FF;
+        color: #fff;
     }
+
     /deep/ .el-col {
         margin-bottom: 6px;
 
     }
+
     .label_checked {
         margin-left: 45px;
         line-height: 40px;
@@ -174,6 +265,7 @@
         float: right;
         margin-right: 25px;
     }
+
     .label_text {
         width: 100%;
         overflow: hidden;
@@ -183,4 +275,37 @@
         text-align: left;
         text-indent: 10px;
     }
+
+    /deep/ .el-input {
+        border-radius: 0;
+        width: 180px;
+    }
+
+    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+        color: #fff;
+    }
+
+    /deep/ .el-button {
+        background-color: rgba(0, 130, 255, 0.05);
+        border: 1px solid #6DC1FF;
+        margin-right: 45px !important;
+    }
+
+    /deep/ .label_checked {
+        margin-left: 35px;
+    }
+
+    .scan_detail {
+        width: 80%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-size: 14px;
+    }
+
+    .scan_detail li {
+        text-align: left;
+        color: #fff;
+        margin-bottom: 3px;
+    }
 </style>

src/main.js

@@ -2,11 +2,11 @@ import Vue from 'vue'
 import './plugins/axios'
 import App from './App.vue'
 import router from './router'
-import store from './store'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import axios from 'axios'
 import Print from 'vue-print-nb'
+import store from  './vuex';//引入文件
 
 
 Vue.config.productionTip = false;

src/router/index.js

@@ -181,7 +181,8 @@ router.beforeEach((to, from, next) => {
         next();
     } else {
         //如果token存在，就正常跳转，如果不存在，则说明未登陆，则跳转到'login'
-        isLogin ? next() : next("/login");
+        // isLogin ? next() : next("/login");
+        next();
     }
 });
 

src/views/Main.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="mainContainer">
-        <div class="lt">
+        <div class="lt" v-show="showLeft">
+            <div class="sum-title">
+                控制台
+            </div>
             <div class="cube">
                 <Region :region-list="regionList"></Region>
             </div>
-            <br>
             <div class="cube">
                 <Detecter :region-list="regionList"></Detecter>
             </div>
-            <br>
             <div class="cube">
                 <Task></Task>
             </div>
@@ -58,6 +59,8 @@
         getLoftInfo,
         RegionDetInfolist,
     } from '../api/getApiRes.js'
+    import { mapGetters, mapActions, mapState } from "vuex";
+    import Global from "../Global"
 
     let qs = require('qs');
     export default {
@@ -69,10 +72,17 @@
                 totalRs: [],
                 equipRs: [],
                 regionList: [],
+                showLeft: true
             }
         },
         mounted() {
-            this.init()
+            this.init();
+            this.showLeft = parseInt(this.$store.state.status.count) % 2 == 0
+        },
+        computed:{
+            ...mapGetters({
+                'getCount': 'status/getCount'
+            })
         },
         watch: {
             '$route': function (val) {
@@ -80,6 +90,9 @@
                     this.init()
                 }
             },
+            '$store.state.status.count': function (val) {
+                this.showLeft = parseInt(val) % 2 == 0
+            },
         },
         methods: {
             init() {
@@ -146,6 +159,11 @@
     .mainContainer .lt {
         width: 20%;
         float: left;
+        border: 1px solid rgba(0, 147, 253, 0.24);
+        overflow: hidden;
+        padding-bottom: 10px;
+        background: rgba(0, 130, 255, 0.05);
+        margin-right: 20px;
     }
 
     .mainContainer .md {
@@ -157,8 +175,21 @@
         width: 30%;
         float: right;
     }
+
     .rt .cube {
         float: right;
     }
 
+    .sum-title {
+        width: 150px;
+        height: 36px;
+        font-size: 16px;
+        line-height: 36px;
+        color: #6DC1FF;
+        margin: 0 auto;
+        text-align: center;
+        background: url("../assets/img/main/tit.png") top center no-repeat;
+        background-size: 100%;
+    }
+
 </style>

src/vuex/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Vuex from 'vuex'; // 引入对应模块
+import status from './moudules/status/index';//引入vue模块
+
+Vue.use(Vuex);//安装Vue插件 vuex
+
+export default new Vuex.Store({
+    modules:{ //将 store 分割成模块
+        status
+    }
+});//导出vuex实例

src/vuex/moudules/status/actions.js

@@ -0,0 +1,6 @@
+import * as types from './mutation_type';
+export default {
+    addCount({commit}){
+        commit(types.VUEX_TEST);
+    }
+};

src/vuex/moudules/status/getter.js

@@ -0,0 +1,6 @@
+export default {
+    /*getters可以帮我们从state中进一步过滤我们需要的一些状态条件*/
+    getCount: (state) => {
+        return state.count;
+    }
+}

src/vuex/moudules/status/index.js

@@ -0,0 +1,12 @@
+import actions from './actions';
+import mutations from './mutations';
+import getters from './getter';
+import state from './state';
+
+export default {
+    namespaced: true, //命名空间,自动根据模块注册的路径调整命名
+    state,
+    getters,
+    actions,
+    mutations
+};

src/vuex/moudules/status/mutation_type.js

@@ -0,0 +1,3 @@
+//这个js文件里面只是一些变量，把action和mutation文件里面相同变量名的链接起来
+export const VUEX_TEST = 'increment';
+// 一般使用的是大写来命名变量，因为尤大也是这么做 2333

src/vuex/moudules/status/mutations.js

@@ -0,0 +1,7 @@
+import * as types from './mutation_type';//引入变量
+export default {
+    //types.VUEX_TEST 代表接受哪个actions的commit 也就是上面引入变量的作用
+    [types.VUEX_TEST](state){
+        state.count++
+    }
+};

src/vuex/moudules/status/state.js

@@ -0,0 +1,3 @@
+export default {
+    count: 0
+}