|
@@ -0,0 +1,259 @@
|
|
|
+<template>
|
|
|
+ <div><!--
|
|
|
+ <div
|
|
|
+ style="position: absolute; height: 40px; width: 160px; opacity: 0.8; z-index: 9999; 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>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import request from '@/utils/request'
|
|
|
+ import {getToken} from "@/utils/auth";
|
|
|
+
|
|
|
+ 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': '内管灰名单预警'},
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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?illegalTypes=1,2',
|
|
|
+ method: "get"
|
|
|
+ }).then(function (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;
|
|
|
+ }
|
|
|
+</style>
|