new page ready

src/api/getApiRes.js

@@ -94,7 +94,25 @@ export function RegionDetInfolist(postdata) {
     let url = headapi + 'v1/Company/RegionDetInfolist';
     return getApiBasic(url,postdata);
 }
+// 单个设备检测实时记录
+export function SingleDetInfolist(postdata) {
+    // 单个设备检测实时记录
+    let url = headapi + 'v1/Company/SingleDetInfolist';
+    return getApiBasic(url,postdata);
+}
+// Wifi柱状图信息传入探测器Id
+export function DetectorWifixyInfolist(postdata) {
+    // Wifi柱状图信息
+    let url = headapi + 'v1/Detector/DetectorWifixyInfolist';
+    return getApiBasic(url,postdata);
+}
 
+// Wifi柱状图信息传入区域Id
+export function RegionWifixyInfolist(postdata) {
+    // Wifi柱状图信息
+    let url = headapi + 'v1/Detector/RegionWifixyInfolist';
+    return getApiBasic(url,postdata);
+}
 
 
 

src/components/BigRader.vue

@@ -36,6 +36,9 @@
             totalRs: function (val) {
                 let that = this;
                 this.timeShow = val.RunTime;
+                if(!val.RegionDetRs){
+                    return false
+                }
                 if (val.RegionDetRs[0].WarnNum != 0) {
                     that.RaderState = 1
                 } else {

src/components/EquipInfo.vue

@@ -49,7 +49,7 @@
                         <div class="ringCircle">
                             <Ring></Ring>
                         </div>
-                        <em>{{info.Warninglog_totalcount}}台</em>
+                        <em>{{info.Warninglog_totalcount}}件</em>
                         <span>可疑事件总数</span>
                     </li>
                 </ul>

src/components/Loft.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="Loft">
         <div class="curTitle">
-            2楼平面图
+            {{regionName}}平面图
         </div>
         <div class="loftContainer">
             <div class="loftBg">
@@ -17,6 +17,7 @@
     export default {
         data() {
             return {
+                regionName:'2楼',
                 points: [
                     {name: 'Signal设备01', room: '201', left: '30px', top: '10px',state:1},
                     {name: 'Signal设备02', room: '202', left: '70px', top: '10px',state:1},

src/components/SingleEquipInfo.vue

@@ -11,8 +11,8 @@
             <div class="timePart">
                 <div class="lt">
                     <h5>设备运行时间 <s>EQUIP ACTIVE TIME</s></h5>
-                    <P>{{time}}</P>
-                    <span><s>可疑事件 WARNING EVENT</s>  <em>{{dangerItem}}</em></span>
+                    <P>{{time|fmtDate}}</P>
+                    <span><s>可疑事件 WARNING EVENT</s>  <em>{{dangerItem }}</em></span>
                     <ul>
                         <li>
                             <em>STOP</em>
@@ -34,17 +34,17 @@
                 </div>
                 <div class="rt">
                     <div class="top">
-                        <h5>在线</h5>
-                        <s>ONLINE</s>
+                        <h5>安全</h5>
+                        <s>SAFE</s>
                         <i v-if="state"></i>
                     </div>
                     <div class="middle">
-                        <span>设备运行状态</span>
-                        <s>EQUIP ACTIVE STATE</s>
+                        <span>设备探测结果</span>
+                        <s>DETECT RESULT</s>
                     </div>
                     <div class="bottom">
-                        <h5>离线</h5>
-                        <s>OFFLINE</s>
+                        <h5>可疑</h5>
+                        <s>WARNING</s>
                         <i v-if="!state"></i>
                     </div>
                 </div>
@@ -54,33 +54,54 @@
 </template>
 
 <script>
-    // 数据获取ajax todo
     export default {
         data() {
             return {
                 i: 3,
                 state: true,
                 time: '00:00:00',
-                dangerItem: '46',
+                dangerItem: '0',
             }
         },
-        mounted() {
-            this.timer = setInterval(() => {
-                this.test();
-            }, 1000);
+        props: ['totalRs'],
+        watch: {
+            totalRs: function (val) {
+                let that = this;
+               that.state = val.DetRs.WarnString == '检测安全';
+               that.time =  val.DetRs.Dettime;
+               that.dangerItem =  val.DetRs.WarnNum;
+            },
         },
-        beforeDestroy() {
-            clearInterval(this.timer);
+        filters: {
+            fmtDate: function (value) {
+                console.log(value);
+                if(!value){
+                    return '---';
+                }else{
+                    return value.substr(11,8);
+                }
+            }
         },
+        // mounted() {
+        //     this.timer = setInterval(() => {
+        //         this.test();
+        //     }, 1000);
+        // },
+        // beforeDestroy() {
+        //     clearInterval(this.timer);
+        // },
         methods: {
             test: function () {
                 let house = new Date().getHours();
                 let min = new Date().getMinutes();
                 let sec = new Date().getSeconds();
-               this.time = house + ":" + min + ":" +sec;
-               this.dangerItem =  Math.floor(Math.random()*10) * 2;
-                this.state = Math.floor(Math.random()*2) == 2;
-                this.i = Math.floor(Math.random()*3);
+                house = house > 9 ? house : '0' + house;
+                min = min > 9 ? min : '0' + min;
+                sec = sec > 9 ? sec : '0' + sec;
+                this.time = house + ":" + min + ":" + sec;
+                this.dangerItem = Math.floor(Math.random() * 10) * 2;
+                this.state = Math.floor(Math.random() * 2) == 2;
+                this.i = Math.floor(Math.random() * 3);
             },
         },
     }
@@ -176,7 +197,7 @@
         color: #005EA2;
         text-align: left;
         font-family: UniDreamLED;
-        letter-spacing:8px;
+        letter-spacing: 4px;
     }
 
     .timePart .lt span {
@@ -263,7 +284,10 @@
         float: right;
         width: 15px;
         height: 30px;
-        background: aliceblue;
+        background: linear-gradient(135deg, #fff 25%, #005EA2 0,
+        #005EA2 50%, #fff 0,
+        #fff 75%, #005EA2 0);
+        background-size: 12px 12px;
     }
 
     .rt .middle {
@@ -294,6 +318,8 @@
         display: block;
         margin: 0 auto;
         font-size: 12px;
+        text-align: left;
+        padding-left: 10px;
     }
 
     .rt .bottom {
@@ -335,9 +361,9 @@
         float: right;
         width: 15px;
         height: 30px;
-        background: linear-gradient(135deg,#fff 25%,#005EA2 0,
-        #005EA2 50%,#fff 0,
-        #fff 75%,#005EA2 0);
+        background: linear-gradient(135deg, #fff 25%, #005EA2 0,
+        #005EA2 50%, #fff 0,
+        #fff 75%, #005EA2 0);
         background-size: 12px 12px;
     }
 </style>

src/components/SmallRader.vue

@@ -31,20 +31,21 @@
                 timeShow: ' 00 : 00 : 00'
             }
         },
-        props: ['samllTotalRs'],
-        methods: {
-            // 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
-            //         }
-            //     }
-            // },
-        }
+        props: ['totalRs'],
+        watch: {
+            totalRs: function (val) {
+                let that = this;
+                this.timeShow = val.RunTime;
+                if(!val.RegionDetRs){
+                    return false
+                }
+                if (val.RegionDetRs[0].WarnNum != 0) {
+                    that.RaderState = 1
+                } else {
+                    that.RaderState = 0
+                }
+            },
+        },
     }
 </script>
 

src/components/Watching.vue

@@ -3,7 +3,10 @@
         <ul>
             <li v-for="l in list" :class="{'yellow':l.WarnNum != 0}">
                 <span> {{l.Dettime |fmtDate }}</span>
-                <em>{{l.RegionName}} {{l.WarnString}}</em>
+                <em>
+                    <i v-if="l.RegionName">{{l.RegionName}}</i>
+                    <i v-if="l.DectectorName">{{l.DectectorName}}</i>
+                    {{l.WarnString}}</em>
             </li>
         </ul>
     </div>
@@ -23,6 +26,9 @@
                 let index = 0;
                 let that = this;
                     setTimeout(function () {
+                        if(!word) {
+                            return false
+                        }
                         that.list.unshift(word[index]);
                         index = index + 1 ;
                     }, 300);
@@ -32,7 +38,12 @@
             totalRs: function (val) {
                 let that = this;
                 // 逐行显示
-                that.wordDisplay(val.RegionDetRs);
+                if(val.RegionDetRs){
+                    that.wordDisplay(val.RegionDetRs);
+                }
+                if(val.DetRs){
+                    that.wordDisplay([val.DetRs]);
+                }
             },
         },
         filters: {

src/components/WifiSign.vue

@@ -23,7 +23,7 @@
                 days: 13,
                 loading: true,
                 chartData: {
-                    columns: ['页面', '访问量'],
+                    columns: ['X', 'Y'],
                     rows: [
                         // {'页面': '信道1', '访问量': 123},
                     ]
@@ -68,52 +68,12 @@
                 }
             }
         },
-        mounted() {
-            let that = this;
-            this.timer = setInterval(() => {
-            that.getDate();
-            }, 1600);
-        },
-        methods: {
-            getDate() {
+        props: ['WifiRs'],
+        watch: {
+            WifiRs: function (val) {
                 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({
-                        '页面': "信道" + t,
-                        '访问量': nums,
-                    })
-                }
-
-                let json = {
-                    Rs: item,
-                    Code: 0,
-                    Memo: '登陆成功'
-                };
-
-                // test end
-                          this.chartData.rows = json.Rs;
-                //       } else {
-                //           that.$message.error(json.Memo);
-                //       }
-                //   })
+                that.chartData.rows =  val.Rs;
             },
-            getRandomInt(min, max) {
-                return Math.floor(Math.random() * (max - min + 1)) + min;
-            }
         },
     }
 </script>

src/components/runTimeRecord.vue

@@ -9,9 +9,9 @@
                 实时监测
             </div>
             <ul>
-                <li v-for="l in list">
-                    <span> {{l.time}}</span>
-                    <em>{{l.checkRs}}</em>
+                <li v-for="l in list" :class="{'yellow':l.WarnNum != 0}">
+                    <span> {{l.Dettime|fmtDate}}</span>
+                    <em>{{l.RegionName}} {{l.WarnString}}</em>
                 </li>
             </ul>
         </div>
@@ -20,65 +20,39 @@
 
 <script>
     import {Watching} from '../api/getApiRes.js'
-
-    let qs = require('qs');
     export default {
         data() {
             return {
                 list: [],
             }
         },
-        mounted() {
-            this.getDate();
-            let that = this;
-            this.timer = setInterval(() => {
-                that.getDate();
-            }, 6800);
-        },
-        methods: {
-            getDate() {
+        props: ['totalRs'],
+        watch: {
+            totalRs: function (val) {
                 let that = this;
-                let param = {
-                    token: localStorage.token
-                };
-                let postdata = qs.stringify(param);
-                // Watching(postdata).then(res => {
-                //     let json = res;
-                //     if (json.Code == 0) {
-
-                // test start
-                let item = [];
-                let t =0;
-                let time = "";
-                for (var i = 0; i < 7; i++) {
-                    t = i+1;
-                    time = "12:34:3" + i;
-                    item.push({
-                        'time': time,
-                        'checkRs': "Signal设备"+i+1+"检测完成，206会议室安全",
-                    });
-                }
-
-                let json = {
-                    Rs: item,
-                    Code: 0,
-                    Memo: '登陆成功'
-                };
-                // test end
-
-                that.wordDisplay(json.Rs);
-                // } else {
-                //     that.$message.error(json.Memo);
-                // }
-                // })
+                that.wordDisplay(val.RegionDetRs);
             },
+        },
+        methods: {
             wordDisplay(word) {
                 let index = 0;
                 let that = this;
                 setTimeout(function () {
-                    that.list.push(word[index]);
+                    if(!word) {
+                        return false
+                    }
+                    that.list.unshift(word[index]);
                     index = index + 1 ;
-                }, 600);
+                }, 800);
+            }
+        },
+        filters: {
+            fmtDate: function (value) {
+                if(!value){
+                    return '---';
+                }else{
+                    return value.substr(11,8);
+                }
             }
         }
     }
@@ -123,5 +97,7 @@
         height: 480px;
         margin-left: 0;
     }
-
+     li.yellow {
+        color: #FFDD00;
+    }
 </style>

src/views/Main.vue

@@ -14,7 +14,8 @@
                         <div class="other-people-title">
                             实时监测
                         </div>
-                        <div class="totalContianer" v-if="TotalPanel || LoftPanel">
+                        <!--全局 和 楼栋-->
+                        <div class="totalContianer" v-if="pageLevel == 0 || pageLevel == 1 || pageLevel == 4">
                             <div class="tlt">
                                 <h5>正在监测</h5>
                                 <BigRader :total-rs="totalRs"></BigRader>
@@ -24,25 +25,26 @@
                                 <Watching :total-rs="totalRs"></Watching>
                             </div>
                         </div>
-                        <div class="manageContainer" v-if="managePanel">
+                        <!--楼层-->
+                        <div class="manageContainer" v-if="pageLevel==2">
                             <div class="tlt">
                                 <h5></h5>
-                                <SmallRader :strs="totalRs"></SmallRader>
+                                <SmallRader :total-rs="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="RoomContainer" v-if="pageLevel == 3">
+                            <div class="tlt">
+                                <h5></h5>
+                                <SmallRader :total-rs="totalRs"></SmallRader>
+                            </div>
+                            <div class="trt">
+                                <Room></Room>
+                            </div>
+                        </div>
+                        <!--<div class="DetctorContianer" v-if="pageLevel == 4">-->
                         <!--<div class="tlt">-->
                         <!--<h5>正在监测</h5>-->
                         <!--<BigRader :total-rs="totalRs"></BigRader>-->
@@ -56,23 +58,23 @@
                 </div>
             </div>
             <div class="cube">
-                <WifiSign></WifiSign>
+                <WifiSign :wifi-rs="WifiRs"></WifiSign>
             </div>
             <Scan></Scan>
         </div>
         <div class="mrt">
-            <div class="cube" v-if="pageLevel == 0||pageLevel == 4">
+            <div class="cube" v-if="pageLevel == 0||pageLevel == 1||pageLevel == 4">
                 <HistoryRecord></HistoryRecord>
             </div>
-            <div class="cube" v-if="pageLevel == 1||pageLevel == 2||pageLevel == 3">
-                <runTimeRecord></runTimeRecord>
+            <div class="cube" v-if="pageLevel == 2||pageLevel == 3">
+                <runTimeRecord :total-rs="totalRs"></runTimeRecord>
             </div>
             <div v-if="pageLevel != 4">
                 <EquipInfo></EquipInfo>
             </div>
             <!--单个设备情况-->
             <div v-if="pageLevel == 4">
-                <SingleEquipInfo></SingleEquipInfo>
+                <SingleEquipInfo :total-rs="totalRs"></SingleEquipInfo>
             </div>
         </div>
     </div>
@@ -91,7 +93,12 @@
     import Watching from '@/components/Watching.vue'
     import Loft from '@/components/Loft.vue'
     import Room from '@/components/Room.vue'
-    import {RegionDetInfolist} from '../api/getApiRes.js'
+    import {
+        RegionDetInfolist,
+        SingleDetInfolist,
+        DetectorWifixyInfolist,
+        RegionWifixyInfolist
+    } from '../api/getApiRes.js'
 
     let qs = require('qs');
     export default {
@@ -100,12 +107,14 @@
                 loadingState: false,
                 pageLevel: 0,//操作层级 默认0查 全部 层级
                 regionId: 0,//默认查全部
+                detectorId: 0,//无默认设备
                 TotalPanel: true,//总控
                 LoftPanel: false,//楼层
                 managePanel: false,//区域
                 RoomPanel: false,//房间
                 DetctorPanel: false,//设备
                 totalRs: [],
+                WifiRs: [],
                 // pageLevel: 1,//当前为楼层
                 // pageLevel: 2,//当前为楼层区域
                 // pageLevel: 3,//当前为房间
@@ -120,7 +129,7 @@
             // 定时查询
             that.timer = setInterval(() => {
                 that.getDate();
-            }, 2800);
+            }, 5000);
         },
         destroyed() {
             //页面销毁时清除定时器
@@ -132,6 +141,7 @@
             changPanel(level, btn) {
                 let that = this;
                 this.regionId = btn.Id ? btn.Id : 0;
+                this.detectorId = btn.Id ? btn.Id : 0;
                 if (btn == 0) {
                     // 首页单独处理
                     this.pageLevel = 0
@@ -143,17 +153,29 @@
             // 根据层级和地区ID调用不同的Ajax接口
             getDate() {
                 let that = this;
+                // 非设备层级
                 if (that.pageLevel != 4) {
-                    // 非设备层级
                     let param = {
                         token: localStorage.token,
                         regionId: this.regionId
                     };
                     let postdata = qs.stringify(param);
+                    // wifi柱状图信息传入区域Id
+                    that.getRegionWifixyInfolist(postdata);
+                    // 区域检测实时记录
                     that.getRegionDetInfolist(postdata);
                 } else {
                     // 单个设备层级
                     // todo
+                    let param = {
+                        token: localStorage.token,
+                        detectorId: this.detectorId
+                    };
+                    let postdata = qs.stringify(param);
+                    // Wifi柱状图信息传入探测器Id
+                    that.getDetectorWifixyInfolist(postdata);
+                    // 单个设备检测实时记录
+                    that.getSingleDetInfolist(postdata);
                 }
             },
             getRegionDetInfolist(postdata) {
@@ -167,6 +189,17 @@
                     }
                 })
             },
+            getSingleDetInfolist(postdata) {
+                let that = this;
+                SingleDetInfolist(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;
@@ -174,6 +207,31 @@
                     that.list.unshift(word[index]);
                     index = index + 1;
                 }, 300);
+            },
+
+            // Wifi柱状图信息传入探测器Id
+            getDetectorWifixyInfolist(postdata) {
+                let that = this;
+                DetectorWifixyInfolist(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.WifiRs = json;
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
+            },
+            // Wifi柱状图信息传入区域Id
+            getRegionWifixyInfolist(postdata) {
+                let that = this;
+                RegionWifixyInfolist(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.WifiRs = json;
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
             }
         },
         components: {