visu_lifeline/src/views/industry/jcxt.vue

<!--可视化公共模板 林业-->
<template>
	<div class="visual-con lifeline-con">
		<!--主体-->
		<div class="visual-body">
			<div class="life-header2">
				<div class="time-left">
					<h5 id="time">15:30:00</h5>
					<h6 id="day">2025.02.01</h6>
				</div>
        <weatherHeader></weatherHeader>
				<span>
					<img src="../../assets/index_img/life-LOGO.png" alt="">
					四平市城市生命线监管平台-监测系统</span>
				<div class="header-right-user-home">
<!--					<img src="../../assets/index_img/user-img.png" alt="" />-->
					<img src="../../assets/index_img/home-img.png" alt="" @click="goToHomePage"/>
				</div>
			</div>
			<!--左右黑色渐变独立背景-->
			<div class="line-left"></div>
			<div class="line-right"></div>
			<div class="con_left_2_bg">
			</div>
			<div class="con_right_2_bg">
			</div>
			<!--资源-->
			<el-popover placement="right" trigger="click" popper-class="zy-con">
				<el-select v-model="value" placeholder="请选择" class="sj-select" popper-class="sj-s-pop">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="value2" placeholder="请选择" class="sj-select" popper-class="sj-s-pop">
					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="value3" placeholder="请选择" class="sj-select" popper-class="sj-s-pop">
					<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button class="sj-btn-icon-h">查询</el-button>

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


			<!--底部按钮区域背景-->
			<div class="button-list-bg">
			</div>
			<!--左侧资产盘点 ps:资产盘点单元格内是竖向的流式布局，数据要竖向循环-->
			<div class="left-content">
				<div class="title-bar">
					<span>设备汇总</span>
				</div>
				<div class="content-box sbhz">
					<div class="sbhz_div box-row">
						<div class="sbhz_div_txt rq" @click="selectedDiv = 1" :class="selectedDiv === 1 ? 'on' : ''" >
							<h5>燃气设备数量</h5>
							<b>{{ deviceTotalList ? deviceTotalList[0].deviceTotal || '--' : '' }}</b>
							<p><span class="zx">在线<i>{{ deviceTotalList[0].onlinePercent }}%</i></span><span class="lx">离线<i>{{ deviceTotalList[0].offlinePercent }}%</i></span></p>
						</div>
						<div class="sbhz_div_txt ps" @click="selectedDiv = 2"  :class="selectedDiv === 2 ? 'on' : ''">
							<h5>排水设备数量</h5>
							<b>{{ deviceTotalList ? deviceTotalList[1].deviceTotal || '--' : '' }}</b>
							<p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[1].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[1].offlinePercent || '--' : '' }}%</i></span></p>
						</div>
						<div class="sbhz_div_txt gr" @click="selectedDiv = 3"  :class="selectedDiv === 3 ? 'on' : ''">
							<h5>供热设备数量</h5>
							<b>{{ deviceTotalList ? deviceTotalList[2].deviceTotal || '--' : '' }}</b>
							<p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[2].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[2].offlinePercent || '--' : '' }}%</i></span></p>
						</div>
					</div>
					<div class="sbhz_div box-row">
						<div class="sbhz_div_txt ql" @click="selectedDiv = 4"  :class="selectedDiv === 4 ? 'on' : ''">
							<h5>桥梁设备数量</h5>
							<b>{{ deviceTotalList ? deviceTotalList[3].deviceTotal || '--' : '' }}</b>
							<p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[3].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[3].offlinePercent || '--' : '' }}%</i></span></p>
						</div>
						<div class="sbhz_div_txt gl" @click="selectedDiv = 6"  :class="selectedDiv === 6 ? 'on' : ''">
							<h5>管廊设备数量</h5>
							<b>{{ deviceTotalList ? deviceTotalList[5].deviceTotal || '--' : '' }}</b>
							<p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[5].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[5].offlinePercent || '--' : '' }}%</i></span></p>
						</div>
						<div class="sbhz_div_txt gs" @click="selectedDiv = 5"  :class="selectedDiv === 5 ? 'on' : ''">
							<h5>供水设备数量</h5>
							<b>{{ deviceTotalList ? deviceTotalList[4].deviceTotal || '--' : '' }}</b>
							<p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[4].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[4].offlinePercent || '--' : '' }}%</i></span></p>
						</div>
					</div>
				</div>
				<div class="title-bar">
					<span>设备类型</span>
				</div>
				<div class="content-box sblx">
					<el-tabs v-model="activeNameSblx" class="sj-top-tab" @tab-click="sblx_chart" v-show="currentBtmHighIdx == 0">
						<el-tab-pane label="燃气" name="1">
						</el-tab-pane>
						<el-tab-pane label="排水" name="2" >
						</el-tab-pane>
						<el-tab-pane label="供热" name="3">
						</el-tab-pane>
						<el-tab-pane label="桥梁" name="4">
						</el-tab-pane>
						<el-tab-pane label="管廊" name="6">
						</el-tab-pane>
						<el-tab-pane label="供水" name="5">
						</el-tab-pane>
					</el-tabs>
					<!-- 设备类型图表 -->
					<div class="sblx_div box-row">
						<div id="sblx_chart"></div>
						<div class="sblx_list">
							<h5>
								<span>设备类型</span>
								<span>状态</span>
								<span>数量</span>
							</h5>
							<div class="scroll-container hei_scroll">
								<p
									v-for="(e,idx) in deviceTypeList"
									:key="idx"
								>
									<span>{{ e.deviceType }}</span>
									<span><i class="green">{{ e.deviceTypeOnline }}</i>/<i class="red">{{ e.deviceTypeOffline }}</i></span>
									<span>{{ e.deviceTypeCount }}</span>
								</p>
							</div>
						</div>
					</div>

				</div>
				<div class="title-bar">
					<span>设备报警</span>
				</div>
				<div class="content-box sbbj">
<!--					<el-select v-model="value" placeholder="请选择">-->
<!--						<el-option-->
<!--								v-for="item in options"-->
<!--								:key="item.value"-->
<!--								:label="item.label"-->
<!--								:value="item.value">-->
<!--						</el-option>-->
<!--					</el-select>-->
					<div id="sbbj_div" @click="toSbList"></div>
				</div>
			</div>
			<!--设备列表-->
			<div class="right-content">
				<div class="title-bar">
					<span>设备列表</span>
				</div>
				<div class="content-box2 content-box4">
					<el-tabs v-model="activeNameListSblx" class="sj-top-tab" @tab-click="getDeviceList" v-show="currentBtmHighIdx == 0">
						<el-tab-pane label="燃气" name="1">
						</el-tab-pane>
						<el-tab-pane label="排水" name="2" >
						</el-tab-pane>
						<el-tab-pane label="供热" name="3">
						</el-tab-pane>
						<el-tab-pane label="桥梁" name="4">
						</el-tab-pane>
						<el-tab-pane label="管廊" name="6">
						</el-tab-pane>
						<el-tab-pane label="供水" name="5">
						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="content-box flex-c sblb">
					<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input2"
							  class="sj-input-style">
					</el-input>
					<div class="list-ul-100-tit">
						<span>行业</span>
						<span>设备名称</span>
						<span>状态</span>
					</div>
					<div class="scroll-container hei_scroll">
            <ul class="list-ul-100" >
              <li v-for="e in deviceList" @click="dropLocation(e.latitude,e.longitude)">
                <span :class="e.industryName">{{e.industryName}}</span>
                <span>{{e.deviceName}}</span>
                <span :class="e.onlineStatus == '在线' ? 'zx' : 'lx' ">{{e.onlineStatus}}</span>
              </li>
            </ul>
					</div>
				</div>
				<div class="title-bar">
					<span>运行状态</span>
				</div>
				<div class="content-box sbbj">
					<div id="yxzt_div"></div>

				</div>

			</div>

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


			<!-- 底部按钮 -->
			<div class="life-btm-btn">
				<div class="btn-span btn-span7" :class="currentBtmHighIdx == 0 ? 'on' : '' " @click="industryHasChanged(0)">
					<span>全部</span>
				</div>
				<div class="btn-span btn-span7 "  :class="currentBtmHighIdx == 1 ? 'on' : '' " @click="industryHasChanged(1)">
					<span>燃气</span>
				</div>
				<div class="btn-span btn-span7" :class="currentBtmHighIdx == 3 ? 'on' : '' " @click="industryHasChanged(3)">
					<span>热力</span>
				</div>
				<div class="btn-span btn-span7" :class="currentBtmHighIdx == 5 ? 'on' : '' " @click="industryHasChanged(5)">
					<span>供水</span>
				</div>
				<div class="btn-span btn-span7" :class="currentBtmHighIdx == 2 ? 'on' : '' " @click="industryHasChanged(2)">
					<span>排水</span>
				</div>
				<div class="btn-span btn-span7" :class="currentBtmHighIdx == 6 ? 'on' : '' " @click="industryHasChanged(6)">
					<span>管廊</span>
				</div>
				<div class="btn-span btn-span7" :class="currentBtmHighIdx == 4 ? 'on' : '' " @click="industryHasChanged(4)">
					<span>桥梁</span>
				</div>
			</div>

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

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

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

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

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

import { deviceAlarm, getDeviceList, getDeviceSummary, getDeviceType } from '@/api/jcst.js'

import DetailDialog from '@/components/DetailDialog/index.vue'

import * as echarts from 'echarts'

export default {
		components: {
			supermap,
			DetailDialog,
      weatherHeader
		},
		metaInfo() {
			return {
				title: '四平市城市生命线',
				meta: [{
						charset: "utf-8"
					},
					{
						name: "viewport",
						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
					}
				]
			}
		},
		created() {
      this.getDeviceSummary(0)
		},
		mounted() {
			// 初始化地图数据
			this.getSuperMapUrl();

			setTimeout(() => {
        		this.time();
				this.title = '四平市城市生命线'
				this.sblx_chart(1);
				this.sbbj_div();
				this.yxzt_div();
        this.getDeviceList(1)
			}, 1000)
		},
		computed:{
			listContent() {
				return this.lists[this.selectedDiv] || []; // 如果selectedDiv不存在于lists中，返回空数组以避免错误。
			},

		},
		data() {
			return {
        dialogVisibleSj:false,
			// 		<li @click="dialogVisibleSj = true"  v-for="item in currentList" :key="item.id">
			// 		<span class="item.hydh">{{item.hy}}</span>
			// <span>{{item.tit}}</span>
			// <span class="item.ztdh">{{item.zt}}</span>
			// </li>
				selectedDiv: 1, // 当前选中的div的编号
				lists:{
					1:[
						{id:1,hydh:'rq',hy:'燃气',tit:'设备型号AHHDDDD',ztdh:'zx',zt:'在线'},
						{id:2,hydh:'rq',hy:'燃气',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
					],
					2:[
						{id:1,hydh:'ps',hy:'排水',tit:'设备型号AHHDDDD',ztdh:'lx',zt:'离线'},
						{id:2,hydh:'ps',hy:'排水',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
					],
					3:[
						{id:1,hydh:'rl',hy:'供热',tit:'设备型号AHHDDDD',ztdh:'zx',zt:'在线'},
						{id:2,hydh:'rl',hy:'供热',tit:'设备型号AHH555D',ztdh:'lx',zt:'离线'},
					],
					4:[
						{id:1,hydh:'ql',hy:'桥梁',tit:'设备型号AHHDDDD',ztdh:'zx',zt:'在线'},
						{id:2,hydh:'ql',hy:'桥梁',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
					],
					5:[
						{id:1,hydh:'gl',hy:'管廊',tit:'设备型号AHHDDDD',ztdh:'zx',zt:'在线'},
						{id:2,hydh:'gl',hy:'管廊',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
					],
					6:[
						{id:1,hydh:'gs',hy:'供水',tit:'设备型号AHHDDDD',ztdh:'zx',zt:'在线'},
						{id:2,hydh:'gs',hy:'供水',tit:'设备型号AHH555D',ztdh:'zx',zt:'在线'},
					]
				},


				activeNameSblx: '1',
				activeNameListSblx: '1',
        options: [
          {
            value: '选项1',
            label: '周'
          }, {
            value: '选项2',
            label: '月度'
          }, {
            value: '选项3',
            label: '季度'
          }, {
            value: '选项4',
            label: '年度'
          }
        ],
        options2: [
          {
            value: '选项1',
            label: '周'
          }, {
            value: '选项2',
            label: '月度'
          }, {
            value: '选项3',
            label: '季度'
          }, {
            value: '选项4',
            label: '年度'
          }
        ],
        options3: [
          {
            value: '选项1',
            label: '周'
          }, {
            value: '选项2',
            label: '月度'
          }, {
            value: '选项3',
            label: '季度'
          }, {
            value: '选项4',
            label: '年度'
          }
        ],
				value: '周',
				value2: '',
				value3: '',
				paramIndustry:1,
				paramDeviceIndustry:1,
				deviceList:[],          // 设备列表
				deviceTypeList:[],      // 设备类型列表
				deviceTotalList:[], 	// 设备汇总列表
				currentBtmHighIdx:0,
			}
		},
		methods: {
			goToHomePage() {
				window.location.href = '/homePage';
			},
			time() {
				let dt = new Date();
				let y = dt.getFullYear();
				let mt = dt.getMonth() + 1;
				mt = mt >= 10 ? mt : '0' + mt
				let day = dt.getDate() >= 10 ? dt.getDate() : '0' + dt.getDate();
				let h = dt.getHours() >= 10 ? dt.getHours() : '0' + dt.getHours();
				let m = dt.getMinutes() >= 10 ? dt.getMinutes() : '0' + dt.getMinutes();
				let s = dt.getSeconds() >= 10 ? dt.getSeconds() : '0' + dt.getSeconds();
				document.getElementById("day").innerHTML = y + "." + mt + "." + day + ""; //2022年1月17日
				document.getElementById("time").innerHTML = h + ":" + m + ":" + s; //16:28:03
				setTimeout(() => {
				this.time()
				}, 1000);
			},
			getDeviceSummary(industry=0){
				getDeviceSummary(industry).then(res => {
					this.deviceTotalList = res.data || []
				})
			},
			industryHasChanged(industry=0){
				if(industry == this.currentBtmHighIdx) return;
				this.activeNameSblx = industry + ''
				this.activeNameListSblx = industry + ''
				this.currentBtmHighIdx = industry
				// this.getDeviceSummary(industry)
				if(industry != 0){
					this.sblx_chart(industry)
					this.getDeviceList(industry)
					this.sbbj_div(industry,1)
				}else{
          this.sblx_chart(1)
          this.activeNameSblx=1+ ''
          this.activeNameListSblx=1+ ''
        }

			},
			getDeviceList(industry=1){
				this.paramDeviceIndustry = industry
				if(typeof(industry) != 'number'){
					this.paramDeviceIndustry = industry.name
				}
				getDeviceList(this.paramDeviceIndustry).then(res => {
					let deviceMarkersList = []
					if (res.rows != null && res.rows.length > 0) {
						this.deviceList = res.rows || []
						for (let i = 0; i < res.rows.length; i++) {
							let markersMap = {
							lng: 124.59,
							lat: 43.02,
							icon: "shebei",
							bindPopupHtml: "",
							click: "preview",
							parameter: {
								latitude: res.rows[i].latitude || '',
								longitude: res.rows[i].longitude || '',
								deviceName: res.rows[i].deviceName || '',
								industryName: res.rows[i].industryName || '',
								onlineStatus: res.rows[i].onlineStatus || '',
							},
							keepBindPopup: false,
							isAggregation: false,
							};
							markersMap.lng = res.rows[i].longitude * 1;
							markersMap.lat = res.rows[i].latitude * 1;
							deviceMarkersList.push(markersMap);
						}
						setTimeout(() => {
							this.$refs.supermap.clearM();
							this.$refs.supermap.setMarkers(deviceMarkersList);
						}, 3000);
						} else {
						setTimeout(() => {
							this.$refs.supermap.clearM();
							this.$refs.supermap.clearMRadius();
						}, 1000);
					}
				})
			},
			preview(e) {
				let deviceInfo = {
					"设备名称": e.deviceName,
					"所属行业": e.industryName,
					"设备状态": e.onlineStatus,
					"经度": e.longitude,
					"纬度": e.latitude,
				}
				this.$refs.detailDialog.openDetail('隐患管理',deviceInfo);
			},
			dropLocation(lat, lng) {
				this.$refs.supermap.dropLocation(lat * 1, lng * 1)
			},
			//设备报警表单点击后跳转新页面
			toSbList(){
				this.$router.push('/yuJingList')
			},
			//设备类型chart
			sblx_chart(industry=1) {
				this.paramIndustry = industry
				if(typeof(industry) != 'number'){
					this.paramIndustry = industry.name
				}
				var myChart = echarts.init(document.getElementById("sblx_chart"));
				getDeviceType(this.paramIndustry).then(res => {
					if(res.data){
						this.deviceTypeList = res.data || []
						let seriesData = []
						res.data.forEach(e => {
							seriesData.push({
								name:e.deviceType,
								value:e.deviceTypeCount
							})
						})
						var option = {
							title: {
								text: "",
								x: "center",
							},
							color: [
								"#37a2da",
								"#32c5e9",
								"#9fe6b8",
								"#ffdb5c",
								"#ff9f7f",
								"#fb7293",
								"#e7bcf3",
								"#8378ea",
							],
							tooltip: {
								trigger: "item",
								formatter: "{a} <br/>{b} : {c} ({d}%)",
							},
							toolbox: {
								show: false,
								feature: {
									mark: { show: true },
									dataView: { show: true, readOnly: false },
									magicType: {
										show: true,
										type: ["pie", "funnel"],
									},
									restore: { show: true },
									saveAsImage: { show: true },
								},
							},
							calculable: true,
							series: [

								{
									name: "设备类型",
									type: "pie",
									radius: [10, 80],

									roseType: "area",
									labelLine: {
										normal: {
											length: 1,
											length2: 4,
											lineStyle: {
												width: 1
											}
										}
									},
									data: seriesData
								},
							],
						};
						myChart.setOption(option);
					}
				})

			},
			//设备报警chart
			sbbj_div(industry=1,timegran=1) {
				var myChart = echarts.init(document.getElementById("sbbj_div"));
				deviceAlarm({industry,timegran}).then(res => {
					if(res.data){
						let seriesColors = [
							[
								{
									offset: 0,
									color: "#29acff",
								},
								{
									offset: 1,
									color: "#4bdfff",
								},
							],
							[
								{
									offset: 0,
									color: "#01c871",
								},
								{
									offset: 1,
									color: "#55f49c",
								},
							],
							[
								{
									offset: 0,
									color: "#3d93f2",
								},
								{
									offset: 1,
									color: "#5dc1fd",
								},
							],
							[
								{
									offset: 0,
									color: "#af89d6",
								},
								{
									offset: 1,
									color: "#af89d6",
								},
							],
						]
						const allNames = [];
						res.data.forEach((day,idx) => {
							if(idx == 7) return;
							day.dataList.forEach(item => {
								allNames.push(item.deviceType);
							});
						});
						let seriesData =[]
						if(allNames.length != 0){
							seriesData = allNames.map((typeName,idx) => {
							return {
									name: typeName,
									type: 'bar',
									barWidth: "10px",
									itemStyle: {
										normal: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, seriesColors[idx]),
											barBorderRadius: 0,
										},
									},
									data: res.data.map(day => {
										const match = day.dataList.find(item => item.deviceType === typeName);
										return match ? match.typeCount : '-';
									})
								};
							});
						}
						var option = {
							tooltip: {
								trigger: "item",
								axisPointer: {
									// 坐标轴指示器，坐标轴触发有效
									type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
								},
							},
							grid: {
								left: "2%",
								right: "4%",
								bottom: "0%",
								top: "23%",
								containLabel: true,
							},
							// legend: {
							// 	data: ["类型1", "类型2", "类型3", "同比"],
							// 	left: "7%",
							// 	top: "1%",
							// 	textStyle: {
							// 		color: "#fff",
							// 	},
							// 	itemWidth: 12,
							// 	itemHeight: 4,
							// 	itemGap: 25,
							// },
							xAxis: {
								type: "category",
								data: ['周五','周六','周日','周一','周二','周三','周四'],
								axisLine: {
									lineStyle: {
										color: "#cdd5e2",
									},
								},
								axisLabel: {
									textStyle: {
										color: "#fff",
									},
								},
							},
							yAxis: [
								{
									type: "value",
									axisLine: {
										show: false,
										lineStyle: {
											color: "#cdd5e2",
										},
									},
									splitLine: {
										show: false,
									},
									axisLabel: {
										textStyle: {
											color: "#fff",
										},
									},
									axisLine: {
										lineStyle: {
											color: "#fff",
										},
									},
								},
								{
									type: "value",
									name: "",
									nameTextStyle: {
										color: "#fff",
										fontSize: '10px'
									},
									position: "right",
									axisLine: {
										lineStyle: {
											color: "#cdd5e2",
										},
									},
									splitLine: {
										show: false,
									},
									axisLabel: {
										show: true,
										formatter: "{value} %", //右侧Y轴文字显示
										textStyle: {
											color: "#fff",
										},
									},
								},
							],
							series:seriesData,
						};
						myChart.setOption(option,true);
					}
				})
			},
			//运行状态chart
			yxzt_div() {
				var myChart = echarts.init(document.getElementById("yxzt_div"));
				var xLabel = ["8:00", "8:10", "8:20", "8:30", "8:40", "8:50"];
				var goToSchool = ["40", "60", "22", "85", "50", "40"];
				var goOutSchool = ["20", "50", "12", "65", "30", "60"];

				var option = {
					tooltip: {
						trigger: "axis",
						axisPointer: {
							lineStyle: {
								color: {
									type: "linear",
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										{
											offset: 0,
											color: "rgba(126,199,255,0)", // 0% 处的颜色
										},
										{
											offset: 0.5,
											color: "rgba(126,199,255,1)", // 100% 处的颜色
										},
										{
											offset: 1,
											color: "rgba(126,199,255,0)", // 100% 处的颜色
										},
									],
									global: false, // 缺省为 false
								},
							},
						},
						formatter: (p) => {
							let dom = `<div style="width: 79px;
	height: 50px;;color:#fff;position: relative;">
        <svg style="position: absolute;top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100" height="71" viewBox="0 0 84 55">
      <defs>
        <style>
          .cls-1 {
            fill: #07172c;
            fill-opacity: 0.8;
            stroke: #a7d8ff;
            stroke-linejoin: round;
            stroke-opacity: 0.2;
            stroke-width: 1px;
            fill-rule: evenodd;
          }

        </style>
      </defs>
      <path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
        transform="translate(-258.5 -592.5)" />
    </svg>
        <div style="padding: 4px 8px 4px 14px;display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;position: relative;z-index: 1;">
            <div style="margin-bottom: 4px;width:100%;display:${
									p[0] ? "flex" : "none"
									};justify-content:space-between;align-items:center;">
                <span style="font-size:12px;color:#7ec7ff;">${
									p[0] ? p[0].seriesName : ""
									}</span>
                <span style="font-size:12px;color:#fff;">${
									p[0] ? p[0].data : ""
									}</span>
            </div>
            <div style="width:100%;height:100%;display:${
									p[1] ? "flex" : "none"
									};justify-content:space-between;align-items:center;">
                <span style="font-size:12px;color:#7ec7ff;">${
									p[1] ? p[1].seriesName : ""
									}</span>
                <span style="font-size:12px;color:#fff;">${
									p[1] ? p[1].data : ""
									}</span>
            </div>
        </div>
    </div>`;
							return dom;
						},
					},
					legend: {
						align: "left",
						right: "5%",
						top: "2%",
						type: "plain",
						textStyle: {
							color: "#fff",
							fontSize: 12,
						},
						// icon:'rect',
						itemGap: 25,
						itemWidth: 18,
						icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",

						data: [
							{
								name: "在线",
							},
							{
								name: "离线",
							},
						],
					},
					grid: {
						top: "5%",
						left: "8%",
						right: "4%",
						bottom: "22%",
						// containLabel: true
					},
					xAxis: [
						{
							type: "category",
							boundaryGap: false,
							axisLine: {
								//坐标轴轴线相关设置。数学上的x轴
								show: true,
								lineStyle: {
									color: "#233653",
								},
							},
							axisLabel: {
								//坐标轴刻度标签的相关设置
								textStyle: {
									color: "#7ec7ff",
									padding: 16,
									fontSize: 14,
								},
								formatter: function (data) {
									return data;
								},
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: "#192a44",
								},
							},
							axisTick: {
								show: false,
							},
							data: xLabel,
						},
					],
					yAxis: [
						{
							name: "",
							nameTextStyle: {
								color: "#7ec7ff",
								fontSize: 12,
								padding: 10,
							},
							min: 0,
							splitLine: {
								show: true,
								lineStyle: {
									color: "#192a44",
								},
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: "#233653",
								},
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: "#7ec7ff",
									padding: 4,
								},
								formatter: function (value) {
									if (value === 0) {
										return value;
									}
									return value;
								},
							},
							axisTick: {
								show: false,
							},
						},
					],
					series: [
						{
							name: "在线",
							type: "line",
							symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
							showAllSymbol: true,
							symbolSize: 0,
							smooth: true,
							lineStyle: {
								normal: {
									width: 2,
									color: "rgba(25,163,223,1)", // 线条颜色
								},
								borderColor: "rgba(0,0,0,.4)",
							},
							itemStyle: {
								color: "rgba(25,163,223,1)",
								borderColor: "#646ace",
								borderWidth: 2,
							},
							tooltip: {
								show: true,
							},
							areaStyle: {
								//区域填充样式
								normal: {
									//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
									color: new echarts.graphic.LinearGradient(
											0,
											0,
											0,
											1,
											[
												{
													offset: 0,
													color: "rgba(25,163,223,.3)",
												},
												{
													offset: 1,
													color: "rgba(25,163,223, 0)",
												},
											],
											false
									),
									shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
									shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
								},
							},
							data: goToSchool,
						},
						{
							name: "离线",
							type: "line",
							symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
							showAllSymbol: true,
							symbolSize: 0,
							smooth: true,
							lineStyle: {
								normal: {
									width: 2,
									color: "rgba(56,205,204,1)", // 线条颜色
								},
								borderColor: "rgba(0,0,0,.4)",
							},
							itemStyle: {
								color: "rgba(10,219,250,1)",
								borderColor: "#646ace",
								borderWidth: 2,
							},
							tooltip: {
								show: true,
							},
							areaStyle: {
								//区域填充样式
								normal: {
									//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
									color: new echarts.graphic.LinearGradient(
											0,
											0,
											0,
											1,
											[
												{
													offset: 0,
													color: "rgba(10,219,250,.3)",
												},
												{
													offset: 1,
													color: "rgba(10,219,250, 0)",
												},
											],
											false
									),
									shadowColor: "rgba(10,219,250, 0.5)", //阴影颜色
									shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
								},
							},
							data: goOutSchool,
						},
					],
				};
				let len = 0;
				setInterval(() => {
					if (len === xLabel.length) {
						len = 0;
					}
					myChart.dispatchAction({
						type: "showTip",
						seriesIndex: 0,
						dataIndex: len,
					});
					len++;
				}, 1000);
				myChart.setOption(option);

			},

			getSuperMapUrl() {
				getUserProfile().then(response => {
					let mapDeptId = response.mapDeptId
					let num = 0;
					if (mapDeptId == "365") {
						num = 0;
					} else if (mapDeptId == "369") {
						num = 1;
					} else if (mapDeptId == "371") {
						num = 2;
					} else if (mapDeptId == "373") {
						num = 3;
					} else if (mapDeptId == "372") {
						num = 4;
					} else if (mapDeptId == "370") {
						num = 5;
					}
					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
				});
			},
			toggleTab(current) {
				this.currentTab = current;
				this.currentClass = current;
			},


		}
	}
</script>
<style lang="scss">
	@font-face {
		font-family: 'ds';
		src: url('../../assets/styles/DS-Digital_Bold.ttf') format('truetype'); /* 根据实际路径调整 */
	}
	/*弹层新样式*/
	.sj-dialog-newstyle {
		.el-dialog {
			background: #152d4f;
			border-radius: 10px;
			border: 2px solid #3c72c8;
			background: linear-gradient(90deg, #0c274a 0%, rgba(6, 24, 37, 0.9) 100%);

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

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

				}

			}

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

		}


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

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

			.sj-jcxx-con {}

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

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

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

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

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

				.or {
					color: #ff9a6d;
				}

				.bl {
					color: #42f8ff
				}

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

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

				.m60 {
					margin-left: 60px;
				}

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

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

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

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

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

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

				}
			}


		}

	}

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

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

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

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

		}

	}



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

			span:nth-child(1) {
				width: 80px;
				display: inline-block;
				padding-left: 20px;
			}
			span:nth-child(1).ps {
				background: url("../../assets/index_img/jcxt_ps.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).rq {
				background: url("../../assets/index_img/jcxt_rq.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).rl {
				background: url("../../assets/index_img/jcxt_rl.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).gl {
				background: url("../../assets/index_img/jcxt_gl.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).gs {
				background: url("../../assets/index_img/jcxt_gs.png") no-repeat 5px 2px;
				background-size: 21px;
			}
			span:nth-child(1).ql {
				background: url("../../assets/index_img/jcxt_ql.png") no-repeat 5px 2px;
				background-size: 21px;
			}

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

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

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


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

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

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

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

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

	}



	/*设备汇总*/
	.sbhz{
		margin-bottom: 15px!important;
		height: 220px!important;
		.sbhz_div{
			justify-content: space-around;
			.sbhz_div_txt{
				position: relative;
				cursor: pointer;
				h5{
					font-size: 14px;
					color: #fff;
					height: 25px;
					line-height: 25px;
				}
				b{
					font-family: 'ds';
					font-size: 18px;
					font-weight: bold;
					height: 40px;
					line-height: 40px;
				}
				p{
					font-size: 12px;
					height: 25px;
					line-height: 25px;
					span{
						padding-left: 12px;
						position: relative;
						margin-right: 8px;
					}
					span::after{
						content: '';
						display: block;
						width: 5px;
						height: 5px;
						position: absolute;
						left: 0px;
						top:50%;
						transform: translateY(-50%);
					}
					span.zx::after{
						background: #45bf02;
						box-shadow: 0px 0px 8px #45bf02;
					}
					span.lx::after{
						background: #f20606;
						box-shadow: 0px 0px 8px #f20606;
					}
				}
			}
			.sbhz_div_txt.on{
				box-shadow: initial;
				h5{
					color: #0bf3f7;
					font-weight: bold;
				}
			}
			.sbhz_div_txt.on::after{
				filter: brightness(1.1) saturate(3);
			}
			.rq::after{
				display: block;
				position: absolute;
				content: '';
				background: url("../../assets/index_img/jgpt_icon1.png") no-repeat right;
				width: 48px;
				height: 41px;
				right:0px;
				top:24px;
			}
			.ps::after{
				display: block;
				position: absolute;
				content: '';
				background: url("../../assets/index_img/jgpt_icon2.png") no-repeat right;
				width: 48px;
				height: 41px;
				right:0px;
				top:24px;
			}
			.gr::after{
				display: block;
				position: absolute;
				content: '';
				background: url("../../assets/index_img/jgpt_icon3.png") no-repeat right;
				width: 48px;
				height: 41px;
				right:0px;
				top:24px;
			}
			.ql::after{
				display: block;
				position: absolute;
				content: '';
				background: url("../../assets/index_img/jgpt_icon4.png") no-repeat right;
				width: 48px;
				height: 41px;
				right:0px;
				top:24px;
			}
			.gl::after{
				display: block;
				position: absolute;
				content: '';
				background: url("../../assets/index_img/jgpt_icon5.png") no-repeat right;
				width: 48px;
				height: 41px;
				right:0px;
				top:24px;
			}
			.gs::after{
				display: block;
				position: absolute;
				content: '';
				background: url("../../assets/index_img/jgpt_icon6.png") no-repeat right;
				width: 48px;
				height: 41px;
				right:0px;
				top:24px;
			}
		}
	}


	/*设备类型*/
.sblx{
	margin-bottom: 15px!important;
	.sblx_div{
		#sblx_chart{
			width: 270px;
			height: 200px;
			margin-right: 30px;
		}
		.sblx_list{
			width: 220px;
			.hei_scroll{
				height: 195px;
				overflow-y: scroll;
			}
			h5{
				height: 28px;
				line-height: 28px;
				border-bottom: 1px solid #087071;
				background: rgba(7,44,78,0.4);
				padding: 0px 5px;
				span{
					font-size: 14px;
					color: #fff;
					display: inline-block;
				}
				span:nth-child(1){
					width: 50%;
				}
				span:nth-child(2){
					width: 30%;
				}
				span:nth-child(3){
					width: 20%;
				}
			}
			p{
				width: 100%;
				padding: 0px 5px;
				height: 28px;
				line-height: 28px;
				border-bottom: 1px solid #087071;
				background: rgba(3,57,108,0.4);
				span{
					font-size: 12px;
					color: #fff;
					display: inline-block;
					i.green{
						color: #06c969;
					}
					i.red{
						color: #c50608;
					}
				}
				span:nth-child(1){
					width: 50%;
				}
				span:nth-child(2){
					width: 30%;
				}
				span:nth-child(3){
					width: 20%;
				}
			}
		}
	}
}

/*设备报警*/
.sbbj{
	height: 180px!important;
	position: relative;
	#sbbj_div{
		width: 100%;
		height: 175px;
	}
	.el-select{
		position: absolute;
		right:10px;
		top:5px;
		z-index: 99;
		width: 80px;

		.el-input__inner {
			height: 25px!important;
			line-height: 25px!important;
			font-size: 12px!important;
		}
		.el-input__icon {
			line-height: 25px!important;
		}
	}
}


/*设备列表*/
.sblb{
	flex-wrap: nowrap;
	height: 55vh!important;
	margin-bottom: 15px!important;
	justify-content: flex-start!important;
	.hei_scroll{
		height: 42vh!important;
		overflow-y: scroll;
	}
}

#yxzt_div{
	width: 100%;
	height: 156px;
}

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

		.el-input {}

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	}

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

	}



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

	}

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

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

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

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

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

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

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

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


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

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

	}

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

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

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

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


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

	}

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

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

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

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

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

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

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

	.content-box4{
		position: absolute !important;
		height: 55px !important;
		border: none !important;
		background: none !important;
		left: 38%;
		top: -1%
	}

	.content-box4 .el-tabs__item {
		border-radius: 5px !important;
	}

	/*正常tab*/



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

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

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

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

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

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

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

	.sj-check .el-checkbox__label {
		color: #fff;
		padding-left: 5px;
	}

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

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

	.sj-check .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #00ffee;
	}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';
    /*公共*/
    .list-ul-100-tit {
    	width: 100% !important;
    	background: url(../../assets/index_img/list-bg-img-t.png) no-repeat 100% !important;
    	background-size: cover !important;
    	height: 38px;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	margin-top: 10px !important;
    	background-size: contain;
    	padding: 0 10px !important;
    	color: #a2d4ef;
    	text-align: center;
    	span{
    		display: inline-block;
    		height: 38px;
    		line-height: 38px;
    	}
    	span:nth-child(1) {
    		width: 80px;
    		padding-left: 20px;
    		background: url("../../assets/index_img/jgpt_icon7.png") no-repeat 8px 12px;
    	}

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

    	}

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

    	span:nth-child(2n) {
    		color: #fff;
    	}
    }
	.lifeline-con {
		color: #fff;
		font-size: 14px;

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

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

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

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

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

			}

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

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

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

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

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

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

		}


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

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

			}

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

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

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

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

			.left {
				display: flex;

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

			}

			.right {
				display: flex;

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

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

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

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

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

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

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

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

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

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

		}


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

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

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

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

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

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

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

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

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

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

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

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

						img {
							margin-right: 10px;
						}

						h5 {
							font-size: 18px;
						}

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

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

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

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

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

			}

			.box-row {
				display: flex;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		/*左侧*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

								display: flex;
								flex-direction: row;

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

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

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


								}


							}
						}

					}

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

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

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


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

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

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

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

			}
		}


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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






	}

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

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

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

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

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

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

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

    }

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



</style>