|
@@ -1,7 +1,10 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div id="container" v-bind:style="'width: 100%;border: 1px solid #cecece;height:'+pageHeight*0.9+'px;'">
|
|
|
+ <div id="container" v-bind:style="'width: 100%;border: 1px solid #cecece;height:'+pageHeight*0.81+'px;'">
|
|
|
</div>
|
|
|
+ <el-row class="buttonRow">
|
|
|
+ <el-button type="warning" round @click="initData" :loading="loadStatus">重新计算</el-button>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -24,10 +27,12 @@ export default {
|
|
|
{value: "200", label: "200米"}
|
|
|
],
|
|
|
map: null,
|
|
|
- pageHeight: document.documentElement.clientHeight
|
|
|
+ pageHeight: document.documentElement.clientHeight,
|
|
|
+ loadStatus: false
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
+ this.loadStatus=true;
|
|
|
setTimeout(() => {
|
|
|
this.initMap()
|
|
|
}, 100)
|
|
@@ -40,27 +45,55 @@ export default {
|
|
|
this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
|
|
this.map.disableDoubleClickZoom(); //禁用双击放大
|
|
|
this.init();
|
|
|
+ this.loadStatus=false;
|
|
|
},
|
|
|
- init() {
|
|
|
+ initData() {
|
|
|
+ let msg = '是否重新计算?';
|
|
|
const t = this;
|
|
|
+ this.$confirm(msg, '确认信息', {
|
|
|
+ distinguishCancelAndClose: true,
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消'
|
|
|
+ }).then(() => {
|
|
|
+ t.loadStatus=true;
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: 'Loading',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ });
|
|
|
+ request({
|
|
|
+ url: "/monitorArea/computeMonitorClient"
|
|
|
+ }).then(function (rs) {
|
|
|
+ t.initMap();
|
|
|
+ loading.close();
|
|
|
+ t.loadStatus=false;
|
|
|
+ });
|
|
|
+ }).catch(action => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: "取消计算"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.map.clearOverlays();
|
|
|
+ const t=this;
|
|
|
request({
|
|
|
- url: '/monitorArea/infoList',
|
|
|
- method: "get"
|
|
|
+ url: "/monitorArea/infoList"
|
|
|
}).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) {
|
|
|
+ rs.areaInfo.forEach(data => {
|
|
|
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}); //创建折线
|
|
|
+ let polygon = new BMap.Polygon(list, {
|
|
|
+ fillColor: data.areaColor,
|
|
|
+ strokeWeight: 2,
|
|
|
+ strokeOpacity: 0.5
|
|
|
+ }); //创建折线
|
|
|
t.map.addOverlay(polygon);
|
|
|
var x = 0,
|
|
|
y = 0;
|
|
@@ -81,53 +114,73 @@ export default {
|
|
|
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
|
|
|
- });
|
|
|
+ mini.alert("xx社区<br>" +
|
|
|
+ "总户数:3677(每年更新一次)<br>" +
|
|
|
+ "年未总人口:12735(每年更新一次)<br>" +
|
|
|
+ "可办理经营户:58户(固定)<br>" +
|
|
|
+ "现有零售户:93户(数据关连)<br>" +
|
|
|
+ "尚可办理经营户:-35(上面减下面)<br>" +
|
|
|
+ "目前排队户数:2(到时做扫描登记表进行关连)"); // 监听点击事件
|
|
|
});
|
|
|
- }
|
|
|
});
|
|
|
-
|
|
|
- let points = [];
|
|
|
- noWarnClientInfo.forEach(data => {
|
|
|
+ });
|
|
|
+ request({
|
|
|
+ url: "/monitorArea/getWarnClientList"
|
|
|
+ }).then(function (rs) {
|
|
|
+ let dataList = rs;
|
|
|
+ let pointsG = []; //成长绿色
|
|
|
+ let pointsB = []; //饱和黄色
|
|
|
+ let pointsW = []; //违规红色
|
|
|
+ dataList.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);
|
|
|
+ pt.info = data.info;
|
|
|
+ if (data.info.includes("不合规") || data.info.includes("内有其他零售户")) {
|
|
|
+ pointsW.push(pt)
|
|
|
+ }
|
|
|
+ if (data.info.includes("饱和")) {
|
|
|
+ pointsB.push(pt)
|
|
|
+ }
|
|
|
+ if (data.info.includes("增长")) {
|
|
|
+ pointsG.push(pt)
|
|
|
+ }
|
|
|
});
|
|
|
- let options = {
|
|
|
+ let optionsG = {
|
|
|
size: BMAP_POINT_SIZE_NORMAL,
|
|
|
shape: BMAP_POINT_SHAPE_STAR,
|
|
|
- color: '#848080'
|
|
|
+ color: "green"
|
|
|
}
|
|
|
- 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);
|
|
|
-
|
|
|
-
|
|
|
- });
|
|
|
+ let optionsB = {
|
|
|
+ size: BMAP_POINT_SIZE_NORMAL,
|
|
|
+ shape: BMAP_POINT_SHAPE_STAR,
|
|
|
+ color: "orange"
|
|
|
+ }
|
|
|
+ let optionsW = {
|
|
|
+ size: BMAP_POINT_SIZE_NORMAL,
|
|
|
+ shape: BMAP_POINT_SHAPE_STAR,
|
|
|
+ color: "#f34410"
|
|
|
+ }
|
|
|
+ let pointCollectionG = new BMap.PointCollection(pointsG, optionsG);
|
|
|
+ let pointCollectionB = new BMap.PointCollection(pointsB, optionsB);
|
|
|
+ let pointCollectionW = new BMap.PointCollection(pointsW, optionsW);
|
|
|
+ pointCollectionG.addEventListener('mouseover', function (e) {
|
|
|
+ let pt = new BMap.Point(e.point.lng, e.point.lat);
|
|
|
+ let opts = {
|
|
|
+ width: 300, // 信息窗口宽度
|
|
|
+ height: 120, // 信息窗口高度
|
|
|
+ title: '<h6 style="margin: 0;">零售户信息</h6>', // 信息窗口标题
|
|
|
+ }
|
|
|
+ let str = '姓名:' + e.point.shortName + " 许可证号:" + e.point.clientCode + " <br>电话:" + e.point.telephone + " 市管员:" + e.point.cnname + " <br>信息:" + e.point.info;
|
|
|
+ let infoWindow = new BMap.InfoWindow(str, opts);
|
|
|
+ t.map.openInfoWindow(infoWindow, pt);
|
|
|
+ })
|
|
|
+ t.map.addOverlay(pointCollectionG);
|
|
|
+ t.map.addOverlay(pointCollectionB);
|
|
|
+ t.map.addOverlay(pointCollectionW);
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -141,4 +194,19 @@ export default {
|
|
|
.anchorBL {
|
|
|
display: none;
|
|
|
}
|
|
|
+
|
|
|
+.buttonRow {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ /* 确保父元素的高度是可见区域的高度,以使其居中 */
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+button {
|
|
|
+ /* 可选的样式 */
|
|
|
+ padding: 10px 20px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|