修改首页加地图

package.json

@@ -53,6 +53,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-baidu-map": "^0.21.22",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
 import Cookies from 'js-cookie'
-
+import BaiduMap from 'vue-baidu-map'
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 
@@ -61,6 +61,9 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(BaiduMap,{
+  ak:'sqxhrmvfnPaA2yS0gmceKfCrL8T3hhIV'
+})
 DictData.install()
 
 /**

src/views/components/MyPopup.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="popup">
+      <h3>{{ marker.name }}</h3>
+      <p>{{ marker.info }}</p>
+      <button @click="closePopup">关闭</button>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      marker: {
+        type: Object,
+        required: true,
+      },
+    },
+    methods: {
+      closePopup() {
+        this.$emit('close');
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .popup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 10px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+  }
+  </style>

src/views/dashboard/twinChart.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
      <!-- ${wheight} -->
-    <div ref="chart" :style="`width: 100%; height:660px; margin: 20px`"></div>
+    <div ref="chart" :style="`width: 100%; height:600px; margin: 20px`"></div>
   </div>
 </template>
 

src/views/index.vue

@@ -6,45 +6,116 @@
           <img src="../assets/images/nav-one.png" alt="" />
           <div>
             <div class="nav-title">设备数量</div>
-            <div class="nav-count">{{ topData.deviceNO }}</div>
+            <div class="nav-count" @click="goDevice">
+              {{ topData.deviceNO }}
+            </div>
           </div>
         </div>
         <div class="nav-two">
           <img src="../assets/images/nav-two.png" alt="" />
           <div>
             <div class="nav-title">WIFI数量</div>
-            <div class="nav-count">{{ topData.wifiNO }}</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>
           </div>
         </div>
         <div class="nav-three">
           <img src="../assets/images/nav-three.png" alt="" />
           <div>
             <div class="nav-title">蓝牙数量</div>
-            <div class="nav-count">{{ topData.bluetoothNO }}</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>
           </div>
         </div>
-        <div class="nav-four">
+        <!-- <div class="nav-four">
           <img src="../assets/images/nav-four.png" alt="" />
           <div>
             <div class="nav-title">场馆数量</div>
-            <div class="nav-count">{{ topData.venueNO }}</div>
+            <div class="nav-count" @click="goVenue">{{ topData.venueNO }}</div>
           </div>
-        </div>
+        </div> -->
       </div>
       <div class="contbody" id="contbody">
-        <div class="cont-left">
-          <img
+        <!-- <div class="cont-left"> -->
+        <!-- <img
             src="../assets/images/ditu.png"
             alt=""
             style="width: 100%; height: 690px"
-          />
-        </div>
+          /> -->
+        <!-- </div> -->
         <!-- <div class="chart-wrapper cont-left">
           <store-chart />
         </div> -->
-        <div class="cont-right">
+        <!-- <div class="cont-right">
           <twin-chart :rightData="rightData" :wheight="wheight" />
-        </div>
+        </div> -->
+        <!-- cener成都市地区字符串,zoom缩放等级 -->
+        <!-- ../assets/images/org-icon.png -->
+        <!-- mapStyle="mapStyle" 地图样式 anchor="BMAP ANCHOR TOP RIGHT" 比例尺-->
+        <baidu-map
+          ak="sqxhrmvfnPaA2yS0gmceKfCrL8T3hhIV"
+          :center="center"
+          :zoom="zoom"
+          :scroll-wheel-zoom="true"
+          style="width: 100%; height: 100%"
+        >
+          <!-- 缩放 -->
+          <bm-navigation anchor="BMAP_ANCHOR TOP_RIGHT"></bm-navigation>
+          <bm-marker
+            v-for="(marker, index) of this.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"
+              @close="infoWindowClose"
+              @open="infoWindowOpen(marker)"
+            >
+              <div class="tankuang">
+                <div class="poptop">
+                  <div style="display: flex">
+                    <div class="pop-left">
+                      <img src="../assets/images/Bluetooth.png" alt="" />
+                      <div>蓝牙</div>
+                    </div>
+                    <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>
+                </div>
+                <div class="popbottom">
+                  <div style="display: flex">
+                    <div class="pop-left">
+                      <img src="../assets/images/WifiMedium.png" alt="" />
+                      <div>WIFI</div>
+                    </div>
+                    <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>
+                </div>
+              </div>
+            </bm-info-window>
+          </bm-marker>
+        </baidu-map>
+        <!-- <my-popup
+          v-if="selectedMarker"
+          :marker="selectedMarker"
+          @close="selectedMarker = null"
+        ></my-popup> -->
       </div>
     </div>
   </div>
@@ -54,14 +125,39 @@
 import { indexTop, indexInfo } 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";
 export default {
   name: "Dict",
   components: {
     storeChart,
     twinChart,
+    MyPopup,
+    BmMarkers,
   },
   data() {
     return {
+      show: false,
+      //=======地图
+      center: { lng: 104.064856, lat: 30.658876 }, // 成都的经纬度
+      zoom: 12, // 地图缩放级别
+      markers: [
+        {
+          lng: 104.06667,
+          lat: 30.66667,
+          name: "地点1",
+          info: "这是地点1的信息",
+        },
+        {
+          lng: 103.836777,
+          lat: 30.697996,
+          name: "地点2",
+          info: "这是地点2的信息",
+        },
+        // 其他地点...
+      ],
+      selectedMarker: null,
+      //=======地图
       data: "sdff",
       topData: {},
       rightData: [],
@@ -74,8 +170,37 @@ export default {
     });
     this.getList();
     this.getInfo();
+    setInterval(() => {
+      this.fetchData();
+      this.$forceUpdate
+    }, 5 * 60 * 1000)
   },
   methods: {
+    infoWindowClose() {
+      this.selectedMarker=null
+      this.show = false;
+      this.$forceUpdate();
+    },
+    //点击得到点位信息
+    infoWindowOpen(marker) {
+      this.selectedMarker = marker;
+      this.show = true;
+      console.log("marker", marker,marker);
+      this.$forceUpdate();
+    },
+    goDevice() {
+      //去设备
+      this.$router.push({ path: "/deviceInfo" });
+    },
+    goWIFI() {
+      this.$router.push({ path: "/wifiInfo" });
+    },
+    goBluetooth() {
+      this.$router.push({ path: "/bluetoothINfo" });
+    },
+    goVenue() {
+      this.$router.push({ path: "/venueInfo" });
+    },
     getList() {
       indexTop().then((response) => {
         this.rightData = response;
@@ -85,6 +210,7 @@ export default {
       //头部
       indexInfo().then((response) => {
         this.topData = response;
+        console.log('response', response)
       });
     },
   },
@@ -155,6 +281,7 @@ export default {
   .nav-three {
     color: #344171;
     background: #d6e0ff;
+    margin-right: 0;
   }
   .nav-four {
     color: #344171;
@@ -174,6 +301,28 @@ export default {
     font-size: 32px;
     font-weight: 600;
     color: #000;
+    display: flex;
+    margin-top: 8px;
+    &>div{
+      display: flex;
+      flex-direction: column;
+    }
+    &>div:first-child{
+      margin-right: 32px;
+    }
+    .eyicount{
+      font-weight: 600;
+      font-size: 32px;
+      color: #FF3E01;
+    }
+    .allcount{
+      font-weight: 600;
+      font-size: 32px;
+    }
+    .text{
+      color: #713734;
+      font-size: 14px;
+    }
   }
   .nav-title {
     font-size: 18px;
@@ -191,6 +340,7 @@ export default {
   display: flex;
   width: 100%;
   flex-grow: 1;
+  border-radius: 16px;
   margin-bottom: 32px;
   .cont-left,
   .cont-right {
@@ -205,4 +355,53 @@ export default {
     width: 550px;
   }
 }
+.tankuang {
+  width: 225px;
+  height: 160px;
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.poptop,
+.popbottom {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  .pop-left {
+    color: #72838c;
+    img {
+      width: 32px;
+      height: 32px;
+    }
+
+    margin-right: 20px;
+  }
+  .vertical-dashed-line {
+    margin-top: 8px;
+    border-left: 2px dashed #72838c;
+    height: 45px; /* 虚线的高度 */
+  }
+  .pop-right {
+    font-weight: 600;
+    font-size: 14px;
+    margin-left: 20px;
+
+    & > div {
+      display: flex;
+      justify-content: space-around;
+      & > span:last-child {
+        font-size: 18px;
+        margin-left: 20px;
+      }
+      .eyi {
+        font-size: 19px;
+        color: #ff3e01;
+      }
+    }
+  }
+}
+.popbottom {
+}
 </style>