visu_lifeline/src/views/industry/lookall.vue

<!--供热-->
<template>
	<div class="lookall">
		<div class="lookall-header">
			<!-- <span>四平市城市生命线监管平台</span> -->
		</div>

		<div class="header">
			<img src="~@/assets/index_img/life-LOGO.png" alt=""
				style="margin: 17px 5px 0px 5px;display: block;float: left;width: 45px;height: 43px;">
			四平市城市生命线智慧监管平台-热力
		</div>

		<!-- 地图 -->
		<supermap ref="supermap" style="width: 100%;height: 100vh;position: relative;bottom: 11%;" @preview="preview"
			@getHeatingPipeByDataSetAndSmId="getHeatingPipeByDataSetAndSmId" :showLayer="true">
		</supermap>

		<!-- <div class="bg-contain"></div> -->
		<div class="topBg"></div>
		<div class="topFrBg"></div>
		<div class="leftBg" @click="viewLeftInsideAndOut"></div>
		<div class="leftFrBg"></div>
		<div class="rightBg" @click="viewRightInsideAndOut"></div>
		<div class="rightFrBg"></div>
		<div class="bottomBg"></div>

		<nav class="left-nav-rl" :class="currentTagName">
			<div class="left_btn left_nav1">
				<p style="cursor: pointer" @click="checkoutTagName('left_btn1')"
					:class="currentTagName == 'left_btn1' ? 'on' : '' ">可视化</p>
			</div>
			<div class="left_btn left_nav2">
				<p style="cursor: pointer" @click="checkoutTagName('left_btn2')"
					:class="currentTagName == 'left_btn2' ? 'on' : '' ">基础数据库</p>
				<div class="left_nav_min">
					<span class="span_tit" :class="{ 'active': activeSubItem === '热源厂信息' }"
						@click="showInfoDialog('热源厂信息')"><i></i>热源厂信息</span>
					<span class="span_tit" :class="{ 'active': activeSubItem === '热力管线' }"
						@click="showInfoDialog('热力管线')"><i></i>热力管线</span>
					<span class="span_tit" :class="{ 'active': activeSubItem === '窨井管理' }"
						@click="showInfoDialog('窨井管理')"><i></i>窨井管理</span>
					<span class="span_tit" :class="{ 'active': activeSubItem === '换热所信息' }"
						@click="showInfoDialog('换热所信息')"><i></i>换热所信息</span>
					<span class="span_tit" :class="{ 'active': activeSubItem === '换热站信息' }"
						@click="showInfoDialog('换热站信息')"><i></i>换热站信息</span>
					<span class="span_tit" :class="{ 'active': activeSubItem === '用户管理' }"
						@click="showInfoDialog('用户管理')"><i></i>用户管理</span>
				</div>
			</div>
			<div class="left_btn left_nav3">
				<p @click="checkoutTagName('left_btn3')" :class="currentTagName == 'left_btn3' ? 'on' : '' ">风险清单</p>
				<div class="left_nav_min">
					<!--					<span>风险清单</span>-->
					<!--					<span>风险清单</span>-->
					<span class="span_tit" :class="{ 'active': activeSubItem === '风险清单管理' }"
						@click="showInfoDialog('风险清单管理')"><i></i>风险清单管理</span>
				</div>
			</div>
			<div class="left_btn left_nav4">
				<p @click="checkoutTagName('left_btn4')" :class="currentTagName == 'left_btn4' ? 'on' : '' ">监测系统</p>
				<div class="left_nav_min">
					<!--					<span>设备类型管理</span>-->
					<span class="span_tit" :class="{ 'active': activeSubItem === '设备管理' }"
						@click="showInfoDialog('设备管理')"><i></i>设备管理</span>
					<!--          <span class="span_tit" :class="{ 'active': activeSubItem === '阈值管理' }"  @click="showInfoDialog('阈值管理')"><i></i>阈值管理</span>-->
				</div>
			</div>
			<div class="left_btn left_nav5">
				<p @click="checkoutTagName('left_btn5')" :class="currentTagName == 'left_btn5' ? 'on' : '' ">监管平台</p>
				<div class="left_nav_min">
					<el-tooltip class="item span_tit" :class="{ 'active': activeSubItem === '事件管理' }" effect="dark"
						content="Right Center 提示文字" placement="right">
						<div slot="content">
							<p :class="{ 'active': activeSubItem === '城市体检'}" @click="showInfoDialog('城市体检')">城市体检</p>
							<p :class="{ 'active': activeSubItem === '日常监管'}" @click="showInfoDialog('日常监管')">日常监管</p>
							<p :class="{ 'active': activeSubItem === '基础事件'}" @click="showInfoDialog('基础事件')">基础事件</p>
							<p :class="{ 'active': activeSubItem === '设备预警'}" @click="showInfoDialog('设备预警')">设备预警</p>
							<p :class="{ 'active': activeSubItem === '催办事件'}" @click="showInfoDialog('催办事件')">催办事件</p>
							<p :class="{ 'active': activeSubItem === '督办事件'}" @click="showInfoDialog('督办事件')">督办事件</p>
						</div>
						<el-button><i></i>事件管理</el-button>
					</el-tooltip>
					<el-tooltip class="item span_tit" :class="{ 'active': activeSubItem === '任务管理' }" effect="dark"
						content="Right Center 提示文字" placement="right">
						<div slot="content">
							<p :class="{ 'active': activeSubItem === '巡检巡查任务管理' }" @click="showInfoDialog('巡检巡查任务管理')">
								巡检巡查任务管理</p>
							<p :class="{ 'active': activeSubItem === '巡检巡查数据管理' }" @click="showInfoDialog('巡检巡查数据管理')">
								巡检巡查数据管理</p>
							<!--                    <p :class="{ 'active': activeSubItem === '统计分析管理' }"  @click="showInfoDialog('统计分析管理')">统计分析管理</p>-->
						</div>
						<el-button><i></i>任务管理</el-button>
					</el-tooltip>
					<el-tooltip class="item span_tit" :class="{ 'active': activeSubItem === '综合管理' }" effect="dark"
						content="Right Center 提示文字" placement="right">
						<div slot="content">
							<p :class="{ 'active': activeSubItem === '预案管理' }" @click="showInfoDialog('预案管理')">预案管理</p>
							<p :class="{ 'active': activeSubItem === '物资管理' }" @click="showInfoDialog('物资管理')">物资管理</p>
						</div>
						<el-button><i></i>综合管理</el-button>
					</el-tooltip>
					<el-tooltip class="item span_tit" :class="{ 'active': activeSubItem === '群众投诉' }" effect="dark"
						content="Right Center 提示文字" placement="right">
						<div slot="content">
							<p :class="{ 'active': activeSubItem === '省长热线'}" @click="showInfoDialog('省长热线')">省长热线</p>
							<p :class="{ 'active': activeSubItem === '市长热线'}" @click="showInfoDialog('市长热线')">市长热线</p>
							<p :class="{ 'active': activeSubItem === '行管热线'}" @click="showInfoDialog('行管热线')">行管热线</p>
							<p :class="{ 'active': activeSubItem === '统计总览'}" @click="showInfoDialog('统计总览')">统计总览</p>
						</div>
						<el-button><i></i>群众投诉</el-button>
					</el-tooltip>
					<span class="span_tit" :class="{ 'active': activeSubItem === '管网改造' }"><i></i>管网改造</span>
					<span class="span_tit" :class="{ 'active': activeSubItem === '挖掘手续' }" @click="showInfoDialog('挖掘手续')"><i></i>挖掘手续</span>
					<span class="span_tit" :class="{ 'active': activeSubItem === '施工手续' }" @click="showInfoDialog('施工手续')"><i></i>施工手续</span>
					<!--<span  class="span_tit" :class="{ 'active': activeSubItem === '风险管理' }"><i></i>风险管理</span>-->
					<!--<span class="span_tit" :class="{ 'active': activeSubItem === '隐患管理' }"><i></i>隐患管理</span>-->
					<!--<span class="span_tit" :class="{ 'active': activeSubItem === '预警管理' }"><i></i>预警管理</span>-->
					<!--<span class="span_tit" :class="{ 'active': activeSubItem === '催办事件' }"><i></i>催办事件</span>-->
					<!--<span class="span_tit" :class="{ 'active': activeSubItem === '督办事件' }"><i></i>督办事件</span>-->
					<!--<span class="span_tit" :class="{ 'active': activeSubItem === '巡检巡查任务管理' }"><i></i>巡检巡查任务管理</span>-->
					<!--<span class="span_tit" :class="{ 'active': activeSubItem === '巡检巡查数据管理' }"><i></i>巡检巡查数据管理</span>-->
					<!--          <span style="cursor: pointer"   @click="showInfoDialog('统计分析管理')">统计分析管理</span>-->
					<!--          <span :class="{ 'active': activeSubItem === '任务管理' }"><i></i>任务管理</span>-->
					<!--<span class="span_tit" :class="{ 'active': activeSubItem === '预案管理' }"><i></i>预案管理</span>-->
					<!--<span class="span_tit" :class="{ 'active': activeSubItem === '物资管理' }"><i></i>物资管理</span>-->
				</div>
			</div>
			<div class="left_btn left_nav6">
				<p @click="checkoutTagName('left_btn6')" :class="currentTagName == 'left_btn6' ? 'on' : '' ">运管体系</p>
				<div class="left_nav_min">
					<span class="span_tit" :class="{ 'active': activeSubItem === '值班管理' }"
						@click="showInfoDialog('值班管理')"><i></i>值班管理</span>
					<!--          <span :class="{ 'active': activeSubItem === '任务管理' }"><i></i>任务管理</span>-->
					<!--<span style="cursor: pointer">考核评价管理</span>-->
					<span class="span_tit" :class="{ 'active': activeSubItem === '通知通告' }"
						@click="showInfoDialog('通知通告')"><i></i>通知通告</span>
					<span class="span_tit" :class="{ 'active': activeSubItem === '人员管理' }"
						@click="showInfoDialog('人员管理')"><i></i>人员管理</span>
					<span class="span_tit" :class="{ 'active': activeSubItem === '维护报告' }"
						@click="showInfoDialog('维护报告')"><i></i>维护报告</span>
				</div>
			</div>
		</nav>

		<div class="content-bar">
			<div class="right-content">
				<div class="leftContent">
					<!-- 重点关注 -->
					<div class="task">
						<div class="titleBar" data-text="重点关注"></div>
						<div style="width: 100%;height: 83%;overflow: hidden scroll;">
							<div v-for="(e,idx) in focusList" :key="idx" class="task-item zd-list"
								@click="openDetail(e,'重点关注')">
								<div :title="e.title"> {{ e.followName }}<span
										style="left: 58%;position: absolute;">{{ e.createTime }}</span></div>
							</div>
						</div>
					</div>
					<!-- 管线汇总 -->
					<div class="event">
						<div class="titleBar" data-text="管线汇总"></div>
						<div class="shebei-item">
							<div class="sb-top-bor">
								<div class="sbTfl">
									<div class="sbTfl-title">
										<i></i>
										<span>供热管线</span>
									</div>
									<h2 class="shuliang">{{totalLength}} <em>km</em></h2>
								</div>
								<div class="sbTfr">
									<div class="sbTfr-title">
										<i></i>
										<span>一次网</span>
									</div>
									<h2 class="shuliang">{{primaryNetworkLength}} <em>km</em></h2>
								</div>
							</div>
							<div class="sb-top-bor">
								<div class="sbTfl">
									<h2 class="shuliang">{{directSupplyLength}} <em>km</em></h2>
									<div class="sbTfl-title">
										<i></i>
										<span>直供网</span>
									</div>
								</div>
								<div class="sbTfr">
									<h2 class="shuliang">{{secondaryNetworkLength}}<em>km</em></h2>
									<div class="sbTfr-title">
										<i></i>
										<span>二次网</span>
									</div>
								</div>
							</div>
							<img src="~@/assets/gas/icon-gx.png" class="pic-gx" />
						</div>
					</div>
					<!-- 设备汇总 -->
					<div class="risk">
						<div class="titleBar" data-text="设备汇总"></div>
						<div class="guanxian-item">
							<div class="guanxian_in_bor" v-for="item in deviceTypeStats">
								<div class="guanxian_in">
									<img
										:src="
										item.deviceType=='温度计'?require('@/assets/gas/wd.png'):
										item.deviceType=='压力变送器'?require('@/assets/gas/yl.png'):
										item.deviceType=='热源厂设备'?require('@/assets/gas/ryc.png'):
										require('@/assets/gas/ll.png')
                    ">
									<img src="~@/assets/gas/jt-bom.png">
									<h2>{{item.deviceCount}}<i>套</i></h2>
									<span>{{item.deviceType}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="leftContent">
					<!-- 任务列表 -->
					<div class="task">
						<div class="titleBar" data-text="任务列表"></div>
						<div style="width: 100%;height: 83%;overflow: hidden scroll;">
							<div v-for="(e,idx) in taskList" :key="idx" class="task-item" @click="openDetail(e,'任务列表')">
								<div :title="e.title"> {{ e.title }}
									<span style="left: 63%;position: absolute;">
										<dict-tag :options="dict.type.task_issuing_dept" :value="e.issuingDept" />
									</span>
								</div>
								<div
									:class="e.status === 'draft' ? 'task-item-unprocessed' : e.status === 'issue' ? 'task-item-processing' : 'task-item-completed'">
								</div>
							</div>
						</div>
					</div>
					<!-- 预警列表 -->
					<div class="event search_contain">
						<div class="titleBar" data-text="预警列表"></div>
						<el-select v-model="currentEventType" @change="selectEventList" placeholder="请选择事件类型"
							clearable style="position: absolute;right: 3.3%;top: 33%;" popper-class="rl-pop">
							<el-option label="城市体检" value="1" />
							<el-option label="日常监管" value="2" />
							<el-option label="基础事件" value="3" />
							<el-option label="设备预警" value="4" />
						</el-select>
						<div style="width: 100%;height: 83%;overflow: hidden scroll;">
							<div v-for="(e,idx) in eventList" :key="idx" class="event-item"
								@click="openDetail(e,'预警列表',idx)">
								<div>{{ e.createTime }}</div>
								<div class="line">——————————{{ e.eventTypeDlLabel }}</div>
								<div class="content">
									<div
										:class="e.eventStatusLabel != '办结' ? 'event-item-unprocessed' : 'event-item-completed'">
									</div>
									<div class="content-text" :title="e.eventTitle">
										{{  e.eventTitle }}
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 隐患列表 -->
					<div class="risk">
						<div class="titleBar" data-text="隐患列表"></div>
						<div style="width: 100%;height: 83%;overflow: hidden scroll;margin-top: 2%;">
							<div v-for="(e,idx) in heatingList" :key="idx" class="risk-item"
								@click="openDetail(e,'隐患列表')">
								<!--                :class="e.status === '已整改' ? 'risk-item-rectified' : e.status === '未整改' ? 'risk-item-unRectified' : e.status === '整改中' ? 'risk-item-underRectification' : 'risk-item-noRectificationRequired'"-->
								<div :title="e.title" style="width: 50%">{{ e.title }}</div>
								<div :title="e.pipeName"
									style="width: 50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
									{{ e.pipeName }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

    <!--省长热线、市长热线、热力热线-->
    <!--总览-->
    <div class="hotlineAll" v-if="type == '统计总览' ">
      <div class="titleBar" data-text="统计总览"></div>
      <div class="closeBtn" @click="closeOnDutyVisible"></div>
      <div class="zonglan">
        <div class="zongShu">
          <h2>10871</h2>
          <span>总件数量</span>
        </div>
        <div class="jianshaoShu">
          <div class="jssFx">
            <h2>11168</h2>
            <span>减少数量</span>
          </div>
          <img src="../../assets/images/lookall/line.png">
          <div class="jssFx">
            <h2>50.67%</h2>
            <span>减少占比</span>
          </div>
        </div>
      </div>
      <div id="zonglanecharts" key="zonglanecharts" style="width: 100%; height: 290px;"></div>
      <div class="titleBar" data-text="未形成工单"></div>
      <div class="unformed">
        <div class="unformed_in">
          <span>系统内未形成工单数量总计</span>
          <h2>1539</h2>
        </div>
        <dl>
          <dd class="cyan">
            <span><i></i>质量投诉</span>
            <h2>0</h2>
          </dd>
          <dd class="blue">
            <span><i></i>其他诉求</span>
            <h2>715</h2>
          </dd>
          <dd class="orange">
            <span><i></i>业务咨询类</span>
            <h2>788</h2>
          </dd>
          <dd class="white">
            <span><i></i>非供热领域问题</span>
            <h2>36</h2>
          </dd>
        </dl>
      </div>

    </div>
    <!--热线-->
    <div class="hotlineBig" v-if="type == '省长热线'|| type == '市长热线'|| type == '行管热线' ">
      <div class="titleBar" :data-text="type"></div>
      <div class="closeBtn" @click="closeOnDutyVisible"></div>
      <div class="zonglan">
        <div class="zongShu">
          <h2>{{ rxInfo[type].total }}</h2>
          <span>总件数量</span>
        </div>
        <div class="jianshaoShu">
          <div class="jssFx">
            <h2>{{ rxInfo[type].reduce }}</h2>
            <span>减少数量</span>
          </div>
          <img src="../../assets/images/lookall/line.png">
          <div class="jssFx">
            <h2>{{ rxInfo[type].reduceProportion}}</h2>
            <span>减少占比</span>
          </div>
        </div>
      </div>
      <div class="zonglanfr">
        <div class="jianshaoShuFr">
          <div class="jssFx">
            <h2>{{ rxInfo[type].ywzx }}</h2>
            <span>业务资讯类</span>
          </div>
          <img src="../../assets/images/lookall/line.png">
          <div class="jssFx">
            <h2>{{ rxInfo[type].bx }}</h2>
            <span>报修类</span>
          </div>
        </div>
        <div class="zongShu">
          <h2>{{ rxInfo[type].total }}</h2>
          <span>总件数量</span>
        </div>
      </div>
      <div class="titleBar" data-text="报修类"></div>
      <div style="width: 100%;height: 83%;overflow: hidden scroll;margin-top: 2%;height: 370px;">
        <div class="repairItem">
          <span>室内漏水</span>
          <div>{{ rxInfo[type].snls }}</div>
        </div>
        <div class="repairItem">
          <span>楼道漏水</span>
          <div>{{ rxInfo[type].gdls }}</div>
        </div>
        <div class="repairItem">
          <span>不热派工</span>
          <div>{{ rxInfo[type].brpg }}</div>
        </div>
        <div class="repairItem">
          <span>要求提温</span>
          <div>{{ rxInfo[type].yqtw }}</div>
        </div>
        <div class="repairItem">
          <span>恢复用热</span>
          <div>{{ rxInfo[type].hfyr }}</div>
        </div>
        <div class="repairItem">
          <span>楼道、阀门、室内管线维修</span>
          <div>{{ rxInfo[type].ldfm }}</div>
        </div>
      </div>
    </div>
    <!--省长热线、市长热线、热力热线end-->
		<div class="w_tq">
			<span>
				<img style="width: 25px" v-if="weatherinformationWeather==1"
					src="../../assets/images/integrated/weather/qing-1.png">
				<img style="width: 25px" v-if="weatherinformationWeather==2"
					src="../../assets/images/integrated/weather/duoyun-2.png">
				<img style="width: 25px" v-if="weatherinformationWeather==3"
					src="../../assets/images/integrated/weather/yin-3.png">
				<img style="width: 25px" v-if="weatherinformationWeather==4"
					src="../../assets/images/integrated/weather/zhenyu-4.png">
				<img style="width: 25px" v-if="weatherinformationWeather==5"
					src="../../assets/images/integrated/weather/leizhenyu-5.png">
				<img style="width: 25px" v-if="weatherinformationWeather==6"
					src="../../assets/images/integrated/weather/leizhenyubingbao-6.png">
				<img style="width: 25px" v-if="weatherinformationWeather==7"
					src="../../assets/images/integrated/weather/yujiaxue-7.png">
				<img style="width: 25px" v-if="weatherinformationWeather==8"
					src="../../assets/images/integrated/weather/xiaoyu-8.png">
				<img style="width: 25px" v-if="weatherinformationWeather==9||weatherinformationWeather==22"
					src="../../assets/images/integrated/weather/zhongyu-9.png">
				<img style="width: 25px" v-if="weatherinformationWeather==10||weatherinformationWeather==23"
					src="../../assets/images/integrated/weather/dayu-10.png">
				<img style="width: 25px" v-if="weatherinformationWeather==11||weatherinformationWeather==24"
					src="../../assets/images/integrated/weather/baoyu-11.png">
				<img style="width: 25px" v-if="weatherinformationWeather==12||weatherinformationWeather==25"
					src="../../assets/images/integrated/weather/dabaoyu-12.png">
				<img style="width: 25px" v-if="weatherinformationWeather==13||weatherinformationWeather==26"
					src="../../assets/images/integrated/weather/tedabaoyu-13.png">
				<img style="width: 25px" v-if="weatherinformationWeather==14"
					src="../../assets/images/integrated/weather/zhenxue-14.png">
				<img style="width: 25px" v-if="weatherinformationWeather==15"
					src="../../assets/images/integrated/weather/xiaoxue-15.png">
				<img style="width: 25px" v-if="weatherinformationWeather==16||weatherinformationWeather==27"
					src="../../assets/images/integrated/weather/zhongxue-16.png">
				<img style="width: 25px" v-if="weatherinformationWeather==17||weatherinformationWeather==28"
					src="../../assets/images/integrated/weather/daxue-17.png">
				<img style="width: 25px" v-if="weatherinformationWeather==18||weatherinformationWeather==29"
					src="../../assets/images/integrated/weather/baoxue-18.png">
				<img style="width: 25px" v-if="weatherinformationWeather==19"
					src="../../assets/images/integrated/weather/wu-19.png">
				<img style="width: 25px" v-if="weatherinformationWeather==20"
					src="../../assets/images/integrated/weather/dongyu-20.png">
				<img style="width: 25px" v-if="weatherinformationWeather==21"
					src="../../assets/images/integrated/weather/shachenbao-21.png">
				<img style="width: 25px" v-if="weatherinformationWeather==30"
					src="../../assets/images/integrated/weather/fuchen-30.png">
				<img style="width: 25px" v-if="weatherinformationWeather==31"
					src="../../assets/images/integrated/weather/yangsha-31.png">
				<img style="width: 25px" v-if="weatherinformationWeather==32"
					src="../../assets/images/integrated/weather/qiangshachenbao-32.png">
			</span>
			<span>

				<i style="text-align: right;">
					<span v-if="weatherinformationWeather==1">晴</span>
					<span v-if="weatherinformationWeather==2">多云</span>
					<span v-if="weatherinformationWeather==3">阴</span>
					<span v-if="weatherinformationWeather==4">阵雨</span>
					<span v-if="weatherinformationWeather==5">雷阵雨</span>
					<span v-if="weatherinformationWeather==6">雷阵雨伴有冰雹</span>
					<span v-if="weatherinformationWeather==7">雨夹雪</span>
					<span v-if="weatherinformationWeather==8">小雨</span>
					<span v-if="weatherinformationWeather==9">中雨</span>
					<span v-if="weatherinformationWeather==10">大雨</span>
					<span v-if="weatherinformationWeather==11">暴雨</span>
					<span v-if="weatherinformationWeather==12">大暴雨</span>
					<span v-if="weatherinformationWeather==13">特大暴雨</span>
					<span v-if="weatherinformationWeather==14">阵雪</span>
					<span v-if="weatherinformationWeather==15">小雪</span>
					<span v-if="weatherinformationWeather==16">中雪</span>
					<span v-if="weatherinformationWeather==17">大雪</span>
					<span v-if="weatherinformationWeather==18">暴雪</span>
					<span v-if="weatherinformationWeather==19">雾</span>
					<span v-if="weatherinformationWeather==20">冻雨</span>
					<span v-if="weatherinformationWeather==21">沙尘暴</span>
					<span v-if="weatherinformationWeather==22">小雨—中雨</span>
					<span v-if="weatherinformationWeather==23">中雨—大雨</span>
					<span v-if="weatherinformationWeather==24">大雨—暴雨</span>
					<span v-if="weatherinformationWeather==25">暴雨—大暴雨</span>
					<span v-if="weatherinformationWeather==26">大暴雨—特大暴雨</span>
					<span v-if="weatherinformationWeather==27">小雪—中雪</span>
					<span v-if="weatherinformationWeather==28">中雪—大雪</span>
					<span v-if="weatherinformationWeather==29">大雪—暴雪</span>
					<span v-if="weatherinformationWeather==30">浮尘</span>
					<span v-if="weatherinformationWeather==31">扬沙</span>
					<span v-if="weatherinformationWeather==32">强沙尘暴</span>
					{{weather}}℃</i>
				<i id="day">2025.10.17</i>
			</span>
			<!--      <span><img src="~@/assets/images/paishui/weather.png"/></span>-->
		</div>
		<div class="w_data">
			<h4 id="time">14:40:05</h4>
		</div>
		<!-- 用户中心 -->
		<div class="header-fr">
			<!-- 头像 -->
			<div>
				<img src="~@/assets/index_img/home-img.png" alt="" @click="goToHomePage" />
			</div>
		</div>

		<div class="mapOptions_contain">
			<!-- 地图浮层 -->
			<div class="map-tc-bom" @click="resetLayerVisible">
				<em><img src="~@/assets/images/paishui/tc(9).png" /></em>
			</div>
			<ul class="map-tc-top">
				<li @click="selectDeviceNoPage()">
					<img src="~@/assets/images/paishui/tc(5).png" />
					<span>资源</span>
				</li>
				<li @click="showExcavation()">
					<img src="~@/assets/images/paishui/tc(6).png" />
					<span>开挖</span>
				</li>
				<!--        <li @click="showClipboxByEditor()">-->
				<!--          <img src="~@/assets/images/paishui/tc(6).png"/>-->
				<!--          <span>裁剪</span>-->
				<!--        </li>-->
				<li @click="measurementVisible = !measurementVisible">
					<img src="~@/assets/images/paishui/tc(7).png" />
					<span>工具</span>
				</li>
				<li @click="clearAll()">
					<img src="~@/assets/images/paishui/tc(8).png" />
					<span>清除</span>
				</li>
			</ul>
			<!-- 地图选择 -->
			<div class="map-tab" v-show="layerVisible">
				<img src="~@/assets/images/paishui/er-navbj-fr.png" />
				<div class="map-tab-in">
					<div class="tuceng"
						@click="currentLayerType == 'baseLayers' ? currentLayerType = '' : currentLayerType = 'baseLayers' "
						:style="currentLayerType == 'baseLayers' ? 'border:2px solid #1BF5FF' : '' ">
						<img src="~@/assets/images/paishui/erwei.png" />
						<span>基础图层</span>
					</div>
					<div class="tuceng"
						@click="currentLayerType == 'twoLayers' ? currentLayerType = '' : currentLayerType = 'twoLayers' "
						:style="currentLayerType == 'twoLayers' ? 'border:2px solid #1BF5FF' : '' ">
						<img src="~@/assets/images/paishui/sanwei.png" />
						<span>二维图层</span>
					</div>
					<div class="tuceng"
						@click="currentLayerType == 'threeLayers' ? currentLayerType = '' : currentLayerType = 'threeLayers' "
						:style="currentLayerType == 'threeLayers' ? 'border:2px solid #1BF5FF' : '' ">
						<img src="~@/assets/images/paishui/yingxiang.png" />
						<span>三维图层</span>
					</div>
					<div class="tuceng" @click="openHeatLayers">
						<img src="~@/assets/images/paishui/erwei.png" />
						<span>热力图层</span>
					</div>
				</div>
			</div>
			<!-- 测量选择 -->
			<div class="map-tab measurement-tab" v-show="measurementVisible">
				<img src="~@/assets/images/paishui/er-navbj-fr.png" />
				<div class="map-tab-in">
					<div class="tuceng" @click="choseMeasuringDistance()">
						<span>测距</span>
					</div>
					<div class="tuceng" @click="choseMeasuringArea()">
						<span>测面</span>
					</div>
					<div class="tuceng" @click="choseMeasuringHeight()">
						<span>测高</span>
					</div>
					<!--          <div class="tuceng" @click="boxSelection()">-->
					<!--            <span>框选</span>-->
					<!--          </div>-->
				</div>
			</div>

			<!-- 基础图层控制 -->
			<div class="layer-Control" v-show="currentLayerType == 'baseLayers'">
				<el-checkbox-group v-model="checkedBaseDOptions" @change="layerCheck">
					<el-checkbox v-for="e in addVectorTilesMapList" :label="e.id" :key="e.id">
						{{ e.name }}
					</el-checkbox>
				</el-checkbox-group>
			</div>
			<!-- 二维图层控制 -->
			<div class="layer-Control" v-show="currentLayerType == 'twoLayers'">
        <div style="height: 110px; overflow-y: scroll;">
          <el-tree
            :props="props"
            ref="twoDLayers_gongre_yici"
            :data="twoDLayers_gongre_yici"
            show-checkbox
            class="layers_gongre_yici"
            node-key="id"
            @check="handleCheckChange">
          </el-tree>
          <el-tree
            :props="props"
            ref="twoDLayers_gongre_erci"
            :data="twoDLayers_gongre_erci"
            show-checkbox
            class="layers_gongre_erci"
            node-key="id"
            @check="handleCheckChange">
          </el-tree>
          <el-tree
            :props="props"
            ref="twoDLayers_gongre_zhigong"
            :data="twoDLayers_gongre_zhigong"
            show-checkbox
            class="layers_gongre_zhigong"
            node-key="id"
            @check="handleCheckChange">
          </el-tree>
        </div>
			</div>
			<!-- 三维图层控制 -->
			<div class="layer-Control" v-show="currentLayerType == 'threeLayers'">
        <div style="height: 110px; overflow-y: scroll;">
          <el-tree
            :props="props"
            ref="threeDLayers_gongre_yici"
            :data="threeDLayers_gongre_yici"
            show-checkbox
            class="layers_gongre_yici"
            node-key="id"
            @check="handleCheckChange">
          </el-tree>
          <el-tree
            :props="props"
            ref="threeDLayers_gongre_erci"
            :data="threeDLayers_gongre_erci"
            show-checkbox
            class="layers_gongre_erci"
            node-key="id"
            @check="handleCheckChange">
          </el-tree>
          <el-tree
            :props="props"
            ref="threeDLayers_gongre_zhigong"
            :data="threeDLayers_gongre_zhigong"
            show-checkbox
            class="layers_gongre_zhigong"
            node-key="id"
            @check="handleCheckChange">
          </el-tree>
        </div>
			</div>
		</div>

		<!-- 值班管理列表 -->
		<div class="left_list" v-if="isOnDutyVisible && type == '值班管理' ">
			<div class="titleBar dutyTitleBar" data-text="" style="width: 490px;"><span>{{ type }}</span></div>
			<div class="closeBtn" @click="closeOnDutyVisible"></div>
			<div class="search_contain">
				<!-- 值班管理筛查项 -->
				<div>
					<el-input v-model="searchValue" placeholder="企业名称" clearable>
						<template #append></template>
					</el-input>
					<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="值班时间" v-model="searchTime"
						:clearable="true" style="width: 40%;"></el-date-picker>
				</div>
				<!-- 搜索 && 重置 -->
				<div class="btnOption_contain">
					<el-button @click="TableInfoSearch" class="ss-input" style="width: 50px">搜索</el-button>
					<el-button @click="TableInfoReset" class="cz-input" style="width: 50px">重置</el-button>
				</div>
			</div>
			<div class="onDuty_contain onDuty_contain_card">
				<div v-for="(e,idx) in tableList" :key="idx" class="onDuty_item onDuty_item_card">
					<span><img src="~@/assets/index_img/d-icon-tit-img.png">企业名称：{{ e.companyName || '' }}</span>
					<span><img
							src="~@/assets/index_img/d-icon-tit-img.png">所属行业：{{ dict.type.lifeline_industry.find(item => item.value == e.industry).label || '' }}</span>
					<span><img src="~@/assets/index_img/d-icon-tit-img.png">值班负责人：{{ e.dutyLeaderName || '' }}</span>
					<span><img src="~@/assets/index_img/d-icon-tit-img.png">负责人电话：{{ e.leaderPhone || '' }}</span>
					<span><img src="~@/assets/index_img/d-icon-tit-img.png">值班人员：{{ e.dutyMembersStr || '' }}</span>
					<span><img src="~@/assets/index_img/d-icon-tit-img.png">值班时间：{{ e.dutyDate || '' }}</span>

				</div>
			</div>

			<el-pagination @current-change="tableListSizeChange" :current-page="pagerCount" :page-size="pageSize"
				layout="total, prev, pager, next" :total="total">
			</el-pagination>
		</div>
		<!-- 运管体系列表（值班管理除外） -->
		<div class="left_list" v-show="isOnDutyVisible && type != '值班管理' ">
			<div class="titleBar dutyTitleBar" data-text="" style="width: 490px;"><span>{{ type }}</span></div>
			<div class="closeBtn" @click="closeOnDutyVisible"></div>
			<div class="search_contain">
				<!-- 值班管理筛查项 -->
				<div v-if="type=='值班管理'">
					<el-input v-model="searchValue" placeholder="企业名称" clearable>
						<template #append></template>
					</el-input>
					<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="值班时间" v-model="searchTime"
						:clearable="true" style="width: 40%;"></el-date-picker>
				</div>
				<!-- 通知通告管理筛查项 -->
				<div v-else-if="type=='通知通告'">
					<el-input v-model="searchValue" placeholder="标题" clearable>
						<template #append></template>
					</el-input>
					<el-input v-model="searchCode" placeholder="内容" clearable>
						<template #append></template>
					</el-input>
				</div>
				<!-- 人员管理筛查项 -->
				<div v-else-if="type=='人员管理'">
					<el-input v-model="searchValue" placeholder="账号" clearable>
						<template #append></template>
					</el-input>
					<el-input v-model="searchCode" placeholder="昵称" clearable>
						<template #append></template>
					</el-input>
				</div>
				<!-- 维护报告筛查项 -->
				<div v-else-if="type=='维护报告'">
					<el-input v-model="searchValue" placeholder="标题" clearable>
						<template #append></template>
					</el-input>
				</div>
				<!-- 搜索 && 重置 -->
				<div class="btnOption_contain">
					<el-button @click="TableInfoSearch" class="ss-input" style="width: 50px">搜索</el-button>
					<el-button @click="TableInfoReset" class="cz-input" style="width: 50px">重置</el-button>
					<!--                <el-button @click="exportExcel">导出</el-button>-->
				</div>
			</div>
			<el-table :data="tableList" element-loading-text="数据正在加载中..." ref="tableRef"
				style="width: 100%;height: 67vh; overflow: auto;">
				<template slot="empty">
					<p>{{ dataText }}</p>
				</template>
				<el-table-column show-overflow-tooltip align="center" v-for="(table,idx) in tablePropAndLabel"
					:prop="table.prop" :label="table.label" :key="idx" v-if="!table.hidden">
					<template slot-scope="scope">
						<dict-tag v-if="table.isDict" :options="dict.type[table.dictKey]"
							:value="scope.row[table.prop]" />
						<image-preview v-else-if="table.isImg" :src="scope.row[table.prop]" :width="50" :height="50" />
						<img v-else-if="table.isFile" style="width: 1.5rem;height: 1.6rem; margin: 2px;cursor: pointer"
							@click="handleFileClick(scope.row[table.prop])"
							:src="require('@/assets/fileTypeImage/file.png')" />
						<!-- 默认显示内容 -->
						<span v-else>{{ scope.row[table.prop] }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button class="no-margin-l" size="mini" type="text"
							style="color:#fff;width: 50px; margin-top: 5px;"
							@click="openDetail(scope.row,type)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @current-change="tableListSizeChange" :current-page="pagerCount" :page-size="pageSize"
				layout="total, prev, pager, next" :total="total">
			</el-pagination>
		</div>

		<!-- 资源落点详情 -->
		<div class="tk_div" v-show="isDetailVisible">
			<div class="tk1 tk_bor" style="width: 371px;height: 275px;">
				<h1>
					<span :title="detailInfo.deviceName || '--'"
						style="display: inline-block;overflow: hidden;width: 62%;text-overflow: ellipsis;">{{ detailInfo.deviceName || '--' }}</span>
					<i class="el-icon el-icon-close" style="margin-left: 5%;cursor: pointer;" @click="closeDetail"></i>
				</h1>
				<p>设备名称：{{ detailInfo.deviceName || '--' }}</p>
				<p>设备类型：<dict-tag :options="dict.type.heating_device_type" :value="detailInfo.deviceType || '--'"
						style="display: inline;" /></p>
				<p>经度：{{ detailInfo.longitude || '--' }}</p>
				<p>纬度：{{ detailInfo.latitude || '--' }}</p>
				<p>部门：{{ detailInfo.mapDeptName || '--' }}</p>
				<p>历史数值：<a @click="toggleDisplay(detailInfo.deviceCode,null)">详情</a></p>
			</div>
			<div class="tk2 tk_bor" v-if="deviceDialog"
				style="position: absolute;width: 466px;height: 455px;left: 98%;z-index: 9998;">
				<h1>设备数据</h1>
				<div class="date-picker-container">
					<el-date-picker class="custom-date-picker" v-model="selectedDate" placeholder="选择日期" type="date"
						size="small" @change="handleDateChange" value-format="yyyy-MM-dd" clearable :picker-options="{
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }" />
				</div>
				<div id="sbxqChart" ref="deviceDialog" class="deviceDialogClass"></div>
			</div>
		</div>
		<TableInfo ref="tableInfo" />
		<DetailDialog ref="detailDialog" />
		<!-- 事件详情弹窗 -->
    <EventDetail ref="eventDetail" />
  </div>

</template>


<script>
	import TableInfo from '@/components/TableInfo/index.vue'
	import supermap from '@/components/supermap-2.5d' //超图
	import {
		getUserProfile
	} from '@/api/system/user'
	import {
		getWeather
	} from '@/api/data'
	import DetailDialog from "@/components/DetailDialog/lookall.vue";
	import EventDetail from "@/components/DetailDialog/eventDetail_lookall.vue";

	let echarts = require('echarts')
	import Cookies from 'js-cookie'
	import {
		iconList,
		queryVectorTilesMapList
	} from '@/api/components/supermap'
	import {
		categoryStats,
		inspectionMileageAnalysis,
		selectDeviceNoPage,
		selectHeatStationNoPage,
		heatStationTemperatureStats,
		heatingViewPipeLengthStats,
		heatingViewGetDeviceTypeCount
	} from '@/api/lookall'

	import {
		getHeatingPipeListByDataSetAndSmId,
		getHeatingList,
		selectTaskList,
		selectFocusList,
		deviceMonitoringLineChart,
		getHeatingPipeByDataSetAndSmId,
		selectDutyVisualizationList,
		systemNoticeList,
		heatingUserList,
		getReportList
	} from '@/api/tableInfo'

  import {
    selectEventList
  } from '@/api/eventLifeLine'
	import modal from '@/plugins/modal'

	export default {
		name: 'lookall',
		dicts: ['heating_device_type', 'heating_pipeline_category', 'construction_tasks_status', 'lifeline_industry',
			'sys_notice_status', 'sys_notice_type', 'sys_normal_disable', 'sys_user_sex', 'lifeline_enterprise',
			'task_issuing_dept', 'heating_device_type'
		],
		components: {
			TableInfo,
			supermap,
			DetailDialog,
      EventDetail
		},
		data() {
			return {
        props: {
          label: 'name',
          children: 'children'
        },
        reviewDescription:'',
        rxInfo:{
          "省长热线":{
            total:124,
            reduce:-84,
            reduceProportion:"-210.00%",
            ywzx:42,
            bx:82,
            snls:4,
            gdls:0,
            brpg:75,
            yqtw:0,
            hfyr:0,
            ldfm:3
          },
          "市长热线":{
            total:35,
            reduce:19,
            reduceProportion:"35.19%",
            ywzx:11,
            bx:24,
            snls:2,
            gdls:0,
            brpg:21,
            yqtw:0,
            hfyr:0,
            ldfm:1
          },
          "行管热线":{
            total:10712,
            reduce:11233,
            reduceProportion:"51.19%",
            ywzx:6700,
            bx:4012,
            snls:271,
            gdls:340,
            brpg:1204,
            yqtw:742,
            hfyr:1221,
            ldfm:234
          }
        },
				openHeatingPipeVisible: false,
				heatingPipe: {},
				deviceDialog: false,
				selectedDate: '',
				deviceCode: '', //设备编码
				deptId: Cookies.get('deptId'),
				num: 0,
				iconData: [{
						name: '综合',
						icon: require('@/assets/lookall/zh-icon.png')
					},
					{
						name: '燃气',
						icon: require('@/assets/lookall/rq-icon.png')
					},
					{
						name: '热力',
						icon: require('@/assets/lookall/rl-icon.png')
					},
					{
						name: '排水',
						icon: require('@/assets/lookall/ps-icon.png')
					},
					{
						name: '桥梁',
						icon: require('@/assets/lookall/ql-icon.png')
					},
					{
						name: '管廊',
						icon: require('@/assets/lookall/gl-icon.png')
					},
					{
						name: '供水',
						icon: require('@/assets/lookall/gs-icon.png')
					}

				],
				currentTagName: 'left_btn1', // 左侧轮盘当前样式 默认选中可视化
				activeSubItem: '', // 当前高亮的子项
				normalIcon: require('@/assets/lookall/left-icon-2.png'),
				hoveredIcon: require('@/assets/lookall/left-icon-1.png'),
				hoveredIndexes: [],
				section: [{
						name: '综合管廊',
						btn: [{
								btnName: '监管中心',
								btnSrc: require('@/assets/lookall/jgzx-icon.png'),
								src: ''
							},
							{
								btnName: '驾驶舱',
								btnSrc: require('@/assets/lookall/jsc-icon.png'),
								src: '/Cockpit'
							},
							{
								btnName: '运营中心',
								btnSrc: require('@/assets/lookall/yyzx-icon.png'),
								src: ''
							}
						]
					},
					{
						name: '燃气',
						btn: [{
								btnName: '一张图',
								btnSrc: require('@/assets/lookall/yzw-icon.png'),
								src: ''
							},
							{
								btnName: '瓶安四平',
								btnSrc: require('@/assets/lookall/pan-icon.png'),
								src: ''
							},
							{
								btnName: '智慧哨兵',
								btnSrc: require('@/assets/lookall/sb-icon.png'),
								src: '/SentryPage'
							},
							{
								btnName: '城市生命线',
								btnSrc: require('@/assets/lookall/smx-icon.png'),
								src: ''
							}
						]
					},
					{
						name: '热力',
						btn: [{
								btnName: '监管中心',
								btnSrc: require('@/assets/lookall/jgzx-icon.png'),
								src: ''
							}

						]
					},
					{
						name: '排水',
						btn: [{
								btnName: '监管中心',
								btnSrc: require('@/assets/lookall/jgzx-icon.png'),
								src: ''
							}

						]
					},
					{
						name: '桥梁',
						btn: [{
								btnName: '监管中心',
								btnSrc: require('@/assets/lookall/jgzx-icon.png'),
								src: ''
							}

						]
					},
					{
						name: '管廊',
						btn: [{
								btnName: '监管中心',
								btnSrc: require('@/assets/lookall/jgzx-icon.png'),
								src: ''
							}

						]
					},
					{
						name: '供水',
						btn: [{
								btnName: '监管中心',
								btnSrc: require('@/assets/lookall/jgzx-icon.png'),
								src: ''
							}

						]
					}
				],
				deviceTypeStats: [],
				primaryNetworkLength: '',
				secondaryNetworkLength: '',
				totalLength: '',
				directSupplyLength: '',
				taskList: [],
				focusList: [],
				eventList: [],
				heatingList: [],
				heatInfo: [],
				layerVisible: false,
				measurementVisible: false,
				gasTimePeriod: 'week', // 当前用气量分析选择时间段 默认为“周”
				inspectionTimePeriod: 'week', // 巡检里程分析选择时间段 默认为“周”
				heatList: [],
				heatCode: '',
				viewRightSideStatus: 'out',
				viewLeftSideStatus: 'inside',
				currentLayerType: '',
				checkedBaseDOptions: [],
				checkedOptions: [],
				addVectorTilesMapList: [],
				isDetailVisible: false,
				detailInfo: {},
				weather: "",
				weatherinformationWeather: "",
				weatherinformationLevelValue: "",
        twoDLayers_gongre_yici:[
          {
            id: '1',
            name: '一次网',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '1-1',
                name: '铁东一次网',
                url: [null, '/map-RLyicierci-2/rest/maps/TD_yiciwang']
              },
              {
                id: '1-2',
                name: '铁西一次网',
                url: [null, '/map-RLyicierci-2/rest/maps/TX_yiciwang']
              }
            ]
          },
        ],
        twoDLayers_gongre_erci:[
          {
            id: '2',
            name: '二次网',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '2-1',
                name: '铁东二次网',
                url: [null, '/map-RLyicierci-2/rest/maps/TD_erciwang']
              },
              {
                id: '2-2',
                name: '铁西二次网',
                url: [null, '/map-RLyicierci-2/rest/maps/TX_erciwang']
              }
            ]
          },
        ],
        twoDLayers_gongre_zhigong:[
          {
            id: '3',
            name: '直供管',
            url: [null, null],
            class: 'dy',
            children: [
              {
                id: '3-1',
                name: '直供管',
                url: [null, '/map-DianRe/rest/maps/DianRe_zhigong_TD']
              },
            ]
          }
        ],

        threeDLayers_gongre_yici:[
          {
            id: '4',
            name: '一次网',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '4-1',
                name: '铁东一次网',
                url: ['/3D-TD_yiciwang/rest/realspace', null]
              },
              {
                id: '4-2',
                name: '铁西一次网',
                url: ['/3D-TX_yiciwang/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_gongre_erci:[
          {
            id: '5',
            name: '二次网',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '5-1',
                name: '铁东二次网',
                url: ['/3D-TD_erciwang_xian/rest/realspace', null]
              },
              {
                id: '5-2',
                name: '铁西二次网',
                url: ['/3D-TX_erciwang_xian/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_gongre_zhigong:[
          {
            id: '6',
            name: '直供管',
            url: [null, null],
            class: 'dy',
            children: [
              {
                id: '6-1',
                name: '直供管',
                url: [null, '/map-DianRe/rest/maps/DianRe_zhigong_TD']
              },
            ]
          }
        ],
				isOnDutyVisible: false,
				searchValue: '',
				searchCode: '',
				searchTime: '',
				tablePropAndLabel: [],
				tableList: [],
				dataText: '',
				pagerCount: 1,
				pageSize: 10,
				total: 0,
				type: '',
				currentEventType: '',
				demoIdx: null
			}
		},
		watch: {
			currentLayerType: {
				handler(newValue, oldValue) {
					if (newValue == 'threeLayers') {
						// this.showClipboxByEditor()
					} else {
						this.$refs.supermap.closeClipboxByEditor()
					}
				}
			}
		},
		mounted() {
			this.time();
			this.getWeather();
			// 初始化地图数据
			this.getSuperMapUrl();
			this.selectTaskList();
			this.selectFocusList();
			this.selectEventList();
			this.categoryStats();
			this.inspectionMileageAnalysis();
			this.getHeatingList();
			this.queryVectorTilesMapList();
			this.heatingViewPipeLengthStats();
			this.heatingViewGetDeviceTypeCount();
			// this.selectHeatStationNoPage();
			setTimeout(() => {
				this.heatStationTemperatureStats();
			}, 2000)
		},
		methods: {
      zonglanEcharts(){
        var myChart = echarts.init(document.getElementById("zonglanecharts"));
        let dashedPic =
          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC";
        let color = ["#FF8700", "#ffc300", "#00e473"];
        let chartData = [
          {
            name: "质量诉求",
            value: 0,
          },
          {
            name: "报修类",
            value: 4118,
          },
          {
            name: "业务咨询类",
            value: 6753,
          },
        ];
        let arrName = [];
        let arrValue = [];
        let sum = 0;
        let pieSeries = [],
          lineYAxis = [];

        // 数据处理
        chartData.forEach((v, i) => {
          arrName.push(v.name);
          arrValue.push(v.value);
          sum = sum + v.value;
        });

        // 图表option整理
        chartData.forEach((v, i) => {
          pieSeries.push({
            name: "学历",
            type: "pie",
            clockWise: false,
            hoverAnimation: false,
            radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
            center: ["30%", "50%"],
            label: {
              show: false,
            },
            data: [
              {
                value: v.value,
                name: v.name,
              },
              {
                value: sum - v.value,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                },
              },
            ],
          });
          pieSeries.push({
            name: "",
            type: "pie",
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
            center: ["30%", "50%"],
            label: {
              show: false,
            },
            data: [
              {
                value: 7.5,
                itemStyle: {
                  color: "#2b364e",
                },
              },
              {
                value: 2.5,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                },
              },
            ],
          });
          v.percent = ((v.value / sum) * 100).toFixed(1) + "%";
          lineYAxis.push({
            value: i,
            textStyle: {
              rich: {
                circle: {
                  color: color[i],
                  padding: [0, 5],
                },
              },
            },
          });
        });

        let option = {
          color: color,
          grid: {
            top: "15%",
            bottom: "62%",
            left: "30%",
            containLabel: false,
          },
          yAxis: [
            {
              type: "category",
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                formatter: function (params) {
                  let item = chartData[params];
                  console.log(item);
                  return (
                    "{line|}{circle|●}{name|" +
                    item.name +
                    "}{bd||}{percent|" +
                    item.percent +
                    "}{value|" +
                    item.value +
                    "}"
                  );
                },
                interval: 0,
                inside: true,
                textStyle: {
                  color: "#333",
                  fontSize: 14,
                  rich: {
                    line: {
                      width: 50,
                      height:2,
                      backgroundColor: '#ccdbf4',
                    },
                    name: {
                      color: "#fff",
                      fontSize: 14,
                    },
                    bd: {
                      color: "#fff",
                      padding: [0, 5],
                      fontSize: 14,
                    },
                    percent: {
                      color: "#fff",
                      fontSize: 14,
                    },
                    value: {
                      color: "#fff",
                      fontSize: 14,
                      fontWeight: 500,
                      padding: [0, 0, 0, 20],
                    },
                    unit: {
                      fontSize: 14,
                      color: "#fff",
                    },
                  },
                },
                show: true,
              },
              data: lineYAxis,
            },
          ],
          xAxis: [
            {
              show: false,
            },
          ],
          series: pieSeries,
        };
        myChart.setOption(option);
      },
			goToHomePage() {
				window.location.href = '/homePage';
			},
			initDemoChart() {
				let option = {
					"tooltip": {
						"trigger": "axis",
						"axisPointer": {
							"type": "line",
							"lineStyle": {
								"color": "#57617B"
							}
						},
						"backgroundColor": "rgba(0,60,120,0.8)",
						"padding": [
							8,
							10
						],
						"extraCssText": "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);"
					},
					"grid": {
						"borderWidth": 0,
						"top": 50,
						"bottom": 20,
						"textStyle": {
							"color": "#fff"
						}
					},
					"xAxis": [{
						"type": "category",
						"axisLine": {
							"lineStyle": {
								"color": "#32346c"
							}
						},
						"boundaryGap": false,
						"axisTick": {
							"show": false
						},
						"splitArea": {
							"show": false
						},
						"axisLabel": {
							"inside": false,
							"textStyle": {
								"color": "#bac0c0",
								"fontWeight": "normal",
								"fontSize": "12"
							}
						},
						"data": [
							"2025-11-06 08:00",
							"2025-11-06 10:00",
							"2025-11-06 12:00",
							"2025-11-06 14:00",
							"2025-11-06 16:00",
							"2025-11-06 18:00",
							"2025-11-06 20:00"
						]
					}],
					"yAxis": [{
							"name": "℃",
							"type": "value",
							"axisTick": {
								"show": false
							},
							"axisLine": {
								"show": true,
								"lineStyle": {
									"color": "#9bbdde"
								}
							},
							"splitLine": {
								"show": true,
								"lineStyle": {
									"color": "#32346c "
								}
							},
							"axisLabel": {
								"textStyle": {
									"color": "#bac0c0",
									"fontWeight": "normal",
									"fontSize": "12"
								}
							}
						},
						{
							"name": "MPa",
							"type": "value",
							"axisTick": {
								"show": false
							},
							"axisLine": {
								"show": true,
								"lineStyle": {
									"color": "#9bbdde"
								}
							},
							"splitLine": {
								"show": true,
								"lineStyle": {
									"color": "#32346c "
								}
							},
							"axisLabel": {
								"textStyle": {
									"color": "#bac0c0",
									"fontWeight": "normal",
									"fontSize": "12"
								}
							}
						}
					],
					"series": [{
							"name": "一次网供水压力",
							"type": "line",
							"symbolSize": 3,
							"symbol": "circle",
							"smooth": true,
							"showSymbol": true,
							"areaStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
												"offset": 0,
												"color": "#fa704d"
											},
											{
												"offset": 0.8,
												"color": "rgba(255,255,255,0)"
											}
										]
									},
									"shadowBlur": 10,
									"opacity": 0.3
								}
							},
							"itemStyle": {
								"normal": {
									"color": "#fa704d",
									"lineStyle": {
										"width": 1,
										"type": "solid"
									},
									"borderColor": "#fa704d",
									"borderWidth": 8,
									"barBorderRadius": 0,
									"label": {
										"show": false
									},
									"opacity": 0.5
								}
							},
							"yAxisIndex": 1,
							"data": [
								1.95,
								2.08,
								1.95,
								2.02,
								2.08,
								1.98,
								2.05
							]
						},
						{
							"name": "一次网回水压力",
							"type": "line",
							"symbolSize": 3,
							"symbol": "circle",
							"smooth": true,
							"showSymbol": true,
							"areaStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
												"offset": 0,
												"color": "#01babc"
											},
											{
												"offset": 0.8,
												"color": "rgba(255,255,255,0)"
											}
										]
									},
									"shadowBlur": 10,
									"opacity": 0.3
								}
							},
							"itemStyle": {
								"normal": {
									"color": "#01babc",
									"lineStyle": {
										"width": 1,
										"type": "solid"
									},
									"borderColor": "#01babc",
									"borderWidth": 8,
									"barBorderRadius": 0,
									"label": {
										"show": false
									},
									"opacity": 0.5
								}
							},
							"yAxisIndex": 1,
							"data": [
								1.52,
								1.68,
								1.52,
								1.58,
								1.68,
								1.55,
								1.62
							]
						},
						{
							"name": "一次网回水温度",
							"type": "line",
							"symbolSize": 3,
							"symbol": "circle",
							"smooth": true,
							"showSymbol": true,
							"areaStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
												"offset": 0,
												"color": "#1a9bfc"
											},
											{
												"offset": 0.8,
												"color": "rgba(255,255,255,0)"
											}
										]
									},
									"shadowBlur": 10,
									"opacity": 0.3
								}
							},
							"itemStyle": {
								"normal": {
									"color": "#1a9bfc",
									"lineStyle": {
										"width": 1,
										"type": "solid"
									},
									"borderColor": "#1a9bfc",
									"borderWidth": 8,
									"barBorderRadius": 0,
									"label": {
										"show": false
									},
									"opacity": 0.5
								}
							},
							"yAxisIndex": 0,
							"data": [
								38.5,
								42.1,
								38.5,
								40.1,
								42.1,
								39.2,
								41
							]
						},
						{
							"name": "一次网供水温度",
							"type": "line",
							"symbolSize": 3,
							"symbol": "circle",
							"smooth": true,
							"showSymbol": true,
							"areaStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
												"offset": 0,
												"color": "#99da69"
											},
											{
												"offset": 0.8,
												"color": "rgba(255,255,255,0)"
											}
										]
									},
									"shadowBlur": 10,
									"opacity": 0.3
								}
							},
							"itemStyle": {
								"normal": {
									"color": "#99da69",
									"lineStyle": {
										"width": 1,
										"type": "solid"
									},
									"borderColor": "#99da69",
									"borderWidth": 8,
									"barBorderRadius": 0,
									"label": {
										"show": false
									},
									"opacity": 0.5
								}
							},
							"yAxisIndex": 0,
							"data": [
								78.9,
								82.4,
								78.9,
								80.5,
								82.4,
								79.8,
								81.2
							]
						},
						{
							"name": "流量",
							"type": "line",
							"symbolSize": 3,
							"symbol": "circle",
							"smooth": true,
							"showSymbol": true,
							"areaStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
												"offset": 0,
												"color": "#e32f46"
											},
											{
												"offset": 0.8,
												"color": "rgba(255,255,255,0)"
											}
										]
									},
									"shadowBlur": 10,
									"opacity": 0.3
								}
							},
							"itemStyle": {
								"normal": {
									"color": "#e32f46",
									"lineStyle": {
										"width": 1,
										"type": "solid"
									},
									"borderColor": "#e32f46",
									"borderWidth": 8,
									"barBorderRadius": 0,
									"label": {
										"show": false
									},
									"opacity": 0.5
								}
							},
							"yAxisIndex": 0,
							"data": [
								48,
								52,
								48,
								50,
								52,
								49,
								51
							]
						},
						{
							"name": "二次网供水压力",
							"type": "line",
							"symbolSize": 3,
							"symbol": "circle",
							"smooth": true,
							"showSymbol": true,
							"areaStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
												"offset": 0,
												"color": "#7049f0"
											},
											{
												"offset": 0.8,
												"color": "rgba(255,255,255,0)"
											}
										]
									},
									"shadowBlur": 10,
									"opacity": 0.3
								}
							},
							"itemStyle": {
								"normal": {
									"color": "#7049f0",
									"lineStyle": {
										"width": 1,
										"type": "solid"
									},
									"borderColor": "#7049f0",
									"borderWidth": 8,
									"barBorderRadius": 0,
									"label": {
										"show": false
									},
									"opacity": 0.5
								}
							},
							"yAxisIndex": 1,
							"data": [
								0.82,
								0.91,
								0.82,
								0.86,
								0.91,
								0.84,
								0.88
							]
						},
						{
							"name": "二次网回水压力",
							"type": "line",
							"symbolSize": 3,
							"symbol": "circle",
							"smooth": true,
							"showSymbol": true,
							"areaStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
												"offset": 0,
												"color": "#fa704d"
											},
											{
												"offset": 0.8,
												"color": "rgba(255,255,255,0)"
											}
										]
									},
									"shadowBlur": 10,
									"opacity": 0.3
								}
							},
							"itemStyle": {
								"normal": {
									"color": "#fa704d",
									"lineStyle": {
										"width": 1,
										"type": "solid"
									},
									"borderColor": "#fa704d",
									"borderWidth": 8,
									"barBorderRadius": 0,
									"label": {
										"show": false
									},
									"opacity": 0.5
								}
							},
							"yAxisIndex": 1,
							"data": [
								0.65,
								0.72,
								0.65,
								0.68,
								0.72,
								0.66,
								0.7
							]
						},
						{
							"name": "二次网供水温度",
							"type": "line",
							"symbolSize": 3,
							"symbol": "circle",
							"smooth": true,
							"showSymbol": true,
							"areaStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
												"offset": 0,
												"color": "#01babc"
											},
											{
												"offset": 0.8,
												"color": "rgba(255,255,255,0)"
											}
										]
									},
									"shadowBlur": 10,
									"opacity": 0.3
								}
							},
							"itemStyle": {
								"normal": {
									"color": "#01babc",
									"lineStyle": {
										"width": 1,
										"type": "solid"
									},
									"borderColor": "#01babc",
									"borderWidth": 8,
									"barBorderRadius": 0,
									"label": {
										"show": false
									},
									"opacity": 0.5
								}
							},
							"yAxisIndex": 0,
							"data": [
								53.2,
								57.6,
								53.2,
								55.1,
								57.6,
								54.3,
								56.4
							]
						},
						{
							"name": "二次网回水温度",
							"type": "line",
							"symbolSize": 3,
							"symbol": "circle",
							"smooth": true,
							"showSymbol": true,
							"areaStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
												"offset": 0,
												"color": "#1a9bfc"
											},
											{
												"offset": 0.8,
												"color": "rgba(255,255,255,0)"
											}
										]
									},
									"shadowBlur": 10,
									"opacity": 0.3
								}
							},
							"itemStyle": {
								"normal": {
									"color": "#1a9bfc",
									"lineStyle": {
										"width": 1,
										"type": "solid"
									},
									"borderColor": "#1a9bfc",
									"borderWidth": 8,
									"barBorderRadius": 0,
									"label": {
										"show": false
									},
									"opacity": 0.5
								}
							},
							"yAxisIndex": 0,
							"data": [
								33.8,
								37.2,
								33.8,
								35.2,
								37.2,
								34.5,
								36.1
							]
						}
					]
				}
				const chartDom = this.$refs.divOption;
				const myChart = echarts.init(chartDom);
				myChart.setOption(option);
			},
			closeOnDutyVisible() {
				this.isOnDutyVisible = false
				this.activeSubItem = ''
        this.type = '';
			},
			openDetail(e, type, demoIdx) {
				if (type == '重点关注') {
					let obj = {
						"标题": e.followName,
						"附件": e.followUrl,
						"创建时间": e.createTime,
						"详情": e.followRemark,
					}
					this.$refs.detailDialog.openDetail(type, obj);
				} else if (type == '隐患列表') {
					let obj = {
						"隐患标题": e.title,
						"管线名称": e.pipeName,
						"经度": e.longitude,
						"纬度": e.latitude,
						"上报时间": e.reportTime,
						"上报人": e.userName,
						"上报地点": e.address,
						// "立查立改": e.rectifiedName,
						"状态": e.statusLabel,
						"描述": e.description,
						"整改信息": e.rectificationData,
						"整改前图片": e.scenePicture,
						"整改后图片": e.rectificationUrl
					}
					this.$refs.detailDialog.openDetail(type, obj);
				} else if (type == '任务列表') {
					let obj = {
						"任务标题": e.title,
						"任务状态": this.dict.type.construction_tasks_status.find(item => item.value == e.status).label,
						"开始时间": e.startTime,
						"截止时间": e.deadline,
						"结果反馈": e.resultFeedback,
						"任务详情": e.content,
						"附件": e.reportUrl,
					}
					this.$refs.detailDialog.openDetail(type, obj);
				} else if(type == '城市体检'||type == '日常监管'||type == '基础事件'||type == '设备预警'||type == "催办事件"||type == "督办事件"||type == "预警列表"){
          this.openEventDetail(e);
          return
        } else if (type == "值班管理") {
					let obj = {
						"企业名称": e.companyName,
						"所属行业": this.dict.type.lifeline_industry.find(item => item.value == e.industry)?.label,
						"值班负责人": e.dutyLeaderName,
						"负责人电话": e.leaderPhone,
						"值班人员": e.dutyMembersStr,
						"值班时间": e.dutyDate,
						// "创建时间": e.createTime,
						// "备注": e.remark,
					};
					return;
				} else if (type == "通知通告") {
					let obj = {
						"公告标题": e.noticeTitle,
						"公告类型": this.dict.type.sys_notice_type.find(item => item.value == e.noticeType)?.label,
						"公告内容": e.noticeContent,
						"公告状态": this.dict.type.sys_notice_status.find(item => item.value == e.status)?.label,
						"创建者": e.createBy,
						"创建时间": e.createTime,
						// "更新者": e.updateBy,
						// "更新时间": e.updateTime,
						"备注": e.remark,
						// "附件": e.noticeFile,
						// "发布状态": e.release,
						"备注": e.remark,
					};
					this.$refs.detailDialog.openDetail(type, obj);
					return;
				} else if (type == "人员管理") {
					let obj = {
						// "部门ID": e.deptId,
						"用户账号": e.userName,
						"用户昵称": e.nickName,
						"用户邮箱": e.email,
						"手机号码": e.phonenumber,
						"用户性别": this.dict.type.sys_user_sex.find(item => item.value == e.sex)?.label,
						// "头像地址": e.avatar,
						"帐号状态": this.dict.type.sys_normal_disable.find(item => item.value == e.status)?.label,
						"最后登录IP": e.loginIp,
						"最后登录时间": e.loginDate,
						"备注": e.remark,
					};
					this.$refs.detailDialog.openDetail(type, obj);
					return;
				} else if (type == "维护报告") {
					let obj = {
						"标题": e.reportName,
						"企业": this.dict.type.lifeline_enterprise.find(item => item.value == e.enterprise)?.label,
						"行业": this.dict.type.lifeline_industry.find(item => item.value == e.industry)?.label,
						"描述": e.reportRemark,
					};
					this.$refs.detailDialog.openDetail(type, obj);
					return;
				}
			},
      // 打开事件详情弹窗
      openEventDetail(obj) {
        this.$refs.eventDetail.openEventDetail(obj.eventId)
      },
			resetActiveSubItem() {
				this.activeSubItem = ''
			},
			tableListSizeChange(pageSize) {
				this.TableInfoHandler(this.type, this.deptId, pageSize)
			},
			// 资源落点
			selectDeviceNoPage() {
				selectDeviceNoPage().then(res => {
					let deviceMarkersList = []
					if (res.data != null && res.data.length > 0) {
						for (let i = 0; i < res.data.length; i++) {
							let markersMap = {
								lng: 124.59,
								lat: 43.02,
								icon: "shebei",
								bindPopupHtml: "",
								click: "preview",
								parameter: {
									id: res.data[i].id || '',
									deviceName: res.data[i].deviceName || '',
									deviceCode: res.data[i].deviceCode || '',
									deviceConstructionDate: res.data[i].deviceConstructionDate || '',
									deviceType: res.data[i].deviceType || '',
									mapDeptName: res.data[i].mapDeptName || '',
									latitude: res.data[i].latitude || '',
									longitude: res.data[i].longitude || '',
								},
								keepBindPopup: false,
								isAggregation: false,
							};
							markersMap.lng = res.data[i].longitude * 1;
							markersMap.lat = res.data[i].latitude * 1;
							markersMap.radius = res.data[i].cameraRadius || '';
							deviceMarkersList.push(markersMap);
						}
						setTimeout(() => {
							this.$refs.supermap.clearM();
							this.$refs.supermap.setMarkers(deviceMarkersList);
						}, 3000);
					} else {
						setTimeout(() => {
							this.$refs.supermap.clearM();
							this.$refs.supermap.clearMRadius();
						}, 1000);
					}
				})
			},
			// 设备详情日期选择
			handleDateChange(date) {
				this.toggleDisplay(this.deviceCode, date)
			},
			// 关闭设备详情
			cancelToggleDisplay() {
				this.selectedDate = ''
			},
			//设备详情
			toggleDisplay(deviceCode, date) {
				this.deviceCode = deviceCode
				this.deviceDialog = true
				deviceMonitoringLineChart({
					deviceCode: deviceCode,
					...(date ? {
						date: date
					} : {})
				}).then(res => {
					let resDataObj = res.data
					let resData = {
						"series": [{
							"data": resDataObj.series.oneWaterSupplyPressure.map(value => value ===
								"-100.0" ? "0" : value),
							"name": "一次网供水压力"
						}, {
							"data": resDataObj.series.oneBackwaterPressure.map(value => value ===
								"-100.0" ? "0" : value),
							"name": "一次网回水压力"
						}, {
							"data": resDataObj.series.oneBackwaterToa.map(value => value === "-100.0" ?
								"0" : value),
							"name": "一次网回水温度"
						}, {
							"data": resDataObj.series.oneWaterSupplyToa.map(value => value ===
								"-100.0" ? "0" : value),
							"name": "一次网供水温度"
						}, {
							"data": resDataObj.series.flowRate.map(value => value === "-100.0" ? "0" :
								value),
							"name": "流量"
						}, {
							"data": resDataObj.series.twoWaterSupplyPressure.map(value => value ===
								"-100.0" ? "0" : value),
							"name": "二次网供水压力"
						}, {
							"data": resDataObj.series.twoBackwaterPressure.map(value => value ===
								"-100.0" ? "0" : value),
							"name": "二次网回水压力"
						}, {
							"data": resDataObj.series.twoWaterSupplyToa.map(value => value ===
								"-100.0" ? "0" : value),
							"name": "二次网供水温度"
						}, {
							"data": resDataObj.series.twoBackwaterToa.map(value => value === "-100.0" ?
								"0" : value),
							"name": "二次网回水温度"
						}],
						"categories": resDataObj.timeLabels
					}


					const chartDom = this.$refs.deviceDialog;
					const myChart = echarts.init(chartDom);
					var xData = resData.categories;
					var color = ["#fa704d", "#01babc", "#1a9bfc", "#99da69", "#e32f46", "#7049f0", "#fa704d",
						"#01babc", "#1a9bfc", "#99da69", "#7049f0", "#e32f46"
					];

					var name = [];
					var data = [];
					for (const datum of resData.series) {
						name.push(datum.name);
						data.push(datum.data);
					}
					var series = [];
					for (var i = 0; i < name.length; i++) {
						series.push({
							name: name[i],
							type: "line",
							symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
							symbol: "circle", //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
							smooth: true, //是否平滑曲线显示
							showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: color[i],
											},
											{
												offset: 0.8,
												color: "rgba(255,255,255,0)",
											},
										],
										false
									),
									// shadowColor: 'rgba(255,255,255, 0.1)',
									shadowBlur: 10,
									opacity: 0.3,
								},
							},
							itemStyle: {
								normal: {
									color: color[i],
									lineStyle: {
										width: 1,
										type: "solid", //'dotted'虚线 'solid'实线
									},
									borderColor: color[i], //图形的描边颜色。支持的格式同 color
									borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
									barBorderRadius: 0,
									label: {
										show: false,
									},
									opacity: 0.5,
								},
							},
							data: data[i],
						});
					}
					this.option = {
						legend: {
							top: 10,
							itemGap: 5,
							itemWidth: 5,
							textStyle: {
								color: "#fff",
								fontSize: "10",
							},
							data: name,
						},
						tooltip: {
							trigger: "axis",
							axisPointer: {
								// 坐标轴指示器，坐标轴触发有效
								type: "line", // 默认为直线，可选为：'line' | 'shadow'
								lineStyle: {
									color: "#57617B",
								},
							},
							backgroundColor: "rgba(0,60,120,0.8)", // 设置提示框背景为蓝色
							padding: [8, 10], //内边距
							extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
							formatter: function(params) {
								let result = params[0].name + '<br/>';
								params.forEach(param => {
									switch (param.seriesName) {
										case '一次网供水压力':
											result += param.seriesName + ': ' + param.value +
												'MPa<br/>';
											break
										case '一次网回水压力':
											result += param.seriesName + ': ' + param.value +
												'MPa<br/>';
											break
										case '一次网供水温度':
											result += param.seriesName + ': ' + param.value +
												'℃<br/>';
											break
										case '一次网回水温度':
											result += param.seriesName + ': ' + param.value +
												'℃<br/>';
											break
										case '流量':
											result += param.seriesName + ': ' + param.value +
												'm³/h<br/>';
											break
										case '二次网供水压力':
											result += param.seriesName + ': ' + param.value +
												'MPa<br/>';
											break
										case '二次网回水压力':
											result += param.seriesName + ': ' + param.value +
												'MPa<br/>';
											break
										case '二次网供水温度':
											result += param.seriesName + ': ' + param.value +
												'℃<br/>';
											break
										case '二次网回水温度':
											result += param.seriesName + ': ' + param.value +
												'℃<br/>';
											break
										default:
											break
									}
								});
								return result;
							}
						},
						grid: {
							borderWidth: 0,
							top: 50,
							bottom: 20,
							textStyle: {
								color: "#fff",
							},
						},
						xAxis: [{
							type: "category",
							axisLine: {
								lineStyle: {
									color: "#32346c",
								},
							},
							boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
							axisTick: {
								show: false,
							},
							splitArea: {
								show: false,
							},
							axisLabel: {
								inside: false,
								textStyle: {
									color: "#bac0c0",
									fontWeight: "normal",
									fontSize: "12",
								},
							},
							data: xData,
						}, ],
						yAxis: {
							type: "value",
							axisTick: {
								show: false,
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: "#32346c",
								},
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: "#32346c ",
								},
							},
							axisLabel: {
								textStyle: {
									color: "#bac0c0",
									fontWeight: "normal",
									fontSize: "12",
								},
							},
						},
						series: series,
					};

					console.log(this.option);
					myChart.setOption(this.option, true);
					window.addEventListener("resize", function() {
						myChart.resize();
					});
				})
			},
			preview(e) {
				console.log('设备信息', e)
				this.detailInfo = e
				this.isDetailVisible = true
			},
			closeDetail() {
				this.isDetailVisible = false
				this.deviceDialog = false
				this.selectedDate = ''
			},
			//开挖
			showExcavation() {
				this.$refs.supermap.excavation()
				this.$refs.supermap.closeClipboxByEditor()
			},
			//裁剪
			showClipboxByEditor() {
				this.$refs.supermap.clipboxByEditor('/3D-WorkSpace/rest/realspace')
			},
			//测距
			choseMeasuringDistance() {
				this.$refs.supermap.choseMeasuringDistance()
			},
			//测面
			choseMeasuringArea() {
				this.$refs.supermap.choseMeasuringArea()
			},
			//测高
			choseMeasuringHeight() {
				this.$refs.supermap.choseMeasuringHeight()
			},
			//选择、框选
			boxSelection() {
				this.$refs.supermap.boxSelection()
			},
			//清除
			clearAll() {
        // 热力-一次
        if (this.$refs.twoDLayers_gongre_yici) {
          this.$refs.twoDLayers_gongre_yici.setCheckedKeys([]);
        }
        // 热力-二次
        if (this.$refs.twoDLayers_gongre_erci) {
          this.$refs.twoDLayers_gongre_erci.setCheckedKeys([]);
        }
        // 热力-直供
        if (this.$refs.twoDLayers_gongre_zhigong) {
          this.$refs.twoDLayers_gongre_zhigong.setCheckedKeys([]);
        }

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

				this.$refs.supermap.closeMeasuringAll()
				this.$refs.supermap.closeExcavationAll()
				this.$refs.supermap.closeClipboxByEditor()
				this.$refs.supermap.removeBoxSelection()
				this.checkedBaseDOptions = []
				this.checkedOptions = []
				this.$refs.supermap.addLifelineOpen([])
				this.measurementVisible = false
			},
			resetLayerVisible() {
				this.layerVisible = !this.layerVisible
				this.currentLayerType = ''
				this.checkedBaseDOptions = []
				// this.checkedOptions = []
				this.$refs.supermap.closeMeasuringAll()
				this.$refs.supermap.closeExcavationAll()
				// this.$refs.supermap.addLifelineOpen([])
				this.$refs.supermap.removeBoxSelection()
			},
			layerCheck() {
				this.$refs.supermap.reload(this.checkedBaseDOptions)
			},
      handleCheckChange() {
        // 获取所有tree的叶子节点
        const allLeafNodes = [];


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

        // 热力-一次
        if (this.$refs.threeDLayers_gongre_yici) {
          const leafNodes3 = this.$refs.threeDLayers_gongre_yici.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 热力-二次
        if (this.$refs.threeDLayers_gongre_erci) {
          const leafNodes3 = this.$refs.threeDLayers_gongre_erci.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 热力-直供
        if (this.$refs.threeDLayers_gongre_zhigong) {
          const leafNodes3 = this.$refs.threeDLayers_gongre_zhigong.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 提取需要的属性
        this.checkedOptions = allLeafNodes.map(node => node.url).filter(url => url);
        this.handleCheckedOptions()
      },
			handleCheckedOptions() {
				this.$refs.supermap.addLifelineOpen(this.checkedOptions)
			},
			// 获取配置项
			queryVectorTilesMapList() {
				this.addVectorTilesMapList = []
				queryVectorTilesMapList(Cookies.get('deptId')).then(req => {
					for (let i = 0; i < req.length; i++) {
						if (req[i].note == '图层过滤') {
							this.addVectorTilesMapList.push(req[i])
						}
					}
				})
			},
			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)
			},
			getWeather() {
				let date = new Date()
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				let d = date.getDate()
				d = d < 10 ? '0' + d : d
				let day = y + '-' + m + '-' + d
				let that = this
				//右侧获取天气信息
				getWeather({
					day: day
				}).then(res => {
					if (res.code == 200) {
						if (Array.isArray(res.data) && res.data.length) {
							this.weather = res.data[0].weatherinformationLow + '~' + res.data[0]
								.weatherinformationHigh
							this.weatherinformationWeather = res.data[0].weatherinformationWeather
							this.weatherinformationLevelValue = res.data[0].weatherinformationLevelValue
						}
					}
				})
			},
			//初始化地图数据
			getSuperMapUrl() {
				getUserProfile().then(response => {
					let mapDeptId = response.mapDeptId
					if (mapDeptId == '365') {
						this.num = 0
					} else if (mapDeptId == '369') {
						this.num = 1
					} else if (mapDeptId == '371') {
						this.num = 2
					} else if (mapDeptId == '373') {
						this.num = 3
					} else if (mapDeptId == '372') {
						this.num = 4
					} else if (mapDeptId == '370') {
						this.num = 5
					}
					this.$refs.supermap.removeAllviewer(mapDeptId, -1)
				})
			},
			openHeatLayers() {
				window.open('/reli')
			},
			//列表查询
			TableInfoSearch() {
				this.TableInfoHandler(this.type, this.deptId, 1)
			},
			//重置
			TableInfoReset() {
				this.searchValue = ''
				this.searchCode = ''
				this.searchTime = ''
				this.TableInfoHandler(this.type, this.deptId, 1)
			},
			TableInfoHandler(type, deptId, pageNum) {
				this.deptId = deptId
				this.type = type
				this.tablePropAndLabel = []
				this.tableList = []
				if (!pageNum) {
					this.searchValue = ''
					this.searchCode = ''
					this.searchTime = ''
				}
				if (type == '值班管理') {
					this.tableListVisible = true
					selectDutyVisualizationList({
						pageNum: pageNum || 1,
						pageSize: 10,
						industry: 1,
						...(this.searchTime ? {
							dutyDate: this.searchTime
						} : {}),
						...(this.searchValue ? {
							companyName: this.searchValue
						} : {})
					}).then(res => {
						this.tablePropAndLabel = [{
								prop: `company`,
								label: '企业名称ID',
								hidden: true
							},
							{
								prop: `companyName`,
								label: '企业名称'
							},
							{
								prop: `dutyLeader`,
								label: '值班负责人',
								hidden: true
							},
							{
								prop: `dutyLeaderName`,
								label: '值班负责人'
							},
							{
								prop: `leaderPhone`,
								label: '负责人电话'
							},
							{
								prop: `eventTitle`,
								label: '事件标题',
								hidden: true
							},
							{
								prop: `eventDescription`,
								label: '事件描述',
								hidden: true
							},
							{
								prop: `dutyDate`,
								label: '值班时间'
							},
							{
								prop: `createTime`,
								label: '创建时间',
								hidden: true
							},
							{
								prop: `createBy`,
								label: '创建人id',
								hidden: true
							},
							{
								prop: `createName`,
								label: '创建人姓名',
								hidden: true
							}
						]
						this.tableList = res.rows
						this.total = res.total
						this.isOnDutyVisible = true
						if (res.rows) {
							this.dataText = "暂无数据"
						}
					})
				}
        else if (type == '通知通告') {
					this.tableListVisible = true
					systemNoticeList({
						pageNum: pageNum || 1,
						pageSize: 10,
						deptId: this.deptId,
						...(this.searchCode ? {
							noticeContent: this.searchCode
						} : {}),
						...(this.searchValue ? {
							noticeTitle: this.searchValue
						} : {})
					}).then(res => {
						this.tablePropAndLabel = [{
								prop: `noticeId`,
								label: '公告ID',
								hidden: true
							},
							{
								prop: `noticeTitle`,
								label: '公告标题'
							},
							{
								prop: `noticeType`,
								label: '公告类型',
								isDict: true,
								dictKey: 'sys_notice_type'
							},
							{
								prop: `noticeContent`,
								label: '公告内容'
							},
							{
								prop: `status`,
								label: '公告状态',
								isDict: true,
								dictKey: 'sys_notice_status'
							},
							// {prop:`createBy`,label:'创建者'},
							// {prop:`createTime`,label:'创建时间'},
							// {prop:`updateBy`,label:'更新者'},
							// {prop:`updateTime`,label:'更新时间'},
							// {prop:`remark`,label:'备注'},
							// {prop:`noticeFile`,label:'附件'},
							// {prop:`release`,label:'发布状态'}
						]
						this.tableList = res.rows
						this.total = res.total
						this.isOnDutyVisible = true
						if (res.rows) {
							this.dataText = "暂无数据"
						}
					})
				}
        else if (type == '人员管理') {
					this.tableListVisible = true
					heatingUserList({
						pageNum: pageNum || 1,
						pageSize: 10,
						...(this.searchCode ? {
							nickName: this.searchCode
						} : {}),
						...(this.searchValue ? {
							userName: this.searchValue
						} : {})
					}).then(res => {
						this.tablePropAndLabel = [{
								prop: `userId`,
								label: '用户ID',
								hidden: true
							},
							// {prop:`deptId`,label:'部门ID'},
							{
								prop: `userName`,
								label: '用户账号'
							},
							{
								prop: `nickName`,
								label: '用户昵称'
							},
							// {prop:`email`,label:'用户邮箱'},
							{
								prop: `phonenumber`,
								label: '手机号码'
							},
							{
								prop: `sex`,
								label: '用户性别',
								isDict: true,
								dictKey: 'sys_user_sex'
							},
							// {prop:`avatar`,label:'头像地址'},
							{
								prop: `status`,
								label: '帐号状态',
								isDict: true,
								dictKey: 'sys_normal_disable'
							},
							// {prop:`loginIp`,label:'最后登录IP'},
							// {prop:`loginDate`,label:'最后登录时间'},
							// {prop:`remark`,label:'备注'},
						]
						this.tableList = res.rows
						this.total = res.total
						this.isOnDutyVisible = true
						if (res.rows) {
							this.dataText = "暂无数据"
						}
					})
				}
        else if (type == '维护报告') {
					this.tableListVisible = true
					getReportList({
						pageNum: pageNum || 1,
						pageSize: 10,
						...(this.searchCode ? {
							reportName: this.searchCode
						} : {}),
						...(this.searchValue ? {
							reportName: this.searchValue
						} : {})
					}).then(res => {
						this.tablePropAndLabel = [{
								prop: `eventId`,
								label: '事件唯一标识',
								hidden: true
							},
							{
								prop: `reportName`,
								label: '标题'
							},
							{
								prop: `reportRemark`,
								label: '描述',
								hidden: true
							},
							{
								prop: `enterprise`,
								label: '企业',
								isDict: true,
								dictKey: 'lifeline_enterprise'
							},
							{
								prop: `industry`,
								label: '行业',
								isDict: true,
								dictKey: 'lifeline_industry'
							},
							{
								prop: `reportUrl`,
								label: '附件',
								hidden: true
							},
						]
						this.tableList = res.rows
						this.total = res.total
						this.isOnDutyVisible = true
						if (res.rows) {
							this.dataText = "暂无数据"
						}
					})
				}
        else if (type == '省长热线') {
        }
        else if (type == '市长热线') {
        }
        else if (type == '行管热线') {
        }
        else if (type == '统计总览') {
          setTimeout(() => {
            this.zonglanEcharts();
          }, 1000)
        }
      },
			showInfoDialog(text) {
				this.gasTimePeriod = text
				// 设置当前高亮的子项
				this.activeSubItem = text
				let tableList = []
				let labels = []
				switch (text) {
					case '热力管线':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '热力管线',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '窨井管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '窨井管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break;
					case '热源厂信息':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '热源厂信息',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '换热站信息':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '换热站信息',

						}))
						window.open('/tableInfoHandler', '_blank')
						break;
					case '风险管理':
					case '风险清单管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '风险清单管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break;
					case '隐患管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '隐患管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '城市体检':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '城市体检',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '日常监管':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '日常监管',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '基础事件':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '基础事件',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '设备预警':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '设备预警',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '催办事件':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '催办事件',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '督办事件':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '督办事件',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '场站管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '场站管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '小区管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '小区管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '用户管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '用户管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break;
					case '设备管理':
					case '设备类型管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '设备管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '阈值管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '阈值管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '巡检巡查任务管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '巡检巡查任务管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '巡检巡查数据管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '巡检巡查数据管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '统计分析管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '统计分析管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '任务管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '任务管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '预案管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '预案管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '物资管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '物资管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '值班管理':
						this.TableInfoHandler('值班管理', this.deptId, null);
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '值班管理',

						}))

						break
					case '考核评价管理':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '考核评价管理',

						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '通知通告':
						this.TableInfoHandler('通知通告', this.deptId, null);
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '通知通告',

						}))
						// window.open('/tableInfoHandler', '_blank')
						break
					case '人员管理':
						this.TableInfoHandler('人员管理', this.deptId, null);
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '人员管理',

						}))
						// window.open('/tableInfoHandler', '_blank')
						break
					case '维护报告':
						this.TableInfoHandler('维护报告', this.deptId, null);
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '维护报告',

						}))
						// window.open('/tableInfoHandler', '_blank')
						break
					case '挖掘手续':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '挖掘手续',
						}))
						window.open('/tableInfoHandler', '_blank')
						break
					case '施工手续':
						sessionStorage.setItem('tableInfoParams', JSON.stringify({
							type: '施工手续',
						}))
						window.open('/tableInfoHandler', '_blank')
						break
          case '省长热线':
            this.TableInfoHandler('省长热线', this.deptId, null);
            break
          case '市长热线':
            this.TableInfoHandler('市长热线', this.deptId, null);
            break
          case '行管热线':
            this.TableInfoHandler('行管热线', this.deptId, null);
            break
          case '统计总览':
            this.TableInfoHandler('统计总览', this.deptId, null);
            break
					default:
						break
				}
			},
			getHeatingPipeListByDataSetAndSmId(selectedObjs) {
				this.$refs.tableInfo.TableInfoHandler('框选管线信息', selectedObjs, null)
			},
			//查询单选管线信息
      getHeatingPipeByDataSetAndSmId(yId, yName) {
        getHeatingPipeByDataSetAndSmId({
					yId: yId,
					yName: yName
				}).then(res => {
					if (res && res.data !== null && res.data !== undefined) {
						this.heatingPipe = {
							'管线编码': res.data.pipelineCode,
							'管线类别': res.data.pipelineCategory,
							'地市编码': res.data.cityCode,
							'区划名称': res.data.districtName,
							'起点编号': res.data.startPointId,
							'终点编号': res.data.endPointId,
							'起点高程': res.data.startPointElevation,
							'终点高程': res.data.endPointElevation,
							'经度': res.data.longitude,
							'纬度': res.data.latitude,
							'起点埋深': res.data.startPointBurialDepth,
							'终点埋深': res.data.endPointBurialDepth,
							'管径': res.data.pipeDiameter,
							'材质': res.data.material,
							'保温材质': res.data.insulationMaterial,
							'保温层厚度': res.data.insulationLayerThickness,
							'保护层材质': res.data.protectiveLayerMaterial,
							'保护层厚度': res.data.protectiveLayerThickness,
							'压力级别': res.data.pressureLevel,
							'压力': res.data.pressure,
							'流向': res.data.flowDirection,
							'埋深日期': res.data.burialDate,
							'埋深类型': res.data.burialType,
							'管道年限': res.data.pipelineAge,
							'线型': res.data.pipelineType,
							'所在道路': res.data.roadName,
							'权属单位名称': res.data.ownershipUnitName,
							'权属单位信用代码': res.data.ownershipUnitCreditCode,
							'使用单位名称': res.data.usageUnitName,
							'使用单位信用代码': res.data.usageUnitCreditCode,
							'维修责任单位名称': res.data.maintenanceUnitName,
							'维修责任单位信用代码': res.data.maintenanceUnitCreditCode,
							'建设年代': res.data.constructionYear,
							'部门名称': res.data.deptName,
							'长度': res.data.length
						}
            this.$refs.detailDialog.openDetail('热力管线', this.heatingPipe);
					}
				})
			},
			//关闭单选管线信息
			cancelHeatingPipeVisible() {
				this.openHeatingPipeVisible = false
				this.heatingPipe = {}
			},
			/**
			 * 任务列表
			 */
			selectTaskList() {
				selectTaskList({industry:1}).then(res => {
					this.taskList = res.rows
				})
			},
			/**
			 * 重点关注列表
			 */
			selectFocusList() {
				selectFocusList({
					industry: 1
				}).then(res => {
					this.focusList = res.rows
				})
			},
			/**
			 * 热力管线汇总
			 */
			heatingViewPipeLengthStats() {
				heatingViewPipeLengthStats().then(res => {
					this.primaryNetworkLength = res.data.primaryNetworkLength
					this.secondaryNetworkLength = res.data.secondaryNetworkLength
					this.totalLength = res.data.totalLength
					this.directSupplyLength = res.data.directSupplyLength
				})
			},
			/**
			 * 热力设备汇总
			 */
			heatingViewGetDeviceTypeCount() {
				heatingViewGetDeviceTypeCount().then(res => {
					this.deviceTypeStats = res.rows;
				})
			},
			/**
			 * 预警列表
			 */
			selectEventList(val) {
				selectEventList({
          industry: '1'
				}).then(res => {
					this.eventList = res.rows
				})
			},
			/**
			 * 管线类型统计分析
			 */
			categoryStats() {
				categoryStats().then(res => {
					let yAxisData = res.data.axis
					let lowPressure = res.data.series.lowPressure
					let mediumPressure = res.data.series.mediumPressure
					let highPressure = res.data.series.highPressure
					let myChart2 = echarts.init(document.getElementById('pipeline-type-analysis'))
					let option2 = {
						grid: {
							top: '15%',
							right: '5%',
							left: '15%',
							bottom: '25%' //也可设置left和right设置距离来控制图表的大小
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								// Use axis to trigger tooltip
								type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
							}
						},
						legend: {
							top: '0%',
							right: '5%',
							textStyle: {
								color: '#556677'
							}
						},
						xAxis: {
							type: 'value',
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false
							}
						},
						yAxis: {
							type: 'category',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff'
								}
							},
							data: yAxisData
						},
						series: [{
								name: '次高压',
								type: 'bar',
								stack: 'total',
								label: {
									show: true
								},
								emphasis: {
									focus: 'series'
								},
								itemStyle: {
									normal: {
										color: '#0080D5'
									}
								},
								data: highPressure
							},
							{
								name: '中压',
								type: 'bar',
								stack: 'total',
								label: {
									show: true
								},
								emphasis: {
									focus: 'series'
								},
								itemStyle: {
									normal: {
										color: '#774BB6'
									}
								},
								data: mediumPressure
							},
							{
								name: '低压',
								type: 'bar',
								stack: 'total',
								label: {
									show: true
								},
								itemStyle: {
									normal: {
										color: '#069DF9'
									}
								},
								emphasis: {
									focus: 'series'
								},
								data: lowPressure
							}
						]
					}
					myChart2.setOption(option2)
					// 获取数据的总长度，用于循环
					let dataLength2 = option2.series[0].data.length
					// 设置一个计数器
					let currentIndex2 = -1
					// 使用 setInterval 实现自动轮播
					setInterval(function() {
						// 显示 tooltip 自动轮播效果
						currentIndex2 = (currentIndex2 + 1) % dataLength2
						myChart2.dispatchAction({
							type: 'showTip',
							seriesIndex: 0,
							dataIndex: currentIndex2
						})
					}, 2000) // 每隔 2000 毫秒切换一次
				})
			},
			/**
			 * 隐患列表
			 */
			getHeatingList() {
				getHeatingList({industry:1}).then(res => {
					this.heatingList = res.data
				})
			},
			/**
			 * 可视化巡检里程分析
			 */
			inspectionMileageAnalysis() {
				inspectionMileageAnalysis().then(res => {
					let xAxisData = []
					let series = []
					for (let ins of res.data) {
						xAxisData.push(ins.week)
						series.push(ins.distance)
					}
					let myChart1 = echarts.init(document.getElementById('inspection-mileage-analysis'))
					let option1 = {
						grid: {
							top: '10%',
							right: '5%',
							bottom: '35%' //也可设置left和right设置距离来控制图表的大小
						},
						tooltip: {
							trigger: 'axis',
							formatter: (params) => {
								let result = params[0].name +
									// (text == "month"?"日":"") +
									// (text == "year"?"月":"") +
									'：<br/>'
								params.forEach(item => {
									result += item.seriesName + ': ' + item.value + 'm<br/>'
								})
								return result
							},
							axisPointer: {
								type: 'shadow',
								label: {
									show: true
								}
							}
						},
						xAxis: {
							data: xAxisData,
							axisLine: {
								show: true, //隐藏X轴轴线
								lineStyle: {
									color: '#B2BFB6'
								}
							},
							axisTick: {
								show: true //隐藏X轴刻度
							},
							axisLabel: {
								show: true,
								interval: 0, // 显示所有标签
								textStyle: {
									color: '#B2BFB6' //X轴文字颜色
								}
							}
						},
						yAxis: [{
								type: 'value',
								nameTextStyle: {
									color: '#ebf8ac'
								},
								splitLine: {
									show: false
								},
								axisTick: {
									show: true
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: '#FFFFFF'
									}
								},
								axisLabel: {
									show: true,
									textStyle: {
										color: '#B2BFB6'
									}
								}
							},
							{
								nameTextStyle: {
									color: '#ebf8ac'
								},
								position: 'right',
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: false
								},
								axisLabel: {
									show: false,
									formatter: '{value} %', //右侧Y轴文字显示
									textStyle: {
										color: '#ebf8ac'
									}
								}
							},
							{
								type: 'value',
								gridIndex: 0,
								min: 50,
								max: 100,
								splitNumber: 8,
								splitLine: {
									show: false
								},
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								splitArea: {
									show: true,
									areaStyle: {
										color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
									}
								}
							}
						],
						series: [
							// {
							//   name: "巡检里程",
							//   type: "line",
							//   yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
							//   smooth: true, //平滑曲线显示
							//   showAllSymbol: true, //显示所有图形。
							//   symbol: "circle", //标记的图形为实心圆
							//   symbolSize: 1, //标记的大小
							//   itemStyle: {
							//     //折线拐点标志的样式
							//     color: "#058cff"
							//   },
							//   lineStyle: {
							//     color: "#2689F9"
							//   },
							//   data: series
							// },
							{
								name: '巡检里程',
								type: 'bar',
								barWidth: 15,
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
												offset: 0,
												color: '#B5C3DC'
											},
											{
												offset: 1,
												color: '#34445E'
											}
										])
									}
								},
								data: series
							}
						]
					}
					myChart1.setOption(option1)
					// 获取数据的总长度，用于循环
					let dataLength1 = option1.series[0].data.length
					// 设置一个计数器
					let currentIndex1 = -1
					// 使用 setInterval 实现自动轮播
					setInterval(function() {
						// 显示 tooltip 自动轮播效果
						currentIndex1 = (currentIndex1 + 1) % dataLength1
						myChart1.dispatchAction({
							type: 'showTip',
							seriesIndex: 0,
							dataIndex: currentIndex1
						})
					}, 2000) // 每隔 2000 毫秒切换一次
				})
			},
			// 左侧视窗伸缩
			viewLeftInsideAndOut() {
				if (this.viewLeftSideStatus == 'inside') {
					this.getLeftSideOut()
					this.viewLeftSideStatus = 'out'
				} else {
					this.getLeftSideInside()
					this.viewLeftSideStatus = 'inside'
				}
			},
			// 右侧视窗伸缩
			viewRightInsideAndOut() {
				// this.$refs.chatgg.viewInsideAndOut()
				if (this.viewRightSideStatus == 'inside') {
					this.getRightSideOut()
					this.viewRightSideStatus = 'out'
				} else {
					this.getRightSideInside()
					this.viewRightSideStatus = 'inside'
				}
			},
			getLeftSideOut() {
				document.querySelector('.left-nav-rl').style.transform = 'translateX(-25.2rem)'
				document.querySelector('.leftFrBg').style.transform = 'translateX(-25.2rem)'
				document.querySelector('.left-nav-rl').style.transition = 'all 2.5s ease-in-out'
				document.querySelector('.leftFrBg').style.transition = 'all 2.5s ease-in-out'
			},
			getLeftSideInside() {
				document.querySelector('.left-nav-rl').style.transform = 'translateX(0)'
				document.querySelector('.leftFrBg').style.transform = 'translateX(0)'
			},
			getRightSideOut() {
				document.querySelector('.content-bar').style.transform = 'translateX(63rem)'
				document.querySelector('.rightFrBg').style.transform = 'translateX(63rem)'
				document.querySelector('.mapOptions_contain').style.transform = 'translateX(63rem)'
				document.querySelector('.mapOptions_contain').style.transition = 'all 2.5s ease-in-out'
				document.querySelector('.content-bar').style.transition = 'all 2.5s ease-in-out'
				document.querySelector('.rightFrBg').style.transition = 'all 2.5s ease-in-out'
			},
			getRightSideInside() {
				document.querySelector('.content-bar').style.transform = 'translateX(0)'
				document.querySelector('.rightFrBg').style.transform = 'translateX(0)'
				document.querySelector('.mapOptions_contain').style.transform = 'translateX(0)'
			},

			// 巡检里程分析时间段变化
			gasDateHasChanged(e) {
				const target = e.target.closest('i')
				// 通过自定义 data 属性获取数据
				const text = target.dataset.text
				this.gasTimePeriod = text
			},
			checkoutTagName(tagName) {
				if (this.currentTagName == tagName) return
				this.currentTagName = tagName
			},
			// 用气量分析时间段变化
			inspectionDateHasChanged(e) {
				const target = e.target.closest('i')
				// 通过自定义 data 属性获取数据
				const text = target.dataset.text
				this.inspectionTimePeriod = text
				this.heatStationTemperatureStats();
			},
			selectHeatStationNoPage() {
				selectHeatStationNoPage().then(res => {
					this.heatList = res.data;
					this.heatCode = res.data[0].heatStationCode;
				})
			},
			heatStationTemperatureStats() {
				const param = {
					heatStationCode: this.heatCode,
					type: this.inspectionTimePeriod
				}
				let xAxisData = [];
				let seriesData = [];
				heatStationTemperatureStats(param).then(res => {
					if (this.inspectionTimePeriod == 'month') {
						for (const xaxis of res.data.data.timeLabels) {
							xAxisData.push(xaxis.split('年')[1])
						}
					} else {
						xAxisData = res.data.data.timeLabels;
					}
					seriesData = res.data.data.avgTemperatures;
					let myChart3 = echarts.init(document.getElementById('gas-consumption-analysis'))
					let option3 = {
						grid: {
							top: '10%',
							right: '5%',
							bottom: '35%' //也可设置left和right设置距离来控制图表的大小
						},
						tooltip: {
							trigger: 'axis',
							formatter: (params) => {
								let result = params[0].name +
									'：<br/>'
								params.forEach(item => {
									result += item.seriesName + ': ' + item.value + '℃<br/>'
								})
								return result
							},
							axisPointer: {
								type: 'shadow',
								label: {
									show: true
								}
							}
						},
						xAxis: {
							data: xAxisData,
							axisLine: {
								show: true, //隐藏X轴轴线
								lineStyle: {
									color: '#B2BFB6'
								}
							},
							axisTick: {
								show: true //隐藏X轴刻度
							},
							axisLabel: {
								show: true,
								interval: 0, // 显示所有标签
								textStyle: {
									color: '#B2BFB6' //X轴文字颜色
								}
							}

						},
						yAxis: [{
								type: 'value',
								nameTextStyle: {
									color: '#ebf8ac'
								},
								splitLine: {
									show: false
								},
								axisTick: {
									show: true
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: '#FFFFFF'
									}
								},
								axisLabel: {
									show: true,
									textStyle: {
										color: '#B2BFB6'
									}
								}

							},
							{
								nameTextStyle: {
									color: '#ebf8ac'
								},
								position: 'right',
								splitLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: false
								},
								axisLabel: {
									show: false,
									formatter: '{value} %', //右侧Y轴文字显示
									textStyle: {
										color: '#ebf8ac'
									}
								}
							},
							{
								type: 'value',
								gridIndex: 0,
								min: 50,
								max: 100,
								splitNumber: 8,
								splitLine: {
									show: false
								},
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								splitArea: {
									show: true,
									areaStyle: {
										color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
									}
								}
							}
						],
						series: [{
								name: '二次网供水温度',
								type: 'line',
								yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
								smooth: true, //平滑曲线显示
								showAllSymbol: true, //显示所有图形。
								symbol: 'circle', //标记的图形为实心圆
								symbolSize: 1, //标记的大小
								itemStyle: {
									//折线拐点标志的样式
									color: '#058cff'
								},
								lineStyle: {
									color: '#2689F9'
								},
								data: seriesData
							},
							// {
							//   name: '进气量',
							//   type: 'bar',
							//   barWidth: 15,
							//   itemStyle: {
							//     normal: {
							//       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							//         offset: 0,
							//         color: '#B5C3DC'
							//       },
							//         {
							//           offset: 1,
							//           color: '#34445E'
							//         }
							//       ])
							//     }
							//   },
							//   data: [24, 42, 12, 32, 45, 67, 31, 34, 56, 31, 15, 64]
							//   // data: [12, 31, 21, 14, 16, 43, 15, 62, 31, 31, 43, 12]
							// }
						]
					}
					myChart3.setOption(option3)
					// 获取数据的总长度，用于循环
					let dataLength3 = option3.series[0].data.length
					// 设置一个计数器
					let currentIndex3 = -1
					// 使用 setInterval 实现自动轮播
					setInterval(function() {
						// 显示 tooltip 自动轮播效果
						currentIndex3 = (currentIndex3 + 1) % dataLength3
						myChart3.dispatchAction({
							type: 'showTip',
							seriesIndex: 0,
							dataIndex: currentIndex3
						})
					}, 2000) // 每隔 2000 毫秒切换一次
				})
			},
			//icon替换
			getIcon(index) {
				return this.hoveredIndexes.includes(index) ? this.hoveredIcon : this.normalIcon
			},
			handleMouseOver(index) {
				if (!this.hoveredIndexes.includes(index)) {
					this.hoveredIndexes.push(index) // 添加到被hover的数组中
				}
			},
			handleMouseLeave(index) {
				const indexToRemove = this.hoveredIndexes.indexOf(index)
				if (indexToRemove !== -1) {
					this.hoveredIndexes.splice(indexToRemove, 1) // 从数组中移除索引，恢复普通图标状态
				}
			},
			//点击滚动
			scrollToSection(index) {
				const element = document.getElementById(index)
				if (element) {
					element.scrollIntoView({
						behavior: 'smooth'

					})
				}
				console.log(index)
			},
			//序号+1
			computedIndex(index) {
				return index + 1
			}

		}

	}
</script>
<style lang="scss">
	body {
		overflow: hidden;
	}

	.rl-pop {
		background-color: #273a5e;
		border: 1px solid #15467a;

		.el-select-dropdown {
			border: 1px solid #15467a;
			background-color: #4c535e;
		}

		.el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			background-color: #3e4a5c;
		}

		.el-select-dropdown__item {
			color: #ffffff;
			padding: 0px 10px !important;
		}

		.el-select-dropdown__item.selected {
			color: #77e5dc !important;
		}

		.popper__arrow {
			top: -6px;
			left: 50%;
			margin-right: 3px;
			border-top-width: 0;
			border-bottom-color: #15467a !important;
		}
	}

	.el-tooltip__popper.is-dark {
		background: #1f2a41e6;
		color: #FFF;
		font-size: 14px;
		line-height: 22px;
		cursor: pointer;
	}

	.el-tooltip__popper p {
		padding-left: 10px;
		position: relative;
	}

	.el-tooltip__popper p::after {
		content: '';
		display: block;
		width: 4px;
		height: 4px;
		background: #fff;
		border-radius: 50px;
		position: absolute;
		left: 0px;
		top: 9px;
	}

	.el-tooltip__popper p:hover::after {
		background: #1cfff2;
		box-shadow: 0px 0px 5px #1cfff2;
	}

	.el-tooltip__popper p:hover {
		color: #1cfff2;
	}

	.search_contain {
		.el-input__inner {
			background-color: #4c535e;
			color: #606266;
			height: 24px;
			line-height: 24px;
			padding: 0 4px;
		}

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

		.el-input__inner {
			background-color: #394152;
			color: #fff;
			height: 28px;
			line-height: 28px;
			border: 1px solid #475b93 !important;
			color: #22bcfe !important;
		}

		.el-input {
			width: 150px !important;
			margin: 0 5px 0 0 !important;

			.el-input__inner {
				background: transparent;
			}
		}
	}

	.el-popper[x-placement^=bottom] .popper__arrow::after {
		border-bottom-color: #15467a;
	}

	.el-popper[x-placement^=bottom] .popper__arrow::after {
		border-bottom-color: #15467a;
	}


	.el-date-picker {
		z-index: 9999 !important;
	}

	/* 重点关注列表 */
	.zd-list {
		border-left: 3px solid #b4763e !important;
		background: linear-gradient(to right, rgb(52 69 95 / 32%), rgb(52 69 95 / 0%)) !important;

		div {
			width: 60% !important;
		}
	}

	/* 设备汇总 */
	.guanxian-item {
		display: flex;
		justify-content: space-between;
		width: 88%;
		margin: 8px 0 0 20px !important;

		.guanxian_in_bor {
			width: 98px;
			height: 200px;
			padding: 1px;
			background: linear-gradient(to bottom, rgb(81 105 144 / 0%), rgb(81 105 144 / 60%)) !important;

			.guanxian_in {
				width: 90px;
				height: 198px;
				background: rgb(18 31 51 / 60%);
				margin: 0 auto;
				padding: 5px 0 0 0;
				text-align: center;

				img {
					display: block;
					margin: 10px auto;
				}

				h2 {
					font-size: 16px;
					color: #fff;
					font-weight: bold;
					text-align: center;
					background: url(~@/assets/gas/wenbj.png) no-repeat center bottom;
					background-size: 90% auto;
					line-height: 30px;

					i {
						font-size: 14px;
						font-style: normal;
						font-weight: normal;
						margin: 0 0 0 5px;
					}
				}

				span {
					font-size: 18px;
					color: #fff;
					line-height: 40px;
				}
			}
		}

	}

	/* 管线汇总 */
	.shebei-item {
		background: rgb(18 31 51 / 60%);
		width: 88%;
		margin: 8px 0 0 20px !important;
		height: 200px;
		position: relative;

		.sb-top-bor {
			width: 100%;
			height: 96px;
			border: 1px solid #ddd;
			border-image: linear-gradient(to right, #a1d3fd, rgb(161 211 253 / 0%), rgb(161 211 253 / 0%), #a1d3fd) 30 30;
			display: flex;
			justify-content: space-between;
			padding: 10px;

			h2.shuliang {
				font-size: 20px;
				color: #fff;
				font-weight: bold;
				background-size: 90% auto;
				line-height: 30px;

				em {
					font-size: 14px;
					font-style: normal;
					font-weight: normal;
					margin: 0 0 0 5px;
				}
			}

			.sbTfl {
				text-align: left;
			}

			.sbTfr {
				text-align: right;
			}

			.sbTfl-title {
				width: 125px;
				height: 30px;
				background: linear-gradient(to right, rgb(87 127 189 / 73%), rgb(87 127 189 / 0%));
				display: flex;
				align-items: center;

				i {
					width: 4px;
					height: 15px;
					background: #21bcfe;
					margin: 0 8px;
				}

				span {
					font-size: 16px;
					color: #EFF8FC;
				}
			}

			.sbTfr-title {
				width: 125px;
				height: 30px;
				background: linear-gradient(to right, rgb(87 127 189 / 0%), rgb(87 127 189 / 73%));
				display: flex;
				align-items: center;
				flex-direction: row-reverse;

				i {
					width: 4px;
					height: 15px;
					background: #21bcfe;
					margin: 0 8px;
				}

				span {
					font-size: 16px;
					color: #EFF8FC;
				}
			}
		}

		.sb-top-bor:nth-child(1) {
			position: absolute;
			left: 0;
			top: 0;
			align-items: flex-start;
		}

		.sb-top-bor:nth-child(2) {
			position: absolute;
			left: 0;
			bottom: 0;
			align-items: flex-end;
		}

		.pic-gx {
			position: absolute;
			right: 95px;
			top: 32px;
		}
	}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';

	// 动画
	//标题初始动画
	@keyframes headermove {
		0% {
			transform: translateY(-200px);
		}

		100% {
			transform: translateY(0);
		}
	}

	@keyframes btmmove2 {
		0% {
			transform: translateY(-100px);
		}

		100% {
			transform: translateY(0);
		}
	}

	//雷达初始化
	@keyframes radarOP {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	//按钮初始化
	@keyframes btnRun {
		0% {
			transform: translateY(500px);
		}

		100% {
			transform: translateY(0);
		}
	}

	@keyframes topDown {
		0% {
			transform: translateY(-1000px);
		}

		100% {
			transform: translateY(0px);
		}
	}

	@keyframes movetop2 {
		0% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-18px);
		}

		100% {
			transform: translateY(0px);
		}
	}


	@keyframes moveLeft {
		0% {
			transform: translateX(-200px);
		}

		100% {
			transform: translateY(0);
		}
	}


	@keyframes moveRight {
		0% {
			transform: translateX(1000px);
		}

		100% {
			transform: translateY(0);
		}
	}

	.left_list {
		width: 490px;
		position: absolute;
		top: 10vh;
		left: 36vh;
		z-index: 999;
		background: #081326ba;
		padding: 0px 10px 0px 10px;


		.search_contain {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 20px 0px 10px 0px;
		}

		.el-pagination {
			background: rgb(31 42 65 / 82%);
			padding: 4px 15px !important;
			text-align: center;
			color: #fff;

			.el-pagination .el-pager li.active {
				color: #22bcfe !important;
			}

		}
	}

	.onDuty_contain_card {
		height: 70vh !important;
		display: flex;
		flex-direction: row !important;
		flex-wrap: wrap;
		overflow-y: scroll !important;
		align-content: flex-start;

	}

	.onDuty_contain {
		width: 100%;
		height: 100%;

		.onDuty_item {
			color: #fff;
			width: 100%;
			height: 20%;
			border: 1px solid #22bcfe;
		}

		.onDuty_item_card {
			color: #fff;
			width: 48%;
			height: fit-content !important;
			background: linear-gradient(90deg, rgba(6, 20, 36, 0.3), rgba(50, 81, 128, 0.3));
			border-radius: 8px;
			border: 1px solid #23466C;
			display: flex;
			flex-direction: column;
			margin: 0 8px 8px 0;
			padding: 10px;
			border-radius: 10px;
			position: relative;

			span {
				display: flex;

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

	.tk_div {
		width: 21%;
		height: 34%;
		position: absolute;
		top: 24%;
		left: 32.2%;
		z-index: 9999;
		display: flex;
		flex-direction: row;
	}

	.tk_bor {
		padding: 15px !important;
		border: 3px solid #28727e;
		box-shadow: 0px 0px 24px #28727e;
		background: rgba(0, 0, 0, 0.8);
	}

	.tk_bor h1 {
		padding-left: 20px;
		background: url("~@/assets/images/sentinel/hz_k.png") no-repeat left;
		font-size: 18px;
		color: #e0e5fa;
		font-weight: bold;
		height: 38px;
		line-height: 38px;
	}

	.tk_bor h1 i {
		display: inline-block;
		float: right;
		background: #3bad96;
		padding: 0px 10px;
		color: #fff;
		font-size: 16px;
		height: 30px;
		line-height: 30px;
		position: relative;
		border-radius: 4px;
	}

	.tk_bor h1 i::after {
		display: block;
		content: '';
		border-bottom: 9px solid transparent;
		border-right: 9px solid #3bad96;
		border-top: 9px solid transparent;
		position: absolute;
		left: -8px;
		top: 8px;
	}

	.tk_bor p {
		padding-left: 20px;
		background: url("~@/assets/images/sentinel/hz_k.png") no-repeat left;
		background-size: 12px;
		font-size: 16px;
		color: #fff;
		line-height: 35px;
	}

	.tk_bor p a {
		color: #6bf5f2;
		text-underline-offset: 0.4em;
		text-decoration: underline;
	}

	.tk_bor p a:hover {
		color: #6bf5f2;
		text-underline-offset: 0.4em;
		text-decoration: underline;
		cursor: pointer;
	}

	.tk1 {
		position: relative;
		margin-right: 20px !important;
	}

	.mapOptions_contain {
		position: absolute;
		left: 821px;
		bottom: 0px;
		width: 55px;
		height: 400px;
		transform: translateX(63rem);
		transition: all 2.5s ease-in-out;
	}

	.map-tc-top {
		width: 43px;
		height: 250px;
		background: rgba(8, 43, 91, 0.24);
		border: dashed 1px #26B0F3;
		border-radius: 3px;
		margin: 40% 0 0 -18%;

		li {
			width: 100%;
			text-align: center;
			margin: 20px 0;
			cursor: pointer;

			img {
				display: block;
				margin: 0 auto;
			}

			span {
				font-size: 12px;
				color: #21BCFE;
			}
		}
	}

	.map-tc-bom {
		width: 55px;
		height: 55px;
		background: rgba(8, 43, 91, 0.48);
		border-radius: 27px;
		border: 1px solid #26B0F3;
		cursor: pointer;
		margin: 40% 0 0 -30%;

		img {
			display: block;
			margin: 13px auto;
		}
	}

	.map-tab {
		position: absolute;
		right: 80px;
		bottom: 300px;

		img {
			display: block;
			float: right;
			height: 106px;
		}

		.map-tab-in {
			border: solid 1px #0f7caf;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
			border-right: none;
			background: color(srgb 0.06 0.22 0.37 / 0.7);
			display: flex;
			padding: 10px 0;
			box-shadow: inset 0px 0px 0px color(srgb 0.05 0.68 0.97 / 0.22);


			.tuceng {
				width: 92px;
				border: solid 2px #0dadf7;
				margin: 0 10px;
				text-align: center;
				background: #0dadf7;
				cursor: pointer;

				img {
					display: block;
					width: 88px;
					height: 60px;
				}

				span {
					font-size: 14px;
					color: #fff;
				}
			}
		}
	}

	.measurement-tab {
		bottom: 119px;

		>img {
			height: 40px;
		}
	}

	.date_qh {
		display: block;
		display: flex;
		justify-content: space-around;
		position: absolute;
		top: 16px;
		left: 45%;
		width: 245px;
		height: 24px;
		line-height: 26px;
		border-radius: 4px;
		overflow: hidden;

		i {
			width: 22%;
			display: inline-block;
			font-style: normal;
			width: 18%;
			line-height: 1.6;
			cursor: pointer;
			font-size: 15px;
			color: #919DA5;
			text-align: center;
			border: 1px solid #C7D6E8;
			background-color: #3A4B6B;
			border-radius: 5px;
			margin-left: 2px;
		}
	}

	.w_tq {
		position: absolute;
		right: 206px;
		top: 40px;
		display: flex;
		flex-direction: row;
		padding-top: 10px;

		span {
			font-size: 10px;
			color: #fff;
			margin-right: 10px;

			i {
				font-style: normal;
				display: block;
				font-size: 12px;
			}
		}
	}

	.w_data {
		position: absolute;
		right: 105px;
		top: 43px;
		color: #314c6e;
		display: flex;
		flex-direction: row;
		padding-top: 10px;

		h4 {
			font-size: 20px;
			color: #fff;
			/* 兼容不支持background-clip的浏览器 */
			padding-right: 10px;
		}

		p {
			padding-left: 10px;

			span {
				color: #8fa0c0;
				display: block;
				font-size: 10px;
			}
		}

	}

	.onDate {
		color: #fff !important;
		background-color: rgba(149, 107, 80) !important;
	}

	.titleBar {
		width: 450px;
		height: 40px;
		background: url('~@/assets/images/lookall/titleBar.png') 0px 0 no-repeat;
		background-size: 100% 100%;
	}

	.dutyTitleBar span {
		text-align: left;
		letter-spacing: 2px;
		font-size: 19px;
		color: #d9eaf5;
		top: 97px;
		position: fixed;
		font-family: 'pmzd';
		padding-left: 33px;
		line-height: 19px;
		text-shadow: 0px 0px 8px #d9eaf5;
	}

	.titleBar::after {
		content: attr(data-text);
		position: relative;
		display: inline-block;
		width: 30%;
		height: 100%;
		text-align: left;
		letter-spacing: 2px;
		top: 12%;
		text-align: center;
		font-size: 17px;
		font-weight: 600;
		left: 5%;
		color: #fff;
		font-family: 'pmzd';
		background: linear-gradient(to bottom, #fff, #8CC1E6);
		background-clip: text;
		color: transparent;
	}

	.task-item-unprocessed {
		position: absolute;
		width: 14%;
		height: 104%;
		top: -6%;
		right: -0.7%;
		background: url('~@/assets/images/lookall/notCompleted.png') 0px 0 no-repeat;
		background-size: 100% 100%;
	}

	.task-item-processing {
		position: absolute;
		width: 14%;
		height: 104%;
		top: -6%;
		right: -0.7%;
		background: url('~@/assets/images/lookall/Processing.png') 0px 0 no-repeat;
		background-size: 100% 100%;
	}

	.task-item-completed {
		position: absolute;
		width: 14%;
		height: 104%;
		top: -6%;
		right: -0.7%;
		background: url('~@/assets/images/lookall/completed.png') 0px 0 no-repeat;
		background-size: 100% 100%;
	}

	.event-item-unprocessed {
		position: absolute;
		width: 18%;
		height: 35%;
		top: 27%;
		right: 77%;
		background: url('~@/assets/images/lookall/eventNotCompleted.png') 0px 0 no-repeat;
		background-size: 100% 100%;
	}

	.event-item-completed {
		position: absolute;
		width: 18%;
		height: 35%;
		top: 27%;
		right: 77%;
		background: url('~@/assets/images/lookall/eventCompleted.png') 0px 0 no-repeat;
		background-size: 100% 100%;
	}

	// 已整改
	.risk-item-rectified {}

	//未整改
	.risk-item-unRectified {
		background-color: rgba(#C13232, .5) !important;
	}

	//整改中
	.risk-item-underRectification {}

	//无需整改
	.risk-item-noRectificationRequired {
		background-color: rgba(#B96623, .5) !important;
	}

	div ::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.bg-contain {
		position: absolute;
		top: -1.4%;
		width: 100%;
		height: 100vh;
		background: url('~@/assets/images/lookall/bg.png') -1px 5px no-repeat;
		background-size: 100% 96%;
		-webkit-mask: linear-gradient(black, black) content-box,
			linear-gradient(black, black);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		pointer-events: none;
		padding: 477px;
	}

	.topBg {
		position: absolute;
		right: 2.94%;
		top: -1px;
		width: 71%;
		height: 10.1%;
		pointer-events: none;
		background: url('~@/assets/gas/cont-bjtop.png') -1px 5px no-repeat;
		background-size: 100% 100%;
		z-index: 99;
	}

	.topFrBg {
		position: absolute;
		right: 0%;
		top: -1px;
		width: 100%;
		height: 10.1%;
		pointer-events: none;
		background: url('~@/assets/gas/bjtop.png') -1px 5px no-repeat;
		background-size: 100% 100%;
	}

	.leftBg {
		position: absolute;
		top: 0%;
		width: 3%;
		height: 100%;
		background: url('~@/assets/gas/cont-bjfl.png') -1px 5px no-repeat;
		background-size: 100% 94%;
		z-index: 99;
		cursor: pointer;
	}

	.leftFrBg {
		position: absolute;
		top: 0%;
		width: 17%;
		height: 100%;
		pointer-events: none;
		background: url('~@/assets/gas/bjfl.png') -1px 5px no-repeat;
		background-size: 100% 100%;
	}

	.rightBg {
		position: absolute;
		top: 0%;
		right: 0%;
		width: 3%;
		height: 100%;
		background: url('~@/assets/gas/cont-bjfr.png') -1px 5px no-repeat;
		background-size: 100% 94%;
		z-index: 99;
		cursor: pointer;
	}

	.rightFrBg {
		position: absolute;
		top: 0%;
		right: 0%;
		width: 52%;
		height: 100%;
		pointer-events: none;
		background: url('~@/assets/gas/bjfr.png') -1px 5px no-repeat;
		background-size: 100% 100%;
	}

	.bottomBg {
		position: absolute;
		bottom: 0%;
		right: 0%;
		width: 100%;
		height: 6%;
		pointer-events: none;
		background: url('~@/assets/gas/cont-bjfot.png') -2px 5px no-repeat;
		background-size: 100.11% 96%;
		z-index: 99;
	}


	.header {
		position: absolute;
		top: -0.9%;
		left: 0%;
		width: 43%;
		z-index: 999;
		height: 10%;
		font-family: 'ysbth';
		color: #bdd6f2;
		font-size: 40px;
		padding-left: 30px;
		line-height: 80px;
		background: url('~@/assets/images/lookall/header.png') 0px 0 no-repeat;
		background-size: 100% 100%;
	}

	.header::after {
		content: attr(data-text);
		display: inline-block;
		width: 80%;
		letter-spacing: 2px;
		font-size: 35px;
		font-family: 'ysbth';
		font-weight: bolder;
		line-height: 2.5;
		height: 100%;
		text-align: center;
		background: linear-gradient(to bottom, #fff, #AACCEF);
		background-clip: text;
		color: transparent;
	}

	.header-fr {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		padding: 1px;
		position: absolute;
		right: 54px;
		top: 49px;
		cursor: pointer;

		div {
			width: 30px;
			height: 30px;
			border-radius: 50%;

			img {
				margin: -2px 0 0 -1px;
			}
		}
	}

	.lookall {
		// background: url('~@/assets/lookall/mapBg.png') no-repeat fixed;
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.lookall-header {
			width: 100%;
			height: 109px;
			// background: url('~@/assets/lookall/lan-header-bg.png') no-repeat top center;
			top: 0;
			font-family: pmzd;
			font-size: 42px;
			text-align: center;
			line-height: 80px;
			animation: headermove 1s ease-out;

			span {
				line-height: 22px;
				font-weight: 400;
				color: #EFF8FC;
				background: linear-gradient(0deg, rgba(119, 186, 255, 1), rgba(255, 255, 255, 1));
				opacity: 1;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

		}

		.content-bar {
			top: 9%;
			right: 2%;
			width: 50%;
			position: absolute;
			height: calc(100% - 110px);
			overflow: hidden;
			transform: translateX(63rem);
			transition: all 2.5s ease-in-out;

			.left-nav {
				height: calc(100% - 109px);
				float: left;
				width: 23%;
				overflow-y: scroll;
				position: relative;
				display: flex;

				.line {
					position: absolute;
					left: 130px;
					height: 78vh;
					top: 20px;
					animation: topDown 1s ease-out;

				}

				.none {
					display: none;
				}

				.nthm {
					margin-left: 130px;

					.nthl {
						margin-bottom: 20px;
						transition: all .5s ease-in-out;

						a {
							display: flex;
							position: relative;
							width: 226px;
							height: 84px;
							background: url('~@/assets/lookall/left-icon-bg.png') no-repeat right;
							align-items: center;

							.icon-left {
								position: absolute;
								left: -24px;
								animation: topDown 1s ease-out;
							}

							.icon-left2 {
								position: absolute;
								left: 54px;
							}

							img {
								transition: all .8s ease-in-out;
							}

							span {
								position: absolute;
								left: 130px;
								font-family: pmzd;
								font-size: 24px;
							}
						}
					}

					.nthl:hover {
						filter: hue-rotate(-60deg) brightness(160%);
						transform: translateX(5px);

						img:nth-child(2) {
							transform: rotate3d(1, 2, 3, 360deg);
						}

					}

					.nthl0 {
						animation: moveLeft .5s ease-out;
					}

					.nthl1 {
						animation: moveLeft .8s ease-out;
					}

					.nthl2 {
						animation: moveLeft 1.1s ease-out;
					}

					.nthl3 {
						animation: moveLeft 1.4s ease-out;
					}

					.nthl4 {
						animation: moveLeft 1.7s ease-out;
					}

					.nthl5 {
						animation: moveLeft 2s ease-out;
					}

					.nthl6 {
						animation: moveLeft 2.3s ease-out;
					}
				}

			}

			.right-content {
				display: flex;
				justify-content: space-between;
				overflow-y: scroll;
				position: relative;
				height: calc(100vh - 110px);
				margin: 4% 120px 0 0;
				width: 960px;
				right: 0%;

				.con-box {
					height: 280px;
					display: flex;
					flex-direction: column;

					.tit {
						width: 100%;
						height: 60px;
						background: url('~@/assets/lookall/lan-tit-bg.png') no-repeat top left;
						font-family: pmzd;
						font-size: 24px;
						line-height: 60px;
						padding-left: 70px;
						animation: headermove 1s ease-out;
						color: #fff;
					}

					.btm-btn3 {
						width: 100%;
						height: 220px;
						display: flex;
						justify-content: start;
						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;
							margin: 0 20px;

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

							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: -30px;
							}
						}

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

				}

				.leftContent {
					width: 48%;
					height: 100%;

					>div {
						width: 100%;
						height: 30%;
					}

					>div:not(:nth-child(1)) {
						margin-top: 2%;
					}

					.task {
						.task-item {
							position: relative;
							width: 88%;
							height: 28%;
							margin: 2% 0 0 4%;
							border: 1px solid #516990;
							background-color: rgba(18, 31, 51, .6);
							cursor: pointer;

							>div:nth-child(1) {
								width: 80%;
								height: 100%;
								color: #fff;
								line-height: 3.5;
								text-indent: 20px;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
						}
					}

					.event {
						.event-item {
							position: relative;
							width: 88%;
							height: 45%;
							margin: 2% 0 0 4%;
							border: 1px solid #516990;
							background-color: rgba(18, 31, 51, .6);
							cursor: pointer;

							>div:nth-child(1) {
								width: 48%;
								height: 30%;
								color: #fff;
								line-height: 2;
								text-indent: 20px;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}

							.content {
								position: absolute;
								bottom: 2%;
								display: flex;
								width: 100%;
								height: 65%;

								.content-text {
									position: absolute;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									top: 6%;
									left: 25%;
									width: 70%;
									height: 73%;
									color: #fff;
									overflow: hidden;
									text-overflow: ellipsis;
									-webkit-line-clamp: 2;
								}
							}

							.line {
								position: relative;
								width: 50%;
								top: -24%;
								left: 48%;
								color: #C9E1EF;
								font-size: 14px;
							}
						}
					}

					.risk {
						position: relative;

						.risk-item {
							position: relative;
							display: flex;
							justify-content: space-between;
							padding-right: 6%;
							width: 88%;
							height: 23%;
							margin: 0 0 0 4%;
							border-top: 1px solid #516990;
							background-color: rgba(18, 31, 51, .6);
							color: #fff;
							line-height: 3.2;
							text-indent: 20px;
							cursor: pointer;

							>div:nth-child(1) {
								width: 70%;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
						}
					}

				}

				.assessmentText {
					position: absolute;
					width: 21%;
					height: 80%;
					bottom: -5%;
					right: 15%;

					>div {
						position: relative;
						//display: flex;
						width: 150%;
						height: 30%;

						.point {
							width: 8px;
							height: 8px;
							margin: auto 0;
						}

						>span {
							position: absolute;
							top: -16%;
							left: 2%;
							//display: inline-block;
							margin: auto 0;
							text-indent: 10px;
							color: #fff;
						}
					}

					.num {
						position: absolute;
						right: 15%;
						top: 28%;
						font-size: 20px;
						font-weight: 700;
						transform: skewX(-5deg);
					}
				}

				.rightContent {
					width: 48%;
					height: 100%;

					>div {
						position: relative;
						width: 100%;
						height: 23%;
					}

					>div:not(:nth-child(1)) {
						margin-top: 1%;
					}
				}

			}
		}

		.mapBar {
			position: absolute;
			bottom: 5%;
			background: url('~@/assets/images/lookall/mapBar.png') 0px 0 no-repeat;
			background-size: 100% 100%;
			left: 44%;
			width: 50px;
			height: 280px;

			img {
				display: block;
				float: right;
				height: 103px;
			}

			.map-tab-in {
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
				border-right: none;
				display: flex;
				padding: 10px 0;
				box-shadow: inset 0px 0px 0px color(srgb 0.05 0.68 0.97 / 0.22);


				.tuceng {
					width: 90px;
					border: solid 1px #0dadf7;
					margin: -38px -92px;
					text-align: center;
					background: #0dadf7;

					img {
						display: block;
						width: 86px;
						height: 60px;
					}

					span {
						font-size: 14px;
						color: #fff;
					}
				}
			}
		}


	}

	.layer-Control {
		position: absolute;
		right: 81px;
		bottom: 140px;
		width: 500px;
		height: 142px;
		border: solid 1px #0f7caf;
		background: color(srgb 0.06 0.22 0.37 / 0.7);
		padding: 15px;
	}

	.layer-Control span {
		display: block;
		font-size: 14px;
		color: #fff;
		height: 30px;
		line-height: 30px;
		font-weight: 900;
	}

	.layer-Control::after {
		content: '';
		display: block;
		background: url("~@/assets/index_img/look_jt.png") no-repeat top;
		width: 60px;
		height: 13px;
		background-size: 100% 100%;
		position: absolute;
		top: -9px;
		right: -3px;
	}
</style>
<style lang="scss">
	.left-nav-rl {
		width: 300px;
		background: url("~@/assets/gas/leftnav_bg.png") no-repeat left center;
		background-position-y: -114px;
		height: 951px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		position: relative;
		top: -100%;

		.left_btn {
			position: absolute;


			p {
				font-size: 24px;
				font-family: 'ysbth';
				background: -webkit-linear-gradient(bottom, #a6b7d2, #fff);
				/* Chrome, Safari */
				background: linear-gradient(bottom, #a6b7d2, #fff);
				/* 标准语法 */
				-webkit-background-clip: text;
				/* Chrome, Safari */
				background-clip: text;
				-webkit-text-fill-color: transparent;
				/* Chrome, Safari */
				color: transparent;
				/* 兼容不支持background-clip的浏览器 */
				height: 95px;
				line-height: 95px;
				position: relative;
				padding-left: 60px;
				cursor: pointer;
				animation: moveDown 700ms alternate;
			}

			p::after {
				content: '';
				display: block;
				background: url("~@/assets/gas/leftnav_d.png") no-repeat left center;
				width: 44px;
				height: 95px;
				left: 0px;
				top: 0px;
				position: absolute;
			}

			.on {
				color: #fff;
				padding-left: 70px;
				box-shadow: none;
				background: none;
				-webkit-text-fill-color: aliceblue;
			}

			.on::after {
				background: url("~@/assets/gas/leftnav_d_on.png") no-repeat left;
				width: 131px;
			}
		}

		:nth-child(1) {
			top: 10px;
			left: 22px;

		}

		:nth-child(2) {
			top: 100px;
			left: 67px;
		}

		:nth-child(3) {
			top: 200px;
			left: 81px;
		}

		:nth-child(4) {
			top: 300px;
			left: 83px;
		}

		:nth-child(5) {
			top: 400px;
			left: 78px;
		}

		:nth-child(6) {
			top: 500px;
			left: 58px;
		}
	}

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

		}

	}

	.el-button {
		padding: 5px 0 !important;
		color: #fff !important;
		/*background-color: #394152 !important;*/
		/*border: 1px solid #475b93 !important;*/
	}

	.el-pagination .btn-next,
	.el-pagination .btn-prev {
		color: #fff !important;
	}

	.el-dialog,
	.el-pager li {
		background: center center no-repeat #273554;
		color: #fff !important;
	}

	.el-pagination button:disabled {
		background: center center no-repeat #273554;
		color: #fff !important;
	}

	.el-pagination .btn-next,
	.el-pagination .btn-prev {
		background: center center no-repeat #273554;
		color: #fff !important;
	}
	.el-pagination .el-pager li.active {
		color: #22bcfe !important;
	}
	.el-table {
		margin-bottom: 15px !important;
		background-color: transparent !important;
	}
	.el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		background-color: #2e3952 !important;
		color: #22bcfe !important;
	}

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

	.el-table .el-table__body-wrapper td {
		background-color: #212c3c !important;
		color: #fff;
		font-size: 12px !important;
	}

	.el-tag {
		background-color: rgba(21, 21, 21, 0);
		border-color: rgba(217, 236, 255, 0);
	}

	.el-tag.el-tag--warning {
		background-color: rgba(253, 246, 236, 0);
		border-color: rgba(250, 236, 216, 0);
		color: #e6a23c;
	}

	.el-tag.el-tag--success {
		background-color: rgba(253, 246, 236, 0);
		border-color: rgba(250, 236, 216, 0);
		color: #67c23a;
	}



	.el-timeline {
		padding-left: 8px !important;
	}

	.el-timeline-item__node--normal {
		left: 0px;
		width: 10px;
		height: 10px;
	}

	.el-timeline-item__node {
		background-color: #1fe3d2;
		box-shadow: 0px 0px 5px #1fe3d2;
	}

	.ant-timeline-item-head-custom {
		background: none;
		/* 移除自定义图标背景 */
	}

	.el-timeline-item__tail {
		position: absolute;
		left: 4px;
		width: 1px;
		height: 100%;
		display: block !important;
		border-left: 1px solid #1e6a78;
	}

	.timeline-span {
		color: #fff;
		margin-bottom: 9px !important;
		text-shadow: 0px 0px 5px rgba(31, 227, 210, 0.38);
		font-weight: 900;
		display: block;
		margin-top: -11px !important;
	}

	.el-card {
		border: 1px solid #1e6a78;
		background-color: #00706b61;
		color: #fff;
		line-height: 25px;
	}

	.el-timeline-item {
		padding-bottom: 20px !important;
	}

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

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

	.el-checkbox__label {
		color: #b9e4ef;
	}

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

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

	.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #0fc5f2;
	}

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

	.el-dialog__header .el-dialog__title {
		color: #fff;
	}



	.eventDialog .d2 .progress_contain .line {
		background-color: #22bcf3;
	}

	/*.el-timeline-item__node {*/
		/*background-color: #22bcf3;*/
		/*-webkit-box-shadow: 0px 0px 5px #22bcf3;*/
		/*box-shadow: 0px 0px 5px #22bcf3;*/
	/*}*/

	/*.el-timeline-item__tail {*/
		/*border-left: 1px solid #22bcf3;*/
	/*}*/

	.el-card {
		border: 1px solid #22bcf3;
		background-color: rgba(39, 155, 255, 0.2);
		color: #fff;
		line-height: 25px;
	}

	.left_nav_min {
		display: none !important;
		padding: 15px 0px 15px 76px;

		button {
			background: url("~@/assets/gas/leftnav_xd.png") no-repeat left center !important;
			border: none !important;
			padding: 0px 0px 0px 25px !important;

			span {
				display: flex;
			}

		}

		button:hover,
		button.active {
			color: #3DF5FD !important;
			background: url("~@/assets/gas/leftnav_xd_on.png") no-repeat left center !important;
			padding-left: 20px;

		}

		button.active i,
		button:hover i {
			display: inline-block;
			width: 7px;
			height: 11px;
			background: url("~@/assets/gas/leftnav_xd_on2.png") no-repeat left center !important;
		}

		.span_tit {
			display: flex;
			flex-direction: row;
			font-size: 18px;
			color: #fff;
			height: 30px;
			line-height: 30px;
			padding-left: 25px;
			background: url("~@/assets/gas/leftnav_xd.png") no-repeat left center;
			cursor: pointer;

			i {
				display: none;
				margin: 9px 10px 9px 0px;
			}
		}

		.span_tit.active,
		.span_tit:hover {
			color: #3DF5FD !important;
			background: url("~@/assets/gas/leftnav_xd_on.png") no-repeat left center;
			padding-left: 20px;
		}

		.span_tit.active i,
		.span_tit:hover i {
			display: inline-block;
			width: 7px;
			height: 11px;
			background: url("~@/assets/gas/leftnav_xd_on2.png") no-repeat left center;
		}
	}

	/*基础数据库 选中样式*/
	.left_btn2 {


		.left_nav2 {
			top: 10px;
			left: 24px;
			animation: moveDown 700ms alternate;

			.left_nav_min {
				display: block !important;

				span {}

				span:nth-child(2) {
					margin-left: 7px;
				}

				span:nth-child(3) {
					margin-left: 12px;
				}

				span:nth-child(4) {
					margin-left: 16px;
				}

				span:nth-child(5) {
					margin-left: 20px;
				}

				span:nth-child(6) {
					margin-left: 23px;
				}

				span:nth-child(7) {
					margin-left: 24px;
				}

				span:nth-child(8) {
					margin-left: 24px;
				}

				span:nth-child(9) {
					margin-left: 23px;
				}
			}
		}

		.left_nav1 {
			top: 566px;
			left: 39px;
			animation: moveDown 700ms alternate;
		}

		.left_nav3 {
			top: 280px;
			left: 85px;
			animation: moveDown 700ms alternate;
		}

		.left_nav4 {
			top: 350px;
			left: 83px;
			animation: moveDown 700ms alternate;
		}

		.left_nav5 {
			top: 421px;
			left: 75px;
			animation: moveDown 700ms alternate;
		}

		.left_nav6 {
			top: 492px;
			left: 60px;
			animation: moveDown 700ms alternate;
		}
	}

	/*风险清单 选中样式*/
	.left_btn3 {

		.left_nav1,
		.left_nav2 {}

		.left_nav3 {
			top: 10px;
			left: 24px;
			animation: moveDown 700ms alternate;

			.left_nav_min {
				display: block !important;

				span {}

				span:nth-child(2) {
					margin-left: 7px;
				}

				span:nth-child(3) {
					margin-left: 12px;
				}

				span:nth-child(4) {
					margin-left: 16px;
				}

				span:nth-child(5) {
					margin-left: 20px;
				}

				span:nth-child(6) {
					margin-left: 23px;
				}

				span:nth-child(7) {
					margin-left: 24px;
				}

				span:nth-child(8) {
					margin-left: 24px;
				}

				span:nth-child(9) {
					margin-left: 23px;
				}
			}
		}

		/*.left_nav3{*/
		/*top:375px;*/
		/*left: 80px;*/
		/*}*/
		.left_nav4 {
			top: 148px;
			left: 74px;
			animation: moveDown 700ms alternate;
		}

		.left_nav5 {
			top: 226px;
			left: 83px;
			animation: moveDown 700ms alternate;
		}

		.left_nav6 {
			top: 303px;
			left: 84px;
			animation: moveDown 700ms alternate;
		}

		.left_nav1 {
			top: 385px;
			left: 79px;
			animation: moveDown 700ms alternate;
		}

		.left_nav2 {
			top: 466px;
			left: 66px;
			animation: moveDown 700ms alternate;
		}
	}

	/*监测系统 选中样式*/
	.left_btn4 {

		.left_nav1,
		.left_nav2 {}

		.left_nav4 {
			top: 10px;
			left: 24px;
			animation: moveDown 700ms alternate;

			.left_nav_min {
				display: block !important;

				span {}

				span:nth-child(2) {
					margin-left: 7px;
				}

				span:nth-child(3) {
					margin-left: 12px;
				}

				span:nth-child(4) {
					margin-left: 16px;
				}

				span:nth-child(5) {
					margin-left: 20px;
				}

				span:nth-child(6) {
					margin-left: 23px;
				}

				span:nth-child(7) {
					margin-left: 24px;
				}

				span:nth-child(8) {
					margin-left: 24px;
				}

				span:nth-child(9) {
					margin-left: 23px;
				}
			}
		}

		.left_nav3 {
			top: 490px;
			left: 61px;
			animation: moveDown 700ms alternate;
		}

		.left_nav4 {}

		.left_nav5 {
			top: 140px;
			left: 73px;
			animation: moveDown 700ms alternate;
		}

		.left_nav6 {
			top: 230px;
			left: 83px;
			animation: moveDown 700ms alternate;
		}

		.left_nav1 {
			top: 317px;
			left: 84px;
			animation: moveDown 700ms alternate;
		}

		.left_nav2 {
			top: 400px;
			left: 77px;
			animation: moveDown 700ms alternate;
		}
	}

	/*监管平台 选中样式*/
	.left_btn5 {

		.left_nav1,
		.left_nav2 {}

		.left_nav5 {

			top: 10px;
			left: 24px;
			animation: moveDown 700ms alternate;

			.left_nav_min {
				display: block !important;

				span {}

				.span_tit:nth-child(2) {
					margin-left: 7px;
				}

				.span_tit:nth-child(3) {
					margin-left: 12px;
				}

				.span_tit:nth-child(4) {
					margin-left: 16px;
				}

				.span_tit:nth-child(5) {
					margin-left: 20px;
				}

				.span_tit:nth-child(6) {
					margin-left: 23px;
				}

				.span_tit:nth-child(7) {
					margin-left: 24px;
				}

				.span_tit:nth-child(8) {
					margin-left: 24px;
				}

				.span_tit:nth-child(9) {
					margin-left: 23px;
				}

				.span_tit:nth-child(10) {
					margin-left: 22px;
				}

				.span_tit:nth-child(11) {
					margin-left: 20px;
				}

				.span_tit:nth-child(12) {
					margin-left: 16px;
				}
			}
		}



		.left_nav5 {}

		.left_nav6 {
			top: 318px;
			left: 85px;
			animation: moveDown 700ms alternate;
		}

		.left_nav1 {
			top: 387px;
			left: 80px;
			animation: moveDown 700ms alternate;
		}

		.left_nav2 {
			top: 449px;
			left: 70px;
			animation: moveDown 700ms alternate;
		}

		.left_nav3 {
			top: 521px;
			left: 53px;
			animation: moveDown 700ms alternate;
		}

		.left_nav4 {
			top: 592px;
			left: 30px;
			animation: moveDown 700ms alternate;
		}

	}



	/*运管体系 选中样式*/
	.left_btn6 {

		.left_nav1,
		.left_nav2 {}

		.left_nav6 {
			top: 10px;
			left: 24px;
			animation: moveDown 700ms alternate;

			.left_nav_min {
				display: block !important;

				span {}

				span:nth-child(2) {
					margin-left: 7px;
				}

				span:nth-child(3) {
					margin-left: 12px;
				}

				span:nth-child(4) {
					margin-left: 16px;
				}

				span:nth-child(5) {
					margin-left: 20px;
				}

				span:nth-child(6) {
					margin-left: 23px;
				}

				span:nth-child(7) {
					margin-left: 24px;
				}

				span:nth-child(8) {
					margin-left: 24px;
				}

				span:nth-child(9) {
					margin-left: 23px;
				}

				span:nth-child(10) {
					margin-left: 22px;
				}

				span:nth-child(11) {
					margin-left: 20px;
				}

				span:nth-child(12) {
					margin-left: 16px;
				}
			}
		}

		.left_nav3 {
			top: 390px;
			left: 79px;
			animation: moveDown 700ms alternate;
		}

		.left_nav4 {
			top: 482px;
			left: 62px;
			animation: moveDown 700ms alternate;
		}

		.left_nav5 {
			top: 567px;
			left: 38px;
			animation: moveDown 700ms alternate;
		}

		.left_nav6 {}

		.left_nav1 {
			top: 231px;
			left: 83px;
			animation: moveDown 700ms alternate;
		}

		.left_nav2 {
			top: 308px;
			left: 85px;
			animation: moveDown 700ms alternate;
		}
	}

	@keyframes moveDown {
		from {
			transform: translateY(30%);
		}

		to {
			transform: translateY(0);
			/* 移动到父元素的100%高度 */
		}
	}

	.deviceDialogClass {
		width: 100%;
		height: 39vh;
	}

	.el-tag.el-tag--danger {
		background-color: rgba(254, 240, 240, 0);
		border-color: rgba(253, 226, 226, 0);
		color: #f56c6c;
	}


  /* 为不同类型的选择框定义不同的颜色 */
  //供热一次网
  .layers_gongre_yici{

    .el-tree-node__expand-icon{
      color: #e26c2e !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .is-current:focus {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .is-focusable:focus {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #e26c2e !important; /* 自定义背景色 */
      background: rgba(224, 107, 47, 0.28) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgb(224, 107, 47, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgb(224, 107, 47, 0.7) !important; /* 自定义背景色 */
      border-color: #e26c2e !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }
  //供热二次网
  .layers_gongre_erci{
    .el-tree-node__expand-icon{
      color: #f6e75a !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgba(244, 229, 90, 0.3) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgba(244, 229, 90, 0.3) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgba(244, 229, 90, 0.3) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #f6e75a !important; /* 自定义背景色 */
      background: rgba(244, 229, 90, 0.37) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba(244, 229, 90, 0.3) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border: 1px solid #f6e75a !important; /* 自定义背景色 */
      background: rgba(244, 229, 90, 0.7) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }
  //供热直供管
  .layers_gongre_zhigong{
    .el-tree-node__expand-icon{
      color: #eaa470 !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgba(232, 163, 112, 0.49) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color:rgba(232, 163, 112, 0.49) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color:rgba(232, 163, 112, 0.49) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #eaa470 !important; /* 自定义背景色 */
      background: rgba(232, 163, 112, 0.27) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba(232, 163, 112, 0.49) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border: 1px solid #eaa470 !important; /* 自定义背景色 */
      background: rgba(232, 163, 112, 0.7) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }
  /*省长热线、市长热线、热力热线*/
  .hotlineAll,.hotlineBig{
    width: 470px;
    top: 10%;
    left: 18%;
    position: absolute;
    background: rgb(8 19 38 / 73%);
    padding: 10px;
}
  .zonglan,.zonglanfr{
    display: flex;
    align-items: center;
    margin: 0 0 0 40px;
    width: 100%;
  }
  .zongShu{
    width: 120px;
    height: 121px;
    background: url("../../assets/images/lookall/zongshu.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding: 38px 0;
    margin: 10px 0;

    h2{
      font-family: 'pmzd';
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #5780BF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:0px 0px 10px #d9eaf5;
    }
    span{
      font-size: 12px;
      color: #FFFFFF;
    }
  }
  .jianshaoShu{
    display: flex;
    align-items: center;
    background: url("../../assets/images/lookall/yuan-fr.png") no-repeat -30px center;
    background-size: 100% 100%;
    width: 280px;
    height: 70px;

    .jssFx{
      width: 40%;
      text-align: center;

      h2{
        font-size: 20px;
        color: #FFFFFF;
      }
      span{
        font-size: 12px;
        color: #FFFFFF;
      }
    }
  }
  .unformed{
    width: 355px;
    margin: 0 auto;

    .unformed_in{
      background: url("../../assets/images/lookall/weizs.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 355px;
      height: 66px;
      padding: 0 0 12px 10px;
      margin: 10px auto;

      span{
        font-size: 16px;
        color: #FFFFFF;
        margin: 0 5px 0 0;
      }
      h2{
        font-size: 30px;
        color: #FFFFFF;
        background: linear-gradient(0deg, #5780BF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:0px 0px 10px #d9eaf5;
        font-weight: bold;
      }
    }
    dl{
      width: 100%;
      dd{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;

        span{
          font-size: 16px;
          color: #CED0D1;
          display: flex;
          align-items: center;

          i{
            width: 24px;
            height: 10px;
            display: block;
            float: left;
            margin: 0 8px 0 0;
          }
        }
        h2{
          font-weight: bold;
          font-size: 18px;
        }
      }
      dd.cyan{
        span{
          i{
            background: linear-gradient(90deg, rgb(138 250 229 / 0%) 10%, #8AFAE5 100%);
          }
        }
        h2{
          color: #8AFAE5;
        }
      }
      dd.blue{
        span{
          i{
            background:linear-gradient(90deg, rgb(13 211 229 / 0%) 10%, #0DD3E5 100%);
          }
        }
        h2{
          color: #0DD3E5;
        }
      }
      dd.orange{
        span{
          i{
            background: linear-gradient(90deg, rgb(248 149 8 / 0%) 10%, #F89508 100%);
          }
        }
        h2{
          color: #F89508;
        }
      }
      dd.white{
        span{
          i{
            background: linear-gradient(90deg, rgb(255 255 255 / 0%) 10%, #FFFFFF 100%);
          }
        }
        h2{
          color: #FFFFFF;
        }
      }
    }
  }
  .jianshaoShuFr{
    display: flex;
    align-items: center;
    background: url("../../assets/images/lookall/yuan-fl.png") no-repeat 14px center;
    background-size: 100% 100%;
    width: 280px;
    height: 70px;
    justify-content: center;

    .jssFx{
      width: 40%;
      text-align: center;

      h2{
        font-size: 20px;
        color: #FFFFFF;
      }
      span{
        font-size: 12px;
        color: #FFFFFF;
      }
    }
  }
  .repairItem{
    display: flex;
    justify-content: space-between;
    padding:0 5%;
    border-top: 1px solid #516990;
    background-color: rgba(18, 31, 51, 0.6);
    color: #fff;
    line-height:46px;
    margin: 0 0 0 5%;

    span{
      text-align: left;
    }
    div{
      text-align: right;
    }
  }
  .closeBtn {
    position: absolute;
    right: 2%;
    top: 2%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: url("~@/assets/images/lookall/close.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

</style>