From d6aad784244e97d0e3254a117774e9a0140b4c64 Mon Sep 17 00:00:00 2001
From: Iruka <1017819588@qq.com>
Date: Wed, 18 Dec 2024 10:00:34 +0800
Subject: [PATCH] .

---
 pages/index-map - 副本.vue | 1061 ++++++++++++++++++++++++++++++++++--
 1 file changed, 1016 insertions(+), 45 deletions(-)

diff --git a/pages/index-map - 副本.vue b/pages/index-map - 副本.vue
index f5d1e91..693a733 100644
--- a/pages/index-map - 副本.vue	
+++ b/pages/index-map - 副本.vue	
@@ -1,59 +1,1030 @@
 <template>
 	<!-- 顶部导航栏 -->
 	<custom-nav-bar :left="false" leftText="" @leftClick="" :title="title">
+		<template v-slot:left>
+			<view @click="$refs.landRef.open()">地块</view>
+		</template>
 	</custom-nav-bar>
-	<!-- 地图容器 -->
-	<!-- <view ref="mapContainer"></view> -->
-	<view id="mapContainer" style="width:100%; height:calc(100vh - 95px);"></view>
+	<!-- 地图 -->
+	<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" />
+	<!-- 角度 -->
+	<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 'leaflet/dist/leaflet.css';
-	// import L from 'leaflet';
+	import store from "@/store"
+	import * as imageAssets from '@/utils/indexUtil/imageAssets.js'
 
-	// export default {
-	// 	data() {
-	// 		return {
-	// 			map: null,
-	// 			user: store.state.user.user,
-	// 			title: "",
-	// 		}
-	// 	},
-	// 	onLoad() {
-	// 		console.error("onLoad")
-	// 	},
-	// 	onShow() {},
-	// 	onHide() {},
-	// 	onPageScroll(e) {},
-	// 	mounted() {
-	// 		this.initMap();
-	// 	},
-	// 	methods: {
-	// 		initMap() {
-	// 			const key = import.meta.env.VITE_APP_TIAN_DI_TU_KEY; // 替换为你的天地图 API Key
-	// 			var one = new L.tileLayer(
-	// 				`http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${key}`, {
-	// 					zoomControl: true,
-	// 					attributionControl: false
-	// 				})
-	// 			var normal = L.layerGroup([one])
-	// 			// var normal_ying = L.layerGroup([two, four])
+	export default {
+		data() {
+			return {
+				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链接状态
+			// uni.$off("mqtt-connected");
+			uni.$on("mqtt-connected", (e) => {
+				this.mqttConnected = e;
+			});
+			// 监听地块改变
+			uni.$on("update-land-indexMap", (e) => {
+				console.error("update-land-indexMap:", e);
+				this.initMapData();
+			});
 
-	// 			var map = L.map("mapContainer", {
-	// 				center: [31.27, 113.68],
-	// 				zoom: 13,
-	// 				layers: [normal],
-	// 				attributionControl: false,
-	// 				preferCanvas: true,
-	// 			});
-	// 			this.map = map
-	// 		},
-	// 	}
-	// }
+			// this.ijs.initData(this.user.userId, (land, wo) => {
+			// 	getApp().getWoList(land, wo);
+			// });
+		},
+		onShow() {
+			this.title = this.ijs?.land?.landName || "田间";
+
+			// // 监听当前页面的加载状态
+			// 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");
+		},
+		methods: {
+			mapEventHandler(e) {
+				if (!e) {
+					return;
+				}
+				switch (e.type) {
+					case "msg":
+						this.$toast(e.data);
+						break;
+					case "showPopup":
+						this.showPopup(e.data);
+						break;
+					default:
+						break;
+				}
+			},
+			initMapData() {
+				//初始化地块数据
+				this.mapData.wo = this.ijs.wo;
+			},
+			// 地块选择回调
+			landChange(e) {
+				this.title = e.landName;
+			},
+			// 获取地块信息
+			getLand(e) {
+				this.ijs.getLand(e.node).then(res => {
+					this.$refs.landRef.addLand(e, res.data);
+				});
+			},
+			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;
+			},
+			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;
+	}
 
+	// 水阀列表title
+	.card-grey {
+		border-radius: 10px 10px 0 0;
+		margin-bottom: 0;
+	}
+
+	.sf-title {
+		font-size: 24rpx;
+		color: #999999;
+		padding: 10px 0;
+
+		.text {
+			font-size: 32rpx;
+			color: #333;
+		}
+
+		.icon {
+			vertical-align: top;
+			margin-right: 5px;
+			font-size: 44rpx;
+			color: #39ac4f;
+		}
+	}
+
+	.font-green {
+		color: #39ac4f !important;
+	}
+
+	.font-red {
+		color: #e60012 !important;
+	}
+
+	/* 首页阀门列表 */
+	.control {
+		padding: 20px 10px;
+
+		.u-button {
+			width: 100% !important;
+			min-width: 77px;
+		}
+
+		.u-line-progress {
+			min-width: 77px;
+			margin-top: 5px;
+		}
+	}
+
+	.tips {
+		font-size: 12rpx;
+		margin: 10px;
+	}
+
+
+	.valve {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+
+		.timeout {
+			color: red !important;
+			font-size: 10px;
+		}
+
+		.btn-img {
+			width: 160px;
+			margin: 15px;
+			position: relative;
+
+			img {
+				width: 100%;
+			}
+
+			.text,
+			.text5 {
+				&>view {
+					position: absolute;
+					z-index: 2;
+					font-weight: bold;
+					font-size: 16px;
+					color: #333;
+				}
+
+				.left {
+					left: 0;
+					top: calc(50% - 17px);
+					transform: translateY(-50%);
+				}
+
+				.top {
+					top: 0;
+					left: 50%;
+					transform: translateX(-50%);
+				}
+
+				.middle {
+					font-size: 24px;
+					top: calc(50% - 18px);
+					left: 50%;
+					transform: translate(-50%, -50%);
+					color: #e60012;
+					text-align: center;
+				}
+
+				.right {
+					right: 0;
+					top: calc(50% - 17px);
+					transform: translateY(-50%);
+				}
+
+				.bottom {
+					bottom: 0;
+					right: 50%;
+					transform: translateX(50%);
+				}
+			}
+
+			.text5 {
+				.left {
+					left: 0;
+					top: calc(50% - 4px);
+					transform: translateY(-50%);
+				}
+
+				.middle {
+					top: calc(50% - 5px);
+				}
+
+				.right {
+					right: 0;
+					top: calc(50% - 4px);
+					transform: translateY(-50%);
+				}
+			}
+
+		}
+	}
 </style>
\ No newline at end of file