<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">2022-06-22</span>
					<span class="action-time">周三下午 </span>
					<span class="action-time">17:59:52</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="screen-check-content hoverPointer" @click="markerClick(6)">
							<span class="box-btn box-uncheck" :class="{'box-check':markList[6]}"></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">
						<div @click="changeDropIndex('1')" class="drop-content-item"
							 :class="{'active':dropIndex==='1'}">全部
						</div>
						<div @click="changeDropIndex('2')" class="drop-content-item"
							 :class="{'active':dropIndex==='2'}">内部员工
							<div></div>
						</div>
						<div @click="changeDropIndex('3')" class="drop-content-item"
							 :class="{'active':dropIndex==='3'}">相关方
						</div>
						<div @click="changeDropIndex('4')" class="drop-content-item"
							 :class="{'active':dropIndex==='4'}">访客
						</div>
						<el-tree
							ref="group"
							id="bigScreenTree"
							node-key="id"
							:data="group"
							show-checkbox
							:current-node-key="''"
							:highlight-current="true"
							:expand-on-click-node="false"
							@node-click="groupClick"
						></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="输入姓名/定位卡号/车牌号进行查找" class="input-focus"><span
					class="close-btn el-icon-circle-close" style="display: none;"></span>
					<div class="search"></div>
					<div class="auto-suggestion" style="display: none;">
						<div class="suggestion-select-ul"></div>
					</div>
				</div>
			</div>
		</div>
		<!--人员统计-->
		<div class="screen-cockpit">
			<div class="cockpit-count">
				<div class="divider"></div>
				<div class="simple-title">数据统计</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">76</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">0</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">0</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>{{warningList.length}}</span>&nbsp;报警
					</div>
				</div>
				<div class="alarm-content">
					<div class="content-left">
						<div class="alarm-danger"></div>
					</div>
					<div class="content-right">
						<div title="缺员报警 3" class="alarm-item alarm-item-danger"><span class="item-icon"></span><span
							class="item-name">缺员报警</span><span class="item-number" style="">3</span></div>
						<div title="超员报警 2" class="alarm-item alarm-item-danger"><span class="item-icon"></span><span
							class="item-name">超员报警</span><span class="item-number" style="">2</span></div>
						<div title="静止报警 0" class="alarm-item alarm-item-safe"><span class="item-icon"></span><span
							class="item-name">静止报警</span><span class="item-number" style="display: none;">0</span></div>
						<div title="越界报警 2" class="alarm-item alarm-item-danger"><span class="item-icon"></span><span
							class="item-name">越界报警</span><span class="item-number" style="">2</span></div>
						<div title="一键报警 0" class="alarm-item alarm-item-safe"><span class="item-icon"></span><span
							class="item-name">一键报警</span><span class="item-number" style="display: none;">0</span></div>
						<div title="滞留报警 0" class="alarm-item alarm-item-safe"><span class="item-icon"></span><span
							class="item-name">滞留报警</span><span class="item-number" style="display: none;">0</span></div>
						<div title="车辆报警 0" class="alarm-item alarm-item-safe"><span class="item-icon"></span><span
							class="item-name">车辆报警</span><span class="item-number" style="display: none;">0</span></div>
						<div title="作业报警 2" class="alarm-item alarm-item-danger"><span class="item-icon"></span><span
							class="item-name">作业报警</span><span class="item-number" style="">2</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">查看详情</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">
									<span class="multiple-select-input">全部</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">
											<span class="multiple-select-label">全部</span>
										</div>
										<div class="multiple-select-li" @click="warningTypeSelected">
											<span title="超员报警" class="multiple-select-label">超员报警</span>
										</div>
										<div class="multiple-select-li" @click="warningTypeSelected">
											<span title="缺员报警" class="multiple-select-label">缺员报警</span>
										</div>
										<div class="multiple-select-li" @click="warningTypeSelected">
											<span title="静止报警" class="multiple-select-label">静止报警</span>
										</div>
										<div class="multiple-select-li" @click="warningTypeSelected">
											<span title="越界报警" class="multiple-select-label">越界报警</span>
										</div>
										<div class="multiple-select-li" @click="warningTypeSelected">
											<span title="滞留报警" class="multiple-select-label">滞留报警</span>
										</div>
										<div class="multiple-select-li">
											<span title="一键报警" class="multiple-select-label">一键报警</span>
										</div>
										<div class="multiple-select-li">
											<span title="车辆超速报警" class="multiple-select-label">车辆超速报警</span>
										</div>
										<div class="multiple-select-li">
											<span title="车辆越界报警" class="multiple-select-label">车辆越界报警</span>
										</div>
										<div class="multiple-select-li">
											<span title="车辆滞留报警" class="multiple-select-label">车辆滞留报警</span>
										</div>
										<div class="multiple-select-li">
											<span title="非作业人员闯入报警" class="multiple-select-label">非作业人员闯入报警</span>
										</div>
										<div class="multiple-select-li">
											<span title="作业人员离开报警" class="multiple-select-label">作业人员离开报警</span>
										</div>
									</div>
								</div>
							</div>
							<div class="head-sound sound-ring"></div>
						</div>
						<div class="content-body">
							<!--warningList-->
							<div class="alarm-item" v-for="(item) in warningList" :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 class="alarm-item">
								<div class="item-type">越界报警</div>
								<div class="item-content">
									<div class="item-content-top"><span class="time">2022-07-01 11:39:03</span><span
										class="status">未处理</span></div>
									<div class="item-content-middle mt6">
										<div class="alarm-info">【生产管理部】【马经艺】进入【测试-绿地】【0分钟】触发了【越界报警】</div>&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;
									</div>
								</div>
							</div>
							<div class="alarm-item">
								<div class="item-type">超员报警</div>
								<div class="item-content">
									<div class="item-content-top"><span class="time">2022-06-28 10:41:04</span><span
										class="status">未处理</span></div>
									<div class="item-content-middle mt6">
										<div class="alarm-info">【生产车间三】多于【5人】【1分钟】发生了【超员报警】</div>&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;</div>
								</div>
							</div>
							<div class="alarm-item">
								<div class="item-type">越界报警</div>
								<div class="item-content">
									<div class="item-content-top"><span class="time">2022-06-28 10:38:40</span><span
										class="status">未处理</span></div>
									<div class="item-content-middle mt6">
										<div class="alarm-info">【生产管理部】【马浩初】进入【测试-绿地】【0分钟】触发了【越界报警】</div>&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;
									</div>
								</div>
							</div>
							<div class="alarm-item">
								<div class="item-type">缺员报警</div>
								<div class="item-content">
									<div class="item-content-top"><span class="time">2022-06-28 10:37:53</span><span
										class="status">未处理</span></div>
									<div class="item-content-middle mt6">
										<div class="alarm-info">【生产车间三】少于【8人】发生了【缺员报警】</div>&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;</div>
								</div>
							</div>
							<div class="alarm-item">
								<div class="item-type">超员报警</div>
								<div class="item-content">
									<div class="item-content-top"><span class="time">2022-06-28 10:37:41</span><span
										class="status">未处理</span></div>
									<div class="item-content-middle mt6">
										<div class="alarm-info">【承包商开票区】多于【2人】【0分钟】发生了【超员报警】</div>&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;</div>
								</div>
							</div>
							<div class="alarm-item">
								<div class="item-type">缺员报警</div>
								<div class="item-content">
									<div class="item-content-top"><span class="time">2022-06-28 10:37:27</span><span
										class="status">未处理</span></div>
									<div class="item-content-middle mt6">
										<div class="alarm-info">【浓硫酸车间二】少于【2人】发生了【缺员报警】</div>&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;</div>
								</div>
							</div>-->
						</div>
						<div class="content-footer" style="">
							<el-pagination
								:page-size="20"
								:pager-count="11"
								layout="prev, pager, next"
								:total="100" />
						</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="cockpit-info">
				<div class="divider"></div>
				<div class="simple-title">
					<div class="header-tab"><span class="tab-item tab-item-active">区域信息情况</span><span class="tab-item">部门信息情况</span>
					</div>
					<div class="simple-btn-bg alarm-btn">需充电卡片0人</div>
				</div>

			</div>
		</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>
				<!--<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>-->
			</div>
		</div>
		<!--地图-->
		<div id='mapContainer'></div>
		<!--视频弹窗-->
		<!--	<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 class="v_title">1111111</div>
                <div class="v_masker"></div>
            </div>-->
		<!--危险作业-->
		<div class="screen-job" v-if="screenJob">
			<div class="simple-title">
				<div>查看作业详情</div>
				<div class="simple-btn" @click="closeScreenJob">关闭</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">动火作业</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">作业证编号：</span>
						<span class="job-item-info">111111111</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">作业证等级：</span>
						<span class="job-item-info">特级</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">申请单位：</span>
						<span class="job-item-info">金隅</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">申请人：</span>
						<span class="job-item-info">金隅工人</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">开始时间：</span>
						<span class="job-item-info">2022-07-01 10:00:00</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">结束时间：</span>
						<span class="job-item-info">2022-07-02 00:00:00</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">作业内容：</span>
						<span class="job-item-info">设备检修</span>
					</div>
					<div class="job-item">
						<span class="job-item-name">作业人员：</span>
						<span class="job-item-info">张江,李斯</span>
					</div>
				</div>
				<div class="simple-title">
					<div>安全措施</div>
				</div>
				<div class="job-list">
					<div class="custom-table">
						<div class="custom-table-head">
							<div class="table-head-item w50">序号</div>
							<div class="table-head-item grow">安全措施</div>
							<div class="table-head-item w80">确认人</div>
						</div>
						<div class="custom-table-body">
							<div class="table-body-item">
								<div class="body-item-label w50">1</div>
								<div class="body-item-label grow">佩戴安全帽，穿安全衣，系安全绳</div>
								<div class="body-item-label w80">chen</div>
							</div>
						</div>
					</div>
				</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">重大风险区域</span>
					</div>
					<div class="risk-item"><span class="risk-item-name">风险等级：</span><span class="risk-item-info">重大风险</span>
					</div>
					<div class="risk-item"><span class="risk-item-name">创建人：</span><span
						class="risk-item-info">李英</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">
						<span class="risk-item-name">事件截图：</span>
						<img :src="'http://10.0.11.101:8000'+screenWarningItem.global_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>
	</div>
</template>
<script>
	import {genTree} from "@/utils/verificate";
	export default {
		data() {
			return {
				domMarkerLayer: null,
				boxMarkerLayer: null,//风险区域
				pointMarkerLayer: null,//点位图层
				polygonMaskerLayer: null,//危险作业
				cameraMaskerLayer: null,//摄像头
				materialsMaskerLayer: null,//消防物资
				carsMaskerLayer: null,//车辆
				manMaskerLayer: null,//人员
				flyManager: null,
				dropIndex: '1',
				markList: [false, false, false, false, false, false, false],
				autoRun: false,
				screenJob: false,
				screenRisk: false,
				screenWarning: false,
				warningTypeShow: false,
				showUserSelect: false,
				warningDetail: false,
				filterCtrlFocus: true,
				Vchannels: [],//摄像头列表
				warningList: [],//报警事件列表
				speakerList: [],//喇叭列表
				userList: [],//人员列表
				deptList: [],//部门列表
				userCount:{
					employee:0,//内部员工
					visitor:0,//访客
					parties:0//相关方
				},
				screenJobItem: {},//危险作业信息
				screenRiskItem: {},//风险区域信息
				screenWarningItem: {},//风险区域信息
				screenUserItem: {},//人员信息
				url: '',
				params: {
					json: {
						data: {
							channelId: "",
							streamType: "2",
							type: "flv"
						}
					},
					code: 'video_realtime'
				},
				/*groupsProps: {
					multiple: true,
					emitPath: false,
					checkStrictly: true,
				},*/
				group: [],
				groupsProps: {
					value: "id",
					multiple: true,
					checkStrictly: true,
				},
				filters:{
					type:'',
					dept:'',
					keyword:'',
				},
				warningId:'',
				warningForm:{
					handle_desc:'',
					mark:'1',
				},
			}
		},
		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() {
			window.map = new jsmap.JSMap({
				mapType: jsmap.JSMapType.MAP_3D,
				container: 'mapContainer',
				mapServerURL: 'data/map',
				enableShadows: false, //是否开启阴影 默认false
				enableLighting: false, //是否开发光照 默认false
				showBuildingMarker: false,
				// 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: 400,
					// 旋转角（单位°）
					rotate: 0,
					//倾斜角（单位°）
					tilt: 45,
				}
			});
			window.map.openMapById('0000');
			window.map.on('loadComplete', e => {
				this.domMarkerLayers();
				this.boxMaskerLayers();//风险区域
				this.pointMaskerLayers();
				this.cameraMaskerLayers();//摄像头
				this.polygonMarkerLayers();//危险作业
				this.speakersMaskerLayers();//laba
			});
			window.map.on('mapClickNode', event => {
				debugger;
				let item = event;
				let type = event.nodeType.toString();
				console.log(type==='Symbol(icontextmaker)');
				if (item.markers.length > 0) {
					if(type==='Symbol(boxmarker)'){
						this.screenJob = false;
						this.screenWarning = false;
						this.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);
									}
								});
								window.map.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.id = 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);
								newEle2.onclick = () => {
									this.$API.am.video.item.req(this.params).then(res => {
										debugger;
										console.log(res);
										this.url = res.url;
										if (flvjs.isSupported()) {
											let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
											let flvPlayer = flvjs.createPlayer({
												type: 'flv',
												url: res.url
											});
											flvPlayer.attachMediaElement(videoElement);
											flvPlayer.load();
											flvPlayer.play();
										}
									})
								};
								close.onclick = () => {
									let nodeMark = document.getElementById(item.markers[0].id);
									nodeMark.remove();
								}
							}else{
								//人员
							}
						}

					}else if(type==='Symbol(polygonmarker)'){
						//危险作业
						this.screenRisk = false;
						this.screenWarning = false;
						this.screenJob = true;
					}
				} else {
				}
			});
			/*
			* <div class="v_title" style="width: 327px;height: 45px;padding: 10px 0;font-size: 16px;font-weight: 700;color: #fff;position: relative;padding-left: 8px;display: flex;justify-content: space-between">
									<div>`+event.markers[0].text+`</div><div style="width: 16px;height: 16px;background: url(.//public/img/close.png) no-repeat;background-size: 100% 100%;" @click="closeVideo"></div>
									</div>
									<div class="v_masker" style="width: 327px;height: 183px;background: url(.//public/img/v_mask.png) no-repeat;background-size: 100% 100%;" @click="playVideo()"></div>
									<div id="`+event.markers[0].id+`"></div>
			* */
			this.getGroup();
			//左侧数据统计
			this.getVchannels();//数据统计
			this.getWarnings();//报警统计
			this.getAreas();//区域
			this.getDepts();//部门
			//右上展示数据
			this.getVchannels();//摄像头
			this.getDangers();//危险作业
			this.getRisks();//风险区域
			this.getSpeakers();//喇叭
			this.getCars();//车辆
			this.getMen();//人员
		},
		methods: {
			warningTypeSelected() {
				debugger;
				this.warningTypeShow = false;
				//获取新数据
			},
			getSpeakers() {
			},
			getDangers() {
			},
			getCars() {
			},
			getRisks() {
			},
			getMen() {
			},
			getDepts() {
			},
			getAreas() {
			},
			getWarnings() {
				this.$API.ecm.event.list.req().then(res=>{
					if(res.err_msg){}else{
						this.warningList = res.results.filter(item=>{return item.handle_user===null});
					}
				})
			},
			//加载部门数据
			getGroup() {
				this.$API.system.dept.list.req({page: 0}).then(res=>{
					debugger;
					if(res.err_msg){}else{
						this.group = genTree(res);
						let obj = new Object();
					}
				});
			},
			groupClick(data) {
				console.log(data);
			},
			userFilter(){
				this.showUserSelect = false;
			},
			domMarkerLayers() {//风险区域
				this.domMarkerLayer = new jsmap.JSDomMarkerLayer({
					minimumLevel: 3,
					maxmumLevel: 22,
					show: true
				});
				window.map.addLayer(this.domMarkerLayer);
			},
			boxMaskerLayers() {//风险区域
				this.boxMarkerLayer = new jsmap.JSBoxMarkerLayer({
					minimumLevel: 3,
					maxmumLevel: 22,
					show: false
				});
				window.map.addLayer(this.boxMarkerLayer);
				this.showBoxMarkers();
			},
			pointMaskerLayers() {//点
				this.pointMarkerLayer = new jsmap.JSPointMarkerLayer({
					minimumLevel: 3,
					maxmumLevel: 22,
					show: false
				});
				window.map.addLayer(this.pointMarkerLayer);
				this.showPointMarkers();
			},
			cameraMaskerLayers() {//图标文字
				this.cameraMaskerLayer = new jsmap.JSIconTextMarkerLayer({
					minimumLevel: 3,
					maxmumLevel: 22,
					show: false
				});
				window.map.addLayer(this.cameraMaskerLayer);
				this.showCameraMarkers();
			},
			speakersMaskerLayers() {//消防物资
				this.materialsMaskerLayer = new jsmap.JSIconTextMarkerLayer({
					minimumLevel: 3,
					maxmumLevel: 22,
					show: false
				});
				window.map.addLayer(this.materialsMaskerLayer);
				this.showSpeakersMarkers();
			},
			polygonMarkerLayers() {//危险作业
				this.polygonMaskerLayer = new jsmap.JSPolygonMarkerLayer({
					minimumLevel: 3,
					maxmumLevel: 22,
					show: false
				});
				window.map.addLayer(this.polygonMaskerLayer);
				this.showPolygonMarkers();
			},
			//风险区域
			showBoxMarkers() {
				var boxMarker = new jsmap.JSBoxMarker({
					id: 'box',
					position: [
						{x: 114.63059258861512, y: 38.81407163905287, z: 0},
						{x: 114.63044857916901, y: 38.81396178326786, z: 0},
						{x: 114.63060812029352, y: 38.81386267832651, z: 0},
						{x: 114.63073035356713, y: 38.81395745716681, z: 0},
					],
					floorId: 1,//楼层id
					color: 'rgba(255,0,0,0.44)',//颜色
					height: 0,//基底高度
					stretchHeight: 6,//拉伸高度
					strokeColor: '#ff0000',//边线颜色
					show: true, //是否显示
					depthTest: Boolean,
					allowPicking: true, //是否允许点击
					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
					callback: (marker) => {
						// console.log(marker);
					}
				});
				this.boxMarkerLayer.addMarker(boxMarker);
				var boxMarker1 = new jsmap.JSBoxMarker({
					id: 'box',
					position: [
						{x: 114.6284236353879, y: 38.81587979561416, z: 0},
						{x: 114.62920209224112, y: 38.81519905830823, z: 0},
						{x: 114.63022009284202, y: 38.81594033572247, z: 0},
						{x: 114.62938229018444, y: 38.81656925374177, z: 0},
					],
					floorId: 1,//楼层id
					color: 'rgba(134,255,78,0.44)',//颜色
					height: 0,//基底高度
					stretchHeight: 20,//拉伸高度
					strokeColor: '#87FF4F',//边线颜色
					show: true, //是否显示
					depthTest: Boolean,
					allowPicking: true, //是否允许点击
					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
					callback: (marker) => {
						// console.log(marker);
					}
				});
				this.boxMarkerLayer.addMarker(boxMarker1);
			},
			showPointMarkers() {
				let pointMarker = new jsmap.JSPointMarker({
					id: 'point1',
					color: '#00FF00',  //填充颜色
					size: 10,  //尺寸
					position: new jsmap.JSPoint(114.6318495165543, 38.81301151091491, 3),  //坐标
					floorId: 1,  //楼层id,默认为1（地面）
					outlineColor: '#CD5C5C',  //边线颜色
					outlineWidth: 2,  //边线宽
					// depthTest: true,  //是否开启深度检测
					show: true,  //是否显示
					allowPicking: true,  //是否允许点击
					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
					nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5),  //比例缩放
					callback: (node) => {
						// console.log(node);
					}//回调事件
				});
				this.pointMarkerLayer.addMarker(pointMarker);
			},
			//摄像头
			showCameraMarkers() {
				let that = this;
				let iconTextMarker = null;
				that.Vchannels.forEach(item => {
					let pixel = item.my_info.location;
					iconTextMarker = new jsmap.JSIconTextMarker({
						id: item.channelCode,
						position: {x: pixel[0], y: pixel[1], z: pixel[2]},  //坐标
						floorId: 1,  //楼层id,默认为1（地面）
						image: "/img/camera.svg",
						text: '摄像头',
						font: '10px sans-serif',
						fontColor: '#fff645',
						imageHeight: 16,
						imageWidth: 16,
						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, 2),
						show: true,
						callback: (marker) => {
							debugger;
							console.log(marker);
						}
					});
					that.cameraMaskerLayer.addMarker(iconTextMarker);
				})

			},
			//危险作业
			showPolygonMarkers() {
				let polygonMarker = new jsmap.JSPolygonMarker({
					id: 'polygon',//id
					position: [new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0),
						new jsmap.JSPoint(114.63185023632963, 38.81241816295427, 0),
						new jsmap.JSPoint(114.63160294240738, 38.812229296478634, 0),
						new jsmap.JSPoint(114.63143965827588, 38.81235778393449, 0),

					],//坐标集合
					floorId: 1,//楼层id
					color: 'rgba(0,0,255,.44)',//填充颜色
					strokeColor: '#2bff1d',//边线颜色
					depthTest: false,//是否开启深度检测
					// material: new jsmap.JSWaterMaterial(),  //材质，材质属性一旦设置，color属性就会失效
					allowPicking: true,  //是否允许点击
					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
					properties: {
						test: 'polygonTest'
					},//属性设置
					callback: (marker) => {
						// console.log(marker);
					}//回调
				});
				this.polygonMaskerLayer.addMarker(polygonMarker);
			},
			//喇叭
			showSpeakersMarkers() {
				let materialMarker = new jsmap.JSIconTextMarker({
					id: 'iconTextMarker',
					position: {x: 114.6302317964304, y: 38.81315596674133},  //坐标
					floorId: 1,  //楼层id,默认为1（地面）
					image: "/img/speaker.png",
					text: '喇叭1',
					font: '10px sans-serif',
					fontColor: '#fff645',
					imageHeight: 16,
					imageWidth: 16,
					// 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, 2),
					show: true
				});
				this.materialsMaskerLayer.addMarker(materialMarker);
			},

			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
			},
			markerClick(index) {
				let arr = [];
				this.markList[index] = !this.markList[index];
				if (index === 0) {
					if (this.markList[0]) {
						arr = this.markList.map(value => {
							return true
						})
					} else {
						arr = this.markList.map(value => {
							return false
						})
					}
					this.markList = arr;
				} else {
					let list = this.markList.slice(1, 7);
					if (list.indexOf(true) > -1 && list.indexOf(false) < 0) {
						this.markList[0] = true;
					} else {
						this.markList[0] = false;
					}
				}
				debugger;

				if (this.markList[1]) {
					window.map.showBuildingMarker = true;
				} else {
					window.map.showBuildingMarker = false;
				}
				if (this.markList[2]) {
					this.cameraMaskerLayer.show = true;
				} else {
					this.cameraMaskerLayer.show = false;
				}
				if (this.markList[3]) {
					this.materialsMaskerLayer.show = true;
				} else {
					this.materialsMaskerLayer.show = false;
				}
				if (this.markList[4]) {
					this.polygonMaskerLayer.show = true;
				} else {
					this.polygonMaskerLayer.show = false;
				}
				if (this.markList[5]) {
					this.boxMarkerLayer.show = true;
				} else {
					this.boxMarkerLayer.show = false;
				}
				if (this.markList[6]) {
					// this.boxMarkerLayer.show = true;
				} else {
					// this.boxMarkerLayer.show = false;
				}
			},
			//选择人员分类
			changeDropIndex(index) {
				let that = this;
				that.dropIndex = index;
				setTimeout(function () {
					that.showUserSelect = false;
				}, 300)
			},
			//获取摄像头列表
			getVchannels() {
				this.$API.am.video.list.req(this.params).then(res => {
					if (res.err_msg) {
						this.$message.error(res.err_msg);
					} else {
						this.Vchannels = res.pageData;
					}
				});
			},
			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(){
				this.warningForm.mark = parseInt(this.warningForm.mark);
				this.$API.ecm.req(this.warningId,this.warningForm).then(res=>{
					if(res.err_msg){

					}else{
						this.screenWarning = false;
						this.getWarnings();
					}
				})
			},
		},
		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-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;
	}
	#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 {
		.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: 430px;
			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{
					.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;
		}
	}
	.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: 33.3333%;
					height: 50%;
					display: flex;

					.item-img {
						width: 50px;
						height: 50px;
						position: relative;
						margin-right: 6px;
						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-img5 {
						background: url(/public/img/icon_wbcl.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;
						}
					}
				}
			}
		}

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

				.content-left {
					width: 160px;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.alarm-danger {
						width: 150px;
						height: 150px;
						background: url(/public/img/a_danger.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.content-right {
					width: calc(100% - 170px);
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;

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

						.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: 610px;
					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;

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

	}

	.alarm-detail-info {
		position: absolute;
		left: 445px;
		top: 0;
		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: 90px;
			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%;
				}

			}

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

	[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: 20px;
		right: 20px;
		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);
	}
</style>
