<template>
	<div class="index-container">
		<div class="top-container">
			<!-- <div class="section-con top-left">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">政区基础概况</span>
				</div>
				<div class="flex top-left-content">
					<div v-for="item in regionData" :key="item.count" class="alarm-item">
						<div class="icon">
							<i class="bbsl-iconfont" :class="item.icon"></i>
						</div>
						<div class="title">{{ item.typeName }}</div>
						<div class="num">{{ item.count }}</div>
					</div>
				</div>
			</div> -->
			<div class="section-con top-center1">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">水位报警</span>
				</div>
				<div class="flex top-left-content alarm">
					<div v-for="item in waterAlarm" :key="item.name" class="alarm-item" @click="
            handlePopup(
              `水位-${item.name}报警`,
              `water`,
              {
                type: 'waterAlarm',
                tableData: item.list,
              },
              'Alarm'
            )
          ">
						<div class="num">{{ item.count }}</div>
						<div class="title">{{ item.name }}</div>
					</div>
					<audio id="audio" src="../../assets/music/alert.mp3" ref="audio"></audio>
					<!-- <button @click="btnMp"></button> -->
				</div>
			</div>
			<div class="section-con top-center2">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">雨量报警</span>
				</div>
				<div class="flex top-left-content alarm">
					<div v-for="item in rainAlarm" :key="item.name" class="alarm-item" @click="
            handlePopup(
              `雨量-${item.name}报警`,
              'rain',
              {
                type: 'rainAlarm',
                tableData: item.list,
              },
              'Alarm'
            )
          ">
						<div class="num">{{ item.count }}</div>
						<div class="title">{{ item.name }}</div>
					</div>
				</div>
			</div>
			<div class="section-con top-center3">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">视频报警</span>
				</div>
				<div class="flex top-left-content alarm">
					<div v-for="item in videoAlarm" :key="item.name" class="alarm-item" @click="
            handlePopup(
              `视频-${item.name}报警`,
              `water`,
              {
                type: 'videoAlarm',
                tableData: item.list,
              },
              'Alarm'
            )
          ">
						<div class="num">{{ item.count }}</div>
						<div class="title">{{ item.name }}</div>
					</div>
					<audio id="audio" src="../../assets/music/alert.mp3" ref="audio"></audio>
					<!-- <button @click="btnMp"></button> -->
				</div>
			</div>
			<div class="section-con top-right">
				<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="total-failure">
						<div id="totalFailure" class="full"></div>
					</div>
					<div class="type-failure">
						<i class="icon el-icon-d-arrow-left" v-if="!showType" @click="handleBack"></i>
						<div v-if="showType" class="flex full">
							<template v-for="(item, index) in this.stationList.appTypeList">
								<div :id="'myChart' + index" :key="index" class="type-failure-inner"></div>
							</template>
							<!-- <div id="typeFailure1" class="type-failure-inner"></div>
							<div id="typeFailure2" class="type-failure-inner"></div>
							<div id="typeFailure3" class="type-failure-inner"></div> -->
						</div>
						<div id="stationFailure" class="full" v-else></div>
					</div>
				</div>
			</div>
		</div>
		<div class="center-container">
			<div class="section-con bottom-con2">
				<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="types.key" v-for="types in rainfallTypeList" class="type-btn-item"
						:class="rainfallType == types.key ? 'active' : ''" @click="changeRainfallType(types.key)">
						{{ types.name }}
					</span>
				</div>
				<div class="col-flex full full-out-header padding rain-fall">
					<div class="bar-item order-type" v-for="(item, index) in rainfallData" :key="item.key">
						<span class="order">{{ index + 1 }}</span>
						<span class="name ellipsis"> {{ item.name }}</span>
						<div class="icon-num" v-if="
              item.dailyPrecipitation / rainfallData[0].dailyPrecipitation
            " :style="{
              width:
                (item.dailyPrecipitation /
                  rainfallData[0].dailyPrecipitation) *
                  100 +
                '%',
            }">
							<!-- {{item.dailyPrecipitation / rainfallData[0].dailyPrecipitation}} -->
							<div class="icon-num-inner"></div>
						</div>
						<div class="icon-num" v-else :style="{
              width: '0%',
            }">
							<div class="icon-num-inner"></div>
						</div>
						<span class="num">{{ item.dailyPrecipitation }}</span>
					</div>
				</div>
				<div class="explain">降雨量单位：mm</div>
			</div>
			<div class="section-con bottom-con3">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" />
					<span class="section-title">实时水情<i class="el-icon-search" style="margin-left: 10px"
							@click="sqInputs()"></i>
						<el-input v-if="this.sqInput" style="width: 30%; margin-left: 10px" clearable v-model="value1"
							v-on:input="inputSqData()" placeholder="请输入测站名称" size="mini"></el-input>
					</span>
				</div>
				<div class="type-btn-group">
					<span :key="ee.key" v-for="ee in WaterTypeList" class="type-btn-item"
						:class="realtimeWaterType.appType == ee.key ? 'active' : ''" @click="changeWaterType(ee.key)">{{ ee.name
            }}</span>
				</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 realtimeWaterHeader" :key="column.key" style="text-align: center"
              :style="{ width: column.width }">
              {{ column.name }}
            </div> -->
						<div class="header-item" style="text-align: center; width: 14px"></div>
						<div class="header-item" style="text-align: center; width: 20%">
							测站
						</div>
						<div class="header-item" style="text-align: center; width: 12%">
							当前水位
						</div>

						<div class="header-item" style="text-align: center; width: 16%"
							v-if="realtimeWaterType.appType != 2">
							警戒水位
						</div>
						<div class="header-item" style="text-align: center; width: 16%"
							v-if="realtimeWaterType.appType != 2">
							保证水位
						</div>
						<div class="header-item" style="text-align: center; width: 16%"
							v-if="realtimeWaterType.appType == 2">
							正常水位
						</div>
						<div class="header-item" style="text-align: center; width: 16%"
							v-if="realtimeWaterType.appType == 2">
							设计洪水位
						</div>
						<div class="header-item" style="text-align: center; width: 12%">
							超限
						</div>
						<div class="header-item" style="text-align: center; width: calc(20% - 14px)">
							时间
						</div>
					</div>
					<div class="scroll-table-body solid" style="cursor: pointer">
						<!-- <vue-seamless-scroll
			            class="scroll-table-body"
			            :data="realtimeRainData"
			            :class-option="optionSingleHeightTime"
			        > -->

						<div class="scroll-table-column" v-for="column in realtimeWaterData" :key="column.key"
							@click="searchWaterData(column)">
							<div class="column-item" style="width: 14px">
								<span class="column-item-icon"></span>
							</div>
							<div class="column-item ellipsis" style="width: 20%; text-align: center"
								:title="column.stnm" :class="{'columnActive':column.transfinite>0}">
								{{ column.stnm }}
							</div>
							<div class="column-item ellipsis" style="width: 12%; text-align: center" :title="column.rz"
								:class="{'columnActive':column.transfinite>0}">
								{{ 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: 16%; text-align: center"
								:title="column.nrstlv" :class="{'columnActive':column.transfinite>0}">
								{{ column.nrstlv }}
							</div>
							<div class="column-item ellipsis" style="width: 16%; text-align: center"
								:title="column.dsfllv" :class="{'columnActive':column.transfinite>0}">
								{{ 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: 12%; text-align: center"
								:class="{'columnActive':column.transfinite>0}">
								{{column.transfinite}}
							</div>
							<div class="column-item ellipsis" style="width: calc(20% - 14px); text-align: center"
								:title="column.tm" :class="{'columnActive':column.transfinite>0}">
								{{ column.tm }}
							</div>
						</div>

						<!-- </vue-seamless-scroll> -->
					</div>
				</div>
			</div>
			<div class="section-con bottom-con3">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">1小时实时雨情<i class="el-icon-search" style="margin-left: 10px"
							@click="yqInputs()"></i>
						<el-input v-if="this.yqInput" style="width: 30%; margin-left: 10px" clearable v-model="value2"
							v-on:input="inputYqData()" placeholder="请输入测站名称" size="mini"></el-input>
					</span>
				</div>
				<div class="type-btn-group">
					<span :key="ee.key" v-for="ee in rainTypeList" class="type-btn-item"
						:class="realtimeRainType.appType == ee.key ? 'active' : ''" @click="changeRainType(ee.key)">{{ ee.name
            }}</span>
				</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 class="header-item" style="text-align: center; width: 14px"></div>
						<div class="header-item" style="text-align: center; width: 20%">
							测站
						</div>
						<div class="header-item" style="text-align: center; width: 12%">
							当前雨量
						</div>
						<div class="header-item" style="text-align: center; width: 16%"
							v-if="realtimeRainType.appType != 2">
							警戒阈值
						</div>
						<div class="header-item" style="text-align: center; width: 16%"
							v-if="realtimeRainType.appType != 2">
							保证阈值
						</div>
						<div class="header-item" style="text-align: center; width: 16%"
							v-if="realtimeRainType.appType == 2">
							警戒阈值
						</div>
						<div class="header-item" style="text-align: center; width: 16%"
							v-if="realtimeRainType.appType == 2">
							危险阈值
						</div>
						<div class="header-item" style="text-align: center; width: calc(20% - 14px)">
							时间
						</div>
					</div>
					<div class="scroll-table-body solid" style="cursor: pointer">
						<!-- <vue-seamless-scroll
			            class="scroll-table-body"
			            :data="realtimeRainData"
			            :class-option="optionSingleHeightTime"
			        > -->
						<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: 25%; text-align: center"
								:title="column.stnm">
								{{ column.stnm }}
							</div>
							<!-- <div class="column-item ellipsis"
                   style="width: 14%;text-align: center;"
                   :title="column.rz">
                {{ column.rz }}
              </div> -->

							<div class="column-item ellipsis" style="width: 16%; text-align: center"
								:title="column.dyp">
								{{ column.p1 }}
							</div>
							<div class="column-item ellipsis" style="width: 16%; text-align: center"
								:title="column.yjz1">
								<!-- {{ column.thresholdData[0]?column.thresholdData[0].yjz:'' }} -->
								{{ rainWarn }}
							</div>
							<div class="column-item ellipsis" style="width: 16%; text-align: center"
								:title="column.yjz2">
								<!-- {{ column.thresholdData[1]?column.thresholdData[1].yjz:'' }} -->
								{{ rainDanger }}
							</div>
							<div class="column-item ellipsis" style="width: calc(20% - 14px); text-align: center"
								:title="column.tm">
								{{ column.tm }}
							</div>
						</div>
						<!-- </vue-seamless-scroll> -->
					</div>
				</div>
			</div>
			<!-- <div class="section-con center-con2">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">临界水位排行</span>
				</div>
				<div class="type-btn-group">
					<span :class="criticalType == 0 ? 'active' : ''" @click="changeCriticalType(0)"
						class="type-btn-item">河道</span>
					<span :class="criticalType == 1 ? 'active' : ''" @click="changeCriticalType(1)"
						class="type-btn-item">水库</span>

				</div>
				<div class="full full-out-header">
					<div id="criticalWaterLevel"></div>
				</div>
				<div class="explain">临界水位单位：mm</div>
			</div> -->
		</div>
		<div class="bottom-container">
			<div class="section-con center-con1">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">工程概况</span>
				</div>
				<div class="col-flex full full-out-header">
					<div id="pie-container"></div>
					<div class="col-flex project-container">
						<div>{{ projectItemTitle }}工程</div>
						<div class="bar-item" v-for="item in this.projectList" :key="item.name">
							<span class="name">{{ item.typeName }}</span>
							<div class="icon-num">
								<div class="icon-num-inner" :style="{
                  width: (item.count / projectTotal) * 100 + '%',
                }"></div>
							</div>
							<span class="num">{{ item.count }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="section-con center-con3">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">当年取水量统计</span>
				</div>
				<div class="full full-out-header">
					<div id="fetchWater" class="full"></div>
				</div>
				<div class="explain">取水量单位：万m³</div>
			</div>
			<div class="section-con bottom-con1">
				<div>
					<img class="section-title-img" src="../../assets/img/title_icon.png" /><span
						class="section-title">生态流量
						<i class="el-icon-search" style="margin-left: 10px" @click="StInputs()"></i>
						<el-input v-if="this.stInput" style="width: 30%; margin-left: 10px" clearable v-model="value3"
							v-on:input="inputStData()" placeholder="请输入测站名称" size="mini"></el-input>
					</span>
				</div>
				<div class="type-btn-group">
					<span :key="ee.key" v-for="ee in sstpList" class="type-btn-item"
						:class="sstpListType.sstp == ee.value ? 'active' : ''" @click="changesstpListType(ee.value)">
						{{ ee.name }}</span>
				</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 ecologicalFlowHeader" :key="column.key"
							style="text-align: center" :style="{width: column.width}">
							{{ column.name }}
						</div>
					</div>
					<vue-seamless-scroll class="scroll-table-body" :data="flowList"
						:class-option="optionSingleHeightTime">
						<div class="scroll-table-column" v-for="column in flowList" @click="searchSstpData(column)"
							:key="column.id" 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%; text-align: center"
								:title="column.stnm">
								{{ column.stnm }}
							</div>
							<div class="column-item ellipsis" style="width: 10%; text-align: center" :title="column.z">
								{{ column.z }}
							</div>
							<div class="column-item ellipsis" style="width: 10%; text-align: center" :title="column.q">
								{{ column.q }}
							</div>
							<div class="column-item ellipsis" style="width: 10%; text-align: center"
								:title="column.fsltdz">
								{{ column.fsltdz }}
							</div>
							<div class="column-item ellipsis" style="width: calc(20% - 14px)" :title="column.tm">
								{{ column.tm }}
							</div>
						</div>
					</vue-seamless-scroll>
				</div>
			</div>
		</div>
		<stations-model ref="stationsModel" @noMusic="noMusic" @Warning="Warning"></stations-model>
		<stationsDetails ref="stationsForm"></stationsDetails>
	</div>
</template>
<script>
	import * as echarts from 'echarts'
	import VueSeamlessScroll from 'vue-seamless-scroll'
	import indexApi from '@/api/frontScreen/index.js'
	import stationsModel from './components/stationsModel.vue'
	import stationsDetails from './components/stationsDetails.vue'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	export default {
		components: {
			VueSeamlessScroll,
			stationsModel,
			stationsDetails,
		},
		data() {
			return {
				showDetail: false,
				sstpListType: {
					appType: '',
					sstp: '1',
					query: '',
				},
				weatherThreeDays: [{
						date: '2022-03-18',
						daypower: '≤3',
						daytemp: '31',
						dayweather: '晴',
						daywind: '南',
						nightpower: '≤3',
						nighttemp: '19',
						nightweather: '晴',
						nightwind: '南',
						week: '5',
					},
					{
						date: '2022-03-19',
						daypower: '≤3',
						daytemp: '32',
						dayweather: '晴',
						daywind: '东',
						nightpower: '≤3',
						nighttemp: '17',
						nightweather: '小雨',
						nightwind: '东',
						week: '6',
					},
					{
						date: '2022-03-20',
						daypower: '≤3',
						daytemp: '25',
						dayweather: '小雨',
						daywind: '北',
						nightpower: '≤3',
						nighttemp: '12',
						nightweather: '小雨',
						nightwind: '北',
						week: '7',
					},
				],
				weatherToday: {
					date: '2022-03-18',
					daypower: '≤3',
					daytemp: '31',
					dayweather: '晴',
					daywind: '南',
					nightpower: '≤3',
					nighttemp: '19',
					nightweather: '晴',
					nightwind: '南',
					week: '5',
				},
				// 政区基础概况
				regionData: [],
				// 水位报警
				waterAlarm: [],
				// 雨量报警
				rainAlarm: [],
				//视频报警
				videoAlarm: [{
					count: 0,
					name: '视频',
					list: [],
				}, ],
				sqInput: false,
				yqInput: false,
				stInput: false,
				value1: '', //实时水情搜索
				value2: '', //实时雨情搜索
				value3: '', //生态流量搜索
				//测站正常率
				stationList: [],
				//工程概况
				projectList: [],
				countList: [],
				projectTotal: null,
				//临界河道水位排行
				criticalRiverList: [],
				//临界水库水位排行
				criticalRsvrList: [],
				//当年取水量统计
				yearWaterPalns: [],
				//生态流量
				flowList: [],
				sstpList: [],
				//日累计降雨排行
				rainfallData: [],
				// 测站故障率
				showType: true,
				totalFailure: null,
				totalFailureOption: null,
				typeFailure1: null,
				typeFailure1Option: null,
				typeFailure2: null,
				typeFailure2Option: null,
				typeFailure3: null,
				typeFailure3Option: null,
				stationFailure: null,
				stationFailureOption: null,
				// 测站数量统计
				currentQpType: 1,
				headerBtn: [
					// {
					//     name: '总计',
					//     key: 'total',
					// },
					{
						name: '水库',
						key: 1,
					},
					{
						name: '山洪',
						key: 2,
					},
					{
						name: '中小河流',
						key: 3,
					},
				],
				headerData1: [{
						name: '雨量站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-yuliang',
					},
					{
						name: '水库水位站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shuiwen',
					},
					{
						name: '渗流站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shenliu',
					},
					{
						name: '渗压站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shenya',
					},
					{
						name: '位移站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-weiyi',
					},
					{
						name: '视频站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shipin',
					},
				],
				headerData2: [{
						name: '雨量站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-yuliang',
					},
					{
						name: '河道水文站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shuiwen',
					},
					{
						name: '河道水位站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shuiwei',
					},
					{
						name: '水库水位站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shuiwen',
					},
					{
						name: '广播站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-guangbo',
					},
				],
				headerData3: [{
						name: '雨量站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-yuliang',
					},
					{
						name: '河道水文站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shuiwen',
					},
					{
						name: '河道水位站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shuiwei',
					},
					{
						name: '视频站',
						total: 30,
						normal: 28,
						error: 2,
						icon: 'bbsl-shipin',
					},
				],
				headerData: [],
				// 工程概况分类title
				projectItemTitle: '所有',
				// 工程概况
				projectItemData: [{
						name: '水库',
						num: 43,
						total: 125,
					},
					{
						name: '堤防',
						num: 42,
						total: 125,
					},
					// {
					//   name: '分洪',
					//   num: 37,
					//   total: 125
					// },
					{
						name: '水电站',
						num: 3,
						total: 125,
					},
				],
				projectItemDataAll: [{
						name: '水库',
						num: 43,
						total: 125,
					},
					{
						name: '堤防',
						num: 42,
						total: 125,
					},
					// {
					//   name: '分洪',
					//   num: 37,
					//   total: 125
					// },
					{
						name: '水电站',
						num: 3,
						total: 125,
					},
				],
				// projectItemData1: [
				//   {
				//     name: '水库',
				//     num: 1,
				//     total: 20
				//   },
				//   {
				//     name: '堤防',
				//     num: 7,
				//     total: 20
				//   },
				//   {
				//     name: '分洪',
				//     num: 12,
				//     total: 20
				//   },
				//   {
				//     name: '水电站',
				//     num: 0,
				//     total: 20
				//   }
				// ],
				// projectItemData2: [
				//   {
				//     name: '水库',
				//     num: 1,
				//     total: 5
				//   },
				//   {
				//     name: '堤防',
				//     num: 3,
				//     total: 5
				//   },
				//   {
				//     name: '分洪',
				//     num: 1,
				//     total: 5
				//   },
				//   {
				//     name: '水电站',
				//     num: 0,
				//     total: 5
				//   }
				// ],
				// projectItemData3: [
				//   {
				//     name: '水库',
				//     num: 20,
				//     total: 110
				//   },
				//   {
				//     name: '堤防',
				//     num: 43,
				//     total: 110
				//   },
				//   {
				//     name: '分洪',
				//     num: 35,
				//     total: 110
				//   },
				//   {
				//     name: '水电站',
				//     num: 12,
				//     total: 110
				//   }
				// ],
				pie: null,
				pieOption: {},
				// 累计雨量
				rainfallType: '1',
				rainfallTypeList: [{
						name: '山洪',
						key: '1',
					},
					{
						name: '中小河流',
						key: '3',
					},
					{
						name: '水库',
						key: '2',
					},
					{
						name: '全部',
						key: '',
					},
				],

				displacementType: 'x',
				displacementTypeList: [{
						name: '东',
						key: 'x',
					},
					{
						name: '北',
						key: 'y',
					},
					{
						name: '垂直',
						key: 'Z',
					},
				],
				// 大坝位移排行
				displacementData: [{
						key: '1',
						name: 'XX水库',
						place: 'xx点位',
						num: 50,
						total: 174,
						frist: 50,
					},
					{
						key: '2',
						name: 'XX水库',
						place: 'xx点位',
						num: 42,
						total: 174,
						frist: 50,
					},
					{
						key: '3',
						name: 'XX水库',
						place: 'xx点位',
						num: 37,
						total: 174,
						frist: 50,
					},
					{
						key: '4',
						name: 'XX水库',
						place: 'xx点位',
						num: 29,
						total: 174,
						frist: 50,
					},
					{
						key: '5',
						name: 'XX水库',
						place: 'xx点位',
						num: 16,
						total: 174,
						frist: 50,
					},
				],
				// 临界水位
				criticalWaterLevel: null,
				criticalType: 0,
				criticalTypeList: [{
						name: '水库',
						key: 'reservoir',
					},
					{
						name: '河道',
						key: 'river',
					},
				],
				// 水库渗流
				reservoirSeepage: null,
				ecologicalFlowHeader: [{
						key: 'id',
						width: '14px',
						name: '',
					},
					{
						key: 'stnm',
						width: '20%',
						name: '测站',
					},
					{
						key: 'z',
						width: '10%',
						name: '水位',
					},
					{
						key: 'q',
						width: '10%',
						name: '流量',
					},
					{
						key: 'fsltdz',
						width: '10%',
						name: '核定值',
					},
					{
						key: 'tm',
						width: 'calc(21% - 14px)',
						name: '时间',
					},
				],
				ecologicalFlowData: [],
				// 实时雨情传参
				realtimeRainType: {
					appType: '1',
					fromSzsk: false,
					query: '',
				},
				// 实时水情传参
				realtimeWaterType: {
					appType: '1',
					fromSzsk: false,
					query: '',
				},
				rainTypeList: [{
						name: '山洪',
						key: '1',
					},
					{
						name: '中小河流',
						key: '3',
					},
					{
						name: '水库',
						key: '2',
					},
					{
						name: '全部',
						key: '',
					},
				],
				WaterTypeList: [{
						name: '山洪',
						key: '1',
					},
					{
						name: '中小河流',
						key: '3',
					},
					{
						name: '水库',
						key: '2',
					},
					{
						name: '全部',
						key: '',
					},
				],
				// 实时雨情表头
				realtimeRainHeader: [{
						key: 'order',
						width: '14px',
						name: '',
					},
					{
						key: 'stnm',
						width: '25%',
						name: '测站',
					},

					// {
					//   key: 'rz',
					//   width: '14%',
					//   name: '当前水位',
					// },
					{
						key: 'p1',
						width: '16%',
						name: '当前雨量',
					},
					{
						key: 'yjz1',
						width: '16%',
						name: '警戒阈值',
					},
					{
						key: 'yjz2',
						width: '16%',
						name: '危险阈值',
					},
					{
						key: 'time',
						width: 'calc(20% - 14px)',
						name: '时间',
					},
				],
				// 实时水情表头
				realtimeWaterHeader: [{
						key: 'order',
						width: '14px',
						name: '',
					},
					{
						key: 'stnm',
						width: '20%',
						name: '测站',
					},

					{
						key: 'rz',
						width: '12%',
						name: '当前水位',
					},
					// {
					//   key: 'warnVal',
					//   width: '14%',
					//   name: '当前雨量',
					// },
					{
						key: 'fsltdz1',
						width: '16%',
						name: '警戒阈值',
					},
					{
						key: 'fsltdz2',
						width: '16%',
						name: '保证阈值',
					},
					{
						key: 'time',
						width: 'calc(20% - 14px)',
						name: '时间',
					},
				],
				realtimeRainData: [],
				// 雨情预警阈值
				// 警戒
				rainWarn: '',
				// 危险
				rainDanger: '',
				// 水情预警阈值
				// 警戒
				waterGuarantee: '',
				// 保证
				waterDanger: '',
				realtimeWaterData: [],
				fetchWater: null,
				fetchWaterOption: null,
				errCount: 0,
			}
		},
		filters: {
			dateText: (index) => {
				if (index === 0) {
					return '今天'
				} else if (index === 1) {
					return '明天'
				} else {
					return '后天'
				}
			},
			weekText: (value) => {
				let text = '星期'
				if (value == 1) {
					return text + '一'
				} else if (value == 2) {
					return text + '二'
				} else if (value == 3) {
					return text + '三'
				} else if (value == 4) {
					return text + '四'
				} else if (value == 5) {
					return text + '五'
				} else if (value == 6) {
					return text + '六'
				} else if (value == 7) {
					return text + '七'
				}
			},
		},
		computed: {
			optionSingleHeightTime() {
				return {
					limitMoveNum: 6,
					singleHeight: 29,
					waitTime: 2500,
				}
			},
		},
		created() {
			//this.getWeather()
			this.getAdministration() //获取行政基础概况
			this.getSwWarning() //水位报警统计
			this.getYlWarning() //雨量报警统计
			this.getStation() //测站正常率
			this.getProject('') //工程概况
			this.getFlowList(1) //生态流量
			this.getCriticalRiver() //河道临界水位
			this.getYearWaterPaln() //当年取水量统计
			this.getPrecipitation() //日累计降雨排行
			this.getRealTimeWaterList() //实时水情
			this.getRealTimeRainList() //实时雨情
			this.sstpList = dictUtils.getDictItemsFromCache('czlb-stzlx')
			console.log(this.sstpList)
			this.sstpList.push({
				name: '全部',
				value: ''
			})
			// this.formatIcon()
		},
		// 监听异常发生变化，语音播报
		watch: {
			errCount: function() {
				this.aplayAudio()
			},
		},
		mounted() {
			// 初始测站概况
			//this.initTotalFailure()
			//this.initTypeFailure1()
			//this.initTypeFailure2()
			//this.initTypeFailure3()
			//this.initFetchWater()
			// 初始化饼图
			//this.initPie()
			// 初始化临界水位
			//this.initCriticalBar()
			// 初始化水库渗流
			// this.initReservoirBar()
			this.$root.$on('resize', () => {
				this.resize(500)
			})
			this.headerData = this[`headerData${this.currentQpType}`]
		},

		methods: {
			sqInputs() {
				this.sqInput = !this.sqInput
			},
			yqInputs() {
				this.yqInput = !this.yqInput
			},
			StInputs() {
				this.stInput = !this.stInput
			},
			btnMp() {
				this.errCount += 1
			},
			getWeather() {
				//indexApi方法接口报错
				indexApi.getWeather((data) => {
					this.weatherThreeDays = data.forecasts[0].casts.slice(0, 3)
					this.weatherToday = data.forecasts[0].casts[0]
					this.formatIcon()
				})
			},
			//获取行政基础概况
			getAdministration() {
				let icons = ['bbsl-heliu', 'bbsl-jiedao', 'bbsl-juweihui']
				indexApi.govSector((res) => {
					if (res.state) {
						this.regionData = res.value
						this.regionData.map((ee, i) => {
							icons.map((e, index) => {
								if (i == index) {
									ee.icon = e
								}
							})
						})
					}
				})
			},
			Warning() {
				indexApi.swWarning((res) => {
					if (res.state) {
						this.waterAlarm = res.value
					}
				})
				indexApi.ylWarning((res) => {
					if (res.state) {
						this.rainAlarm = res.value
					}
				})
			},
			//水位报警统计
			getSwWarning() {
				indexApi.swWarning((res) => {
					if (res.state) {
						this.waterAlarm = res.value
						res.value.forEach((e) => {
							if (e.count > 0) {
								this.$refs.audio.play()
								return
							} else {
								this.$refs.audio.pause()
							}
						})
					}
				})
			},
			//雨量报警统计
			getYlWarning() {
				indexApi.ylWarning((res) => {
					if (res.state) {
						this.rainAlarm = res.value
						res.value.forEach((e) => {
							if (e.count > 0) {
								this.$refs.audio.play()
								return
							} else {
								this.$refs.audio.pause()
							}
						})
					}
				})
			},
			//测站正常率
			getStation() {
				indexApi.station((res) => {
					if (res.state) {
						this.stationList = res.value
						this.$nextTick(() => {
							this.initTotalFailure()
							this.statementStart()
							// this.initTypeFailure1()
							// this.initTypeFailure2()
							// this.initTypeFailure3()
						})
					}
				})
			},
			//工程概况
			getProject(val) {
				indexApi.project(val, (res) => {
					if (res.state) {
						this.countList = res.value.countList
						this.projectList = res.value.projectList
						this.projectList.forEach((item) => {
							// 删除分洪
							if (item.typeName == '分洪') {
								this.projectList.splice(1, 1)
							}
							// console.log(item.typeName == "分洪");
						})
						// 方法2
						this.projectTotal = 0
						this.countList.forEach((item) => {
							this.projectTotal += item.count
						})
						this.$nextTick(() => {
							this.initPie()
						})
					}
				})
			},
			//生态流量
			getFlowList(value1, value2) {
				// 转换为表单格式
				let item = new FormData()
				if (!!value1 && !value2) {
					item.append('sstp', value1)
				}
				if (!!value1 && !!value2) {
					item.append('sstp', value1)
					item.append('query', value2)
				}
				indexApi.flowList(item, (res) => {
					if (res.state) {
						this.flowList = res.value
						let list = dictUtils.getDictItemsFromCache('yjdj')
						this.flowList.forEach((e) => {
							if (!e.tm) {
								e.tm = ''
							} else {
								e.tm = e.tm
									.replace('-', '/')
									.split('/')[1]
									.slice(0, 11)
									.replace('-', '/')
							}

							list.forEach((l) => {
								if (e.warnGrade == l.value) {
									e.warnGrade = l.name
								}
							})
						})
					}
				})
			},
			//临界河道水位排行
			getCriticalRiver() {
				indexApi.criticalRiver((res) => {
					if (res.state) {
						this.criticalRiverList = res.value
						this.$nextTick(() => {
							// this.initCriticalBar()
						})
					}
				})
			},
			//临界水库水位排行
			getCriticalRsvr() {
				indexApi.criticalRsvr((res) => {
					if (res.state) {
						this.criticalRsvrList = res.value
						this.$nextTick(() => {
							// this.initCriticalBar()
						})
					}
				})
			},
			//当年取水量统计
			getYearWaterPaln() {
				let params = {
					rscd: '',
					time: '',
					waterId: '',
					year: 0,
				}
				indexApi.yearWaterPaln(params, (res) => {
					if (res.state) {
						this.yearWaterPalns = res.value
						this.$nextTick(() => {
							this.initFetchWater()
						})
					}
				})
			},
			//日累计降雨排行
			getPrecipitation() {
				indexApi.precipitation(this.rainfallType, (res) => {
					if (res.state) {
						this.rainfallData = res.value
					}
				})
			},
			// 实时水情搜索
			inputSqData() {
				this.realtimeWaterType.query = this.value1
				this.getRealTimeWaterList()
			},
			// 实时雨情搜索
			inputYqData() {
				this.realtimeRainType.query = this.value2
				this.getRealTimeRainList()
			},
			// 生态流量搜索
			inputStData() {
				this.sstpListType.query = this.value3
				console.log(this.sstpListType.sstp)
				this.getFlowList(this.sstpListType.sstp, this.value3)
			},
			//实时雨情
			getRealTimeRainList() {
				indexApi.realTimeRainLists(this.realtimeRainType, (res) => {
					if (res.state) {
						this.realtimeRainData = res.value
						console.log(this.realtimeRainData + 'rain')
						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
								}
							})
						})
					}
				})
			},
			floatSub(arg1, arg2) {
				var r1, r2, m, n;
				try {
					r1 = arg1.toString().split(".")[1].length
				} catch (e) {
					r1 = 0
				}
				try {
					r2 = arg2.toString().split(".")[1].length
				} catch (e) {
					r2 = 0
				}
				m = Math.pow(10, Math.max(r1, r2));
				//动态控制精度长度
				n = (r1 >= r2) ? r1 : r2;
				return ((arg1 * m - arg2 * m) / m).toFixed(n)

			},
			// 实时水情
			getRealTimeWaterList() {
				indexApi.realTimeWaterLists(this.realtimeWaterType, (res) => {
					if (res.state) {
						this.realtimeWaterData = res.value
						// 预警等级
						let yjdjList = dictUtils.getDictItemsFromCache('yjdj')
						// 水势
						let ssList = dictUtils.getDictItemsFromCache('ss')
						this.realtimeWaterData.forEach((e) => {
							console.log(e.rz, e.nrstlv);
							if (e.rz > e.nrstlv) {
								e.transfinite = this.floatSub(e.rz, e.nrstlv)
							} else {
								e.transfinite = '--'
							}
							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
								}
							})
						})
					}
				})
			},
			//关闭音乐
			noMusic() {
				this.$refs.audio.pause()
			},

			formatIcon() {
				this.weatherThreeDays.forEach((item) => {
					if (item.dayweather == '晴') {
						item.weatherIcon = 'yintian'
					} else if (item.dayweather == '多云') {
						item.weatherIcon = 'duoyun'
					} else if (item.dayweather == '阴') {
						item.weatherIcon = 'yintian'
					} else if (item.dayweather == '霾') {
						item.weatherIcon = 'wumai'
					} else if (item.dayweather == '雷阵雨') {
						item.weatherIcon = 'leizhenyu'
					} else if (item.dayweather == '雨') {
						item.weatherIcon = 'xiaoyu'
					} else if (item.dayweather == '小雨') {
						item.weatherIcon = 'xiaoyu'
					} else if (item.dayweather == '中雨') {
						item.weatherIcon = 'zhongyu'
					} else if (item.dayweather == '大雨') {
						item.weatherIcon = 'dayu'
					} else if (item.dayweather == '暴雨') {
						item.weatherIcon = 'baoyu'
					} else if (item.dayweather == '大暴雨') {
						item.weatherIcon = 'dabaoyu'
					} else if (
						item.dayweather == '中雨-大雨' ||
						item.dayweather == '小雨-中雨' ||
						item.dayweather == '大雨-暴雨' ||
						item.dayweather == '暴雨-大暴雨'
					) {
						item.weatherIcon = 'zhongyuzhuandayu'
					} else if (item.dayweather.indexOf('风') != -1) {
						item.weatherIcon = 'dafeng'
					} else {
						item.weatherIcon = 'dawu'
					}
				})
			},
			resize(delay) {
				// 动态计算表格的高度，自适应当前容器
				setTimeout(() => {
					this.pie.resize()
					this.fetchWater.resize()
					// this.criticalWaterLevel.resize()
					this.totalFailure.resize()
					if (this.showType) {
						this.typeFailure1.resize()
						this.typeFailure2.resize()
						this.typeFailure3.resize()
					} else {
						this.stationFailure.resize()
					}

					// this.reservoirSeepage.resize()
				}, delay || 0)
			},
			// 切换测站数量统计类型
			changeEqItem(key) {
				this.currentQpType = key
				this.headerData = this[`headerData${key}`]
			},
			// 切换降雨量统计类型
			changeRainfallType(key) {
				if (key == '') {
					let routeData = this.$router.resolve({
						path: '/bizPlat/monitor/resMonitor/dayYlQuery',
					})
					window.open(routeData.href, '_blank')
				} else {
					this.rainfallType = key
					this.getPrecipitation()
				}
			},
			// 切换大坝位移统计类型
			changeDisplacementType(key) {
				this.displacementType = key
			},
			// 切换临界水位统计类型
			changeCriticalType(key) {
				this.criticalType = key
				if (key == 0) {
					this.getCriticalRiver()
				} else if (key == 1) {
					this.getCriticalRsvr()
				}
			},
			changesstpListType(val) {
				if (val == '') {
					let routeData = this.$router.resolve({
						path: '/bizPlat/monitor/sqMonitor/sdzQuery',
					})
					window.open(routeData.href, '_blank')
				} else {
					this.sstpListType.sstp = val
					this.getFlowList(this.sstpListType.sstp)
				}
			},
			// 切换实时雨情统计类型
			changeRainType(key) {
				if (key == '') {
					let routeData = this.$router.resolve({
						path: '/bizPlat/monitor/sqMonitor/swStQuery',
					})
					window.open(routeData.href, '_blank')
				} else {
					this.realtimeRainType.appType = key
					this.getRealTimeRainList()
				}

				// if (key == 'all') {
				// 	let path = '/bizPlat/monitor/resMonitor/ylStQuery'
				// 	const {
				// 		href
				// 	} = this.$router.resolve({
				// 		path,
				// 	})
				// 	window.open(href, '_blank', console.log(href))
				// } else {
				// 	this.realtimeRainType = key
				// }
			},
			// 切换实时水情统计类型
			changeWaterType(key) {
				console.log(key)
				if (key == '') {
					let routeData = this.$router.resolve({
						path: '/bizPlat/monitor/sqMonitor/swStQuery',
					})
					window.open(routeData.href, '_blank')
				} else {
					this.realtimeWaterType.appType = key
					this.getRealTimeWaterList()
				}
			},
			// 点击查询实时水情具体信息
			searchWaterData(val) {
				console.log(val)
				let address = val.stcd
				let page
				if (val.sttp == 'ZQ' || val.sttp == 'ZZ') {
					page = 'second'
				} else if (val.sttp == 'RR') {
					page = 'first'
				}
				console.log(page)
				// this.$store.commit("index/addressMap", address);
				// this.$store.commit("index/cdPage", page);
				window.sessionStorage.setItem('StationId', address)
				window.sessionStorage.setItem('pages', page)
				let routeData = this.$router.resolve({
					path: '/bizPlat/monitor/sqMonitor/swStQuery',
				})
				window.open(routeData.href, '_blank')
			},
			// 点击查询实时雨情具体信息
			searchRainData(val) {
				console.log(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')
			},
			//点击查询生态流量
			searchSstpData(val) {
				let address = val.stnm
				window.sessionStorage.setItem('StationId', address)
				let routeData = this.$router.resolve({
					path: '/bizPlat/monitor/sqMonitor/sdzQuery',
				})
				window.open(routeData.href, '_blank')
			},
			// 初始化测站概况 stationList
			initTotalFailure() {
				const totalFailureDom = document.getElementById('totalFailure')
				this.totalFailure = echarts.init(totalFailureDom)
				this.totalFailureOption = {
					title: {
						text: '测站概况',
						textStyle: {
							fontSize: 12,
							color: '#fff',
						},
						left: 'center',
						top: 'top',
					},
					legend: {
						bottom: 0,
						right: 0,
						textStyle: {
							color: '#adb9ba',
						},
						icon: 'circle',
						itemWidth: 10,
						itemHeight: 10,
						orient: 'vertical',
					},
					tooltip: {
						appendToBody: true,
						trigger: 'item',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
						formatter: '{b}测站 <br/>数量：{c} 个 ，占比：{d}%',
					},

					series: [{
						name: '测站概况',
						type: 'pie',
						radius: ['46%', '70%'],
						showEmptyCircle: true,
						avoidLabelOverlap: true,
						itemStyle: {
							opacity: 1,
							shadowBlur: 10,
							shadowOffsetX: 2,
							shadowOffsetY: 2,
							shadowColor: 'rgba(255,255,255,0.2)',
							borderRadius: 6,
						},
						label: {
							formatter: '{b}\n{d}%',
							color: '#fff',
						},
						top: '10%',
						bottom: 0,
						// emphasis: {
						//   focus: 'series',
						//   disabled: true,
						// },
						data: [{
								value: this.stationList.allNormalCount,
								name: '正常',
								key: '2',
								label: {
									show: false,
									// normal: {
									//   position: 'center',
									// },
								},
							},
							{
								value: this.stationList.allFaultCount,
								name: '故障',
								key: '1',
								label: {
									show: false,
									// normal: {
									//   position: 'center',
									// },
								},
							},
						],
						color: ['#0091ff', '#ee6666'],
					}, ],
				}
				this.totalFailureOption &&
					this.totalFailure.setOption(this.totalFailureOption)
			},

			statementStart() {
				this.stationList.appTypeList.forEach((item, index) => {
					this.drawDevice(index, item)
				})
			},
			drawDevice(index, item) {
				// 基于准备好的dom，初始化echarts实例
				this.$nextTick(function() {
					const myChart = echarts.init(document.getElementById('myChart' + index))
					let tableList = []
					for (let i in item) {
						if (i == 'normalCount') {
							tableList.push({
								name: '正常',
								value: item[i],
								title: item.appType,
								label: {
									show: false,
									// normal: {
									//   position: 'center',
									// },
								},
								itemStyle: {
									color: '#0091ff',
								},
							})
						} else if (i == 'faultCount') {
							tableList.push({
								name: '故障',
								value: item[i],
								title: item.appType,
								label: {
									show: false,
									// normal: {
									//   position: 'center',
									// },
								},
								itemStyle: {
									color: '#ee6666',
								},
							})
						}
					}
					// return
					this.typeFailure1Option = {
						title: {
							text: item.appType,
							textStyle: {
								fontSize: 12,
								color: '#fff',
							},
							left: 'center',
							top: 'top',
						},
						legend: {
							bottom: 0,
							right: 0,
							textStyle: {
								color: '#adb9ba',
							},
							icon: 'circle',
							itemWidth: 10,
							itemHeight: 10,
							orient: 'vertical',
						},
						tooltip: {
							appendToBody: true,
							trigger: 'item',
							backgroundColor: 'rgba(0,0,0,0.7)',
							textStyle: {
								color: '#dddee0',
							},
							formatter: '{b}测站 <br/>数量：{c} 个 ，占比：{d}%',
						},
						series: [{
							name: '测站概况',
							type: 'pie',
							radius: ['46%', '70%'],
							showEmptyCircle: true,
							legendHoverLink: false, //是否启用图例 hover 时的联动高亮   默认true
							hoverAnimation: false,
							avoidLabelOverlap: false,
							itemStyle: {
								opacity: 1,
								shadowBlur: 10,
								shadowOffsetX: 2,
								shadowOffsetY: 2,
								shadowColor: 'rgba(255,255,255,0.2)',
								borderRadius: 6,
							},
							label: {
								formatter: '{b}\n{d}%',
								color: '#fff',
							},
							top: '10%',
							bottom: 0,
							// emphasis: {
							//   disabled: true,
							//   focus: 'series',
							// },
							data: tableList,
							color: ['#ee6666', '#6767ff'],
						}, ],
					}
					this.typeFailure1Option && myChart.setOption(this.typeFailure1Option)
					myChart.on('click', (params) => {
						myChart.dispose()
						//this.typeFailure2.dispose()
						//this.typeFailure3.dispose()
						this.showType = false
						this.$nextTick(() => {
							this.initStationFailure(params.data.title)
						})

						// if (params.componentType == 'title') {
						//     this.changePieDetail('all')
						// } else if (params.componentType == 'series') {
						//     this.changePieDetail(params.data.key, params.data.name)
						// }
					})
				})
			},

			// 水库测站概况
			initTypeFailure1() {
				const typeFailure1Dom = document.getElementById('typeFailure1')
				this.typeFailure1 = echarts.init(typeFailure1Dom)
				this.typeFailure1Option = {
					title: {
						text: '水库测站',
						textStyle: {
							fontSize: 12,
							color: '#fff',
						},
						left: 'center',
						top: 'top',
					},
					legend: {
						bottom: 0,
						right: 0,
						textStyle: {
							color: '#adb9ba',
						},
						icon: 'circle',
						itemWidth: 10,
						itemHeight: 10,
						orient: 'vertical',
					},
					tooltip: {
						appendToBody: true,
						trigger: 'item',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
						formatter: '{b}测站 <br/>数量：{c} 个 ，占比：{d}%',
					},
					series: [{
						name: '测站概况',
						type: 'pie',
						radius: ['46%', '70%'],
						showEmptyCircle: true,
						avoidLabelOverlap: true,
						itemStyle: {
							opacity: 1,
							shadowBlur: 10,
							shadowOffsetX: 2,
							shadowOffsetY: 2,
							shadowColor: 'rgba(255,255,255,0.2)',
							borderRadius: 6,
						},
						label: {
							formatter: '{b}\n{d}%',
							color: '#fff',
						},
						top: '10%',
						bottom: 0,
						emphasis: {
							disabled: true,
						},
						data: [{
								value: 2,
								name: '故障',
								key: '1',
								label: {
									show: false,
									normal: {
										position: 'center',
									},
								},
							},
							{
								value: 82,
								name: '正常',
								key: '2',
								label: {
									show: false,
									normal: {
										position: 'center',
									},
								},
							},
						],
						color: ['#ee6666', '#6767ff'],
					}, ],
				}
				this.typeFailure1Option &&
					this.typeFailure1.setOption(this.typeFailure1Option)

				this.typeFailure1.on('click', (params) => {
					console.log(params)
					this.typeFailure1.dispose()
					this.typeFailure2.dispose()
					this.typeFailure3.dispose()
					this.showType = false
					this.$nextTick(() => {
						this.initStationFailure('水库')
					})

					// console.log(params);
					// if (params.componentType == 'title') {
					//     this.changePieDetail('all')
					// } else if (params.componentType == 'series') {
					//     this.changePieDetail(params.data.key, params.data.name)
					// }
				})
			},
			// 山洪测站概况
			initTypeFailure2() {
				const typeFailure2Dom = document.getElementById('typeFailure2')
				this.typeFailure2 = echarts.init(typeFailure2Dom)
				this.typeFailure2Option = {
					title: {
						text: '山洪测站',
						textStyle: {
							fontSize: 12,
							color: '#fff',
						},
						left: 'center',
						top: 'top',
					},
					legend: {
						bottom: 0,
						right: 0,
						textStyle: {
							color: '#adb9ba',
						},
						icon: 'circle',
						itemWidth: 10,
						itemHeight: 10,
						orient: 'vertical',
					},
					tooltip: {
						appendToBody: true,
						trigger: 'item',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
						formatter: '{b}测站 <br/>数量：{c} 个 ，占比：{d}%',
					},
					series: [{
						name: '测站概况',
						type: 'pie',
						radius: ['46%', '70%'],
						showEmptyCircle: true,
						avoidLabelOverlap: true,
						itemStyle: {
							opacity: 1,
							shadowBlur: 10,
							shadowOffsetX: 2,
							shadowOffsetY: 2,
							shadowColor: 'rgba(255,255,255,0.2)',
							borderRadius: 6,
						},
						label: {
							formatter: '{b}\n{d}%',
							color: '#fff',
						},
						top: '10%',
						bottom: 0,
						emphasis: {
							disabled: true,
						},
						data: [{
								value: 1,
								name: '故障',
								key: '1',
								label: {
									show: false,
									normal: {
										position: 'center',
									},
								},
							},
							{
								value: 90,
								name: '正常',
								key: '2',
								label: {
									show: false,
									normal: {
										position: 'center',
									},
								},
							},
						],
						color: ['#ee6666', '#40b27d'],
					}, ],
				}
				this.typeFailure2Option &&
					this.typeFailure2.setOption(this.typeFailure2Option)
				this.typeFailure2.on('click', (params) => {
					this.typeFailure1.dispose()
					this.typeFailure2.dispose()
					this.typeFailure3.dispose()
					this.showType = false
					this.$nextTick(() => {
						this.initStationFailure('山洪')
					})
				})
			},
			// 水文测站概况
			initTypeFailure3() {
				const typeFailure3Dom = document.getElementById('typeFailure3')
				this.typeFailure3 = echarts.init(typeFailure3Dom)
				this.typeFailure3Option = {
					title: {
						text: '水文测站',
						textStyle: {
							fontSize: 12,
							color: '#fff',
						},
						left: 'center',
						top: 'top',
					},
					legend: {
						bottom: 0,
						right: 0,
						textStyle: {
							color: '#adb9ba',
						},
						icon: 'circle',
						itemWidth: 10,
						itemHeight: 10,
						orient: 'vertical',
					},
					tooltip: {
						appendToBody: true,
						trigger: 'item',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
						formatter: '{b}测站 <br/>数量：{c} 个 ，占比：{d}%',
					},
					series: [{
						name: '测站概况',
						type: 'pie',
						radius: ['46%', '70%'],
						showEmptyCircle: true,
						avoidLabelOverlap: true,
						itemStyle: {
							opacity: 1,
							shadowBlur: 10,
							shadowOffsetX: 2,
							shadowOffsetY: 2,
							shadowColor: 'rgba(255,255,255,0.2)',
							borderRadius: 6,
						},
						label: {
							formatter: '{b}\n{d}%',
							color: '#fff',
						},
						top: '10%',
						bottom: 0,
						emphasis: {
							disabled: true,
						},
						data: [{
								value: 1,
								name: '故障',
								key: '1',
								label: {
									show: false,
									normal: {
										position: 'center',
									},
								},
							},
							{
								value: 190,
								name: '正常',
								key: '2',
								label: {
									show: false,
									normal: {
										position: 'center',
									},
								},
							},
						],
						color: ['#ee6666', '#4cb5ff'],
					}, ],
				}
				this.typeFailure3Option &&
					this.typeFailure3.setOption(this.typeFailure3Option)
				this.typeFailure3.on('click', (params) => {
					this.typeFailure1.dispose()
					this.typeFailure2.dispose()
					this.typeFailure3.dispose()
					this.showType = false
					this.$nextTick(() => {
						this.initStationFailure('水文')
					})
				})
			},
			// 测站详情
			initStationFailure(key) {
				const stationFailureDom = document.getElementById('stationFailure')
				this.stationFailure = echarts.init(stationFailureDom)
				let tableList = []
				this.stationList.appTypeList.forEach((e) => {
					if (e.appType == key) {
						tableList = e.stationRespVos
					}
				})
				let criticalName = []
				let Alist = []
				let Blist = []
				tableList.forEach((e) => {
					criticalName.push(e.sttp)
					Alist.push(e.normalCount)
					Blist.push(e.faultCount)
				})
				this.stationFailureOption = {
					title: {
						text: `${key}测站详情`,
						textStyle: {
							fontSize: 12,
							color: '#fff',
						},
						left: 'center',
						top: 'top',
					},
					top: 6,
					bottom: 20,
					legend: {
						top: 5,
						right: 5,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						itemWidth: 10,
						itemHeight: 10,
					},
					tooltip: {
						trigger: 'axis',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#fff',
						},
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#576580',
							},
						},
					},
					grid: {
						top: 30,
						right: '2%',
						bottom: 20,
					},

					xAxis: {
						data: criticalName,
						type: 'category',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff',
							},
						},
					},
					yAxis: {
						scale: true,
						axisLabel: {
							formatter: '{value} 个',
						},
						axisLine: {
							show: true,
						},
						splitLine: {
							show: false,
						},
						splitNumber: 2,
					},
					series: [{
							name: '正常',
							data: Alist,
							type: 'bar',
							showBackground: true,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#06c206',
									},
									{
										offset: 0.5,
										color: '#06c206',
									},
									{
										offset: 1,
										color: '#aef3ae',
									},
								]),
								// barBorderRadius: [20, 20, 0, 0],
							},
							barWidth: 14,

						},
						{
							name: '故障',
							data: Blist,
							type: 'bar',
							showBackground: true,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#ee6666',
									},
									{
										offset: 0.5,
										color: '#ee6666',
									},
									{
										offset: 1,
										color: '#eeb7b7',
									},
								]),
								// barBorderRadius: [20, 20, 0, 0],
							},
							barWidth: 14,
						},
					],
				}
				this.stationFailureOption &&
					this.stationFailure.setOption(this.stationFailureOption)
				this.stationFailure.getZr().on('click', (params) => {
					let pointInPixel = [params.offsetX, params.offsetY]
					if (this.stationFailure.containPixel('grid', pointInPixel)) {
						let xIndex = this.stationFailure.convertFromPixel({
							seriesIndex: 0
						}, pointInPixel)[0];
						// console.log(xIndex)
						console.log(tableList[xIndex]);
						console.log(params)
						let name = tableList[xIndex].sttp
						this.$nextTick(() => {
							let title = key + ' - ' + name
							let data = {
								type: key,
								stationType: name,
								// seriesName: params.seriesName
							}
							this.$refs.stationsForm.open(title, data)
						})
					}
				})

				this.stationFailure.getZr().on('mousemove', param => {
					var pointInPixel = [param.offsetX, param.offsetY];
					if (this.stationFailure.containPixel('grid', pointInPixel)) { //若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手
						this.stationFailure.getZr().setCursorStyle('pointer')
					} else {
						this.stationFailure.getZr().setCursorStyle('default')
					}
				})

			},
			handleBack() {
				this.showType = true
				this.stationFailure.dispose()
				this.$refs.stationsModel.close()
				this.$nextTick(() => {
					this.statementStart()
					// this.initTypeFailure1()
					// this.initTypeFailure2()
					// this.initTypeFailure3()
				})
			},
			handlePopup(title, type, data, logo) {
				this.$nextTick(() => {
					this.$refs.stationsModel.open(title, type, data, logo)
				})
			},
			// 初始化取水
			initFetchWater() {
				const fetchWaterDom = document.getElementById('fetchWater')
				this.fetchWater = echarts.init(fetchWaterDom)
				let Alist = []
				let Blist = []
				for (let i in this.yearWaterPalns) {
					if (i.length < 8) {
						Alist.push(this.yearWaterPalns[i])
					} else if (i.length > 8) {
						Blist.push(this.yearWaterPalns[i])
					}
				}
				this.fetchWaterOption = {
					tooltip: {
						trigger: 'axis',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#576580',
							},
						},
					},
					grid: {
						top: 30,
						right: '5%',
						left: '14%',
						bottom: 50,
					},
					legend: {
						left: 5,
						bottom: 5,
						textStyle: {
							color: '#adb9ba',
							fontSize: 10,
						},
						itemWidth: 10,
						itemHeight: 10,
					},
					xAxis: {
						type: 'category',
						data: [
							'1月',
							'2月',
							'3月',
							'4月',
							'5月',
							'6月',
							'7月',
							'8月',
							'9月',
							'10月',
							'11月',
							'12月',
						],
						axisPointer: {
							type: 'shadow',
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}',
						},
						splitLine: {
							lineStyle: {
								color: '#7c7c7c',
							},
						},
						scale: true,
					},
					series: [{
							name: '实际取水量',
							type: 'bar',
							tooltip: {
								valueFormatter: function(value) {
									return value + '万m³'
								},
							},
							data: Alist,
							itemStyle: {
								color: '#6767ff',
							},
						},
						{
							name: '计划取水量',
							type: 'line',
							smooth: true,
							tooltip: {
								valueFormatter: function(value) {
									return value + '万m³'
								},
							},
							data: Blist,
							itemStyle: {
								color: '#ff9a00',
							},
						},
					],
				}
				this.fetchWaterOption && this.fetchWater.setOption(this.fetchWaterOption)
			},
			// 初始化饼图
			initPie() {
				const pieDom = document.getElementById('pie-container')
				this.pie = echarts.init(pieDom)
				let dataEcharts = []
				for (let i = 0; i < this.countList.length; i++) {
					dataEcharts.push({
						name: this.countList[i].statusName,
						value: this.countList[i].count,
						type: this.countList[i].status,
					})
				}
				this.pieOption = {
					title: {
						text: '总计 ' + this.projectTotal,
						left: 'center',
						top: 'center',
						textStyle: {
							fontSize: 12,
							color: '#fff',
						},
						triggerEvent: true,
					},
					legend: {
						bottom: 0,
						right: 0,
						textStyle: {
							color: '#adb9ba',
						},
						icon: 'circle',
						itemWidth: 10,
						itemHeight: 10,
						orient: 'vertical',
					},
					tooltip: {
						trigger: 'item',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
					},
					series: [{
						name: '工程概况',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: true,
						itemStyle: {
							opacity: 1,
							shadowBlur: 10,
							shadowOffsetX: 2,
							shadowOffsetY: 2,
							shadowColor: 'rgba(255,255,255,0.2)',
							borderRadius: 6,
						},
						label: {
							alignTo: 'edge',
							formatter: '{name|{b}} {num|{c} 个}',
							minMargin: 5,
							edgeDistance: 90,
							lineHeight: 15,
							padding: [10, 0, 0, 0],
							rich: {
								name: {
									fontSize: 12,
									color: '#f5f5f5',
								},
								num: {
									fontSize: 10,
									color: '#999',
								},
							},
						},
						labelLine: {
							length: 10,
							length2: 0,
							maxSurfaceAngle: 80,
						},
						data: dataEcharts,
						color: ['#0091ff', '#ff9a00', '#5e5eff'],
					}, ],
				}
				this.pieOption && this.pie.setOption(this.pieOption)
				this.pie.on('click', (params) => {
					if (params.componentType == 'series') {
						if (params.data.type) {
							this.getProject(params.data.type)
							this.projectItemTitle = params.data.name
						}
					} else if (params.componentType == 'title') {
						this.getProject('')
						this.projectItemTitle = '所有'
					}
				})
				this.pie.on('legendselectchanged', function(params) {
					// 获取点击图例的选中状态
					var isSelected = params.selected[params.name]
					// 在控制台中打印
					//console.log(
					//	(isSelected ? '选中了' : '取消选中了') +
					//	'图例' +
					//	params.name
					//)
				})
			},
			changePieDetail(key, name) {
				if (key == 'all') {
					this.projectItemData = this.projectItemDataAll
					this.projectItemTitle = '所有'
				} else if (key && key !== 'all') {
					this.projectItemData = this[`projectItemData${key}`]
					this.projectItemTitle = name
				}
			},
			// 初始化临界水位
			initCriticalBar() {
				const waterLevelDom = document.getElementById('criticalWaterLevel')
				this.criticalWaterLevel = echarts.init(waterLevelDom)
				let criticalName = []
				let Alist = []
				let Blist = []
				if (this.criticalType == 1) {
					this.criticalRsvrList.forEach((e) => {
						criticalName.push(e.stnm)
						Alist.push(e.rz)
						Blist.push(e.warnVal)
					})
				} else {
					this.criticalRiverList.forEach((e) => {
						criticalName.push(e.stnm)
						Alist.push(e.z)
						Blist.push(e.warnVal)
					})
				}
				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,
					},
					xAxis: {
						data: criticalName,
						type: 'category',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff',
							},
						},
					},
					yAxis: {
						axisLine: {
							show: true,
						},
						splitLine: {
							show: false,
						},
						scale: true,
					},
					series: [{
							name: '实时水位',
							data: Alist,
							type: 'bar',
							showBackground: true,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#188df0',
									},
									{
										offset: 0.5,
										color: '#188df0',
									},
									{
										offset: 1,
										color: '#86c5f8',
									},
								]),
								// barBorderRadius: [20, 20, 0, 0],
							},
							barWidth: 14,
						},
						{
							name: '警戒水位',
							data: Blist,
							type: 'bar',
							showBackground: true,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#f69502',
									},
									{
										offset: 0.5,
										color: '#f69502',
									},
									{
										offset: 1,
										color: '#ffd9a3',
									},
								]),
							},
							barWidth: 14,
						},
					],
				}
				option && this.criticalWaterLevel.setOption(option)
			},
			// 初始化水库渗流  纵向
			initReservoirBar() {
				const reservoirSeepageDom = document.getElementById('reservoirSeepage')
				this.reservoirSeepage = echarts.init(reservoirSeepageDom)
				let option = {
					legend: {
						// right: 5,
						// top: 8,
						textStyle: {
							color: '#adb9ba',
							fontSize: 10,
						},
						itemWidth: 10,
						itemHeight: 10,
					},
					tooltip: {
						trigger: 'axis',
						backgroundColor: 'rgba(0,0,0,0.7)',
						textStyle: {
							color: '#dddee0',
						},
					},
					grid: {
						top: 36,
						right: '2%',
						bottom: 50,
					},
					dataset: {
						source: [
							['product', '实时渗流', '临界渗流'],
							['水库1', 83.3, 85.8],
							['水库2', 68.1, 73.4],
							['水库3', 75.2, 86.4],
							['水库4', 40.4, 53.9],
							['水库5', 38.4, 66.9],
						],
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#adb9ba',
							},
							formatter: function(value) {
								var ret = '' //拼接加\n返回的类目项
								var maxLength = 3 //每项显示文字个数
								var valLength = value.length //X轴类目项的文字个数
								var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
								if (rowN > 1) {
									//如果类目项的文字大于3,
									for (var i = 0; i < rowN; i++) {
										var temp = '' //每次截取的字符串
										var start = i * maxLength //开始截取的位置
										var end = start + maxLength //结束截取的位置
										//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
										temp = value.substring(start, end) + '\n'
										ret += temp //凭借最终的字符串
									}
									return ret
								} else {
									return value
								}
							},
						},
					},
					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: [20, 20, 0, 0],
							},
							barWidth: 10,
						},
						{
							type: 'bar',
							showBackground: true,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#f69502',
									},
									{
										offset: 0.5,
										color: '#f69502',
									},
									{
										offset: 1,
										color: '#ffd9a3',
									},
								]),
								barBorderRadius: [20, 20, 0, 0],
							},
							barWidth: 10,
						},
					],
				}
				option && this.reservoirSeepage.setOption(option)
			},
		},
	}
</script>
<style lang="scss" scoped>
	@import '@/assets/css/element-variables.scss';

	.index-container {
		overflow: hidden;
		height: 100%;
		width: 100%;
		padding: 0 20px;
		background: #060f18; //#ebeef5;
		box-sizing: border-box;
		// 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;
		position: relative;
	}

	.top-container {
		height: 160px;
		margin-top: 10px;
		display: flex;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.center-container {
		height: calc(50% - 110px);
		margin-top: 10px;
		display: flex;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.bottom-container {
		height: calc(50% - 90px);
		margin-top: 10px;
		display: flex;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.section-con {
		background: rgba(#314351, 0.2);
		box-shadow: inset 0 0 100px rgba(#000, 0.3);
		position: relative;
	}

	.section-con:hover {
		box-shadow: inset -10px 10px 100px rgba(#000, 0.3), 0 0 4px rgba(#fff, 0.2);
	}

	.top-left {
		width: 18%;
		margin-right: 10px;
	}

	.top-center1 {
		width: 14%;
	}

	.top-center2 {
		width: 28%;
		margin-left: 10px;
	}

	.top-center3 {
		width: 8%;
		margin-left: 10px;
	}

	.top-right {
		width: calc(50% - 30px);
		margin-left: 10px;
	}

	.total-failure {
		width: 25%;
		height: 100%;
	}

	.type-failure {
		width: 75%;
		height: 100%;
		position: relative;

		.type-failure-inner {
			flex: 1;
			height: 100%;
		}

		.icon {
			position: absolute;
			left: 6px;
			top: 6px;
			cursor: pointer;
			z-index: 99;
		}

		.icon:hover {
			color: #0574d4;
		}
	}

	// 改变input里的字体颜色
	/deep/ input::-webkit-input-placeholder {
		color: #fff;
		font-size: 15px;
	}

	/deep/ .el-input__inner {
		/*或者 .s2>>>.el-input__inner  */
		height: 22px;
		/*调整inner的高度*/
		margin: 0;
		padding: 0 10px;
		color: #fff;
	}

	/* 改变input框背景颜色 */
	/deep/ input:-webkit-autofill,
	textarea:-webkit-autofill,
	select:-webkit-autofill {
		-webkit-text-fill-color: #ededed !important;
		-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
		background-color: transparent;
		background-image: none;
		/* //背景色透明  生效时长  过渡效果  启用时延迟的时间 */
		transition: background-color 50000s ease-in-out 0s;
	}

	/deep/ input {
		background-color: transparent;
	}

	/deep/ input:-webkit-autofill {
		/* //transparent 即设置背景色为透明-可改为其他颜色 */
		-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
		-webkit-text-fill-color: rgba(255, 255, 255, 1) !important;
	}

	// .station-failure-container{
	//     width: 100%;
	//     height: 100%;
	//     position: relative;
	//     .icon{
	//         position:absolute;
	//         left: 4px;
	//         top: 4px;
	//         color: #0574d4;
	//     }
	//     #stationFailure{
	//         width: 100%;
	//         height: 100%;
	//     }
	// }
	.section-btn-group {
		width: 100px;
		height: 100%;
		text-align: center;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		.section-btn {
			width: 96px;
			font-size: 16px;
			font-weight: bold;
			cursor: pointer;
			padding: 2px 0;
			background: linear-gradient(to right, transparent, #0574d4, transparent);
			color: #badeff;
			text-shadow: 1px 1px 2px rgb(58, 58, 58);
		}

		.section-btn:hover,
		.section-btn.active {
			background: linear-gradient(to right, transparent, #c2a071, transparent);
			color: #f1e5d2;
		}
	}

	.equipment-item-content {
		width: calc(100% - 120px);
		justify-content: space-around;
		margin-left: 20px;

		.eq-item-name {
			span {
				font-size: 20px;
				font-weight: bold;
				color: rgb(187, 191, 192);
			}

			.eq-item-icon {
				font-size: 20px;
				margin-left: 10px;
				color: #ff9a00;
			}

			.eq-item-total {
				font-size: 30px;
				font-weight: bold;
				color: #ff9a00;
				font-family: 'electronicFont';
				margin-top: 6px;

				i {
					font-style: normal;
					margin-left: 6px;
				}
			}
		}

		.eq-item-detail {
			>div {
				margin: 8px 12px 0 0;
				font-size: 16px;
			}

			.eq-item-kind {
				font-size: 14px;
				color: #b7c6d8;
			}

			.eq-item-num {
				font-size: 18px;
				font-weight: bold;
				margin-top: 4px;
				color: #b7c6d8;
			}
		}
	}

	.center-con1 {
		width: 30%;
		height: 100%;
	}

	.center-con1-1 {
		width: 100%;
		height: calc(50% - 10px);
	}

	.center-con1-2 {
		width: 100%;
		height: 50%;
		margin-top: 10px;
		display: flex;
	}

	.center-con1-2-1 {
		width: calc(40% - 10px);
		height: 100%;
	}

	.center-con1-2-2 {
		width: 60%;
		height: 100%;
		margin-left: 10px;
	}

	.center-con2 {
		width: 36%;
		margin-left: 10px;
	}

	.center-con3 {
		// width: calc(42% - 320px);
		width: calc(34% - 20px);
		margin-left: 10px;
	}

	.center-con4 {
		width: 290px;
		margin-left: 10px;
	}

	.bottom-con1 {
		width: 38%;
	}

	.bottom-con2 {
		width: calc(24% - 20px);
		margin-left: 10px;
	}

	.bottom-con3 {
		width: 38%;
		margin-left: 10px;
	}

	.bottom-con4 {
		width: calc(24% - 15px);
		margin-left: 10px;
	}

	.top-left-content {
		height: calc(100% - 24px);
	}

	.top-left-inner {
		margin: 0 10px;
		height: 100%;
	}

	.localtion-info {
		flex: 1;
		padding: 0 10px;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		.info {
			font-size: 16px;
			color: #badeff;
			line-height: 160%;
			text-align: center;
		}
	}

	.weather-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;

		.title {
			font-weight: 700;
			letter-spacing: 1px;
			width: 60%;
			height: 18px;
			line-height: 18px;
			margin: auto;
			margin-top: 6px;
			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);
		}

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

		i {
			font-size: 40px;
		}

		.temp {
			text-align: center;
			color: #badeff;
		}
	}

	.alarm-item {
		// width: 33.33%;
		flex: 1;

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

		i {
			font-size: 40px;
		}

		.title {
			font-weight: 700;
			letter-spacing: 1px;
			width: 60%;
			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 .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;
		}
	}

	.section-title {
		display: inline-block;
		background: linear-gradient(to right, #c2a071, transparent, transparent);
		height: 20px;
		width: calc(100% - 50px);
		padding: 2px 0;
		line-height: 18px;
		font-style: oblique;
		font-weight: 700;
		text-shadow: 1px 1px 2px #000;
		font-size: 21px;
		margin-top: 10px;
	}

	.section-title-img {
		margin-top: 10px;
		margin-left: 4px;
		margin-right: 4px;
		width: 14px;
		height: 14px;
	}

	#pie-container {
		width: 100%;
		height: 50%;
		margin: 0 auto;
	}

	div.full-out-header {
		height: calc(100% - 24px);
	}

	.project-container {
		width: 100%;
		height: 50%;
		box-sizing: border-box;
	}

	.bar-item {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;

		span {
			display: inline-block;
			font-size: 16px;
			font-weight: 700;
		}

		.name {
			width: 80px;
			text-align: right;
			color: #adb9c4;
		}

		.num {
			width: 50px;
			text-align: left;
			color: #309cfa;
			font-size: 18px;
		}

		.icon-num {
			width: calc(100% - 140px);
			height: 16px;
			padding: 4px;
			box-sizing: border-box;
			display: flex;
			margin: 0 10px;
			border: 1px solid rgba(0, 132, 251, 0.25);
			background: rgba(0, 132, 251, 0.1);
			position: relative;
		}

		.icon-num-inner {
			height: 6px;
			background: #0084fb;
		}

		.icon-num-sub {
			display: none;
			position: absolute;
			bottom: 150%;
			left: 50%;
			transform: translateX(-50%);
			color: #adb9c4;
		}
	}

	.bar-item:hover {
		.icon-num-sub {
			display: block;
		}
	}

	.type-btn-group {
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.type-btn-item {
		display: inline-block;
		font-weight: 700;
		letter-spacing: 1px;
		padding: 2px 8px;
		color: #badeff;
		font-size: 10px;
		background: linear-gradient(to right, transparent, #0574d4, transparent);
		font-style: oblique;
		margin: 0 2px;
		cursor: pointer;
		text-shadow: 1px 1px 2px rgb(58, 58, 58);
		vertical-align: middle;
	}

	.type-btn-item:hover,
	.type-btn-item.active {
		color: #f1e5d2;
		background: linear-gradient(to right, transparent, #c2a071, transparent);
	}

	.col-flex {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
	}

	.padding {
		padding: 10px 20px;
		box-sizing: border-box;
	}

	.order-type.bar-item {
		justify-content: start;

		.order {
			width: 20px;
			height: 24px;
			font-size: 14px;
			font-weight: 700;
			color: #ff9a00;
			background: url('../../assets/img/order_icon.png');
			background-size: 100% 100%;
			text-align: center;
			line-height: 24px;
			font-style: oblique;
			margin-right: 10px;
			padding-right: 2px;
			flex-grow: 0;
			flex-shrink: 0;
		}

		.name {
			text-align: left;
			flex-grow: 0;
			flex-shrink: 0;
		}

		.icon-num {
			text-align: left;
		}

		.icon-num-inner {
			background: #0084fb;
			// background: linear-gradient(to right,transparent,#0084fb);
		}

		.icon-num-inner {
			width: 100%;
		}
	}

	.order-type:nth-of-type(1),
	.order-type:nth-of-type(2),
	.order-type:nth-of-type(3) {
		.icon-num {
			border: 1px solid rgba(255, 154, 0, 0.15);
			background: rgba(255, 154, 0, 0.1);
		}

		.icon-num-inner {
			background: #ff9a00;
			// background: linear-gradient(to right,transparent,#ff9a00);
		}

		.num {
			color: #ffdaa5;
		}
	}

	.order-type:nth-of-type(4),
	.order-type:nth-of-type(5),
	.order-type:nth-of-type(6),
	.order-type:nth-of-type(7),
	.order-type:nth-of-type(8) {
		.order {
			color: #bde0ff;
			background: none;
			line-height: 28px;
		}
	}

	.explain {
		position: absolute;
		right: 20px;
		bottom: 6px;
		font-size: 10px;
		color: #9c9c9c;
	}

	.explain.top {
		top: 10px;
	}

	#criticalWaterLevel,
	#reservoirSeepage {
		width: 100%;
		height: 100%;
		color: #a9f8fc;
	}

	.scroll-table {
		.scroll-table-header {
			width: 100%;
			display: flex;
			justify-content: space-around;
			background: rgba(#0574d4, 0.8);
			background: rgba(92, 88, 79, 0.6);
			height: 36px;
			line-height: 36px;
			padding: 0 10px;
			box-sizing: border-box;
		}

		.scroll-table-body {
			height: calc(100% - 36px);
			overflow: hidden;
		}

		.scroll-table-body.solid {
			height: calc(100% - 36px);
			overflow-y: auto;
		}

		.header-item,
		.column-item {
			text-align: left;
		}

		.scroll-table-column {
			width: 100%;
			display: flex;
			justify-content: space-around;
		}

		.header-item {
			font-size: 16px;
			font-weight: 700;
			color: #d8dddd;
		}

		.scroll-table-column {
			padding: 6px 10px;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(0, 132, 251, 0.2);
		}

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

		.column-item {
			font-size: 12px;
			color: #dbdbdb;
			padding-right: 4px;
			box-sizing: border-box;
		}

		.columnActive {
			color: red;
		}

		.column-item-icon {
			display: inline-block;
			width: 10px;
			height: 10px;
			line-height: 12px;
			background-color: #ff9a00;
			border-radius: 100%;
			margin-right: 4px;
		}
	}
</style>
