<template>
	<div class="full bg-container">
		<div class="left-section">
			<div class="section-con left-section1">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" />
					<span class="section-title">实时水情</span>
				</div>
				<!-- <div class="type-btn-group">
		    <span :key="ee.key"
		          v-for="ee in WaterTypeList"
		          class="type-btn-item"
		          :class="realtimeWaterType == ee.key ? 'active' : ''"
		          @click="changeWaterType(ee.key)">{{ ee.name
								}}</span>
		  </div> -->
				<div class="scroll-table full full-out-header padding">
					<div class="scroll-table-header">
						<div class="header-item" v-for="column in realtimeWaterHeader" :key="column.key"
							:style="{width: column.width}">
							{{ column.name }}
						</div>
					</div>
					<vue-seamless-scroll class="scroll-table-body" :data="realtimeWaterData"
						:class-option="optionSingleHeightTime1">
						<div class="scroll-table-column" v-for="column in realtimeWaterData" :key="column.key"
							@click="searchWaterData(column)" style="cursor: pointer">
							<div class="column-item" style="width: 14px">
								<span class="column-item-icon"></span>
							</div>
							<div class="column-item ellipsis" style="width: 20%" :title="column.stnm">
								{{ column.stnm }}
							</div>
							<div class="column-item ellipsis" style="width: 15%; text-align: center" :title="column.rz">
								{{ column.rz }}
							</div>
							<!-- <div class="column-item ellipsis"
		            style="width: 16%;text-align: center;"
		            :title="column.fsltdz1"
		            v-for="item in column.thresholdData"
		            :key="item.id">
		         {{ item.fsltdz}}
		       </div> -->
							<div class="column-item ellipsis" style="width: 15%; text-align: center"
								:title="column.nrstlv">
								{{ column.nrstlv }}
							</div>
							<div class="column-item ellipsis" style="width: 15%; text-align: center"
								:title="column.dsfllv">
								{{ column.dsfllv }}
							</div>

							<!-- <div class="column-item ellipsis"
		            style="width: 14%;text-align: center;"
		            :title="column.dyp">
		         {{ column.dyp }}
		       </div> -->
							<div class="column-item ellipsis" style="width: calc(23% - 14px)" :title="column.tm">
								{{ column.tm }}
							</div>
						</div>
					</vue-seamless-scroll>
				</div>
			</div>
			<div class="section-con left-section1">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">小时雨情</span>
				</div>
				<div class="scroll-table full full-out-header padding">
					<div class="scroll-table-header">
						<div class="header-item" v-for="column in realtimeRainHeader" :key="column.key"
							:style="{width: column.width}">
							{{ column.name }}
						</div>
					</div>
					<vue-seamless-scroll class="scroll-table-body" :data="realtimeRainData"
						:class-option="optionSingleHeightTime1">
						<div class="scroll-table-column" v-for="column in realtimeRainData" :key="column.key"
							@click="searchRainData(column)" style="cursor: pointer">
							<div class="column-item" style="width: 14px">
								<span class="column-item-icon"></span>
							</div>
							<div class="column-item ellipsis" style="width: 20%" :title="column.stnm">
								{{ column.stnm }}
							</div>
							<div class="column-item ellipsis" style="width: 15%; text-align: center" :title="column.p1">
								{{ column.p1 }}
							</div>
							<div class="column-item ellipsis" style="width: 15%; text-align: center"
								:title="column.yjz1">
								{{ rainWarn }}
							</div>
							<div class="column-item ellipsis" style="width: 15%; text-align: center"
								:title="column.yjz2">
								{{ rainDanger }}
							</div>
							<div class="column-item ellipsis" style="width: calc(23% - 14px)" :title="column.tm">
								{{ column.tm }}
							</div>
						</div>
					</vue-seamless-scroll>
				</div>
				<!--  <div id="realRain"
		       class="scroll-table full full-out-header padding">
		    <div class="scroll-table-header">
		      <div class="header-item"
		           v-for="column in realtimeRainHeader"
		           :key="column.key"
		           style="text-align: center;"
		           :style="{ width: column.width }">
		        {{ column.name }}
		      </div>
		    </div> -->
				<!-- <div class="scroll-table-body solid">
		      <div class="scroll-table-column"
		           v-for="column in realtimeRainData"
		           :key="column.key"
		           @click="searchRainData(column)">
		        <div class="column-item"
		             style="width: 14px">
		          <span class="column-item-icon"></span>
		        </div>
		        <div class="column-item ellipsis"
		             style="width: 15%"
		             :title="column.stnm">
		          {{ column.stnm }}
		        </div>
		        <div class="column-item ellipsis"
		             style="width: 20%;text-align: center;"
		             :title="column.areaName">
		          {{ column.areaName }}
		        </div>
		
		        <div class="column-item ellipsis"
		             style="width: 15%;text-align: center;"
		             :title="column.dyp">
		          {{ column.dyp }}
		        </div>
		        <div class="column-item ellipsis"
		             style="width: 15%;text-align: center;"
		             :title="column.yjz1">
		          {{rainWarn}}
		        </div>
		        <div class="column-item ellipsis"
		             style="width: 15%;text-align: center;"
		             :title="column.yjz2">
		          {{rainDanger}}
		        </div>
		        <div class="column-item ellipsis"
		             style="width: calc(20% - 14px)"
		             :title="column.tm">
		          {{ column.tm }}
		        </div>
		      </div>
		    </div>
		  </div> -->
			</div>
			<!-- <div class="section-con left-section1">
        <div>
          <img class="section-title-img"
               src="../../assets/img/title_icon.png" /><span class="section-title">水库概况</span>
        </div>
        <div class="flex full full-out-header">
          <div class="reservoir-item-con">
            <div class="reservoir-item"
                 :class="currentPoint == index ? 'active' : ''"
                 :key="index"
                 v-for="(item, index) in reservoirItemData.slice(
                                0,
                                4
                            )"
                 @click="handleMapMark(item, index)">
              <div class="reservoir-item-bg">
                <div class="reservoir-item-bg-circle"></div>
                <div class="reservoir-item-num">
                  {{ item.num }}
                </div>
                <div class="reservoir-item-name">
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="total-pop"
               :class="currentPoint == 'all' ? 'active' : ''"
               @click="handleMapMark('', 'all')">
            {{ reservoirTotal }}
          </div>
          <div class="reservoir-item-con">
            <div class="reservoir-item"
                 :class="currentPoint == index + 4 ? 'active' : ''"
                 :key="item.key"
                 v-for="(item, index) in reservoirItemData.slice(4)"
                 @click="handleMapMark(item, index + 4)">
              <div class="reservoir-item-bg">
                <div class="reservoir-item-bg-circle"></div>
                <div class="reservoir-item-num">
                  {{ item.num }}
                </div>
                <div class="reservoir-item-name">
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->

			<div class="section-con left-section3">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">超汛限</span>
				</div>
				<div class="explain top">超汛限水位单位：m</div>
				<!-- <div class="full full-out-header">
					<div id="flood-limit"></div>
				</div>
				<div class="explain ">超汛限单位：m</div> -->
				<div class="scroll-table full full-out-header padding">
					<div class="scroll-table-header">
						<div class="header-item" v-for="column in floodLimitHeader" :key="column.key"
							:style="{width: column.width}">
							{{ column.name }}
						</div>
					</div>
					<vue-seamless-scroll class="scroll-table-body" :data="floodLimitData"
						:class-option="optionSingleHeightTime1">
						<div class="scroll-table-column" v-for="column in floodLimitData" :key="column.key"
							style="cursor: pointer" @click="searchReservoirData(column)">
							<div class="column-item" style="width: 20%" :style="{
                                    color:
                                        column.warnGradeName == '警戒'
                                            ? 'yellow'
                                            : column.warnGradeName == '危险'
                                            ? '#FFAE00'
                                            : column.warnGradeName == '非常危险'
                                            ? 'red'
                                            : '',
                                }">
								{{ column.warnGradeName }}
							</div>
							<div class="column-item ellipsis" style="width: 20%" :title="column.stnm">
								{{ column.stnm }}
							</div>
							<div class="column-item ellipsis" style="width: 15%" :title="column.warnVal">
								{{ column.warnVal }}
							</div>
							<div class="column-item ellipsis" style="width: 15%" :title="column.currentValue">
								{{ column.currentValue }}
							</div>

							<div class="column-item ellipsis" style="width: calc(21% - 14px)" :title="column.sendDate">
								{{ column.sendDate }}
							</div>
						</div>
					</vue-seamless-scroll>
				</div>
			</div>
		</div>
		<div class="center-section">
			<div id="map-container"></div>
			<div class="pop-modal">
				<!-- <div class="safe-maintain-item">
			  全部
		  </div> -->
				<div>
					<div :class="
                            currentPoint == index
                                ? 'safe-maintain-item-active'
                                : 'safe-maintain-item'
                        " v-for="(item, index) in reservoirItemData" :key="item.key" style="margin-bottom: 15px"
						@click="handleMapMark(item, index)">
						{{ item.name }}
					</div>
					<!-- <div class="safe-maintain-item" @click="showInput()">
            <i class="el-icon-search">
              搜索
            </i>
          </div> -->
					<el-popover placement="bottom" width="400" trigger="click" popper-class="monitor-yt-popover">
						<!-- <el-input v-if="this.sqInput" clearable v-on:input="inputskData()" placeholder="请输入水库名称" size="mini">
            </el-input> -->
						<el-select @change="inputskData(rscdID)" size="mini" filterable clearable v-model="rscdID"
							placeholder="请选择水库名称">
							<el-option v-for="item in rsnms" :key="item.id" :label="item.rsnm" :value="item.rscd">
							</el-option>
						</el-select>
						<el-button slot="reference" @click="showInput()">
							<i class="el-icon-search"> 搜索 </i>
						</el-button>
					</el-popover>
				</div>

				<!-- <div class="pop-modal-item">
					<div class="title">
						总蓄水量
						<i class="eq-item-icon bbsl-iconfont bbsl-rongliang"></i>
					</div>
					<div class="num">
						<span>{{ situations.w || 0 }}</span> 万m³
					</div>
				</div> -->
			</div>
			<div class="safe-maintain top-left-content alarm">
				<div class="alarm-item" @click="
                        handlePopup(
                            `水位-${waterAlarm.name}报警`,
                            'water',
                            {
                                type: 'waterAlarm',
                                tableData: waterAlarm.list,
                            },
                            'Alarm'
                        )
                    ">
					<div class="num">
						{{ waterAlarm.count || 0 }}
					</div>
					<div class="title">水位报警</div>
				</div>
				<div class="alarm-item" @click="
                        handlePopup(
                            `雨量-${rainAlarm.name}报警`,
                            `rain`,
                            {
                                type: 'rainAlarm',
                                tableData: rainAlarm.list,
                            },
                            'Alarm'
                        )
                    ">
					<div class="num">
						{{ rainAlarm.count || 0 }}
					</div>
					<div class="title">雨量报警</div>
				</div>
				<div class="alarm-item" @click="
                        handlePopup(
                            `视频-${videoAlarm.name}报警`,
                            `water`,
                            {
                                type: 'videoAlarm',
                                tableData: videoAlarm.list,
                            },
                            'Alarm'
                        )
                    ">
					<div class="num">
						{{ videoAlarm.count || 0 }}
					</div>
					<div class="title">视频报警</div>
				</div>
			</div>
		</div>
		<div class="right-section">
			<div class="section-con right-section3">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" />
					<span class="section-title">测站概况</span>
				</div>

				<div class="full full-out-header equipment-item-content">
					<div class="equipment-item" v-for="item in stationData" :key="item.sttp" @click="
                            handleStation(item.sttp, 'station', {
                                type: 'shuiku',
                                stationType: item.sttp,
                                sttp: '',
                            })
                        ">
						<div class="eq-item-con">
							<div class="eq-item-name">
								<span>{{ item.sttp }}</span>
								<i class="eq-item-icon bbsl-iconfont" :class="item.icon"></i>
								<div class="eq-item-total">
									{{ item.count }}<i>个</i>
								</div>
							</div>
							<div class="eq-item-detail flex">
								<div>
									<div class="eq-item-kind">
										正常
										<span style="color: rgb(6, 194, 6)">
											{{ item.normalCount }}
										</span>
									</div>
								</div>
								<div>
									<div class="eq-item-kind">
										故障
										<span style="color: rgb(199, 61, 61)">
											{{ item.faultCount }}
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="section-con right-section1">
				<div style="display: flex">
					<img class="section-title-img" src="../../assets/img/title_icon.png" />
					<!-- <div> -->
					<span class="section-title" style="display: flex">
						<span style="width: 50%">当日巡检水库</span>
						<div class="scroll-table-header1" :class="instepTitle == '未巡检' ? 'undone' : 'done'">
							{{ instepTitle }}
						</div>
					</span>
				</div>
				<div class="full full-out-header inspect-container">
					<div id="inspectionChart"></div>
					<div id="inspectionTable" class="scroll-table">
						<!-- <div class="scroll-table-header1" :class="instepTitle == '未巡检'?'undone':'done'">
						</div> -->
						<div class="scroll-table-column" v-for="column in inspectionData" :key="column.key">
							<div class="column-item" style="width: 14px">
								<span class="column-item-icon"></span>
							</div>
							<div class="column-item ellipsis" style="
                                    width: calc(100% - 14px);
                                    text-align: left;
                                " :title="column.rsnm">
								{{ column.rsnm }}
							</div>
							<!-- <div
                                    class="column-item ellipsis"
                                    style="width: 30%"
                                    :title="column.incn"
                                >
                                    {{ column.incn }}
                                </div>
                                <div
                                    class="column-item ellipsis"
                                    style="width: 10%"
                                    :title="
                                        column.isNormal == 1
                                            ? '正常'
                                            : column.isNormal == 2
                                            ? '异常'
                                            : ''
                                    "
                                >
                                    {{
                                        column.isNormal == 1
                                            ? '正常'
                                            : column.isNormal == 2
                                            ? '异常'
                                            : ''
                                    }}
                                </div>
                                <div
                                    class="column-item ellipsis"
                                    style="width: calc(30% - 14px)"
                                    :title="column.insdt"
                                >
                                    {{ column.insdt }}
                                </div> -->
						</div>
					</div>
				</div>
			</div>
			<div class="section-con right-section2">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" />
					<span class="section-title">当日巡检问题</span>
				</div>
				<div id="problemChart"></div>
				<div id="problemTable" class="scroll-table padding">
					<div class="scroll-table-header">
						<div class="header-item" v-for="column in problemHeader" :key="column.key"
							:style="{width: column.width}">
							{{ column.name }}
						</div>
					</div>

					<div class="scroll-table-column" v-for="column in problemData" :key="column.key">
						<div class="column-item" style="width: 14px">
							<span class="column-item-icon"></span>
						</div>
						<div class="column-item ellipsis" :style="
                                problemHeader.length > 5
                                    ? 'width: 20%'
                                    : 'width: 25%'
                            " :title="column.rsnm">
							{{ column.rsnm }}
						</div>
						<div class="column-item ellipsis" v-if="problemHeader.length > 5" :style="
                                problemHeader.length > 4
                                    ? 'width: 20%'
                                    : 'width: 30%'
                            " :title="column.incn">
							{{ column.incn }}
						</div>
						<div class="column-item ellipsis" v-if="problemHeader.length <= 5" style="width: 25%"
							:title="column.incn">
							{{
                                column.structure
                                    ? column.structure + '/' + column.position
                                    : ''
                            }}
						</div>
						<div class="column-item ellipsis" v-if="problemHeader.length <= 5" style="width: 20%"
							:title="column.incn">
							{{ column.incc }}
						</div>
						<div class="column-item ellipsis" v-if="problemHeader.length > 5" :style="
                                problemHeader.length > 5
                                    ? 'width: 20%'
                                    : 'width: 30%'
                            " :title="column.excUser">
							{{ column.excUser }}
						</div>
						<div class="column-item ellipsis" v-if="problemHeader.length > 5" :style="
                                problemHeader.length > 5
                                    ? 'width: 20%'
                                    : 'width: 30%'
                            " :title="column.excTime">
							{{ column.excTime }}
						</div>
						<div class="column-item ellipsis" v-if="problemHeader.length > 5" :style="
                                problemHeader.length > 5
                                    ? 'width: calc(20% - 14px)'
                                    : 'width: calc(30% - 14px)'
                            " :title="column.createTime">
							{{ column.createTime }}
						</div>
						<div class="column-item ellipsis" v-if="problemHeader.length <= 5" :style="
                                problemHeader.length > 5
                                    ? 'width: calc(20% - 14px)'
                                    : 'width: calc(30% - 14px)'
                            " :title="column.insdt">
							{{ column.insdt }}6
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="left-section3">
                <div>
                    <el-tag type="primary">{{problemTitle}}</el-tag>
                </div>
				<div
                    id="realWater"
                    class="scroll-table full full-out-header padding"
                >
                    <div class="scroll-table-header">
                        <div
                            class="header-item"
                            v-for="column in problemHeader"
                            :key="column.key"
                            :style="{width: column.width}"
                        >
                            {{ column.name }}
                        </div>
                    </div>
                    <vue-seamless-scroll
                        class="scroll-table-body"
                        :data="problemData"
                        :class-option="optionSingleHeightTime2"
                    >
                        <div
                            class="scroll-table-column"
                            v-for="column in problemData"
                            :key="column.key"
                        >
                            <div class="column-item" style="width: 14px">
                                <span class="column-item-icon"></span>
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 30%"
                                :title="column.rsnm"
                            >
                                {{ column.rsnm }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: 40%"
                                :title="column.incn"
                            >
                                {{ column.incn }}
                            </div>
                            <div
                                class="column-item ellipsis"
                                style="width: calc(30% - 14px)"
                                :title="column.insdt"
                            >
                                {{ column.insdt }}
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div> -->
		</div>
		<stations-model ref="stationsModel" @Warning="Warning"></stations-model>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import towns from './js/towns'
	import indexApi from '@/api/frontScreen/index.js'
	import VueSeamlessScroll from 'vue-seamless-scroll'

	import stationsModel from './components/stationsModel.vue'
	import digitalReservoir from '@/api/frontScreen/digitalReservoir.js'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import req from '@/request.js'
	export default {
		name: 'DigitalReservoir',
		components: {
			VueSeamlessScroll,
			stationsModel,
		},
		data() {
			return {
				/**
				 * 水库选择器
				 * */
				searchSituations: [],
				rscdID: '',
				rsnms: [], //水库下拉
				// aictiveNum:0,
				currentPoint: 0,
				myChart: null,
				option: null,
				capacity: 286.49,
				storage: 241.28,
				reservoirTotal: 0,
				situations: {}, //概况
				params: {
					rscd: '',
					time: '',
					waterId: '',
					year: 0,
				},
				// 实时雨情传参
				realtimeRainType: {
					appType: '2',
					fromSzsk: true,
					query: '',
				},
				// 实时水情传参
				realtimeWaterType: {
					appType: '2',
					fromSzsk: true,
					query: '',
				},
				WaterTypeList: [{
						name: '山洪',
						key: '1',
					},
					{
						name: '中小河流',
						key: '3',
					},
					{
						name: '水库',
						key: '2',
					},
					{
						name: '全部',
						key: '',
					},
				],
				realtimeWaterData: [],
				// 实时水情表头
				realtimeWaterHeader: [{
						key: 'order',
						width: '14px',
						name: '',
					},
					{
						key: 'stnm',
						width: '20%',
						name: '测站',
					},
					{
						key: 'rz',
						width: '15%',
						name: '当前水位',
					},
					// {
					//   key: 'warnVal',
					//   width: '14%',
					//   name: '当前雨量',
					// },
					{
						key: 'fsltdz1',
						width: '15%',
						name: '正常水位',
					},
					{
						key: 'fsltdz2',
						width: '18%',
						name: '设计洪水位',
					},
					{
						key: 'time',
						width: 'calc(20% - 14px)',
						name: '时间',
					},
				],
				realtimeRainData: [],
				// 实时雨情表头
				realtimeRainHeader: [{
						key: 'order',
						width: '14px',
						name: '',
					},
					{
						key: 'stnm',
						width: '20%',
						name: '测站',
					},
					// {
					//   key: 'rz',
					//   width: '14%',
					//   name: '当前水位',
					// },
					{
						key: 'p1',
						width: '15%',
						name: '当前雨量',
					},
					{
						key: 'yjz1',
						width: '15%',
						name: '警戒阈值',
					},
					{
						key: 'yjz2',
						width: '15%',
						name: '危险阈值',
					},
					{
						key: 'time',
						width: 'calc(20% - 14px)',
						name: '时间',
					},
				],
				reservoirItemData: [{
						name: '全部',
						num: 0,
						key: 0,
						iconKey: 'all',
					},
					{
						name: '中型',
						num: 0,
						key: 4,
						iconKey: 'zhong',
					},
					{
						name: '小 (1) 型',
						num: 0,
						key: 5,
						iconKey: 'xiao1',
					},
					{
						name: '小 (2) 型',
						num: 0,
						key: 6,
						iconKey: 'xiao2',
					},
				],
				SearchReservoirItemData: [{
						name: '中型',
						num: 0,
						key: 4,
						iconKey: 'zhong',
					},
					{
						name: '小 (1) 型',
						num: 0,
						key: 5,
						iconKey: 'xiao1',
					},
					{
						name: '小 (2) 型',
						num: 0,
						key: 6,
						iconKey: 'xiao2',
					},
				],
				safeAndMaintain: [],
				stationData: [{
						sttp: '雨量站',
						count: 0,
						normalCount: 0,
						faultCount: 0,
						icon: 'bbsl-yuliang',
					},
					{
						sttp: '水库水位站',
						count: 0,
						normalCount: 0,
						faultCount: 0,
						icon: 'bbsl-shuiwen',
					},
					{
						sttp: '生态流量站',
						count: 0,
						normalCount: 0,
						faultCount: 0,
						icon: 'bbsl-shenliu',
					},
					{
						sttp: '渗压点',
						count: 0,
						normalCount: 0,
						faultCount: 0,
						icon: 'bbsl-shenya',
					},
					{
						sttp: '位移点',
						count: 0,
						normalCount: 0,
						faultCount: 0,
						icon: 'bbsl-weiyi',
					},
					{
						sttp: '视频站',
						count: 0,
						normalCount: 0,
						faultCount: 0,
						icon: 'bbsl-shipin',
					},
				],
				// 累计雨量
				rainfallData: [],
				rainfallData1: [{
						key: '1',
						name: '测站1',
						num: 50,
						total: 174,
						frist: 50,
					},
					{
						key: '2',
						name: '测站2',
						num: 42,
						total: 174,
						frist: 50,
					},
					{
						key: '3',
						name: '测站3',
						num: 37,
						total: 174,
						frist: 50,
					},
					{
						key: '4',
						name: '测站4',
						num: 29,
						total: 174,
						frist: 50,
					},
					{
						key: '5',
						name: '测站5',
						num: 16,
						total: 174,
						frist: 50,
					},
				],
				inspectionHeader: [{
						key: 'order',
						width: '14px',
						name: '',
					},
					{
						key: 'rsnm',
						width: 'calc(100% - 14px)',
						name: '已巡检水库',
					},
					// {
					//     key: 'incn',
					//     width: '30%',
					//     name: '内容',
					// },
					// {
					//     key: 'isNormal',
					//     width: '10%',
					//     name: '状态',
					// },
					// {
					//     key: 'insdt',
					//     width: 'calc(30% - 14px)',
					//     name: '巡检日期',
					// },
				],
				inspectionHeader1: [{
						key: 'order',
						width: '14px',
						name: '',
					},
					{
						key: 'rsnm',
						width: 'calc(100% - 14px)',
						name: '已巡检水库',
					},
					// {
					//     key: 'incn',
					//     width: '30%',
					//     name: '内容',
					// },
					// {
					//     key: 'isNormal',
					//     width: '10%',
					//     name: '状态',
					// },
					// {
					//     key: 'insdt',
					//     width: 'calc(30% - 14px)',
					//     name: '巡检日期',
					// },
				],
				inspectionHeader2: [{
						key: 'order',
						width: '14px',
						name: '',
					},
					{
						key: 'rsnm',
						width: 'calc(100% - 14px)',
						name: '未巡检水库',
					},
				],
				inspectionData: [],
				inspectionData1: [],
				inspectionData2: [],
				floodLimit: null,
				safeMaintain: [],
				// 超汛限 滚动表
				floodLimitHeader: [{
						key: 'order',
						width: '20%',
						name: '危险等级',
					},
					{
						key: 'rsnm',
						width: '20%',
						name: '水库',
					},
					{
						key: 'fsltdz',
						width: '15%',
						name: '预警阈值',
					},
					{
						key: 'rz',
						width: '15%',
						name: '当前水位',
					},

					{
						key: 'tm',
						width: 'calc(20% - 14px)',
						name: '时间',
					},
				],
				floodLimitData: [
					// {
					//     rsnm: '水库1',
					//     limit: 125,
					//     current: 128,
					//     differ: 3,
					//     time: '04-05 12:02:08',
					// },
				],
				inspectionPieChart: null,
				inspectionPieOption: null,
				inspectionPieData: [{
						value: 0,
						name: '已巡检',
					},
					{
						value: 0,
						name: '未巡检',
					},
				],
				problemPieData: [{
						value: 0,
						name: '已处理巡检问题',
					},
					{
						value: 0,
						name: '未处理巡检问题',
					},
				],
				instepTitle: '已巡检',
				problemTitle: '已处理巡检问题',
				problemPieChart: null,
				problemPieOption: null,
				problemHeader: [{
						key: 'order',
						width: '14px',
						name: '',
					},
					{
						key: 'rsnm',
						width: '20%',
						name: '水库',
					},
					{
						key: 'incn',
						width: '20%',
						name: '已处理问题',
					},
					{
						key: 'excUser',
						width: '20%',
						name: '处理人',
					},
					{
						key: 'excTime',
						width: '20%',
						name: '处理时间',
					},
					{
						key: 'createTime',
						width: 'calc(20% - 14px)',
						name: '巡检时间',
					},
				],
				problemData: [],
				hasInspectionReservoirs: [], //已巡检水库
				noInspectionReservoirs: [], //未巡检水库
				problemData1: [],
				problemData2: [],
				regionData: [],
				// 水位报警
				waterAlarm: [],
				// 雨量报警
				rainAlarm: [],
				//视频报警
				// TODO 模拟数据
				videoAlarm: {
					count: 0,
					name: '水库',
					list: [],
				},
			}
		},
		computed: {
			optionSingleHeightTime1() {
				return {
					singleHeight: 29,
					waitTime: 1000,
				}
			},
			optionSingleHeightTime2() {
				return {
					singleHeight: 29,
					waitTime: 2500,
				}
			},
		},
		mounted() {
			this.initMap()
			// 初始化临界水位
			// this.initFloodLimitBar()
			// 初始化巡检
			// this.initInspectionChart()
			// this.initProblemChart()
			this.$root.$on('resize', () => {
				this.resize(500)
			})
			// this.problemData = this.problemData1
		},
		created() {
			this.getResSituation() //水库概况
			// this.getResDetail()//水库详情
			this.getStationSituation() //测站概况
			// this.grtLatestIns() //最新巡检
			this.getRealTimeRainList() //实时雨情
			this.getRealTimeWaterList() //实时水情
			this.getSuperLimitedRank() //超汛限柱状图
			this.getInsResult() //当日巡检水库
			this.getInsQuestion() //当日巡检问题
			this.Warning()
			this.getSysDict() //水库名称下拉
			// this.grtStatistical() //当年巡检排名
			// this.getDayYlList()//日雨量累计排行
		},
		methods: {
			//获取字典数据
			getSysDict() {
				let portal = window.context.portal
				return new Promise((resolve, reject) => {
					req.post(
						portal + '/sys/sysDictionary/v1/queryAllDictItems'
					).then(
						(response) => {
							resolve(response.data)
							indexApi.getRsnm({}, (res) => {
								this.rsnms = res.value
								console.log(this.rsnms, '水库')
							})
						},
						(error) => {
							reject(error)
						}
					)
				})
			},
			showInput() {
				this.sqInput = !this.sqInput
			},
			// 地图搜索水库位置
			async inputskData(id) {
				console.log(id)
				if (id != '' && id != null && id != undefined) {
					console.log('执行了')
					let resReqVo = {
						rscd: id,
					}
					await digitalReservoir.resSituation(resReqVo, (res) => {
						if (res.state) {
							this.searchSituations = res.value
							this.reservoirTotal = res.value.resCount
							this.searchSituations.countVoList.forEach((e) => {
								for (
									let index = 0; index < this.SearchReservoirItemData.length; index++
								) {
									let i = this.SearchReservoirItemData[index]
									if (e.name == i.name) {
										i.num = e.count
										i.list = e.list
										this.handleMapMark(i, index + 1)
									}
								}
							})
						}
					})
				}
			},
			// 切换实时水情统计类型
			changeWaterType(key) {
				if (key == '') {
					let routeData = this.$router.resolve({
						path: '/bizPlat/monitor/sqMonitor/swStQuery',
					})
					window.open(routeData.href, '_blank')
				} else {
					this.getRealTimeWaterList()
				}
			},
			//打开报警弹框
			handlePopup(title, type, data, logo) {
				this.$nextTick(() => {
					this.$refs.stationsModel.open(title, type, data, logo)
				})
			},
			//水位 雨量
			Warning() {
				indexApi.swWarning((res) => {
					if (res.state) {
						this.waterAlarm = res.value
						this.waterAlarm.forEach((e) => {
							if (e.name == '水库') {
								this.waterAlarm = e
							}
						})
					}
				})
				indexApi.ylWarning((res) => {
					if (res.state) {
						this.rainAlarm = res.value
						this.rainAlarm.forEach((e) => {
							if (e.name == '水库') {
								this.rainAlarm = e
							}
						})
					}
				})
			},
			// 实时水情
			getRealTimeWaterList() {
				indexApi.realTimeWaterList(this.realtimeWaterType, (res) => {
					if (res.state) {
						this.realtimeWaterData = res.value
						// 预警等级
						let yjdjList = dictUtils.getDictItemsFromCache('yjdj')
						// 水势
						let ssList = dictUtils.getDictItemsFromCache('ss')
						this.realtimeWaterData.forEach((e) => {
							if (!e.tm) {
								e.tm = ''
							} else {
								e.tm = e.tm
									.replace('-', '/')
									.split('/')[1]
									.slice(0, 11)
									.replace('-', '/')
							}
							yjdjList.forEach((l) => {
								if (e.warnGrade == l.value) {
									e.warnGrade = l.name
								}
							})
							ssList.forEach((s) => {
								if ((e.rwptn = s.value)) {
									e.rwptn = s.name
								}
							})
						})
					}
				})
			},
			// 点击查询实时水情具体信息
			searchWaterData(val) {
				let address = val.stcd
				window.sessionStorage.setItem('StationId', address)
				window.sessionStorage.setItem('pages', 'first')
				let routeData = this.$router.resolve({
					path: '/bizPlat/monitor/sqMonitor/swStQuery',
				})
				window.open(routeData.href, '_blank')
			},
			//实时雨情
			getRealTimeRainList() {
				indexApi.realTimeRainList(this.realtimeRainType, (res) => {
					if (res.state) {
						this.realtimeRainData = res.value
						let yjdjList = dictUtils.getDictItemsFromCache('yjdj')
						let ssList = dictUtils.getDictItemsFromCache('ss')
						let warn = '警戒'
						let danger = '危险'
						this.realtimeRainData.forEach((e) => {
							if (!e.tm) {
								e.tm = ''
							} else {
								e.tm = e.tm
									.replace('-', '/')
									.split('/')[1]
									.slice(0, 11)
									.replace('-', '/')
							}
							yjdjList.forEach((l) => {
								if (e.warnGrade == l.value) {
									e.warnGrade = l.name
								}
							})
							ssList.forEach((s) => {
								if ((e.rwptn = s.value)) {
									e.rwptn = s.name
								}
							})
							e.thresholdData.forEach((a) => {
								if (warn == a.gradeName) {
									this.rainWarn = a.yjz
								}
								if (danger == a.gradeName) {
									this.rainDanger = a.yjz
								}
							})
						})
					}
				})
			},
			// 切换实时雨情统计类型
			changeRainType(key) {
				if (key == '') {
					let routeData = this.$router.resolve({
						path: '/bizPlat/monitor/sqMonitor/swStQuery',
					})
					window.open(routeData.href, '_blank')
				} else {
					this.getRealTimeRainList()
				}
			},
			// 点击查询实时水情具体信息
			searchRainData(val) {
				let address = val.stcd
				window.sessionStorage.setItem('StationId', address)
				let routeData = this.$router.resolve({
					path: '/bizPlat/monitor/resMonitor/ylStQuery',
				})
				window.open(routeData.href, '_blank')
			},
			//水库概况
			getResSituation() {
				let resReqVo = {
					rscd: '',
					time: '',
					waterId: '',
					year: 0,
				}
				digitalReservoir.resSituation(resReqVo, (res) => {
					if (res.state) {
						this.situations = res.value
						console.log(res.value)
						res.value.countVoList.forEach((e) => {
							this.reservoirItemData.forEach((i) => {
								if (e.name == i.name) {
									i.num = e.count
									i.list = e.list
								}
							})
						})
						this.reservoirTotal = res.value.resCount
						this.handleMapMark('', 0)
					}
				})
			},
			//测站概况
			getStationSituation() {
				// return
				digitalReservoir.stationSituation(this.params, (res) => {
					if (res.state) {
						res.value.forEach((e) => {
							this.stationData.forEach((s) => {
								if(s.sttp=='雨量站'){
									console.log(s);
								}else if (e.sttp == s.sttp) {
									s.count = e.count
									s.normalCount = e.normalCount
									s.faultCount = e.faultCount
								}
							})
						})
						this.stationData[0].count=this.stationData[1].count
						this.stationData[0].faultCount=this.stationData[1].faultCount
						this.stationData[0].normalCount=this.stationData[1].normalCount
					}
				})
			},
			// 点击查询超讯限具体信息
			searchReservoirData(val) {
				let address = val.stcd
				window.sessionStorage.setItem('StationId', address)
				window.sessionStorage.setItem('pages', 'first')
				let routeData = this.$router.resolve({
					path: '/bizPlat/monitor/sqMonitor/swStQuery',
				})
				window.open(routeData.href, '_blank')
			},
			//超汛限柱状图
			getSuperLimitedRank() {
				digitalReservoir.superLimitedRank((res) => {
					if (res.state) {
						this.floodLimitData = res.value[0].list
						let list = dictUtils.getDictItemsFromCache('yjdj')
						this.floodLimitData.forEach((e) => {
							if (!e.sendDate) {
								e.sendDate = ''
							} else {
								e.sendDate = e.sendDate
									.replace('-', '/')
									.split('/')[1]
									.slice(0, 11)
									.replace('-', '/')
							}
							list.forEach((l) => {
								if (e.warnGrade == l.value) {
									e.warnGradeName = l.name
								}
							})
						})
					}
				})
			},
			//当年巡检排名
			grtStatistical() {
				digitalReservoir.statistical(this.params, (res) => {
					if (res.state) {
						this.rainfallData = res.value
					}
				})
			},
			//最新巡检
			grtLatestIns() {
				digitalReservoir.latestIns(this.params, (res) => {
					if (res.state) {
						this.inspectionData1 = this.inspectionData = res.value
					}
				})
			},
			//日雨量累计排行
			getDayYlList() {
				digitalReservoir.dayYlList('', (res) => {
					if (res.state) {
						this.rainfallData1 = res.value
					}
				})
			},
			//当日巡检水库
			getInsResult() {
				let param = {
					insStatus: 0,
					rscd: '',
					time: '',
					waterId: '',
					year: 0,
				}
				digitalReservoir.insResult(param, (res) => {
					if (res.state) {
						res.value.forEach((e) => {
							if (e.insStatus == 1) {
								;
								(this.hasInspectionReservoirs = e.list ?
									e.list : []),
								(this.inspectionPieData[0].value = e.list ?
									e.list.length :
									0)
							} else {
								;
								(this.noInspectionReservoirs = e.list ?
									e.list : []),
								(this.inspectionPieData[1].value = e.list ?
									e.list.length :
									0)
							}
						})
						this.inspectionData = this.hasInspectionReservoirs
						this.$nextTick(() => {
							this.initInspectionChart()
						})
					}
				})
			},
			//当日巡检问题
			getInsQuestion() {
				let param = {
					insStatus: 0,
					rscd: '',
					time: '',
					waterId: '',
					year: 0,
				}
				digitalReservoir.insQuestion(param, (res) => {
					if (res.state) {
						res.value.forEach((e) => {
							if (e.insStatus == 1) {
								this.problemData1 = e.list ? e.list : []
								this.problemPieData[0].value = e.list ?
									e.list.length :
									0
							} else {
								this.problemData2 = e.list ? e.list : []
								this.problemPieData[1].value = e.list ?
									e.list.length :
									0
							}
						})
						this.problemData = this.problemData1
						this.$nextTick(() => {
							this.initProblemChart()
						})
					}
				})
			},

			handleStation(title, type, data) {
				let czlbList = dictUtils.getDictItemsFromCache('tj-czlb')
				czlbList.forEach((e) => {
					if (e.name == title) {
						data.sttp = e.value
					}
				})
				this.$refs.stationsModel.open(title, type, data)
			},
			resize(delay) {
				// 动态计算表格的高度，自适应当前容器
				setTimeout(() => {
					this.floodLimit.resize()
					this.myChart.resize()
					this.inspectionPieChart.resize()
					this.problemPieChart.resize()
				}, delay || 0)
			},
			initFloodLimitBar() {
				const floodLimitDom = document.getElementById('flood-limit')
				this.floodLimit = echarts.init(floodLimitDom)
				let option = {
					legend: {
						left: 5,
						bottom: 5,
						textStyle: {
							color: '#adb9ba',
							fontSize: 10,
						},
						itemWidth: 10,
						itemHeight: 10,
					},
					tooltip: {
						trigger: 'axis',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
					},
					grid: {
						top: 30,
						right: '2%',
						bottom: 50,
					},
					dataset: {
						source: [
							['product', '汛限水位'],
							['xxx水库1', 307, 85.8],
							['xxX水库2', 256, 73.4],
							['xxx水库3', 335, 86.4],
							['xxx水库4', 389, 53.9],
							['xxx水库5', 298, 66.9],
						],
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff',
							},
						},
					},
					yAxis: {
						axisLine: {
							show: true,
						},
						splitLine: {
							show: false,
						},
						scale: true,
					},
					series: [{
						type: 'bar',
						showBackground: true,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
										offset: 0,
										color: '#6767ff',
									},
									{
										offset: 0.5,
										color: '#6767ff',
									},
									{
										offset: 1,
										color: '#bcbcf8',
									},
								]
							),
							barBorderRadius: [40, 40, 0, 0],
						},
						barWidth: 14,
					}, ],
				}
				option && this.floodLimit.setOption(option)
			},
			initMap() {
				this.myChart = echarts.init(
					document.getElementById('map-container')
				)

				// 注册 echarts 地图
				echarts.registerMap('beibei', towns)
				var markPointData = []
				this.option = {
					visualMap: {
						show: false,
						min: 0,
						max: 300,
						inRange: {
							color: ['#e0ffff', '#006edd'],
						},
						calculable: true,
					},
					geo: {
						type: 'map',
						map: 'beibei',
						roam: true,
						label: {
							//地图显示的地点名
							show: true,
							color: '#fff',
							fontSize: 10,
						},
						itemStyle: {
							areaColor: '#188df0', //地图区域的颜色(没有数据时会按照这个颜色显示)
							borderColor: '#d2d2d3', //地图区域的边框
							borderWidth: 1,
							// shadowOffsetX: 0,
							// shadowOffsetY: 10,
							// shadowColor: '#043b68',
						},
						emphasis: {
							disabled: true,
							//高亮的显示设置
							label: {
								color: '#fff',
							},
							itemStyle: {
								areaColor: '#f69502',
								opacity: 1,
							},
						},
						// emphasis: {
						//     disabled: true,
						// },
						tooltip: {
							show: false,
						},
						select: {
							disabled: true,
						},
						layoutCenter: ['50%', '50%'],
						layoutSize: '105%',
						regions: [{
								name: '柳荫镇',
								itemStyle: {
									areaColor: '#087bda',
								},
							},
							{
								name: '水土街道',
								itemStyle: {
									areaColor: '#087bda',
								},
							},
							{
								name: '天生街道',
								itemStyle: {
									areaColor: '#087bda',
								},
							},
							{
								name: '歇马街道',
								itemStyle: {
									areaColor: '#087bda',
								},
							},
							{
								name: '东阳街道',
								itemStyle: {
									areaColor: '#087bda',
								},
							},
							{
								name: '童家溪镇',
								itemStyle: {
									areaColor: '#087bda',
								},
							},
							{
								name: '北温泉街道',
								itemStyle: {
									areaColor: '#4caaf7',
								},
							},
							{
								name: '静观镇',
								itemStyle: {
									areaColor: '#4caaf7',
								},
							},
							{
								name: '蔡家岗街道',
								itemStyle: {
									areaColor: '#4caaf7',
								},
							},
						],
					},
					tooltip: {
						trigger: 'item',
					},
					series: [{
						type: 'scatter',
						symbol: (value, params) => {
							let iconKey = value[2]
							return (
								'image://' +
								require(`@/assets/img/dw_${iconKey}.png`)
							)
						},
						coordinateSystem: 'geo',
						symbolSize: [30, 30],
						data: markPointData,
						zlevel: 1,
						itemStyle: {
							opacity: 1,
						},
						tooltip: {
							show: true,
							backgroundColor: 'rgba(0,0,0,0.7)',
							textStyle: {
								color: '#dddee0',
							},
							formatter: (params, ticket, callback) => {
								let text = params.data[3]
								// $.get(
								//     'detail?name=' + params.name,
								//     function (content) {
								//         callback(ticket, toHTML(content))
								//     }
								// )
								return text
							},
						},
					}, ],
				}
				this.myChart.setOption(this.option)
				this.myChart.on('click', (params) => {
					// return
					let key = params.value[3]
					let rscd = params.value[4]
					// if (params.componentType == 'title') {
					//     this.changePieDetail('all')
					// } else if (params.componentType == 'series') {
					//     this.changePieDetail(params.data.key)
					// }
					this.$router.push({
						path: '/frontPlat/digitalReservoir/' + key,
						query: {
							rscd: rscd,
							rsnm: key,
						},
					})
				})
			},
			handleMapMark(item, index) {
				console.log(item, index)
				let iconKey
				let markPointData = []
				if (index == 0) {
					this.currentPoint = 0
					iconKey = 'all'
					this.reservoirItemData.forEach((r) => {
						if (r.list) {
							iconKey = r.iconKey
							r.list.forEach((e) => {
								markPointData.push([
									e.eslg,
									e.nrlt,
									iconKey,
									e.rsnm,
									e.rscd,
								])
							})
						}
					})
				} else {
					this.currentPoint = index
					iconKey = item.iconKey
					if (item.list) {
						item.list.forEach((e) => {
							markPointData.push([
								e.eslg,
								e.nrlt,
								iconKey,
								e.rsnm,
								e.rscd,
							])
						})
					}
				}
				// markPointData = [
				// 	[106.386126, 29.791592, iconKey, '水库1'],
				// 	[106.51321, 29.820836, iconKey, '水库2'],
				// 	[106.486126, 29.801592, iconKey, '水库3'],
				// 	[106.561321, 29.870836, iconKey, '水库4'],
				// ]
				this.option.series[0].data = markPointData
				this.myChart.setOption(this.option)
			},
			initInspectionChart() {
				const inspectionDom = document.getElementById('inspectionChart')
				this.inspectionPieChart = echarts.init(inspectionDom)
				this.inspectionPieOption = {
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c}个 ({d}%)',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
					},
					legend: {
						bottom: 10,
						textStyle: {
							color: '#adb9ba',
						},
						icon: 'circle',
						itemWidth: 10,
						itemHeight: 10,
					},
					series: [{
							name: '巡检水库',
							type: 'pie',
							// radius: '50%',
							radius: ['46%', '66%'],
							center: ['50%', '50%'],
							label: {
								color: '#f5f5f5',
							},
							labelLine: {
								lineStyle: {
									color: 'rgba(255, 255, 255, 0.3)',
								},
								smooth: 0.2,
								length: 2,
								length2: 6,
							},
							itemStyle: {
								normal: {
									color: function(params) {
										//自定义颜色
										var colorList = ['#4caaf7', '#ee6666']
										return colorList[params.dataIndex]
									},
								},
							},
							data: this.inspectionPieData,
						},
						// {
						//     name: '巡检问题',
						//     type: 'pie',
						//     radius: '50%',
						//     center: ['75%', '50%'],
						//     roseType: 'radius',
						//     label: {
						//         color: '#f5f5f5',
						//     },
						//     labelLine: {
						//         lineStyle: {
						//             color: 'rgba(255, 255, 255, 0.3)',
						//         },
						//         smooth: 0.2,
						//         length: 2,
						//         length2: 6,
						//     },
						//     itemStyle: {
						//         normal: {
						//             color: function (params) {
						//                 //自定义颜色
						//                 var colorList = ['#91cc75', '#ee6666']
						//                 return colorList[params.dataIndex]
						//             },
						//         },
						//     },
						//     data: this.problemPieData,
						// },
					],
				}
				this.inspectionPieChart.setOption(this.inspectionPieOption)
				this.inspectionPieChart.on('click', (params) => {
					if (params.seriesName == '巡检水库') {
						if (this.instepTitle == params.name) {
							return
						} else {
							this.instepTitle = params.name
							if (params.name == '已巡检') {
								this.inspectionHeader = this.inspectionHeader1
								this.inspectionData = this.hasInspectionReservoirs
							} else {
								this.inspectionHeader = this.inspectionHeader2
								this.inspectionData = this.noInspectionReservoirs
							}
						}
					} else if (params.seriesName == '巡检问题') {
						if (this.problemTitle == params.name) {
							return
						} else {
							this.problemTitle = params.name
							if (params.name == '已处理巡检问题') {
								this.problemData = this.problemData1
							} else {
								this.problemData = this.problemData2
							}
						}
					}
				})
			},
			initProblemChart() {
				const problemDom = document.getElementById('problemChart')
				this.problemPieChart = echarts.init(problemDom)
				this.problemPieOption = {
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c}个 ({d}%)',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
					},
					legend: {
						bottom: 0,
						textStyle: {
							color: '#adb9ba',
						},
						icon: 'circle',
						itemWidth: 10,
						itemHeight: 10,
					},
					series: [{
						name: '巡检问题',
						type: 'pie',
						radius: ['46%', '66%'],
						center: ['50%', '45%'],
						label: {
							color: '#f5f5f5',
						},
						labelLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.3)',
							},
							smooth: 0.2,
							length: 2,
							length2: 6,
						},
						itemStyle: {
							normal: {
								color: function(params) {
									//自定义颜色
									var colorList = ['#91cc75', '#ee6666']
									return colorList[params.dataIndex]
								},
							},
						},
						data: this.problemPieData,
					}, ],
				}
				this.problemPieChart.setOption(this.problemPieOption)
				this.problemPieChart.on('click', (params) => {
					if (params.seriesName == '巡检问题') {
						if (this.problemTitle == params.name) {
							return
						} else {
							if (this.problemTitle == params.name) {
								return
							} else {
								this.problemTitle = params.name
								if (params.name == '已处理巡检问题') {
									this.problemData = this.problemData1
									this.problemHeader = []
									let col = [{
											key: 'order',
											width: '14px',
											name: '',
										},
										{
											key: 'rsnm',
											width: '20%',
											name: '水库',
										},
										{
											key: 'incn',
											width: '20%',
											name: '已处理问题',
										},
										{
											key: 'excUser',
											width: '20%',
											name: '处理人',
										},
										{
											key: 'excTime',
											width: '20%',
											name: '处理时间',
										},
										{
											key: 'createTime',
											width: 'calc(20% - 14px)',
											name: '巡检时间',
										},
									]
									this.problemHeader = col
								} else {
									let col = [{
											key: 'order',
											width: '14px',
											name: '',
										},
										{
											key: 'rsnm',
											width: '25%',
											name: '水库',
										},
										{
											key: 'structure',
											width: '23%',
											name: '位置',
										},
										{
											key: 'incc',
											width: '20%',
											name: '巡检结论',
										},
										{
											key: 'insdt',
											width: 'calc(30% - 14px)',
											name: '巡检时间',
										},
									]
									this.problemData = this.problemData2
									this.problemHeader = col
								}
							}
						}
					}
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import './css/screen.scss';

	/deep/ .el-button {
		width: 70px;
		height: 30px;
		border: 0;
		background-color: transparent;
		font-size: 12px;
		background-image: url('../../assets/img/safe-maintain.png') !important;
		background-size: 100% 100%;
		background-position: center center;
		text-align: center;
		color: #a7e7f0;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: 10px;
	}

	/deep/.el-button:hover,
	.el-button:focus {
		background-image: url('../../assets/img/safe-maintain-light.png') !important;
		color: #ffdfc6;
	}

	.bg-container {
		overflow: hidden;
		height: 100%;
		width: 100%;
		background: #060f18; //#ebeef5;
		box-sizing: border-box;
		padding: 0 20px;
		// background-image: url('./../assets/img/waterbg5.jpg');
		background-image: url('../../assets/img/app-bg.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #fff;
		display: flex;
		color: #043b68;
	}

	.inspect-container {
		display: flex;
		align-items: center;
	}

	.alarm-item {
		// width: 33.33%;
		width: 80px;
		cursor: pointer;

		.icon {
			text-align: center;
			color: #4885d5;
		}

		i {
			font-size: 40px;
		}

		.title {
			font-weight: 700;
			letter-spacing: 1px;
			height: 18px;
			line-height: 18px;
			margin: auto;
			margin-top: 10px;
			margin-bottom: 0.1rem;
			text-align: center;
			color: #badeff;
			background: linear-gradient(to right, transparent, #0574d4, transparent);
			font-size: 16px;
			text-shadow: 1px 1px 2px rgb(58, 58, 58);
		}

		.num {
			font-size: 20px;
			text-align: center;
			color: #fff;
			margin-top: 10px;
			font-family: 'electronicFont';
		}
	}

	.alarm-item {
		// cursor: pointer;

		.num {
			color: #ff9a00;
			width: 60%;
			margin: 0 auto;
			height: 60px;
			background: url('../../assets/img/alarm_icon.png');
			background-size: 100% 100%;
			font-size: 30px;
			font-weight: 700;
			text-align: center;
			line-height: 60px;
			font-family: 'electronicFont';
		}
	}

	.alarm .alarm-item.active,
	.alarm .alarm-item:hover {
		transform: scale(1.1);

		.icon {
			color: #e7a74d;
		}

		.title {
			color: #ffce5a;
			background: linear-gradient(to right,
					transparent,
					rgba(255, 192, 0, 0.45),
					transparent);
			text-shadow: 1px 1px 2px rgb(58, 58, 58);
		}

		.num {
			color: #ff9a00;
			width: 60%;
			margin: 0 auto;
			height: 60px;
			background: url('../../assets/img/alarm_icon_active.png');
			background-size: 100% 100%;
			font-size: 30px;
			font-weight: 700;
			text-align: center;
			line-height: 60px;
		}
	}

	#inspectionChart {
		width: 49.3%;
		height: 100%;
	}

	#inspectionTable {
		width: 45.8%;
		height: 100%;
		overflow: auto;
	}

	#problemChart {
		width: 100%;
		height: 40%;
	}

	#problemTable {
		width: 100%;
		height: calc(60% - 30px);
		overflow: auto;
	}

	.left-section {
		width: 30%;
		height: 100%;
	}

	.center-section {
		width: calc(40% - 20px);
		height: 100%;
		margin: 0 10px;
		color: #d2d2d3;
		position: relative;

		.pop-modal {
			position: absolute;
			right: 0;
			top: 10px;

			.safe-maintain-item:hover {
				background-image: url('../../assets/img/safe-maintain-light.png');
				color: #ffdfc6;
			}

			.safe-maintain-item-active {
				width: 70px;
				height: 30px;
				background-image: url('../../assets/img/safe-maintain-light.png');
				color: #ffdfc6;
				background-size: 100% 100%;
				background-position: center center;
				text-align: center;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-left: 10px;

				.num {
					font-size: 22px;
					font-family: 'electronicFont';
					margin-bottom: 4px;

					span {
						font-size: 12px;
						margin-left: -6px;
					}
				}

				.name {
					font-size: 14px;
					font-weight: 700;
				}
			}

			.safe-maintain-item {
				width: 70px;
				height: 30px;
				background-image: url('../../assets/img/safe-maintain.png');
				color: #a7e7f0;
				background-size: 100% 100%;
				background-position: center center;
				text-align: center;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-left: 10px;

				.num {
					font-size: 22px;
					font-family: 'electronicFont';
					margin-bottom: 4px;

					span {
						font-size: 12px;
						margin-left: -6px;
					}
				}

				.name {
					font-size: 14px;
					font-weight: 700;
				}
			}
		}

		.safe-maintain {
			position: absolute;
			left: 10px;
			top: 40px;
			z-index: 99;
		}
	}

	.right-section {
		width: 30%;
		height: 100%;
	}

	.right-section1 {
		height: calc(32% - 10px);
		margin-top: 10px;
		font-weight: bold;
		color: #fff;
		position: relative;
	}

	.right-section2 {
		height: calc(38% - 10px);
		margin-top: 10px;
		font-weight: bold;
		color: #fff;
		position: relative;
	}

	#map-container {
		width: 100%;
		height: 100%;
	}

	.left-section1,
	.left-section3 {
		height: calc(32% - 10px);
		margin-top: 10px;
		font-weight: bold;
		color: #fff;
		position: relative;
	}

	.right-section3 {
		height: calc(30% - 10px);
		margin-top: 10px;
		font-weight: bold;
		color: #fff;
		position: relative;
	}

	.left-section3 {
		height: calc(34% - 10px);
		margin-bottom: 10px;
		// display: flex;
	}

	.left-section3-1,
	.left-section3-2 {
		width: 60%;
		height: 100%;
	}

	.left-section3-2 {
		width: calc(40% - 10px);
		margin-left: 10px;
	}

	.left-section1 {
		.total-pop {
			width: 160px;
			height: 160px;
			background: url(../../assets/img/circle-bg2.png) 0% 0% / 100% 100%;
			text-align: center;
			line-height: 170px;
			font-size: 50px;
			color: #a7e7f0;
			font-family: 'electronicFont';
			animation: scale 3s ease-in-out infinite;
			cursor: pointer;
		}

		.reservoir-item-con {
			width: calc(50% - 80px);
			height: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		.reservoir-item {
			width: 50%;
			height: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.reservoir-item-bg {
			width: 100px;
			height: 100px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			position: relative;
		}

		.reservoir-item-bg-circle {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			animation: circle 30s linear infinite;
		}

		.reservoir-item-num {
			font-family: 'electronicFont';
			text-align: center;
			font-size: 18px;
		}

		.reservoir-item-name {
			text-align: center;
			font-size: 12px;
			font-weight: normal;
		}

		.reservoir-item:nth-of-type(1) .reservoir-item-bg-circle {
			background: url(../../assets/img/circle-bg1.png) 0% 0% / 100% 100%;
			color: #82c5ff;
		}

		.reservoir-item:nth-of-type(2) .reservoir-item-bg-circle {
			background: url(../../assets/img/circle-bg1.png) 0% 0% / 100% 100%;
			color: #82e0ff;
			animation-delay: 0.3s;
		}

		.reservoir-item:nth-of-type(3) .reservoir-item-bg-circle {
			background: url(../../assets/img/circle-bg1.png) 0% 0% / 100% 100%;
			color: #cab8ff;
			animation-delay: 0.2s;
		}

		.reservoir-item:nth-of-type(4) .reservoir-item-bg-circle {
			background: url(../../assets/img/circle-bg1.png) 0% 0% / 100% 100%;
			color: #b8ffdc;
			animation-delay: 0.5s;
		}

		.reservoir-item:hover .reservoir-item-bg-circle,
		.reservoir-item.active .reservoir-item-bg-circle,
		.total-pop.active {
			background: url(../../assets/img/circle-bg5.png) 0% 0% / 100% 100%;
			color: #ffdfc6;
		}
	}

	@keyframes scale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.8);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes circle {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	#flood-limit {
		width: 100%;
		height: 100%;
		color: #a9f8fc;
	}

	.safe-maintain {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.safe-maintain-item {
		width: 120px;
		height: 70px;
		background-image: url('../../assets/img/safe-maintain.png');
		background-size: 100% 100%;
		background-position: center center;
		text-align: center;
		color: #a7e7f0;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: 10px;

		.num {
			font-size: 22px;
			font-family: 'electronicFont';
			margin-bottom: 4px;

			span {
				font-size: 12px;
				margin-left: -6px;
			}
		}

		.name {
			font-size: 14px;
			font-weight: 700;
		}
	}

	.safe-maintain-item:hover {
		background-image: url('../../assets/img/safe-maintain-light.png');
		color: #ffdfc6;
	}

	.safe-maintain-item.ad {
		width: 80px;
		height: 46px;
	}

	#inspectionTable {
		.scroll-table-column {
			border-bottom: 1px solid transparent;
		}

		.scroll-table-header.done {
			background: rgba(#53bbff, 0.8);
		}

		.scroll-table-header.undone {
			background: rgba(#ee6666, 0.8);
		}

		.scroll-table-column:nth-of-type(2n) {
			background-color: rgba(0, 132, 251, 0.1);
		}
	}

	.scroll-table-header1 {
		width: 50%;
	}

	.scroll-table-header1.done {
		background: rgba(#53bbff, 0.8);
	}

	.scroll-table-header1.undone {
		background: rgba(#ee6666, 0.8);
	}

	.eq-item-con {
		padding: 10px 5px !important;
	}
</style>
<style>
	.el-popover.monitor-yt-popover {
		background-color: #13314e;
		border-color: #146ebd;
		position: absolute;
		width: 250px !important;
		height: 30px;
		padding: 0%;
	}

	.el-input--mini .el-input__inner {
		/* background-color: #090d29; */
		border: 0;
		color: cornflowerblue;
		background-color: #13314e;
		height: 30px;
	}

	.el-select-dropdown__item {
		color: cornflowerblue;
		border: 0;
	}

	.el-select-dropdown__list {
		border-color: #146ebd;
		background-color: #090d29;
	}

	.el-select-dropdown__item.selected {
		background-color: #1d2a86;
	}

	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: #1d2a86;
	}
</style>
