new page ready

README.md

@@ -89,3 +89,10 @@ b.新增接口
 2.项目查看线上效果  
     访问  http://sd.tickdig.com:85/login  
     测试账号 admin pwd 123456  
+
+
+============
+design func
+
+1.一个专门模块负责从后台请求数据 main.vue
+2.各个子组件只负责渲染，切换还是由main负责

src/components/BigRader.vue

@@ -2,11 +2,11 @@
     <div class="BigRader">
         <div class="bgCircle">
             <div class="rader animete-box">
-                <div class="dotWarning animete-1 animated heartBeat"></div>
+                <div class="dotWarning animete-1 animated heartBeat" v-if="RaderState == 1"></div>
                 <div class="dotNormal animete-2  heartBeat"></div>
                 <div class="dotNormal animete-3  heartBeat"></div>
                 <div class="dotNormal animete-4  heartBeat"></div>
-                <em class="state" v-if="state == 0">区域环境安全</em>
+                <em class="state" v-if="RaderState == 0">区域环境安全</em>
                 <em class="warning" v-else>
                     <img src="../assets/img/main/waning.png" alt="">
                     发现可疑信号</em>
@@ -27,35 +27,22 @@
         data() {
             return {
                 seconds: 0,
-                state: 0,
+                RaderState: 0,
                 timeShow: ' 00 : 00 : 00'
             }
         },
-        mounted() {
-            this.timeRun();
-            this.timer = setInterval(() => {
-                this.timeRun();
-            }, 1000);
-        },
-        beforeDestroy() {
-            clearInterval(this.timer);
-        },
-        methods: {
-            // 显示设备持续时间
-            timeRun() {
-                let seconds = this.seconds;
-                let hour = parseInt(seconds / 3600);
-                let r = parseInt(seconds % 3600);
-                let m = parseInt(r / 60);
-                let s = parseInt(r % 60);
-                hour = hour > 9 ? hour : '0' + hour;
-                m = m > 9 ? m : '0' + m;
-                s = s > 9 ? s : '0' + s;
-                let res = hour + " : " + m + " : " + s;
-                this.timeShow = res;
-                this.seconds += 1;
+        props: ['totalRs'],
+        watch: {
+            totalRs: function (val) {
+                let that = this;
+                this.timeShow = val.RunTime;
+                if (val.RegionDetRs[0].WarnNum != 0) {
+                    that.RaderState = 1
+                } else {
+                    that.RaderState = 0
+                }
             },
-        }
+        },
     }
 </script>
 

src/components/EquipInfo.vue

@@ -14,42 +14,42 @@
                         <div class="ringCircle">
                             <Ring></Ring>
                         </div>
-                        <em>{{info.detector_totalnum}}台</em>
+                        <em>{{info.Detector_totalnum}}台</em>
                         <span>设备总数</span>
                     </li>
                     <li>
                         <div class="ringCircle">
                             <Ring></Ring>
                         </div>
-                        <em>{{info.detector_onlinenum}}台</em>
+                        <em>{{info.Detector_onlinenum}}台</em>
                         <span>在线设备</span>
                     </li>
                     <li>
                         <div class="ringCircle">
                             <Ring></Ring>
                         </div>
-                        <em>{{info.detector_offlinenum}}台</em>
+                        <em>{{info.Detector_offlinenum}}台</em>
                         <span>离线设备</span>
                     </li>
                     <li>
                         <div class="ringCircle">
                             <Ring></Ring>
                         </div>
-                        <em>{{info.detector_disablednum}}台</em>
+                        <em>{{info.Detector_disablednum}}台</em>
                         <span>禁用设备</span>
                     </li>
                     <li>
                         <div class="ringCircle">
                             <Ring></Ring>
                         </div>
-                        <em>{{info.warninglog_todaycount}}台</em>
+                        <em>{{info.Warninglog_todaycount}}台</em>
                         <span>当日报警数</span>
                     </li>
                     <li>
                         <div class="ringCircle">
                             <Ring></Ring>
                         </div>
-                        <em>{{info.warninglog_totalcount}}台</em>
+                        <em>{{info.Warninglog_totalcount}}台</em>
                         <span>可疑事件总数</span>
                     </li>
                 </ul>
@@ -59,19 +59,22 @@
 </template>
 
 <script>
+    let qs = require('qs');
     import { GetStaticinfo } from '../api/getApiRes.js'
     import Ring from '@/components/Ring.vue'
 
+    // 设备信息统计与
+
     export default {
         data() {
             return {
                 info: {
-                    detector_disablednum: 0,
-                    detector_offlinenum: 0,
-                    detector_onlinenum: 0,
-                    detector_totalnum: 0,
-                    warninglog_todaycount: 0,
-                    warninglog_totalcount: 0,
+                    Detector_disablednum: 0,
+                    Detector_offlinenum: 0,
+                    Detector_onlinenum: 0,
+                    Detector_totalnum: 0,
+                    Warninglog_todaycount: 0,
+                    Warninglog_totalcount: 0,
                 }
             }
         },

src/components/SingleEquipInfo.vue

@@ -32,6 +32,7 @@
 </template>
 
 <script>
+    // todo 接收main。vue 传入的参数并渲染 ，本身不请求Ajax
     import Ring from '@/components/Ring.vue'
     export default {
         data(){

src/components/SmallRader.vue

@@ -2,11 +2,10 @@
     <div class="smallRader">
         <div class="bgCircle">
             <div class="rader animete-box">
-                <div class="dotWarning animete-1 animated heartBeat"></div>
+                <div class="dotWarning animete-1 animated heartBeat" v-if="RaderState == 1"></div>
                 <div class="dotNormal animete-2  heartBeat"></div>
                 <div class="dotNormal animete-3  heartBeat"></div>
                 <div class="dotNormal animete-4  heartBeat"></div>
-
             </div>
             <span id="circle1"></span>
             <span id="circle2"></span>
@@ -16,7 +15,7 @@
         <div class="timeShow">
             {{timeShow}}
         </div>
-        <em class="state" v-if="state == 0">区域环境安全</em>
+        <em class="state" v-if="RaderState == 0">区域环境安全</em>
         <em class="warning" v-else>
             <img src="../assets/img/main/waning.png" alt="">
             发现可疑信号</em>
@@ -28,34 +27,23 @@
         data() {
             return {
                 seconds: 0,
-                state: 1,
+                RaderState: 0,
                 timeShow: ' 00 : 00 : 00'
             }
         },
-        mounted() {
-            this.timeRun();
-            this.timer = setInterval(() => {
-                this.timeRun();
-            }, 1000);
-        },
-        beforeDestroy() {
-            clearInterval(this.timer);
-        },
+        props: ['samllTotalRs'],
         methods: {
-            // 显示设备持续时间
-            timeRun() {
-                let seconds = this.seconds;
-                let hour = parseInt(seconds / 3600);
-                let r = parseInt(seconds % 3600);
-                let m = parseInt(r / 60);
-                let s = parseInt(r % 60);
-                hour = hour > 9 ? hour : '0' + hour;
-                m = m > 9 ? m : '0' + m;
-                s = s > 9 ? s : '0' + s;
-                let res = hour + " : " + m + " : " + s;
-                this.timeShow = res;
-                this.seconds += 1;
-            },
+            // samllTotalRs: function (val) {
+            //     let that = this;
+            //     this.timeShow = val.RunTime;
+            //     for (var i = 0; i < val.RegionDetRs.length; i++) {
+            //         if (val.RegionDetRs[i].WarnNum != 0) {
+            //             that.RaderState = 1
+            //         } else {
+            //             that.RaderState = 0
+            //         }
+            //     }
+            // },
         }
     }
 </script>

src/components/Total.vue

@@ -11,27 +11,27 @@
             <div class="totalContianer" v-if="TotalPanel">
                 <div class="tlt">
                     <h5>正在监测</h5>
-                    <BigRader></BigRader>
+                    <BigRader :total-rs="totalRs"></BigRader>
                 </div>
                 <div class="trt">
                     <h5>实时监测记录</h5>
-                    <Watching></Watching>
+                    <Watching :total-rs="totalRs" ></Watching>
                 </div>
             </div>
             <div class="loftContainer" v-if="LoftPanel">
                 <div class="tlt">
                     <h5>正在监测</h5>
-                    <BigRader></BigRader>
+                    <BigRader :total-rs="totalRs"></BigRader>
                 </div>
                 <div class="trt">
                     <h5>实时监测记录</h5>
-                    <Watching></Watching>
+                    <Watching :total-rs="totalRs"></Watching>
                 </div>
             </div>
             <div class="manageContainer" v-if="managePanel">
                 <div class="tlt">
                     <h5></h5>
-                    <SmallRader></SmallRader>
+                    <SmallRader  :strs="totalRs"></SmallRader>
                 </div>
                 <div class="trt">
                     <Loft></Loft>
@@ -40,7 +40,7 @@
             <div class="RoomContainer" v-if="RoomPanel">
                 <div class="tlt">
                     <h5></h5>
-                    <SmallRader></SmallRader>
+                    <SmallRader  :strs="totalRs"></SmallRader>
                 </div>
                 <div class="trt">
                     <Room></Room>
@@ -49,11 +49,11 @@
             <div class="DetctorContianer" v-if="DetctorPanel">
                 <div class="tlt">
                     <h5>正在监测</h5>
-                    <BigRader></BigRader>
+                    <BigRader :total-rs="totalRs"></BigRader>
                 </div>
                 <div class="trt">
                     <h5>实时监测记录</h5>
-                    <Watching></Watching>
+                    <Watching :total-rs="totalRs"></Watching>
                 </div>
             </div>
         </div>
@@ -61,21 +61,60 @@
 </template>
 
 <script>
+    let qs = require('qs');
     import BigRader from '@/components/BigRader.vue'
     import SmallRader from '@/components/SmallRader.vue'
     import Watching from '@/components/Watching.vue'
     import Loft from '@/components/Loft.vue'
     import Room from '@/components/Room.vue'
-
+    import {RegionDetInfolist} from '../api/getApiRes.js'
     export default {
         data() {
-
             return {
                 TotalPanel: true,//总控
                 LoftPanel: false,//楼层
                 managePanel: false,//区域
                 RoomPanel: false,//房间
                 DetctorPanel: false,//设备
+                totalRs: [],
+            }
+        },
+        mounted() {
+            this.getDate();
+            let that = this;
+            this.timer = setInterval(() => {
+                that.getDate();
+            }, 2800);
+        },
+        destroyed () {
+            clearInterval(this.timer);//页面销毁时清除定时器
+            clearInterval(this.wordDisplay);//页面销毁时清除定时器
+        },
+        methods: {
+            // 全部设备情况
+            getDate() {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                    regionId:this.regionId
+                };
+                let postdata = qs.stringify(param);
+                RegionDetInfolist(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.totalRs = json;
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
+            },
+            wordDisplay(word) {
+                let index = 0;
+                let that = this;
+                setTimeout(function () {
+                    that.list.unshift(word[index]);
+                    index = index + 1 ;
+                }, 300);
             }
         },
         props: ['postTitle','regionId'],
@@ -105,6 +144,10 @@
                         that.DetctorPanel = true;
                         break;
                 }
+            },
+            regionId: function (val) {
+                // 地区改变后，重新获取数据
+                this.getDate();
             }
         },
         components: {

src/components/Watching.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="watching">
         <ul>
-            <li v-for="l in list" :class="{'red':l.WarnType != 0}">
+            <li v-for="l in list" :class="{'red':l.WarnNum != 0}">
                 <span> {{l.Dettime |fmtDate }}</span>
                 <em>{{l.RegionName}} {{l.WarnString}}</em>
             </li>
@@ -10,9 +10,6 @@
 </template>
 
 <script>
-    import {RegionDetInfolist} from '../api/getApiRes.js'
-
-    let qs = require('qs');
     export default {
         data() {
             return {
@@ -20,34 +17,8 @@
                 readyList: [],
             }
         },
-        mounted() {
-            this.getDate();
-            let that = this;
-            this.timer = setInterval(() => {
-                that.getDate();
-            }, 2800);
-        },
-        destroyed () {
-            clearInterval(this.timer);//页面销毁时清除定时器
-            clearInterval(this.wordDisplay);//页面销毁时清除定时器
-        },
+        props: ['totalRs'],
         methods: {
-            getDate() {
-                let that = this;
-                let param = {
-                    token: localStorage.token,
-                    regionId:0
-                };
-                let postdata = qs.stringify(param);
-                RegionDetInfolist(postdata).then(res => {
-                    let json = res;
-                    if (json.Code == 0) {
-                        that.wordDisplay(json.RegionDetRs);
-                    } else {
-                        that.$message.error(json.Memo);
-                    }
-                })
-            },
             wordDisplay(word) {
                 let index = 0;
                 let that = this;
@@ -57,6 +28,13 @@
                     }, 300);
             }
         },
+        watch: {
+            totalRs: function (val) {
+                let that = this;
+                // 逐行显示
+                that.wordDisplay(val.RegionDetRs);
+            },
+        },
         filters: {
             fmtDate: function (value) {
                 if(!value){
@@ -79,6 +57,7 @@
 
     .watching ul {
         width: 100%;
+        height: 345px;
         overflow: hidden;
         display: block;
         margin: 0 auto;

src/components/WifiSign3.vue

@@ -0,0 +1,153 @@
+<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">
+                WiFi信号
+            </div>
+            <ve-line :data="chartData" width="966px" height="250px" :loading="loading" :legend-visible="false" :settings="chartSettings"
+                          :extend="chartExtend"></ve-line>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {wifiSingle} from '../api/getApiRes.js'
+    let qs = require('qs');
+    export default {
+        data() {
+            return {
+                days: 13,
+                loading: true,
+                chartData: {
+                    columns: ['日期', '访问量','下单用户','下单率'],
+                    rows: [
+                        { '日期': '信道1', '访问量':0, '下单用户':null, '下单率':null,},
+                        { '日期': '信道2', '访问量': 3530, '下单用户':null, '下单率':null,},
+                        { '日期': '信道3', '访问量':0, '下单用户':0, '下单率':null,},
+                        { '日期': '信道4', '访问量':null, '下单用户': 1423, '下单率':0,},
+                        { '日期': '信道5', '访问量':null, '下单用户':0, '下单率': 1093 },
+                        { '日期': '信道6', '访问量':null, '下单用户':null, '下单率':0,},
+                        { '日期': '信道7', '访问量':null, '下单用户':null, '下单率':null,},
+                        { '日期': '信道8', '访问量':null, '下单用户':null, '下单率':null,},
+                        { '日期': '信道9', '访问量':null, '下单用户':null, '下单率':null,},
+                        { '日期': '信道10', '访问量':null, '下单用户':null, '下单率':null,},
+                        { '日期': '信道11', '访问量':null, '下单用户':null, '下单率':null,},
+                        { '日期': '信道12', '访问量':null, '下单用户':null, '下单率':null,},
+                        { '日期': '信道13', '访问量': null, '下单用户': null, '下单率': null },
+                    ]
+                },
+                chartSettings : {
+                    area: true
+                },
+                chartExtend: {
+                    area: true,
+                    color: ['#4ad2ff','#cccccc','#FF6DBB'],
+                    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();
+            // }, 1600);
+        },
+        methods: {
+            getDate() {
+                let that = this;
+                let param = {
+                    token: localStorage.token
+                };
+                let postdata = qs.stringify(param);
+                // wifiSingle(postdata).then(res => {
+                //       let json = res;
+                //       if (json.Code == 0) {
+
+                // test start
+
+                let item = [];
+                let t =0;
+                for (var i = 0; i < 9; i++) {
+                    let nums = Math.floor((Math.random()*365)+1);
+                    t = i+1;
+                    item.push({
+                        '日期': '信道1', '访问量':0, '下单用户':null, '下单率':null,
+                        '页面': "信道" + t,
+                        '访问量': nums,
+                    })
+                }
+
+                let json = {
+                    Rs: item,
+                    Code: 0,
+                    Memo: '登陆成功'
+                };
+
+                // test end
+                this.chartData.rows = json.Rs;
+                //       } else {
+                //           that.$message.error(json.Memo);
+                //       }
+                //   })
+            },
+            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/views/Main.vue

@@ -1,19 +1,69 @@
 <template>
     <div class="mainContainer">
-        <div class="lt">
+        <div class="mlt">
             <Console @refreshList="changPanel"></Console>
         </div>
-        <div class="center">
+        <div class="mcenter">
             <div class="cube">
-                <Total :post-title="pageLevel" :region-id="regionId"></Total>
+                <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" v-if="TotalPanel || LoftPanel">
+                            <div class="tlt">
+                                <h5>正在监测</h5>
+                                <BigRader :total-rs="totalRs"></BigRader>
+                            </div>
+                            <div class="trt">
+                                <h5>实时监测记录</h5>
+                                <Watching :total-rs="totalRs"></Watching>
+                            </div>
+                        </div>
+                        <!--</div>-->
+                        <!--</div>-->
+                        <!--<div class="manageContainer" v-if="managePanel">-->
+                        <!--<div class="tlt">-->
+                        <!--<h5></h5>-->
+                        <!--<SmallRader  :strs="totalRs"></SmallRader>-->
+                        <!--</div>-->
+                        <!--<div class="trt">-->
+                        <!--<Loft></Loft>-->
+                        <!--</div>-->
+                        <!--</div>-->
+                        <!--<div class="RoomContainer" v-if="RoomPanel">-->
+                        <!--<div class="tlt">-->
+                        <!--<h5></h5>-->
+                        <!--<SmallRader  :strs="totalRs"></SmallRader>-->
+                        <!--</div>-->
+                        <!--<div class="trt">-->
+                        <!--<Room></Room>-->
+                        <!--</div>-->
+                        <!--</div>-->
+                        <!--<div class="DetctorContianer" v-if="DetctorPanel">-->
+                        <!--<div class="tlt">-->
+                        <!--<h5>正在监测</h5>-->
+                        <!--<BigRader :total-rs="totalRs"></BigRader>-->
+                        <!--</div>-->
+                        <!--<div class="trt">-->
+                        <!--<h5>实时监测记录</h5>-->
+                        <!--<Watching :total-rs="totalRs"></Watching>-->
+                        <!--</div>-->
+                        <!--</div>-->
+                    </div>
+                </div>
             </div>
             <div class="cube">
                 <WifiSign></WifiSign>
             </div>
             <Scan></Scan>
         </div>
-        <div class="rt">
-            <div class="cube"  v-if="pageLevel == 0||pageLevel == 4">
+        <div class="mrt">
+            <div class="cube" v-if="pageLevel == 0||pageLevel == 4">
                 <HistoryRecord></HistoryRecord>
             </div>
             <div class="cube" v-if="pageLevel == 1||pageLevel == 2||pageLevel == 3">
@@ -37,15 +87,26 @@
     import HistoryRecord from '@/components/HistoryRecord.vue'
     import EquipInfo from '@/components/EquipInfo.vue'
     import SingleEquipInfo from '@/components/SingleEquipInfo.vue'
-    import Total from '@/components/Total.vue'
     import runTimeRecord from '@/components/runTimeRecord.vue'
-
+    import BigRader from '@/components/BigRader.vue'
+    import SmallRader from '@/components/SmallRader.vue'
+    import Watching from '@/components/Watching.vue'
+    import Loft from '@/components/Loft.vue'
+    import Room from '@/components/Room.vue'
+    import {RegionDetInfolist} from '../api/getApiRes.js'
+    let qs = require('qs');
     export default {
         data() {
             return {
                 loadingState: false,
-                pageLevel: 0,//默认查全部
+                pageLevel: 0,//操作层级 默认0查 全部 层级
                 regionId: 0,//默认查全部
+                TotalPanel: true,//总控
+                LoftPanel: false,//楼层
+                managePanel: false,//区域
+                RoomPanel: false,//房间
+                DetctorPanel: false,//设备
+                totalRs: [],
                 // pageLevel: 1,//当前为楼层
                 // pageLevel: 2,//当前为楼层区域
                 // pageLevel: 3,//当前为房间
@@ -53,24 +114,82 @@
             }
         },
         mounted() {
-            this.init();
+            let that = this;
+            that.loadingState = false;
+            // 获取数据
+            that.getDate();
+            // 定时查询
+            that.timer = setInterval(() => {
+                that.getDate();
+            }, 2800);
+        },
+        destroyed() {
+            //页面销毁时清除定时器
+            clearInterval(this.timer);
+            //页面销毁时清除添加条数动画的定时器
+            clearInterval(this.wordDisplay);
         },
         methods: {
-            // 初始化
-            init() {
-                this.loadingState = false;
-            },
             changPanel(level, btn) {
-                if(btn == 0){
+                 let that = this;
+                this.regionId = btn.Id ? btn.Id : 0;
+                if (btn == 0) {
                     // 首页单独处理
                     this.pageLevel = 0
-                }else{
+                } else {
                     this.pageLevel = parseInt(level);
                 }
+                that.getDate();
             },
+            // 根据层级和地区ID调用不同的Ajax接口
+            getDate() {
+                let that = this;
+                if(that.pageLevel != 4){
+                    // 非设备层级
+                    let param = {
+                        token: localStorage.token,
+                        regionId: this.regionId
+                    };
+                    let postdata = qs.stringify(param);
+                    that.getRegionDetInfolist(postdata);
+                }else{
+                    // 单个设备层级
+                    // todo
+                }
+            },
+            getRegionDetInfolist(postdata) {
+                let that = this;
+                RegionDetInfolist(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.totalRs = json;
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
+            },
+            wordDisplay(word) {
+                let index = 0;
+                let that = this;
+                setTimeout(function () {
+                    that.list.unshift(word[index]);
+                    index = index + 1;
+                }, 300);
+            }
         },
         components: {
-            Console, WifiSign, Scan, HistoryRecord, EquipInfo, Total,runTimeRecord,SingleEquipInfo
+            Console,
+            WifiSign,
+            Scan,
+            HistoryRecord,
+            EquipInfo,
+            runTimeRecord,
+            SingleEquipInfo,
+            BigRader,
+            Watching,
+            SmallRader,
+            Loft,
+            Room
         }
     }
 </script>
@@ -95,25 +214,25 @@
         margin: 0 auto;
     }
 
-    .lt {
+    .mlt {
         width: 365px;
         float: left;
         overflow: hidden;
         margin-right: 10px;
     }
 
-    .center {
+    .mcenter {
         width: 976px;
         /*height: 906px;*/
         float: left;
         overflow: hidden;
     }
 
-    .rt {
+    .mrt {
         width: 452px;
         float: right;
         overflow: hidden;
-        margin-right: 0px;
+        margin-right: 0;
     }
 
     .cube {
@@ -123,4 +242,160 @@
         margin: 0 auto;
         margin-bottom: 5px;
     }
+
+    /*total */
+    .other-people {
+        width: 963px;
+        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: 48%;
+        float: left;
+        padding-left: 10px;
+    }
+
+    .totalContianer .trt {
+        width: 48%;
+        float: right;
+        padding-right: 20px;
+        overflow: hidden;
+    }
+
+    .totalContianer h5 {
+        width: 126px;
+        height: 26px;
+        line-height: 26px;
+        text-align: center;
+        color: #6DC1FF;
+        font-size: 14px;
+        margin: 0;
+        margin-left: 33%;
+        margin-bottom: 19px;
+        background: url("../assets/img/main/title.png") top center no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .total .image-border2 {
+        right: 0;
+    }
+
+    .total .image-border4 {
+        right: 0;
+    }
+
+    .loftContainer .tlt {
+        width: 48%;
+        float: left;
+        padding-left: 10px;
+    }
+
+    .loftContainer .trt {
+        width: 48%;
+        float: right;
+        padding-right: 20px;
+        overflow: hidden;
+    }
+
+
+    .loftContainer {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 55px;
+    }
+
+
+    .RoomContainer .tlt {
+        float: left;
+        padding-left: 10px;
+        margin-top: 60px;
+    }
+
+    .RoomContainer .trt {
+        float: right;
+        padding-right: 20px;
+        overflow: hidden;
+        margin-top: 30px;
+    }
+
+    .DetctorContianer {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 55px;
+    }
+
+    .DetctorContianer .tlt {
+        width: 48%;
+        float: left;
+        padding-left: 10px;
+    }
+
+    .DetctorContianer .trt {
+        width: 48%;
+        float: right;
+        padding-right: 20px;
+        overflow: hidden;
+    }
+
+    .DetctorContianer h5 {
+        width: 126px;
+        height: 26px;
+        line-height: 26px;
+        text-align: center;
+        color: #6DC1FF;
+        font-size: 14px;
+        margin: 0;
+        margin-left: 33%;
+        margin-bottom: 19px;
+        background: url("../assets/img/main/title.png") top center no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .manageContainer .tlt {
+        float: left;
+        padding-left: 10px;
+        margin-top: 60px;
+    }
+
+    .manageContainer .trt {
+        float: right;
+        padding-right: 20px;
+        overflow: hidden;
+        margin-top: 30px;
+    }
+
+    .loftContainer h5 {
+        width: 126px;
+        height: 26px;
+        line-height: 26px;
+        text-align: center;
+        color: #6DC1FF;
+        font-size: 14px;
+        margin: 0;
+        margin-left: 33%;
+        margin-bottom: 19px;
+        background: url("../assets/img/main/title.png") top center no-repeat;
+        background-size: 100% 100%;
+    }
 </style>

src/views/Main2.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="mainContainer">
+        <div class="lt">
+            <Console @refreshList="changPanel"></Console>
+        </div>
+        <div class="center">
+            <div class="cube">
+                <Total :post-title="pageLevel" :region-id="regionId"></Total>
+            </div>
+            <div class="cube">
+                <WifiSign></WifiSign>
+            </div>
+            <Scan></Scan>
+        </div>
+        <div class="rt">
+            <div class="cube" v-if="pageLevel == 0||pageLevel == 4">
+                <HistoryRecord></HistoryRecord>
+            </div>
+            <div class="cube" v-if="pageLevel == 1||pageLevel == 2||pageLevel == 3">
+                <runTimeRecord></runTimeRecord>
+            </div>
+            <div v-if="pageLevel != 4">
+                <EquipInfo></EquipInfo>
+            </div>
+            <!--单个设备情况-->
+            <div v-if="pageLevel == 4">
+                <SingleEquipInfo></SingleEquipInfo>
+            </div>
+        </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 SingleEquipInfo from '@/components/SingleEquipInfo.vue'
+    import Total from '@/components/Total.vue'
+    import runTimeRecord from '@/components/runTimeRecord.vue'
+
+    export default {
+        data() {
+            return {
+                loadingState: false,
+                pageLevel: 0,//默认查全部
+                regionId: 0,//默认查全部
+                // pageLevel: 1,//当前为楼层
+                // pageLevel: 2,//当前为楼层区域
+                // pageLevel: 3,//当前为房间
+                // pageLevel: 4,//当前为单个设备
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init() {
+                this.loadingState = false;
+            },
+            changPanel(level, btn) {
+                this.BtnId = btn.Id ? btn.Id : 0;
+                if (btn == 0) {
+                    // 首页单独处理
+                    this.pageLevel = 0
+                } else {
+                    this.pageLevel = parseInt(level);
+                }
+            },
+        },
+        components: {
+            Console, WifiSign, Scan, HistoryRecord, EquipInfo, Total, runTimeRecord, SingleEquipInfo
+        }
+    }
+</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;
+        float: left;
+        overflow: hidden;
+        margin-right: 10px;
+    }
+
+    .center {
+        width: 976px;
+        /*height: 906px;*/
+        float: left;
+        overflow: hidden;
+    }
+
+    .rt {
+        width: 452px;
+        float: right;
+        overflow: hidden;
+        margin-right: 0px;
+    }
+
+    .cube {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-bottom: 5px;
+    }
+</style>

src/views/Region.vue

@@ -11,11 +11,9 @@
                 </li>
             </ul>
         </div>
-
-
         <div class="content">
             <div class="tree">
-                    <span class="addMain">
+                    <span class="addMain" @click="addMain">
                         <em>添加主建筑
                         <img src="../assets/img/region/add.png" height="18" width="18"/></em>
                     </span>
@@ -25,21 +23,21 @@
                         node-key="id"
                         default-expand-all
                         :expand-on-click-node="false">
-      <span class="custom-tree-node" slot-scope="{ node, data }">
-        <span>{{ node.label }}</span>
-          <span class="treeIcon">
-          <img src="../assets/img/region/add.png" height="18" width="18"/>
-          <img src="../assets/img/region/edit.png" height="18" width="18"/>
-          <img src="../assets/img/region/del.png" height="18" width="18"/>
-          <img src="../assets/img/region/watch.png" height="18" width="18"/>
-          </span>
-      </span>
+                     <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <span>{{ node.label }}</span>
+                      <span class="treeIcon">
+                      <img src="../assets/img/region/add.png" height="18" width="18" @click="addLoft(node)"/>
+                      <img src="../assets/img/region/edit.png" height="18" width="18"/>
+                      <img src="../assets/img/region/del.png" height="18" width="18"/>
+                      <img src="../assets/img/region/watch.png" height="18" width="18"/>
+                      </span>
+                  </span>
                 </el-tree>
             </div>
             <div class="plate">
                 <div class="loftList" v-if="loftList">
                     <div class="plateTitle">
-                        办公楼
+                        {{plateTitle}}
                     </div>
                     <ul class="list" v-if="false">
                         <li>
@@ -47,8 +45,9 @@
                             <em>1楼</em>
                         </li>
                     </ul>
-                    <div class="plateImg" v-if="true">
-                        <img src="../assets/img/main/RoomBg.png" height="769" width="1396"/></div>
+                    <div class="plateImg" v-if="false">
+                        <img src="../assets/img/main/RoomBg.png" height="769" width="1396"/>
+                    </div>
                 </div>
             </div>
         </div>
@@ -67,9 +66,9 @@
                         </label>
                         <el-input v-model="dialog.name"></el-input>
                     </el-col>
-                    <el-col :span="20">
+                    <el-col :span="20" v-if="dialog_level != 1">
                         <label>
-                            建筑平面图
+                            建筑平面图123
                         </label>
                         <el-upload
                                 action="#"
@@ -118,21 +117,24 @@
 <script>
     import Global from '../Global.js'
     import dialog_referrer_list from '../components/dialog_referrer_list'
+
     export default {
         data() {
             return {
                 // dialog
-                dialog_state: true,
-                dialog_title: '添加设备',
+                dialog_state: false,
+                dialog_title: '',
                 dialog_type: '',//类型，1是添加，2是修改
+                dialog_level: 1,//类型，1是楼（无图），2是楼层（有图），3是会议室（有图）
                 dialog: {
-                    name: 10,
-                    region: 10,
+                    name: '',
+                    region: '',
                     memo: '',
                 },
                 dialogImageUrl: '',
                 dialogVisible: false,
                 disabled: false,
+                plateTitle: '',
                 loftList: [
                     {}
                 ],
@@ -141,10 +143,19 @@
                     children: 'zones'
                 },
                 count: 1,
-                tree: [{
-                    label: '办公楼',
+                tree: []
+            };
+        },
+        mounted() {
+            this.getDate();
+        },
+        methods: {
+            // 获取建筑树列表
+            getDate(){
+                this.tree = [{
+                    label: '1号楼',
                     children: [{
-                        label: '一层',
+                        label: '1号楼1楼',
                         children: [{
                             label: '第一会议室'
                         },
@@ -156,23 +167,47 @@
                             }]
                     }]
                 }, {
-                    label: '档案楼',
-                    children: [{
-                        label: '一层',
-                        children: [{
-                            label: '三级 2-1-1'
-                        }]
-                    }, {
-                        label: '二级 2-2',
-                        children: [{
-                            label: '三级 2-2-1'
-                        }]
-                    }]
-                },
-                ]
-            };
-        },
-        methods: {
+                    label: '2号小平房',
+                    children: []
+                }]
+            },
+            // 添加主建筑
+            addMain() {
+                let that = this;
+                that.dialog_state = true;
+                that.dialog_title = '添加主建筑';
+                that.dialog_type = 1;
+                that.dialog_level = 1;
+            },
+            // 提交主建筑
+            confirmAddMain() {
+                 let that = this;
+                 // checkVal
+                if(!that.dialog.name){
+                    this.$message.error('错了哦，主建筑名称不能空');
+                    return false
+                }
+                if(that.dialog.name.length > 20){
+                    this.$message.error('错了哦，主建筑名称不能超过20个字符');
+                    return false
+                }
+                // ajax todo
+                // ok
+                that.dialog_state = false;
+                that.$message({
+                    message: '主建筑已添加',
+                    type: 'success'
+                });
+            },
+            // 添加次级建筑
+            addLoft(node){
+                let that = this;
+                that.dialog_state = true;
+                that.dialog_title = '添加楼层或区域';
+                that.dialog_type = 1;
+                that.dialog_level = 2;
+                console.log(node);
+            },
             handleCheckChange(data, checked, indeterminate) {
                 console.log(data, checked, indeterminate);
             },
@@ -215,9 +250,19 @@
             },
             dialog_ok() {
                 let that = this;
-                let dialog_type = that.dialog_type;
-                let name = that.field_name;
-                let id = that.field_id;
+                // 获取提交类型
+                switch (parseInt(that.dialog_level)) {
+                    case 1:
+                        that.confirmAddMain();
+                        break;
+                    case 2:
+                        break;
+                    case 3:
+                        break;
+                }
+                // let dialog_type = that.dialog_type;
+                // let name = that.field_name;
+                // let id = that.field_id;
             },
             handleRemove(file) {
                 console.log(file);
@@ -355,6 +400,7 @@
     /deep/ .treeIcon img {
         margin-right: 7px;
     }
+
     .plate {
         width: 1360px;
         min-height: 780px;
@@ -365,6 +411,7 @@
         overflow: hidden;
         border: 1px solid #005EA2;
     }
+
     .plateTitle {
         width: 100%;
         overflow: hidden;
@@ -378,6 +425,7 @@
         text-align: left;
         padding-left: 44px;
     }
+
     .plate ul.list {
         width: 100%;
         overflow: hidden;
@@ -385,6 +433,7 @@
         margin: 0 auto;
         padding: 28px 44px;
     }
+
     .plate .list li {
         width: 157px;
         height: 49px;
@@ -393,14 +442,17 @@
         border: 1px solid #005EA2;
         padding: 13px 0;
     }
+
     .list img {
         display: block;
         margin: 0 auto;
-        margin-bottom:9px;
+        margin-bottom: 9px;
     }
+
     .list em {
         text-align: center;
     }
+
     .plateImg {
         width: 1280px;
         height: 569px;
@@ -409,6 +461,7 @@
         margin: 0 auto;
         /*padding-bottom: 60px;*/
     }
+
     .plateImg img {
         width: 100%;
         height: 100%;