TSYWXT-CLOUD-APP/pages/manage/manage.vue

<!--
 * @Title: 
 * @Description: 管理工作台
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="container">
		<uni-nav-bar :fixed="true" backgroundColor="#f7f7f7" statusBar="false" height="75px" leftWidth="0px">
			<view class="view-flex-inline">
				<view style="font-size: 1rem;">运维主面板</view>
			</view>
		</uni-nav-bar>
		<view class="nav">
			<u-grid :col="4" :border="false">
				<u-grid-item v-if="navButtonIndex[index]" bg-color="transparent" v-for="(item, index) in navButton"
					:key="index">
					<navigator v-if="item.badge" :url="item.url" hover-class="none" class="nav-item"
						open-type="navigate">
						<uni-badge class="uni-badge-left-margin" absolute="rightTop" :text="item.value" size="small">
							<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
						</uni-badge>
						<view style="font-size: 0.9rem;font-weight: bold;">{{ item.name }}</view>
					</navigator>
					<navigator v-else :url="item.url" hover-class="none" class="nav-item" open-type="navigate">
						<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
						<view style="font-size: 0.9rem;font-weight: bold;">{{ item.name }}</view>
					</navigator>
				</u-grid-item>
			</u-grid>
		</view>
		<uni-group>
			<swiper style="height: 100px;" circular :indicator-dots="false" :autoplay="true" :interval="2000"
				:duration="500">
				<swiper-item style="height: 200px;line-height: 300rpx;">
					<image src="/static/images/order-ad.png" style="height: 100%;" mode="heightFix"></image>
				</swiper-item>
				<swiper-item style="height: 200px;line-height: 300rpx;">
					<image src="/static/images/order-ad.png" style="height: 100%;" mode="heightFix"></image>
				</swiper-item>
				<swiper-item style="height: 200px;line-height: 300rpx;">
					<image src="/static/images/order-ad.png" style="height: 100%;" mode="heightFix"></image>
				</swiper-item>
			</swiper>
		</uni-group>
		<uni-section title="系统运行实时信息" type="circle">

		</uni-section>
		
		
	</view>
</template>

<script>
	import {
		gcoord
	} from '@/static/js/gcoord.global.prod.js'
	import
	navBtns
	from "@/api/home.js";
	import {
		role
	} from "@/api/role.js";
	import http from '@/http/api.js';
	export default {
		name: '',
		components: {

		},
		data() {
			return {
				title: '管理工作台',
				permission: {
					'admin': false,
					'orgAdmin': false,
					'companyAdmin': false,
					'companyServciePerson': false,
					'yjServicePerson': false,
				},
				navButton: [],
				navButtonIndex: [],
				currentRole: '',
				subSystem: 0,
				barcurrent: 1,
				pageSize: 10,
				pageCurrent: 1,
				total: 0,
				list: [],
				regionTree: [],
				regionCode: '',
				selectedTreeNode: '',
				searchRtuNameVal: '',
				searchRtuCodeVal: '',
				query: {},
				inputStyles: {
					color: '#808080',
					borderColor: '#d3d3d3'
				},
				countInfo: {},
				loading: false,
				value: [],
				warnKindItems: [{
					'value': 0,
					'text': '全部'
				}, {
					'value': 1,
					'text': '离线'
				}, {
					'value': 2,
					'text': '时钟异常'
				}, {
					'value': 3,
					'text': '雨量漏报'
				}, {
					'value': 4,
					'text': '水位漏报'
				}, {
					'value': 5,
					'text': '5分钟上报延时'
				}, {
					'value': 6,
					'text': '雨量小时上报延时'
				}, {
					'value': 7,
					'text': '水位小时上报延时'
				}, {
					'value': 8,
					'text': '雨量疑似异常值'
				}],
				warnKindOption: 0,
				//以下为应急参数
				yjDangerAreaCoverView: 0,
				yjRtuCoverView: 0,
				yjDangerAreaLineCoverView: 0,
				latitude: 40.848119,
				longitude: 111.755426,
				zoom: true,
				scale: 14,
				polygons: [],
				polylines: [],
				includepoints: [],
				mapStyles: {
					width: '100%',
					height: '600px'
				},
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				content: [{
						iconPath: '/static/images/tabbar/home.png',
						selectedIconPath: '/static/images/tabbar/home_selected.png',
						text: '雨情',
						active: false
					},
					{
						iconPath: '/static/images/tabbar/warn.png',
						selectedIconPath: '/static/images/tabbar/warn_selected.png',
						text: '预警',
						active: false
					},
					{
						iconPath: '/static/images/tabbar/workbench.png',
						selectedIconPath: '/static/images/tabbar/workbench_selected.png',
						text: '危险区',
						active: false
					}
				],
				popMenu: false,
				popBoxIndex: 0,
				yjMapMarkers: [],
				yjDrawerWidth: 200,
				//应急雨量参数
				yjRainCountType: {
					items: [{
						'id': '0',
						'dictValue': '默认'
					}, {
						'id': '1',
						'dictValue': '近1小时'
					}, {
						'id': '2',
						'dictValue': '近3小时'
					}, {
						'id': '3',
						'dictValue': '近6小时'
					}, {
						'id': '4',
						'dictValue': '近12小时'
					}, {
						'id': '5',
						'dictValue': '近24小时'
					}],
					value: 0,
				},
				yjRainListPageSize: 10,
				yjRainListPageCurrent: 1,
				yjRainListTotal: 0,
				yjRainTableData: [],
				yjRainSearchRtuNameVal: '',
				yjRainSearchRtuCodeVal: '',
				//应急预警参数
				yjSearchWarnNameVal: '',
				yjSearchAdNameVal: '',
				yjWarnPageSize: 10,
				yjWarnPageCurrent: 1,
				yjWarnTotal: 0,
				yjWarnTableData: [],
				//应急危险区参数
				yjDangerAreaNameVal: '',
				yjDangerAreaAdNameVal: '',
				yjDangerAreaPageSize: 10,
				yjDangerAreaPageCurrent: 1,
				yjDangerAreaTotal: 0,
				yjDangerAreaTableData: [],
				yjDangerAreaRtus: [],
				yjDangerAreaLeaveLines: [],
				yjDangerAreas: [],
			}
		},
		computed: {
			toLocation(l) {
				return new Number(l).toFixed(6);
			}
		},
		onInit(option) {
			console.log("onInit" + JSON.stringify(uni.getWindowInfo()))
		},
		onLoad(option) {
			this.navButton = navBtns.navButtons;
			this.navButtonIndex = navBtns.orgAdminNavButton;

			this.$u.func.checkLoginExpires();
			if (this.isLogin) {

			}

		},
		onShow() {
			this.$u.func.checkLoginExpires();
			if (this.isLogin) {

			}

		},
		onReady() {
			console.log("onReady" + JSON.stringify(uni.getWindowInfo()))
			this.mapStyles.height = (uni.getWindowInfo().windowHeight - 75 - 20) + "px";

		},
		methods: {
			// 分页触发
			pageChange(e) {
				this.pageCurrent = e.current;
				this.getPage()
			},
			//行政区划选择
			onTreeNodeClick(node) {
				console.log(JSON.stringify(node))
			},
			onTreePopupOpened(e) {
				console.log(JSON.stringify(e))
			},
			onTreePopupClosed(e) {
				console.log(JSON.stringify(e))
			},
			onTreeChange(e) {
				console.log(JSON.stringify(e))
				let nodes = e.detail.value;
				if (nodes.length > 0) {
					let node = nodes[nodes.length - 1];
					this.regionCode = node.value;
					this.query = {};
					this.query['adCode'] = this.regionCode;
					this.searchRtuNameVal = '';
					this.searchRtuCodeVal = '';
					this.pageCurrent = 1;
					this.getPage();
					this.getCountInfo(this.regionCode);
				} else {
					this.regionCode = '';
					this.query = {};
					this.searchRtuNameVal = '';
					this.searchRtuCodeVal = '';
					this.pageCurrent = 1;
					this.getPage();
					this.getCountInfo(this.regionCode);
				}
			},
			//录入查询
			search() {
				this.pageCurrent = 1;
				//	console.log(JSON.stringify(res))
				let params = {};
				if (this.searchRtuCodeVal.length > 0) {
					params['rtuCode'] = this.searchRtuCodeVal;
				}
				if (this.searchRtuNameVal.length > 0) {
					params['rtuName'] = this.searchRtuNameVal;
				}
				this.getPage(params);
			},
			searchRtuNameValClear(e) {
				if (e == null || e.length == 0) {
					this.searchRtuNameVal = '';
					let params = {};
					if (this.searchRtuCodeVal.length > 0) {
						params['rtuCode'] = this.searchRtuCodeVal;
					}
					this.getPage(params);
				}
			},
			searchRtuCodeValClear(e) {
				if (e == null || e.length == 0) {
					this.searchRtuCodeVal = '';
					let params = {};
					if (this.searchRtuNameVal.length > 0) {
						params['rtuName'] = this.searchRtuNameVal;
					}
					this.getPage(params);
				}
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},
			onRtuDetailClick(rtuCode) {
				uni.navigateTo({
					url: '/pages/rtu-manage/rtudetail?rtuCode=' + rtuCode
				})
			},
			onWarningPageClick(rtuCode) {
				uni.navigateTo({
					url: '/pages/warning/rtuwarninglist?rtuCode=' + rtuCode
				})
			},
			onLocationClick(item) {
				let lat = item.lat;
				let lng = item.lng;
				let name = item.rtuName;
				let add = item.locationDesc;
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lng),
					name: name,
					address: "",
					success() {}
				})
			},
			onCheckOrderPageClick(rtuCode) {
				uni.navigateTo({
					url: '/pages/check-order/rtu/rtucheckorderlist?rtuCode=' + rtuCode
				})
			},
			onInspectionReportClick(rtuCode) {
				console.log("onInspectionReportClick")
				uni.navigateTo({
					url: '/pages/equipment-inspection/rtuinspectionreportview?rtuCode=' + rtuCode
				})
			},
			onSiteRealDataClick(item) {
				uni.navigateTo({
					url: '/pages/rtu-manage/rturealdatadetail?rtuCode=' + item.rtuCode + '&isRain=' + item.isRain +
						'&isRiver=' + item.isRiver + '&isRes=' + item.isRes + '&isGround=' + item.isGround,
				})
			},
			onManuallyOrderClick(rtuCode) {
				uni.navigateTo({
					url: '/pages/check-order/manuallyaddcheckorder?rtuCode=' + rtuCode
				})
			},
			warnKindOptionChange: function(evt) {
				let params = {};
				this.getPage(params);
			},
			getSiteData(val) {
				let htmltext = '';
				if (val.isRain === 1) {
					htmltext = htmltext + "降水：";
					if (val.drp) {
						htmltext = htmltext + val.drp;
					} else {
						htmltext = htmltext + "--";
					}
				}
				if (val.isRiver == 1) {
					if (htmltext.length > 0) {
						htmltext = htmltext + ' / ';
					}
					htmltext = htmltext + '水位：';
					if (val.rz) {
						htmltext = htmltext + val.rz;
					} else {
						htmltext = htmltext + "--";
					}
				} else if (val.isRes == 1) {
					if (htmltext.length > 0) {
						htmltext = htmltext + ' / ';
					}
					htmltext = htmltext + '水位：';
					if (val.z) {
						htmltext = htmltext + val.z;
					} else {
						htmltext = htmltext + "--";
					}
				}
				if (val.isGround == 1) {
					if (htmltext.length > 0) {
						htmltext = htmltext + ' / ';
					}
					htmltext = htmltext + '墒情含水层：';
					if (val.ground) {
						htmltext = htmltext + val.ground;
					} else {
						htmltext = htmltext + "--";
					}
				}
				return htmltext;
			},
			getRegionTree() {
				var that = this;
				http.request({
					url: '/galaxy-business/baseinfo/region/tree',
					method: 'GET',
				}).then(res => {
					if (res.data != null) {
						that.regionTree = res.data;
						that.regionCode = that.regionTree[0].id;
						that.selectedTreeNode = that.regionTree[0].id;
						that.query = {};
						that.query['adCode'] = that.regionCode;
						that.getPage();
						that.getCountInfo(that.regionCode);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getCountInfo(adCode) {
				let that = this;
				http.request({
					url: '/galaxy-business/rtu/manage/count',
					method: 'GET',
					data: {
						adCode
					}
				}).then(res => {
					that.countInfo = res.data;
				})
			},
			getPage(params = {}) {
				this.loading = true
				if (this.warnKindOption == 0) {} else {
					params['warnKind'] = this.warnKindOption;
				}
				const current = this.pageCurrent;
				const size = this.pageSize;
				let postData = Object.assign(params, this.query);
				var that = this;
				http.request({
					url: '/galaxy-business/rtu/manage/page',
					method: 'GET',
					params: {
						current,
						size,
					},
					data: postData,
				}).then(res => {
					//	console.log(JSON.stringify(res.data))
					if (res.data.records != null) {
						that.list = res.data.records;
					}
					that.total = res.data.total;
					this.loading = false
				}).catch(err => {
					console.log(err)
					this.loading = false
				})
			},
			//以下为应急系统业务功能
			trigger(e) {
				let that = this;
				this.content[0].active = false;
				this.content[1].active = false;
				this.content[2].active = false;
				this.content[e.index].active = !e.item.active
				this.popBoxIndex = e.index + 1;
				this.$refs.yjDrawerRef.open()
				// if (this.$refs.fab.isShow) {
				// 	this.$refs.fab.close()
				// }
				this.$nextTick(() => {
					if (that.popBoxIndex == 1) {
						that.yjDangerAreaCoverView = 0;
						that.yjRtuCoverView = 0;
						that.yjDangerAreaLineCoverView = 0;
						that.getYjRainDataPage();
					} else if (that.popBoxIndex == 2) {
						that.yjDangerAreaCoverView = 0;
						that.yjRtuCoverView = 0;
						that.yjDangerAreaLineCoverView = 0;
						that.getYjWarnDataPage();
					} else if (that.popBoxIndex == 3) {
						that.yjDangerAreaCoverView = 1;
						that.yjRtuCoverView = 1;
						that.yjDangerAreaLineCoverView = 1;
						that.getYjDangerAreaDataPage();
					}
				})
			},
			fabClick() {
				// this.popMenu = !this.popMenu
				// if (!this.popMenu) {
				// 	this.content[0].active = false;
				// 	this.content[1].active = false;
				// 	this.content[2].active = false;
				// }
			},
			yjPopMenuClose() {
				// this.popMenu = false;
				// this.content[0].active = false;
				// this.content[1].active = false;
				// this.content[2].active = false;
				// if (this.$refs.fab.isShow) {
				// 	this.$refs.fab.close()
				// }
				this.$refs.yjDrawerRef.close();
			},
			//雨量数据业务
			yjRainListPageChange(e) {
				this.yjRainListPageCurrent = e.current;
				this.getYjRainDataPage()
			},
			yjRainDataSearch() {
				let params = {};
				if (this.yjRainSearchRtuCodeVal.length > 0) {
					params['rtuCode'] = this.yjRainSearchRtuCodeVal;
				}
				if (this.yjRainSearchRtuNameVal.length > 0) {
					params['rtuName'] = this.yjRainSearchRtuNameVal;
				}
				this.getYjRainDataPage(params);
			},
			getYjRainDataPage(params = {}) {
				const current = this.yjRainListPageCurrent;
				const size = this.yjRainListPageSize;
				const isSubmit = '0';
				if (this.yjRainCountType.value == 1) {
					params['rainCountType'] = 1;
				} else if (this.yjRainCountType.value == 2) {
					params['rainCountType'] = 3;
				} else if (this.yjRainCountType.value == 3) {
					params['rainCountType'] = 6;
				} else if (this.yjRainCountType.value == 4) {
					params['rainCountType'] = 12;
				} else if (this.yjRainCountType.value == 5) {
					params['rainCountType'] = 24;
				} else {
					params['rainCountType'] = 0;
				}
				let postData = Object.assign(params, this.query);
				console.log(JSON.stringify(postData))
				var that = this;
				http.request({
					url: '/galaxy-business/rtu/data/rain/yj/page',
					method: 'GET',
					params: {
						current,
						size,
						isSubmit
					},
					data: postData,
				}).then(res => {
					if (res.data.records != null) {
						that.yjRainTableData = res.data.records;
					}
					that.yjRainListTotal = res.data.total;
					if (that.yjRainListTotal == 0) {
						that.yjRainListPageCurrent = 1;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onYjRainCountTypeRadioChange: function(evt) {
				for (let i = 0; i < this.yjRainCountType.items.length; i++) {
					if (this.yjRainCountType.items[i].id === evt.detail.value) {
						this.yjRainCountType.value = i;
						//this.getYjRainDataPage();
						break;
					}
				}
			},
			yjRainSearchRtuNameValClear(e) {
				if (e == null || e.length == 0) {
					this.yjRainSearchRtuNameVal = '';
				}
			},
			yjRainSearchRtuCodeValClear(e) {
				if (e == null || e.length == 0) {
					this.yjRainSearchRtuCodeValL = '';
				}
			},
			onYjRainDataRtuClick(item) {
				this.$refs.yjDrawerRef.close();
				let that = this;
				this.$nextTick(() => {
					that.yjMapMarkers = [];
					let marker = {};
					marker['id'] = item.id;
					marker['latitude'] = item.lat;
					marker['longitude'] = item.lng;
					let label = {};
					label['content'] = item.rtuName + "(" + item.drp + "mm)";
					label['color'] = '#ff0000';
					label['bgColor'] = '#ffffff';
					label['anchorY'] = -40;
					marker['label'] = label;
					marker['iconPath'] = "/static/images/icon_warning.png";
					that.yjMapMarkers.push(marker)
					that.latitude = item.lat;
					that.longitude = item.lng;
				})
			},
			//应急预警信息
			yjSearchWarnNameValClear(e) {
				if (e == null || e.length == 0) {
					this.yjSearchWarnNameVal = '';
				}
			},
			yjSearchAdNameValClear(e) {
				if (e == null || e.length == 0) {
					this.yjSearchAdNameVal = '';
				}
			},
			yjWarnPageChange(e) {
				this.yjDangerAreaPageCurrent = e.current;
				this.getYjWarnDataPage()
			},
			onYjWarnDataRtuClick(item) {
				this.$refs.yjDrawerRef.close();
				let that = this;
				this.$nextTick(() => {
					that.yjMapMarkers = [];
					let marker = {};
					marker['id'] = item.id;
					marker['latitude'] = item.warnLttd;
					marker['longitude'] = item.warnLgtd;
					let label = {};
					label['content'] = item.warnName;
					label['color'] = '#ff0000';
					label['bgColor'] = '#ffffff';
					label['anchorY'] = -40;
					marker['label'] = label;
					marker['iconPath'] = "/static/images/icon_warning.png";
					that.yjMapMarkers.push(marker)
					that.latitude = item.warnLttd;
					that.longitude = item.warnLgtd;
				})
			},
			yjWarnDataSearch() {
				let params = {};
				if (this.yjSearchWarnNameVal.length > 0) {
					params['warnName'] = this.yjSearchWarnNameVal;
				}
				if (this.yjSearchAdNameVal.length > 0) {
					params['dangerAreaName'] = this.yjSearchAdNameVal;
				}
				this.getYjWarnDataPage(params);
			},
			getYjWarnDataPage(params = {}) {
				const current = this.yjWarnPageCurrent;
				const size = this.yjWarnPageSize;
				const isSubmit = '0';
				let postData = Object.assign(params, this.query);
				let that = this;
				http.request({
					url: '/galaxy-business/yj/warn/page',
					method: 'GET',
					params: {
						current,
						size,
					},
					data: postData,
				}).then(res => {
					if (res.data.records != null) {
						that.yjWarnTableData = res.data.records;
					}
					that.yjWarnTotal = res.data.total;
					if (that.yjWarnTotal == 0) {
						that.yjWarnPageCurrent = 1;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//应急危险区业务
			yjDangerAreaNameValClear(e) {
				if (e == null || e.length == 0) {
					this.yjDangerAreaNameVal = '';
				}
			},
			yjDangerAreaAdNameValClear(e) {
				if (e == null || e.length == 0) {
					this.yjDangerAreaAdNameVal = '';
				}
			},
			yjDangerAreaDataSearch() {
				let params = {};
				if (this.yjDangerAreaNameVal.length > 0) {
					params['dangerAreaName'] = this.yjDangerAreaNameVal;
				}
				if (this.yjDangerAreaAdNameVal.length > 0) {
					params['adName'] = this.yjDangerAreaAdNameVal;
				}
				this.getYjDangerAreaDataPage(params);
			},
			yjDangerAreaPageChange(e) {
				this.yjDangerAreaPageCurrent = e.current;
				this.getYjDangerAreaDataPage()
			},
			getYjDangerAreaDataPage(params = {}) {
				const current = this.yjDangerAreaPageCurrent;
				const size = this.yjDangerAreaPageSize;
				const isSubmit = '0';
				let postData = Object.assign(params, this.query);
				let that = this;
				http.request({
					url: '/galaxy-business/map/dangerarea/page',
					method: 'GET',
					params: {
						current,
						size,
					},
					data: postData,
				}).then(res => {
					if (res.data.records != null) {
						that.yjDangerAreaTableData = res.data.records;
					}
					that.yjDangerAreaTotal = res.data.total;
					if (that.yjDangerAreaTotal == 0) {
						that.yjDangerAreaPageCurrent = 1;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			yjDangerAreaDataClick(item) {
				this.$refs.yjDrawerRef.close();
				let that = this;
				this.yjDangerAreas = [];
				let d = {};
				d['id'] = item.id;
				d['dangerAreaName'] = item.dangerAreaName;
				d['lng'] = item.centerPointLng;
				d['lat'] = item.centerPointLat;
				this.yjDangerAreas.push(d);

				this.$nextTick(() => {
					let c = gcoord.transform(
						[item.centerPointLng, item.centerPointLat],
						gcoord.WGS84,
						gcoord.GCJ02
					);
					that.latitude = c[1];
					that.longitude = c[0];
					this.scale = 14;
					that.getDangerAreaDataGcoord(item.id);
				})
			},
			getDangerAreaDataGcoord(id) {
				let that = this;
				let postData = {};
				postData['id'] = id;
				http.request({
					url: '/galaxy-business/map/dangerarea/detail',
					method: 'GET',
					data: postData
				}).then(res => {
					if (res.data != null) {
						that.includepoints = [];
						that.polygons = [];
						let p = {};
						let ps = res.data.points.map(item => {
							let l = gcoord.transform(
								[item.pointLng, item.pointLat],
								gcoord.WGS84,
								gcoord.GCJ02
							);
							return {
								latitude: l[1],
								longitude: l[0],
							}
						})
						p['points'] = ps;
						that.includepoints.push(ps[0]);
						let dashArray = [];
						dashArray.push(4);
						dashArray.push(10);
						p['dashArray'] = dashArray;
						if (res.data.dangerStatus == '1') {
							p['strokeColor'] = '#FF0000';
							p['fillColor'] = '#F72C5B7D';
						} else {
							p['strokeColor'] = '#FC8452';
							p['fillColor'] = '#FAC8587D';
						}
						that.polygons.push(p);
						that.yjMapMarkers = [];

						let rtus = res.data.rtus.map(item => {
							let rtu = {};
							rtu['id'] = item.id;
							rtu['latitude'] = item.lat;
							rtu['longitude'] = item.lng;
							rtu['rtuName'] = item.rtuName;
							rtu['rtuCode'] = item.rtuCode;
							return rtu;
						});
						that.yjDangerAreaRtus = rtus;

						let leaveLines = res.data.leaveLines.map(item => {
							let line = {};
							line['id'] = item.id;
							line['latitude'] = new Number(item.centerPointLat).toFixed(6);
							line['longitude'] = new Number(item.centerPointLng).toFixed(6);
							line['leaveLineName'] = item.leaveLineName;
							return line;
						});
						that.yjDangerAreaLeaveLines = leaveLines;
						that.scale = 14;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			yjDangerAreaLinkRtuClick(item) {
				this.yjMapMarkers = [];
				let marker = {};
				marker['id'] = item.id;
				let l = gcoord.transform(
					[item.longitude, item.latitude],
					gcoord.WGS84,
					gcoord.GCJ02
				);
				marker['latitude'] = l[1];
				marker['longitude'] = l[0];
				let label = {};
				label['content'] = item.rtuName;
				label['color'] = '#ff0000';
				label['bgColor'] = '#ffffff';
				label['anchorY'] = -40;
				marker['label'] = label;
				marker['iconPath'] = "/static/images/icon_warning.png";
				this.yjMapMarkers.push(marker)
				this.latitude = item.latitude;
				this.longitude = item.longitude;
				this.scale = 12;
			},
			yjDangerAreaLinkLineClick(item) {
				let that = this;
				this.polylines = [];
				this.yjMapMarkers = [];
				this.polygons = [];
				let c = gcoord.transform(
					[item.longitude, item.latitude],
					gcoord.WGS84,
					gcoord.GCJ02
				);
				this.latitude = c[1];
				this.longitude = c[0];
				this.scale = 16;
				let id = item.id;
				this.$nextTick(() => {
					that.getYjDangerAreaLineDetail(id);
				})
			},
			getYjDangerAreaLineDetail(id) {
				let that = this;
				let postData = {};
				postData['id'] = id;
				http.request({
					url: '/galaxy-business/map/leaveline/detail',
					method: 'GET',
					data: postData
				}).then(res => {
					if (res.data != null) {
						let p = {};
						let ps = res.data.points.map(item => {
							let l = gcoord.transform(
								[item.pointLng, item.pointLat],
								gcoord.WGS84,
								gcoord.GCJ02
							);
							return {
								latitude: l[1],
								longitude: l[0],
							}
						})
						p['points'] = ps;
						p['color'] = '#ee0000';
						that.polylines.push(p);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			yjDangerAreaClick(item) {
				let that = this;
				this.polylines = [];
				this.yjMapMarkers = [];
				this.polygons = [];
				this.$nextTick(() => {
					let c = gcoord.transform(
						[item.lng, item.lat],
						gcoord.WGS84,
						gcoord.GCJ02
					);
					that.latitude = c[1];
					that.longitude = c[0];
					this.scale = 14;
					that.getDangerAreaDataGcoord(item.id);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$nav-height: 75px;

	.nav {
		margin: 0rpx 0;
		box-sizing: border-box;
		padding: 0 10rpx;


		&-item {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 130rpx;

			&-img {
				width: 80rpx;
				height: 80rpx;
			}

			&-name {
				font-size: 0.7rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #585b61;
			}
		}
	}

	.select-checkbox {
		margin-top: 0px;
		margin-bottom: 5px;
		padding-left: 15px;
	}

	.count-info-line {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 10px;
		padding-right: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.count-info-line .rtuCount {
		display: flex;
		flex-direction: row;
		align-items: center;

		.name {
			color: dimgray;
			font-size: 0.7rem;
		}

		.count {
			margin-left: 5px;
			color: dodgerblue;
			font-size: 0.7rem;
		}
	}

	.count-info-line .warnRtuCount {
		margin-left: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;

		.name {
			color: dimgray;
			font-size: 0.7rem;
		}

		.count {
			margin-left: 5px;
			color: red;
			font-size: 0.7rem;
		}
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>