visu_lifeline/src/views/industry/jgpt.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>
			<!--左右黑色渐变独立背景-->
			<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-body">
				<div class="content-box2" style="height: 200px; width:350px !important;">
        <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 slot="reference" class="zy-icon zy-icon1">
					<img src="../../assets/index_img/jgpt_icon07.png" alt="" />
					基础图层
				</div>

			</el-popover>
			<el-popover placement="right" trigger="click" popper-class="zy-con-body">
				<div class="content-box2" style="height: 200px; width:350px !important;">
          <el-tabs v-model="legendLayer" class="sj-top-tab sj-normal-tab">

            <el-tab-pane label="燃气" name="1">
              <div style="height: 145px; 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: 145px; 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: 145px; 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: 145px; 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 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>-->
          </el-tabs>
		</div>
				<div slot="reference" class="zy-icon  zy-icon2">
					<img src="../../assets/index_img/jgpt_icon08.png" alt="" />
					三维图层
				</div>
			</el-popover>
			<el-popover placement="right" trigger="click" popper-class="zy-con-body">
					<div class="content-box2" style="height: 200px; width:350px !important;">
            <el-tabs v-model="legendLayer" class="sj-top-tab sj-normal-tab">
              <el-tab-pane label="燃气" name="1">
                <div style="height: 145px; 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: 145px; 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: 145px; 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: 145px; 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 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>-->
            </el-tabs>
		</div>
				<div slot="reference" class="zy-icon  zy-icon3">
					<img src="../../assets/index_img/jgpt_icon09.png" alt="" />
					二维图层
				</div>
			</el-popover>


			<!--底部按钮区域背景-->
			<div class="button-list-bg">
			</div>
			<!--左侧资产盘点 ps:资产盘点单元格内是竖向的流式布局，数据要竖向循环-->
			<div class="left-content">
				<div class="title-bar"  @click="dialogVisibleHy = true">
					<span style="cursor: pointer;">行业数据完整度</span>
				</div>
				<div class="content-box hysj">
					<div class="hysj_div box-row">
						<div class="hysj_div">
							<div id="hysj_div_chart1"></div>
							<p>桥梁数据完整度<b>{{bridge}}</b></p>
						</div>
						<div class="hysj_div">
							<div id="hysj_div_chart2"></div>
							<p>排水数据完整度<b>{{drainage}}</b></p>
						</div>
						<div class="hysj_div">
							<div id="hysj_div_chart3"></div>
							<p>燃气数据完整度<b>{{gas}}</b></p>
						</div>
					</div>
					<div class="hysj_div box-row">
						<div class="hysj_div">
							<div id="hysj_div_chart4"></div>
							<p>供热数据完整度<b>{{heating}}</b></p>
						</div>
						<div class="hysj_div">
							<div id="hysj_div_chart5"></div>
							<p>管廊数据完整度<b>{{utility}}</b></p>
						</div>
						<div class="hysj_div">
							<div id="hysj_div_chart6"></div>
							<p>供水数据完整度<b>{{water}}</b></p>
						</div>
					</div>
				</div>
				<div class="title-bar">
					<span>巡检及隐患</span>
				</div>
				<div class="content-box xjjyh" style="cursor: pointer;"  @click="toSbList">
					<div class="xjjyh_div box-row">
						<div class="xjjyh_div_con box-row">
							<div class="xjjyh_img">
								<img src="../../assets/index_img/jgpt_icon01.png"/>
								<p>热力</p>
							</div>
							<div class="xjjyh_txt">
								<h4><span>巡检数</span><i>{{inspectionDataList.mileage[0].mileage || '0' }}km</i></h4>
								<img src="../../assets/index_img/jgpt_iconx.png"/>
								<h4><span>隐患数</span><i>{{inspectionDataList.inspection['热力'] || '0' }}个</i></h4>
							</div>
						</div>
						<div class="xjjyh_div_con box-row">
							<div class="xjjyh_img">
								<img src="../../assets/index_img/jgpt_icon02.png"/>
								<p>排水</p>
							</div>
							<div class="xjjyh_txt">
								<h4><span>巡检数</span><i>{{inspectionDataList.mileage[1].mileage || '0' }}km</i></h4>
								<img src="../../assets/index_img/jgpt_iconx.png"/>
								<h4><span>隐患数</span><i>{{inspectionDataList.inspection['排水'] || '0' }}个</i></h4>
							</div>
						</div>
						<div class="xjjyh_div_con box-row">
							<div class="xjjyh_img">
								<img src="../../assets/index_img/jgpt_icon03.png"/>
								<p>桥梁</p>
							</div>
							<div class="xjjyh_txt">
								<h4><span>巡检数</span><i>{{inspectionDataList.mileage[2].mileage || '0' }}km</i></h4>
								<img src="../../assets/index_img/jgpt_iconx.png"/>
								<h4><span>隐患数</span><i>{{inspectionDataList.inspection['桥梁'] || '0' }}个</i></h4>
							</div>
						</div>
					</div>
					<div class="xjjyh_div box-row">
						<div class="xjjyh_div_con box-row">
							<div class="xjjyh_img">
								<img src="../../assets/index_img/jgpt_icon04.png"/>
								<p>管廊</p>
							</div>
							<div class="xjjyh_txt">
								<h4><span>巡检数</span><i>{{inspectionDataList.mileage[3].mileage || '0' }}km</i></h4>
								<img src="../../assets/index_img/jgpt_iconx.png"/>
								<h4><span>隐患数</span><i>{{inspectionDataList.inspection['管廊'] || '0' }}个</i></h4>
							</div>
						</div>
						<div class="xjjyh_div_con box-row">
							<div class="xjjyh_img">
								<img src="../../assets/index_img/jgpt_icon05.png"/>
								<p>燃气</p>
							</div>
							<div class="xjjyh_txt">
								<h4><span>巡检数</span><i>{{inspectionDataList.mileage[4].mileage || '0' }}km</i></h4>
								<img src="../../assets/index_img/jgpt_iconx.png"/>
								<h4><span>隐患数</span><i>{{inspectionDataList.inspection['燃气'] || '0' }}个</i></h4>
							</div>
						</div>
						<div class="xjjyh_div_con box-row">
							<div class="xjjyh_img">
								<img src="../../assets/index_img/jgpt_icon06.png"/>
								<p>供水</p>
							</div>
							<div class="xjjyh_txt">
								<h4><span>巡检数</span><i>{{inspectionDataList.mileage[5].mileage || '0' }}km</i></h4>
								<img src="../../assets/index_img/jgpt_iconx.png"/>
								<h4><span>隐患数</span><i>{{inspectionDataList.inspection['供水'] || '0' }}个</i></h4>
							</div>
						</div>
					</div>
				</div>
				<div class="title-bar">
					<span>预警管理</span>
				</div>
				<div class="content-box yjgl" style="cursor: pointer;"   @click="toSbList">
					<div class="yjgl_div_tit">
						<span>预警总数：</span>
						<p>
							<b>{{ warningManagementTotal[4] || 0 }}</b>
							<b>{{ warningManagementTotal[3] || 0 }}</b>
							<b>{{ warningManagementTotal[2] || 0 }}</b>
							<b>{{ warningManagementTotal[1] || 0 }}</b>
							<b>{{ warningManagementTotal[0] || 0 }}</b>
						</p>
					</div>
					<div class="yjgl_div box-row">
						<div id="yjgl_chart"></div>
						<div class="yjgl_list">
							<p><span>供水</span><b>{{ warningManagementData[5] }}</b></p>
							<p><span>管廊</span><b>{{ warningManagementData[3] }}</b></p>
							<p><span>燃气</span><b>{{ warningManagementData[4] }}</b></p>
							<p><span>热力</span><b>{{ warningManagementData[0] }}</b></p>
							<p><span>桥梁</span><b>{{ warningManagementData[2] }}</b></p>
							<p><span>排水</span><b>{{ warningManagementData[1] }}</b></p>
						</div>
					</div>
				</div>
			</div>
			<!--预警列表-->
			<div class="right-content">
				<div class="title-bar" style="cursor: pointer;" @click="toSbList">
					<!--<el-popover placement="left-start" width="400" trigger="click" popper-class="sj-pop-con">-->
						<!--<div class="title-bar-pop">-->
							<!--<span>预警列表</span>-->
						<!--</div>-->
						<!--<div slot="reference" style="cursor: pointer;">预警统计</div>-->
					<!--</el-popover>-->
						<span>预警统计</span>
				</div>
				<div class="content-box sjtj" >
					<el-tabs v-model="activeName1" class="sj-top-tab">
						<el-tab-pane label="催办" name="sj">
							<div class="chart-contaier">
								<div class="chart-con" id="sjChart"></div>
								<div class="chart-con-num">
									<div
										class="chart-con-num-rig"
										v-for="(e,idx) in eventInfoOfIndustry"
										:key="idx"
										>
										<img :src="require(`../../assets/index_img/sj-bg-${eventPicOfIndustry.find(v => v.label == e.label).index}.png`)" alt="">
										<h6>{{ e.label }}</h6>
										<h5>{{ e.expediteCount }}</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: 130px !important;"></div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="title-bar">
					<el-popover placement="left-start" width="400" trigger="click" popper-class="sj-pop-con">
						<div slot="reference" style="cursor: pointer;">年度计划</div>
					</el-popover>
					<div class="num">
						{{ yearlyTaskStatisticsTotal || 0 }}个
					</div>
				</div>
				<div class="content-box ndrw">
					<div class="chart-contaier">
						<div class="chart-con2" id="ndChart" style="height: 120px !important;"></div>
					</div>
				</div>
				<div class="title-bar"  style="cursor: pointer;">
					<span>风险管理</span>
				</div>
				<div class="content-box fxgl">
					<div id="fxglchart"></div>
				</div>
				<div class="title-bar" @click="dialogVisibleYuAn = true">
					<span>预案管理</span>
				</div>
				<div class="content-box2 yagl">
					<div class="scroll-y hei_scroll">
						<div class="yagl_div" v-for="plan in planList">
							<img v-if="plan.industry==1" src="../../assets/index_img/jgpt_icon14.png"/><!--热力-->
							<img v-if="plan.industry==2" src="../../assets/index_img/jgpt_icon11.png"/><!--排水-->
							<img v-if="plan.industry==3" src="../../assets/index_img/jgpt_icon12.png"/><!--桥梁-->
							<img v-if="plan.industry==4" src="../../assets/index_img/jgpt_icon13.png"/><!--管廊-->
							<img v-if="plan.industry==5" src="../../assets/index_img/jgpt_icon10.png"/><!--燃气-->
							<img v-if="plan.industry==6" src="../../assets/index_img/jgpt_icon15.png"/><!--供水-->
							<div class="yagl_div_txt">
								<p>{{plan.contingency_plan_name.length>10?plan.contingency_plan_name.substring(0,12)+'...':plan.contingency_plan_name}}</p>
								<span :title="plan.contingency_plan_content">{{plan.contingency_plan_content.length>25?plan.contingency_plan_content.substring(0,28)+'...':plan.contingency_plan_content}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 地图 -->
			<supermap ref="supermap" style="width: 100%;height: 100vh;">
			</supermap>
			<div class="map_tab flex-c">
				<div title="开挖" @click="showExcavation()">
					<img src="../../assets/index_img/icon-kw.png"/>
				</div>
				<div title="测距" @click="choseMeasuringDistance()">
					<img src="../../assets/index_img/icon-cl.png"/>
				</div>
				<div title="测面" @click="choseMeasuringArea()">
					<img src="../../assets/index_img/icon-cl.png"/>
				</div>
				<div title="测高" @click="choseMeasuringHeight()">
					<img src="../../assets/index_img/icon-cl.png"/>
				</div>
				<div title="清除" @click="clearAll()">
					<img src="../../assets/index_img/icon-qc.png"/>
				</div>
			</div>
	 		<!-- 底部按钮 -->
	 		<div class="life-btm-btn">
	 			<div class="btn-span btn-span7" :class="currentBtmHighIdx == 0 ? 'on' : '' " @click="industryHasChanged('')">
	 				<span>全部</span>
	 			</div>
	 			<div class="btn-span btn-span7 " :class="currentBtmHighIdx == 5 ? 'on' : '' " @click="industryHasChanged(5)">
	 				<span>燃气</span>
	 			</div>
	 			<div class="btn-span btn-span7" :class="currentBtmHighIdx == 1 ? 'on' : '' " @click="industryHasChanged(1)">
	 				<span>热力</span>
	 			</div>
	 			<div class="btn-span btn-span7" :class="currentBtmHighIdx == 6 ? 'on' : '' " @click="industryHasChanged(6)">
	 				<span>供水</span>
	 			</div>
	 			<div class="btn-span btn-span7" :class="currentBtmHighIdx == 2 ? 'on' : '' " @click="industryHasChanged(2)">
	 				<span>排水</span>
	 			</div>
	 			<div class="btn-span btn-span7" :class="currentBtmHighIdx == 4 ? 'on' : '' " @click="industryHasChanged(4)">
	 				<span>管廊</span>
	 			</div>
	 			<div class="btn-span btn-span7" :class="currentBtmHighIdx == 3 ? 'on' : '' " @click="industryHasChanged(3)">
	 				<span>桥梁</span>
	 			</div>
	 		</div>
		</div>

		<el-dialog
				title="行业数据完整度"
				:visible.sync="dialogVisibleHy"
				:before-close="handleClose"
				class="sj-dialog-newstyle">
			<ul class="small-nav">
				<li class="active"><a>全部</a></li>
				<li><a>燃气</a></li>
				<li><a>供热</a></li>
				<li><a>供水</a></li>
				<li><a>排水</a></li>
				<li><a>管廊</a></li>
				<li><a>桥梁</a></li>
			</ul>

			<div class="content-box4 flex-c mar-top45">
				<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2"
						  class="sj-input-style">
				</el-input>
				<div class="list-ul-100-tit">
					<span>行业</span>
					<span>设备名称</span>
					<span>状态</span>
				</div>
				<div class="scroll-container hei_scroll_400">
					<ul class="list-ul-100" >
						<li  v-for="(item, index) in listContent" :key="index">
							<span :class="item.hydh">{{item.hy}}</span>
							<span>{{item.tit}}</span>
							<span :class="item.ztdh">{{item.zt}}</span>
						</li>

					</ul>
				</div>
			</div>

		</el-dialog>
		<el-dialog
				title="预案详情"
				:visible.sync="dialogVisibleYuAn"
				:before-close="handleClose"
				width="80%"
				class="sj-dialog-newstyle">
				<div class="box-row" style="width: 100%;">
					<div class="sjxq_list">
						<el-table :data="tableData" height="615" style="width: 100%">
							<el-table-column prop="tit" label="任务名称">
							</el-table-column>
							<el-table-column prop="name" label="巡查人员">
							</el-table-column>
							<el-table-column prop="num" label="巡查公里数">
							</el-table-column>
							<el-table-column prop="time" label="巡查时间">
							</el-table-column>
						</el-table>
					</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 {selectPlanList} from "@/api/tableInfo";
  import {
		industryDataCompleteness,
		inspectionAndHiddenDanger,                     	// 巡检及隐患
		eventContingencyPlan,                     		// 应急预案
		eventStatistics,								// 预警统计
		warningManagement,								// 预警管理
		expediteOrSuperviseCount,						// 事件统计:催办/督办
	} from "@/api/jgpt";
  import { annualPlanCount } from '@/api/Regulatory'
  import { queryVectorTilesMapList } from '@/api/components/supermap'


	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() {
			this.inspectionAndHiddenDanger()
			this.eventContingencyPlan()
		},
		computed:{

		},
		mounted() {
      		// this.selectPlanList();
			// 初始化地图数据
			this.getSuperMapUrl();
      		this.queryVectorTilesMapList();
			setTimeout(() => {
        		this.time();
				this.title = '四平市城市生命线'
				this.sjChart();
				this.hysj_div_chart();
				this.yjgl_chart();
				this.ndChart('');
				this.fxglchart();
			}, 1000)

		},
		data() {
			return {
        props: {
          label: 'name',
          children: 'children'
        },
        legendLayer: '1',
        checkedBaseDOptions: [],
        addVectorTilesMapList: [],
        checkedOptions: [],

        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: [],

				bridge:'',//桥梁
				drainage:'',//排水
				gas:'',//燃气
				heating:'',//供热
				utility:'',//管廊
				water:'',//供水
				input: '',
				activeName1: 'sj',
				radio: '1',
				dialogVisibleHy:false,
				dialogVisibleYuAn:false,
				tableData: [{
					tit: '长兴街道至人民大街巡查路线',
					name: '王小虎',
					num: '456',
					time: '2025年11月12日13:51:07',
				}, {
					tit: '长兴街道至人民大街巡查路线',
					name: '王小虎',
					num: '456',
					time: '2025年11月12日13:51:07',
				}, {
					tit: '长兴街道至人民大街巡查路线',
					name: '王小虎',
					num: '456',
					time: '2025年11月12日13:51:07',
				}, {
					tit: '长兴街道至人民大街巡查路线',
					name: '王小虎',
					num: '456',
					time: '2025年11月12日13:51:07',
				}, {
					tit: '长兴街道至人民大街巡查路线',
					name: '王小虎',
					num: '456',
					time: '2025年11月12日13:51:07',
				}, {
					tit: '长兴街道至人民大街巡查路线',
					name: '王小虎',
					num: '456',
					time: '2025年11月12日13:51:07',
				}, {
					tit: '长兴街道至人民大街巡查路线',
					name: '王小虎',
					num: '456',
					time: '2025年11月12日13:51:07',
				}, {
					tit: '长兴街道至人民大街巡查路线',
					name: '王小虎',
					num: '456',
					time: '2025年11月12日13:51:07',
				}, ],
				listContent:[
						{id:1,hydh:'rq',hy:'燃气',tit:'设备型号AHHDDDD',ztdh:'zx',zt:'在线'},
						{id:2,hydh:'rq',hy:'燃气',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
						{id:3,hydh:'ps',hy:'排水',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
						{id:4,hydh:'rl',hy:'热力',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
						{id:5,hydh:'ql',hy:'桥梁',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
						{id:6,hydh:'gl',hy:'管廊',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
						{id:7,hydh:'gs',hy:'供水',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
						{id:8,hydh:'rl',hy:'热力',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
						{id:9,hydh:'ql',hy:'桥梁',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
						{id:10,hydh:'gl',hy:'管廊',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
						{id:11,hydh:'gs',hy:'供水',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
					],
				inspectionDataList:[],        // 巡检及隐患数据
				planList:[],
				warningManagementData:[],
				warningManagementTotal:'',
				yearlyTaskStatisticsTotal:null,
				eventStatisticsData:[],
				currentBtmHighIdx:0,
				eventPicOfIndustry:[
					{
						label:'热力',
						index:5
					},
					{
						label:'排水',
						index:3
					},
					{
						label:'桥梁',
						index:4
					},
					{
						label:'管廊',
						index:1
					},
					{
						label:'燃气',
						index:6
					},
					{
						label:'供水',
						index:2
					},
				],
				eventInfoOfIndustry:[], // 事件统计催办/督办 列表
				superviselabels:[],
				superviseCount:[],
			}
		},
		methods: {
      // 获取配置项
      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])
              }
            }
          }
        )
      },
      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)
      },
      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("time").innerHTML = h + ":" + m + ":" + s; //16:28:03
        setTimeout(() => {
          this.time()
        }, 1000);
      },
			industryHasChanged(industry=0){
				if(industry == this.currentBtmHighIdx) return;
				this.currentBtmHighIdx = industry
				// this.inspectionAndHiddenDanger(industry)
				this.eventContingencyPlan(industry)
				this.ndChart(industry)
				// this.yjgl_chart(industry)
				// this.sjChart(industry,true)
			},
			eventContingencyPlan(industry = 0){
				eventContingencyPlan(1).then(res => {
					this.planList = res.data || []
				})
			},
			inspectionAndHiddenDanger(industry = ''){
				inspectionAndHiddenDanger(industry).then(res => {
					this.inspectionDataList = res.data || []
				})
			},
			selectPlanList(){
				selectPlanList().then(res => {
				this.planList = res.rows;
				})
			},
			//设备报警表单点击后跳转新页面
			toSbList(){
				this.$router.push('/jgptList')
			},
			toRwList(){
				this.$router.push('/RwList')
			},

			//行业数据完整度chart
			hysj_div_chart() {
				var myChart1 = echarts.init(document.getElementById("hysj_div_chart1"));
				var myChart2 = echarts.init(document.getElementById("hysj_div_chart2"));
				var myChart3 = echarts.init(document.getElementById("hysj_div_chart3"));
				var myChart4 = echarts.init(document.getElementById("hysj_div_chart4"));
				var myChart5 = echarts.init(document.getElementById("hysj_div_chart5"));
				var myChart6 = echarts.init(document.getElementById("hysj_div_chart6"));
        industryDataCompleteness().then(res => {
          this.bridge=res.data.bridge;//桥梁
          this.drainage=res.data.drainage;//排水
          this.gas=res.data.gas;//燃气
          this.heating=res.data.heating;//供热
          this.utility=res.data.utility;//管廊
          this.water=res.data.water;//供水
          var option1 = {
            series: [
              {
                center: ["45%", "80%"], //仪表的位置
                name: "刻度", //仪表的名字
                type: "gauge", //统计图类型为仪表
                radius: "100%", //统计图的半径大小
                min: 0, //最小刻度
                max: 10, //最大刻度
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //设置默认刻度盘上的刻度不显示，重新定义刻度盘
                  show: false,
                  lineStyle: {
                    width: 1,
                    color: [[1, "rgba(255,255,255,0)"]],
                  },
                }, //仪表盘轴线
                axisLabel: {
                  //仪表盘上的数据
                  show: true,
                  color: "#2a86e4", //仪表盘上的轴线颜色
                  distance: -30, //图形与刻度的间距
                  formatter: function (v) {
                    //刻度轴上的数据相关显示
                    switch (v + "") {
                      case "0":
                        return "0";
                      case "2":
                        return "20";
                      case "4":
                        return "40";
                      case "6":
                        return "60";
                      case "8":
                        return "80";
                      case "10":
                        return "100";
                    }
                  },
                }, //刻度标签。
                axisTick: {
                  show: true,
                  splitNumber: 6, //刻度的段落数
                  lineStyle: {
                    color: "#48698f",
                    width: 1, //刻度的宽度
                  },
                  length: -4, //刻度的长度
                }, //刻度样式
                splitLine: {
                  //文字和刻度的偏移量
                  show: true,
                  length: -6, //便宜的长度
                  lineStyle: {
                    color: "#48698f",
                  },
                }, //分隔线样式
              },
              {
                type: "gauge", //刻度轴表盘
                radius: "85%", //刻度盘的大小
                center: ["45%", "82%"], //刻度盘的位置
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //刻度的线条
                  show: true,
                  lineStyle: {
                    width: 8, //定义一个宽15的数轴
                    color: [
                      //颜色为渐变色
                      [
                        0.9,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                            offset: 0,
                            color: "#2a86e4",
                          },
                          {
                            offset: 1,
                            color: "#3dffaf",
                          },
                        ]),
                      ],
                      [1, "#413e54"],
                    ],
                  },
                },
                //分隔线样式。
                splitLine: {
                  //表盘上的轴线
                  show: false,
                },
                axisLabel: {
                  //表盘上的刻度数值文字
                  show: false,
                },
                axisTick: {
                  //表盘上的刻度线
                  show: false,
                },
                pointer: {
                  //表盘上的指针
                  show: true,
                  width:4
                },
                itemStyle: {
                  //表盘指针的颜色
                  color: "#18c8ff",
                },
                title: {
                  //标题
                  show: false,
                  offsetCenter: [0, "-26%"], // x, y，单位px
                  textStyle: {
                    color: "#fff",
                    fontSize: 10, //表盘上的标题文字大小
                  },
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show: false,
                  offsetCenter: [0, "3%"],
                  color: "#ffffff",
                  formatter: function (params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 10,
                  },
                },
                data: [
                  //当前数值的数据
                  {
                    name: "",
                    value: this.bridge.replace('%',''),
                  },
                ],
              },
            ],
          };
          var option2 = {
            series: [
              {
                center: ["45%", "80%"], //仪表的位置
                name: "刻度", //仪表的名字
                type: "gauge", //统计图类型为仪表
                radius: "100%", //统计图的半径大小
                min: 0, //最小刻度
                max: 10, //最大刻度
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //设置默认刻度盘上的刻度不显示，重新定义刻度盘
                  show: false,
                  lineStyle: {
                    width: 1,
                    color: [[1, "rgba(255,255,255,0)"]],
                  },
                }, //仪表盘轴线
                axisLabel: {
                  //仪表盘上的数据
                  show: true,
                  color: "#2a86e4", //仪表盘上的轴线颜色
                  distance: -30, //图形与刻度的间距
                  formatter: function (v) {
                    //刻度轴上的数据相关显示
                    switch (v + "") {
                      case "0":
                        return "0";
                      case "2":
                        return "20";
                      case "4":
                        return "40";
                      case "6":
                        return "60";
                      case "8":
                        return "80";
                      case "10":
                        return "100";
                    }
                  },
                }, //刻度标签。
                axisTick: {
                  show: true,
                  splitNumber: 6, //刻度的段落数
                  lineStyle: {
                    color: "#48698f",
                    width: 1, //刻度的宽度
                  },
                  length: -4, //刻度的长度
                }, //刻度样式
                splitLine: {
                  //文字和刻度的偏移量
                  show: true,
                  length: -6, //便宜的长度
                  lineStyle: {
                    color: "#48698f",
                  },
                }, //分隔线样式
              },
              {
                type: "gauge", //刻度轴表盘
                radius: "85%", //刻度盘的大小
                center: ["45%", "82%"], //刻度盘的位置
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //刻度的线条
                  show: true,
                  lineStyle: {
                    width: 8, //定义一个宽15的数轴
                    color: [
                      //颜色为渐变色
                      [
                        0.9,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                            offset: 0,
                            color: "#2a86e4",
                          },
                          {
                            offset: 1,
                            color: "#3dffaf",
                          },
                        ]),
                      ],
                      [1, "#413e54"],
                    ],
                  },
                },
                //分隔线样式。
                splitLine: {
                  //表盘上的轴线
                  show: false,
                },
                axisLabel: {
                  //表盘上的刻度数值文字
                  show: false,
                },
                axisTick: {
                  //表盘上的刻度线
                  show: false,
                },
                pointer: {
                  //表盘上的指针
                  show: true,
                  width:4
                },
                itemStyle: {
                  //表盘指针的颜色
                  color: "#18c8ff",
                },
                title: {
                  //标题
                  show: false,
                  offsetCenter: [0, "-26%"], // x, y，单位px
                  textStyle: {
                    color: "#fff",
                    fontSize: 10, //表盘上的标题文字大小
                  },
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show: false,
                  offsetCenter: [0, "3%"],
                  color: "#ffffff",
                  formatter: function (params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 10,
                  },
                },
                data: [
                  //当前数值的数据
                  {
                    name: "",
                    value: this.drainage.replace('%',''),
                  },
                ],
              },
            ],
          };
          var option3 = {
            series: [
              {
                center: ["45%", "80%"], //仪表的位置
                name: "刻度", //仪表的名字
                type: "gauge", //统计图类型为仪表
                radius: "100%", //统计图的半径大小
                min: 0, //最小刻度
                max: 10, //最大刻度
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //设置默认刻度盘上的刻度不显示，重新定义刻度盘
                  show: false,
                  lineStyle: {
                    width: 1,
                    color: [[1, "rgba(255,255,255,0)"]],
                  },
                }, //仪表盘轴线
                axisLabel: {
                  //仪表盘上的数据
                  show: true,
                  color: "#2a86e4", //仪表盘上的轴线颜色
                  distance: -30, //图形与刻度的间距
                  formatter: function (v) {
                    //刻度轴上的数据相关显示
                    switch (v + "") {
                      case "0":
                        return "0";
                      case "2":
                        return "20";
                      case "4":
                        return "40";
                      case "6":
                        return "60";
                      case "8":
                        return "80";
                      case "10":
                        return "100";
                    }
                  },
                }, //刻度标签。
                axisTick: {
                  show: true,
                  splitNumber: 6, //刻度的段落数
                  lineStyle: {
                    color: "#48698f",
                    width: 1, //刻度的宽度
                  },
                  length: -4, //刻度的长度
                }, //刻度样式
                splitLine: {
                  //文字和刻度的偏移量
                  show: true,
                  length: -6, //便宜的长度
                  lineStyle: {
                    color: "#48698f",
                  },
                }, //分隔线样式
              },
              {
                type: "gauge", //刻度轴表盘
                radius: "85%", //刻度盘的大小
                center: ["45%", "82%"], //刻度盘的位置
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //刻度的线条
                  show: true,
                  lineStyle: {
                    width: 8, //定义一个宽15的数轴
                    color: [
                      //颜色为渐变色
                      [
                        0.9,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                            offset: 0,
                            color: "#2a86e4",
                          },
                          {
                            offset: 1,
                            color: "#3dffaf",
                          },
                        ]),
                      ],
                      [1, "#413e54"],
                    ],
                  },
                },
                //分隔线样式。
                splitLine: {
                  //表盘上的轴线
                  show: false,
                },
                axisLabel: {
                  //表盘上的刻度数值文字
                  show: false,
                },
                axisTick: {
                  //表盘上的刻度线
                  show: false,
                },
                pointer: {
                  //表盘上的指针
                  show: true,
                  width:4
                },
                itemStyle: {
                  //表盘指针的颜色
                  color: "#18c8ff",
                },
                title: {
                  //标题
                  show: false,
                  offsetCenter: [0, "-26%"], // x, y，单位px
                  textStyle: {
                    color: "#fff",
                    fontSize: 10, //表盘上的标题文字大小
                  },
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show: false,
                  offsetCenter: [0, "3%"],
                  color: "#ffffff",
                  formatter: function (params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 10,
                  },
                },
                data: [
                  //当前数值的数据
                  {
                    name: "",
                    value: this.gas.replace('%',''),
                  },
                ],
              },
            ],
          };
          var option4 = {
            series: [
              {
                center: ["45%", "80%"], //仪表的位置
                name: "刻度", //仪表的名字
                type: "gauge", //统计图类型为仪表
                radius: "100%", //统计图的半径大小
                min: 0, //最小刻度
                max: 10, //最大刻度
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //设置默认刻度盘上的刻度不显示，重新定义刻度盘
                  show: false,
                  lineStyle: {
                    width: 1,
                    color: [[1, "rgba(255,255,255,0)"]],
                  },
                }, //仪表盘轴线
                axisLabel: {
                  //仪表盘上的数据
                  show: true,
                  color: "#2a86e4", //仪表盘上的轴线颜色
                  distance: -30, //图形与刻度的间距
                  formatter: function (v) {
                    //刻度轴上的数据相关显示
                    switch (v + "") {
                      case "0":
                        return "0";
                      case "2":
                        return "20";
                      case "4":
                        return "40";
                      case "6":
                        return "60";
                      case "8":
                        return "80";
                      case "10":
                        return "100";
                    }
                  },
                }, //刻度标签。
                axisTick: {
                  show: true,
                  splitNumber: 6, //刻度的段落数
                  lineStyle: {
                    color: "#48698f",
                    width: 1, //刻度的宽度
                  },
                  length: -4, //刻度的长度
                }, //刻度样式
                splitLine: {
                  //文字和刻度的偏移量
                  show: true,
                  length: -6, //便宜的长度
                  lineStyle: {
                    color: "#48698f",
                  },
                }, //分隔线样式
              },
              {
                type: "gauge", //刻度轴表盘
                radius: "85%", //刻度盘的大小
                center: ["45%", "82%"], //刻度盘的位置
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //刻度的线条
                  show: true,
                  lineStyle: {
                    width: 8, //定义一个宽15的数轴
                    color: [
                      //颜色为渐变色
                      [
                        0.9,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                            offset: 0,
                            color: "#2a86e4",
                          },
                          {
                            offset: 1,
                            color: "#3dffaf",
                          },
                        ]),
                      ],
                      [1, "#413e54"],
                    ],
                  },
                },
                //分隔线样式。
                splitLine: {
                  //表盘上的轴线
                  show: false,
                },
                axisLabel: {
                  //表盘上的刻度数值文字
                  show: false,
                },
                axisTick: {
                  //表盘上的刻度线
                  show: false,
                },
                pointer: {
                  //表盘上的指针
                  show: true,
                  width:4
                },
                itemStyle: {
                  //表盘指针的颜色
                  color: "#18c8ff",
                },
                title: {
                  //标题
                  show: false,
                  offsetCenter: [0, "-26%"], // x, y，单位px
                  textStyle: {
                    color: "#fff",
                    fontSize: 10, //表盘上的标题文字大小
                  },
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show: false,
                  offsetCenter: [0, "3%"],
                  color: "#ffffff",
                  formatter: function (params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 10,
                  },
                },
                data: [
                  //当前数值的数据
                  {
                    name: "",
                    value: this.heating.replace('%',''),
                  },
                ],
              },
            ],
          };
          var option5 = {
            series: [
              {
                center: ["45%", "80%"], //仪表的位置
                name: "刻度", //仪表的名字
                type: "gauge", //统计图类型为仪表
                radius: "100%", //统计图的半径大小
                min: 0, //最小刻度
                max: 10, //最大刻度
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //设置默认刻度盘上的刻度不显示，重新定义刻度盘
                  show: false,
                  lineStyle: {
                    width: 1,
                    color: [[1, "rgba(255,255,255,0)"]],
                  },
                }, //仪表盘轴线
                axisLabel: {
                  //仪表盘上的数据
                  show: true,
                  color: "#2a86e4", //仪表盘上的轴线颜色
                  distance: -30, //图形与刻度的间距
                  formatter: function (v) {
                    //刻度轴上的数据相关显示
                    switch (v + "") {
                      case "0":
                        return "0";
                      case "2":
                        return "20";
                      case "4":
                        return "40";
                      case "6":
                        return "60";
                      case "8":
                        return "80";
                      case "10":
                        return "100";
                    }
                  },
                }, //刻度标签。
                axisTick: {
                  show: true,
                  splitNumber: 6, //刻度的段落数
                  lineStyle: {
                    color: "#48698f",
                    width: 1, //刻度的宽度
                  },
                  length: -4, //刻度的长度
                }, //刻度样式
                splitLine: {
                  //文字和刻度的偏移量
                  show: true,
                  length: -6, //便宜的长度
                  lineStyle: {
                    color: "#48698f",
                  },
                }, //分隔线样式
              },
              {
                type: "gauge", //刻度轴表盘
                radius: "85%", //刻度盘的大小
                center: ["45%", "82%"], //刻度盘的位置
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //刻度的线条
                  show: true,
                  lineStyle: {
                    width: 8, //定义一个宽15的数轴
                    color: [
                      //颜色为渐变色
                      [
                        0.9,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                            offset: 0,
                            color: "#2a86e4",
                          },
                          {
                            offset: 1,
                            color: "#3dffaf",
                          },
                        ]),
                      ],
                      [1, "#413e54"],
                    ],
                  },
                },
                //分隔线样式。
                splitLine: {
                  //表盘上的轴线
                  show: false,
                },
                axisLabel: {
                  //表盘上的刻度数值文字
                  show: false,
                },
                axisTick: {
                  //表盘上的刻度线
                  show: false,
                },
                pointer: {
                  //表盘上的指针
                  show: true,
                  width:4
                },
                itemStyle: {
                  //表盘指针的颜色
                  color: "#18c8ff",
                },
                title: {
                  //标题
                  show: false,
                  offsetCenter: [0, "-26%"], // x, y，单位px
                  textStyle: {
                    color: "#fff",
                    fontSize: 10, //表盘上的标题文字大小
                  },
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show: false,
                  offsetCenter: [0, "3%"],
                  color: "#ffffff",
                  formatter: function (params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 10,
                  },
                },
                data: [
                  //当前数值的数据
                  {
                    name: "",
                    value: this.utility.replace('%',''),
                  },
                ],
              },
            ],
          };
          var option6 = {
            series: [
              {
                center: ["45%", "80%"], //仪表的位置
                name: "刻度", //仪表的名字
                type: "gauge", //统计图类型为仪表
                radius: "100%", //统计图的半径大小
                min: 0, //最小刻度
                max: 10, //最大刻度
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //设置默认刻度盘上的刻度不显示，重新定义刻度盘
                  show: false,
                  lineStyle: {
                    width: 1,
                    color: [[1, "rgba(255,255,255,0)"]],
                  },
                }, //仪表盘轴线
                axisLabel: {
                  //仪表盘上的数据
                  show: true,
                  color: "#2a86e4", //仪表盘上的轴线颜色
                  distance: -30, //图形与刻度的间距
                  formatter: function (v) {
                    //刻度轴上的数据相关显示
                    switch (v + "") {
                      case "0":
                        return "0";
                      case "2":
                        return "20";
                      case "4":
                        return "40";
                      case "6":
                        return "60";
                      case "8":
                        return "80";
                      case "10":
                        return "100";
                    }
                  },
                }, //刻度标签。
                axisTick: {
                  show: true,
                  splitNumber: 6, //刻度的段落数
                  lineStyle: {
                    color: "#48698f",
                    width: 1, //刻度的宽度
                  },
                  length: -4, //刻度的长度
                }, //刻度样式
                splitLine: {
                  //文字和刻度的偏移量
                  show: true,
                  length: -6, //便宜的长度
                  lineStyle: {
                    color: "#48698f",
                  },
                }, //分隔线样式
              },
              {
                type: "gauge", //刻度轴表盘
                radius: "85%", //刻度盘的大小
                center: ["45%", "82%"], //刻度盘的位置
                splitNumber: 6, //刻度数量
                startAngle: 180, //开始刻度的角度
                endAngle: 0, //结束刻度的角度
                axisLine: {
                  //刻度的线条
                  show: true,
                  lineStyle: {
                    width: 8, //定义一个宽15的数轴
                    color: [
                      //颜色为渐变色
                      [
                        0.9,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
                            offset: 0,
                            color: "#2a86e4",
                          },
                          {
                            offset: 1,
                            color: "#3dffaf",
                          },
                        ]),
                      ],
                      [1, "#413e54"],
                    ],
                  },
                },
                //分隔线样式。
                splitLine: {
                  //表盘上的轴线
                  show: false,
                },
                axisLabel: {
                  //表盘上的刻度数值文字
                  show: false,
                },
                axisTick: {
                  //表盘上的刻度线
                  show: false,
                },
                pointer: {
                  //表盘上的指针
                  show: true,
                  width:4
                },
                itemStyle: {
                  //表盘指针的颜色
                  color: "#18c8ff",
                },
                title: {
                  //标题
                  show: false,
                  offsetCenter: [0, "-26%"], // x, y，单位px
                  textStyle: {
                    color: "#fff",
                    fontSize: 10, //表盘上的标题文字大小
                  },
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show: false,
                  offsetCenter: [0, "3%"],
                  color: "#ffffff",
                  formatter: function (params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 10,
                  },
                },
                data: [
                  //当前数值的数据
                  {
                    name: "",
                    value: this.water.replace('%',''),
                  },
                ],
              },
            ],
          };
          myChart1.setOption(option1);
          myChart2.setOption(option2);
          myChart3.setOption(option3);
          myChart4.setOption(option4);
          myChart5.setOption(option5);
          myChart6.setOption(option6);
        })
			},
	//预警管理chart
			yjgl_chart(industry=0) {
				var myChart = echarts.init(document.getElementById("yjgl_chart"));
				warningManagement(industry).then(res => {
					this.warningManagementData = res.data.numList
					this.warningManagementTotal = ((res.data.numList.reduce((total, item) => total + item, 0)).toString()).split('').reverse();
					if(res.data){
						let areaData = [
							{
								name: "供水",
								max: 1000,
								value: res.data.numList[5] || 0,
							},
							{
								name: "管廊",
								max: 1000,
								value: res.data.numList[3] || 0,
							},
							{
								name: "燃气",
								max: 1000,
								value: res.data.numList[4] || 0,
							},
							{
								name: "热力",
								max: 1000,
								value: res.data.numList[0] || 0,
							},
							{
								name: "桥梁",
								max: 1000,
								value: res.data.numList[2] || 0,
							},
							{
								name: "排水",
								max: 1000,
								value: res.data.numList[1] || 0,
							},
						];
						let data = [];
						areaData.forEach((item) => {
							data.push(item.value);
						});
						let maxNum = Math.max(...data); //获取数组中最大的值
						// 向上取整十，整百，整千，整万的方法
						function ceilNumber(number) {
							let bite = 0;
							if (number < 10) {
								return 10;
							}
							while (number >= 10) {
								number /= 10;
								bite += 1;
							}
							return Math.ceil(number) * Math.pow(10, bite);
						}
						let allMax = ceilNumber(maxNum); //将最大的值进行向上取整
						areaData.forEach((item) => {
							item.max = allMax;
						});
						let data1 = [0, 0, 0, 0, 0, 0];
						let data2 = [0, 0, 0, 0, 0, 0];
						let data3 = [0, 0, 0, 0, 0, 0];
						let data4 = [0, 0, 0, 0, 0, 0];
						let data5 = [0, 0, 0, 0, 0, 0];
						let data6 = [0, 0, 0, 0, 0, 0];
						data1[0] = data[0];
						data2[1] = data[1];
						data3[2] = data[2];
						data4[3] = data[3];
						data5[4] = data[4];
						data6[5] = data[5];
						let option = {
							color: ["#2E64FF", "#F0D418", "#FF9B42", "#FF6B6B", "#8E42FF", "#00e4ff"],
							legend: {
								show: false,
								trigger: "item",
								orient: "vertical",
								top: "80px",
								left: "20px",
								textStyle: {
									color: "#fff",
								},
							},
							tooltip: {
								trigger: "item",
								formatter: function (params) {
									return params.name + ": " + params.value + "件";
								},
							},
							radar: {
								zlevel: 5,
								shape: "circle",
								scale: true,
								indicator: areaData,
								center: ["50%", "50%"],
								radius: "40%",
								nameGap: "0",
								startAngle: 90,
								name: {
									show: false,
									color: "red",
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: "rgba(32,126,255, .5)",
									},
								},
								splitLine: {
									lineStyle: {
										color: "rgba(32,126,255, .5)",
									},
								},
								splitArea: {
									areaStyle: {
										color: "rgba(32,126,255, 0.1)",
									},
								},
							},
							polar: {
								radius: "40%",
							},
							angleAxis: {
								zlevel: 0,
								min: 0,
								max: 360,
								axisLabel: {
									show: false,
								},
								splitLine: {
									show: false,
								},
							},
							radiusAxis: {
								zlevel: 0,
								min: 0,
								max: allMax,
								axisLabel: {
									textStyle: {
										color: "rgba(29,208,240,.5)",
									},
								},
								splitLine: {
									show: false,
								},
							},
							series: [
								{
									type: "radar",
									symbolSize: 5,
									symbol: "circle",
									tooltip: {
										trigger: "none",
									},
									itemStyle: {
										normal: {
											label: {
												show: false,
												formatter: function (params) {
													if (params.value !== 0) {
														return params.value + "件";
													} else {
														return "";
													}
												},
												color: "#ffffff",
												fontSize: 10,
												distance: 0,
											},
										},
									},
									areaStyle: {
										normal: {
											color: {
												type: "radial",
												x: 0.5,
												y: 0.5,
												r: 0.5,
												colorStops: [
													{
														offset: 0,
														color: "rgba(32,126,255, 0.5)", // 0% 处的颜色
													},
													{
														offset: 1,
														color: "rgba(32,126,255, 0.1)", // 100% 处的颜色
													},
												],
												global: false, // 缺省为 false
											},
										},
									},
									data: [
										{
											value: data,
										},
										{
											value: data1,
											itemStyle: {
												color: "#2e64ff",
											},
											lineStyle: {
												color: "transparent", //设置折线的颜色
											},
										},
										{
											value: data2,
											itemStyle: {
												color: "#f0d418",
											},
											lineStyle: {
												color: "transparent", //设置折线的颜色
											},
										},
										{
											value: data3,
											itemStyle: {
												color: "#ff9b42",
											},
											lineStyle: {
												color: "transparent", //设置折线的颜色
											},
										},
										{
											value: data4,
											itemStyle: {
												color: "#ff6b6b",
											},
											lineStyle: {
												color: "transparent", //设置折线的颜色
											},
										},
										{
											value: data5,
											itemStyle: {
												color: "#8e42ff",
											},
											lineStyle: {
												color: "transparent", //设置折线的颜色
											},
										},
										{
											value: data6,
											itemStyle: {
												color: "#00e4ff",
											},
											lineStyle: {
												color: "transparent", //设置折线的颜色
											},
										},
										{
											value: [0, 0, 0, 0, 0, 0],
											// name: '违章占比',
											symbolSize: 5,
											itemStyle: {
												color: "rgba(40, 97, 132)",
											},
										},
									],
									zlevel: 10,
									z: 4,
								},
								{
									type: "pie",
									startAngle: 90,
									clockwise: false, //逆时针
									data: areaData.map((item) => {
										return {
											name: item.name,
											value: item.value,
										};
									}),
									radius: ["45%", "60%"],
									zlevel: -1,
									label: {
										normal: {
											formatter: "{d}%",
											position: "top",
											fontSize: "12",
											color: "#fff",
										},
									},
								},
							],
						};
						myChart.setOption(option);
					}
				})

			},
			//事件统计chart
			sjChart(industry=0,status=true) {
				var myChart = echarts.init(document.getElementById("sjChart"));
				expediteOrSuperviseCount().then(res => {
					if(res.data){
						this.eventStatisticsData = res.data.numList || []
						// 整理事件督办数据，填充事件督办图表
						this.superviselabels = res.data.itemLabel
						this.superviseCount = res.data.superviseCount
						this.hyChart()
						let eventInfoOfIndustry = []
						res.data.itemLabel.forEach((e,idx) => {
							eventInfoOfIndustry.push({
								label:e,
								superviseCount:res.data.superviseCount[idx],
								expediteCount:res.data.expediteCount[idx]
							})
						})
						this.eventInfoOfIndustry = eventInfoOfIndustry
						var rich = {
							white: {
								color: "#ddd",
								align: "center",
								padding: [2, 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 = [
							"#f0af7a",
							"#00cfff",
							"#c5f07a",
							"#7af0aa",
							"#f35b5b",
							"#006ced",
						];
						for (var i = 0; i < eventInfoOfIndustry.length; i++) {
							data.push({
								value: eventInfoOfIndustry[i].expediteCount,
								name: eventInfoOfIndustry[i].label,
								itemStyle: {
									normal: {
										borderWidth: 8,
										shadowBlur: 16,
										borderColor: color[i],
										shadowColor: color[i],
									},
								},
							}, {
								value: 2,
								name: "",
								itemStyle: placeHolderStyle,
							});
						}
						var seriesObj = [{
							name: "",
							type: "pie",
							clockWise: false,
							radius: [45, 50],
							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 < eventInfoOfIndustry.length; i++) {
												total += eventInfoOfIndustry[i].expediteCount;
											}
											if (params.name !== "") {
												return params.name + "\n" + params.value;
											} else {
												return "";
											}
										},
										rich: rich,
									},
									labelLine: {
										length: 6,
										length2: 14,
										show: true,
										color: "#00ffff",
									},
								},
							},
							data: data,
						}, ];
						var option = {
							title: [{
								text: "事件总数",
								x: "center",
								top: "52%",
								textStyle: {
									color: "#FFFFFF",
									fontSize: 14,
									fontWeight: "100",
								},
							},
								{
									text: (res.data.expediteCount.reduce((total, item) => total + item, 0)) + '' || '0',
									x: "center",
									top: "30%",
									textStyle: {
										fontSize: "20",
										color: "#FFFFFF",
										fontFamily: "DINAlternate-Bold, DINAlternate",
										foontWeight: "600",
									},
								},
							],
							tooltip: {
								show: false,
							},
							legend: {
								show: false,
							},
							toolbox: {
								show: false,
							},
							series: seriesObj,
						};
						myChart.setOption(option);
					}
				})
			},
			hyChart() {
				var myChart = echarts.init(document.getElementById("hyChart"));
				var xData = this.superviselabels;
				var yData = this.superviseCount;
				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: 14,
						},
					}, ],
					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: "20%",
						xAxisIndex: 0,
						yAxisIndex: 0,
						label: {
							normal: {
								show: true,
								position: "top",
								textStyle: {
									color: "#ffc72b",
									fontSize: 14,
								},
							},
						},
						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(industry) {
				var myChart = echarts.init(document.getElementById("ndChart"));
        annualPlanCount(industry).then(res => {
					if(res.data){
            this.yearlyTaskStatisticsTotal = ((res.data.counts.reduce((total, item) => total + item, 0)));
						var option = {
							animation: true,
							grid: {
								top: "15%",
								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,
								},
								{
									// name: "外框",
									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.counts || [],
									z: 5,
								},
							],
							// dataZoom: [
							//   {
							//     type: "slider",
							//     show: false,
							//     xAxisIndex: [0],
							//     endValue: 14,
							//     startValue: 0
							//   }
							// ]
						};
						myChart.setOption(option);
					}
				})
        myChart.on('click', function (params) {
          window.open('/rwList');
        });
			},

			// 风险管理
			fxglchart() {
				var myChart = echarts.init(document.getElementById("fxglchart"));
				var option = {
					tooltip: {
						//提示框组件
						trigger: "axis",
						formatter: "{b}<br />{a2}: {c2}<br />{a1}: {c1}<br />{a5}: {c5}",
						axisPointer: {
							type: "shadow",
							label: {
								backgroundColor: "rgba(17, 27, 54, 1)",
							},
						},
						textStyle: {
							color: "#fff",
							fontStyle: "normal",
							fontFamily: "微软雅黑",
							fontSize: 12,
						},
					},
					grid: {
						left: "4%",
						right: "8%",
						bottom: "2%",
						top: "23%",
						//	padding:'0 0 10 0',
						containLabel: true,
					},
					legend: {
						//图例组件，颜色和名字
						right: "10%",
						top: "0%",
						itemGap: 16,
						itemWidth: 18,
						itemHeight: 10,
						selectedMode: false,
						data: [
							"一级风险",
							"二级风险",
							"三级风险",
							"四级风险",
						],
						textStyle: {
							color: "#08f1f8",
							fontStyle: "normal",
							fontFamily: "微软雅黑",
							fontSize: 12,
						},
					},
					xAxis: [
						{
							type: "category",
							//	boundaryGap: true,//坐标轴两边留白
							data: [
								"管廊",
								"供水",
								"排水",
								"桥梁",
								"热力",
								"燃气",
							],
							axisLabel: {
								//坐标轴刻度标签的相关设置。
								//		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
								//	margin:15,
								textStyle: {
									color: "#078ceb",
									fontStyle: "normal",
									fontFamily: "微软雅黑",
									fontSize: 12,
								},
								rotate: 0,
							},
							axisTick: {
								//坐标轴刻度相关设置。
								show: false,
							},
							axisLine: {
								//坐标轴轴线相关设置
								lineStyle: {
									color: "rgba(255,255,255,0.4)",
								},
							},
							//splitLine: {
							//         show: true,
							//         lineStyle: {
							//             color: 'rgba(255,255,255,0.2)',
							//         }
							//     },
						},
					],
					yAxis: [
						{
							type: "value",
							splitNumber: 5,
							axisLabel: {
								textStyle: {
									color: "#078ceb",
									fontStyle: "normal",
									fontFamily: "微软雅黑",
									fontSize: 12,
								},
							},
							axisLine: {
								lineStyle: {
									color: "rgba(255,255,255,0.4)",
								},
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: ["#fff"],
									opacity: 0.06,
								},
							},
						},
					],
					series: [
						{
							name: "",
							type: "pictorialBar",
							symbolSize: [24, 10],
							symbolOffset: [-36, -5],
							symbolPosition: "end",
							z: 12,
							// "barWidth": "0",barGap
							label: {
								normal: {
									show: true,
									offset: [-36, 0],
									position: "top",
									textAlign: "left",
									formatter: function (data) {
										if (data.value === 0) {
											return "";
										}
										return data.value + "%";
									},
									fontSize: 12,
									color: "rgba(51,135,255, 1)",
								},
							},
							color: "rgba(51,135,255, 1)",
							data: [15, 51, 8, 46, 15, 51, 8, 46, 15, 51],
						},
						{
							name: "一级风险",
							type: "bar",
							data: [15, 51, 8, 46, 15, 51, 8, 46, 15, 51],
							barWidth: 24,
							barGap: 20, //柱间距离
							itemStyle: {
								normal: {
									show: true,
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: "rgba(51,135,255, 1)",
										},
										{
											offset: 1,
											color: "rgba(51,135,255, .2)",
										},
									]),
									opacity: 0.8,
								},
							},
						},

						{
							name: "", //头部
							type: "pictorialBar",
							symbolSize: [24, 10],
							symbolOffset: [-12, -5],
							z: 12,
							symbolPosition: "end",
							// itemStyle:{
							//     color:'rgba(51,135,255, 1)',
							//     opacity:1,
							// },
							label: {
								normal: {
									offset: [-12, 0],
									show: true,
									position: "top",
									// "formatter": "{c}%",
									fontSize: 12,
									color: "#4acf6f",
									formatter: function (data) {
										if (data.value === 0) {
											return "";
										}
										return data.value + "%";
									},
								},
							},
							color: "#4acf6f",
							data: [65, 45, 24, 48, 65, 45, 24, 48, 65, 45],
						},
						{
							name: "二级风险",
							type: "bar",
							barWidth: 24,
							barGap: "20",
							z: 0,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: "rgba(52, 209, 135, 1)",
										},
										{
											offset: 1,
											color: "rgba(52, 209, 135, 0)",
										},
									]),
									opacity: 0.8,
								},
							},

							data: [65, 45, 24, 48, 65, 45, 24, 48, 65, 45],
						},

						{
							name: "",
							type: "pictorialBar",
							symbolSize: [24, 10],
							symbolOffset: [12, -5],
							symbolPosition: "end",
							z: 12,
							// "barWidth": "0",barGap
							label: {
								normal: {
									offset: [12, 0],
									show: true,
									position: "top",
									// "formatter": "{c}%",
									fontSize: 12,
									color: "#f09f38",
									formatter: function (data) {
										if (data.value === 0) {
											return "";
										}
										return data.value + "%";
									},
								},
							},
							color: "#f09f38",
							data: [18, 4, 60, 6, 18, 4, 60, 6, 18, 4],
						},
						{
							name: "三级风险",
							type: "bar",
							data: [18, 4, 60, 6, 18, 4, 60, 6, 18, 4],
							barWidth: 24,
							barGap: "0", //柱间距离
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: "rgba(228, 131, 38, 1)",
										},
										{
											offset: 1,
											color: "rgba(228, 131, 38, 0)",
										},
									]),
									opacity: 0.8,
								},
							},
						},

						{
							name: "",
							type: "pictorialBar",
							symbolSize: [24, 10],
							symbolOffset: [36, -5],
							symbolPosition: "end",
							z: 12,
							// "barWidth": "0",barGap
							label: {
								normal: {
									offset: [36, 0],
									show: true,
									position: "top",
									formatter: function (data) {
										if (data.value === 0) {
											return "";
										}
										return data.value + "%";
									},
									fontSize: 12,
									color: "#d9302e",
								},
							},
							color: "#d9302e",
							data: [2, 0, 8, 0, 2, 0, 8, 0, 2, 0],
						},
						{
							name: "三级风险",
							type: "bar",
							data: [2, 0, 8, 0, 2, 0, 8, 0, 2, 0],
							barWidth: 24,
							barGap: "0", //柱间距离
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
										{
											offset: 0,
											color: "rgba(196, 46, 45, 1)",
										},
										{
											offset: 1,
											color: "rgba(196, 46, 45, 0)",
										},
									]),
									opacity: 0.8,
								},
							},
						},
					],
				};

				myChart.setOption(option);

			},


			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);
				});
			},
			toggleTab(current) {
				this.currentTab = current;
				this.currentClass = current;
			},
			handleCheckedCities(checkedOptions) {
				// checkedOptions 是当前选中的所有选项的数组
				this.$refs.supermap.addLifelineOpen(this.checkedOptions)
			},
			//开挖
			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)
			}
		}
	}
</script>
<style lang="scss">
	@font-face {
		font-family: 'ds';
		src: url('../../assets/styles/DS-Digital_Bold.ttf') format('truetype'); /* 根据实际路径调整 */
	}
	.el-radio__input.is-checked .el-radio__inner {
		border-color: #406c9a;
		background: #406c9a;
	}
	.el-radio__inner {
		border: 1px solid #406c9a;
		background-color: #25405f;
	}
	.el-radio {
		color: #fff;
	}
	.el-radio__input.is-checked+.el-radio__label {
		color: #40daff;
	}

	/*弹层新样式*/
	.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-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-style {
		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);
		}
	}

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

	}

	/*行业数据完整度*/
	.hysj{
		margin-bottom: 15px!important;
		height: 220px!important;
		.hysj_div{
			justify-content: space-around;
			#hysj_div_chart1,#hysj_div_chart2,#hysj_div_chart3,
			#hysj_div_chart4,#hysj_div_chart5,#hysj_div_chart6{
				width: 180px;
				height: 75px;
			}
			p{
				font-size: 12px;
				color: #fff;
				text-align: center;
				b{
					font-family: 'almmsht';
					font-size: 16px;
					background: -webkit-linear-gradient(bottom,#fff,#53c4ff); /* Chrome, Safari */
					background: linear-gradient(bottom,#fff,#53c4ff); /* 标准语法 */
					-webkit-background-clip: text; /* Chrome, Safari */
					background-clip: text;
					-webkit-text-fill-color: transparent; /* Chrome, Safari */
					color: transparent; /* 兼容不支持background-clip的浏览器 */
					/*box-shadow: 0px 0px 5px #3063ca;*/
					margin-left: 8px;
					font-weight: bold;
				}
			}
		}
	}


	/*巡检及隐患*/
.xjjyh{
	margin-bottom: 15px!important;
	height: 170px!important;
	.xjjyh_div{
		justify-content: space-around;
		.xjjyh_div_con{
			background: url("../../assets/index_img/jgpt_iconbg.png") no-repeat center;
			background-size: 100% 100%;
			width: 164px;
			height: 71px;
			padding: 5px 8px;
			.xjjyh_img{
				margin-right: 5px;
				img{
					display: block;
				}
				p{
					font-size: 12px;
					height: 18px;
					line-height: 18px;
					text-align: center;
				}
			}
			.xjjyh_txt{
				display: flex;
				flex-direction: column;
				h4{
					height: 20px;
					line-height: 20px;
					span{
						font-size: 12px;
						margin-right: 5px;
					}
					i{
						font-size: 12px;
						color: #00bffe;
					}
				}
				img{
					margin: 5px 0px;
				}
			}
		}
	}
}

/*预警管理*/
.yjgl{
	.yjgl_div_tit{
		display: flex;
		flex-direction: row;
		justify-items: center;
		width: 100%;
		span{
			font-size: 14px;
			color: #fff;
			line-height: 25px;
		}
		b{
			font-family: 'ds';
			color: #00bffe;
			display: inline-block;
			border:1px solid #507a84;
			margin-right: 5px;
			font-size: 22px;
			padding: 0px 5px;
		}
	}
	#yjgl_chart{
		width: 340px;
		height: 184px;
	}
	.yjgl_list{
		p{
			border-bottom: 1px dashed #e9f8ff;
			width: 150px;
			height: 28px;
			line-height: 25px;
			padding-left: 20px;
			position: relative;
			b{
				float: right;
				font-size: 12px;
				text-shadow: 0px 0px 5px #207bbe;
			}
		}
		p::after{
			content: "";
			display: block;
			width: 10px;
			height: 6px;
			position: absolute;
			left: 0px;
			top: 9px;
			border-radius: 2px;
		}
		p:nth-child(1)::after{
			background: #2e64ff;
		}
		p:nth-child(2)::after{
			background: #f0d418;
		}
		p:nth-child(3)::after{
			background: #ff9b42;
		}
		p:nth-child(4)::after{
			background: #ff6b6b;
		}
		p:nth-child(5)::after{
			background: #8e42ff;
		}
		p:nth-child(6)::after{
			background: #00e4ff;
		}
	}
}

/*预警统计*/
	.sjtj{
		margin-bottom: 15px!important;
		height: 150px!important;
	}
	#sjChart{
		height: 130px!important;
	}
	/*年度任务*/
.ndrw{
	margin-bottom: 15px!important;
	height: 135px!important;
}
#ndChart{
	height: 130px!important;
}
	/*风险管理*/
	.fxgl{
		margin-bottom: 15px!important;
		height: 165px!important;
	}
	#fxglchart{
		width: 100%;
		height: 220px;
	}


	/*预案管理*/
.yagl{
	height: 155px!important;
	display: block;
	flex-direction: inherit!important;
	.hei_scroll{
		height: 130px;
		overflow-y: scroll;
		.yagl_div{
			width: 49%;
			float: left;
			margin-bottom: 10px;
			cursor: pointer;
			img{
				float: left;
				margin-right: 5px;
			}
			.yagl_div_txt{
				float: right;
				width: 190px;
				p{
					font-size: 14px;
					font-weight: bold;
					color: #fff;
				}
				span{
					font-size: 12px;
					color: #ceeffc;
				}
			}
		}
	}

}


/*图层切换*/
	/*资源*/
.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-body {
		background: linear-gradient(0deg, rgba(12, 36, 66, 0.52) 0%, #1D5592 100%);
		border-radius:20px;
		display: flex;
		color: #fff;
		z-index: 99;
		border: 1px solid #2A6DCD;
		padding: 10px 20px;
		max-width:500px !important;
	}
// .el-tab-pane{
//   height: 80px;
//   overflow: auto;
// }

	/*地图工具*/
	.map_tab{
		position: absolute;
		right:570px;
		bottom:40px;
		div{
			background: url("../../assets/index_img/jgpt_iconbg2.png") no-repeat;
			background-size: 100% 100%;
			width: 27px;
			height: 27px;
			border-radius: 8px;
			margin-bottom: 5px;
			border: none;
			cursor: pointer;
			img{
				display: block;
				margin: 6px auto;
			}
		}
	}


	.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: 100px !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;

	}
  .el-tabs__item {
    padding: 0 15px;
    height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 30px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    position: relative;
    border-radius: 20px;
  }
	.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: #0fc5f2;
	}

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

	.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: #00ffee;
	}

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

    .el-tree-node__expand-icon{
      color: #e23922;
    }
    .el-tree-node__content:hover {
      background-color: rgba(226, 57, 34, 0.4);
    }
    .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;
      background: rgba(226, 57, 34, 0.28);
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba(226, 57, 34, 0.4);
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgba(226, 57, 34, 0.7);
      border-color: #e23922;
    }
    .el-checkbox__inner::after {
      border-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';
	/*公共*/
	.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;
		height: 38px;
		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{
			display: inline-block;
			height: 38px;
			line-height: 38px;
		}
		span:nth-child(1) {
			width: 80px;
			padding-left: 20px;
			background: url("../../assets/index_img/jgpt_icon7.png") no-repeat 8px 12px;
		}

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

		}

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

		span:nth-child(2n) {
			color: #fff;
		}
	}
	.hei_scroll_400{
		height: 400px;
		overflow-y: scroll;
	}
	.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;
			height: 50px;
			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: 80px;
				display: inline-block;
				padding-left: 20px;
				color: #fff;
			}
			span:nth-child(1).ps {
				background: url("../../assets/index_img/jcxt_ps.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).rq {
				background: url("../../assets/index_img/jcxt_rq.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).rl {
				background: url("../../assets/index_img/jcxt_rl.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).gl {
				background: url("../../assets/index_img/jcxt_gl.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).gs {
				background: url("../../assets/index_img/jcxt_gs.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).ql {
				background: url("../../assets/index_img/jcxt_ql.png") no-repeat 5px 2px;
				background-size: 21px;
			}

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

			span:nth-child(3) {
				width: 65px;
				display: inline-block;
				position: relative;
			}
			span:nth-child(3).zx{
				color: #45bf02;
			}
			span:nth-child(3).zx::after{
				width: 5px;
				height: 5px;
				border-radius: 20px;
				content: '';
				position: absolute;
				display: block;
				left: 4px;
				top:8px;
				background: #45bf02;
				box-shadow: 0px 0px 8px #45bf02;
			}
			span:nth-child(3).lx{
				color: #f80606;
			}
			span:nth-child(3).lx::after{
				width: 5px;
				height: 5px;
				border-radius: 20px;
				content: '';
				position: absolute;
				display: block;
				left: 4px;
				top:8px;
				background: #f80606;
				box-shadow: 0px 0px 8px #f80606;
			}

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


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

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


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

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

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

		/*头部*/
		.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: center;
				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-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-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;

			.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-box4{
	width: 100%;
	height: auto;
	background: linear-gradient(90deg, rgba(6, 20, 36, .3), rgba(50, 81, 128, .2));
	margin-top: 2px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}
		.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-con-num {
					display: flex;
					width: 185px;
					height: 135px;
					flex-flow: wrap;
					justify-content: space-around;

					.chart-con-num-rig {
						width: 68px;
						height: 36px;
						display: flex;
						flex-direction: column;
						flex-wrap: wrap;
						justify-content: space-around;
						margin: 2px 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;
					}
				}

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

					ul {
						margin-left: 50px;
					}
				}
			}
		}

		/*左侧*/

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

		.right-content {
			width: 540px;
			height: 90vh;
			overflow-y: auto;
			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:nth-child(7) {
				animation: btnmove 2.2s;
			}


			.btn-span7{
				width: 120px !important;
				background-size: contain !important;
				height: 40px !important;
			}

			.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%);
			/* 确保三角形中心对齐链接的中心 */
		}
	}

	/*小导航*/
	.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;
		}
	}
	.mar-top45{
		margin-top: 45px!important;
	}
 .zy-icon1 {
 	bottom: 215px !important;
 }

 .zy-icon2 {
 	bottom: 65px !important;
 }

 .zy-icon3 {
 	bottom: 140px !important;
 }
</style>