站点接口联调

ebike-maintenance/pages/devops/bikesite/bikesite-info.vue

@@ -1,6 +1,6 @@
 <template>
 	<scroll-view class="divForm" :style="{height}" scroll-y show-scrollbar>
-		<uni-forms ref="formRef" :model="formData" :label-width="100">
+		<uni-forms ref="formRef" :model="formData" :label-width="80">
 			<uni-forms-item label="站点名称" name="name" required :rules="[{'required': true,errorMessage: '请填写站点名称'}]">
 				<uni-easyinput v-model="formData.name" />
 			</uni-forms-item>
@@ -62,7 +62,8 @@
 	<div class="divBottom">
 		<div class="b-btn-white divtBtn" v-if="opentype=='edit'" @click="openMap">重新绘制</div>
 		<div class="b-btn-white divtBtn" v-if="opentype=='add'" @click="openMap">返回绘制</div>
-		<div class="b-btn-blue divtBtn" style="margin-left: 10px;" @click="SaveData">确认{{opentype=='add'?"新建":"保存"}}</div>
+		<div class="b-btn-blue divtBtn" style="margin-left: 10px;" @click="SaveData">确认{{opentype=='add'?"新建":"保存"}}
+		</div>
 	</div>
 </template>
 
@@ -79,6 +80,9 @@
 	} from "vue";
 	import * as map from "@/utils/map.js";
 	import QQMapWX from "@/utils/qqmap-wx-jssdk.js";
+	import {
+		callOperateApi
+	} from "../../../utils/api";
 
 	var qqmapsdk = new QQMapWX({
 		key: map.sdkKey
@@ -136,14 +140,16 @@
 
 	let arrPoint = [];
 	let radius = null;
+	let regionid = null;
 	const formData = ref({
 		name: "站点名称",
+		address: "",
 		zdlx: 1,
 		zdjb: 1,
 		ktcl: 10,
 		zdkt: 20,
 		hcbj: 10,
-		zdms: "站点描述",
+		zdms: "",
 		zdbq: [1],
 		zdtf: 1,
 		zdxs: 1
@@ -158,7 +164,8 @@
 		if (type == "edit") {
 			const id = formData.value.id;
 			//const points = JSON.stringify(arrPoint);
-			const points='[{"latitude":30.571833529690217,"longitude":104.06370857334673},{"latitude":30.571476489584985,"longitude":104.06382896516845},{"latitude":30.571211588676054,"longitude":104.0681363214153},{"latitude":30.571845047283958,"longitude":104.06805606033697},{"latitude":30.571833529690217,"longitude":104.06370857334673}]';
+			const points =
+				'[{"latitude":30.571833529690217,"longitude":104.06370857334673},{"latitude":30.571476489584985,"longitude":104.06382896516845},{"latitude":30.571211588676054,"longitude":104.0681363214153},{"latitude":30.571845047283958,"longitude":104.06805606033697},{"latitude":30.571833529690217,"longitude":104.06370857334673}]';
 			uni.navigateTo({
 				url: `/pages/map/map-bikesite?type=edit&id=${id}&points=${points}&k=${Date.now()}`
 			})
@@ -167,7 +174,88 @@
 
 	function SaveData() {
 		formRef.value.validate().then(res => {
-			console.log("66666666666666666666666666666",res);
+			console.log("66666666666666666666666666666", res, arrPoint, regionid, opentype.value,formData.value);
+			const {
+				name,
+				zdlx,
+				zdjb,
+				ktcl,
+				zdkt,
+				address
+			} = res;
+			let shapeType = 2;
+			let points = null;
+			let siteLng = null;
+			let siteLat = null;
+			let r = null;
+			if (arrPoint.length == 1) {
+				shapeType = 1;
+				siteLng = arrPoint[0].longitude;
+				siteLat = arrPoint[0].latitude;
+				r = radius;
+			} else {
+				points = arrPoint;
+			}
+			const params = {
+				operationRegionId: regionid,
+				siteName: name,
+				siteAdress: address,
+				siteType: zdlx,
+				siteLevel: zdjb,
+				allowedParkingNum: ktcl,
+				allowedParkingMax: zdkt,
+				radius: r,
+				shapeType,
+				points,
+				siteLng,
+				siteLat
+			}
+			callOperateApi("ebikeRegion/saveSite", params, "post").then(res => {
+				console.log("1111111111111111111", "/ebikeRegion/saveSite", params,res);
+				const {
+					code,
+					data,
+					message
+				} = res;
+				if (code != 200) {
+					showModelMessage(message);
+					return;
+				} else {
+					showModelMessage("保存成功！");
+					uni.navigateTo({
+						url: "/pages/devops/bikesite/bikesite-list"
+					})
+				}
+			})
+			// {
+			//     "siteRegionId": 0,
+			//     "operationRegionId": 0,
+			//     "siteName": "string",
+			//     "siteAdress": "string",
+			//     "siteType": 0,
+			//     "siteLevel": 0,
+			//     "siteLng": 0,
+			//     "siteLat": 0,
+			//     "shapeType": 0,
+			//     "radius": 0,
+			//     "allowedParkingNum": 0,
+			//     "allowedParkingMax": 0,
+			//     "points": [
+			//         {
+			//             "longitude": 0,
+			//             "latitude": 0
+			//         },
+			//         {
+			//             "longitude": 0,
+			//             "latitude": 0
+			//         },
+			//         {
+			//             "longitude": 0,
+			//             "latitude": 0
+			//         }
+			//     ]
+			// }
+
 		}).catch(res => {
 			console.log("7777777777777777777777", res);
 		})
@@ -181,10 +269,12 @@
 			id,
 			points,
 			radius: r,
-			type
+			type,
+			regionid: rid
 		} = options;
 		console.log("111111111111111111111", options)
 		opentype.value = type;
+		regionid = rid;
 
 		let title = "";
 		switch (type) {
@@ -212,11 +302,16 @@
 				map.reverseGeocoder(qqmapsdk, longitude, latitude, (res) => {
 					console.log("3333333333333", "reverseGeocoder", longitude, latitude, res)
 					const {
+						address,
 						formatted_addresses: {
 							recommend
 						}
 					} = res;
-					formData.value.name = recommend;
+					formData.value = {
+						...formData.value,
+						name: recommend,
+						address
+					}
 				}, (res) => {
 					console.log("fail", res);
 				})
@@ -229,7 +324,7 @@
 <style scoped>
 	.divForm {
 		width: 100vw;
-		padding: 10px 10px;
+		padding: 10px 20px 10px 15px;
 	}
 
 	/* .divForm /deep/ .uni-forms-item {

ebike-maintenance/pages/devops/bikesite/bikesite-list.css

@@ -1,7 +1,9 @@
 .divSearch {
 	display: flex;
 	justify-content: space-between;
-	padding: 10px 15px 0px 15px;
+	padding: 10px 15px 10px 15px;
+	background: rgb(128 128 128 / 8%);
+	align-items: center;
 }
 
 .divSearchTab {
@@ -24,6 +26,10 @@
 	margin-left: 5px;
 }
 
+.divTool {
+	position: absolute;
+	right: 10px;
+}
 
 
 
@@ -63,3 +69,9 @@
 	color: #606266;
 	font-weight: bold;
 }
+
+.divNoData {
+	color: gray;
+	text-align: center;
+	margin-top: 40px;
+}

ebike-maintenance/pages/devops/bikesite/bikesite-list.vue

@@ -32,7 +32,7 @@
 					<div class="divListItemSite">
 						{{item.zdmc}}
 					</div>
-					<div>
+					<div class="divTool">
 						<label style="padding-left: 10px;" @click="editSite(item)">
 							<uni-icons custom-prefix="iconfont" type="icon-ebikebianji" color="rgb(121 116 116)"
 								size="20" />
@@ -68,6 +68,9 @@
 					<div class="divListItemValue">{{item.cjr}}</div>
 				</div>
 			</uni-card>
+			<div v-if="arrData.length==0" class="divNoData">
+				暂无数据
+			</div>
 		</div>
 		<div style="position:absolute;bottom:30px;right: 15px;" @click="addSite">
 			<uni-icons type="plus" color="#7a6d6d" size="40" />
@@ -78,13 +81,22 @@
 
 <script setup>
 	import {
-		ref
+		ref,
+		onUnmounted
 	} from 'vue';
 	import {
 		showModelMessage
 	} from "@/utils/tools.js";
-	import {useSelarea} from "@/stores/selarea.js";
+	import {
-	import {onShow} from "@dcloudio/uni-app";
+		useSelarea
+	} from "@/stores/selarea.js";
+	import {
+		onShow
+	} from "@dcloudio/uni-app";
+	import {
+		callOperateApi
+	} from '../../../utils/api';
+	import { cloneDeep } from 'lodash';
 
 	const arrSearch = ["实时车辆", "借车订单量", "还车订单量"]
 	const iconColor = " #BDBDBD";
@@ -92,31 +104,7 @@
 	const searchIndex = ref(null);
 	const searchType = ref("");
 	//数据
-	const arrData = ref([{
+	const arrData = ref([]);
-		id:"1111",
-		zdlx: "停", //站点类型
-		zdmc: "簇锦街道武兴四路武侯区人民政府政务服务中心", //站点名称
-		zdjb: "1级", //站点级别
-		cjsj: "2025-03-12 19:16:03", //创建时间
-		clsl1: 0, //车辆数量
-		clsl2: 10, //限制车辆数量
-		zcsl: 0, //租车数量
-		hcsl: 0, //还车数量
-		cjdd: "四川省成都市武侯区簇锦街道武兴四路武侯区人民政府政务服务中心", //创建地点
-		cjr: "创建人" //创建人
-	}, {
-		id:"22222222222",
-		zdlx: "停", //站点类型
-		zdmc: "簇锦街道武兴四路武侯区人民政府政务服务中心", //站点名称
-		zdjb: "1级", //站点级别
-		cjsj: "2025-03-12 19:16:03", //创建时间
-		clsl1: 0, //车辆数量
-		clsl2: 10, //限制车辆数量
-		zcsl: 0, //租车数量
-		hcsl: 0, //还车数量
-		cjdd: "四川省成都市武侯区簇锦街道武兴四路武侯区人民政府政务服务中心", //创建地点
-		cjr: "创建人" //创建人
-	}]);
 
 	const showBtn = ref(false); //显示按钮
 	const btnContent = [{
@@ -127,7 +115,13 @@
 		active: false
 	}];
 	const selAreaStore = useSelarea();
-    console.log("555555555555555555555555","行政区划",selAreaStore.value);
+	let zoneId = null;
+	let pageNum = 1;
+	let pageSize = 10;
+	let selData=null;
+	let loadType="";
+	let siteName = ""; //查询条件
+
 	function search(e) {
 		console.log("111111111111111", e);
 	}
@@ -138,8 +132,7 @@
 		if (searchIndex.value == index && searchType.value == "up") {
 			searchType.value = "down";
 
-		}
+		} else {
-		else{
 			searchType.value = "up";
 		}
 		searchIndex.value = index;
@@ -160,19 +153,106 @@
 
 	//编辑
 	function editSite(data) {
-		const{id,radius}=data;
+		const {
+			id,
+			radius
+		} = data;
 		uni.navigateTo({
 			url: `/pages/devops/bikesite/bikesite-info?type=edit&id=${id}&k=${Date.now()}`
 		});
 	}
 
-	function delSite() {
+	function delSite(data) {
-		showModelMessage("该功能暂未实现！");
+		console.log("0000000000000",data);
+		const{id,pageNum:pn,index}=data;
+		const params={
+			ids:[id]
+		}
+		callOperateApi("ebikeRegion/delSite",params,"post").then(res=>{
+			console.log("11111111111111111111111", "ebikeRegion/delSite", res);
+			const {
+				code,
+				data,
+				message
+			} = res;
+			if (code != 200) {
+				console.log("ebikeRegion/delSite错误", message)
+				return;
+			}
+			selData=data;
+			loadType="del";
+			loadData(pn);
+		})
+	}
+
+	function loadData(pn,callbak) {
+		const params = {
+			zoneId,
+			pageNum:pn,
+			pageSize,
+			siteName
+		}
+		callOperateApi("ebikeRegion/pageSite", params, "get").then(res => {
+			console.log("11111111111111111111111", "ebikeRegion/pageSite", res);
+			const {
+				code,
+				data,
+				message
+			} = res;
+			if (code != 200) {
+				console.log("ebikeRegion/pageSite错误", message)
+				return;
+			}
+			const {
+				records
+			} = data;
+			const arrNewData=_.cloneDeep(arrData.value);
+			if(loadType=="del"){
+				const{index}=selData;
+				if(pageNum>pn){
+					// arrNewData.splice(index,);
+				}
+				
+			}
+			records.map((item,index) => {
+				const {
+					siteRegionId,
+					siteName,
+					createdTime,
+					allowedParkingNum,
+					siteAdress
+				} = item;
+				const sindex=(pn-1)*pageSize+index;
+				const newdata = {
+					id: siteRegionId,
+					zdlx: "停", //站点类型
+					zdmc: siteName, //站点名称
+					zdjb: "1级", //站点级别
+					cjsj: createdTime, //创建时间
+					clsl1: 0, //车辆数量
+					clsl2: allowedParkingNum, //限制车辆数量
+					zcsl: 0, //租车数量
+					hcsl: 0, //还车数量
+					cjdd: siteAdress, //创建地点
+					cjr: "创建人", //创建人
+					pageNum,
+					index:sindex
+				}
+				arrNewData[sindex]=newdata;
+			});
+			arrData.value=arrNewData;
+			if(callbak) callbak();
+		})
 	}
 
 	onShow(() => {
-		
+		zoneId = selAreaStore.value;
+		loadData(pageNum);
 	});
+
+	onUnmounted(() => {
+		console.log("9999999999999999999999999onUnmounted")
+	})
 </script>
 
 <style scoped>

ebike-maintenance/pages/map/map-bikesite.vue

@@ -8,7 +8,7 @@
 		</div>
 		<div class="divLowerLeft">
 			<div class="divBtn">
-				<div class="divBtnTitle" @click="getLocation">
+				<div class="divBtnTitle" @click="getLoalcation">
 					<uni-icons custom-prefix="iconfont" type="icon-ebikedingwei2" :color="iconcolor" :size="iconsize" />
 					<div>定位</div>
 				</div>
@@ -98,7 +98,9 @@
 	const radius = ref(20);
 	let drawPoint = [];
 	let areaData = {};
+	let selArea = null; //选中区域
 	let regionData = {};
+	
 	let showRegion = ref(false);
 	const iconsize = 16;
 	const iconcolor = "#6f7777";
@@ -181,18 +183,62 @@
 				longitude
 			}
 		} = e;
+		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){
+				for(i=0;i<arrCirclesData.length;i++){
+					const data=arrCirclesData[i];
+					const {latitude:lat,
+				longitude:lng,radius:r}=data;
+					inside=map.checkPointInPolygon(longitude,latitude,{lng,lat},r);
+					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(latitude, longitude);
+				drawPolygons(longitude,latitude);
 				break;
 			case "2":
-				drawCircle(latitude, longitude);
+				drawCircle(longitude,latitude);
 				break;
 		}
 	}
 	
+
 	//绘制多边形
-	function drawPolygons(latitude, longitude) {
+	function drawPolygons(longitude,latitude ) {
 		const len = drawPoint.length;
 		switch (len) {
 			case 0:
@@ -217,7 +263,7 @@
 	}
 
 	//绘制圆形
-	function drawCircle(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) {
@@ -293,9 +339,11 @@
 		if (arrPoint.length > 3) {
 			arrPoint.push(arrPoint[0]);
 		}
+		console.log("88888888888888888888888",arrPoint);
 		const points = JSON.stringify(arrPoint);
+		const {operationRegionId}=selArea;
 		uni.navigateTo({
-			url: `/pages/devops/bikesite/bikesite-info?points=${points}&radius=${radius.value}&&type=${opentype.value}`
+			url: `/pages/devops/bikesite/bikesite-info?points=${points}&radius=${radius.value}&&type=${opentype.value}&&regionid=${operationRegionId}`
 		})
 	}
 
@@ -316,17 +364,21 @@
 				arrRegionID,
 				arrCircles,
 				arrPolygons,
-				arrData
+				arrData,
+				arrCirclesData,
+				arrPolygonsData
 			} = res;
 			if (arrRegionID.length == 0) {
 				if (callback) callback();
 				return;
 			}
-
+			console.log("00000000000000000000000areaData",areaData);
 			areaData = {
 				arrCircles,
 				arrPolygons,
-				arrData
+				arrData,
+				arrCirclesData,
+				arrPolygonsData
 			};
 
 			map.getRegionData(arrRegionID, (res) => {
@@ -335,14 +387,14 @@
 					arrData,
 					arrCircles: arrCircles_region,
 					arrPolygons: arrPolygons_region,
-					arrCirclesData,
+					arrCirclesData: arrCirclesData_region,
-					arrPolygonsData
+					arrPolygonsData: arrPolygonsData_region
 				} = res;
 				regionData = {
-					arrCircles,
+					arrCircles:arrCircles_region,
-					arrPolygons,
+					arrPolygons:arrPolygons_region,
-					arrCirclesData,
+					arrCirclesData: arrCirclesData_region,
-					arrPolygonsData
+					arrPolygonsData: arrPolygonsData_region
 				};
 				const arrMarker = [];
 				arrCircles_region.map((item, index) => {
@@ -374,7 +426,7 @@
 	}
 
 	//定位
-	function getLocation() {
+	function getLoalcation() {
 		map.getLoalcation(oMap, (res) => {
 			const {
 				latitude,
@@ -392,13 +444,14 @@
 	}
 
 	function showMapSite(showSite) {
+		debugger;
 		const {
-			arrCircles,
+			arrCircles=[],
-			arrPolygons
+			arrPolygons=[]
 		} = areaData;
 		const {
-			arrCircles: arrCircles_region,
+			arrCircles: arrCircles_region=[],
-			arrPolygons: arrPolygons_region,
+			arrPolygons: arrPolygons_region=[],
 			arrCirclesData,
 			arrPolygonsData
 		} = regionData;
@@ -458,7 +511,6 @@
 	//加载数据
 	function loadData() {
 		loadOperation(() => {
-			showMapSite(showRegion.value);
 			if (isload) {
 				defualtZoom();
 			}
@@ -469,9 +521,7 @@
 
 	onMounted(() => {
 		oMap = map.getMap("mapRef", getCurrentInstance());
-		//oMap.moveToLocation();
 		isload = true;
-		getLocation();
 		defualtZoom();
 	});