attiya/ebike-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

站点地图

Browse Source
This commit is contained in:
小小 2025-05-13 16:05:03 +08:00
parent f930438426
commit 96a17e7b20
3 changed files with 157 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ebike-maintenance/pages/map/map-bikesite.css
View File

@ -42,4 +42,44 @@
background: white; background: white;
width: 100vw; width: 100vw;
padding: 10px; 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;
} }

169
ebike-maintenance/pages/map/map-bikesite.vue
View File

@ -2,7 +2,7 @@
<div :style="{width:'100vw',height}"> <div :style="{width:'100vw',height}">
<map id="mapRef" ref="mapRef" :style="{width:'100vw',height}" show-location :longitude="mapcenter.longitude" <map id="mapRef" ref="mapRef" :style="{width:'100vw',height}" show-location :longitude="mapcenter.longitude"
:latitude="mapcenter.latitude" :markers="markers" :polygons="polygons" :circles="circles" :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 class="divNav">
</div> </div>
@ -56,32 +56,40 @@
<div class="b-btn-blue" style="width:100%;" @click="completeDraw">完成绘制</div> <div class="b-btn-blue" style="width:100%;" @click="completeDraw">完成绘制</div>
</div> </div>
</div> </div>
<div> <div class="divSiteInfo" v-if="showSiteInfo">
<div>站点信息</div> <div class="divClose" @click="closeSiteInfo">
<div>{{siteInfo.name}}</div> <uni-icons custom-prefix="iconfont" type="icon-ebikeguanbi" size="25" color="#777777" />
<div>{{siteInfo.address}}</div> </div>
<div class="divSiteInfo"> <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> <div class="divCount">
{{siteInfo.zdrl}} {{siteInfo.zdrl}}
</div> </div>
<div> <div class="divTitle">
站点容量 站点容量
</div> </div>
</div> </div>
<div> <div>
<div> <div class="divCount">
{{siteInfo.sssl}} {{siteInfo.sssl}}
</div> </div>
<div> <div class="divTitle">
实时数量 实时数量
</div> </div>
</div> </div>
<div> <div>
<div> <div class="divCount" :style="{color:siteInfo.xdd<=0?'#EF4B4D':'#00BCD4'}">
{{siteInfo.zdrl-siteInfo.sssl}} {{siteInfo.xdd>0?'+'+siteInfo.xdd:siteInfo.xdd}}
</div> </div>
<div> <div class="divTitle">
需调度 需调度
</div> </div>
</div> </div>
@ -129,8 +137,8 @@
let drawPoint = []; let drawPoint = [];
let areaData = {}; let areaData = {};
let selArea = null; //选中区域 let selArea = null; //选中区域
let regionData = {}; let siteData = {};
let showRegion = ref(false); let showRegion = ref(false);
const iconsize = 16; const iconsize = 16;
const iconcolor = "#6f7777"; const iconcolor = "#6f7777";
@ -156,15 +164,18 @@
const height = ref("100vh"); const height = ref("100vh");
const opentype = ref("add"); //打开类型 const opentype = ref("add"); //打开类型
let editId = ""; //编辑ID let editId = ""; //编辑ID
const siteInfo=ref({ const showSiteInfo = ref(false);
id:"", const siteInfo = ref({
id: "",
name: "", name: "",
address: "", address: "",
zdrl:0, zdrl: 0,
sssl:0 sssl: 0,
xdd:0
}) })
//缩放 //缩放
function onZoom(type) { function onZoom(type) {
const i = 10; const i = 10;
@ -214,60 +225,100 @@
} }
drawPoint = []; 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) { function mapTap(e) {
if (!showDraw.value) return;
const { const {
detail: { detail: {
latitude, latitude,
longitude longitude
} }
} = e; } = e;
if (!showDraw.value) return;
let inside = false; let inside = false;
if (!selArea) { if (!selArea) {
const { const {
arrCirclesData, arrCirclesData,
arrPolygonsData arrPolygonsData
} = areaData; } = areaData;
for(let i=0;i<arrPolygonsData.length;i++){ for (let i = 0; i < arrPolygonsData.length; i++) {
const data=arrPolygonsData[i]; const data = arrPolygonsData[i];
const points=data.points; const points = data.points;
inside=map.checkPointInPolygon(longitude,latitude,points); inside = map.checkPointInPolygon(longitude, latitude, points);
if(inside){ if (inside) {
selArea=data; selArea = data;
break; break;
} }
} }
if(!inside){ if (!inside) {
showModelMessage("请绘制在运营区域内！") showModelMessage("请绘制在运营区域内！")
return; return;
} }
} } else {
else{ const {
const{shapeType,points}=selArea; shapeType,
if(shapeType=="2"){ points
inside=map.checkPointInPolygon(longitude,latitude,points); } = selArea;
if(!inside){ if (shapeType == "2") {
inside = map.checkPointInPolygon(longitude, latitude, points);
if (!inside) {
showModelMessage("请绘制在运营区域内！") showModelMessage("请绘制在运营区域内！")
return; return;
} }
} }
} }
switch (selDraw.value) { switch (selDraw.value) {
case "1": case "1":
drawPolygons(longitude,latitude); drawPolygons(longitude, latitude);
break; break;
case "2": case "2":
drawCircle(longitude,latitude); drawCircle(longitude, latitude);
break; break;
} }
} }
//绘制多边形 //绘制多边形
function drawPolygons(longitude,latitude ) { function drawPolygons(longitude, latitude) {
const len = drawPoint.length; const len = drawPoint.length;
switch (len) { switch (len) {
case 0: 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 circle = map.addCirle(drawColor, drawFillColor, longitude, latitude, radius.value);
const marker = map.addMarker(drawId, longitude, latitude, "point.png"); const marker = map.addMarker(drawId, longitude, latitude, "point.png");
if (drawPoint.length > 0) { if (drawPoint.length > 0) {
@ -353,6 +404,13 @@
circles.value.splice(circles.value.length - 1, 1); 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() { function completeDraw() {
@ -368,9 +426,10 @@
if (arrPoint.length > 3) { if (arrPoint.length > 3) {
arrPoint.push(arrPoint[0]); arrPoint.push(arrPoint[0]);
} }
console.log("88888888888888888888888",arrPoint);
const points = JSON.stringify(arrPoint); const points = JSON.stringify(arrPoint);
const {operationRegionId}=selArea; const {
operationRegionId
} = selArea;
uni.redirectTo({ uni.redirectTo({
url: `/pages/devops/bikesite/bikesite-info?id=${editId}&points=${points}&radius=${radius.value}&&type=${opentype.value}&&regionid=${operationRegionId}` url: `/pages/devops/bikesite/bikesite-info?id=${editId}&points=${points}&radius=${radius.value}&&type=${opentype.value}&&regionid=${operationRegionId}`
}) })
@ -409,7 +468,6 @@
}; };
map.getRegionData(arrRegionID, (res) => { map.getRegionData(arrRegionID, (res) => {
console.log("11111111111getRegionData", res);
const { const {
arrData, arrData,
arrCircles: arrCircles_region, arrCircles: arrCircles_region,
@ -417,22 +475,23 @@
arrCirclesData: arrCirclesData_region, arrCirclesData: arrCirclesData_region,
arrPolygonsData: arrPolygonsData_region arrPolygonsData: arrPolygonsData_region
} = res; } = res;
regionData = { siteData = {
arrCircles:arrCircles_region, arrCircles: arrCircles_region,
arrPolygons:arrPolygons_region, arrPolygons: arrPolygons_region,
arrCirclesData: arrCirclesData_region, arrCirclesData: arrCirclesData_region,
arrPolygonsData: arrPolygonsData_region arrPolygonsData: arrPolygonsData_region
}; };
const arrMarker = []; const arrMarker = [];
let len = 0;
arrCircles_region.map((item, index) => { arrCircles_region.map((item, index) => {
const { const {
latitude: lat, latitude: lat,
longitude: lng longitude: lng
} = item; } = item;
const len = arrMarker.length;
arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png")); arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png"));
}); });
len = arrMarker.length;
arrPolygons_region.map((item, index) => { arrPolygons_region.map((item, index) => {
const { const {
points points
@ -441,7 +500,6 @@
latitude: lat, latitude: lat,
longitude: lng longitude: lng
} = points[0]; } = points[0];
const len = arrMarker.length;
arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png")); arrMarker.push(map.addMarker(len + index, lng, lat, "bikesite.png"));
}); });
@ -472,15 +530,15 @@
function showMapSite(showSite) { function showMapSite(showSite) {
const { const {
arrCircles=[], arrCircles = [],
arrPolygons=[] arrPolygons = []
} = areaData; } = areaData;
const { const {
arrCircles: arrCircles_region=[], arrCircles: arrCircles_region = [],
arrPolygons: arrPolygons_region=[], arrPolygons: arrPolygons_region = [],
arrCirclesData, arrCirclesData,
arrPolygonsData arrPolygonsData
} = regionData; } = siteData;
const arrEditC = []; const arrEditC = [];
const arrEditP = []; const arrEditP = [];
if (showSite) { if (showSite) {
@ -512,7 +570,7 @@
} }
polygons.value = [...arrPolygons, ...arrPolygons_region, ...arrEditP]; polygons.value = [...arrPolygons, ...arrPolygons_region, ...arrEditP];
circles.value = [...arrCircles, ...arrCircles_region, ...arrEditC]; circles.value = [...arrCircles, ...arrCircles_region, ...arrEditC];
drawPoint=[]; drawPoint = [];
} else { } else {
polygons.value = arrPolygons; polygons.value = arrPolygons;
circles.value = arrCircles; circles.value = arrCircles;
@ -545,6 +603,7 @@
onMounted(() => { onMounted(() => {
oMap = map.getMap("mapRef", getCurrentInstance()); oMap = map.getMap("mapRef", getCurrentInstance());
isload = true; isload = true;

6
ebike-maintenance/pages/mine/mine.vue
View File

@ -178,20 +178,20 @@
const permcode = 'maintenance.applet'; const permcode = 'maintenance.applet';
const permcodes = uni.getStorageSync('permCodes'); const permcodes = uni.getStorageSync('permCodes');
const menus = []; const menus = [];
if (permcodes.length > 0 && permcodes.includes(permcode)) { if (permcodes.length > 0 ) {
btnList.forEach((item) => { btnList.forEach((item) => {
const menu = { const menu = {
key: item.key, key: item.key,
name: item.name name: item.name
} }
let ipermcode = permcode + '.' + item.key.toLowerCase().replace(/-/g, '.'); let ipermcode = permcode + '.' + item.key.toLowerCase().replace(/-/g, '.');
if (permcodes.includes(ipermcode)) { if (permcodes.some(item => item.includes(ipermcode))) {
menus.push(menu) menus.push(menu)
if (item.children) { if (item.children) {
item.children.forEach((child) => { item.children.forEach((child) => {
menu.children = menu.children || []; menu.children = menu.children || [];
let cpermcode = ipermcode + '.' + child.key.toLowerCase().replace(/-/g, '.'); let cpermcode = ipermcode + '.' + child.key.toLowerCase().replace(/-/g, '.');
if (permcodes.includes(cpermcode)) { if (permcodes.some(item => item.includes(cpermcode))) {
const cmenu = { const cmenu = {
key: child.key, key: child.key,
name: child.name, name: child.name,