4033 lines
104 KiB
Vue
4033 lines
104 KiB
Vue
<template>
|
||
<div class="screen-main">
|
||
<!--头部展示-->
|
||
<div class="screen-header">
|
||
<div class="header-left-bg">{{$store.state.global.baseName}}</div>
|
||
<div class="header-right-action">
|
||
<div class="right-action-clock">
|
||
<span class="action-time">{{ currentDay }}</span>
|
||
<span class="action-time">{{ currentWeek }} </span>
|
||
<span class="action-time">{{ currentTime }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--图层控制-->
|
||
<div class="screen-ctrl">
|
||
<div class="screen-filter">
|
||
<div class="filter-content">
|
||
<div class="filter-ctrl" v-show="filterCtrlFocus">
|
||
<div class="screen-check-content hoverPointer" @click="markerClick(0)">
|
||
<span class="box-btn box-uncheck" :class="{ 'box-check': markList[0] }"></span>
|
||
<span class="box-text">全部</span>
|
||
</div>
|
||
<div class="screen-check-content hoverPointer" @click="markerClick(1)">
|
||
<span class="box-btn box-uncheck" :class="{ 'box-check': markList[1] }"></span>
|
||
<span class="box-text">监控</span>
|
||
</div>
|
||
<div class="screen-check-content hoverPointer" @click="markerClick(2)">
|
||
<span class="box-btn box-uncheck" :class="{ 'box-check': markList[2] }"></span>
|
||
<span class="box-text">喇叭</span>
|
||
</div>
|
||
<div class="screen-check-content hoverPointer" @click="markerClick(3)">
|
||
<span class="box-btn box-uncheck" :class="{ 'box-check': markList[3] }"></span>
|
||
<span class="box-text">作业</span>
|
||
</div>
|
||
<div class="screen-check-content hoverPointer" @click="markerClick(4)">
|
||
<span class="box-btn box-uncheck" :class="{ 'box-check': markList[4] }"></span>
|
||
<span class="box-text">区域</span>
|
||
</div>
|
||
<div class="screen-check-content hoverPointer" @click="markerClick(5)">
|
||
<span class="box-btn box-uncheck" :class="{ 'box-check': markList[5] }"></span>
|
||
<span class="box-text">人员</span>
|
||
</div>
|
||
<!-- <div class="caret-dropdown">
|
||
<el-icon @click="userSelect" v-if="showUserSelect" :size="14">
|
||
<ArrowUpBold />
|
||
</el-icon>
|
||
<el-icon @click="userSelect" v-else :size="14">
|
||
<ArrowDownBold />
|
||
</el-icon>
|
||
</div> -->
|
||
</div>
|
||
<div class="drop-content" v-if="showUserSelect">
|
||
<el-tree
|
||
ref="group"
|
||
id="bigScreenTree"
|
||
node-key="id"
|
||
:data="postList"
|
||
show-checkbox
|
||
:current-node-key="''"
|
||
:highlight-current="true"
|
||
:expand-on-click-node="true"
|
||
@check="handleChange"
|
||
></el-tree>
|
||
<el-button type="primary" @click="userFilter">查看</el-button>
|
||
</div>
|
||
<div class="filter-action showroam">
|
||
<div v-if="filterCtrlFocus" class="action-shrink" @click="filterCtrlFocusChange"></div>
|
||
<div v-else class="action-shrink shrink-hidden" @click="filterCtrlFocusChange"></div>
|
||
<div v-if="autoRun" class="action-roam roam-pause" @click="autoRunChange"></div>
|
||
<div v-else class="action-roam roam-play" @click="autoRunChange"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--搜索-->
|
||
<div class="screen-search">
|
||
<div class="search-content">
|
||
<input type="text" placeholder="输入姓名/定位卡号/车牌号进行查找" v-model="searchKeyWord" class="input-focus">
|
||
<span class="close-btn el-icon-circle-close" style="display: none;"></span>
|
||
<div class="search" @click="searchOne(searchKeyWord)"></div>
|
||
<!-- <div class="auto-suggestion" style="display: none;">
|
||
<div class="suggestion-select-ul"></div>
|
||
</div> -->
|
||
</div>
|
||
<div style="text-align: right;margin-top: 15px;">
|
||
<div v-if="tracking&&!screenUser" class="danger-btn-bg btn-item" @click="userUnTrack">
|
||
<span class="trackImg"></span>
|
||
<span>取消跟踪</span>
|
||
</div>
|
||
<div v-if="lineTracking&&!screenUser" class="simple-btn-bg btn-item" @click="userLineTrackCancel">
|
||
<span class="viewImg"></span>
|
||
<span>取消轨迹</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--人员统计/事件统计/部门统计-->
|
||
<div class="screen-cockpit">
|
||
<div class="cockpit-count">
|
||
<div class="divider"></div>
|
||
<div class="simple-title">
|
||
<span>数据统计</span>
|
||
<div class="countTypeWrap">
|
||
<span :class="{ 'activeCount': countIndex === '1' }" @click="countINdexChange('1')">有卡</span>
|
||
<el-divider direction="vertical"></el-divider>
|
||
<span :class="{ 'activeCount': countIndex === '2' }" @click="countINdexChange('2')">在线</span>
|
||
</div>
|
||
</div>
|
||
<div class="count-list">
|
||
<div class="count-list-item">
|
||
<div class="item-img item-img2"></div>
|
||
<div class="item-info">
|
||
<div title="员工" class="normal">正式员工</div>
|
||
<div class="bottom">
|
||
<span class="large">{{ userCount.count_employee }}</span> <span
|
||
class="normal">人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="count-list-item">
|
||
<div class="item-img item-img1"></div>
|
||
<div class="item-info">
|
||
<div title="外来人员" class="normal">访客</div>
|
||
<div class="bottom"><span class="large">{{ userCount.count_visitor }}</span> <span
|
||
class="normal">人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="count-list-item">
|
||
<div class="item-img item-img3"></div>
|
||
<div class="item-info">
|
||
<div title="承包商" class="normal">相关方</div>
|
||
<div class="bottom">
|
||
<span class="large">{{ userCount.count_remployee }}</span> <span
|
||
class="normal">人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="count-list-item">
|
||
<div class="item-img item-img4"></div>
|
||
<div class="item-info">
|
||
<div title="司机" class="normal">司机</div>
|
||
<div class="bottom">
|
||
<span class="large">{{ userCount.count_driver }}</span> <span
|
||
class="normal">人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cockpit-alarm">
|
||
<div class="divider"></div>
|
||
<div class="simple-title" @click="warningDetail = true">
|
||
<span>报警实时展示</span>
|
||
<div class="simple-btn-bg alarm-bell danger">
|
||
<span>{{ wStatistics.total_count }}</span> 报警
|
||
</div>
|
||
</div>
|
||
<div class="alarm-content">
|
||
<div style="display:flex">
|
||
<div class="alarm-danger"></div>
|
||
<div id="eventScrenWrap">
|
||
<div id="eventScrenItem">
|
||
<div v-for="(item1,index1) in warningData.list" :key="item1.id">
|
||
<text v-if="index1<3">{{item1.voice_msg}}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-right">
|
||
<div v-for="item in wStatistics.details" :key="item.cate" class="alarm-item alarm-item-danger">
|
||
<span class="item-icon"></span>
|
||
<span class="item-name">{{ item.cate__name }}</span>
|
||
<span class="item-number" style="">{{ item.count }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alarm-detail-info left_arrow" v-if="warningDetail">
|
||
<div class="simple-title">
|
||
<div><span>报警数据</span></div>
|
||
<div class="action-group">
|
||
<!-- <span class="detail-text-btn" @click="allWarningView">查看所有</span> -->
|
||
<span class="icon-close" @click="warningDetail = false"></span>
|
||
</div>
|
||
</div>
|
||
<div class="detail-content">
|
||
<div class="content-head">
|
||
<div class="screen-multiple-select head-select">
|
||
<!-- <div class="multiple-select-tags" @click="warningTypeShow = true"> -->
|
||
<div class="multiple-select-tags" @click="warningTypeChange">
|
||
<span class="multiple-select-input">{{eventTypeName}}</span>
|
||
<el-icon color="#ffffff" class="no-inherit">
|
||
<ArrowDownBold />
|
||
</el-icon>
|
||
</div>
|
||
<div v-show="warningTypeShow" class="multiple-select-wrap">
|
||
<div class="multiple-select-ul">
|
||
<div class="multiple-select-li" @click="warningTypeSelected(null,'全部')">
|
||
<span class="multiple-select-label">全部</span>
|
||
</div>
|
||
|
||
<div v-for="typeItem in warningTypes" :key="typeItem.id"
|
||
class="multiple-select-li" @click="warningTypeSelected(typeItem.id,typeItem.name)">
|
||
<span title="超员报警" class="multiple-select-label">{{ typeItem.name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="speakerPlayStatus" class="head-sound sound-ring" @click="speakerPasue"></div>
|
||
<div v-else class="head-sound sound-quiet" @click="speakerPlay"></div>
|
||
</div>
|
||
<div class="content-body" v-if="warningData.total > 0">
|
||
<!--warningList-->
|
||
<div class="alarm-item" v-for="(item) in warningData.list" :key="item.id">
|
||
<div class="item-type">未处理</div>
|
||
<div class="item-content" @click="warningItemShow(item)">
|
||
<div class="item-content-top"><span class="time">{{ item.create_time }}</span><span
|
||
class="status">待处理</span></div>
|
||
<div class="item-content-middle mt6">
|
||
<div class="alarm-info">{{ item.voice_msg }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="warningData.total > 0" class="content-footer" style="">
|
||
<el-pagination :page-size="warningData.params.page_size" :pager-count="5"
|
||
v-model:currentPage="warningData.params.page" layout="prev, pager, next"
|
||
:total="warningData.total" @current-change="handleCurrentChange" />
|
||
</div>
|
||
<div class="noData" v-else>
|
||
<img src="/img/nodata.png">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cockpit-info">
|
||
<div class="divider"></div>
|
||
<div class="simple-title area-simple-title">
|
||
<div class="header-tab">
|
||
<span class="tab-item">区域信息情况</span>
|
||
<!--<span class="tab-item" :class="{'tab-item-active':LBType==='2'}" @click="cockpitChange('2')">部门信息情况</span>-->
|
||
</div>
|
||
<!-- <div class="simple-btn-bg alarm-btn">需充电卡片0人</div> -->
|
||
</div>
|
||
<div class="info-body area-info-body">
|
||
<el-table :data="areaList" style="width: 100%;" :height="areaTableHeight" highlight-current-row
|
||
class="bigScreenTable" @row-click="areaRowClick">
|
||
<el-table-column label="区域" prop="name"></el-table-column>
|
||
<el-table-column label="当前人数" prop="count_people"></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="alarm-detail-info left_arrow" v-if="areaDetail" style="width:150%">
|
||
<div class="simple-title">
|
||
<div><span>区域统计</span></div>
|
||
<span class="icon-close" @click="areaDetailClose"></span>
|
||
</div>
|
||
<div class="detail-content">
|
||
<div class="content-head">
|
||
<div @click="areaItemHandle(1)" :class="{'areaActive':areaShowType==1,'areaNavItem':1}" style="color:#ffffff">作业</div>
|
||
<div @click="areaItemHandle(2)" :class="{'areaActive':areaShowType==2,'areaNavItem':1}" style="color:#ffffff">监控</div>
|
||
<div @click="areaItemHandle(3)" :class="{'areaActive':areaShowType==3,'areaNavItem':1}" style="color:#ffffff">喇叭</div>
|
||
<div @click="areaItemHandle(4)" :class="{'areaActive':areaShowType==4,'areaNavItem':1}" style="color:#ffffff">人员</div>
|
||
</div>
|
||
<div class="content-body">
|
||
<el-table class="bigScreenTable" v-if="areaShowType==1" :data="areaOperation" :height="300" @row-click="areaOperationRowClick">
|
||
<el-table-column label="作业简介" prop="name"></el-table-column>
|
||
<el-table-column label="开始时间" prop="start_time"></el-table-column>
|
||
<el-table-column label="结束时间" prop="end_time"></el-table-column>
|
||
<el-table-column label="业务部门">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.dept_ter_">{{scope.row.dept_ter_.name}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-table class="bigScreenTable" :data="areaVideo" v-if="areaShowType==2" :height="300" @row-click="showVchannel">
|
||
<el-table-column label="通道名称" prop="name"></el-table-column>
|
||
<el-table-column label="所在区域" prop="area_name"></el-table-column>
|
||
<el-table-column label="code" prop="code"></el-table-column>
|
||
</el-table>
|
||
<el-table class="bigScreenTable" :data="areaSpeaker" v-if="areaShowType==3" :height="300">
|
||
<el-table-column label="喇叭名称" prop="name"></el-table-column>
|
||
<el-table-column label="所在区域" prop="area_name"></el-table-column>
|
||
<el-table-column label="唯一标识" prop="code"></el-table-column>
|
||
</el-table>
|
||
<el-table class="bigScreenTable" :data="areaUser" v-if="areaShowType==4" :height="300" @row-click="areaEmployeeRowClick">
|
||
<el-table-column label="人员姓名" prop="my_info.employee_.name"></el-table-column>
|
||
<el-table-column label="人员姓名" prop="my_info.employee_.type"></el-table-column>
|
||
<el-table-column label="定位卡号" prop="mac"></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;flex-direction:colum">
|
||
</div>
|
||
<!--切换-->
|
||
<!--<div class="screen-tab">
|
||
<div class="screen-tab-content">
|
||
<div class="tab-menu tab-menu-item tab-menu-active"><span class="tab-menu-text">驾驶舱</span></div>
|
||
<div class="tab-menu tab-menu-item"><span class="tab-menu-text">监控</span></div>
|
||
<!–<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 class="screen-user" v-if="screenUser">
|
||
<div class="simple-title">
|
||
<div>人员信息</div>
|
||
<div class="simple-btn" @click="screenUser = false">关闭</div>
|
||
</div>
|
||
<div class="h100" style="">
|
||
<div class="person-info-header">
|
||
<div class="header-basic">
|
||
<div class="basic-img">
|
||
<div style="width: 100%; height: 100%;">
|
||
<img style="width: 100%; height: 100%;" :src="screenUserItem.photo" height="100%" width="100%">
|
||
</div>
|
||
</div>
|
||
<div class="basic-info">
|
||
<div class="info-item">
|
||
<span class="info-item-name">姓名：</span>
|
||
<span class="info-item-info">{{ screenUserItem.name }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">类型：</span>
|
||
<span class="info-item-info" v-if="screenUserItem.type === 'employee'">正式员工</span>
|
||
<span class="info-item-info" v-else>访客</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">定位卡：</span>
|
||
<span class="info-item-info">{{ screenUserItem.id }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">部门：</span>
|
||
<span class="info-item-info">{{ screenUserItem.belong_dept_name }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">岗位：</span>
|
||
<span class="info-item-info">{{ screenUserItem.post_name }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="simple-btn basic-btn" @click="showUserDetail">查看详情</div>
|
||
</div>
|
||
</div>
|
||
<div class="basic-btn-group">
|
||
<div v-if="!tracking&&!lineTracking" class="danger-btn-bg btn-item" @click="userTrack">
|
||
<span class="trackImg"></span>
|
||
<span>跟踪</span>
|
||
</div>
|
||
<div v-else-if="!tracking&&lineTracking" class="danger-btn-bg btn-item">
|
||
<span class="trackImg"></span>
|
||
<span>跟踪</span>
|
||
</div>
|
||
<div v-else-if="tracking" class="danger-btn-bg btn-item" @click="userUnTrack">
|
||
<span class="trackImg"></span>
|
||
<span>取消跟踪</span>
|
||
</div>
|
||
<div v-if="!lineTracking&&!tracking" class="simple-btn-bg btn-item" @click="userLineTrack">
|
||
<span class="viewImg"></span>
|
||
<span>轨迹</span>
|
||
</div>
|
||
<div v-if="!lineTracking&&tracking" class="simple-btn-bg btn-item">
|
||
<span class="viewImg"></span>
|
||
<span>轨迹</span>
|
||
</div>
|
||
<div v-else-if="lineTracking" class="simple-btn-bg btn-item" @click="userLineTrackCancel">
|
||
<span class="viewImg"></span>
|
||
<span>取消轨迹</span>
|
||
</div>
|
||
</div>
|
||
<div class="screen-per-list">
|
||
<el-table :data="userList" style="width: 100%" :row-key="row => { return row.id }"
|
||
highlight-current-row class="bigScreenTable" @row-click="userRowClick">
|
||
<el-table-column label="姓名">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="部门">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.belong_dept_name
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="岗位">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.my_info.employee_">{{ scope.row.my_info.employee_.post_name
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<!--人员选详细信息-->
|
||
<div class="person-cert right_arrow" v-if="screenUserDetail">
|
||
<div class="simple-title">
|
||
<div>人员信息</div>
|
||
<div class="icon-close" @click="screenUserDetail = false"></div>
|
||
</div>
|
||
<div class="basic-head">
|
||
<div class="header-tab">
|
||
<span class="tab-item tab-item-active">基本信息</span>
|
||
<!--<span class="tab-item">资质证件</span>-->
|
||
</div>
|
||
</div>
|
||
<div class="basic-info">
|
||
<div class="info-item">
|
||
<span class="info-item-name">姓名：</span>
|
||
<span class="info-item-info">{{ screenUserItemDetail.name }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">姓别：</span>
|
||
<span class="info-item-info">{{ screenUserItemDetail.gender }}</span>
|
||
</div>
|
||
|
||
<div class="info-item">
|
||
<span class="info-item-name">定位卡号：</span>
|
||
<span class="info-item-info">202106180008</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">部门：</span>
|
||
<span class="info-item-info" v-if="screenUserItemDetail.belong_dept_">{{
|
||
screenUserItemDetail.belong_dept_.name
|
||
}}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">岗位：</span>
|
||
<span class="info-item-info" v-if="screenUserItemDetail.post_">{{
|
||
screenUserItemDetail.post_.name
|
||
}}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">证件类型：</span>
|
||
<span class="info-item-info">中华人民共和国居民身份证</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">证件号码：</span>
|
||
<span class="info-item-info">{{ screenUserItemDetail.id_number }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-item-name">联系电话：</span>
|
||
<span class="info-item-info">{{ screenUserItemDetail.phone }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="basic-cert" style="display: none;">
|
||
<div class="el-empty">
|
||
<div class="el-empty__image" style="width: 160px;">
|
||
<img src="/img/nodata.png" ondragstart="return false">
|
||
</div>
|
||
<div class="el-empty__description">
|
||
<p></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="el-loading-mask" style="background-color: transparent; display: none;">
|
||
<div class="el-loading-spinner"><i class="el-icon-loading"></i></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alarm-detail-info left_arrow" v-if="workDetail" style="width: 50%;top: 220px;">
|
||
<div class="simple-title">
|
||
<div>作业</div>
|
||
<span class="icon-close" @click="workDetailClose"></span>
|
||
</div>
|
||
<div class="detail-content">
|
||
<div class="content-body">
|
||
<div style="color:#ffffff;font-size: 14px;">
|
||
<p>作业区域：{{ areaName }}</p>
|
||
<div v-if="areaVideo.length>0">区域下监控：
|
||
<el-tag
|
||
v-for="item in areaVideo"
|
||
:key="item.id"
|
||
@click="showVchannel(item)"
|
||
style="margin-right: 10px;margin-left:0"
|
||
>{{ item.name }}
|
||
</el-tag>
|
||
</div>
|
||
<div v-else>区域下监控：该作业所在区域没有监控设备</div>
|
||
</div>
|
||
<el-table class="bigScreenTable" v-if="areaShowType==1" :data="areaOperation" :height="300" @row-click="areaOperationRowClick">
|
||
<el-table-column label="作业简介" prop="name"></el-table-column>
|
||
<el-table-column label="开始时间" prop="start_time"></el-table-column>
|
||
<el-table-column label="结束时间" prop="end_time"></el-table-column>
|
||
<el-table-column label="业务部门">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.dept_ter_">{{scope.row.dept_ter_.name}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="已选监控">
|
||
<template #default="scope">
|
||
<el-tag
|
||
v-for="item in scope.row.vchannels_"
|
||
:key="item.id"
|
||
@click="showVchannel(item)"
|
||
style="margin-right: 10px;margin-left:0"
|
||
>{{ item.name }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--危险作业-->
|
||
<div class="screen-job" v-if="screenOperation">
|
||
<div class="simple-title">
|
||
<div>作业详情</div>
|
||
<div class="simple-btn" @click="closeScreenOperation">关闭</div>
|
||
</div>
|
||
<div class="job-content">
|
||
<div class="job-basic">
|
||
<div class="job-item">
|
||
<span class="job-item-name">作业名称：</span>
|
||
<span class="job-item-info">{{screenJobItem.name}}</span>
|
||
</div>
|
||
<div class="job-item">
|
||
<span class="job-item-name">作业编号：</span>
|
||
<span class="job-item-info">{{screenJobItem.number}}</span>
|
||
</div>
|
||
<div class="job-item">
|
||
<span class="job-item-name">生产状态：</span>
|
||
<span class="job-item-info">{{screenJobItem.state_work}}</span>
|
||
</div>
|
||
<div class="job-item">
|
||
<span class="job-item-name">作业区域：</span>
|
||
<span class="job-item-info">{{screenJobItem.area_.name}}</span>
|
||
</div>
|
||
<div class="job-item">
|
||
<span class="job-item-name">部门协调员：</span>
|
||
<span class="job-item-info">{{screenJobItem.coordinator_name}}</span>
|
||
</div>
|
||
<div class="job-item">
|
||
<span class="job-item-name">开始时间：</span>
|
||
<span class="job-item-info">{{screenJobItem.start_time}}</span>
|
||
</div>
|
||
<div class="job-item">
|
||
<span class="job-item-name">结束时间：</span>
|
||
<span class="job-item-info">{{screenJobItem.end_time}}</span>
|
||
</div>
|
||
<div class="job-item">
|
||
<span class="job-item-name">属地部门：</span>
|
||
<span class="job-item-info">{{screenJobItem.dept_ter_.name}}</span>
|
||
</div>
|
||
<div class="job-item">
|
||
<span class="job-item-name">业务部门：</span>
|
||
<span class="job-item-info">{{screenJobItem.dept_bus_.name}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="simple-title">
|
||
<div>作业票</div>
|
||
</div>
|
||
<div class="job-list">
|
||
<el-tag
|
||
v-for="item in screenJobItem.cates_"
|
||
:key="item.id"
|
||
@click="showOpretion(item)"
|
||
style="margin-right: 10px;margin-left:0"
|
||
>{{ item.cate_name }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="simple-title">
|
||
<div>监控设备</div>
|
||
</div>
|
||
<div class="job-list" v-if="screenJobItem.vchannels_.length>0">
|
||
<el-tag
|
||
v-for="item in screenJobItem.vchannels_"
|
||
:key="item.id"
|
||
@click="showVchannel(item)"
|
||
style="margin-right: 10px;margin-left:0"
|
||
>{{ item.name }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="job-list" v-else style="color:#ffffff">该作业没有选择监控设备</div>
|
||
</div>
|
||
</div>
|
||
<!--区域-->
|
||
<div class="screen-risk" v-if="screenRisk">
|
||
<div class="simple-title">
|
||
<div>风险区域详情</div>
|
||
<div class="simple-btn" @click="closeScreenRisk">关闭</div>
|
||
</div>
|
||
<div class="risk-content">
|
||
<div class="risk-basic">
|
||
<div class="risk-item"><span class="risk-item-name">风险区域名称：</span><span
|
||
class="risk-item-info">{{areaItemDetail.name}}</span>
|
||
</div>
|
||
<div class="risk-item"><span class="risk-item-name">风险等级：</span><span
|
||
class="risk-item-info">{{levelOption[areaItemDetail.level]}}</span>
|
||
</div>
|
||
<div class="risk-item"><span class="risk-item-name">区域编号：</span><span
|
||
class="risk-item-info">{{areaItemDetail.number}}</span></div>
|
||
</div>
|
||
<div class="simple-title">
|
||
<div>详细信息</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--事件详情-->
|
||
<div class="screen-risk" v-if="screenWarning">
|
||
<div class="simple-title">
|
||
<div>事件信息</div>
|
||
<div class="simple-btn" @click="closeScreenWarning">关闭</div>
|
||
</div>
|
||
<div class="risk-content">
|
||
<div class="risk-basic">
|
||
<div class="risk-item">
|
||
<span class="risk-item-info">{{ screenWarningItem.voice_msg }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="simple-title">
|
||
<div>事件详情</div>
|
||
</div>
|
||
<div class="risk-content">
|
||
<div class="risk-basic">
|
||
<div class="risk-item">
|
||
<span class="risk-item-name">报警区域：</span>
|
||
<span class="risk-item-info" v-if="screenWarningItem.area_">{{ screenWarningItem.area_.name
|
||
}}</span>
|
||
</div>
|
||
<div class="risk-item" v-if="screenWarningItem.employee_ !== null">
|
||
<span class="risk-item-name">触发人：</span>
|
||
<span class="risk-item-info" v-if="screenWarningItem.employee_">{{
|
||
screenWarningItem.employee_.name
|
||
}}</span>
|
||
</div>
|
||
<div class="risk-item" v-if="screenWarningItem.employee_ !== null">
|
||
<span class="risk-item-name">触发人部门：</span>
|
||
<span class="risk-item-info" v-if="screenWarningItem.employee_.belong_dept_">{{
|
||
screenWarningItem.employee_.belong_dept_.name
|
||
}}</span>
|
||
</div>
|
||
<div class="risk-item">
|
||
<span class="risk-item-name">触发事件：</span>
|
||
<span class="risk-item-info" v-for="ite in screenWarningItem.cates_" :key="ite">{{ ite.name
|
||
}}</span>
|
||
</div>
|
||
<div class="risk-item">
|
||
<span class="risk-item-name">触发时间：</span>
|
||
<span class="risk-item-info">{{ screenWarningItem.create_time }}</span>
|
||
</div>
|
||
<div class="risk-item" v-if="screenWarningItem.global_img!=null">
|
||
<span class="risk-item-name">事件截图：</span>
|
||
<sc-upload v-model="screenWarningItem.global_img" title="全景照" style="width: 250px;"></sc-upload>
|
||
<sc-upload v-if="screenWarningItem.face_img!=null" v-model="screenWarningItem.face_img" title="人脸照" style="width: 250px;"></sc-upload>
|
||
|
||
<!-- <img :src="screenWarningItem.global_img" style="width: 250px;"> -->
|
||
<!-- <img v-if="screenWarningItem.face_img!=null" :src="screenWarningItem.face_img" style="width: 250px;"> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="simple-title">
|
||
<div>警告处理</div>
|
||
</div>
|
||
<div class="risk-content">
|
||
<div class="risk-basic">
|
||
<div class="risk-item">
|
||
<span class="risk-item-name">处理描述：</span>
|
||
<el-input class="item-textarea" v-model="warningForm.handle_desc" :rows="3" type="textarea"
|
||
placeholder="请输入处理描述" />
|
||
</div>
|
||
<div class="risk-item">
|
||
<span class="risk-item-name">事件类型：</span>
|
||
<el-radio-group v-model="warningForm.mark">
|
||
<el-radio label="10" size="small">正常</el-radio>
|
||
<el-radio label="20" size="small">误报</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div style="text-align: center">
|
||
<el-button class="handleWarningBtn" @click="handleWarning">处理</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
<audio id="audio" :src="audioSrc" autoplay @ended="audioFinished" preload>
|
||
对不起，您的浏览器不支持HTML5音频播放。
|
||
</audio>
|
||
<el-dialog class="videoViewWrap" :title="channelName" v-model="limitedVisible" with="100%">
|
||
<video-view id="videoView" v-if="limitedVisible" :channelCode="channelCode"></video-view>
|
||
<template #footer>
|
||
<el-button @click="viewClose">关闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog class="videoViewWrap" :title="opreationName" v-model="limitedOpreation" with="100%">
|
||
<opreation-view v-if="limitedOpreation" :ticketId="ticketId" :projectId="projectId" :cateType="cateType"></opreation-view>
|
||
<template #footer>
|
||
<el-button @click="viewClose">关闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import flvjs from "./../../utils/flv";
|
||
import { genTree } from "@/utils/verificate";
|
||
import sysConfig from "@/config";
|
||
import videoView from "./../am/videoView";
|
||
import opreationView from "./oplDetail";
|
||
export default {
|
||
components: {
|
||
videoView,
|
||
opreationView
|
||
},
|
||
data() {
|
||
return {
|
||
line1:null,
|
||
music:null,
|
||
ticketId:null,
|
||
projectId:null,
|
||
cateType:null,
|
||
timerUser: null,
|
||
timerTime: null,
|
||
eventTimer:null,
|
||
timerEventRoll:null,
|
||
eventAudioTimer:null,
|
||
trackMarker:null,
|
||
domMarkerLayer: null,
|
||
userMaskerLayer: null,
|
||
jobDomMarkerLayer: null,
|
||
riskMarkerLayer: null,//风险区域
|
||
areaMarkerLayer: null,//区域展示
|
||
pointMarkerLayer: null,//点位图层
|
||
polygonMaskerLayer: null,//危险作业
|
||
cameraMaskerLayer: null,//摄像头
|
||
materialsMaskerLayer: null,//喇叭
|
||
singleAreaMaskerLayer:null,
|
||
carsMaskerLayer: null,//车辆
|
||
manMaskerLayer: null,//人员
|
||
flyManager: null,
|
||
eareMarker: null,
|
||
dropIndex: '1',
|
||
countIndex: '2',
|
||
areaShowType: '1',
|
||
markList: [false, false, false, false, false, false],
|
||
autoRun: false,
|
||
tracking: false,
|
||
lineTracking:false,
|
||
areaDetail: false,
|
||
workDetail:false,
|
||
screenJob: false,
|
||
screenUser: false,
|
||
screenRisk: false,
|
||
speakerPlayStatus:true,
|
||
screenWarning: false,
|
||
screenUserDetail: false,
|
||
warningTypeShow: false,
|
||
showUserSelect: false,
|
||
warningDetail: false,
|
||
filterCtrlFocus: true,
|
||
screenOperation:false,
|
||
limitedVisible:false,
|
||
limitedOpreation:false,
|
||
warningListTotal: 0,
|
||
heightNum:0,
|
||
warningData: {
|
||
list: [],
|
||
total: 0,
|
||
params: {
|
||
page: 1,
|
||
page_size: 10,
|
||
start_create: '',
|
||
}
|
||
},
|
||
cateAggForm: {
|
||
start_create: '',
|
||
is_handled: false,
|
||
completed: true
|
||
},
|
||
areaItemDetail:{},
|
||
wStatistics: {},
|
||
warningTypes: [],//事件类型
|
||
Vchannels: [],//摄像头列表
|
||
warningList: [],//报警事件列表
|
||
speakerList: [],//喇叭列表
|
||
userList: [],//人员列表
|
||
allUserList:[],
|
||
deptList: [],//部门列表
|
||
postList: [
|
||
{id:0,name:'全部',label:'全部'},
|
||
{id:1,name:'曲阳金隅',label:'曲阳金隅'},
|
||
{id:2,name:'访客',label:'访客'},
|
||
{id:3,name:'司机',label:'司机'}],//岗位列表
|
||
dangerList: [],//岗位列表
|
||
areaList: [],//区域列表/风险区域列表
|
||
areaOperation:[],
|
||
areaVideo:[],
|
||
areaSpeaker:[],
|
||
areaUser:[],
|
||
deptChecked:[],
|
||
//数据统计
|
||
userCount: {
|
||
total: 0,
|
||
count_employee: 0,//正式员工
|
||
count_remployee: 0,//访客
|
||
count_visitor: 0//相关方
|
||
},
|
||
screenJobItem: {},//危险作业信息
|
||
screenRiskItem: {},//风险区域信息
|
||
screenWarningItem: {},//风险区域信息
|
||
screenUserItem: {},//人员信息
|
||
screenUserItemDetail: {},//人员信息
|
||
url: '',
|
||
areaDetailId:'',
|
||
params: {
|
||
json: {
|
||
data: {
|
||
channelId: "",
|
||
streamType: "2",
|
||
type: "flv",
|
||
}
|
||
},
|
||
code: 'video_realtime'
|
||
},
|
||
userParams:{
|
||
depts:[],
|
||
},
|
||
group: [],
|
||
groupsProps: {
|
||
value: "id",
|
||
label: "name",
|
||
multiple: true,
|
||
checkStrictly: true,
|
||
},
|
||
filters: {
|
||
type: '',
|
||
dept: '',
|
||
keyword: '',
|
||
},
|
||
warningId: '',
|
||
warningForm: {
|
||
handle_desc: '',
|
||
mark: '1',
|
||
},
|
||
LBType: '1',
|
||
userMarker: {},
|
||
todayDate: '',
|
||
currentDay: '',
|
||
currentTime: '',
|
||
currentWeek: '',
|
||
areaTableHeight: null,
|
||
levelOption:{
|
||
10:'低风险',
|
||
20:'一般风险',
|
||
30:'较大风险',
|
||
40:'重大风险'
|
||
},
|
||
eventTypeName:'全部',
|
||
audioSrc:'',
|
||
audioIndex:0,
|
||
audioList:{},
|
||
employeeScroll:0,
|
||
searchKeyWord:'',
|
||
ElLoading:null,
|
||
channelCode:'',
|
||
channelName:'',
|
||
}
|
||
},
|
||
created() {
|
||
const scriptInfo = document.createElement("script");
|
||
scriptInfo.setAttribute("data-callType", "callScript");
|
||
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
|
||
document.head.appendChild(scriptInfo);
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
let date = new Date();
|
||
that.timeNow = date.getDay();
|
||
that.todayDate = this.warningData.params.start_create = this.cateAggForm.start_create = this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd');
|
||
that.music = document.getElementById("audio");
|
||
that.showTime();
|
||
that.timerTime = setInterval(() => {
|
||
that.showTime();
|
||
}, 1000);
|
||
let host = window.location.host;
|
||
let jsUrl = '/jsmap/jsmap.js';
|
||
that.loadScript('mapId',jsUrl, () => {
|
||
window.map = new jsmap.JSMap({
|
||
mapType: jsmap.JSMapType.MAP_3D,
|
||
container: 'mapContainer',
|
||
mapServerURL: 'data/map',
|
||
enableShadows: false, //是否开启阴影 默认false
|
||
enableLighting: false, //是否开发光照 默认false
|
||
showBuildingMarker: true,
|
||
// showNavigationDisplay: true,
|
||
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
||
floorControlOptions: {
|
||
floorHeight: 20,//楼层间距
|
||
position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
|
||
offset: {
|
||
x: 50,
|
||
y: 200,
|
||
}//控件偏移位置
|
||
},
|
||
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||
backgroundColor: '#3798ff', //背景颜色
|
||
viewOptions: {
|
||
//屏幕中心坐标
|
||
center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
|
||
// center: {x:120,y:30,z:10},
|
||
//相机距屏幕中心点距离（单位m）
|
||
distance: 550,
|
||
// 旋转角（单位°）
|
||
rotate: 0,
|
||
//倾斜角（单位°）
|
||
tilt: 45,
|
||
}
|
||
});
|
||
window.map.openMapById('0000');
|
||
window.map.on('loadComplete', e => {
|
||
that.riskMaskerLayers();//风险区域
|
||
that.userMaskerLayers();//人员
|
||
that.cameraMaskerLayers();//摄像头
|
||
that.domMarkerLayers();//监控视频
|
||
that.polygonMarkerLayers();//危险作业
|
||
that.speakersMaskerLayers();//喇叭
|
||
// that.jobDomMarkerLayers();//危险作业图片
|
||
that.areaMarkerLayers();//危险作业图片
|
||
let compassControl = new jsmap.JSCompassControl({
|
||
position: jsmap.JSControlPosition.LEFT_TOP,
|
||
offset: {
|
||
x: 420,
|
||
y: 50
|
||
}
|
||
});
|
||
window.map.addControl(compassControl);
|
||
let zoomControl = new jsmap.JSZoomControl({
|
||
position: jsmap.JSControlPosition.LEFT_TOP,
|
||
offset: {
|
||
x: 450,
|
||
y: 5
|
||
}
|
||
});
|
||
window.map.addControl(zoomControl);
|
||
});
|
||
window.map.on('mapClickNode', event => {
|
||
let item = event;
|
||
let that = this;
|
||
let type = event.nodeType.toString();
|
||
console.log(type === 'Symbol(icontextmaker)');
|
||
if (item.markers.length > 0) {
|
||
if (type === 'Symbol(boxmarker)') {
|
||
let areaId = item.properties.get("areaId");
|
||
console.log(areaId);
|
||
that.$API.am.area.item.req(areaId).then(res=>{
|
||
that.areaItemDetail = res;
|
||
that.screenJob = false;
|
||
that.screenWarning = false;
|
||
that.screenRisk = true;
|
||
})
|
||
//风险区域
|
||
} else if (type === 'Symbol(icontextmaker)') {
|
||
//摄像头和人员
|
||
if (document.getElementById(item.markers[0].id) === null) {
|
||
if (item.markers[0].image === "/img/camera.svg") {
|
||
//摄像头
|
||
this.params.json.data.channelId = item.markers[0].id;
|
||
let domMarker = new jsmap.JSDomMarker({
|
||
id: item.markers[0].id + 'mark',
|
||
position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
|
||
floorId: 1,
|
||
depthTest: true,
|
||
content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
|
||
offset: jsmap.JSControlPosition.RIGHT_CENTER,
|
||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||
marginOffset: {
|
||
x: 30,
|
||
y: -50
|
||
},
|
||
properties: {
|
||
type: 0,
|
||
},
|
||
callback: (node) => {
|
||
console.log(node);
|
||
}
|
||
});
|
||
this.domMarkerLayer.addMarker(domMarker);
|
||
var otest = document.getElementById(item.markers[0].id);
|
||
// 创建一个新dom,并设置icon，绑定点击事件
|
||
let newEle = document.createElement("div");
|
||
newEle.className = "v_title";
|
||
newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
|
||
let title = document.createElement("div");
|
||
title.innerText = "实时监控";
|
||
newEle.style.color = "#ffffff";
|
||
let close = document.createElement("div");
|
||
close.className = "v_close";
|
||
close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
|
||
newEle.appendChild(title);
|
||
newEle.appendChild(close);
|
||
let newEle2 = document.createElement("video");
|
||
newEle2.controls = true;
|
||
newEle2.autoplay = true;
|
||
newEle2.id = item.markers[0].id + 'videoPlayer';
|
||
newEle2.name = item.markers[0].id + 'videoPlayer';
|
||
// newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
|
||
// 在对应dom 下追加创建的dom
|
||
otest.appendChild(newEle);
|
||
otest.appendChild(newEle2);
|
||
let flvPlayer = null,URLS=null;
|
||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
||
this.$API.am.video.item.req(this.params).then(res => {
|
||
console.log(res);
|
||
this.url = res.url;
|
||
URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
|
||
if (flvjs.isSupported()) {
|
||
let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
|
||
var mediaDataSource = {
|
||
type: 'flv',
|
||
hasAudio:false,
|
||
hasVideo:true,
|
||
isLive:false,
|
||
withCredentials:false,
|
||
url:URLS
|
||
};
|
||
flvPlayer = flvjs.createPlayer(mediaDataSource, {
|
||
enableWorker: false,
|
||
lazyLoadMaxDuration: 3 * 60,
|
||
seekType: 'range',
|
||
});
|
||
flvPlayer.attachMediaElement(videoElement);
|
||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
||
flvPlayer.load();
|
||
flvPlayer.play();
|
||
}
|
||
})
|
||
close.onclick = () => {
|
||
let nodeMark = document.getElementById(item.markers[0].id);
|
||
nodeMark.remove();
|
||
flvPlayer.pause();
|
||
flvPlayer.unload();
|
||
flvPlayer.detachMediaElement();
|
||
flvPlayer.destroy();
|
||
flvPlayer = null;
|
||
}
|
||
} else {
|
||
//人员
|
||
that.screenUserItem = item.properties.get("employee");
|
||
that.screenUser = true;
|
||
window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
|
||
duration: 1000,
|
||
range: 200
|
||
})
|
||
}
|
||
}
|
||
} else if (type === 'Symbol(polygonmarker)') {
|
||
//危险作业
|
||
console.log(item)
|
||
let workId = item.properties.get("workId");
|
||
if(workId){
|
||
that.areaDetailId = item.properties.get("area");
|
||
let areaItem = that.areaList.filter(item=>{
|
||
return item.id==that.areaDetailId;
|
||
});
|
||
debugger;
|
||
that.areaName = areaItem[0].name;
|
||
that.getAreaOperation();
|
||
that.getAreaVchannel();
|
||
that.workDetail = true;
|
||
}else{
|
||
that.screenRisk = false;
|
||
that.screenWarning = false;
|
||
that.areaDetailId = item.properties.get("area");
|
||
let areaWork = that.areaList.filter(area=>{
|
||
return area.id==that.areaDetailId
|
||
});
|
||
that.areaRowClick(areaWork[0]);
|
||
}
|
||
|
||
}
|
||
} else {
|
||
}
|
||
});
|
||
|
||
})
|
||
//左侧数据统计
|
||
this.getManCount();//人员统计$$
|
||
this.getWarnings();//报警统计$$
|
||
this.getAreaList();//区域/风险区域$$
|
||
this.getGroup();//部门$$
|
||
//右上展示数据
|
||
this.getWarningTotal();//事件统计
|
||
this.getWarningType();//事件类型
|
||
let pageHeight = document.getElementsByClassName('screen-cockpit')[0].clientHeight;
|
||
let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
|
||
let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
|
||
let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
|
||
let domHeight = pageHeight - height1 - 310 - 84;
|
||
let areaTableHeight = domHeight - height3 - 50;
|
||
this.areaTableHeight = areaTableHeight;
|
||
document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
|
||
},
|
||
computed:{
|
||
bgmSrc:function(){
|
||
return this.audioList[this.audioIndex]
|
||
}
|
||
},
|
||
beforeUnmount(){
|
||
window.map.destroy();
|
||
window.map = null;
|
||
this.timerUser = null;
|
||
this.timerTime = null;
|
||
this.eventTimer = null;
|
||
this.timerEventRoll = null;
|
||
this.eventAudioTimer = null;
|
||
clearInterval(this.timerUser)//人员
|
||
clearInterval(this.timerTime)//时间
|
||
clearInterval(this.eventTimer)//时间
|
||
clearInterval(this.timerEventRoll)//事件
|
||
clearInterval(this.eventAudioTimer)//事件
|
||
},
|
||
methods: {
|
||
loadScript(id, url, callback) {
|
||
let that = this;
|
||
//如果已经存在这个id，则证明已经加载过，已经有这个js文件了，可以直接执行回调里面的操作
|
||
if (document.querySelector(`#${id}`)) {
|
||
that.ElLoading = null;
|
||
callback && callback()
|
||
return;
|
||
}else{
|
||
that.ElLoading = this.$loading({
|
||
lock: true,
|
||
text: '地图资源加载中...',
|
||
background: 'rgba(0, 0, 0, 0)',
|
||
})
|
||
}
|
||
|
||
//第一次加载，先创建 script 标签
|
||
const script = document.createElement('script');
|
||
script.src = url;
|
||
//创建id属性
|
||
script.setAttribute('id', id);
|
||
//获取第一个script标签
|
||
const firstScript = document.getElementsByTagName('script')[0];
|
||
//获取第一个script标签的父节点 BODY,在body的第一个script引用之前插入，即把这个动态的js文件放在第一个调用
|
||
firstScript.parentNode.insertBefore(script, firstScript);
|
||
//script 一加载就执行
|
||
script.onload = script.onreadystatechange = function() {
|
||
that.ElLoading.close();
|
||
// that.ElLoading = null;
|
||
|
||
// 加载完成
|
||
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
|
||
callback && callback()
|
||
|
||
}
|
||
};
|
||
},
|
||
//查询某个人员
|
||
searchOne(keyword){
|
||
let that = this;
|
||
that.markList[5] = true;
|
||
that.userMaskerLayer.show = true;
|
||
clearInterval(that.timerUser);
|
||
that.timerUser = setInterval(function () {
|
||
that.refreshUserMarker();
|
||
}, 10000)
|
||
that.userList.filter(item=>{
|
||
if(item.my_info.employee_.name == keyword||item.mac ==keyword){
|
||
that.screenUserItem = item.my_info.employee_;
|
||
that.screenUserItem.mac = item.mac;
|
||
that.screenUser = true;
|
||
window.map.flyToMarker(that.userMarker[item.mac], {
|
||
duration: 1000,
|
||
offset:{
|
||
rotate: 45,
|
||
tilt: 60,
|
||
range: 200
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
handleChange(item, check,item2,item3) {
|
||
let that = this;
|
||
this.deptChecked = check.checkedKeys;
|
||
this.userParams.depts = check.checkedKeys;
|
||
},
|
||
//人员类型选择
|
||
userFilter() {
|
||
let that = this;
|
||
let checkedKeys = that.deptChecked;
|
||
window.map.removeLayer(that.userMaskerLayer);
|
||
that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
|
||
minimumLevel: 3,
|
||
maxmumLevel: 22,
|
||
show: true
|
||
});
|
||
window.map.addLayer(that.userMaskerLayer);
|
||
let userListNew = [];
|
||
that.userList.filter(item=>{
|
||
if(checkedKeys.indexOf(item.my_info.employee_.belong_dept_)>-1){
|
||
userListNew.push(item)
|
||
}
|
||
})
|
||
that.userList = userListNew;
|
||
console.log(that.userList)
|
||
that.showUserMarkers(userListNew);
|
||
this.showUserSelect = false;
|
||
},
|
||
//
|
||
audioFinished(){
|
||
if(this.audioIndex<this.audioList.length){
|
||
this.audioIndex++;
|
||
}else{
|
||
this.audioIndex = 0;
|
||
}
|
||
},
|
||
//显示右上角的时间
|
||
showTime() {
|
||
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
|
||
this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
|
||
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||
},
|
||
//区域下的作业/监控/喇叭/人员查询
|
||
areaItemHandle(index){
|
||
this.areaShowType = index;
|
||
if(index==1){
|
||
//区域下的作业
|
||
this.getAreaOperation();
|
||
}else if(index==2){
|
||
//区域下的监控
|
||
this.getAreaVchannel();
|
||
}else if(index==3){
|
||
//区域下的喇叭
|
||
this.getAreaSpeaker();
|
||
}else if(index==4){
|
||
//区域下的人员
|
||
this.getAreaBlt();
|
||
this.getAreaList();
|
||
}
|
||
},
|
||
//报警统计
|
||
getWarningTotal() {
|
||
let that = this;
|
||
that.getEventTotal();
|
||
that.getNewEvent();
|
||
clearInterval(that.eventTimer);
|
||
that.eventTimer = setInterval(function () {
|
||
that.getEventTotal();
|
||
}, 60000)
|
||
clearInterval(that.eventAudioTimer);
|
||
that.eventAudioTimer = setInterval(function () {
|
||
that.getNewEvent();
|
||
}, 20000)
|
||
},
|
||
//获取事件总数
|
||
getEventTotal(){
|
||
let that = this;
|
||
that.$API.ecm.event.cateAgg.req(that.cateAggForm).then(res => {
|
||
if (res.err_msg) { } else {
|
||
if(that.warningData.total != res.count){
|
||
that.getWarnings();
|
||
}
|
||
that.wStatistics = res;
|
||
}
|
||
})
|
||
},
|
||
//获取新事件
|
||
getNewEvent(){
|
||
let that = this;
|
||
that.$API.ecm.event.list.req({page_size:1}).then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
let judge = res.results[0].id==that.audioList.id
|
||
let item = res.results[0];
|
||
if(that.audioSrc!==''){
|
||
if(item.id==that.audioList.id){
|
||
}else{
|
||
that.audioList = item;
|
||
that.audioSrc=item.voice;
|
||
if(item.location){
|
||
window.map.flyToPosition(new jsmap.JSPoint(item.location.longitude, item.location.latitude), { range: 200,duration: 1000 });
|
||
}
|
||
}
|
||
}else{
|
||
that.audioList = item;
|
||
that.audioSrc = item.voice;
|
||
that.music.play();//播放
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//报警类型
|
||
getWarningType() {
|
||
let that = this;
|
||
that.$API.ecm.event_cate.list.req({page:0}).then(res => {
|
||
if (res.err_msg) { } else {
|
||
that.warningTypes = res;
|
||
}
|
||
})
|
||
},
|
||
warningTypeChange(){
|
||
this.warningTypeShow = !this.warningTypeShow
|
||
},
|
||
handleCurrentChange() {
|
||
this.getWarnings();
|
||
},
|
||
//获取报警列表
|
||
getWarnings() {
|
||
let that = this;
|
||
this.$API.ecm.event.list.req(this.warningData.params).then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
that.warningData.list = res.results;
|
||
that.warningData.total = res.count;
|
||
that.eventInterval();
|
||
}
|
||
})
|
||
},
|
||
//事件轮询
|
||
eventInterval(){
|
||
let that = this;
|
||
if (that.timerEventRoll!==null) {
|
||
clearInterval(that.timerEventRoll);
|
||
that.timerEventRoll = null;
|
||
}
|
||
that.timerEventRoll = setInterval(function () {
|
||
that.heightNum+=1;
|
||
if(that.heightNum>250){
|
||
that.heightNum=0;
|
||
document.getElementById('eventScrenItem').style.top = 0;
|
||
}else{
|
||
let top = -that.heightNum;
|
||
document.getElementById('eventScrenItem').style.top = top+'px';
|
||
}
|
||
}, 100)
|
||
|
||
},
|
||
//警报类型查询
|
||
warningTypeSelected(id,name) {
|
||
let that = this;
|
||
this.warningTypeShow = false;
|
||
let params = new Object();
|
||
params = that.warningData.params;
|
||
if (id !== null) {
|
||
params.cates = id;
|
||
}
|
||
this.eventTypeName = name;
|
||
that.$API.ecm.event.list.req(params).then(res => {
|
||
if (res.err_msg) { } else {
|
||
that.warningData.list = res.results;
|
||
that.warningData.total = res.count;
|
||
}
|
||
})
|
||
},
|
||
|
||
//区域点击事件
|
||
areaRowClick(data) {
|
||
let that = this;
|
||
that.areaDetail = true;
|
||
that.areaDetailId = data.id;
|
||
this.getAreaList();
|
||
this.getAreaOperation();
|
||
this.getAreaVchannel();
|
||
this.getAreaSpeaker();
|
||
this.getAreaBlt();
|
||
if(data.third_info.xx_rail){
|
||
let point = data.third_info.xx_rail.detail.polygon.points[0];
|
||
let points = data.third_info.xx_rail.detail.polygon.points;
|
||
window.map.flyToPosition(new jsmap.JSPoint(point.longitude, point.latitude, 0),
|
||
{ duration:1000,
|
||
offset:{
|
||
rotate: 60,
|
||
tilt: 60,
|
||
range: 300
|
||
}
|
||
});
|
||
if(that.singleAreaMaskerLayer!==null){
|
||
that.singleAreaMaskerLayer.setMarkerVisibleByFilter(false, (properties)=>{
|
||
if(properties && properties.get('id')!==data.id){
|
||
return true;
|
||
}
|
||
return false;
|
||
})
|
||
}
|
||
that.singleAreaMaskerLayer = new jsmap.JSPolygonMarkerLayer({
|
||
minimumLevel: 3,
|
||
maxmumLevel: 22,
|
||
show: true
|
||
});
|
||
let pointsList = [];
|
||
window.map.addLayer(that.singleAreaMaskerLayer);
|
||
pointsList = points.map(item => {
|
||
let obj = item;
|
||
obj.x=item.longitude;
|
||
obj.y=item.latitude;
|
||
return obj
|
||
});
|
||
let polygonMarker = new jsmap.JSPolygonMarker({
|
||
id: data.id,//id
|
||
position: pointsList,//坐标集合
|
||
floorId: data.third_info.xx_rail.detail.floorId,//楼层id
|
||
color: 'rgba(0,0,255,.44)',//填充颜色
|
||
strokeColor: '#2bff1d',//边线颜色
|
||
depthTest: false,//是否开启深度检测
|
||
allowPicking: false, //是否允许点击
|
||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //可见范围
|
||
properties: {
|
||
id: data.id
|
||
},//属性设置
|
||
callback: (marker) => {
|
||
// console.log(marker);
|
||
}//回调
|
||
});
|
||
that.singleAreaMaskerLayer.addMarker(polygonMarker);
|
||
}else{}
|
||
|
||
},
|
||
areaDetailClose(){
|
||
let that = this;
|
||
that.areaDetail = false;
|
||
if(that.singleAreaMaskerLayer){
|
||
that.singleAreaMaskerLayer.show = false;
|
||
}
|
||
},
|
||
//区域下的作业
|
||
getAreaOperation(){
|
||
let that = this;
|
||
this.$API.opm.operation.list.req({area:that.areaDetailId, state__in: '30,40'}).then(res=>{
|
||
console.log(res)
|
||
that.areaOperation = res.results;
|
||
})
|
||
},
|
||
//区域下的监控
|
||
getAreaVchannel(){
|
||
let that = this;
|
||
that.$API.third.tdevice.list.req({area:that.areaDetailId,type:60,page:0}).then(res=>{
|
||
console.log(res)
|
||
that.areaVideo = res;
|
||
})
|
||
},
|
||
//区域下的喇叭
|
||
getAreaSpeaker(){
|
||
let that = this;
|
||
that.$API.third.tdevice.list.req({area:that.areaDetailId,type:50,page:0}).then(res=>{
|
||
console.log(res)
|
||
that.areaSpeaker = res;
|
||
})
|
||
},
|
||
//区域下的人员
|
||
getAreaBlt(){
|
||
let that = this;
|
||
that.$API.third.blt.all.req({area:that.areaDetailId}).then(res=>{
|
||
that.areaUser = res.filter(item=>{
|
||
return item.my_info.employee;
|
||
});
|
||
}).catch(res=>{
|
||
debugger;
|
||
})
|
||
},
|
||
//点击区域下的人员
|
||
areaEmployeeRowClick(row){
|
||
let that = this;
|
||
that.screenUserItem = row.my_info.employee_;
|
||
that.screenUserItem.mac = row.mac;
|
||
that.screenUser = true;
|
||
window.map.flyToMarker(that.userMarker[row.mac], {
|
||
duration: 1000,
|
||
offset:{
|
||
rotate: 45,
|
||
tilt: 60,
|
||
range: 300
|
||
}
|
||
})
|
||
that.markList[5] = true;
|
||
that.userMaskerLayer.show = true;
|
||
clearInterval(that.timerUser);
|
||
that.timerUser = setInterval(function () {
|
||
that.refreshUserMarker();
|
||
}, 10000)
|
||
},
|
||
//点击区域下的作业
|
||
areaOperationRowClick(row){
|
||
let that = this;
|
||
console.log(row);
|
||
that.screenJobItem = row;
|
||
that.$API.opm.opl.list.req({ operation: row.id}).then((res) => {
|
||
console.log(res)
|
||
that.screenJobItem.cates_ = res.results;
|
||
that.screenOperation = true;
|
||
});
|
||
},
|
||
closeScreenOperation(){
|
||
this.screenOperation = false;
|
||
this.screenJobItem = null;
|
||
},
|
||
//加载部门数据
|
||
getGroup() {
|
||
let that = this;
|
||
that.$API.system.dept.list.req({ page: 0 }).then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
let rpartsList=[];
|
||
let arr = [];
|
||
let children = genTree(res);
|
||
console.log(children)
|
||
for (let i = 0; i < 5; i++) {
|
||
let obj = new Object();
|
||
if (i === 0) {
|
||
obj.id = 0;
|
||
obj.name = '全部';
|
||
obj.label = '全部';
|
||
} else if (i === 1) {
|
||
obj = children[0];
|
||
} else if (i === 2) {
|
||
obj.id = 2;
|
||
obj.name = '访客';
|
||
obj.label = '访客';
|
||
}else if (i === 3) {
|
||
obj.id = 3;
|
||
obj.name = '司机';
|
||
obj.label = '司机';
|
||
}
|
||
arr.push(obj)
|
||
}
|
||
that.postList = arr;
|
||
}
|
||
});
|
||
},
|
||
//岗位
|
||
// getAllPost() {
|
||
// this.$API.system.post.list.req({ page: 0 }).then(res => {
|
||
// let arr = [];
|
||
// let children = genTree(res);
|
||
// for (let i = 0; i < 4; i++) {
|
||
// let obj = new Object();
|
||
// if (i === 0) {
|
||
// obj.id = '';
|
||
// obj.name = '全部';
|
||
// obj.label = '全部';
|
||
// } else if (i === 1) {
|
||
// obj.id = '';
|
||
// obj.name = '正式员工';
|
||
// obj.label = '正式员工';
|
||
// obj.children = children;
|
||
// } else if (i === 2) {
|
||
// obj.id = '';
|
||
// obj.name = '相关方';
|
||
// obj.label = '相关方';
|
||
// } else if (i === 3) {
|
||
// obj.id = '';
|
||
// obj.name = '访客';
|
||
// obj.label = '访客';
|
||
// }
|
||
// arr.push(obj)
|
||
// }
|
||
// this.postList = arr;
|
||
// })
|
||
// },
|
||
//人员统计
|
||
getManCount() {
|
||
let that = this;
|
||
if (that.countIndex === '2') {
|
||
that.$API.third.blt.countNow.req().then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
that.userCount = { ...res };
|
||
}
|
||
})
|
||
} else {
|
||
that.$API.third.blt.countBind.req().then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
that.userCount = { ...res };
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//有卡/在线切换
|
||
countINdexChange(index) {
|
||
this.countIndex = index;
|
||
this.getManCount();
|
||
},
|
||
getAreaList() {
|
||
let that = this;
|
||
that.$API.am.area.list.req({page:0}).then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
that.areaList = res;
|
||
}
|
||
})
|
||
},
|
||
//获取危险作业
|
||
getDangers() {
|
||
let that = this;
|
||
that.$API.opm.operation.list.req({state__in:'30,40'}).then(res => {
|
||
if (res.err_msg) {
|
||
|
||
} else {
|
||
that.dangerList = res.results;
|
||
that.showPolygonMarkers(that.dangerList);
|
||
}
|
||
})
|
||
},
|
||
//区域列表/获取风险区域
|
||
getAreas() {
|
||
let that = this;
|
||
that.$API.am.area.list.req({page:0}).then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
that.areaList = res;
|
||
that.showRiskMarkers(that.areaList);
|
||
}
|
||
})
|
||
},
|
||
//获取人员列表（全部在线标签列表信息）
|
||
getAllMen() {
|
||
let that = this;
|
||
that.$API.third.blt.all.req().then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
that.userList = res.filter(item => {
|
||
return item.my_info.employee
|
||
});
|
||
that.allUserList = that.userList;
|
||
that.showUserMarkers(that.userList);
|
||
}
|
||
})
|
||
},
|
||
//选择部门
|
||
groupClick(data) {
|
||
console.log(data);
|
||
},
|
||
checkChange(data1,data2,data3,data4){
|
||
console.log(data1);
|
||
console.log(data2);
|
||
console.log(data3);
|
||
console.log(data4);
|
||
},
|
||
//获取人员详细信息
|
||
showUserDetail() {
|
||
this.screenUserDetail = true;
|
||
this.$API.hrm.employee.item.req(this.screenUserItem.id).then(res => {
|
||
this.screenUserItemDetail = res;
|
||
})
|
||
},
|
||
//风险区域layer
|
||
riskMaskerLayers() {
|
||
let that = this;
|
||
that.riskMarkerLayer = new jsmap.JSBoxMarkerLayer({
|
||
minimumLevel: 3,
|
||
maxmumLevel: 22,
|
||
show: false
|
||
});
|
||
window.map.addLayer(that.riskMarkerLayer);
|
||
that.getAreas();//区域/风险区域$$
|
||
},
|
||
//摄像头layer
|
||
cameraMaskerLayers() {//图标文字
|
||
let that = this;
|
||
that.cameraMaskerLayer = new jsmap.JSIconTextMarkerLayer({
|
||
minimumLevel: 3,
|
||
maxmumLevel: 22,
|
||
show: false
|
||
});
|
||
window.map.addLayer(that.cameraMaskerLayer);
|
||
that.getVchannels();
|
||
},
|
||
//监控视频播放
|
||
domMarkerLayers() {
|
||
let that = this;
|
||
that.domMarkerLayer = new jsmap.JSDomMarkerLayer({
|
||
minimumLevel: 3,
|
||
maxmumLevel: 22,
|
||
show: true
|
||
});
|
||
window.map.addLayer(that.domMarkerLayer);
|
||
},
|
||
//点击区域显示图层
|
||
areaMarkerLayers() {
|
||
let that = this;
|
||
that.areaMarkerLayer = new jsmap.JSDomMarkerLayer({
|
||
minimumLevel: 3,
|
||
maxmumLevel: 22,
|
||
show: true
|
||
});
|
||
window.map.addLayer(that.areaMarkerLayer);
|
||
},
|
||
//员工标记layer
|
||
userMaskerLayers() {//图标文字
|
||
let that = this;
|
||
that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
|
||
minimumLevel: 3,
|
||
maxmumLevel: 22,
|
||
show: false
|
||
});
|
||
window.map.addLayer(that.userMaskerLayer);
|
||
//添加线的图层
|
||
that.getAllMen();
|
||
},
|
||
//喇叭layer
|
||
speakersMaskerLayers() {//消防物资
|
||
let that = this;
|
||
that.materialsMaskerLayer = new jsmap.JSIconTextMarkerLayer({
|
||
minimumLevel: 3,
|
||
maxmumLevel: 22,
|
||
show: false
|
||
});
|
||
window.map.addLayer(that.materialsMaskerLayer);
|
||
//获取喇叭列表
|
||
this.getSpeakers();
|
||
},
|
||
//危险作业Layer
|
||
polygonMarkerLayers() {//危险作业
|
||
let that = this;
|
||
that.polygonMaskerLayer = new jsmap.JSPolygonMarkerLayer({
|
||
minimumLevel: 3,
|
||
maxmumLevel: 22,
|
||
show: false
|
||
});
|
||
window.map.addLayer(that.polygonMaskerLayer);
|
||
that.getDangers();
|
||
},
|
||
//风险区域
|
||
showRiskMarkers(list) {
|
||
let that = this;
|
||
if(list.length>0){
|
||
list.forEach(item => {
|
||
let boxMarker = null;
|
||
let pointsList = [], floorId = null;
|
||
if (item.third_info.xx_rail!==null&&item.third_info.xx_rail!==undefined) {
|
||
floorId = item.third_info.xx_rail.detail.floorId;
|
||
let points = item.third_info.xx_rail.detail.polygon.points;
|
||
// debugger;
|
||
pointsList = points.map(item => {
|
||
let obj = item;
|
||
obj.x=item.longitude;
|
||
obj.y=item.latitude;
|
||
return obj
|
||
});
|
||
let areaId = item.id;
|
||
let maskColor = '',strokeColor='';
|
||
if(item.level===10){
|
||
maskColor = 'rgba(0,0,255,.3)';//蓝色
|
||
strokeColor = '#0000ff';
|
||
}else if(item.level===20){
|
||
maskColor = 'rgba(255,255,0,0.44)';//黄色
|
||
strokeColor = '#ffff00';
|
||
}else if(item.level===30){
|
||
maskColor = 'rgba(255,153,0,0.44)';//橙色
|
||
strokeColor = '#ff9900';
|
||
}else if(item.level===40){
|
||
maskColor = 'rgba(255,0,0,0.44)';//红色
|
||
strokeColor = '#ff0000';
|
||
}
|
||
boxMarker = new jsmap.JSBoxMarker({
|
||
id: item.id,
|
||
position: pointsList,
|
||
floorId: floorId,//楼层id
|
||
color: maskColor,//颜色
|
||
height: 0,//基底高度
|
||
stretchHeight: 35,//拉伸高度
|
||
strokeColor: strokeColor,//边线颜色
|
||
show: true, //是否显示
|
||
allowPicking: true, //是否允许点击
|
||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
|
||
properties: {
|
||
areaId: areaId
|
||
},
|
||
});
|
||
that.riskMarkerLayer.addMarker(boxMarker);
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
//摄像头Marker
|
||
showCameraMarkers(list) {
|
||
// debugger;
|
||
let that = this;
|
||
if(list.length>0){
|
||
list.forEach(item => {
|
||
let cameraMarker = null;
|
||
let pixel = item.my_info.location;
|
||
if(pixel.x){
|
||
cameraMarker = new jsmap.JSIconTextMarker({
|
||
id: item.channelCode,
|
||
position: { x: pixel.x, y: pixel.y, z: pixel.z }, //坐标
|
||
floorId: pixel.floorId, //楼层id,默认为1（地面）
|
||
image: "/img/camera.svg",
|
||
text: item.channelName,
|
||
font: 'lighter 12px serif',
|
||
fontColor: '#ffffff',
|
||
imageHeight: 25,
|
||
imageWidth: 25,
|
||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||
backgroundRadius: 1,
|
||
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
|
||
backgroundStrokeWidth: 1,
|
||
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
|
||
allowPicking: true,
|
||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
|
||
show: true,
|
||
callback: () => {
|
||
}
|
||
});
|
||
// debugger;
|
||
// console.log(that.cameraMaskerLayer)
|
||
that.cameraMaskerLayer.addMarker(cameraMarker);
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
//喇叭Marker
|
||
showSpeakersMarkers(list) {
|
||
let that = this;
|
||
list.forEach(item => {
|
||
let materialMarker = null;
|
||
let pixel = item.my_info.location;
|
||
console.log(pixel)
|
||
materialMarker = new jsmap.JSIconTextMarker({
|
||
id: item.id,
|
||
position: {x: pixel.x, y: pixel.y, z: pixel.z}, //坐标
|
||
floorId: pixel.floorId, //楼层id,默认为1（地面）
|
||
image: "/img/sound.svg",
|
||
text: item.name,
|
||
font: '10px sans-serif',
|
||
fontColor: '#ffffff',
|
||
imageHeight: 25,
|
||
imageWidth: 25,
|
||
// fontStrokeColor: '#1f0fdd',
|
||
fontStrokeWidth: 1,
|
||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||
backgroundRadius: 1,
|
||
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
|
||
backgroundStrokeWidth: 1,
|
||
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
|
||
allowPicking: false,
|
||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
|
||
show: true
|
||
});
|
||
that.materialsMaskerLayer.addMarker(materialMarker);
|
||
})
|
||
|
||
},
|
||
//人员Marker
|
||
showUserMarkers(userList) {
|
||
// debugger;
|
||
let that = this;
|
||
//标记图片
|
||
let userImage = '';
|
||
if (userList.length > 0) {
|
||
userList.forEach(item=>{
|
||
let employee_ = item.my_info.employee_,online = item.online;;
|
||
employee_.mac = item.mac;
|
||
let employeeType = item.my_info.employee_.type
|
||
if (employeeType === 'employee') {
|
||
userImage = "/img/employee.png"
|
||
}else if (employeeType === 'driver') {
|
||
userImage = "/img/driver.png"
|
||
} else if (employeeType === 'remployee') {
|
||
userImage = "/img/driver.png"
|
||
}else {
|
||
userImage = "/img/visitor.png"
|
||
}
|
||
let floorId = 1;
|
||
if(item.floorNo=='Floor1'){
|
||
floorId = 1;
|
||
}else if(item.floorNo=='Floor2'){
|
||
floorId = 2;
|
||
}else if(item.floorNo=='Floor3'){
|
||
floorId = 3;
|
||
}else if(item.floorNo=='Floor4'){
|
||
floorId = 4;
|
||
}else if(item.floorNo=='Floor5'){
|
||
floorId = 5;
|
||
}
|
||
that.userMarker[item.mac] = new jsmap.JSIconTextMarker({
|
||
id: item.my_info.code,
|
||
position: { x:item.longitude, y: item.latitude, z: item.z }, //坐标
|
||
floorId: floorId, //楼层id,默认为1（地面）
|
||
image: userImage,
|
||
text: employee_.name,
|
||
font: '10px sans-serif',
|
||
fontColor: '#ffffff',
|
||
imageHeight: 25,
|
||
imageWidth: 25,
|
||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||
backgroundRadius: 1,
|
||
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
|
||
backgroundStrokeWidth: 1,
|
||
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
|
||
allowPicking: true,
|
||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
|
||
show: true,
|
||
properties: {
|
||
employee: employee_,
|
||
online:online
|
||
},
|
||
callback: (marker) => {
|
||
}
|
||
});
|
||
that.userMaskerLayer.addMarker(that.userMarker[item.mac]);
|
||
that.userMaskerLayer.setMarkerVisibleByFilter(false, (properties)=>{
|
||
if(properties && properties.get('online')!==true){
|
||
return true;
|
||
}
|
||
return false;
|
||
})
|
||
})
|
||
}
|
||
},
|
||
//更新人员标记
|
||
refreshUserMarker() {
|
||
if (document.getElementById("mapContainer") == null || document.getElementById("mapContainer") == undefined){
|
||
return
|
||
}
|
||
let that = this;
|
||
that.$API.third.blt.all.req(that.userParams).then(res => {
|
||
if (res.err_msg) {
|
||
} else {
|
||
let userList = res.filter(item => {
|
||
return item.my_info.employee
|
||
});
|
||
let addUser = that.func(userList, that.userList)[0];
|
||
let refreshList = that.func(userList, that.userList)[1];
|
||
that.allUserList = that.userList = refreshList.concat(addUser);//更新userList
|
||
that.showUserMarkers(addUser);//增加新进在线员工
|
||
that.userMaskerLayer.setMarkerVisibleByFilter(false, (properties)=>{
|
||
if(properties && properties.get('online')!==true){
|
||
return true;
|
||
}
|
||
return false;
|
||
})
|
||
refreshList.forEach(item1 => {
|
||
let item2 = {};
|
||
item2={...item1};
|
||
that.userMaskerLayer.updateMarkerPosition(that.userMarker[item2.mac], {
|
||
floorId: 1,
|
||
position: { x: item2.longitude, y: item2.latitude, z: item2.z },
|
||
animate: { duration: 10000, }
|
||
});//动画效果,持续时间一秒
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//比较两次获取的人数的变动 func(a,b)//a与b相比多出来的
|
||
func(arr1, arr2) {
|
||
let arr = [];
|
||
let list = [];
|
||
let bool = false;
|
||
let same = false;
|
||
for (let i = 0; i < arr1.length; i++) {
|
||
for (let j = 0; j < arr2.length; j++) {
|
||
//遇到相同直接跳出循环
|
||
if (arr1[i].id === arr2[j].id) {
|
||
same = i;
|
||
bool = false;
|
||
break;
|
||
} else {
|
||
same = false;
|
||
bool = i;
|
||
}
|
||
}
|
||
if (same !== false) list.push(arr1[same]);
|
||
if (bool !== false) arr.push(arr1[bool]);
|
||
}
|
||
let arrList = [arr, list];
|
||
return arrList;
|
||
},
|
||
//危险作业
|
||
showPolygonMarkers(data) {
|
||
let that = this;
|
||
if(data.length>0){
|
||
data.forEach(item => {
|
||
let polygonMarker = null;
|
||
let areaWork = that.areaList.filter(area=>{
|
||
return area.id==item.area
|
||
});
|
||
let points = areaWork[0].third_info.xx_rail.detail.polygon.points;;
|
||
let pointsList = points.map(item => {
|
||
let obj = item;
|
||
obj.x=item.longitude;
|
||
obj.y=item.latitude;
|
||
return obj
|
||
});
|
||
polygonMarker = new jsmap.JSPolygonMarker({
|
||
id: item.id+'work',//id
|
||
position: pointsList,//坐标集合
|
||
floorId: 1,//楼层id
|
||
color: 'rgba(241,193,105,.44)',//填充颜色
|
||
strokeColor: '#2bff1d',//边线颜色
|
||
depthTest: false,//是否开启深度检测
|
||
allowPicking: true, //是否允许点击
|
||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //可见范围
|
||
properties: {
|
||
workId:item.id,
|
||
area: item.area
|
||
},//属性设置
|
||
callback: (marker) => {
|
||
// console.log(marker);
|
||
}//回调
|
||
});
|
||
this.polygonMaskerLayer.addMarker(polygonMarker);
|
||
})
|
||
}
|
||
},
|
||
//危险作业图片标记
|
||
// showJobDomMarkers() {
|
||
// let domMarker = new jsmap.JSDomMarker({
|
||
// id: 'polygonmark',
|
||
// position: new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0),
|
||
// floorId: 1,
|
||
// depthTest: true,
|
||
// content: `<div style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"><div style="background-image: url('/img/speaker.png');width: 60px;height: 80px;"></div></div>`,
|
||
// offset: jsmap.JSControlPosition.RIGHT_CENTER,
|
||
// displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||
// marginOffset: {
|
||
// x: 0,
|
||
// y: 0
|
||
// },
|
||
// properties: {
|
||
// type: 0,
|
||
// },
|
||
// callback: (node) => {
|
||
// console.log(node);
|
||
// }
|
||
// });
|
||
// this.jobDomMarkerLayer.addMarker(domMarker);
|
||
// },
|
||
|
||
//显示人员类型选项
|
||
userSelect() {
|
||
this.showUserSelect = !this.showUserSelect
|
||
},
|
||
//暂停或旋转
|
||
autoRunChange() {
|
||
this.autoRun = !this.autoRun;
|
||
if (this.autoRun) {
|
||
this.mapRun();
|
||
} else {
|
||
this.mapPause();
|
||
}
|
||
},
|
||
//自动旋转
|
||
mapRun() {
|
||
if (this.flyManager !== null) {
|
||
this.flyManager.restartFly();
|
||
} else {
|
||
//地图旋转展示
|
||
this.flyManager = new jsmap.JSFlyManager(window.map);
|
||
this.flyManager.flyByCircle({
|
||
center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
|
||
distance: 500,
|
||
duration: 100000,
|
||
tilt: 30
|
||
});
|
||
}
|
||
},
|
||
//暂停旋转
|
||
mapPause() {
|
||
// this.flyManager.destroy();
|
||
this.flyManager.pauseFly();
|
||
},
|
||
//多选框展开收起
|
||
filterCtrlFocusChange() {
|
||
this.filterCtrlFocus = !this.filterCtrlFocus
|
||
},
|
||
//页面maker的展示控制
|
||
markerClick(index) {
|
||
let arr = [];
|
||
let that = this;
|
||
that.markList[index] = !that.markList[index];
|
||
if (index === 0) {
|
||
if (that.markList[0]) {
|
||
arr = that.markList.map(value => {
|
||
return true
|
||
})
|
||
} else {
|
||
arr = that.markList.map(value => {
|
||
return false
|
||
})
|
||
}
|
||
that.markList = arr;
|
||
} else {
|
||
let list = that.markList.slice(1, 7);
|
||
if (list.indexOf(true) > -1 && list.indexOf(false) < 0) {
|
||
that.markList[0] = true;
|
||
} else {
|
||
that.markList[0] = false;
|
||
}
|
||
}
|
||
if (that.markList[1]) {
|
||
that.cameraMaskerLayer.show = true;
|
||
} else {
|
||
that.cameraMaskerLayer.show = false;
|
||
}
|
||
if (that.markList[2]) {
|
||
that.materialsMaskerLayer.show = true;
|
||
} else {
|
||
that.materialsMaskerLayer.show = false;
|
||
}
|
||
if (that.markList[3]) {
|
||
that.polygonMaskerLayer.show = true;
|
||
} else {
|
||
that.polygonMaskerLayer.show = false;
|
||
}
|
||
if (that.markList[4]) {
|
||
that.riskMarkerLayer.show = true;
|
||
} else {
|
||
that.riskMarkerLayer.show = false;
|
||
}
|
||
if (that.markList[5]) {
|
||
that.userMaskerLayer.show = true;
|
||
clearInterval(that.timerUser);
|
||
that.timerUser = setInterval(function () {
|
||
that.refreshUserMarker();
|
||
}, 10000)
|
||
} else {
|
||
that.userMaskerLayer.show = false;
|
||
clearInterval(that.timerUser);
|
||
that.timerUser = null;
|
||
}
|
||
},
|
||
//获取摄像头列表
|
||
getVchannels() {
|
||
let that = this;
|
||
// debugger;
|
||
that.$API.am.tdevice.vchannel.req({pageSize:999}).then(res => {
|
||
if (res.err_msg) {
|
||
that.$message.error(res.err_msg);
|
||
} else {
|
||
let Vchannels = res.pageData.filter(item=>{
|
||
return item.my_info.location!==undefined;
|
||
})
|
||
that.Vchannels = Vchannels;
|
||
that.showCameraMarkers(Vchannels);
|
||
}
|
||
});
|
||
},
|
||
//获取喇叭列表
|
||
getSpeakers() {
|
||
let that = this;
|
||
that.$API.am.tdevice.speaker.req().then(res => {
|
||
if (res.err_msg) {
|
||
that.$message.error(res.err_msg);
|
||
} else {
|
||
let list = res.rows.filter(item=>{
|
||
return item.my_info.location!==undefined;
|
||
})
|
||
that.speakerList = list;
|
||
that.showSpeakersMarkers(res.rows);
|
||
}
|
||
});
|
||
},
|
||
//报警详情
|
||
warningItemShow(item) {
|
||
this.screenJob = false;
|
||
this.screenRisk = false;
|
||
this.screenWarningItem = item;
|
||
this.warningId = item.id;
|
||
// console.log(item);
|
||
this.$nextTick(() => {
|
||
this.screenWarning = true;
|
||
});
|
||
},
|
||
//关闭危险作业
|
||
closeScreenJob() {
|
||
this.screenJob = false;
|
||
},
|
||
//关闭风险区域
|
||
closeScreenRisk() {
|
||
this.screenRisk = false;
|
||
},
|
||
//光比报警页面
|
||
closeScreenWarning() {
|
||
this.screenWarning = false;
|
||
},
|
||
//报警处理
|
||
handleWarning() {
|
||
let that = this;
|
||
that.warningForm.mark = parseInt(that.warningForm.mark);
|
||
that.$API.ecm.event.handle.req(that.warningId, that.warningForm).then(res => {
|
||
if (res.err_msg) {
|
||
|
||
} else {
|
||
that.screenWarning = false;
|
||
that.getWarnings();
|
||
}
|
||
})
|
||
},
|
||
//员工列表点击
|
||
userRowClick(row) {
|
||
let that = this;
|
||
// debugger;
|
||
window.map.flyToMarker(that.userMarker[row.mac], {
|
||
duration: 1000,range: 200
|
||
})
|
||
that.screenUserItem.name = row.my_info.employee_.name;
|
||
that.screenUserItem.type = row.my_info.employee_.type;
|
||
that.screenUserItem.id = row.my_info.employee_.id;
|
||
that.screenUserItem.photo = row.my_info.employee_.photo ? row.my_info.employee_.photo : '';
|
||
that.screenUserItem.post_name = row.my_info.employee_.post_name ? row.my_info.employee_.post_name : '';
|
||
that.screenUserItem.belong_dept_name = row.my_info.employee_.belong_dept_name ? row.my_info.employee_.belong_dept_name : '';
|
||
},
|
||
//人员追踪
|
||
userTrack() {
|
||
this.tracking = true;
|
||
window.map.trackMarker(this.userMarker[this.screenUserItem.mac], {
|
||
range: 200
|
||
})
|
||
},
|
||
//取消人员追踪
|
||
userUnTrack() {
|
||
window.map.cancelTrack();
|
||
this.tracking = false;
|
||
},
|
||
//人员轨迹
|
||
userLineTrack(){
|
||
debugger;
|
||
let that = this;
|
||
let obj = {};
|
||
obj.id=that.screenUserItem.id;
|
||
obj.mac=that.screenUserItem.mac;
|
||
obj.name=that.screenUserItem.name;
|
||
obj.type=that.screenUserItem.type;
|
||
obj.floorNo=that.screenUserItem.location.xx_detail.floorNo;
|
||
obj.longitude=that.screenUserItem.location.xx_detail.longitude;
|
||
obj.latitude=that.screenUserItem.location.xx_detail.latitude;
|
||
localStorage.setItem('trackItem',JSON.stringify(obj))
|
||
this.$router.push({
|
||
name: "track"
|
||
});
|
||
// that.lineTracking = true;
|
||
// that.userMaskerLayer.show = false;
|
||
// let nowTime = new Date().getTime();
|
||
// let preTime = nowTime-60*60 * 1000;
|
||
// let params = {
|
||
// url:"/api/datacenter/user/historypathV2",
|
||
// method:"post",
|
||
// json:{
|
||
// mac: that.screenUserItem.mac,
|
||
// startTime: preTime,
|
||
// endTime: nowTime,
|
||
// locationType: "real"
|
||
// }
|
||
// };
|
||
// let points0 = [];
|
||
// that.$API.third.blt.xunxiCommon.req(params).then(res => {
|
||
// if (res.err_msg) { } else {
|
||
// let points = [];
|
||
// res.forEach(item=>{
|
||
// item.points.forEach(poi=>{
|
||
// points.push(poi)
|
||
// })
|
||
// })
|
||
// points.forEach(item=>{
|
||
// let obj=new Object();
|
||
// obj.x=item.longitude;
|
||
// obj.y=item.latitude;
|
||
// obj.z=item.z;
|
||
// points0.push(obj);
|
||
// });
|
||
// if(points0.length>0){
|
||
// that.line1 = null;
|
||
// if (that.line1==null) {
|
||
// that.line1 = new jsmap.JSLineMarker({
|
||
// position: points0,
|
||
// floorId: 1,
|
||
// lineType: jsmap.JSLineType.ARROW,
|
||
// color: '#0000ff',
|
||
// width: 10,
|
||
// depthTest: true
|
||
// });
|
||
// window.map.addMarker(that.line1);
|
||
// }
|
||
// that.trackMarker = new jsmap.JSIconTextMarker({
|
||
// id: '1',
|
||
// position: points0[0],
|
||
// image: "/img/visitor.png",
|
||
// rotation: {
|
||
// rx: 0,
|
||
// ry: 0,
|
||
// rz: -90
|
||
// },
|
||
// text: that.screenUserItem.name,
|
||
// fontColor: '#0000ff',
|
||
// font: '14px 微软雅黑',
|
||
// backgroundColor: 'rgba(112,253,147,0.5)',
|
||
// backgroundRadius: 5,
|
||
// textOffsetInMeter: 1.6,
|
||
// backgroundStrokeColor: 'rgb(255,255,255)',
|
||
// modelAnimate: {
|
||
// multiplier: 2,
|
||
// },
|
||
// scale: 1,
|
||
// properties: {
|
||
// name: 'trackMarker'
|
||
// },
|
||
// callback: (marker) => {
|
||
// window.map.trackMarker(marker, {
|
||
// range: 100,
|
||
// tilt: 60,
|
||
// rotate: 310
|
||
// });
|
||
// for (let i = 1; i < points0.length; i++) {
|
||
// setTimeout(() => {
|
||
// window.map.updateMarkerPosition(marker, {
|
||
// position: points0[i],
|
||
// animate: {
|
||
// duration: 1000,
|
||
// update: (pos) => {
|
||
// that.line1.trace(pos)
|
||
// }
|
||
// }
|
||
// });
|
||
// }, i * 1000);
|
||
// }
|
||
// }
|
||
// });
|
||
// window.map.addMarker(that.trackMarker);
|
||
// }else{
|
||
// that.$message.error('暂无运动痕迹');
|
||
// }
|
||
// }
|
||
// })
|
||
},
|
||
userLineTrackCancel(){
|
||
window.location.reload();
|
||
let that = this;
|
||
that.lineTracking = false;
|
||
that.userMaskerLayer.show = true;
|
||
window.map.cancelTrack();
|
||
window.map.removeMarker(that.trackMarker);
|
||
window.map.removeAllPointMarker();
|
||
window.map.removeMarker(that.line1);
|
||
window.map.removeAllLineMarker();
|
||
that.trackMarker = null;
|
||
that.line1 = null;
|
||
},
|
||
//区域/部门切换
|
||
cockpitChange(index) {
|
||
this.LBType = index;
|
||
},
|
||
//选择人员分类
|
||
changeDropIndex(index) {
|
||
let that = this;
|
||
that.dropIndex = index;
|
||
setTimeout(function () {
|
||
that.showUserSelect = false;
|
||
}, 300)
|
||
},
|
||
allWarningView(){
|
||
this.$router.push('/ecm/event')
|
||
},
|
||
speakerPasue(){
|
||
this.speakerPlayStatus = false;
|
||
this.music.pause(); //暂停
|
||
},
|
||
speakerPlay(){
|
||
this.speakerPlayStatus = true;
|
||
this.music.play();//播放
|
||
},
|
||
//关闭作业列表
|
||
workDetailClose(){
|
||
this.workDetail = false;
|
||
},
|
||
//查看监控
|
||
showVchannel(item){
|
||
let that = this;
|
||
// debugger;
|
||
console.log(item)
|
||
that.channelCode = item.code;
|
||
that.channelName = item.name;
|
||
that.limitedVisible = true;
|
||
},
|
||
viewClose(){
|
||
this.limitedVisible = false;
|
||
},
|
||
showOpretion(item){
|
||
let that = this;
|
||
that.ticketId = item.ticket;
|
||
// that.projectId = item.operation;
|
||
that.cateType = item.cate_.code;
|
||
if (that.cateType === "visit") {
|
||
that.projectId = item.ticket_.ticket_data.visit;
|
||
} else if (that.cateType === "rpj") {
|
||
that.projectId = item.ticket_.ticket_data.rpj;
|
||
} else {
|
||
that.cateType = "opl";
|
||
that.projectId = item.ticket_.ticket_data.opl;
|
||
}
|
||
that.limitedOpreation = true;
|
||
},
|
||
},
|
||
beforeRouteLeave(to, from, next){
|
||
next();
|
||
if (this.timerUser) {
|
||
clearInterval(this.timerUser);
|
||
this.timerUser = null;
|
||
}
|
||
if (this.timerTime) {
|
||
clearInterval(this.timerTime);
|
||
this.timerTime = null;
|
||
}
|
||
if (this.eventTimer) {
|
||
clearInterval(this.eventTimer);
|
||
this.eventTimer = null;
|
||
}
|
||
if (this.timerEventRoll) {
|
||
clearInterval(this.timerEventRoll);
|
||
this.timerEventRoll = null;
|
||
}
|
||
if (this.eventAudioTimer) {
|
||
clearInterval(this.eventAudioTimer);
|
||
this.eventAudioTimer = null;
|
||
}
|
||
},
|
||
unmounted() {
|
||
// window.map.destroy();
|
||
window.map = null;
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.handleWarningBtn,
|
||
.handleWarningBtn:active,
|
||
.handleWarningBtn:focus,
|
||
.handleWarningBtn:hover {
|
||
cursor: pointer;
|
||
border: 1px solid #30ffdd;
|
||
color: #ffffff;
|
||
background: rgba(48, 255, 220, 0.35);
|
||
}
|
||
|
||
.el-loading-spinner .el-loading-text{
|
||
color: #Ffa500;
|
||
}
|
||
|
||
.el-loading-spinner .path{
|
||
stroke: #Ffa500;
|
||
}
|
||
|
||
.el-radio.el-radio--small .el-radio__label {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.el-radio__input.is-checked .el-radio__inner {
|
||
border-color: #30ffdd;
|
||
background: #30ffdd;
|
||
}
|
||
|
||
.el-radio__input.is-checked+.el-radio__label {
|
||
color: #30ffdd;
|
||
}
|
||
|
||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||
background: rgba(48, 255, 220, 0);
|
||
}
|
||
|
||
#bigScreenTree {
|
||
background: none !important;
|
||
}
|
||
|
||
#bigScreenTree .el-tree-node__content {
|
||
color: #ffffff;
|
||
/*background-color:rgba(255,255,255,.1);*/
|
||
}
|
||
|
||
#bigScreenTree .el-tree-node__content:hover {
|
||
background-color: rgba(255, 255, 255, .1)
|
||
}
|
||
|
||
#bigScreenTree .el-tree-node:focus>.el-tree-node__content {
|
||
background-color: rgba(255, 255, 255, .1)
|
||
}
|
||
|
||
.v_title :before {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 14px;
|
||
width: 0;
|
||
height: 16px;
|
||
border: 1px solid #31fe27;
|
||
}
|
||
|
||
.v_masker {
|
||
width: 327px !important;
|
||
height: 183px !important;
|
||
background: url(/public/img/v_mask.png) no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
}
|
||
|
||
.hoverPointer:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.screen-main {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.screen-per-list {
|
||
height: calc(100% - 270px);
|
||
}
|
||
|
||
.danger-btn-bg {
|
||
display: inline-block;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 16px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
padding: 0 18px;
|
||
border: 1px solid #ffc679;
|
||
background: #dd8000;
|
||
box-shadow: inset 0 0 8px #fda732;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.danger-btn-bg:hover {
|
||
box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
|
||
}
|
||
|
||
.h100 {
|
||
height: 100%;
|
||
}
|
||
|
||
.person-info-header {
|
||
position: relative;
|
||
|
||
.basic-btn {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.header-basic {
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.basic-img {
|
||
width: 104px;
|
||
height: 144px;
|
||
}
|
||
|
||
.basic-info {
|
||
width: calc(100% - 130px);
|
||
|
||
.info-item {
|
||
font-size: 14px;
|
||
margin-bottom: 6px;
|
||
display: flex;
|
||
|
||
.info-item-name {
|
||
color: #fff;
|
||
font-weight: 400;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.info-item-info {
|
||
color: #fff;
|
||
font-weight: 500;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.basic-btn-group {
|
||
margin: 12px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.btn-item {
|
||
width: 48%;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.trackImg {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
background-image: url("/public/img/v_track.png");
|
||
}
|
||
|
||
.viewImg {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
background-image: url("/public/img/v_view.png");
|
||
}
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-header {
|
||
width: 100% !important;
|
||
height: 84px !important;
|
||
position: absolute !important;
|
||
left: 0 !important;
|
||
top: 0 !important;
|
||
background: linear-gradient(0deg, rgba(0, 113, 155, 0) 0, #00455f) !important;
|
||
z-index: 2 !important;
|
||
transition: all .5s linear !important;
|
||
|
||
.header-left-bg {
|
||
height: 60px;
|
||
position: absolute;
|
||
left: 18px;
|
||
top: 12px;
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
}
|
||
|
||
.header-right-action {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.right-action-clock {
|
||
:before {
|
||
content: " ";
|
||
display: inline;
|
||
position: absolute;
|
||
left: -24px;
|
||
top: 9px;
|
||
width: 16px;
|
||
height: 16px;
|
||
/*background: url(/img/screen5/clock.png) no-repeat;*/
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.action-time {
|
||
width: 56px;
|
||
height: 19px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
position: relative;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.screen-cockpit {
|
||
width: 440px;
|
||
height: 100%;
|
||
z-index: 1;
|
||
display: flex;
|
||
position: absolute;
|
||
flex-direction: column;
|
||
background: linear-gradient(90deg, #00455f, rgba(0, 113, 155, 0));
|
||
transition: all .5s linear;
|
||
padding-top: 84px;
|
||
box-sizing: border-box;
|
||
|
||
.cockpit-count {
|
||
width: 100%;
|
||
padding: 0 10px 0 18px;
|
||
position: relative;
|
||
}
|
||
|
||
.cockpit-alarm {
|
||
width: 100%;
|
||
position: relative;
|
||
padding: 0 10px 0 18px;
|
||
}
|
||
|
||
.cockpit-info {
|
||
width: 100%;
|
||
position: relative;
|
||
padding: 0 10px 0 18px;
|
||
}
|
||
|
||
.divider {
|
||
display: block;
|
||
height: 1px;
|
||
width: 100%;
|
||
background: hsla(0, 0%, 100%, .5);
|
||
z-index: 2;
|
||
}
|
||
|
||
.simple-title {
|
||
line-height: 22px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
position: relative;
|
||
padding-left: 8px;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.simple-title:before {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 14px;
|
||
width: 0;
|
||
height: 16px;
|
||
border: 1px solid #31fe27;
|
||
}
|
||
}
|
||
|
||
.screen-ctrl {
|
||
position: absolute;
|
||
top: 60px;
|
||
right: 18px;
|
||
z-index: 2;
|
||
transition: all .5s linear;
|
||
}
|
||
|
||
.screen-tab {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
z-index: 9;
|
||
transform: translate(-50%);
|
||
transition: all .5s linear;
|
||
}
|
||
|
||
.screen-multiple-select {
|
||
position: relative;
|
||
display: inline-block;
|
||
|
||
.multiple-select-tags {
|
||
position: relative;
|
||
background: rgba(48, 255, 220, .35);
|
||
border: 1px solid #30ffdc;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 32px;
|
||
border-radius: 16px;
|
||
cursor: pointer;
|
||
|
||
.multiple-select-input {
|
||
max-width: calc(100% - 50px);
|
||
box-sizing: border-box;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.multiple-select-caret {
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.multiple-select-wrap {
|
||
width: 100%;
|
||
z-index: 20;
|
||
position: absolute;
|
||
top: 36px;
|
||
left: 0;
|
||
overflow: auto;
|
||
max-height: 250px;
|
||
border-radius: 4px;
|
||
background: #007767;
|
||
box-shadow: inset 0 0 4px #0bf1ff;
|
||
|
||
.multiple-select-ul {
|
||
padding: 4px 0;
|
||
|
||
.multiple-select-li {
|
||
position: relative;
|
||
padding: 0 16px 0 32px;
|
||
width: 100%;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
color: #fff;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
}
|
||
|
||
.multiple-select-label {
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-risk {
|
||
width: 390px;
|
||
height: fit-content;
|
||
max-height: calc(100% - 180px);
|
||
padding: 0 16px 16px;
|
||
background: rgba(24, 36, 51, .7);
|
||
position: absolute;
|
||
top: 170px;
|
||
right: 18px;
|
||
z-index: 9999;
|
||
overflow-y: scroll;
|
||
transition: all .5s linear;
|
||
|
||
.risk-content {
|
||
height: calc(100% - 44px);
|
||
|
||
.risk-item {
|
||
font-size: 14px;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
|
||
.risk-item-name {
|
||
color: hsla(0, 0%, 100%, .8);
|
||
font-weight: 400;
|
||
}
|
||
|
||
.risk-item-info {
|
||
color: #fff;
|
||
font-weight: 500;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-job {
|
||
width: 390px;
|
||
padding: 0 16px 16px;
|
||
background: rgba(24, 36, 51, .7);
|
||
position: absolute;
|
||
top: 170px;
|
||
right: 18px;
|
||
z-index: 1;
|
||
transition: all .5s linear;
|
||
|
||
.job-content {
|
||
height: calc(100% - 44px);
|
||
overflow-y: auto;
|
||
|
||
.job-basic {
|
||
.job-item {
|
||
font-size: 14px;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
|
||
.job-item-name {
|
||
color: hsla(0, 0%, 100%, .8);
|
||
font-weight: 400;
|
||
flex-shrink: 0;
|
||
width: 90px;
|
||
text-align: right;
|
||
}
|
||
|
||
.job-item-info {
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.job-list {
|
||
line-height: 35px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-user {
|
||
width: 390px;
|
||
padding: 0 16px 16px;
|
||
background: rgba(24, 36, 51, .7);
|
||
position: absolute;
|
||
top: 170px;
|
||
right: 18px;
|
||
z-index: 1;
|
||
transition: all .5s linear;
|
||
overflow-y: scroll;
|
||
max-height: 80vh;
|
||
.job-content {
|
||
height: calc(100% - 44px);
|
||
overflow-y: auto;
|
||
|
||
.job-basic {
|
||
.job-item {
|
||
font-size: 14px;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
|
||
.job-item-name {
|
||
color: hsla(0, 0%, 100%, .8);
|
||
font-weight: 400;
|
||
flex-shrink: 0;
|
||
width: 90px;
|
||
text-align: right;
|
||
}
|
||
|
||
.job-item-info {
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.job-list {
|
||
.custom-table {
|
||
height: 100%;
|
||
|
||
.custom-table-head {
|
||
display: flex;
|
||
|
||
.table-head-item {
|
||
padding: 0 4px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
.custom-table-body {
|
||
max-height: calc(50vh - 100px);
|
||
|
||
.table-body-item {
|
||
display: flex;
|
||
|
||
.body-item-label {
|
||
padding: 0 4px;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.simple-title {
|
||
line-height: 22px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
position: relative;
|
||
padding-left: 8px;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.simple-title:before {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 14px;
|
||
width: 0;
|
||
height: 16px;
|
||
border: 1px solid #31fe27;
|
||
}
|
||
|
||
.simple-btn {
|
||
display: inline-block;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 16px;
|
||
color: #32fde3;
|
||
font-size: 14px;
|
||
padding: 0 18px;
|
||
background: transparent;
|
||
border: 1px solid #32fde3;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.grow {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.common-basic-info {}
|
||
|
||
.person-cert {
|
||
right: 410px;
|
||
top: 0;
|
||
width: 390px;
|
||
max-height: 630px;
|
||
border-radius: 4px;
|
||
padding: 0 20px 20px;
|
||
position: absolute;
|
||
background: rgba(24, 36, 51, .7);
|
||
.basic-head {
|
||
position: relative;
|
||
margin-bottom: 16px;
|
||
.header-tab {
|
||
width: 160px;
|
||
}
|
||
}
|
||
|
||
.basic-info {
|
||
min-height: 400px;
|
||
.info-item {
|
||
font-size: 14px;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-item-name {
|
||
color: #fff;
|
||
font-weight: 400;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.info-item-info {
|
||
color: #fff;
|
||
font-weight: 500;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right_arrow:before {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
right: -15px;
|
||
top: 14px;
|
||
width: 15px;
|
||
height: 17px;
|
||
transform: rotate(180deg);
|
||
background: url(/public/img/left_arrow.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.el-dialog__wrapper {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
overflow: auto;
|
||
margin: 0;
|
||
|
||
.el-dialog {
|
||
top: 50%;
|
||
margin-top: 0 !important;
|
||
transform: translateY(-50%);
|
||
background: rgba(24, 36, 51, .7);
|
||
|
||
.el-dialog__header {
|
||
padding: 0;
|
||
height: 44px;
|
||
line-height: 44px;
|
||
background-size: 250px 70px;
|
||
text-align: center;
|
||
}
|
||
|
||
.el-dialog__title {
|
||
color: #fff;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.el-dialog__headerbtn {
|
||
top: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-cockpit {
|
||
.cockpit-count {
|
||
.count-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 10px;
|
||
|
||
.count-list-item {
|
||
width: 25%;
|
||
height: 50%;
|
||
display: flex;
|
||
|
||
.item-img {
|
||
width: 50px;
|
||
height: 50px;
|
||
position: relative;
|
||
margin-right: 5px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.item-img:after {
|
||
content: "";
|
||
width: 38px;
|
||
height: 38px;
|
||
position: absolute;
|
||
left: 7px;
|
||
top: 7px;
|
||
background: url(/public/img/rotate_line.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
-webkit-animation: rotate 4s linear infinite;
|
||
animation: rotate 4s linear infinite;
|
||
}
|
||
|
||
.item-img1 {
|
||
background: url(/public/img/icon_wlry.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.item-img2 {
|
||
background: url(/public/img/icon_nbyg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.item-img3 {
|
||
background: url(/public/img/icon_cbs.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.item-img4 {
|
||
background: url(/public/img/icon_nbcl.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.item-info {
|
||
.normal {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
}
|
||
|
||
.large {
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.simple-title {
|
||
.countTypeWrap {
|
||
font-size: 14px;
|
||
|
||
span {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.activeCount {
|
||
display: inline-block;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 16px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
padding: 0 18px;
|
||
border: 1px solid #32fde3;
|
||
background: #007767;
|
||
box-shadow: inset 0 0 8px #5aecf0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.cockpit-alarm {
|
||
.alarm-bell {
|
||
padding: 0 18px 0 32px;
|
||
position: relative;
|
||
color: #fff;
|
||
}
|
||
|
||
.alarm-bell:after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 12px;
|
||
top: 8px;
|
||
width: 14px;
|
||
height: 16px;
|
||
background: url(/public/img/bell.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.alarm-bell.danger {
|
||
border: 1px solid #ffc679;
|
||
background: #dd8000;
|
||
box-shadow: inset 0 0 8px #fda732;
|
||
}
|
||
|
||
.alarm-bell.danger:hover {
|
||
box-shadow: 0 0 8px #fda732, inset 0 0 8px #fda732;
|
||
}
|
||
|
||
.alarm-content {
|
||
// display: flex;
|
||
justify-content: space-between;
|
||
height: calc(100% - 50px);
|
||
.alarm-danger {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: url(/public/img/a_danger.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.content-left {
|
||
width: 160px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.alarm-danger {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: url(/public/img/a_danger.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.content-right {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
height: fit-content;
|
||
|
||
.alarm-item {
|
||
min-width: 50%;
|
||
height: 26px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
padding-left: 8px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
float: left;
|
||
|
||
.item-name {
|
||
margin-right: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.item-number {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.item-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.alarm-item-danger {
|
||
color: #fda732;
|
||
|
||
.item-icon {
|
||
background: url(/public/img/r_danger.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.alarm-item-safe {
|
||
color: #fff;
|
||
|
||
.item-icon {
|
||
background: url(/public/img/r_safe.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cockpit-info {
|
||
.header-tab {
|
||
width: 210px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-ctrl {
|
||
.screen-filter {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
|
||
.filter-content {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(24, 36, 51, .5);
|
||
border-radius: 20px;
|
||
|
||
.filter-ctrl {
|
||
width: 420px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
background: transparent;
|
||
overflow: hidden;
|
||
padding: 0 20px;
|
||
z-index: 8;
|
||
transition: all .5s linear;
|
||
|
||
.screen-check-content {
|
||
margin-right: 16px;
|
||
}
|
||
}
|
||
|
||
.caret-dropdown {
|
||
color: #fff;
|
||
}
|
||
|
||
.drop-content {
|
||
position: absolute;
|
||
right: 50px;
|
||
top: 44px;
|
||
padding: 4px;
|
||
box-shadow: inset 0 0 4px #2cedff;
|
||
background: rgba(24, 36, 51, .8);
|
||
border-radius: 4px;
|
||
transition: .5s;
|
||
z-index: 10;
|
||
max-height: 50vh;
|
||
overflow-y: scroll;
|
||
.drop-content-item {
|
||
color: #fff;
|
||
position: relative;
|
||
width: 110px;
|
||
font-size: 13px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.drop-content-item.active {
|
||
color: rgba(44, 237, 255, .8);
|
||
background-color: rgba(24, 36, 51, .3);
|
||
}
|
||
|
||
.drop-content-item:hover {
|
||
color: rgba(44, 237, 255, .8);
|
||
background-color: rgba(24, 36, 51, .3);
|
||
}
|
||
|
||
}
|
||
|
||
.filter-action {
|
||
width: 56px;
|
||
height: 40px;
|
||
padding: 0 18px;
|
||
background: rgba(24, 36, 51, .7);
|
||
border-radius: 20px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
z-index: 2;
|
||
|
||
.action-shrink {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: url(/public/img/shrink.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
transition: all .5s linear;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.action-shrink.shrink-hidden {
|
||
transform: rotate(0deg);
|
||
background: url(/public/img/shrink.png) no-repeat;
|
||
}
|
||
|
||
.roam-play {
|
||
background: url(/public/img/play.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.roam-pause {
|
||
background: url(/public/img/pause.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.action-roam {
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.filter-action.showroam {
|
||
width: 96px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-search {
|
||
position: absolute;
|
||
top: 54px;
|
||
right: 0;
|
||
|
||
.search-content {
|
||
padding: 5px;
|
||
background: rgba(24, 36, 51, .5);
|
||
border-radius: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
input {
|
||
width: 0;
|
||
height: 30px;
|
||
font-size: 13px;
|
||
outline: none;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
background: transparent;
|
||
color: #fff;
|
||
transition: all .5s linear;
|
||
opacity: 0;
|
||
}
|
||
|
||
.input-focus {
|
||
width: 250px;
|
||
opacity: 1;
|
||
padding: 0 20px 0 12px;
|
||
}
|
||
|
||
.close-btn {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 50px;
|
||
width: 8px;
|
||
height: 8px;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
}
|
||
|
||
.search {
|
||
margin: auto;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #5bde0b;
|
||
border-radius: 50%;
|
||
transition: all 1s;
|
||
position: relative;
|
||
}
|
||
|
||
.search:after {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
width: 13px;
|
||
height: 13px;
|
||
background: url(/public/img/search.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.auto-suggestion {
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 46px;
|
||
background: rgba(24, 36, 51, .8);
|
||
|
||
.suggestion-select-ul {
|
||
padding: 4px;
|
||
max-height: 350px;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-tab {
|
||
.screen-tab-content {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tab-menu-item {
|
||
width: 150px;
|
||
height: 80px;
|
||
text-align: center;
|
||
margin: 0 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tab-menu-text {
|
||
height: 80px;
|
||
line-height: 80px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #2cedff;
|
||
}
|
||
|
||
.tab-menu {
|
||
background: url(/public/img/menu.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.tab-menu-active {
|
||
background: url(/public/img/menu_active.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.tab-menu-text {
|
||
font-weight: 700;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-main {
|
||
.header-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.tab-item {
|
||
padding: 0 4px;
|
||
text-align: center;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tab-item-active {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tab-item-active:after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -2px;
|
||
height: 5px;
|
||
width: 100%;
|
||
background: linear-gradient(90deg, rgba(48, 255, 221, 0), rgba(48, 255, 221, .8) 50%, rgba(48, 255, 221, 0));
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-main {
|
||
.icon-close {
|
||
width: 14px;
|
||
height: 14px;
|
||
background: url(/public/img/close.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.simple-btn-bg {
|
||
display: inline-block;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 16px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
padding: 0 18px;
|
||
border: 1px solid #32fde3;
|
||
background: #007767;
|
||
box-shadow: inset 0 0 8px #5aecf0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.simple-btn-bg:hover {
|
||
box-shadow: 0 0 8px #5aecf0, inset 0 0 8px #5aecf0;
|
||
}
|
||
|
||
.screen-check-content {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 40px;
|
||
|
||
.box-btn {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 6px;
|
||
cursor: pointer;
|
||
border: 1px solid #5bde0b;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.box-text {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
color: #fff;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.box-check {
|
||
background: url(/public/img/check.png) no-repeat 100% 100% !important;
|
||
}
|
||
}
|
||
|
||
.noData {
|
||
width: 100%;
|
||
height: 300px;
|
||
|
||
img {
|
||
margin: 50px auto;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.alarm-detail-info {
|
||
position: absolute;
|
||
left: 480px;
|
||
top: -73px;
|
||
width: 390px;
|
||
background: rgba(24, 36, 51, .7);
|
||
border-radius: 4px;
|
||
padding: 0 12px 0 12px;
|
||
z-index: 20;
|
||
.action-group {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 20px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.detail-text-btn {
|
||
cursor: pointer;
|
||
color: #30ffdd;
|
||
font-size: 12px;
|
||
position: relative;
|
||
padding-right: 12px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.detail-content {
|
||
position: relative;
|
||
|
||
.content-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
.head-select {
|
||
width: calc(100% - 60px);
|
||
}
|
||
|
||
.head-sound {
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.sound-ring {
|
||
background: url(/public/img/b_ring.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.sound-quiet {
|
||
background: url(/public/img/b_quiet.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
}
|
||
|
||
.content-body {
|
||
min-height: 200px;
|
||
max-height: calc(60vh - 120px);
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
// margin-top: 10px;
|
||
|
||
.alarm-item {
|
||
display: flex;
|
||
|
||
.item-type {
|
||
width: 40px;
|
||
height: 45px;
|
||
background: url(/public/img/alarm_bg.png) 50% no-repeat;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.item-content {
|
||
margin-left: 14px;
|
||
padding: 10px 0 10px 10px;
|
||
color: #fff;
|
||
width: calc(100% - 56px);
|
||
font-size: 14px;
|
||
border-left: 1px dashed rgba(225, 255, 255, .3);
|
||
position: relative;
|
||
|
||
.item-content-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
|
||
.time {
|
||
color: #fff;
|
||
}
|
||
|
||
.status {
|
||
color: #fd8018;
|
||
}
|
||
}
|
||
|
||
.item-content-middle {
|
||
.alarm-info {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-content:before {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: -7px;
|
||
top: 12px;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: url(/public/img/round.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-footer {
|
||
text-align: center;
|
||
|
||
.btn-prev {
|
||
color: #fff;
|
||
background: transparent;
|
||
|
||
.el-icon {
|
||
display: block;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.btn-next {
|
||
color: #fff;
|
||
background: transparent;
|
||
|
||
.el-icon {
|
||
display: block;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.el-pagination {
|
||
white-space: nowrap;
|
||
padding: 2px 5px;
|
||
color: #ffffff;
|
||
font-weight: 700;
|
||
|
||
button {
|
||
border: none;
|
||
padding: 0 6px;
|
||
display: inline-block;
|
||
font-size: 13px;
|
||
min-width: 35.5px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
vertical-align: top;
|
||
box-sizing: border-box;
|
||
background: rgba(255, 255, 255, 0) !important;
|
||
}
|
||
|
||
.btn-prev {
|
||
background: rgba(255, 255, 255, 0) !important;
|
||
}
|
||
|
||
.el-pager {
|
||
vertical-align: top;
|
||
margin: 0;
|
||
display: inline-block;
|
||
background: rgba(255, 255, 255, 0) !important;
|
||
|
||
li {
|
||
vertical-align: top;
|
||
margin: 0;
|
||
display: inline-block;
|
||
padding: 0 4px;
|
||
font-size: 13px;
|
||
min-width: 35.5px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
background: rgba(255, 255, 255, 0) !important;
|
||
}
|
||
}
|
||
|
||
.btn-next {
|
||
padding-left: 12px;
|
||
cursor: pointer;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-loading-mask {
|
||
position: absolute;
|
||
z-index: 2000;
|
||
background-color: hsla(0, 0%, 100%, .9);
|
||
margin: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
transition: opacity .3s;
|
||
|
||
.el-loading-spinner {
|
||
top: 50%;
|
||
margin-top: -21px;
|
||
width: 100%;
|
||
text-align: center;
|
||
position: absolute;
|
||
|
||
.el-loading-spinner i {
|
||
color: #409eff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-main .left_arrow:before,
|
||
.screen-main .left_middle_arrow:before {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
left: -15px;
|
||
width: 15px;
|
||
height: 17px;
|
||
/*background: url(/public/img/left_arrow.png) no-repeat;*/
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.areaNavItem {
|
||
color: #ffffff;
|
||
padding: 8px 16px;
|
||
border-radius: 15px;
|
||
}
|
||
.areaActive {
|
||
border: 1px solid #32fde3;
|
||
background: #007767;
|
||
box-shadow: inset 0 0 8px #5aecf0;
|
||
}
|
||
|
||
[class*=" el-icon-"],
|
||
[class^=el-icon-] {
|
||
font-family: element-icons !important;
|
||
speak: none;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-variant: normal;
|
||
text-transform: none;
|
||
line-height: 1;
|
||
vertical-align: baseline;
|
||
display: inline-block;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
.el-dialog__headerbtn {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
padding: 0;
|
||
background: 0 0;
|
||
border: none;
|
||
outline: 0;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.item-textarea {
|
||
width: 250px;
|
||
}
|
||
|
||
.item-textarea>.el-textarea__inner {
|
||
resize: none;
|
||
width: 100%;
|
||
height: 70px;
|
||
margin-top: 8px;
|
||
outline: none;
|
||
color: #fff;
|
||
background: hsla(0, 0%, 100%, .26);
|
||
border: 1px solid hsla(0, 0%, 100%, .5);
|
||
}
|
||
|
||
#mapContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #49a1ff;
|
||
}
|
||
|
||
#bigScreenUserTable {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.bigScreenTable.el-table {
|
||
background-color: rgba(255, 255, 255, 0);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.bigScreenTable.el-table thead {
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
.bigScreenTable.el-table tr {
|
||
background-color: rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
.bigScreenTable.el-table .el-table__body-wrapper {
|
||
background-color: rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
.bigScreenTable.el-table th.el-table__cell {
|
||
background-color: rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
.bigScreenTable.el-table td.el-table__cell,
|
||
.bigScreenTable.el-table th.el-table__cell.is-leaf {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.bigScreenTable.el-table .el-table__body tr:hover>td.el-table__cell {
|
||
background-color: rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
.bigScreenTable.el-table .el-table__body tr.current-row>td.el-table__cell {
|
||
background-color: rgba(255, 255, 255, .1);
|
||
}
|
||
#audio{
|
||
position: fixed;
|
||
opacity: 0;
|
||
}
|
||
#eventScrenWrap{
|
||
height:50px;
|
||
width: calc(100% - 50px);
|
||
overflow:hidden;
|
||
padding-left: 20px;
|
||
position: relative;
|
||
}
|
||
#eventScrenItem{
|
||
line-height: 50px;
|
||
font-size: 20px;
|
||
color: cyan;
|
||
position: absolute;
|
||
}
|
||
#bigScreeWrap{
|
||
position: fixed;
|
||
z-index: 9999;
|
||
top: 0;
|
||
display: none;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
text-align: center;
|
||
background-color: rgba(0,0,0,0.8);
|
||
padding: 40px 20px 20px 20px;
|
||
}
|
||
.bigScreeImg{
|
||
width: 20px;
|
||
height: 20px;
|
||
background-color: red;
|
||
}
|
||
.bigScreeClose{
|
||
width: 20px;
|
||
height: 20px;
|
||
top: 10px;
|
||
right: 10px;
|
||
position: absolute;
|
||
background: url(/public/img/close.png) no-repeat;
|
||
}
|
||
#videoElement{
|
||
width: auto;
|
||
height: 60vh;
|
||
}
|
||
</style>
|