<template>
<div id="business">
<div class="search-wrapper">
<el-form :model="business" size="small">
<el-row>
<el-col :span="6">
<el-form-item label="省份">
<el-select v-model="business.addressProvince" size='small'>
<el-option
v-for="item in provinceArray"
:key="item.index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="城市">
<el-select v-model="business.addressCity" size='small'>
<el-option
v-for="item in cityArray"
:key="item.index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="區域">
<el-select v-model="business.addressDistrict" size='small'>
<el-option
v-for="item in districtArray"
:key="item.index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="葯店名稱">
<el-select v-model="business.sellerUserId" size='small'>
<el-option
v-for="item in sellerUserList"
:key="item.index"
:label="item.sellerName"
:value="item.sellerUserId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item>
<!-- 操作 -->
<el-button type="primary" icon="el-icon-edit" size="small" @click="edit">編輯</el-button>
<el-button type="primary" icon="el-icon-error" size="small" @click="clearAll">重繪</el-button>
<el-button type="primary" icon="el-icon-success" size="small" @click="preservation">保存</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="enclosureTil">
<div>繪制電子圍欄多邊形圖案完成時，請雙擊鼠標左鍵 確定完成圖案的繪制結束;點擊編輯電子圍欄的范圍時，請將地圖右上角的繪制工具替換成 <img src="./imgs/1.png" alt=""> 第一個小手的編輯狀態。</div>
<div>繪制圓形和矩形的時候，需要點擊鼠標右上角的小手來結束繪制的狀態。</div>
</div>
<div>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
</div>
</div>
</template>
<script>
import javaAjax from '@/utils/javaApiRequest';
import BMap from 'BMap';
import BMapLib from 'BMapLib';
import BMAP_ANCHOR_TOP_RIGHT from 'BMAP_ANCHOR_TOP_RIGHT';
export default {
data() {
return {
business: {
addressProvince: '', // 省份
addressCity: '', // 城市
addressDistrict: '', // 區域
sellerName: '', // 葯店
sellerUserId: '', // 葯店id
},
// 省份列表
provinceArray: [],
// 城市列表
cityArray: [],
// 區域列表
districtArray: [],
// 葯店列表
// sellerNameArray: [],
// 葯店信息列表
sellerUserList: [],
// 商戶信息
merchantInfo: '',
// 保存圍欄的數據
fence: {
sellerUserId: '',
shippingArea: [],
// backupsShippingArea: []
},
// 百度地圖
map: '',
// 圍欄數據
overlays: [],
// 繪制圍欄得到的坐標值
coordinate: [],
// 圍欄樣式
styleOptions: {
strokeColor: 'red', // 邊線顏色。
fillColor: '#ccc', // 填充顏色。當參數為空時，圓形將沒有填充效果。
strokeWeight: 2, // 邊線的寬度，以像素為單位。
strokeOpacity: 0.8, // 邊線透明度，取值范圍0 - 1。
fillOpacity: 0.6, // 填充的透明度，取值范圍0 - 1。
strokeStyle: 'solid' // 邊線的樣式，solid或dashed。
},
// 鼠標繪制工具
drawingManager: {},
// 商戶id
sellerUserId: '',
isWholeCountry: 1,
};
},
watch: {
// 省份
'business.addressProvince': function() {
this.business.addressCity = '';
this.business.addressDistrict = '';
this.business.sellerName = '';
this.business.sellerUserId = '';
this.isWholeCountry = 0;
this.getCity();
},
// 市
'business.addressCity': function() {
this.business.addressDistrict = '';
this.business.sellerName = '';
this.business.sellerUserId = '';
this.getArea();
},
// 區
'business.addressDistrict': function() {
this.business.sellerName = '';
this.business.sellerUserId = '';
this.getPharmacy();
},
// 葯店
'business.sellerUserId': function() {
if (this.business.sellerUserId) {
this.queryMerchant();
}
},
},
methods: {
// 選擇范圍重置坐標點
resetCoordinate(sellerUserList) {
// 建立坐標點：
// lng：經度 lat：緯度
let points = sellerUserList.map(item => {
return {
lng: item.longitude,
lat: item.latitude,
sellerUserId: item.sellerUserId,
sellerName: item.sellerName,
shippingArea: item.shippingArea,
businessDate: item.businessDate
};
});
// 清除之前的坐標點
let allOverlay = this.map.getOverlays();
for (let i = 0; i < allOverlay.length - 1; i++) {
this.map.removeOverlay(allOverlay[i]);
}
this.createCoordinate(points);
},
// 省
getProvince() {
javaAjax.post(`/mall_manage/authority/queryThreeLevelLinkage`, this.business).then((res) => {
if (res.status === 200 && res.data.resultCode === '0') {
this.provinceArray = res.data.resultData.provinceArray;
// this.sellerNameArray = res.data.resultData.sellerNameArray;
this.sellerUserList = res.data.resultData.sellerUserList;
}
});
},
// 市
getCity() {
javaAjax.post(`/mall_manage/authority/queryThreeLevelLinkage`, this.business).then((res) => {
if (res.status === 200 && res.data.resultCode === '0') {
this.cityArray = res.data.resultData.cityArray;
// this.sellerNameArray = res.data.resultData.sellerNameArray;
this.sellerUserList = res.data.resultData.sellerUserList;
this.resetCoordinate(res.data.resultData.sellerUserList);
}
});
},
// 區
getArea() {
javaAjax.post(`/mall_manage/authority/queryThreeLevelLinkage`, this.business).then((res) => {
if (res.status === 200 && res.data.resultCode === '0') {
this.districtArray = res.data.resultData.districtArray;
// this.sellerNameArray = res.data.resultData.sellerNameArray;
this.sellerUserList = res.data.resultData.sellerUserList;
this.resetCoordinate(res.data.resultData.sellerUserList);
}
});
},
// 葯店
getPharmacy() {
javaAjax.post(`/mall_manage/authority/queryThreeLevelLinkage`, this.business).then((res) => {
if (res.status === 200 && res.data.resultCode === '0') {
// this.sellerNameArray = res.data.resultData.sellerNameArray;
this.sellerUserList = res.data.resultData.sellerUserList;
this.resetCoordinate(res.data.resultData.sellerUserList);
}
});
},
// 查詢商戶詳細的信息
queryMerchant() {
javaAjax.post(`/mall_manage/authority/queryAppointSellerUser`, this.business).then((res) => {
if (res.status === 200 && res.data.resultCode === '0') {
let tempData = res.data.resultData[0];
console.log(tempData);
this.merchantInfo = tempData;
this.fence.sellerUserId = tempData.sellerUserId;
// 顯示的地圖范圍移動至選擇的葯店附近
let new_point = new BMap.Point(tempData.longitude, tempData.latitude);
this.map.centerAndZoom(new_point, 15);
this.map.panTo(new_point);
this.ready(tempData.longitude, tempData.latitude);
this.resetCoordinate(res.data.resultData);
// 初始化電子圍欄
this.clearAll();
// 當商戶有圍欄信息的時候將會繪制原本商戶已有的圍欄
if (tempData.shippingArea) {
let xyArray = JSON.parse(tempData.shippingArea);
// 顯示商戶的電子圍欄區域
if (xyArray.length > 0) {
let polylinePointsArray = [];
for (let i = 0; i < xyArray.length; i++) {
polylinePointsArray[i] = new BMap.Point(xyArray[i].y, xyArray[i].x);
}
let polygon = new BMap.Polygon(polylinePointsArray, this.styleOptions); // 創建多邊形
this.map.addOverlay(polygon); // 增加多邊形
this.overlays.push(polygon); // 是否把該圖像加入到編輯和刪除行列
this.overlays[0].enableEditing();// 開啟編輯狀態
}
}
}
});
},
// 百度坐標轉火星坐標
bd_decrypt(bd_lng, bd_lat) {
let X_PI = Math.PI * 3000.0 / 180.0;
let x = bd_lng - 0.0065;
let y = bd_lat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
let gg_lng = z * Math.cos(theta);
let gg_lat = z * Math.sin(theta);
return { y: gg_lng, x: gg_lat };
},
// 百度地圖API功能初始化
ready(longitude, latitude) {
let lon = longitude ? longitude : 114.066519;
let lat = latitude ? latitude : 22.549303;
let _this = this;
// 創建Map實例
_this.map = new BMap.Map('map');
// 初始化地圖,設置中心點坐標和地圖級別
// let poi = new BMap.Point(114.066519, 22.549303);
let poi = new BMap.Point(lon, lat);
_this.map.centerAndZoom(poi, 15);
// 啟用滾輪放大縮小，默認禁用
_this.map.enableScrollWheelZoom();
// 繪制工具事件
let overlaycomplete = function(e) {
_this.clearAll();
_this.overlays = [];
_this.coordinate = [];
_this.overlays.push(e.overlay);
let path = e.overlay.getPath();// Array<Point> 返回多邊型的點數組'y:' + path[i].lng + ',x:' + path[i].lat
console.log(path);
for (let i = 0; i < path.length; i++) {
_this.coordinate.push({ x: path[i].lat, y: path[i].lng });
// 百度坐標轉火星坐標
// let t = _this.bd_decrypt(path[i].lng, path[i].lat);
// _this.coordinate.push(t);
}
console.log(_this.coordinate);
};
// 實例化鼠標繪制工具
_this.drawingManager = new BMapLib.DrawingManager(_this.map, {
isOpen: false, // 是否開啟繪制模式
enableDrawingTool: true, // 是否顯示工具欄
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
offset: new BMap.Size(5, 5), // 偏離值
},
circleOptions: _this.styleOptions, // 圓的樣式
polylineOptions: _this.styleOptions, // 線的樣式
polygonOptions: _this.styleOptions, // 多邊形的樣式
rectangleOptions: _this.styleOptions // 矩形的樣式
});
// 添加鼠標繪制工具監聽事件，用於獲取繪制結果
_this.drawingManager.addEventListener('overlaycomplete', overlaycomplete);
},
// 編輯
edit() {
this.overlays[0].enableEditing();
},
// 保存
preservation() {
if (this.overlays.length === 0) {
this.$message('請先繪制電子圍欄才能保存');
return false;
}
this.overlays[0].disableEditing();
// this.coordinate = [];
// let path = this.overlays[0].getPath();// Array<Point> 返回多邊型的點數組
// for (let i = 0; i < path.length; i++) {
// this.coordinate.push({ y: path[i].lng, x: path[i].lat });
// }
this.fence.shippingArea = this.coordinate;
// this.fence.backupsShippingArea = this.coordinate;
console.log(this.fence);
javaAjax.post(`/mall_manage/authority/updateShippingAreea`, this.fence).then((res) => {
console.log(res);
if (res.status === 200 && res.data.resultCode === '0') {
this.$message(res.data.msg);
// 保存成功之后刷新頁面上的數據
}
});
},
// 重繪
clearAll() {
for (let i = 0; i < this.overlays.length; i++) {
this.map.removeOverlay(this.overlays[i]);
}
this.overlays = [];
this.coordinate = [];
},
// 編寫信息顯示方法
showInfo(thisMarker, point, _this) {
console.log(point);
_this.fence.sellerUserId = point.sellerUserId;
// 點擊坐標點的時候顯示的地圖范圍移動至選擇的葯店附近
let new_point = new BMap.Point(point.lng, point.lat);
this.map.centerAndZoom(new_point, 15);
this.map.panTo(new_point);
// 初始化電子圍欄
_this.clearAll();
// 當商戶有圍欄信息的時候將會繪制原本商戶已有的圍欄
if (point.shippingArea) {
let xyArray = JSON.parse(point.shippingArea);
// 顯示商戶的電子圍欄區域
if (xyArray.length > 0) {
let polylinePointsArray = [];
for (let i = 0; i < xyArray.length; i++) {
polylinePointsArray[i] = new BMap.Point(xyArray[i].y, xyArray[i].x);
}
let polygon = new BMap.Polygon(polylinePointsArray, _this.styleOptions); // 創建多邊形
_this.map.addOverlay(polygon); // 增加多邊形
_this.overlays.push(polygon); // 是否把該圖像加入到編輯和刪除行列
_this.overlays[0].enableEditing();// 開啟編輯狀態
}
}
// 獲取點的信息
let sContent =
'<ul style="margin:0 0 5px 0;padding:0.2em 0">'
+ '<li style="line-height: 26px;font-size: 15px;">'
+ '<span style="width: 200px;display: inline-block;">葯店id：</span>' + point.sellerUserId + '</li>'
+ '<li style="line-height: 26px;font-size: 15px;">'
+ '<span style="width: 200px;display: inline-block;">葯店名稱：</span>' + point.sellerName + '</li>'
+ '<li style="line-height: 26px;font-size: 15px;">'
+ '<span style="width: 200px;display: inline-block;">營業日期：</span>' + point.businessDate + '</li>'
+ '</ul>';
let infoWindow = new BMap.InfoWindow(sContent); // 創建信息窗口對象
thisMarker.openInfoWindow(infoWindow); // 圖片加載完后重繪infoWindow
},
// 創建坐標點
createCoordinate(points) {
let _this = this;
// 循環建立標注點
for (let i = 0, pointsLen = points.length; i < pointsLen; i++) {
let point = new BMap.Point(points[i].lng, points[i].lat); // 將標注點轉化成地圖上的點
let marker = new BMap.Marker(point); // 將點轉化成標注點
this.map.addOverlay(marker); // 將標注點添加到地圖上
// 添加監聽事件
(function() {
let thePoint = points[i];
marker.addEventListener('click',
// 顯示信息的方法
function() {
_this.showInfo(this, thePoint, _this);
});
})();
}
},
// 查詢全國數據的所有商戶電子圍欄
wholeCountry() {
this.isWholeCountry = 1;
javaAjax.post(`/mall_manage/authority/queryShippingAreeaIsNotNull`, { 'sellerUserId': this.sellerUserId }).then((res) => {
if (res.status === 200 && res.data.resultCode === '0') {
let tempData = res.data.resultData;
// 建立坐標點：
// lng：經度 lat：緯度
let points = tempData.map(item => {
return {
lng: item.longitude,
lat: item.latitude,
sellerUserId: item.sellerUserId,
sellerName: item.sellerName,
shippingArea: item.shippingArea,
businessDate: item.businessDate
};
});
this.createCoordinate(points);
}
});
}
},
mounted() {
this.ready();
},
created() {
// 查詢全國數據的所有商戶電子圍欄
this.wholeCountry();
// 獲取省列表
this.getProvince();
}
};
</script>
<style lang="less" scoped>
#allmap,#editMap {
width: 100%; height:500px; overflow: hidden;
border: 1px solid #ccc;
/deep/ .BMapLib_box.BMapLib_marker,/deep/ .BMapLib_box.BMapLib_polyline{
display: none;
}
}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微軟雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
.enclosureTil{
div{
line-height: 20px;
font-size: 16px;
color: red;
}
img{
width: 30px;
height: 30px;
}
}
</style>
