2341 lines
62 KiB
Vue
2341 lines
62 KiB
Vue
<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> <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> <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> <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> 报警
|
||
</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><!––><!––>
|
||
</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><!––><!––></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><!––><!––>
|
||
</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><!––><!––></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><!––><!––></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><!––><!––></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>
|