修改首页

src/api/system/index.js

@@ -13,4 +13,11 @@ export function indexInfo(query) {
       method: 'get',
       params: query
     })
- }
+ }
+ export function realTimeInfo(query) {
+  return request({
+    url: '/index/realTimeInfo',
+    method: 'get',
+    params: query
+  })
+}

src/views/index.vue

@@ -16,8 +16,14 @@
           <div>
             <div class="nav-title">WIFI数量</div>
             <div class="nav-count" @click="goWIFI">
-              <div><span class="eyicount">{{ topData.wifiNO }}</span><span class="text">恶意数</span></div>
-              <div><span class="allcount">{{ topData.totalWifiNO }}</span><span class="text">总数</span></div>
+              <div>
+                <span class="eyicount">{{ topData.wifiNO }}</span
+                ><span class="text">恶意数</span>
+              </div>
+              <div>
+                <span class="allcount">{{ topData.totalWifiNO }}</span
+                ><span class="text">总数</span>
+              </div>
             </div>
           </div>
         </div>
@@ -26,8 +32,14 @@
           <div>
             <div class="nav-title">蓝牙数量</div>
             <div class="nav-count" @click="goBluetooth">
-              <div><span class="eyicount">{{ topData.bluetoothNO }}</span><span class="text">恶意数</span></div>
-              <div><span class="allcount">{{ topData.totalBluetoothNO }}</span><span class="text">总数</span></div>
+              <div>
+                <span class="eyicount">{{ topData.bluetoothNO }}</span
+                ><span class="text">恶意数</span>
+              </div>
+              <div>
+                <span class="allcount">{{ topData.totalBluetoothNO }}</span
+                ><span class="text">总数</span>
+              </div>
             </div>
           </div>
         </div>
@@ -64,26 +76,31 @@
           style="width: 100%; height: 100%"
         >
           <!-- 缩放 -->
-          <bm-navigation anchor="BMAP_ANCHOR TOP_RIGHT"></bm-navigation>
+          <bm-navigation
+            anchor="BMAP_ANCHOR TOP_RIGHT"
+            class="suofang"
+          ></bm-navigation>
           <!-- 点位 -->
           <bm-marker
-            v-for="(marker, index) of this.topData.info"
+            @mouseover="infoWindowOpen(marker)"
+            @click="infoWindowOpen(marker)"
+            v-for="(marker, index) of topData.info"
             :key="index"
             :position="{ lng: marker.lng, lat: marker.lat }"
-            @click="infoWindowOpen(marker)"
             :icon="{
               url: require('@/assets/images/org-icon.png'),
               size: { width: 150, height: 157 },
             }"
           >
-          <!-- 弹框 -->
+            <!-- 弹框 -->
             <bm-info-window
-              :show="selectedMarker == marker"
+              :show="selectedMarker == marker ||show"
               @close="infoWindowClose"
               @open="infoWindowOpen(marker)"
+              @mouseleave="infoWindowClose"
             >
               <div class="tankuang">
-                <div class="poptop">
+                <div class="poptop" @click="goBluetooth">
                   <div style="display: flex">
                     <div class="pop-left">
                       <img src="../assets/images/Bluetooth.png" alt="" />
@@ -92,11 +109,16 @@
                     <div class="vertical-dashed-line"></div>
                   </div>
                   <div class="pop-right">
-                    <div><span>总数</span><span>{{ marker.totalBluetooth }}</span></div>
-                    <div><span>恶意数</span><span class="eyi">{{ marker.bluetooth }}</span></div>
+                    <div>
+                      <span>总数</span><span>{{ marker.totalBluetooth }}</span>
+                    </div>
+                    <div>
+                      <span>恶意数</span
+                      ><span class="eyi">{{ marker.bluetooth }}</span>
+                    </div>
                   </div>
                 </div>
-                <div class="popbottom">
+                <div class="popbottom" @click="goWIFI">
                   <div style="display: flex">
                     <div class="pop-left">
                       <img src="../assets/images/WifiMedium.png" alt="" />
@@ -105,13 +127,63 @@
                     <div class="vertical-dashed-line"></div>
                   </div>
                   <div class="pop-right">
-                    <div><span>总数</span><span>{{ marker.totalWifi }}</span></div>
-                    <div><span>恶意数</span><span class="eyi">{{ marker.wifi }}</span></div>
+                    <div>
+                      <span>总数</span><span>{{ marker.totalWifi }}</span>
+                    </div>
+                    <div>
+                      <span>恶意数</span
+                      ><span class="eyi">{{ marker.wifi }}</span>
+                    </div>
                   </div>
                 </div>
               </div>
             </bm-info-window>
           </bm-marker>
+          <!-- 选择时间 -->
+          <el-select
+            v-model="selectedValue"
+            placeholder="请选择"
+            class="choice-time"
+            @change="choiceTime"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <!-- 选择自定义时间 -->
+          <el-date-picker
+            v-model="drillDate"
+            class="choice-time choice-mytime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+          />
+          <div class="real-signal">
+            <div>
+              <div class="title">实时信号</div>
+              <div
+                class="cont"
+                @click="lookPosition(items)"
+                v-for="(items, indexs) in realTimeData"
+                :key="indexs"
+              >
+                <span class="positions"
+                  ><img src="../assets/images/MapPin.png" alt="" /><span
+                    >查看位置</span
+                  ></span
+                >
+                <span class="realname">{{ items.type }}</span>
+                <span class="illegal">{{ items.state }}</span>
+              </div>
+            </div>
+          </div>
         </baidu-map>
         <!-- <my-popup
           v-if="selectedMarker"
@@ -124,11 +196,12 @@
 </template>
 
 <script>
-import { indexTop, indexInfo } from "@/api/system/index";
+import { indexTop, indexInfo, realTimeInfo } from "@/api/system/index";
 import storeChart from "./dashboard/storeChart";
 import twinChart from "./dashboard/twinChart";
 import MyPopup from "./components/MyPopup.vue";
 import BmMarkers from "vue-baidu-map/components/overlays/Marker.vue";
+import { listData} from "@/api/system/dict/data";
 export default {
   name: "Dict",
   components: {
@@ -139,25 +212,62 @@ export default {
   },
   data() {
     return {
+      selectedValue: "当天",
+      drillDate: [], //自定义时间
+      realTimeData: [], //实时数据
       show: false,
       //=======地图
       center: { lng: 104.064856, lat: 30.658876 }, // 成都的经纬度
       zoom: 12, // 地图缩放级别
-      markers: [
+      markerPositionCeshi: [
         {
-          lng: 104.06667,
-          lat: 30.66667,
+          lng: 104.243116,
+          lat: 30.593938,
+          type: "WIFI",
           name: "地点1",
           info: "这是地点1的信息",
         },
         {
-          lng: 103.836777,
-          lat: 30.697996,
+          lng: 104.113,
+          lat: 30.546,
+          type: "蓝牙",
+          name: "地点2",
+          info: "这是地点2的信息",
+        },
+        {
+          lng: 104.243116,
+          lat: 30.593938,
+          type: "WIFI",
+          name: "地点1",
+          info: "这是地点1的信息",
+        },
+        {
+          lng: 104.113,
+          lat: 30.546,
+          type: "蓝牙",
           name: "地点2",
           info: "这是地点2的信息",
         },
         // 其他地点...
       ],
+      options: [
+        {
+          value: "当天",
+          label: "当天",
+        },
+        {
+          value: "本周",
+          label: "本周",
+        },
+        {
+          value: "本月",
+          label: "本月",
+        },
+        {
+          value: "本年",
+          label: "本年",
+        },
+      ],
       selectedMarker: null,
       //=======地图
       data: "sdff",
@@ -167,27 +277,46 @@ export default {
     };
   },
   created() {
+    console.log('first', this.dict)
     this.$nextTick(() => {
       this.wheight = document.getElementById("contbody").clientHeight;
     });
-    this.getList();
+    // this.getList();
+    // 头部数据
     this.getInfo();
+    //实时信号
+    this.realTimeInfo();
     setInterval(() => {
       this.getInfo();
-      this.$forceUpdate
-    }, 5 * 60 * 1000)
+      this.$forceUpdate;
+    }, 5 * 60 * 1000);
   },
   methods: {
+    realTimeInfo() {
+      realTimeInfo().then((res) => {
+        this.realTimeData = res;
+        console.log("res", res);
+      });
+    },
+    lookPosition(items) {
+      //查看位置
+      this.center = { lng: items.lng, lat: items.lat };
+      console.log(items, "22222");
+      this.show=true
+    },
+    //选择时间
+    choiceTime() {},
+    //关闭点位
     infoWindowClose() {
-      this.selectedMarker=null
+      this.selectedMarker = null;
       this.show = false;
       this.$forceUpdate();
     },
     //点击得到点位信息
     infoWindowOpen(marker) {
       this.selectedMarker = marker;
-      this.show = true;
-      console.log("marker", marker,marker);
+      // this.show = true;
+      console.log("marker", marker, marker);
       this.$forceUpdate();
     },
     goDevice() {
@@ -212,7 +341,7 @@ export default {
       //头部
       indexInfo().then((response) => {
         this.topData = response;
-        console.log('response', response)
+        console.log("response", response);
       });
     },
   },
@@ -300,28 +429,29 @@ export default {
     background-size: 98px 100px;
   }
   .nav-count {
+    cursor: pointer;
     font-size: 32px;
     font-weight: 600;
     color: #000;
     display: flex;
     margin-top: 8px;
-    &>div{
+    & > div {
       display: flex;
       flex-direction: column;
     }
-    &>div:first-child{
+    & > div:first-child {
       margin-right: 32px;
     }
-    .eyicount{
+    .eyicount {
       font-weight: 600;
       font-size: 32px;
-      color: #FF3E01;
+      color: #ff3e01;
     }
-    .allcount{
+    .allcount {
       font-weight: 600;
       font-size: 32px;
     }
-    .text{
+    .text {
       color: #713734;
       font-size: 14px;
     }
@@ -344,6 +474,7 @@ export default {
   flex-grow: 1;
   border-radius: 16px;
   margin-bottom: 32px;
+  position: relative;
   .cont-left,
   .cont-right {
     background: #fff;
@@ -363,11 +494,12 @@ export default {
   margin-left: 10px;
   display: flex;
   flex-direction: column;
-  
+
   justify-content: space-around;
 }
 .poptop,
 .popbottom {
+  cursor: pointer;
   font-size: 14px;
   display: flex;
   align-items: center;
@@ -405,25 +537,111 @@ export default {
     }
   }
 }
-::v-deep .BMap_top,::v-deep .BMap_bottom{
-  background: rgba(255,255,255,0.8) !important;
+// 弹框样式
+::v-deep .BMap_top,
+::v-deep .BMap_bottom {
+  background: rgba(255, 255, 255, 0.8) !important;
 }
-::v-deep .BMap_pop{
-  > div:nth-child(7),> div:nth-child(5),> div:nth-child(1),> div:nth-child(3),> div:nth-child(4){
-         >div{
-          background: rgba(255,255,255,0.8) !important;
-         }
-           
-        }
+::v-deep .BMap_pop {
+  > div:nth-child(7),
+  > div:nth-child(5),
+  > div:nth-child(1),
+  > div:nth-child(3),
+  > div:nth-child(4) {
+    > div {
+      background: rgba(255, 255, 255, 0.8) !important;
+    }
+  }
   > div:nth-child(8) {
-            display: none;
-        }
-
+    display: none;
+  }
 }
-::v-deep .BMap_pop .BMap_center {
-  background: rgba(255,255,255,0.8) !important;
+::v-deep .BMap_pop .BMap_center,
+.choice-mytime,
+.choice-time,
+.real-signal {
+  background: rgba(255, 255, 255, 0.8) !important;
 }
-::v-deep .BMap_shadow, .BMap_shadow img, .BMap_shadow div {
+::v-deep .BMap_shadow,
+.BMap_shadow img,
+.BMap_shadow div {
   display: none;
 }
+::v-deep .BMap_stdMpCtrl {
+  inset: 24px auto auto 10px !important;
+}
+//选择时间
+.choice-time,
+.choice-mytime {
+  border: none;
+  box-sizing: content-box;
+  position: absolute;
+  cursor: pointer;
+  left: 85px;
+  top: 24px;
+  z-index: 9;
+  ::v-deep .el-input__inner {
+    border: none;
+    width: 84px;
+    height: 38px;
+  }
+}
+.choice-mytime {
+  width: 244px;
+  left: 180px;
+  top: 24px;
+  height: 33px !important;
+}
+::v-deep .el-date-editor .el-range-input,
+::v-deep .el-date-editor .el-range__icon {
+  color: #459def !important;
+}
+//实时信号
+.real-signal {
+  height: 360px;
+  overflow-y: auto;
+  width: 258px;
+  right: 24px;
+  top: 24px;
+  position: absolute;
+  z-index: 9;
+  border-radius: 4px 4px 0px 0px;
+  & > div {
+    font-size: 14px;
+    .title {
+      position: sticky;
+      top: 0;
+      background-color: #FFF;
+      padding: 10px;
+      color: #72838c;
+      z-index: 99999;
+      border-bottom: 1px solid #e5e6eb;
+    }
+    .cont {
+      cursor: pointer;
+      margin: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .positions {
+        color: #459def;
+        img {
+          width: 16px;
+          height: 16px;
+          vertical-align: middle;
+        }
+        & > span:last-child {
+          margin-left: 3px;
+          border-bottom: 1px solid #459def;
+        }
+      }
+      // .realname{
+
+      // }
+      .illegal {
+        color: #ff3e01;
+      }
+    }
+  }
+}
 </style>