站点地图修改

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

@@ -74,16 +74,22 @@ export default {
     },
   },
   methods: {
-    refresh(data){
-        console.log("刷新数据",data)
-        this.markersData=data
+    refresh(data) {
+      console.log("刷新数据", data);
+      this.markersData = data;
 
-          this.markersData.map((item) => {
-            this.setMarker(item.lng, item.lat, item.address,item.siteId);
-          });
+      this.markersData.map((item) => {
+        this.setMarker(item.lng, item.lat, item.address, item.siteId);
+      });
+    },
 
+    relocate(center){
+     this.center = [center.lng, center.lat];
+     this.zoom=12
+       //重新定位中心点
     },
-    setMarker(lng, lat, address,siteId) {
+
+    setMarker(lng, lat, address, siteId) {
       if (!lng && !lat) return;
       const size = (address || "").length * 5;
 
@@ -91,11 +97,10 @@ export default {
         label: { content: address, offset: [30, 70] },
         position: [lng, lat],
         icon: require("@/assets/images/ego_box_img_normal.png"),
-        extData: { siteId: siteId},
+        extData: { siteId: siteId },
       };
 
-      this.markers.push(markerLabel)
-
+      this.markers.push(markerLabel);
     },
     // 处理搜索结果，定位到中心点
     onSearchResult(pois) {
@@ -120,7 +125,7 @@ export default {
     },
   },
   data() {
-     let self = this
+    let self = this;
     return {
       searchEvents: {
         init: (e) => {},
@@ -139,11 +144,10 @@ export default {
           // this.markersData.map((item) => {
           //   this.setMarker(item.lng, item.lat, item.address);
           // });
-
-
         },
         click: (e) => {
-          alert(e.target.getExtData().siteId)
+          //alert(e.target.getExtData().siteId);
+          this.$emit("choose", e.target.getExtData().siteId);
           // const { lat, lng } = e.lnglat;
           // this.geocoder.getAddress([lng, lat], (status, result) => {
           //   if (status === "complete" && result.info === "OK") {
@@ -157,75 +161,75 @@ export default {
       // 一些工具插件
       plugin: [
         {
-          pName: 'Geocoder',
+          pName: "Geocoder",
           events: {
-            init (o) {
+            init(o) {
               //console.log("一些工具插件--地址"+o.getAddress())
-            }
-          }
+            },
+          },
         },
         {
           // 定位
-          pName: 'Geolocation',
+          pName: "Geolocation",
           events: {
             init(o) {
               // o是高德地图定位插件实例
               o.getCurrentPosition((status, result) => {
                 if (result && result.position) {
                   // 设置经度
-                  self.lng = result.position.lng
+                  self.lng = result.position.lng;
                   // 设置维度
-                  self.lat = result.position.lat
+                  self.lat = result.position.lat;
                   // 设置坐标
-                  self.center = [self.lng, self.lat]
-                  self.markers.push([self.lng, self.lat])
+                  self.center = [self.lng, self.lat];
+                  self.markers.push([self.lng, self.lat]);
                   // load
-                  self.loaded = true
+                  self.loaded = true;
                   // 页面渲染好后
-                  self.$nextTick()
+                  self.$nextTick();
                 }
-              })
-            }
-          }
+              });
+            },
+          },
         },
         {
           // 工具栏
-          pName: 'ToolBar',
+          pName: "ToolBar",
           events: {
             init(instance) {
-               //console.log("工具栏:"+instance);
-            }
-          }
+              //console.log("工具栏:"+instance);
+            },
+          },
         },
         {
           // 鹰眼
-          pName: 'OverView',
+          pName: "OverView",
           events: {
             init(instance) {
-               //console.log("鹰眼:"+instance);
-            }
-          }
+              //console.log("鹰眼:"+instance);
+            },
+          },
         },
         {
           // 地图类型
-          pName: 'MapType',
+          pName: "MapType",
           defaultType: 0,
           events: {
             init(instance) {
-               //console.log("地图类型:"+instance);
-            }
-          }
+              //console.log("地图类型:"+instance);
+            },
+          },
         },
         {
           // 搜索
-          pName: 'PlaceSearch',
+          pName: "PlaceSearch",
           events: {
             init(instance) {
-               //console.log("搜索:"+instance)
-            }
-          }
-        }
-      ]
+              //console.log("搜索:"+instance)
+            },
+          },
+        },
+      ],
     };
   },
 };

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

@@ -35,12 +35,12 @@
       </el-col>
 
       <el-col :span="18" :xs="12">
-
-            <Map ref="map" :markersData="originData" />
+        <Map ref="map" :markersData="originData" @choose="getDetailData" />
       </el-col>
     </el-row>
 
     <dialog-show ref="dialogform" @ok="getData" />
+
   </div>
 </template>
 
@@ -52,27 +52,27 @@ import tree from "@/assets/mixins/tree";
 import Map from "@/components/Map";
 export default {
   name: "Sitestat",
-  components: { dialogShow ,Map},
+  components: { dialogShow, Map },
   mixins: [table, tree],
   mounted() {
-    console.log(this.pageInfo)
-     // console.log(2222222,this.$route.path)
-        //this.$route.path='/sitestat/list'
-        this.pageInfo.list='/sitestat/list'
+    console.log(this.pageInfo);
+    // console.log(2222222,this.$route.path)
+    //this.$route.path='/sitestat/list'
+    this.pageInfo.list = "/sitestat/list";
   },
 
   created() {
-    this.pageInfo.list='/sitestat/list'
+    this.pageInfo.list = "/sitestat/list";
     this.$get("/sitestat/maplist", {}).then(({ data }) => {
-         this.originData= data.data.map(i=>{
-            let obj={}
-            obj.lng=i.longitude
-            obj.lat=i.latitude
-            obj.address=i.siteName
-            obj.siteId=i.id
-            return obj
-          })
-          this.$refs.map.refresh(this.originData);
+      this.originData = data.data.map((i) => {
+        let obj = {};
+        obj.lng = i.longitude;
+        obj.lat = i.latitude;
+        obj.address = i.siteName;
+        obj.siteId = i.id;
+        return obj;
+      });
+      this.$refs.map.refresh(this.originData);
     });
 
     this.$get("/sitestat/siteTree", {}).then(({ data }) => {
@@ -109,6 +109,14 @@ export default {
         });
     },
 
+    getDetailData(siteId) {
+     // console.log("111");
+
+      //关闭弹窗
+   // this.$refs.popoverRef.doClose()
+    //this.$refs.popoverRef.doShow()  //开启弹窗
+    },
+
     /** 重写新增方法 */
     toAdd(row) {
       this.$refs.dialogform.add(row);
@@ -131,7 +139,7 @@ export default {
     switchStat() {
       console.log("切换列表页面");
       this.$router.push({
-        path: "/sitestat/list"
+        path: "/sitestat/list",
       });
     },
 
@@ -139,18 +147,17 @@ export default {
       console.log("click node", node);
       this.currentNode = node;
       if (node.type === "site") {
-        //分页查询站点业务列表 todo
-        // this.siteMatterTable.siteId = node.id;
-        //this.getSiteMatterTableData();
-       // this.query = { siteId: node.id };
-       // this.getData();
+        let obj = {};
+        obj.lng = node.longitude;
+        obj.lat = node.latitude;
+        this.$refs.map.relocate(obj);
       }
     },
   },
   data() {
     return {
       isExport: false,
-      originData:[],
+      originData: [],
       config: {
         search: [
           {