Skip to content

K
kd_control
Commit 8d42e2f3 authored by zhanglw's avatar zhanglw
Browse files
Options

人员轨迹回放

parent 75e238bf
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 21 deletions
public/config/config.json
View file @ 8d42e2f3
......@@ -107,6 +107,20 @@
}
]
},
{
"pid": 10,
"name": "高德影像",
"type": "group",
"icon": "http://mars3d.cn/example/img/basemaps/gaode_img.png",
"layers": [
{
"name": "底图",
"type": "gaode",
"layer": "img_d"
}
],
"show": true
},
{
"pid": 10,
"name": "高德影像",
......@@ -123,8 +137,7 @@
"type": "gaode",
"layer": "img_z"
}
],
"show": true
]
},
{
"pid": 10,
......
src/components/mars3d/Map2.vue
View file @ 8d42e2f3
......@@ -35,9 +35,9 @@ var currentTimeInterval = null;
export default {
name: 'mars3dViewer',
mounted(){
},
data(){
......@@ -196,9 +196,9 @@ export default {
}
})
}
}
},
//创建地图电子围栏
initMars3d(options) {
......@@ -295,7 +295,7 @@ export default {
initGraphicManager(graphicLayer2,itemText);
that.addGraphic_02(graphicLayer2,item.arrays,that.carNumber);
})
//停车区域
that.stopPointData.forEach((item,index)=>{
var graphicLayer2 = new mars3d.layer.GraphicLayer();
......@@ -321,7 +321,7 @@ export default {
map.on(mars3d.EventType.renderError,function(event){
window.location.reload();
});
//画测距
//graphicLayerPolyline = new mars3d.layer.GraphicLayer();
//that.bindLayerContextMenu(graphicLayerPolyline);
......@@ -493,7 +493,7 @@ export default {
}else{
graphicLayerPolyline.stopDraw();
}
},
//添加测距画线右键菜单
bindLayerContextMenu(graphicLayer) {
......@@ -610,7 +610,7 @@ export default {
var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
......@@ -669,7 +669,7 @@ export default {
height: 2.5vh;
}
.cesium-viewer-toolbar{
display: none !important;
}
.mars3d-compass{
......
src/components/mars3d/Map5.vue
View file @ 8d42e2f3
......@@ -3,7 +3,7 @@
<div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
<div class="infoview">
<div class="infoview" v-show="!clockAnimate">
<div style="display: inline-block;color:red;font-weight:bolder;">点击地图设置坐标</div>
</div>
......@@ -50,7 +50,10 @@
type: String,
default: ''
},
clockAnimate: {
type: Boolean,
default: false
},
// 自定义参数
options: Object,
......@@ -92,8 +95,9 @@
...options,
...this.options,
control: {
defaultContextMenu: false, //右键菜单
},
clockAnimate: this.clockAnimate, // 时钟动画控制(左下角)
timeline: this.clockAnimate // 是否显示时间线控件
}
}
// 创建三维地球场景
map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions);
......
src/views/personnelPositioning/peopleLogData/index.vue
View file @ 8d42e2f3
......@@ -19,20 +19,19 @@
<el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
</div>
</div>
<!-- 表格 -->
<div class="panel-bottom page-row">
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="toolbar">
<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>-->
<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>-->
<el-button size="mini" icon="el-icon-document" @click="downloadFile">导出</el-button>
</div>
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto">
<el-table-column prop="safetyhatmac" label="安全帽MAC" align="center"></el-table-column>
<!-- <el-table-column prop="cameraid" label="摄像头id" align="center"></el-table-column>-->
<!-- <el-table-column prop="cameraid" label="摄像头id" align="center"></el-table-column>-->
<el-table-column prop="type" label="工种" align="center">
<template slot-scope="scope">
<span>{{ scope.row.type=='1'?'访客':'员工' }}</span>
......@@ -42,7 +41,7 @@
<el-table-column prop="phone" label="电话" align="center"></el-table-column>
<el-table-column label="操作" align="center" fixed="right">
<template slot-scope="scope">
<span class="link-cell">轨迹回放</span>
<span class="link-cell" @click="openTrailView(scope.row)">轨迹回放</span>
<span class="link-cell" @click="openPosView(scope.row)">轨迹数据</span>
<span v-show="scope.row.userid" class="link-cell" @click="openvideoView(scope.row)">视频回放</span>
<span v-show="scope.row.userid" class="link-cell" @click="openPhotoView(scope.row)">相册</span>
......@@ -58,6 +57,25 @@
</div>
</div>
</div>
<!-- 轨迹回放 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible="trailView" title="轨迹回放" width="1200px">
<div class="head-container">
<label class="el-form-item-label" style="font-weight: 500;">日期</label>
<el-date-picker
v-model="trailDate"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
:default-time="['00:00:00', '23:59:59']">
start-placeholder="查询开始时间"
end-placeholder="查询结束时间">
</el-date-picker>
<el-button size="mini" type="success" icon="el-icon-search" @click="drawTrail">查询</el-button>
</div>
<div id="centerDiv" class="mapcontainer">
<mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod" mapKey="peopleTrailView" :clockAnimate="true"/>
</div>
</el-dialog>
<!-- 轨迹数据 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible="posView" title="轨迹数据" width="900px">
<div class="head-container">
......@@ -142,9 +160,16 @@ import {JSWebrtc} from '@/assets/js/jswebrtc.js';
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'
import mars3dViewerMap from "../../../components/mars3d/Map5.vue";
import * as mars3d from "mars3d";
import * as Cesium from "mars3d-cesium";
import peopleIcon from "../../../assets/images/point.png";
export default {
name: 'peopleLogData',
components: {
mars3dViewerMap,
},
data() {
const basePathUrl = window.basePathUrl || ''
return {
......@@ -158,6 +183,7 @@ export default {
videoDia: false,
videoRtc: false,
posView: false,
trailView: false,
page: 1,
size: 10,
total: 0,
......@@ -180,6 +206,7 @@ export default {
pagePos: 1,
sizePos: 10,
totalPos: 0,
trailDate: [],
}
},
mounted() {
......@@ -206,12 +233,109 @@ export default {
})
},
methods: {
onMapload(map) {
map.unbindContextMenu();
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
this.map = map;
this.graphicLayer = graphicLayer;
},
drawTrail() {
let map = this.map;
let graphicLayer = this.graphicLayer;
if (!(this.trailDate && this.trailDate.length)) {
this.$message({
message: '请输入查询时间范围'
});
return;
}
let param = {
safetyhatmac: this.peoItem.safetyhatmac,
page: 0,
size: 43200,
sort: `date,asc`
};
param.daterange = this.trailDate.join(',');
this.$nextTick(() => {
HttpReq.truckDispatching.propleGetLocus(param).then((res) => {
if (res.code == 200) {
if(res.body){
let trailList = res.body.list;
const property = new Cesium.SampledPositionProperty()
property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD
let start,stop,position;
for (let i = 0, len = trailList.length; i < len; i++) {
const item = trailList[i];
position = Cesium.Cartesian3.fromDegrees(Number(item.y), Number(item.x), 200);
let juliaDate = Cesium.JulianDate.fromDate(new Date(item.time.replace(/-/g,"/")));
property.addSample(juliaDate, position);
if (i === 0) {
start = juliaDate
} else if (i === len - 1) {
stop = juliaDate
}
const graphic = new mars3d.graphic.PointPrimitive({
position: position,
style: {
pixelSize: 4,
color: "#cccccc"
},
popup: "id编号:" + item.id + "<br/>时间:" + item.time
});
graphicLayer.addGraphic(graphic);
}
// 设置时钟属性
map.clock.startTime = start.clone()
map.clock.stopTime = stop.clone()
map.clock.currentTime = start.clone()
map.clock.clockRange = Cesium.ClockRange.LOOP_STOP
map.clock.multiplier = 5
map.controls.timeline.zoomTo(start, stop)
// 创建path对象
let pathEntity = new mars3d.graphic.PathEntity({
position: property,
orientation: new Cesium.VelocityOrientationProperty(property),
style: {
resolution: 1,
leadTime: 0,
trailTime: 3600,
color: "#ff0000",
width: 3
},
label: {
text: this.peoItem.name,
font_size: 18,
font_family: "楷体",
color: "#ff0000",
outline: true,
outlineColor: "#000000",
visibleDepth: false,
outlineWidth: 5,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -25) // 偏移量
},
billboard: {
image: peopleIcon,
scale: 0.5,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
visibleDepth: false
}
})
graphicLayer.addGraphic(pathEntity)
this.map.setCameraView({ lat: trailList[0].x, lng: trailList[0].y, alt:300 });
}
}
})
})
},
loadData() {
var param = this.query;
param.page = this.page - 1;
param.size = this.size;
param.vague = {safetyhatmac:param.safetyhatmac||undefined,name:param.name||undefined};
param.exact = {type:param.type};
param.vague = {safetyhatmac: param.safetyhatmac || undefined, name: param.name || undefined};
param.exact = {type: param.type};
param.sort = `date,desc`;
this.$nextTick(() => {
//获取安检信息
......@@ -360,6 +484,11 @@ export default {
let d = time ? new Date(time * 1000) : new Date();
return `${d.getFullYear()}/${('0' + (d.getMonth() + 1)).substr(-2)}/${('0' + (d.getDate())).substr(-2)} ${('0' + (d.getHours())).substr(-2)}:${('0' + (d.getMinutes())).substr(-2)}:${('0' + (d.getSeconds())).substr(-2)}`;
},
openTrailView(item) {
this.trailView = true;
this.peoItem = item;
this.trailDate = [];
},
openPosView(item) {
this.posView = true;
this.peoItem = item;
......@@ -444,6 +573,10 @@ export default {
this.videoView = false;
this.videoDia = false;
this.posView = false;
if (this.trailView) {
this.graphicLayer.clear();
}
this.trailView = false;
},
// 点击搜索
toSearch() {
......@@ -561,4 +694,9 @@ div::-webkit-scrollbar{
width: 308px;
height: 173px;
}
.mapcontainer {
height: 60vh;
width: 1160px;
overflow: hidden;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment