visu_lifeline/src/views/industry/paishui.vue

<!--排水-->
<template>
	<div class="pspage">
		<!-- 头部 -->
		<div class="headerbig">
			<div class="headertop">
				<div class="headercont" style="display: flex;">
					<img src="@/assets/index_img/life-LOGO.png" style="width: 46px; height: 46px;"  alt="">
					<img src="~@/assets/images/paishui/title.png"  style="width: 600px; height: 55px;" />
				</div>
			</div>
			<div class="tongzhi" style="margin-top: -44px;">
        <img src="~@/assets/images/paishui/tongzhi.png">
				<a class="color-blink">关于加强污水排放管理工作的通知</a>
			</div>
		</div>

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

		<!-- 左边 -->
		<!-- 时间 -->
		<div class="header-fl">
			<span id="time">15:30:00</span>
			<span id="day">2025.02.01</span>
		</div>
    <!-- 天气 -->
    <div class="header-fl-tq-1">
        <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>
    </div>
    <div class="header-fl-tq-2">
        <span>
						<i>
              <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>
            </i>
						<i>{{ weather }}℃</i>
					</span>
    </div>
		<div class="left-c-bg"></div>
		<div class="left-center left-nav" >

			<!-- 小标题 -->
			<div class="all-title">
				<span>重点关注</span>
			</div>
			<div class="task">
				<div style="width: 95%;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: 50%;position: absolute;">{{ e.createTime }}</span></div>
					</div>
				</div>
			</div>
			<!-- <div class="tubiao" id="w_chart1"></div> -->
			<!-- 小标题 -->
			<div class="all-title">
				<span>设备汇总</span>
<!--				<div class="date_qh" @click="inspectionDateHasChanged">-->
<!--					<i data-text="week" :class="inspectionTimePeriod == 'week' ? 'on' : '' ">周</i>-->
<!--					<i data-text="month" :class="inspectionTimePeriod == 'month' ? 'on' : '' ">月</i>-->
<!--					<i data-text="quarter" :class="inspectionTimePeriod == 'quarter' ? 'on' : '' ">季度</i>-->
<!--					<i data-text="year" :class="inspectionTimePeriod == 'year' ? 'on' : '' ">年</i>-->
<!--				</div>-->
			</div>
			<div class="ps_sbhz">
				<div
					class="ps_sbhz_div"
					v-for="(e,idx) in deviceList"
					>
					<img
						:src="require(`../../assets/images/paishui/ps_listicon${idx+1}.png`)"
					/>
					<div class="ps_sbhz_txt">
						<p>{{ e.deviceType.replace(/探测器|传感器|、/g ,'') }}</p>
						<b>{{ e.deviceCount }}</b>
					</div>
				</div>
			</div>
			<!-- 小标题 -->
			<div class="all-title">
				<span>排水管线汇总</span>
			</div>
			<div class="ps_sbhz ps_sbhz_flex_c">
				<div
					class="ps_sbhz_div ps_sbhz_div_flex_c"
					v-for="(e,idx) in pipeAnalysisData"
					:key="e.id" :class="`class-${idx + 1}`"
					>
						<img
							:src="require(`../../assets/images/paishui/ps_listicon-${idx+1}.png`)"
						/>
					<div class="ps_sbhz_txt">
						<p>{{ e.label }}</p>
						<b>{{ e.value }}</b>
					</div>
				</div>
			</div>
			<!-- <div class="tubiao" id="w_chart3"></div> -->
			<!-- 小标题 -->
			<!--<div class="all-title">-->
				<!--<span>易涝点整改状态分析</span>-->
			<!--</div>-->
			<!--<div class="tubiao" id="w_chart4"></div>-->

		</div>
		<!-- 左侧隐藏列表组件 -->
		<div class="left-center left-nav-inside left-list-table">
			<!-- 小标题 -->
			<div class="all-title all-title-540" @click="viewLeftInsideAndOut1()">
				<span>{{ currentResourceTile }}</span>
				<div class="right-span"><i class="el-icon-close"></i></div>
			</div>
      <div v-if="type=='设备管理'" class="sbgl_list">
        <div class="sbgl_zs">
          <img src="../../assets/index_img/sbgl_icon1.png"/>
          <div class="sbgl_num1">
            <span>设备总数</span>
            <b>{{ totalCount }}</b>
          </div>
          <div class="sbgl_num2">
            <span>设备在线</span>
            <b>{{ onlineCount }}</b>
          </div>
          <div class="sbgl_num3">
            <span>设备离线</span>
            <b>{{ offlineCount }}</b>
          </div>
          <div class="sbgl_num4">
            <h4>{{percentage(totalCount,onlineCount)}}%</h4>
            <i>在线率</i>
          </div>
        </div>
        <!--          <div class="sbgl_fs">-->
        <!--            <div class="sbgl_fs_div"  v-for="dep in dooByDep">-->
        <!--              <div class="sbgl_fs_left">-->
        <!--                <p>{{ dep.deptName }}</p>-->
        <!--                <b>{{ dep.total }}</b>-->
        <!--                <span>设备总数</span>-->
        <!--              </div>-->
        <!--              <div class="sbgl_fs_right">-->
        <!--                <p class="zx">在线</p>-->
        <!--                <span class="zx_span">{{ dep.online }}</span>-->
        <!--                <p class="lx">离线</p>-->
        <!--                <span class="lx_span">{{ dep.offline }}</span>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
      </div>
			<!-- 搜索 -->
			<div class="search_contain">
        <!-- 管线管理筛查项 -->
        <div v-if="type=='管线管理'">
          <el-input v-model="searchCode" placeholder="所在道路" clearable class="sj-in" style="width: 180px;">
            <template #append></template>
          </el-input>
          <el-input v-model="searchValue" placeholder="管线编码" clearable class="sj-in" style="width: 180px;">
            <template #append></template>
          </el-input>
        </div>
		<!-- 易涝点管理筛查项 -->
		<div v-if="type=='易涝点管理'" class="sjxq_inp">
			<el-input v-model="searchValue" placeholder="易涝点名称" clearable class="sj-in">
			<template #append></template>
			</el-input>
		</div>
		<!-- 堤防管理筛查项 -->
		<div v-if="type=='堤防管理'">
			<el-input v-model="searchValue" placeholder="堤防名称" clearable class="sj-in">
				<template #append></template>
			</el-input>
		</div>
		<!-- 下穿立交管理筛查项 -->
		<div v-if="type=='下穿立交管理'" class="sjxq_inp">
			<el-input v-model="searchCode"  placeholder="下穿立交编号" clearable class="sj-in">
			<template #append></template>
			</el-input>
			<el-input v-model="searchValue" placeholder="下穿立交名称" clearable class="sj-in">
			<template #append></template>
			</el-input>
		</div>
		<!-- 值班管理筛查项 -->
		<div v-else-if="type=='值班管理'" class="sousuo">
			<el-input v-model="searchValue" placeholder="企业名称" clearable class="sj-in">
				<template #append></template>
			</el-input>
		</div>
		<!-- 泵站管理筛查项 -->
		<div v-if="type=='泵站管理'" class="sjxq_inp">
			<el-input v-model="searchCode"  placeholder="泵站编号" clearable class="sj-in">
			<template #append></template>
			</el-input>
			<el-input v-model="searchValue" placeholder="泵站名称" clearable class="sj-in">
			<template #append></template>
			</el-input>
		</div>
		<!-- 雨量站管理筛查项 -->
		<div v-if="type=='雨量站管理'" class="sjxq_inp">
			<el-input v-model="searchCode"  placeholder="雨量站编号" clearable class="sj-in">
			<template #append></template>
			</el-input>
			<el-input v-model="searchValue" placeholder="雨量站名称" clearable class="sj-in">
			<template #append></template>
			</el-input>
		</div>
		<!-- 污水处理厂管理筛查项 -->
		<div v-if="type=='污水处理厂管理'" class="sjxq_inp">
			<el-input v-model="searchCode"  placeholder="污水厂编号" clearable class="sj-in">
			<template #append></template>
			</el-input>
			<el-input v-model="searchValue" placeholder="污水厂名称" clearable class="sj-in">
			<template #append></template>
			</el-input>
		</div>
		<!-- 调蓄设施管理筛查项 -->
		<div v-if="type=='调蓄设施管理'" class="sjxq_inp">
			<el-input v-model="searchCode"  placeholder="设施编号" clearable class="sj-in">
			<template #append></template>
			</el-input>
			<el-input v-model="searchValue" placeholder="设施名称" clearable class="sj-in">
			<template #append></template>
			</el-input>
		</div>
        <!-- 窨井管理筛查项 -->
        <div v-else-if="type=='窨井管理'">
          <el-input v-model="searchCode" placeholder="井盖材质" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-input v-model="searchValue" placeholder="所在道路" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 维修信息筛查项 -->
        <div v-else-if="type=='维修管理'">
          <el-input v-model="searchValue" placeholder="故障类型" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 企业管理筛查项 -->
        <div v-else-if="type=='企业管理'">
          <el-input v-model="searchValue" placeholder="企业名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 用户管理筛查项 -->
        <div v-else-if="type=='用户管理'">
          <el-input v-model="searchValue" placeholder="用户名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 风险清单管理筛查项 -->
        <div v-else-if="type=='风险清单管理'">
          <el-input v-model="searchValue" placeholder="风险类型" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-select v-model="searchCode" placeholder="请选择风险等级" clearable class="sj-in">
            <el-option label="1级风险" value="1" />
            <el-option label="2级风险" value="2" />
            <el-option label="3级风险" value="3" />
            <el-option label="4级风险" value="4" />
          </el-select>
        </div>
        <!-- 隐患管理筛查项 -->
        <div v-else-if="type=='城市体检'||type=='维护监管'||type=='基础事件'||type=='设备预警'">
          <el-input v-model="searchValue" placeholder="事件名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="上报时间" v-model="searchTime"
                          :clearable="true" style="width: 40%; " class="sj-in"></el-date-picker>
        </div>
        <!-- 催办事件筛查项 -->
        <div v-else-if="type=='催办事件'">
          <el-input v-model="searchValue" placeholder="事件名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="上报时间" v-model="searchTime"
                          :clearable="true" style="width: 40%;" class="sj-in"></el-date-picker>
        </div>
        <!-- 督办事件筛查项 -->
        <div v-else-if="type=='督办事件'">
          <el-input v-model="searchValue" placeholder="事件名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="上报时间" v-model="searchTime"
                          :clearable="true" style="width: 40%;" class="sj-in"></el-date-picker>
        </div>
        <!-- 物资管理筛查项 -->
        <div v-else-if="type=='物资管理'">
          <el-input v-model="searchValue" placeholder="物资名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-select v-model="searchCode" placeholder="请选择物资类型" clearable class="sj-in">
            <el-option v-for="dict in dict.type.material_type" :key="dict.value" :label="dict.label"
                       :value="dict.value" />
          </el-select>
        </div>
        <!-- 巡检巡查任务管理筛查项 -->
        <div v-else-if="type=='巡检巡查任务管理'">
          <el-input v-model="searchValue" placeholder="巡检任务名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 巡检巡查数据管理筛查项 -->
        <div v-else-if="type=='巡检巡查数据管理'">
          <el-input v-model="searchValue" placeholder="巡检任务名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-input v-model="searchCode" placeholder="巡检人名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 预案管理筛查项 -->
        <div v-else-if="type=='预案管理'">
          <el-input v-model="searchValue" placeholder="预案名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 设备管理筛查项 -->
        <div v-else-if="type=='设备管理'" class="dd">
          <el-input v-model="searchValue" placeholder="设备名称" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-input v-model="searchCode" placeholder="设备编码" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 通知通告管理筛查项 -->
        <div v-else-if="type=='通知通告'">
          <el-input v-model="searchValue" placeholder="标题" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-input v-model="searchCode" placeholder="内容" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 人员管理筛查项 -->
        <div v-else-if="type=='人员管理'">
          <el-input v-model="searchValue"  placeholder="账号" clearable class="sj-in">
            <template #append></template>
          </el-input>
          <el-input v-model="searchCode" placeholder="昵称" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 维护报告筛查项 -->
        <div v-else-if="type=='维护报告'">
          <el-input v-model="searchValue" placeholder="标题" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
        <!-- 框选管线信息筛查项 -->
        <div v-else-if="type=='框选管线信息'">
          <el-input v-model="searchValue" placeholder="标题" clearable class="sj-in">
            <template #append></template>
          </el-input>
        </div>
				<div class="btnOption_contain">
          <el-button class="inp_ss" @click="TableInfoSearch">搜索</el-button>
          <el-button class="inp_cz" @click="TableInfoReset">重置</el-button>
					<!--                <el-button @click="exportExcel">导出</el-button>-->
				</div>
			</div>
			<!-- 列表 -->
			<el-table :data="tableList" element-loading-text="数据正在加载中..." ref="tableRef"
				style="width: 100%;height: 65%; overflow:hidden scroll;" class="ps-table-tb">
				<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">
						<span>{{ scope.row[table.prop] }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="abc" align="center" label="操作" width="131">
					<template slot-scope="scope">
            <el-button v-if="hasPositionLabels.includes(type)" size="mini" type="text"
                       style="color:#fff;width: 45px;"
                       @click="flyTo(type,scope.row[lonKey],scope.row[latKey])">定位</el-button>
            <el-button v-if="hasPositionLabels.includes(type)" size="mini" type="text"
                       style="color:#fff;width: 60px;margin-left: 2px !important;">视频联动</el-button>
            <el-button v-else-if="!hasPositionLabels.includes(type)" class="no-margin-l" size="mini" type="text"
                       style="color:#fff;width: 50px; margin-top: 5px;" @click="previewDetail(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="right-c-bg"></div>
		<div class="right-center">
			<div class="header-fr">
				<!-- 头像 -->
				<div>
          			<img src="~@/assets/index_img/home-img.png" style="cursor: pointer;" alt="" @click="goToHomePage"/>
				</div>
			</div>

			<!-- 小标题 -->
			<div class="all-title">
				<span>任务列表</span>
			</div>
			<!-- 任务列表 -->
			<div class="rw-list">
				<div class="rw-list-title">
					<span>任务标题</span>
					<span>创建时间</span>
				</div>
				<div class="fldx-cont">
					<ul class="rw-list-cont">
						<li v-for="(e,idx) in taskList" :key="idx"  @click="openDetail(e,'任务列表')">
							<span :title="e.title">{{ e.title }}</span>
							<div class="jindu">
								<i class="jinxing"></i>
								<em>{{ e.createTime || '' }}</em>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 小标题 -->
			<div class="all-title">
				<span>预警列表</span>
			</div>
			<div class="fldx-cont">
				<dl class="shijian-list">
					<dd v-for="(e,idx) in eventList" :key="idx" @click="openDetail(e,'预警列表',idx)">
						<div class="sjtop">
							<i></i>
							<span>{{ e.createTime || '' }}</span>
							<hr class="borcb" />
							<em class="cuiban">{{ e.eventStatusLabel || '' }}</em>
						</div>
						<div class="sjname">
							<em class="weiBj">{{ e.expediteStatusLabel }}</em>
							<span :title="e.eventTitle">{{ e.eventTitle }}</span>
						</div>
					</dd>
				</dl>
			</div>
			<!-- 小标题 -->
			<div class="all-title">
				<span>隐患列表</span>
			</div>
			<div class="rw-list">
				<div class="fxqh-list-title">
					<span>风险/隐患名称</span>
					<span>状态</span>
				</div>
				<div class="fldx-cont">
					<ul class="fxyh-list">
						<li v-for="(e,idx) in eventList" :key="idx" @click="openDetail(e,'隐患列表')">
							<span :title="e.eventTitle">{{ e.eventTitle }}</span>
							<div class="jindu">
								<i class="yiZg"></i>
								<em>{{ e.expediteStatus }}</em>
							</div>
						</li>
					</ul>
				</div>
			</div>

		</div>
		<!-- 底部 -->
		<div class="bombj">
			<div class="bom-cont">
				<div class="nav choice" @click="viewLeftInsideAndOut1()">
					<a class="nav-in">
						<img src="~@/assets/images/paishui/bom-icon1.png" />
						<span>可视化</span>
					</a>
				</div>
				<div class="nav">
					<a class="nav-in" @click="showData('isDatabaseVisible')">
						<img src="~@/assets/images/paishui/bom-icon3.png" />
						<span>基础数据库</span>
					</a>
					<div class="er-nav" v-show="currentShowList == 'isDatabaseVisible'">
						<img src="~@/assets/images/paishui/er-navbj.png" />
						<div>
							<span @click="getDataBaseList('维修管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />维修管理</span>
							<span @click="getDataBaseList('窨井管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />窨井管理</span>
							<span @click="getDataBaseList('管线管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />管线管理</span>
							<span @click="getDataBaseList('易涝点管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />易涝点管理</span>
							<span @click="getDataBaseList('堤防管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />堤防管理</span>
							<span @click="getDataBaseList('下穿立交管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />下穿立交管理</span>
							<span @click="getDataBaseList('泵站管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />泵站管理</span>
							<span @click="getDataBaseList('雨量站管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />雨量站管理</span>
							<span @click="getDataBaseList('污水处理厂管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />污水处理厂管理</span>
							<span @click="getDataBaseList('调蓄设施管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />调蓄设施管理</span>
							<span @click="getDataBaseList('企业管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />企业管理</span>
							<span @click="getDataBaseList('用户管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />用户管理</span>
						</div>
					</div>
				</div>
				<div class="nav">
					<a class="nav-in" @click="showData('isRiskVisible')">
						<img src="~@/assets/images/paishui/bom-icon2.png" />
						<span>风险清单</span>
					</a>
					<div class="er-nav" v-show="currentShowList == 'isRiskVisible'">
						<img src="~@/assets/images/paishui/er-navbj.png" />
						<div>
							<span @click="getDataBaseList('风险清单管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />风险清单管理</span>
						</div>
					</div>
				</div>
				<div class="nav">
					<a class="nav-in" @click="showData('isMonitoringVisible')">
						<img src="~@/assets/images/paishui/bom-icon4.png" />
						<span>监测系统</span>
					</a>
					<div class="er-nav" v-show="currentShowList == 'isMonitoringVisible'">
						<img src="~@/assets/images/paishui/er-navbj.png" />
						<div>
							<span @click="getDataBaseList('设备管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />设备管理</span>
						</div>
					</div>
				</div>
				<div class="nav">
					<a class="nav-in" @click="showData('isSupervisionVisible')">
						<img src="~@/assets/images/paishui/bom-icon5.png" />
						<span>监管平台</span>
					</a>
					<div class="er-nav" v-show="currentShowList == 'isSupervisionVisible'">
						<img src="~@/assets/images/paishui/er-navbj.png" />
						<div>
              <el-tooltip class="item span_tit" effect="dark"
                          content="Right Center 提示文字" placement="right">
                <div slot="content">
                  <span @click="getDataBaseList('城市体检')">城市体检</span><br>
                  <span @click="getDataBaseList('维护监管')">维护监管</span><br>
                  <span @click="getDataBaseList('基础事件')">基础事件</span><br>
                  <span @click="getDataBaseList('设备预警')">设备预警</span><br>
                  <span @click="getDataBaseList('催办事件')">催办事件</span><br>
                  <span @click="getDataBaseList('督办事件')">督办事件</span>
                </div>
                <span><img src="~@/assets/images/paishui/sj-icon-half.png" />事件管理</span>
              </el-tooltip>
              <el-tooltip class="item span_tit" effect="dark"
                          content="Right Center 提示文字" placement="right">
                <div slot="content">
                  <span @click="getDataBaseList('巡检巡查任务管理')">巡检巡查任务管理</span><br>
                  <span @click="getDataBaseList('巡检巡查数据管理')">巡检巡查数据管理</span>
                </div>
                <span><img src="~@/assets/images/paishui/sj-icon-half.png" />任务管理</span>
              </el-tooltip>
              <el-tooltip class="item span_tit" effect="dark"
                          content="Right Center 提示文字" placement="right">
                <div slot="content">
                  <span @click="getDataBaseList('预案管理')">预案管理</span><br>
                  <span @click="getDataBaseList('物资管理')">物资管理</span>
                </div>
                <span><img src="~@/assets/images/paishui/sj-icon-half.png" />综合管理</span>
              </el-tooltip>
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />城市体检</span>-->
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />维护监管</span>-->
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />基础事件</span>-->
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />设备预警</span>-->
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />催办事件</span>-->
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />督办事件</span>-->
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />巡检巡查任务管理</span>-->
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />巡检巡查数据管理</span>-->
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />预案管理</span>-->
<!--							<span><img src="~@/assets/images/paishui/sj-icon-half.png" />物资管理</span>-->
						</div>
					</div>
				</div>
				<div class="nav">
					<a class="nav-in" @click="showData('isTrManagementVisible')">
						<img src="~@/assets/images/paishui/bom-icon6.png" />
						<span>运管体系</span>
					</a>
					<div class="er-nav" v-show="currentShowList == 'isTrManagementVisible'">
						<img src="~@/assets/images/paishui/er-navbj.png" />
						<div>
							<span @click="getDataBaseList('值班管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />值班管理</span>
							<span @click="getDataBaseList('通知通告')"><img src="~@/assets/images/paishui/sj-icon-half.png" />通知通告</span>
							<span @click="getDataBaseList('人员管理')"><img src="~@/assets/images/paishui/sj-icon-half.png" />人员管理</span>
							<span @click="getDataBaseList('维护报告')"><img src="~@/assets/images/paishui/sj-icon-half.png" />维护报告</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 地图功能栏 -->
		<div class="mapBar"></div>

		<!-- 地图浮层 -->
		<ul class="map-tc-top">
			<li>
				<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="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-tc-bom" @click="layerVisible = !layerVisible;currentLayerType = ''">
			<em><img src="~@/assets/images/paishui/tc(9).png" /></em>
		</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="map-tab-tc" 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>
		</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_paishui_yushui"
          :data="twoDLayers_paishui_yushui"
          show-checkbox
          class="layers_paishui_yushui"
          node-key="id"
          @check="handleCheckChange">
        </el-tree>
        <el-tree
          :props="props"
          ref="twoDLayers_paishui_wushui"
          :data="twoDLayers_paishui_wushui"
          show-checkbox
          class="layers_paishui_wushui"
          node-key="id"
          @check="handleCheckChange">
        </el-tree>
        <el-tree
          :props="props"
          ref="twoDLayers_paishui_heliu"
          :data="twoDLayers_paishui_heliu"
          show-checkbox
          class="layers_paishui_heliu"
          node-key="id"
          @check="handleCheckChange">
        </el-tree>
      </div>
		</div>
		<!-- 三维图层控制 -->
		<div class="layer-Control" v-show="currentLayerType == 'threeLayers'">
      <div style="height: 110px; overflow-y: scroll;">
        <el-tree
          :props="props"
          ref="threeDLayers_paishui_yushui"
          :data="threeDLayers_paishui_yushui"
          show-checkbox
          class="layers_paishui_yushui"
          node-key="id"
          @check="handleCheckChange">
        </el-tree>
        <el-tree
          :props="props"
          ref="threeDLayers_paishui_wushui"
          :data="threeDLayers_paishui_wushui"
          show-checkbox
          class="layers_paishui_wushui"
          node-key="id"
          @check="handleCheckChange">
        </el-tree>
        <el-tree
          :props="props"
          ref="threeDLayers_paishui_heliu"
          :data="threeDLayers_paishui_heliu"
          show-checkbox
          class="layers_paishui_heliu"
          node-key="id"
          @check="handleCheckChange">
        </el-tree>
      </div>
		</div>

		<!-- 详情弹窗 -->
		<DetailDialog ref="detailDialog" />
		<!-- 事件详情弹窗 -->
		<el-dialog title="事件详情" :visible.sync="eventDialogVisible" custom-class="eventDialog"
			style="margin-top: 5vh !important;">
			<div class="transferBg d1">
				<h3>事件基本信息</h3>
				<div class="eventInfo_contain">
					<div style="width: 100%;" class="sj_tit">事件名称：{{ eventInfo['事件名称'] || '' }}</div>
					<div>事件类型：{{ eventInfo['事件类型'] || '' }}</div>
					<div>上报时间：{{ eventInfo['上报时间'] || '' }}</div>
					<div>事件状态：{{ eventInfo['事件状态'] || '' }}</div>
					<div>经度：{{ eventInfo['经度'] || '' }}</div>
					<div>纬度：{{ eventInfo['纬度'] || '' }}</div>
          <div class="videoLinkage"></div>
				</div>
			</div>
			<div class="transferBg d2">
				<h3>事件处理流程</h3>
				<div class="progress_contain">
					<div class="line"></div>
					<div class="e1">
						<img src="@/assets/images/eventLogo2.png">
						<div>事件发起</div>
            <div class="z-lc-time">
							2025/11/05 07:45:11
						</div>
						<el-tooltip class="item" v-if="true" placement="top" popper-class="sj-tooltip">
							<div slot="content" class="info-list">
								<span>处置人：张远</span>
							</div>
							<div class="z-clyj">
								<img src="@/assets/index_img/clyj-icon.png" />
							</div>
						</el-tooltip>
					</div>
					<div class="e2">
						<img src="@/assets/images/eventLogo2.png">
						<div>事件签收</div>
					</div>
					<div class="e3">
						<img src="@/assets/images/eventLogo2.png">
						<div>事件处理</div>
					</div>
					<div class="e4">
						<img src="@/assets/images/eventLogo2.png">
						<div>事件办结</div>
					</div>
				</div>
			</div>
			<div class="d3">
				<div class="transferBg video" v-if="demoIdx != 1">
					<h3>现场图片</h3>
          <image-preview  :src="require('@/assets/images/alarm.png')" :width="580" :height="360" />
				</div>
				<div class="transferBg video" v-else>
					<h3>计划附件</h3>
          <image-preview  src="http://116.142.80.13:8081/group1/M00/00/2E/wKgKC2kNSGGACoyXAACpxjuIY5c521.png" :width="580" :height="360" />
				</div>
				<div class="mid">
					<div class="transferBg info" v-if="demoIdx != 1">
						<h3>现场状况</h3>
						<div class="xczk_div">
							<div>事件当前伤亡：0人</div>
							<div>事件预警影响：10人</div>
							<div>预计解决时间：3天</div>
							<div>当前处理人员：王鹤</div>
							<div>处理人员电话：18130987651</div>
						</div>
					</div>
					<div class="transferBg info_right" :class="demoIdx == 1 ? 'demoDeptStylesheet' : '' ">
						<h3 v-show="demoIdx != 0">联动部门</h3>
						<h4 v-show="demoIdx != 0" style="margin-top: 4%;"></h4>
						<div v-show="demoIdx != 0" class="planItem" style="border-left: none; display: flex; align-items: center;">
							<img src="@/assets/images/online-img2.png"
								style="width: 30px; height:30px; margin:0 5px 0 0 ;">
							<div style="margin-top: 0 !important;">四平市</div>
						</div>

            <h3 v-show="demoIdx == 0">设备数据</h3>
            <div v-show="demoIdx == 0" class="div_Option" ref="divOption"></div>
					</div>
					<div class="transferBg pics">
						<h3>处置照片</h3>
            <div class="otherPics">
              <image-preview :src="require('@/assets/images/alarm_1.png')" :width="200" :height="137" />
            </div>
            <!--    <router-link to="#" v-for="item, index in emergencyEventDetails.attachPath">
                  <el-image :src="item"
                      :preview-src-list="assetTypeAnImage(emergencyEventDetails.attachPath, index)"
                      style="width:8rem; height:8rem;margin: 5px;">
                  </el-image>
                </router-link>
              </div> -->
					</div>
				</div>
				<div class="right transferBg">
					<h3>事件日志</h3>
					<div class="block le_ri">
						<el-scrollbar style="height: 378px;" class="spsb_time">
							<el-timeline>
								<el-timeline-item placement="top">
									<span class="timeline-span">{{ eventInfo['上报时间'] || '' }}</span>
									<el-card>
										<h4>{{ eventInfo['事件描述'] || '' }}</h4>
										<p>{{ eventInfo['上报时间'] || '' }} 提交于 {{ eventInfo['上报时间'] || '' }}</p>
									</el-card>
								</el-timeline-item>
							</el-timeline>
						</el-scrollbar>
						<div class="spsb_xx">
							<textarea class="spsb_text"  placeholder=""> </textarea>
              <div class="btn_option">
                <el-button>签收</el-button>
                <el-button>办结</el-button>
                <el-button>驳回</el-button>
                <el-button>归档</el-button>
              </div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>



</template>


<script>
	import seriesColor from "echarts/src/visual/seriesColor";
  import Cookies from "js-cookie";
  let echarts = require('echarts')
	import DetailDialog from "@/components/DetailDialog/paishui.vue";
	import supermap from '@/components/supermap-2.5d' //超图
	import { getUserProfile } from '@/api/system/user'
	import {
		maintenanceRepairList,                  // 查询养护维修列表
		manholeList,                   			// 查询排水窨井信息列表
		pipeList,                   			// 查询排水管线管理列表
		easyFloodList,                   		// 查询易涝点信息列表
		embankmentList,                   		// 查询堤防信息列表
		overpassList,                   		// 查询下穿立交信息列表
		pumpingStationList,                   	// 查询排水泵站及泵信息列表
		rainGaugeStationList,                   // 查询雨量站信息列表
		sewageTreatmentPlantsList,              // 查询污水处理厂信息列表
		storageFacilitiesList,                  // 查询调蓄设施列表
		enterpriseList,                   		// 查询排水企业数据列表
		selectCompanyList,                   	// 可视化查询用户管理列表
		deviceList,                   			// 设备管理
		inspectionTaskEventList,                // 查询巡检任务事件列表
		selectSewageTreatmentAnalysis,          // 污水处理量分析
		getDeviceTypeCount,             		// 排水-按照类型统计设备数量
		selectDrainagePipeAnalysis,             // 排水管线分析
		selectStateAnalysis,                   	// 易涝点整改状态分析
		getDrainageDOOByDept                   	//统计设备在离线数量
	} from '@/api/paishui'
  import {
    getHeatingList,
    getDrainagePipeBySmId,
    getReportList,
    heatingUserList,
    selectDutyVisualizationList,
    selectEventSuperviseList,
    selectTaskList,
    selectThresholdList,
    systemNoticeList,
    selectRiskRegisterlist,
    selectFocusList,
    selectInspectionPatrolTaskList, selectPatrolInspectionDataList, selectPlanList, selectMaterialsList
  } from '@/api/tableInfo'
	import { iconList, queryVectorTilesMapList } from '@/api/components/supermap'
  import { getWeather } from '@/api/data'
  import { getEventDetail, selectEventList } from '@/api/eventLifeLine'
	export default {
		dicts: [, 'sys_user_sex', 'sys_normal_disable',
			'lifeline_enterprise', 'lifeline_industry', 'resident_type', 'construction_tasks_status',
			'heating_device_type', 'material_type', 'sys_notice_type', 'sys_notice_status', 'heating_pipeline_category'
		],
		components: {
			supermap,
			DetailDialog,
		},
		data() {
			return {
        props: {
          label: 'name',
          children: 'children'
        },
        hasPositionLabels: ['管线管理', '窨井管理','易涝点管理','堤防管理','下穿立交管理','泵站管理','雨量站管理','污水处理厂管理','调蓄设施管理','企业管理','用户管理','设备管理','城市体检', '维护监管', '基础事件', '设备预警', '催办事件', '督办事件'],
        type:"",
        weather:"",
        weatherinformationWeather:"",
        weatherinformationLevelValue:"",
        		measurementVisible:false,
				intervalArr: [], // eCharts 防鬼畜
				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")
					}

				],
				currentShowList:'',
				currentTagName: 'left_btn1', // 左侧轮盘当前样式 默认选中可视化
				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: ''
							},

						]
					},
				],
				taskList: [{
						label: '测试任务2测试任务2测试任务2测试任务2测试任务2测试任务2测试任务2测试任务2',
						time: '2025-01-01 12:00:00',
						progress: '100%',
						status: '已完成',
					},
					{
						label: '测试任务3',
						time: '2025-01-01 12:00:00',
						progress: '100%',
						status: '未处理',
					}, {
						label: '测试任务2',
						time: '2025-01-01 12:00:00',
						progress: '100%',
						status: '处理中',
					},
					{
						label: '测试任务3',
						time: '2025-01-01 12:00:00',
						progress: '100%',
						status: '已完成',
					},
				],
				eventList: [{
						label: '测试事件1测试事件1测试事件1测试事件1测试事件1测试事件1测试事件1测试事件1测试事件1测试事件1测试事件1',
						time: '2025-02-20 08:54',
						status: '未办结',
					},
					{
						label: '测试事件2测试事件2测试事件2测试事件2测试事件2测试事件2测试事件2测试事件2测试事件2测试事件2测试事件2测试事件2测试事件2测试事件2',
						time: '2025-02-20 08:54',
						status: '已办结',
					},
					{
						label: '测试事件3测试事件3测试事件3测试事件3测试事件3测试事件3测试事件3测试事件3测试事件3测试事件3测试事件3测试事件3测试事件3测试事件3',
						time: '2025-02-20 08:54',
						status: '未办结',
					}
				],
				riskList: [{
						label: '风险/隐患名称1风险/隐患名称1风险/隐患名称1风险/隐患名称1风险/隐患名称1',
						time: '2025-02-20 08:54',
						status: '已整改',
					},
					{
						label: '风险/隐患名称2风险/隐患名称2风险/隐患名称2风险/隐患名称2风险/隐患名称2',
						time: '2025-02-20 08:54',
						status: '未整改',
					},
					{
						label: '风险/隐患名称3风险/隐患名称3风险/隐患名称3风险/隐患名称3风险/隐患名称3',
						time: '2025-02-20 08:54',
						status: '整改中',
					},
					{
						label: '风险/隐患名称156风险/隐患名称156风险/隐患名称156风险/隐患名称156风险/隐患名称156',
						time: '2025-02-20 08:54',
						status: '无需整改',
					},
					{
						label: '风险/隐患名称14风险/隐患名称14风险/隐患名称14风险/隐患名称14风险/隐患名称14',
						time: '2025-02-20 08:54',
						status: '已整改',
					},
				],
				gasTimePeriod: 'week', // 当前用气量分析选择时间段 默认为“周”
				inspectionTimePeriod: 'week', // 巡检里程分析选择时间段 默认为“周”
				layerVisible: false,
				viewRightSideStatus: 'out',
				viewLeftSideStatus: 'inside',
				currentResourceTile:'',
				pagerCount: 1,
				pageSize: 10,
				total: 0,
				dataText: '',
				tablePropAndLabel: [],
				tableList: [],
				searchValue: '',
				searchCode: '',
				searchTime: '',
				demoIdx:null,
				eventInfo:{},
				eventDialogVisible:false,
				currentLayerType: '',
				checkedBaseDOptions: [],
				addVectorTilesMapList: [],
				checkedOptions: [],
        twoDLayers_paishui_yushui:[
          {
            id: '1',
            name: '雨水管',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '1-1',
                name: '铁西雨水管',
                url: [null, '/map-PaiShui-2/rest/maps/TX_pai_yushui']
              },
              {
                id: '1-2',
                name: '铁东雨水管',
                url: [null, '/map-PaiShui-2/rest/maps/TD_pai_yushui']
              }
            ]
          },
        ],
        twoDLayers_paishui_wushui:[
          {
            id: '2',
            name: '污水管',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '2-1',
                name: '铁西污水管',
                url: [null, '/map-PaiShui-2/rest/maps/TX_pai_wushui']
              },
              {
                id: '2-2',
                name: '铁东污水管',
                url: [null, '/map-PaiShui-2/rest/maps/TD_pai_wushui']
              }
            ]
          },
        ],
        twoDLayers_paishui_heliu:[
          {
            id: '3',
            name: '合流管',
            url: [null, null],
            class: 'dy',
            children: [
              {
                id: '3-1',
                name: '铁西合流管',
                url: [null, '/map-PaiShui-2/rest/maps/TX_pai_heliu']
              },
              {
                id: '3-2',
                name: '铁东合流管',
                url: [null, '/map-PaiShui-2/rest/maps/TD_pai_heliu']
              },
            ]
          }
        ],
        threeDLayers_paishui_yushui:[
          {
            id: '4',
            name: '雨水管',
            url: [null, null],
            class: 'cgy',
            children: [
              {
                id: '4-1',
                name: '铁西雨水管',
                url: ['/3D-TX_pai_yushui/rest/realspace', null]
              },
              {
                id: '4-2',
                name: '铁东雨水管',
                url: ['/3D-TD_pai_yushui/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_paishui_wushui:[
          {
            id: '5',
            name: '污水管',
            url: [null, null],
            class: 'zy',
            children: [
              {
                id: '5-1',
                name: '铁西污水管',
                url: ['/3D-TX_pai_wushui/rest/realspace', null]
              },
              {
                id: '5-2',
                name: '铁东污水管',
                url: ['/3D-TD_pai_wushui/rest/realspace', null]
              }
            ]
          },
        ],
        threeDLayers_paishui_heliu:[
          {
            id: '6',
            name: '河流',
            url: [null, null],
            class: 'dy',
            children: [
              {
                id: '6-1',
                name: '铁西合流管',
                url: ['/3D-TX_pai_heliu/rest/realspace', null]
              },
              {
                id: '6-2',
                name: '铁东合流管',
                url: ['/3D-TD_pai_heliu/rest/realspace', null]
              },
            ]
          }
        ],
				focusList:[], // 重点关注列表
				dooByDep:[], // 各部门设备统计
				totalCount:0,
				onlineCount:0,
				offlineCount:0,
				openHeatingPipeVisible:false,
				deviceList:[],    // 设备数量
				pipeAnalysisData:[], // 排水管线汇总
			}
		},
		mounted() {
			// 初始化地图数据
			this.getSuperMapUrl();
			this.time();
			this.getWeather();
			this.selectFocusList()
			this.getDeviceTypeCount()
			this.selectDrainagePipeAnalysis()
			setTimeout(() => {
				// this.initGasChart()
				// this.pieChart()
				this.selectTaskList();
				this.selectEventList()
        this.queryVectorTilesMapList()
			},2000)
		},
		methods: {
			selectDrainagePipeAnalysis(){
				selectDrainagePipeAnalysis().then(res => {
					if(res.data){
						this.pipeAnalysisData = res.data
					}
				})
			},
			getDeviceTypeCount(){
				getDeviceTypeCount().then(res => {
					if(res.rows){
						this.deviceList = res.rows
					}
				})
			},
			//关闭单选窨井信息
			cancelHeatingPipeVisible() {
				this.openHeatingPipeVisible = false
				this.heatingPipe = {}
			},
			percentage(totalCount,onlineCount) {
				// 防止除以0的情况
				if (totalCount === 0) return 0;
				// 计算百分比并保留两位小数
				return ((onlineCount / totalCount) * 100).toFixed(2);
			},
			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
					}
				}
				})
			},
			/**
			 * 重点关注列表
			 */
			selectFocusList() {
				selectFocusList({industry:2}).then(res => {
					this.focusList = res.rows
					console.log('this.focusList',this.focusList)
				})
			},
			showData(param){
				if(this.currentShowList == param){
				this.currentShowList = '';
				}else{
				this.currentShowList = param;
				}
			},
			goToHomePage() {
				window.location.href = '/homePage';
			},
      /**
       * 事件列表
       */
      selectEventList(){
        selectEventList({
          industry: '2'
        }).then(res => {
          this.eventList = res.rows
        })
      },
			/**
			 * 任务列表
			 */
			selectTaskList() {
				selectTaskList({industry:2}).then(res => {
					this.taskList = res.rows
			})
			},
			//开挖
			showExcavation() {
				this.$refs.supermap.excavation()
				this.$refs.supermap.closeClipboxByEditor()
			},
			//清除
			clearAll() {
        // 排水-雨水
        if (this.$refs.twoDLayers_paishui_yushui) {
          this.$refs.twoDLayers_paishui_yushui.setCheckedKeys([]);
        }
        // 排水-污水
        if (this.$refs.twoDLayers_paishui_wushui) {
          this.$refs.twoDLayers_paishui_wushui.setCheckedKeys([]);
        }
        // 排水-合流
        if (this.$refs.twoDLayers_paishui_heliu) {
          this.$refs.twoDLayers_paishui_heliu.setCheckedKeys([]);
        }

        // 排水-雨水
        if (this.$refs.threeDLayers_paishui_yushui) {
          this.$refs.threeDLayers_paishui_yushui.setCheckedKeys([]);
        }
        // 排水-污水
        if (this.$refs.threeDLayers_paishui_wushui) {
          this.$refs.threeDLayers_paishui_wushui.setCheckedKeys([]);
        }
        // 排水-合流
        if (this.$refs.threeDLayers_paishui_heliu) {
          this.$refs.threeDLayers_paishui_heliu.setCheckedKeys([]);
        }
				this.$refs.supermap.closeMeasuringAll()
				this.$refs.supermap.closeExcavationAll()
				this.$refs.supermap.closeClipboxByEditor()
				this.$refs.supermap.removeBoxSelection()
				this.checkedBaseDOptions = []
				this.checkedOptions = []
				this.$refs.supermap.addLifelineOpen([])
				this.measurementVisible = false
			},
			//测距
			choseMeasuringDistance() {
				this.$refs.supermap.choseMeasuringDistance()
			},
			//测面
			choseMeasuringArea() {
				this.$refs.supermap.choseMeasuringArea()
			},
			//测高
			choseMeasuringHeight() {
				this.$refs.supermap.choseMeasuringHeight()
			},
			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);
			},
			previewDetail(e,type = this.currentResourceTile){
				switch (type) {
					case '维修管理':
						let obj = {
              '维修地址': e.repairAddress,
              '维修性质': e.repairNature,
              '维修故障类型': e.faultType,
              '经度': e.longitude,
              '纬度': e.latitude,
              '维修时间': e.repairTime,
              '创建时间': e.createTime,
              '更新时间': e.updateTime,
              '备注': e.remark,
              '部门名称': e.deptName
            }
						this.$refs.detailDialog.openDetail(type,obj);
						break;
					case '窨井管理':
						let obj1 = {
							'附属设施编码': e.facilityCode,
							'物探点号': e.explorationPointNo,
							'地市编码': e.cityCode,
							'窨井经度': e.longitude,
							'窨井纬度': e.latitude,
							'区划名称': e.districtName,
							'高程': e.elevation,
							'埋深': e.neckDepth,
							'特征点': e.characteristicPoint,
							'附属物': e.appurtenance,
							'所在道路': e.roadName,
							'点符号旋转角': e.symbolRotationAngle,
							'井底埋深': e.bottomDepth,
							'井盖形状': e.coverShape,
							'井盖材质': e.manholeMaterial,
							'井盖尺寸': e.coverSize,
							'检修井材质': e.manholeMaterial,
							'井脖深': e.neckDepth,
							'井室规格': e.chamberSpecification,
							'窨井性质': e.manholeNature,
							'安装日期': e.installationDate,
							'安装单位名称': e.installerName,
							'安装单位社会信用代码': e.installerCreditCode,
							'权属单位名称': e.ownerName,
							'权属单位信用代码': e.ownerCreditCode,
							'使用单位名称': e.userName,
							'使用单位信用代码': e.userCreditCode,
							'维修责任单位名称': e.maintenanceUnitName,
							'维修责任单位信用代码': e.maintenanceUnitCreditCode,
							'部门名称': e.deptName,
						}
						this.$refs.detailDialog.openDetail(type,obj1);
						break;
					case '管线管理':
						let obj2 = {
              '管线编码': e.pipelineCode,
              '管线类别': e.pipelineCategory,
              '地市编码': e.cityCode,
              '区划名称': e.districtName,
              '起点编号': e.startPointId,
              '终点编号': e.endPointId,
              '起点高程': e.startPointElevation,
              '终点高程': e.endPointElevation,
              '起点埋深': e.startPointBurialDepth,
              '终点埋深': e.endPointBurialDepth,
              '管径': e.pipeDiameter,
              '材质': e.material,
              '压力级别': e.pressureLevel,
              '压力': e.pressure,
              '流向': e.flowDirection,
              '压力类型': e.pressureType,
              '埋深日期': e.burialTime,
              '埋设类型': e.burialType,
              '断面形式': e.crossSectionalForm,
              '管道年限': e.pipelineAge,
              '线型': e.pipelineType,
              '所在道路': e.roadName,
              '权属单位名称': e.ownershipUnitName,
              '权属单位统一信用代码': e.ownershipUnitCreditCode,
              '建设年代': e.constructionYear,
              '部门名称': e.deptName,
              '长度': e.length,
              '经度': e.longitude,
              '纬度': e.latitude,
            }
						this.$refs.detailDialog.openDetail(type,obj2);
						break;
					case '易涝点管理':
						let obj3 = {
              '易涝点编号': e.floodCode,
              '易涝点名称': e.floodName,
              '积水深度': e.waterDepth,
              '地市编码': e.cityCode,
              '区划名称': e.districtName,
              '经度': e.longitude,
              '纬度': e.latitude,
              '地址': e.address,
              '所在道路': e.roadName,
              '最长积水时间': e.maxWaterTime,
              '最大积水面积': e.maxWaterArea,
              '积水原因': e.floodReason,
              '负责人': e.responsiblePerson,
              '负责人联系方式': e.contactNumber,
              '易涝点产生时间': e.floodOccurTime,
              '整改状态': e.rectifyStatus,
              '整改时间': e.rectifyTime,
              '整改措施': e.rectifyMeasures,
              '创建时间': e.createTime,
              '更新时间': e.updateTime,
              '备注': e.remark,
              '部门名称': e.deptName
            }
						this.$refs.detailDialog.openDetail(type,obj3);
						break;
					case '堤防管理':
						let obj4 = {
              '堤防编号': e.embankmentCode,
              '名称': e.name,
              '地市编码': e.cityCode,
              '区划名称': e.regionalName,
              '类型': e.type,
              '等级': e.level,
              '类型描述': e.typeDescription,
              '起点位置': e.startPosition,
              '终点位置': e.endPosition,
              '位置信息': e.positionInfo,
              '经度': e.longitude,
              '纬度': e.latitude,
              '创建时间': e.createTime,
              '更新时间': e.updateTime,
              '部门名称': e.deptName
          }
						this.$refs.detailDialog.openDetail(type,obj4);
            break;
					case '下穿立交管理':
						let obj5 = {
              '下穿立交编号': e.overpassCode,
              '下穿立交名称': e.overpassName,
              '地市编码': e.cityCode,
              '区划名称': e.districtName,
              '经度': e.longitude,
              '纬度': e.latitude,
              '地址': e.address,
              '集水面积': e.catchmentArea,
              '创建时间': e.createTime,
              '更新时间': e.updateTime,
              '备注': e.remark,
              '部门名称': e.deptName
            }
						this.$refs.detailDialog.openDetail(type,obj5);
						break;
					case '泵站管理':
						let obj6 = {
              '泵站编号': e.pumpingStationCode,
              '泵站名称': e.pumpingStationName,
              '地市编码': e.cityCode,
              '区划名称': e.districtName,
              '泵站类型': e.pumpingStationType,
              '经度': e.longitude,
              '纬度': e.latitude,
              '地址': e.address,
              '拥有泵数量': e.pumpCount,
              '设计雨水排水能力': e.designedRainwaterDrainageCapacity,
              '设计污水排水能力': e.designedSewageDrainageCapacity,
              '服务范围': e.serviceRange,
              '服务面积': e.serviceArea,
              '责任人': e.responsiblePerson,
              '责任人联系方式': e.contactNumber,
              '泵编号': e.pumpCode,
              '泵抽水功率': e.pumpPower,
              '设备类型': e.equipmentType,
              '生产厂家': e.manufacturer,
              '出厂日期': e.productionDate,
              '安装日期': e.installationDate,
              '创建时间': e.createTime,
              '更新时间': e.updateTime,
              '备注': e.remark,
              '部门名称': e.deptName
            }
						this.$refs.detailDialog.openDetail(type,obj6);
						break;
					case '雨量站管理':
						let obj7 = {
              '站点编号': e.stationCode,
              '站点名称': e.stationName,
              '站点类型': e.stationType,
              '地市编码': e.cityCode,
              '区划名称': e.districtName,
              '地址': e.address,
              '经度': e.longitude,
              '纬度': e.latitude,
              '报警水位': e.alarmWaterLevel,
              '设施状态': e.facilityStatus,
              '数据创建时间': e.createTime,
              '数据更新时间': e.updateTime,
              '部门名称': e.deptName
            }
						this.$refs.detailDialog.openDetail(type,obj7);
						break;
					case '污水处理厂管理':
						let obj8 = {
              '污水厂编号': e.plantCode,
              '污水厂名称': e.plantName,
              '地址': e.address,
              '地市编码': e.cityCode,
              '区划名称': e.regionalName,
              '处理规模': e.treatmentCapacity,
              '经度': e.longitude,
              '纬度': e.latitude,
              '所在道路': e.roadName,
              '建设单位名称': e.constructionUnit,
              '建设单位统一社会信用代码': e.cuc,
              '建设时间': e.constructionTime,
              '运营单位名称': e.operationUnit,
              '运营单位统一社会信用代码': e.ouc,
              '管理单位名称': e.managementUnit,
              '管理单位统一社会信用代码': e.muc,
              '占地面积': e.landArea,
              '污水处理设施': e.treatmentFacilities,
              '设施类型': e.facilityType,
              '排水去向': e.drainageDestination,
              '处理工艺': e.treatmentProcess,
              '污泥去向': e.sludgeDestination,
              '数据创建时间': e.createTime,
              '数据更新时间': e.updateTime,
              '部门名称': e.deptName
            }
						this.$refs.detailDialog.openDetail(type,obj8);
						break;
					case '调蓄设施管理':
						let obj9 = {
              '设施编号': e.facilityCode,
              '设施名称': e.facilityName,
              '设施类型': e.facilityType,
              '地理编码': e.geoCode,
              '区划名称': e.regionalName,
              '设计容量': e.designCapacity,
              '设计流量': e.designFlow,
              '占地面积': e.landArea,
              '材质': e.material,
              '进水口数量': e.inletCount,
              '出水口数量': e.outletCount,
              '当前水位': e.currentWaterLevel,
              '当前蓄水量': e.currentStorage,
              '进水流量': e.inflowRate,
              '出水流量': e.outflowRate,
              '污泥去向': e.sludgeDestination,
              '经度': e.longitude,
              '纬度': e.latitude,
              '创建时间': e.createTime,
              '更新时间': e.updateTime,
              '部门名称': e.deptName
            }
						this.$refs.detailDialog.openDetail(type,obj9);
						break;
					case '企业管理':
						let obj10 = {
              '排水企业名称': e.enterpriseName,
              '排水企业位置': e.location,
              '经度': e.longitude,
              '纬度': e.latitude,
              '所在地址': e.address,
              '创建者': e.createBy,
              '创建时间': e.createTime,
              '更新者': e.updateBy,
              '更新时间': e.updateTime,
              '备注': e.remark,
              '部门名称': e.deptName
            }
						this.$refs.detailDialog.openDetail(type,obj10);
						break;
					case '用户管理':
						let obj11 = {
              '用户名称': e.name,
              '用户类型': e.customerType,
              '小区名称': e.communityName,
              '排水小区及门牌号': e.communityNumber,
              '楼栋名称': e.buildingName,
              '经度': e.longitude,
              '纬度': e.latitude,
              '用户号': e.userNum,
              '联系方式': e.phone,
              '地址': e.address,
              '气体种类': e.gasType,
              '住户类型': e.houseType,
              '排水公司': e.drainageCompany,
              '最新检查时间': e.lastCheckTime,
              '最新检查报告': e.lastCheckReport,
              '创建人名称': e.createName,
              '创建时间': e.createTime,
              '更新人名称': e.updateName,
              '更新时间': e.updateTime,
              '部门名称': e.deptName
            }
						this.$refs.detailDialog.openDetail(type,obj11);
						break;
					case '风险清单管理':
						let obj13 = {
							"风险类型": e.hiddenDangerType,
							"风险等级": e.hiddenDangerLevel,
							"说明": e.remark,
							"图片": e.hiddenDangerUrl,
						}
						this.$refs.detailDialog.openDetail(type,obj13);
						break;
					case '设备管理':
						let obj14 = {
							"设备名称": e.deviceName,
							"设备编码": e.deviceCode,
							"设备型号": this.dict.type.heating_device_type.find(item => item.value == e.deviceType)?.label,
							"设备检测指标": e.deviceDetectionIndex,
							"设备厂家": e.deviceManufacturer,
							"建设时间": e.deviceConstructionDate,
							"经度": e.longitude,
							"纬度": e.latitude,
							"备注": e.remark,
						}
						this.$refs.detailDialog.openDetail(type,obj14);
						break;
					// 运营体系
					case '值班管理':
						let obj15 = {
							"企业名称": e.companyName,
							"所属行业": this.dict.type.lifeline_industry.find(item => item.value == e.industry)?.label,
							"值班负责人": e.dutyLeaderName,
							"负责人电话": e.leaderPhone,
							"值班人员": e.dutyMembersStr,
							"值班时间": e.dutyDate,
							// "创建时间": row.createTime,
							// "备注": row.remark,
						}
						this.$refs.detailDialog.openDetail(type,obj15);
						break;
					case '通知通告':
						let obj16 = {
							"公告标题": 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.remark,
						}
						this.$refs.detailDialog.openDetail(type,obj16);
						break;
					case '人员管理':
						let obj17 = {
							"用户账号": e.userName,
							"用户昵称": e.nickName,
							"用户邮箱": e.email,
							"手机号码": e.phonenumber,
							"用户性别": this.dict.type.sys_user_sex.find(item => item.value == e.sex)?.label,
							"帐号状态": 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,obj17);
						break;
					case '维护报告':
						let obj18 = {
							"标题": 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,obj18);
						break;
					// 监管平台
					case "城市体检" || "维护监管" || "基础事件"|| "设备预警"|| "催办事件"|| "督办事件":
            this.openEventDetail(e);
						break;
          case '巡检巡查任务管理':
            let obj20 = {
              "巡检任务名称": e.taskName,
              "巡检开始时间": e.startTime,
              "巡检结束时间": e.endTime,
              "巡检周期": e.inspectionCycle,
              "巡检任务状态": e.statusName,
              "创建人名称": e.createName,
              "创建时间": e.createTime,
              "备注": e.notes,
              "部门名称": e.deptName,
            };
            this.$refs.detailDialog.openDetail(type,obj20);
            break;
          case '巡检巡查数据管理':
            let obj21 = {
              "任务名称": e.taskName,
              "开始时间": e.startTime,
              "结束时间": e.endTime,
              "巡检人名称": e.userName,
              "巡查状态": e.status,
              "巡查状态名称": e.statusName,
            };
            this.$refs.detailDialog.openDetail(type,obj21);
            break;
          case '预案管理':
            let obj22 = {
              "预案名称": e.contingencyPlanName,
              "创建时间": e.createTime,
              "预案内容": e.contingencyPlanContent,
            };
            this.$refs.detailDialog.openDetail(type,obj22);
            break;
          case '物资管理':
            let obj23 = {
              "物资名称": e.name,
              "物资存放地址": e.address,
              "物资类型": this.dict.type.material_type.find(item => item.value == e.type)?.label,
              "所属行业": this.dict.type.lifeline_industry.find(item => item.value == e.industry)?.label,
              "联系人姓名": e.contactPerson,
              "联系电话": e.phone,
              "经度坐标": e.longitude,
              "纬度坐标": e.latitude,
              "物资详细描述": e.description,
            };
            this.$refs.detailDialog.openDetail(type,obj23);
            break;
					default:
						break;
				}
				console.log(this.currentResourceTile,e)
				// this.$refs.detailDialog.openDetail(type,obj);
			},
			openDetail(e,tile,demoIdx){
				if(tile == '重点关注'){
					let obj = {
					"标题":e.followName,
					"附件":e.followUrl,
					"创建时间":e.createTime,
					"详情":e.followRemark,
					}
					this.$refs.detailDialog.openDetail(tile,obj);
				} else if(tile == '隐患列表') {
					let obj = {
					"隐患标题": e.title,
					"管线名称": e.pipeName,
					"经度": e.longitude,
					"纬度": e.latitude,
					"上报时间": e.reportTime,
					"上报人": e.userName,
					"上报地点": e.address,
					"立查立改": e.rectifiedName,
					"状态": e.statusLabel,
					"描述": e.description,
					"整改信息": e.rectificationData,
					"整改前图片": 'http://116.142.80.13:8081/group1/M00/00/2D/wKgKC2kAcBeAUz2IAAb_TSnIT-c466.png',
					"整改后图片": e.rectificationUrl
					}
					this.$refs.detailDialog.openDetail(tile,obj);
				} else if(tile == '任务列表') {
					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(tile,obj);
				} else if(tile == '预警列表') {
          this.openEventDetail(e);
					if(this.demoIdx == 0){
					setTimeout(() => {
						this.initDemoChart()
					})
					}
				} else if (tile == "值班管理") {
					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 (tile == "通知通告") {
					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(tile,obj);
					return;
				} else if (tile == "人员管理") {
					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(tile,obj);
					return;
				} else if (tile == "维护报告") {
					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(tile,obj);
					return;
				}
			},
			//列表操作
			handleClick(row) {
				console.log(row);
			},
      //列表查询
      TableInfoSearch() {
        this.getInfoList(this.type, this.deptId, 1)
      },
      //重置
      TableInfoReset() {
        this.searchValue = ''
        this.searchCode = ''
        this.searchTime = ''
        this.getInfoList(this.type, this.deptId, 1)
      },
			tableListSizeChange(pageSize) {
				this.getInfoList(this.currentResourceTile, this.deptId, pageSize)
			},
      flyTo(currentType, longitude, latitude) {
        this.$refs.supermap.dropLocation(latitude * 1, longitude * 1);
        if (currentType == '管线管理') {
          let ListMarkersList = []
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: "kaiwa",
            bindPopupHtml: "",
            keepBindPopup: false,
            isAggregation: false,
          };
          markersMap.lng = longitude * 1;
          markersMap.lat = latitude * 1;
          ListMarkersList.push(markersMap);
          this.$refs.supermap.clearM();
          this.$refs.supermap.setMarkers(ListMarkersList);
        }
      },
			getDataBaseList(text){
        this.currentResourceTile = text
				// 更新当前资源标题
				if(this.currentResourceTile != text){
					//TODO: 更换
					this.viewLeftInsideAndOut1()
				}
				this.getInfoList(this.currentResourceTile)
				this.searchValue = ''
				this.searchCode = ''
				this.searchTime = ''
				setTimeout(() => {
					this.viewLeftInsideAndOut()
				},500)
			},
			getInfoList(type, deptId, pageNum){
        this.type=type
        debugger
				switch (type) {
					case '维修管理':
						maintenanceRepairList({
							pageNum: pageNum || 1,
							pageSize: 10,

              ...(this.searchValue ? {
                faultType: this.searchValue
              } : {})
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `repairAddress`, label: '维修地址'},
                {prop: `repairNature`, label: '维修性质'},
                {prop: `faultType`, label: '维修故障类型'},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `repairTime`, label: '维修时间',hidden: true},
                {prop: `createTime`, label: '创建时间',hidden: true},
                {prop: `updateTime`, label: '更新时间',hidden: true},
                {prop: `remark`, label: '备注',hidden: true},
                {prop: `deptName`, label: '部门名称'}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '窨井管理':
						manholeList({
							pageNum: pageNum || 1,
							pageSize: 10,
              ...(this.searchCode ? {
                coverMaterial: this.searchCode
              } : {}),
              ...(this.searchValue ? {
                roadName: this.searchValue
              } : {})
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `manholeCode`, label: '窨井编码'},
                {prop: `longitude`, label: '窨井经度',hidden: true},
                {prop: `latitude`, label: '窨井纬度',hidden: true},
                {prop: `explorationPointNo`, label: '物探点号',hidden: true},
                {prop: `cityCode`, label: '地市编码',hidden: true},
                {prop: `districtName`, label: '区划名称',hidden: true},
                {prop: `elevation`, label: '高程',hidden: true},
                {prop: `burialDepth`, label: '埋深',hidden: true},
                {prop: `characteristicPoint`, label: '特征点',hidden: true},
                {prop: `appurtenance`, label: '附属物',hidden: true},
                {prop: `roadName`, label: '所在道路'},
                {prop: `symbolRotationAngle`, label: '旋转角度',hidden: true},
                {prop: `bottomDepth`, label: '井底埋深',hidden: true},
                {prop: `coverShape`, label: '井盖形状',hidden: true},
                {prop: `coverMaterial`, label: '井盖材质'},
                {prop: `coverSize`, label: '井盖尺寸',hidden: true},
                {prop: `manholeMaterial`, label: '检修井材质',hidden: true},
                {prop: `neckDepth`, label: '井脖深',hidden: true},
                {prop: `chamberSpecification`, label: '井室规格',hidden: true},
                {prop: `installationDate`, label: '安装日期',hidden: true},
                {prop: `installerName`, label: '安装单位名称',hidden: true},
                {prop: `installerCreditCode`, label: '安装单位统一社会信用代码',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
              ]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '管线管理':
						pipeList({
							pageNum: pageNum || 1,
							pageSize: 10,
							...(this.searchCode ? {
								roadName: this.searchCode
							} : {}),
							...(this.searchValue ? {
								pipelineCode: this.searchValue
							} : {})
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键Id',hidden: true},
                {prop: `pipelineCode`, label: '管线编码'},
                {prop: `pipelineCategory`, label: '管线类别'},
                {prop: `cityCode`, label: '地市编码',hidden: true},
                {prop: `districtName`, label: '区划名称',hidden: true},
                {prop: `startPointId`, label: '起点编号',hidden: true},
                {prop: `endPointId`, label: '终点编号',hidden: true},
                {prop: `startPointElevation`, label: '起点高程',hidden: true},
                {prop: `endPointElevation`, label: '终点高程',hidden: true},
                {prop: `startPointBurialDepth`, label: '起点埋深',hidden: true},
                {prop: `endPointBurialDepth`, label: '终点埋深',hidden: true},
                {prop: `pipeDiameter`, label: '管径',hidden: true},
                {prop: `material`, label: '材质',hidden: true},
                {prop: `pressureLevel`, label: '压力级别',hidden: true},
                {prop: `pressure`, label: '压力',hidden: true},
                {prop: `flowDirection`, label: '流向',hidden: true},
                {prop: `pressureType`, label: '压力类型',hidden: true},
                {prop: `burialTime`, label: '埋深日期',hidden: true},
                {prop: `burialType`, label: '埋设类型',hidden: true},
                {prop: `crossSectionalForm`, label: '断面形式',hidden: true},
                {prop: `pipelineAge`, label: '管道年限',hidden: true},
                {prop: `pipelineType`, label: '线型',hidden: true},
                {prop: `roadName`, label: '所在道路'},
                {prop: `ownershipUnitName`, label: '权属单位名称',hidden: true},
                {prop: `ownershipUnitCreditCode`, label: '权属单位统一信用代码',hidden: true},
                {prop: `constructionYear`, label: '建设年代',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true},
                {prop: `length`, label: '长度',hidden: true},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '易涝点管理':
						easyFloodList({
							pageNum: pageNum || 1,
							pageSize: 10,
              ...(this.searchValue ? {
                floodName: this.searchValue
              } : {}),
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `floodCode`, label: '易涝点编号',hidden: true},
                {prop: `floodName`, label: '易涝点名称'},
                {prop: `waterDepth`, label: '积水深度',hidden: true},
                {prop: `cityCode`, label: '地市编码',hidden: true},
                {prop: `districtName`, label: '区划名称'},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `address`, label: '地址',hidden: true},
                {prop: `roadName`, label: '所在道路'},
                {prop: `maxWaterTime`, label: '最长积水时间',hidden: true},
                {prop: `maxWaterArea`, label: '最大积水面积',hidden: true},
                {prop: `floodReason`, label: '积水原因',hidden: true},
                {prop: `responsiblePerson`, label: '负责人',hidden: true},
                {prop: `contactNumber`, label: '负责人联系方式',hidden: true},
                {prop: `floodOccurTime`, label: '易涝点产生时间',hidden: true},
                {prop: `rectifyStatus`, label: '整改状态',hidden: true},
                {prop: `rectifyTime`, label: '整改时间',hidden: true},
                {prop: `rectifyMeasures`, label: '整改措施',hidden: true},
                {prop: `createTime`, label: '创建时间',hidden: true},
                {prop: `updateTime`, label: '更新时间',hidden: true},
                {prop: `remark`, label: '备注',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '堤防管理':
						embankmentList({
							pageNum: pageNum || 1,
							pageSize: 10,

							...(this.searchValue ? {
								name: this.searchValue
							} : {}),
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `embankmentCode`, label: '堤防编号'},
                {prop: `name`, label: '名称'},
                {prop: `cityCode`, label: '地市编码',hidden: true},
                {prop: `regionalName`, label: '区划名称'},
                {prop: `type`, label: '类型',hidden: true},
                {prop: `level`, label: '等级',hidden: true},
                {prop: `typeDescription`, label: '类型描述',hidden: true},
                {prop: `startPosition`, label: '起点位置',hidden: true},
                {prop: `endPosition`, label: '终点位置',hidden: true},
                {prop: `positionInfo`, label: '位置信息',hidden: true},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `createTime`, label: '创建时间',hidden: true},
                {prop: `updateTime`, label: '更新时间',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '下穿立交管理':
						overpassList({
							pageNum: pageNum || 1,
							pageSize: 10,
							...(this.searchCode ? {
								overpassCode: this.searchCode
							} : {}),
							...(this.searchValue ? {
								overpassName: this.searchValue
							} : {}),
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `overpassCode`, label: '下穿立交编号'},
                {prop: `overpassName`, label: '下穿立交名称'},
                {prop: `cityCode`, label: '地市编码',hidden: true},
                {prop: `districtName`, label: '区划名称'},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `address`, label: '地址',hidden: true},
                {prop: `catchmentArea`, label: '集水面积',hidden: true},
                {prop: `createBy`, label: '创建者',hidden: true},
                {prop: `createTime`, label: '创建时间',hidden: true},
                {prop: `updateBy`, label: '更新者',hidden: true},
                {prop: `updateTime`, label: '更新时间',hidden: true},
                {prop: `remark`, label: '备注',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '泵站管理':
						pumpingStationList({
							pageNum: pageNum || 1,
							pageSize: 10,
							...(this.searchCode ? {
								pumpingStationCode: this.searchCode
							} : {}),
							...(this.searchValue ? {
								pumpingStationName: this.searchValue
							} : {}),
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `pumpingStationCode`, label: '泵站编号'},
                {prop: `pumpingStationName`, label: '泵站名称'},
                {prop: `cityCode`, label: '地市编码',hidden: true},
                {prop: `districtName`, label: '区划名称'},
                {prop: `pumpingStationType`, label: '泵站类型',hidden: true},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `address`, label: '地址',hidden: true},
                {prop: `pumpCount`, label: '拥有泵数量',hidden: true},
                {prop: `designedRainwaterDrainageCapacity`, label: '设计雨水排水能力',hidden: true},
                {prop: `designedSewageDrainageCapacity`, label: '设计污水排水能力',hidden: true},
                {prop: `serviceRange`, label: '服务范围',hidden: true},
                {prop: `serviceArea`, label: '服务面积',hidden: true},
                {prop: `responsiblePerson`, label: '责任人',hidden: true},
                {prop: `contactNumber`, label: '责任人联系方式',hidden: true},
                {prop: `pumpCode`, label: '泵编号',hidden: true},
                {prop: `pumpPower`, label: '泵抽水功率',hidden: true},
                {prop: `equipmentType`, label: '设备类型',hidden: true},
                {prop: `manufacturer`, label: '生产厂家',hidden: true},
                {prop: `productionDate`, label: '出厂日期',hidden: true},
                {prop: `installationDate`, label: '安装日期',hidden: true},
                {prop: `createTime`, label: '创建时间',hidden: true},
                {prop: `updateTime`, label: '更新时间',hidden: true},
                {prop: `remark`, label: '备注',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '雨量站管理':
						rainGaugeStationList({
							pageNum: pageNum || 1,
							pageSize: 10,

							...(this.searchCode ? {
								stationCode: this.searchCode
							} : {}),
							...(this.searchValue ? {
								stationName: this.searchValue
							} : {})
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `stationCode`, label: '站点编号'},
                {prop: `stationName`, label: '站点名称'},
                {prop: `stationType`, label: '站点类型',hidden: true},
                {prop: `cityCode`, label: '地市编码',hidden: true},
                {prop: `districtName`, label: '区划名称'},
                {prop: `address`, label: '地址',hidden: true},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `alarmWaterLevel`, label: '报警水位',hidden: true},
                {prop: `facilityStatus`, label: '设施状态',hidden: true},
                {prop: `createTime`, label: '数据创建时间',hidden: true},
                {prop: `updateTime`, label: '数据更新时间',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '污水处理厂管理':
						sewageTreatmentPlantsList({
							pageNum: pageNum || 1,
							pageSize: 10,
							...(this.searchCode ? {
								plantCode: this.searchCode
							} : {}),
							...(this.searchValue ? {
								plantName: this.searchValue
							} : {})
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `plantCode`, label: '污水厂编号'},
                {prop: `plantName`, label: '污水厂名称'},
                {prop: `address`, label: '地址',hidden: true},
                {prop: `cityCode`, label: '地市编码',hidden: true},
                {prop: `regionalName`, label: '区划名称'},
                {prop: `treatmentCapacity`, label: '处理规模',hidden: true},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `roadName`, label: '所在道路'},
                {prop: `constructionUnit`, label: '建设单位名称',hidden: true},
                {prop: `cuc`, label: '建设单位统一社会信用代码',hidden: true},
                {prop: `constructionTime`, label: '建设时间',hidden: true},
                {prop: `operationUnit`, label: '运营单位名称',hidden: true},
                {prop: `ouc`, label: '运营单位统一社会信用代码',hidden: true},
                {prop: `managementUnit`, label: '管理单位名称',hidden: true},
                {prop: `muc`, label: '管理单位统一社会信用代码',hidden: true},
                {prop: `landArea`, label: '占地面积',hidden: true},
                {prop: `treatmentFacilities`, label: '污水处理设施',hidden: true},
                {prop: `facilityType`, label: '设施类型',hidden: true},
                {prop: `drainageDestination`, label: '排水去向',hidden: true},
                {prop: `treatmentProcess`, label: '处理工艺',hidden: true},
                {prop: `sludgeDestination`, label: '污泥去向',hidden: true},
                {prop: `createTime`, label: '数据创建时间',hidden: true},
                {prop: `updateTime`, label: '数据更新时间',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '调蓄设施管理':
						storageFacilitiesList({
							pageNum: pageNum || 1,
							pageSize: 10,

							...(this.searchCode ? {
								facilityCode: this.searchCode
							} : {}),
							...(this.searchValue ? {
								facilityName: this.searchValue
							} : {})
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `facilityCode`, label: '设施编号'},
                {prop: `facilityName`, label: '设施名称'},
                {prop: `facilityType`, label: '设施类型',hidden: true},
                {prop: `geoCode`, label: '地理编码',hidden: true},
                {prop: `regionalName`, label: '区划名称'},
                {prop: `designCapacity`, label: '设计容量',hidden: true},
                {prop: `designFlow`, label: '设计流量',hidden: true},
                {prop: `landArea`, label: '占地面积',hidden: true},
                {prop: `material`, label: '材质',hidden: true},
                {prop: `inletCount`, label: '进水口数量',hidden: true},
                {prop: `outletCount`, label: '出水口数量',hidden: true},
                {prop: `currentWaterLevel`, label: '当前水位',hidden: true},
                {prop: `currentStorage`, label: '当前蓄水量',hidden: true},
                {prop: `inflowRate`, label: '进水流量',hidden: true},
                {prop: `outflowRate`, label: '出水流量',hidden: true},
                {prop: `sludgeDestination`, label: '污泥去向',hidden: true},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `createTime`, label: '创建时间',hidden: true},
                {prop: `updateTime`, label: '更新时间',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '企业管理':
						enterpriseList({
							pageNum: pageNum || 1,
							pageSize: 10,

							...(this.searchValue ? {
								enterpriseName: this.searchValue
							} : {}),
						}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键ID',hidden: true},
                {prop: `enterpriseName`, label: '排水企业名称'},
                {prop: `location`, label: '排水企业位置'},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `address`, label: '所在地址',hidden: true},
                {prop: `createBy`, label: '创建者',hidden: true},
                {prop: `createTime`, label: '创建时间',hidden: true},
                {prop: `updateBy`, label: '更新者',hidden: true},
                {prop: `updateTime`, label: '更新时间',hidden: true},
                {prop: `remark`, label: '备注',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '用户管理':
						selectCompanyList({
							pageNum: pageNum || 1,
							pageSize: 10,
							...(this.searchCode ? {
                communityName: this.searchCode
							} : {}),
							...(this.searchValue ? {
								name: this.searchValue
							} : {})
							}).then(res => {
							this.tablePropAndLabel = [
                {prop: `id`, label: '主键',hidden: true},
                {prop: `name`, label: '用户名称'},
                {prop: `customerType`, label: '用户类型',hidden: true},
                {prop: `communityName`, label: '小区名称'},
                {prop: `communityNumber`, label: '排水小区及门牌号',hidden: true},
                {prop: `buildingName`, label: '楼栋名称'},
                {prop: `longitude`, label: '经度',hidden: true},
                {prop: `latitude`, label: '纬度',hidden: true},
                {prop: `userNum`, label: '用户号'},
                {prop: `idCard`, label: '身份证号',hidden: true},
                {prop: `phone`, label: '联系方式',hidden: true},
                {prop: `address`, label: '地址',hidden: true},
                {prop: `gasType`, label: '气体种类',hidden: true},
                {prop: `houseType`, label: '住户类型',hidden: true},
                {prop: `drainageCompany`, label: '排水公司',hidden: true},
                {prop: `lastCheckTime`, label: '最新检查时间',hidden: true},
                {prop: `lastCheckReport`, label: '最新检查报告',hidden: true},
                {prop: `createTime`, label: '创建时间',hidden: true},
                {prop: `updateTime`, label: '更新时间',hidden: true},
                {prop: `deptName`, label: '部门名称',hidden: true}
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '设备管理':
            getDrainageDOOByDept().then(res => {
              this.dooByDep = res.data.dooByDep
              this.totalCount = res.data.totalCount
              this.onlineCount = res.data.onlineCount
              this.offlineCount = res.data.offlineCount
            })
						deviceList({
							pageNum: pageNum || 1,
							pageSize: 10,
							...(this.searchCode ? {
								deviceCode: this.searchCode
							} : {}),
							...(this.searchValue ? {
								deviceName: this.searchValue
							} : {}),
							...(this.searchTime ? {
								deviceType: this.searchTime
							} : {})
							}).then(res => {
							this.tablePropAndLabel = [{
									prop: 'id',
									label: '主键',
									hidden: true
								},
								{
									prop: `deviceName`,
									label: '设备名称'
								},
								{
									prop: `deviceModel`,
									label: '设备型号'
								},
							]
							// 地图绑定落点
							this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					case '风险清单管理':
						selectRiskRegisterlist({
							pageNum: pageNum || 1,
							pageSize: 10,
							industry: 2,
							...(this.searchCode ? {
								hiddenDangerLevel: this.searchCode
							} : {}),
							...(this.searchValue ? {
								hiddenDangerType: this.searchValue
							} : {}),
							...(this.searchTime ? {
								buildingName: this.searchTime
							} : {})
							}).then(res => {
							this.tablePropAndLabel = [{
									prop: 'id',
									label: '主键',
									hidden: true
								},
								{
									prop: `hiddenDangerType`,
									label: '风险类型'
								},
								{
									prop: `hiddenDangerLevel`,
									label: '风险等级'
								},
							]
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
								if (res.rows) {
									this.dataText = "暂无数据"
								}
							})
						})
						break;
					// 监管平台
					case '城市体检' || '维护监管' || '基础事件' || '设备预警' || '催办事件' || '督办事件' :
            this.tableListVisible = true
            selectEventList({
              pageNum: pageNum || 1,
              pageSize: 10,
              industry : 2,
              eventTypeDl: type == '城市体检' ? 100 : type == '日常监管' ? 200 : type == '基础事件' ? 300 : type == '设备预警' ? 400 : null,
              ...(this.searchTime ? {
                selectDay: this.searchTime
              } : {}),
              ...(this.searchValue ? {
                eventTitle: this.searchValue
              } : {})
            }).then(res => {
              this.tablePropAndLabel = [
                {
                  prop: `eventId`,
                  label: '事件唯一标识',
                  hidden: true
                },
                {
                  prop: `eventTitle`,
                  label: '事件名称'
                },
                {
                  prop: `eventDescription`,
                  label: '事件描述',
                  hidden: true
                },
                {
                  prop: `createTime`,
                  label: '上报时间'
                },
                {
                  prop: `createBy`,
                  label: '创建人id',
                  hidden: true
                },
                {
                  prop: `createName`,
                  label: '创建人姓名',
                  hidden: true
                },
                {
                  prop: `eventTypeId`,
                  label: '事件类型',
                  hidden: true
                },
                {
                  prop: `longitude`,
                  label: '经度',
                  hidden: true
                },
                {
                  prop: `latitude`,
                  label: '纬度',
                  hidden: true
                },
                {
                  prop: `eventStatusLabel`,
                  label: '事件状态'
                },
                {
                  prop: `eventSource`,
                  label: '事件来源',
                  hidden: true
                },
                {
                  prop: `eventTypeName`,
                  label: '事件类型',
                  hidden: true
                },
                {
                  prop: `expediteStatusLabel`,
                  label: '催办状态',
                  hidden: true
                },
              ]
              this.tableList = res.rows
              this.total = res.total
              // 地图绑定落点
              this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
              if (res.rows) {
                this.dataText = "暂无数据"
              }
            })
						break;
          case  '催办事件' :
            this.tableListVisible = true
            selectEventList({
              pageNum: pageNum || 1,
              pageSize: 10,
              industry : 2,
              expediteStatus: 1,
              ...(this.searchTime ? {
                selectDay: this.searchTime
              } : {}),
              ...(this.searchValue ? {
                eventTitle: this.searchValue
              } : {})
            }).then(res => {
              this.tablePropAndLabel = [
                {
                  prop: `eventId`,
                  label: '事件唯一标识',
                  hidden: true
                },
                {
                  prop: `eventTitle`,
                  label: '事件名称'
                },
                {
                  prop: `eventDescription`,
                  label: '事件描述',
                  hidden: true
                },
                {
                  prop: `createTime`,
                  label: '上报时间'
                },
                {
                  prop: `createBy`,
                  label: '创建人id',
                  hidden: true
                },
                {
                  prop: `createName`,
                  label: '创建人姓名',
                  hidden: true
                },
                {
                  prop: `eventTypeId`,
                  label: '事件类型',
                  hidden: true
                },
                {
                  prop: `longitude`,
                  label: '经度',
                  hidden: true
                },
                {
                  prop: `latitude`,
                  label: '纬度',
                  hidden: true
                },
                {
                  prop: `eventStatusLabel`,
                  label: '事件状态'
                },
                {
                  prop: `eventSource`,
                  label: '事件来源',
                  hidden: true
                },
                {
                  prop: `eventTypeName`,
                  label: '事件类型',
                  hidden: true
                },
                {
                  prop: `expediteStatusLabel`,
                  label: '催办状态',
                  hidden: true
                },
              ]
              this.tableList = res.rows
              this.total = res.total
              // 地图绑定落点
              this.setMakersHandler(type, 'longitude', 'latitude', res.rows, 'event')
              if (res.rows) {
                this.dataText = "暂无数据"
              }
            })
            break;
          case '督办事件' :
            this.tableListVisible = true
            selectEventList({
              pageNum: pageNum || 1,
              pageSize: 10,
              industry : 2,
              superviseStatus: 1,
              ...(this.searchTime ? {
                selectDay: this.searchTime
              } : {}),
              ...(this.searchValue ? {
                eventTitle: this.searchValue
              } : {})
            }).then(res => {
              this.tablePropAndLabel = [
                {
                  prop: `eventId`,
                  label: '事件唯一标识',
                  hidden: true
                },
                {
                  prop: `eventTitle`,
                  label: '事件名称'
                },
                {
                  prop: `eventDescription`,
                  label: '事件描述',
                  hidden: true
                },
                {
                  prop: `createTime`,
                  label: '上报时间'
                },
                {
                  prop: `createBy`,
                  label: '创建人id',
                  hidden: true
                },
                {
                  prop: `createName`,
                  label: '创建人姓名',
                  hidden: true
                },
                {
                  prop: `eventTypeId`,
                  label: '事件类型',
                  hidden: true
                },
                {
                  prop: `longitude`,
                  label: '经度',
                  hidden: true
                },
                {
                  prop: `latitude`,
                  label: '纬度',
                  hidden: true
                },
                {
                  prop: `eventStatusLabel`,
                  label: '事件状态'
                },
                {
                  prop: `eventSource`,
                  label: '事件来源',
                  hidden: true
                },
                {
                  prop: `eventTypeName`,
                  label: '事件类型',
                  hidden: true
                },
                {
                  prop: `expediteStatusLabel`,
                  label: '催办状态',
                  hidden: true
                },
              ]
              this.tableList = res.rows
              this.total = res.total
              // 地图绑定落点
              this.setMakersHandler(type, 'longitude', 'latitude', res.rows)
              if (res.rows) {
                this.dataText = "暂无数据"
              }
            })
            break;
					// 运管体系
          case '巡检巡查任务管理':
            this.tableListVisible = true
            selectInspectionPatrolTaskList({
              pageNum: pageNum || 1,
              pageSize: 10,
			  type:2,
              ...(this.searchCode ? {
                status: this.searchCode
              } : {}),
              ...(this.searchValue ? {
                taskName: this.searchValue
              } : {})
            }).then(res => {
              this.tablePropAndLabel = [{
                prop: 'id',
                label: '主键',
                hidden: true
              },
                {
                  prop: 'taskName',
                  label: '任务名称'
                },
                {
                  prop: 'startTime',
                  label: '开始时间'
                },
                {
                  prop: 'endTime',
                  label: '结束时间'
                },
                {
                  prop: 'inspectionCycle',
                  label: '巡检周期',
                  hidden: true
                },
                {
                  prop: 'statusName',
                  label: '任务状态',
                  hidden: true
                },
                {
                  prop: 'notes',
                  label: '备注',
                  hidden: true
                },
                {
                  prop: 'createBy',
                  label: '创建人id',
                  hidden: true
                },
                {
                  prop: 'createName',
                  label: '创建人名称',
                  hidden: true
                },
                {
                  prop: 'createTime',
                  label: '创建时间',
                  hidden: true
                },
                {
                  prop: 'updateBy',
                  label: '更新人id',
                  hidden: true
                },
                {
                  prop: 'updateName',
                  label: '更新人名称',
                  hidden: true
                },
                {
                  prop: 'updateTime',
                  label: '更新时间',
                  hidden: true
                },
                {
                  prop: 'deptId',
                  label: '部门id',
                  hidden: true
                },
                {
                  prop: 'deptName',
                  label: '部门名称',
                  hidden: true
                }
              ]
              setTimeout(() => {
                this.tableList = res.rows
                this.total = res.total
              })
            })
            break;
          case '巡检巡查数据管理':
            this.tableListVisible = true
            selectPatrolInspectionDataList({
              pageNum: pageNum || 1,
              pageSize: 10,
			  type:2,
              ...(this.searchCode ? {
                userName: this.searchCode
              } : {}),
              ...(this.searchValue ? {
                taskName: this.searchValue
              } : {})
            }).then(res => {
              this.tablePropAndLabel = [{
                prop: 'id',
                label: '主键',
                hidden: true
              },
                {
                  prop: 'taskName',
                  label: '任务名称'
                },
                {
                  prop: 'startTime',
                  label: '开始时间'
                },
                {
                  prop: 'endTime',
                  label: '结束时间'
                },
                {
                  prop: 'userId',
                  label: '巡检人id',
                  hidden: true
                },
                {
                  prop: 'userName',
                  label: '巡检人名称'
                },
                {
                  prop: 'status',
                  label: '巡查状态',
                  hidden: true
                },
                {
                  prop: 'statusName',
                  label: '巡查状态',
                  hidden: true
                },
                {
                  prop: 'taskTrajectory',
                  label: '巡检轨迹',
                  hidden: true
                },
                {
                  prop: 'taskId',
                  label: '巡检任务id',
                  hidden: true
                },
              ]
              setTimeout(() => {
                this.tableList = res.rows
                this.total = res.total
              })
            })
            break;
          case '预案管理':
            this.tableListVisible = true
            selectPlanList({
              pageNum: pageNum || 1,
              pageSize: 10,
              ...(this.searchTime ? {
                dutyDate: this.searchTime
              } : {}),
              ...(this.searchValue ? {
                contingencyPlanName: this.searchValue
              } : {})
            }).then(res => {
              this.tablePropAndLabel = [{
                prop: `id`,
                label: '事件唯一标识',
                hidden: true
              },
                {
                  prop: `contingencyPlanName`,
                  label: '预案名称'
                },
                {
                  prop: `contingencyPlanContent`,
                  label: '预案内容'
                },
                {
                  prop: `createTime`,
                  label: '创建时间'
                }
              ]
              setTimeout(() => {
                this.tableList = res.rows
                this.total = res.total
              })
            })
            break;
          case '物资管理':
            this.tableListVisible = true
            selectMaterialsList({
              pageNum: pageNum || 1,
              pageSize: 10,
              industry: 2,
              ...(this.searchCode ? {
                type: this.searchCode
              } : {}),
              ...(this.searchValue ? {
                name: this.searchValue
              } : {})
            }).then(res => {
              this.tablePropAndLabel = [{
                prop: 'id',
                label: '主键',
                hidden: true
              },
                {
                  prop: 'name',
                  label: '物资名称'
                },
                {
                  prop: 'address',
                  label: '物资存放地址',
                  hidden: true
                },
                {
                  prop: 'type',
                  label: '物资类型',
                  isDict: true,
                  dictKey: 'material_type'
                },
                {
                  prop: 'industry',
                  label: '所属行业',
                  isDict: true,
                  dictKey: 'lifeline_industry',
                  hidden: true
                },
                {
                  prop: 'contactPerson',
                  label: '联系人'
                },
                {
                  prop: 'phone',
                  label: '联系电话'
                },
                {
                  prop: 'longitude',
                  label: '经度坐标',
                  hidden: true
                },
                {
                  prop: 'latitude',
                  label: '纬度坐标',
                  hidden: true
                },
                {
                  prop: 'description',
                  label: '物资描述',
                  hidden: true
                }
              ]
              setTimeout(() => {
                this.tableList = res.rows
                this.total = res.total
              })
            })
            break;
					case '值班管理':
						selectDutyVisualizationList({
							pageNum: pageNum || 1,
							pageSize: 10,
							industry: 2,
							...(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: '值班时间',
									hidden: true
								},
								{
									prop: `createTime`,
									label: '创建时间',
									hidden: true
								},
								{
									prop: `createBy`,
									label: '创建人id',
									hidden: true
								},
								{
									prop: `createName`,
									label: '创建人姓名',
									hidden: true
								},
								{
									prop: `eventTypeId`,
									label: '事件类型',
									hidden: true
								},
								{
									prop: `longitude`,
									label: '经度',
									hidden: true
								},
								{
									prop: `latitude`,
									label: '纬度',
									hidden: true
								},
								{
									prop: `eventStatus`,
									label: '事件状态',
									hidden: true
								},
								{
									prop: `eventSource`,
									label: '事件来源',
									hidden: true
								},
								{
									prop: `eventTypeName`,
									label: '事件类型',
									hidden: true
								},
								{
									prop: `industry`,
									label: '所属行业',
									hidden: true,
									isDict: true,
									dictKey: 'lifeline_industry'
								},
							]
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
							})
						})
						break;
					case '通知通告':
						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: '公告内容',
								hidden: true
							},
							{
								prop: `status`,
								label: '公告状态',
								isDict: true,
								hidden: true,
								dictKey: 'sys_notice_status'
							},
							]
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
							})
						})
						break;
					case '人员管理':
						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: `userName`,
								label: '用户账号'
							},
							{
								prop: `nickName`,
								label: '用户昵称'
							},
							{
								prop: `phonenumber`,
								label: '手机号码'
							},
							{
								prop: `sex`,
								label: '用户性别',
								hidden: true,
								isDict: true,
								dictKey: 'sys_user_sex'
							},
							{
								prop: `status`,
								label: '帐号状态',
								hidden: true,
								isDict: true,
								dictKey: 'sys_normal_disable'
							},
							]
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
							})
						})
						break;
					case '维护报告':
						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
							},
							]
							setTimeout(() => {
								this.tableList = res.rows
								this.total = res.total
							})
						})
						break;
					default:
						break;
				}
			},
			setMakersHandler(type, lonKey, latKey, rows) {
				let ListMarkersList = []
				this.latKey = latKey
				this.lonKey = lonKey
				for (let i = 0; i < rows.length; i++) {
					let markersMap = {
						lng: 124.59,
						lat: 43.02,
						icon: "marker",
						bindPopupHtml: "",
						keepBindPopup: false,
						isAggregation: false,
						click: 'previewPointDetail',
						parameter: ''
					};
					switch (type) {
						case "管线管理":
							markersMap.icon = "kaiwa";
						break;
						case "维修管理":
							markersMap.icon = "weixiu";
						break;
						case "易涝点管理":
							markersMap.icon = "yilaodian";
						break;
						case "堤防管理":
							markersMap.icon = "difang";
						break;
						case "下穿立交管理":
							markersMap.icon = "xiachuanlijiao";
						break;
						case "泵站管理":
							markersMap.icon = "bengzhan";
						break;
						case "雨量站管理":
							markersMap.icon = "yuliangzhan";
						break;
						case "污水处理厂管理":
							markersMap.icon = "wushuichulichang";
						break;
						case "调蓄设施管理":
							markersMap.icon = "diaoxusheshi";
						break;
						case "窨井管理":
							markersMap.icon = "yinjing";
						break;
						case "用户管理":
							markersMap.icon = "yonghu";
						break;
						case "设备管理":
							markersMap.icon = "shebei";
						break;
						case "督办事件":
							markersMap.icon = "duban";
						break;
						case "催办事件":
							markersMap.icon = "cuiban";
						break;
						case "企业管理":
							markersMap.icon = "reyuanchang";
						break;
						case '城市体检':
						case '维护监管':
						case '基础事件':
						case '设备预警':
							markersMap.icon = "yujing";
						break;
					}
					markersMap.lng = rows[i][lonKey] * 1;
					markersMap.lat = rows[i][latKey] * 1;
					markersMap.radius = rows[i].cameraRadius || '';
					markersMap.parameter = {
						type: this.currentResourceTile,
						params: rows[i]
					};
					ListMarkersList.push(markersMap);
				}
				setTimeout(() => {
					this.$refs.supermap.clearM();
					this.$refs.supermap.setMarkers(ListMarkersList);
				}, 2000)

			},
      // 打开事件详情弹窗
      openEventDetail(obj) {
        getEventDetail({
          eventId: obj.eventId
        }).then(res => {
          this.demoIdx = obj.demoIdx
          this.eventInfo = res.data
          this.eventDialogVisible = true
        })
      },
			previewPointDetail(params) {
				this.previewDetail(params.params,params.type)
			},
			//初始化地图数据
			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)
				})
			},
      // 获取配置项
      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])
              }
            }
          }
        )
      },
	  		//查询单选管线详情信息
      getHeatingPipeByDataSetAndSmId(yId,yName) {
				getDrainagePipeBySmId({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);
					}
				})
			},
			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);
			},
			// 左侧视窗伸缩
			viewLeftInsideAndOut() {
				this.isDatabaseVisible = false
				if (this.viewLeftSideStatus == 'inside') {
					this.getLeftSideOut()
					this.viewLeftSideStatus = 'out'
				}
			},
			viewLeftInsideAndOut1() {
				if (this.viewLeftSideStatus = 'inside') {
					this.getLeftSideInside()
				}
			},
			getLeftSideOut() {
				document.querySelector('.left-nav').style.transform = 'translateX(-25.2rem)'
				document.querySelector('.left-nav-inside').style.transform = 'translateX(40.25rem)'
				document.querySelector('.left-nav').style.transition = 'all .5s ease-in-out'
				document.querySelector('.left-nav-inside').style.transition = 'all .5s ease-in-out'
				document.querySelector('.map-tc-top').style.transform = 'translateX(10rem)'
				document.querySelector('.map-tc-top').style.transition = 'all .5s ease-in-out'
				document.querySelector('.measurement-tab').style.transform = 'translateX(10rem)'
				document.querySelector('.measurement-tab').style.transition = 'all .5s ease-in-out'

			},
			getLeftSideInside() {
				document.querySelector('.left-nav').style.transform = 'translateX(-0rem)'
				document.querySelector('.left-nav-inside').style.transform = 'translateX(-40.25rem)'
				document.querySelector('.left-nav').style.transition = 'all .5s ease-in-out'
				document.querySelector('.left-nav-inside').style.transition = 'all .5s ease-in-out'
				document.querySelector('.map-tc-top').style.transform = 'translateX(0rem)'
				document.querySelector('.map-tc-top').style.transition = 'all .5s ease-in-out'
				document.querySelector('.measurement-tab').style.transform = 'translateX(0rem)'
				document.querySelector('.measurement-tab').style.transition = 'all .5s ease-in-out'
			},
			initGasChart(text) {
				// const week = 9;
				// const month = 9;
				// const quarter = 14;
				// const year = 11;
				// let data = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
				// let value1 = [];
				// let value2 = [];
				// let value3 = [];
				// for (let i = 1; i <= 31; i++) {
				// 	value1.push((Math.random(10) * 10).toFixed(0))
				// 	value2.push((Math.random(10) * 10).toFixed(0))
				// 	value3.push((Math.random(10) * 10).toFixed(0))
				// }
				// if (text == "month") {
				// 	data = [];
				// 	for (let i = 1; i <= 31; i++) {
				// 		data.push(i + "日")
				// 	}
				// } else if (text == "quarter") {
				// 	data = ["春季", "夏季", "秋季", "冬季"];
				// } else if (text == "year") {
				// 	data = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
				// 	data = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
				// }
        selectSewageTreatmentAnalysis().then(res => {
          let myChart = echarts.init(document.getElementById('w_chart1'))
          let option = {
            dataZoom: text == "month" ? [{
              show: false,
              type: 'slider', // 滑动条型数据区域缩放组件
              xAxisIndex: 0, // 控制第一个 xAxis
              start: 0, // 初始范围的起始百分比（0-100）
              end: 20, // 初始范围的结束百分比（0-100）
              bottom: 0, // 距离容器底部的距离
              height: 20, // 组件高度
              showDetail: false, // 是否显示详细数值
              filterMode: 'filter' // 过滤模式
            },
              {
                type: 'inside', // 内置型数据区域缩放组件
                xAxisIndex: 0, // 控制第一个 xAxis
                zoomOnMouseWheel: false, // 鼠标滚轮缩放
                moveOnMouseMove: true, // 拖拽缩放
              }
            ] : text == "year" ? [{
              show: false,
              type: 'slider', // 滑动条型数据区域缩放组件
              xAxisIndex: 0, // 控制第一个 xAxis
              start: 0, // 初始范围的起始百分比（0-100）
              end: 48, // 初始范围的结束百分比（0-100）
              bottom: 0, // 距离容器底部的距离
              height: 20, // 组件高度
              showDetail: false, // 是否显示详细数值
              filterMode: 'filter' // 过滤模式
            },
              {
                type: 'inside', // 内置型数据区域缩放组件
                xAxisIndex: 0, // 控制第一个 xAxis
                zoomOnMouseWheel: false, // 鼠标滚轮缩放
                moveOnMouseMove: true, // 拖拽缩放
              }
            ] : [{
              show: false,
              type: 'slider', // 滑动条型数据区域缩放组件
              xAxisIndex: 0, // 控制第一个 xAxis
              start: 0, // 初始范围的起始百分比（0-100）
              end: 100, // 初始范围的结束百分比（0-100）
              bottom: 0, // 距离容器底部的距离
              height: 20, // 组件高度
              showDetail: false, // 是否显示详细数值
              filterMode: 'filter' // 过滤模式
            },
              {
                type: 'inside', // 内置型数据区域缩放组件
                xAxisIndex: 0, // 控制第一个 xAxis
                zoomOnMouseWheel: false, // 鼠标滚轮缩放
                moveOnMouseMove: true, // 拖拽缩放
              }
            ],
            grid: {
              top: "7%",
              left: "8%",
              bottom: "20%", //也可设置left和right设置距离来控制图表的大小
              right: "1%"
            },
            tooltip: {
              trigger: "axis",
              formatter: (params) => {
                let result = params[0].name +
                  // (text == "month"?"日":"") +
                  // (text == "year"?"月":"") +
                  '：'
                params.forEach(item => {
                  result += item.value + '家<br/>'
                })
                return result
              }
            },
            xAxis: {
              data: res.data.labels,
              axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                  color: '#67C9D2'
                }
              },
              axisTick: {
                show: true //隐藏X轴刻度
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff" //X轴文字颜色
                }
              },
            },
            yAxis: [{
              type: "value",
              nameTextStyle: {
                color: "#ebf8ac"
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#67C9D2'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              },
            },
              {
                type: "value",
                // name: "同比",
                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: "0~99m³",
              type: "bar",
              // barWidth: text == "month" ? month : text == "quarter" ? quarter : text == "year" ?
              // 	year : week,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#1282FA"
                },
                  {
                    offset: 1,
                    color: "#4693EC"
                  }
                ]),
                borderWidth: 2,
                borderColor: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                    offset: 0,
                    color: '#fff'
                  },
                    {
                      offset: 1,
                      color: '#93B4EC'
                    },
                  ]
                ),
                shadowColor: 'blue',
                shadowBlur: 12,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
              data: res.data.values
            },
              // {
              // 	name: "100~299m³",
              // 	type: "bar",
              // 	barWidth: text == "month" ? month : text == "quarter" ? quarter : text == "year" ?
              // 		year : week,
              // 	itemStyle: {
              // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              // 				offset: 0,
              // 				color: "#29CAE6"
              // 			},
              // 			{
              // 				offset: 1,
              // 				color: "#4693EC"
              // 			}
              // 		]),
              // 		borderWidth: 2,
              // 		borderColor: new echarts.graphic.LinearGradient(
              // 			0, 0, 0, 1,
              // 			[{
              // 					offset: 0,
              // 					color: '#fff'
              // 				},
              // 				{
              // 					offset: 1,
              // 					color: '#93B4EC'
              // 				},
              // 			]
              // 		),
              // 		shadowColor: 'blue',
              // 		shadowBlur: 12,
              // 		shadowOffsetX: 0,
              // 		shadowOffsetY: 0,
              // 	},
              // 	data: value2
              // },
              // {
              // 	name: "300m³以上",
              // 	type: "bar",
              // 	barWidth: text == "month" ? month : text == "quarter" ? quarter : text == "year" ?
              // 		year : week,
              // 	itemStyle: {
              // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              // 				offset: 0,
              // 				color: "#29CAE6"
              // 			},
              // 			{
              // 				offset: 1,
              // 				color: "#4693EC"
              // 			}
              // 		]),
              // 		borderWidth: 2,
              // 		borderColor: new echarts.graphic.LinearGradient(
              // 			0, 0, 0, 1,
              // 			[{
              // 					offset: 0,
              // 					color: '#fff'
              // 				},
              // 				{
              // 					offset: 1,
              // 					color: '#93B4EC'
              // 				},
              // 			]
              // 		),
              // 		shadowColor: 'blue',
              // 		shadowBlur: 12,
              // 		shadowOffsetX: 0,
              // 		shadowOffsetY: 0,
              // 	},
              // 	data: value3
              // }
            ]
          }
          myChart.setOption(option)
          const chartName = "污水处理量分析";
          if (this.intervalArr.includes(chartName)) {
            return;
          }
          this.intervalArr.push(chartName);
          // 获取数据的总长度，用于循环
          let dataLength = option.series[0].data.length;
          // 设置一个计数器
          let currentIndex = -1;
          // 使用 setInterval 实现自动轮播
          setInterval(function() {
            // 显示 tooltip 自动轮播效果
            currentIndex = (currentIndex + 1) % dataLength;
            myChart.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: currentIndex
            });
          }, 2000); // 每隔 2000 毫秒切换一次
        })
			},
			// 用气量分析时间段变化
			gasDateHasChanged(e) {
				const target = e.target.closest('i')
				// 通过自定义 data 属性获取数据
				const text = target.dataset.text
				this.gasTimePeriod = text
				// 更新图表数据
				// this.initGasChart(text)
			},
			// 巡检里程分析时间段变化
			inspectionDateHasChanged(e) {
				const target = e.target.closest('i')
				// 通过自定义 data 属性获取数据
				const text = target.dataset.text
				this.inspectionTimePeriod = text
			},
			checkoutTagName(tagName) {
				if (this.currentTagName == tagName) return;
				this.currentTagName = tagName
			},
			initCharts() {
				let myChart1 = echarts.init(document.getElementById('inspection-mileage-analysis'))
				let myChart2 = echarts.init(document.getElementById('pipeline-type-analysis'))
				let myChart3 = echarts.init(document.getElementById('gas-consumption-analysis'))
				let myChart4 = echarts.init(document.getElementById('assessment-and-evaluation'))
				myChart1.setOption({
					grid: {
						top: "10%",
						right: '5%',
						bottom: "35%" //也可设置left和right设置距离来控制图表的大小
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow",
							label: {
								show: true
							}
						}
					},
					xAxis: {
						data: [
							"1月",
							"2月",
							"3月",
							"4月",
							"5月",
							"6月",
							"7月",
							"8月",
							"9月",
							"10月",
							"11月",
							"12月"
						],
						axisLine: {
							show: true, //隐藏X轴轴线
							lineStyle: {
								color: '#B2BFB6'
							}
						},
						axisTick: {
							show: true //隐藏X轴刻度
						},
						axisLabel: {
							show: true,
							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: [55, 81, 30, 58, 17, 80, 25, 58, 80, 23, 79, 40]
						},
						{
							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: [55, 81, 30, 58, 17, 80, 25, 58, 80, 23, 79, 40]
						}
					]
				})
				myChart2.setOption({
					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: ['四平市', '铁东区', '铁西区', '双辽市', '伊通县', '梨树县']
					},
					series: [{
							name: '次高压',
							type: 'bar',
							stack: 'total',
							label: {
								show: true
							},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#0080D5'
								}
							},
							data: [320, 302, 301, 334, 390, 330, 320]
						},
						{
							name: '中压',
							type: 'bar',
							stack: 'total',
							label: {
								show: true
							},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								normal: {
									color: '#774BB6'
								}
							},
							data: [150, 212, 201, 154, 190, 330, 410]
						},
						{
							name: '低压',
							type: 'bar',
							stack: 'total',
							label: {
								show: true
							},
							itemStyle: {
								normal: {
									color: '#069DF9'
								}
							},
							emphasis: {
								focus: 'series'
							},
							data: [820, 832, 901, 934, 1290, 1330, 1320]
						}
					]
				})
				myChart3.setOption({
					grid: {
						top: "10%",
						right: '5%',
						bottom: "35%" //也可设置left和right设置距离来控制图表的大小
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow",
							label: {
								show: true
							}
						}
					},
					xAxis: {
						data: [
							"1月",
							"2月",
							"3月",
							"4月",
							"5月",
							"6月",
							"7月",
							"8月",
							"9月",
							"10月",
							"11月",
							"12月"
						],
						axisLine: {
							show: true, //隐藏X轴轴线
							lineStyle: {
								color: '#B2BFB6'
							}
						},
						axisTick: {
							show: true //隐藏X轴刻度
						},
						axisLabel: {
							show: true,
							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: [55, 81, 30, 58, 17, 80, 25, 58, 80, 23, 79, 40]
						},
						{
							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: [55, 81, 30, 58, 17, 80, 25, 58, 80, 23, 79, 40]
						}
					]
				})
				myChart4.setOption({
					color: ['#46E8FE', '#F1F745', '#45CE32'],
					tooltip: {
						show: true
					},
					series: [{
						type: "pie",
						radius: ["60%", "50%"],
						center: ["60%", "40%"],
						hoverAnimation: false,
						z: 10,
						itemStyle: {
							// normal: {
							// 	borderWidth:5,
							// 	borderColor: "#003359"
							// }
						},
						label: {
							show: false
						},
						data: [100, 38, 43],
						labelLine: {
							show: false
						}
					}]
				})
			},
			//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;
			},
			layerCheck() {
				this.$refs.supermap.reload(this.checkedBaseDOptions)
			},
      handleCheckChange() {
        // 获取所有tree的叶子节点
        const allLeafNodes = [];
        // 排水-雨水
        if (this.$refs.twoDLayers_paishui_yushui) {
          const leafNodes3 = this.$refs.twoDLayers_paishui_yushui.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 排水-污水
        if (this.$refs.twoDLayers_paishui_wushui) {
          const leafNodes3 = this.$refs.twoDLayers_paishui_wushui.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }
        // 排水-合流
        if (this.$refs.twoDLayers_paishui_heliu) {
          const leafNodes3 = this.$refs.twoDLayers_paishui_heliu.getCheckedNodes(true);
          allLeafNodes.push(...leafNodes3);
        }

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


        // 提取需要的属性
        this.checkedOptions = allLeafNodes.map(node => node.url).filter(url => url);
        this.handleCheckedOptions()
      },
			handleCheckedOptions() {
				this.$refs.supermap.addLifelineOpen(this.checkedOptions)
			},


		}


	}
</script>
<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);
		}
	}


	.ps_sbhz_flex_c{
		div.class-1{
			b{
				background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#b8ca43));
				background: linear-gradient(top, #fff, #b8ca43);
				-webkit-background-clip: text; /* Chrome, Safari */
				background-clip: text;
				-webkit-text-fill-color: transparent; /* Chrome, Safari */
				color: transparent; /* 兼容不支持background-clip的浏览器 */
				/*box-shadow: 0px 0px 5px #3063ca;*/

			}
		}
		div.class-2{
			b{
				background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#2c3ec5));
				background: linear-gradient(top, #fff, #2c3ec5);
				-webkit-background-clip: text; /* Chrome, Safari */
				background-clip: text;
				-webkit-text-fill-color: transparent; /* Chrome, Safari */
				color: transparent; /* 兼容不支持background-clip的浏览器 */
				/*box-shadow: 0px 0px 5px #3063ca;*/

			}
		}
		div.class-3{
			b{
				background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#a1e1fb));
				background: linear-gradient(top, #fff, #a1e1fb);
				-webkit-background-clip: text; /* Chrome, Safari */
				background-clip: text;
				-webkit-text-fill-color: transparent; /* Chrome, Safari */
				color: transparent; /* 兼容不支持background-clip的浏览器 */
				/*box-shadow: 0px 0px 5px #3063ca;*/

			}
		}
	}

	::v-deep .el-icon-date::before{
		position: relative !important;
    	bottom: 22% !important;
	}

	::v-deep .el-select__caret::before{
		position: relative !important;
    	top: -22% !important;
	}

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

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

	.layer-Control {
		position: absolute;
    right: 470px;
    top: 295px;
		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;
	}

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

	.header {
		position: absolute;
		top: 1%;
		left: 0%;
		width: 40%;
		height: 10%;
		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;
	}

	.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 {
			width: 100%;
			position: absolute;
			height: calc(100% - 110px);
			overflow: hidden;

			.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-right: 120px;
				width: 50%;
				right: -26%;

				.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: 30px;
							margin: 2% 0 0 4%;
							border: 1px solid #516990;
							background-color: rgba(18, 31, 51, .6);

							>div:nth-child(1) {
								width: 80%;
								height: 100%;
								color: #fff;
								line-height: 4;
								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);

							>div:nth-child(1) {
								width: 38%;
								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: 58%;
								top: -24%;
								left: 35%;
								color: #C9E1EF;
							}
						}
					}

					.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: 1px solid #516990;
							background-color: rgba(18, 31, 51, .6);
							color: #fff;
							line-height: 3.2;
							text-indent: 20px;

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

				}

				.assessmentText {
					position: absolute;
					width: 21%;
					height: 17%;
					bottom: 6%;
					right: 3%;

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

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

						>span {
							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 {
						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;
		}


	}

	#w_chart1,
	#w_chart2 {
		height: 100px;
		margin-top: 10%;
	}

	.date_qh {
		display: block;
		position: absolute;
		top: 41px;
		left: 4%;
		width: 200px;
		background: rgba(15, 44, 78, 0.7);
		height: 25px;
		line-height: 26px;
		border-radius: 4px;
		overflow: hidden;
		border: 1px solid #2C6B70;

		i {
			width: 25%;
			display: inline-block;
			padding: 0px 5px;
			font-style: normal;
			cursor: pointer;
			font-size: 15px;
			color: #919DA5;
			text-align: center;
		}
	}

	.on {
		color: #fff !important;
	}

	.map-tc-top {
		position: fixed;
		left: 410px;
		top: 100px;
		width: 43px;
		height: 275px;
		background: rgba(8, 43, 91, 0.24);
		border: dashed 1px #26B0F3;
		border-radius: 3px;

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

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

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

	.map-tc-bom {
		position: fixed;
		right: 410px;
		top: 195px;
		width: 55px;
		height: 55px;
		background: rgba(8, 43, 91, 0.48);
		border-radius: 27px;
		border: 1px solid #26B0F3;
		cursor: pointer;

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

	.task {
		height: 17%;
		.task-item {
			position: relative;
			width: 95%;
			height: 55px;
			margin: 2% 0 0 5%;
			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;
			}
		}
	}

	/* 重点关注列表 */
	.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;
		}
	}
</style>
<style lang="scss" scoped>
	.el-progress {
		width: 103px;
		position: relative;
		right: 0%;
		top: 27%;
	}

	.el-progress-bar__outer {
		background-color: #001C3B;
	}

	.el-progress-bar__inner {
		background-color: #00AEEA;
	}

	.el-progress__text {
		color: #C9E1EF;
	}

	::v-deep .eventDialog {
		width: 97% !important;
		height: 95%;
		border-radius: 10px;
		background: center center no-repeat #273554;

		.el-dialog__body {
			height: 93%;
			color: #fff;
		}

		.transferBg {
			padding: 15px 0 0 15px;
			background: linear-gradient(to bottom, rgba(15, 42, 58, 0.9), rgba(35, 42, 48, .9));
			border-radius: 10px;
          h3{
              padding-left: 20px;
            background: url("../../assets/gas/leftlist_btn.png") no-repeat 0px 0px;
            background-size: 12px 15px;
            font-size: 16px;
            font-weight: 600;
          }
          .spsb_xx{
            display: flex;
            height: 130px;
            border-radius: 10px;
            padding-left: 3%;
            .spsb_text{
            width: 60%;
            height: 100%;
            padding: 5px;
            border-color: #22BCF3;
            background: #14375A;
            border-radius: 4px;
            outline: 0px;
            border-radius: 10px;
            color: #fff;
            line-height: 25px;
            }
            .btn_option{
            width: 40%;
            height: 100%;
            .el-button{
              width: 70%;
              height: 20%;
              margin: 2.5% 0 0 15% !important;
              background-color: #14375A !important;
            }
            }
          }
		}
.xczk_div{
  margin-top: 15px!important;
  div{
    font-size: 14px;
    line-height: 20px;
    color: #c9e3f3;
    padding-left: 19px;
  }
}
		.continueForm_contain {
			position: absolute;
			width: 8vh;
			right: 3%;
			top: 10%;
			color: #fff;
			background-color: #5bdddd;
			border-radius: 10px;
			border: 0px;
			outline: 0px;
			padding: 4px 0px;
		}

		.d1 {
			height: 20%;

			.eventInfo_contain {
				display: flex;
				height: 60%;
				width: 100%;
				flex-wrap: wrap;
				margin-top: 1.5%;
                .sj_tit{
                  font-size: 14px;
                  font-weight: 600;
                  color: #22bcf3;
                }
				>div {
					width: 250px;
                  color: #b9e5ff;
				}

				>div:not(:nth-child(4n+1)) {
					margin-right: 5%;
				}

        .videoLinkage{
          position: absolute;
          width: 200px !important;
          height: 15%;
          text-align: center;
          top: 10%;
          right: -3%;
          cursor: pointer;
          background: url("~@/assets/images/lookall/sxt.png") 0 0 no-repeat;
          background-size: 100% 100%;
        }
			}
		}

		.d2 {
			position: relative;
			width: 69%;
			height: 146px;
			margin-top: 1%;

			.progress_contain {
				height: 60%;
				margin-top: 1.5%;

              color: #c3e7ff;
				.line {
					width: 99%;
					height: 2px;
					margin-top: 3%;
					background-color: #09C2C4;
				}

				.e1 {
					width: 60px;
					position: absolute;
					bottom: 18%;
					left: 8%;
                  div{
                    height: 22px;
                    line-height: 35px;
                  }
				}

				.e2 {
					width: 60px;
					position: absolute;
					bottom: 18%;
					left: 32%;
                  div{
                    height: 22px;
                    line-height: 35px;
                  }
				}

				.e3 {
					width: 60px;
					position: absolute;
					bottom: 18%;
					left: 59%;
                  div{
                    height: 22px;
                    line-height: 35px;
                  }
				}

				.e4 {
					width: 60px;
					position: absolute;
					bottom: 18%;
					left: 86%;
                  div{
                    height: 22px;
                    line-height: 35px;
                  }
				}

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

				.z-clyj {
					position: absolute;
					left: 190px;
    				top: 9px;

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

		.d3 {
			display: flex;
			height: 56%;
			margin-top: 1%;

			.video {
				width: 34%;
			}

			.mid {
				width: 34%;
				margin-left: 1.5%;

				.info {
					width: 48.5%;
					height: 48.5%;
					float: left;

					>div {
						margin-top: 2.5%;
						height: 76%;

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

				.info_right {
					float: left;
					width: 48.5%;
					height: 48.5%;
					margin-left: 3%;

					>div {
						margin-top: 3%;

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

          .div_Option {
              width: 96%;
              height: 16vh;
            }
				}

        .demoDeptStylesheet{
          width: 100%;
          position: relative;
          left: -3%;
        }

				.pics {
					width: 100%;
					height: 48.5%;
					float: left;
					margin-top: 2%;

					>div {
						overflow-x: auto;
						/* 横向滚动条 */
						overflow-y: hidden;
						/* 隐藏纵向滚动条 */
						white-space: nowrap;
						/* 防止换行（如果不是 flex） */
						display: flex;
						padding-top: 2%;

						img {
							flex-shrink: 0;
							width: 200px;
							height: 140px;
						}

						>img:not(:nth-child(1)) {
							margin-left: 3%;
						}
					}
				}
			}

			.right {
				width: 30%;
				height: 140%;
				margin-left: 1.5%;
				margin-top: -168px;
				padding-right: 1%;

				>div {
					margin-top: 1.5%;

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

	.el-dialog__header .el-dialog__title {
      color: #22bcf3;
    }
	.eventDialog .transferBg {
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 28, 45, 0.9)), to(rgba(3, 27, 49, 0.9)));
      background: linear-gradient(to bottom, rgb(16 28 45 / 90%), rgb(3 27 49 / 90%));
    }
    .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;
    }
	.pspage {
		// background: url("~@/assets/images/paishui/ditu.png") no-repeat left center;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.headerbig {
		position: relative;
		width: 100%;
		height: 150px;
		background: url("~@/assets/images/paishui/topbj.png") no-repeat left center;
		background-size: 100% 100%;
		left: 0;
		top: 0;
		z-index: 990;
	}


	.headercont {
		width: 1044px;
		height: 100px;
		margin: 0 auto;
		background: url("~@/assets/images/paishui/header.png") no-repeat left center;
		background-size: 100% 100%;
		display:flex;
		justify-content: center;
		align-items: center;

		img {
			display: block;
			margin-top: -30px;
		}
	}

	.headertop {
		overflow: hidden;
		position: relative;
	}

	.header-fl {
		font-family: pmzd;
		color: #AECAF5;
		text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
		position: absolute;
    flex-direction: row;
		left: 20px;
		top: 20px;
		z-index: 999;

		span {
			display: block;
		}

		span:nth-child(1) {
			font-size: 16px;
		}

		span:nth-child(2) {
			font-size: 12px;
		}
	}
  .header-fl-tq-1{
    font-family: pmzd;
    color: #AECAF5;
    text-shadow: 0px 1px 3px rgba(5,12,25,0.54);
    position: absolute;
    left: 100px;
    top: 20px;
    z-index: 999;

    span{
      display: block;
    }
    span:nth-child(1){
      font-size: 16px;
    }
    span:nth-child(2){
      font-size: 12px;
    }
  }
  .header-fl-tq-2{
    font-family: pmzd;
    color: #AECAF5;
    text-shadow: 0px 1px 3px rgba(5,12,25,0.54);
    position: absolute;
    left: 140px;
    top: 20px;
    z-index: 999;

    span{
      display: block;
    }
    span:nth-child(1){
      font-size: 16px;
    }
    span:nth-child(2){
      font-size: 12px;
    }
  }

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

	.tongzhi {
		background: url("~@/assets/images/paishui/tongzhibj.png") no-repeat left bottom;
		background-size: 100% auto;
		width: 850px;
		height: 90px;
		margin: 0 auto;
		text-align: center;
		font-size: 16px;
		color: #f0fcfd;
    display: flex;
    align-items: center;
    padding: 0 80px;

    img{
      width: 30px;
      height: 30px;
      margin: 0 10px 0 0;
    }
	}
  /* the shining alert */
  .color-blink {
    animation: colorBlink 3s infinite;
  }
  @keyframes colorBlink {
    0% { color: white; }
    33% { color: orange; }
    66% { color: yellow; }
    100% { color: red; }
  }
	.left-center {
		width: 400px;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 100px 0 0 15px;
		z-index: 1;
		transition: 1s ease-in-out;

	}

	.left-nav-inside {
		overflow-y: scroll;
		position: absolute;
		left: -40.25rem !important;
	}

	.left-list-table {
		width: 540px !important;
		z-index: 999;

		.rw-list {
			width: 100% !important;
			margin: 0 !important;
			height: 750px !important;
			overflow-y: scroll;

		}

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


		}
	}

	.left-c-bg {
		background: url("~@/assets/images/paishui/leftbj.png") no-repeat left center;
		background-size: 100% 100%;
		width: 400px;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 100px 0 0 15px;
		z-index: 1;
	}

	.right-c-bg {
		background: url("~@/assets/images/paishui/rightbj.png") no-repeat left center;
		background-size: 100% 100%;
		width: 400px;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		padding: 100px 0 0 15px;
		z-index: 1;
	}


	.right-center {
		width: 400px;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		padding: 100px 15px 0 0;
		z-index: 999;


	}


	.all-title {
		position: relative;
		background: url("~@/assets/images/paishui/all-title13.png") no-repeat left center;
		background-size: 100% 100%;
		width: 378px;
		height: 35px;
		padding: 0 0 0 36px;
		line-height: 32px;
		margin: 0 0 6px 0;

		span {
			font-weight: bold;
			font-size: 16px;
			background: linear-gradient(to right, #8bc7ff, #ffffff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			text-shadow: 1px 2px 8px rgba(13, 24, 45, 0.26);
			font-style: oblique;
			padding: 0 10px 0 0;
			font-family: 'almmsht';
		}

		.right-span {
			width: 18px;
			height: 18px;
			position: absolute;
			cursor: pointer;
			top: 0;
			right: 0;
			color: #00deff;
			z-index: 999;
			background: #0b3876;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.all-title-540 {
		position: relative;
		background: url("~@/assets/images/paishui/all-title-540.png") no-repeat left center !important;
		background-size: 100% 100% !important;
		width: 540px !important;
		height: 35px;
		padding: 0 0 0 36px;
		line-height: 32px;
		margin: 0 0 6px 0;
		.right-span {
			top: 0;
			right:17px;
		}

	}

	.tubiao {
		height: 150px;
		font-size: 14px;
		color: #fff;
		padding: 0 0 0 20px;
	}

	.bombj {
		background: url("~@/assets/images/paishui/bombj.png") no-repeat left bottom;
		background-size: 100% 100%;
		width: 100%;
		height: 119px;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 0;
	}

	.bom-cont {
		background: url("~@/assets/images/paishui/navbig.png") no-repeat left bottom;
		background-size: 100% auto;
		display: flex;
		justify-content: center;
	}

	.nav {
		width: 160px;
		position: relative;
		transition: all 0.3s ease-in-out;

		.nav-in {
			display: block;
			width: 118px;
			height: 118px;
			background: url("~@/assets/images/paishui/nav-bj.png") no-repeat left bottom;
			background-size: 100% 100%;
			text-align: center;
			margin: 0 auto;

			img {
				display: block;
				margin: 0 auto 10px auto;
				width: 69px;
				height: 69px;
			}

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

		.er-nav {
			position: absolute;
			left: 50%;
			bottom: 100px;
			width: 190px;
			display: flex;
			flex-direction: column-reverse;
			transform: translate(-50%);

			img {
				display: block;
				width: 190px;
				height: 12px;
			}

			div {
				width: 190px;
				border: solid 1px #0dadf7;
				border-top-left-radius: 3px;
				border-top-right-radius: 3px;
				border-bottom: none;
				background: color(srgb 0.06 0.22 0.37 / 0.48);
				display: flex;
				flex-direction: column;
				padding: 10px;
				box-shadow: inset 0px 8px 14px color(srgb 0.05 0.68 0.97 / 0.22);

				span {
					font-size: 14px;
					color: #C9E1EF;
					line-height: 28px;
					margin: 0 0 10px 0;
					padding: 0 0 0 15px;
					border: 1px solid color(srgb 0.07 0.4 0.68 / 0.36);
					display:flex;
					align-items: center;
					img{
						width: 5px;
						height: 12px;
						margin-right: 10px;
					}
				}

				span:hover,
				.span-active {
					background: rgba(0, 157, 255, 0.5);
					border: 1px solid color(srgb 0.07 0.4 0.68 / 0.36);
				}

			}
		}
	}

	.nav:hover,
	.nav.choice {
		background: url("~@/assets/images/paishui/navhover.png") no-repeat left bottom;
		background-size: 100% auto;
		filter: brightness(120%) hue-rotate(-10deg);
		transform: translateY(-10px);
	}

	.rw-list {
		height: 220px;
		width: 330px;
		margin: 0 auto;
		overflow: hidden;
	}

	.rw-list-title {
		width: 330px;
		height: 29px;
		border-bottom: solid 1px #1166AE;
		background: linear-gradient(to right, color(srgb 0.02 0.34 0.69 / 0.2), color(srgb 0.02 0.34 0.69 / 0.8));
		padding: 0 15px;
		display: flex;

		span {
			font-size: 12px;
			color: #C9E1EF;
			line-height: 30px;
			display: block;
		}

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

		span:nth-child(2) {
			width: 100px;
		}

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

	.fxqh-list-title {
		width: 330px;
		height: 30px;
		background: rgba(8, 43, 91, 0.6);
		border: 1px solid #009fd9;
		padding: 0 15px;
		display: flex;
		margin: 0 auto;
		box-shadow: 0px 0px 6px color(srgb 0.1 0.25 1 / 0.64);
		line-height: 30px;

		span {
			font-size: 12px;
			color: #C9E1EF;
			line-height: 30px;
			display: block;
		}

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

		span:nth-child(2) {
			width: 90px;
			text-indent: 17px
		}
	}

	.fldx-cont {
		height: 220px;
		overflow-y: auto;

		ul.rw-list-cont {
			width: 100%;

			li {
				display: flex;
				width: 100%;
				padding: 0 15px;
				line-height: 32px;
				background: rgba(18, 91, 174, 0.22);
				border: 1px solid color(srgb 0.07 0.4 0.68 / 0.36);
				cursor: pointer;

				span {
					width: 175px;
					display: block;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 12px;
					color: #C9E1EF;
					line-height: 32px;
				}

				.jindu {
					width: 150px;
					display: flex;
					align-items: center;

					i {
						display: block;
						width: 8px;
						height: 8px;
						border-radius: 50%;
						margin: 0 8px 0 0;
					}

					i.jinxing {
						border: solid 2px #31ff62;
					}

					i.wancheng {
						border: solid 2px #4689da;
					}

					i.zanting {
						border: solid 2px #ffc53f;
					}

					em {
						font-size: 12px;
						color: #C9E1EF;
						line-height: 27px;
						font-style: normal;
					}

				}

				.jinduT {
					width: 115px;
					font-size: 12px;
					color: #C9E1EF;
					line-height: 27px;
				}
			}

			li:nth-child(2n) {
				background: rgba(18, 91, 174, 0.1);
				border: none;
			}

		}

		dl.shijian-list {
			width: 330px;
			margin: 0 auto;

			dd {
				width: 100%;
				margin: 0 0 10px 0;
				cursor: pointer;

				.sjtop {
					display: flex;
					width: 100%;
					align-items: center;
					justify-content: space-between;

					i {
						width: 4px;
						height: 4px;
						background: #09E5FE;
						border-radius: 50%;
					}

					span {
						font-size: 12px;
						color: #C9E1EF;
						line-height: 28px;
					}

					hr.borcb {
						width: 40%;
						border: dashed 1px #C9E1EF;
					}

					hr.borbj {
						width: 68%;
						border: solid 1px #C9E1EF;
					}

					em {
						width: 30px;
						height: 20px;
						border-radius: 3px;
						font-size: 12px;
						color: #E0E5FA;
						font-style: normal;
						text-align: center;
						line-height: 20px;
					}

					em.cuiban {
						background: rgba(255, 132, 0, 0.6);
						border: 1px solid #FF8400;
					}
				}

				.sjname {
					display: flex;
					width: 100%;
					align-items: center;

					em {
						display: block;
						width: 100px;
						height: 20px;
						font-style: normal;
						font-size: 12px;
						text-align: center;
						line-height: 20px;
					}

					em.weiBj {
						color: #FF8400;
						background: url("~@/assets/images/paishui/jx14.png") no-repeat left center;
						background-size: 100% 100%;
					}

					em.yiWc {
						color: #0D85F5;
						background: url("~@/assets/images/paishui/jx141.png") no-repeat left center;
						background-size: 100% 100%;
					}

					span {
						font-size: 12px;
						color: #FFFFFF;
						line-height: 18px;
						width: 100%;
					}
				}
			}
		}

		ul.fxyh-list {
			width: 100%;

			li {
				display: flex;
				width: 100%;
				padding: 0 15px;
				line-height: 28px;
				cursor: pointer;

				span {
					width: 240px;
					display: block;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 12px;
					color: #C9E1EF;
					line-height: 27px;
				}

				.jindu {
					width: 90px;
					display: flex;
					align-items: center;

					i {
						display: block;
						width: 8px;
						height: 8px;
						border-radius: 50%;
						margin: 0 8px 0 0;
					}

					i.yiZg {
						border: solid 2px #00deff;
					}

					i.weiZg {
						border: solid 2px #ef3805;
					}

					i.zhongZg {
						border: solid 2px #2ef25f;
					}

					i.wuxZg {
						border: solid 2px #e4b33f;
					}

					em {
						font-size: 12px;
						color: #C9E1EF;
						line-height: 27px;
						font-style: normal;
					}
				}
			}

			li:hover {
				background: color(srgb 0.22 0.39 0.95 / 0.25);
			}
		}

	}

	.map-tab {
		position: fixed;
    left: 457px;
    top: 240px;

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

		.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.48);
			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 1px #0dadf7;
				margin: 0 10px;
				text-align: center;
				background: #0dadf7;
				cursor: pointer;

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

				span {
					font-size: 14px;
					color: #fff;
				}
			}
		}
	}
	.map-tab-tc {
		position: fixed;
    right: 470px;
    top: 183px;

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

		.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.48);
			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 1px #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{
    position: fixed;
    left: 456px !important;
    top: 240px !important;

    .map-tab-in {
      border: solid 1px #0f7caf;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      background: color(srgb 0.06 0.22 0.37 / 0.48);
      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 1px #0dadf7;
        margin: 0 10px;
        text-align: center;
        background: #0dadf7;
        cursor: pointer;

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

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

		.el-pagination .el-pager li.active {
		color: #22bcfe !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;
	}





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

	::-webkit-scrollbar-thumb {
		/* background-color: #01c8dc;
	border-radius: 3px; */
		background-color: #b6b6b6;
	}

	/*全局滚动条样式结束*/
  .sbgl_list{
    display: flex;
    flex-direction: column;
    width: 510px;
    z-index: 999;
    .sbgl_zs{
      flex-direction: row;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #496fa6;
      div{
        span{
          font-size: 16px;
          font-weight: bold;
          display: block;
          color: #fff;
          padding-top: 16px;
        }
        b{
          font-family: 'ysbth';
          font-size: 22px;
          line-height: 40px;

        }
        h4{
          font-size: 35px;
          font-family: 'ysbth';
          color: #00b2ff;
          text-shadow:0px 0px 9px #05918a;
          padding-top: 12px;
        }
        i{
          font-size: 12px;
          color: #fff;
          font-style: normal;
        }
      }
      .sbgl_num1{
        b{
          background: -webkit-linear-gradient(bottom,#96adf7,#fff); /* Chrome, Safari */
          background: linear-gradient(bottom,#96adf7,#fff); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 兼容不支持background-clip的浏览器 */
          /*box-shadow: 0px 0px 5px #3063ca;*/

        }
      }
      .sbgl_num2{
        b{
          background: -webkit-linear-gradient(bottom,#96f7ab,#fff); /* Chrome, Safari */
          background: linear-gradient(bottom,#96f7ab,#fff); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 兼容不支持background-clip的浏览器 */
          /*box-shadow: 0px 0px 5px #3063ca;*/

        }
      }
      .sbgl_num3{
        b{
          background: -webkit-linear-gradient(bottom,#ababab,#fff); /* Chrome, Safari */
          background: linear-gradient(bottom,#ababab,#fff); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 兼容不支持background-clip的浏览器 */
          /*box-shadow: 0px 0px 5px #3063ca;*/

        }
      }
    }
    .sbgl_fs{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .sbgl_fs_div{
        display: flex;
        flex-direction: row;
        padding-top: 15px;
        .sbgl_fs_left{
          p{
            font-size: 16px;
            font-weight: bold;
            padding-left: 25px;
            background: url("../../assets/index_img/sbgl_icon2.png") no-repeat left;
            color: #fff;
          }
          b{
            background: -webkit-linear-gradient(bottom,#96adf7,#fff); /* Chrome, Safari */
            background: linear-gradient(bottom,#96adf7,#fff); /* 标准语法 */
            -webkit-background-clip: text; /* Chrome, Safari */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            color: transparent; /* 兼容不支持background-clip的浏览器 */
            /*box-shadow: 0px 0px 5px #3063ca;*/
            display: block;
            font-family: 'ysbth';
            font-size: 20px;
            padding-left: 25px;
            line-height: 35px;
          }
          span{
            color: #fff;
            font-size: 12px;
            padding-left: 25px;
          }
        }
        .sbgl_fs_right{
          padding-left: 15px;
          p{
            font-size: 12px;
            padding-left: 10px;
            color: #fff;
            position: relative;
          }
          p::after{
            position: absolute;
            content: '';
            display: block;
            width: 5px;
            height: 5px;
            left: 0px;
            top:7px;
          }
          p.zx::after{
            background: #03f38a;
          }
          p.lx::after{
            background: #afafaf;
          }
          span.zx_span{
            color: #03f38a;
            height: 23px;
            line-height: 23px;
          }
          span.lx_span{
            color: #afafaf;
            height: 23px;
            line-height: 23px;
          }
        }
      }
    }
  }
</style>
<style lang="scss">

	.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-timeline {
		padding-left: 8px !important;
	}

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

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

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

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

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

	.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-timeline-item__node {
		background-color: #1fe3d2;
		box-shadow: 0px 0px 5px #1fe3d2;
	}
	.jinduT {
		.el-progress__text {
			color: #00deff;
		}
	}
    .ps-table{
		margin-bottom: 15px !important;
		 .el-table__header-wrapper th,
		 .el-table__fixed-header-wrapper th {
			background-color: #2e3952 !important;
			color: #22bcfe !important;
		}
	}
	.ps-table-tb{
		background-color: rgb(33 44 60 / 74%) !important;
		 .el-table__header-wrapper th,
		 .el-table__fixed-header-wrapper th {
			     border: 1px solid color(srgb 0.07 0.4 0.68 / 0.36);
			background-color: rgba(18, 91, 174, 0.22) !important;
			color: #22bcfe !important;
		}
		td.el-table__cell,
		th.el-table__cell.is-leaf {
			border-bottom: 1px solid #455373 !important;
		}
		tr{
			background-color: rgba(18, 91, 174, 0.22) !important;
		}
		.el-table__body-wrapper td {
			background-color: rgb(8 28 66 / 11%)  !important;
			color: #fff;
			font-size: 12px !important;
		}
		.cell{

			.el-button {
				padding: 5px 0 !important;
				color: #fff !important;
				background-color: rgb(0 88 255 / 11%) !important;
				border: 1px solid #627ecb !important;
			}
		}
	}





    .btnOption_contain {
    	width: 150px;
		.ss-input {
			background-color: #22bcf3 !important;
			padding: 5px 10px !important;
		}

		.cz-input {
			background-color: #424e5e !important;
			padding: 5px 10px !important;
		}

		.el-button{
			width: 60px;
			height: 30px;
			background-color: #14375A !important;
			border: 1px solid #28529c!important;
			color: #fff;
		}
    }



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

	.el-table,
	.el-table__expanded-cell {
		background-color: #212c3c;
	}

	.sj-in {
		width: 150px !important;
		margin: 0 5px 0 0 !important;

		.el-input__inner {
			background-color: rgba(18, 91, 174, 0.22) !important;
			color: #fff;
			height: 28px;
			line-height: 28px;
			border: 1px solid #475b93 !important;
			color: #22bcfe !important;
		}
		.el-input {
			.el-input__inner {
				background: transparent;
			}
		}
	}
	.el-table--border::after, .el-table--group::after, .el-table::before{
		display: none;
	}

	.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;
	}
	.ps_sbhz{
		height: 300px;
		.ps_sbhz_div_flex_c{
			display: flex !important;
			flex-direction: column !important;
			justify-content: center;
			align-items:center;
			width: 33% !important;
			img{
				width: 100px;
				margin-top: 20px;
			}
			.ps_sbhz_txt{
				margin-top: -20px !important;

				p{
					color: #fff;
					letter-spacing: 2px;
					font-size: 14px;
				}
				b{
					background: -webkit-linear-gradient(top, #aaebff, #08bfce); /* Chrome, Safari */
					background: linear-gradient(top,#aaebff, #08bfce); /* 标准语法 */
					-webkit-background-clip: text; /* Chrome, Safari */
					background-clip: text;
					-webkit-text-fill-color: transparent; /* Chrome, Safari */
					color: transparent; /* 兼容不支持background-clip的浏览器 */
					/*box-shadow: 0px 0px 5px #3063ca;*/
					font-size: 20px;
					font-family: ysbth;
				}
			}

		}
		.ps_sbhz_div{
			display: block;
			float: left;
			width: 182px;
			height: 100px;
			img{
				width: 100px;
				float: left;
			}
			.ps_sbhz_txt{
				margin-top: 20px;
				p{
					color: #fff;
					letter-spacing: 2px;
					font-size: 14px;
				}
				b{
					background: -webkit-linear-gradient(top, #aaebff, #08bfce); /* Chrome, Safari */
					background: linear-gradient(top,#aaebff, #08bfce); /* 标准语法 */
					-webkit-background-clip: text; /* Chrome, Safari */
					background-clip: text;
					-webkit-text-fill-color: transparent; /* Chrome, Safari */
					color: transparent; /* 兼容不支持background-clip的浏览器 */
					/*box-shadow: 0px 0px 5px #3063ca;*/
					font-size: 20px;
					font-family: ysbth;
				}
			}
		}
	}


  //供水-雨水
  .layers_paishui_yushui{

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

  //供水-污水
  .layers_paishui_wushui{

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

  //供水-合流
  .layers_paishui_heliu{

    .el-tree-node__expand-icon{
      color: #2c3ec4 !important; /* 自定义背景色 */
    }
    .el-tree-node__content:hover {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .is-current:focus {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .is-focusable:focus {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .el-tree-node:active {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__inner {
      border: 1px solid #2c3ec4 !important; /* 自定义背景色 */
      background: rgba(44, 62, 195, 0.28) !important; /* 自定义背景色 */
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgb(44, 62, 195, 0.4) !important; /* 自定义背景色 */
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgb(44, 62, 195, 0.7) !important; /* 自定义背景色 */
      border-color: #2c3ec4 !important; /* 自定义背景色 */
    }
    .el-checkbox__inner::after {
      border-color: #fff !important; /* 自定义背景色 */
    }
  }
  .el-tooltip__popper.is-dark{
    border: solid 1px #0dadf7;
    background: color(srgb 0.06 0.22 0.37 / 0.48);
    -webkit-box-shadow: inset 0px 8px 14px color(srgb 0.05 0.68 0.97 / 0.22);
    box-shadow: inset 0px 8px 14px color(srgb 0.05 0.68 0.97 / 0.22);
    color: #FFF;
    font-size: 14px;
    line-height: 22px;
  }
  .el-tooltip__popper.is-dark span{
    display: block;
  }

</style>