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

<template>
  <div>
    <div class="app-container" style="padding-left: 20px;width: 100%;height: 60px;">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="地址:" prop="address">
          <el-autocomplete
            class="inline-input"
            v-model="address"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="距离:" prop="distance">
          <el-select v-model="queryParams.distance"  @change="handleSelect">
            <el-option
              v-for="item in distanceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区域:" prop="region">
          <el-select v-model="queryParams.area" value-key="id" filterable @change="selectArea($event)">
            <el-option
              v-for="item in areaOptions"
              :key="item.id"
              :label="item.name"
              :value="item"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.type=="1"?"饱和":"可办" }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div id="container" v-bind:style="'width: 100%;border: 1px solid #cecece;height:'+pageHeight*0.797+'px;'">
    </div>
    <div class="scroll-box-Position">
      <h3>区域许可证办理情况</h3>
      <div class="scroll-item-Position">
        <vue-seamless-scroll :data="areaOptions" class="warp" :class-option="defaultOption">
          <div v-for="c in areaOptions" class="customer-info">
            <table align="center" width="98%" cellpadding="0">
              <tr>
                <td width="50%">区域名:</td>
                <td width="50%">{{c.name}}</td>
              </tr>
              <tr>
                <td>状态:</td>
                <td>{{c.type=='1'?'已饱和':"可办证"}}</td>
              </tr>
              <tr>
                <td>可办证:</td>
                <td>{{c.type=='1'?"0":c.num}}</td>
              </tr>
            </table>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  data() {
    return {
      address: "",
      queryParams: {
        address: {},
        distance: "50",
        area: ""
      },
      placeInfo: [
        {value: "", label: ""}
      ],
      selectPoint: {},
      distanceOptions: [
        {value: "50", label: "50米"},
        {value: "100", label: "100米"},
        {value: "200", label: "200米"}
      ],
      areaOptions: [
        {id: "", name: "",type:"",num:""},
      ],
      map: null,
      pageHeight: document.documentElement.clientHeight
    }
  },
  components: {
    vueSeamlessScroll
  },
  computed: {
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
    setTimeout(() => {
      this.initMap()
    }, 100)
  },
  mounted() {
    this.initAreaOptions();
  },
  methods: {
    initAreaOptions(){
      const t=this;
      request({
        url:"/monitorArea/getRegionMonitorInfo"
      }).then(rs=>{
        t.areaOptions=rs;
      })
    },
    addMarker(points) {
      //循环建立标注点
      var len = points.length;
      for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {
        var point = points[i];
        this.addMarkerPoint(point);
      }
    },
    addTargetMarkerPoint(pointInfo, distance) {
      let pt = new BMap.Point(pointInfo.longitude, pointInfo.latitude);
      let icon = new BMap.Icon(require("@/assets/images/area_icon16x16.png"), new BMap.Size(16, 16));
      let options = {
        icon: icon
      }
      var marker = new BMap.Marker(pt, options)
      var circle = new BMap.Circle(pt, distance, {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5
      });
      var content =
        '<ul class="map-customer-info">'
        + '<li ><span>名称：</span>' + pointInfo.value + '</li>'
        + '<li ><span>地址：</span>' + pointInfo.address + '</li>'
        + '</ul>';
      marker.addEventListener("mouseover", () => {
        var infoWindow = new BMap.InfoWindow(content);
        marker.openInfoWindow(infoWindow);
      });
      marker.addEventListener("mouseout", () => {
        marker.closeInfoWindow();
      });
      this.map.addOverlay(marker)
      this.map.addOverlay(circle)
      this.map.setZoom(20);
      // 移动到目标点
      this.map.setCenter(pt)
    },
    addMarkerPoint(pointInfo) {
      let pt = new BMap.Point(pointInfo.longitude, pointInfo.latitude);
      var marker = new BMap.Marker(pt)

      this.showInfo(marker, pointInfo)
      this.map.addOverlay(marker)
    },
    showInfo(thisMarker, point) {
      if (!point.clientCode) {
        console.log('未取到值 ...')
        return;
      }
      let pt = new BMap.Point(point.longitude, point.latitude);
      //获取点的信息
      var content =
        '<ul class="map-customer-info">'
        + '<li ><span>许可证号：</span>' + point.clientCode + '</li>'
        + '<li ><span>名称：</span>' + point.shortName + '</li>'
        + '<li ><span>店名：</span>' + point.clientName + '</li>'
        + '<li ><span>电话：</span>' + point.telphonea + '</li>'
        + '<li ><span>地址：</span>' + point.address + '</li>'
        + '<li ><span>客户经理：</span>' + point.cnname + '</li>'
        + '<li ><span>距离：</span>' + this.showDist(parseFloat(point.distance)) + '</li>'
        + '</ul>';
      thisMarker.addEventListener("mouseover", () => {
        var infoWindow = new BMap.InfoWindow(content);
        thisMarker.openInfoWindow(infoWindow);
      });
      thisMarker.addEventListener("mouseout", () => {
        thisMarker.closeInfoWindow();
      });
    },
    showDist(d) {
      return d ? d.toFixed(2) * 1000 + 'M' : '未知';
    },
    initMap() {
      var longitude = 113.450713
      var latitude = 30.366039
      let pt = new BMap.Point(longitude, latitude);
      var marker = new BMap.Marker(pt)

      // 鼠标经过窗口模板
      let tem = `<ul class="map-customer-info">
	                <li>仙桃市烟草专卖局</li>
	                </ul>`;

      marker.addEventListener("mouseover", () => {
        var infoWindow = new BMap.InfoWindow(tem);
        marker.openInfoWindow(infoWindow);
      });
      marker.addEventListener("mouseout", () => {
        marker.closeInfoWindow();
      });

      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.map.addOverlay(marker);
    },
    querySearch(queryString, cb) {
      request({
        url: '/api/map/search?key=' + queryString,
        method: 'get'
      }).then(function (res) {
        cb(res);
      })
    },
    handleSelect(item) {
      if (!this.queryParams.distance) {
        return;
      }
      if (typeof item == "object") {
        this.selectPoint = item;
      }
      const t = this;
      this.map.clearOverlays();
      this.addTargetMarkerPoint(t.selectPoint, this.queryParams.distance);
      // 查询周围选定距离distance 以内的零售户
      request({
        url: "/api/map/customer/search",
        method: 'post',
        data: {
          latitude: t.selectPoint.latitude,
          longitude: t.selectPoint.longitude,
          count: 10,
          distance: this.queryParams.distance / 1000
        }
      }).then(function (rs) {
        if (rs && rs.length) {
          t.addMarker(rs);
        } else {
          t.$modal.msgError("未找到附近零售户");
        }
      })

    },
    selectArea(option) {
      if(option.type==1){
        this.$message({
          message: option.name+"零售户已饱和",
          type:"error"
        });
      }else{
        this.$message({
          message: option.name+"零售户可办"+option.num+"户",
          type:"success"
        });
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none;
}

.scroll-box-Position {
  width: 240px;
  height: 200px !important;
  position: absolute;
  z-index: 1999;
  background: #ffffff;
  right: 10px;
  top: 60px !important;
  border-radius: 8px;
  opacity: 0.8;
}

.scroll-box-Position h3 {
  text-align: center;
  line-height: 40px;
}

.scroll-item-Position {
  height: 100px !important;
  overflow: hidden;
}

.customer-info {
  font-size: 12px;
  margin-top: 20px;
  padding: 2px;
}
</style>