控制台， wifi信道

src/Mock/index.js

@@ -50,6 +50,7 @@ let modPwd = function () {
     };
     return res;
 };
+
 let logout = function () {
     let res = {
         Code: 0,
@@ -58,10 +59,30 @@ let logout = function () {
     return res;
 };
 
+let getLoftInfo = function () {
+    let item = [];
+    for (var i = 0; i < 6; i++) {
+        item.push({
+            loftId: "@id",
+            name: "@county",
+        })
+    }
+
+    let res = {
+        Rs: item,
+        Code: 0,
+        Memo: '登陆成功'
+    };
+    return res;
+};
+
 Mock.mock('/api/worldDetail', 'post', worldDetail());
 Mock.mock('/api/SignIn', 'post', SignIn());//用户登录
 Mock.mock('/api/editbasicinfo', 'post', editbasicinfo());//用户设置修改
 Mock.mock('/api/modPwd', 'post', modPwd());//密码修改
 Mock.mock('/api/logout', 'post', logout());//退出登陆
+Mock.mock('/api/getLoftInfo', 'post', getLoftInfo());//楼层获取
+
+// 业务类
 
 export default Mock;

src/api/Navs.js

@@ -126,8 +126,8 @@ let navs = [ {
                 "ordno": "0",
                 "c_level": "2",
                 "clmcode": "front_index",
-                "clmname": "任务查询",
-                "clmurl": "/rwcx",
+                "clmname": "监测记录",
+                "clmurl": "/record",
                 "prname": null,
                 "en": "1",
                 "show": "1",

src/api/getApiRes.js

@@ -2,7 +2,6 @@ import axios from 'axios';
 import global from '../Global.js'
 // 基础方法进行封装
 function getApiBasic(url, postdata) {
-    console.log(postdata);
     return  axios.post(url, postdata).then(function(data){
         let json = data.data;
         return json
@@ -31,8 +30,8 @@ export function modPwd(postdata) {
     let url = headapi + 'modPwd';
     return getApiBasic(url,postdata);
 }
-export function logout(postdata) {
-    let url = headapi + 'logout';
+export function getLoftInfo(postdata) {
+    let url = headapi + 'getLoftInfo';
     return getApiBasic(url,postdata);
 }
 

src/assets/css/cube.css

@@ -0,0 +1,79 @@
+ul,li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+em,s,i {
+    font-style: normal;
+}
+.image-border {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+}
+
+.image-border1 {
+    top: 0px;
+    left: 0;
+    border-left: 2px solid #6DC1FF;
+    border-top: 2px solid #6DC1FF;
+}
+
+.image-border2 {
+    top: 0;
+    right: -2px;
+    border-right: 2px solid #6DC1FF;
+    border-top: 2px solid #6DC1FF;
+}
+
+.image-border3 {
+    bottom: 0;
+    left: 0;
+    border-bottom: 2px solid #6DC1FF;
+    border-left: 2px solid #6DC1FF;
+}
+
+.image-border4 {
+    bottom: 0;
+    right: -2px;
+    border-right: 2px solid #6DC1FF;
+    border-bottom: 2px solid #6DC1FF;
+}
+
+.other-people {
+    border: 1px solid #01355B;
+    width: 200px;
+    height: 200px;
+    margin-left: 61px;
+    padding: 5px;
+    position: relative;
+    background: rgba(0,15,42,0.60);
+}
+
+.other-image {
+    width: 100%;
+    height: 100%;
+}
+
+.other-people-title {
+    position: absolute;
+    top: 1px;
+    left: 0;
+    right: 0;
+    width:164px;
+    height: 36px;
+    font-size: 18px;
+    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%;
+}
+.cubeContent {
+    width: 100%;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    margin-top: 50px;
+}

src/assets/css/panel.css

@@ -23,9 +23,9 @@
     overflow: hidden;
     display: block;
     margin: 0 auto;
-    margin-bottom: 20px;
-    background: #ccc;
-    padding: 5px;
+    background: rgba(0,15,42,0.6);
+    padding: 0px;
+    border: none;
 }
 
 .panel /deep/ .el-col em {
@@ -45,7 +45,20 @@
     width: 150px;
     float: left;
 }
+.el-table--enable-row-hover .el-table__body tr:hover>td {
+    background:rgba(27,86,200,0.77);
+}
+.el-table--striped .el-table__body tr.el-table__row--striped:hover>td {
+    background:rgba(27,86,200,0.77);
+}
 
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+    background:rgba(27,86,200,0.14);
+}
+.has-gutter th {
+    background: rgba(0,23,67,0.8)!important;
+    font-weight: normal;
+}
 .panel /deep/ .el-input__inner {
     width: 150px;
     height: 30px;
@@ -54,6 +67,12 @@
     border-radius: 0;
     float: left;
     padding-right: 22px;
+    background: none;
+    border: 1px solid #005EA2;
+    color: #6DC1FF;
+}
+.panel /deep/ .el-input__inner::placeholder{
+    color: #6DC1FF;
 }
 
 .panel /deep/ .el-date-editor--daterange {
@@ -64,20 +83,31 @@
     width: 30px;
 }
 
-.panel {
+.panel /deep/ .el-input {
+    width: 150px;
+}
+.panel-title {
+    width: 300px;
+    display: block;
+    float: left;
+    text-align: left;
+    color: #6DC1FF;
+    font-size: 18px;
+    font-weight: normal;
+    margin-left: 39px;
+}
+.panel .panel_control {
     width: 100%;
     overflow: hidden;
     display: block;
     margin: 0 auto;
-    background-color: #fff;
-    margin-top: 0px;
-    margin-bottom: 10px;
+    background: rgba(27,86,200,0.14);
+    padding: 29px 39px;
+    color: #6DC1FF;
 }
-
-.panel /deep/ .el-input {
-    width: 150px;
+.el-card__body {
+    padding: 0;
 }
-
 .panel .panel_control em {
     width: 70px;
     float: left;
@@ -89,16 +119,30 @@
     overflow: hidden;
     margin-top: 5px;
     margin-bottom: 10px;
-    background-color: #fff;
+    background:none ;
     float: left;
     padding: 10px;
 }
+.el-table th, .el-table tr {
+    background: none;
+    color: #6DC1FF;
+}
 
+.el-table, .el-table__expanded-cell {
+    background: none;
+}
+.el-table td, .el-table th.is-leaf {
+    border: none;
+}
+.el-table--border::after, .el-table--group::after, .el-table::before {
+    background: none;
+}
 .table_container /deep/ .el-input .el-input__inner {
     height: 30px;
     line-height: 30px;
     width: 100px;
     padding-right: 22px;
+    background: none;
 }
 
 .table_container /deep/ .el-select .el-input__inner {
@@ -106,6 +150,7 @@
     line-height: 30px;
     width: 70px;
     padding-right: 22px;
+    background: none;
 }
 
 .dataTables_length {
@@ -259,3 +304,29 @@
     margin: 0 auto;
     margin-bottom: 10px;
 }
+/deep/ .el-button--primary.is-active, .el-button--primary:active,/deep/ .el-button--primary {
+    background: none;
+    border: 1px solid #005EA2;
+    color: #6DC1FF;
+}
+.el-button--primary {
+    background: none;
+    border: 1px solid #005EA2;
+    color: #6DC1FF;
+}
+.el-pagination.is-background .btn-next.disabled, .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev.disabled, .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .el-pager li.disabled {
+    color: #6DC1FF;
+}
+.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+    background-color: #061B44;
+}
+.el-pagination__jump {
+    display: none!important;
+}
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+    color: #002540;
+    background-color: #6DC1FF;
+}
+.el-pagination__total {
+    color: #6DC1FF;
+}

src/components/Console.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="console">
+        <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>
+            <div class="cslist cubeContent">
+                <div class="cstitle">
+                    安全监控首页
+                </div>
+                <div class="loft cspart">
+                    <div class="lt_title">
+                        楼层
+                    </div>
+                    <el-row :gutter="21">
+                        <el-col :span="8" v-for="(loft,i) in loftList" >
+                            <div :class="[{'active':loftIndex == i+1 }]" @click="ClickGetInfo(1,i)">
+                                <div class="grid-content bg-purple"> {{loft.name}}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+                <div class="manage cspart">
+                    <div class="lt_title">
+                        楼层管理区域
+                    </div>
+                    <el-row :gutter="21">
+                        <el-col :span="8" v-for="(manage,j) in manageList" >
+                            <div :class="[{'active':manageIndex ==j+1 }]" @click="ClickGetInfo(2,j)">
+                                <div class="grid-content bg-purple">{{manage.name}}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+                <div class="equip cspart">
+                    <div class="lt_title">
+                        SignalDigger设备
+                    </div>
+                    <el-row :gutter="21">
+                        <el-col :span="8" v-for="(equip,t) in equipList" >
+                            <div :class="[{'active':equipIndex == t+1 }]" @click="ClickGetInfo(3,t)">
+                                <div class="grid-content bg-purple"> {{equip.name}}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import {getLoftInfo} from '../api/getApiRes.js'
+
+    export default {
+        data() {
+            return {
+                loftList: [],
+                manageList: [],
+                equipList: [],
+                loftIndex: 0,
+                manageIndex: 0,
+                equipIndex: 0,
+            };
+        },
+        mounted() {
+            this.getLoftList();
+        },
+        methods: {
+            // 获取楼层信息
+            ClickGetInfo(list, index) {
+                // 切换到选中
+                this.loftIndex = 0;
+                this.manageIndex = 0;
+                this.equipIndex = 0;
+                let thisBtn = {};
+                switch (parseInt(list)) {
+                    case 1:
+                        this.loftIndex = index + 1;
+                        thisBtn = this.loftList[index];
+                        break;
+                    case 2:
+                        this.manageIndex = index + 1;
+                        thisBtn = this.manageList[index];
+                        break;
+                    case 3:
+                        this.equipIndex = index + 1;
+                        thisBtn = this.equipList[index];
+                        break;
+                }
+            },
+            // 获取楼层信息
+            getLoftList() {
+                let postdata = {};
+                getLoftInfo(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        this.loftList = json.Rs;
+                        this.manageList = json.Rs;
+                        this.equipList = json.Rs;
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .console {
+        float: left;
+        color: #6DC1FF;
+    }
+
+    .other-people {
+        width: 365px;
+        height: 906px;
+        margin-left: 10px;
+    }
+
+    .cstitle {
+        width: 314px;
+        height: 45px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        background: #0B2851;
+        border: 1px solid #005EA2;
+        line-height: 45px;
+        margin-bottom: 26px;
+    }
+
+    .cspart {
+        width: 314px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-bottom: 22px;
+    }
+
+    .lt_title {
+        text-align: left;
+        font-size: 14px;
+        margin-bottom: 16px;
+    }
+
+    .cspart .bg-purple {
+        height: 30px;
+        background: rgba(27, 86, 200, 0.14);
+        border: 1px solid #005EA2;
+        line-height: 30px;
+        margin-bottom: 9px;
+        cursor: pointer;
+        font-size: 12px;
+    }
+
+    .active {
+        background: #0162AA;
+        border-color: #6DC1FF;
+        color: #6DC1FF
+    }
+</style>

src/components/Headside.vue

@@ -1,21 +1,18 @@
 <template>
     <div id="headside">
         <nav class="navbar user-info-navbar" role="navigation">
-            <i :class="[{'el-icon-arrow-left left_hide_icon':left_panel_state},{'el-icon-arrow-right left_show_icon':!left_panel_state}] "
-               @click="left_hide"></i>
-            <div @click="checkNews">
-                <el-badge :value="newnum"
-                          class="item"
-                          v-if="newnumState"
-                >
-                    <el-button size="small">
-                        <i class="el-icon-message"></i>
-                    </el-button>
-                </el-badge>
+            <i :class="[{'icon-head':true},{'iconleft':left_panel_state}]" @click="left_hide"></i>
+            <div class="watching">
+                <i class="dot"></i>
+                <em>检测中</em>
+            </div>
+            <div class="center">
+                保密会议室无线信号安全监控系统
             </div>
             <ul class="user-info-menu right-links list-inline list-unstyled">
                 <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>
@@ -24,14 +21,6 @@
                         </el-dropdown-menu>
                     </el-dropdown>
                 </li>
-                <li class="pull-right" style="min-height: 40px;">
-						<span class="customer_serve">工作日 {{time}} &nbsp;客服电话： &nbsp;{{tel}}&nbsp;
-                            <a href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&amp;key=XzkzODA2Mzg3OV80ODQ0MTlfNDAwMDA3OTM2MF8yXw"
-                               id="qq_customer" target="_blank">
-                                 客服QQ: {{qq}}
-                            </a>
-                        </span>
-                </li>
 
             </ul>
         </nav>
@@ -47,9 +36,6 @@
                 user: {
                     name: localStorage.userName,
                 },
-                time: '8:30-17:30',
-                tel: '4000-0079-360',
-                qq: '4000079360',
                 newnum: '',
                 newnumState: false,
                 left_panel_state: false
@@ -140,11 +126,11 @@
 
     #headside {
         width: 100%;
-        height: 41px;
+        height: 48px;
         overflow: hidden;
         float: right;
         z-index: 1111;
-        border-bottom: 1px solid #efefef;
+        /*border-bottom: 1px solid #efefef;*/
     }
 
     .user-info-navbar {
@@ -152,7 +138,7 @@
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        background-color: #ffffff;
+        background-color: none;
         min-height: 0;
         height: 41px;
         border: 0;
@@ -369,8 +355,8 @@
     .customer_serve {
         float: right;
         margin-right: 20px;
-        font-size: 12px;
-        color: #585858;
+        font-size: 14px;
+        color: #6DC1FF;
         line-height: 45px;
         text-align: right;
     }
@@ -478,4 +464,86 @@
     .el-dropdown-menu__item {
         padding: 5px;
     }
+    .icon-head {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-left: 17px;
+        margin-top: 15px;
+        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;
+        background: #6DC1FF;
+        border-radius: 250px;
+        float: left;
+        margin-top: 16px;
+        transform: scale(0.5);
+        animation: bulge 2s infinite ease-in-out;
+        animation-delay: 0s;
+    }
+    .watching em {
+        line-height: 45px;
+        font-size: 14px;
+        color: #6DC1FF;
+        font-style: normal;
+        padding-left: 10px;
+    }
+
+    .watching .dot::after {
+        z-index: -1;
+        transform: scale(1);
+        animation: blow 2s infinite ease-in-out;
+    }
+
+    @keyframes bulge {
+        50% {
+            transform: scale(1);
+        }
+    }
+
+
+    @keyframes blow {
+        25% {
+            opacity: 0.5;
+        }
+        50% {
+            opacity: 0.5;
+        }
+        90% {
+            opacity: 0;
+        }
+        100% {
+            transform: scale(2);
+            opacity: 0;
+        }
+    }
+    .center {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        text-align: center;
+        margin-top: 20px;
+        padding-bottom: 20px;
+        font-size: 26px;
+        color: #FFFFFF;
+        background: url("../assets/img/headbotter.png")bottom center no-repeat;
+    }
+    .icon-user {
+        width: 28px;
+        height: 28px;
+        float: left;
+        margin-top: 10px;
+        margin-right: 10px;
+        background: url("../assets/img/icon/user.png") top center no-repeat;
+        background-size: 100%;
+    }
 </style>

src/components/Navside.vue

@@ -14,7 +14,7 @@
                         router
                         :collapse="isCollapse"
                 >
-                    <el-menu-item index="1" route="/" title="系统首页">
+                    <el-menu-item class="el-submenu" index="1" route="/" title="系统首页">
                         <i class="icon-home"></i>
                         <span slot="title">系统首页</span>
                     </el-menu-item>
@@ -88,7 +88,7 @@
     .shortnav {
         position: absolute;
         width: 65px;
-        top: 40px;
+        top: 48px;
         bottom: 0;
         overflow: hidden;
         display: block;
@@ -99,22 +99,31 @@
     .longNav {
         position: absolute;
         width: 320px;
-        top: 0;
+        top: 48px;
         bottom: 0;
         overflow: hidden;
         display: block;
         margin: 0 auto;
         height: 100%;
     }
-
     .el-col, .el-menu {
         height: 100%;
+        border-right: 0;
+    }
+    /deep/ .el-menu-item {
+        background-color: rgba(255,255,255,0)!important;
     }
-    .el-menu-item, /deep/.el-menu {
-        background-color: rgba(255,255,255,0.4)!important;
+    /deep/.el-menu {
+        background-color: rgba(255,255,255,0.1)!important;
     }
     /deep/ .el-submenu__title {
-        background-color: rgba(255,255,255,0.4)!important;
+        background:rgba(255,255,255,0)!important;
+    }
+    .el-menu li:hover {
+        background: #00599A;
+    }
+    /deep/ .el-menu-item:hover {
+        background: #00599A!important;
     }
     .logout {
         color: #fff;

src/components/WifiSign.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="wifiSign">
+        <ve-histogram :data="chartData"height="250px" :loading="loading" :legend-visible="false" :extend="chartExtend"></ve-histogram>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                days: 13,
+                loading: true,
+                chartData: {
+                    columns: ['页面', '访问量'],
+                    rows: [
+                        {'页面': '信道1', '访问量': 123},
+                        {'页面': '信道2', '访问量': 321},
+                        {'页面': '信道3', '访问量': 231},
+                        {'页面': '信道4', '访问量': 112},
+                        {'页面': '信道5', '访问量': 321},
+                        {'页面': '信道6', '访问量': 121},
+                        {'页面': '信道7', '访问量': 333},
+                        {'页面': '信道8', '访问量': 231},
+                        {'页面': '信道9', '访问量': 411},
+                        {'页面': '信道10', '访问量': 142},
+                        {'页面': '信道11', '访问量': 321},
+                        {'页面': '信道12', '访问量': 441},
+                    ]
+                },
+                chartExtend: {
+                    color: ['#4ad2ff'],
+                    series: {
+                        barMaxWidth: 10
+                    },
+                    axisLine:{
+                        color:"#4ad2ff",
+                    },
+                    yAxis:{
+                        // name : '单位: dB',
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                color: ['#4ad2ff']
+                            }
+                        },
+                        axisLine:{
+                            lineStyle:{
+                                color:'#4ad2ff',
+                                width:1,//这里是为了突出显示加上的
+                            }
+                        }
+                    },
+                    xAxis:{
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                color: ['#4ad2ff']
+                            }
+                        },
+                        axisLine:{
+                            lineStyle:{
+                                color:'#4ad2ff',
+                                width:1,//这里是为了突出显示加上的
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        mounted() {
+            let that = this;
+            // this.timer = setInterval(() => {
+            that.getDate();
+            // }, 3300);
+        },
+        methods: {
+            getDate() {
+                let that = this;
+            },
+            getRandomInt(min, max) {
+                return Math.floor(Math.random() * (max - min + 1)) + min;
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    .wifiSign {
+        width: 966px;
+        height: 192px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding-right: 10px;
+    }
+</style>

src/router/index.js

@@ -35,6 +35,13 @@ const routes = [
                 meta: {
                     title: "用户管理",
                 }
+            },{
+                path: '/record',
+                name: 'record',
+                component: () => import('@/views/Record.vue'),
+                meta: {
+                    title: "监测记录",
+                }
             },{
                 path: '/mockPage',
                 name: 'MockPage',
@@ -83,6 +90,10 @@ const routes = [
         path: '/login',
         name: 'Login',
         component: () => import( '../views/Login.vue')
+    },{
+        path: '/wifiSign',
+        name: 'wifiSign',
+        component: () => import( '../components/WifiSign.vue')
     }, {
         path: '*',
         name: '404',

src/views/404.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="pages">
-        <div class="container">
+        <div class="el-container">
             <div class="row">
                 <div class="lt">
                     <img src="../assets/404/man.png" alt="">
@@ -17,7 +17,6 @@
                             返回首页 <i class="icon_home"></i>
                         </a>
                     </em>
-
                 </div>
             </div>
         </div>
@@ -41,9 +40,11 @@
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        background: #009FE9;
+        /*background: #009FE9;*/
+        background: url("../assets/img/mainBg.png")top center no-repeat;
+        background-size: 100%;
     }
-    .container {
+    .el-container {
         width: 100%;
         max-width: 960px;
         overflow: hidden;

src/views/Index.vue

@@ -7,7 +7,7 @@
             <el-aside :class="[{'shortElaside':isCollapse},{'lognElaside':!isCollapse}]">
                 <Navside :isCollapse="isCollapse" @TabsAdd="handleTabsAdd"></Navside>
             </el-aside>
-            <el-container>
+            <el-container class="indexContainer">
                 <el-main>
                     <keep-alive>
                         <router-view></router-view>
@@ -94,7 +94,19 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
+    .container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        background: url("../assets/img/mainBg.png")top center no-repeat;
+        background-size: 100%;
+    }
     .el-header {
+        height: 60px!important;
         padding: 0 !important;
     }
     .shortElaside {
@@ -112,4 +124,12 @@
     /deep/ .nav {
         width: 60px;
     }
+    .indexContainer {
+        /*width: 97%;*/
+        position: absolute;
+        float: right;
+        right: 0;
+        left: 55px;
+        top: 50px;
+    }
 </style>

src/views/Main.vue

@@ -1,13 +1,51 @@
 <template>
-    <div>this is main page</div>
+    <div class="mainContainer">
+        <div class="lt">
+            <Console></Console>
+        </div>
+        <div class="center">
+            <WifiSign></WifiSign>
+        </div>
+
+    </div>
 </template>
 
 <script>
+    import Console from '@/components/Console.vue'
+    import WifiSign from '@/components/WifiSign.vue'
     export default {
-        name: "Main"
+        components: {
+            Console,WifiSign
+        }
     }
 </script>
 
 <style scoped>
-
+    @import "../assets/css/cube.css";
+    ul,li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    em,s,i {
+        font-style: normal;
+    }
+    .mainContainer {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+    .lt {
+        width: 365px;
+        height: 906px;
+        float: left;
+        overflow: hidden;
+    }
+    .center {
+        width: 976px;
+        height: 906px;
+        float: left;
+        overflow: hidden;
+    }
 </style>

src/views/Record.vue

@@ -0,0 +1,232 @@
+<template>
+    <div>
+        <div class="panel">
+            <h5 class="panel-title">手机信号监测记录</h5>
+            <div class="panel-body">
+                <div class=" panel_control">
+                    <el-row :gutter="20">
+                        <el-col :span="4">
+                            <em>起始:</em>
+                            <el-date-picker
+                                    class="panel_data"
+                                    v-model="panel.time1[0]"
+                                    type="date"
+                                    placeholder="起始日期">
+                            </el-date-picker>
+                        </el-col>
+                        <el-col :span="4">
+                            <em>截止:</em>
+                            <el-date-picker
+                                    class="panel_data"
+                                    v-model="panel.time1[1]"
+                                    type="date"
+                                    placeholder="截止日期">
+                            </el-date-picker>
+                        </el-col>
+                        <el-col :span="4">
+                            <em>用户账号:</em>
+                            <el-input v-model="panel.USERCODE" placeholder="请输入用户账号"></el-input>
+                        </el-col>
+                        <el-col :span="4">
+                            <em>关键词:</em>
+                            <el-input v-model="panel.keyword" placeholder="请输入关键词"></el-input>
+                        </el-col>
+                        <el-col :span="4">
+                            <em>状态:</em>
+                            <el-select v-model="panel.taskstatus">
+                                <el-option
+                                        v-for="item in panel.options"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button size="small" type="primary" @click="query">查询</el-button>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div>
+        </div>
+            <el-table
+                    :data="tableData"
+                    class=""
+                    stripe
+                    >
+                <el-table-column
+                        prop="date"
+                        label="日期"
+                        width="180">
+                </el-table-column>
+                <el-table-column
+                        prop="name"
+                        label="姓名"
+                        width="180">
+                </el-table-column>
+                <el-table-column
+                        prop="address"
+                        label="地址">
+                </el-table-column>
+            </el-table>
+            <br>
+            <el-pagination
+                    background
+                    :total="pageination.total"
+                    :page-size="pageination.pageItem"
+                    @current-change="pageChange"
+            ></el-pagination>
+    </div>
+
+</template>
+
+<script>
+    import Global from '../Global.js'
+
+    export default {
+        data() {
+            return {
+                // panel 配置项目
+                panel: {
+                    usercode: '',
+                    username: '',
+                    compname: '',
+                    keyword: '',
+                    USERCODE: '',
+                    taskstatus: 99,
+                    options: [
+                        {value: 99, label: '全部'},
+                        {value: 1, label: '进行中'},
+                        {value: 2, label: '已完成'},
+                    ],
+                    time1: globalBt(),
+                },
+                pageination: {
+                    pageItem: 100,
+                    pageoptions: pageOptions(),
+                    total: 100,
+                    pageIndex: 1,
+                },
+                tableData: [{
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1518 弄'
+                }, {
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1517 弄'
+                }, {
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1519 弄'
+                }, {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1516 弄'
+                }]
+            }
+        },
+        mounted() {
+            this.getTableQuery();
+        },
+        methods: {
+            // 查询按钮
+            query() {
+                this.getTableQuery();
+                this.$message.success('查询完毕');
+            },
+            // 页面数据查询
+            getTableQuery() {
+                // let that = this;
+                // that.loading = true;
+                // let url = headapi + '?ctl=ajax&mod=dial&act=taskListQuery';//获取
+                // let param = {
+                //     'taskstatus': that.panel.taskstatus,
+                //     'bt': globaltime2String(that.panel.time1[0]),
+                //     'et': globaltime2String(that.panel.time1[1]),
+                //     'KEYWORD': that.panel.keyword,
+                //     'USERCODE': that.panel.USERCODE,
+                // };
+                // let JSON = '';
+                // let postdata = qs.stringify(param);
+                // axios.post(url, postdata)
+                //     .then(function (response) {
+                //         JSON = response.data;
+                //         that.loading = false;
+                //         that.allTableData = JSON.rs;
+                //         that.recordsTotal = JSON.rs.length;
+                //         // 设置分页数据
+                //         that.setPaginations();
+                //     })
+                //     .catch(function (error) {
+                //         console.log(error);
+                //     });
+            },
+            // 导出excel
+            btnExpAll() {
+                let that = this;
+                let url = headapi + '?ctl=ajax&mod=czgl&act=czcx_excel';//获取
+                let bt = globaltime2String(that.panel.time1[0]);
+                let et = globaltime2String(that.panel.time1[1]);
+                let usercode = that.panel.usercode;
+                window.location = url + '&bt=' + bt + '&et=' + et + '&usercode=' + usercode;
+            },
+            // 设置分页数据
+            setPaginations() {
+                // 分页属性
+                let that = this;
+                that.pageination.total = that.recordsTotal;
+                // 默认分页
+                that.tableData = that.allTableData.filter((item, index) => {
+                    return index < that.pageination.pageItem;
+                });
+            },
+            // 每页显示数量
+            handleSizeChange() {
+                let that = this;
+                that.tableData = that.allTableData.filter((item, index) => {
+                    return index < that.pageination.pageItem;
+                });
+                that.draw = that.pageination.pageItem;
+                that.getTableQuery();
+            },
+            // 翻页
+            pageChange(pageIndex) {
+                let that = this;
+                // 获取当前页
+                let index = that.pageination.pageItem * (pageIndex - 1);
+                // 数据总数
+                let nums = that.pageination.pageItem * pageIndex;
+                // 容器
+                let tables = [];
+                for (var i = index; i < nums; i++) {
+                    if (that.allTableData[i]) {
+                        tables.push(that.allTableData[i])
+                    }
+                    this.tableData = tables;
+                }
+                that.start = index * that.draw;
+                that.getTableQuery();
+            },
+            // 自动排序
+            sortChange(params) {
+                console.log(params)
+            },
+            // 过滤时间
+            filterFmtDate(value, row, column) {
+                let that = this;
+                return globalfmtDate(column, 11);
+            },
+            // 过滤金额
+            filterMoney(value, row, column) {
+                let that = this;
+                return parseFloat(column).toFixed(2);
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    @import "../assets/css/panel.css";
+
+</style>

src/views/Test.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <!--<Radar></Radar>-->
-        <!--<Sankey></Sankey>-->
+        <Sankey></Sankey>
 
         <div class="other-people">
             <div class="image-border image-border1"></div>