<template>
	<div class="screen-main">
		<!--头部展示-->
		<div class="screen-header">
			<div class="header-left-bg">曲阳金隅智能安全管控系统</div>
			<div class="header-right-action">
				<div class="right-action-clock">
					<span class="action-time">{{ currentDay }}</span>
					<span class="action-time">{{ currentWeek }} </span>
					<span class="action-time">{{ currentTime }}</span>
				</div>
			</div>
		</div>
		<!--图层控制-->
		<div class="screen-ctrl">
			<div class="screen-filter">
				<div class="filter-content">
					<div class="filter-ctrl" v-show="filterCtrlFocus">
						<div class="screen-check-content hoverPointer" @click="markerClick(0)">
							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[0] }"></span>
							<span class="box-text">全部</span>
						</div>
						<div class="screen-check-content hoverPointer" @click="markerClick(1)">
							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[1] }"></span>
							<span class="box-text">监控</span>
						</div>
						<div class="screen-check-content hoverPointer" @click="markerClick(2)">
							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[2] }"></span>
							<span class="box-text">喇叭</span>
						</div>
						<div class="screen-check-content hoverPointer" @click="markerClick(3)">
							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[3] }"></span>
							<span class="box-text">作业</span>
						</div>
						<div class="screen-check-content hoverPointer" @click="markerClick(4)">
							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[4] }"></span>
							<span class="box-text">区域</span>
						</div>
						<div class="screen-check-content hoverPointer" @click="markerClick(5)">
							<span class="box-btn box-uncheck" :class="{ 'box-check': markList[5] }"></span>
							<span class="box-text">人员</span>
						</div>
						<!-- <div class="caret-dropdown">
							<el-icon @click="userSelect" v-if="showUserSelect" :size="14">
								<ArrowUpBold />
							</el-icon>
							<el-icon @click="userSelect" v-else :size="14">
								<ArrowDownBold />
							</el-icon>
						</div> -->
					</div>
					<div class="drop-content" v-if="showUserSelect">
						<el-tree 
						ref="group" 
						id="bigScreenTree" 
						node-key="id" 
						:data="postList" 
						show-checkbox
						:current-node-key="''" 
						:highlight-current="true" 
						:expand-on-click-node="true"
						@check="handleChange"
						></el-tree>
						<el-button type="primary" @click="userFilter">查看</el-button>
					</div>
					<div class="filter-action showroam">
						<div v-if="filterCtrlFocus" class="action-shrink" @click="filterCtrlFocusChange"></div>
						<div v-else class="action-shrink shrink-hidden" @click="filterCtrlFocusChange"></div>
						<div v-if="autoRun" class="action-roam roam-pause" @click="autoRunChange"></div>
						<div v-else class="action-roam roam-play" @click="autoRunChange"></div>
					</div>
				</div>
			</div>
			<!--搜索-->
			<div class="screen-search">
				<div class="search-content">
					<input type="text" placeholder="输入姓名/定位卡号/车牌号进行查找" v-model="searchKeyWord" class="input-focus">
					<span class="close-btn el-icon-circle-close" style="display: none;"></span>
					<div class="search" @click="searchOne(searchKeyWord)"></div>
					<!-- <div class="auto-suggestion" style="display: none;">
						<div class="suggestion-select-ul"></div>
					</div> -->
				</div>
				<div style="text-align: right;margin-top: 15px;">
					<div v-if="tracking&&!screenUser" class="danger-btn-bg btn-item" @click="userUnTrack">
						<span class="trackImg"></span>
						<span>取消跟踪</span>
					</div>
					<div v-if="lineTracking&&!screenUser" class="simple-btn-bg btn-item" @click="userLineTrackCancel">
						<span class="viewImg"></span>
						<span>取消轨迹</span>
					</div>
				</div>
			</div>
		</div>
		<!--人员统计/事件统计/部门统计-->
		<div class="screen-cockpit">
			<div class="cockpit-count">
				<div class="divider"></div>
				<div class="simple-title">
					<span>数据统计</span>
					<div class="countTypeWrap">
						<span :class="{ 'activeCount': countIndex === '1' }" @click="countINdexChange('1')">有卡</span>
						<el-divider direction="vertical"></el-divider>
						<span :class="{ 'activeCount': countIndex === '2' }" @click="countINdexChange('2')">在线</span>
					</div>
				</div>
				<div class="count-list">
					<div class="count-list-item">
						<div class="item-img item-img2"></div>
						<div class="item-info">
							<div title="员工" class="normal">正式员工</div>
							<div class="bottom">
								<span class="large">{{ userCount.count_employee }}</span>&nbsp;<span
									class="normal">人</span>
							</div>
						</div>
					</div>
					<div class="count-list-item">
						<div class="item-img item-img1"></div>
						<div class="item-info">
							<div title="外来人员" class="normal">访客</div>
							<div class="bottom"><span class="large">{{ userCount.count_visitor }}</span>&nbsp;<span
									class="normal">人</span>
							</div>
						</div>
					</div>
					<div class="count-list-item">
						<div class="item-img item-img3"></div>
						<div class="item-info">
							<div title="承包商" class="normal">相关方</div>
							<div class="bottom">
								<span class="large">{{ userCount.count_remployee }}</span>&nbsp;<span
									class="normal">人</span>
							</div>
						</div>
					</div>
					<div class="count-list-item">
						<div class="item-img item-img4"></div>
						<div class="item-info">
							<div title="司机" class="normal">司机</div>
							<div class="bottom">
								<span class="large">{{ userCount.count_driver }}</span>&nbsp;<span
									class="normal">人</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="cockpit-alarm">
				<div class="divider"></div>
				<div class="simple-title" @click="warningDetail = true">
					<span>报警实时展示</span>
					<div class="simple-btn-bg alarm-bell danger">
						<span>{{ wStatistics.total_count }}</span>&nbsp;报警
					</div>
				</div>
				<div class="alarm-content">
					<div style="display:flex">
						<div class="alarm-danger"></div>
						<div id="eventScrenWrap">
							<div id="eventScrenItem">
								<div v-for="(item1,index1) in warningData.list" :key="item1.id">
									<text v-if="index1<3">{{item1.voice_msg}}</text>
								</div>
							</div>
						</div>
					</div>
					<div class="content-right">
						<div v-for="item in wStatistics.details" :key="item.cate" class="alarm-item alarm-item-danger">
							<span class="item-icon"></span>
							<span class="item-name">{{ item.cate__name }}</span>
							<span class="item-number" style="">{{ item.count }}</span>
						</div>
					</div>
				</div>
				<div class="alarm-detail-info left_arrow" v-if="warningDetail">
					<div class="simple-title">
						<div><span>报警数据</span></div>
						<div class="action-group">
							<!-- <span class="detail-text-btn" @click="allWarningView">查看所有</span> -->
							<span class="icon-close" @click="warningDetail = false"></span>
						</div>
					</div>
					<div class="detail-content">
						<div class="content-head">
							<div class="screen-multiple-select head-select">
								<!-- <div class="multiple-select-tags" @click="warningTypeShow = true"> -->
								<div class="multiple-select-tags" @click="warningTypeChange">
									<span class="multiple-select-input">{{eventTypeName}}</span>
									<el-icon color="#ffffff" class="no-inherit">
										<ArrowDownBold />
									</el-icon>
								</div>
								<div v-show="warningTypeShow" class="multiple-select-wrap">
									<div class="multiple-select-ul">
										<div class="multiple-select-li" @click="warningTypeSelected(null,'全部')">
											<span class="multiple-select-label">全部</span>
										</div>

										<div v-for="typeItem in warningTypes" :key="typeItem.id"
											class="multiple-select-li" @click="warningTypeSelected(typeItem.id,typeItem.name)">
											<span title="超员报警" class="multiple-select-label">{{ typeItem.name }}</span>
										</div>
									</div>
								</div>
							</div>
							<div v-if="speakerPlayStatus" class="head-sound sound-ring" @click="speakerPasue"></div>
							<div v-else class="head-sound sound-quiet" @click="speakerPlay"></div>
						</div>
						<div class="content-body" v-if="warningData.total > 0">
							<!--warningList-->
							<div class="alarm-item" v-for="(item) in warningData.list" :key="item.id">
								<div class="item-type">未处理</div>
								<div class="item-content" @click="warningItemShow(item)">
									<div class="item-content-top"><span class="time">{{ item.create_time }}</span><span
											class="status">待处理</span></div>
									<div class="item-content-middle mt6">
										<div class="alarm-info">{{ item.voice_msg }}</div>
									</div>
								</div>
							</div>
						</div>
						<div v-if="warningData.total > 0" class="content-footer" style="">
							<el-pagination :page-size="warningData.params.page_size" :pager-count="5"
								v-model:currentPage="warningData.params.page" layout="prev, pager, next"
								:total="warningData.total" @current-change="handleCurrentChange" />
						</div>
						<div class="noData" v-else>
							<img src="/img/nodata.png">
						</div>
					</div>
				</div>
			</div>
			<div class="cockpit-info">
				<div class="divider"></div>
				<div class="simple-title area-simple-title">
					<div class="header-tab">
						<span class="tab-item">区域信息情况</span>
						<!--<span class="tab-item" :class="{'tab-item-active':LBType==='2'}" @click="cockpitChange('2')">部门信息情况</span>-->
					</div>
					<!-- <div class="simple-btn-bg alarm-btn">需充电卡片0人</div> -->
				</div>
				<div class="info-body area-info-body">
					<el-table :data="areaList" style="width: 100%;" :height="areaTableHeight" highlight-current-row
						class="bigScreenTable" @row-click="areaRowClick">
						<el-table-column label="区域" prop="name"></el-table-column>
						<el-table-column label="当前人数" prop="count_people"></el-table-column>
					</el-table>
				</div>
				<div class="alarm-detail-info left_arrow" v-if="areaDetail" style="width:150%">
					<div class="simple-title">
						<div><span>区域统计</span></div>
						<span class="icon-close" @click="areaDetailClose"></span>
					</div>
					<div class="detail-content">
						<div class="content-head">
							<div @click="areaItemHandle(1)" :class="{'areaActive':areaShowType==1,'areaNavItem':1}" style="color:#ffffff">作业</div>
							<div @click="areaItemHandle(2)" :class="{'areaActive':areaShowType==2,'areaNavItem':1}" style="color:#ffffff">监控</div>
							<div @click="areaItemHandle(3)" :class="{'areaActive':areaShowType==3,'areaNavItem':1}" style="color:#ffffff">喇叭</div>
							<div @click="areaItemHandle(4)" :class="{'areaActive':areaShowType==4,'areaNavItem':1}" style="color:#ffffff">人员</div>
						</div>
						<div class="content-body">
							<el-table class="bigScreenTable" v-if="areaShowType==1" :data="areaOperation" :height="300" @row-click="areaOperationRowClick">
								<el-table-column label="作业简介" prop="name"></el-table-column>
								<el-table-column label="开始时间" prop="start_time"></el-table-column>
								<el-table-column label="结束时间" prop="end_time"></el-table-column>
								<el-table-column label="业务部门">
									<template #default="scope">
									<span v-if="scope.row.dept_ter_">{{scope.row.dept_ter_.name}}</span>
									</template>
								</el-table-column>
							</el-table>
							<el-table class="bigScreenTable" :data="areaVideo" v-if="areaShowType==2" :height="300" @row-click="showVchannel">
								<el-table-column label="通道名称" prop="name"></el-table-column>
								<el-table-column label="所在区域" prop="area_name"></el-table-column>
								<el-table-column label="code" prop="code"></el-table-column>
							</el-table>
							<el-table class="bigScreenTable" :data="areaSpeaker" v-if="areaShowType==3" :height="300">
								<el-table-column label="喇叭名称" prop="name"></el-table-column>
								<el-table-column label="所在区域" prop="area_name"></el-table-column>
								<el-table-column label="唯一标识" prop="code"></el-table-column>
							</el-table>
							<el-table class="bigScreenTable" :data="areaUser" v-if="areaShowType==4"  :height="300" @row-click="areaEmployeeRowClick">
								<el-table-column label="人员姓名" prop="my_info.employee_.name"></el-table-column>
								<el-table-column label="人员姓名" prop="my_info.employee_.type"></el-table-column>
								<el-table-column label="定位卡号" prop="mac"></el-table-column>
							</el-table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="display:flex;flex-direction:colum">
		</div>
		<!--切换-->
		<!--<div class="screen-tab">
			<div class="screen-tab-content">
				<div class="tab-menu tab-menu-item tab-menu-active"><span class="tab-menu-text">驾驶舱</span></div>
				<div class="tab-menu tab-menu-item"><span class="tab-menu-text">监控</span></div>
				&lt;!&ndash;<div class="tab-menu tab-menu-item"><span class="tab-menu-text">追踪</span></div>
				<div class="tab-menu tab-menu-item"><span class="tab-menu-text">最终位置</span></div>
				<div class="tab-menu tab-menu-item"><span class="tab-menu-text">疏散演练</span></div>&ndash;&gt;
			</div>
		</div>-->
		<!--地图-->
		<div id='mapContainer'></div>
		<!--人员列表-->
		<div class="screen-user" v-if="screenUser">
			<div class="simple-title">
				<div>人员信息</div>
				<div class="simple-btn" @click="screenUser = false">关闭</div>
			</div>
			<div class="h100" style="">
				<div class="person-info-header">
					<div class="header-basic">
						<div class="basic-img">
							<div style="width: 100%; height: 100%;">
								<img style="width: 100%; height: 100%;" :src="screenUserItem.photo" height="100%" width="100%">
							</div>
						</div>
						<div class="basic-info">
							<div class="info-item">
								<span class="info-item-name">姓名：</span>
								<span class="info-item-info">{{ screenUserItem.name }}</span>
							</div>
							<div class="info-item">
								<span class="info-item-name">类型：</span>
								<span class="info-item-info" v-if="screenUserItem.type === 'employee'">正式员工</span>
								<span class="info-item-info" v-else>访客</span>
							</div>
							<div class="info-item">
								<span class="info-item-name">定位卡：</span>
								<span class="info-item-info">{{ screenUserItem.id }}</span>
							</div>
							<div class="info-item">
								<span class="info-item-name">部门：</span>
								<span class="info-item-info">{{ screenUserItem.belong_dept_name }}</span>
							</div>
							<div class="info-item">
								<span class="info-item-name">岗位：</span>
								<span class="info-item-info">{{ screenUserItem.post_name }}</span>
							</div>
						</div>
						<div class="simple-btn basic-btn" @click="showUserDetail">查看详情</div>
					</div>
				</div>
				<div class="basic-btn-group">
					<div  v-if="!tracking&&!lineTracking"  class="danger-btn-bg btn-item" @click="userTrack">
						<span class="trackImg"></span>
						<span>跟踪</span>
					</div>
					<div  v-else-if="!tracking&&lineTracking"  class="danger-btn-bg btn-item">
						<span class="trackImg"></span>
						<span>跟踪</span>
					</div>
					<div v-else-if="tracking" class="danger-btn-bg btn-item" @click="userUnTrack">
						<span class="trackImg"></span>
						<span>取消跟踪</span>
					</div>
					<div v-if="!lineTracking&&!tracking" class="simple-btn-bg btn-item" @click="userLineTrack">
						<span class="viewImg"></span>
						<span>轨迹</span>
					</div>
					<div v-if="!lineTracking&&tracking" class="simple-btn-bg btn-item">
						<span class="viewImg"></span>
						<span>轨迹</span>
					</div>
					<div v-else-if="lineTracking" class="simple-btn-bg btn-item" @click="userLineTrackCancel">
						<span class="viewImg"></span>
						<span>取消轨迹</span>
					</div>
				</div>
				<div class="screen-per-list">
					<el-table :data="userList"  style="width: 100%" :row-key="row => { return row.id }"
						highlight-current-row class="bigScreenTable" @row-click="userRowClick">
						<el-table-column label="姓名">
							<template #default="scope">
								<span v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="部门">
							<template #default="scope">
								<span v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.belong_dept_name
								}}</span>
							</template>
						</el-table-column>
						<el-table-column label="岗位">
							<template #default="scope">
								<span v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.post_name
								}}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!--人员选详细信息-->
				<div class="person-cert right_arrow" v-if="screenUserDetail">
					<div class="simple-title">
						<div>人员信息</div>
						<div class="icon-close" @click="screenUserDetail = false"></div>
					</div>
					<div class="basic-head">
						<div class="header-tab">
							<span class="tab-item tab-item-active">基本信息</span>
							<!--<span class="tab-item">资质证件</span>-->
						</div>
					</div>
					<div class="basic-info">
						<div class="info-item">
							<span class="info-item-name">姓名：</span>
							<span class="info-item-info">{{ screenUserItemDetail.name }}</span>
						</div>
						<div class="info-item">
							<span class="info-item-name">姓别：</span>
							<span class="info-item-info">{{ screenUserItemDetail.gender }}</span>
						</div>

						<div class="info-item">
							<span class="info-item-name">定位卡号：</span>
							<span class="info-item-info">202106180008</span>
						</div>
						<div class="info-item">
							<span class="info-item-name">部门：</span>
							<span class="info-item-info" v-if="screenUserItemDetail.belong_dept_">{{
									screenUserItemDetail.belong_dept_.name
							}}</span>
						</div>
						<div class="info-item">
							<span class="info-item-name">岗位：</span>
							<span class="info-item-info" v-if="screenUserItemDetail.post_">{{
									screenUserItemDetail.post_.name
							}}</span>
						</div>
						<div class="info-item">
							<span class="info-item-name">证件类型：</span>
							<span class="info-item-info">中华人民共和国居民身份证</span>
						</div>
						<div class="info-item">
							<span class="info-item-name">证件号码：</span>
							<span class="info-item-info">{{ screenUserItemDetail.id_number }}</span>
						</div>
						<div class="info-item">
							<span class="info-item-name">联系电话：</span>
							<span class="info-item-info">{{ screenUserItemDetail.phone }}</span>
						</div>
					</div>
					<div class="basic-cert" style="display: none;">
						<div class="el-empty">
							<div class="el-empty__image" style="width: 160px;">
								<img src="/img/nodata.png" ondragstart="return false">
							</div>
							<div class="el-empty__description">
								<p></p>
							</div>
						</div>
					</div>
					<div class="el-loading-mask" style="background-color: transparent; display: none;">
						<div class="el-loading-spinner"><i class="el-icon-loading"></i></div>
					</div>
				</div>
			</div>
		</div>
		<div class="alarm-detail-info left_arrow" v-if="workDetail" style="width: 50%;top: 220px;">
					<div class="simple-title">
						<div><span>作业</span></div>
						<!-- @click="areaItemHandle(1)" -->
						<span class="icon-close" @click="workDetailClose"></span>
					</div>
					<div class="detail-content">
						<div class="content-body">
							<el-table class="bigScreenTable" v-if="areaShowType==1" :data="areaOperation" :height="300" @row-click="areaOperationRowClick">
								<el-table-column label="作业简介" prop="name"></el-table-column>
								<el-table-column label="开始时间" prop="start_time"></el-table-column>
								<el-table-column label="结束时间" prop="end_time"></el-table-column>
								<el-table-column label="业务部门">
									<template #default="scope">
									<span v-if="scope.row.dept_ter_">{{scope.row.dept_ter_.name}}</span>
									</template>
								</el-table-column>
								<el-table-column label="监控设备">
									<template #default="scope">
										<el-tag
											v-for="item in scope.row.vchannels_"
											:key="item.id"
											@click="showVchannel(item)"
											style="margin-right: 10px;margin-left:0"
											>{{ item.name }}
										</el-tag>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
		<!--危险作业-->
		<div class="screen-job" v-if="screenOperation">
			<div class="simple-title">
				<div>作业详情</div>
				<div class="simple-btn" @click="closeScreenOperation">关闭</div>
			</div>
			<div class="job-content">
				<div class="job-basic">
					<div class="job-item">
						<span class="job-item-name">作业名称：</span>
						<span class="job-item-info">{{screenJobItem.name}}</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">作业编号：</span>
						<span class="job-item-info">{{screenJobItem.number}}</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">生产状态：</span>
						<span class="job-item-info">{{screenJobItem.state_work}}</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">作业区域：</span>
						<span class="job-item-info">{{screenJobItem.area_.name}}</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">部门协调员：</span>
						<span class="job-item-info">{{screenJobItem.coordinator_name}}</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">开始时间：</span>
						<span class="job-item-info">{{screenJobItem.start_time}}</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">结束时间：</span>
						<span class="job-item-info">{{screenJobItem.end_time}}</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">属地部门：</span>
						<span class="job-item-info">{{screenJobItem.dept_ter_.name}}</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">业务部门：</span>
						<span class="job-item-info">{{screenJobItem.dept_bus_.name}}</span>
					</div>
					<!-- <div class="job-item">
						<span class="job-item-name">监控设备：</span>
						<el-tag
							v-for="item in screenJobItem.vchannels_"
							:key="item.id"
							@click="showVchannel(item)"
							style="margin-right: 10px;margin-left:0"
							>{{ item.name }}
						</el-tag>
					</div> -->
				</div>
				<div class="simple-title">
					<div>作业票</div>
				</div>
				<div class="job-list">
					<el-tag
					v-for="item in screenJobItem.cates_"
					:key="item.id"
					@click="showOpretion(item)"
					style="margin-right: 10px;margin-left:0"
					>{{ item.cate_name }}
					</el-tag>
				</div>
				<div class="simple-title">
					<div>监控设备</div>
				</div>
				<div class="job-list" v-if="screenJobItem.vchannels_.length>0">
					<el-tag
					v-for="item in screenJobItem.vchannels_"
					:key="item.id"
					@click="showVchannel(item)"
					style="margin-right: 10px;margin-left:0"
					>{{ item.name }}
					</el-tag>
				</div>
				<div class="job-list" v-else style="color:#ffffff">该作业没有选择监控设备</div>
			</div>
		</div>
		<!--区域-->
		<div class="screen-risk" v-if="screenRisk">
			<div class="simple-title">
				<div>风险区域详情</div>
				<div class="simple-btn" @click="closeScreenRisk">关闭</div>
			</div>
			<div class="risk-content">
				<div class="risk-basic">
					<div class="risk-item"><span class="risk-item-name">风险区域名称：</span><span
							class="risk-item-info">{{areaItemDetail.name}}</span>
					</div>
					<div class="risk-item"><span class="risk-item-name">风险等级：</span><span
							class="risk-item-info">{{levelOption[areaItemDetail.level]}}</span>
					</div>
					<div class="risk-item"><span class="risk-item-name">区域编号：</span><span
							class="risk-item-info">{{areaItemDetail.number}}</span></div>
				</div>
				<div class="simple-title">
					<div>详细信息</div>
				</div>
			</div>
		</div>
		<!--事件详情-->
		<div class="screen-risk" v-if="screenWarning">
			<div class="simple-title">
				<div>事件信息</div>
				<div class="simple-btn" @click="closeScreenWarning">关闭</div>
			</div>
			<div class="risk-content">
				<div class="risk-basic">
					<div class="risk-item">
						<span class="risk-item-info">{{ screenWarningItem.voice_msg }}</span>
					</div>
				</div>
			</div>
			<div class="simple-title">
				<div>事件详情</div>
			</div>
			<div class="risk-content">
				<div class="risk-basic">
					<div class="risk-item">
						<span class="risk-item-name">报警区域：</span>
						<span class="risk-item-info" v-if="screenWarningItem.area_">{{ screenWarningItem.area_.name
						}}</span>
					</div>
					<div class="risk-item" v-if="screenWarningItem.employee_ !== null">
						<span class="risk-item-name">触发人：</span>
						<span class="risk-item-info" v-if="screenWarningItem.employee_">{{
								screenWarningItem.employee_.name
						}}</span>
					</div>
					<div class="risk-item" v-if="screenWarningItem.employee_ !== null">
						<span class="risk-item-name">触发人部门：</span>
						<span class="risk-item-info" v-if="screenWarningItem.employee_.belong_dept_">{{
								screenWarningItem.employee_.belong_dept_.name
						}}</span>
					</div>
					<div class="risk-item">
						<span class="risk-item-name">触发事件：</span>
						<span class="risk-item-info" v-for="ite in screenWarningItem.cates_" :key="ite">{{ ite.name
						}}</span>
					</div>
					<div class="risk-item">
						<span class="risk-item-name">触发时间：</span>
						<span class="risk-item-info">{{ screenWarningItem.create_time }}</span>
					</div>
					<div class="risk-item" v-if="screenWarningItem.global_img!=null">
						<span class="risk-item-name">事件截图：</span>
						<sc-upload v-model="screenWarningItem.global_img" title="全景照" style="width: 250px;"></sc-upload>
						<sc-upload v-if="screenWarningItem.face_img!=null" v-model="screenWarningItem.face_img" title="人脸照"  style="width: 250px;"></sc-upload>
						
						<!-- <img :src="screenWarningItem.global_img" style="width: 250px;"> -->
						<!-- <img v-if="screenWarningItem.face_img!=null" :src="screenWarningItem.face_img" style="width: 250px;"> -->
					</div>
				</div>
			</div>
			<div class="simple-title">
				<div>警告处理</div>
			</div>
			<div class="risk-content">
				<div class="risk-basic">
					<div class="risk-item">
						<span class="risk-item-name">处理描述：</span>
						<el-input class="item-textarea" v-model="warningForm.handle_desc" :rows="3" type="textarea"
							placeholder="请输入处理描述" />
					</div>
					<div class="risk-item">
						<span class="risk-item-name">事件类型：</span>
						<el-radio-group v-model="warningForm.mark">
							<el-radio label="10" size="small">正常</el-radio>
							<el-radio label="20" size="small">误报</el-radio>
						</el-radio-group>
					</div>
				</div>

			</div>
			<div style="text-align: center">
				<el-button class="handleWarningBtn" @click="handleWarning">处理</el-button>
			</div>

		</div>
		<audio id="audio" :src="audioSrc" autoplay @ended="audioFinished" preload>
			对不起，您的浏览器不支持HTML5音频播放。
		</audio>
		<el-dialog class="videoViewWrap" :title="channelName" v-model="limitedVisible" with="100%">
			<video-view id="videoView" v-if="limitedVisible" :channelCode="channelCode"></video-view>
			<template #footer>
			<el-button @click="viewClose">关闭</el-button>
			</template>
		</el-dialog>
		<el-dialog class="videoViewWrap" :title="opreationName" v-model="limitedOpreation" with="100%">
			<opreation-view  v-if="limitedOpreation" :ticketId="ticketId" :projectId="projectId" :cateType="cateType"></opreation-view>
			<template #footer>
			<el-button @click="viewClose">关闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
// import flvjs from "./../../utils/flv";
import { genTree } from "@/utils/verificate";
import sysConfig from "@/config";
import videoView from "./../am/videoView";
import opreationView from "./oplDetail";
export default {
	components: {
		videoView,
		opreationView
	},
	data() {
		return {
			line1:null,
			music:null,
			ticketId:null,
			projectId:null,
			cateType:null,
			timerUser: null,
			timerTime: null,
			eventTimer:null,
			timerEventRoll:null,
			eventAudioTimer:null,
			trackMarker:null,
			domMarkerLayer: null,
			userMaskerLayer: null,
			jobDomMarkerLayer: null,
			riskMarkerLayer: null,//风险区域
			areaMarkerLayer: null,//区域展示
			pointMarkerLayer: null,//点位图层
			polygonMaskerLayer: null,//危险作业
			cameraMaskerLayer: null,//摄像头
			materialsMaskerLayer: null,//喇叭
			singleAreaMaskerLayer:null,
			carsMaskerLayer: null,//车辆
			manMaskerLayer: null,//人员
			flyManager: null,
			eareMarker: null,
			dropIndex: '1',
			countIndex: '2',
			areaShowType: '1',
			markList: [false, false, false, false, false, false],
			autoRun: false,
			tracking: false,
			lineTracking:false,
			areaDetail: false,
			workDetail:false,
			screenJob: false,
			screenUser: false,
			screenRisk: false,
			speakerPlayStatus:true,
			screenWarning: false,
			screenUserDetail: false,
			warningTypeShow: false,
			showUserSelect: false,
			warningDetail: false,
			filterCtrlFocus: true,
			screenOperation:false,
			limitedVisible:false,
			limitedOpreation:false,
			warningListTotal: 0,
			heightNum:0,
			warningData: {
				list: [],
				total: 0,
				params: {
					page: 1,
					page_size: 10,
					start_create: '',
				}
			},
			cateAggForm: {
				start_create: '',
				is_handled: false,
				completed: true
			},
			areaItemDetail:{},
			wStatistics: {},
			warningTypes: [],//事件类型
			Vchannels: [],//摄像头列表
			warningList: [],//报警事件列表
			speakerList: [],//喇叭列表
			userList: [],//人员列表
			allUserList:[],
			deptList: [],//部门列表
			postList: [
				{id:0,name:'全部',label:'全部'},
				{id:1,name:'曲阳金隅',label:'曲阳金隅'},
				{id:2,name:'访客',label:'访客'},
				{id:3,name:'司机',label:'司机'}],//岗位列表
			dangerList: [],//岗位列表
			areaList: [],//区域列表/风险区域列表
			areaOperation:[],
			areaVideo:[],
			areaSpeaker:[],
			areaUser:[],
			deptChecked:[],
			//数据统计
			userCount: {
				total: 0,
				count_employee: 0,//正式员工
				count_remployee: 0,//访客
				count_visitor: 0//相关方
			},
			screenJobItem: {},//危险作业信息
			screenRiskItem: {},//风险区域信息
			screenWarningItem: {},//风险区域信息
			screenUserItem: {},//人员信息
			screenUserItemDetail: {},//人员信息
			url: '',
			areaDetailId:'',
			params: {
				json: {
					data: {
						channelId: "",
						streamType: "2",
						type: "flv",
					}
				},
				code: 'video_realtime'
			},
			userParams:{
				depts:[],
			},
			group: [],
			groupsProps: {
				value: "id",
				label: "name",
				multiple: true,
				checkStrictly: true,
			},
			filters: {
				type: '',
				dept: '',
				keyword: '',
			},
			warningId: '',
			warningForm: {
				handle_desc: '',
				mark: '1',
			},
			LBType: '1',
			userMarker: {},
			todayDate: '',
			currentDay: '',
			currentTime: '',
			currentWeek: '',
			areaTableHeight: null,
			levelOption:{
				10:'低风险',
				20:'一般风险',
				30:'较大风险',
				40:'重大风险'
			},
			eventTypeName:'全部',
			audioSrc:'',
			audioIndex:0,
			audioList:{},
			employeeScroll:0,
			searchKeyWord:'',
			ElLoading:null,
			channelCode:'',
			channelName:'',
		}
	},
	created() {
		const scriptInfo = document.createElement("script");
		scriptInfo.setAttribute("data-callType", "callScript");
		scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
		document.head.appendChild(scriptInfo);
	},
	mounted() {
		let that = this;
		let date = new Date();
		that.timeNow = date.getDay();
		that.todayDate = this.warningData.params.start_create = this.cateAggForm.start_create = this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd');
		that.music = document.getElementById("audio");
		that.showTime();
		that.timerTime = setInterval(() => {
			that.showTime();
		}, 1000);
		let host = window.location.host;
		let jsUrl = '/jsmap/jsmap.js';
		that.loadScript('mapId',jsUrl, () => {
			window.map = new jsmap.JSMap({
				mapType: jsmap.JSMapType.MAP_3D,
				container: 'mapContainer',
				mapServerURL: 'data/map',
				enableShadows: false, //是否开启阴影 默认false
				enableLighting: false, //是否开发光照 默认false
				showBuildingMarker: true,
				// showNavigationDisplay: true,
				mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
				floorControlOptions: {
					floorHeight: 20,//楼层间距
					position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
					offset: {
						x: 50,
						y: 200,
					}//控件偏移位置
				},
				imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
				backgroundColor: '#3798ff',  //背景颜色
				viewOptions: {
					//屏幕中心坐标
					center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
					// center: {x:120,y:30,z:10},
					//相机距屏幕中心点距离（单位m）
					distance: 550,
					// 旋转角（单位°）
					rotate: 0,
					//倾斜角（单位°）
					tilt: 45,
				}
			});
			window.map.openMapById('0000');
			window.map.on('loadComplete', e => {
				that.riskMaskerLayers();//风险区域
				that.userMaskerLayers();//人员
				that.cameraMaskerLayers();//摄像头
				that.domMarkerLayers();//监控视频
				that.polygonMarkerLayers();//危险作业
				that.speakersMaskerLayers();//喇叭
				// that.jobDomMarkerLayers();//危险作业图片
				that.areaMarkerLayers();//危险作业图片
				let compassControl = new jsmap.JSCompassControl({
					position: jsmap.JSControlPosition.LEFT_TOP,
					offset: {
						x: 420,
						y: 50
					}
				});
				window.map.addControl(compassControl);
				let zoomControl = new jsmap.JSZoomControl({
					position: jsmap.JSControlPosition.LEFT_TOP,
					offset: {
						x: 450,
						y: 5
					}
				});
				window.map.addControl(zoomControl);
			});
			window.map.on('mapClickNode', event => {
				let item = event;
				let that = this;
				let type = event.nodeType.toString();
				console.log(type === 'Symbol(icontextmaker)');
				if (item.markers.length > 0) {
					if (type === 'Symbol(boxmarker)') {
						let areaId = item.properties.get("areaId");
						console.log(areaId);
						that.$API.am.area.item.req(areaId).then(res=>{
							that.areaItemDetail = res;
							that.screenJob = false;
							that.screenWarning = false;
							that.screenRisk = true;
						})
						//风险区域
					} else if (type === 'Symbol(icontextmaker)') {
						//摄像头和人员
						if (document.getElementById(item.markers[0].id) === null) {
							if (item.markers[0].image === "/img/camera.svg") {
								//摄像头
								this.params.json.data.channelId = item.markers[0].id;
								let domMarker = new jsmap.JSDomMarker({
									id: item.markers[0].id + 'mark',
									position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
									floorId: 1,
									depthTest: true,
									content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
									offset: jsmap.JSControlPosition.RIGHT_CENTER,
									displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
									marginOffset: {
										x: 30,
										y: -50
									},
									properties: {
										type: 0,
									},
									callback: (node) => {
										console.log(node);
									}
								});
								this.domMarkerLayer.addMarker(domMarker);
								var otest = document.getElementById(item.markers[0].id);
								// 创建一个新dom,并设置icon，绑定点击事件
								let newEle = document.createElement("div");
								newEle.className = "v_title";
								newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
								let title = document.createElement("div");
								title.innerText = "实时监控";
								newEle.style.color = "#ffffff";
								let close = document.createElement("div");
								close.className = "v_close";
								close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
								newEle.appendChild(title);
								newEle.appendChild(close);
								let newEle2 = document.createElement("video");
								newEle2.controls  = true;
								newEle2.autoplay = true;
								newEle2.id = item.markers[0].id + 'videoPlayer';
								newEle2.name = item.markers[0].id + 'videoPlayer';
								// newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
								// 在对应dom 下追加创建的dom
								otest.appendChild(newEle);
								otest.appendChild(newEle2);
								let flvPlayer = null,URLS=null;
								newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
								this.$API.am.video.item.req(this.params).then(res => {
										console.log(res);
										this.url = res.url;
										URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
										if (flvjs.isSupported()) {
											let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
											var mediaDataSource = {
												type: 'flv',
												hasAudio:false,
												hasVideo:true,
												isLive:false,
												withCredentials:false,
												url:URLS
											};
											flvPlayer = flvjs.createPlayer(mediaDataSource, {
												enableWorker: false,
												lazyLoadMaxDuration: 3 * 60,
												seekType: 'range',
											});
											flvPlayer.attachMediaElement(videoElement);
											newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
											flvPlayer.load();
											flvPlayer.play();
										}
									})
								close.onclick = () => {
									let nodeMark = document.getElementById(item.markers[0].id);
									nodeMark.remove();
									flvPlayer.pause();
									flvPlayer.unload();
									flvPlayer.detachMediaElement();
									flvPlayer.destroy();
									flvPlayer = null;
								}
							} else {
								//人员
								that.screenUserItem = item.properties.get("employee");
								that.screenUser = true;
								window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
									duration: 1000,
									range: 200
								})
							}
						}
					} else if (type === 'Symbol(polygonmarker)') {
						//危险作业
						console.log(item)
						let workId = item.properties.get("workId");
						if(workId){
							that.areaDetailId = item.properties.get("area");
							that.getAreaOperation();
							that.workDetail = true;
						}else{
							that.screenRisk = false;
							that.screenWarning = false;
							that.areaDetailId = item.properties.get("area");
							let areaWork = that.areaList.filter(area=>{
								return area.id==that.areaDetailId
							});
							that.areaRowClick(areaWork[0]);
						}
						
					}
				} else {
				}
			});
			
		})
			//左侧数据统计
			this.getManCount();//人员统计$$
			this.getWarnings();//报警统计$$
			this.getAreaList();//区域/风险区域$$
			this.getGroup();//部门$$
			//右上展示数据
			this.getWarningTotal();//事件统计
			this.getWarningType();//事件类型
			let pageHeight = document.getElementsByClassName('screen-cockpit')[0].clientHeight;
			let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
			let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
			let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
			let domHeight = pageHeight - height1 - 310 - 84;
			let areaTableHeight = domHeight - height3 - 50;
			this.areaTableHeight = areaTableHeight;
			document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
	},
	computed:{
		bgmSrc:function(){
			return this.audioList[this.audioIndex]
		}
	},
	beforeUnmount(){
		window.map.destroy();
		window.map = null;
		this.timerUser = null;
		this.timerTime = null;
		this.eventTimer = null;
		this.timerEventRoll = null;
		this.eventAudioTimer = null;
		clearInterval(this.timerUser)//人员
		clearInterval(this.timerTime)//时间
		clearInterval(this.eventTimer)//时间
		clearInterval(this.timerEventRoll)//事件
		clearInterval(this.eventAudioTimer)//事件
	},
	methods: {
		loadScript(id, url, callback) {
			let that = this;
			//如果已经存在这个id，则证明已经加载过，已经有这个js文件了，可以直接执行回调里面的操作
			if (document.querySelector(`#${id}`)) {
				that.ElLoading = null;
				callback && callback()
				return;
			}else{
				that.ElLoading = this.$loading({
				lock: true,
				text: '地图资源加载中...',
				background: 'rgba(0, 0, 0, 0)',
			})
			}
			
			//第一次加载，先创建 script 标签
			const script = document.createElement('script');
			script.src = url;
			//创建id属性
			script.setAttribute('id', id);
			//获取第一个script标签
			const firstScript = document.getElementsByTagName('script')[0];
			//获取第一个script标签的父节点 BODY,在body的第一个script引用之前插入，即把这个动态的js文件放在第一个调用
			firstScript.parentNode.insertBefore(script, firstScript);
			//script 一加载就执行
			script.onload = script.onreadystatechange = function() {
				that.ElLoading.close();
				// that.ElLoading = null;
				
				// 加载完成
				if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
					callback && callback()
					
				}
			};
		},
		//查询某个人员
		searchOne(keyword){
			let that = this;
			that.markList[5] = true;
			that.userMaskerLayer.show = true;
			clearInterval(that.timerUser);
			that.timerUser = setInterval(function () {
				that.refreshUserMarker();
			}, 10000)
			that.userList.filter(item=>{
				if(item.my_info.employee_.name == keyword||item.mac ==keyword){
					that.screenUserItem = item.my_info.employee_;
					that.screenUserItem.mac = item.mac;
					that.screenUser = true;
					window.map.flyToMarker(that.userMarker[item.mac], {
						duration: 1000,
						offset:{
							rotate: 45,
							tilt: 60,
							range: 200
						}
					})
				}
			})
		},
		handleChange(item, check,item2,item3) {
			let that = this;
			this.deptChecked = check.checkedKeys;
			this.userParams.depts = check.checkedKeys;
		},
		//人员类型选择
		userFilter() {
			let that = this;
			let checkedKeys = that.deptChecked;
			window.map.removeLayer(that.userMaskerLayer);
			that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
				minimumLevel: 3,
				maxmumLevel: 22,
				show: true
			});
			window.map.addLayer(that.userMaskerLayer);
			let userListNew = [];
			that.userList.filter(item=>{
				if(checkedKeys.indexOf(item.my_info.employee_.belong_dept_)>-1){
					userListNew.push(item)
					}
			})
			that.userList = userListNew;
			console.log(that.userList)
			that.showUserMarkers(userListNew);
			this.showUserSelect = false;
		},
		//
		audioFinished(){
			if(this.audioIndex<this.audioList.length){
				this.audioIndex++;
			}else{
				this.audioIndex = 0;
			}
		},
		//显示右上角的时间
		showTime() {
			this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
			this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
			this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
		},
		//区域下的作业/监控/喇叭/人员查询
		areaItemHandle(index){
			this.areaShowType = index;
			if(index==1){
				//区域下的作业
				this.getAreaOperation();
			}else if(index==2){
				//区域下的监控
				this.getAreaVchannel();
			}else if(index==3){
				//区域下的喇叭
				this.getAreaSpeaker();
			}else if(index==4){
				//区域下的人员
				this.getAreaBlt();
				this.getAreaList();
			}
		},
		//报警统计
		getWarningTotal() {		
			let that = this;
			that.getEventTotal();
			that.getNewEvent();
			clearInterval(that.eventTimer);
			that.eventTimer = setInterval(function () {
				that.getEventTotal();
			}, 60000)
			clearInterval(that.eventAudioTimer);
			that.eventAudioTimer = setInterval(function () {
				that.getNewEvent();
			}, 20000)
		},
		//获取事件总数
		getEventTotal(){
			let that = this;
			that.$API.ecm.event.cateAgg.req(that.cateAggForm).then(res => {
				if (res.err_msg) { } else {
					if(that.warningData.total != res.count){
						that.getWarnings();
					}
					that.wStatistics = res;
				}
			})
		},
		//获取新事件
		getNewEvent(){
			let that = this;
			that.$API.ecm.event.list.req({page_size:1}).then(res => {
				if (res.err_msg) {
				} else {
					let judge = res.results[0].id==that.audioList.id
					let item = res.results[0];
					if(that.audioSrc!==''){
						if(item.id==that.audioList.id){
						}else{
							that.audioList = item;
							that.audioSrc=item.voice;
							if(item.location){
								window.map.flyToPosition(new jsmap.JSPoint(item.location.longitude, item.location.latitude), { range: 200,duration: 1000 });
							}
						}
					}else{
						that.audioList = item;
						that.audioSrc = item.voice;
						that.music.play();//播放
					}
				}
			})
		},
		//报警类型
		getWarningType() {
			let that = this;
			that.$API.ecm.event_cate.list.req({page:0}).then(res => {
					if (res.err_msg) { } else {
						that.warningTypes = res;
					}
				})
		},
		warningTypeChange(){
			this.warningTypeShow = !this.warningTypeShow
		},
		handleCurrentChange() {
			this.getWarnings();
		},
		//获取报警列表
		getWarnings() {
			let that = this;
			this.$API.ecm.event.list.req(this.warningData.params).then(res => {
				if (res.err_msg) {
				} else {
					that.warningData.list = res.results;
					that.warningData.total = res.count;
					that.eventInterval();
				}
			})
		},
		//事件轮询
		eventInterval(){
			let that = this;
			if (that.timerEventRoll!==null) {
				clearInterval(that.timerEventRoll);
				that.timerEventRoll = null;
			}
			that.timerEventRoll = setInterval(function () {
				that.heightNum+=1;
				if(that.heightNum>250){
					that.heightNum=0;
					document.getElementById('eventScrenItem').style.top = 0;
				}else{
					let top = -that.heightNum;
					document.getElementById('eventScrenItem').style.top  = top+'px';
				}
			}, 100)
			
		},
		//警报类型查询
		warningTypeSelected(id,name) {
			let that = this;
			this.warningTypeShow = false;
			let params = new Object();
			params = that.warningData.params;
			if (id !== null) {
				params.cates = id;
			}
			this.eventTypeName = name;
			that.$API.ecm.event.list.req(params).then(res => {
				if (res.err_msg) { } else {
					that.warningData.list = res.results;
					that.warningData.total = res.count;
				}
			})
		},
		
		//区域点击事件
		areaRowClick(data) {
			let that = this;
			that.areaDetail = true;
			that.areaDetailId = data.id;
			this.getAreaList();
			this.getAreaOperation();
			this.getAreaVchannel();
			this.getAreaSpeaker();
			this.getAreaBlt();
			if(data.third_info.xx_rail){
				let point = data.third_info.xx_rail.detail.polygon.points[0];
				let points = data.third_info.xx_rail.detail.polygon.points;
				window.map.flyToPosition(new jsmap.JSPoint(point.longitude, point.latitude, 0), 
				{ duration:1000,
					offset:{
						rotate: 60,
						tilt: 60,
						range: 300
					}
				});
				if(that.singleAreaMaskerLayer!==null){
					that.singleAreaMaskerLayer.setMarkerVisibleByFilter(false, (properties)=>{
						if(properties && properties.get('id')!==data.id){
							return true;
						}
						return  false;
					})
				}
				that.singleAreaMaskerLayer = new jsmap.JSPolygonMarkerLayer({
						minimumLevel: 3,
						maxmumLevel: 22,
						show: true
					});
				let pointsList = [];
				window.map.addLayer(that.singleAreaMaskerLayer);
				pointsList = points.map(item => {
								let obj = item;
								obj.x=item.longitude;
								obj.y=item.latitude;
								return obj
							});
				let polygonMarker = new jsmap.JSPolygonMarker({
					id: data.id,//id
					position: pointsList,//坐标集合
					floorId: data.third_info.xx_rail.detail.floorId,//楼层id
					color: 'rgba(0,0,255,.44)',//填充颜色
					strokeColor: '#2bff1d',//边线颜色
					depthTest: false,//是否开启深度检测
					allowPicking: false,  //是否允许点击
					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
					properties: {
						id: data.id
					},//属性设置
					callback: (marker) => {
						// console.log(marker);
					}//回调
				});
				that.singleAreaMaskerLayer.addMarker(polygonMarker);
			}else{}
			
		},
		areaDetailClose(){
			let that = this;
			that.areaDetail = false;
			if(that.singleAreaMaskerLayer){
				that.singleAreaMaskerLayer.show = false;
			}
			
		},
		//区域下的作业
		getAreaOperation(){
			let that = this;
			this.$API.opm.operation.list.req({area:that.areaDetailId, state: 40}).then(res=>{
				console.log(res)
				that.areaOperation = res.results;
			})
		},
		//区域下的监控
		getAreaVchannel(){
			let that = this;
			that.$API.third.tdevice.list.req({area:that.areaDetailId,type:60,page:0}).then(res=>{
				console.log(res)
				that.areaVideo = res;
			})
		},
		//区域下的喇叭
		getAreaSpeaker(){
			let that = this;
			that.$API.third.tdevice.list.req({area:that.areaDetailId,type:50,page:0}).then(res=>{
				console.log(res)
				that.areaSpeaker = res;
			})
		},
		//区域下的人员
		getAreaBlt(){
			let that = this;
			that.$API.third.blt.all.req({area:that.areaDetailId}).then(res=>{
				that.areaUser = res.filter(item=>{
					return item.my_info.employee;
				});
			}).catch(res=>{
				debugger;
			})
		},
		//点击区域下的人员
		areaEmployeeRowClick(row){
			let that = this;
			that.screenUserItem = row.my_info.employee_;
			that.screenUserItem.mac = row.mac;
			that.screenUser = true;
			window.map.flyToMarker(that.userMarker[row.mac], {
				duration: 1000,
				offset:{
					rotate: 45,
					tilt: 60,
					range: 300
				}
			})
			that.markList[5] = true;
			that.userMaskerLayer.show = true;
			clearInterval(that.timerUser);
			that.timerUser = setInterval(function () {
				that.refreshUserMarker();
			}, 10000)
		},
		//点击区域下的作业
		areaOperationRowClick(row){
			let that = this;
			console.log(row);
			that.screenJobItem = row;
			that.$API.opm.opl.list.req({ operation: row.id}).then((res) => {
				console.log(res)
				that.screenJobItem.cates_ = res.results;
				that.screenOperation = true;
			});
		},
		closeScreenOperation(){
			this.screenOperation = false;
			this.screenJobItem = null;
			
		},
		//加载部门数据
		getGroup() {
			let that = this;
			that.$API.system.dept.list.req({ page: 0 }).then(res => {
				if (res.err_msg) {
				} else {
					let rpartsList=[];
					let arr = [];
					let children =  genTree(res);
					console.log(children)
					for (let i = 0; i < 5; i++) {
						let obj = new Object();
						if (i === 0) {
							obj.id = 0;
							obj.name = '全部';
							obj.label = '全部';
						} else if (i === 1) {
							obj = children[0];
						} else if (i === 2) {
							obj.id = 2;
							obj.name = '访客';
							obj.label = '访客';
						}else if (i === 3) {
							obj.id = 3;
							obj.name = '司机';
							obj.label = '司机';
						}
						arr.push(obj)
					}
				that.postList = arr;
				}
			});
		},
		//岗位
		// getAllPost() {
		// 	this.$API.system.post.list.req({ page: 0 }).then(res => {
		// 		let arr = [];
		// 		let children = genTree(res);
		// 		for (let i = 0; i < 4; i++) {
		// 			let obj = new Object();
		// 			if (i === 0) {
		// 				obj.id = '';
		// 				obj.name = '全部';
		// 				obj.label = '全部';
		// 			} else if (i === 1) {
		// 				obj.id = '';
		// 				obj.name = '正式员工';
		// 				obj.label = '正式员工';
		// 				obj.children = children;
		// 			} else if (i === 2) {
		// 				obj.id = '';
		// 				obj.name = '相关方';
		// 				obj.label = '相关方';
		// 			} else if (i === 3) {
		// 				obj.id = '';
		// 				obj.name = '访客';
		// 				obj.label = '访客';
		// 			}
		// 			arr.push(obj)
		// 		}
		// 		this.postList = arr;
		// 	})
		// },
		//人员统计
		getManCount() {
			let that = this;
			if (that.countIndex === '2') {
				that.$API.third.blt.countNow.req().then(res => {
					if (res.err_msg) {
					} else {
						that.userCount = { ...res };
					}
				})
			} else {
				that.$API.third.blt.countBind.req().then(res => {
					if (res.err_msg) {
					} else {
						that.userCount = { ...res };
					}
				})
			}
		},
		//有卡/在线切换
		countINdexChange(index) {
			this.countIndex = index;
			this.getManCount();
		},
		
		getAreaList() {
			let that = this;
			that.$API.am.area.list.req({page:0}).then(res => {
				if (res.err_msg) {
				} else {
					that.areaList = res;
				}
			})	
		},

		//获取危险作业
		getDangers() {
			let that = this;
			that.$API.opm.operation.list.req({state:40}).then(res => {
			// that.$API.opm.operation.list.req({state:10}).then(res => {
				if (res.err_msg) {

				} else {
					that.dangerList = res.results;
					that.showPolygonMarkers(that.dangerList);
				}
			})
		},
		//区域列表/获取风险区域
		getAreas() {
			let that = this;
			that.$API.am.area.list.req({page:0}).then(res => {
				if (res.err_msg) {
				} else {
					that.areaList = res;
					that.showRiskMarkers(that.areaList);
				}
			})
		},
		//获取人员列表（全部在线标签列表信息）
		getAllMen() {
			let that = this;
			that.$API.third.blt.all.req().then(res => {
				if (res.err_msg) {
				} else {
					that.userList = res.filter(item => {
						return item.my_info.employee
					});
					that.allUserList = that.userList;
					that.showUserMarkers(that.userList);
				}
			})
		},
		
		//选择部门
		groupClick(data) {
			console.log(data);
		},
		checkChange(data1,data2,data3,data4){
			console.log(data1);
			console.log(data2);
			console.log(data3);
			console.log(data4);
		},
		//获取人员详细信息
		showUserDetail() {
			this.screenUserDetail = true;
			this.$API.hrm.employee.item.req(this.screenUserItem.id).then(res => {
				this.screenUserItemDetail = res;
			})
		},
		
		//风险区域layer
		riskMaskerLayers() {
			let that = this;
			that.riskMarkerLayer = new jsmap.JSBoxMarkerLayer({
				minimumLevel: 3,
				maxmumLevel: 22,
				show: false
			});
			window.map.addLayer(that.riskMarkerLayer);
			that.getAreas();//区域/风险区域$$

		},
		//摄像头layer
		cameraMaskerLayers() {//图标文字
			let that = this;
			that.cameraMaskerLayer = new jsmap.JSIconTextMarkerLayer({
				minimumLevel: 3,
				maxmumLevel: 22,
				show: false
			});
			window.map.addLayer(that.cameraMaskerLayer);
			that.getVchannels();
		},
		//监控视频播放
		domMarkerLayers() {
			let that = this;
			that.domMarkerLayer = new jsmap.JSDomMarkerLayer({
				minimumLevel: 3,
				maxmumLevel: 22,
				show: true
			});
			window.map.addLayer(that.domMarkerLayer);
		},
		// jobDomMarkerLayers() {
		// 	let that = this;
		// 	that.jobDomMarkerLayer = new jsmap.JSDomMarkerLayer({
		// 		minimumLevel: 3,
		// 		maxmumLevel: 22,
		// 		show: false
		// 	});
		// 	window.map.addLayer(that.jobDomMarkerLayer);
		// 	that.showJobDomMarkers();
		// },
		//点击区域显示图层
		areaMarkerLayers() {
			let that = this;
			that.areaMarkerLayer = new jsmap.JSDomMarkerLayer({
				minimumLevel: 3,
				maxmumLevel: 22,
				show: true
			});
			window.map.addLayer(that.areaMarkerLayer);
		},
		//员工标记layer
		userMaskerLayers() {//图标文字
			let that = this;
			that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
				minimumLevel: 3,
				maxmumLevel: 22,
				show: false
			});
			window.map.addLayer(that.userMaskerLayer);
			//添加线的图层
			that.getAllMen();
		},
		//喇叭layer
		speakersMaskerLayers() {//消防物资
			let that = this;
			that.materialsMaskerLayer = new jsmap.JSIconTextMarkerLayer({
				minimumLevel: 3,
				maxmumLevel: 22,
				show: false
			});
			window.map.addLayer(that.materialsMaskerLayer);
			//获取喇叭列表
			this.getSpeakers();
		},
		//危险作业Layer
		polygonMarkerLayers() {//危险作业
			let that = this;
			that.polygonMaskerLayer = new jsmap.JSPolygonMarkerLayer({
				minimumLevel: 3,
				maxmumLevel: 22,
				show: false
			});
			window.map.addLayer(that.polygonMaskerLayer);
			that.getDangers();
		},
		//风险区域
		showRiskMarkers(list) {
			let that = this;
			if(list.length>0){
				list.forEach(item => {
					let boxMarker = null;
					let pointsList = [], floorId = null;
					if (item.third_info.xx_rail!==null&&item.third_info.xx_rail!==undefined) {
						floorId = item.third_info.xx_rail.detail.floorId;
						let points = item.third_info.xx_rail.detail.polygon.points;
						// debugger;
						pointsList = points.map(item => {
							let obj = item;
							obj.x=item.longitude;
							obj.y=item.latitude;
							return obj
						});
						let areaId = item.id;
						let maskColor = '',strokeColor='';
						if(item.level===10){
							maskColor = 'rgba(0,0,255,.3)';//蓝色
							strokeColor = '#0000ff';
						}else if(item.level===20){
							maskColor = 'rgba(255,255,0,0.44)';//黄色
							strokeColor = '#ffff00';
						}else if(item.level===30){
							maskColor = 'rgba(255,153,0,0.44)';//橙色
							strokeColor = '#ff9900';
						}else if(item.level===40){
							maskColor = 'rgba(255,0,0,0.44)';//红色
							strokeColor = '#ff0000';
						}
						boxMarker = new jsmap.JSBoxMarker({
							id: item.id,
							position: pointsList,
							floorId: floorId,//楼层id
							color: maskColor,//颜色
							height: 0,//基底高度
							stretchHeight: 35,//拉伸高度
							strokeColor: strokeColor,//边线颜色
							show: true, //是否显示
							allowPicking: true, //是否允许点击
							displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
							properties: {
								areaId: areaId
							},
						});
						that.riskMarkerLayer.addMarker(boxMarker);
					}
				})
			}
			
		},
		//摄像头Marker
		showCameraMarkers(list) {
			// debugger;
			let that = this;
			if(list.length>0){
				list.forEach(item => {
					let cameraMarker = null;
					let pixel = item.my_info.location;
					if(pixel.x){
						cameraMarker = new jsmap.JSIconTextMarker({
							id: item.channelCode,
							position: { x: pixel.x, y: pixel.y, z: pixel.z },  //坐标
							floorId: pixel.floorId,  //楼层id,默认为1（地面）
							image: "/img/camera.svg",
							text: item.channelName,
							font: 'lighter 12px serif',
							fontColor: '#ffffff',
							imageHeight: 25,
							imageWidth: 25,
							backgroundColor: 'rgba(0,0,0,0.3)',
							backgroundRadius: 1,
							backgroundStrokeColor: 'rgba(0,0,0,0.3)',
							backgroundStrokeWidth: 1,
							iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
							allowPicking: true,
							displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
							nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
							show: true,
							callback: () => {
							}
						});
						// debugger;
						// console.log(that.cameraMaskerLayer)
						that.cameraMaskerLayer.addMarker(cameraMarker);
					}
				})
			}

		},
		//喇叭Marker
		showSpeakersMarkers(list) {
			let that = this;
			list.forEach(item => {
				let materialMarker = null;
				let pixel = item.my_info.location;
				console.log(pixel)
				materialMarker = new jsmap.JSIconTextMarker({
				id: item.id,
				position: {x: pixel.x, y: pixel.y, z: pixel.z},  //坐标
				floorId: pixel.floorId,  //楼层id,默认为1（地面）
				image: "/img/sound.svg",
				text: item.name,
				font: '10px sans-serif',
				fontColor: '#ffffff',
				imageHeight: 25,
				imageWidth: 25,
				// fontStrokeColor: '#1f0fdd',
				fontStrokeWidth: 1,
				backgroundColor: 'rgba(0,0,0,0.3)',
				backgroundRadius: 1,
				backgroundStrokeColor: 'rgba(0,0,0,0.3)',
				backgroundStrokeWidth: 1,
				iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
				allowPicking: false,
				displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
				nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
				show: true
			});
			that.materialsMaskerLayer.addMarker(materialMarker);
			})
			
		},
		//人员Marker
		showUserMarkers(userList) {
			// debugger;
			let that = this;
			//标记图片
			let userImage = '';
			if (userList.length > 0) {
				userList.forEach(item=>{
					let employee_ = item.my_info.employee_,online = item.online;;
						employee_.mac = item.mac;
					let employeeType = item.my_info.employee_.type
					if (employeeType === 'employee') {
						userImage = "/img/employee.png"
					}else if (employeeType === 'driver') {
						userImage = "/img/driver.png"
					}  else if (employeeType === 'remployee') {
						userImage = "/img/driver.png"
					}else {
						userImage = "/img/visitor.png"
					}
					let floorId = 1;
					if(item.floorNo=='Floor1'){
						floorId = 1;
					}else if(item.floorNo=='Floor2'){
						floorId = 2;
					}else if(item.floorNo=='Floor3'){
						floorId = 3;
					}else if(item.floorNo=='Floor4'){
						floorId = 4;
					}else if(item.floorNo=='Floor5'){
						floorId = 5;
					}
					that.userMarker[item.mac] = new jsmap.JSIconTextMarker({
						id: item.my_info.code,
						position: { x:item.longitude, y: item.latitude, z: item.z },  //坐标
						floorId: floorId,  //楼层id,默认为1（地面）
						image: userImage,
						text: employee_.name,
						font: '10px sans-serif',
						fontColor: '#ffffff',
						imageHeight: 25,
						imageWidth: 25,
						backgroundColor: 'rgba(0,0,0,0.3)',
						backgroundRadius: 1,
						backgroundStrokeColor: 'rgba(0,0,0,0.3)',
						backgroundStrokeWidth: 1,
						iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
						allowPicking: true,
						displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
						nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
						show: true,
						properties: {
							employee: employee_,
							online:online
						},
						callback: (marker) => {
					 	}
					});
					that.userMaskerLayer.addMarker(that.userMarker[item.mac]);
					that.userMaskerLayer.setMarkerVisibleByFilter(false, (properties)=>{
						if(properties && properties.get('online')!==true){
							return true;
						}
						return  false;
					})
				})
			}
		},
		//更新人员标记
		refreshUserMarker() {
			if (document.getElementById("mapContainer") == null || document.getElementById("mapContainer") == undefined){
				return
			}
			let that = this;
			that.$API.third.blt.all.req(that.userParams).then(res => {
				if (res.err_msg) {
				} else {
					let userList = res.filter(item => {
						return item.my_info.employee
					});
					let addUser = that.func(userList, that.userList)[0];
					let refreshList = that.func(userList, that.userList)[1];
					that.allUserList = that.userList = refreshList.concat(addUser);//更新userList
					that.showUserMarkers(addUser);//增加新进在线员工
					that.userMaskerLayer.setMarkerVisibleByFilter(false, (properties)=>{
						if(properties && properties.get('online')!==true){
							return true;
						}
						return  false;
					})
					refreshList.forEach(item1 => {
						let item2 = {};
						item2={...item1};
						that.userMaskerLayer.updateMarkerPosition(that.userMarker[item2.mac], {
							floorId: 1,
							position: { x: item2.longitude, y: item2.latitude, z: item2.z },
							animate: { duration: 10000, }
						});//动画效果,持续时间一秒
					})
				}
			})
		},
		//比较两次获取的人数的变动  func(a,b)//a与b相比多出来的
		func(arr1, arr2) {
			let arr = [];
			let list = [];
			let bool = false;
			let same = false;
			for (let i = 0; i < arr1.length; i++) {
				for (let j = 0; j < arr2.length; j++) {
					//遇到相同直接跳出循环
					if (arr1[i].id === arr2[j].id) {
						same = i;
						bool = false;
						break;
					} else {
						same = false;
						bool = i;
					}
				}
				if (same !== false) list.push(arr1[same]);
				if (bool !== false) arr.push(arr1[bool]);
			}
			let arrList = [arr, list];
			return arrList;
		},
		//危险作业
		showPolygonMarkers(data) {
			let that = this;
			if(data.length>0){
				data.forEach(item => {
					let polygonMarker = null;
					 let areaWork = that.areaList.filter(area=>{
						return area.id==item.area
					});
					let points = areaWork[0].third_info.xx_rail.detail.polygon.points;;
					let pointsList = points.map(item => {
						let obj = item;
						obj.x=item.longitude;
						obj.y=item.latitude;
						return obj
					});
					polygonMarker = new jsmap.JSPolygonMarker({
						id: item.id+'work',//id
						position: pointsList,//坐标集合
						floorId: 1,//楼层id
						color: 'rgba(241,193,105,.44)',//填充颜色
						strokeColor: '#2bff1d',//边线颜色
						depthTest: false,//是否开启深度检测
						allowPicking: true,  //是否允许点击
						displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
						properties: {
							workId:item.id,
							area: item.area
						},//属性设置
						callback: (marker) => {
							// console.log(marker);
						}//回调
					});
					this.polygonMaskerLayer.addMarker(polygonMarker);
				})
			}
		},
		//危险作业图片标记
		// showJobDomMarkers() {
		// 	let domMarker = new jsmap.JSDomMarker({
		// 		id: 'polygonmark',
		// 		position: new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0),
		// 		floorId: 1,
		// 		depthTest: true,
		// 		content: `<div style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"><div style="background-image: url('/img/speaker.png');width: 60px;height: 80px;"></div></div>`,
		// 		offset: jsmap.JSControlPosition.RIGHT_CENTER,
		// 		displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
		// 		marginOffset: {
		// 			x: 0,
		// 			y: 0
		// 		},
		// 		properties: {
		// 			type: 0,
		// 		},
		// 		callback: (node) => {
		// 			console.log(node);
		// 		}
		// 	});
		// 	this.jobDomMarkerLayer.addMarker(domMarker);
		// },
		
		//显示人员类型选项
		userSelect() {
			this.showUserSelect = !this.showUserSelect
		},
		//暂停或旋转
		autoRunChange() {
			this.autoRun = !this.autoRun;
			if (this.autoRun) {
				this.mapRun();
			} else {
				this.mapPause();
			}
		},

		//自动旋转
		mapRun() {
			if (this.flyManager !== null) {
				this.flyManager.restartFly();
			} else {
				//地图旋转展示
				this.flyManager = new jsmap.JSFlyManager(window.map);
				this.flyManager.flyByCircle({
					center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
					distance: 500,
					duration: 100000,
					tilt: 30
				});
			}

		},

		//暂停旋转
		mapPause() {
			// this.flyManager.destroy();
			this.flyManager.pauseFly();
		},

		//多选框展开收起
		filterCtrlFocusChange() {
			this.filterCtrlFocus = !this.filterCtrlFocus
		},

		//页面maker的展示控制
		markerClick(index) {
			let arr = [];
			let that = this;
			that.markList[index] = !that.markList[index];
			if (index === 0) {
				if (that.markList[0]) {
					arr = that.markList.map(value => {
						return true
					})
				} else {
					arr = that.markList.map(value => {
						return false
					})
				}
				that.markList = arr;
			} else {
				let list = that.markList.slice(1, 7);
				if (list.indexOf(true) > -1 && list.indexOf(false) < 0) {
					that.markList[0] = true;
				} else {
					that.markList[0] = false;
				}
			}
			// if (that.markList[1]) {
			// 	window.map.showBuildingMarker = true;
			// } else {
			// 	window.map.showBuildingMarker = false;
			// }
			if (that.markList[1]) {
				that.cameraMaskerLayer.show = true;
			} else {
				that.cameraMaskerLayer.show = false;
			}
			if (that.markList[2]) {
				that.materialsMaskerLayer.show = true;
			} else {
				that.materialsMaskerLayer.show = false;
			}
			if (that.markList[3]) {
				// that.jobDomMarkerLayer.show = true;
				that.polygonMaskerLayer.show = true;
			} else {
				// that.jobDomMarkerLayer.show = false;
				that.polygonMaskerLayer.show = false;
			}
			if (that.markList[4]) {
				that.riskMarkerLayer.show = true;
			} else {
				that.riskMarkerLayer.show = false;
			}
			if (that.markList[5]) {
				that.userMaskerLayer.show = true;
				clearInterval(that.timerUser);
				that.timerUser = setInterval(function () {
					that.refreshUserMarker();
				}, 10000)
			} else {
				that.userMaskerLayer.show = false;
				clearInterval(that.timerUser);
				that.timerUser = null;
			}
		},

		//获取摄像头列表
		getVchannels() {
			let that = this;
			// debugger;
			that.$API.am.tdevice.vchannel.req({pageSize:999}).then(res => {
				if (res.err_msg) {
					that.$message.error(res.err_msg);
				} else {
					let Vchannels = res.pageData.filter(item=>{
						return item.my_info.location!==undefined;
					})
					that.Vchannels = Vchannels;
					that.showCameraMarkers(Vchannels);
				}
			});
		},

		//获取喇叭列表
		getSpeakers() {
			let that = this;
			that.$API.am.tdevice.speaker.req().then(res => {
				if (res.err_msg) {
					that.$message.error(res.err_msg);
				} else {
					let list = res.rows.filter(item=>{
						return item.my_info.location!==undefined;
					})
					that.speakerList = list;
					that.showSpeakersMarkers(res.rows);
				}
			});
		},

		//报警详情
		warningItemShow(item) {
			this.screenJob = false;
			this.screenRisk = false;
			this.screenWarningItem = item;
			this.warningId = item.id;
			// console.log(item);
			this.$nextTick(() => {
				this.screenWarning = true;
			});
		},

		//关闭危险作业
		closeScreenJob() {
			this.screenJob = false;
		},

		//关闭风险区域
		closeScreenRisk() {
			this.screenRisk = false;
		},

		//光比报警页面
		closeScreenWarning() {
			this.screenWarning = false;
		},

		//报警处理
		handleWarning() {
			let that = this;
			that.warningForm.mark = parseInt(that.warningForm.mark);
			that.$API.ecm.event.handle.req(that.warningId, that.warningForm).then(res => {
				if (res.err_msg) {

				} else {
					that.screenWarning = false;
					that.getWarnings();
				}
			})
		},

		//员工列表点击
		userRowClick(row) {
			let that = this;
			// debugger;
			window.map.flyToMarker(that.userMarker[row.mac], {
				duration: 1000,range: 200
			})
			that.screenUserItem.name = row.my_info.employee_.name;
			that.screenUserItem.type = row.my_info.employee_.type;
			that.screenUserItem.id = row.my_info.employee_.id;
			that.screenUserItem.photo = row.my_info.employee_.photo ? row.my_info.employee_.photo : '';
			that.screenUserItem.post_name = row.my_info.employee_.post_name ? row.my_info.employee_.post_name : '';
			that.screenUserItem.belong_dept_name = row.my_info.employee_.belong_dept_name ? row.my_info.employee_.belong_dept_name : '';
		},
		//人员追踪
		userTrack() {
			this.tracking = true;
			window.map.trackMarker(this.userMarker[this.screenUserItem.mac], {
				range: 200
			})
		},
		//取消人员追踪
		userUnTrack() {
			window.map.cancelTrack();
			this.tracking = false;
		},
		//人员轨迹
		userLineTrack(){
			debugger;
			let that = this;
			let obj = {};
			obj.id=that.screenUserItem.id;
			obj.mac=that.screenUserItem.mac;
			obj.name=that.screenUserItem.name;
			obj.type=that.screenUserItem.type;
			obj.floorNo=that.screenUserItem.location.xx_detail.floorNo;
			obj.longitude=that.screenUserItem.location.xx_detail.longitude;
			obj.latitude=that.screenUserItem.location.xx_detail.latitude;
			localStorage.setItem('trackItem',JSON.stringify(obj))
			this.$router.push({
				name: "track"
			});
			// that.lineTracking = true;
			// that.userMaskerLayer.show = false;
			// let nowTime = new Date().getTime();
			// let preTime = nowTime-60*60 * 1000;
			// let params = {
			// 	url:"/api/datacenter/user/historypathV2",
			// 	method:"post",
			// 	json:{
			// 		mac: that.screenUserItem.mac,
			// 		startTime: preTime,
			// 		endTime: nowTime,
			// 		locationType: "real"
			// 	}
			// };
			// let points0 = [];
			// that.$API.third.blt.xunxiCommon.req(params).then(res => {
			// 	if (res.err_msg) { } else {
			// 		let points = [];
			// 		res.forEach(item=>{
			// 			item.points.forEach(poi=>{
			// 				points.push(poi)
			// 			})
			// 		})
			// 		points.forEach(item=>{
			// 			let obj=new Object();
			// 			obj.x=item.longitude;
			// 			obj.y=item.latitude;
			// 			obj.z=item.z;
			// 			points0.push(obj); 
			// 		});
			// 		if(points0.length>0){
			// 			that.line1 = null;
			// 		if (that.line1==null) {
			// 			that.line1 = new jsmap.JSLineMarker({
			// 				position: points0,
			// 				floorId: 1,
			// 				lineType: jsmap.JSLineType.ARROW,
			// 				color: '#0000ff',
			// 				width: 10,
			// 				depthTest: true
			// 			});
			// 			window.map.addMarker(that.line1);
			// 		}
			// 		that.trackMarker = new jsmap.JSIconTextMarker({
			// 			id: '1',
			// 			position: points0[0],
			// 			image: "/img/visitor.png",
			// 			rotation: {
			// 				rx: 0,
			// 				ry: 0,
			// 				rz: -90
			// 			},
			// 			text: that.screenUserItem.name,
			// 			fontColor: '#0000ff',
			// 			font: '14px 微软雅黑',
			// 			backgroundColor: 'rgba(112,253,147,0.5)',
			// 			backgroundRadius: 5,
			// 			textOffsetInMeter: 1.6,
			// 			backgroundStrokeColor: 'rgb(255,255,255)',
			// 			modelAnimate: {
			// 				multiplier: 2,
			// 			},
			// 			scale: 1,
			// 			properties: {
			// 				name: 'trackMarker'
			// 			},
			// 			callback: (marker) => {
			// 				window.map.trackMarker(marker, {
			// 				range: 100,
			// 				tilt: 60,
			// 				rotate: 310
			// 				});
			// 				for (let i = 1; i < points0.length; i++) {
			// 					setTimeout(() => {
			// 						window.map.updateMarkerPosition(marker, {
			// 							position: points0[i],
			// 							animate: {
			// 								duration: 1000,
			// 								update: (pos) => {
			// 									that.line1.trace(pos)
			// 								}
			// 							}
			// 						});
			// 					}, i * 1000);
			// 				}
			// 			}
			// 		});
			// 		window.map.addMarker(that.trackMarker);
			// 		}else{
			// 			that.$message.error('暂无运动痕迹');
			// 		}
			// 	}
			// })
		},
		userLineTrackCancel(){
			window.location.reload();
			let that = this;
			that.lineTracking = false;
			that.userMaskerLayer.show = true;
			window.map.cancelTrack();
			window.map.removeMarker(that.trackMarker);
			window.map.removeAllPointMarker();
			window.map.removeMarker(that.line1);
			window.map.removeAllLineMarker();
			that.trackMarker = null;
			that.line1 = null;
		},
		//区域/部门切换
		cockpitChange(index) {
			this.LBType = index;
		},
		//选择人员分类
		changeDropIndex(index) {
			let that = this;
			that.dropIndex = index;
			setTimeout(function () {
				that.showUserSelect = false;
			}, 300)
		},
		allWarningView(){
			this.$router.push('/ecm/event')
		},
		speakerPasue(){
			this.speakerPlayStatus = false;
			this.music.pause(); //暂停
		},
		speakerPlay(){
			this.speakerPlayStatus = true;
			this.music.play();//播放
		},
		//关闭作业列表
		workDetailClose(){
			this.workDetail = false;
		},
		//查看监控
		showVchannel(item){
			let that = this;
			// debugger;
			console.log(item)
			that.channelCode = item.code;
			that.channelName = item.name;
			that.limitedVisible = true;
		},
		viewClose(){
			this.limitedVisible = false;
		},
		showOpretion(item){
			let that = this;
			that.ticketId = item.ticket;
			// that.projectId = item.operation;
			that.cateType = item.cate_.code;
			if (that.cateType === "visit") {
				that.projectId = item.ticket_.ticket_data.visit;
			} else if (that.cateType === "rpj") {
				that.projectId = item.ticket_.ticket_data.rpj;
			} else {
				that.cateType = "opl";
				that.projectId = item.ticket_.ticket_data.opl;
			}
			that.limitedOpreation = true;
		},
	},
	beforeRouteLeave(to, from, next){
    next();
    if (this.timerUser) {
      clearInterval(this.timerUser);
      this.timerUser = null;
    }
	if (this.timerTime) {
      clearInterval(this.timerTime);
      this.timerTime = null;
    }
	if (this.eventTimer) {
      clearInterval(this.eventTimer);
      this.eventTimer = null;
    }
	if (this.timerEventRoll) {
      clearInterval(this.timerEventRoll);
      this.timerEventRoll = null;
    }
	if (this.eventAudioTimer) {
      clearInterval(this.eventAudioTimer);
      this.eventAudioTimer = null;
    }
  },
	unmounted() {
		// window.map.destroy();
		window.map = null;
	},
}
</script>

<style lang="scss">
.handleWarningBtn,
.handleWarningBtn:active,
.handleWarningBtn:focus,
.handleWarningBtn:hover {
	cursor: pointer;
	border: 1px solid #30ffdd;
	color: #ffffff;
	background: rgba(48, 255, 220, 0.35);
}

.el-loading-spinner .el-loading-text{
  color: #Ffa500;
}

.el-loading-spinner .path{
  stroke: #Ffa500;
}

.el-radio.el-radio--small .el-radio__label {
	color: #ffffff;
}

.el-radio__input.is-checked .el-radio__inner {
	border-color: #30ffdd;
	background: #30ffdd;
}

.el-radio__input.is-checked+.el-radio__label {
	color: #30ffdd;
}

.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
	background: rgba(48, 255, 220, 0);
}

#bigScreenTree {
	background: none !important;
}

#bigScreenTree .el-tree-node__content {
	color: #ffffff;
	/*background-color:rgba(255,255,255,.1);*/
}

#bigScreenTree .el-tree-node__content:hover {
	background-color: rgba(255, 255, 255, .1)
}

#bigScreenTree .el-tree-node:focus>.el-tree-node__content {
	background-color: rgba(255, 255, 255, .1)
}

.v_title :before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	top: 14px;
	width: 0;
	height: 16px;
	border: 1px solid #31fe27;
}

.v_masker {
	width: 327px !important;
	height: 183px !important;
	background: url(/public/img/v_mask.png) no-repeat !important;
	background-size: 100% 100% !important;
}

.hoverPointer:hover {
	cursor: pointer;
}

.screen-main {
	width: 100%;
	height: 100%;

	.screen-per-list {
		height: calc(100% - 270px);
	}

	.danger-btn-bg {
		display: inline-block;
		height: 32px;
		line-height: 32px;
		border-radius: 16px;
		color: #fff;
		font-size: 14px;
		padding: 0 18px;
		border: 1px solid #ffc679;
		background: #dd8000;
		box-shadow: inset 0 0 8px #fda732;
		cursor: pointer;
	}

	.danger-btn-bg:hover {
		box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
	}

	.h100 {
		height: 100%;
	}

	.person-info-header {
		position: relative;

		.basic-btn {
			position: absolute;
			right: 0;
			top: 0;
		}

		.header-basic {
			margin-bottom: 8px;
			display: flex;
			justify-content: space-between;

			.basic-img {
				width: 104px;
				height: 144px;
			}

			.basic-info {
				width: calc(100% - 130px);

				.info-item {
					font-size: 14px;
					margin-bottom: 6px;
					display: flex;

					.info-item-name {
						color: #fff;
						font-weight: 400;
						flex-shrink: 0;
					}

					.info-item-info {
						color: #fff;
						font-weight: 500;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}

	.basic-btn-group {
		margin: 12px 0;
		display: flex;
		justify-content: space-between;

		.btn-item {
			width: 48%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			.trackImg {
				width: 16px;
				height: 16px;
				margin-right: 4px;
				background-image: url("/public/img/v_track.png");
			}

			.viewImg {
				width: 16px;
				height: 16px;
				margin-right: 4px;
				background-image: url("/public/img/v_view.png");
			}

			img {
				width: 16px;
				height: 16px;
				margin-right: 4px;
			}
		}
	}

	.screen-header {
		width: 100% !important;
		height: 84px !important;
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		background: linear-gradient(0deg, rgba(0, 113, 155, 0) 0, #00455f) !important;
		z-index: 2 !important;
		transition: all .5s linear !important;

		.header-left-bg {
			height: 60px;
			position: absolute;
			left: 18px;
			top: 12px;
			font-size: 40px;
			font-weight: 700;
			color: #fff;
		}

		.header-right-action {
			position: absolute;
			top: 10px;
			right: 18px;
			display: flex;
			align-items: center;

			.right-action-clock {
				:before {
					content: " ";
					display: inline;
					position: absolute;
					left: -24px;
					top: 9px;
					width: 16px;
					height: 16px;
					/*background: url(/img/screen5/clock.png) no-repeat;*/
					background-size: 100% 100%;
				}

				.action-time {
					width: 56px;
					height: 19px;
					font-size: 14px;
					font-weight: 400;
					color: #fff;
					position: relative;
					margin-right: 20px;
				}
			}

		}
	}

	.screen-cockpit {
		width: 440px;
		height: 100%;
		z-index: 1;
		display: flex;
		position: absolute;
		flex-direction: column;
		background: linear-gradient(90deg, #00455f, rgba(0, 113, 155, 0));
		transition: all .5s linear;
		padding-top: 84px;
		box-sizing: border-box;

		.cockpit-count {
			width: 100%;
			padding: 0 10px 0 18px;
			position: relative;
		}

		.cockpit-alarm {
			width: 100%;
			position: relative;
			padding: 0 10px 0 18px;
		}

		.cockpit-info {
			width: 100%;
			position: relative;
			padding: 0 10px 0 18px;
		}

		.divider {
			display: block;
			height: 1px;
			width: 100%;
			background: hsla(0, 0%, 100%, .5);
			z-index: 2;
		}

		.simple-title {
			line-height: 22px;
			font-size: 16px;
			font-weight: 700;
			color: #fff;
			position: relative;
			padding-left: 8px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.simple-title:before {
			content: "";
			display: inline-block;
			position: absolute;
			left: 0;
			top: 14px;
			width: 0;
			height: 16px;
			border: 1px solid #31fe27;
		}
	}

	.screen-ctrl {
		position: absolute;
		top: 60px;
		right: 18px;
		z-index: 2;
		transition: all .5s linear;
	}

	.screen-tab {
		position: absolute;
		bottom: 0;
		left: 50%;
		z-index: 9;
		transform: translate(-50%);
		transition: all .5s linear;
	}

	.screen-multiple-select {
		position: relative;
		display: inline-block;

		.multiple-select-tags {
			position: relative;
			background: rgba(48, 255, 220, .35);
			border: 1px solid #30ffdc;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 32px;
			border-radius: 16px;
			cursor: pointer;

			.multiple-select-input {
				max-width: calc(100% - 50px);
				box-sizing: border-box;
				font-size: 12px;
				color: #fff;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				margin-right: 8px;
			}

			.multiple-select-caret {
				color: #fff;
				font-size: 12px;
			}
		}

		.multiple-select-wrap {
			width: 100%;
			z-index: 20;
			position: absolute;
			top: 36px;
			left: 0;
			overflow: auto;
			max-height: 250px;
			border-radius: 4px;
			background: #007767;
			box-shadow: inset 0 0 4px #0bf1ff;

			.multiple-select-ul {
				padding: 4px 0;

				.multiple-select-li {
					position: relative;
					padding: 0 16px 0 32px;
					width: 100%;
					font-size: 14px;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #fff;
					height: 34px;
					line-height: 34px;
					box-sizing: border-box;
					cursor: pointer;
					text-align: left;
				}

				.multiple-select-label {
					color: #fff;
					font-size: 12px;
				}
			}
		}
	}

	.screen-risk {
		width: 390px;
		height: fit-content;
		max-height: calc(100% - 180px);
		padding: 0 16px 16px;
		background: rgba(24, 36, 51, .7);
		position: absolute;
		top: 170px;
		right: 18px;
		z-index: 9999;
		overflow-y: scroll;
		transition: all .5s linear;

		.risk-content {
			height: calc(100% - 44px);

			.risk-item {
				font-size: 14px;
				margin-bottom: 12px;
				display: flex;

				.risk-item-name {
					color: hsla(0, 0%, 100%, .8);
					font-weight: 400;
				}

				.risk-item-info {
					color: #fff;
					font-weight: 500;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.screen-job {
		width: 390px;
		padding: 0 16px 16px;
		background: rgba(24, 36, 51, .7);
		position: absolute;
		top: 170px;
		right: 18px;
		z-index: 1;
		transition: all .5s linear;

		.job-content {
			height: calc(100% - 44px);
			overflow-y: auto;

			.job-basic {
				.job-item {
					font-size: 14px;
					margin-bottom: 12px;
					display: flex;

					.job-item-name {
						color: hsla(0, 0%, 100%, .8);
						font-weight: 400;
						flex-shrink: 0;
						width: 90px;
						text-align: right;
					}

					.job-item-info {
						color: #fff;
						font-weight: 500;
					}
				}
			}

			.job-list {
				line-height: 35px;
			}
		}
	}

	.screen-user {
		width: 390px;
		padding: 0 16px 16px;
		background: rgba(24, 36, 51, .7);
		position: absolute;
		top: 170px;
		right: 18px;
		z-index: 1;
		transition: all .5s linear;
		overflow-y: scroll;
    	max-height: 80vh;
		.job-content {
			height: calc(100% - 44px);
			overflow-y: auto;

			.job-basic {
				.job-item {
					font-size: 14px;
					margin-bottom: 12px;
					display: flex;

					.job-item-name {
						color: hsla(0, 0%, 100%, .8);
						font-weight: 400;
						flex-shrink: 0;
						width: 90px;
						text-align: right;
					}

					.job-item-info {
						color: #fff;
						font-weight: 500;
					}
				}
			}

			.job-list {
				.custom-table {
					height: 100%;

					.custom-table-head {
						display: flex;

						.table-head-item {
							padding: 0 4px;
							color: #fff;
							font-size: 14px;
							font-weight: 700;
							height: 34px;
							line-height: 34px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							text-align: left;
						}
					}

					.custom-table-body {
						max-height: calc(50vh - 100px);

						.table-body-item {
							display: flex;

							.body-item-label {
								padding: 0 4px;
								color: #fff;
								font-size: 13px;
								font-weight: 400;
								height: 34px;
								line-height: 34px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								text-align: left;
							}
						}
					}
				}
			}
		}
	}

	.simple-title {
		line-height: 22px;
		font-size: 16px;
		font-weight: 700;
		color: #fff;
		position: relative;
		padding-left: 8px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.simple-title:before {
		content: "";
		display: inline-block;
		position: absolute;
		left: 0;
		top: 14px;
		width: 0;
		height: 16px;
		border: 1px solid #31fe27;
	}

	.simple-btn {
		display: inline-block;
		height: 32px;
		line-height: 32px;
		border-radius: 16px;
		color: #32fde3;
		font-size: 14px;
		padding: 0 18px;
		background: transparent;
		border: 1px solid #32fde3;
		cursor: pointer;
	}

	.grow {
		flex-grow: 1;
	}

	.common-basic-info {}

	.person-cert {
		right: 410px;
		top: 0;
		width: 390px;
		max-height: 630px;
		border-radius: 4px;
		padding: 0 20px 20px;
		position: absolute;
		background: rgba(24, 36, 51, .7);
		.basic-head {
			position: relative;
			margin-bottom: 16px;
			.header-tab {
				width: 160px;
			}
		}

		.basic-info {
			min-height: 400px;
			.info-item {
				font-size: 14px;
				height: 30px;
				display: flex;
				align-items: center;
			}

			.info-item-name {
				color: #fff;
				font-weight: 400;
				flex-shrink: 0;
			}

			.info-item-info {
				color: #fff;
				font-weight: 500;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.right_arrow:before {
		content: "";
		display: inline-block;
		position: absolute;
		right: -15px;
		top: 14px;
		width: 15px;
		height: 17px;
		transform: rotate(180deg);
		background: url(/public/img/left_arrow.png) no-repeat;
		background-size: 100% 100%;
	}
}

.el-dialog__wrapper {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
	margin: 0;

	.el-dialog {
		top: 50%;
		margin-top: 0 !important;
		transform: translateY(-50%);
		background: rgba(24, 36, 51, .7);

		.el-dialog__header {
			padding: 0;
			height: 44px;
			line-height: 44px;
			background-size: 250px 70px;
			text-align: center;
		}

		.el-dialog__title {
			color: #fff;
			font-size: 15px;
		}

		.el-dialog__headerbtn {
			top: 14px;
		}
	}
}

.screen-cockpit {
	.cockpit-count {
		.count-list {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 10px;

			.count-list-item {
				width: 25%;
				height: 50%;
				display: flex;

				.item-img {
					width: 50px;
					height: 50px;
					position: relative;
					margin-right: 5px;
					flex-shrink: 0;
				}

				.item-img:after {
					content: "";
					width: 38px;
					height: 38px;
					position: absolute;
					left: 7px;
					top: 7px;
					background: url(/public/img/rotate_line.png) no-repeat;
					background-size: 100% 100%;
					-webkit-animation: rotate 4s linear infinite;
					animation: rotate 4s linear infinite;
				}

				.item-img1 {
					background: url(/public/img/icon_wlry.png) no-repeat;
					background-size: 100% 100%;
				}

				.item-img2 {
					background: url(/public/img/icon_nbyg.png) no-repeat;
					background-size: 100% 100%;
				}

				.item-img3 {
					background: url(/public/img/icon_cbs.png) no-repeat;
					background-size: 100% 100%;
				}

				.item-img4 {
					background: url(/public/img/icon_nbcl.png) no-repeat;
					background-size: 100% 100%;
				}
				.item-info {
					.normal {
						font-size: 12px;
						font-weight: 400;
						color: #fff;
					}

					.large {
						font-size: 30px;
						font-weight: 400;
						color: #fff;
					}
				}
			}
		}

		.simple-title {
			.countTypeWrap {
				font-size: 14px;

				span {
					cursor: pointer;
				}

				.activeCount {
					display: inline-block;
					height: 32px;
					line-height: 32px;
					border-radius: 16px;
					color: #fff;
					font-size: 14px;
					padding: 0 18px;
					border: 1px solid #32fde3;
					background: #007767;
					box-shadow: inset 0 0 8px #5aecf0;
					cursor: pointer;
				}

			}
		}
	}

	.cockpit-alarm {
		.alarm-bell {
			padding: 0 18px 0 32px;
			position: relative;
			color: #fff;
		}

		.alarm-bell:after {
			content: "";
			position: absolute;
			left: 12px;
			top: 8px;
			width: 14px;
			height: 16px;
			background: url(/public/img/bell.png) no-repeat;
			background-size: 100% 100%;
		}

		.alarm-bell.danger {
			border: 1px solid #ffc679;
			background: #dd8000;
			box-shadow: inset 0 0 8px #fda732;
		}

		.alarm-bell.danger:hover {
			box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
		}

		.alarm-content {
			// display: flex;
			justify-content: space-between;
			height: calc(100% - 50px);
			.alarm-danger {
					width: 50px;
					height: 50px;
					background: url(/public/img/a_danger.png) no-repeat;
					background-size: 100% 100%;
				}
			.content-left {
				width: 160px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.alarm-danger {
					width: 50px;
					height: 50px;
					background: url(/public/img/a_danger.png) no-repeat;
					background-size: 100% 100%;
				}
			}

			.content-right {
				width: 100%;
				overflow: hidden;
				height: fit-content;

				.alarm-item {
					min-width: 50%;
					height: 26px;
					font-size: 14px;
					font-weight: 700;
					padding-left: 8px;
					position: relative;
					display: flex;
					align-items: center;
					float: left;

					.item-name {
						margin-right: 4px;
						flex-shrink: 0;
					}

					.item-number {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.item-icon {
						width: 14px;
						height: 14px;
						margin-right: 4px;
						flex-shrink: 0;
					}
				}

				.alarm-item-danger {
					color: #fda732;

					.item-icon {
						background: url(/public/img/r_danger.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.alarm-item-safe {
					color: #fff;

					.item-icon {
						background: url(/public/img/r_safe.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}
	}

	.cockpit-info {
		.header-tab {
			width: 210px;
		}
	}
}

.screen-ctrl {
	.screen-filter {
		position: absolute;
		top: 0;
		right: 0;

		.filter-content {
			display: flex;
			align-items: center;
			background: rgba(24, 36, 51, .5);
			border-radius: 20px;

			.filter-ctrl {
				width: 420px;
				height: 40px;
				display: flex;
				align-items: center;
				background: transparent;
				overflow: hidden;
				padding: 0 20px;
				z-index: 8;
				transition: all .5s linear;

				.screen-check-content {
					margin-right: 16px;
				}
			}

			.caret-dropdown {
				color: #fff;
			}

			.drop-content {
				position: absolute;
				right: 50px;
				top: 44px;
				padding: 4px;
				box-shadow: inset 0 0 4px #2cedff;
				background: rgba(24, 36, 51, .8);
				border-radius: 4px;
				transition: .5s;
				z-index: 10;
				max-height: 50vh;
					overflow-y: scroll;
				.drop-content-item {
					color: #fff;
					position: relative;
					width: 110px;
					font-size: 13px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					height: 34px;
					line-height: 34px;
					box-sizing: border-box;
					text-align: center;
					cursor: pointer;
				}

				.drop-content-item.active {
					color: rgba(44, 237, 255, .8);
					background-color: rgba(24, 36, 51, .3);
				}

				.drop-content-item:hover {
					color: rgba(44, 237, 255, .8);
					background-color: rgba(24, 36, 51, .3);
				}

			}

			.filter-action {
				width: 56px;
				height: 40px;
				padding: 0 18px;
				background: rgba(24, 36, 51, .7);
				border-radius: 20px;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				z-index: 2;

				.action-shrink {
					width: 20px;
					height: 20px;
					background: url(/public/img/shrink.png) no-repeat;
					background-size: 100% 100%;
					cursor: pointer;
					transition: all .5s linear;
					transform: rotate(180deg);
				}

				.action-shrink.shrink-hidden {
					transform: rotate(0deg);
					background: url(/public/img/shrink.png) no-repeat;
				}

				.roam-play {
					background: url(/public/img/play.png) no-repeat;
					background-size: 100% 100%;
				}

				.roam-pause {
					background: url(/public/img/pause.png) no-repeat;
					background-size: 100% 100%;
				}

				.action-roam {
					width: 20px;
					height: 20px;
					cursor: pointer;
				}
			}

			.filter-action.showroam {
				width: 96px;
			}
		}
	}

	.screen-search {
		position: absolute;
		top: 54px;
		right: 0;

		.search-content {
			padding: 5px;
			background: rgba(24, 36, 51, .5);
			border-radius: 20px;
			display: flex;
			align-items: center;
			position: relative;
		}

		input {
			width: 0;
			height: 30px;
			font-size: 13px;
			outline: none;
			border: none;
			padding: 0;
			margin: 0;
			background: transparent;
			color: #fff;
			transition: all .5s linear;
			opacity: 0;
		}

		.input-focus {
			width: 250px;
			opacity: 1;
			padding: 0 20px 0 12px;
		}

		.close-btn {
			position: absolute;
			top: 12px;
			right: 50px;
			width: 8px;
			height: 8px;
			cursor: pointer;
			color: #fff;
		}

		.search {
			margin: auto;
			width: 30px;
			height: 30px;
			background: #5bde0b;
			border-radius: 50%;
			transition: all 1s;
			position: relative;
		}

		.search:after {
			content: "";
			display: inline-block;
			position: absolute;
			top: 8px;
			left: 8px;
			width: 13px;
			height: 13px;
			background: url(/public/img/search.png) no-repeat;
			background-size: 100% 100%;
			cursor: pointer;
		}

		.auto-suggestion {
			position: absolute;
			left: 10px;
			top: 46px;
			background: rgba(24, 36, 51, .8);

			.suggestion-select-ul {
				padding: 4px;
				max-height: 350px;
				overflow-y: auto;
			}
		}
	}
}

.screen-tab {
	.screen-tab-content {
		display: flex;
		align-items: center;
	}

	.tab-menu-item {
		width: 150px;
		height: 80px;
		text-align: center;
		margin: 0 10px;
		cursor: pointer;
	}

	.tab-menu-text {
		height: 80px;
		line-height: 80px;
		font-size: 14px;
		font-weight: 400;
		color: #2cedff;
	}

	.tab-menu {
		background: url(/public/img/menu.png) no-repeat;
		background-size: 100% 100%;
	}

	.tab-menu-active {
		background: url(/public/img/menu_active.png) no-repeat;
		background-size: 100% 100%;

		.tab-menu-text {
			font-weight: 700;
			color: #fff;
		}
	}
}

.screen-main {
	.header-tab {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tab-item {
			padding: 0 4px;
			text-align: center;
			font-size: 15px;
			font-weight: 400;
			color: #fff;
			position: relative;
			cursor: pointer;
		}

		.tab-item-active {
			font-weight: 700;
		}

		.tab-item-active:after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -2px;
			height: 5px;
			width: 100%;
			background: linear-gradient(90deg, rgba(48, 255, 221, 0), rgba(48, 255, 221, .8) 50%, rgba(48, 255, 221, 0));
		}
	}
}

.screen-main {
	.icon-close {
		width: 14px;
		height: 14px;
		background: url(/public/img/close.png) no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}

	.simple-btn-bg {
		display: inline-block;
		height: 32px;
		line-height: 32px;
		border-radius: 16px;
		color: #fff;
		font-size: 14px;
		padding: 0 18px;
		border: 1px solid #32fde3;
		background: #007767;
		box-shadow: inset 0 0 8px #5aecf0;
		cursor: pointer;
	}

	.simple-btn-bg:hover {
		box-shadow: 0 0 8px #5aecf0, inset 0 0 8px #5aecf0;
	}

	.screen-check-content {
		display: flex;
		align-items: center;
		height: 40px;

		.box-btn {
			width: 16px;
			height: 16px;
			margin-right: 6px;
			cursor: pointer;
			border: 1px solid #5bde0b;
			border-radius: 3px;
		}

		.box-text {
			font-size: 14px;
			font-weight: 400;
			line-height: 40px;
			color: #fff;
			white-space: nowrap;
		}

		.box-check {
			background: url(/public/img/check.png) no-repeat 100% 100% !important;
		}
	}

	.noData {
		width: 100%;
		height: 300px;

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

}

.alarm-detail-info {
	position: absolute;
	left: 480px;
	top: -73px;
	width: 390px;
	background: rgba(24, 36, 51, .7);
	border-radius: 4px;
	padding: 0 12px 0 12px;
	z-index: 20;
	.action-group {
		display: flex;
		align-items: center;
		width: 20px;
		justify-content: space-between;
	}

	.detail-text-btn {
		cursor: pointer;
		color: #30ffdd;
		font-size: 12px;
		position: relative;
		padding-right: 12px;
		font-weight: 400;
	}

	.detail-content {
		position: relative;

		.content-head {
			display: flex;
			align-items: center;
			justify-content: space-around;

			.head-select {
				width: calc(100% - 60px);
			}

			.head-sound {
				width: 20px;
				height: 20px;
				cursor: pointer;
			}

			.sound-ring {
				background: url(/public/img/b_ring.png) no-repeat;
				background-size: 100% 100%;
			}
			.sound-quiet {
				background: url(/public/img/b_quiet.png) no-repeat;
				background-size: 100% 100%;
			}

		}

		.content-body {
			min-height: 200px;
			max-height: calc(60vh - 120px);
			overflow-y: auto;
			overflow-x: hidden;
			margin-top: 10px;

			.alarm-item {
				display: flex;

				.item-type {
					width: 40px;
					height: 45px;
					background: url(/public/img/alarm_bg.png) 50% no-repeat;
					font-size: 14px;
					color: #fff;
					text-align: center;
					margin-top: 10px;
				}

				.item-content {
					margin-left: 14px;
					padding: 10px 0 10px 10px;
					color: #fff;
					width: calc(100% - 56px);
					font-size: 14px;
					border-left: 1px dashed rgba(225, 255, 255, .3);
					position: relative;

					.item-content-top {
						display: flex;
						justify-content: space-between;
						padding: 0 4px;
						font-size: 14px;
						cursor: pointer;

						.time {
							color: #fff;
						}

						.status {
							color: #fd8018;
						}
					}

					.item-content-middle {
						.alarm-info {
							font-size: 14px;
							font-weight: 700;
							cursor: pointer;
						}
					}
				}

				.item-content:before {
					content: "";
					display: inline-block;
					position: absolute;
					left: -7px;
					top: 12px;
					width: 12px;
					height: 12px;
					background: url(/public/img/round.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.content-footer {
			text-align: center;

			.btn-prev {
				color: #fff;
				background: transparent;

				.el-icon {
					display: block;
					font-size: 12px;
					font-weight: 700;
				}
			}

			.btn-next {
				color: #fff;
				background: transparent;

				.el-icon {
					display: block;
					font-size: 12px;
					font-weight: 700;
				}
			}

			.el-pagination {
				white-space: nowrap;
				padding: 2px 5px;
				color: #ffffff;
				font-weight: 700;

				button {
					border: none;
					padding: 0 6px;
					display: inline-block;
					font-size: 13px;
					min-width: 35.5px;
					height: 28px;
					line-height: 28px;
					vertical-align: top;
					box-sizing: border-box;
					background: rgba(255, 255, 255, 0) !important;
				}

				.btn-prev {
					background: rgba(255, 255, 255, 0) !important;
				}

				.el-pager {
					vertical-align: top;
					margin: 0;
					display: inline-block;
					background: rgba(255, 255, 255, 0) !important;

					li {
						vertical-align: top;
						margin: 0;
						display: inline-block;
						padding: 0 4px;
						font-size: 13px;
						min-width: 35.5px;
						height: 28px;
						line-height: 28px;
						box-sizing: border-box;
						text-align: center;
						background: rgba(255, 255, 255, 0) !important;
					}
				}

				.btn-next {
					padding-left: 12px;
					cursor: pointer;
					margin: 0;
				}
			}
		}

		.el-loading-mask {
			position: absolute;
			z-index: 2000;
			background-color: hsla(0, 0%, 100%, .9);
			margin: 0;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			transition: opacity .3s;

			.el-loading-spinner {
				top: 50%;
				margin-top: -21px;
				width: 100%;
				text-align: center;
				position: absolute;

				.el-loading-spinner i {
					color: #409eff;
				}
			}
		}
	}
}

.screen-main .left_arrow:before,
.screen-main .left_middle_arrow:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: -15px;
	width: 15px;
	height: 17px;
	/*background: url(/public/img/left_arrow.png) no-repeat;*/
	background-size: 100% 100%;
}

.areaNavItem {
	color: #ffffff;
	padding: 8px 16px;
	border-radius: 15px;
}
.areaActive {
	border: 1px solid #32fde3;
    background: #007767;
    box-shadow: inset 0 0 8px #5aecf0;
}

[class*=" el-icon-"],
[class^=el-icon-] {
	font-family: element-icons !important;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: baseline;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.el-dialog__headerbtn {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	background: 0 0;
	border: none;
	outline: 0;
	cursor: pointer;
	font-size: 16px;
}

.item-textarea {
	width: 250px;
}

.item-textarea>.el-textarea__inner {
	resize: none;
	width: 100%;
	height: 70px;
	margin-top: 8px;
	outline: none;
	color: #fff;
	background: hsla(0, 0%, 100%, .26);
	border: 1px solid hsla(0, 0%, 100%, .5);
}

#mapContainer {
	width: 100%;
	height: 100%;
	background-color: #49a1ff;
}

#bigScreenUserTable {
	color: #ffffff;
}

.bigScreenTable.el-table {
	background-color: rgba(255, 255, 255, 0);
	color: #ffffff;
}

.bigScreenTable.el-table thead {
	color: rgba(255, 255, 255, 1);
}

.bigScreenTable.el-table tr {
	background-color: rgba(255, 255, 255, 0);
}

.bigScreenTable.el-table .el-table__body-wrapper {
	background-color: rgba(255, 255, 255, 0);
}

.bigScreenTable.el-table th.el-table__cell {
	background-color: rgba(255, 255, 255, 0);
}

.bigScreenTable.el-table td.el-table__cell,
.bigScreenTable.el-table th.el-table__cell.is-leaf {
	border-bottom: none;
}

.bigScreenTable.el-table .el-table__body tr:hover>td.el-table__cell {
	background-color: rgba(255, 255, 255, 0);
}

.bigScreenTable.el-table .el-table__body tr.current-row>td.el-table__cell {
	background-color: rgba(255, 255, 255, .1);
}
#audio{
	position: fixed;
	opacity: 0;
}
#eventScrenWrap{
	height:50px;
	width: calc(100% - 50px);
	overflow:hidden;
	padding-left: 20px;
	position: relative;
}
#eventScrenItem{
	line-height: 50px;
	font-size: 20px;
	color: cyan;
	position: absolute;
}
#bigScreeWrap{
	position: fixed;
    z-index: 9999;
    top: 0;
	display: none;
    width: 100vw;
    height: 100vh;
    text-align: center;
	background-color: rgba(0,0,0,0.8);
	padding: 40px 20px 20px 20px;
}
.bigScreeImg{
	width: 20px;
	height: 20px;
	background-color: red;
}
.bigScreeClose{
	width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    position: absolute;
	background: url(/public/img/close.png) no-repeat;
}
#videoElement{
	width: auto;
    height: 60vh;
}
</style>
