visu_lifeline/src/views/industry/FengxianQd.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">
				<el-select v-model="value" placeholder="请选择" class="sj-select" popper-class="sj-s-pop">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="value2" placeholder="请选择" class="sj-select" popper-class="sj-s-pop">
					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="value3" placeholder="请选择" class="sj-select" popper-class="sj-s-pop">
					<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button class="sj-btn-icon-h">查询</el-button>

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


			<!--底部按钮区域背景-->
			<div class="footerbj">
			</div>
			<!--左侧资产盘点 ps:资产盘点单元格内是竖向的流式布局，数据要竖向循环-->
			<div class="left-content contfl">

				<div class="title-bar"  @click="riskListlayer = true">
					<span style="cursor: pointer;" @click="dialogVisibleXq = true">风险清单</span>
				</div>
				<div class="content-box h-736" style="overflow: hidden scroll;">
					<el-collapse v-model="activeName" accordion class="accordion">
					  <el-collapse-item :title="risk.hiddenDangerType" :name="index" v-for="(risk,index) in riskList">
						  <ul class="fengxian-list">
						  	<li class="active" v-for="build in risk.buildingList">
						  		<h2>{{build.address}}</h2>
						  		<span>{{risk.remark}}</span>
						  	</li>
						  </ul>
					  </el-collapse-item>
					</el-collapse>

				</div>
			</div>
			<div class="middle-content">
				<div class="contfl">
					<div class="title-bar">
						<span>管道破损分析</span>
<!--						<div>-->
<!--							<em>环比</em>-->
<!--							<img src="../../assets/images/gangwei/up.png">-->
<!--							<em class="up">2.5%</em>-->
<!--						</div>-->
					</div>
					<div class="content-box h-220">
						<div class="tubiao" id="x-chart12"></div>
					</div>
				</div>
				<div class="contfl">
					<div class="title-bar">
						<span>市政管网智能化监测分析</span>
<!--						<div>-->
<!--							<em>环比</em>-->
<!--							<img src="../../assets/images/gangwei/don.png">-->
<!--							<em class="don">2.5%</em>-->
<!--						</div>-->
					</div>
					<div class="content-box h-220">
						<div class="tubiao" id="x-chart13"></div>
					</div>
				</div>
				<div class="contfl">
					<div class="title-bar">
						<span>居民用水分析</span>
						<div class="time_tab">
							<h4 :class="isUserWater == 1?'active':''" @click="jmysChart(1)">周</h4>
							<h4 :class="isUserWater == 2?'active':''" @click="jmysChart(2)">月</h4>
							<h4 :class="isUserWater == 3?'active':''" @click="jmysChart(3)">季度</h4>
							<h4 :class="isUserWater == 4?'active':''" @click="jmysChart(4)">年</h4>
						</div>
					</div>
					<div class="content-box h-220">
						<div class="tubiao" id="x-chart1"></div>
					</div>
				</div>
				<div class="contfl">
					<div class="title-bar">
						<span>燃气查改分析</span>
<!--						<div>-->
<!--							<em>环比</em>-->
<!--							<img src="../../assets/images/gangwei/up.png">-->
<!--							<em class="up">2.5%</em>-->
<!--						</div>-->
					</div>
					<div class="content-box h-220">
						<div class="tubiao" id="x-chart7"></div>
					</div>
				</div>
				<div class="contfl" style="width: 100% !important;">
					<div class="title-bar">
						<span>普查覆盖率</span>
					</div>
					<div class="content-box h-220 pcfg">
						<div class="pcChart">
							<div id="x-chart3"></div>
							<span>排水管网普查</span>
						</div>
						<div class="pcChart">
							<div id="x-chart4"></div>
							<span>供热管网普查</span>
						</div>
						<div class="pcChart">
							<div id="x-chart5"></div>
							<span>城市生活污水集中收集率</span>
						</div>
						<div class="pcChart">
							<div id="x-chart6"></div>
							<span>应急供水保障率</span>
						</div>
					</div>
				</div>
			</div>
			<!--预警列表-->
			<div class="right-content contfl">

				<div class="title-bar">
					<span>燃气安全隐患住宅分析</span>
				</div>
				<div class="content-box h-470">
					<div class="yhlist-title">
						<span>街道社区名称</span>
						<span>住宅数量</span>
					</div>
					<div class="yhlist-cont">
						<div class="yhlist-cont-in" v-for="item in streetCommList">
							<span>{{item.streetName}}-{{item.communityName}}</span>
							<span>{{item.houseCount}}</span>
						</div>
					</div>
				</div>
				<div class="title-bar">
					<span>危旧桥梁满意度调查</span>
<!--					<div>-->
<!--						<em>环比</em>-->
<!--						<img src="../../assets/images/gangwei/up.png">-->
<!--						<em class="up">2.5%</em>-->
<!--					</div>-->
				</div>
				<div class="content-box h-220 myddc">
					<div class="mydtubiao" id="x-chart2"></div>
					<dl>
						<dd v-for="item in qlmydList">
							<span>{{item.name}}</span>
							<span>{{item.value}}</span>
						</dd>
					</dl>
				</div>

			</div>

			<!-- 地图 -->
<!--			<supermap ref="supermap" style="width: 100%;height: 100vh;">-->
<!--			</supermap>-->
      <!-- 底部按钮 -->
      <div class="life-btm-btn-a">
        <div class="btn-span btn-span7 on">
          <span>全部</span>
        </div>
        <div class="btn-span btn-span7 ">
          <span>燃气</span>
        </div>
        <div class="btn-span btn-span7">
          <span>热力</span>
        </div>
        <div class="btn-span btn-span7">
          <span>供水</span>
        </div>
        <div class="btn-span btn-span7">
          <span>排水</span>
        </div>
        <div class="btn-span btn-span7">
          <span>管廊</span>
        </div>
        <div class="btn-span btn-span7">
          <span>桥梁</span>
        </div>
      </div>

		</div>
		<!-- 列表弹层 -->
		<el-dialog title="风险列表" :visible.sync="riskListlayer" width="52%" class="sj-dialog-newstyle riskList ">
			<!--<div class="title-bar">-->
				<!--<span>风险列表</span>-->
			<!--</div>-->
			<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>

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

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

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

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

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

	import * as echarts from 'echarts';
  import {selectRiskRegisterlist} from "@/api/tableInfo";

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

		},
		mounted() {
      this.time();
      this.selectRiskRegisterlist();
      this.getStreetCommHouseCount();
			setTimeout(() => {
				this.title = '四平市城市生命线'
				this.jmysChart(this.isUserWater);
				this.gdpsChart()
				this.szgwChart()
				this.wjqlmydChart();
        this.getCoverageRateLatest();
				this.rqcgChart();
			}, 1000)
			this.sblx_chart();
			this.fxChart();

		},
		data() {
			return {
        riskList:[],
        streetCommList:[],
        isUserWater:1,
        qlmydList:[],

				riskListlayer:false,
				dialogVisibleXq:false,
        activeName: '1',
				currentTab: 0,
				currentClass: 0,
			}
		},
		methods: {
      goToHomePage() {
        window.location.href = '/homePage';
      },
      time() {
        let dt = new Date();
        let y = dt.getFullYear();
        let mt = dt.getMonth() + 1;
        mt = mt >= 10 ? mt : '0' + mt
        let day = dt.getDate() >= 10 ? dt.getDate() : '0' + dt.getDate();
        let h = dt.getHours() >= 10 ? dt.getHours() : '0' + dt.getHours();
        let m = dt.getMinutes() >= 10 ? dt.getMinutes() : '0' + dt.getMinutes();
        let s = dt.getSeconds() >= 10 ? dt.getSeconds() : '0' + dt.getSeconds();
        // document.getElementById("day").innerHTML = y + "年" + mt + "月" + day + "日";//2022年1月17日
        document.getElementById("day").innerHTML = y + "." + mt + "." + day + ""; //2022年1月17日
        document.getElementById("time").innerHTML = h + ":" + m + ":" + s; //16:28:03
        setTimeout(() => {
          this.time()
        }, 1000);
      },
      selectRiskRegisterlist(){
        selectRiskRegisterlist().then(res => {
          this.riskList = res.rows;
        })
      },
      getStreetCommHouseCount(){
        getStreetCommHouseCount().then(res => {
          this.streetCommList = res.rows;
        })
      },
      //事件统计chart
			sjChart() {
				var myChart = echarts.init(document.getElementById("sjChart"));
				var scaleData = [{
						name: "处理中",
						value: 500,
					},
					{
						name: "待处理",
						value: 600,
					},
					{
						name: "已完成",
						value: 650,
					},

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

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

			},
			// 居民用水统计分析
			jmysChart(type){
        this.isUserWater = type;
        getResidentWaterAnalysisCharts(this.isUserWater).then(res => {
          var myChart = echarts.init(document.getElementById("x-chart1"));
          let xAxisData = res.data.xdata;
          if(this.isUserWater == 2){
            for (const i in xAxisData) {
              xAxisData[i] = xAxisData[i].substring(xAxisData[i].length-2,xAxisData[i].length);
            }
          }
          var option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              top: "19%",
              right: "3%",
              left: "8%",
              bottom: "16%",
            },
            xAxis: [
              {
                type: "category",
                data: xAxisData,
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.12)",
                  },
                },
                axisLabel: {
                  margin:20,
                  color: "#e2e9ff",
                  textStyle: {
                    fontSize: 10,
                  },
                },
              },
            ],
            yAxis: [
              {
                axisLabel: {
                  formatter: "{value}",
                  color: "#e2e9ff",
                },
                axisLine: {
                  show: false,
                },
                splitLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.12)",
                  },
                },
              },
            ],
            series: [
              {
                type: "bar",
                data: res.data.ydata[0].value,
                barWidth: "10px",
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(0,244,255,1)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgba(0,77,167,1)", // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                    barBorderRadius: [30, 30, 30, 30],
                    shadowColor: "rgba(0,160,221,1)",
                    shadowBlur: 4,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    lineHeight:20,
                    width: 60,
                    height:20,
                    backgroundColor: "rgba(0,160,221,0.1)",
                    borderRadius: 200,
                    position: ["-13", "-40"],
                    distance: 1,
                    formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(","),
                    rich: {
                      d: {
                        color: "#3CDDCF",
                      },
                      a: {
                        color: "#fff",
                        align: "center",
                      },
                      b: {
                        width: 1,
                        height:20,
                        borderWidth: 1,
                        borderColor: "#234e6c",
                        align: "left",
                      },
                    },
                  },
                },
              },
            ],
          };
          myChart.setOption(option)
        })
			},
			gdpsChart(){
        getPipeDamageAnalysisCharts().then(res => {
          let legendData = [];
          let xAxisData = res.data.xdata;
          let seriesData = [];
          for (const d of res.data.ydata) {
            legendData.push(d.name);
            seriesData.push({
              name:d.name,
              type:'bar',
              stack: '1',
              barWidth:16,
              data:d.value
            });
          }
          var myChart = echarts.init(document.getElementById("x-chart12"));
          var option = {
            tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            color:["#388BFF",'#05C3FA','#F6931C','#FFD52E'],
            legend: {
              data:legendData,
              right:'0%',
              textStyle: {
                color: '#ffffff' // 👈 设置图例文字颜色（例如白色）
              }
            },
            grid: {
              top: "15%",
              right: "1%",
              left: "1%",
              bottom: "20%",
            },
            xAxis : [
              {
                type : 'category',
                data : xAxisData,
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.12)",
                  },
                },
                axisLabel: {
                  margin:20,
                  color: "#e2e9ff",
                  textStyle: {
                    fontSize: 10,
                  },
                },
              }
            ],
            yAxis : [
              {
                type : 'value',
                "show": false,
                "axisLabel": {
                  "show": false,
                  "textStyle": {
                    "color": "#7d838b"
                  }
                }
              },
              {
                "type": "value",
                "name": "环比",
                "show": false,
                "axisLabel": {
                  "show": false,
                  "textStyle": {
                    "color": "#7d838b"
                  }
                }
              }
            ],
            series : seriesData
          };
          myChart.setOption(option)
        })
			},
			szgwChart(){
        getPipeMonitorCharts().then(res => {
          let legendData = [];
          let xAxisData = res.data.xdata;
          let seriesData = [];
          for (const d of res.data.ydata) {
            legendData.push(d.name);
            seriesData.push({
              name:d.name,
              type:'bar',
              stack: '1',
              barWidth:16,
              data:d.value
            });
          }
          var myChart = echarts.init(document.getElementById("x-chart13"));
          var option = {
            tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            color:["#388BFF",'#05C3FA','#F6931C','#FFD52E'],
            legend: {
              data:legendData,
              right:'0%',
              textStyle: {
                color: '#ffffff' // 👈 设置图例文字颜色（例如白色）
              }
            },
            grid: {
              top: "15%",
              right: "1%",
              left: "1%",
              bottom: "20%",
            },
            xAxis : [
              {
                type : 'category',
                data : xAxisData,
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.12)",
                  },
                },
                axisLabel: {
                  margin:20,
                  color: "#e2e9ff",
                  textStyle: {
                    fontSize: 10,
                  },
                },
              }
            ],
            yAxis : [
              {
                type : 'value',
                "show": false,
                "axisLabel": {
                  "show": false,
                  "textStyle": {
                    "color": "#7d838b"
                  }
                }
              },
              {
                "type": "value",
                "name": "环比",
                "show": false,
                "axisLabel": {
                  "show": false,
                  "textStyle": {
                    "color": "#7d838b"
                  }
                }
              }
            ],
            series : seriesData
          };
          myChart.setOption(option)
        })
			},
			// 危旧桥梁满意度调查
			wjqlmydChart(){
        getBridgeSatisfactionLatest().then(res => {
          for (const r of res.rows) {
            this.qlmydList.push({name:"满意数",value:r.satisfactionCount})
            this.qlmydList.push({name:"基本满意数",value:r.basicSatisfactionCount})
            this.qlmydList.push({name:"不满意数",value:r.dissatisfactionCount})
          }
          var myChart = echarts.init(document.getElementById("x-chart2"));
          var color = ["#FC4567", "#2F8DF4", "#C25EC4"];
          var option = {
            color: color,
            // backgroundColor: "#0A173B",
            title: {
              text: "",
              left: "center",
              top: "50%",
              textStyle: {
                fontSize: 10,
                color: "#fff",
                fontWeight: "normal",
              },
            },
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                type: "pie",
                roseType: "radius",
                radius: ["18%", "48%"],
                data: this.qlmydList,
                label: {
                  normal: {
                    formatter: "{font|{b}}\n{hr|}\n{font|{d}%}",
                    rich: {
                      font: {
                        fontSize: 10,
                        padding: [5, 0],
                        color: "#fff",
                      },
                      hr: {
                        height: 0,
                        borderWidth: 1,
                        width: "100%",
                        borderColor: "#fff",
                      },
                    },
                  },
                },
                labelLine: {
                  lineStyle: {
                    color: "#fff",
                  },
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0,0,0,0.5)",
                  },
                },
              },
            ],
          };
          myChart.setOption(option)
        })
			},
      getCoverageRateLatest(){
        getCoverageRateLatest().then(res => {
          this.pspcChart(res.rows[0].drainagePipelineSurveyRate);
          this.grpcChart(res.rows[0].heatingPipelineSurveyRate);
          this.csshwsChart(res.rows[0].urbanSewageCollectionRate);
          this.yjgsChart(res.rows[0].emergencyWaterSupplyRate);
        })
      },
			// 排水普查
			pspcChart(dataArr){
				var myChart = echarts.init(document.getElementById("x-chart3"));
				// 初始化数据
				const dataX = 100;
				const option = {
				  // backgroundColor: "#061530",
				  backgroundStyle: {
				    borderWidth: 1,
				    color: "transparent",
				  },
				  title: [
				    {
				      text: `${dataArr} %`,
				      bottom: "0%",
				      left: "center",
				      textStyle: {
				        fontSize: "16",
				        color: "#ffff",
				        fontWeight:400,
				      },
				      triggerEvent: true,
				    },
				  ],

				  legend: {
				    show: false,
				  },
				  series: [
				    {
				      name: "最外部进度条",
				      type: "gauge",
				      radius: "99%",
				      splitNumber: 1,
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              dataArr / dataX,
				              {
				                type: "linear",
				                x: 0,
				                y: 1,
				                x2: 0.5,
				                y2: 0.5,
				                colorStops: [
				                  {
				                    offset: 0,
				                    color: "rgba(0,0,0,0)", // 0% 处的颜色
				                  },
				                  {
				                    offset: 0.8,
				                    color: "#195b9d", // 100% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#0a2256", // 100% 处的颜色
				                  },
				                ],
				                global: false, // 缺省为 false
				              },
				            ],
				            [1, "#083158"],
				          ],
				          width: 1,
				        },
				      },
				      axisLabel: {
				        show: false,
				      },
				      axisTick: {
				        show: false,
				      },
				      splitLine: {
				        show: false,
				      },
				      itemStyle: {
				        show: false,
				      },
				      detail: {
				        show: false,
				      },
				      title: {
				        // 标题
				        show: false,
				      },
				      data: [
				        {
				          name: "title",
				          value: dataArr,
				        },
				      ],
				      pointer: {
				        show: false,
				      },
				      animationDuration: 4000,
				    },

				    {
				      name: "刻度尺",
				      type: "gauge",
				      radius: "88%",
				      splitNumber: 10, // 刻度数量
				      min: 0, // 最小刻度
				      max: dataX, // 最大刻度
				      // 仪表盘轴线相关配置
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0.6,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0.85,
				                    color: "#031F46", // 0% 处的颜色
				                  },
				                  {
				                    offset: 0.93,
				                    color: "#060d25", // 100% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#12D7EF", // 100% 处的颜色
				                  },
				                ],
				              },
				            ],
				          ],
				          width: 300,
				        },
				      },
				      // 分隔线
				      splitLine: {
				        show: true,
				        length:10,
				        lineStyle: {
				          width: 1,
				          color: "#12E5FE",
				        },
				      },
				      // 刻度线
				      axisTick: {
				        show: true,
				        splitNumber: 20,
				        length: 3,
				        lineStyle: {
				          color: "#12E5FE",
				          width: 1,
				        },
				      },
				      // 刻度标签
				      axisLabel: {
				        distance: 1,
				        color: "#CEF3FE",
				        fontSize: "10",
				        // fontWeight: 600,
				      },
				      detail: {
				        show: false,
				      },
				    },
				    {
				      name: "外部指针",
				      type: "gauge",
				      radius: "90%",
				      axisLine: {
				        lineStyle: {
				          color: [
				            [dataArr / dataX - 0.001, "rgba(0,0,0,0)"],
				            [dataArr / dataX + 0.003, "#e43c59"],
				            [1, "rgba(0,0,0,0)"],
				          ],
				          width: 20,
				        },
				      },
				      axisLabel: {
				        show: false,
				      },
				      axisTick: {
				        show: false,
				      },
				      splitLine: {
				        show: false,
				      },
				      itemStyle: {
				        show: false,
				      },
				      detail: {
				        show: false,
				      },
				      title: {
				        // 标题
				        show: false,
				      },
				      data: [
				        {
				          name: "title",
				          value: dataArr,
				        },
				      ],
				      pointer: {
				        show: false,
				      },
				    },
				    {
				      name: "内层带指针",
				      type: "gauge",
				      radius: "60%",
				      splitNumber: 10, // 刻度数量
				      min: 0, // 最小刻度
				      max: dataX, // 最大刻度
				      // 仪表盘轴线相关配置
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0.59,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0.72,
				                    color: "#032046",
				                  },
				                  {
				                    offset: 0.94,
				                    color: "#086989",
				                  },
				                  {
				                    offset: 0.98,
				                    color: "#0FAFCB",
				                  },
				                  {
				                    offset: 1,
				                    color: "#0EA4C1",
				                  },
				                ],
				              },
				            ],
				          ],
				          width: 1000,
				        },
				      },
				      // 分隔线
				      splitLine: {
				        show: false,
				      },
				      // 刻度线
				      axisTick: {
				        show: false,
				      },
				      // 刻度标签
				      axisLabel: {
				        show: false,
				      },
				      // 仪表盘指针
				      pointer: {
				        show: true,
				        length: "95%",
				        width: 2, // 指针粗细
				      },
				      // 仪表盘指针样式
				      itemStyle: {
				        color: "#01eaf8",
				      },
				      data: [
				        {
				          value: dataArr,
				        },
				      ],
				      detail: {
				        show: false,
				      },
				    },

				    // 中间半圆装饰
				    {
				      type: "gauge",
				      radius: "110%", // 大小
				      center: ["50%", "127%"],
				      axisLine: {
				        show: true,
				        lineStyle: {
				          // 轴线样式
				          width: 1, // 宽度
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0,
				                    color: "#00f3f9", // 0% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#000", // 100% 处的颜色
				                  },
				                ],
				              },
				            ],
				          ],
				        },
				      },
				      axisTick: {
				        // 刻度
				        show: false,
				      },
				      splitLine: {
				        // 分割线
				        show: false,
				      },
				      axisLabel: {
				        // 刻度标签
				        show: false,
				      },
				      pointer: {
				        // 仪表盘指针
				        show: false,
				      },
				      detail: {
				        // 仪表盘详情
				        show: false,
				      },
				    },
				  ],
				};
				myChart.setOption(option)
			},
			// 供热管网普查
			grpcChart(dataArr){
				var myChart = echarts.init(document.getElementById("x-chart4"));
				// 初始化数据
				const dataX = 100;
				const option = {
				  // backgroundColor: "#061530",
				  backgroundStyle: {
				    borderWidth: 1,
				    color: "transparent",
				  },
				  title: [
				    {
				      text: `${dataArr} %`,
				      bottom: "0%",
				      left: "center",
				      textStyle: {
				        fontSize: "16",
				        color: "#ffff",
				        fontWeight:400,
				      },
				      triggerEvent: true,
				    },
				  ],

				  legend: {
				    show: false,
				  },
				  series: [
				    {
				      name: "最外部进度条",
				      type: "gauge",
				      radius: "99%",
				      splitNumber: 1,
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              dataArr / dataX,
				              {
				                type: "linear",
				                x: 0,
				                y: 1,
				                x2: 0.5,
				                y2: 0.5,
				                colorStops: [
				                  {
				                    offset: 0,
				                    color: "rgba(0,0,0,0)", // 0% 处的颜色
				                  },
				                  {
				                    offset: 0.8,
				                    color: "#0098bb", // 100% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#032a43", // 100% 处的颜色
				                  },
				                ],
				                global: false, // 缺省为 false
				              },
				            ],
				            [1, "#083158"],
				          ],
				          width: 1,
				        },
				      },
				      axisLabel: {
				        show: false,
				      },
				      axisTick: {
				        show: false,
				      },
				      splitLine: {
				        show: false,
				      },
				      itemStyle: {
				        show: false,
				      },
				      detail: {
				        show: false,
				      },
				      title: {
				        // 标题
				        show: false,
				      },
				      data: [
				        {
				          name: "title",
				          value: dataArr,
				        },
				      ],
				      pointer: {
				        show: false,
				      },
				      animationDuration: 4000,
				    },

				    {
				      name: "刻度尺",
				      type: "gauge",
				      radius: "88%",
				      splitNumber: 10, // 刻度数量
				      min: 0, // 最小刻度
				      max: dataX, // 最大刻度
				      // 仪表盘轴线相关配置
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0.6,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0.85,
				                    color: "#003649", // 0% 处的颜色
				                  },
				                  {
				                    offset: 0.93,
				                    color: "#006662", // 100% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#00ffca", // 100% 处的颜色
				                  },
				                ],
				              },
				            ],
				          ],
				          width: 300,
				        },
				      },
				      // 分隔线
				      splitLine: {
				        show: true,
				        length:10,
				        lineStyle: {
				          width: 1,
				          color: "#12E5FE",
				        },
				      },
				      // 刻度线
				      axisTick: {
				        show: true,
				        splitNumber: 20,
				        length: 3,
				        lineStyle: {
				          color: "#12E5FE",
				          width: 1,
				        },
				      },
				      // 刻度标签
				      axisLabel: {
				        distance: 1,
				        color: "#CEF3FE",
				        fontSize: "10",
				        // fontWeight: 600,
				      },
				      detail: {
				        show: false,
				      },
				    },
				    {
				      name: "外部指针",
				      type: "gauge",
				      radius: "90%",
				      axisLine: {
				        lineStyle: {
				          color: [
				            [dataArr / dataX - 0.001, "rgba(0,0,0,0)"],
				            [dataArr / dataX + 0.003, "#e43c59"],
				            [1, "rgba(0,0,0,0)"],
				          ],
				          width: 20,
				        },
				      },
				      axisLabel: {
				        show: false,
				      },
				      axisTick: {
				        show: false,
				      },
				      splitLine: {
				        show: false,
				      },
				      itemStyle: {
				        show: false,
				      },
				      detail: {
				        show: false,
				      },
				      title: {
				        // 标题
				        show: false,
				      },
				      data: [
				        {
				          name: "title",
				          value: dataArr,
				        },
				      ],
				      pointer: {
				        show: false,
				      },
				    },
				    {
				      name: "内层带指针",
				      type: "gauge",
				      radius: "60%",
				      splitNumber: 10, // 刻度数量
				      min: 0, // 最小刻度
				      max: dataX, // 最大刻度
				      // 仪表盘轴线相关配置
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0.59,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0.72,
				                    color: "#003649",
				                  },
				                  {
				                    offset: 0.94,
				                    color: "#00505c",
				                  },
				                  {
				                    offset: 0.98,
				                    color: "#008880",
				                  },
				                  {
				                    offset: 1,
				                    color: "#00cfae",
				                  },
				                ],
				              },
				            ],
				          ],
				          width: 1000,
				        },
				      },
				      // 分隔线
				      splitLine: {
				        show: false,
				      },
				      // 刻度线
				      axisTick: {
				        show: false,
				      },
				      // 刻度标签
				      axisLabel: {
				        show: false,
				      },
				      // 仪表盘指针
				      pointer: {
				        show: true,
				        length: "95%",
				        width: 2, // 指针粗细
				      },
				      // 仪表盘指针样式
				      itemStyle: {
				        color: "#00e6b8",
				      },
				      data: [
				        {
				          value: dataArr,
				        },
				      ],
				      detail: {
				        show: false,
				      },
				    },

				    // 中间半圆装饰
				    {
				      type: "gauge",
				      radius: "110%", // 大小
				      center: ["50%", "127%"],
				      axisLine: {
				        show: true,
				        lineStyle: {
				          // 轴线样式
				          width: 1, // 宽度
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0,
				                    color: "#00c6a8", // 0% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#000", // 100% 处的颜色
				                  },
				                ],
				              },
				            ],
				          ],
				        },
				      },
				      axisTick: {
				        // 刻度
				        show: false,
				      },
				      splitLine: {
				        // 分割线
				        show: false,
				      },
				      axisLabel: {
				        // 刻度标签
				        show: false,
				      },
				      pointer: {
				        // 仪表盘指针
				        show: false,
				      },
				      detail: {
				        // 仪表盘详情
				        show: false,
				      },
				    },
				  ],
				};
				myChart.setOption(option)
			},
			// 城市生活污水集中收集率
			csshwsChart(dataArr){
				var myChart = echarts.init(document.getElementById("x-chart5"));
				// 初始化数据
				const dataX = 100;
				const option = {
				  // backgroundColor: "#061530",
				  backgroundStyle: {
				    borderWidth: 1,
				    color: "transparent",
				  },
				  title: [
				    {
				      text: `${dataArr} %`,
				      bottom: "0%",
				      left: "center",
				      textStyle: {
				        fontSize: "16",
				        color: "#ffff",
				        fontWeight:400,
				      },
				      triggerEvent: true,
				    },
				  ],

				  legend: {
				    show: false,
				  },
				  series: [
				    {
				      name: "最外部进度条",
				      type: "gauge",
				      radius: "99%",
				      splitNumber: 1,
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              dataArr / dataX,
				              {
				                type: "linear",
				                x: 0,
				                y: 1,
				                x2: 0.5,
				                y2: 0.5,
				                colorStops: [
				                  {
				                    offset: 0,
				                    color: "rgba(0,0,0,0)", // 0% 处的颜色
				                  },
				                  {
				                    offset: 0.8,
				                    color: "#0a67c8", // 100% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#0c307e", // 100% 处的颜色
				                  },
				                ],
				                global: false, // 缺省为 false
				              },
				            ],
				            [1, "#083158"],
				          ],
				          width: 1,
				        },
				      },
				      axisLabel: {
				        show: false,
				      },
				      axisTick: {
				        show: false,
				      },
				      splitLine: {
				        show: false,
				      },
				      itemStyle: {
				        show: false,
				      },
				      detail: {
				        show: false,
				      },
				      title: {
				        // 标题
				        show: false,
				      },
				      data: [
				        {
				          name: "title",
				          value: dataArr,
				        },
				      ],
				      pointer: {
				        show: false,
				      },
				      animationDuration: 4000,
				    },

				    {
				      name: "刻度尺",
				      type: "gauge",
				      radius: "88%",
				      splitNumber: 10, // 刻度数量
				      min: 0, // 最小刻度
				      max: dataX, // 最大刻度
				      // 仪表盘轴线相关配置
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0.6,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0.85,
				                    color: "#09326b", // 0% 处的颜色
				                  },
				                  {
				                    offset: 0.93,
				                    color: "#086589", // 100% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#12e3ff", // 100% 处的颜色
				                  },
				                ],
				              },
				            ],
				          ],
				          width: 300,
				        },
				      },
				      // 分隔线
				      splitLine: {
				        show: true,
				        length:10,
				        lineStyle: {
				          width: 1,
				          color: "#00cced",
				        },
				      },
				      // 刻度线
				      axisTick: {
				        show: true,
				        splitNumber: 20,
				        length: 3,
				        lineStyle: {
				          color: "#00cced",
				          width: 1,
				        },
				      },
				      // 刻度标签
				      axisLabel: {
				        distance: 1,
				        color: "#CEF3FE",
				        fontSize: "10",
				        // fontWeight: 600,
				      },
				      detail: {
				        show: false,
				      },
				    },
				    {
				      name: "外部指针",
				      type: "gauge",
				      radius: "90%",
				      axisLine: {
				        lineStyle: {
				          color: [
				            [dataArr / dataX - 0.001, "rgba(0,0,0,0)"],
				            [dataArr / dataX + 0.003, "#e43c59"],
				            [1, "rgba(0,0,0,0)"],
				          ],
				          width: 20,
				        },
				      },
				      axisLabel: {
				        show: false,
				      },
				      axisTick: {
				        show: false,
				      },
				      splitLine: {
				        show: false,
				      },
				      itemStyle: {
				        show: false,
				      },
				      detail: {
				        show: false,
				      },
				      title: {
				        // 标题
				        show: false,
				      },
				      data: [
				        {
				          name: "title",
				          value: dataArr,
				        },
				      ],
				      pointer: {
				        show: false,
				      },
				    },
				    {
				      name: "内层带指针",
				      type: "gauge",
				      radius: "60%",
				      splitNumber: 10, // 刻度数量
				      min: 0, // 最小刻度
				      max: dataX, // 最大刻度
				      // 仪表盘轴线相关配置
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0.59,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0.72,
				                    color: "#09336b",
				                  },
				                  {
				                    offset: 0.94,
				                    color: "#074078",
				                  },
				                  {
				                    offset: 0.98,
				                    color: "#0077a7",
				                  },
				                  {
				                    offset: 1,
				                    color: "#00bae2",
				                  },
				                ],
				              },
				            ],
				          ],
				          width: 1000,
				        },
				      },
				      // 分隔线
				      splitLine: {
				        show: false,
				      },
				      // 刻度线
				      axisTick: {
				        show: false,
				      },
				      // 刻度标签
				      axisLabel: {
				        show: false,
				      },
				      // 仪表盘指针
				      pointer: {
				        show: true,
				        length: "95%",
				        width: 2, // 指针粗细
				      },
				      // 仪表盘指针样式
				      itemStyle: {
				        color: "#1af6ff",
				      },
				      data: [
				        {
				          value: dataArr,
				        },
				      ],
				      detail: {
				        show: false,
				      },
				    },

				    // 中间半圆装饰
				    {
				      type: "gauge",
				      radius: "110%", // 大小
				      center: ["50%", "127%"],
				      axisLine: {
				        show: true,
				        lineStyle: {
				          // 轴线样式
				          width: 1, // 宽度
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0,
				                    color: "#0296a0", // 0% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#000", // 100% 处的颜色
				                  },
				                ],
				              },
				            ],
				          ],
				        },
				      },
				      axisTick: {
				        // 刻度
				        show: false,
				      },
				      splitLine: {
				        // 分割线
				        show: false,
				      },
				      axisLabel: {
				        // 刻度标签
				        show: false,
				      },
				      pointer: {
				        // 仪表盘指针
				        show: false,
				      },
				      detail: {
				        // 仪表盘详情
				        show: false,
				      },
				    },
				  ],
				};
				myChart.setOption(option)
			},
			// 应急供水保障率
			yjgsChart(dataArr){
				var myChart = echarts.init(document.getElementById("x-chart6"));
				// 初始化数据
				const dataX = 100;
				const option = {
				  // backgroundColor: "#061530",
				  backgroundStyle: {
				    borderWidth: 1,
				    color: "transparent",
				  },
				  title: [
				    {
				      text: `${dataArr} %`,
				      bottom: "0%",
				      left: "center",
				      textStyle: {
				        fontSize: "16",
				        color: "#ffff",
				        fontWeight:400,
				      },
				      triggerEvent: true,
				    },
				  ],

				  legend: {
				    show: false,
				  },
				  series: [
				    {
				      name: "最外部进度条",
				      type: "gauge",
				      radius: "99%",
				      splitNumber: 1,
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              dataArr / dataX,
				              {
				                type: "linear",
				                x: 0,
				                y: 1,
				                x2: 0.5,
				                y2: 0.5,
				                colorStops: [
				                  {
				                    offset: 0,
				                    color: "rgba(0,0,0,0)", // 0% 处的颜色
				                  },
				                  {
				                    offset: 0.8,
				                    color: "#195b9d", // 100% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#0a2256", // 100% 处的颜色
				                  },
				                ],
				                global: false, // 缺省为 false
				              },
				            ],
				            [1, "#083158"],
				          ],
				          width: 1,
				        },
				      },
				      axisLabel: {
				        show: false,
				      },
				      axisTick: {
				        show: false,
				      },
				      splitLine: {
				        show: false,
				      },
				      itemStyle: {
				        show: false,
				      },
				      detail: {
				        show: false,
				      },
				      title: {
				        // 标题
				        show: false,
				      },
				      data: [
				        {
				          name: "title",
				          value: dataArr,
				        },
				      ],
				      pointer: {
				        show: false,
				      },
				      animationDuration: 4000,
				    },

				    {
				      name: "刻度尺",
				      type: "gauge",
				      radius: "88%",
				      splitNumber: 10, // 刻度数量
				      min: 0, // 最小刻度
				      max: dataX, // 最大刻度
				      // 仪表盘轴线相关配置
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0.6,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0.85,
				                    color: "#031F46", // 0% 处的颜色
				                  },
				                  {
				                    offset: 0.93,
				                    color: "#060d25", // 100% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#12D7EF", // 100% 处的颜色
				                  },
				                ],
				              },
				            ],
				          ],
				          width: 300,
				        },
				      },
				      // 分隔线
				      splitLine: {
				        show: true,
				        length:10,
				        lineStyle: {
				          width: 1,
				          color: "#12E5FE",
				        },
				      },
				      // 刻度线
				      axisTick: {
				        show: true,
				        splitNumber: 20,
				        length: 3,
				        lineStyle: {
				          color: "#12E5FE",
				          width: 1,
				        },
				      },
				      // 刻度标签
				      axisLabel: {
				        distance: 1,
				        color: "#CEF3FE",
				        fontSize: "10",
				        // fontWeight: 600,
				      },
				      detail: {
				        show: false,
				      },
				    },
				    {
				      name: "外部指针",
				      type: "gauge",
				      radius: "90%",
				      axisLine: {
				        lineStyle: {
				          color: [
				            [dataArr / dataX - 0.001, "rgba(0,0,0,0)"],
				            [dataArr / dataX + 0.003, "#e43c59"],
				            [1, "rgba(0,0,0,0)"],
				          ],
				          width: 20,
				        },
				      },
				      axisLabel: {
				        show: false,
				      },
				      axisTick: {
				        show: false,
				      },
				      splitLine: {
				        show: false,
				      },
				      itemStyle: {
				        show: false,
				      },
				      detail: {
				        show: false,
				      },
				      title: {
				        // 标题
				        show: false,
				      },
				      data: [
				        {
				          name: "title",
				          value: dataArr,
				        },
				      ],
				      pointer: {
				        show: false,
				      },
				    },
				    {
				      name: "内层带指针",
				      type: "gauge",
				      radius: "60%",
				      splitNumber: 10, // 刻度数量
				      min: 0, // 最小刻度
				      max: dataX, // 最大刻度
				      // 仪表盘轴线相关配置
				      axisLine: {
				        lineStyle: {
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0.59,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0.72,
				                    color: "#032046",
				                  },
				                  {
				                    offset: 0.94,
				                    color: "#086989",
				                  },
				                  {
				                    offset: 0.98,
				                    color: "#0FAFCB",
				                  },
				                  {
				                    offset: 1,
				                    color: "#0EA4C1",
				                  },
				                ],
				              },
				            ],
				          ],
				          width: 1000,
				        },
				      },
				      // 分隔线
				      splitLine: {
				        show: false,
				      },
				      // 刻度线
				      axisTick: {
				        show: false,
				      },
				      // 刻度标签
				      axisLabel: {
				        show: false,
				      },
				      // 仪表盘指针
				      pointer: {
				        show: true,
				        length: "95%",
				        width: 2, // 指针粗细
				      },
				      // 仪表盘指针样式
				      itemStyle: {
				        color: "#01eaf8",
				      },
				      data: [
				        {
				          value: dataArr,
				        },
				      ],
				      detail: {
				        show: false,
				      },
				    },

				    // 中间半圆装饰
				    {
				      type: "gauge",
				      radius: "110%", // 大小
				      center: ["50%", "127%"],
				      axisLine: {
				        show: true,
				        lineStyle: {
				          // 轴线样式
				          width: 1, // 宽度
				          color: [
				            [
				              1,
				              {
				                type: "radial",
				                x: 0.5,
				                y: 0,
				                r: 0.6,
				                colorStops: [
				                  {
				                    offset: 0,
				                    color: "#00f3f9", // 0% 处的颜色
				                  },
				                  {
				                    offset: 1,
				                    color: "#000", // 100% 处的颜色
				                  },
				                ],
				              },
				            ],
				          ],
				        },
				      },
				      axisTick: {
				        // 刻度
				        show: false,
				      },
				      splitLine: {
				        // 分割线
				        show: false,
				      },
				      axisLabel: {
				        // 刻度标签
				        show: false,
				      },
				      pointer: {
				        // 仪表盘指针
				        show: false,
				      },
				      detail: {
				        // 仪表盘详情
				        show: false,
				      },
				    },
				  ],
				};
				myChart.setOption(option)
			},
      rqcgChart(){
        getGasReformLatest().then(res => {
          var myChart = echarts.init(document.getElementById("x-chart7"));
          var placeHolderStyle = {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            emphasis: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
          };

          var dataStyle = {
            normal: {
              formatter: "{c}%",
              position: "center",
              show: true,
              textStyle: {
                fontSize: "20",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          };

          var option = {
            title: [
              {
                text: "燃气普查率",
                left: "24%",
                top: "60%",
                textAlign: "center",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: "10",
                  color: "#fff",
                  textAlign: "center",
                },
              },
              {
                text: "燃气改造率",
                left: "74%",
                top: "60%",
                textAlign: "center",
                textStyle: {
                  color: "#fff",
                  fontWeight: "normal",
                  fontSize: "10",
                  textAlign: "center",
                },
              },
            ],
            series: [
              {
                type: "pie",
                hoverAnimation: false, //鼠标经过的特效
                radius: ["75%", "81%"],
                center: ["25%", "50%"],
                startAngle: 225,
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                label: {
                  normal: {
                    position: "center",
                  },
                },
                data: [
                  {
                    value: res.rows[0].gasPenetrationRate,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "#99da69",
                          },
                          {
                            offset: 1,
                            color: "#01babc",
                          },
                        ]),
                      },
                    },
                    label: dataStyle,
                  },
                  {
                    value: 35,
                    itemStyle: placeHolderStyle,
                  },
                ],
              },
              {
                type: "pie",
                hoverAnimation: false,
                radius: ["75%", "81%"],
                center: ["75%", "50%"],
                startAngle: 225,
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                label: {
                  normal: {
                    position: "center",
                  },
                },
                data: [
                  {
                    value: res.rows[0].gasConversionRate,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "#9f3edd",
                          },
                          {
                            offset: 1,
                            color: "#4897f6",
                          },
                        ]),
                      },
                    },
                    label: dataStyle,
                  },
                  {
                    value: 35,
                    itemStyle: placeHolderStyle,
                  },
                ],
              },

              //外圈的边框
              {
                // name: '总人数',
                type: "pie",
                hoverAnimation: false, //鼠标经过的特效
                radius: ["81%", "82%"],
                center: ["25%", "50%"],
                startAngle: 225,
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                label: {
                  normal: {
                    position: "center",
                  },
                },
                data: [
                  {
                    value: 75,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "#01babc",
                          },
                          {
                            offset: 1,
                            color: "#99da69",
                          },
                        ]),
                      },
                    },
                  },
                  {
                    value: 25,
                    itemStyle: placeHolderStyle,
                  },
                ],
              },
              {
                type: "pie",
                hoverAnimation: false,
                radius: ["81%", "82%"],
                center: ["75%", "50%"],
                startAngle: 225,
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                label: {
                  normal: {
                    position: "center",
                  },
                },
                data: [
                  {
                    value: 75,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "#4897f6",
                          },
                          {
                            offset: 1,
                            color: "#9f3edd",
                          },
                        ]),
                      },
                    },
                  },
                  {
                    value: 25,
                    itemStyle: placeHolderStyle,
                  },
                ],
              },
            ],
          };
          myChart.setOption(option)
        })
      },

			toggleTab(current) {
				this.currentTab = current;
				this.currentClass = current;
			},
			handleCheckedCities(checkedCities) {
				// checkedCities 是当前选中的所有选项的数组
				this.$refs.supermap.addLifelineOpen(this.checkedCities)
			},
			//开挖
			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() {
				this.$refs.supermap.closeMeasuringAll()
				this.$refs.supermap.closeExcavationAll()
				this.checkedCities = []
				this.$refs.supermap.addLifelineOpen(this.checkedCities)
				this.$refs.supermap.removeBoxSelection()
			}
		}
	}
</script>
<style lang="scss">
	@font-face {
		font-family: 'ds';
		src: url('../../assets/styles/DS-Digital_Bold.ttf') format('truetype'); /* 根据实际路径调整 */
	}
	/*弹层新样式*/
	.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;
		}

	}

	.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{
		height:200px;
	}
	.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;

	}

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

	/*全局滚动条样式*/
	::-webkit-scrollbar {
	    width: 5px;
	    height: 14px;
	}

	 ::-webkit-scrollbar-thumb {
	/* background-color: #01c8dc;
	border-radius: 3px; */
	    background-color: #b6b6b6;
	}
	/*全局滚动条样式结束*/


	/*弹层表格*/
	.sjxq_list {
		width: 100%;
		float: right;

		.el-table {
			color: #e8f9ff;
			background-color: #082c4c;
			font-size: 13px;
		}

		.el-table tr {
			background-color: #082c4c;
		}

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

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

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

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

		.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
			background-color: #165fa3;
			color: #0bf3f7;
			box-shadow: 0px 0px 4px #032f4f;
		}
	}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';

	.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: 50px;
			}
			div{
				width: 116px;
				height: 28px;
				background: rgba(66,139,229,0);
				border-radius: 6px;
				border: 1px solid rgba(6,175,253,0.41);
				margin: 5px 0 0 0;
				display: flex;
				align-items: center;
				justify-content: center;

				em{
					font-family: Arial, Helvetica, sans-serif;
					font-size: 14px;
					color: #b8cde3;
					font-style: normal;
				}
				img{
					margin: 0 5px;
				}
				em.up{
					color: #ff6000;
				}
				em.don{
					color: #a2ff00;
				}
			}
			div.time_tab{
				width: 190px;
				border: none;

				h4{
					background: linear-gradient(90deg, #081a2f ,  #214d8c,  #081a2f);
					border-radius: 5px;
					padding: 5px;
					margin: 5px;
					border: #366ac4 1px solid;
				}
				h4.active{
					background: linear-gradient(0deg, #75F8D2 0%, #6096DB 50%, #62FFBB 100%);
					border-radius: 5px;
					border: 1px solid #89f7fe;
				}
			}

		}


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

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

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

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

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

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

		.content-box,
		.content-box2 {
			width:100%;
			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;
			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;
					flex-direction: column;

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

						img {
							margin-right: 10px;
						}

						h5 {
							font-size: 18px;
						}

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

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

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

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

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

			}

			.box-row {
				display: flex;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		/*左侧*/

		.left-content {
			width: 430px;
			height:86vh;
			overflow-y: auto;
			top: 90px;
			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: 430px;
			height:86vh;
			overflow-y: auto;
			top: 90px;
			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;
		}

		.middle-content{
			width: 900px;
			height:86vh;
			overflow-y: auto;
			top:90px;
			position: absolute;
			left: 50%;
			z-index: 80;
			display: flex;
			justify-content: space-between;
			flex-wrap:wrap;
			color: #fff;
			font-size: 14px;
			transform: translateX(-50%);
		}
		.contfl{
			width: 430px !important;
		}

		// 手风琴
		.accordion{
			border: none;

			::v-deep .el-collapse-item__header{
				background: url('../../assets/images/gangwei/a-tle.png') no-repeat 15px center;
				font-size: 16px;
				color: #FFFFFF;
				padding: 0 10px 0 45px;
				height: 50px;
				line-height: 50px;
				border: none;
			}

			::v-deep .el-collapse-item__header.is-active{
				box-shadow:inset 0 0 10px 5px rgb(43 87 156 / 80%);
			}

			::v-deep .el-collapse-item__wrap{
				background: transparent;
				border-bottom: 1px solid #295292;
			}
			::v-deep .el-collapse-item__content{
				padding-bottom:10px;
			}

		}

		// 隐患住宅分析
		.yhlist-title{
			width:100%;
			height: 50px;
			box-shadow:inset 0 0 10px 5px rgb(43 87 156 / 80%);
			display: flex;
			justify-content:space-between;

			span{
				font-size: 16px;
				color: #00DEFF;
				line-height: 50px;
			}
			span:nth-child(1){
				width: 300px;
				text-align: left;
				padding: 0 0 0 20px;
			}
			span:nth-child(2){
				width: 120px;
				text-align: center;
			}
		}
		.yhlist-cont{
			width:100%;

			.yhlist-cont-in{
				height: 40px;
				display: flex;
				justify-content:space-between;

				span{
					font-size: 14px;
					color: #FFFFFF;
					line-height: 40px;
				}

				span:nth-child(1){
					width: 300px;
					text-align: left;
					padding: 0 0 0 20px;
				}

				span:nth-child(2){
					width: 120px;
					text-align: center;
					color: #00DEFF;
				}
			}

			.yhlist-cont-in:nth-child(2n){
				background:linear-gradient(to right, rgb(85 139 212 / 30%), rgba(85, 139, 212, 0));
			}
		}
		//左右侧按钮
		.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;
		}

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

	.h-220{
		height: 200px !important;
		font-size: 14px;
		color: #fff;
	}
	.h-736{
		height: 736px !important;
	}
	.h-470{
		margin: 0 0 30px 0 !important;
		height: 470px !important;
	}

	.tubiao{
		width: 100%;
		height: 180px;
	}
	.mydtubiao{
		width:68%;
		height: 180px;
	}
	.myddc{
		display: flex;
		justify-content: space-between;

		dl{

			dd{
				width: 140px;
				height: 42px;
				background: rgb(64 127 255 / 20%);
				display: flex;
				justify-content: space-between;
				padding: 0 10px;
				margin: 12px 0;

				span{
					font-size: 14px;
					color: #52FFFF;
					line-height: 42px;
					background: linear-gradient(0deg, #82B5EA 0%, #52FFFF 0%, #2AACFA 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

				}
			}
		}
	}
	.pcfg{
		display: flex;
		justify-content: space-around;

		.pcChart{
			width: 50%;
			text-align: center;

			div{
				width: 100%;
				height: 150px;
			}
			span{
				font-size: 14px;
				color: #fff;
			}
		}
	}

/*公共*/
		.title-bar {
			width: 100%;
			height: 38px;
			background: url(../../assets/index_img/tit-img.png) no-repeat left top;
			display: flex;
			align-items: center;
			justify-content: space-between;
            .sj-right-select {
            	width: 140px;
            }
			.num {
				width: 88px;
				height: 27px;
				background: linear-gradient(90deg, #2A6DCD 0%, rgba(56, 123, 196, 0.24) 100%);
				border-radius: 5px;
				line-height: 27px;
				text-align: center;
				font-weight: bold;
				margin-top: 7px;
			}

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

		}
		.fengxian-list{
			width: 100%;

			li{
				margin: 10px 0;
				padding: 10px 20px;

				h2{
					font-size: 16px;
					color: #9CEDFD;
					line-height: 36px;
				}
				span{
					font-size: 14px;
					color: #b8b9b9;
					line-height: 20px;
				}
			}
			li:hover,li.active{
				background:linear-gradient(to right, rgb(85 139 212 / 30%), rgb(85 139 212 / 0%));
			}
		}

</style>
<style lang="scss">
	.zhiban-list {
		top:99px !important;
		max-height: 84vh !important;
		background: linear-gradient(0deg, rgba(12, 36, 66, 0.8) 0%, #1D5592 100%);
		border: 1px solid #326e96;
		height: 82vh;
	}
	.zb-cont{
		// background: linear-gradient(90deg, rgba(6, 20, 36, 0.3), rgba(50, 81, 128, 0.3));
		border-radius: 8px;
		// border: 1px solid #23466C;
		// margin-top: 2px;
		max-height: 77vh;
		overflow: auto;

		.el-collapse-item__header{
			color: #fff;
			border-bottom: none;
			background: url(../../assets/index_img/list-bg-img-1.png) no-repeat;
			padding: 0 0 0 20px;
			margin: 10px 0;
		}
		.el-collapse-item__header.is-active{
			background: url(../../assets/index_img/list-bg-img-2.png) no-repeat;
		}
		.el-collapse{
			border: none !important;
		}
		.el-collapse-item__wrap {
		    background-color: rgba(12, 44, 80, 0.52);
		    border: 1px solid #326e96;
		}
		.person-list{
			display: flex;
			width: 91%;
			margin-left: 9%;
			justify-content: space-around;
			align-items: center;
			background-color: rgba(12, 44, 80, 0.52);
			height:50px;
			border: 1px solid #326e96;
			border-radius: 10px;
		    margin: 10px auto;
			color: #fff;

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

		}
	}



	.riskList{
		.el-dialog {
			left: 450px;
		}
		.el-dialog:not(.is-fullscreen){
			margin: 12vh 0 0 0 !important;
		}
	}
  .visual-body{
    height: 100vh;
  }

  /*底部背景*/
  .footerbj {
    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-a {
    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;
    }
  }





</style>