组件

src/components/BigRader.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="BigRader">
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BigRader"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/Console.vue

@@ -119,9 +119,9 @@
     }
 
     .other-people {
-        width: 365px;
-        height: 906px;
-        margin-left: 10px;
+        width: 350px;
+        min-height: 706px;
+        margin-left: 0;
     }
 
     .cstitle {
@@ -165,4 +165,7 @@
         border-color: #6DC1FF;
         color: #6DC1FF
     }
+    .bg-purple {
+        overflow:hidden;
+    }
 </style>

src/components/EquipInfo.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="equipinfo">
+        <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="thisContent">
+                <ul>
+                    <li>
+                        <div class="ringCircle">
+                            <Ring></Ring>
+                        </div>
+                        <em>{{info.sum}}台</em>
+                        <span>设备总数</span>
+                    </li>
+                    <li>
+                        <div class="ringCircle">
+                            <Ring></Ring>
+                        </div>
+                        <em>{{info.online}}台</em>
+                        <span>在线设备</span>
+                    </li>
+                    <li>
+                        <div class="ringCircle">
+                            <Ring></Ring>
+                        </div>
+                        <em>{{info.outline}}台</em>
+                        <span>离线设备</span>
+                    </li>
+                    <li>
+                        <div class="ringCircle">
+                            <Ring></Ring>
+                        </div>
+                        <em>{{info.disable}}台</em>
+                        <span>禁用设备</span>
+                    </li>
+                    <li>
+                        <div class="ringCircle">
+                            <Ring></Ring>
+                        </div>
+                        <em>{{info.warning}}台</em>
+                        <span>当日报警数</span>
+                    </li>
+                    <li>
+                        <div class="ringCircle">
+                            <Ring></Ring>
+                        </div>
+                        <em>{{info.dubious}}台</em>
+                        <span>可疑事件总数</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Ring from '@/components/Ring.vue'
+    export default {
+        data(){
+            return{
+                info:{
+                    sum:208,
+                    online:198,
+                    outline:8,
+                    disable:2,
+                    warning:89,
+                    dubious:372,
+                }
+            }
+        },
+        components: {
+            Ring
+        }
+    }
+</script>
+
+<style scoped>
+    .other-people {
+        width: 439px;
+        height: 405px;
+        margin-left: 0;
+        overflow: hidden;
+        background: #000F2A;
+    }
+    ul,li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    .thisContent ul {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        padding: 0 23px;
+        margin: 0 auto;
+        margin-top: 40px;
+    }
+    .thisContent ul li {
+        width: 120px;
+        height: 110px;
+        float: left;
+        margin-right: 20px;
+        margin-bottom: 50px;
+    }
+    .thisContent ul li:nth-child(3){
+        margin-right: 0;
+    }
+    .thisContent ul li:nth-child(6){
+        margin-right: 0;
+    }
+    .ringCircle {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border-radius: 250px;
+        border:10px solid rgba(37,146,226,0.6) ;
+    }
+    .thisContent li em {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        bottom: 75px;
+        color: #67BFFF;
+        font-size: 18px;
+        text-align: center;
+        font-style: normal;
+    }
+    .thisContent li span {
+        position: relative;
+        bottom: 20px;
+        color: #67BFFF;
+        font-size: 16px;
+        text-align: center;
+    }
+</style>

src/components/HistoryRecord.vue

@@ -0,0 +1,329 @@
+<template>
+    <div class="historyRecord">
+        <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>
+            <el-table
+                    :data="tableData"
+                    stripe
+                    style="width: 100%">
+                <el-table-column
+                        prop="ssid"
+                        label="SSID"
+                        width="">
+                    <template slot-scope="scope">
+                        <i :class="[{'blue':scope.row.state == 1},{'yellow':scope.row.state == 0}]"></i>
+                        {{ scope.row.ssid }}
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        prop="date"
+                        label="日期"
+                        width="">
+                </el-table-column>
+                <el-table-column
+                        prop="location"
+                        label="地点"
+                        width="">
+                </el-table-column>
+                <el-table-column
+                        prop="type"
+                        label="可疑信号">
+                </el-table-column>
+            </el-table>
+            <br>
+            <el-pagination
+                    background
+                    :total="pageination.total"
+                    :page-size="pageination.pageItem"
+                    @current-change="pageChange"
+            ></el-pagination>
+        </div>
+    </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: 10,
+                    pageoptions: pageOptions(),
+                    total: 30,
+                    pageIndex: 1,
+                },
+                tableData: [{
+                    date: '06-19 12:32:01',
+                    ssid: 'ewall-4G',
+                    location: '201会议室',
+                    type: 'WIFI信号',
+                    state: 1
+                }, {
+                    date: '06-19 12:32:01',
+                    ssid: 'ewall-4G',
+                    location: '201会议室',
+                    type: 'WIFI信号',
+                    state: 0
+                }, {
+                    date: '06-19 12:32:01',
+                    ssid: 'ewall-4G',
+                    location: '201会议室',
+                    type: 'WIFI信号',
+                    state: 1
+                },{
+                    date: '06-19 12:32:01',
+                    ssid: 'ewall-4G',
+                    location: '201会议室',
+                    type: 'WIFI信号',
+                    state: 1
+                },{
+                    date: '06-19 12:32:01',
+                    ssid: 'ewall-4G',
+                    location: '201会议室',
+                    type: 'WIFI信号',
+                    state: 1
+                },{
+                    date: '06-19 12:32:01',
+                    ssid: 'ewall-4G',
+                    location: '201会议室',
+                    type: 'WIFI信号',
+                    state: 1
+                },{
+                    date: '06-19 12:32:01',
+                    ssid: 'ewall-4G',
+                    location: '201会议室',
+                    type: 'WIFI信号',
+                    state: 1
+                }, {
+                    date: '06-19 12:32:01',
+                    ssid: 'ewall-4G',
+                    location: '201会议室',
+                    type: 'WIFI信号',
+                    state: 0
+                },]
+            }
+        },
+        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);
+                //     });
+            },
+            // 设置分页数据
+            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);
+            },
+            // 过滤金额
+        },
+    }
+</script>
+
+<style scoped>
+    .other-people {
+        width: 439px;
+        height: 480px;
+        margin-left: 0;
+    }
+
+    .el-table {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 40px;
+        font-size: 14px;
+        color: #6DC1FF;
+    }
+
+    .el-table, .el-table__expanded-cell {
+        background: none;
+    }
+
+    /deep/ .el-table th, /deep/ .el-table tr {
+        background: none;
+        color: #6DC1FF;
+        border: none;
+    }
+
+    /deep/ .el-table td, /deep/ .el-table th.is-leaf {
+        border: none;
+    }
+
+    /deep/ .el-button--primary.is-active, /deep/ .el-button--primary:active, /deep/ .el-button--primary {
+        background: none;
+        border: 1px solid #005EA2;
+        color: #6DC1FF;
+    }
+
+    /deep/ .el-button--primary {
+        background: none;
+        border: 1px solid #005EA2;
+        color: #6DC1FF;
+    }
+
+    .el-table--border::after, .el-table--group::after, .el-table::before {
+        display: none;
+    }
+
+    .el-pagination.is-background .btn-next.disabled, /deep/ .el-pagination.is-background .btn-next:disabled, /deep/ .el-pagination.is-background .btn-prev.disabled, .el-pagination.is-background .btn-prev:disabled, /deep/ .el-pagination.is-background .el-pager li.disabled {
+        color: #6DC1FF;
+    }
+
+    /deep/ .el-pagination.is-background .btn-next, /deep/ .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+        background-color: #061B44;
+    }
+
+    /deep/ .el-pagination__jump {
+        display: none !important;
+    }
+
+    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        color: #002540;
+        background-color: #6DC1FF;
+    }
+
+    /deep/ .el-pagination__total {
+        color: #6DC1FF;
+    }
+
+    /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
+        background: rgba(27, 86, 200, 0.77);
+    }
+
+    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped:hover > td {
+        background: rgba(27, 86, 200, 0.77);
+    }
+
+    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
+        background: rgba(27, 86, 200, 0.14);
+    }
+
+    /deep/ .has-gutter th {
+        background: rgba(0, 23, 67, 0.8) !important;
+        font-weight: normal;
+    }
+    /deep/ .el-table .cell {
+        padding: 3px;
+    }
+    /deep/ .el-table td, .el-table th {
+        padding: 6px 0;
+    }
+    /deep/ .number {
+        width: 25px;
+        height: 25px;
+        line-height: 25px;
+        min-width:25px;
+    }
+    i.blue {
+        width:10px;
+        height: 10px;
+        float: left;
+        background: #6DC1FF;
+        margin-top: 6px;
+        margin-right: 5px;
+        border-radius: 250px;
+    }
+    i.yellow {
+        width:10px;
+        height: 10px;
+        float: left;
+        margin-top: 6px;
+        margin-right: 5px;
+        background: #FFDD00;
+        border-radius: 250px;
+    }
+</style>

src/components/Ring.vue

@@ -1,9 +1,8 @@
 <template>
-        <div class="container">
-            <div style="display: inline; float: left; width: 50%; border: #3b4151 solid 1px">
-                <ve-ring :data="chartData" :extend="chartExtend"></ve-ring>
-            </div>
-        </div>
+    <div class="ringContainer">
+        <ve-ring :data="chartData" width="100px" height="180px" :settings="chartSettings" :extend="chartExtend"
+                 :legend-visible="false"></ve-ring>
+    </div>
 </template>
 
 <script>
@@ -16,33 +15,48 @@
                     rows: [
                         {'日期': '1/1', '访问用户': 1393},
                         {'日期': '1/2', '访问用户': 3342},
-                        {'日期': '1/3', '访问用户': 1543},
-                        {'日期': '1/4', '访问用户': 2236}
                     ]
                 },
-                chartExtend:{
-                    color:['#4ad2ff','#ad1453','#333333','#ffffff']
+                chartSettings: {
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false,
+                        position: 'center'
+                    },
+                    emphasis: {
+                        label: {
+                            show: false,
+                            fontSize: '12',
+                        }
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    radius: [
+                        '44', '46'
+                    ],
+                    offsetY: 50
+                },
+                chartExtend: {
+                    color: ['#6DC1FF', '#000F2A'],
+
                 }
             }
         },
         mounted() {
             let that = this;
-            this.timer = setInterval(() => {
-                that.getDate();
-            }, 3300);
+            // this.timer = setInterval(() => {
+            that.getDate();
+            // }, 3300);
         },
         methods: {
             getDate() {
                 let that = this;
                 let newDate1 = that.getRandomInt(1000, 25000);
                 let newDate2 = that.getRandomInt(1000, 2500);
-                let newDate3 = that.getRandomInt(1000, 2500);
-                let newDate4 = that.getRandomInt(1000, 2500);
                 this.chartData.rows = [
                     {'日期': '1/1', '访问用户': newDate1},
                     {'日期': '1/2', '访问用户': 2000},
-                    {'日期': '1/3', '访问用户': 2000},
-                    {'日期': '1/4', '访问用户': 2000}
                 ]
             },
             getRandomInt(min, max) {
@@ -53,5 +67,11 @@
 </script>
 
 <style scoped>
-
+.ringContainer {
+    /*width: 100px;*/
+    /*height: 100px;*/
+    /*overflow: hidden;*/
+    /*display: block;*/
+    /*margin: 0 auto;*/
+}
 </style>

src/components/Scan.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="wifiSign">
+        <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">
+                0-6G扫描
+            </div>
+            <ve-line :data="chartData" width="966px" height="250px" :loading="loading" :legend-visible="false"
+                          :extend="chartExtend"></ve-line>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                days: 13,
+                loading: true,
+                chartData: {
+                    columns: ['页面', '访问量'],
+                    rows: [
+                        {'页面': '1.0M', '访问量': 123},
+                        {'页面': '2.0M', '访问量': 321},
+                        {'页面': '3.0M', '访问量': 231},
+                        {'页面': '4.0M', '访问量': 112},
+                        {'页面': '5.0M', '访问量': 321},
+                        {'页面': '6.0M', '访问量': 121},
+                        {'页面': '7.0M', '访问量': 333},
+                        {'页面': '8.0M', '访问量': 231},
+                        {'页面': '9.0M', '访问量': 411},
+                        {'页面': '10.0M', '访问量': 142},
+                        {'页面': '11.0M', '访问量': 321},
+                        {'页面': '12.0M', '访问量': 441},
+                        {'页面': '13.0M', '访问量': 441},
+                    ]
+                },
+                chartExtend: {
+                    color: ['#4ad2ff'],
+                    series: {
+                        barMaxWidth: 10
+                    },
+                    axisLine: {
+                        color: "#4ad2ff",
+                    },
+                    yAxis: {
+                        // name : '单位: dB',
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                color: ['#08255B']
+                            }
+                        },
+                        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: 986px;*/
+        /*height: 212px;*/
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+    /deep/ .other-people {
+        width: 966px;
+        height: 212px;
+        margin-left:0;
+        padding: 0;
+        padding-right: 5px;
+    }
+</style>

src/components/Total.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="total">
+        <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="totalContianer">
+                <div class="tlt">
+                    <h5>正在监测</h5>
+                    <BigRader></BigRader>
+                </div>
+                <div class="trt"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import BigRader from '@/components/BigRader.vue'
+    export default {
+        components: {
+            BigRader
+        }
+    }
+</script>
+
+<style scoped>
+    .other-people {
+        width: 976px;
+        height: 481px;
+        margin-left: 0;
+        overflow: hidden;
+        background: #000F2A;
+    }
+    ul,li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    .totalContianer {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 55px;
+    }
+    .totalContianer .tlt {
+        width: 50%;
+        float: left;
+    }
+    .totalContianer .trt {
+        width: 50%;
+        float: right;
+    }
+    .totalContianer h5 {
+        width: 126px;
+        height: 26px;
+        line-height: 26px;
+        text-align: center;
+        color: #6DC1FF;
+        font-size: 14px;
+        margin: 0 auto;
+        margin-bottom: 19px;
+        background: url("../assets/img/main/title.png")top center no-repeat;
+        background-size: 100% 100%;
+    }
+</style>

src/components/WifiSign.vue

@@ -1,6 +1,16 @@
 <template>
     <div class="wifiSign">
-        <ve-histogram :data="chartData"height="250px" :loading="loading" :legend-visible="false" :extend="chartExtend"></ve-histogram>
+        <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">
+                WiFi信号
+            </div>
+            <ve-histogram :data="chartData" width="966px" height="250px" :loading="loading" :legend-visible="false"
+                          :extend="chartExtend"></ve-histogram>
+        </div>
     </div>
 </template>
 
@@ -32,35 +42,35 @@
                     series: {
                         barMaxWidth: 10
                     },
-                    axisLine:{
-                        color:"#4ad2ff",
+                    axisLine: {
+                        color: "#4ad2ff",
                     },
-                    yAxis:{
+                    yAxis: {
                         // name : '单位: dB',
                         splitLine: {
                             lineStyle: {
                                 // 使用深浅的间隔色
-                                color: ['#4ad2ff']
+                                color: ['#08255B']
                             }
                         },
-                        axisLine:{
-                            lineStyle:{
-                                color:'#4ad2ff',
-                                width:1,//这里是为了突出显示加上的
+                        axisLine: {
+                            lineStyle: {
+                                color: '#4ad2ff',
+                                width: 1,//这里是为了突出显示加上的
                             }
                         }
                     },
-                    xAxis:{
+                    xAxis: {
                         splitLine: {
                             lineStyle: {
                                 // 使用深浅的间隔色
                                 color: ['#4ad2ff']
                             }
                         },
-                        axisLine:{
-                            lineStyle:{
-                                color:'#4ad2ff',
-                                width:1,//这里是为了突出显示加上的
+                        axisLine: {
+                            lineStyle: {
+                                color: '#4ad2ff',
+                                width: 1,//这里是为了突出显示加上的
                             }
                         }
                     }
@@ -86,11 +96,17 @@
 
 <style scoped>
     .wifiSign {
-        width: 966px;
-        height: 192px;
+        /*width: 986px;*/
+        /*height: 212px;*/
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        padding-right: 10px;
+    }
+    /deep/ .other-people {
+        width: 966px;
+        height: 212px;
+        margin-left:0;
+        padding: 0;
+        padding-right: 5px;
     }
 </style>

src/router/index.js

@@ -94,6 +94,10 @@ const routes = [
         path: '/wifiSign',
         name: 'wifiSign',
         component: () => import( '../components/WifiSign.vue')
+    },{
+        path: '/equipInfo',
+        name: 'equipInfo',
+        component: () => import( '../components/EquipInfo.vue')
     }, {
         path: '*',
         name: '404',

src/views/Index.vue

@@ -13,7 +13,9 @@
                         <router-view></router-view>
                     </keep-alive>
                 </el-main>
-                <el-footer v-if="false">Footer</el-footer>
+                <el-footer >
+                    <p>Copyright © 2020-2022 专用场所无线信号安全监控系统 版权所有</p>
+                </el-footer>
             </el-container>
         </el-container>
     </div>
@@ -53,7 +55,6 @@
                 let str = ""; //存放第一层遍历的值
                 let strArray = []; //存放第二层遍历的值
                 let item = {};
-                console.log(data);
                 if (data == 1) {
                     // 首页直接处理了
                     item = {
@@ -130,6 +131,10 @@
         float: right;
         right: 0;
         left: 55px;
-        top: 50px;
+        top: 60px;
+    }
+    .el-main {
+        /*max-height: 850px;*/
+        /*overflow-y: scroll;*/
     }
 </style>

src/views/Main.vue

@@ -4,18 +4,30 @@
             <Console></Console>
         </div>
         <div class="center">
+            <Total></Total>
+            <br>
             <WifiSign></WifiSign>
+            <br>
+            <Scan></Scan>
+        </div>
+        <div class="rt">
+            <HistoryRecord></HistoryRecord>
+            <br>
+            <EquipInfo></EquipInfo>
         </div>
-
     </div>
 </template>
 
 <script>
     import Console from '@/components/Console.vue'
     import WifiSign from '@/components/WifiSign.vue'
+    import Scan from '@/components/Scan.vue'
+    import HistoryRecord from '@/components/HistoryRecord.vue'
+    import EquipInfo from '@/components/EquipInfo.vue'
+    import Total from '@/components/Total.vue'
     export default {
         components: {
-            Console,WifiSign
+            Console,WifiSign,Scan,HistoryRecord,EquipInfo,Total
         }
     }
 </script>
@@ -38,14 +50,21 @@
     }
     .lt {
         width: 365px;
-        height: 906px;
+        /*height: 906px;*/
         float: left;
         overflow: hidden;
+        margin-right: 10px;
     }
     .center {
         width: 976px;
-        height: 906px;
+        /*height: 906px;*/
         float: left;
         overflow: hidden;
     }
+    .rt {
+        width: 452px;
+        float: right;
+        overflow: hidden;
+        margin-right: 10px;
+    }
 </style>

src/views/Yhgl.vue

@@ -2,7 +2,7 @@
     <div>
         <el-card class="panel" shadow="always">
             <div class="panel-body">
-                <div class=" panel_control">
+                <div class="panel_control">
                     <el-row :gutter="20">
                         <el-col :span="4">
                             <em>起始:</em>
@@ -89,7 +89,6 @@
 
 <script>
     import Global from '../Global.js'
-
     export default {
         data() {
             return {