655 lines
15 KiB
Vue
655 lines
15 KiB
Vue
<template>
|
||
<div :style="{width:'100vw',height}">
|
||
<map id="mapRef" ref="mapRef" :style="{width:'100vw',height}" show-location :longitude="mapcenter.longitude"
|
||
:latitude="mapcenter.latitude" :markers="markers" :polygons="polygons" :circles="circles"
|
||
:polyline="polyline" :scale="scale" @tap="mapTap" @poitap="mapTap" @markertap="markerTap" />
|
||
<div class="divNav">
|
||
|
||
</div>
|
||
<div class="divLowerLeft">
|
||
<div class="divBtn">
|
||
<div class="divBtnTitle" @click="getLoalcation">
|
||
<uni-icons custom-prefix="iconfont" type="icon-ebikedingwei2" :color="iconcolor" :size="iconsize" />
|
||
<div>定位</div>
|
||
</div>
|
||
<div class="divBtnTitle" @click="refreshArea">
|
||
<uni-icons custom-prefix="iconfont" type="icon-ebikeshuaxin" :color="iconcolor" :size="iconsize" />
|
||
<div>刷新</div>
|
||
</div>
|
||
<div class="divBtnTitle" style="padding-bottom: 10px;"
|
||
@click="()=>{showRegion=!showRegion;showMapSite(showRegion)}">
|
||
<uni-icons custom-prefix="iconfont" type="icon-ebikeP" :color="!showRegion?iconcolor:showColor"
|
||
:size="iconsize" />
|
||
<div :style="{color:!showRegion?iconcolor:showColor}">站点</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="showDraw" class="divBottom">
|
||
<!-- <div style="display: flex;">
|
||
<label>选择形状：</label>
|
||
<div style="margin-top: -5px;">
|
||
<uni-data-checkbox v-model="selDraw" :localdata="drawType"
|
||
@change="changDrawType"></uni-data-checkbox>
|
||
</div>
|
||
</div> -->
|
||
<div v-if="selDraw=='1'" style="line-height: 35px;">
|
||
<label class="lbWorn">请点击地图绘制您想绘制的区域</label>
|
||
<div>
|
||
<label class="b-btn-blue" @click="delPoint">删除点</label>
|
||
<label class="b-btn-blue" style="margin-left: 15px;" @click="clearPoint">清空点</label>
|
||
</div>
|
||
</div>
|
||
<div v-if="selDraw=='2'">
|
||
<label class="lbWorn">
|
||
请点
|
||
<uni-icons type="plus" color="#1082FF" size="30" @click="onZoom('out')" />
|
||
击放
|
||
大圆，点击<uni-icons type="minus" color="#1082FF" size="30" @click="onZoom('in')" />
|
||
缩小圆,半径为：
|
||
|
||
<label style="color: #000;">{{radius}}</label>
|
||
米
|
||
</label>
|
||
</div>
|
||
<div style="text-align: center;display: flex;justify-content: space-evenly;margin: 10px 0px;">
|
||
<div class="b-btn-white" style="width:100%;margin-right: 10px" @click="cancelDraw">取消绘制</div>
|
||
<div class="b-btn-blue" style="width:100%;" @click="completeDraw">完成绘制</div>
|
||
</div>
|
||
</div>
|
||
<div class="divSiteInfo" v-if="showSiteInfo">
|
||
<div class="divClose" @click="closeSiteInfo">
|
||
<uni-icons custom-prefix="iconfont" type="icon-ebikeguanbi" size="25" color="#777777" />
|
||
</div>
|
||
<div class="divName">
|
||
<label style="flex: 1;">{{siteInfo.name}}</label>
|
||
<div style="margin-left: 10px;" @click="openSiteInfo">
|
||
<uni-icons custom-prefix="iconfont" type="icon-ebikebianji" color="rgb(121 116 116)"
|
||
size="20" />
|
||
</div>
|
||
</div>
|
||
<div class="divAdrress">{{siteInfo.address}}</div>
|
||
<div class="divCountRow">
|
||
<div>
|
||
<div class="divCount">
|
||
{{siteInfo.zdrl}}
|
||
</div>
|
||
<div class="divTitle">
|
||
站点容量
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="divCount">
|
||
{{siteInfo.sssl}}
|
||
</div>
|
||
<div class="divTitle">
|
||
实时数量
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="divCount" :style="{color:siteInfo.xdd<=0?'#EF4B4D':'#00BCD4'}">
|
||
{{siteInfo.xdd>0?'+'+siteInfo.xdd:siteInfo.xdd}}
|
||
</div>
|
||
<div class="divTitle">
|
||
需调度
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
getCurrentInstance
|
||
} from 'vue';
|
||
import * as map from "@/utils/map.js";
|
||
import {
|
||
useSelarea
|
||
} from "@/stores/selarea.js";
|
||
import {
|
||
onLoad
|
||
} from "@dcloudio/uni-app";
|
||
import {
|
||
showModelMessage,
|
||
getScreenHeightNoTabBar
|
||
} from "@/utils/tools.js";
|
||
import {
|
||
cloneDeep,
|
||
findIndex
|
||
} from "lodash"
|
||
|
||
const title = ref("新建站点");
|
||
let isload = false;
|
||
let oMap = null;
|
||
const mapcenter = ref({
|
||
longitude: "",
|
||
latitude: ""
|
||
})
|
||
const scale = ref(18);
|
||
const polygons = ref([]);
|
||
const circles = ref([]);
|
||
const markers = ref([]);
|
||
const polyline = ref([]);
|
||
|
||
const radius = ref(20);
|
||
let drawPoint = [];
|
||
let areaData = {};
|
||
let selArea = null; //选中区域
|
||
let siteData = {};
|
||
|
||
let showRegion = ref(false);
|
||
const iconsize = 16;
|
||
const iconcolor = "#6f7777";
|
||
const showColor = "#1088FD";
|
||
|
||
//行政区划
|
||
const selAreaStore = useSelarea();
|
||
const zoneId = selAreaStore.value;
|
||
const showDraw = ref(false);
|
||
const drawType = [{
|
||
text: "多边形",
|
||
value: "1"
|
||
}, {
|
||
text: "圆形",
|
||
value: "2"
|
||
}];
|
||
const selDraw = ref("1");
|
||
const drawId = 10000000;
|
||
const drawColor = "#e58b04";
|
||
const drawFillColor = "#e58b041a";
|
||
const editColor = "#e41309";
|
||
const editFillColor = "#e4130930";
|
||
const height = ref("100vh");
|
||
const opentype = ref("add"); //打开类型
|
||
let editId = ""; //编辑ID
|
||
|
||
const showSiteInfo = ref(false);
|
||
const siteInfo = ref({
|
||
id: "",
|
||
name: "",
|
||
address: "",
|
||
zdrl: 0,
|
||
sssl: 0,
|
||
xdd:0
|
||
})
|
||
|
||
|
||
//缩放
|
||
function onZoom(type) {
|
||
const i = 10;
|
||
let r = radius.value;
|
||
if (!drawPoint || drawPoint.length == 0) {
|
||
showModelMessage("请先绘制图形！");
|
||
return;
|
||
}
|
||
switch (type) {
|
||
case "out":
|
||
r += 10;
|
||
break;
|
||
default:
|
||
if (r == 20) {
|
||
showModelMessage("已缩放至最小！");
|
||
return;
|
||
}
|
||
r = r - 10;
|
||
break;
|
||
}
|
||
radius.value = r;
|
||
const {
|
||
latitude,
|
||
longitude
|
||
} = drawPoint[0];
|
||
circles.value[circles.value.length - 1] = map.addCirle(drawColor, drawFillColor, longitude, latitude, radius
|
||
.value);
|
||
}
|
||
|
||
//切换绘制类型
|
||
function changDrawType(e) {
|
||
const {
|
||
value
|
||
} = e.detail;
|
||
selDraw.value = value;
|
||
if (!drawPoint || drawPoint.length == 0) {
|
||
return;
|
||
}
|
||
markers.value.splice(markers.value.length - 1, 1);
|
||
switch (drawPoint.length) {
|
||
case 2:
|
||
polyline.value = [];
|
||
break;
|
||
default:
|
||
polygons.value.splice(polygons.value.length - 1, 1);
|
||
break;
|
||
}
|
||
drawPoint = [];
|
||
}
|
||
|
||
function closeSiteInfo(){
|
||
showSiteInfo.value=false;
|
||
}
|
||
|
||
function markerTap(e) {
|
||
const {
|
||
markerId
|
||
} = e.detail;
|
||
const index = markerId;
|
||
const {
|
||
arrCirclesData,
|
||
arrPolygonsData
|
||
} = siteData;
|
||
const len = arrCirclesData.length;
|
||
let data = null;
|
||
if (index <= len - 1) {
|
||
data = arrCirclesData[markerId];
|
||
} else {
|
||
data = arrPolygonsData[markerId - len];
|
||
}
|
||
const {
|
||
siteName,
|
||
siteRegionId,
|
||
siteAdress,
|
||
allowedParkingNum
|
||
} = data;
|
||
const site = {
|
||
id: siteRegionId,
|
||
name: siteName,
|
||
address: siteAdress,
|
||
zdrl: allowedParkingNum,
|
||
sssl: 0,
|
||
xdd:allowedParkingNum-0
|
||
}
|
||
siteInfo.value=site;
|
||
showSiteInfo.value = true;
|
||
}
|
||
|
||
function mapTap(e) {
|
||
const {
|
||
detail: {
|
||
latitude,
|
||
longitude
|
||
}
|
||
} = e;
|
||
if (!showDraw.value) return;
|
||
let inside = false;
|
||
if (!selArea) {
|
||
const {
|
||
arrCirclesData,
|
||
arrPolygonsData
|
||
} = areaData;
|
||
for (let i = 0; i < arrPolygonsData.length; i++) {
|
||
const data = arrPolygonsData[i];
|
||
const points = data.points;
|
||
inside = map.checkPointInPolygon(longitude, latitude, points);
|
||
if (inside) {
|
||
selArea = data;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (!inside) {
|
||
showModelMessage("请绘制在运营区域内！")
|
||
return;
|
||
}
|
||
} else {
|
||
const {
|
||
shapeType,
|
||
points
|
||
} = selArea;
|
||
if (shapeType == "2") {
|
||
inside = map.checkPointInPolygon(longitude, latitude, points);
|
||
if (!inside) {
|
||
showModelMessage("请绘制在运营区域内！")
|
||
return;
|
||
}
|
||
}
|
||
|
||
}
|
||
switch (selDraw.value) {
|
||
case "1":
|
||
drawPolygons(longitude, latitude);
|
||
break;
|
||
case "2":
|
||
drawCircle(longitude, latitude);
|
||
break;
|
||
}
|
||
}
|
||
|
||
|
||
//绘制多边形
|
||
function drawPolygons(longitude, latitude) {
|
||
const len = drawPoint.length;
|
||
switch (len) {
|
||
case 0:
|
||
const marker = map.addMarker(drawId, longitude, latitude, "point.png");
|
||
markers.value.push(marker);
|
||
break;
|
||
case 1:
|
||
polyline.value.push(map.addLine(drawColor, drawPoint));
|
||
break;
|
||
case 2:
|
||
polyline.value.splice(polyline.value.length - 1, 1);
|
||
polygons.value.push(map.addPolygon(drawColor, drawFillColor, drawPoint));
|
||
break;
|
||
default:
|
||
polygons.value[polygons.value.length - 1] = map.addPolygon(drawColor, drawFillColor, drawPoint);
|
||
break;
|
||
}
|
||
drawPoint.push({
|
||
latitude,
|
||
longitude
|
||
});
|
||
}
|
||
|
||
//绘制圆形
|
||
function drawCircle(longitude, latitude) {
|
||
const circle = map.addCirle(drawColor, drawFillColor, longitude, latitude, radius.value);
|
||
const marker = map.addMarker(drawId, longitude, latitude, "point.png");
|
||
if (drawPoint.length > 0) {
|
||
circles.value[circles.value.length - 1] = circle;
|
||
markers.value[markers.value.length - 1] = markers;
|
||
} else {
|
||
|
||
markers.value.push(marker);
|
||
circles.value.push(circle);
|
||
}
|
||
drawPoint[0] = {
|
||
latitude,
|
||
longitude
|
||
};
|
||
}
|
||
|
||
//删除点
|
||
function delPoint() {
|
||
if (!drawPoint || drawPoint.length == 0) {
|
||
showModelMessage("请先绘制点！");
|
||
return;
|
||
}
|
||
drawPoint.splice(drawPoint.length - 1, 1);
|
||
if (selDraw.value == "1") {
|
||
delPolygon();
|
||
} else {
|
||
markers.value.splice(markers.value.length - 1, 1);
|
||
circles.value.splice(circles.value.length - 1, 1);
|
||
}
|
||
|
||
}
|
||
|
||
function delPolygon() {
|
||
switch (drawPoint.length) {
|
||
case 0:
|
||
markers.value.splice(markers.value.length - 1, 1);
|
||
break;
|
||
case 1:
|
||
polyline.value.splice(polyline.value.length - 1, 1);
|
||
break;
|
||
case 2:
|
||
polygons.value.splice(polygons.value.length - 1, 1);
|
||
polyline.value.push(map.addLine(drawColor, drawPoint));
|
||
break;
|
||
default:
|
||
const index = polygons.value.length - 1;
|
||
polygons.value[index] = map.addPolygon(drawColor, drawFillColor, drawPoint);
|
||
break;
|
||
}
|
||
}
|
||
//清除点
|
||
function clearPoint() {
|
||
drawPoint = [];
|
||
markers.value.splice(markers.value.length - 1, 1);
|
||
if (selDraw.value == "1") {
|
||
polygons.value.splice(polygons.value.length - 1, 1);
|
||
} else {
|
||
circles.value.splice(circles.value.length - 1, 1);
|
||
}
|
||
}
|
||
|
||
function openSiteInfo(){
|
||
const{id}=siteInfo.value;
|
||
uni.redirectTo({
|
||
url: `/pages/devops/bikesite/bikesite-info?id=${id}&&type=edit`
|
||
})
|
||
}
|
||
|
||
//完成绘制
|
||
function completeDraw() {
|
||
if (drawPoint.length == 0) {
|
||
showModelMessage("请先绘制区域！");
|
||
return;
|
||
}
|
||
const arrPoint = cloneDeep(drawPoint)
|
||
if (selDraw.value == "1" && arrPoint.length <= 3) {
|
||
showModelMessage("至少四个点进行区域绘制！");
|
||
return;
|
||
}
|
||
if (arrPoint.length > 3) {
|
||
arrPoint.push(arrPoint[0]);
|
||
}
|
||
const points = JSON.stringify(arrPoint);
|
||
const {
|
||
operationRegionId
|
||
} = selArea;
|
||
uni.redirectTo({
|
||
url: `/pages/devops/bikesite/bikesite-info?id=${editId}&points=${points}&radius=${radius.value}&&type=${opentype.value}&®ionid=${operationRegionId}`
|
||
})
|
||
}
|
||
|
||
//取消绘制
|
||
function cancelDraw() {
|
||
uni.navigateBack();
|
||
}
|
||
|
||
function loadOperation(callback) {
|
||
console.log("666666666666666666666", "行政区划", zoneId);
|
||
map.getOperation(zoneId, (res) => {
|
||
if (!res) {
|
||
if (callback) callback();
|
||
return;
|
||
}
|
||
const {
|
||
arrRegionID,
|
||
arrCircles,
|
||
arrPolygons,
|
||
arrData,
|
||
arrCirclesData,
|
||
arrPolygonsData
|
||
} = res;
|
||
if (arrRegionID.length == 0) {
|
||
if (callback) callback();
|
||
return;
|
||
}
|
||
areaData = {
|
||
arrCircles,
|
||
arrPolygons,
|
||
arrData,
|
||
arrCirclesData,
|
||
arrPolygonsData
|
||
};
|
||
|
||
map.getRegionData(arrRegionID, (res) => {
|
||
const {
|
||
arrData,
|
||
arrCircles: arrCircles_region,
|
||
arrPolygons: arrPolygons_region,
|
||
arrCirclesData: arrCirclesData_region,
|
||
arrPolygonsData: arrPolygonsData_region
|
||
} = res;
|
||
siteData = {
|
||
arrCircles: arrCircles_region,
|
||
arrPolygons: arrPolygons_region,
|
||
arrCirclesData: arrCirclesData_region,
|
||
arrPolygonsData: arrPolygonsData_region
|
||
};
|
||
const arrMarker = [];
|
||
let len = 0;
|
||
arrCircles_region.map((item, index) => {
|
||
const {
|
||
latitude: lat,
|
||
longitude: lng
|
||
} = item;
|
||
arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png"));
|
||
});
|
||
|
||
len = arrMarker.length;
|
||
arrPolygons_region.map((item, index) => {
|
||
const {
|
||
points
|
||
} = item;
|
||
const {
|
||
latitude: lat,
|
||
longitude: lng
|
||
} = points[0];
|
||
arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png"));
|
||
});
|
||
|
||
markers.value = arrMarker;
|
||
showMapSite(showRegion.value);
|
||
if (callback) callback();
|
||
})
|
||
})
|
||
}
|
||
|
||
//定位
|
||
function getLoalcation() {
|
||
map.getLoalcation(oMap, (res) => {
|
||
const {
|
||
latitude,
|
||
longitude
|
||
} = res;
|
||
mapcenter.value = {
|
||
latitude,
|
||
longitude
|
||
};
|
||
})
|
||
}
|
||
|
||
function refreshArea() {
|
||
loadOperation();
|
||
}
|
||
|
||
function showMapSite(showSite) {
|
||
const {
|
||
arrCircles = [],
|
||
arrPolygons = []
|
||
} = areaData;
|
||
const {
|
||
arrCircles: arrCircles_region = [],
|
||
arrPolygons: arrPolygons_region = [],
|
||
arrCirclesData,
|
||
arrPolygonsData
|
||
} = siteData;
|
||
const arrEditC = [];
|
||
const arrEditP = [];
|
||
if (showSite) {
|
||
if (editId) { //编辑
|
||
const obj = {
|
||
siteRegionId: editId
|
||
};
|
||
let index = findIndex(arrCirclesData, obj);
|
||
|
||
if (index > -1) {
|
||
const {
|
||
latitude,
|
||
longitude
|
||
} = arrCircles_region[index];
|
||
arrCirclesData.splice(index, 1);
|
||
arrCircles_region.splice(index, 1);
|
||
arrEditC.push(map.addCirle(editColor, editFillColor, longitude, latitude, radius.value));
|
||
} else {
|
||
index = findIndex(arrPolygonsData, obj);
|
||
if (index > -1) {
|
||
const {
|
||
points: arrPoint
|
||
} = arrPolygons_region[index];
|
||
arrPolygonsData.splice(index, 1);
|
||
arrPolygons_region.splice(index, 1);
|
||
arrEditP.push(map.addPolygon(editColor, editFillColor, arrPoint))
|
||
}
|
||
}
|
||
}
|
||
polygons.value = [...arrPolygons, ...arrPolygons_region, ...arrEditP];
|
||
circles.value = [...arrCircles, ...arrCircles_region, ...arrEditC];
|
||
drawPoint = [];
|
||
} else {
|
||
polygons.value = arrPolygons;
|
||
circles.value = arrCircles;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
function defualtZoom() {
|
||
console.log("888888888888888888defualtZoom", polygons.value)
|
||
if (polygons.value.length == 0) {
|
||
return;
|
||
}
|
||
const arrPoint = polygons.value[0].points;
|
||
oMap.includePoints({
|
||
points: arrPoint,
|
||
padding: [50, 50, 50, 50]
|
||
});
|
||
}
|
||
|
||
|
||
//加载数据
|
||
function loadData() {
|
||
loadOperation(() => {
|
||
if (isload) {
|
||
defualtZoom();
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
oMap = map.getMap("mapRef", getCurrentInstance());
|
||
isload = true;
|
||
defualtZoom();
|
||
});
|
||
|
||
onLoad(options => {
|
||
console.log("33333333333333333", "options,isload", options, isload)
|
||
let title = "站点地图";
|
||
const {
|
||
type,
|
||
points,
|
||
id,
|
||
radius: r
|
||
} = options;
|
||
if (id) {
|
||
editId = id;
|
||
drawPoint = JSON.parse(points);
|
||
radius.value = r;
|
||
}
|
||
|
||
opentype.value = type;
|
||
|
||
switch (type) {
|
||
case "add":
|
||
title = "新建站点";
|
||
showRegion.value = true;
|
||
showDraw.value = true;
|
||
break;
|
||
case "edit":
|
||
title = "编辑站点";
|
||
showRegion.value = true;
|
||
showDraw.value = true;
|
||
break;
|
||
}
|
||
getScreenHeightNoTabBar(res => {
|
||
height.value = res + "px";
|
||
})
|
||
uni.setNavigationBarTitle({
|
||
title
|
||
});
|
||
//加载数据
|
||
loadData();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url("map-bikesite.css");
|
||
</style> |