From f58b299bb66120940d527f5ded81df742845fad7 Mon Sep 17 00:00:00 2001
From: Iruka <1017819588@qq.com>
Date: Tue, 17 Dec 2024 18:57:18 +0800
Subject: [PATCH] .

---
 pages/index-map.vue | 989 +++++++++++++++++++++++++++++++++++++-------
 pages/index.vue     |   6 +-
 2 files changed, 840 insertions(+), 155 deletions(-)

diff --git a/pages/index-map.vue b/pages/index-map.vue
index 29657d3..693a733 100644
--- a/pages/index-map.vue
+++ b/pages/index-map.vue
@@ -1,166 +1,383 @@
 <template>
-	<view class="content" style="width: 100%;height: calc(100vh - 50px);" v-show="mapshow">
-		<web-view ref="mapRef" :webview-styles="webviewStyles" src="/static/html/index-map.html"
-			@message="getMessage" />
-	</view>
+	<!-- 顶部导航栏 -->
+	<custom-nav-bar :left="false" leftText="" @leftClick="" :title="title">
+		<template v-slot:left>
+			<view @click="$refs.landRef.open()">地块</view>
+		</template>
+	</custom-nav-bar>
+	<!-- 地图 -->
+	<view id="map" class="map" :imgs="mapData.imgs" :change:imgs="leaflet.imgsEmitHandler" :wo="mapData.wo"
+		:change:wo="leaflet.woEmitHandler"></view>
+
+	<!-- 控制弹出 -->
+	<u-popup mode="bottom" :show="pop.show" @close="closePopup">
+		<view class="popup-content" v-if="pop.show">
+			<view class="card-grey">
+				<view class="card-title">
+					<u-row>
+						<u-col span="2">
+							<view>
+								<text class="font-green">●</text>{{pop.item.showName}}
+							</view>
+						</u-col>
+						<u-col span="5">
+							<view class="fixed">
+								<view class="iconfont icon-wendu icon" style="float: left;margin-left: 5px;">
+								</view>
+							</view>
+						</u-col>
+						<u-col span="5" style="align-items: flex-end;">
+							<view class="fixed">
+								<u-button type="success" size="mini" text="刷新" icon="reload"
+									:loading="dc.dataObj[pop.item.dataKey]?.refresh"
+									@click="dc.refreshDeviceItem(pop.item.dataKey, pop.item.device)" />
+							</view>
+						</u-col>
+					</u-row>
+				</view>
+
+				<view class="control" v-if="dc.dataObj[pop.item.dataKey]">
+					<u-row v-if="pop.item.device.deviceTypeKey == 'valve'">
+						<u-col span="3">
+							<u-button :disabled="pop.item.device.disable?.open1"
+								:type="dc.getBtnType(pop.item.dataKey, 'open1')"
+								:plain="dc.dataObj[pop.item.dataKey].btnObj.open1.work"
+								@click="dc.deviceControlHandle(pop.item, 1)"> ①
+								<span v-if="dc.dataObj[pop.item.dataKey].btnObj.open1.work">
+									<span v-if="dc.countdownObj[pop.item.dataKey]">
+										({{ dc.countdownObj[pop.item.dataKey] }})
+									</span>
+									<span v-else class="timeout">
+										{{ dc.timeoutObj[pop.item.dataKey] }}
+									</span>
+								</span>
+								<span class="name">张三</span>
+							</u-button>
+							<u-line-progress height="8" :showText="false"
+								:percentage="dc.dataObj[pop.item.dataKey].btnObj.open1.openAngle" activeColor="#74ffd4"
+								inactiveColor="#c7c7c7" />
+						</u-col>
+						<u-col span="6">
+							<view class="valve">
+								<view>
+									<u-button :disabled="pop.item.device.disable?.open"
+										:type="dc.getBtnType(pop.item.dataKey, 'open')"
+										:plain="dc.dataObj[pop.item.dataKey].btnObj.open.work"
+										@click="dc.deviceControlHandle(pop.item, 3)"> 全开
+										<span v-if="dc.dataObj[pop.item.dataKey].btnObj.open.work">
+											<span v-if="dc.countdownObj[pop.item.dataKey]">
+												({{ dc.countdownObj[pop.item.dataKey] }})
+											</span>
+											<span v-else class="timeout">
+												{{ dc.timeoutObj[pop.item.dataKey] }}
+											</span>
+										</span>
+									</u-button>
+								</view>
+								<view class="btn-img">
+									<view class="text">
+										<view class="left">
+											{{ dc.dataObj[pop.item.dataKey].adc.p[0] }}
+										</view>
+										<view class="top"></view>
+										<view class="middle" v-show="!dc.dataObj[pop.item.dataKey].online">
+											离线
+										</view>
+										<view class="right">
+											{{ dc.dataObj[pop.item.dataKey].adc.p[1] }}
+										</view>
+										<view class="bottom"></view>
+									</view>
+									<image :src="valveImg[dc.dataObj[pop.item.dataKey].valveImg]" mode="widthFix" />
+								</view>
+								<view>
+									<u-button :disabled="pop.item.device.disable?.close"
+										:type="dc.getBtnType(pop.item.dataKey, 'close')"
+										:plain="dc.dataObj[pop.item.dataKey].btnObj.close.work"
+										@click="dc.deviceControlHandle(pop.item, 4)"> 全关
+										<span v-if="dc.dataObj[pop.item.dataKey].btnObj.close.work">
+											<span v-if="dc.countdownObj[pop.item.dataKey]">
+												({{ dc.countdownObj[pop.item.dataKey] }})
+											</span>
+											<span v-else class="timeout">
+												{{ dc.timeoutObj[pop.item.dataKey] }}
+											</span>
+										</span>
+									</u-button>
+								</view>
+							</view>
+						</u-col>
+						<u-col span="3">
+							<u-button :disabled="pop.item.device.disable?.open2"
+								:type="dc.getBtnType(pop.item.dataKey, 'open2')"
+								:plain="dc.dataObj[pop.item.dataKey].btnObj.open2.work"
+								@click="dc.deviceControlHandle(pop.item, 2)"> ②
+								<span v-if="dc.dataObj[pop.item.dataKey].btnObj.open2.work">
+									<span v-if="dc.countdownObj[pop.item.dataKey]">
+										({{ dc.countdownObj[pop.item.dataKey] }})
+									</span>
+									<span v-else class="timeout">
+										{{ dc.timeoutObj[pop.item.dataKey] }}
+									</span>
+								</span>
+							</u-button>
+							<u-line-progress height="8" :showText="false"
+								:percentage="dc.dataObj[pop.item.dataKey].btnObj.open2.openAngle" activeColor="#74ffd4"
+								inactiveColor="#c7c7c7" />
+						</u-col>
+					</u-row>
+
+					<u-row v-else-if="pop.item.device.deviceTypeKey == 'fiveValve'">
+						<u-col span="3">
+							<u-button :disabled="pop.item.device.disable?.open1"
+								:type="dc.getBtnType(pop.item.dataKey, 'open1')"
+								:plain="dc.dataObj[pop.item.dataKey].btnObj.open1.work"
+								@click="dc.deviceControlHandle(pop.item, 1)"> ①
+								<span v-if="dc.dataObj[pop.item.dataKey].btnObj.open1.work">
+									<span v-if="dc.countdownObj[pop.item.dataKey]">
+										({{ dc.countdownObj[pop.item.dataKey] }})
+									</span>
+									<span v-else class="timeout">
+										{{ dc.timeoutObj[pop.item.dataKey] }}
+									</span>
+								</span>
+							</u-button>
+							<u-line-progress height="8" :showText="false"
+								:percentage="dc.dataObj[pop.item.dataKey].btnObj.open1.openAngle" activeColor="#74ffd4"
+								inactiveColor="#c7c7c7" />
+						</u-col>
+						<u-col span="6">
+							<view class="valve">
+								<view>
+									<u-button :disabled="pop.item.device.disable?.open2"
+										:type="dc.getBtnType(pop.item.dataKey, 'open2')"
+										:plain="dc.dataObj[pop.item.dataKey].btnObj.open2.work"
+										@click="dc.deviceControlHandle(pop.item, 2)"> ②
+										<span v-if="dc.dataObj[pop.item.dataKey].btnObj.open2.work">
+											<span v-if="dc.countdownObj[pop.item.dataKey]">
+												({{ dc.countdownObj[pop.item.dataKey] }})
+											</span>
+											<span v-else class="timeout">
+												{{ dc.timeoutObj[pop.item.dataKey] }}
+											</span>
+										</span>
+									</u-button>
+									<u-line-progress height="8" :showText="false"
+										:percentage="dc.dataObj[pop.item.dataKey].btnObj.open2.openAngle"
+										activeColor="#74ffd4" inactiveColor="#c7c7c7" />
+								</view>
+								<view class="btn-img">
+									<view class="text">
+										<view class="left">
+											{{ dc.dataObj[pop.item.dataKey].adc.p[0] }}
+										</view>
+										<view class="top">
+											{{ dc.dataObj[pop.item.dataKey].adc.p[1] }}
+										</view>
+										<view class="middle" v-show="!dc.dataObj[pop.item.dataKey].online">
+											离线
+										</view>
+										<view class="right">
+											{{ dc.dataObj[pop.item.dataKey].adc.p[2] }}
+										</view>
+										<view class="bottom">
+											{{ dc.dataObj[pop.item.dataKey].adc.p[3] }}
+										</view>
+									</view>
+									<image :src="valveImg[dc.dataObj[pop.item.dataKey].valveImg]" mode="widthFix" />
+								</view>
+								<view>
+									<u-button :disabled="pop.item.device.disable?.open4"
+										:type="dc.getBtnType(pop.item.dataKey, 'open4')"
+										:plain="dc.dataObj[pop.item.dataKey].btnObj.open4.work"
+										@click="dc.deviceControlHandle(pop.item, 4)"> ④
+										<span v-if="dc.dataObj[pop.item.dataKey].btnObj.open4.work">
+											<span v-if="dc.countdownObj[pop.item.dataKey]">
+												({{ dc.countdownObj[pop.item.dataKey] }})
+											</span>
+											<span v-else class="timeout" style="color: red;">
+												{{ dc.timeoutObj[pop.item.dataKey] }}
+											</span>
+										</span>
+									</u-button>
+									<u-line-progress height="8" :showText="false"
+										:percentage="dc.dataObj[pop.item.dataKey].btnObj.open4.openAngle"
+										activeColor="#74ffd4" inactiveColor="#c7c7c7" />
+								</view>
+							</view>
+						</u-col>
+						<u-col span="3">
+							<u-button :disabled="pop.item.device.disable?.open3"
+								:type="dc.getBtnType(pop.item.dataKey, 'open3')"
+								:plain="dc.dataObj[pop.item.dataKey].btnObj.open3.work"
+								@click="dc.deviceControlHandle(pop.item, 3)"> ③
+								<span v-if="dc.dataObj[pop.item.dataKey].btnObj.open3.work">
+									<span v-if="dc.countdownObj[pop.item.dataKey]">
+										({{ dc.countdownObj[pop.item.dataKey] }})
+									</span>
+									<span v-else class="timeout">
+										{{ dc.timeoutObj[pop.item.dataKey] }}
+									</span>
+								</span>
+							</u-button>
+							<u-line-progress height="8" :showText="false"
+								:percentage="dc.dataObj[pop.item.dataKey].btnObj.open3.openAngle" activeColor="#74ffd4"
+								inactiveColor="#c7c7c7" />
+						</u-col>
+					</u-row>
+
+					<u-row v-else>
+						未知的设备
+					</u-row>
+					<view class="tips font-red"
+						v-if="dc.dataObj[pop.item.dataKey].warning && dc.dataObj[pop.item.dataKey].warning.length">
+						<view class="iconfont icon-guzhang icon">
+							{{ dc.dataObj[pop.item.dataKey].warning.toString() }}
+						</view>
+					</view>
+				</view>
+				<!-- 无数据上报 -->
+				<view class="control" v-else>
+					<u-row
+						v-if="pop.item.device.deviceTypeKey == 'valve' || pop.item.device.deviceTypeKey == 'fiveValve'">
+						<u-col span="3"></u-col>
+						<u-col span="6">
+							<view class="valve">
+								<view class="btn-img">
+									<view class="text">
+										<view class="middle" style="width: 100%;">
+											无数据上报
+										</view>
+									</view>
+									<image mode="widthFix" v-if="pop.item.device.deviceTypeKey == 'valve'"
+										:src="valveImg['valve3_close']" />
+									<image mode="widthFix" v-if="pop.item.device.deviceTypeKey == 'fiveValve'"
+										:src="valveImg['valve5_0000']" />
+								</view>
+							</view>
+						</u-col>
+						<u-col span="3"></u-col>
+					</u-row>
+					<u-row v-else>
+						未知的设备
+					</u-row>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+
 	<!-- 地块选择 -->
 	<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
-		@select="landChange" style="z-index: 99999;" />
+		@select="landChange" />
+	<!-- 角度 -->
+	<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="swiperClose" @confirm="swiperConfirm" />
+	<!-- ADC -->
+	<custom-index-adc ref="adcRef" />
+
+	<!-- <custom-index-mp ref="mpRef" /> -->
 </template>
 <script>
 	import store from "@/store"
+	import * as imageAssets from '@/utils/indexUtil/imageAssets.js'
+
 	export default {
 		data() {
 			return {
-				webviewStyles: {
-					width: "100%",
-					height: "100%"
-				},
-				mapshow: true,
 				user: store.state.user.user,
 				title: "",
 				ijs: getApp().ijs, // 首页公共js
 				dc: getApp().dc, // 设备控制公共代码
+				valveImg: imageAssets, //阀门图片
 				mqttshow: false, // h5端手动链接mqtt按钮显示
 				mqttConnected: false, //	mqtt链接状态
+				screenValue: "", // 关键字搜索
+				isSticky: false, //吸顶状态
+				stateScreen: { // 吸顶筛选选中的项 值为 click
+					all: null,
+					online: null,
+					error: null
+				},
+				mapData: {
+					imgs: null, //地图所用到的图片
+					wo: null,
+				},
+				pop: {
+					show: false,
+					showA: false,
+					item: {}
+				},
+				selectItem: null,
 			}
 		},
 		onLoad() {
 			console.error("onLoad")
-			// // 监听mqtt链接状态
+			// 监听mqtt链接状态
 			// uni.$off("mqtt-connected");
-			// uni.$on("mqtt-connected", (e) => {
-			// 	this.mqttConnected = e;
-			// });
+			uni.$on("mqtt-connected", (e) => {
+				this.mqttConnected = e;
+			});
+			// 监听地块改变
+			uni.$on("update-land-indexMap", (e) => {
+				console.error("update-land-indexMap:", e);
+				this.initMapData();
+			});
 
-			// #ifdef H5
-			const that = this;
-			window.addEventListener('message', function(e) {
-				that.getMessage({
-					detail: {
-						data: [e.data.data.arg]
-					}
-				});
-			})
-			// #endif
+			// this.ijs.initData(this.user.userId, (land, wo) => {
+			// 	getApp().getWoList(land, wo);
+			// });
 		},
 		onShow() {
-			// this.title = this.ijs?.land?.landName || "田间";
+			this.title = this.ijs?.land?.landName || "田间";
 
-			// // 监听控制角度弹窗通知
-			// uni.$off("open-angle-slider");
-			// uni.$on("open-angle-slider", (e) => {
-			// 	console.error("打开角度选择：", e)
-			// 	this.$refs.refAngleSlider.show(e.title, e.extra, e.value, e.other);
+			// // 监听当前页面的加载状态
+			// uni.$off("index-showLoading");
+			// uni.$on("index-showLoading", (flg) => {
+			// 	if (flg) {
+			// 		uni.showLoading();
+			// 	} else {
+			// 		uni.hideLoading();
+			// 	}
 			// });
+			// 监听控制角度弹窗通知
+			uni.$off("open-angle-slider");
+			uni.$on("open-angle-slider", (e) => {
+				console.error("打开角度选择：", e)
+				this.$refs.refAngleSlider.show(e.title, e.extra, e.value, e.other);
+				this.pop.showA = true;
+				this.pop.show = false;
+			});
+		},
+		mounted() {
+			//初始化基础数据
+			this.mapData.imgs = {
+				key: import.meta.env.VITE_APP_TIAN_DI_TU_KEY,
+				centerPoint: [87.624947, 43.791789], //默认乌鲁木齐
+				imgs: imageAssets,
+			};
 		},
 		onHide() {
 			uni.$off("index-showLoading");
 			uni.$off("open-angle-slider");
 		},
-		onPageScroll(e) {},
-		mounted() {
-			// this.initMap();
-		},
 		methods: {
-			//监听web-view传递的数据
-			getMessage(e) {
-				const that = this;
-				const parameter = e.detail.data[0];
-				console.error("App收到的消息:", JSON.stringify(parameter));
-				switch (parameter.action) {
-					case 'onLoad': //初始化完成
-						const mapkey = import.meta.env.VITE_APP_TIAN_DI_TU_KEY;
-						const centerPoint = [87.624947, 43.791789]; //默认乌鲁木齐
-						that.sendHtmlData("loadMap", {
-							key: mapkey,
-							centerPoint: centerPoint,
-						});
+			mapEventHandler(e) {
+				if (!e) {
+					return;
+				}
+				switch (e.type) {
+					case "msg":
+						this.$toast(e.data);
 						break;
-					case 'select-land': //初始化完成
-						console.error("select-land2")
-						that.showPopup();
-						// that.mapshow = false;
-						// that.$refs.landRef.open();
-						// uni.showModal({
-						// 	title: '提示',
-						// 	content: '啊实打实的',
-						// 	success: function(res) {}
-						// });
+					case "showPopup":
+						this.showPopup(e.data);
 						break;
-					case 'map-navigation': //地图导航
-						const coordinate = JSON.parse(parameter.data);
-						that.openAmapNavigation(coordinate[1], coordinate[0], "地块地址");
+					default:
 						break;
-					case 'uni-modal': //确认提示框
-						uni.showModal({
-							title: parameter.data?.title || '提示',
-							content: parameter.data?.content || '',
-							success: function(res) {
-								if (res.confirm) {
-									that.sendHtmlData("marker", parameter);
-								} else if (res.cancel) {
-
-								}
-							}
-						});
-						break;
-					case 'uni-toast': //消息提示
-						uni.showToast({
-							title: parameter.data,
-							icon: "none"
-						})
-						break;
-
 				}
 			},
-			//给web-view传参
-			sendHtmlData(action, data) {
-				let obj = {
-					action: action,
-					data: data
-				};
-				// #ifdef H5
-				const iframe = document.querySelector('iframe');
-				iframe.contentWindow.postMessage(obj);
-				// #endif
-				// #ifdef APP-PLUS
-				const currentWebview = this.$scope.$getAppWebview().children()[0];
-				currentWebview.evalJS(`VUEPageMsg(${JSON.stringify(obj)})`);
-				// #endif
-			},
-			showPopup() {
-				uni.navigateTo({
-					url: '/pages/popup/index-popup'
-				})
-			},
-
-			initMap() {
-				// 动态加载天地图JSAPI
-				const script = document.createElement('script');
-				script.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=16bef4eafae69a2af0ef268fbf64e3c9';
-				script.onload = () => {
-					// 地图初始化
-					const map = new T.Map('mapContainer');
-					// 设置地图中心点和级别
-					map.centerAndZoom(new T.LngLat(116.404, 39.915), 10);
-					// 添加缩放控件
-					map.addControl(new T.Control.Zoom());
-					// 添加比例尺控件
-					map.addControl(new T.Control.Scale());
-					// 添加地图类型切换控件
-					map.addControl(new T.Control.LayerSwitcher());
-				};
-				document.head.appendChild(script);
-			},
-			mqttLink() {
-				getApp().mqttLink(this.user.userId);
-			},
-			mqttEnd() {
-				getApp().mqttEnd();
-			},
-			mqttSubscribes() {
-				getApp().mqttSubscribes();
+			initMapData() {
+				//初始化地块数据
+				this.mapData.wo = this.ijs.wo;
 			},
 			// 地块选择回调
 			landChange(e) {
@@ -172,39 +389,503 @@
 					this.$refs.landRef.addLand(e, res.data);
 				});
 			},
-			// 去扫码
-			toQRCode() {
-				var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
-
-				mpaasScanModule.mpaasScan({
-					// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
-					'scanType': ['qrCode', 'barCode'],
-					// 是否隐藏相册，默认false不隐藏
-					'hideAlbum': false,
-					//ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文                       
-					'language': 'en',
-					//相册选择照片识别错误提示(ios)
-					'failedMsg': '未识别到二维码，请重试',
-					//Android支持全屏需要设置此参数
-					'screenType': 'full'
-				}, (ret) => {
-					console.error("ret:", ret);
-					if (ret.resp_code == 1000) {
-						// bingdingData.value.privateSeal = ret.resp_result;
-						// showModal.value = true
-					}
-				})
+			showPopup(e) {
+				this.pop.item = e;
+				console.error("item:", this.pop.item);
+				console.error("dataObj:", this.dc.dataObj);
+				this.pop.show = true;
+				this.pop.showA = false;
 			},
-			// 控制弹出
-			toggle(type) {
-				this.type = type
-				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
-				this.$refs.popup.open(type)
+			closePopup() {
+				this.pop.show = false;
+			},
+			// 角度控制回调
+			swiperConfirm(e) {
+				this.dc.buildCommand(e.item, e.index, e.value, e.other);
+				this.swiperClose();
+			},
+			swiperClose() {
+				this.pop.show = true;
 			},
 		}
 	}
 </script>
+<script module="leaflet" lang="renderjs">
+	// #ifdef H5
+	import "leaflet/dist/leaflet.css"
+	// #endif
+	import L from "leaflet"
 
+	export default {
+		data() {
+			return {
+				map: null,
+				key: null,
+				centerPoint: null, //默认乌鲁木齐
+				mapType: null,
+				selectMapType: "img_w",
+				dom: {
+					landMap: null,
+					dataObj: {},
+					imgs: null,
+					cp: null,
+					label: {},
+					marker: {}
+				},
+			};
+		},
+		mounted() {},
+		methods: {
+			// 接受图片传递
+			imgsEmitHandler(e) {
+				if (!e) {
+					return;
+				}
+				this.key = e.key;
+				this.centerPoint = {
+					lat: e.centerPoint[0],
+					lng: e.centerPoint[1],
+				};
+				this.dom.imgs = e.imgs;
+				this.initMap();
+			},
+			woEmitHandler(e) {
+				if (!e) {
+					return;
+				}
+				console.error("woEmitHandler:", e);
+				const that = this;
+				if (this.map) {
+					var layers = that.map._layers;
+					var markersToRemove = [];
+					// 遍历所有图层并移除
+					for (var id in layers) {
+						if (layers[id] instanceof L.Marker) { // 确保我们处理的是一个Leaflet图层
+							markersToRemove.push(layers[id]);
+						}
+					}
+					// 移除所有的 Marker
+					markersToRemove.forEach(function(marker) {
+						that.map.removeLayer(marker);
+					});
+				} else {
+					this.initMap();
+				}
+				this.dom.dataObj = e.deviceData;
+				this.drawMap(e.landMap);
+				this.setWaterOutlet(e.wo);
+			},
+			//初始化地图
+			initMap() {
+				if (this.map) {
+					return;
+				}
+				const that = this;
+				that.mapType = {
+					vec_w: new L.tileLayer(
+						`http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${that.key}`, {
+							attribution: '矢量地图'
+						}),
+					img_w: new L.tileLayer(
+						`http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${that.key}`, {
+							attribution: '影像地图'
+						}),
+					ter_w: new L.tileLayer(
+						`http://t0.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=${that.key}`, {
+							attribution: '地形图'
+						}),
+					labelLayer: new L.tileLayer(
+						`http://t0.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${that.key}`, {
+							attribution: '矢量地名标注'
+						}),
+				};
+				var normal = L.layerGroup([that.mapType[that.selectMapType], that.mapType.labelLayer])
+
+				const map = L.map('map', {
+					// crs: L.CRS.EPSG3857,	
+					// center: [34.07148, 108.84076], //中心点
+					center: [that.centerPoint.lng, that.centerPoint.lat], //中心点
+					layers: normal,
+					zoom: 5, //默认层级
+					minZoom: 2, //最小层级
+					maxZoom: 18, //最大层级
+					zoomControl: true, //是否将 zoom 缩放控件添加到地图中。
+					doubleClickZoom: false, //图是否可以通过双击来放大
+					dragging: true, //地图是否可以通过 mouse/touch 进行拖动。
+					attributionControl: false, //是否将 attribution 版权控件添加到地图中。
+					tap: true // 确保此选项为 true 或者不指定，因为默认值是 true
+				});
+
+				// 如果需要监听缩放过程中的变化，可以使用 'zoom' 事件
+				map.on('zoom', function() {
+					that.onZoomend();
+				});
+
+				that.map = map;
+				that.$ownerInstance.callMethod('initMapData', "map初始化回调");
+			},
+			onZoomend() { //缩放监听
+				const that = this;
+				var currentZoomLevel = this.map.getZoom();
+				console.log("正在缩放，当前缩放级别: " + currentZoomLevel);
+				var layers = that.map._layers;
+				var markersToRemove = [];
+				// 遍历所有图层并移除
+				for (var id in layers) {
+					if (layers[id] instanceof L.Marker) { // 确保我们处理的是一个Leaflet图层
+						markersToRemove.push(layers[id]);
+					}
+				}
+				// 移除所有的 Marker
+				markersToRemove.forEach(function(marker) {
+					that.map.removeLayer(marker);
+				});
+				if (currentZoomLevel > 16) {
+					for (let key in that.dom.label) {
+						that.map.addLayer(that.dom.label[key])
+					}
+					for (let key in that.dom.marker) {
+						that.map.addLayer(that.dom.marker[key].marker);
+					}
+				} else if (currentZoomLevel == 16) {
+					for (let key in that.dom.marker) {
+						that.map.addLayer(that.dom.marker[key].marker);
+					}
+				} else {
+					// 定义图标属性
+					let markerIcon = L.icon({
+						iconUrl: "./static/images/map/zhongxindian.png",
+						//图标图像的尺寸，单位是像素。
+						iconSize: [20, 30],
+					});
+					L.marker([that.centerPoint.lng, that.centerPoint.lat], {
+						icon: markerIcon,
+					}).addTo(that.map);
+				}
+			},
+			// 绘制地图
+			drawMap(landMap) {
+				if (!landMap) {
+					return
+				}
+				const {
+					centerPoint, //中心点
+					boundary, //边界(支持多个)
+					mainLine, //主干管
+					secondaryLine //支干管
+				} = landMap;
+				// 重新设置中心点
+				const cp = JSON.parse(centerPoint)
+				// this.map.setZoomAround([cp[1], cp[0]], 16)
+				// this.map.flyTo([cp[1], cp[0]], 16)
+				this.map.setView([cp[1], cp[0]], 18)
+				this.setCenterPoint(centerPoint)
+				this.setBoundary(boundary)
+				this.setMainLine(mainLine)
+				this.setSecondaryLine(secondaryLine)
+				this.dom.landMap = landMap;
+			},
+			// 设置中心点
+			setCenterPoint(centerPoint) {
+				if (!centerPoint) {
+					return
+				}
+				// 重新设置中心点
+				centerPoint = JSON.parse(centerPoint)
+				// 重新设置中心点
+				this.centerPoint = {
+					lat: centerPoint[0],
+					lng: centerPoint[1],
+				};
+			},
+			// 设置边界
+			setBoundary(boundary) {
+				if (!boundary) {
+					return
+				}
+				// 重新设置中心点
+				boundary = JSON.parse(boundary)
+				if (boundary.length) {
+					let points = []
+					boundary.forEach((item) => {
+						points.push([item[1], item[0]])
+					})
+					//创建面对象
+					var polygon = L.polygon(points, {
+						color: "blue"
+					});
+					this.map.addLayer(polygon);
+				}
+			},
+			// 设置主干管
+			setMainLine(mainLine) {
+				if (!mainLine) {
+					return
+				}
+				// 重新设置中心点
+				mainLine = JSON.parse(mainLine)
+				if (mainLine.length) {
+					mainLine.forEach((item1) => {
+						let points = []
+						item1.forEach((item2) => {
+							points.push([item2[1], item2[0]])
+						})
+						//创建线对象
+						var line = L.polyline(points, {
+							color: '#ff0000',
+						});
+						//向地图上添加线
+						this.map.addLayer(line)
+					})
+				}
+			},
+			// 设置主干管
+			setSecondaryLine(secondaryLine) {
+				if (!secondaryLine) {
+					return
+				}
+				// 重新设置中心点
+				secondaryLine = JSON.parse(secondaryLine)
+				secondaryLine = [
+					[
+						[108.83999, 34.07187],
+						[108.8438, 34.07187]
+					]
+				]
+				if (secondaryLine.length) {
+					secondaryLine.forEach((item1) => {
+						let points = []
+						item1.forEach((item2) => {
+							points.push([item2[1], item2[0]])
+						})
+						//创建线对象
+						var line = L.polyline(points, {
+							color: '#00ff00',
+						});
+						//向地图上添加线
+						this.map.addLayer(line)
+					})
+				}
+			},
+			// 设置阀门
+			setWaterOutlet(wo) {
+				if (!wo && !wo.length) {
+					return
+				}
+				const that = this
+				wo.forEach((item) => {
+					if (item.longitude && item.latitude) {
+						item.latitude = 34.07187
+						// 创建标注
+						let marker = L.marker([item.latitude, item.longitude], {
+							title: "312",
+							alt: "123",
+							icon: that.creatMapIcon(item?.device?.deviceTypeKey)
+						})
+						marker.on('click', function(e) {
+							that.mapDeviceClick(e);
+						});
+						that.map.addLayer(marker) // 将标注添加到地图中
+						that.addMarker(marker, item);
+
+						// 创建文字
+						let label = that.creatLabel(item, marker);
+						that.map.addLayer(label) // 将标注添加到地图中
+						that.addLabel(item, label);
+					}
+					if (item.children && item.children.length) {
+						item.children.forEach((child) => {
+							if (child.longitude && child.latitude) {
+								child.latitude = 34.07187
+								// 创建标注
+								let marker = L.marker([child.latitude, child.longitude], {
+									icon: that.creatMapIcon(child?.device?.deviceTypeKey)
+								})
+								marker.addEventListener("click", (e) => {
+									that.mapDeviceClick(e);
+								});
+								that.map.addLayer(marker) // 将标注添加到地图中
+								that.addMarker(marker, child);
+
+								// 创建文字
+								let label = that.creatLabel(child, marker);
+								that.map.addLayer(label) // 将标注文字添加到地图中
+								that.addLabel(child, label);
+							}
+						})
+					}
+				})
+			},
+			// 生成阀门图标
+			creatMapIcon(type, select = false) {
+				// 获取当前地图的缩放级别
+				const zoom = this.map.getZoom();
+				var icon = null;
+				switch (type) {
+					case 'valve':
+						icon = L.icon({
+							iconUrl: `.${select ? this.dom.imgs.valve3_select : this.dom.imgs.valve3}`,
+							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
+						});
+						break;
+					case 'fiveValve':
+						icon = L.icon({
+							iconUrl: `.${select ? this.dom.imgs.valve5_select : this.dom.imgs.valve5}`,
+							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
+						});
+						break;
+					case 'butterflyValve':
+						icon = L.icon({
+							iconUrl: `.${select ? this.dom.imgs.df_select : this.dom.imgs.df}`,
+							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
+						});
+						break;
+					default:
+						icon = L.icon({
+							iconUrl: `.${this.dom.imgs.csk}`,
+							iconSize: [20, 30], //图标图像的尺寸，单位是像素。
+							// //图标 "tip" 的坐标（相对于其左上角）。图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
+							// iconAnchor: [7, 9],
+							// //弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开。
+							// popupAnchor: [-3, -3],
+						});
+						break;
+				}
+				return icon;
+			},
+			// 生成阀门文字
+			creatLabel(item, marker) {
+				let name = item.showName;
+				let divIcon = L.divIcon({
+					html: `<span>${name}</span>`,
+					className: `my-device-icon ${this.getLableColor(item.dataKey)}`,
+					iconAnchor: [15, -10],
+				});
+				if (name.length <= 3) {
+					divIcon.options.iconAnchor = [15, -10]
+				} else if (name.length == 4 || name.length == 5) {
+					divIcon.options.iconAnchor = [20, -10]
+				} else {
+					divIcon.options.iconAnchor = [25, -10]
+				}
+				return L.marker(marker._latlng, {
+					icon: divIcon
+				});
+			},
+			// 获取文字的颜色
+			getLableColor(dataKey) {
+				let color = 'device-white'; //"#fff";
+				if (this.dom.dataObj[dataKey] && this.dom.dataObj[dataKey]?.online) {
+					if (this.dom.dataObj[dataKey].warning.length) {
+						color = 'device-orange'; //"#fbc902"; //橙黄（警告）
+					} else {
+						color = 'device-green'; //"#0bff3a"; //绿色（在线）
+					}
+				} else {
+					color = 'device-white'; //"#fff"; //白色（默认/离线）
+				}
+				return color;
+			},
+			// 缓存页面marker
+			addMarker(marker, item) {
+				this.dom.marker[marker._leaflet_id] = {
+					item: item,
+					select: false,
+					marker: marker,
+				};
+			},
+			// 缓存页面Label
+			addLabel(item, label) {
+				if (item.device) {
+					this.dom.label[item.device.deviceCode] = label;
+				} else {
+					this.dom.label[item.showName] = label;
+				}
+			},
+			// 设备点击
+			mapDeviceClick(e) {
+				const that = this;
+				const key = e.sourceTarget._leaflet_id;
+				const clickItem = that.dom.marker[key];
+				if (clickItem.item?.device) {
+					for (var rkey in that.dom.marker) {
+						if (that.dom.marker[rkey].select) {
+							const clickedIcon = that.creatMapIcon(that.dom.marker[rkey].item.device?.deviceTypeKey, false);
+							that.dom.marker[rkey].marker.setIcon(clickedIcon);
+							that.dom.marker[rkey].select = false;
+						}
+						if (key == rkey) {
+							const clickedIcon = that.creatMapIcon(that.dom.marker[rkey].item?.device?.deviceTypeKey, true);
+							that.dom.marker[rkey].marker.setIcon(clickedIcon);
+							that.dom.marker[rkey].select = true;
+						}
+					}
+					// that.$ownerInstance.callMethod('showPopup', that.dom.marker[rkey].item);
+					that.$ownerInstance.callMethod('mapEventHandler', {
+						type: "showPopup",
+						data: clickItem.item
+					});
+				} else {
+					that.$ownerInstance.callMethod('mapEventHandler', {
+						type: "msg",
+						data: "未绑定设备!"
+					});
+				}
+			},
+		}
+	}
+</script>
+<style lang="scss">
+	/* #ifdef APP-PLUS */
+	@import url("leaflet/dist/leaflet.css");
+	/* #endif */
+
+	.map {
+		width: 100%;
+		top: 0;
+		bottom: 0;
+		position: absolute;
+		z-index: 0;
+
+		/* 地图放大缩小 */
+		::v-deep .leaflet-control-container {
+			position: absolute !important;
+			right: 55px !important;
+			top: 20% !important;
+		}
+
+		/* 文字 */
+		:deep() {
+			.my-device-icon {
+				background-color: transparent;
+			}
+
+			.my-device-icon span {
+				font-size: 14px;
+				white-space: nowrap;
+				display: block;
+				border-radius: 4px;
+				background-color: transparent;
+				width: fit-content;
+				padding: 2px 5px;
+			}
+
+			.device-white span {
+				color: #fff;
+			}
+
+			.device-green span {
+				color: #0bff3a;
+			}
+
+			.device-orange span {
+				color: #fbc902;
+			}
+		}
+
+
+	}
+</style>
 <style lang="scss" scoped>
 	.uni-popup {
 		z-index: 1000;
diff --git a/pages/index.vue b/pages/index.vue
index 01b75af..7fd0348 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -539,10 +539,14 @@
 		onLoad() {
 			console.error("onLoad")
 			// 监听mqtt链接状态
-			uni.$off("mqtt-connected");
+			// uni.$off("mqtt-connected");
 			uni.$on("mqtt-connected", (e) => {
 				this.mqttConnected = e;
 			});
+			// 监听地块改变
+			uni.$on("update-land-index", (e) => {
+				console.error("update-land-index:", e);
+			});
 
 			this.ijs.initData(this.user.userId, (land, wo) => {
 				getApp().getWoList(land, wo);