样式暂存

src/api/getApiRes.js

@@ -82,269 +82,42 @@ export function SignOut(postdata) {
     return getApiBasic(url, postdata);
 }
 
-// 获取首页左侧组织结构信息
-export function GetRegionAndDectorSelect(postdata) {
-    let url = headapi + 'v1/Auth/GetRegionAndDectorSelect';
-    return getApiBasic(url, postdata);
-}
-
-// 获取统计数量集合
-export function GetStaticinfo(postdata) {
-    // 获取统计数量集合，包括获取设备总数，在线设备，离线设备，禁用设备，当日报警数量，可疑事件总数
-    let url = headapi + 'v1/Company/GetStaticinfo';
-    return getApiBasic(url, postdata);
-}
-
-// 区域检出实时记录
-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);
-}
-
-
-// 0-6G折线图信息传入设备Id
-export function Detector06GInfolist(postdata) {
-    // 6G折线图信息传入设备Id
-    let url = headapi + 'v1/Detector/Detector06GInfolist';
-    return getApiBasic(url, postdata);
-}
+// Region
 
 // 添加区域
 export function RegionAdd(postdata) {
-    // 添加区域 第一级区域填0
-    let url = headapi + 'v1/Company/RegionAdd';
+    let url = headapi + 'v1/Region/Add';
     return getApiBasic(url, postdata);
 }
 
-// 修改区域信息
-export function RegionEdit(postdata) {
-    // 修改区域 第一级区域填0
-    let url = headapi + 'v1/Company/RegionEdit';
+// 区域详情
+export function RegionDetail(postdata) {
+    let url = headapi + 'v1/Region/Detail';
     return getApiBasic(url, postdata);
 }
 
-// 修改区域状态
-export function RegionStatusEdit(postdata) {
-    // 修改内部区域状态设置为 9删除
-    let url = headapi + 'v1/Company/RegionStatusEdit';
+// 区域列表
+export function RegionList(postdata) {
+    let url = headapi + 'v1/Region/List';
     return getApiBasic(url, postdata);
 }
 
-// 区域图片上传
-export function RegionPictureUpload(postdata) {
-    // 上传区域图片
-    let url = headapi + 'v1/Company/RegionPictureUpload';
-    return getApiBasic(url, postdata);
-}
-
-// 查询信号 Wifi记录
-export function LogWifiDetectedQueryByDetector(postdata) {
-    // 查询检测设备的Wifi信号记录
-    let url = headapi + 'v1/Detector/LogWifiDetectedQueryByDetector';
-    return getApiBasic(url, postdata);
-}
-
-// 查询手机信号记录
-export function LogPhoneDetectedQueryByDetector(postdata) {
-    // 查询手机信号记录
-    let url = headapi + 'v1/Detector/LogPhoneDetectedQueryByDetector';
-    return getApiBasic(url, postdata);
-}
-
-// 获取单个区域信息
-export function GetRegiononeinfo(postdata) {
-    // 获取单个区域信息
-    let url = headapi + 'v1/Company/GetRegiononeinfo';
-    return getApiBasic(url, postdata);
-}
-// 区域平面图用到的单条区域信息
-export function GetRegionplaneinfo(postdata) {
-    // 区域平面图用到的单条区域信息
-    let url = headapi + 'v1/Company/GetRegionplaneinfo';
-    return getApiBasic(url, postdata);
-}
-
-// 获取企业内部区域选择框信息
-export function GetRegionSelect(postdata) {
-    // 根据企业id获取企业内部区域选择框信息 default:1
-    let url = headapi + 'v1/Auth/GetRegionSelect';
-    return getApiBasic(url, postdata);
-}
-
-// Detector part
-
-// 查询检测设备信息
-export function DetectorQuery(postdata) {
-    // 查询检测设备。上级区域id，区域id必传。regionid传0，查询supregionid对应所有子区域的检测设备。 如果supregionid，regionid都传0，默认查询企业ID下所有检测设备
-    let url = headapi + 'v1/Detector/DetectorQuery';
-    return getApiBasic(url, postdata);
-}
+// Detector
 
 // 添加检测设备
 export function DetectorAdd(postdata) {
-    // 添加检测设备
-    let url = headapi + 'v1/Detector/DetectorAdd';
-    return getApiBasic(url, postdata);
-}
-
-// 修改检测设备信息
-export function DetectorEdit(postdata) {
-    // 添加检测设备
-    let url = headapi + 'v1/Detector/DetectorEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 修改检测设备状态
-export function DetectorEditStatus(postdata) {
-    // 修改检测设备状态  //新状态0禁用1启用2已离线9删除
-    let url = headapi + 'v1/Detector/DetectorEditStatus';
-    return getApiBasic(url, postdata);
-}
-
-// 通过RegionId下载区域图片
-export function RegionPictureGetByRegionId(postdata) {
-    // 通过RegionId下载区域图片
-    let url = headapi + 'v1/Company/RegionPictureGetByRegionId';
-    return getApiBasic(url, postdata);
-}
-
-// 获取下级区域选择框信息
-export function GetChildRegionSelect(postdata) {
-    // 获取下级区域选择框信息
-    let url = headapi + 'v1/Auth/GetChildRegionSelect';
-    return getApiBasic(url, postdata);
-}
-
-// 修改密码
-export function PassEdit(postdata) {
-    // 修改密码
-    let url = headapi + 'v1/Auth/PassEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 获取最新固件版本
-export function GetLastVerionFirmwareinfo(postdata) {
-    // 获取最新固件版本
-    let url = headapi + 'v1/AdminSettings/GetLastVerionFirmwareinfo';
-    return getApiBasic(url, postdata);
-}
-
-// 添加固件
-export function FirmwareAdd(postdata) {
-    // 添加固件
-    let url = headapi + 'v1/AdminSettings/FirmwareAdd';
-    return getApiBasic(url, postdata);
-}
-
-// 查询所有信号记录，包含手机信号和Wifi信号
-export function LogFullDetectedQueryByDetector(postdata) {
-    // 查询所有信号记录，包含手机信号和Wifi信号
-    let url = headapi + 'v1/Detector/LogFullDetectedQueryByDetector';
-    return getApiBasic(url, postdata);
-}
-
-// 获取二维码信息列表
-export function GetQrcodeList(postdata) {
-    // 获取二维码信息列表
-    let url = headapi + 'v1/Detector/GetQrcodeList';
-    return getApiBasic(url, postdata);
-}
-
-// 添加二维码
-export function QrCodeAdd(postdata) {
-    // 添加二维码
-    let url = headapi + 'v1/Detector/QrCodeAdd';
-    return getApiBasic(url, postdata);
-}
-// 修改二维码
-export function QrCodeEdit(postdata) {
-    // 修改二维码
-    let url = headapi + 'v1/Detector/QrCodeEdit';
-    return getApiBasic(url, postdata);
-}
-// 修改二维码状态
-export function QrcodeEditStatus(postdata) {
-    // 修改二维码状态
-    let url = headapi + 'v1/Detector/QrcodeEditStatus';
-    return getApiBasic(url, postdata);
-}
-// 某二维码下实时探测情况
-export function DeviceInfoByQrCodeId(postdata) {
-    // 某二维码下实时探测情况
-    let url = headapi + 'v1/Detector/DeviceInfoByQrCodeId';
-    return getApiBasic(url, postdata);
-}
-// 通过Key下载二维码对应图片
-export function QrcodePictureGet(postdata) {
-    // 通过Key下载二维码对应图片
-    let url = headapi + 'v1/Detector/QrcodePictureGet';
-    return getApiBasic(url, postdata);
-}
-// 获取检测设备坐标
-export function GetDetectorCoords(postdata) {
-    // 获取检测设备坐标
-    let url = headapi + 'v1/Detector/GetDetectorCoords';
-    return getApiBasic(url, postdata);
-}
-// 获取全部区域选择框信息
-export function GeFullRegionSelect(postdata) {
-    // 获取检测设备坐标
-    let url = headapi + 'v1/Auth/GeFullRegionSelect';
-    return getApiBasic(url, postdata);
-}
-// 区域检测实时记录合并
-export function RegionDetDetaillist(postdata) {
-    let url = headapi + 'v1/Company/RegionDetDetaillist';
-    return getApiBasic(url, postdata);
-}
-
-// 单个设备检测实时记录合并
-export function SingleDetDetaillist(postdata) {
-    let url = headapi + 'v1/Company/SingleDetDetaillist';
-    return getApiBasic(url, postdata);
-}
-// 0-6G折线图信息传入区域Id
-export function Region06GInfolist(postdata) {
-    let url = headapi + 'v1/Detector/Region06GInfolist';
-    return getApiBasic(url, postdata);
-}
-
-// 加入白名单
-export function WhiteListAdd(postdata) {
-    let url = headapi + 'v1/Detector/WhiteListAdd';
+    let url = headapi + 'v1/Detector/Add';
     return getApiBasic(url, postdata);
 }
 
-// 白名单中移除设备
-export function RemoveFromWhiteList(postdata) {
-    let url = headapi + 'v1/Detector/RemoveFromWhiteList';
+// 检测设备详情
+export function DetectorDetail(postdata) {
+    let url = headapi + 'v1/Detector/Detail';
     return getApiBasic(url, postdata);
 }
 
-// 白名单列表查询
-export function WhiteListQuery(postdata) {
-    let url = headapi + 'v1/Detector/WhiteListQuery';
+// 检测设备列表
+export function DetectorList(postdata) {
+    let url = headapi + 'v1/Detector/List';
     return getApiBasic(url, postdata);
 }

src/components/BigRader.vue

@@ -1,12 +1,8 @@
 <template>
     <div class="BigRader">
-        <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 class="">
+            <div class="sum-title">
+                区域安全状态
             </div>
             <div class="circle">
                 <div class="zoom1 bn "></div>
@@ -21,15 +17,17 @@
                 <div class="zoom62 cn top8"></div>
                 <div class="zoom7 dn top9"></div>
             </div>
-
-
             <div class="zoom8" v-if="RaderState == 0">
-                <span class="status">环境安全</span>
+                <img src="../assets/img/bigRadar2/safe.png" height="47" width="40"/><span class="status">环境安全</span>
             </div>
-            <div class="zoom9" v-if="RaderState > 0">
+            <div class="zoom9" v-if="RaderState == 1">
                 <img src="../assets/img/main/waning.png" alt="">
                 <span class="warning">发现可疑信号</span>
             </div>
+            <div class="zoom10" v-if="RaderState == 2">
+                <img src="../assets/img/main/danger.png" alt="">
+                <span class="warning">发现高危信号</span>
+            </div>
         </div>
     </div>
 </template>
@@ -39,7 +37,7 @@
         data() {
             return {
                 seconds: 0,
-                RaderState: 0,
+                RaderState: 2,
                 timeShow: ' 00 : 00 : 00',
                 dotLists: [],
             }
@@ -60,23 +58,32 @@
 
 <style scoped>
     .BigRader {
-        width: 350px;
-        height: 350px;
+        width: 100%;
+        height: 270px;
         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;
+
+    .sum-title {
+        width: 150px;
+        height: 36px;
+        font-size: 16px;
+        line-height: 36px;
+        color: #6DC1FF;
+        margin: 0 auto;
+        text-align: center;
+        background: url("../assets/img/main/tit.png") top center no-repeat;
+        background-size: 100%;
     }
+
+    .histogram {
+        position: relative;
+        top: -40px;
+    }
+
     .zoom1 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -88,8 +95,8 @@
     }
 
     .zoom2 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -100,8 +107,8 @@
     }
 
     .zoom3 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -112,8 +119,8 @@
     }
 
     .zoom4 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -124,8 +131,8 @@
     }
 
     .zoom5 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -136,8 +143,8 @@
     }
 
     .zoom6 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -149,8 +156,8 @@
 
 
     .zoom21 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -161,8 +168,8 @@
     }
 
     .zoom31 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -173,8 +180,8 @@
     }
 
     .zoom32 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -185,8 +192,8 @@
     }
 
     .zoom51 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -197,8 +204,8 @@
     }
 
     .zoom52 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -209,8 +216,8 @@
     }
 
     .zoom62 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -221,8 +228,8 @@
     }
 
     .zoom7 {
-        width: 349px;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -233,8 +240,8 @@
     }
 
     .circle {
-        width: 100%;
-        height: 349px;
+        width: 205px;
+        height: 205px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
@@ -242,63 +249,101 @@
 
     .zoom8 {
         position: relative;
-        bottom: 349px;
-        width: 349px;
-        height: 349px;
+        bottom: 175px;
+        width: 200px;
+        height: 200px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
         background: url("../assets/img/bigRadar2/8.png");
         background-position: top center;
         background-repeat: no-repeat;
-        background-size: 100%;
-        color: #fff;
+        background-size: 100% 100%;
+        color: #72FF99;
         text-align: center;
         font-size: 14px;
     }
 
+    .zoom8 img {
+        margin: 0 auto;
+        margin-top: 50px;
+        overflow: hidden;
+        display: block;
+    }
+
+    .zoom8 .status {
+        margin: 0 auto;
+        font-size: 14px;
+        text-align: center;
+    }
+
     .zoom9 {
         position: relative;
-        bottom: 349px;
-        width: 349px;
-        height: 349px;
+        bottom: 175px;
+        width: 200px;
+        height: 200px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
         background: url("../assets/img/bigRadar2/9.png");
         background-position: top center;
         background-repeat: no-repeat;
-        background-size: 100%;
-        color: #fff;
+        background-size: 100% 100%;
+        color: #FFE853;
         text-align: center;
         font-size: 14px;
     }
+    .zoom9 img {
+        margin: 0 auto;
+        margin-top: 50px;
+        overflow: hidden;
+        display: block;
+    }
 
-    .status {
-        width: 60px;
+    .zoom9 .status {
+        margin: 0 auto;
+        font-size: 14px;
+        text-align: center;
+    }
+    .zoom10 {
+        position: relative;
+        bottom: 175px;
+        width: 200px;
+        height: 200px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        margin-top: 140px;
-        font-size: 28px;
+        background: url("../assets/img/bigRadar2/10.png");
+        background-position: top center;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        color: #FF6B6B;
+        text-align: center;
+        font-size: 14px;
     }
-
-    .zoom9 img {
+    .zoom10 img {
+        margin: 0 auto;
+        margin-top: 50px;
         overflow: hidden;
         display: block;
+    }
+
+    .zoom10 .status {
         margin: 0 auto;
-        margin-top: 140px;
+        font-size: 14px;
+        text-align: center;
     }
 
-    .zoom9 .warning {
-        width: 100%;
+    .status {
+        width: 60px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        color: #FFDD00;
-        font-size: 14px;
+        margin-top: 140px;
+        font-size: 28px;
     }
 
+
     @-webkit-keyframes rotation {
 
         from {
@@ -382,51 +427,51 @@
 
     .top {
         position: relative;
-        bottom: 349px;
+        bottom: 205px;
     }
 
     .top1 {
         position: relative;
-        bottom: 698px;
+        bottom: 410px;
     }
 
     .top2 {
         position: relative;
-        bottom: 1047px;
+        bottom: 615px;
     }
 
     .top3 {
         position: relative;
-        bottom: 1396px;
+        bottom: 820px;
     }
 
     .top4 {
         position: relative;
-        bottom: 1745px;
+        bottom: 1025px;
     }
 
     .top5 {
         position: relative;
-        bottom: 2094px;
+        bottom: 1230px;
     }
 
     .top6 {
         position: relative;
-        bottom: 2443px;
+        bottom: 1435px;
     }
 
     .top7 {
         position: relative;
-        bottom: 2792px;
+        bottom: 1640px;
     }
 
     .top8 {
         position: relative;
-        bottom: 3141px;
+        bottom: 1845px;
     }
 
     .top9 {
         position: relative;
-        bottom: 349px;
+        bottom: 205px;
     }
 </style>

src/components/Detecter.vue

@@ -9,14 +9,16 @@
                 探测设备列表
             </div>
         </div>
-        <div class="regionList">
+        <div class="detecterList">
             <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>
+                    <el-col :span="8" v-for="(detecter,i) in detecterList">
+                        <div :class="[{'detecterItem':true},{'active':loftIndex == i }]" @click="handleSelect(detecter.Id)">
+                            <div class="grid-content bg-purple"> {{detecter.TagName}}</div>
                         </div>
                     </el-col>
+                    <h5 v-if="detecterList == ''">尚未添加探测设备</h5>
+
                 </el-row>
             </ul>
         </div>
@@ -31,11 +33,10 @@
                 navs: [],
             }
         },
-        props: ['regionList'],
+        props: ['detecterList'],
         methods: {
-            handleSelect(i) {
-                this.loftIndex = parseInt(i);
-                this.$router.push({path: '/equip', query: {id: parseInt(i)}});
+            handleSelect(Id) {
+                this.$router.push({path: '/equip', query: {id: Id}});
             },
         }
     }
@@ -58,7 +59,7 @@
         margin-top: 20px;
     }
 
-    .regionItem {
+    .detecterItem {
         border: 1px solid #005EA2;
         background: rgba(27,86,200,0.14);
         color: #fff;
@@ -70,7 +71,18 @@
         font-size: 14px;
     }
 
-    .regionItem.active {
+    .detecterItem.active {
         background: #005EA2;
     }
+    .detecterList {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        min-height: 100px;
+    }
+    .detecterList h5 {
+        color: #fff;
+        font-weight: normal;
+    }
 </style>

src/components/HistoryRecord.vue

@@ -1,13 +1,12 @@
 <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 class="">
+            <div class="sum-title">
+                {{historyRs.title}}
             </div>
+            <span class="link" @click="link(historyRs.url)">
+                more+
+            </span>
             <el-table
                     :data="tableData"
                     stripe
@@ -109,6 +108,9 @@
             },
         },
         methods: {
+            link(url) {
+                this.$router.push({path: url, query: {x: 0}});
+            },
             // 设置分页数据
             setPaginations() {
                 // 分页属性
@@ -151,7 +153,7 @@
             // 过滤时间
             filterFmtDate(value, row, column) {
                 let that = this;
-                return globalfmtDate2(column,11,8);
+                return globalfmtDate2(column, 11, 8);
             },
             // 过滤金额
         }
@@ -167,19 +169,36 @@
         margin: 0 auto;
     }
 
-    .other-people {
-        width: 439px;
-        height: 240px;
-        margin-left: 0;
+    .sum-title {
+        width: 150px;
+        height: 36px;
+        font-size: 16px;
+        line-height: 36px;
+        color: #6DC1FF;
+        margin: 0 auto;
+        text-align: center;
+        background: url("../assets/img/main/tit.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    .link {
+        position: relative;
+        bottom: 20px;
+        float: right;
+        color: #6DC1FF;
+        margin-right: 10px;
+        cursor: pointer;
     }
 
     .el-table {
+        position: relative;
+        bottom: 20px;
         width: 100%;
-        height: 380px;
+        height: 110px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        margin-top: 40px;
+        margin-top: 0px;
         font-size: 14px;
         color: #6DC1FF;
     }
@@ -248,7 +267,7 @@
     }
 
     /deep/ .has-gutter th {
-        background: rgba(0, 23, 67, 0.8) !important;
+        /*background: rgba(0, 23, 67, 0.8) !important;*/
         font-weight: normal;
     }
 
@@ -299,11 +318,14 @@
     /deep/ .el-table__empty-text {
         color: #015B9E;
     }
+
     /deep/ .el-pagination.is-background .btn-next,
     /deep/ .el-pagination.is-background .btn-prev {
         background: #002540;
     }
+
     /deep/ .el-pagination.is-background .el-pager li {
-        background:#002540 ;
+        background: #002540;
     }
+
 </style>

src/components/Region.vue

@@ -13,10 +13,11 @@
                 <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="[{'regionItem':true},{'active':loftIndex == i }]" @click="handleSelect(region.Id,i)">
                                 <div class="grid-content bg-purple"> {{region.Name}}</div>
                             </div>
                         </el-col>
+                        <h5 v-if="regionList == ''">尚未添加监控区域</h5>
                     </el-row>
                 </ul>
             </div>
@@ -33,9 +34,9 @@
         },
         props: ['regionList'],
         methods: {
-            handleSelect(i) {
+            handleSelect(Id,i) {
                 this.loftIndex = parseInt(i);
-                this.$emit('ClickGetInfo', i);//触发事件
+                this.$emit('GetInfoClick', Id);//触发事件
             },
         }
     }
@@ -71,4 +72,15 @@
     .regionItem.active {
         background: #005EA2;
     }
+    .regionList {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        min-height: 100px;
+    }
+    .regionList h5 {
+        color: #fff;
+        font-weight: normal;
+    }
 </style>

src/components/Scan.vue

@@ -5,7 +5,7 @@
                 0-6G扫描
             </div>
             <div class="line">
-                <ve-line :data="chartData" width="966px" height="250px" :loading="loading" :legend-visible="false"
+                <ve-line :data="chartData" width="100%" height="230px" :loading="loading" :legend-visible="false"
                          :extend="chartExtend"></ve-line>
             </div>
         </div>
@@ -14,20 +14,60 @@
 
 <script>
     import {Scan} from '../api/getApiRes.js'
+
     let qs = require('qs');
     export default {
         data() {
             return {
                 days: 13,
                 loading: true,
+
                 chartData: {
                     columns: ['X', 'Y'],
                     rows: []
                 },
                 chartExtend: {
-                    color: ['#4ad2ff'],
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(0,255,212,0.15)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(0,255,212,1)' // 100% 处的颜色
+                            },
+                        ],
+                        globalCoord: false // 缺省为 false
+                    },
                     series: {
-                        barMaxWidth: 10
+                        barMaxWidth: 10,
+                        // 区域填充样式
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(0,255,212,0.15)', // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(0,255,212,0.15)' // 100% 处的颜色
+                                    },
+                                ],
+                                global: false // 缺省为 false
+                            }
+                        },
                     },
                     axisLine: {
                         color: "#4ad2ff",
@@ -48,6 +88,8 @@
                         }
                     },
                     xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
                         splitLine: {
                             lineStyle: {
                                 // 使用深浅的间隔色
@@ -68,7 +110,7 @@
         watch: {
             ScanRs: function (val) {
                 let that = this;
-               that.chartData.rows = val.Rs
+                that.chartData.rows = val.Rs
             },
         },
     }
@@ -77,12 +119,13 @@
 <style scoped>
     .wifiSign {
         width: 100%;
-        height: 190px;
+        height: 180px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
         margin-top: 0px;
     }
+
     .sum-title {
         width: 150px;
         height: 36px;
@@ -94,6 +137,7 @@
         background: url("../assets/img/main/tit.png") top center no-repeat;
         background-size: 100%;
     }
+
     .line {
         position: relative;
         top: -40px;

src/components/WifiSign.vue

@@ -5,7 +5,7 @@
                 WiFi信号
             </div>
             <div class="histogram">
-                <ve-histogram :data="chartData" width="100%" height="240px" :loading="loading" :legend-visible="false"
+                <ve-histogram :data="chartData" width="100%" height="230px" :loading="loading" :legend-visible="false"
                               :extend="chartExtend"></ve-histogram>
             </div>
         </div>
@@ -26,12 +26,33 @@
                     ]
                 },
                 chartExtend: {
-                    color: ['#4ad2ff'],
+                    color: ['#72FF99'],
                     series: {
-                        barMaxWidth: 10
+                        barMaxWidth: 10,
+                        // 区域填充样式
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(0,255,212,0.15)', // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(0,255,212,0.15)' // 100% 处的颜色
+                                    },
+                                ],
+                                global: false // 缺省为 false
+                            }
+                        },
                     },
                     axisLine: {
-                        color: "#4ad2ff",
+                        color: "#04E3FD",
                     },
                     yAxis: {
                         // name : '单位: dB',
@@ -43,7 +64,7 @@
                         },
                         axisLine: {
                             lineStyle: {
-                                color: '#4ad2ff',
+                                color: '#04E3FD',
                                 width: 1,//这里是为了突出显示加上的
                             }
                         }
@@ -52,12 +73,12 @@
                         splitLine: {
                             lineStyle: {
                                 // 使用深浅的间隔色
-                                color: ['#4ad2ff']
+                                color: ['#04E3FD']
                             }
                         },
                         axisLine: {
                             lineStyle: {
-                                color: '#4ad2ff',
+                                color: '#04E3FD',
                                 width: 1,//这里是为了突出显示加上的
                             }
                         }
@@ -79,7 +100,7 @@
 <style scoped>
     .wifiSign {
         width: 100%;
-        height: 190px;
+        height: 170px;
         overflow: hidden;
         display: block;
         margin: 0 auto;

src/components/signMap.vue

@@ -174,7 +174,7 @@
     }
 
     .signMapListBg {
-        width: 883px;
+        width: 95%;
         height: 385px;
         float: left;
         background: url("../assets/img/main/grid.png");
@@ -206,7 +206,7 @@
     }
 
     .bottom_rule span {
-        width: 30px;
+        width: 3.2%;
         text-align: center;
         float: left;
         font-size: 12px;
@@ -259,6 +259,9 @@
         -webkit-animation-fill-mode: both;
         animation-fill-mode: both
     }
+    .signMap s {
+        color: #72FF99;
+    }
 
     @-webkit-keyframes twinkling {
         0% {

src/views/Login.vue

@@ -4,7 +4,7 @@
             <el-header></el-header>
             <el-main>
                 <h5 class="title">SignalDigger</h5>
-                <span class="subtitle">专用场所无线信号安全监控系统</span>
+                <span class="subtitle">无线信号安全监控系统</span>
                 <el-card class="box-card">
                     <div class="center">
                         <el-form ref="form" :model="form" label-width="0px">
@@ -72,7 +72,11 @@
         methods: {
             CurentGenVerifyPic() {
                 let that = this;
-                let postdata;
+                let param = {
+                    'height': 40,
+                    'width': 100,
+                };
+                let postdata = qs.stringify(param);
                 GenVerifyPic(postdata).then(res => {
                     let json = res;
                     if (json.Id) {
@@ -225,6 +229,7 @@
         position: relative;
         float: right;
         bottom: 35px;
+        background-color: #409EFF;
     }
 
     .center {

src/views/Main.vue

@@ -5,24 +5,22 @@
                 控制台
             </div>
             <div class="cube">
-                <Region :region-list="regionList"></Region>
+                <Region :region-list="regionList" @GetInfoClick="ClickGetInfo"></Region>
             </div>
             <div class="cube">
-                <Detecter :region-list="regionList"></Detecter>
+                <Detecter :detecter-list="detectorList"></Detecter>
             </div>
             <div class="cube">
                 <Task></Task>
             </div>
         </div>
-        <div class="md">
+        <div :class="[{'md':true},{'bigMd':!showLeft}]">
             <div class="cube">
                 <signMap></signMap>
             </div>
-            <br>
             <div class="cube">
                 <WifiSign :wifi-rs="WifiRs"></WifiSign>
             </div>
-            <br>
             <div class="cube">
                 <Scan :scan-rs="ScanRs"></Scan>
             </div>
@@ -31,7 +29,11 @@
             <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>
@@ -59,7 +61,8 @@
     import BigRader from '@/components/BigRader.vue'
     import {
         getLoftInfo,
-        RegionDetInfolist,
+        RegionList,
+        DetectorList,
     } from '../api/getApiRes.js'
     import {mapGetters, mapActions, mapState} from "vuex";
     import Global from "../Global"
@@ -74,13 +77,13 @@
                 totalRs: [],
                 equipRs: [],
                 regionList: [],
+                detectorList: [],
                 showLeft: true,
-
+                regionId: '',
             }
         },
         mounted() {
             this.init();
-            this.test();
             this.showLeft = parseInt(this.$store.state.status.count) % 2 == 0
         },
         computed: {
@@ -100,7 +103,8 @@
         },
         methods: {
             init() {
-                this.getDate()
+                this.getDate();
+                this.test()
             },
             test() {
                 this.WifiRs = {
@@ -111,12 +115,12 @@
                         {'X': '信道4', 'Y': 111},
                         {'X': '信道5', 'Y': 411},
                     ]
-                }
+                };
                 this.ScanRs = {
                     Rs: [
-                        {'X': '1M', 'Y': 12},
+                        {'X': '1M', 'Y': 311},
                         {'X': '2M', 'Y': 32},
-                        {'X': '3M', 'Y': 41},
+                        {'X': '3M', 'Y': 241},
                         {'X': '4M', 'Y': 111},
                         {'X': '5M', 'Y': 411},
                     ]
@@ -129,11 +133,31 @@
                 };
                 let postdata = qs.stringify(param);
                 that.regionList = [];
-                getLoftInfo(postdata).then(res => {
+                RegionList(postdata).then(res => {
                     let json = res;
                     if (json.Code == 0) {
-                        console.log(json);
-                        that.regionList = json.Rs
+                        that.regionList = json.Rs;
+                        // 默认加载第一个区域
+                        if (json.Rs) {
+                            this.getDetectorList(json.Rs[0].Id);
+                        }
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
+            },
+            getDetectorList(regionId) {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                    regionId: regionId,
+                };
+                let postdata = qs.stringify(param);
+                that.detectorList = [];
+                DetectorList(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.detectorList = json.Rs
                     } else {
                         that.$message.error(json.Memo);
                     }
@@ -151,8 +175,9 @@
                     }
                 })
             },
-            ClickGetInfo(index) {
-
+            ClickGetInfo(Id) {
+                this.regionId = Id;
+                this.getDetectorList(Id);
             }
         },
         components: {
@@ -187,7 +212,7 @@
         overflow: hidden;
         padding-bottom: 10px;
         background: rgba(0, 130, 255, 0.05);
-        margin-right: 20px;
+        margin-right: 10px;
     }
 
     .mainContainer .md {
@@ -195,21 +220,41 @@
         float: left;
         overflow: hidden;
         padding-bottom: 10px;
-        margin-right: 20px;
+        margin-right: 10px;
+    }
+
+    .mainContainer .bigMd {
+        width: 72.5%;
+    }
+
+    .bigMd /deep/ .histogram div {
+         width: 100%!important;
+    }
+    .bigMd /deep/ .histogram canvas {
+         width: 100%!important;
+    }
+    .bigMd /deep/ .ve-line div {
+         width: 100%!important;
+    }
+    .bigMd /deep/ .ve-line canvas {
+         width: 100%!important;
     }
 
     .mainContainer .md .cube {
         border: 1px solid rgba(0, 147, 253, 0.24);
         background: rgba(0, 130, 255, 0.05);
+        margin-bottom: 5px;
     }
 
     .mainContainer .rt {
-        width: 30%;
+        width: 26.5%;
         float: right;
     }
 
     .rt .cube {
-        float: right;
+        border: 1px solid rgba(0, 147, 253, 0.24);
+        background: rgba(0, 130, 255, 0.05);
+        margin-bottom: 5px;
     }
 
     .sum-title {