基础

src/Mock/index.js

@@ -1,4 +1,5 @@
 import Mock from 'mockjs'
+import global from '../Global.js'
 
 // worldDetail
 let worldDetail = function () {
@@ -6,7 +7,7 @@ let worldDetail = function () {
     for (var i = 0; i < 30; i++) {
         item.push({
             "id": "@guid",
-            "name": "@region",
+            "Name": "@region",
             "Confirmed": "@integer(36844, 368449)",
             "Deaths": "@integer(1099, 10993)",
             "Recovered": "@integer(1986, 19865)",
@@ -64,7 +65,7 @@ let getLoftInfo = function () {
     for (var i = 0; i < 6; i++) {
         item.push({
             loftId: "@id",
-            name: "@county",
+            Name: "@region",
         })
     }
 
@@ -77,9 +78,9 @@ let getLoftInfo = function () {
 };
 let wifiSingle = function () {
     let item = [];
-    let t =0;
+    let t = 0;
     for (var i = 0; i < 13; i++) {
-        t = i+1;
+        t = i + 1;
         item.push({
             '页面': "信道" + t,
             '访问量': "@integer(301,600)",
@@ -95,9 +96,9 @@ let wifiSingle = function () {
 };
 let Scan = function () {
     let item = [];
-    let t =0;
+    let t = 0;
     for (var i = 0; i < 13; i++) {
-        t = i+1;
+        t = i + 1;
         item.push({
             '页面': t + ".0M",
             '访问量': "@integer(301,600)",
@@ -113,9 +114,9 @@ let Scan = function () {
 };
 let Watching = function () {
     let item = [];
-    let t =0;
+    let t = 0;
     for (var i = 0; i < 9; i++) {
-        t = i+1;
+        t = i + 1;
         item.push({
             'time': "@date",
             'checkRs': "Signal设备03@integer(301,600)检测完成，206会议室安全",
@@ -130,15 +131,15 @@ let Watching = function () {
     return res;
 };
 
-// Mock.mock('/api/worldDetail', 'post', worldDetail());
-// Mock.mock('/api/SignIn', 'post', SignIn());//用户登录
-// Mock.mock('/api/editbasicinfo', 'post', editbasicinfo());//用户设置修改
-// Mock.mock('/api/modPwd', 'post', modPwd());//密码修改
-// Mock.mock('/api/logout', 'post', logout());//退出登陆
-// Mock.mock('/api/getLoftInfo', 'post', getLoftInfo());//楼层获取
-// Mock.mock('/api/wifiSingle', 'post', wifiSingle());//
-// Mock.mock('/api/Scan', 'post', Scan());//
-// Mock.mock('/api/Watching', 'post', Watching());//
+Mock.mock('/api/worldDetail', 'post', worldDetail());
+Mock.mock('/api/SignIn', 'post', SignIn());//用户登录
+Mock.mock('/api/editbasicinfo', 'post', editbasicinfo());//用户设置修改
+Mock.mock('/api/modPwd', 'post', modPwd());//密码修改
+Mock.mock('/api/logout', 'post', logout());//退出登陆
+Mock.mock(headapi + 'getLoftInfo', 'post', getLoftInfo());//楼层获取
+Mock.mock('/api/wifiSingle', 'post', wifiSingle());//
+Mock.mock('/api/Scan', 'post', Scan());//
+Mock.mock('/api/Watching', 'post', Watching());//
 
 // 业务类
 

src/components/BigRader.vue

@@ -1,26 +1,35 @@
 <template>
     <div class="BigRader">
-        <div class="circle">
-            <div class="zoom1 bn "></div>
-            <div class="zoom2 dn top"></div>
-            <div class="zoom3 bn top1"></div>
-            <div class="zoom31 cn top2"></div>
-            <div class="zoom4 cn top3"></div>
-            <div class="zoom5  dn top4"></div>
-            <div class="zoom51 an top5"></div>
-            <div class="zoom52 dn top6"></div>
-            <div class="zoom6     top7"></div>
-            <div class="zoom62 cn top8"></div>
-            <div class="zoom7 dn top9"></div>
-        </div>
-
-
-        <div class="zoom8" v-if="RaderState == 0">
-            <span class="status">环境安全</span>
-        </div>
-        <div class="zoom9" v-if="RaderState > 0">
-            <img src="../assets/img/main/waning.png" alt="">
-            <span class="warning">发现可疑信号</span>
+        <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="circle">
+                <div class="zoom1 bn "></div>
+                <div class="zoom2 dn top"></div>
+                <div class="zoom3 bn top1"></div>
+                <div class="zoom31 cn top2"></div>
+                <div class="zoom4 cn top3"></div>
+                <div class="zoom5  dn top4"></div>
+                <div class="zoom51 an top5"></div>
+                <div class="zoom52 dn top6"></div>
+                <div class="zoom6     top7"></div>
+                <div class="zoom62 cn top8"></div>
+                <div class="zoom7 dn top9"></div>
+            </div>
+
+
+            <div class="zoom8" v-if="RaderState == 0">
+                <span class="status">环境安全</span>
+            </div>
+            <div class="zoom9" v-if="RaderState > 0">
+                <img src="../assets/img/main/waning.png" alt="">
+                <span class="warning">发现可疑信号</span>
+            </div>
         </div>
     </div>
 </template>
@@ -51,14 +60,20 @@
 
 <style scoped>
     .BigRader {
-        width: 439px;
-        height: 410px;
+        width: 350px;
+        height: 350px;
         overflow: hidden;
         display: block;
         /*background: rgba(27, 86, 200, 0.14);*/
         /*border: 1px solid #005EA2;*/
     }
-
+    /deep/ .other-people {
+        width: 98%;
+        height: 342px;
+        margin-left: 0;
+        padding: 0;
+        padding-right: 5px;
+    }
     .zoom1 {
         width: 349px;
         height: 349px;
@@ -216,6 +231,7 @@
         background-repeat: no-repeat;
         background-size: 100%
     }
+
     .circle {
         width: 100%;
         height: 349px;

src/components/Detecter.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="detecter">
+        <div class="other-people">
+            <div class="image-border image-border1"></div>
+            <div class="image-border image-border2"></div>
+            <div class="image-border image-border3"></div>
+            <div class="image-border image-border4"></div>
+            <div class="regionList">
+                <div class="other-people-title">
+                    探测设备列表
+                </div>
+                <ul>
+                    <el-row :gutter="21">
+                        <el-col :span="8" v-for="(region,i) in regionList">
+                            <div :class="[{'regionItem':true},{'active':loftIndex == i }]" @click="handleSelect(i)">
+                                <div class="grid-content bg-purple"> {{region.Name}}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                loftIndex: 0,
+                navs: [],
+            }
+        },
+        props: ['regionList'],
+        methods: {
+            handleSelect(i) {
+                this.loftIndex = parseInt(i);
+                this.$emit('ClickGetInfo', i);//触发事件
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .detecter {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    /deep/ .other-people {
+        width: 350px;
+        height: 142px;
+        margin-left: 0;
+        padding: 0;
+        padding-right: 5px;
+    }
+    ul {
+        width: 90%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 50px;
+    }
+    .regionItem {
+        border: 1px solid #6DC1FF;
+        color: #6DC1FF;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        margin-bottom: 8px;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+    .regionItem.active {
+        background: #6DC1FF;
+        color: #fff;
+    }
+</style>

src/components/HistoryRecord.vue

@@ -169,7 +169,7 @@
 
     .other-people {
         width: 439px;
-        height: 480px;
+        height: 240px;
         margin-left: 0;
     }
 

src/components/Region.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="region">
+        <div class="other-people">
+            <div class="image-border image-border1"></div>
+            <div class="image-border image-border2"></div>
+            <div class="image-border image-border3"></div>
+            <div class="image-border image-border4"></div>
+            <div class="regionList">
+                <div class="other-people-title">
+                    监控区域列表
+                </div>
+                <ul>
+                    <el-row :gutter="21">
+                        <el-col :span="8" v-for="(region,i) in regionList">
+                            <div :class="[{'regionItem':true},{'active':loftIndex == i }]" @click="handleSelect(i)">
+                                <div class="grid-content bg-purple"> {{region.Name}}</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                loftIndex: 0,
+                navs: [],
+            }
+        },
+        props: ['regionList'],
+        methods: {
+            handleSelect(i) {
+                this.loftIndex = parseInt(i);
+                this.$emit('ClickGetInfo', i);//触发事件
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .region {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    /deep/ .other-people {
+        width: 350px;
+        height: 142px;
+        margin-left: 0;
+        padding: 0;
+        padding-right: 5px;
+    }
+    ul {
+        width: 90%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 50px;
+    }
+    .regionItem {
+        border: 1px solid #6DC1FF;
+        color: #6DC1FF;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        margin-bottom: 8px;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+    .regionItem.active {
+        background: #6DC1FF;
+        color: #fff;
+    }
+</style>

src/components/Task.vue

@@ -1,20 +1,97 @@
 <template>
     <div class="Task">
-        <el-row>
-            <el-col :span="24">
-                <el-col :span="6"><em>XXXX</em></el-col>
-                <el-col :span="18">
-                    <el-select v-model="value" placeholder="请选择">
-                        <el-option
-                                v-for="item in options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
-                        </el-option>
-                    </el-select>
-                </el-col>
-            </el-col>
-        </el-row>
+        <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="regionList">
+                <el-row>
+                    <el-col :span="24">
+                        <el-col :span="6"><em class="label">XXXX</em></el-col>
+                        <el-col :span="18">
+                            <el-select v-model="value" placeholder="请选择">
+                                <el-option
+                                        v-for="item in options"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-col>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-col :span="6"><em class="label">XXXX</em></el-col>
+                        <el-col :span="18">
+                            <el-select v-model="value" placeholder="请选择">
+                                <el-option
+                                        v-for="item in options"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-col>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-col :span="6"><em class="label">XXXX</em></el-col>
+                        <el-col :span="18">
+                            <el-select v-model="value" placeholder="请选择">
+                                <el-option
+                                        v-for="item in options"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-col>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-col :span="6"><em class="label">XXXX</em></el-col>
+                        <el-col :span="18">
+                            <el-select v-model="value" placeholder="请选择">
+                                <el-option
+                                        v-for="item in options"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-col>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-col :span="6"><em class="label_checked">
+                            <el-checkbox v-model="checked">信号录制</el-checkbox>
+                        </em></el-col>
+                        <el-col :span="18">
+                            <el-button type="primary" size="small">开始扫码</el-button>
+                        </el-col>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-col :span="6"><em class="label">XXXX</em></el-col>
+                        <el-col :span="18">
+                         <span class="label_text">   2021-01-04 19:54:12</span>
+                        </el-col>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-col :span="6"><em class="label">XXXX</em></el-col>
+                        <el-col :span="18">
+                            <span class="label_text">   2021-01-04 19:54:12</span>
+                        </el-col>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-col :span="6"><em class="label">XXXX</em></el-col>
+                        <el-col :span="18">
+                            <span class="label_text">   2021-01-04 19:54:12</span>
+                        </el-col>
+                    </el-col>
+                </el-row>
+
+            </div>
+        </div>
     </div>
 </template>
 
@@ -22,6 +99,7 @@
     export default {
         data() {
             return {
+                checked: true,
                 options: [{
                     value: '选项1',
                     label: '黄金糕'
@@ -45,5 +123,64 @@
 </script>
 
 <style scoped>
+    .Task {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    /deep/ .other-people {
+        width: 350px;
+        height: 472px;
+        margin-left: 0;
+        padding: 0;
+        padding-right: 5px;
+    }
+
+    .regionList {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 50px;
+        color: #6DC1FF;
+    }
+
+    .regionList .label {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        line-height: 40px;
+        text-align: right;
+    }
 
+    .regionList /deep/ .el-input__inner {
+        background-color: #000;
+        border: 1px solid #6DC1FF;
+        color: #6DC1FF;
+    }
+    /deep/ .el-col {
+        margin-bottom: 6px;
+
+    }
+    .label_checked {
+        margin-left: 45px;
+        line-height: 40px;
+    }
+
+    .regionList button {
+        float: right;
+        margin-right: 25px;
+    }
+    .label_text {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        line-height: 40px;
+        text-align: left;
+        text-indent: 10px;
+    }
 </style>

src/components/signMap.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="signMap">
+        <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>
+    </div>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style scoped>
+    .signMap {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    /deep/ .other-people {
+        width: 98%;
+        height: 342px;
+        margin-left: 0;
+        padding: 0;
+        padding-right: 5px;
+    }
+</style>

src/views/Index.vue

@@ -173,25 +173,13 @@
         /*overflow: hidden;*/
     }
 
-    .indexContainer {
-        /*width: 97%;*/
-        position: absolute;
-        float: right;
-        right: 0;
-        left: 55px;
-        top: 60px;
-    }
-
     .indexContainer {
         position: absolute;
         top: 60px;
-        left: 45px;
-        /*right: 10px;*/
+        left: 70px;
         bottom: 3px;
-        /*width: 100%;*/
-        /*height: 100%;*/
-        /*max-height: 850px;*/
-        /*overflow-y: scroll;*/
+        width: 96%;
+        overflow: visible;
     }
 
     .el-main::-webkit-scrollbar { /*滚动条整体样式*/

src/views/Main.vue

@@ -2,31 +2,38 @@
     <div class="mainContainer">
         <div class="lt">
             <div class="cube">
-                <!--h5区域-->
-                <div class="regionList">
-                    <ul>
-                        <el-row :gutter="21">
-                            <el-col :span="8" v-for="(loft,i) in loftList">
-                                <div :class="[{'active':loftIndex == i+1 }]" @click="ClickGetInfo(1,i)">
-                                    <div class="grid-content bg-purple"> {{loft.Name}}</div>
-                                </div>
-                            </el-col>
-                        </el-row>
-                    </ul>
-                </div>
+                <Region :region-list="regionList"></Region>
+            </div>
+            <br>
+            <div class="cube">
+                <Detecter :region-list="regionList"></Detecter>
             </div>
+            <br>
             <div class="cube">
                 <Task></Task>
             </div>
         </div>
         <div class="md">
+            <div class="cube">
+                <signMap></signMap>
+            </div>
+            <br>
             <div class="cube">
                 <WifiSign :wifi-rs="WifiRs"></WifiSign>
             </div>
+            <br>
             <Scan :scan-rs="ScanRs"></Scan>
         </div>
         <div class="rt">
-            <SmallRader :total-rs="totalRs"></SmallRader>
+            <div class="cube">
+                <BigRader :total-rs="totalRs"></BigRader>
+            </div>
+            <br>
+            <transition name="el-zoom-in-center">
+                <div class="cube">
+                    <HistoryRecord :history-rs="historyRs"></HistoryRecord>
+                </div>
+            </transition>
             <transition name="el-zoom-in-center">
                 <div class="cube">
                     <HistoryRecord :history-rs="historyRs"></HistoryRecord>
@@ -37,58 +44,63 @@
 </template>
 
 <script>
-    import Console from '@/components/Console.vue'
+    import signMap from '@/components/signMap.vue'
+    import Region from '@/components/Region.vue'
+    import Detecter from '@/components/Detecter.vue'
     import Task from '@/components/Task.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 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 {
+        getLoftInfo,
         RegionDetInfolist,
-        SingleDetInfolist,
-        DetectorWifixyInfolist,
-        RegionWifixyInfolist,
-        Detector06GInfolist,
-        LogWifiDetectedQueryByDetector,
-        GetStaticinfo,
-        LogFullDetectedQueryByDetector,
-        RegionPictureGetByRegionId,
-        GetRegiononeinfo,
-        GetRegionplaneinfo,
-        RegionDetDetaillist,
-        SingleDetDetaillist,
-        Region06GInfolist,
     } from '../api/getApiRes.js'
 
     let qs = require('qs');
     export default {
         data() {
             return {
-                WifiRs:[],
-                ScanRs:[],
-                historyRs:[],
-                totalRs:[],
-                equipRs:[],
-                loftList:[],
-                loftIndex:0,
+                WifiRs: [],
+                ScanRs: [],
+                historyRs: [],
+                totalRs: [],
+                equipRs: [],
+                regionList: [],
             }
         },
-        mounted(){
-
+        mounted() {
+            this.init()
+        },
+        watch: {
+            '$route': function (val) {
+                if (val.path == '/') {
+                    this.init()
+                }
+            },
         },
-        methods:{
-            init(){
+        methods: {
+            init() {
                 this.getDate()
             },
-            getDate(){
-
+            getDate() {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                };
+                let postdata = qs.stringify(param);
+                that.regionList = [];
+                getLoftInfo(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        console.log(json);
+                        that.regionList = json.Rs
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
             },
             // Wifi柱状图信息传入探测器Id
             getDetectorWifixyInfolist(postdata) {
@@ -102,40 +114,51 @@
                     }
                 })
             },
-            ClickGetInfo(level, index){
-                this.loftIndex = parseInt(index);
+            ClickGetInfo(index) {
+
             }
         },
         components: {
+            signMap,
+            Region,
+            Detecter,
             WifiSign,
             Scan,
             HistoryRecord,
             EquipInfo,
             runTimeRecord,
             Task,
-            SmallRader,
+            BigRader,
         }
     }
 </script>
 
 <style scoped>
+    @import "../assets/css/cube.css";
+
     .mainContainer {
         width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
     }
+
     .mainContainer .lt {
-        width: 30%;
+        width: 20%;
         float: left;
     }
+
     .mainContainer .md {
-        width: 40%;
+        width: 50%;
         float: left;
     }
+
     .mainContainer .rt {
         width: 30%;
         float: right;
     }
+    .rt .cube {
+        float: right;
+    }
 
 </style>

vue.config.js

@@ -5,7 +5,6 @@ module.exports = {
         proxy: {
             '/api': {
                 target: 'http://192.168.0.3:19082/',
-                // target: 'http://192.168.0.165:19082/',
                 changeOrigin: true,
                 pathRewrite: {
                     '^/api': '',