|
@@ -2,143 +2,245 @@
|
|
|
<div>
|
|
|
<div id="container" v-bind:style="'width: 100%;border: 1px solid #cecece;height:'+pageHeight*0.9+'px;'">
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="scroll-box3">
|
|
|
+ <h3>动态展示</h3>
|
|
|
+ <div class="scroll-item3">
|
|
|
+ <vue-seamless-scroll :data="list" class="warp">
|
|
|
+ <table align="center" width="98%" class="table-info3">
|
|
|
+ <tr>
|
|
|
+ <td width="20%" height="32">市场部</td>
|
|
|
+ <td width="15%">销售数量</td>
|
|
|
+ <td width="15%">销售金额</td>
|
|
|
+ <td width="25%">证件已办数量</td>
|
|
|
+ <td width="25%">证件入网数量</td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr v-for="c in list">
|
|
|
+ <td height="32">{{c.marketName}}</td>
|
|
|
+ <td align="center">{{c.amount}}</td>
|
|
|
+ <td align="center">{{c.total}}</td>
|
|
|
+ <td align="center">{{c.n1}}</td>
|
|
|
+ <td align="center">{{c.n2}}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </vue-seamless-scroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import request from '@/utils/request'
|
|
|
+ import request from '@/utils/request'
|
|
|
+ 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
|
|
|
- }
|
|
|
- },
|
|
|
- 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), 13); // 初始化地图,设置中心点坐标和地图级别
|
|
|
- this.map.setCurrentCity("仙桃");
|
|
|
- this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
|
|
- this.map.disableDoubleClickZoom(); //禁用双击放大
|
|
|
- this.init();
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ vueSeamlessScroll
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ marketName: '三伏潭',
|
|
|
+ amount: 431,
|
|
|
+ total: 44555.50,
|
|
|
+ n1: 5,
|
|
|
+ n2: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ marketName: '长埫口',
|
|
|
+ amount: 232,
|
|
|
+ total: 34555.50,
|
|
|
+ n1: 3,
|
|
|
+ n2: 4
|
|
|
+ },
|
|
|
+ {
|
|
|
+ marketName: '城西',
|
|
|
+ amount: 132,
|
|
|
+ total: 14555.50,
|
|
|
+ n1: 1,
|
|
|
+ n2: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ marketName: '城东',
|
|
|
+ amount: 232,
|
|
|
+ total: 34755.50,
|
|
|
+ n1: 8,
|
|
|
+ n2: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ marketName: '毛嘴',
|
|
|
+ amount: 335,
|
|
|
+ total: 64555.50,
|
|
|
+ n1: 7,
|
|
|
+ n2: 9
|
|
|
+ },
|
|
|
+ {
|
|
|
+ marketName: '通海口',
|
|
|
+ amount: 332,
|
|
|
+ total: 34958.50,
|
|
|
+ n1: 6,
|
|
|
+ n2: 2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initMap()
|
|
|
+ }, 100)
|
|
|
},
|
|
|
- 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);
|
|
|
+ methods: {
|
|
|
+ initMap() {
|
|
|
+ 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.init();
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ 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
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
- x = x / path.length;
|
|
|
- y = y / path.length;
|
|
|
- let points = [];
|
|
|
- let pt = new BMap.Point(x, y);
|
|
|
+ });
|
|
|
+
|
|
|
+ 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 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 options = {
|
|
|
+ size: BMAP_POINT_SIZE_NORMAL,
|
|
|
+ shape: BMAP_POINT_SHAPE_STAR,
|
|
|
+ color: '#848080'
|
|
|
}
|
|
|
- });
|
|
|
+ let pointCollection = new BMap.PointCollection(points, options);
|
|
|
|
|
|
- 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
|
|
|
+ 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);
|
|
|
+ t.map.addOverlay(pointCollection);
|
|
|
|
|
|
|
|
|
- });
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
|
-.BMap_cpyCtrl {
|
|
|
- display: none;
|
|
|
-}
|
|
|
+ .BMap_cpyCtrl {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
-.anchorBL {
|
|
|
- display: none;
|
|
|
-}
|
|
|
+ .anchorBL {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-box3 {
|
|
|
+ width: 360px;
|
|
|
+ height: 560px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1999;
|
|
|
+ background: #ffffff;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-box3 h3 {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-item3 {
|
|
|
+ height: 480px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-info3 {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 2px;
|
|
|
+ }
|
|
|
</style>
|