站点地图
This commit is contained in:
小小
parent
f930438426
commit
96a17e7b20
@ -42,4 +42,44 @@
|
||||
background: white;
|
||||
width: 100vw;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.divClose {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.divName {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.divAdrress {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.divCountRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.divCountRow .divCount {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.divCountRow .divTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
<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" />
|
||||
:polyline="polyline" :scale="scale" @tap="mapTap" @poitap="mapTap" @markertap="markerTap" />
|
||||
<div class="divNav">
|
||||
|
||||
</div>
|
||||
@ -56,32 +56,40 @@
|
||||
<div class="b-btn-blue" style="width:100%;" @click="completeDraw">完成绘制</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>站点信息</div>
|
||||
<div>{{siteInfo.name}}</div>
|
||||
<div>{{siteInfo.address}}</div>
|
||||
<div class="divSiteInfo">
|
||||
<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>
|
||||
<div class="divCount">
|
||||
{{siteInfo.zdrl}}
|
||||
</div>
|
||||
<div>
|
||||
<div class="divTitle">
|
||||
站点容量
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="divCount">
|
||||
{{siteInfo.sssl}}
|
||||
</div>
|
||||
<div>
|
||||
<div class="divTitle">
|
||||
实时数量
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
{{siteInfo.zdrl-siteInfo.sssl}}
|
||||
<div class="divCount" :style="{color:siteInfo.xdd<=0?'#EF4B4D':'#00BCD4'}">
|
||||
{{siteInfo.xdd>0?'+'+siteInfo.xdd:siteInfo.xdd}}
|
||||
</div>
|
||||
<div>
|
||||
<div class="divTitle">
|
||||
需调度
|
||||
</div>
|
||||
</div>
|
||||
@ -129,8 +137,8 @@
|
||||
let drawPoint = [];
|
||||
let areaData = {};
|
||||
let selArea = null; //选中区域
|
||||
let regionData = {};
|
||||
|
||||
let siteData = {};
|
||||
|
||||
let showRegion = ref(false);
|
||||
const iconsize = 16;
|
||||
const iconcolor = "#6f7777";
|
||||
@ -156,15 +164,18 @@
|
||||
const height = ref("100vh");
|
||||
const opentype = ref("add"); //打开类型
|
||||
let editId = ""; //编辑ID
|
||||
|
||||
const siteInfo=ref({
|
||||
id:"",
|
||||
|
||||
const showSiteInfo = ref(false);
|
||||
const siteInfo = ref({
|
||||
id: "",
|
||||
name: "",
|
||||
address: "",
|
||||
zdrl:0,
|
||||
sssl:0
|
||||
zdrl: 0,
|
||||
sssl: 0,
|
||||
xdd:0
|
||||
})
|
||||
|
||||
|
||||
//缩放
|
||||
function onZoom(type) {
|
||||
const i = 10;
|
||||
@ -214,60 +225,100 @@
|
||||
}
|
||||
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) {
|
||||
if (!showDraw.value) return;
|
||||
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;
|
||||
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){
|
||||
if (!inside) {
|
||||
showModelMessage("请绘制在运营区域内！")
|
||||
return;
|
||||
}
|
||||
}
|
||||
else{
|
||||
const{shapeType,points}=selArea;
|
||||
if(shapeType=="2"){
|
||||
inside=map.checkPointInPolygon(longitude,latitude,points);
|
||||
if(!inside){
|
||||
} 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);
|
||||
drawPolygons(longitude, latitude);
|
||||
break;
|
||||
case "2":
|
||||
drawCircle(longitude,latitude);
|
||||
drawCircle(longitude, latitude);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//绘制多边形
|
||||
function drawPolygons(longitude,latitude ) {
|
||||
function drawPolygons(longitude, latitude) {
|
||||
const len = drawPoint.length;
|
||||
switch (len) {
|
||||
case 0:
|
||||
@ -292,7 +343,7 @@
|
||||
}
|
||||
|
||||
//绘制圆形
|
||||
function drawCircle( longitude,latitude) {
|
||||
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) {
|
||||
@ -353,6 +404,13 @@
|
||||
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() {
|
||||
@ -368,9 +426,10 @@
|
||||
if (arrPoint.length > 3) {
|
||||
arrPoint.push(arrPoint[0]);
|
||||
}
|
||||
console.log("88888888888888888888888",arrPoint);
|
||||
const points = JSON.stringify(arrPoint);
|
||||
const {operationRegionId}=selArea;
|
||||
const {
|
||||
operationRegionId
|
||||
} = selArea;
|
||||
uni.redirectTo({
|
||||
url: `/pages/devops/bikesite/bikesite-info?id=${editId}&points=${points}&radius=${radius.value}&&type=${opentype.value}&®ionid=${operationRegionId}`
|
||||
})
|
||||
@ -409,7 +468,6 @@
|
||||
};
|
||||
|
||||
map.getRegionData(arrRegionID, (res) => {
|
||||
console.log("11111111111getRegionData", res);
|
||||
const {
|
||||
arrData,
|
||||
arrCircles: arrCircles_region,
|
||||
@ -417,22 +475,23 @@
|
||||
arrCirclesData: arrCirclesData_region,
|
||||
arrPolygonsData: arrPolygonsData_region
|
||||
} = res;
|
||||
regionData = {
|
||||
arrCircles:arrCircles_region,
|
||||
arrPolygons:arrPolygons_region,
|
||||
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;
|
||||
const len = arrMarker.length;
|
||||
arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png"));
|
||||
});
|
||||
|
||||
len = arrMarker.length;
|
||||
arrPolygons_region.map((item, index) => {
|
||||
const {
|
||||
points
|
||||
@ -441,7 +500,6 @@
|
||||
latitude: lat,
|
||||
longitude: lng
|
||||
} = points[0];
|
||||
const len = arrMarker.length;
|
||||
arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png"));
|
||||
});
|
||||
|
||||
@ -472,15 +530,15 @@
|
||||
|
||||
function showMapSite(showSite) {
|
||||
const {
|
||||
arrCircles=[],
|
||||
arrPolygons=[]
|
||||
arrCircles = [],
|
||||
arrPolygons = []
|
||||
} = areaData;
|
||||
const {
|
||||
arrCircles: arrCircles_region=[],
|
||||
arrPolygons: arrPolygons_region=[],
|
||||
arrCircles: arrCircles_region = [],
|
||||
arrPolygons: arrPolygons_region = [],
|
||||
arrCirclesData,
|
||||
arrPolygonsData
|
||||
} = regionData;
|
||||
} = siteData;
|
||||
const arrEditC = [];
|
||||
const arrEditP = [];
|
||||
if (showSite) {
|
||||
@ -512,7 +570,7 @@
|
||||
}
|
||||
polygons.value = [...arrPolygons, ...arrPolygons_region, ...arrEditP];
|
||||
circles.value = [...arrCircles, ...arrCircles_region, ...arrEditC];
|
||||
drawPoint=[];
|
||||
drawPoint = [];
|
||||
} else {
|
||||
polygons.value = arrPolygons;
|
||||
circles.value = arrCircles;
|
||||
@ -545,6 +603,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
oMap = map.getMap("mapRef", getCurrentInstance());
|
||||
isload = true;
|
||||
|
||||
@ -178,20 +178,20 @@
|
||||
const permcode = 'maintenance.applet';
|
||||
const permcodes = uni.getStorageSync('permCodes');
|
||||
const menus = [];
|
||||
if (permcodes.length > 0 && permcodes.includes(permcode)) {
|
||||
if (permcodes.length > 0 ) {
|
||||
btnList.forEach((item) => {
|
||||
const menu = {
|
||||
key: item.key,
|
||||
name: item.name
|
||||
}
|
||||
let ipermcode = permcode + '.' + item.key.toLowerCase().replace(/-/g, '.');
|
||||
if (permcodes.includes(ipermcode)) {
|
||||
if (permcodes.some(item => item.includes(ipermcode))) {
|
||||
menus.push(menu)
|
||||
if (item.children) {
|
||||
item.children.forEach((child) => {
|
||||
menu.children = menu.children || [];
|
||||
let cpermcode = ipermcode + '.' + child.key.toLowerCase().replace(/-/g, '.');
|
||||
if (permcodes.includes(cpermcode)) {
|
||||
if (permcodes.some(item => item.includes(cpermcode))) {
|
||||
const cmenu = {
|
||||
key: child.key,
|
||||
name: child.name,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user