<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 id="map" class="map" :data="mapObj.initData" :change:data="leaflet.initEmitHandler" :mapType="mapObj.mapType"
		:change:mapType="leaflet.switchLayerEmitHandler" :centerPoint="mapObj.centerPoint"
		:change:centerPoint="leaflet.centerPointEmitHandler" :landMap="mapObj.landMap"
		:change:landMap="leaflet.drawEmitHandler" :davice="mapObj.davice" :change:davice="leaflet.markerEmitHandler"
		:updateMarker="mapObj.updateMarker" :change:updateMarker="leaflet.updateMarkerEmitHandler"
		:ranging="mapObj.ranging" :change:ranging="leaflet.rangingEmitHandler">
	</view>

	<!-- 工具 -->
	<view class="below">
		<view @click="mapObj.showMapType = true">
			<i class="iconfont icon-tuceng">
				<span></span>
			</i>
		</view>
		<view @click="mapToCenterPoint">
			<i class="iconfont icon-dingwei"></i>
		</view>
		<view @click="mapNavigation">
			<i class="iconfont icon-luxian"></i>
		</view>
		<view @click="mapRanging" :style="mapObj.ranging ? 'background: deepskyblue;':''">
			<i class="iconfont icon-ceju"></i>
		</view>
	</view>
	<view class="tdt">
		<image src="../static/images/map/logo.png"></image>GS（2024）0568号 - 甲测资字1100471
	</view>

	<!-- 图层弹出 -->
	<u-popup type="center" :show="mapObj.showMapType" @close="mapObj.showMapType = false">
		<view class="popup-content">
			<view class="layer">
				<view class="title" @click="mapObj.showMapType = false">
					<span>图层</span>
					<view>
						<i class="iconfont icon-guanbi"></i>
					</view>
				</view>
				<view class="card">
					<view class="layer-item" :class="[mapObj.mapType == 'vec_w'? 'click':'']">
						<view class="img" @click="mapSwitchLayer('vec_w')">
							<image src="../static/images/map/dt.jpg"></image>
						</view>
						标准地图
					</view>
					<view class="layer-item" :class="[mapObj.mapType == 'ter_w'? 'click':'']">
						<view class="img" @click="mapSwitchLayer('ter_w')">
							<image src="../static/images/map/dx.jpg"></image>
						</view>
						地形图
					</view>
					<view class="layer-item" :class="[mapObj.mapType == 'img_w'? 'click':'']">
						<view class="img" @click="mapSwitchLayer('img_w')">
							<image src="../static/images/map/wx.jpg"></image>
						</view>
						卫星图
					</view>
				</view>
			</view>
		</view>
	</u-popup>

	<!-- 控制弹出 -->
	<u-popup mode="bottom" :show="pop.show" @close="closePopup">
		<view class="popup-content" v-if="pop.show">
			<view class="card-grey">
				<view class="gb" @click="closePopup">
					<i class="iconfont icon-guanbi"></i>
				</view>
				<view class="card-title">
					<u-row v-if="pop.item.type == 'jz'">
						<u-col span="4">
							<view @click="openDialog('adc', pop.item)">
								<text class="font-green">●</text>{{pop.item.showName}}
							</view>
						</u-col>
						<u-col span="4">
							<view class="fixed">
								<custom-signal :online="dc.dataObj[pop.item.dataKey]?.online"
									:isp="dc.dataObj[pop.item.dataKey]?.isp"
									:value="dc.dataObj[pop.item.dataKey]?.rssi" />
								<custom-battery :online="dc.dataObj[pop.item.dataKey]?.online"
									:charging="dc.dataObj[pop.item.dataKey]?.charging"
									:value="dc.dataObj[pop.item.dataKey]?.b" />
							</view>
						</u-col>
						<u-col span="4" 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>
					<u-row v-else>
						<u-col span="2">
							<view @click="openDialog('adc', pop.item)">
								<text class="font-green">●</text>{{pop.item.showName}}
							</view>
						</u-col>
						<u-col span="5">
							<view class="fixed">
								<custom-signal :online="dc.dataObj[pop.item.dataKey]?.online"
									:value="dc.dataObj[pop.item.dataKey]?.comm.rssi"
									v-if="dc.dataObj[pop.item.dataKey]?.comm.type == '4g'" />
								<custom-battery :online="dc.dataObj[pop.item.dataKey]?.online"
									:charging="dc.dataObj[pop.item.dataKey]?.adc.charging"
									:value="dc.dataObj[pop.item.dataKey]?.adc.b" />
								<view>
									<view class="iconfont icon-wendu icon" style="float: left;margin-left: 5px;" />
									{{ dc.dataObj[pop.item.dataKey]?.adc.t}}
								</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 == 'station'">
						<image :src="valveImg.jz" mode="widthFix" />
					</u-row>
					<u-row v-else-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"
									v-if="pop.item.device.disable.show && !pop.item.device.disable.open1">
									{{user.userName}}
								</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>
										<span class="name"
											v-if="pop.item.device.disable.show && !pop.item.device.disable.open">
											{{user.userName}}
										</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>
										<span class="name"
											v-if="pop.item.device.disable.show && !pop.item.device.disable.close">
											{{user.userName}}
										</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>
								<span class="name"
									v-if="pop.item.device.disable.show && !pop.item.device.disable.open2">
									{{user.userName}}
								</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}_open1`]">
										({{ dc.countdownObj[`${pop.item.dataKey}_open1`] }})
									</span>
									<span v-else class="timeout">
										{{ dc.timeoutObj[`${pop.item.dataKey}_open1`] }}
									</span>
								</span>
								<span class="name"
									v-if="pop.item.device.disable.show && !pop.item.device.disable.open1">
									{{user.userName}}
								</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}_open2`]">
												({{ dc.countdownObj[`${pop.item.dataKey}_open2`] }})
											</span>
											<span v-else class="timeout">
												{{ dc.timeoutObj[`${pop.item.dataKey}_open2`] }}
											</span>
										</span>
										<span class="name"
											v-if="pop.item.device.disable.show && !pop.item.device.disable.open2">
											{{user.userName}}
										</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="text5">
										<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}_open4`]">
												({{ dc.countdownObj[`${pop.item.dataKey}_open4`] }})
											</span>
											<span v-else class="timeout">
												{{ dc.timeoutObj[`${pop.item.dataKey}_open4`] }}
											</span>
										</span>
										<span class="name"
											v-if="pop.item.device.disable.show && !pop.item.device.disable.open4">
											{{user.userName}}
										</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}_open3`]">
										({{ dc.countdownObj[`${pop.item.dataKey}_open3`] }})
									</span>
									<span v-else class="timeout">
										{{ dc.timeoutObj[`${pop.item.dataKey}_open3`] }}
									</span>
								</span>
								<span class="name"
									v-if="pop.item.device.disable.show && !pop.item.device.disable.open3">
									{{user.userName}}
								</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 v-if="pop.item.type != 'jz'">
					<view class="expand5" @click="pop.showbox = !pop.showbox">
						<view class="icon">
							<view class="iconfont icon-jt-b"></view>
						</view>
					</view>
					<view class="box" :class="[pop.showbox ? 'show':'hide']">
						<view class="card">
							<view class="title fixed">
								<view class="text" style="min-width: 25px;">
									水压趋势（kPa）
								</view>
								<view>更多<span class="iconfont icon-you"></span></view>
							</view>
							<view class="tip">设备仅采集已打开的出水口水压</view>
							<view class="pressure">
								<view>①口</view>
								<view>
									<view>放图表</view>
									<span>近2小时暂无水压变化</span>
								</view>
							</view>
							<view class="pressure">
								<view>①口</view>
								<view>
									<view>放图表</view>
								</view>
							</view>
						</view>
						<view class="card" style="overflow: hidden;">
							<view class="title fixed">
								<view class="text" style="min-width: 25px;">
									最近操作
								</view>
								<view @click="operationLog(pop.item)">
									更多<span class="iconfont icon-you"></span>
								</view>
							</view>
							<view class="text-list" v-if="dc.dataObj[pop.item.dataKey]"
								v-for="item in dc.dataObj[pop.item.dataKey].latestOperation">
								<view>
									<view>
										{{`${item.valveOutletNo}口，${item.operContent}`}}
									</view>
									<view class="font-green">
										{{item.operResult ? '【成功】' : '【失败】'}}
									</view>
								</view>
								<view>
									<view>操作人：{{item.userName}}</view>
									<view>{{formatData(item.time)}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>

	<!-- 地块选择 -->
	<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand" @select="" />
	<!-- 角度 -->
	<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="openPopup" @confirm="swiperConfirm" />
	<!-- ADC -->
	<custom-index-adc ref="adcRef" @close="openPopup" />
	<!-- 墒情 -->
	<custom-index-mp ref="mpRef" />
</template>
<script>
	import config from '@/config.js'
	const appInfo = config.appInfo;
	import store from "@/store"
	import {
		timestampFormat
	} from '@/utils/common.js'
	import * as imageAssets from '@/utils/indexUtil/imageAssets.js'
	import {
		getHeadDevice
	} from "@/api/controlHeadInterface.js"
	import {
		getOtherDevice
	} from "@/api/system/controlOtherInterface"

	export default {
		data() {
			return {
				user: store.state.user.user,
				title: null,
				ijs: getApp().ijs, // 首页公共js
				dc: getApp().dc, // 设备控制公共代码
				valveImg: imageAssets, //阀门图片
				mqttshow: false, // h5端手动链接mqtt按钮显示
				mqttConnected: false, //	mqtt链接状态
				mapObj: {
					initData: null, // 地图初始化参数
					landMap: null, //地图边界信息
					davice: null, //设备		初始化一次后一般不动，因为会刷新整个地图
					updateMarker: null, //更新设备	随外面的device一起更新
					showMapType: false, //图层选择弹框
					mapType: "img_w", //默认图层
					centerPoint: 0, //用于中心点点击
					ranging: false, //测距
				},
				pop: {
					show: false,
					showbox: false,
					item: {}
				},
			}
		},
		onLoad() {
			const that = this;
			getApp().on("mqtt", "mqtt_map", function(e) {
				if (e.type == "state") {
					that.mqttConnected = e.connected;
				} else if (e.type == "msg") {
					that.mapUpdateMarker(e.data);
				}
			});
			getApp().on("land", "land_map", function(e) {
				that.title = that.ijs?.land?.landName || null;
				that.mapOnload();
			});
		},
		onShow() {
			this.title = this.ijs?.land?.landName || "田间";
			// 监听控制角度弹窗通知
			uni.$off("open-angle-slider");
			uni.$on("open-angle-slider", (e) => {
				this.$refs.refAngleSlider.show(e.title, e.extra, e.value, e.other);
				this.closePopup();
			});
		},
		onHide() {
			uni.$off("index-showLoading");
			uni.$off("open-angle-slider");
		},
		mounted() {
			//初始化基础数据
			this.mapObj.initData = {
				key: import.meta.env.VITE_APP_TIAN_DI_TU_KEY,
				centerPoint: [87.624947, 43.791789], //默认乌鲁木齐
				mapType: this.mapObj.mapType,
				imgs: imageAssets,
			};
		},
		methods: {
			// 获取地块信息
			getLand(e) {
				this.ijs.getLand(e.node).then(res => {
					this.$refs.landRef.addLand(e, res.data);
				});
			},
			//初始化完成回调
			mapOnload(e) {
				if (!this.ijs.wo) {
					return;
				}
				const that = this;
				//地块边界
				that.mapObj.landMap = that.ijs.wo.landMap;
				let device = {};
				//地块基站
				if (that.dc.stations.length) {
					that.dc.stations.forEach(item => {
						if (item.latitude && item.longitude) {
							item["deviceTypeKey"] = "station";
							let obj = {
								showName: item.deviceCode,
								latlng: [item.latitude, item.longitude],
								type: "jz",
								dataKey: item.deviceCode,
								device: item,
								online: false,
								warning: false,
								logParams: {
									operSubject: item.deviceCode
								}
							}
							if (that.dc.dataObj[item.deviceCode]) {
								obj.online = that.dc.dataObj[item.deviceCode].online;
							}
							device[item.deviceCode] = obj;
						}
					});
				}
				//其他设备
				// for (let key in that.dc.others) {}
				//地块阀门
				if (that.dc.wo.length) {
					that.dc.wo.forEach((item) => {
						if (item.longitude && item.latitude) {
							let obj = {
								showName: item.showName,
								latlng: [item.latitude, item.longitude],
								type: item?.device?.deviceTypeKey,
								dataKey: item.dataKey,
								device: item.device,
								online: false,
								warning: false,
								logParams: {
									landId: item.landId,
									wogId: item.id,
									woId: -1,
								}
							}
							if (that.dc.dataObj[item.dataKey]) {
								obj.online = that.dc.dataObj[item.dataKey].online;
								obj.warning = that.dc.dataObj[item.dataKey].warning.length > 0;
							}
							device[item.dataKey || item.showName] = obj;
						}
						if (item.children && item.children.length) {
							item.children.forEach((child) => {
								if (child.longitude && child.latitude) {
									let obj = {
										showName: child.showName,
										latlng: [child.latitude, child.longitude],
										type: child?.device?.deviceTypeKey,
										dataKey: child.dataKey,
										device: child.device,
										online: false,
										warning: false,
										logParams: {
											landId: child.landId,
											wogId: child.landGroupId,
											woId: child.id,
										}
									}
									if (that.dc.dataObj[child.dataKey]) {
										obj.online = that.dc.dataObj[child.dataKey].online;
										obj.warning = that.dc.dataObj[child.dataKey].warning.length > 0;
									}
									device[child.dataKey || child.showName] = obj;
								}
							})
						}
					})
				}
				// 其他设备
				for (var key in that.dc.others) {
					if (that.dc.others[key].data && that.dc.others[key].data.length) {
						that.dc.others[key].data.forEach(item => {
							if (item.latitude && item.longitude) {
								let showName = item.showName || item.deviceCode;
								let deviceTypeKey = key,
									dataKey = null;
								if (key == "deviceMp") {
									deviceTypeKey = "sq";
								} else {
									switch (item.deviceTypeId) {
										case 4: // 4	施肥机
											deviceTypeKey = "sfj"
											break;
										case 5: // 5	首部控制器
											deviceTypeKey = "sb"
											break;
										case 6: // 6	气象站
											deviceTypeKey = "qxz"
											break;
										case 7: // 7	病虫
											deviceTypeKey = "bc"
											break;
										case 8: // 8	孢子
											deviceTypeKey = "bz"
											break;
										case 9: // 9	摄像头
											deviceTypeKey = "sxt"
											break;
										case 10: // 10	杀虫灯
											deviceTypeKey = "scd"
											break;
									}
								}

								let obj = {
									showName: showName,
									latlng: [item.latitude, item.longitude],
									type: deviceTypeKey,
									dataKey: dataKey,
									device: item,
									online: false,
									warning: false,
									logParams: {},
								}
								device[showName] = obj;
							}
						});
					}
				}
				that.mapObj.davice = device;
				that.davice = device;
			},
			//选择图层
			mapSwitchLayer(key) {
				this.mapObj.showMapType = false;
				this.mapObj.mapType = key;
			},
			//去中心点
			mapToCenterPoint() {
				this.mapObj.centerPoint++;
			},
			//导航
			mapNavigation() {
				this.$showConfirm(`导航至"${this.title}"？`).then(res => {
					if (res.confirm) {
						const centerPoint = JSON.parse(this.mapObj.landMap.centerPoint);
						const lat = centerPoint[1]
						const lng = centerPoint[0]
						let url = '';
						const appName = appInfo.name; // 替换为你的应用名
						const name = this.title; // 名称
						// 高德地图
						if (uni.getSystemInfoSync().platform === 'android') { // Android 平台
							url =
								`androidamap://route/plan/?sourceApplication=${appName}&sid=BGVIS1&did=BGVIS2&dlat=${lat}&dlon=${lng}&dname=${encodeURIComponent(name)}&mode=driving`;
						} else if (uni.getSystemInfoSync().platform === 'ios') { // iOS 平台
							url = `iosamap://path?sourceApplication=${appName}&mldl=${lat},${lng}`;
						}

						// // 百度地图 mode：driving：驾车模式。walking：步行模式。transit：公交模式。
						// url = `baidumap://map/direction?destination=latlng:${lat},${lng}|name:${encodeURIComponent(name)}&mode=driving`;
						// 尝试打开地图
						plus.runtime.openURL(url, function(err) {
							uni.showToast({
								title: '未安装应用',
								icon: 'none'
							});
						});
					}
				});
			},
			// 测距
			mapRanging() {
				if (this.mapObj.ranging) {
					this.mapObj.ranging = false;
					this.$toast("测距已关闭")
					return;
				}
				this.$showConfirm(`开启测距，开启后再次点击关闭。`).then(res => {
					if (res.confirm) {
						this.mapObj.ranging = true;
					}
				});
			},
			//设备状态更新
			mapUpdateMarker(e) {
				if (!this.davice[e.deviceCode]) {
					return;
				}
				const obj = {
					key: e.deviceCode,
					online: e.online,
					warning: e.warning.length > 0,
				};
				const item = this.davice[e.deviceCode];
				//如果这两个影响显示的值不一样，则更新它
				if (item.online != obj.online || item.warning != obj.warning) {
					this.mapObj.updateMarker = obj;
					this.davice.online = obj.onlin;
					this.davice.warning = obj.warning;
				}
			},
			//设备点击
			mapMarkerClickHandler(e) {
				switch (e.type) {
					case 'butterflyValve':
					case 'valve':
					case 'fiveValve':
					case 'jz':
						if (e.device) {
							this.pop.showbox = false;
							this.pop.item = e;
							console.error("this.pop.item:", this.pop.item);
							this.openPopup();
						} else {
							this.$toast("未绑定设备!");
						}
						break;
					case 'sfj':
					case 'sb':
						this.$showConfirm("确定打开首部设备？").then(res => {
							if (res.confirm) {
								uni.showLoading()
								getHeadDevice(e.device.deviceId).then((res) => {
									uni.hideLoading()
									if (res.data.deviceTypeId === 4) {
										if (res.data.controlMode == 1) {
											uni.navigateTo({
												url: `/pages/head/fertilizerapplicator/detail?item=${JSON.stringify(res.data)}`,
											});
										} else if (item.controlMode == 2) {
											uni.navigateTo({
												url: `/pages/head/fertilizerapplicator/detailkl?item=${JSON.stringify(res.data)}`,
											});
										} else {}
									} else if (res.data.deviceTypeId === 5) {
										uni.navigateTo({
											url: `/pages/head/headdevice/detail?item=${JSON.stringify(res.data)}`,
										});
									}
								});
							}
						})

						break;
					case 'qxz':
					case 'bc':
					case 'bz':
					case 'sxt':
					case 'scd':
						this.$showConfirm("确定打开农情设备？").then(res => {
							if (res.confirm) {
								uni.showLoading()
								getOtherDevice(e.device.deviceId).then((res) => {
									uni.hideLoading()
									let url = null;
									if (res.data.deviceTypeId === 6) {
										url =
											`/pages/fourmonitor/weatherstation?item=${encodeURIComponent(JSON.stringify(res.data))}`;
									} else if (res.data.deviceTypeId === 7) {
										url =
											`/pages/fourmonitor/pest?item=${encodeURIComponent(JSON.stringify(res.data))}`;
									} else if (res.data.deviceTypeId === 8) {
										url =
											`/pages/fourmonitor/spore?item=${encodeURIComponent(JSON.stringify(res.data))}`;
									} else if (res.data.deviceTypeId === 9) {
										if (!res.data.ezopenUrl1 || !res.data.ezopenUrl2) {
											this.$toast("获取播放地址失败！")
											return;
										}
										url =
											`/pages/fourmonitor/camera?item=${encodeURIComponent(JSON.stringify(res.data))}`;
									} else if (res.data.deviceTypeId === 10) {}
									if (url) {
										uni.navigateTo({
											url: url,
										});
									}
								});
							}
						});
						break;
					case 'sq':
						this.$refs.mpRef.show(this.ijs.land, e.device.id);
						break;
				}
			},
			openPopup() {
				this.pop.show = true;
			},
			closePopup() {
				this.pop.show = false;
			},
			// 角度控制回调
			swiperConfirm(e) {
				this.dc.buildCommand(e.item, e.index, e.value, e.other);
				this.openPopup();
			},
			// 打开弹窗
			async openDialog(key, row = null) {
				switch (key) {
					// case "chart": //曲线
					// 	this.$refs.adcChartRef.show(row);
					// 	break;
					// case "wo":
					// 	this.$refs.woRemarkRef.show(row);
					// 	break;
					// case "wh": //浇灌履历
					// 	this.$refs.wateringHistoryRef.show(this.land, row);
					// 	break;
					// case "log": //日志
					// 	this.$refs.deviceLogRef.show(this.land, row);
					// 	break;
					case "mp": //墒情
						this.$refs.mpRef.show(this.land);
						break;
					case "adc": //设备adc
						this.$refs.adcRef.show(2, row, this.dc.dataObj[row.dataKey]);
						break;
				}
				this.closePopup();
			},
			// 格式化日期
			formatData(time) {
				return timestampFormat(time);
			},
			operationLog(item) {
				uni.navigateTo({
					url: `/pages/work/operation-log/index?queryParams=${JSON.stringify(item.logParams)}`,
				});
			}
		}
	}
</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: null,
				_imgs: null,
				_device: null,
				_markers: {},
				drawing: {
					ranging: null,
				}
			};
		},
		mounted() {},
		methods: {
			//初始化
			initEmitHandler(e) {
				if (!e) {
					return;
				}
				this.key = e.key;
				this.centerPoint = {
					lat: e.centerPoint[0],
					lng: e.centerPoint[1],
				};
				this._selectMapType = e.mapType;
				this._imgs = e.imgs;
				this.initMap();
			},
			//切换图层
			switchLayerEmitHandler(e) {
				if (!e) {
					return;
				}
				this.switchLayer(e);
			},
			//去中心点
			centerPointEmitHandler(e) {
				if (!e) {
					return;
				}
				this.toCenterPoint();
			},
			//地块边界绘制
			drawEmitHandler(e) {
				if (!e) {
					return;
				}
				this.drawMap(e);
			},
			//设备
			markerEmitHandler(e) {
				if (!e) {
					return;
				}
				this.setDeviceMarker(e);
			},
			// 更新设备
			updateMarkerEmitHandler(e) {
				if (!e) {
					return;
				}
				this.updateMarkerColor(e);
			},
			//测距
			rangingEmitHandler(e) {
				if (e == true || e == false) {
					if (e) {
						this.ranging(1);
					} else {
						this.ranging(0);
					}
				}
			},

			//初始化地图
			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: false, //是否将 zoom 缩放控件添加到地图中。
					doubleClickZoom: false, //图是否可以通过双击来放大
					dragging: true, //地图是否可以通过 mouse/touch 进行拖动。
					attributionControl: false, //是否将 attribution 版权控件添加到地图中。
					tap: true, // 确保此选项为 true 或者不指定，因为默认值是 true
				});
				// // 创建一个新的归因控件实例
				// var attribution = L.control.attribution({
				//     position: 'bottomright', // 设置位置，可选值有 'topleft', 'topright', 'bottomleft', 'bottomright'
				// });
				// // 添加多个归因文本
				// attribution.addAttribution('天地图');
				// // attribution.addAttribution('GS（2024）0568号 - 甲测资字1100471');
				// // 将归因控件添加到地图
				// attribution.addTo(map);

				// 如果需要监听缩放过程中的变化，可以使用 'zoom' 事件
				map.on('zoom', function() {
					// that.onZoomend();
				});

				that.map = map;
				that.$ownerInstance.callMethod('mapOnload', "map初始化回调");
			},
			//清理图层
			clearMap() {
				const that = this;
				var layers = that.map._layers;
				var markersToRemove = [];
				// 遍历所有图层并移除
				for (var id in layers) {
					if (!(layers[id] instanceof L.TileLayer)) { // 假设底图是由TileLayer提供的
						markersToRemove.push(layers[id]);
					}
					// if (layers[id] instanceof L.Marker) { // 确保我们处理的是一个Leaflet图层
					// 	markersToRemove.push(layers[id]);
					// }
				}
				// 移除所有的 Marker
				markersToRemove.forEach(function(marker) {
					that.map.removeLayer(marker);
				});
			},
			//切换地图
			switchLayer(key) {
				if (!this.map) {
					return;
				}
				const that = this;
				// 移除当前所有图层
				that.map.eachLayer(function(layer) {
					if (layer instanceof L.TileLayer) {
						that.map.removeLayer(layer);
					}
				});
				// 添加新的图层
				that.mapType[key].addTo(that.map);
				that.mapType["labelLayer"].addTo(that.map);
				that._selectMapType = key;
			},
			//中心点
			toCenterPoint() {
				var currentZoomLevel = this.map.getZoom();
				const lng = this.centerPoint.lng;
				const lat = this.centerPoint.lat;
				if (currentZoomLevel > 10) {
					this.map.setView([lng, lat], currentZoomLevel);

					// this.map.panTo([lng, lat]);
					// this.map.setZoom(18);
					// this.map.flyTo([lng, lat], currentZoomLevel);
				} else {
					this.map.setZoomAround([lng, lat], 18);
					this.map.flyTo([lng, lat], 18);
				}
			},
			// 绘制地图
			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)
			},
			// 设置中心点
			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) {
					boundary.forEach((items) => {
						let points = []
						items.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)
				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)
					})
				}
			},
			//设置设备
			setDeviceMarker(device) {
				const that = this;
				let markers = {};
				for (let key in device) {
					let item = device[key];
					// 创建标注
					let marker = L.marker(item.latlng, {
						icon: that.creatMapIcon(item.type)
					})
					marker.on('click', function(e) {
						that.markerClick(e);
					});
					that.map.addLayer(marker) // 将标注添加到地图中
					item["markerId"] = marker._leaflet_id;

					// 创建文字
					let label = L.marker(item.latlng, {
						icon: that.creatLabel(item.showName, item.online, item.warning)
					});
					that.map.addLayer(label) // 将标注添加到地图中
					item["labelId"] = label._leaflet_id;
					//缓存起来
					markers[marker._leaflet_id] = {
						item: item,
						select: false,
						marker: marker,
						label: label,
					};
				}
				that._device = device;
				that._markers = markers;
			},
			// 生成阀门图标
			creatMapIcon(type, select = false) {
				// 获取当前地图的缩放级别
				// const zoom = this.map.getZoom();
				var icon = null;
				switch (type) {
					case 'valve':
						icon = L.icon({
							iconUrl: `.${select ? this._imgs.valve3_select : this._imgs.valve3}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'fiveValve':
						icon = L.icon({
							iconUrl: `.${select ? this._imgs.valve5_select : this._imgs.valve5}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'butterflyValve':
						icon = L.icon({
							iconUrl: `.${select ? this._imgs.df_select : this._imgs.df}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'jz':
						icon = L.icon({
							iconUrl: `.${this._imgs.jz}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'sfj':
						icon = L.icon({
							iconUrl: `.${this._imgs.sfj}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'sb':
						icon = L.icon({
							iconUrl: `.${this._imgs.sb}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'qxz':
						icon = L.icon({
							iconUrl: `.${this._imgs.qxz}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'bc':
						icon = L.icon({
							iconUrl: `.${this._imgs.bc}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'bz':
						icon = L.icon({
							iconUrl: `.${this._imgs.bz}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'sxt':
						icon = L.icon({
							iconUrl: `.${this._imgs.sxt}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'scd':
						icon = L.icon({
							iconUrl: `.${this._imgs.scd}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					case 'sq':
						icon = L.icon({
							iconUrl: `.${this._imgs.sq}`,
							iconSize: [20, 34], //图标图像的尺寸，单位是像素。
						});
						break;
					default:
						icon = L.icon({
							iconUrl: `.${this._imgs.csk}`,
							iconSize: [20, 30], //图标图像的尺寸，单位是像素。
							// //图标 "tip" 的坐标（相对于其左上角）。图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
							// iconAnchor: [7, 9],
							// //弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开。
							// popupAnchor: [-3, -3],
						});
						break;
				}
				return icon;
			},
			// 生成阀门文字
			creatLabel(name = "", online, warning) {
				let divIcon = L.divIcon({
					html: `<span>${name}</span>`,
					className: `my-device-icon ${this.getLableColor(online, warning)}`,
					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 divIcon;
			},
			// 获取文字的颜色
			getLableColor(online, warning) {
				let color = 'device-white'; //"#fff";
				if (online) {
					if (warning) {
						color = 'device-orange'; //"#fbc902"; //橙黄（警告）
					} else {
						color = 'device-green'; //"#0bff3a"; //绿色（在线）
					}
				} else {
					color = 'device-white'; //"#fff"; //白色（默认/离线）
				}
				return color;
			},
			// 点击事件
			markerClick(e) {
				const that = this;
				let key = e.sourceTarget._leaflet_id;
				const clickItem = that._markers[key];
				that.$ownerInstance.callMethod('mapMarkerClickHandler', clickItem.item);
				// if (!["butterflyValve", "valve", "fiveValve"].includes(clickItem.item.type)) {
				// 	key = null;
				// }
				if (clickItem.item.device) {
					for (var rkey in that._markers) {
						if (that._markers[rkey].select) {
							const clickedIcon = that.creatMapIcon(that._markers[rkey].item.type, false);
							that._markers[rkey].marker.setIcon(clickedIcon);
							that._markers[rkey].select = false;
						}
						if (key == rkey) {
							const clickedIcon = that.creatMapIcon(that._markers[rkey].item.type, true);
							that._markers[rkey].marker.setIcon(clickedIcon);
							that._markers[rkey].select = true;
						}
					}
				}
			},
			// 更新设备的状态
			updateMarkerColor(e) {
				if (this._device[e.key]) {
					const markerId = this._device[e.key]["markerId"]; //标签的id 
					const marker = this._markers[markerId];
					if (marker) {
						const dIcon = that.creatLabel(marker.item.showName, e.online, e.warning);
						this._markers[markerId].label.setIcon(dIcon);
					}
				}
			},
			// 测距
			ranging(type) {
				const that = this;
				if (type == 1) { //开始
					that.drawing.ranging = {
						latlngs: [],
						gap: [],
						pop: [],
						item: null,
					}

					that.map.off('click');
					that.map.on('click', (e) => {
						//记录坐标
						that.drawing.ranging.latlngs.push(e.latlng);
						if (that.drawing.ranging.latlngs.length > 1) {
							if (that.drawing.ranging.item) {
								that.drawing.ranging.item.setLatLngs(that.drawing.ranging.latlngs);
							} else {
								that.drawing.ranging.item = L.polyline(that.drawing.ranging.latlngs, {
									color: "red"
								});
								that.map.addLayer(that.drawing.ranging.item);
							}
							//计算距离
							const prev = that.drawing.ranging.latlngs[that.drawing.ranging.latlngs.length - 2];
							const gap = L.latLng(prev).distanceTo(e.latlng);
							that.drawing.ranging.gap.push(gap);
							let sumgap = that.drawing.ranging.gap.reduce((acc, curr) => acc + curr, 0);

							if (sumgap > 1000) {
								sumgap = (sumgap / 1000).toFixed(2);
								let marker = L.marker(e.latlng, {
									icon: L.divIcon({
										html: `<span>${sumgap}公里</span>`,
										className: 'my-div-icon'
									})
								}).addTo(that.map);
								that.drawing.ranging.pop.push(marker);
							} else {
								let marker = L.marker(e.latlng, {
									icon: L.divIcon({
										html: `<span>${Math.round(sumgap)}m</span>`,
										className: 'my-div-icon'
									})
								}).addTo(that.map);
								that.drawing.ranging.pop.push(marker);
							}
						} else {
							//创建marker
							let marker = L.marker(e.latlng, {
								icon: L.divIcon({
									html: '<span>起点</span>',
									className: 'my-div-icon'
								})
							}).addTo(that.map);
							that.drawing.ranging.pop.push(marker);
						}
					});
				} else if (type == 2) { //删除
					if (that.drawing.ranging.latlngs.length) {
						that.drawing.ranging.latlngs.pop();
					}
					if (that.drawing.ranging.pop.length) {
						let pop = that.drawing.ranging.pop.pop();
						that.map.removeLayer(pop);
					}
					if (that.drawing.ranging.item) {
						that.drawing.ranging.item.setLatLngs(that.drawing.ranging.latlngs);
						// if (that.drawing.ranging.latlngs.length > 1) {
						// 	//计算距离
						// 	let start = that.drawing.ranging.latlngs[0];
						// 	let end = that.drawing.ranging.latlngs[that.drawing.ranging.latlngs.length - 1];
						// 	const gap = L.latLng(start).distanceTo(end);
						// }
					}
				} else { //结束
					if (!that.drawing.ranging) {
						return;
					}
					that.drawing.ranging.latlngs = null;
					if (that.drawing.ranging.pop && that.drawing.ranging.pop.length) {
						that.drawing.ranging.pop.forEach(x => {
							that.map.removeLayer(x);
						});
					}
					that.drawing.ranging.pop = null;
					if (that.drawing.ranging.item) {
						that.map.removeLayer(that.drawing.ranging.item);
					}
					that.drawing.ranging.item = null;
					that.map.off('click');
				}
			},
		}
	}
</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;
		// }
		::v-deep .leaflet-control-attribution {
			a {}
		}

		/* 文字 */
		: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;
			}

			/* 测距 */
			.my-div-icon {
				background-color: transparent;
			}

			.my-div-icon span {
				white-space: nowrap;
				display: block;
				border-radius: 4px;
				background-color: #fff;
				width: fit-content;
				padding: 2px 5px;
			}
		}
	}
</style>
<style lang="scss" scoped>
	// 顶部nav
	::v-deep.uni-navbar__header-container {
		align-items: center;
		justify-content: center;

		&>view {
			font-size: 36rpx;
		}
	}

	::v-deep.uni-navbar__header-btns-left {
		font-size: 27rpx;
	}

	::v-deep.uni-navbar__header-btns-right .icon {
		font-size: 44rpx;
		margin-left: 10px;
	}

	// .icon {
	// 	width: 16px;
	// 	height: 16px;
	// 	fill: currentColor;
	// 	overflow: hidden;
	// }
	.tdt {
		font-size: 12px;
		position: absolute;
		z-index: 1100;
		bottom: 10px;
		left: 10px;

		uni-image {
			width: 53px;
			height: 22px;
			vertical-align: middle;
			margin-right: 5px;
		}
	}

	.below {
		position: absolute;
		z-index: 1100;
		bottom: 20%;
		right: 10px;

		&>view {
			margin-bottom: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 35px;
			height: 35px;
			background-color: #fff;
			border-radius: 10px;

			span {
				font-size: 9px;
			}
		}
	}

	/* 图层弹出 */
	.layer {
		padding: 10px;
		background-color: #eff0f5;
		width: 100%;
		border-radius: 10px 10px 0 0;

		.card {
			background-color: #fff;
			border-radius: 5px;
			display: flex;
			justify-content: space-around;

			&>view {
				width: 74px;
				height: auto;
				margin: 15px 0;
				text-align: center;

				.img {
					width: 74px;
					height: 50px;
					overflow: hidden;
					margin-bottom: 5px;
					border-radius: 5px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.click {
				color: #1a8def;

				.img {
					border: 1px solid #1a8def;
				}
			}
		}

		.title {

			font-size: 16px;
			display: flex;
			justify-content: space-between;

			view {
				width: 30px;
			}

			i {
				font-size: 14px;
			}
		}
	}

	// 控制弹出框
	.uni-popup {
		z-index: 1000;
	}

	.popup-content {
		height: auto;
		overflow: hidden;
		max-height: calc(100vh - 290px);
	}

	// 水阀列表title
	.card-grey {
		height: auto;
		overflow: hidden;
		border-radius: 10px 10px 0 0;
		margin-bottom: 0;

		.gb {
			text-align: right;
			padding: 5px 5px 0 0;
			font-size: 14px;
		}
	}

	.card {
		margin: 10px;
		height: auto;
		position: relative;

		.title {
			justify-content: space-between;
			padding: 10px;

			.text {
				font-size: 16px;
			}
		}

		.title>view:nth-child(2) {
			color: #999;

			span {
				font-size: 0.875rem;
				margin-left: 5px;
			}
		}

	}

	.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;
	}

	// 提示
	.tip {
		color: #999;
		padding: 0 10px;
	}

	.box {
		transition: height 0.5s ease-out;
	}

	.box.show {
		height: 260px;
		overflow-y: scroll;
	}

	.box.hide {
		height: 0px;
	}

	.expand,
	.expand5 {
		.icon {
			text-align: center;
			width: 100%;
			height: 26px;
		}

		.iconfont {
			font-size: 24px;
			animation: iconleft 0.5s infinite ease-in-out alternate;
			color: #3399ff;
		}
	}

	.expand5 {
		.icon {
			height: 46px;
		}
	}

	@keyframes iconleft {
		from {
			transform: translateY(0px);
		}

		to {
			transform: translateY(2px);
		}
	}

	// 水压图表
	.pressure {
		padding: 10px;

		&>view:first-child {
			margin: 10px 0;
		}

		span {
			text-align: center;
			color: #999;
			display: block;
		}
	}

	// 操作记录
	.text-list {
		padding: 5px 10px;
		margin: 0 10px 10px;
		background-color: #f3f3f3;
		border-radius: 5px;

		&>view {
			line-height: 24px;
			display: flex;
			justify-content: space-between;
		}

		&>view:nth-child(2) {
			color: #666;
			font-size: 0.775rem;
		}
	}

	/* 首页阀门列表 */
	.control {
		padding: 20px 10px;

		&>.icon {
			color: #3399ff;
			position: absolute;
			right: 10px;
		}

		.u-button {
			width: 100% !important;
			min-width: 77px;

			.name {
				position: absolute;
				color: rgb(0, 0, 0, 0.1);
			}
		}

		.u-line-progress {
			min-width: 77px;
			margin-top: 5px;
		}
	}

	.tips {
		font-size: 12rpx;
		margin: 10px;
		width: 100%;
		height: 25px;
	}


	.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>