新增客服地图

src/assets/common/lang/zhCN/Ground.js

@@ -677,5 +677,6 @@ export const obj = {
   suoshusj: '所属上级',
   shangpinlxmc: '商品类型名称',
   qingshangctp: '请上传图片',
+  kehuditu: '客户地图'
 }
 export default obj;
\ No newline at end of file

src/assets/common/lang/zhTW/Ground.js

@@ -677,5 +677,6 @@ xiugaishangplx: '修改商品類型',
 suoshusj: '所屬上級',
 shangpinlxmc: '商品類型名稱',
 qingshangctp: '請上傳圖片',
+kehuditu: '客戶地圖'
 }
 export default obj;
\ No newline at end of file

src/components/SalesModule/customerMap.vue

+<style>
+.customerMap{
+  width: 100%;
+  height: 100%;
+}
+</style>
+<template>
+  <div class="customerMap">
+    <div :style="{height:'100%',width:'100%'}" ref="myEchart" id="centerMpBaidu"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      map: {},
+      baiduMapData: [
+        { lng: 120.03469, lat: 30.303904, type: 2},
+        { lng: 120.088499, lat: 30.275182, type: 2},
+        { lng: 120.089249, lat: 30.317759, type: 0},
+        { lng: 120.161941, lat: 30.283073, type: 0 },
+        { lng: 120.174941, lat: 30.275073, type: 0 },
+        { lng: 120.186941, lat: 30.297073, type: 1 },
+        { lng: 120.198941, lat: 30.299073, type: 1 },
+      ]
+    };
+  },
+  methods: {
+    creatMap(){
+      let _this = this
+      let data = this.baiduMapData;
+      //实例化，并设置最大最小缩放层级
+      const map = new BMap.Map("centerMpBaidu", {
+        minZoom: 3,
+        maxZoom: 20,
+      });
+      //设置中心点、默认缩放层级
+      if (data.length > 0) {
+        map.centerAndZoom(new BMap.Point(data[0].lng, data[0].lat), 10);
+      } else {
+        map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
+      }
+      //可以鼠标缩放
+      map.enableScrollWheelZoom(true);
+      const points = data
+      const markerClusterers = [[], [], []]
+      points.forEach(item => {
+        //实例化点
+        const point = new BMap.Point(item.lng, item.lat)
+        //自定义点的样式
+        // type 0 激活 绿色 20191125015057879 
+        //      1 未拜访 紫色 20191125015102111
+        //      2 未激活 红色 20191125015100234
+        const icon = new BMap.Icon(
+          item.type === 0 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015057879.png' : item.type === 1 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015102111.png' : 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015100234.png',
+          new BMap.Size(30, 30)
+        );
+        //生成点标注
+        const marker = new BMap.Marker(point, { icon: icon });
+        // const infoWindow = new BMap.InfoWindow('简易的信息窗口')
+        //绑定事件，显示窗口
+        marker.addEventListener("click", function(){
+          _this.markerClick(point, item)
+          // map.openInfoWindow(infoWindow,point);
+        });
+        markerClusterers[item.type || 0].push(marker)
+        //添加点标注即添加覆盖物
+        map.addOverlay(marker);
+      })
+       // //2种聚合的实现
+      const size = new BMap.Size( 30, 30 )
+      var markerClusterer1 = new window.BMapLib.MarkerClusterer(map, {
+        markers: markerClusterers[1],
+        styles: [{
+          url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015102111.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015102111.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015102111.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }]
+      })
+      var markerClusterer2 = new window.BMapLib.MarkerClusterer(map, {
+        markers: markerClusterers[2],
+        styles: [{
+          url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015100234.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015100234.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015100234.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }]
+      })
+      var markerClusterer4 = new window.BMapLib.MarkerClusterer(map, { markers: markerClusterers[0],
+        styles: [{
+          url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015057879.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015057879.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }, {
+          url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125015057879.png',
+          size: size,
+          textSize: 18,
+          textColor: 'white',
+        }] })
+      this.map = map
+    },
+    markerClick(point, item){
+      this.apipost('financestatistics_post_GetCustomerInfoForB2BKB', {CustomerId: item.CustomerId}, res=>{
+        if(res.data.resultCode == 1) {
+          const infoWindow = new BMap.InfoWindow(`
+          <p>联系人：${res.data.data.Contact}</p>
+          <p>联系电话：${res.data.data.ContactNumber}</p>
+          <p>门店名称：${res.data.data.CustomerName}</p>
+          <p>门店地址：${res.data.data.Address}</p>
+          `)
+          this.map.openInfoWindow(infoWindow, point);
+        }
+      })
+    }
+  },
+  mounted() {
+    this.creatMap()
+  }
+};
+</script>
\ No newline at end of file

src/components/SalesModule/customerTransfer.vue

@@ -50,6 +50,12 @@
         </li>
         <li style="float:right;padding-top:10px;color:#111111">{{$t('salesModule.JYETJ')}}：{{datainfo.sumMoney}}</li>
         <li>
+          <input
+            type="button"
+            class="hollowFixedBtn"
+            :value="$t('ground.kehuditu')"
+            @click="getMap()"
+          >
           <input
             type="button"
             class="hollowFixedBtn"
@@ -606,6 +612,9 @@ export default {
     getUrl(item){
       this.$router.push({ name:"CustomerAnalysis",query:{"customerId":item.CustomerIdS,blank: 'y'} })
     },
+    getMap(){
+      this.$router.push({ name:"customerMap",query:{blank: 'y'} })
+    },
     updateData: function(obj) {
       this.apipost(
         "app_customer_GetLeaderCustomerInfo",

src/router/config.js

@@ -2191,6 +2191,14 @@ export default {
                                 title: '客户转交'
                             },
                         },
+                        { //  客户 地图
+                            path: '/customerMap',
+                            name: 'customerMap',
+                            component: resolve => require(['@/components/SalesModule/customerMap'], resolve),
+                            meta: {
+                                title: '客户地图'
+                            },
+                        },
                         { // 销售   活动统计
                             path: '/ActivityStatistics',
                             name: 'ActivityStatistics',