TSYWXT-CLOUD-APP/pages/rtu-manage/rtumanage.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="#3F9EFF" statusBar="false" height="75px">
			<view style="width:100%;display: flex;flex-direction: row;justify-content: center;align-items: center;">
				<text style="color: #ffffff; font-size: 1rem;font-family: Microsoft YaHei;">{{title}}</text>
			</view>
		</uni-nav-bar>
		<view v-if="subSystem == 1">
			<uni-section title="查询" type="line">
				<view class="search-block">
					<view class="adcd-adnm">
						<uni-data-picker placeholder="请选择地区" popup-title="请选择所在地区" :localdata="regionTree"
							v-model="selectedTreeNode" @change="onTreeChange" @nodeclick="onTreeNodeClick"
							@popupopened="onTreePopupOpened" @popupclosed="onTreePopupClosed" :clear-icon="false">
						</uni-data-picker>
					</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="search">查 询</button>
					</view>
				</view>
			</uni-section>
			<view class="count-info-line">
				<view class="rtuCount">
					<span class="name">测站数量: </span>
					<span v-if="countInfo.rtuCount" class="count">{{ countInfo.rtuCount }}</span>
				</view>
				<view class="warnRtuCount">
					<span class="name">异常测站数量: </span>
					<span v-if="countInfo.warningRtuCount" class="count">{{
						                                        countInfo.warningRtuCount }}</span>
				</view>
			</view>
			<view style="padding-left: 0px;padding-right: 0px;">
				<uni-collapse v-model="value">
					<uni-collapse-item title="异常类别筛选条件" :show-animation="true">
						<view class="select-checkbox">
							<uni-data-checkbox v-model="warnKindOption" :localdata="warnKindItems"
								@change="warnKindOptionChange">
							</uni-data-checkbox>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<uni-list>
				<uni-list-item v-for="item in list" :key="item.id">
					<template v-slot:body>
						<view class="list-item-block">
							<uni-row>
								<uni-col :span="20">
									<view class="items-line">
										<image v-if="item.runStatusId==1" class="item-title-run-status-icon"
											mode="widthFix" src="/static/images/icon_warning.png">
										</image>
										<image v-else class="item-title-run-status-icon" mode="widthFix"
											src="/static/images/icon_ok.png">
										</image>
										<text class="item-title-rtu-name">{{item.rtuName}}</text>
										<text class="item-title-rtu-code">[{{item.rtuCode}}]</text>
									</view>
								</uni-col>
								<uni-col :span="4">
									<view class="items-line" style="padding-top: 5px;"
										@click="onRtuDetailClick(item.rtuCode)">
										<text
											style="text-decoration-line: underline;font-size: 0.6rem;color:gray;">测站信息</text>
									</view>
								</uni-col>
							</uni-row>
							<view class="items-line">
								<uni-icons class="input-uni-icon" type="calendar" size="18" color="lightblue" />
								<text class="item-up-time-text">最后上线时间:</text>
								<text class="item-up-time-text">{{item.lastUpTime}}</text>
							</view>
							<view v-if="item.runStatusId==1" class="items-line">
								<uni-icons class="input-uni-icon" type="bars" size="18" color="lightblue" />
								<text class="item-up-time-text">异常类型:</text>
								<text class="item-up-time-text">{{item.warnKindInfo}}</text>
							</view>
							<view class="items-line">
								<uni-icons class="input-uni-icon" type="location" size="18" color="lightblue" />
								<text class="item-adcd-adnm-text">{{item.areaName}}</text>
							</view>
							<view class="item-button-group">
								<view class="item-button" @click="onLocationClick(item)">
									<view class="items-line">
										<uni-icons class="input-uni-icon" type="location" size="18" color="coral" />
										<text class="button-text">导航</text>
									</view>
								</view>
								<view class="item-button" @click="onWarningPageClick(item.rtuCode)">
									<view class="items-line">
										<uni-icons class="input-uni-icon" type="gear" size="18" color="coral" />
										<text class="button-text">异常信息</text>
									</view>
								</view>
								<view class="item-button" @click="onCheckOrderPageClick(item.rtuCode)">
									<view class="items-line">
										<uni-icons class="input-uni-icon" type="gear" size="18" color="coral" />
										<text class="button-text">维修任务</text>
									</view>
								</view>
								<view class="item-button" @click="onInspectionReportClick(item.rtuCode)">
									<view class="items-line">
										<uni-icons class="input-uni-icon" type="reload" size="18" color="coral" />
										<text class="button-text">设备巡检</text>
									</view>
								</view>
								<view class="item-button" @click="onSiteRealDataClick(item)">
									<view class="items-line">
										<uni-icons class="input-uni-icon" type="info" size="18" color="coral" />
										<text class="button-text">实时数据</text>
									</view>
								</view>
								<view v-if="permission.admin || permission.orgAdmin" class="item-button"
									@click="onManuallyOrderClick(item.rtuCode)">
									<view class="items-line">
										<uni-icons class="input-uni-icon" type="email" size="18" color="coral" />
										<text class="button-text">人工派单</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-group>
				<view class="pagination-block">
					<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
						@change="pageChange" />
				</view>
			</uni-group>
		</view>
		<!-- 应急系统 -->
		<view v-else-if="subSystem == 2">
			<view class="page-body">
				<uni-drawer ref="yjDrawerRef" :width="yjDrawerWidth" mode="left">
					<view v-if="popBoxIndex ===1">
						<view class="scroll-view">
							<scroll-view class="scroll-view-box" scroll-y="true">
								<uni-section title="实时雨情" titleFontSize="0.8rem" type="line">
									<template v-slot:right>
										<view class="view-flex-inline" style="margin-right: 10px;"
											@click="yjPopMenuClose">
											<view class="text-under-line" style="color: blue;">关闭</view>
										</view>
									</template>
									<view class="search-block">
										<view class="rtu-code">
											<uni-easyinput :styles="inputStyles" @input="yjRainSearchRtuCodeValClear"
												prefixIcon="search" v-model="yjRainSearchRtuCodeVal"
												placeholder="请输入测站编码">
											</uni-easyinput>
										</view>
										<view class="rtu-name">
											<uni-easyinput :styles="inputStyles" @input="yjRainSearchRtuNameValClear"
												prefixIcon="search" v-model="yjRainSearchRtuNameVal"
												placeholder="请输入测站名称">
											</uni-easyinput>
										</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 class="submit-btn">
											<button type="default" @click="yjRainDataSearch">查 询</button>
										</view>
									</view>
									<uni-list style="min-height: 40px;">
										<uni-list-item v-for="item in yjRainTableData" :key="item.id">
											<template v-slot:body>
												<view class="list-item-block">
													<view class="view-flex-inline" @click="onYjRainDataRtuClick(item)">
														<view
															class="list-item-title list-item-text-ellipsis text-under-line"
															style="color: blue;">
															{{item.rtuName}}
														</view>
													</view>
													<view class="view-flex-inline">
														<text class="list-item-text" style="color: gray;">累计雨量:</text>
														<text class="list-item-text"
															style="color: coral;margin-left: 5px;">{{item.drp}}
															mm</text>
													</view>
												</view>
											</template>
										</uni-list-item>
									</uni-list>
									<uni-group>
										<view class="pagination-block" style="margin-top: 5px;">
											<uni-pagination :page-size="yjRainListPageSize"
												:current="yjRainListPageCurrent" :total="yjRainListTotal"
												@change="yjRainListPageChange" prevText="前一页" nextText="后一页" />
										</view>
									</uni-group>
								</uni-section>
							</scroll-view>
						</view>
					</view>
					<view v-if="popBoxIndex ===2">
						<view class="scroll-view">
							<scroll-view class="scroll-view-box" scroll-y="true">
								<uni-section title="预警信息" titleFontSize="0.8rem" type="line">
									<template v-slot:right>
										<view class="view-flex-inline" style="margin-right: 10px;"
											@click="yjPopMenuClose">
											<view class="text-under-line" style="color: blue;">关闭</view>
										</view>
									</template>
									<view class="search-block">
										<view class="rtu-name">
											<uni-easyinput :styles="inputStyles" @input="yjSearchWarnNameValClear"
												prefixIcon="search" v-model="yjSearchWarnNameVal" placeholder="请输入预警名称">
											</uni-easyinput>
										</view>
										<view class="rtu-name">
											<uni-easyinput :styles="inputStyles" @input="yjSearchAdNameValClear"
												prefixIcon="search" v-model="yjSearchAdNameVal" placeholder="请输入行政区名称">
											</uni-easyinput>
										</view>
										<view class="submit-btn">
											<button type="default" @click="yjWarnDataSearch">查 询</button>
										</view>
									</view>
									<uni-list style="min-height: 40px;">
										<uni-list-item v-for="item in yjWarnTableData" :key="item.id">
											<template v-slot:body>
												<view class="list-item-block">
													<view class="view-flex-inline" @click="onYjWarnDataRtuClick(item)">
														<view
															class="list-item-title list-item-text-ellipsis text-under-line"
															style="color: blue;">
															{{item.warnName}}
														</view>
													</view>
													<view class="view-flex-inline">
														<text class="list-item-text"
															style="margin-left: 0px;color: gray;">预警信息：{{item.warnInfo}}</text>
													</view>
													<view class="view-flex-inline">
														<text class="list-item-text"
															style="color: gray;">预警时间：{{item.warnTime}}</text>
													</view>
													<view class="view-flex-inline">
														<text class="list-item-text"
															style="color: gray;">行政区：</text>
													</view>
												</view>
											</template>
										</uni-list-item>
									</uni-list>
									<uni-group>
										<view class="pagination-block" style="margin-top: 5px;">
											<uni-pagination :page-size="yjWarnPageSize" :current="yjWarnPageCurrent"
												:total="yjWarnTotal" @change="yjWarnPageChange" prevText="前一页"
												nextText="后一页" />
										</view>
									</uni-group>
								</uni-section>
							</scroll-view>
						</view>
					</view>
					<view v-if="popBoxIndex ===3">
						<view class="scroll-view">
							<scroll-view class="scroll-view-box" scroll-y="true">
								<uni-section title="危险区信息" titleFontSize="0.8rem" type="line">
									<template v-slot:right>
										<view class="view-flex-inline" style="margin-right: 10px;"
											@click="yjPopMenuClose">
											<view class="text-under-line" style="color: blue;">关闭</view>
										</view>
									</template>
									<view class="search-block">
										<view class="rtu-name">
											<uni-easyinput :styles="inputStyles" @input="yjDangerAreaNameValClear"
												prefixIcon="search" v-model="yjDangerAreaNameVal"
												placeholder="请输入危险区名称">
											</uni-easyinput>
										</view>
										<view class="rtu-name">
											<uni-easyinput :styles="inputStyles" @input="yjDangerAreaAdNameValClear"
												prefixIcon="search" v-model="yjDangerAreaAdNameVal"
												placeholder="请输入行政区名称">
											</uni-easyinput>
										</view>
										<view class="submit-btn">
											<button type="default" @click="yjDangerAreaDataSearch">查 询</button>
										</view>
									</view>
									<uni-list style="min-height: 40px;">
										<uni-list-item v-for="item in yjDangerAreaTableData" :key="item.id">
											<template v-slot:body>
												<view class="list-item-block">
													<view class="view-flex-inline" @click="yjDangerAreaDataClick(item)">
														<view
															class="list-item-title list-item-text-ellipsis text-under-line"
															style="color: blue;">
															{{item.dangerAreaName}}
														</view>
													</view>
													<view class="view-flex-inline">
														<text class="list-item-text list-item-text-ellipsis"
															style="color: gray;">测站名称：{{item.rtuName}}</text>
													</view>
													<view class="view-flex-inline">
														<text class="list-item-text list-item-text-ellipsis"
															style="color: gray;">行政区：{{item.adnm}}</text>
													</view>
													<!-- 													<view class="view-flex-inline">
														<text class="list-item-text"
															style="color: gray;">经纬度：{{item.centerPointLng)}},{{toLocation(item.centerPointLat)}}</text>
													</view> -->
												</view>
											</template>
										</uni-list-item>
									</uni-list>
									<uni-group>
										<view class="pagination-block" style="margin-top: 5px;">
											<uni-pagination :page-size="yjDangerAreaPageSize"
												:current="yjDangerAreaPageCurrent" :total="yjDangerAreaTotal"
												@change="yjDangerAreaPageChange" prevText="前一页" nextText="后一页" />
										</view>
									</uni-group>
								</uni-section>
							</scroll-view>
						</view>
					</view>
				</uni-drawer>
				<view class="page-section page-section-gap">
					<map ref="mapId" :style="mapStyles" :latitude="latitude" :longitude="longitude"
						:markers="yjMapMarkers" :polygons="polygons" :scale="scale" :polyline="polylines">
						<cover-view v-if="yjDangerAreaCoverView==1" style="width: 200px;background-color: gray;">
							<uni-section title="危险区" type="line">
								<uni-list style="min-height: 40px;">
									<uni-list-item v-for="item in yjDangerAreas" :key="item.id">
										<template v-slot:body>
											<view class="list-item-block">
												<view class="view-flex-inline" @click="yjDangerAreaClick(item)">
													<view
														class="list-item-title list-item-text-ellipsis text-under-line"
														style="color: blue;">
														{{item.dangerAreaName}}
													</view>
												</view>
											</view>
										</template>
									</uni-list-item>
								</uni-list>
							</uni-section>
						</cover-view>
						<cover-view v-if="yjRtuCoverView==1" style="width: 200px;background-color: gray;">
							<uni-section title="关联站点" type="line">
								<uni-list style="min-height: 40px;">
									<uni-list-item v-for="item in yjDangerAreaRtus" :key="item.id">
										<template v-slot:body>
											<view class="list-item-block">
												<view class="view-flex-inline" @click="yjDangerAreaLinkRtuClick(item)">
													<view
														class="list-item-title list-item-text-ellipsis text-under-line"
														style="color: blue;">
														{{item.rtuName}}
													</view>
												</view>
											</view>
										</template>
									</uni-list-item>
								</uni-list>
							</uni-section>
						</cover-view>
						<cover-view v-if="yjDangerAreaLineCoverView==1" style="width: 200px;background-color: gray;">
							<uni-section title="转移路线" type="line">
								<uni-list style="min-height: 40px;">
									<uni-list-item v-for="item in yjDangerAreaLeaveLines" :key="item.id">
										<template v-slot:body>
											<view class="list-item-block">
												<view class="view-flex-inline" @click="yjDangerAreaLinkLineClick(item)">
													<view
														class="list-item-title list-item-text-ellipsis text-under-line"
														style="color: blue;">
														{{item.leaveLineName}}
													</view>
												</view>
											</view>
										</template>
									</uni-list-item>
								</uni-list>
							</uni-section>
						</cover-view>
					</map>
				</view>
				<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @trigger="trigger" @fabClick="fabClick" />
			</view>
		</view>
		<view v-else></view>
	</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,
				},
				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) {
			let subSystemSelectInfo = uni.getStorageSync("SubSystemSelectInfo");
			this.subSystem = subSystemSelectInfo.subSystem;
			if (this.subSystem == 1) {
				this.title = "管理工作台";
			} else if (this.subSystem == 2) {
				this.title = "监测预警管理";
				this.yjDrawerWidth = uni.getWindowInfo().windowWidth - 100;
				this.mapStyles.height = (uni.getWindowInfo().windowHeight - 75 - 20) + "px";
			}
			if (this.$u.func.checkLogin()) {
				if (this.userInfo.role_name === role.admin) {
					this.permission.admin = true;
					this.currentRole = role.admin;
				} else if (this.userInfo.role_name === role.orgAdmin) {
					this.permission.orgAdmin = true;
					this.currentRole = role.orgAdmin;
				} else if (this.userInfo.role_name === role.companyAdmin) {
					this.permission.companyAdmin = true;
					this.currentRole = role.companyAdmin;
				} else if (this.userInfo.role_name === role.companyServciePerson) {
					this.permission.companyServciePerson = true;
					this.currentRole = role.companyServciePerson;
				} else if (this.userInfo.role_name === role.yjServicePerson) {
					this.permission.yjServicePerson = true;
					this.currentRole = role.yjServicePerson;
				}
				if (this.subSystem == 1) {
					this.getRegionTree();
				} else if (this.subSystem == 2) {

				}
			} else {
				this.$u.func.logout();
			}
		},
		onShow() {
			if (this.$u.func.checkLogin()) {
				if (this.subSystem == 1) {
					this.title = "管理工作台";
				} else if (this.subSystem == 2) {
					this.title = "监测预警管理";
				}
				if (this.userInfo.role_name !== this.currentRole) {
					this.permission.admin = false;
					this.permission.orgAdmin = false;
					this.permission.companyAdmin = false;
					this.permission.companyServciePerson = false;
					this.permission.yjServicePerson = false;
					if (this.userInfo.role_name === role.admin) {
						this.permission.admin = true;
						this.currentRole = role.admin;
					} else if (this.userInfo.role_name === role.orgAdmin) {
						this.permission.orgAdmin = true;
						this.currentRole = role.orgAdmin;
					} else if (this.userInfo.role_name === role.companyAdmin) {
						this.permission.companyAdmin = true;
						this.currentRole = role.companyAdmin;
					} else if (this.userInfo.role_name === role.companyServciePerson) {
						this.permission.companyServciePerson = true;
						this.currentRole = role.companyServciePerson;
					} else if (this.userInfo.role_name === role.yjServicePerson) {
						this.permission.yjServicePerson = true;
						this.currentRole = role.yjServicePerson;
					}
					if (this.subSystem == 1) {
						this.getRegionTree();
					} else if (this.subSystem == 2) {

					}
				}
			} else {
				this.$u.func.logout();
			}
		},
		onReady() {
			console.log("onReady" + JSON.stringify(uni.getWindowInfo()))
			this.mapStyles.height = (uni.getWindowInfo().windowHeight - 75 - 20) + "px";
			this.$refs.fab.open()
		},
		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;

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