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

<template>
  <div>
    <div
      style="position: absolute; height: 40px; width: 160px; opacity: 0.8; z-index: 1999; padding: 8px; top:6px; left: 6px; background: #fff; border-radius: 8px;">
      <button @click="uploadFile" style="width: 98%; text-align: center">导入违规零售户</button>
    </div>
    <div id="container" v-bind:style="'width: 100%;border: 1px solid #cecece;height:'+pageHeight*0.9+'px;'">
    </div>


    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <a href="/illegal_customer_template.xlsx" style="padding-left:10px; color: coral">下载违规零售户模板</a>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <div class="scroll-box">
      <h3>违规零售户列表</h3>
      <div class="scroll-item">
        <vue-seamless-scroll :data="list" class="warp">
          <div v-for="c in list" class="customer-info">
            <table align="center" width="98%" cellpadding="0">
              <tr>
                <td width="35%">许可证号</td>
                <td width="65%">{{c.licenceNo}}</td>
              </tr>
              <tr>
                <td>零售户姓名</td>
                <td>{{c.customerName}}</td>
              </tr>
              <tr>
                <td>违规类型</td>
                <td>{{typeItems[c.illegalType].typeName}}</td>
              </tr>
              <tr>
                <td>地址</td>
                <td>{{c.address}}</td>
              </tr>
            </table>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import {getToken} from "@/utils/auth";
  import vueSeamlessScroll from 'vue-seamless-scroll'

  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,
        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: {Authorization: "Bearer " + getToken()},
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/buss/illegal-customer/importData"
        },
        typeItems: {
          '1': {color: 'red', 'typeName': '许可证异常信息'},
          '2': {color: 'orange', 'typeName': '经营户违规信息'},
          '3': {color: 'yellow', 'typeName': '真烟外流信息进行数据关链'},
          '4': {color: 'blue', 'typeName': '产生许可证异常预警'},
          '5': {color: 'green', 'typeName': '内管黑名单预警'},
          '6': {color: 'gray', 'typeName': '内管灰名单预警'},
        },
        list: []
      }
    },
    components: {
      vueSeamlessScroll
    },
    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), 10);  // 初始化地图,设置中心点坐标和地图级别
        this.map.setCurrentCity("仙桃");
        this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        this.map.disableDoubleClickZoom();    //禁用双击放大
        // this.init();
        this.getList()
      },
      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 == 3) {
              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(require("@/assets/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) {
                var content =
                  '<ul class="map-customer-info">'
                  + '<li ><span>社区名称：</span>' + 'xxx社区' + '</li>'
                  + '<li ><span>人口：</span>' + 'xxxxxx' + '</li>'
                  + '<li ><span>零售户数量：</span>' + 'xxx' + '</li>'
                  + '<li ><span>可办证数量：</span>' + 'xx' + '</li>'
                  + '</ul>';
                t.$alert(content, '社区信息', {
                  dangerouslyUseHTMLString: true
                });
              });
            }
          });

          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>'
              + '<li ><span>库存：</span>' + 666 + '</li>'
              + '</ul>';
            t.$alert(content, '零售户信息', {
              dangerouslyUseHTMLString: true
            });
          });
          t.map.addOverlay(pointCollection);


        });
      },
      getList() {
        const t = this;
        request({
          url: '/buss/illegal-customer/all',
          method: "get"
        }).then(function (rs) {
          t.list = rs
          // 描点
          rs.forEach(o => {
            let pt = new BMap.Point(o.longitude, o.latitude);
            const ct = t.typeItems[o.illegalType];
            let marker = new BMap.Marker(pt, {
              // 指定Marker的icon属性为Symbol
              icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
                scale: 1.5,//图标缩放大小
                fillColor: ct.color,//填充颜色
                fillOpacity: 0.8//填充透明度
              })
            });
            t.map.addOverlay(marker);

            marker.addEventListener('click', function (e) {
              var content =
                '<ul class="map-customer-info">'
                + '<li ><span>零售户名称：</span>' + o.customerName + '</li>'
                + '<li ><span>许可证号：</span>' + o.licenceNo + '</li>'
                + '<li ><span>地址：</span>' + o.address + '</li>'
                + '<li ><span>违规类型：</span>' + ct.typeName + '</li>'
                + '</ul>';
              t.$alert(content, '零售户违规信息', {
                dangerouslyUseHTMLString: true
              });
            });
          })
        })
      },
      uploadFile() {
        this.upload.title = "导入违规零售户";
        this.upload.open = true;
      }
      ,
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      }
      ,
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      }
      ,
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
        this.initMap();
      }
      ,
    }
  }
</script>

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

  .anchorBL {
    display: none;
  }

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

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

  .scroll-item {
    height: 480px;
    overflow: hidden;
  }

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