人员管控
This commit is contained in:
parent
95e64fc0e2
commit
daf7b411de
|
|
@ -42,4 +42,13 @@ export function checkConfig(data) {
|
|||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
/* 人员树选中班组触发的接口 */
|
||||
export function getPersonsInfo(query) {
|
||||
return request({
|
||||
url: '/bracelet/consControl/getPersonsInfo',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 277 B |
Binary file not shown.
|
After Width: | Height: | Size: 548 B |
Binary file not shown.
|
After Width: | Height: | Size: 325 B |
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
Binary file not shown.
|
After Width: | Height: | Size: 1010 B |
Binary file not shown.
|
After Width: | Height: | Size: 576 B |
Binary file not shown.
|
After Width: | Height: | Size: 400 B |
Binary file not shown.
|
After Width: | Height: | Size: 617 B |
Binary file not shown.
|
After Width: | Height: | Size: 622 B |
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
Binary file not shown.
|
After Width: | Height: | Size: 278 B |
Binary file not shown.
|
After Width: | Height: | Size: 672 B |
Binary file not shown.
|
After Width: | Height: | Size: 588 B |
Binary file not shown.
|
After Width: | Height: | Size: 546 B |
Binary file not shown.
|
After Width: | Height: | Size: 951 B |
Binary file not shown.
|
After Width: | Height: | Size: 489 B |
Binary file not shown.
|
After Width: | Height: | Size: 645 B |
Binary file not shown.
|
After Width: | Height: | Size: 346 B |
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="11px" height="11px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -315 -251 )">
|
||||
<path d="M 320.5 251 C 323.58 251 326 253.42 326 256.5 C 326 259.58 323.58 262 320.5 262 C 317.42 262 315 259.58 315 256.5 C 315 253.42 317.42 251 320.5 251 Z " fill-rule="nonzero" fill="#1df9fc" stroke="none" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs>
|
||||
<style>.cls-1,.cls-2{opacity:1;}.cls-1{fill:url(#未命名的渐变_7);}.cls-2{fill:url(#未命名的渐变_7-2);}.cls-3{fill:#1DF9FC;}</style>
|
||||
<radialGradient id="未命名的渐变_7" cx="32" cy="32" r="32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1DF9FC" stop-opacity="0"/><stop offset="1" stop-color="#1DF9FC"/></radialGradient>
|
||||
<radialGradient id="未命名的渐变_7-2" cy="32" r="20" xlink:href="#未命名的渐变_7"/></defs><title>涟漪</title>
|
||||
<g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1">
|
||||
<circle class="cls-1" cx="32" cy="32" r="6">
|
||||
<animate attributeName="r" from="6" to="32" begin="0s" dur="2s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" from="1" to="0" begin="0s" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle class="cls-2" cx="32" cy="32" r="6">
|
||||
<animate attributeName="r" from="6" to="32" begin="1s" dur="2s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" from="1" to="0" begin="1s" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle class="cls-3" cx="32" cy="32" r="6"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs>
|
||||
<style>.cls-1,.cls-2{opacity:1;}.cls-1{fill:url(#未命名的渐变_7);}.cls-2{fill:url(#未命名的渐变_7-2);}.cls-3{fill:#F35A4C;}</style>
|
||||
<radialGradient id="未命名的渐变_7" cx="32" cy="32" r="32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#F35A4C" stop-opacity="0"/><stop offset="1" stop-color="#F35A4C"/></radialGradient>
|
||||
<radialGradient id="未命名的渐变_7-2" cy="32" r="20" xlink:href="#未命名的渐变_7"/></defs><title>涟漪</title>
|
||||
<g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1">
|
||||
<circle class="cls-1" cx="32" cy="32" r="6">
|
||||
<animate attributeName="r" from="6" to="32" begin="0s" dur="2s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" from="1" to="0" begin="0s" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle class="cls-2" cx="32" cy="32" r="6">
|
||||
<animate attributeName="r" from="6" to="32" begin="1s" dur="2s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" from="1" to="0" begin="1s" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle class="cls-3" cx="32" cy="32" r="6"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -64,7 +64,7 @@ Vue.use(directive)
|
|||
Vue.use(plugins)
|
||||
Vue.use(VueMeta)
|
||||
Vue.use(BaiduMap, {
|
||||
ak: '' //w9lkX7HeUlFoQRUX74F1RV2uckOQpmnA
|
||||
ak: 'PM43nB8eDNTBrXkQwGrTQFcmOni3Z9nO' //w9lkX7HeUlFoQRUX74F1RV2uckOQpmnA
|
||||
})
|
||||
DictData.install()
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ const cbc_iv = CryptoJS.enc.Utf8.parse('1234567812345678')
|
|||
* 默认参数需要加密
|
||||
* @type {boolean}
|
||||
*/
|
||||
const jia_mi=true;
|
||||
const jia_mi=false;
|
||||
/**
|
||||
* 默认后台会自动加密
|
||||
* @type {boolean}
|
||||
*/
|
||||
const jie_mi=true;
|
||||
const jie_mi=false;
|
||||
/**
|
||||
* 加密
|
||||
* @param word
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="app-container" style="background-color: #F9F9F9;">
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-tab-pane label="实时监控" class="realTimeManage" name="first">
|
||||
<!-- <el-tab-pane label="实时监控" class="realTimeManage" name="first">
|
||||
<realTimeManage/>
|
||||
</el-tab-pane>
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="人员管控" class="personManage" name="second">
|
||||
<personManage/>
|
||||
</el-tab-pane>
|
||||
|
|
@ -16,19 +16,20 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import realTimeManage from './realTimeManage/realTimeManage.vue';
|
||||
// import realTimeManage from './realTimeManage/realTimeManage.vue';
|
||||
import personManage from './personManage/personManage.vue';
|
||||
import hoistManage from './hoistManage/hoistManage.vue';
|
||||
export default {
|
||||
name: "manage",
|
||||
components: {
|
||||
realTimeManage,
|
||||
// realTimeManage,
|
||||
personManage,
|
||||
hoistManage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
// activeName: 'first'
|
||||
activeName: 'second'
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="personManage"
|
||||
style="width: 100%;height: 80vh;background-color: #ffffff;box-shadow: 10px 10px 5px #000000;display: flex;">
|
||||
<div class="personManage">
|
||||
<div class="left">
|
||||
<el-input placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="filterText" maxlength="30"
|
||||
style="margin: 10px 0;"></el-input>
|
||||
|
|
@ -11,51 +10,95 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="title">
|
||||
<div class="layout btn-box">
|
||||
<el-button type="primary" plain icon="el-icon-search" @click="facialSampling">手环人脸验证抽检</el-button>
|
||||
<el-button type="primary" plain icon="el-icon-setting" @click="getCheckConfigDetail">自动验证配置</el-button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<baidu-map map-style-v2="light" class="map" :zoom="zoom" :center="center" @ready="handler">
|
||||
<bm-marker v-for="(item, index) in deviceData" :position="item.position" :dragging="true"
|
||||
:icon="{ url: mapIcon1, size: { width: 24, height: 24 } }" animation="" @click="infoWindowOpen(item)"
|
||||
@mouseover="infoWindowOpen(item)" @mouseout="infoWindowClose(item)">
|
||||
<!-- <bm-label v-if="item.deviceName != ''" :content="item.deviceName" :labelStyle="{color:'red', fontSize: '14px'}" :offset="{width:-20, height:10}"></bm-label> -->
|
||||
<bm-info-window :show="item.show">
|
||||
{{ item.deviceName }}
|
||||
</bm-info-window>
|
||||
</bm-marker>
|
||||
|
||||
<bm-circle :center="circleRange.center" @click="infoWindowClose" :radius="circleRange.radius"
|
||||
stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" @lineupdate="updateCirclePath"
|
||||
:editing="true"></bm-circle>
|
||||
|
||||
</baidu-map>
|
||||
<div id="searchBox" class="layout" v-if="isShowHistoryGj">
|
||||
<el-button type="primary" plain @click="clsoeHistoryGj" style="margin-right: 10px;">返回</el-button>
|
||||
<el-date-picker v-model="chooseDate" @change="loadGj" :editable="false" :clearable="false" type="date"
|
||||
format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<baidu-map map-style-v2="light" class="map" :zoom="zoom" :center="center" @ready="handler"></baidu-map>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title" style="float: left;text-indent: 10px;">
|
||||
<div style="color: #3E5469;font-size: 12px;margin-top: 4%;">
|
||||
今日施工班组{{ buildData.teamNum }}个
|
||||
</div>
|
||||
<div style="color: #3E5469;font-size: 12px;margin-top: 2%;">
|
||||
今日施工人数{{ buildData.personNum }}人
|
||||
</div>
|
||||
<!-- 杆塔 -->
|
||||
<div id="tower-box" class="layout" v-if="isTower">
|
||||
<div>今日施工班组 <span>{{ person.workTeamNum }}</span> 个</div>
|
||||
<div>今日施工人数 <span>{{ person.workPersonNum }}</span> 人</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="title" style="color: #3E5469;font-size: 1px;font-weight: 600;text-indent: 10px;">
|
||||
智能安全帽
|
||||
<!-- 班组 -->
|
||||
<div id="team-box" v-if="isTeam">
|
||||
<h4>智能安全帽</h4>
|
||||
<el-table :data="hatTable" style="width: 100%" max-height="400">
|
||||
<el-table-column prop="name" label="姓名" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="devName" label="设备名称" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<img style="cursor: pointer;margin-right: 10px;" title="对讲" src="../../../../assets/person_img/talk.png">
|
||||
<img style="cursor: pointer;" title="视频" src="../../../../assets/person_img/video.png">
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 人员 -->
|
||||
<div id="person-box" v-if="isPerson">
|
||||
<div id="person-info" class="layout">
|
||||
<div class="layout">
|
||||
<div class="layout"><img src="../../../../assets/person_img/person.png">{{ person.name }}</div>
|
||||
<div><el-tag :type="person.warnType">{{ person.warnName }}</el-tag></div>
|
||||
</div>
|
||||
<div class="layout"><img src="../../../../assets/person_img/team2.png">{{ person.teamName }}</div>
|
||||
<div class="layout"><img src="../../../../assets/person_img/phone.png">{{ person.phone }}</div>
|
||||
<div class="layout"><img src="../../../../assets/person_img/idCard.png">{{ person.idCard }}</div>
|
||||
</div>
|
||||
<div class="table" style="margin-top: 2%;">
|
||||
<el-table :data="tableData" style="width: 100%" :show-header="false">
|
||||
<el-table-column prop="username" label="人员姓名" />
|
||||
<el-table-column prop="deviceName" label="设备名称" />
|
||||
<el-table-column prop="warnContent" label="操作">
|
||||
<template #default="scope">
|
||||
<!-- <div>{{ scope.row.username }}</div> -->
|
||||
<img src="../../../../assets/images/mike.png" style="width: 20px;height: 20px;cursor: pointer;">
|
||||
<img src="../../../../assets/images/camera.png" style="width: 20px;height: 20px;cursor: pointer;">
|
||||
</template>
|
||||
<div id="sh-info" class="layout">
|
||||
<div class="layout">
|
||||
<div class="layout"><img src="../../../../assets/person_img/sh.png">{{ person.sh.name }}</div>
|
||||
<div class="layout info" v-if="person.sh.elec >= 10">
|
||||
<img width="30px" height="16px" src="../../../../assets/person_img/elec.png">
|
||||
{{ person.sh.elec }}%
|
||||
</div>
|
||||
<div class="layout info" v-if="person.sh.elec < 10"><img width="30px" height="16px"
|
||||
src="../../../../assets/person_img/elec_warn.png">{{ person.sh.elec }}%</div>
|
||||
<div class="layout info2"><img @click="openHistoryGj(person.sh.devId)"
|
||||
src="../../../../assets/person_img/dw.png" title="历史轨迹"></div>
|
||||
</div>
|
||||
<div class="layout">
|
||||
<div class="layout" v-if="person.sh.isWarn == 0"><img
|
||||
src="../../../../assets/person_img/position_nowarn.png">正常
|
||||
</div>
|
||||
<div class="layout info" v-if="person.sh.isWarn == 1"><img
|
||||
src="../../../../assets/person_img/position_warn.png">异常</div>
|
||||
<div class="layout info"><img src="../../../../assets/person_img/temp.png">{{ person.sh.temp }}</div>
|
||||
</div>
|
||||
<div class="layout">
|
||||
<div class="layout"><img src="../../../../assets/person_img/heartRate.png">{{ person.sh.heartRate }}
|
||||
</div>
|
||||
<div class="layout info"><img src="../../../../assets/person_img/bloodPressure.png">{{
|
||||
person.sh.bloodPressure }}</div>
|
||||
</div>
|
||||
<div class="layout" v-if="person.hasSafetyHat">
|
||||
<div class="layout"><img src="../../../../assets/person_img/hat.png">{{ person.hat.name }}
|
||||
</div>
|
||||
<div class="layout info2"><img src="../../../../assets/person_img/talk.png" title="对讲"></div>
|
||||
<div class="layout info2"><img src="../../../../assets/person_img/video.png" title="播放"></div>
|
||||
</div>
|
||||
<div class="layout">
|
||||
<div class="layout"><img src="../../../../assets/person_img/mj.png">{{ person.sh.mjCode }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="warn-info">
|
||||
<h4>违章记录</h4>
|
||||
<el-table :data="warnTable" style="width: 100%" max-height="400">
|
||||
<el-table-column prop="warnTime" label="违章时间" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="warnContent" label="违章内容" align="center">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
|
@ -126,7 +169,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { personsTree, teamPersonByTower, spotCheck, getCheckConfig, checkConfig } from "@/api/construction/manage/personManage.js";
|
||||
import { personsTree, teamPersonByTower, spotCheck, getCheckConfig, checkConfig, getPersonsInfo } from "@/api/construction/manage/personManage.js";
|
||||
import no_warn from "@/assets/svg/no_warn.svg";
|
||||
import no_warn2 from "@/assets/svg/no_warn2.svg";
|
||||
import warn from "@/assets/svg/warn.svg";
|
||||
import start from "@/assets/person_img/start.png";
|
||||
import end from "@/assets/person_img/end.png";
|
||||
export default {
|
||||
name: 'personManage',
|
||||
/* 人员树前端筛选 */
|
||||
|
|
@ -165,14 +213,7 @@ export default {
|
|||
timeNum: 1
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
/* teamId: [
|
||||
{ required: true, message: "请选择领用班组", trigger: "blur" }
|
||||
],
|
||||
powerId: [
|
||||
{ required: true, message: "请选择作业杆塔编号", trigger: "blur" }
|
||||
], */
|
||||
},
|
||||
rules: {},
|
||||
//记录设备位置数据
|
||||
deviceData: [
|
||||
{ "position": { lng: 116.404, lat: 39.915 }, "deviceName": "设备11", show: false, },
|
||||
|
|
@ -180,58 +221,148 @@ export default {
|
|||
{ "position": { lng: 116.404, lat: 39.916 }, "deviceName": "设备33", show: false, },
|
||||
{ "position": { lng: 116.404, lat: 39.917 }, "deviceName": "设备44", show: false, },
|
||||
],
|
||||
//范围数据记录
|
||||
map: null,
|
||||
BMap: null,
|
||||
// 作业杆塔
|
||||
circleRange: {
|
||||
//中心点
|
||||
center: {
|
||||
lng: 116.404,
|
||||
lat: 39.915
|
||||
lng: 117.287800,
|
||||
lat: 31.255550
|
||||
},
|
||||
//半径 米
|
||||
radius: 500
|
||||
radius: 50
|
||||
},
|
||||
//记录信息窗口数据
|
||||
infoWindow: {
|
||||
//窗体是否展示
|
||||
show: false,
|
||||
},
|
||||
//记录坐标点的图表样式1
|
||||
mapIcon1: require("../../../../assets/images/greenDrop.png"),
|
||||
//记录坐标点的图表样式2
|
||||
mapIcon2: require("../../../../assets/images/redDrop.png"),
|
||||
//设置地图中心点
|
||||
center: { lng: 0, lat: 0 },
|
||||
center: { lng: 117.287800, lat: 31.255550 },
|
||||
//设置缩放
|
||||
zoom: 15,
|
||||
zoom: 20,
|
||||
//搜索框数据
|
||||
keyword: '',
|
||||
//保存树的数据
|
||||
treeData: [],
|
||||
|
||||
//保存施工班组数与施工人数
|
||||
buildData: {
|
||||
teamNum: '5',
|
||||
personNum: '30'
|
||||
}
|
||||
// 日期
|
||||
chooseDate: this.getTodayDate(),
|
||||
// 班组ID
|
||||
teamId: null,
|
||||
// 杆塔ID
|
||||
id: null,
|
||||
// 人员树选中是否是杆塔
|
||||
isTower: false,
|
||||
// 人员树选中是否是班组
|
||||
isTeam: false,
|
||||
// 人员树选中是否是班组人员
|
||||
isPerson: false,
|
||||
isShowHistoryGj: false,
|
||||
// 轨迹定位数组
|
||||
gjArr: [
|
||||
{ lon: 117.287800, lat: 31.255550 },
|
||||
{ lon: 117.287450, lat: 31.255650 },
|
||||
{ lon: 117.287700, lat: 31.255750 },
|
||||
{ lon: 117.287650, lat: 31.255850 },
|
||||
],
|
||||
person: {
|
||||
name: '张三',
|
||||
phone: '18855798259',
|
||||
teamName: '张三班组',
|
||||
idCard: '341181199807165636',
|
||||
warnName: '离开工作区域',
|
||||
warnType: 'danger',
|
||||
hasSafetyHat: true,
|
||||
sh: {
|
||||
devId: 37,
|
||||
name: '1号手环',
|
||||
elec: 10,
|
||||
isWarn: 0,
|
||||
temp: '37℃',
|
||||
heartRate: '80次/分',
|
||||
bloodPressure: '150/80mmHg',
|
||||
mjCode: '1号马甲'
|
||||
},
|
||||
hat: {
|
||||
name: '1号安全帽',
|
||||
},
|
||||
workTeamNum: 5,
|
||||
workPersonNum: 30
|
||||
},
|
||||
// 预警表格
|
||||
warnTable: [
|
||||
{
|
||||
warnTime: '2024-08-15 11:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 12:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 13:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 11:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 12:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 13:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 11:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 12:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 13:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 11:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 12:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 13:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 11:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 12:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
{
|
||||
warnTime: '2024-08-15 13:32:12',
|
||||
warnContent: '离开工作区域'
|
||||
},
|
||||
],
|
||||
//保存表格数据
|
||||
, tableData: [
|
||||
hatTable: [
|
||||
{
|
||||
username: '张三',
|
||||
deviceName: '1号智能安全帽'
|
||||
name: '张三',
|
||||
devName: '1号智能安全帽'
|
||||
},
|
||||
{
|
||||
username: '张xx',
|
||||
deviceName: 'xxxxxxxxxx'
|
||||
},
|
||||
{
|
||||
username: '张xx',
|
||||
deviceName: 'xxxxxxxxxx'
|
||||
},
|
||||
{
|
||||
username: '张xx',
|
||||
deviceName: 'xxxxxxxxxx'
|
||||
},
|
||||
|
||||
name: '张三',
|
||||
devName: '1号智能安全帽'
|
||||
}
|
||||
],
|
||||
|
||||
//保存对话框隐藏展示
|
||||
|
|
@ -253,6 +384,12 @@ export default {
|
|||
this.getPersonsTree();
|
||||
},
|
||||
methods: {
|
||||
// 当前日期
|
||||
getTodayDate() {
|
||||
const today = new Date();
|
||||
let date = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
|
||||
return date;
|
||||
},
|
||||
/* 加载人员树 */
|
||||
getPersonsTree() {
|
||||
personsTree().then(res => {
|
||||
|
|
@ -409,38 +546,193 @@ export default {
|
|||
// 关闭自动验证配置
|
||||
closeTimeConfig() {
|
||||
this.form.times = [];
|
||||
this.form.timeNum = 1;
|
||||
this.dialogVisible2 = false
|
||||
},
|
||||
// 获取班组下的人员定位及杆塔坐标
|
||||
laodPersonsInfo(params) {
|
||||
getPersonsInfo(params).then((res) => {
|
||||
const data = res.data;
|
||||
if (data) {
|
||||
const lon = data.towerInfo.lon;
|
||||
const lat = data.towerInfo.lat;
|
||||
this.circleRange.center.lng = lon;
|
||||
this.circleRange.center.lat = lat;
|
||||
this.circleRange.radius = data.distance
|
||||
// 根据杆塔坐标 重新定义中心点 并绘制施工半径
|
||||
const point = new BMap.Point(lon, lat);
|
||||
this.map.centerAndZoom(point, this.zoom);
|
||||
const circle = new BMap.Circle(point, this.circleRange.radius, {
|
||||
strokeColor: "red",
|
||||
strokeWeight: 2,
|
||||
strokeOpacity: 1,
|
||||
fillOpacity: 0.1
|
||||
});
|
||||
circle.id = "circle";
|
||||
this.map.addOverlay(circle);
|
||||
// 添加施工人员覆盖物
|
||||
const personList = data.personList;
|
||||
if (personList && personList.length > 0) {
|
||||
for (let index = 0; index < personList.length; index++) {
|
||||
let item = personList[index];
|
||||
if (item.lon && item.lat) {
|
||||
this.addPersonMarker(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch((res) => { })
|
||||
},
|
||||
handler({ BMap, map }) {
|
||||
console.log(BMap, map);
|
||||
this.center.lng = 116.404;
|
||||
this.center.lat = 39.915;
|
||||
this.zoom = 15;
|
||||
|
||||
this.BMap = BMap;
|
||||
this.map = map;
|
||||
// 缩放
|
||||
map.enableScrollWheelZoom(true);
|
||||
|
||||
//设置地图风格
|
||||
let mapStyle = { style: 'midnight' }
|
||||
map.setMapStyle(mapStyle)
|
||||
// map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
|
||||
map.setMapType(BMAP_NORMAL_MAP); //普通地图
|
||||
// map.setMapType(BMAP_HYBRID_MAP); //混合地图
|
||||
// map.setMapType(BMAP_SATELLITE_MAP); //卫星地图
|
||||
},
|
||||
//人员树组件节点点击
|
||||
handleNodeClick(data, node, item) {
|
||||
this.towerId = undefined;
|
||||
if (node.level === 2) {
|
||||
this.removeOverlay();
|
||||
// 选中杆塔赋值towerId,用于手环人员验证抽检
|
||||
this.towerId = parseInt(data.id.replace('tower-', ''));
|
||||
} else if ((node.level === 3 && node.expanded) || node.level === 4) {
|
||||
// 选中班组层级并且展开 或者 人员 触发事件
|
||||
console.log(data);
|
||||
console.log(node);
|
||||
this.isTower = true;
|
||||
this.isTeam = false;
|
||||
this.isPerson = false;
|
||||
} else if ((node.level === 3)) {
|
||||
// 选中班组层级 触发事件 id:杆塔ID teamId:班组ID
|
||||
this.isTower = false;
|
||||
this.isTeam = true;
|
||||
this.isPerson = false;
|
||||
this.removeOverlay();
|
||||
const teamId = parseInt(data.id.replace('team-', ''));
|
||||
const towerId = parseInt(data.parentId.replace('tower-', ''));
|
||||
this.teamId = teamId;
|
||||
this.id = towerId;
|
||||
const obj = {
|
||||
'id': towerId,
|
||||
'teamId': teamId
|
||||
}
|
||||
this.laodPersonsInfo(obj);
|
||||
} else if (node.level === 4) {
|
||||
this.isTower = false;
|
||||
this.isTeam = false;
|
||||
this.isPerson = true;
|
||||
// 选中班组人员 触发事件
|
||||
this.clickMarker(data);
|
||||
} else {
|
||||
this.isTower = false;
|
||||
this.isTeam = false;
|
||||
this.isPerson = false;
|
||||
this.removeOverlay();
|
||||
}
|
||||
},
|
||||
//给梳妆街头不同层级设置不同的icon
|
||||
// 清除百度地图覆盖物
|
||||
removeOverlay() {
|
||||
this.map.clearOverlays();
|
||||
},
|
||||
// 检查overlay是否是Marker的实例
|
||||
isOverlayPoint(overlay) {
|
||||
return overlay instanceof BMap.Marker;
|
||||
},
|
||||
// 点击地图人员覆盖物触发的事件
|
||||
clickMarker(item) {
|
||||
const allOverlay = this.map.getOverlays();
|
||||
for (let index = 0; index < allOverlay.length; index++) {
|
||||
let overlay = allOverlay[index];
|
||||
const flag = this.isOverlayPoint(overlay);
|
||||
// 清除点选中的样式
|
||||
if (flag && overlay.isWarn === 0) {
|
||||
let myIcon = new BMap.Icon(no_warn, new BMap.Size(11, 11))
|
||||
myIcon.setImageSize(new BMap.Size(11, 11));
|
||||
overlay.setIcon(myIcon);
|
||||
}
|
||||
}
|
||||
for (let index = 0; index < allOverlay.length; index++) {
|
||||
let overlay = allOverlay[index];
|
||||
// 判断是否是点的覆盖物
|
||||
const flag = this.isOverlayPoint(overlay);
|
||||
if (flag && ("marker-" + item.type + '-' + item.id === overlay.id) && item.isWarn === 0) {
|
||||
let myIcon = new BMap.Icon(no_warn2, new BMap.Size(50, 50))
|
||||
myIcon.setImageSize(new BMap.Size(50, 50));
|
||||
overlay.setIcon(myIcon);
|
||||
}
|
||||
}
|
||||
this.isTower = false;
|
||||
this.isTeam = false;
|
||||
this.isPerson = true;
|
||||
},
|
||||
/* 添加人员定位的覆盖物 */
|
||||
addPersonMarker(item) {
|
||||
console.log(item);
|
||||
let point = new BMap.Point(item.lon, item.lat)
|
||||
let marker = "", myIcon = "";
|
||||
if (item.isWarn === 0) {
|
||||
// 无告警
|
||||
myIcon = new BMap.Icon(no_warn, new BMap.Size(11, 11))
|
||||
myIcon.setImageSize(new BMap.Size(11, 11));
|
||||
} else {
|
||||
// 告警
|
||||
myIcon = new BMap.Icon(warn, new BMap.Size(50, 50))
|
||||
myIcon.setImageSize(new BMap.Size(50, 50));
|
||||
}
|
||||
marker = new BMap.Marker(point, { icon: myIcon });
|
||||
// 设置点的唯一标识 人员类型 + 人员ID / 是否告警
|
||||
marker.id = "marker-" + item.type + '-' + item.id;
|
||||
marker.isWarn = item.isWarn;
|
||||
this.map.addOverlay(marker);
|
||||
// 添加监听事件
|
||||
marker.addEventListener("click", () => { this.clickMarker(item) });
|
||||
},
|
||||
// 人员绑定手环历史轨迹
|
||||
openHistoryGj(devId) {
|
||||
this.removeOverlay();
|
||||
this.isShowHistoryGj = true;
|
||||
this.loadGj(this.chooseDate);
|
||||
},
|
||||
// 关闭历史轨迹
|
||||
clsoeHistoryGj(devId) {
|
||||
this.removeOverlay();
|
||||
this.isShowHistoryGj = false;
|
||||
const obj = {
|
||||
'id': this.id,
|
||||
'teamId': this.teamId
|
||||
}
|
||||
this.laodPersonsInfo(obj);
|
||||
},
|
||||
// 获取人员运动轨迹
|
||||
loadGj(val) {
|
||||
this.removeOverlay();
|
||||
alert(val);
|
||||
const list = this.gjArr;
|
||||
if (list.length >= 2) { // 轨迹数组大于2个才会展示轨迹
|
||||
// 已轨迹的起点作为中心点
|
||||
let startMarker = "", endMarker = "", startIcon = "", endIcon = "";
|
||||
const startPoint = new BMap.Point(list[0].lon, list[0].lat);
|
||||
this.map.centerAndZoom(startPoint, this.zoom);
|
||||
startIcon = new BMap.Icon(start, new BMap.Size(32, 40))
|
||||
startIcon.setImageSize(new BMap.Size(32, 40));
|
||||
startMarker = new BMap.Marker(startPoint, { icon: startIcon });
|
||||
this.map.addOverlay(startMarker);
|
||||
// 中间的点
|
||||
let array = [];
|
||||
list.forEach((item, index) => {
|
||||
array.push(new BMap.Point(item.lon, item.lat))
|
||||
})
|
||||
let polyline = new BMap.Polyline(array,
|
||||
{ strokeColor: "red", strokeWeight: 5, strokeOpacity: 0.5 });
|
||||
this.map.addOverlay(polyline);
|
||||
// 终点
|
||||
const endPoint = new BMap.Point(list[list.length - 1].lon, list[list.length - 1].lat);
|
||||
endIcon = new BMap.Icon(end, new BMap.Size(32, 40))
|
||||
endIcon.setImageSize(new BMap.Size(32, 40));
|
||||
endMarker = new BMap.Marker(endPoint, { icon: endIcon });
|
||||
this.map.addOverlay(endMarker);
|
||||
}
|
||||
},
|
||||
//给人员树不同层级设置不同的icon
|
||||
renderContent(h, { node, data }) {
|
||||
// 根据层级使用不同的图标
|
||||
let icon;
|
||||
|
|
@ -586,6 +878,22 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.personManage {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 10px 10px 5px #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.map {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
|
@ -599,7 +907,7 @@ export default {
|
|||
|
||||
|
||||
.personManage .left {
|
||||
width: 19.5%;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
padding: 0 0.5%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -607,39 +915,105 @@ export default {
|
|||
|
||||
.personManage .left>.content {
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
height: calc(100% - 70px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.personManage .center {
|
||||
margin-left: 0.5%;
|
||||
width: 59.5%;
|
||||
width: 58%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
height: 56px
|
||||
}
|
||||
|
||||
.personManage .center>.content {
|
||||
background-color: aqua;
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
height: calc(100% - 56px);
|
||||
padding: 0.5% 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.personManage .right {
|
||||
margin-left: 0.5%;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
// float: left;
|
||||
}
|
||||
|
||||
.personManage .right>.title {
|
||||
#person-box {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
height: 100%;
|
||||
padding: 3% 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.personManage .right>.content {
|
||||
#person-info,
|
||||
#sh-info {
|
||||
width: 96%;
|
||||
margin: 0 2% 4% 0;
|
||||
padding: 0 4% 0 4%;
|
||||
min-height: 150px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: start;
|
||||
letter-spacing: 1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#person-info>div:nth-of-type(1) {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
overflow: auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#person-info img,
|
||||
#sh-info img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.info2 {
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#warn-info,
|
||||
#team-box {
|
||||
width: 96%;
|
||||
margin: 0 2% 4% 0;
|
||||
}
|
||||
|
||||
#tower-box {
|
||||
width: 96%;
|
||||
margin: 0 2% 4% 0;
|
||||
min-height: 100px;
|
||||
padding: 0 4% 0 4%;
|
||||
min-height: 100px;
|
||||
letter-spacing: 1px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#tower-box span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#searchBox {
|
||||
width: 58%;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 8%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* tree节点过长换行处理 */
|
||||
|
|
@ -676,4 +1050,9 @@ export default {
|
|||
max-height: 30vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::v-deep .anchorBL {
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { include } from '../../../../utils/video/include.js'
|
||||
/* import { include } from '../../../../utils/video/include.js'
|
||||
import { video } from '../../../../utils/video/video-7.19.1.min.js'
|
||||
import { flv } from '../../../../utils/video/flv.js'
|
||||
import { talk } from '../../../../utils/video/talk.js'
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
// import { videoPage } from '../../../../utils/video/videoPage';
|
||||
import { videoQX } from '../../../../utils/video/videoQX';
|
||||
|
||||
import $ from 'jquery';
|
||||
import $ from 'jquery'; */
|
||||
export default {
|
||||
name: 'realTimeManage',
|
||||
data() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue