修改地图和地图列表

device-manager-ui/admin/src/components/Map.vue

@@ -13,6 +13,7 @@
       class="amap-demo"
     >
       <div class="tuli"><slot name="leftTop"></slot></div>
+      <div class="liebiao"><slot name="rightTop"></slot></div>
 
       <!-- <el-amap-search-box :on-search-result="onSearchResult" :events='searchEvents'/> -->
 
@@ -20,12 +21,28 @@
       <el-amap-marker
         v-for="(marker, index) in markers"
         :key="'marker' + index"
-        :events="marker.events"
+        :events="markerevents"
         :position="marker.position"
         :label="marker.label"
         :contentRender="contentRender"
         :extData="marker"
       >
+        <div class="marker-using-slot" style="positon: relative">
+            <img
+              style="width: 36px; height: 50px"
+              src="@/assets/images/red.png"
+            />
+            <div
+              style="
+                color: #ffffff;
+                position: absolute;
+                top: 8px;
+                left: 50%;
+                transform: translate(-50%);
+              " v-if="marker.extData.level == 1">
+              {{ marker.extData.siteCount }}
+            </div>
+        </div>
       </el-amap-marker>
 
       <!--信息窗体-->
@@ -37,7 +54,7 @@
         ><el-row :body-style="{ padding: '0px' }">
           <el-row type="flex" justify="space-between">
             <span style="font-size: 18px"
-              ><b>{{ info.siteName }}</b></span
+              ><b>{{ info.label }}</b></span
             >
             <el-button
               type="text"
@@ -140,6 +157,34 @@ export default {
   },
   created() {
     this.refresh(this.markersData);
+    this.markerevents = {
+      click: (e) => {
+        let exData = e.target.getExtData();
+        this.center = [exData.extData.lng, exData.extData.lat]
+        this.zoom = 8
+        this.info = exData.extData;
+        this.window.position = exData.position;
+        if(this.info.children && this.info.children.length>0){
+          let children = JSON.parse(JSON.stringify(exData.extData.children))
+          children = this.flatten(children)
+          children = children.map(i=> {return {
+            ...i,
+            lat:i.latitude,
+            lng:i.longitude,
+          }})
+          exData.extData.level = ''
+          children.unshift(JSON.parse(JSON.stringify(exData.extData)))
+          children = children.filter((v) => {
+            return v.type == "site";
+          });
+          this.refresh(children)
+        }
+        this.window.visible = false;
+        this.$nextTick(() => {
+          this.window.visible = true; //点击点坐标，出现信息窗体
+        });
+      },
+    }
   },
   methods: {
     formatterDate,
@@ -152,8 +197,9 @@ export default {
       });
     },
     refresh(data) {
-      // console.log("刷新数据", data);
+      // console.log("刷新数据", data,this.markers);
       this.markersData = data;
+      this.markers = []
       this.markersData.map((item) => {
         this.setMarker(item);
       });
@@ -168,27 +214,23 @@ export default {
     setMarker(item) {
       if (!item.lng && !item.lat) return;
       let markerLabel = {
-        label: { content: item.siteName, offset: [20, 38] },
+        label: { offset: [20, 38] },
         position: [item.lng, item.lat],
         //icon: require("@/assets/images/marker-blue.png"),
         extData: item,
-        events: {
-          click: (e) => {
-            // console.log("getExtData", e.target.getExtData());
-            let exData = e.target.getExtData();
-            this.info = exData.extData;
-            this.window.position = exData.position;
         
-            this.window.visible = false;
-            this.$nextTick(() => {
-              this.window.visible = true; //点击点坐标，出现信息窗体
-            });
-          },
-        },
       };
 
       this.markers.push(markerLabel);
     },
+    flatten(arr) {
+      return arr.reduce((result, item) => {
+        return result.concat(
+          item,
+          Array.isArray(item.children) ? this.flatten(item.children) : []
+        );
+      }, []);
+    },
     // 处理搜索结果，定位到中心点
     onSearchResult(pois) {
       let latSum = 0;
@@ -369,6 +411,18 @@ export default {
 </script>
 
 <style  lang="less">
+.amap-maptypecontrol{
+  display: none;
+}
+.liebiao{
+  width: 400px;
+  top: 40px;
+  right: 34px;
+  position: absolute;
+  // float: right;
+  background-color: rgba(255, 255, 255, 0.7);
+
+}
 .tuli {
   width: 300px;
   top: 20px;

device-manager-ui/admin/src/views/sitestat/maplist.vue

@@ -27,8 +27,52 @@
             >
             </el-tree>
           </el-scrollbar>
-        </el-card> </el-row
-    ></Map>
+        </el-card> 
+      </el-row>
+      <el-row :gutter="20" slot="rightTop" class="mytree">
+        <el-card>
+          <div slot="header">
+            <span><b class="cardTitle">站点列表</b></span>
+          </div>
+          <div class="listbody">
+            <div class="listtop">
+              <div class="item sbzs">
+                <div>{{listNum.all}}</div>
+                <div class="wz">设备总数(台)</div>
+              </div>
+              <div class="item zx">
+                <div>{{listNum.online}}</div>
+                <div class="wz">在线(台)</div>
+              </div>
+              <div class="item lx">
+                <div>{{listNum.unline}}</div>
+                <div class="wz">离线(台)</div>
+              </div>
+            </div>
+            <div class="maplist">
+              <div v-for="(item,index) in rightShowList" :key="index" class="deployitem">
+                <div class="top">
+                  <div class="title">{{ item.label }}</div>
+                  <div class="ckxq pointer" @click="getDetailData(item)">查看详情</div>
+                </div>
+                <div class="are">{{ item.detailAddress }}</div>
+                <div class="data">
+                  <div class="sbzs dataitem">
+                    设备总数：<span>{{ item.deviceTotal }}台</span>
+                  </div>
+                  <div class="zx dataitem">
+                    在线：<span>{{ item.onlineTotal }}台</span>
+                  </div>
+                  <div class="lx dataitem">
+                    离线：<span>{{ item.offlineTotal }}台</span>
+                  </div>
+                </div>
+            </div>
+            </div>
+          </div>
+        </el-card> 
+      </el-row>
+    </Map>
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
@@ -45,19 +89,57 @@ export default {
   mounted() {
     this.pageInfo.list = "/sitestat/list";
   },
-
+  watch:{
+    originData(newval){
+      let val = JSON.parse(JSON.stringify(newval))
+      let arr = this.flatten(val).filter((v) => {
+          return v.type == "site";
+        });
+      this.rightShowList = arr  
+      let all = 0;
+      let online = 0;
+      let unline = 0;
+      arr.forEach(v=>{
+        all += parseInt(v.deviceTotal)
+        online += parseInt(v.onlineTotal)
+        unline += parseInt(v.offlineTotal)
+      })
+      this.listNum.all = all
+      this.listNum.online = online
+      this.listNum.unline = unline
+    }
+  },
   created() {
     this.pageInfo.list = "/sitestat/list";
-    this.$get("/sitestat/maplist", {}).then(({ data }) => {
-      this.originData = data;
-      this.$refs.map.refresh(this.originData);
-    });
+    // this.$get("/sitestat/maplist", {}).then(({ data }) => {
+      // this.originData = data;
+      // this.$refs.map.refresh(this.originData);
+    // });
 
     this.$get("/sitestat/siteTree", {}).then(({ data }) => {
-      this.areaData = data.data;
+      let arr = []
+      data.data.forEach(i=>{
+        arr.push({
+          ...i,
+          lat:i.latitude,
+          lng:i.longitude,
+          level:1
+        })
+      })
+      this.originData = arr
+      this.areaData = JSON.parse(JSON.stringify(arr));
+      this.$refs.map.refresh(this.originData);
     });
   },
   methods: {
+    flatten(arr) {
+      return arr.reduce((result, item) => {
+        return result.concat(
+          item,
+          Array.isArray(item.children) ? this.flatten(item.children) : []
+        );
+      }, []);
+    },
     /** 下载模板操作 */
     downloadTemplate() {
       this.isExport = true;
@@ -121,6 +203,7 @@ export default {
     },
 
     handleNodeClick(node) {
+      this.$refs.map.window.visible = false;
       this.currentNode = node;
       if (node.type === "site") {
         let obj = {};
@@ -128,10 +211,37 @@ export default {
         obj.lat = node.latitude;
         this.$refs.map.relocate(obj);
       }
+      if(node.level==1){
+        let arr = []
+        arr.push(JSON.parse(JSON.stringify(node)))
+        this.originData = arr
+        this.$refs.map.refresh(this.originData);
+        this.$refs.map.zoom = 6
+      }else{
+        let children = JSON.parse(JSON.stringify(node.children))
+        children = this.$refs.map.flatten(children)
+        children.unshift(JSON.parse(JSON.stringify(node)))
+        children = children.filter((v) => {
+          return v.type == "site";
+        });
+        children = children.map(i=> {return {
+          ...i,
+          lat:i.latitude,
+          lng:i.longitude,
+        }})
+        this.originData = children
+        this.$refs.map.refresh(this.originData);
+      }
     },
   },
   data() {
     return {
+      listNum:{
+        all:0,
+        online:0,
+        unline:0
+      },
+      rightShowList:[],
       isExport: false,
       originData: [],
       config: {
@@ -189,7 +299,102 @@ export default {
 };
 </script>
 
-<style>
+<style lang="less" scoped>
+  .deployitem {
+    padding: 10px 0;
+    color: #223333;
+    border-bottom: 1px solid gainsboro;
+    .top{
+      display: flex;
+      justify-content: space-between;
+    }
+        .ckxq {
+      font-size: 10px;
+      margin-right: 20px;
+      margin-top: 8px;
+      color: #1890ff;
+      flex-shrink: 0;
+    }
+    .data {
+      display: flex;
+      font-size: 12px;
+      font-weight: 500;
+      color: #999999;
+      margin: 4px 0;
+      .dataitem {
+        margin-right: 16px;
+      }
+      .sbzs > span {
+        color: #223333;
+      }
+      .zx > span {
+        color: #0064e9;
+      }
+      .zx {
+        position: relative;
+      }
+      .zx::before {
+        content: "";
+        position: absolute;
+        width: 4px;
+        height: 4px;
+        background: #0064e9;
+        border-radius: 50%;
+        top: 6px;
+        left: -6px;
+      }
+      .lx > span {
+        color: #fa4d4c;
+      }
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      padding: 4px 0;
+    }
+    .are {
+      font-size: 12px;
+    }
+  }
+.listbody::-webkit-scrollbar {
+  width: 0;
+}
+.listbody{
+  max-height: 700px;
+    overflow: auto;
+  .listtop{
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 0 10px;
+    border-bottom: 1px solid #dcdcdc;
+    .item {
+      width: 120px;
+      height: 60px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      color: #fff;
+      padding-bottom: 6px;
+      font-size: 8px;
+      .wz {
+        margin-left: 14px;
+      }
+    }
+    .sbzs {
+      background: url("~@/assets/images/sbzs.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .zx {
+      background: url("~@/assets/images/zx.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .lx {
+      background: url("~@/assets/images/lx.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
 .el-card__body {
   padding: 10px;
 }