visu_lifeline/src/views/Regulatory.vue

<!-- 监管中心 -->
<template>
	<div class="visual-con lifeline-con">
		<!--主体-->
		<div class="visual-body">
			<div class="life-header2">
				<div class="time-left">
					<h5 id="time">15:30:00</h5>
					<h6 id="day">2025.02.01</h6>
				</div>
				<weatherHeader></weatherHeader>
				<span>
					<img src="../assets/index_img/life-LOGO.png" alt="">
					四平市城市生命线监管平台-行管部门</span>
				<div class="header-right-user-home">
<!--					<img src="../assets/index_img/user-img.png" alt="" />-->
					<img src="../assets/index_img/home-img.png" alt="" @click="goToHomePage"/>
				</div>
			</div>
			<ul class="small-nav">
				<li class="active"><a>可视化</a></li>
				<li @click="toUrl('/ThermalPower')"><a>燃气</a></li>
				<li @click="toUrl('/lookall')"><a>供热</a></li>
				<li @click="toUrl('/water')"><a>供水</a></li>
				<li @click="toUrl('/paishui')"><a>排水</a></li>
				<li @click="toUrl('/UtilityTunnel')"><a>管廊</a></li>
				<li @click="toUrl('/qiaoliang')"><a>桥梁</a></li>
			</ul>
			<!--左右黑色渐变独立背景-->
			<div class="line-left"></div>
			<div class="line-right"></div>
			<div class="con_left_2_bg">
			</div>
			<div class="con_right_2_bg">
			</div>
			<!--资源-->
			<el-popover placement="right" trigger="click" popper-class="zy-con">
				<el-select v-model="value" placeholder="请选择" class="sj-select" popper-class="sj-s-pop">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="value2" placeholder="请选择" class="sj-select" popper-class="sj-s-pop">
					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="value3" placeholder="请选择" class="sj-select" popper-class="sj-s-pop">
					<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button class="sj-btn-icon-h">查询</el-button>

				<div slot="reference" class="zy-icon">
					<img src="../assets/index_img/zy-icon.png" alt="" />
					资源
				</div>
			</el-popover>

			<!--左侧资产盘点 ps:资产盘点单元格内是竖向的流式布局，数据要竖向循环-->
			<div class="left-content">
				<div class="title-bar">
					<div class="title-bar-pop">
						<span>预警统计</span>
					</div>
					</el-popover>
				</div>
				<div class="content-box h-220">
					<el-tabs v-model="activeName1" class="sj-top-tab">
						<el-tab-pane label="事件" name="sj">
							<div class="chart-contaier" @click="selectedDiv = 2">
								<div class="chart-con" id="sjChart"></div>
								<div class="chart-con-num">
									<div class="chart-con-num-rig">
										<img src="../assets/index_img/sj-bg-1.png" alt="">
										<h6>已完成</h6>
										<h5>5</h5>
									</div>
									<div class="chart-con-num-rig">
										<img src="../assets/index_img/sj-bg-2.png" alt="">
										<h6>待处理</h6>
										<h5>5</h5>
									</div>
									<div class="chart-con-num-rig">
										<img src="../assets/index_img/sj-bg-3.png" alt="">
										<h6>处理中</h6>
										<h5>10</h5>
									</div>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="行业" name="hy">
							<div class="chart-contaier">
								<div class="chart-con2" id="hyChart" style="height: 200px !important;"></div>
							</div>
						</el-tab-pane>
<!--						<el-tab-pane label="隐患" name="yh">-->
<!--							<div class="chart-contaier">-->
<!--								<div class="chart-con" id="sjChart"></div>-->
<!--							</div>-->
<!--						</el-tab-pane>-->
<!--						<el-tab-pane label="风险" name="fx">-->
<!--							<div class="chart-contaier">-->
<!--								<div class="chart-con" id="sjChart"></div>-->
<!--							</div>-->
<!--						</el-tab-pane>-->
<!--						<el-tab-pane label="任务" name="rw">-->
<!--							<div class="chart-contaier">-->
<!--								<div class="chart-con" id="sjChart"></div>-->
<!--							</div>-->
<!--						</el-tab-pane>-->
					</el-tabs>
				</div>

				<div class="title-bar m-t-3">
					<span>巡查轨迹统计分析</span>
					<div class="num">
            {{ xcgjTotal }}个
					</div>
				</div>
				<div class="content-box h-220" @click="dialogVisibleXcgj = true">
					<div class="chart-contaier">
						<div class="chart-con2" id="xcChart"></div>
					</div>
				</div>
				<div class="title-bar m-t-3">
						<div class="title-bar-pop">
							<span>年度计划</span>
						</div>
<!--						<el-select v-model="value5" placeholder="请选择" class="sj-select-50" popper-class="sj-s-pop">-->
<!--							<el-option v-for="item in options5" :key="item.value" :label="item.label"-->
<!--								:value="item.value">-->
<!--							</el-option>-->
<!--						</el-select>-->
<!--						<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input1"-->
<!--							class="sj-input-style">-->
<!--						</el-input>-->
<!--						<div class="list-ul-style-tit">-->
<!--							<span style="width: 40px;">序号</span>-->
<!--							<span style="width:60%">计划名称</span>-->
<!--							<span style="width:65px">改造长度</span>-->
<!--						</div>-->
<!--						<ul class="list-ul-style">-->
<!--							<li>-->
<!--								<span style="width: 40px;">1</span>-->
<!--								<span style="width:60%">紫气大街66号3号管道改造</span>-->
<!--								<span style="width:65px">1.5km</span>-->
<!--							</li>-->
<!--							<li>-->
<!--								<span>2</span>-->
<!--								<span>紫气大街66号3号管道改造</span>-->
<!--								<span>1.5km</span>-->
<!--							</li>-->
<!--							<li>-->
<!--								<span>3</span>-->
<!--								<span>紫气大街66号3号管道改造</span>-->
<!--								<span>1.5km</span>-->
<!--							</li>-->
<!--							<li>-->
<!--								<span>4</span>-->
<!--								<span>紫气大街66号3号管道改造</span>-->
<!--								<span>1.5km</span>-->
<!--							</li>-->
<!--							<li>-->
<!--								<span>5</span>-->
<!--								<span>紫气大街66号3号管道改造</span>-->
<!--								<span>1.5km</span>-->
<!--							</li>-->
<!--							<li>-->
<!--								<span>6</span>-->
<!--								<span>紫气大街66号3号管道改造</span>-->
<!--								<span>1.5km</span>-->
<!--							</li><strong></strong>-->
<!--						</ul>-->

<!--						<div slot="reference" style="cursor: pointer;">年度计划</div>-->
					<div class="num">
						{{yearlyTaskStatisticsTotal}}个
					</div>
				</div>
				<div class="content-box h-220">
					<div class="chart-contaier">
						<div class="chart-con2" style="height: 190px !important;" id="ndChart"></div>
					</div>
				</div>
			</div>
			<!--预警列表-->
			<div class="right-content">
				<div class="title-bar m-t-3">
					<span>预警列表</span>
					<div class="num">
						20个
					</div>
				</div>
				<div class="content-box h-530 p-15" style="height: 460px !important">
					<div class="box-row flex-c" style="justify-content: flex-start;">
						<el-select v-model="industry" placeholder="请选择" clearable class="sj-select-100" popper-class="sj-s-pop">
							<el-option v-for="item in industryList" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="eventName"
							class="sj-input-style">
						</el-input>
						<div class="list-ul-style-tit list-ul-100-tit">
              <span style="width: 60%;">事件名称</span>
              <span style="width: 70px;">催办情况</span>
							<span style="width: 65px;">处理情况</span>
						</div>
						<ul class="list-ul-style list-ul-100" style="height: 63.5% !important;">
							<li v-for="item in eventList" :key="item.id"  @click="openEventDetail(item)">
                <span style="width: 60%;">{{ item.eventTitle }}</span>
                <span style="width: 70px;">{{ item.expediteStatusLabel}}</span>
								<span style="width: 65px;"
									:class=" item.eventStatusLabel == '已完成' ? 'green-txt' : 'blue-txt' ">{{ item.eventStatusLabel }}</span>
							</li>
							<strong></strong>
						</ul>

					</div>
				</div>
				<div class="title-bar m-t-3">
					<span>图例</span>
					<div class="sj-form">
						<el-radio-group v-model="legend" class="sj-radio">
							<el-radio-button label="二维"></el-radio-button>
							<el-radio-button label="三维"></el-radio-button>
						</el-radio-group>
            <el-checkbox-group class="sj-check mar-left" v-model="checkedBaseDOptions" @change="layerCheck">
              <el-checkbox v-for="e in addVectorTilesMapList" :label="e.id" :key="e.id">
                {{ e.name }}
              </el-checkbox>
            </el-checkbox-group>
					</div>
				</div>
				<div class="content-box2 h-170" style="height: 240px!important; overflow: hidden scroll;">
          <el-tabs v-if="legend=='二维'" v-model="legendLayer" class="sj-top-tab sj-normal-tab">
            <el-tab-pane label="燃气" name="1">
              <div style="height: 90px; overflow-y: scroll;">
                <el-tree
                  :props="props"
                  ref="twoDLayers_ranqi_height"
                  :data="twoDLayers_ranqi_height"
                  show-checkbox
                  class="layers_ranqi_height"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="twoDLayers_ranqi_middle"
                  :data="twoDLayers_ranqi_middle"
                  show-checkbox
                  class="layers_ranqi_middle"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="twoDLayers_ranqi_low"
                  :data="twoDLayers_ranqi_low"
                  show-checkbox
                  class="layers_ranqi_low"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
              </div>
            </el-tab-pane>
            <el-tab-pane label="供热" name="2">
              <div style="height: 90px; overflow-y: scroll;">
                <el-tree
                  :props="props"
                  ref="twoDLayers_gongre_yici"
                  :data="twoDLayers_gongre_yici"
                  show-checkbox
                  class="layers_gongre_yici"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="twoDLayers_gongre_erci"
                  :data="twoDLayers_gongre_erci"
                  show-checkbox
                  class="layers_gongre_erci"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="twoDLayers_gongre_zhigong"
                  :data="twoDLayers_gongre_zhigong"
                  show-checkbox
                  class="layers_gongre_zhigong"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
              </div>
            </el-tab-pane>
            <el-tab-pane label="供水" name="3">
              <div style="height: 90px; overflow-y: scroll;">
                <el-tree
                  :props="props"
                  ref="twoDLayers_gongshui"
                  :data="twoDLayers_gongshui"
                  show-checkbox
                  class="layers_gongshui"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
              </div>
            </el-tab-pane>
            <el-tab-pane label="排水" name="4">
              <div style="height: 90px; overflow-y: scroll;">
                <el-tree
                  :props="props"
                  ref="twoDLayers_paishui_yushui"
                  :data="twoDLayers_paishui_yushui"
                  show-checkbox
                  class="layers_paishui_yushui"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="twoDLayers_paishui_wushui"
                  :data="twoDLayers_paishui_wushui"
                  show-checkbox
                  class="layers_paishui_wushui"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="twoDLayers_paishui_heliu"
                  :data="twoDLayers_paishui_heliu"
                  show-checkbox
                  class="layers_paishui_heliu"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
              </div>
            </el-tab-pane>
<!--            <el-tab-pane label="管廊" name="5">-->
<!--              <el-checkbox-group class="sj-check" v-model="checkedOptions" @change="handleCheckedOptions()">-->
<!--                <el-checkbox v-for="e in twoDLayers_guanlang" :label="e.url" :class="e.class">-->
<!--                  {{ e.type }}-->
<!--                </el-checkbox>-->
<!--              </el-checkbox-group>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="桥梁" name="6">-->
<!--            </el-tab-pane>-->
            <div class="map-btn-con">
								<span>
									<el-button class="sj-btn-icon" @click="showExcavation()"><img src="../assets/index_img/icon-kw.png"/>开挖</el-button>
                  <el-button class="sj-btn-icon" @click="choseMeasuringDistance()"><img src="../assets/index_img/icon-cl.png"/>测距</el-button>
									<el-button class="sj-btn-icon" @click="choseMeasuringArea()"><img src="../assets/index_img/icon-cl.png"/>测面</el-button>
									<el-button class="sj-btn-icon" @click="choseMeasuringHeight()"><img src="../assets/index_img/icon-cl.png"/>测高</el-button>
                  <el-button class="sj-btn-icon" @click="clearAll()"><img src="../assets/index_img/icon-qc.png"/>清除</el-button>
								</span>
            </div>
          </el-tabs>
					<el-tabs v-if="legend=='三维'" v-model="legendLayer" class="sj-top-tab sj-normal-tab">
            <el-tab-pane label="燃气" name="1">
              <div style="height: 90px; overflow-y: scroll;">
                <el-tree
                  :props="props"
                  ref="threeDLayers_ranqi_height"
                  :data="threeDLayers_ranqi_height"
                  show-checkbox
                  class="layers_ranqi_height"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="threeDLayers_ranqi_middle"
                  :data="threeDLayers_ranqi_middle"
                  show-checkbox
                  class="layers_ranqi_middle"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="threeDLayers_ranqi_low"
                  :data="threeDLayers_ranqi_low"
                  show-checkbox
                  class="layers_ranqi_low"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
              </div>
            </el-tab-pane>
            <el-tab-pane label="供热" name="2">
              <div style="height: 90px; overflow-y: scroll;">
                <el-tree
                  :props="props"
                  ref="threeDLayers_gongre_yici"
                  :data="threeDLayers_gongre_yici"
                  show-checkbox
                  class="layers_gongre_yici"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="threeDLayers_gongre_erci"
                  :data="threeDLayers_gongre_erci"
                  show-checkbox
                  class="layers_gongre_erci"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="threeDLayers_gongre_zhigong"
                  :data="threeDLayers_gongre_zhigong"
                  show-checkbox
                  class="layers_gongre_zhigong"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
              </div>
            </el-tab-pane>
            <el-tab-pane label="供水" name="3">
              <div style="height: 90px; overflow-y: scroll;">
                <el-tree
                  :props="props"
                  ref="threeDLayers_gongshui"
                  :data="threeDLayers_gongshui"
                  show-checkbox
                  class="layers_gongshui"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
              </div>
            </el-tab-pane>
            <el-tab-pane label="排水" name="4">
              <div style="height: 90px; overflow-y: scroll;">
                <el-tree
                  :props="props"
                  ref="threeDLayers_paishui_yushui"
                  :data="threeDLayers_paishui_yushui"
                  show-checkbox
                  class="layers_paishui_yushui"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="threeDLayers_paishui_wushui"
                  :data="threeDLayers_paishui_wushui"
                  show-checkbox
                  class="layers_paishui_wushui"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
                <el-tree
                  :props="props"
                  ref="threeDLayers_paishui_heliu"
                  :data="threeDLayers_paishui_heliu"
                  show-checkbox
                  class="layers_paishui_heliu"
                  node-key="id"
                  @check="handleCheckChange">
                </el-tree>
              </div>
            </el-tab-pane>
<!--						<el-tab-pane label="管廊" name="5">-->
<!--              <el-checkbox-group class="sj-check" v-model="checkedOptions" @change="handleCheckedOptions()">-->
<!--                <el-checkbox v-for="e in threeDLayers_guanlang" :label="e.url" :class="e.class">-->
<!--                  {{ e.type }}-->
<!--                </el-checkbox>-->
<!--              </el-checkbox-group>-->
<!--						</el-tab-pane>-->
<!--						<el-tab-pane label="桥梁" name="6">-->
<!--						</el-tab-pane>-->
            <div class="map-btn-con">
								<span>
									<el-button class="sj-btn-icon" @click="showExcavation()"><img src="../assets/index_img/icon-kw.png"/>开挖</el-button>
                  <el-button class="sj-btn-icon" @click="choseMeasuringDistance()"><img src="../assets/index_img/icon-cl.png"/>测距</el-button>
									<el-button class="sj-btn-icon" @click="choseMeasuringArea()"><img src="../assets/index_img/icon-cl.png"/>测面</el-button>
									<el-button class="sj-btn-icon" @click="choseMeasuringHeight()"><img src="../assets/index_img/icon-cl.png"/>测高</el-button>
                  <el-button class="sj-btn-icon" @click="clearAll()"><img src="../assets/index_img/icon-qc.png"/>清除</el-button>
								</span>
            </div>
					</el-tabs>
				</div>
			</div>

			<!-- 地图 -->
			<supermap ref="supermap" style="width: 100%;height: 100vh;">
			</supermap>

		</div>
		<el-dialog title="事件详情" :visible.sync="dialogVisibleSj" width="90%" class="sj-dialog-newstyle">
			<div class="sj-jcxx">
				<div class="tit">
					事件基本信息
				</div>
				<div class="sj-jcxx-con">
					<div class="con-20">
						<img src="../assets/index_img/d-icon-tit-img.png">
						事件名称：超级大街燃气泄漏
					</div>
					<div class="con-20">
						<img src="../assets/index_img/d-icon-tit-img.png">
						所属行业：燃气
					</div>
					<div class="con-20">
						<img src="../assets/index_img/d-icon-tit-img.png">
						事件等级：一级
					</div>
					<div class="con-20">
						<img src="../assets/index_img/d-icon-tit-img.png">
						事件状态：已处理
					</div>
					<div class="con-20">
						<img src="../assets/index_img/d-icon-tit-img.png">
						事件类型：？？？
					</div>
					<div class="con-20">
						<img src="../assets/index_img/d-icon-tit-img.png">
						事件时间：2025/02/06 13:45:11
					</div>
					<div class="con-20">
						<img src="../assets/index_img/d-icon-tit-img.png">
						报警来源：压力传感器0025332
					</div>
					<div class="con-20 con-50">
						<img src="../assets/index_img/d-icon-tit-img.png">
						报警原因：燃气泄漏
					</div>

				</div>
			</div>
			<div class="sj-jcxx">
				<div class="tit">
					事件处理流程
				</div>
				<div class="sj-jcxx-con" style="height: 85px; margin-top: 20px;">
					<div class="z-line"></div>
					<div class="triangle"></div>
					<div class="z-lc m60">
						<img src="../assets/index_img/jslc-icon.png" />
						事件发起
						<div class="z-lc-time">
							2025/02/06 11:45:11
						</div>
						<el-tooltip class="item" v-if="true" placement="top" popper-class="sj-tooltip">
							<div slot="content" class="info-list">
								<span>处理意见：案例手动封口机案例谁都快放假</span>
								<span>处理意见：案例手动封口机案例谁都快案例手动封口放假</span>
								<span>处理意见：案例手动封口机案例手动封口机案例谁都快放假快放假</span>
								<span>处理意见：案例手动封口机案例谁都快放假案例手动封口机案例谁都快放假</span>
							</div>
							<div class="z-clyj">
								<img src="../assets/index_img/clyj-icon.png" />
							</div>
						</el-tooltip>
					</div>
					<div class="z-lc">
						<img src="../assets/index_img/jslc-icon.png" />
						事件签收
					</div>
					<div class="z-lc">
						<img src="../assets/index_img/jslc-icon.png" />
						事件处理
					</div>
					<div class="z-lc">
						<img src="../assets/index_img/jslc-icon.png" />
						事件办结
					</div>

				</div>
			</div>
			<div class="sj-jcxx" style="width:40%">
				<div class="tit">
					现场画面
				</div>
				<div class="sj-jcxx-con" style="width: 100%; height: 435px; margin-top: 20px;">
					<img src="../assets/index_img/temp-sp.png" width="100%" height="435px" />
				</div>
			</div>
			<div class="sj-jcxx" style="width:59%">
				<div class="tit">
					监测数值
				</div>
				<div class="sj-jcxx-con"
					style="margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start;">
					<div class="con-20 con-100">
						<img src="../assets/index_img/d-icon-tit-img.png">
						报警设备：压力传感器0025332
					</div>
					<div class="con-20 con-100">
						<img src="../assets/index_img/d-icon-tit-img.png">
						报警原因：<span class="or">压力值异常</span>
					</div>
					<div class="con-20 con-100">
						<img src="../assets/index_img/d-icon-tit-img.png">
						异常数值：<span class="or">压力12</span>
					</div>
					<div class="con-20 con-100">
						<img src="../assets/index_img/d-icon-tit-img.png">
						事件预警影响：208户
					</div>
					<div class="con-20 con-100">
						<img src="../assets/index_img/d-icon-tit-img.png">
						应急预案匹配：<span class="bl">附件1应急预案</span>
					</div>
					<div class="con-20 con-100">
						<img src="../assets/index_img/d-icon-tit-img.png">
						当前处理人员：张三
					</div>
					<div class="con-20 con-100">
						<img src="../assets/index_img/d-icon-tit-img.png">
						处理人员电话：188277639002
					</div>
				</div>
			</div>
		</el-dialog>

		<el-dialog title="巡查轨迹统计分析" :visible.sync="dialogVisibleXcgj" @open="open()" width="80%" class="sj-dialog-newstyle" >
			<div class="box-row" style="width: 100%;">
				<div class="chart_div flex-c" style="width:40%">
					<div class="xcgj_chart">
						<div class="chart_tit">巡查任务完成度</div>
						<div ref="xcrwChart" id="xcrwChart"></div>
					</div>
					<div class="xcgj_chart">
						<div class="chart_tit">巡查轨迹公里数</div>
						<div ref="xcgjChart" id="xcgjChart"></div>
					</div>
				</div>
				<div class="xcgj_list">
					<el-table :data="tableData" height="615" style="width: 100%">
						<el-table-column prop="taskName" label="任务名称">
						</el-table-column>
						<el-table-column prop="userName" label="巡查人员">
						</el-table-column>
						<el-table-column prop="startTime" label="巡查开始时间">
						</el-table-column>
						<el-table-column prop="endTime" label="巡查结束时间">
						</el-table-column>
					</el-table>
          <el-pagination @current-change="selectPatrolInspectionDataList" :current-page="pagerCount" :page-size="pageSize"
                         layout="total, prev, pager, next" :total="taskTotal">
          </el-pagination>
				</div>
			</div>

		</el-dialog>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	import supermap from '@/components/supermap-2.5d' //超图
	import weatherHeader from '@/components/weatherHeader'
	import {
		getUserProfile
	} from "@/api/system/user";

	import '../assets/styles/hz_body.css';

	import {
		selectConfigKey
	} from "@/api/system/config";

	import * as echarts from 'echarts'
  import { queryVectorTilesMapList } from '@/api/components/supermap'
  import {annualPlanCount, closedPatrolTaskCount, patrolTaskCount, patrolTrackDistance} from "@/api/Regulatory";
  import { selectPatrolInspectionDataList, selectThresholdList } from '@/api/tableInfo'
  import { getEventDetail, selectEventList } from '@/api/eventLifeLine'

	export default {
		components: {
			supermap,
			weatherHeader
		},
		metaInfo() {
			return {
				title: '四平市城市生命线',
				meta: [{
						charset: "utf-8"
					},
					{
						name: "viewport",
						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
					}
				]
			}
		},
		created() {

		},
		mounted() {
      this.time()
			// 初始化地图数据
			this.getSuperMapUrl();
      this.queryVectorTilesMapList();
			setTimeout(() => {
				this.title = '四平市城市生命线'
			}, 1000);
			this.sjChart();
			this.hyChart();
			this.ndChart();
			this.xcChart();
      this.selectEventList();
		},
		computed: {

		},
		data() {
			return {
        props: {
          label: 'name',
          children: 'children'
        },
        yearlyTaskStatisticsTotal:0,
        checkedBaseDOptions: [],
        addVectorTilesMapList: [],
        checkedOptions: [],
        xcgjTotal:0,

        twoDLayers_ranqi_height:[
          {
            id: '1',
            name: '次高压',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '1-1',
                name: '华生',
                url: [null, '/map-HuaSheng/rest/maps/huasheng_cigao']
              },
              {
                id: '1-2',
                name: '港华',
                url: [null, '/map-GangHua-2/rest/maps/GH_cigao']
              },
              {
                id: '1-3',
                name: '奥德',
                url: [null, '/map-Aode-2/rest/maps/aode_cigao']
              },
              {
                id: '1-4',
                name: '润发',
                url: [null, '/map-RunFaRanQi-2/rest/maps/runfa_cigao']}
            ]
          },
        ],
        twoDLayers_ranqi_middle:[
          {
            id: '2',
            name: '中压',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '2-1',
                name: '华生',
                url: [null, '/map-HuaSheng/rest/maps/huasheng_zhong']
              },
              {
                id: '2-2',
                name: '港华',
                url: [null, '/map-GangHua-2/rest/maps/GH_zhong']
              },
              // {
              // id: '2-3',
              //   name: '奥德',
              //   url: [null, null]
              // },
              {
                id: '2-4',
                name: '润发',
                url: [null, '/map-RunFaRanQi-2/rest/maps/runfa_zhong']
              }
            ]
          },
        ],
        twoDLayers_ranqi_low:[
          {
            id: '3',
            name: '低压',
            url: [null, null],
            class: 'dy',
            children: [
              // {
              // id: '3-1',
              //   name: '华生',
              //   url: [null, null]
              // },
              {
                id: '3-2',
                name: '港华',
                url: [null, '/map-GangHua-2/rest/maps/GH_di']
              },
              // {
              // id: '3-3',
              //   name: '奥德',
              //   url: [null, null]
              // },
              // {
              // id: '3-4',
              //   name: '润发',
              //   url: [null, null]
              // }
            ]
          }
        ],
        threeDLayers_ranqi_height:[
          {
            id: '4',
            name: '次高压',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '4-1',
                name: '华生',
                url: ['/3D-huasheng_cigao/rest/realspace', null]
              },
              {
                id: '4-2',
                name: '港华',
                url: ['/3D-GH_cigao/rest/realspace', null]
              },
              {
                id: '4-3',
                name: '奥德',
                url: ['/3D-aode_cigao/rest/realspace', null]
              },
              {
                id: '4-4',
                name: '润发',
                url: ['/3D-runfa_cigao/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_ranqi_middle:[
          {
            id: '5',
            name: '中压',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '5-1',
                name: '华生',
                url: ['/3D-huasheng_zhong/rest/realspace', null]
              },
              {
                id: '5-2',
                name: '港华',
                url: ['/3D-GH_zhong/rest/realspace', null]
              },
              // {
              // id: '5-3',
              //   name: '奥德',
              //   url: [null, null]
              // },
              {
                id: '5-4',
                name: '润发',
                url: ['/3D-runfa_zhong/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_ranqi_low:[
          {
            id: '6',
            name: '低压',
            url: [null, null],
            class: 'dy',
            children: [
              // {
              // id: '6-1',
              //   name: '华生',
              //   url: [null, null]
              // },
              {
                id: '6-2',
                name: '港华',
                url: ['/3D-GH_di/rest/realspace', null]
              },
              // {
              // id: '6-3',
              //   name: '奥德',
              //   url: [null, null]
              // },
              // {
              // id: '6-4',
              //   name: '润发',
              //   url: [null, null]
              // }
            ]
          }
        ],


        twoDLayers_gongre_yici:[
          {
            id: '1',
            name: '一次网',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '1-1',
                name: '铁东一次网',
                url: [null, '/map-RLyicierci-2/rest/maps/TD_yiciwang']
              },
              {
                id: '1-2',
                name: '铁西一次网',
                url: [null, '/map-RLyicierci-2/rest/maps/TX_yiciwang']
              }
            ]
          },
        ],
        twoDLayers_gongre_erci:[
          {
            id: '2',
            name: '二次网',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '2-1',
                name: '铁东二次网',
                url: [null, '/map-RLyicierci-2/rest/maps/TD_erciwang']
              },
              {
                id: '2-2',
                name: '铁西二次网',
                url: [null, '/map-RLyicierci-2/rest/maps/TX_erciwang']
              }
            ]
          },
        ],
        twoDLayers_gongre_zhigong:[
          {
            id: '3',
            name: '直供管',
            url: [null, null],
            class: 'dy',
            children: [
              {
                id: '3-1',
                name: '直供管',
                url: [null, '/map-DianRe/rest/maps/DianRe_zhigong_TD']
              },
            ]
          }
        ],

        threeDLayers_gongre_yici:[
          {
            id: '4',
            name: '一次网',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '4-1',
                name: '铁东一次网',
                url: ['/3D-TD_yiciwang/rest/realspace', null]
              },
              {
                id: '4-2',
                name: '铁西一次网',
                url: ['/3D-TX_yiciwang/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_gongre_erci:[
          {
            id: '5',
            name: '二次网',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '5-1',
                name: '铁东二次网',
                url: ['/3D-TD_erciwang_xian/rest/realspace', null]
              },
              {
                id: '5-2',
                name: '铁西二次网',
                url: ['/3D-TX_erciwang_xian/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_gongre_zhigong:[
          {
            id: '6',
            name: '直供管',
            url: [null, null],
            class: 'dy',
            children: [
              {
                id: '6-1',
                name: '直供管',
                url: [null, '/map-DianRe/rest/maps/DianRe_zhigong_TD']
              },
            ]
          }
        ],

        twoDLayers_paishui_yushui:[
          {
            id: '1',
            name: '雨水管',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '1-1',
                name: '铁西雨水管',
                url: [null, '/map-PaiShui-2/rest/maps/TX_pai_yushui']
              },
              {
                id: '1-2',
                name: '铁东雨水管',
                url: [null, '/map-PaiShui-2/rest/maps/TD_pai_yushui']
              }
            ]
          },
        ],
        twoDLayers_paishui_wushui:[
          {
            id: '2',
            name: '污水管',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '2-1',
                name: '铁西污水管',
                url: [null, '/map-PaiShui-2/rest/maps/TX_pai_wushui']
              },
              {
                id: '2-2',
                name: '铁东污水管',
                url: [null, '/map-PaiShui-2/rest/maps/TD_pai_wushui']
              }
            ]
          },
        ],
        twoDLayers_paishui_heliu:[
          {
            id: '3',
            name: '合流管',
            url: [null, null],
            class: 'dy',
            children: [
              {
                id: '3-1',
                name: '铁西合流管',
                url: [null, '/map-PaiShui-2/rest/maps/TX_pai_heliu']
              },
              {
                id: '3-2',
                name: '铁东合流管',
                url: [null, '/map-PaiShui-2/rest/maps/TD_pai_heliu']
              },
            ]
          }
        ],
        threeDLayers_paishui_yushui:[
          {
            id: '4',
            name: '雨水管',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '4-1',
                name: '铁西雨水管',
                url: ['/3D-TX_pai_yushui/rest/realspace', null]
              },
              {
                id: '4-2',
                name: '铁东雨水管',
                url: ['/3D-TD_pai_yushui/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_paishui_wushui:[
          {
            id: '5',
            name: '污水管',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '5-1',
                name: '铁西污水管',
                url: ['/3D-TX_pai_wushui/rest/realspace', null]
              },
              {
                id: '5-2',
                name: '铁东污水管',
                url: ['/3D-TD_pai_wushui/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_paishui_heliu:[
          {
            id: '6',
            name: '河流',
            url: [null, null],
            class: 'dy',
            children: [
              {
                id: '6-1',
                name: '铁西合流管',
                url: ['/3D-TX_pai_heliu/rest/realspace', null]
              },
              {
                id: '6-2',
                name: '铁东合流管',
                url: ['/3D-TD_pai_heliu/rest/realspace', null]
              },
            ]
          }
        ],

        twoDLayers_gongshui:[
          {
            id: '1',
            name: '给水',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '1-1',
                name: '铁东给水',
                url: [null, '/map-ShuiWuGeiShui-2/rest/maps/TD_geishui']
              },
              {
                id: '1-2',
                name: '铁西给水',
                url: [null, '/map-ShuiWuGeiShui-2/rest/maps/TX_geishui']
              }
            ]
          },
        ],
        threeDLayers_gongshui:[
          {
            id: '4',
            name: '给水',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '4-1',
                name: '铁东给水',
                url: ['/3D-TD_geishui-2/rest/realspace', null]
              },
              {
                id: '4-2',
                name: '铁西给水',
                url: ['/3D-TX_geishui-2/rest/realspace', null]
              }
            ]
          },
        ],

        twoDLayers_guanlang: [],
        threeDLayers_guanlang: [],


				myChart1: null,
				myChart2: null,
				input: '',
				activeName: 'first',
				activeName1: 'sj',
				activeName22: '1',
				legendLayer: '1',
				legend: '二维',
				checkList1: ['路网图'],
				checkList3: [],
				checkedCities: [],
				dialogVisibleXcgj: false,
				tableData: [],
        pagerCount: 1,
        pageSize: 10,
        taskTotal: 0,
				options: [{
					value: '选项1',
					label: '铁东区'
				}, {
					value: '选项2',
					label: '铁西区'
				}, {
					value: '选项3',
					label: '梨树县'
				}, {
					value: '选项4',
					label: '伊通县'
				}, {
					value: '选项5',
					label: '双辽市'
				}],
				value: '',
				options2: [{
					value: '选项1',
					label: '铁东区'
				}, {
					value: '选项2',
					label: '铁西区'
				}, {
					value: '选项3',
					label: '梨树县'
				}, {
					value: '选项4',
					label: '伊通县'
				}, {
					value: '选项5',
					label: '双辽市'
				}],
				value2: '',
				options3: [{
					value: '选项1',
					label: '铁东区'
				}, {
					value: '选项2',
					label: '铁西区'
				}, {
					value: '选项3',
					label: '梨树县'
				}, {
					value: '选项4',
					label: '伊通县'
				}, {
					value: '选项5',
					label: '双辽市'
				}],
				value3: '',
        industryList: [
          {
            value: '1',
            label: '热力'
          }, {
            value: '2',
            label: '排水'
          }, {
            value: '3',
            label: '桥梁'
          }, {
            value: '4',
            label: '管廊'
          }, {
            value: '5',
            label: '燃气'
          }, {
            value: '6',
            label: '供水'
          }],
				industry: '',
				options5: [{
					value: '选项1',
					label: '铁东区'
				}, {
					value: '选项2',
					label: '铁西区'
				}, {
					value: '选项3',
					label: '梨树县'
				}, {
					value: '选项4',
					label: '伊通县'
				}, {
					value: '选项5',
					label: '双辽市'
				}],
				value5: '',
				options6: [{
					value: '选项1',
					label: '铁东区'
				}, {
					value: '选项2',
					label: '铁西区'
				}, {
					value: '选项3',
					label: '梨树县'
				}, {
					value: '选项4',
					label: '伊通县'
				}, {
					value: '选项5',
					label: '双辽市'
				}],
				value6: '',
				options7: [{
					value: '选项1',
					label: '铁东区'
				}, {
					value: '选项2',
					label: '铁西区'
				}, {
					value: '选项3',
					label: '梨树县'
				}, {
					value: '选项4',
					label: '伊通县'
				}, {
					value: '选项5',
					label: '双辽市'
				}
        ],
				value7: '',
				input1: '',
				eventName: '',
				dialogVisibleSj: false,
				currentTab: 0,
				currentClass: 0,
				tabList: ['四平市', '铁东区', '铁西区'],
				numS: 2,
				assetInventoryRq: [
          {
						name: '燃气管线',
						num: 930,
						unit: 'km',
						itemInfo: [{
								name: '次高压',
								num: 577
							},
							{
								name: '中压',
								num: 286.707
							},
							{
								name: '低压',
								num: 577
							}
						]
					},
					{
						name: '服务用户',
						num: 257005,
						unit: '户',
						itemInfo: [{
								name: '居民户',
								num: 252906
							},
							{
								name: '商业户',
								num: 3999
							},
							{
								name: '工业户',
								num: 100
							}
						]
					},
					{
						name: '钢瓶用户',
						num: 5339,
						unit: '户',
						itemInfo: [{
								name: '居民',
								num: 4098
							},
							{
								name: '商业户',
								num: 1241
							},
						]
					},
					{
						name: '钢瓶数量',
						num: 59021,
						unit: '个',
						itemInfo: [{
								name: '顺安',
								num: 35366
							},
							{
								name: '诚光',
								num: 10485
							},
							{
								name: '宏远',
								num: 11179
							},
							{
								name: '盛达',
								num: 995
							},
							{
								name: '洋昊',
								num: 996
							},
						]
					},
					{
						name: '设备资产',
						num: 5339,
						unit: '个',
						itemInfo: [{
								name: '住建局',
								num: 3107
							},
							{
								name: '华生',
								num: 92
							},
							{
								name: '奥德',
								num: 14
							},
							{
								name: '港华',
								num: 7
							},
							{
								name: '润发',
								num: 3
							},
						]
					},

				],
				assetInventoryGr: [
          {
						name: '供热管线',
						num: 1661.5,
						unit: 'km',
						itemInfo: [{
								name: '一次网',
								num: 370
							},
							{
								name: '二次网',
								num: 1290
							},
							{
								name: '直供网',
								num: 1.5
							}
						]
					},
					{
						name: '服务用户',
						num: 257005,
						unit: '户',
						itemInfo: [{
								name: '居民户',
								num: '?'
							},
							{
								name: '商业户',
								num: '?'
							},
							{
								name: '工业户',
								num: '?'
							}
						]
					},
					{
						name: '设备资产',
						num: 8536,
						unit: '套',
						itemInfo: [{
								name: '温度',
								num: 2915
							},
							{
								name: '压力',
								num: 3839
							},
							{
								name: '流量',
								num: 1782
							},
						]
					},

				],
				assetInventoryPs: [
          {
						name: '排水管道',
						num: 557.66,
						unit: 'km',
						itemInfo: [{
								name: '雨水网',
								num: 209.792
							},
							{
								name: '二次网',
								num: 195.613
							},
							{
								name: '直供网',
								num: 152.154
							}
						]
					},
					{
						name: '设备资产',
						num: 137,
						unit: '套',
						itemInfo: [{
								name: '雨量计',
								num: '4'
							},
							{
								name: '摄像头',
								num: '39'
							},
							{
								name: '流量计',
								num: '31'
							},
							{
								name: '水质',
								num: '?'
							},
							{
								name: '流量',
								num: '43'
							},
							{
								name: '水位计',
								num: '20'
							}
						]
					},

				],
				assetInventoryGs: [
          {
						name: '供水管线',
						num: 245,
						unit: 'km',
					},
					{
						name: '设备资产',
						num: 144,
						unit: '套',
						itemInfo: [{
								name: '压力',
								num: '28'
							},
							{
								name: '流速',
								num: '116'
							},
							{
								name: '流量',
								num: '100'
							}
						]
					},

				],
				assetInventoryGl: [
          {
						name: '管廊管线',
						num: 48,
						unit: 'km',
					},
					{
						name: '设备资产',
						num: 5339,
						unit: '户',
						itemInfo: [{
								name: '硫化物',
								num: '422'
							},
							{
								name: '甲烷',
								num: '422'
							},
							{
								name: '温湿度',
								num: '422'
							},
							{
								name: '氧气',
								num: '506'
							},
							{
								name: '一氧化碳',
								num: '338'
							},
							{
								name: '摄像头',
								num: '1110'
							},
							{
								name: '液位仪',
								num: '276'
							}
						]
					},

				],
				assetInventoryQl: [
          {
						name: '桥梁管线',
						num: 2,
						unit: '座',
					},
					{
						name: '设备资产',
						num: 505,
						unit: '套',
						itemInfo: [{
								name: '摄像头',
								num: '4'
							},
							{
								name: 'GPS',
								num: '4'
							},
							{
								name: '水准仪',
								num: '25'
							},
							{
								name: '倾角仪',
								num: '6'
							},
							{
								name: '索力计',
								num: '96'
							},
							{
								name: '位移计',
								num: '28'
							},
							{
								name: '光纤光栅应变计',
								num: '262'
							},
							{
								name: '加速度计',
								num: '28'
							},
							{
								name: '气象站',
								num: '6'
							},
							{
								name: '三项加速度计',
								num: '4'
							},
							{
								name: '振弦式应变计',
								num: '42'
							},
						]
					},

				],
				selectedDiv: 1, // 当前选中的div的编号
        eventList:[],
			}
		},
		methods: {
      goToHomePage() {
        window.location.href = '/homePage';
      },
      time() {
        let dt = new Date();
        let y = dt.getFullYear();
        let mt = dt.getMonth() + 1;
        mt = mt >= 10 ? mt : '0' + mt
        let day = dt.getDate() >= 10 ? dt.getDate() : '0' + dt.getDate();
        let h = dt.getHours() >= 10 ? dt.getHours() : '0' + dt.getHours();
        let m = dt.getMinutes() >= 10 ? dt.getMinutes() : '0' + dt.getMinutes();
        let s = dt.getSeconds() >= 10 ? dt.getSeconds() : '0' + dt.getSeconds();
        // document.getElementById("day").innerHTML = y + "年" + mt + "月" + day + "日";//2022年1月17日
        document.getElementById("day").innerHTML = y + "." + mt + "." + day + ""; //2022年1月17日
        document.getElementById("time").innerHTML = h + ":" + m + ":" + s; //16:28:03
        setTimeout(() => {
          this.time()
        }, 1000);
      },
			toUrl(url) {
				this.$router.push(url);
			},
			//事件统计chart
			sjChart() {
				var myChart = echarts.init(document.getElementById("sjChart"));
				var scaleData = [{
						name: "处理中",
						value: 10,
					},
					{
						name: "待处理",
						value: 5,
					},
					{
						name: "已完成",
						value: 5,
					},

				];
				var rich = {
					white: {
						color: "#ddd",
						align: "center",
						padding: [5, 0],
					},
				};
				var placeHolderStyle = {
					normal: {
						label: {
							show: false,
						},
						labelLine: {
							show: false,
						},
						color: "rgba(0, 0, 0, 0)",
						borderColor: "rgba(0, 0, 0, 0)",
						borderWidth: 0,
					},
				};
				var data = [];
				var color = [

					"#00cfff",
					"#006ced",
					"#7af0aa",
				];
				for (var i = 0; i < scaleData.length; i++) {
					data.push({
						value: scaleData[i].value,
						name: scaleData[i].name,
						itemStyle: {
							normal: {
								borderWidth: 10,
								shadowBlur: 20,
								borderColor: color[i],
								shadowColor: color[i],
							},
						},
					}, {
						value: 2,
						name: "",
						itemStyle: placeHolderStyle,
					});
				}
				var seriesObj = [{
					name: "",
					type: "pie",
					clockWise: false,
					radius: [65, 70],
					hoverAnimation: false,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: "outside",
								color: "#ddd",
								formatter: function(params) {
									var percent = 0;
									var total = 0;
									for (var i = 0; i < scaleData.length; i++) {
										total += scaleData[i].value;
									}
									if (params.name !== "") {
										return params.name + "\n" + params.value;
									} else {
										return "";
									}
								},
								rich: rich,
							},
							labelLine: {
								length: 10,
								length2: 20,
								show: true,
								color: "#00ffff",
							},
						},
					},
					data: data,
				}, ];
				var option = {
					title: [{
							text: "事件总数",
							x: "center",
							top: "52%",
							textStyle: {
								color: "#FFFFFF",
								fontSize: 16,
								fontWeight: "100",
							},
						},
						{
							text: "20",
							x: "center",
							top: "30%",
							textStyle: {
								fontSize: "40",
								color: "#FFFFFF",
								fontFamily: "DINAlternate-Bold, DINAlternate",
								foontWeight: "600",
							},
						},
					],
					tooltip: {
						show: false,
					},
					legend: {
						show: false,
					},
					toolbox: {
						show: false,
					},
					series: seriesObj,
				};
				myChart.setOption(option);

			},
			//行业数量 统计chart
			hyChart() {
				var myChart = echarts.init(document.getElementById("hyChart"));
				var xData = [
					"燃气",
					"供热",
					"供水",
					"排水",
					"管廊",
					"桥梁"
				];
				var yData = [80, 87, 51, 81, 23, 45];
				var option = {
					color: ["#3398DB"],
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "line",
							lineStyle: {
								opacity: 0,
							},
						},
						formatter: function(prams) {
							return "行业数量" + prams[0].data;
						},
					},
					grid: {
						left: "0%",
						right: "0%",
						bottom: "0",
						top: "20%",
						height: "75%",
						containLabel: true,
						z: 22,
					},
					xAxis: [{
						type: "category",
						gridIndex: 0,
						data: xData,
						axisTick: {
							alignWithLabel: true,
						},
						axisLine: {
							lineStyle: {
								color: "#0c3b71",
							},
						},
						axisLabel: {
							show: true,
							color: "rgb(170,170,170)",
							fontSize: 16,
						},
					}, ],
					yAxis: [{
							type: "value",
							gridIndex: 0,
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLine: {
								lineStyle: {
									color: "#0c3b71",
								},
							},
							axisLabel: {
								color: "rgb(170,170,170)",
								formatter: "{value}",
							},
						},
						{
							type: "value",
							gridIndex: 0,
							splitNumber: 15,
							splitLine: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							splitArea: {
								show: true,
								areaStyle: {
									color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
								},
							},
						},
					],
					series: [{
							name: "计划数",
							type: "bar",
							barWidth: "30%",
							xAxisIndex: 0,
							yAxisIndex: 0,
							label: {
								normal: {
									show: true,
									position: "top",
									textStyle: {
										color: "#ffc72b",
										fontSize: 20,
									},
								},
							},
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "#00feff",
										},
										{
											offset: 0.5,
											color: "#027eff",
										},
										{
											offset: 1,
											color: "#0286ff",
										},
									]),
								},
							},
							data: yData,
							zlevel: 11,
						},
						{
							name: "背景",
							type: "bar",
							barWidth: "50%",
							xAxisIndex: 0,
							yAxisIndex: 1,
							barGap: "-135%",
							data: [100, 100, 100, 100, 100, 100, 100],
							itemStyle: {
								normal: {
									color: "rgba(255,255,255,0.2)",
								},
							},
							zlevel: 9,
						},
					],
				};

				myChart.setOption(option);

			},
      // 年度任务
      ndChart() {
        var myChart = echarts.init(document.getElementById("ndChart"));
        annualPlanCount().then(res => {
          if(res.data){
            this.yearlyTaskStatisticsTotal = ((res.data.counts.reduce((total, item) => total + item, 0)));
            var option = {
              animation: true,
              grid: {
                top: "10%",
                bottom: "20%",
                right: "5%",
              },
              tooltip: {
                show: true,
              },
              xAxis: {
                data: res.data.names,
                axisLine: {
                  show: false, //隐藏X轴轴线
                },
                axisTick: {
                  show: false, //隐藏X轴轴线
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(77, 128, 254, 0.2)",
                    width: 2,
                  },
                },
                axisLabel: {
                  show: true,
                  interval: 0,
                  // margin: 14,
                  fontSize: 12,
                  textStyle: {
                    color: "#a8d5ff", //X轴文字颜色
                  },
                },
              },
              yAxis: [
                {
                  type: "value",
                  gridIndex: 0,
                  min: 0,
                  //max: 100,
                  interval: 100,
                  // splitNumber: 4,
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: "rgba(77, 128, 254, 0.2)",
                      width: 2,
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "rgba(77, 128, 254, 0.2)",
                    },
                  },
                  axisLabel: {
                    show: true,
                    margin: 14,
                    fontSize: 13,
                    textStyle: {
                      color: "#a8d5ff",
                    },
                  },
                },
              ],
              series: [
                {
                  name: "年度任务",
                  type: "bar",
                  barWidth: 16,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true, //开启显示
                        position: "top", //在上方显示
                        textStyle: {
                          //数值样式
                          color: "#fff",
                          fontSize: 12,
                        },
                      },
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "rgba(146, 225, 255, 1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(0, 151, 251, 1)",
                        },
                      ]),
                    },
                  },
                  data: res.data.counts || [],
                  z: 10,
                  zlevel: 0,
                },
                {
                  // 分隔
                  type: "pictorialBar",
                  itemStyle: {
                    normal: {
                      color: "#0F375F",
                    },
                  },
                  symbolRepeat: "fixed",
                  symbolMargin: 6,
                  symbol: "rect",
                  symbolClip: true,
                  symbolSize: [18, 2],
                  symbolPosition: "start",
                  symbolOffset: [1, 1],
                  data: res.data.counts || [],
                  width: 2,
                  z: 0,
                  zlevel: 1,
                },
                {
                  type: "bar",
                  barGap: "-110%", // 设置外框粗细
                  data: res.data.counts || [],
                  barWidth: 16,
                  itemStyle: {
                    normal: {
                      color: "transparent", // 填充色
                      // barBorderRadius: 0, //圆角半径
                      label: {
                        // 标签显示位置
                        show: false,
                        position: "top", // insideTop 或者横向的 insideLeft
                      },
                    },
                  },
                  z: 0,
                },
                {
                  name: "背影",
                  type: "line",
                  smooth: true, //平滑曲线显示
                  showAllSymbol: false, //显示所有图形。
                  symbolSize: 0,
                  lineStyle: {
                    width: 0,
                  },
                  areaStyle: {
                    color: "rgba(0, 151, 251, 0.1)",
                  },
                  data: res.data.numList || [],
                  z: 5,
                },
              ],
              // dataZoom: [
              //   {
              //     type: "slider",
              //     show: false,
              //     xAxisIndex: [0],
              //     endValue: 14,
              //     startValue: 0
              //   }
              // ]
            };
            myChart.setOption(option);
          }
        })
        myChart.on('click', function (params) {
          window.open('/rwList');
        });
      },
			xcChart() {
        patrolTaskCount().then(res => {
          // for (const count of res.data.counts) {
          //   this.xcgjTotal += count*1
          // }
          this.xcgjTotal = ((res.data.counts.reduce((total, item) => total + item, 0)));
          var myChart = echarts.init(document.getElementById("xcChart"));
          var option = {
            title: {
              show: false,
              text: "多线图",
              textStyle: {
                align: "center",
                color: "#fff",
                fontSize: 14,
              },
              top: "5%",
              left: "center",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: "rgba(0, 255, 233,0)",
                    },
                      {
                        offset: 0.5,
                        color: "rgba(255, 255, 255,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(0, 255, 233,0)",
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
            grid: {
              top: "20%",
              left: "5%",
              right: "5%",
              bottom: "0%",
              containLabel: true,
            },
            xAxis: [{
              type: "category",
              axisLine: {
                show: true,
              },
              splitArea: {
                // show: true,
                color: "#f00",
                lineStyle: {
                  color: "#f00",
                },
              },
              axisLabel: {
                color: "#fff",
              },
              splitLine: {
                show: false,
              },
              boundaryGap: false,
              data: res.data.names,
            }, ],

            yAxis: [{
              type: "value",
              min: 0,
              // max: 140,
              splitNumber: 4,
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#fff"],
                  opacity: 0.06,
                },
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: true,
                margin: 20,
                textStyle: {
                  fontSize: 14,
                  color: "rgba(255,255,255,1)",
                },
              },
              axisTick: {
                show: false,
              },
            }, ],
            series: [{
              name: "注册总量",
              type: "line",
              smooth: true, //是否平滑
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbol: "circle",
              symbolSize: 10,
              lineStyle: {
                normal: {
                  color: "#1f83d9",
                  shadowColor: "rgba(0, 0, 0, 0)",
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "rgb(218 243 255)",
                  fontSize: 14,
                },
              },
              itemStyle: {
                color: "#1f83d9",
                borderColor: "rgb(1,102,189,0.4)",
                borderWidth: 5,
                shadowColor: "rgba(0, 0, 0, 0)",
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
              },
              tooltip: {
                show: false,
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: "rgba(40,166,255, 0.4)",
                  },
                    {
                      offset: 1,
                      color: "rgba(40,166,255, 0)",
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              data: res.data.counts,
            }, ],
          };

          myChart.setOption(option);
        })
			},
			open() {
				this.$nextTick(() => {
					this.xcrwChart();
					this.xcgjChart();
					this.selectPatrolInspectionDataList();

				})
			},
			xcrwChart() {
        closedPatrolTaskCount().then(res => {
          this.myChart1 = this.$echarts.init(this.$refs.xcrwChart)
          this.myChart1.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              }
            },
            grid: {
              top: "20%",
              right: "8%",
              left: "8%",
              bottom: "15%",
            },
            xAxis: [{
              type: "category",
              data: res.data.names,
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0.12)",
                },
              },
              axisLabel: {
                margin: 10,
                color: "#e2e9ff",
                textStyle: {
                  fontSize: 14,
                },
              },
            }, ],
            yAxis: [{
              axisLabel: {
                formatter: "{value}",
                color: "#e2e9ff",
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0.12)",
                },
              },
            }, ],
            series: [{
              type: "bar",
              data: res.data.counts,
              barWidth: "20px",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                    },
                      {
                        offset: 1,
                        color: "rgba(0,77,167,1)", // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                  barBorderRadius: [30, 30, 30, 30],
                  shadowColor: "rgba(0,160,221,1)",
                  shadowBlur: 4,
                },
              },
              label: {
                normal: {
                  show: true,
                  lineHeight: 30,
                  width: 80,
                  height: 30,
                  backgroundColor: "rgba(0,160,221,0.1)",
                  borderRadius: 200,
                  position: ["-8", "-60"],
                  distance: 1,
                  formatter: [" {d|●}", " {a|{c}}     \n", "    {b|}"].join(","),
                  rich: {
                    d: {
                      color: "#3CDDCF",
                    },
                    a: {
                      color: "#fff",
                      align: "center",
                    },
                    b: {
                      width: 1,
                      height: 30,
                      borderWidth: 1,
                      borderColor: "#234e6c",
                      align: "left",
                    },
                  },
                },
              },
            }, ],
          })
        })
			},
			xcgjChart() {
        patrolTrackDistance().then(res => {
          this.myChart2 = this.$echarts.init(this.$refs.xcgjChart)
          this.myChart2.setOption({
            title: {
              text: "",
              textStyle: {
                fontSize: 25,
                fontWeight: "normal",
                color: "#fff",
              },
              x: "center",
            },
            tooltip: {},
            grid: {
              top: "10%",
              right: "5%",
              left: "8%",
              bottom: "15%",
            },
            legend: {
              itemGap: 50,
              data: ["巡查轨迹总数"],
              textStyle: {
                color: "#ffffff",
                borderColor: "#fff",
              },
            },
            xAxis: [{
              type: "category",
              boundaryGap: true,
              axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: "#f9f9f9",
                },
              },
              axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: "#d1e6eb",
                  margin: 15,
                },
              },
              axisTick: {
                show: false,
              },
              data: res.data.names,
            }, ],
            yAxis: [{
              type: "value",
              min: 0,
              // max: 140,
              splitNumber: 7,
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#0a3256",
                },
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                margin: 20,
                textStyle: {
                  color: "#d1e6eb",
                },
              },
              axisTick: {
                show: false,
              },
            }, ],
            series: [{
              name: "注册总量",
              type: "line",
              smooth: true, //是否平滑曲线显示
              // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: "#28ffb3", // 线条颜色
                },
                borderColor: "#f0f",
              },
              label: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#fff",
                },
              },
              itemStyle: {
                normal: {
                  color: "#28ffb3",
                },
              },
              tooltip: {
                show: false,
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                      offset: 0,
                      color: "rgba(0,154,120,1)",
                    },
                      {
                        offset: 1,
                        color: "rgba(0,0,0, 0)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              data: res.data.distances,
            }, ],
          })
        })
			},
      /**
       * 预警列表
       */
      selectEventList() {
        selectEventList({industry: this.industry,eventTitle: this.eventName}).then(res => {
          this.eventList = res.rows
        })
      },
      // 打开事件详情弹窗
      openEventDetail(obj) {
        getEventDetail({
          eventId: obj.eventId
        }).then(res => {
          this.eventInfo = res.data
          this.eventDialogVisible = true
        })
      },
      selectPatrolInspectionDataList(pageSize){
        selectPatrolInspectionDataList({
          pageNum: pageSize || 1,
          pageSize: 10,
        }).then(res => {
          this.tableData = res.rows
          this.taskTotal = res.total
        })
      },
      taskListSizeChange(pageSize) {
        this.TableInfoHandler(pageSize)
      },
			// open(){
			// 	this.$nextTick(() => {
			// 		//  执行echarts方法
			// 		this.xcrwChart()
			// 		this.xcgjChart()
			// 	})
			// },
			getSuperMapUrl() {
				getUserProfile().then(response => {
					let mapDeptId = response.mapDeptId
					let num = 0;
					if (mapDeptId == "365") {
						num = 0;
					} else if (mapDeptId == "369") {
						num = 1;
					} else if (mapDeptId == "371") {
						num = 2;
					} else if (mapDeptId == "373") {
						num = 3;
					} else if (mapDeptId == "372") {
						num = 4;
					} else if (mapDeptId == "370") {
						num = 5;
					}
					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
				});
			},
      // 获取配置项
      queryVectorTilesMapList() {
        this.addVectorTilesMapList = []
        queryVectorTilesMapList(Cookies.get('deptId')).then(req => {
            for (let i = 0; i < req.length; i++) {
              if (req[i].note == '图层过滤') {
                this.addVectorTilesMapList.push(req[i])
              }
            }
          }
        )
      },
			toggleTab(current) {
				this.currentTab = current;
				this.currentClass = current;
			},
      handleCheckChange() {
        // 获取所有tree的叶子节点
        const allLeafNodes = [];

        // 燃气-次高压
        if (this.$refs.twoDLayers_ranqi_height) {
          const leafNodes1 = this.$refs.twoDLayers_ranqi_height.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes1);
        }

        // 燃气-中压
        if (this.$refs.twoDLayers_ranqi_middle) {
          const leafNodes2 = this.$refs.twoDLayers_ranqi_middle.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes2);
        }

        // 燃气-低压
        if (this.$refs.twoDLayers_ranqi_low) {
          const leafNodes3 = this.$refs.twoDLayers_ranqi_low.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 燃气-次高压
        if (this.$refs.threeDLayers_ranqi_height) {
          const leafNodes1 = this.$refs.threeDLayers_ranqi_height.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes1);
        }

        // 燃气-中压
        if (this.$refs.threeDLayers_ranqi_middle) {
          const leafNodes2 = this.$refs.threeDLayers_ranqi_middle.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes2);
        }

        // 燃气-低压
        if (this.$refs.threeDLayers_ranqi_low) {
          const leafNodes3 = this.$refs.threeDLayers_ranqi_low.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }


        // 热力-一次
        if (this.$refs.twoDLayers_gongre_yici) {
          const leafNodes3 = this.$refs.twoDLayers_gongre_yici.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 热力-二次
        if (this.$refs.twoDLayers_gongre_erci) {
          const leafNodes3 = this.$refs.twoDLayers_gongre_erci.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 热力-直供
        if (this.$refs.twoDLayers_gongre_zhigong) {
          const leafNodes3 = this.$refs.twoDLayers_gongre_zhigong.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }

        // 热力-一次
        if (this.$refs.threeDLayers_gongre_yici) {
          const leafNodes3 = this.$refs.threeDLayers_gongre_yici.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 热力-二次
        if (this.$refs.threeDLayers_gongre_erci) {
          const leafNodes3 = this.$refs.threeDLayers_gongre_erci.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 热力-直供
        if (this.$refs.threeDLayers_gongre_zhigong) {
          const leafNodes3 = this.$refs.threeDLayers_gongre_zhigong.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 供水
        if (this.$refs.twoDLayers_gongshui) {
          const leafNodes3 = this.$refs.twoDLayers_gongshui.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }

        // 供水
        if (this.$refs.threeDLayers_gongshui) {
          const leafNodes3 = this.$refs.threeDLayers_gongshui.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }

        // 排水-雨水
        if (this.$refs.twoDLayers_paishui_yushui) {
          const leafNodes3 = this.$refs.twoDLayers_paishui_yushui.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 排水-污水
        if (this.$refs.twoDLayers_paishui_wushui) {
          const leafNodes3 = this.$refs.twoDLayers_paishui_wushui.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 排水-合流
        if (this.$refs.twoDLayers_paishui_heliu) {
          const leafNodes3 = this.$refs.twoDLayers_paishui_heliu.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }

        // 排水-雨水
        if (this.$refs.threeDLayers_paishui_yushui) {
          const leafNodes3 = this.$refs.threeDLayers_paishui_yushui.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 排水-污水
        if (this.$refs.threeDLayers_paishui_wushui) {
          const leafNodes3 = this.$refs.threeDLayers_paishui_wushui.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 排水-合流
        if (this.$refs.threeDLayers_paishui_heliu) {
          const leafNodes3 = this.$refs.threeDLayers_paishui_heliu.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }


        // 提取需要的属性
        this.checkedOptions = allLeafNodes.map(node => node.url).filter(url => url);
        this.handleCheckedOptions()
      },
      handleCheckedOptions() {
          this.$refs.supermap.addLifelineOpen(this.checkedOptions)
      },
      layerCheck() {
          this.$refs.supermap.reload(this.checkedBaseDOptions)
      },
			//开挖
			showExcavation() {
				this.$refs.supermap.excavation()
			},
			//开挖
			showExcavationAnalyze() {
				this.$refs.supermap.excavationAnalyze()
			},
			//测距
			choseMeasuringDistance() {
				this.$refs.supermap.choseMeasuringDistance()
			},
			//测面
			choseMeasuringArea() {
				this.$refs.supermap.choseMeasuringArea()
			},
			//测高
			choseMeasuringHeight() {
				this.$refs.supermap.choseMeasuringHeight()
			},
			//选择、框选
			boxSelection() {
				this.$refs.supermap.boxSelection()
			},
			//清除
      clearAll() {
        // 燃气-次高压
        if (this.$refs.twoDLayers_ranqi_height) {
          this.$refs.twoDLayers_ranqi_height.setCheckedKeys([]);
        }

        // 燃气-中压
        if (this.$refs.twoDLayers_ranqi_middle) {
          this.$refs.twoDLayers_ranqi_middle.setCheckedKeys([]);
        }

        // 燃气-低压
        if (this.$refs.twoDLayers_ranqi_low) {
          this.$refs.twoDLayers_ranqi_low.setCheckedKeys([]);
        }
        // 燃气-次高压
        if (this.$refs.threeDLayers_ranqi_height) {
          this.$refs.threeDLayers_ranqi_height.setCheckedKeys([]);
        }

        // 燃气-中压
        if (this.$refs.threeDLayers_ranqi_middle) {
          this.$refs.threeDLayers_ranqi_middle.setCheckedKeys([]);
        }

        // 燃气-低压
        if (this.$refs.threeDLayers_ranqi_low) {
          this.$refs.threeDLayers_ranqi_low.setCheckedKeys([]);
        }


        // 热力-一次
        if (this.$refs.twoDLayers_gongre_yici) {
          this.$refs.twoDLayers_gongre_yici.setCheckedKeys([]);
        }
        // 热力-二次
        if (this.$refs.twoDLayers_gongre_erci) {
          this.$refs.twoDLayers_gongre_erci.setCheckedKeys([]);
        }
        // 热力-直供
        if (this.$refs.twoDLayers_gongre_zhigong) {
          this.$refs.twoDLayers_gongre_zhigong.setCheckedKeys([]);
        }

        // 热力-一次
        if (this.$refs.threeDLayers_gongre_yici) {
          this.$refs.threeDLayers_gongre_yici.setCheckedKeys([]);
        }
        // 热力-二次
        if (this.$refs.threeDLayers_gongre_erci) {
          this.$refs.threeDLayers_gongre_erci.setCheckedKeys([]);
        }
        // 热力-直供
        if (this.$refs.threeDLayers_gongre_zhigong) {
          this.$refs.threeDLayers_gongre_zhigong.setCheckedKeys([]);
        }
        // 供水
        if (this.$refs.twoDLayers_gongshui) {
          this.$refs.twoDLayers_gongshui.setCheckedKeys([]);
        }

        // 供水
        if (this.$refs.threeDLayers_gongshui) {
          this.$refs.threeDLayers_gongshui.setCheckedKeys([]);
        }

        // 排水-雨水
        if (this.$refs.twoDLayers_paishui_yushui) {
          this.$refs.twoDLayers_paishui_yushui.setCheckedKeys([]);
        }
        // 排水-污水
        if (this.$refs.twoDLayers_paishui_wushui) {
          this.$refs.twoDLayers_paishui_wushui.setCheckedKeys([]);
        }
        // 排水-合流
        if (this.$refs.twoDLayers_paishui_heliu) {
          this.$refs.twoDLayers_paishui_heliu.setCheckedKeys([]);
        }

        // 排水-雨水
        if (this.$refs.threeDLayers_paishui_yushui) {
          this.$refs.threeDLayers_paishui_yushui.setCheckedKeys([]);
        }
        // 排水-污水
        if (this.$refs.threeDLayers_paishui_wushui) {
          this.$refs.threeDLayers_paishui_wushui.setCheckedKeys([]);
        }
        // 排水-合流
        if (this.$refs.threeDLayers_paishui_heliu) {
          this.$refs.threeDLayers_paishui_heliu.setCheckedKeys([]);
        }

        this.$refs.supermap.closeMeasuringAll()
        this.$refs.supermap.closeExcavationAll()
        this.$refs.supermap.closeClipboxByEditor()
        this.$refs.supermap.removeBoxSelection()
        this.checkedBaseDOptions = []
        this.$refs.supermap.reload(this.checkedBaseDOptions)
        this.checkedOptions = []
        this.$refs.supermap.addLifelineOpen(this.checkedOptions)
      },
		},
		watch: {
			eventName(newVal) {
				this.selectEventList()
			},
      industry(newVal) {
        this.selectEventList()
			}
		}
	}
</script>
<style lang="scss">
	.xcgj_list {
		width: 59%;
        float:right;
		.el-table {
			color: #e8f9ff;
			background-color: #082c4c;
			font-size: 13px;
		}

		.el-table tr {
			background-color: #082c4c;
		}
		.el-table--border::after, .el-table--group::after, .el-table::before{
			background-color:#082c4c
		}

		.el-table .el-table__header-wrapper th,
		.el-table .el-table__fixed-header-wrapper th {
			background-color: #012849;
			color: #e8f9ff;
		}

		.el-table td.el-table__cell,
		.el-table th.el-table__cell.is-leaf {
			border-bottom: 1px solid #203767;
		}

		.el-table--enable-row-hover {
			box-shadow: 0px 0px 4px #032f4f;
		}

		.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
			background-color: #165fa3;
			color: #0bf3f7;
			box-shadow: 0px 0px 4px #032f4f;
		}
	}

	.clear-box {
		width: 100%;
		height: 20px;
	}

	/*弹层新样式*/
	.m-t-10 {
		margin-top: 10px !important;
	}

	.m-t-3 {
		margin-top: 3px !important;
	}

	.green-txt {
		color: #1edb83 !important;
	}

	.blue-txt {
		color: #21c6f3 !important;
	}


	/*日期选择器*/
	.w-140 {
		width: 140px !important;
	}

	.sj-data-picker {
		.el-input__inner {
			height: 30px;
			line-height: 30px;
			background-color: rgba(12, 44, 80, 0.52);
			border: 1px solid #326e96;
			color: #0fc0ee;
			margin-top: 3px;

		}

		.el-input__icon {
			line-height: 39px !important;
		}

		.el-date-editor.el-input,
		.el-date-editor.el-input__inner {
			width: 140px !important;
		}
	}

	.sj-dialog-newstyle {
		.el-dialog {
			background: #152d4f;
			border-radius: 10px;
			border: 2px solid #3c72c8;
			background: linear-gradient(90deg, #0c274a 0%, rgba(6, 24, 37, 0.9) 100%);

			.el-dialog__header {
				background: url(../assets/index_img/d-icon-tit-img.png)no-repeat left;
				margin-left: 15px;
				box-shadow: none;

				.el-dialog__title {
					font-size: 18px;
					color: #fff;
					font-weight: bold;

				}

			}

			.el-dialog__body {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

		}


		.sj-jcxx {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 15px;
			border-radius: 10px;
			border: 1px solid #3c72c8;
			margin-bottom: 20px;

			.tit {
				width: fit-content;
				font-size: 16px;
				color: #fff;
				font-weight: bold;
				display: flex;
				align-items: center;
				border-bottom: 2px solid #93a9d5;
			}

			.sj-jcxx-con {}

			.sj-jcxx-con {
				color: #fff;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				position: relative;

				.con-20 {
					width: 20%;
					font-size: 14px;
					display: flex;
					align-items: center;
					margin-top: 15px;

					img {
						width: 10px;
						height: 10px;
						margin-right: 5px;
					}
				}

				.con-50 {
					width: 50% !important;
				}

				.con-100 {
					width: 100% !important;
				}

				.or {
					color: #ff9a6d;
				}

				.bl {
					color: #42f8ff
				}

				.z-line {
					width: 100%;
					height: 2px;
					background: #4e6b9a;
					z-index: 9;
					position: absolute;
					top: 32px;
				}

				.triangle {
					width: 0;
					height: 0;
					border-top: 11px solid transparent;
					/* 左侧透明 */
					border-bottom: 11px solid transparent;
					/* 右侧透明 */
					border-left: 16px solid #4e6b9a;
					/* 底部为黑色，形成三角形 */
					position: absolute;
					top: 22px;
					right: -2px;
				}

				.m60 {
					margin-left: 60px;
				}

				.z-lc {
					width: 22%;
					display: flex;
					flex-direction: column;
					z-index: 10;
					justify-content: start;
					align-items: start;
					top: 17px;

					img {
						width: 51px;
						height: 51px;
					}

					h5 {
						font-size: 14px;
						position: relative;
						bottom: 0;
					}

					.z-lc-time {
						background: linear-gradient(0deg, #2A6DCD 0%, rgba(43, 96, 152, 0.5) 100%);
						border-radius: 50px;
						font-size: 12px;
						padding: 0 5px;
						line-height: 23px;
						color: #fff;
						position: absolute;
						left: 115px;
						top: 22px
					}

					.z-clyj {
						position: absolute;
						left: 240px;
						top: 16px;

						img {
							width: 35px;
							height: 35px;
						}
					}

				}
			}


		}

	}

	.sj-tooltip {
		background: linear-gradient(0deg, #2A6DCD 0%, rgba(43, 96, 152, 0.5) 100%) !important;
		border: 1px solid #264fa2 !important;

		.popper__arrow {
			border-top-color: #345ead !important;
		}

		.popper__arrow::after {
			border-top-color: #345ead !important;
		}

		.info-list {
			display: flex;
			flex-direction: column;

		}

	}

	/*公共*/
	.list-ul-100-tit {
		width: 100% !important;
		background: url(../assets/index_img/list-bg-img-t.png) no-repeat 100% !important;
		background-size: cover !important;
	}

	.percentage40 {
		width: 40% !important;
		text-align: left;
		padding: 20px !important;
	}

	.percentage30 {
		width: 30% !important;
	}


	.list-ul-style-tit {
		width: 414px;
		height: 38px;
		background: url(../assets/index_img/list-bg-img-t.png) no-repeat;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px !important;
		background-size: contain;
		padding: 0 10px !important;
		color: #a2d4ef;
		text-align: center;

		span:nth-child(1) {
			width: 40px;
		}

		span:nth-child(2) {
			width: 70%;
			text-align: left;
		}

		span:nth-child(3) {
			width: 65px;
		}

		span:nth-child(2n) {
			color: #fff;
		}
	}

	.list-ul-100 {
		li {
			width: 100% !important;
			background: url(../assets/index_img/list-bg-img-1.png) no-repeat 100% !important;
			background-size: cover !important;
		}
	}

	.list-ul-style {
		height: 74.5%;
		overflow: hidden scroll;

		li {
			width: 410px;
			height: 50px;
			background: url(../assets/index_img/list-bg-img-1.png) no-repeat;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10px;
			padding: 0 10px !important;
			text-align: center;
			transition: all 0.5s ease-in-out;
			cursor: pointer;

			span:nth-child(1) {
				width: 40px;
			}

			span:nth-child(2) {
				width: 70%;
				text-align: left;
			}

			span:nth-child(3) {
				width: 65px;
			}

			span:nth-child(2n) {
				color: #fff;
			}
		}


		li:nth-child(2n) {
			background: url(../assets/index_img/list-bg-img-2.png) no-repeat;
		}

		li:hover {
			filter: brightness(200%);
			transform: translateX(8px);
		}
	}

	.list-ul-style::-webkit-scrollbar {
		display: none !important;
	}

	.title-bar-pop {
		width: 100%;
		height: 38px;
		background: url(../assets/index_img/tit-img.png) no-repeat left top;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.num {
			width: 88px;
			height: 27px;
			background: linear-gradient(90deg, #2A6DCD 0%, rgba(56, 123, 196, 0.24) 100%);
			border-radius: 5px;
			line-height: 27px;
			text-align: center;
			font-weight: bold;
			margin-top: 7px;
		}

		span {
			font-size: 20px;
			color: #EFF2FF;
			font-family: ysbth;
			line-height: 40px;
			background: linear-gradient(0deg, rgba(49, 190, 255, 1), rgba(239, 252, 254, 1), rgba(239, 252, 254, 1));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-left: 55px;
		}

	}

	/*资源*/
	.zy-icon {
		width: 68px;
		height: 68px;
		border-radius: 50%;
		border: 1px solid transparent;
		background-image: linear-gradient(0deg, rgba(21, 65, 118, 0.1) 0%, rgba(7, 23, 43, 0.2) 0%),
			linear-gradient(0deg, rgba(181, 233, 255, 0.5) 0%, #164271 100%);
		background-origin: border-box;
		background-clip: content-box, border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 570px;
		bottom: 65px;
		z-index: 100;
		transition: all 0.3s ease-in-out;
		cursor: pointer;
		font-size: 12px;

		img {
			width: 28px;
			height: 22px;
		}
	}

	.zy-icon:hover {
		filter: brightness(120%) hue-rotate(-10deg);
	}

	/*资源*/
	.zy-con {
		height: 57px;
		background: linear-gradient(0deg, rgba(12, 36, 66, 0.52) 0%, #1D5592 100%);
		border-radius: 33px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 20;
		color: #fff;
		z-index: 99;
		border: 1px solid #2A6DCD;
		padding: 0 20px;
	}

	.sj-select-100 {
		width: 100% !important;

		.el-input__inner {
			height: 30px;
			line-height: 30px;
		}

		.el-input__icon {
			height: 30px;
			line-height: 30px;
		}
	}

	.sj-select-50 {
		width: 49%;
		margin-top: 5px !important;

		.el-input {}

		.el-input__inner {
			height: 30px;
			line-height: 30px;
			background-color: rgba(12, 44, 80, 0.52);
			border: 1px solid #326e96;
			color: #0fc0ee;
		}

		.el-input__icon {
			line-height: 30px;
		}

		.el-select .el-input .el-select__caret {
			color: #6996c6;
		}
	}

	.sj-input-style {
		margin-top: 5px !important;

		.el-input__inner {
			height: 30px;
			line-height: 30px;
			background-color: rgba(12, 44, 80, 0.52);
			border: 1px solid #326e96;
			color: #0fc0ee;
		}

		.el-input__icon {
			line-height: 30px;
		}
	}

	.sj-select {
		margin: 0 10px !important;

		.el-input {
			width: 120px !important;
		}

		.el-input__inner {
			height: 30px;
			line-height: 30px;
			background-color: rgba(12, 44, 80, 0.52);
			border: 1px solid #326e96;
			color: #0fc0ee;
		}

		.el-input__icon {
			line-height: 30px;
		}

		.el-select .el-input .el-select__caret {
			color: #6996c6;
		}
	}

	.sj-pop-con {
		width: 437px !important;
		background: linear-gradient(0deg, rgba(12, 36, 66, 0.8) 0%, #1D5592 100%);
		border: 1px solid #326e96;
		color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.popper__arrow::after {
			border-left-color: #42eb88 !important
		}

		.popper__arrow {
			border-left-color: #42eb88 !important
		}
	}

	.sj-s-pop {
		background: linear-gradient(0deg, rgba(12, 36, 66, 0.52) 0%, #1D5592 100%);
		border: 1px solid #326e96;

		.el-select-dropdown__item {
			color: #fff;
		}

		.el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			background: linear-gradient(0deg, rgba(25, 78, 143, 0.5) 0%, #2d8dec 100%);
		}

		.popper__arrow::after {
			border-top-color: #178cd6 !important
		}

		.popper__arrow {
			border-top-color: #178cd6 !important
		}
	}

	.el-popper[x-placement^=right] .popper__arrow::after,
	.el-popper[x-placement^=right] .popper__arrow {
		border-right-color: #2A6DCD;
	}

	/*tab*/
	.content-box .el-tabs__item {
		border-radius: 5px;
		height: 26px;
		line-height: 26px;
		background: linear-gradient(0deg, #2A6DCD 0%, rgba(56, 123, 196, 0.14) 100%);
		padding: 0 10px;
	}

	.content-box .el-tabs--top .el-tabs__item.is-top:last-child {
		padding-left: 10px;
		padding-right: 10px;
	}

	.content-box .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
		padding: 0 10px;
	}

	.content-box .el-tabs__nav-next,
	.content-box .el-tabs__nav-prev {
		line-height: 26px;
	}

	.content-box .sj-top-tab .el-tabs__header {
		position: absolute;
		top: -32px;
		right: 0px;

	}

	.content-box .sj-top-tab2 .el-tabs__header {
		position: absolute;
		top: -32px;
		right: 200px;

	}



	.content-box .el-tabs__item.is-active {
		background: linear-gradient(0deg, #75F8D2 0%, #426896 50%, #43b9b9 100%);
		border-radius: 5px;
		border: 1px solid transparent;

	}

	/*btn*/
	.sj-btn-icon-h {
		width: 100px !important;
		height: 30px !important;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 !important;
		background: linear-gradient(0deg, #75F8D2 0%, #426896 50%, #43b9b9 100%) !important;
		border-radius: 5px;
		color: #fff;
		border: 1px solid #3261b5 !important;
	}

	.sj-btn-icon-h:hover {
		color: #fff;
		background: linear-gradient(0deg, #75F8D2 0%, #4e7cb1 50%, #50dfdf 100%) !important;
	}

	.sj-btn-icon-h:focus {
		color: #fff;
	}

	.sj-btn-icon {
		width: 93px !important;
		height: 30px !important;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 !important;
		background: linear-gradient(90deg, #214D8C 1%, rgba(14, 52, 93, 1) 100%);
		border-radius: 5px;
		color: #fff;
		border: 1px solid #3261b5 !important;

		span {
			img {
				margin-right: 5px;
			}

			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.sj-btn-icon:hover {
		background: linear-gradient(0deg, #75F8D2 0%, #426896 50%, #43b9b9 100%) !important;
		color: #fff !important;
	}

	.sj-btn-icon:focus {
		background-color: #75F8D2 !important;
		color: #fff !important;
		border: 1px solid #75F8D2 !important;
	}

	/*normal tab*/
	/*tab*/
	.content-box2 .el-tabs__item {
		border-radius: 100px;
		height: 26px;
		line-height: 26px;
		background: linear-gradient(0deg, #2A6DCD 0%, rgba(56, 123, 196, 0.14) 100%);
		padding: 0 10px;
	}

	.content-box2 .el-tabs--top .el-tabs__item.is-top:last-child {
		padding-left: 10px;
		padding-right: 10px;

	}

	.content-box2 .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
		padding: 0 10px;
	}

	.content-box2 .el-tabs__nav-next,
	.content-box2 .el-tabs__nav-prev {
		line-height: 26px;
	}

	.content-box2 .sj-top-tab .el-tabs__header {}

	.content-box2 .sj-top-tab2 .el-tabs__header {}


	.content-box2 .el-tabs__item.is-active {
		background: linear-gradient(0deg, #75F8D2 0%, #426896 50%, #43b9b9 100%);
		border-radius: 100px;
		border: 1px solid transparent;

	}

	.content-box .el-checkbox {
		margin-right: 15px !important;
	}

	.content-box .el-checkbox__inner {
		border: 1px solid #0fc5f2;
		width: 13px;
		height: 13px;
		background: none;
	}

	.content-box .el-checkbox__label {
		color: #b9e4ef;
	}

	.content-box .el-checkbox__inner::after {
		border-color: #0fc5f2;
	}

	.content-box .el-checkbox__input.is-checked .el-checkbox__inner,
	.content-box .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		border-color: #0fc0ee;
		background: none;
	}

	.content-box .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #fff;
	}

	.content-box .el-checkbox__input.is-disabled .el-checkbox__inner {
		background-color: #628c91;
		border-color: #407983;
		cursor: not-allowed;
	}

	/*正常tab*/



	/*form*/
	.sj-form {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*radio*/
	.sj-radio {
		margin-top: 5px !important;
	}

	.sj-radio .el-radio-button__inner {
		padding: 0 15px;
		height: 26px;
		line-height: 26px;
		background: linear-gradient(0deg, #2A6DCD 0%, rgba(56, 123, 196, 0.14) 100%);
		color: #fff;
		border: none;
		border-left: none !important;
	}

	.sj-radio .el-radio-button__orig-radio:checked+.el-radio-button__inner {
		height: 26px;
		line-height: 26px;
		background: linear-gradient(0deg, #75F8D2 0%, #426896 50%, #43b9b9 100%);
		border: 1px solid transparent;
	}

	.mar-left {
		margin-left: 20px !important;
	}

	/*checkbox*/
	.sj-check {
		margin-top: 5px !important;
	}

	.sj-check .el-checkbox {
		margin-right: 10px;
	}

	.sj-check .el-checkbox__label {
		color: #fff;
		padding-left: 5px;
    font-weight: normal;
    font-size: 14px;
	}

	.sj-check .el-checkbox__inner {
		background: #192c40;
		border: 1px solid #3a86ce;
	}

	.sj-check .el-checkbox__input.is-checked .el-checkbox__inner,
	.sj-check .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		border: 1px solid #2acdb4;
		background: #192c40;
	}

	.sj-check .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #fff;
	}



  /* 为不同类型的选择框定义不同的颜色 */
  //燃气高压
  .layers_ranqi_height{

    .el-tree-node__expand-icon{
      color: #e23922 !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgba(226, 57, 34, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgba(226, 57, 34, 0.4) !important; /* 自定义背景色 */
    }
    .is-current:focus {
      background-color: rgba(226, 57, 34, 0.4) !important; /* 自定义背景色 */
    }
    .is-focusable:focus {
      background-color: rgba(226, 57, 34, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgba(226, 57, 34, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #e23922 !important; /* 自定义背景色 */
      background: rgba(226, 57, 34, 0.28) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba(226, 57, 34, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgba(226, 57, 34, 0.7) !important; /* 自定义背景色 */
      border-color: #e23922 !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }
  //燃气中压
  .layers_ranqi_middle{
    .el-tree-node__expand-icon{
      color: #589fe3 !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgba(88, 159, 227, 0.3) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgba(88, 159, 227, 0.3) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgba(88, 159, 227, 0.3) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #589fe3 !important; /* 自定义背景色 */
      background: rgba(88, 159, 227, 0.37) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color:rgba(88, 159, 227, 0.3) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border: 1px solid #589fe3 !important; /* 自定义背景色 */
      background: rgba(88, 159, 227, 0.7) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }
  //燃气低压
  .layers_ranqi_low{
    .el-tree-node__expand-icon{
      color: #57ad5c !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgba(87, 173, 92, 0.49) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color:rgba(87, 173, 92, 0.49) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color:rgba(87, 173, 92, 0.49) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #57ad5c !important; /* 自定义背景色 */
      background: rgba(87, 173, 92, 0.27) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba(87, 173, 92, 0.49) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border: 1px solid #57ad5c !important; /* 自定义背景色 */
      background: rgba(87, 173, 92, 0.7) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }


  //供热一次网
  .layers_gongre_yici{

    .el-tree-node__expand-icon{
      color: #e26c2e !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .is-current:focus {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .is-focusable:focus {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #e26c2e !important; /* 自定义背景色 */
      background: rgba(224, 107, 47, 0.28) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgb(224, 107, 47, 0.7) !important; /* 自定义背景色 */
      border-color: #e26c2e !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }
  //供热二次网
  .layers_gongre_erci{
    .el-tree-node__expand-icon{
      color: #f6e75a !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgba(244, 229, 90, 0.3) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgba(244, 229, 90, 0.3) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgba(244, 229, 90, 0.3) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #f6e75a !important; /* 自定义背景色 */
      background: rgba(244, 229, 90, 0.37) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba(244, 229, 90, 0.3) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border: 1px solid #f6e75a !important; /* 自定义背景色 */
      background: rgba(244, 229, 90, 0.7) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }
  //供热直供管
  .layers_gongre_zhigong{
    .el-tree-node__expand-icon{
      color: #eaa470 !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgba(232, 163, 112, 0.49) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color:rgba(232, 163, 112, 0.49) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color:rgba(232, 163, 112, 0.49) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #eaa470 !important; /* 自定义背景色 */
      background: rgba(232, 163, 112, 0.27) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba(232, 163, 112, 0.49) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border: 1px solid #eaa470 !important; /* 自定义背景色 */
      background: rgba(232, 163, 112, 0.7) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }

  //供水
  .layers_gongshui{

    .el-tree-node__expand-icon{
      color: #89f8e4 !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgb(136, 246, 227, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgb(136, 246, 227, 0.4) !important; /* 自定义背景色 */
    }
    .is-current:focus {
      background-color: rgb(136, 246, 227, 0.4) !important; /* 自定义背景色 */
    }
    .is-focusable:focus {
      background-color: rgb(136, 246, 227, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgb(136, 246, 227, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #89f8e4 !important; /* 自定义背景色 */
      background: rgba(136, 246, 227, 0.28) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgb(136, 246, 227, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgb(136, 246, 227, 0.7) !important; /* 自定义背景色 */
      border-color: #89f8e4 !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }


  //供水-雨水
  .layers_paishui_yushui{

    .el-tree-node__expand-icon{
      color: #a0dffa !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgb(159, 221, 249, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgb(159, 221, 249, 0.4) !important; /* 自定义背景色 */
    }
    .is-current:focus {
      background-color: rgb(159, 221, 249, 0.4) !important; /* 自定义背景色 */
    }
    .is-focusable:focus {
      background-color: rgb(159, 221, 249, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgb(159, 221, 249, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #a0dffa !important; /* 自定义背景色 */
      background: rgba(159, 221, 249, 0.28) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgb(159, 221, 249, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgb(159, 221, 249, 0.7) !important; /* 自定义背景色 */
      border-color: #a0dffa !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }

  //供水-污水
  .layers_paishui_wushui{

    .el-tree-node__expand-icon{
      color: #b7c843 !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgb(182, 198, 67, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgb(182, 198, 67, 0.4) !important; /* 自定义背景色 */
    }
    .is-current:focus {
      background-color: rgb(182, 198, 67, 0.4) !important; /* 自定义背景色 */
    }
    .is-focusable:focus {
      background-color: rgb(182, 198, 67, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgb(182, 198, 67, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #b7c843 !important; /* 自定义背景色 */
      background: rgba(182, 198, 67, 0.28) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgb(182, 198, 67, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgb(182, 198, 67, 0.7) !important; /* 自定义背景色 */
      border-color: #b7c843 !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }

  //供水-合流
  .layers_paishui_heliu{

    .el-tree-node__expand-icon{
      color: #2c3ec4 !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .is-current:focus {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .is-focusable:focus {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #2c3ec4 !important; /* 自定义背景色 */
      background: rgba(44, 62, 195, 0.28) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgb(44, 62, 195, 0.7) !important; /* 自定义背景色 */
      border-color: #2c3ec4 !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';

	.xcgj_chart {
		margin-bottom: 15px;
		border: 1px solid #0E2D5F;
		border-radius: 5px;
		width: 100%;
		height: 300px;
	}

	.chart_tit {
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		font-weight: bold;
		color: rgba(200, 247, 255, 0.96);
		padding-left: 10px;
	}

	.box-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#xcrwChart ,#xcgjChart  {
		width:100%;
		height: 258px;
	}


	.lifeline-con {
		color: #fff;
		font-size: 14px;


		.h-185 {
			height: 185px !important;
			padding: 0 !important;
		}

		.h-530 {
			height: 530px !important;
			padding: 0 !important;
			overflow: hidden;
		}


		.h-170 {
			height: 170px !important;
			padding: 0 !important;
		}

		.h-120 {
			height: 120px !important;
			padding: 0 !important;
		}

		.h-830 {
			height: 830px !important;
			padding: 0 !important;
		}

		.h-180 {
			height: 180px !important;
			padding: 0 !important;
		}

		.h-220 {
			height: 220px !important;
			padding: 0 !important;
		}

		.p-10 {
			padding: 10px !important;
		}

		.p-15 {
			padding: 15px !important;
		}

		/*小导航*/
		.small-nav {
			display: flex;
			position: fixed;
			left: 50%;
			top: 76px;
			transform: translateX(-50%);
			z-index: 999;

			li {
				background: url(../assets/images/gangwei/navbj.png)no-repeat;
				width: 105px;
				height: 42px;
				text-align: center;
				line-height: 42px;
				transition: all 0.3s ease-in-out;
				cursor: pointer;

				a {
					font-size: 16px;
					color: #EFF2FF;
					line-height: 32px;
					text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);

				}
			}

			li:hover,
			.active {
				filter: brightness(170%) hue-rotate(-40deg);
			}

			li:nth-child(1) {
				animation: btnmove 1s;
			}

			li:nth-child(2) {
				animation: btnmove 1.2s;
			}

			li:nth-child(3) {
				animation: btnmove 1.4s;
			}

			li:nth-child(4) {
				animation: btnmove 1.6s;
			}

			li:nth-child(5) {
				animation: btnmove 1.8s;
			}

			li:nth-child(6) {
				animation: btnmove 2s;
			}

			li:nth-child(7) {
				animation: btnmove 2.2s;
			}
		}


		/*头部*/
		.life-header2 {
			width: 100%;
			height: 81px;
			background: url('../assets/index_img/header-img2.png') no-repeat center;
			position: fixed;
			top: 0;
			font-family: 'ysbth';
			font-size: 38px;
			text-align: center;
			line-height: 70px;
			animation: headermove 1s ease-out;
			z-index: 999;

			span {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				align-items: center;
				font-weight: 400;
				color: #EFF8FC;
				background: linear-gradient(0deg, rgba(119, 186, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
				opacity: 1;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

				img {
					width: 46px;
					height: 46px;
					margin-right: 15px;
				}

			}

			.time-left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				font-family: pmzd;
				position: absolute;
				left: 28px;
				top: 18px;

				h5 {
					font-size: 16px;
					font-weight: 400;
					background: linear-gradient(0deg, rgba(172, 221, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				h6 {
					font-size: 12px;
					font-weight: 400;
					background: linear-gradient(0deg, rgba(172, 221, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			.header-weather-left {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				position: absolute;
				left: 120px;
				top: 18px;
				img{
					width: 35px;
					margin-right: 5px;
				}
			    .text{
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					h5 {
						font-size: 16px;
						font-weight: 400;
						background: linear-gradient(0deg, rgba(172, 221, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					h6 {
						font-size: 12px;
						font-weight: 400;
						background: linear-gradient(0deg, rgba(172, 221, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

			}

			.header-right-user-home {
				width: fit-content;
				display: flex;
				justify-content: center;
				position: absolute;
				right: 18px;
				top: 18px;

				img {
					cursor: pointer;
					transition: all 0.5s ease-in-out;
					margin: 0 5px;
				}

				img:hover {
					cursor: pointer;
					filter: brightness(170%) hue-rotate(-20deg);
					transform: translateY(-2px);
				}
			}

		}


		/*顶部重点关注天气区域*/
		.top-bar {
			width: 738px;
			height: 68px;
			background: linear-gradient(0deg, rgba(12, 36, 66, 0.52) 0%, #1D5592 100%);
			border-radius: 33px;
			position: absolute;
			top: 83px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 20;
			color: #fff;

			.line-y {
				width: 1px;
				height: 37px;
				border: 1px solid #4476A3;

			}

			h5 {
				font-size: 20px;
				color: #EFF2FF;
				font-family: ysbth;
				line-height: 40px;
				background: linear-gradient(0deg, #31beff, #effcfe, #effcfe);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 10px;
			}

			span {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 5px;

				.icon-block {
					width: 6px;
					height: 11px;
					background: linear-gradient(0deg, #67AAE7 0%, #2B5E8E 100%);
					margin: 0 5px;
				}
			}

			.icon-sj {
				width: 12px;
				height: 20px;
				margin: 0 5px;
			}

			.left {
				display: flex;

				.icon {
					width: 67px;
					height: 65px;
				}

			}

			.right {
				display: flex;

				.text-r {
					width: 200px;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					align-content: center
				}
			}
		}

		/*左右装饰*/
		.line-left,
		.line-right {
			width: 18px;
			height: 100vh;
			position: absolute;
			top: 0;
			z-index: 1000;
		}

		.line-left {
			background: url(../assets/index_img/left-line.png) no-repeat 100%;
			left: 0;
		}

		.line-right {
			background: url(../assets/index_img/right-line.png) no-repeat 100%;
			right: 0;
		}

		/*左侧右侧独立黑色背景*/

		.con_left_2_bg {
			width: 570px;
			background: url('../assets/index_img/black-bg-left.png') no-repeat left;
			height: 100vh;
			position: absolute;
			z-index: 2;
			left: 0;
		}

		.con_right_2_bg {
			width: 570px;
			background: url('../assets/index_img/black-bg-right.png') no-repeat right;
			height: 100vh;
			position: absolute;
			z-index: 2;
			right: 0;
		}

		/*公共*/
		.title-320 {
			background: url(../assets/index_img/tit-img-320.png) no-repeat left top !important;
		}

		.title-383 {
			background: url(../assets/index_img/tit-img-383.png) no-repeat left top !important;
		}

		.title-770 {
			background: url(../assets/index_img/tit-img-770.png) no-repeat left top !important;
		}

		.title-bar {
			width: 100%;
			height: 38px;
			background: url(../assets/index_img/tit-img.png) no-repeat left top;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.sj-right-select {
				width: 140px;
			}

			.num {
				width: 88px;
				height: 27px;
				background: linear-gradient(90deg, #2A6DCD 0%, rgba(56, 123, 196, 0.24) 100%);
				border-radius: 5px;
				line-height: 27px;
				text-align: center;
				font-weight: bold;
				margin-top: 7px;
			}

			span {
				font-size: 20px;
				color: #EFF2FF;
				font-family: ysbth;
				line-height: 40px;
				background: linear-gradient(0deg, rgba(49, 190, 255, 1), rgba(239, 252, 254, 1), rgba(239, 252, 254, 1));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-left: 55px;
			}

		}


		.content-box-half {
			width: 267px !important;
		}

		.box-h-l {
			height: 175px !important;
		}

		.content-box3 {
			width: 538px;
			height: 243px;
			background: linear-gradient(90deg, rgba(6, 20, 36, .3), rgba(50, 81, 128, .3));
			border-radius: 8px;
			border: 1px solid #23466C;
			margin-top: 2px;
			padding: 10px;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-between;
			position: relative;
		}

		.content-box2 {
			padding: 15px !important;

			.map-btn-con {
				height: 50px;
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px dashed #1e57a3;

				span {
					height: 50px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.content-box,
		.content-box2 {
			width: 538px;
			height: 243px;
			background: linear-gradient(90deg, rgba(6, 20, 36, .3), rgba(50, 81, 128, .3));
			border-radius: 8px;
			border: 1px solid #23466C;
			margin-top: 2px;
			padding: 10px;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-between;
			position: relative;



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

				.chart-con {
					width: 300px;
					height: 180px;
				}

				.chart-con2 {
					width: 500px;
					height: 160px;
				}

				.chart-con3 {
					width: 340px;
					height: 195px;
				}

				.chart-con4 {
					width: 750px;
					height: 195px;
				}



				.chart-con-num {
					display: flex;
					flex-direction: column;

					.chart-con-num-rig {
						height: 36px;
						display: flex;
						flex-direction: column;
						flex-wrap: wrap;
						justify-content: space-around;
						margin: 10px 0;

						img {
							margin-right: 10px;
						}

						h5 {
							font-size: 18px;
						}

						h6 {
							font-size: 14px;
						}
					}
				}
			}

			:first-child {
				.con-l-t {
					height: 60px !important;
					background: url(../assets/index_img/con-l-t.png) !important;
					border: none !important;
					padding: 8px 0 0 10px !important;
				}
			}

			.box-row2 {
				display: flex;
				align-items: flex-end;
				position: absolute;
				left: 0;
				margin-left: 10px;

				.li-4 {
					width: 4em !important;
				}

				.li-7 {
					width: 7em !important;
				}

			}

			.box-row {
				display: flex;

				.con-l-t {
					width: 92px;
					height: 53px;
					font-size: 14px;
					background: linear-gradient(0deg, #0E244B 0%, #537AB4 100%);
					border-radius: 5px;
					border: 1px solid #23466C;
					color: #F1F2F7;
					display: flex;
					flex-direction: column;
					align-items: start;
					margin-right: 10px;
					padding: 6px 0 0 10px;

					:last-child {
						font-weight: bold;
					}
				}

				.con-r {
					display: flex;
					flex-direction: column;
					font-size: 14px;
					color: #F1F2F7;
					line-height: 21px;
					position: relative;
					top: -5px;

					.line-x {
						width: 10px;
						height: 1px;
						background: #339DC6;
						position: absolute;
						left: -10px;
						top: 32px;
					}

					.line-x6 {
						width: 1px;
						height: 10px;
						background: #339DC6;
						position: absolute;
						left: -55px;
						bottom: -10px;
					}

					.line-x7 {
						width: 265px;
						height: 1px;
						background: #339DC6;
						position: absolute;
						left: -55px;
						bottom: -10px;
					}

					.line-x8 {
						width: 1px;
						height: 21px;
						background: #339DC6;
						position: absolute;
						left: 50px;
						bottom: -10px;
					}

					.line-x9 {
						width: 1px;
						height: 43px;
						background: #339DC6;
						position: absolute;
						left: 209px;
						bottom: -10px;
					}

					li {
						padding-left: 18px;
						line-height: 22px;
						background: url(../assets/index_img/line-bg-mid.png) no-repeat left top;

						:first-child {
							width: 3em;
							display: inline-block;
							text-align: justify;
							text-align-last: justify;
						}

						:last-child {
							margin-left: 5px;
						}
					}

					li:first-child {
						background: url(../assets/index_img/line-bg-top.png) no-repeat left top;
					}

					li:last-child {
						background: url(../assets/index_img/line-bg-btm.png) no-repeat left top;
					}
				}

				.con-r-2 {
					top: 0 !important;
					justify-content: center;

					.line-x {
						top: 26px !important;
					}
				}

				.con-r-3 {
					top: 0 !important;
					justify-content: center;

					.line-x {
						top: 128px !important;
					}
				}

				h3 {
					font-weight: bold;
				}

				h4 {
					padding-top: 5px;
					line-height: 22px;
				}

				.row-48-left {
					width: 48%;
					display: flex;
					flex-direction: column;
				}

				.row-48-right {
					width: 48%;
					display: flex;
					flex-wrap: wrap;

					.r-48-r-r {
						display: flex;
						flex-direction: column;

						h4 {
							padding-top: 0;
							line-height: 22px;
						}

					}

					img {
						width: 55px;
						height: 56px;
						margin-right: 10px;
					}
				}

				.con-r-8 {
					flex-direction: row !important;

					ul {
						margin-left: 50px;
					}


				}

				.person-list {
					display: flex;
					width: 91%;
					margin-left: 9%;
					justify-content: space-around;
					align-items: center;
					position: relative;
					background-color: rgba(12, 44, 80, 0.52);
					height: 60px;
					border: 1px solid #326e96;
					border-radius: 10px;
					margin-top: 20px;

					img {
						width: 75px;
						height: 80px;
						position: absolute;
						left: -10%;
					}

				}

				/*数据看板*/
				.sjkb-ul {
					li {
						width: 100%;
						height: 30px;
						line-height: 30px;
						background: url(../assets/index_img/d-icon-tit-img.png) no-repeat left center;
						display: flex;
						align-items: center;
						justify-content: space-between;

						span:nth-child(1) {
							margin-left: 25px;
						}

						span:nth-child(2) {
							font-family: 'pmzd';
							color: #b3cbff;
						}
					}
				}
			}
		}

		/*左侧*/

		.left-content {
			width: 540px;
			height: 90vh;
			overflow-y: auto;
			top: 70px;
			position: absolute;
			left: 20px;
			z-index: 80;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			justify-content: space-evenly;
			color: #fff;
			font-size: 14px;
		}

		.left-320px {
			width: 320px !important;
		}

		.right-1550 {
			width: 1550px !important;
			top: 120px !important;
			justify-content: start !important;
			overflow-y: scroll;
			height: 85vh !important;
		}

		.chart-box-770 {
			width: 770px;
			display: flex;
			flex-direction: column;
			margin-left: 4px;

		}

		.chart-box-383 {
			width: 383px;
			display: flex;
			flex-direction: column;
			margin-left: 4px;
		}

		.margin-left-none {
			margin-left: 0 !important;
		}

		.w383 {
			width: 383px !important;
			height: 225px !important;
			margin-top: 2px !important;

		}

		.w770 {
			width: 770px !important;
			height: 225px !important;
			margin-top: 2px !important;

		}

		.right-content {
			width: 540px;
			height: 90vh;
			top: 70px;
			position: absolute;
			right: 20px;
			z-index: 80;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			justify-content: space-evenly;
			color: #fff;
			font-size: 14px;
		}

		//左右侧按钮
		.btn {
			display: flex;
			justify-content: center;
			width: 300px;
			height: 195px;
			transition: all 0.5s ease-in-out;

			.btn-left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				cursor: pointer;

				img {
					width: 160px;
					height: 155px;
					margin-top: 1.25rem;
				}

				span {
					font-weight: 400;
					font-size: 24px;
					color: #EFF8FC;
					line-height: 28px;
					font-family: pmzd;
				}
			}

			.btn-right {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.btn-right-con {
					cursor: pointer;
					width: 131px;
					height: 37px;
					text-align: center;
					background: url('../assets/index_img/name-bg.png') no-repeat center;
					font-weight: 400;
					font-size: 14px;
					line-height: 32px;
					color: #EFF8FC;
					transition: all .2s ease-in-out;
				}

				.btn-right-con:hover {
					filter: hue-rotate(-70deg);
				}
			}
		}

		.con_right {
			position: absolute;
			right: 20px;
			top: 100px;
			z-index: 999;
			background: rgba(0, 10, 24, 0.67);
			width: 360px;

			.con_tckz {
				.con_tckz_div {
					margin: 0px 10px;

					.tekz_div {
						font-size: 14px;
						text-align: left;
						color: #fff;
						padding-bottom: 15px;
						border-bottom: 1px dashed #4a5958;
						margin-bottom: 15px;

						.tc_div {
							line-height: 40px;
							padding-left: 15px;
							display: flex;
							flex-direction: row;
							width: 100%;

							.scrollx {
								width: 100%;
								white-space: nowrap;

								display: flex;
								flex-direction: row;

								/*height: 40px;*/
								span {
									display: block;
									width: 80px;
								}

								.scroll-container {
									display: block;
									/*height: 40px;*/
									/*overflow-y: scroll;*/
									width: 220px;

									.el-checkbox-group {
										label {
											display: block;
											float: left;
										}
									}


								}


							}
						}

					}

					.scroll-container::-webkit-scrollbar {
						/*滚动条整体样式*/
						width: 6px !important;
						/*高宽分别对应横竖滚动条的尺寸*/
						height: 1px !important;
						display: block !important;
						cursor: pointer;
					}

					.scroll-container::-webkit-scrollbar-thumb {
						/*滚动条里面小方块*/
						border-radius: 10px;
						height: 15px;
						-webkit-box-shadow: inset 0 0 5px rgba(0, 22, 55, 0.87);
						// background: #E5E5E5;
						background: rgba(38, 235, 255, 0.5);
					}

					.scroll-container::-webkit-scrollbar-track {
						/*滚动条里面轨道*/
						-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
						border-radius: 10px;
						background: rgba(10, 37, 64, 0.75);
					}


					.map_btn button {
						display: inline-block;
						background: url("../assets/images/sixZ/sixzbtn1.png") no-repeat center;
						background-size: 100% 100%;
						padding: 8px 20px;
						margin: 8px 8px 8px 0px;
						font-size: 14px;
						color: #fff;
						cursor: pointer;
					}

					.map_btn button.on {
						background: url("../assets/images/sixZ/sixzbtn1_on.png") no-repeat center;
						background-size: 100% 100%;
						box-shadow: none;
					}

					.map_clear {
						background: #09335f;
						color: #a4bfe2;
						font-size: 14px;
						float: right;
						margin: 20px 0px;
						display: inline-block;
						padding: 6px 18px;
					}

					.map_clear:hover {
						background: #0a5184;
					}
				}

			}
		}


		.btn:hover {
			filter: brightness(180%);
		}

		.btn-r {
			position: absolute;
			left: 16%;
			top: 15%;
			animation: btnRun 1s, movetop 3.5s 1s infinite;
		}

		.btn-rq {
			position: absolute;
			right: 12%;
			top: 12%;
			animation: btnRun 1s, movetop 4s 1s infinite;
		}

		.btn-ps {
			position: absolute;
			left: 5%;
			top: 38%;
			animation: btnRun 1s, movetop2 5s 1s infinite;
		}

		.btn-ql {
			position: absolute;
			left: 12%;
			top: 60%;
			animation: btnRun 1s, movetop2 3s 1s infinite;
		}

		.btn-gl {
			position: absolute;
			right: 6%;
			top: 38%;
			animation: btnRun 1s, movetop2 4s 1s infinite;
		}

		.btn-gs {
			position: absolute;
			right: 16%;
			top: 59%;
			animation: btnRun 1s, movetop2 2s 1s infinite;
		}


		//雷达
		.radar {
			display: flex;
			position: absolute;
			left: 50%;
			top: 40%;
			transform: translate(-50%, -40%);
			justify-content: center;
			align-items: center;
			width: 726px;
			height: 726px;
			animation: radarOP 1s ease-in;
		}

		.rotating-bg {
			position: relative;
			z-index: 100;
			animation: rotatebg 2s infinite linear;
		}

		.rotating-image {
			position: relative;
			animation: rotate 5s infinite linear;
			z-index: 150;
		}

		/*底部背景*/
		.button-list-bg {
			width: 100%;
			height: 71px;
			background: url(../assets/index_img/button-list.png) no-repeat center;
			position: absolute;
			bottom: 0;
			z-index: 2;
		}

		//底部按钮5个
		.life-btm-btn {
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 100;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

			.btn-span:nth-child(1) {
				animation: btnmove 1s;
			}

			.btn-span:nth-child(2) {
				animation: btnmove 1.2s;
			}

			.btn-span:nth-child(3) {
				animation: btnmove 1.4s;
			}

			.btn-span:nth-child(4) {
				animation: btnmove 1.6s;
			}

			.btn-span:nth-child(5) {
				animation: btnmove 1.8s;
			}

			.btn-span:nth-child(6) {
				animation: btnmove 2s;
			}

			.btn-span {
				width: 166px;
				height: 50px;
				background: url('../assets/index_img/btm-btn.png') no-repeat center;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 10px 5px;
				transition: all 0.3s ease-in-out;
				cursor: pointer;

				span {
					font-size: 20px;
					color: #EFF2FF;
					font-family: ysbth;
					line-height: 40px;
					background: linear-gradient(0deg, rgba(49, 190, 255, 1), rgba(239, 252, 254, 1), rgba(239, 252, 254, 1));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			.btn-span:hover {
				filter: brightness(170%) hue-rotate(-20deg);
				transform: translateY(-10px);
			}

			.btn-span.on {
				filter: brightness(170%) hue-rotate(-20deg);
				box-shadow: none;
			}
		}

		.btm-btn2 {
			position: absolute;
			bottom: 80px;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			animation: btmmove2 1s ease-out;

			.btn-span2 {
				margin: 0 10px;
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: all 0.3s;

				img {
					width: 150px;
					height: 100px;
				}

				span {
					font-size: 20px;
					color: #EFF2FF;
					font-family: ysbth;
					line-height: 40px;
					background: linear-gradient(0deg, rgba(49, 190, 255, 1), rgba(239, 252, 254, 1), rgba(239, 252, 254, 1));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					margin-top: -10px;
					display: block;
					text-align: center;
				}
			}

			.btn-span2:hover {
				filter: brightness(170%) hue-rotate(-20deg);
				transform: translateY(-10px);
			}
		}






	}

	.con_tit {
		font-size: 18px;
		font-family: 'ysbth';
		color: #fff;
		padding-left: 30px;
		background: url("../assets/images/sixZ/sixztit.png") no-repeat left;
		background-size: 100% 100%;
		height: 35px;
		line-height: 35px;
		margin-bottom: 15px;
	}

	.map_tab {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-bottom: 25px !important;
		border-bottom: 2px solid rgba(13, 107, 179, 0.53);

		span {
			display: block;
			/*background: rgba(13, 107, 179, 0.53);*/
			padding: 8px 20px;
			color: #fff;
			font-size: 16px;
			text-shadow: 0px 0px 4px #0bf3f7;
			cursor: pointer;
		}

		.on {
			color: #0bf3f7;
			background: none !important;
			box-shadow: none;
			font-weight: bold;
			position: relative;
		}

		.on::after {
			content: '';
			display: block;
			position: absolute;
			bottom: -10px;
			/* 下三角位于链接的底部 */
			left: 50%;
			/* 水平居中 */
			width: 0;
			height: 0;
			border-left: 9px solid transparent;
			/* 左边透明 */
			border-right: 9px solid transparent;
			/* 右边透明 */
			border-top: 10px solid rgba(13, 107, 179, 0.53);
			/* 上边是三角形颜色 */
			transform: translateX(-50%);
			/* 确保三角形中心对齐链接的中心 */
		}
	}

	#sjChart {
		height: 210px !important;
	}

	#xcChart {
		height: 210px !important;
	}
  /*燃气颜色区分*/
  ::v-deep .cigaoya .el-checkbox__input .el-checkbox__inner{
    background: rgb(226 57 34 / 29%) !important;
    border: 1px solid #e23922 !important;
  }
  ::v-deep .zhongya .el-checkbox__input .el-checkbox__inner{
    background: rgb(88 159 227 / 29%) !important;
    border: 1px solid #589fe3 !important;
  }
  ::v-deep .diya .el-checkbox__input .el-checkbox__inner{
    background:  rgb(87 173 92 / 29%) !important;
    border: 1px solid #57ad5c !important;
  }
  /*热力颜色区分*/
  ::v-deep .yiciwang .el-checkbox__input .el-checkbox__inner{
    background: rgb(230 110 44 / 29%) !important;
    border: 1px solid #e66e2c !important;
  }
  ::v-deep .erciwang .el-checkbox__input .el-checkbox__inner{
    background: rgb(248 233 90 / 29%) !important;
    border: 1px solid #f8e95a !important;
  }
  ::v-deep .zhigongguan .el-checkbox__input .el-checkbox__inner{
    background:  rgb(236 165 112 / 29%) !important;
    border: 1px solid #eca570 !important;
  }
  /*供水颜色区分*/
  ::v-deep .gongshuiguan .el-checkbox__input .el-checkbox__inner{
    background:  rgb(138 250 229 / 29%) !important;
    border: 1px solid #8afae5 !important;
  }
  /*排水颜色区分*/
  ::v-deep .paishuiguan .el-checkbox__input .el-checkbox__inner{
    background:  rgb(44 62 197 / 29%) !important;
    border: 1px solid #2c3ec5 !important;
  }
</style>