地图功能-自定义区域管理迁移

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "xtyc_yhhx",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

package.json

@@ -0,0 +1 @@
+{}

xzl-admin/pom.xml

@@ -16,6 +16,11 @@
     </description>
 
     <dependencies>
+        <dependency>
+            <groupId>am.lodge</groupId>
+            <artifactId>am-lodge-commons</artifactId>
+            <version>2.1.0-SNAPSHOT</version>
+        </dependency>
         <dependency>
             <groupId>org.projectlombok</groupId>
             <artifactId>lombok</artifactId>

xzl-admin/src/main/java/com/xzl/web/controller/MonitorAreaController.java

@@ -0,0 +1,43 @@
+package com.xzl.web.controller;
+
+import com.xzl.web.model.monitorArea.entity.MonitorArea;
+import com.xzl.web.model.monitorArea.vo.InfoListVO;
+import com.xzl.web.service.MonitorAreaService;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+import java.util.Map;
+
+@RestController
+@RequestMapping(value = "/monitorArea")
+public class MonitorAreaController {
+
+    private Logger logger = LoggerFactory.getLogger(this.getClass());
+
+    @Autowired
+    private MonitorAreaService monitorAreaService;
+
+
+    @RequestMapping(value = "/infoList",method = RequestMethod.GET)
+    public InfoListVO infoList(@RequestParam(value = "id",required = false)String id,
+                               @RequestParam(value = "areaType",required = false)String areaType){
+        return monitorAreaService.infoList(id,areaType);
+    }
+
+
+    @RequestMapping(value = "/saveArea",method = RequestMethod.POST)
+    public Map<String,String> saveArea(@RequestBody MonitorArea monitorArea){
+        return monitorAreaService.saveArea(monitorArea);
+    }
+
+
+    @RequestMapping(value = "/deleteArea",method = RequestMethod.DELETE)
+    public Map<String,String> deleteArea(@RequestBody List<String> ids){
+        return monitorAreaService.deleteArea(ids);
+    }
+
+
+}

xzl-admin/src/main/java/com/xzl/web/controller/common/ApiController.java

@@ -3,8 +3,8 @@ package com.xzl.web.controller.common;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import com.xzl.web.mapper.CustomerTerminalMapper;
-import com.xzl.web.model.monitor.CustomerSearchDTO;
-import com.xzl.web.model.monitor.CustomerSearchVO;
+import com.xzl.web.model.monitorArea.dto.CustomerSearchDTO;
+import com.xzl.web.model.monitorArea.vo.CustomerSearchVO;
 import com.xzl.web.utils.ConstructUtils;
 import com.xzl.web.utils.RequestUtils;
 import org.apache.commons.lang3.StringUtils;

xzl-admin/src/main/java/com/xzl/web/mapper/CustomerTerminalMapper.java

@@ -1,7 +1,7 @@
 package com.xzl.web.mapper;
 
-import com.xzl.web.model.monitor.CustomerSearchDTO;
-import com.xzl.web.model.monitor.CustomerSearchVO;
+import com.xzl.web.model.monitorArea.dto.CustomerSearchDTO;
+import com.xzl.web.model.monitorArea.vo.CustomerSearchVO;
 import org.apache.ibatis.annotations.Mapper;
 
 import java.util.List;

xzl-admin/src/main/java/com/xzl/web/mapper/MonitorAreaMapper.java

@@ -0,0 +1,17 @@
+package com.xzl.web.mapper;
+
+import com.xzl.web.model.monitorArea.entity.MonitorArea;
+import com.xzl.web.model.monitorArea.entity.WarnClient;
+import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
+
+@Mapper
+public interface MonitorAreaMapper {
+    List<MonitorArea> listArea(@Param(value = "id")String id,@Param(value = "areaType")String areaType);
+    List<WarnClient> noWarnClient();
+    List<WarnClient> areaWarnClient();
+    void saveArea(MonitorArea monitorArea);
+    void deleteArea(List<String> list);
+}

xzl-admin/src/main/java/com/xzl/web/model/monitor/CustomerSearchDTO.java

@@ -1,4 +1,4 @@
-package com.xzl.web.model.monitor;
+package com.xzl.web.model.monitorArea.dto;
 
 import lombok.Data;
 

xzl-admin/src/main/java/com/xzl/web/model/monitorArea/entity/MonitorArea.java

@@ -0,0 +1,17 @@
+package com.xzl.web.model.monitorArea.entity;
+
+import lombok.Data;
+
+@Data
+public class MonitorArea {
+    private String id;
+
+    private String areaName;
+
+    private String areaData;
+
+    private Integer areaType;
+
+    private String areaColor;
+
+}

xzl-admin/src/main/java/com/xzl/web/model/monitorArea/entity/WarnClient.java

@@ -0,0 +1,15 @@
+package com.xzl.web.model.monitorArea.entity;
+
+import lombok.Data;
+
+@Data
+public class WarnClient {
+
+    private String longitude;
+    private String latitude;
+    private String clientName;
+    private String clientCode;
+    private String shortName;
+    private String telephone;
+    private String cnname;
+}

xzl-admin/src/main/java/com/xzl/web/model/monitor/CustomerSearchVO.java

@@ -1,4 +1,4 @@
-package com.xzl.web.model.monitor;
+package com.xzl.web.model.monitorArea.vo;
 
 import lombok.Data;
 

xzl-admin/src/main/java/com/xzl/web/model/monitorArea/vo/InfoListVO.java

@@ -0,0 +1,14 @@
+package com.xzl.web.model.monitorArea.vo;
+
+import com.xzl.web.model.monitorArea.entity.MonitorArea;
+import com.xzl.web.model.monitorArea.entity.WarnClient;
+import lombok.Data;
+
+import java.util.List;
+
+@Data
+public class InfoListVO {
+    private List<MonitorArea> areaInfo;
+    private List<WarnClient> noWarnClientInfo;
+    private List<WarnClient> WarnClientInfo;
+}

xzl-admin/src/main/java/com/xzl/web/service/ExcelService.java

@@ -0,0 +1,50 @@
+package com.xzl.web.service;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.InputStream;
+import java.util.List;
+import java.util.Map;
+import java.util.function.Function;
+
+/**
+ * @ClassName: ExcelService
+ * @Description: 用于 Excel 相关操作
+ * Modification History:
+ * Date                  Author                 Version       Description
+ * ---------------------------------------------------------
+ * 2018/9/3     ZhangShuling       v1.0.0
+ */
+public interface ExcelService {
+
+  /**
+   * excel 导出
+   * @param header  标题
+   * @param data  数据
+   * @param fileName 输出文件名
+   * @param response
+   * @throws Exception
+   */
+  public void export(Map<String, Object> header, List<Map<String, Object>> data, String fileName,
+                     HttpServletResponse response) throws Exception;
+
+
+  /**
+   * 解析 excel中的第 index个sheet （从0开始）
+   * @param in
+   * @param sheetIndex
+   * @return
+   * @throws Exception
+   */
+  public   List<List<Object>>  parse(InputStream in, int sheetIndex) throws Exception;
+
+  /**
+   *  解析excel
+   * @param in
+   * @return
+   * @throws Exception
+   */
+  public  List<List<List<Object>>>  parse(InputStream in) throws Exception;
+
+  public void parseAndConsumer(HttpServletRequest request, HttpServletResponse response, int sheetIndex, Function function) throws Exception;
+}

xzl-admin/src/main/java/com/xzl/web/service/MonitorAreaService.java

@@ -0,0 +1,17 @@
+package com.xzl.web.service;
+
+
+import com.xzl.web.model.monitorArea.entity.MonitorArea;
+import com.xzl.web.model.monitorArea.vo.InfoListVO;
+
+import java.util.List;
+import java.util.Map;
+
+public interface MonitorAreaService {
+
+    InfoListVO infoList(String id,String areaType);
+
+    Map<String,String> saveArea(MonitorArea monitorArea);
+
+    Map<String, String> deleteArea(List<String> ids);
+}

xzl-admin/src/main/java/com/xzl/web/service/impl/MonitorAreaServiceImpl.java

@@ -0,0 +1,64 @@
+package com.xzl.web.service.impl;
+
+
+import am.lodge.util.UUIDUtils;
+import com.alibaba.fastjson.JSON;
+import com.xzl.web.mapper.MonitorAreaMapper;
+import com.xzl.web.model.monitorArea.entity.MonitorArea;
+import com.xzl.web.model.monitorArea.vo.InfoListVO;
+import com.xzl.web.service.MonitorAreaService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+@Service
+public class MonitorAreaServiceImpl implements MonitorAreaService {
+
+    @Autowired
+    private MonitorAreaMapper monitorAreaMapper;
+
+    @Override
+    public InfoListVO infoList(String id,String areaType) {
+        InfoListVO infoListVO=new InfoListVO();
+        infoListVO.setAreaInfo(monitorAreaMapper.listArea(id,areaType));
+        infoListVO.setWarnClientInfo(monitorAreaMapper.areaWarnClient());
+        infoListVO.setNoWarnClientInfo(monitorAreaMapper.noWarnClient());
+        return infoListVO;
+    }
+
+    @Override
+    public Map<String,String> saveArea(MonitorArea monitorArea) {
+        monitorArea.setId(UUIDUtils.uuid());
+        Map<String,String> map=new HashMap<>();
+        try {
+            monitorAreaMapper.saveArea(monitorArea);
+        } catch (Exception e) {
+            e.printStackTrace();
+            map.put("status","error");
+            map.put("message","保存失败!");
+            return map;
+        }
+        map.put("status","success");
+        map.put("message","保存成功!");
+        return map;
+    }
+
+    @Override
+    public Map<String, String> deleteArea(List<String> ids) {
+        Map<String,String> map=new HashMap<>();
+        try {
+            monitorAreaMapper.deleteArea(ids);
+        } catch (Exception e) {
+            e.printStackTrace();
+            map.put("status","error");
+            map.put("message","删除失败!");
+            return map;
+        }
+        map.put("status","success");
+        map.put("message","删除成功!");
+        return map;
+    }
+}

xzl-admin/src/main/resources/mapper/CustomerTerminalMapper.xml

@@ -2,7 +2,7 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
 <mapper namespace="com.xzl.web.mapper.CustomerTerminalMapper">
 
-    <select id="getCustomerListByPosition"  resultType="com.xzl.web.model.monitor.CustomerSearchVO" parameterType="com.xzl.web.model.monitor.CustomerSearchDTO">
+    <select id="getCustomerListByPosition" resultType="com.xzl.web.model.monitorArea.vo.CustomerSearchVO" parameterType="com.xzl.web.model.monitorArea.dto.CustomerSearchDTO">
         select t.* from (
             select a.client_code as "clientCode",
                    a.client_name as "clientName",

xzl-admin/src/main/resources/mapper/MonitorAreaMapper.xml

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
+<mapper namespace="com.xzl.web.mapper.MonitorAreaMapper">
+    <sql id="TableName">
+        MONITOR_AREA
+    </sql>
+
+    <sql id="Columns">
+        ID "id", AREA_NAME "areaName",AREA_DATA "areaData",AREA_TYPE "areaType",AREA_COLOR "areaColor"
+    </sql>
+
+
+    <select id="listArea" resultType="com.xzl.web.model.monitorArea.entity.MonitorArea">
+        SELECT
+        <include refid="Columns"/>
+        FROM
+        <include refid="TableName"/>
+        <where>
+            <if test="id != null">AND ID = #{id}</if>
+            <if test="areaType != null">AND AREA_TYPE = #{areaType}</if>
+        </where>
+    </select>
+
+    <select id="noWarnClient" resultType="com.xzl.web.model.monitorArea.entity.WarnClient">
+        select
+        vbc.LONGITUDE 'longitude',
+        vbc.LATITUDE 'latitude',
+        vbc.CLIENT_NAME 'clientName',
+        vbc.CLIENT_CODE 'clientCode',
+        vbc.short_name "shortName",
+        vbc.TELPHONEA "telephone",
+        b.cnname "cnname"
+        from
+        v_b_client vbc
+        JOIN T_B_EMPLOYEE B ON vbc.MANAGER_CODE=B.EMPLOYEE_CODE
+        where
+        STATE_CODE = '02'
+        and CLIENT_CODE not in (
+        select
+        mac.CLIENT_ID
+        from
+        monitor_area_client mac
+        )
+    </select>
+
+    <select id="areaWarnClient" resultType="com.xzl.web.model.monitorArea.entity.WarnClient">
+        select
+            vbc.LONGITUDE 'longitude',
+            vbc .LATITUDE 'latitude',
+            vbc.CLIENT_NAME 'clientName',
+            vbc.CLIENT_CODE 'clientCode',
+            vbc.short_name "shortName",
+            vbc.TELPHONEA "telephone",
+            b.cnname "cnname"
+        from
+            v_b_client vbc
+        JOIN T_B_EMPLOYEE B ON vbc.MANAGER_CODE=B.EMPLOYEE_CODE
+        where
+            STATE_CODE = '02'
+            and vbc.CLIENT_CODE in (
+                select
+                    ma.CLIENT_ID
+                from
+                    monitor_area_client ma
+                where
+                    ma.AREA_ID in (
+                        select
+                            mac.AREA_ID
+                        from
+                            monitor_area_client mac
+                        where
+                            mac.`TYPE` in (1,3)
+                        group by
+                            mac.AREA_ID
+                        having
+                            count(*) >2
+                    )
+            )
+    </select>
+
+
+    <insert id="saveArea" parameterType="com.xzl.web.model.monitorArea.entity.MonitorArea">
+        INSERT INTO MONITOR_AREA(ID,AREA_NAME,AREA_TYPE,AREA_COLOR,AREA_DATA) VALUES
+        (#{id},#{areaName},#{areaType},#{areaColor},#{areaData})
+    </insert>
+
+    <delete id="deleteArea" parameterType="list">
+        DELETE FROM MONITOR_AREA WHERE ID IN
+        <foreach collection="list" item="item" separator="," open="(" close=")">
+            #{item}
+        </foreach>
+    </delete>
+
+
+</mapper>

xzl-ui/src/views/monitor/map/customAreaIndex.vue

@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <el-row style="height: 50px;padding-top: 7.2px;padding-left: 15px">
+      <el-button type="success" @click="addArea">增加</el-button>
+      <el-button type="danger" @click="deleteArea">删除</el-button>
+    </el-row>
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      size="medium"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        type="selection"
+        align="center"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        type="index"
+        label="序号"
+        width="100">
+      </el-table-column>
+      <el-table-column
+        prop="areaName"
+        label="自定义区域管理"
+        width="1100">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="操作"
+        width="200">
+        <template slot-scope="scope">
+          <el-button
+            @click.native.prevent="viewArea(scope.$index, tableData)"
+            type="text"
+            size="small"
+            :disabled="btnEnabled"
+          >
+            查看
+          </el-button>
+          <el-button
+            @click.native.prevent="changeArea(scope.$index, tableData)"
+            type="text"
+            size="small"
+            :disabled="btnEnabled"
+          >
+            修改
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      title="提示"
+      :visible.sync="formVisible"
+      width="90%"
+      :before-close="handleClose"
+    >
+      <div style="width: 75%;height: 550px;display: inline-block;">
+        <div id="container" style="height: 100%">
+
+        </div>
+      </div>
+      <el-divider direction="vertical"></el-divider>
+      <div style="width: 20%;display: inline-block;float: right">
+        <el-form :model="form">
+          <el-form-item label="区域名称:">
+            <el-input v-model="form.areaName" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="区域颜色:">
+            <el-color-picker v-model="form.areaColor" size="small"></el-color-picker>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" :disabled="btnEnabled" @click="savePoly()">生成封闭空间</el-button>
+          <el-button type="primary" :disabled="btnEnabled" @click="saveArea()">保 存</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+import request from '@/utils/request'
+
+export default {
+  data() {
+    return {
+      tableData: [],
+      formVisible: false,
+      form: {
+        areaData: "",
+        areaColor: "",
+        areaName: "",
+        areaType: 3
+      },
+      map: null,
+      pointList: [],
+      btnEnabled: false,
+      multipleSelection: []
+
+    }
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initMap() {
+      const t = this;
+      this.map = new BMap.Map("container", {enableMapClick: false});        // 创建Map实例 命名空间为BMAP
+      this.map.centerAndZoom(new BMap.Point(113.465771, 30.368834), 13);  // 初始化地图,设置中心点坐标和地图级别
+      this.map.setCurrentCity("仙桃");
+      this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
+      this.map.addEventListener("click", function (e) {    //给地图添加点击事件
+        var lng = e.point.lng;
+        var lat = e.point.lat;
+        //创建标注位置
+        var pt = new BMap.Point(lng, lat);
+        var marker = new BMap.Marker(pt);  // 创建标注
+        t.map.addOverlay(marker);
+        t.pointList.push(pt);
+      });
+    },
+    initData() {
+      const t = this;
+      request({
+        url: "/monitorArea/infoList?areaType=3",
+        method: "get"
+      }).then(rs => {
+        t.tableData = rs.areaInfo;
+      })
+    },
+    viewArea(index, tableData) {
+      this.form=tableData[index];
+      this.formVisible=true;
+      this.btnEnabled=true;
+      JSON.parse(tableData[index].areaData).forEach(area => {
+        var pt = new BMap.Point(area.longitude, area.latitude);
+        this.pointList.push(pt)
+      });
+      setTimeout(() => {
+        this.initMap();
+        var polygon = new BMap.Polygon(this.pointList, {fillColor: this.form.areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
+        this.map.addOverlay(polygon);
+      }, 100)
+    },
+    changeArea(index, tableData) {
+      this.form=tableData[index];
+      this.formVisible=true;
+      JSON.parse(tableData[index].areaData).forEach(area => {
+        var pt = new BMap.Point(area.longitude, area.latitude);
+        this.pointList.push(pt)
+      });
+      setTimeout(() => {
+        this.initMap();
+        var polygon = new BMap.Polygon(this.pointList, {fillColor: this.form.areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
+        this.map.addOverlay(polygon);
+      }, 100)
+    },
+    addArea() {
+      this.formVisible = true;
+      this.pointList = [];
+      setTimeout(() => {
+        this.initMap()
+      }, 100)
+    },
+    deleteArea() {
+      const ids = [];
+      this.multipleSelection.forEach(data=>{
+        ids.push(data.id);
+      })
+      const t=this;
+      request({
+        url: "/monitorArea/deleteArea",
+        method: "delete",
+        data: ids
+      }).then(rs=>{
+        t.$message({
+          message:rs.message,
+          type:rs.status
+        })
+        t.initData();
+      });
+    },
+    savePoly() {
+      let areaColor = this.form.areaColor;
+      if (!areaColor) {
+        this.$modal.msgError("表单填写不完整!");
+        return;
+      }
+      console.log(this.pointList)
+      var polygon = new BMap.Polygon(this.pointList, {fillColor: areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
+      this.map.addOverlay(polygon);
+    },
+    saveArea() {
+      var listStr = [];
+      if (this.pointList.length < 3) {
+        this.$modal.msgError("至少选择三点，形成封闭区域!");
+        return
+      }
+      this.pointList.forEach(point => {
+        listStr.push({longitude: point.lng, latitude: point.lat})
+      })
+      this.form.areaData = JSON.stringify(listStr);
+      var t = this;
+      request({
+        url: "/monitorArea/saveArea",
+        method: "post",
+        data: this.form
+      }).then(rs => {
+        t.$message({
+          message:rs.message,
+          type:rs.status
+        })
+        t.formVisible=false;
+        t.initData();
+        }
+      )
+    },
+    handleClose() {
+      this.formVisible=false;
+      this.btnEnabled=false;
+      this.pointList=[];
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    }
+
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.BMap_cpyCtrl {
+  display: none;
+}
+
+.anchorBL {
+  display: none;
+}
+
+.el-table {
+  width: 100%;
+
+  .el-table__header-wrapper table, .el-table__body-wrapper table {
+    width: 100% !important;
+  }
+
+  .el-table__body, .el-table__footer, .el-table__header {
+    table-layout: auto;
+  }
+}
+</style>

xzl-ui/src/views/monitor/map/customerPositionBmap.vue

@@ -59,7 +59,6 @@ export default {
   methods: {
     addMarker(points) {
       //循环建立标注点
-      var customerListHtml = ''
       var len = points.length;
       for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {
         var point = points[i];
@@ -157,15 +156,12 @@ export default {
       this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
       this.map.disableDoubleClickZoom();    //禁用双击放大
       this.map.addOverlay(marker);
-
-      console.log(2222)
     },
     querySearch(queryString, cb) {
       request({
         url: '/api/map/search?key='+queryString,
         method: 'get'
       }).then(function (res) {
-        console.log(res)
         cb(res);
       })
     },
@@ -180,7 +176,6 @@ export default {
           method: 'post',
           data: {latitude: item.latitude, longitude: item.longitude, count: 10, distance: this.queryParams.distance/1000}
         }).then(function (rs) {
-          console.log(1111,rs)
           if (rs && rs.length) {
             t.addMarker(rs);
           } else {

xzl-ui/src/views/monitor/map/warn.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <div id="container" v-bind:style="'width: 100%;border: 1px solid #cecece;height:'+pageHeight*0.9+'px;'">
+    </div>
+  </div>
+</template>
+<script>
+import request from '@/utils/request'
+
+export default {
+  data() {
+    return {
+      address: "",
+      queryParams: {
+        address: {},
+        distance: "50"
+      },
+      placeInfo: [
+        {value: "", label: ""}
+      ],
+      distanceOptions: [
+        {value: "50", label: "50米"},
+        {value: "100", label: "100米"},
+        {value: "200", label: "200米"}
+      ],
+      map: null,
+      pageHeight: document.documentElement.clientHeight
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.initMap()
+    }, 100)
+  },
+  methods: {
+    initMap() {
+      this.map = new BMap.Map("container", {enableMapClick: false});        // 创建Map实例 命名空间为BMAP
+      this.map.centerAndZoom(new BMap.Point(113.465771, 30.368834), 13);  // 初始化地图,设置中心点坐标和地图级别
+      this.map.setCurrentCity("仙桃");
+      this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
+      this.map.disableDoubleClickZoom();    //禁用双击放大
+      this.init();
+    },
+    init() {
+      const t = this;
+      request({
+        url: '/monitorArea/infoList',
+        method: "get"
+      }).then(function (rs) {
+        const areaInfo = rs.areaInfo;
+        const noWarnClientInfo = rs.noWarnClientInfo;
+        const WarnClientInfo = rs.WarnClientInfo;
+        console.log(areaInfo, noWarnClientInfo, WarnClientInfo);
+
+        areaInfo.forEach(data => {
+          if (data.areaType == 1) {
+            let listData = JSON.parse(data.areaData);
+            let list = [];
+            listData.forEach(areaData => {
+              let pt = new BMap.Point(areaData.longitude, areaData.latitude);
+              list.push(pt);
+            });
+            let polygon = new BMap.Polygon(list, {fillColor: data.areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
+            t.map.addOverlay(polygon);
+            var x = 0,
+              y = 0;
+            var path = polygon.getPath();//返回多边型的点数组；ply是多边形覆盖物
+            for (var k = 0; k < path.length; k++) {
+              x = x + parseFloat(path[k].lng);
+              y = y + parseFloat(path[k].lat);
+            }
+            x = x / path.length;
+            y = y / path.length;
+            let points = [];
+            let pt = new BMap.Point(x, y);
+            points.push(pt);
+            let icon = new BMap.Icon("/admin/images/area_icon16x16.png", new BMap.Size(16, 16));
+            let options = {
+              icon: icon
+            }
+            let marker = new BMap.Marker(pt, options);
+            t.map.addOverlay(marker);
+            marker.addEventListener('click', function (e) {
+            });
+          }
+        });
+
+        let points = [];
+        noWarnClientInfo.forEach(data => {
+          let pt = new BMap.Point(data.longitude, data.latitude);
+          pt.shortName = data.shortName;
+          pt.clientCode = data.clientCode;
+          pt.telephone = data.telephone;
+          pt.cnname = data.cnname;
+          points.push(pt);
+        });
+        let options = {
+          size: BMAP_POINT_SIZE_NORMAL,
+          shape: BMAP_POINT_SHAPE_STAR,
+          color: '#848080'
+        }
+        let pointCollection = new BMap.PointCollection(points, options);
+
+        pointCollection.addEventListener('click', function (e) {
+          var content =
+            '<ul class="map-customer-info">'
+            + '<li ><span>许可证号：</span>' + e.point.clientCode + '</li>'
+            + '<li ><span>名称：</span>' + e.point.shortName + '</li>'
+            + '<li ><span>电话：</span>' + e.point.telephone + '</li>'
+            + '<li ><span>客户经理：</span>' + e.point.cnname + '</li>'
+            + '</ul>';
+          t.$alert(content, '零售户信息', {
+            dangerouslyUseHTMLString: true
+          });
+        });
+        t.map.addOverlay(pointCollection);
+
+
+      });
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.BMap_cpyCtrl {
+  display: none;
+}
+
+.anchorBL {
+  display: none;
+}
+</style>