SHZHJCYJPTYWXTAPP/pages/yjxt/warn/yjwarn.vue

<!--
 * @Title: 
 * @Description: 监测预警
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="wrap">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="container">
			<view style="width: 100%;">
				<map id="myMap" ref="myMap" :style="mapStyles" :latitude="latitude" :longitude="longitude"
					:markers="markets" :polygons="polygons" :scale="scale" :polyline="polylines">
					<cover-view style="line-height: normal;width: 100%;">
						<cover-view style="width:50px;height:50px;position: absolute;top: 20px;right: 10px;">
							<cover-view v-if="mapScreenMin" style="width:50px;height:50px;background-color: orange;">
								<cover-image style="width: 50px;height: 50px;" src="/static/images/icon_quanping.png"
									@click="onMapScreenMax"></cover-image>
							</cover-view>
							<cover-view v-if="mapScreenMax" style="width:50px;height:50px;background-color: orange;">
								<cover-image style="width: 50px;height: 50px;" src="/static/images/icon_feiquanping.png"
									@click="onMapScreenMin"></cover-image>
							</cover-view>
						</cover-view>
					</cover-view>
				</map>
				<view :style="popViewStyles">
					<view :style="searchViewStyles">
						<uni-section title="实时监测数据" titleFontSize="1rem" type="circle">
							<template v-slot:right>
								<view v-if="contentViewStatus==0" class="view-flex-inline" style="margin-right: 10px;"
									@click="onYjRainDataRefreshClick">
									<uni-icons class="input-uni-icon" type="refresh" size="18" color="skyblue" />
									<view style="color: gray;font-size: 0.9rem;margin-left: 5px;margin-right: 5px;">
										刷新</view>
								</view>
								<view v-else-if="contentViewStatus==1" class="view-flex-inline"
									style="margin-right: 10px;" @click="onYjWarnBackClick">
									<uni-icons class="input-uni-icon" type="close" size="18" color="skyblue" />
									<view style="color: gray;font-size: 0.9rem;margin-left: 5px;margin-right: 5px;">
										关闭预警</view>
								</view>
								<view v-else-if="contentViewStatus==2" class="view-flex-inline"
									style="margin-right: 10px;" @click="onYjDangerAreaBackClick">
									<uni-icons class="input-uni-icon" type="close" size="18" color="skyblue" />
									<view style="color: gray;font-size: 0.9rem;margin-left: 5px;margin-right: 5px;">
										关闭危险区</view>
								</view>
							</template>
						</uni-section>
					</view>
					<scroll-view scroll-y="true" :style="popScrollViewStyles">
						<view v-if="contentViewStatus==0">
							<view class="search-block">
								<uni-collapse @change="searchAreaStatus"
									style="padding-left: 10px;padding-right: 10px;">
									<uni-collapse-item :show-animation="true">
										<template v-slot:title>
											<view class="view-flex-block-center" style="height: 40px;width: 100%;">
												<view class="view-flex-inline-center">
													<text v-if="showSearch"
														style="color: orange;font-size: 0.8rem;">点击收起</text>
													<text v-else
														style="color: orange;font-size: 0.8rem;">点击展开录入查询</text>
												</view>
											</view>
										</template>
									</uni-collapse-item>
								</uni-collapse>
								<view v-if="showSearch">
									<view style="padding-left: 10px;padding-right: 10px;">
										<uni-data-select v-model="cityRegionValue" :localdata="cityRegionData"
											@change="cityRegionChange" placeholder="请选择盟市"></uni-data-select>
									</view>
									<view style="margin-top: 10px;padding-left: 10px;padding-right: 10px;">
										<uni-data-select v-model="districtRegionValue" :localdata="districtRegionData"
											@change="districtRegionChange" placeholder="请选择区旗县"></uni-data-select>
									</view>
									<view style="margin-top: 10px;padding-left: 10px;padding-right: 10px;">
										<uni-data-select v-model="townRegionValue" :localdata="townRegionData"
											@change="townRegionChange" placeholder="请选择乡镇"></uni-data-select>
									</view>
									<view style="margin-top: 10px;padding-left: 10px;padding-right: 10px;">
										<uni-data-select v-model="countryRegionValue" :localdata="countryRegionData"
											@change="countryRegionChange" placeholder="请选择村"></uni-data-select>
									</view>
									<view class="rtu-code">
										<uni-easyinput :styles="inputStyles" @input="searchRtuCodeValClear"
											prefixIcon="search" v-model="searchRtuCodeVal" placeholder="请输入测站编码">
										</uni-easyinput>
									</view>
									<view class="rtu-name">
										<uni-easyinput :styles="inputStyles" @input="searchRtuNameValClear"
											prefixIcon="search" v-model="searchRtuNameVal" placeholder="请输入测站名称">
										</uni-easyinput>
									</view>
									<view class="submit-btn">
										<button type="default" @click="onSearch">查询</button>
									</view>
								</view>
								<uni-group>
									<radio-group @change="onYjRainCountTypeRadioChange" class="view-flex-rs">
										<label style="margin-right: 5px;margin-bottom: 5px;;width:100px;"
											class="view-flex-inline" v-for="(item, index) in yjRainCountType.items"
											:key="item.id">
											<view>
												<radio :value="item.id" :checked="index === yjRainCountType.value" />
											</view>
											<view style="font-size: 0.7rem;">{{item.dictValue}}</view>
										</label>
									</radio-group>
								</uni-group>
							</view>
							<uni-list style="min-height: 40px;">
								<uni-list-item v-for="item in tableData" :key="item.id">
									<template v-slot:body>
										<view class="list-item-block">
											<view class="line" @click="onYjRainDataRtuClick(item)">
												<view class="title text-ellipsis text-underline "
													style="color: royalblue;">
													{{item.rtuName}}/{{item.rtuCode}}
												</view>
											</view>
											<view class="line">
												<text class="title" style="color: black;">上报时间:</text>
												<text class="text"
													style="color: gray;margin-left: 5px;">{{item.tm}}</text>
											</view>
											<view class="line">
												<text class="title" style="color: black;">累计雨量(mm):</text>
												<text class="text"
													style="color: gray;margin-left: 5px;">{{item.drp}}</text>
											</view>
											<view v-if="item.isWarn ==1">
												<view class="line">
													<text class="title" style="color: black;">预警信息:</text>
													<view class="text text-underline" style="color: coral;"
														@click="onYjWarnClick(item)">{{item.warnName}}</view>
												</view>
											</view>
											<view v-else>
												<view class="line">
													<text class="title" style="color: black;">预警信息:</text>
													<text class="text" style="color: coral;">暂无预警</text>
												</view>
											</view>
											<view v-if="item.isLinkDanger==1">
												<view class="line">
													<text class="title" style="color: black;">危险区信息:</text>
													<view v-for="da in item.dangerAreaList" :key="da.id"
														class="text text-underline" style="color: coral;"
														@click="onYjDangerAreaDataClick(da)">{{da.dangerAreaName}}
													</view>
												</view>
											</view>
											<view v-else>
												<view class="line">
													<text class="title" style="color: black;">危险区信息:</text>
													<view class="text" style="color: coral;">暂无数据</view>
												</view>
											</view>
										</view>
									</template>
								</uni-list-item>
							</uni-list>
							<uni-group>
								<view class="pagination-block" style="margin-top: 5px;">
									<uni-pagination :page-size="pageSize" :current="pageCurrent" :total="listTotal"
										@change="pageChange" prevText="前一页" nextText="后一页" />
								</view>
							</uni-group>
						</view>
						<view v-else-if="contentViewStatus==1">
							<view style="padding-left: 10px;padding-right: 10px;padding-top: 10px;">
								<view v-if="warnData.warnResponseStatus==1">
									<view class="point">
										<view class="dot">
											4
										</view>
										<view class="time-title">响应反馈【{{warnData.replyTm}}】</view>
									</view>
									<view class="time-info">
										<view class="time-line">
											<uni-list style="width: 100%;">
												<uni-list-item v-for="(r,index) in warnData.warnResponseInfoList"
													:key="index" direction="column">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="line">
																<view class="text">责任人：<span
																		style="color: deepskyblue;"></span></view>
															</view>
															<view class="line">
																<view class="text">责任人类型：<span
																		style="color: deepskyblue;"></span></view>
															</view>
															<view class="line">
																<view class="text">反馈情况：<span
																		style="color: deepskyblue;">{{r.repltStatus}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">反馈时间：<span
																		style="color: deepskyblue;">{{r.replyTm}}</span>
																</view>
															</view>
															<!-- 	<view>反馈内容：<span style="color: skyblue;"></span></view> -->
															<view class="line">
																<view class="text">是否收到预警短信：<span
																		style="color: deepskyblue;">{{r.isReceive}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">是否发生沟道山洪：<span
																		style="color: deepskyblue;">{{r.isFloodBoot}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">山洪是否出沟：<span
																		style="color: deepskyblue;">{{r.isFloodOut}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">降雨是否持续：<span
																		style="color: deepskyblue;">{{r.isRainContu}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">是否人员转移：<span
																		style="color: deepskyblue;">{{r.isTrans}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">有无人员伤亡：<span
																		style="color: deepskyblue;">{{r.isDeady}}</span>
																</view>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>
									</view>
								</view>
								<view v-if="warnData.ousideWarnStatus==1">
									<view class="point">
										<view class="dot">
											3
										</view>
										<view class="time-title">外部预警【{{warnData.extTime}}】</view>
									</view>
									<view class="time-info">
										<view class="time-line">
											<uni-list style="width: 100%;">
												<uni-list-item v-for="(out,index) in warnData.outsideWarnInfoList"
													:key="index" direction="column">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="line">
																<view class="text ">发布单位：<span
																		style="color: deepskyblue;">{{out.deptName}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text ">发布人：<span
																		style="color: deepskyblue;">{{out.senderName}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">发布内容：<span
																		style="color: deepskyblue;">{{out.messageInfo}}</span>
																</view>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>
									</view>
								</view>
								<view>
									<view class="point">
										<view class="dot">
											2
										</view>
										<view class="time-title">内部预警【{{warnData.warnTime}}】</view>
									</view>
									<view class="time-info">
										<view class="time-line">
											<uni-list style="width: 100%;">
												<uni-list-item direction="column">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="line">
																<view class="text">发布单位：<span
																		style="color: deepskyblue;">系统自动</span></view>
															</view>
														</view>
													</template>
												</uni-list-item>
												<uni-list-item direction="column">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="line">
																<view class="text">预警名称：<span
																		style="color: deepskyblue;">{{warnData.warnName}}</span>
																</view>
															</view>
														</view>
													</template>
												</uni-list-item>
												<uni-list-item v-for="(inside,index) in warnData.insideWarnInfoList"
													:key="index" direction="column">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="line">
																<view class="text ">类型：<span
																		style="color: deepskyblue;">{{inside.sendObjectName}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text ">接收人：<span
																		style="color: deepskyblue;">{{inside.userName}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">所在单位：<span
																		style="color: deepskyblue;">{{inside.deptName}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">职务：<span
																		style="color: deepskyblue;">{{inside.posiTion}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">电话：<span
																		style="color: deepskyblue;">{{inside.userTel}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">短信内容：<span
																		style="color: deepskyblue;">{{inside.messageInfo}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">发送时间：<span
																		style="color: deepskyblue;">{{inside.sendTime}}</span>
																</view>
															</view>
															<view class="line">
																<view class="text">发送单位：<span
																		style="color: deepskyblue;"></span></view>
															</view>
															<view class="line">
																<view class="text">发送人：<span
																		style="color: deepskyblue;">{{inside.senderName}}</span>
																</view>
															</view>
															<view class="line">
																<view v-if="inside.sendStatus ==0" class="text">
																	发送状态：<span style="color: deepskyblue;">失败</span>
																</view>
																<view v-else-if="inside.sendStatus ==1" class="text">
																	发送状态：<span style="color: deepskyblue;">成功</span>
																</view>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>
									</view>
								</view>
								<view>
									<view class="point">
										<view class="dot">
											1
										</view>
										<view class="time-title">产生预警【{{warnData.warnTime}}】</view>
									</view>
									<view class="time-info">
										<view class="time-line">
											<uni-list style="width: 100%;">
												<uni-list-item direction="column">
													<template v-slot:body>
														<view class="list-item-block">
															<view class="line">
																<view class="text"><span
																		style="color: deepskyblue;">{{warnData.warnInfo}}</span>
																</view>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-else-if="contentViewStatus==2">
							<view class="view-flex-inline" style="color: gray;margin-left: 10px;font-size: 0.9rem;">
								图层选择: </view>
							<view class="view-flex-inline" style="margin-top: 0px;padding-left: 10px;">
								<uni-data-checkbox :multiple="true" mode="button" v-model="mapCheck"
									:localdata="mapItems" @change="mapChange"></uni-data-checkbox>
							</view>
							<view class="list-item-block" style="color: gray;padding-left: 10px;">
								<view class="line">
									<text class="title" style="color: gray;">危险区:</text>
								</view>
								<view class="line">
									<view class="view-flex-block-center view-border"
										style="border-radius: 5px;;margin-top: 2px;" @click="moveToYjDangerArea()">
										<view class="view-btn-text text-under-line"
											style="color: deepskyblue;font-size: 0.7rem;padding-left: 10px;padding-right: 10px;padding-bottom: 2px;">
											{{dangerAreaData.dangerAreaName}}
										</view>
									</view>
								</view>
							</view>
							<view class="list-item-block" style="color: gray;padding-left: 10px;margin-top: 5px;">
								<view class="line">
									<text class="title" style="color: gray;">关联站点:</text>
								</view>
								<view class="line">
									<view v-for="rtu in dangerAreaData.rtus" :key="rtu.id"
										class="view-flex-block-center view-border"
										style="border-radius: 5px; padding-right: 10px;margin-top: 2px;"
										@click="moveToYjDangerAreaLinkRtu(rtu)">
										<view class="view-btn-text text-under-line"
											style="color: deepskyblue;font-size: 0.7rem;padding-left: 10px;padding-right: 10px;padding-bottom: 2px;">
											{{rtu.stName}}
										</view>
									</view>
								</view>
							</view>
							<view class="list-item-block" style="color: gray;padding-left: 10px;margin-top: 5px;">
								<view class="line">
									<text class="title" style="color: gray;">关联转移路线:</text>
								</view>
								<view class="line">
									<view v-for="leaveline in dangerAreaData.leaveLines" :key="leaveline.id"
										class="view-flex-block-center view-border"
										style="border-radius: 5px; padding-right: 10px;margin-top: 2px;"
										@click="moveToYjDangerAreaLinkLine(leaveline)">
										<view class="view-btn-text text-under-line"
											style="color: deepskyblue;font-size: 0.7rem;padding-left: 10px;padding-right: 10px;padding-bottom: 2px;">
											{{leaveline.leaveLineName}}
										</view>
									</view>
								</view>
							</view>
							<view class="list-item-block" style="color: gray;padding-left: 10px;">
								<view class="line">
									<text class="title" style="color: gray;">关联家庭户:</text>
								</view>
								<view class="line">
									<view v-if="dangerAreaData.familyCount>0" class="view-flex-block-center view-border"
										style="border-radius: 5px;;margin-top: 2px;"
										@click="moveToYjDangerAreaFamily()">
										<view class="view-btn-text text-under-line"
											style="color: deepskyblue;font-size: 0.7rem;padding-left: 10px;padding-right: 10px;padding-bottom: 2px;">
											共有{{dangerAreaData.familyCount}}户
										</view>
									</view>
									<view v-else>
										<view class="text" style="color: deepskyblue;font-size: 0.7rem;">暂无关联家庭户</view>
									</view>
								</view>
							</view>
						</view>
						<view v-else></view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		gcoord
	} from '@/static/js/gcoord.global.prod.js'
	import
	navBtns
	from "@/api/home.js";
	import http from '@/http/api.js';
	export default {
		name: 'rtuManageView',
		components: {},
		data() {
			return {
				title: '实时监测预警',
				query: {},
				inputStyles: {
					color: '#808080',
					borderColor: '#d3d3d3'
				},
				loading: false,
				mapScreenMax: false,
				mapScreenMin: true,
				showSearch: false,
				contentViewStatus: 0,
				cityRegionValue: '',
				cityRegionData: [],
				districtRegionValue: '',
				districtRegionData: [],
				townRegionValue: '',
				townRegionData: [],
				countryRegionValue: '',
				countryRegionData: [],
				//adCode: '',
				// yjRainDataCoverView: false,
				// yjWarnInfoCoverView: false,
				// yjDangerAreaCoverView: false,
				// yjPreCoverView: 0,
				latitude: 40.848119,
				longitude: 111.755426,
				zoom: true,
				scale: 13,
				markets: [],
				polygons: [],
				polylines: [],
				includepoints: [],
				mapStyles: {
					width: '100%',
					height: '200px'
				},
				popViewStyles: {
					width: '100%',
					height: '500px'
				},
				popScrollViewStyles: {
					width: '100%',
					height: '100px'
				},
				searchViewStyles: {
					width: '100%',
					height: '40px'
				},
				mapHeight: 200,
				popViewHeight: 500,
				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,
				// 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,
				},
				pageSize: 10,
				pageCurrent: 1,
				listTotal: 0,
				tableData: [],
				searchRtuNameVal: '',
				searchRtuCodeVal: '',
				//应急预警参数
				// yjSearchWarnNameVal: '',
				// yjSearchAdNameVal: '',
				// yjWarnPageSize: 10,
				// yjWarnPageCurrent: 1,
				// yjWarnTotal: 0,
				// yjWarnTableData: [],
				//应急危险区参数
				// yjDangerAreaNameVal: '',
				// yjDangerAreaAdNameVal: '',
				// yjDangerAreaPageSize: 10,
				// yjDangerAreaPageCurrent: 1,
				// yjDangerAreaTotal: 0,
				// yjDangerAreaTableData: [],
				// yjDangerAreaRtus: [],
				// yjDangerAreaLeaveLines: [],
				// yjDangerAreas: [],
				mapContext: null,
				mapCheck: [0, 1, 2, 3],
				mapItems: [{
						text: '危险区',
						value: 0
					},
					{
						text: '转移路线',
						value: 1
					},
					{
						text: '站点',
						value: 2
					},
					{
						text: '家庭户',
						value: 3
					}
				],
				isShowDangerArea: true,
				isShowLine: true,
				isShowSite: true,
				isShowFamily: true,
				warnData: {},
				dangerAreaData: {},
			}
		},
		computed: {
			toLocation(l) {
				return new Number(l).toFixed(6);
			}
		},
		onInit(option) {
			console.log("onInit" + JSON.stringify(uni.getWindowInfo()))
		},
		onLoad(option) {
			this.getCityRegion({});
			this.$nextTick(() => {
				this.getPage({});
			})
		},
		onShow() {
			if (this.$u.func.checkLogin()) {} else {
				this.$u.func.logout();
			}
		},
		onReady() {
			//console.log("onReady" + JSON.stringify(uni.getWindowInfo()))
			this.mapHeight = 200;
			//uni.getWindowInfo().windowHeight - 50 - 500;
			this.mapStyles.height = this.mapHeight + "px";
			this.popViewHeight = uni.getWindowInfo().windowHeight - 50 - 200;
			this.popScrollViewStyles.height = (this.popViewHeight - 40) + "px";
			this.mapContext = uni.createMapContext('myMap', this);
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},
			onMapScreenMax() {
				console.log("max")
				this.mapScreenMax = true;
				this.mapScreenMin = false;
				this.mapHeight = uni.getWindowInfo().windowHeight - 50 - 200;
				this.mapStyles.height = this.mapHeight + "px";
				this.popViewHeight = 200;
				this.popScrollViewStyles.height = (this.popViewHeight - 40) + "px";
			},
			onMapScreenMin() {
				console.log("min")
				this.mapScreenMax = false;
				this.mapScreenMin = true;
				this.mapHeight = 200;
				this.mapStyles.height = this.mapHeight + "px";
				this.popViewHeight = uni.getWindowInfo().windowHeight - 50 - 200;
				this.popScrollViewStyles.height = (this.popViewHeight - 40) + "px";

			},
			searchAreaStatus(e) {
				console.log(JSON.stringify(e))
				if (e.length > 0 && e[0] == '0') {
					this.showSearch = true;
				} else {
					this.showSearch = false;
				}
			},
			onYjRainDataRefreshClick() {
				this.pageCurrent = 1;
				this.query = {};
				this.searchRtuNameVal = '';
				this.searchRtuCodeVal = '';
				this.getPage({});
			},
			onYjWarnBackClick() {
				this.contentViewStatus = 0;
			},
			onYjDangerAreaBackClick() {
				this.contentViewStatus = 0;
			},
			//定位到测站
			onYjRainDataRtuClick(item) {
				this.isShowSite = true;
				this.mapCheck = [2];
				this.$nextTick(() => {
					this.markets = [];
					let marker = {};
					let c = gcoord.transform(
						[item.lng, item.lat],
						gcoord.WGS84,
						gcoord.GCJ02
					);
					marker['id'] = item.id;
					marker['latitude'] = c[1];
					marker['longitude'] = c[0];
					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";
					this.markets.push(marker)
					this.mapContext.moveToLocation({
						longitude: c[0],
						latitude: c[1],
						success: (res) => {

						}
					});
				})
			},
			//打开预警信息子页面
			onYjWarnClick(item) {
				let that = this;
				this.contentViewStatus = 1;
				this.$nextTick(() => {
					this.getWarnInfoDetail(item.warnId);
				})
			},
			//打开危险区信息子页面
			onYjDangerAreaDataClick(item) {
				let that = this;
				this.dangerAreaData.dangerAreaName = item.dangerAreaName;
				this.isShowDangerArea = true;
				this.isShowLine = true;
				this.isShowSite = true;
				this.isShowFamily = true;
				this.mapCheck = [0, 1, 2, 3];
				this.markets = [];
				this.polygons = [];
				this.polylines = [];
				this.contentViewStatus = 2;
				this.$nextTick(() => {
					let postData = {};
					postData['dangerAreaPid'] = item.dangerAreaPid;
					http.request({
						url: '/galaxy-business/map/dangerarea/detail',
						method: 'GET',
						data: postData
					}).then(res => {
						if (res.data != null) {
							//console.log(JSON.stringify(res.data))
							that.dangerAreaData = res.data;
							let centerPointLng = res.data.centerPointLng;
							let centerPointLat = res.data.centerPointLat;
							let dangerStatus = res.data.dangerStatus;
							if (that.isShowDangerArea) {
								let dangerAreaPoints = res.data.points;
								let p = {};
								let ps = dangerAreaPoints.map(item => {
									let l = gcoord.transform(
										[item.pointLng, item.pointLat],
										gcoord.WGS84,
										gcoord.GCJ02
									);
									return {
										latitude: l[1],
										longitude: l[0],
									}
								})
								p['points'] = ps;
								let dashArray = [];
								dashArray.push(4);
								dashArray.push(10);
								p['dashArray'] = dashArray;
								if (dangerStatus == '1') {
									p['strokeColor'] = '#FF0000';
									p['fillColor'] = '#F72C5B7D';
								} else {
									p['strokeColor'] = '#FC8452';
									p['fillColor'] = '#FAC8587D';
								}
								that.polygons.push(p);
							}
							if (that.isShowLine) {
								if (that.dangerAreaData.leaveLines != undefined && that.dangerAreaData
									.leaveLines != null && that
									.dangerAreaData.leaveLines.length > 0) {
									let line = that.dangerAreaData.leaveLines[0];
									that.getYjDangerAreaLineDetail(line);
								}
							}
							let rtus = [];
							if (that.isShowSite) {
								rtus = that.dangerAreaData.rtus.map(item => {
									let rtu = {};
									rtu['iconPath'] = '/static/images/icon_warning.png';
									rtu['id'] = parseInt(item.id);
									let r = gcoord.transform(
										[item.stLong, item.stLat],
										gcoord.WGS84,
										gcoord.GCJ02
									);
									rtu['latitude'] = r[1];
									rtu['longitude'] = r[0];
									rtu['width'] = 20;
									rtu['height'] = 20;
									let label = {};
									label['content'] = item.stName;
									label['color'] = '#000000';
									label['bgColor'] = '#ffffff';
									label['anchorY'] = -40;
									label['borderWidth'] = 1;
									label['borderColor'] = '#ff0000';
									label['padding'] = 4;
									rtu['label'] = label;
									return rtu;
								});
							}
							let familys = [];
							if (that.isShowFamily) {
								familys = that.dangerAreaData.familyPoints.map(item => {
									let rtu = {};
									rtu['iconPath'] = '/static/images/home.png';
									rtu['id'] = parseInt(item.id);
									let r = gcoord.transform(
										[item.longitude, item.latitude],
										gcoord.WGS84,
										gcoord.GCJ02
									);
									rtu['latitude'] = r[1];
									rtu['longitude'] = r[0];
									rtu['width'] = 20;
									rtu['height'] = 20;
									let label = {};
									label['content'] = item.personName;
									label['color'] = '#000000';
									label['bgColor'] = '#ffffff';
									label['anchorY'] = -40;
									label['borderWidth'] = 1;
									label['borderColor'] = '#ff0000';
									label['padding'] = 4;
									rtu['label'] = label;
									return rtu;
								});
							}
							let markets = rtus.concat(familys)
							that.markets = markets;
							let c = gcoord.transform(
								[centerPointLng, centerPointLat],
								gcoord.WGS84,
								gcoord.GCJ02
							);
							that.latitude = c[1];
							that.longitude = c[0];
						}
					}).catch(err => {
						console.log(err)
					})
				})
			},
			moveToYjDangerArea() {
				if (this.isShowDangerArea) {
					this.$nextTick(() => {
						let c = gcoord.transform(
							[this.dangerAreaData.centerPointLng, this.dangerAreaData.centerPointLat],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						this.latitude = c[1];
						this.longitude = c[0];
						this.mapContext.moveToLocation({
							longitude: this.longitude,
							latitude: this.latitude,
							success: (res) => {

							}
						});
					})
				}
			},
			moveToYjDangerAreaLinkRtu(rtu) {
				if (this.isShowSite) {
					this.$nextTick(() => {
						let c = gcoord.transform(
							[rtu.stLong, rtu.stLat],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						let lat = c[1];
						let long = c[0];
						this.mapContext.moveToLocation({
							longitude: long,
							latitude: lat,
							success: (res) => {

							}
						});
					})
				}
			},
			moveToYjDangerAreaLinkLine(line) {
				//console.log(JSON.stringify(line))
				//let that = this;
				if (this.isShowLine) {
					this.$nextTick(() => {

						let c = gcoord.transform(
							[line.centerPointLng, line.centerPointLat],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						let lat = c[1];
						let long = c[0];
						this.mapContext.moveToLocation({
							longitude: long,
							latitude: lat,
							success: (res) => {

							}
						});

						this.getYjDangerAreaLineDetail(line);
					})
				}
			},
			moveToYjDangerAreaFamily() {
				if (this.isShowFamily) {
					this.$nextTick(() => {
						if (this.dangerAreaData.familyPoints != undefined && this.dangerAreaData.familyPoints !=
							null && this
							.dangerAreaData.familyPoints.length > 0) {
							let f = this.dangerAreaData.familyPoints[0];
							let c = gcoord.transform(
								[f.longitude, f.latitude],
								gcoord.WGS84,
								gcoord.GCJ02
							);
							this.mapContext.moveToLocation({
								longitude: c[0],
								latitude: c[1],
								success: (res) => {

								}
							});
						}
					})

				}
			},
			mapChange(e) {
				let selectDangerArea = false;
				let selectLine = false;
				let selectSite = false;
				let selectFamily = false;
				for (let i = 0; i < this.mapCheck.length; i++) {
					let value = this.mapCheck[i];
					if (value == 0) {
						selectDangerArea = true;
					} else if (value == 1) {
						selectLine = true;
					} else if (value == 2) {
						selectSite = true;
					} else if (value == 3) {
						selectFamily = true;
					}
				}
				if (selectDangerArea) {
					if (!this.isShowDangerArea) {
						let p = {};
						let ps = this.dangerAreaData.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;
						let dashArray = [];
						dashArray.push(4);
						dashArray.push(10);
						p['dashArray'] = dashArray;
						if (this.dangerAreaData.dangerStatus == '1') {
							p['strokeColor'] = '#FF0000';
							p['fillColor'] = '#F72C5B7D';
						} else {
							p['strokeColor'] = '#FC8452';
							p['fillColor'] = '#FAC8587D';
						}
						this.polygons.push(p);
						this.isShowDangerArea = true;
					}
				} else {
					this.polygons = [];
					this.isShowDangerArea = false;
				}
				if (selectLine) {
					if (!this.isShowLine) {
						if (this.dangerAreaData.leaveLines != undefined && this.dangerAreaData.leaveLines != null && this
							.dangerAreaData.leaveLines.length > 0) {
							let line = this.dangerAreaData.leaveLines[0];
							this.getYjDangerAreaLineDetail(line);
						}
						this.isShowLine = true;
					}
				} else {
					this.polylines = [];
					this.isShowLine = false;
				}
				let rtus = [];
				if (selectSite) {
					rtus = this.dangerAreaData.rtus.map(item => {
						let rtu = {};
						rtu['iconPath'] = '/static/images/icon_warning.png';
						rtu['id'] = parseInt(item.id);
						let r = gcoord.transform(
							[item.stLong, item.stLat],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						rtu['latitude'] = r[1];
						rtu['longitude'] = r[0];
						rtu['width'] = 20;
						rtu['height'] = 20;
						let label = {};
						label['content'] = item.stName;
						label['color'] = '#000000';
						label['bgColor'] = '#ffffff';
						label['anchorY'] = -40;
						label['borderWidth'] = 1;
						label['borderColor'] = '#ff0000';
						label['padding'] = 4;
						rtu['label'] = label;
						return rtu;
					});
					this.isShowSite = true;
				} else {
					this.isShowSite = false;
				}
				let familys = [];
				if (selectFamily) {
					console.log(JSON.stringify(this.dangerAreaData.familyPoints))
					familys = this.dangerAreaData.familyPoints.map(item => {
						let rtu = {};
						rtu['iconPath'] = '/static/images/home.png';
						rtu['id'] = parseInt(item.id);
						let r = gcoord.transform(
							[item.longitude, item.latitude],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						rtu['latitude'] = r[1];
						rtu['longitude'] = r[0];
						rtu['width'] = 20;
						rtu['height'] = 20;
						let label = {};
						label['content'] = item.personName;
						label['color'] = '#000000';
						label['bgColor'] = '#ffffff';
						label['anchorY'] = -40;
						label['borderWidth'] = 1;
						label['borderColor'] = '#ff0000';
						label['padding'] = 4;
						rtu['label'] = label;
						return rtu;
					});
					this.isShowFamily = true;
				} else {
					this.isShowFamily = false;
				}
				let markets = rtus.concat(familys)
				this.markets = markets;
			},
			cityRegionChange(e) {
				this.cityRegionValue = e;
				this.districtRegionData = [];
				this.districtRegionValue = '';
				this.townRegionData = [];
				this.townRegionValue = '';
				this.countryRegionData = [];
				this.countryRegionValue = '';
				let p = {
					'parentCode': this.cityRegionValue
				}
				this.getDistrictRegion(p);
				this.query['adCode'] = this.cityRegionValue;
			},
			districtRegionChange(e) {
				if (e == undefined || e == null || e == '') {
					this.districtRegionValue = '';
					this.townRegionData = [];
					this.townRegionValue = '';
					this.countryRegionData = [];
					this.countryRegionValue = '';
					this.query['adCode'] = this.cityRegionValue;
				} else {
					this.districtRegionValue = e;
					this.townRegionData = [];
					this.townRegionValue = '';
					this.countryRegionData = [];
					this.countryRegionValue = '';
					let p = {
						'parentCode': this.districtRegionValue
					}
					this.getTownRegion(p);
					this.query['adCode'] = this.districtRegionValue;
				}
			},
			townRegionChange(e) {
				if (e == undefined || e == null || e == '') {
					this.townRegionValue = '';
					this.countryRegionData = [];
					this.countryRegionValue = '';
					this.query['adCode'] = this.districtRegionValue;
				} else {
					this.townRegionValue = e;
					this.countryRegionData = [];
					this.countryRegionValue = '';
					let p = {
						'parentCode': this.townRegionValue
					}
					this.getCountryRegion(p);
					this.query['adCode'] = this.townRegionValue;
				}
			},
			countryRegionChange(e) {
				if (e == undefined || e == null || e == '') {
					this.countryRegionValue = '';
					this.query['adCode'] = this.townRegionValue;
				} else {
					this.countryRegionValue = e;
					this.query['adCode'] = this.countryRegionValue;
				}
			},
			getCityRegion(params = {}) {
				let that = this;
				http.request({
					url: '/galaxy-business/baseinfo/region/whole/yj/list',
					method: 'GET',
					data: params,
				}).then(res => {
					//console.log(JSON.stringify(res.data))
					that.cityRegionData = res.data.map(item => {
						return {
							value: item.adcd,
							text: item.adnm,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getDistrictRegion(params = {}) {
				let that = this;
				http.request({
					url: '/galaxy-business/baseinfo/region/whole/yj/list',
					method: 'GET',
					data: params,
				}).then(res => {
					that.districtRegionData = res.data.map(item => {
						return {
							value: item.adcd,
							text: item.adnm,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getTownRegion(params = {}) {
				let that = this;
				http.request({
					url: '/galaxy-business/baseinfo/region/whole/yj/list',
					method: 'GET',
					data: params,
				}).then(res => {
					that.townRegionData = res.data.map(item => {
						return {
							value: item.adcd,
							text: item.adnm,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getCountryRegion(params = {}) {
				let that = this;
				http.request({
					url: '/galaxy-business/baseinfo/region/whole/yj/list',
					method: 'GET',
					data: params,
				}).then(res => {
					that.countryRegionData = res.data.map(item => {
						return {
							value: item.adcd,
							text: item.adnm,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getWarnInfoDetail(warnId) {
				let that = this;
				http.request({
					url: '/galaxy-business/yj/warn/detail/all?warnId=' + warnId,
					method: 'GET'
				}).then(res => {
					if (res && res.success) {
						that.warnData = res.data;
					}
				}).catch(err => {
					console.log(JOSN.stringify(err))
				})
			},
			// openRainDataView() {
			// 	let that = this;
			// 	this.mapStyles.height = "200px";
			// 	this.yjWarnInfoCoverView = false;
			// 	this.yjDangerAreaCoverView = false;
			// 	if (this.yjPreCoverView != 1) {
			// 		this.yjMapMarkers = [];
			// 		this.polygons = [];
			// 		this.polylines = [];
			// 	}
			// 	this.yjPreCoverView = 1;
			// 	this.yjRainDataCoverView = true;
			// 	this.$nextTick(() => {
			// 		let p = {};
			// 		that.getYjRainDataPage(p);
			// 	})
			// },
			// openWarnInfoView() {
			// 	let that = this;
			// 	this.mapStyles.height = "200px";
			// 	this.yjRainDataCoverView = false;
			// 	this.yjDangerAreaCoverView = false;
			// 	if (this.yjPreCoverView != 2) {
			// 		this.yjMapMarkers = [];
			// 		this.polygons = [];
			// 		this.polylines = [];
			// 	}
			// 	this.yjPreCoverView = 2;
			// 	this.yjWarnInfoCoverView = true;
			// 	this.$nextTick(() => {
			// 		let p = {};
			// 		that.getYjWarnDataPage(p);
			// 	})
			// },
			// openDangerAreaView() {
			// 	let that = this;
			// 	this.mapStyles.height = "200px";
			// 	this.yjRainDataCoverView = false;
			// 	this.yjWarnInfoCoverView = false;
			// 	if (this.yjPreCoverView != 3) {
			// 		this.yjMapMarkers = [];
			// 		this.polygons = [];
			// 		this.polylines = [];
			// 	}
			// 	this.yjPreCoverView = 3;
			// 	this.yjDangerAreaCoverView = true;
			// 	this.$nextTick(() => {
			// 		let p = {};
			// 		that.getYjDangerAreaDataPage(p);
			// 	})
			// },
			// yjPopMenuClose() {
			// 	this.mapStyles.height = this.mapHeight + "px";
			// 	this.yjRainDataCoverView = false;
			// 	this.yjWarnInfoCoverView = false;
			// 	this.yjDangerAreaCoverView = false;
			// },
			//雨量数据业务
			pageChange(e) {
				this.pageCurrent = e.current;
				let params = {};
				if (this.searchRtuCodeVal.length > 0) {
					params['rtuCode'] = this.searchRtuCodeVal;
				}
				if (this.searchRtuNameVal.length > 0) {
					params['rtuName'] = this.searchRtuNameVal;
				}
				this.getPage(params)
			},
			onSearch() {
				this.pageCurrent = 1;
				this.tableData = [];
				let params = {};
				if (this.searchRtuCodeVal.length > 0) {
					params['rtuCode'] = this.searchRtuCodeVal;
				}
				if (this.searchRtuNameVal.length > 0) {
					params['rtuName'] = this.searchRtuNameVal;
				}
				this.getPage(params);
				// this.$nextTick(() => {
				// 	this.showSearch = false;
				// })
			},
			getPage(params = {}) {
				const current = this.pageCurrent;
				const size = this.pageSize;
				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/yj/rain/page',
					method: 'GET',
					params: {
						current,
						size,
						isSubmit
					},
					data: postData,
				}).then(res => {
					console.log(JSON.stringify(res))
					if (res.data.records != null) {
						that.tableData = res.data.records;
					}
					that.listTotal = res.data.total;
					if (that.listTotal == 0) {
						that.pageCurrent = 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;
						break;
					}
				}
				this.getPage({});
			},
			searchRtuNameValClear(e) {
				if (e == null || e.length == 0) {
					this.searchRtuNameVal = '';
				}
			},
			searchRtuCodeValClear(e) {
				if (e == null || e.length == 0) {
					this.searchRtuCodeValL = '';
				}
			},
			//应急预警信息
			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;
			// 	let params = {};
			// 	if (this.yjSearchWarnNameVal.length > 0) {
			// 		params['warnName'] = this.yjSearchWarnNameVal;
			// 	}
			// 	if (this.yjSearchAdNameVal.length > 0) {
			// 		params['dangerAreaName'] = this.yjSearchAdNameVal;
			// 	}
			// 	this.getYjWarnDataPage(params)
			// },
			// 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;
			// 	}
			// 	this.getYjDangerAreaDataPage(params);
			// },
			// yjDangerAreaPageChange(e) {
			// 	this.yjDangerAreaPageCurrent = e.current;
			// 	let params = {};
			// 	if (this.yjDangerAreaNameVal.length > 0) {
			// 		params['dangerAreaName'] = this.yjDangerAreaNameVal;
			// 	}
			// 	this.getYjDangerAreaDataPage(params)
			// },
			// 	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)
			// 		})
			// 	},
			// 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.scale = 14;
			// 		}
			// 	}).catch(err => {
			// 		console.log(err)
			// 	})
			// },
			// onYjDangerAreaLinkRtuClick(rtu) {
			// 	console.log(JSON.stringify(rtu))
			// 	this.yjMapMarkers = [];
			// 	let marker = {};
			// 	marker['id'] = rtu.id;
			// 	let l = gcoord.transform(
			// 		[rtu.stLong, rtu.stLat],
			// 		gcoord.WGS84,
			// 		gcoord.GCJ02
			// 	);
			// 	marker['latitude'] = l[1];
			// 	marker['longitude'] = l[0];
			// 	let label = {};
			// 	label['content'] = rtu.stName;
			// 	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 = l[1];
			// 	this.longitude = l[0];
			// 	this.scale = 14;
			// },
			// onYjDangerAreaLinkLineClick(line) {
			// 	console.log(JSON.stringify(line))
			// 	let that = this;
			// 	this.polylines = [];
			// 	let c = gcoord.transform(
			// 		[line.centerPointLng, line.centerPointLat],
			// 		gcoord.WGS84,
			// 		gcoord.GCJ02
			// 	);
			// 	this.latitude = c[1];
			// 	this.longitude = c[0];
			// 	this.scale = 14;
			// 	//let id = line.id;
			// 	this.$nextTick(() => {
			// 		that.getYjDangerAreaLineDetail(line);
			// 	})
			// },
			getYjDangerAreaLineDetail(line) {
				let that = this;
				let postData = {};
				postData['id'] = line.id;
				http.request({
					url: '/galaxy-business/map/leaveline/detail',
					method: 'GET',
					data: postData
				}).then(res => {
					if (res.data != null) {
						that.polylines = [];
						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;
						if (that.dangerAreaData.dangerStatus == '1') {
							p['color'] = '#FAC858FF';
						} else {
							p['color'] = '#F72C5BFF';
						}
						p['width'] = 4;
						that.polylines.push(p);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// onYjDangerAreaClick(item) {
			// 	let that = this;
			// 	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>
	.tag {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
		padding-left: 10px;
		flex-wrap: wrap;

		view {
			margin: 5px;
		}
	}

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

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

	.point {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 15rpx 0;
	}

	.dot {
		//margin-left: -22rpx;
		background-color: #19be6b;
		box-shadow: 0 0 5rpx 5rpx #71d5a1;
		color: white;
		width: 50rpx;
		height: 50rpx;
		padding: 5rpx;
		font-size: 28rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.time-title {
		font-size: 30rpx;
		margin-left: 15rpx;
		background-color: whitesmoke;
		padding: 12rpx 25rpx;
		border-radius: 50rpx;
		color: orangered;
	}

	.time-info {
		padding: 0rpx 0rpx 0rpx 25rpx;
	}

	.time-line {
		border-left: 3rpx solid #71d5a1;
		padding: 10rpx 10rpx 30rpx 20rpx;
	}
</style>