/*
|
* @Author: Morpheus
|
* @Date: 2021-07-05 16:31:54
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2021-11-26 17:27:56
|
* menu-name 押运人员定位
|
*/
|
<template>
|
<el-row class="morpheus-map-box">
|
<el-col :span="24">
|
<el-card>
|
<div class="card-body">
|
<div>
|
<Map @childParameter="childParameter"
|
ref="modalForm" />
|
</div>
|
<div>
|
<div class="data-table map-people-table"
|
v-show="!detailFlag">
|
<el-table :data="tableData"
|
style="width: 100%"
|
v-loading="loading">
|
<el-table-column align="center"
|
prop="mode"
|
label="车辆型号"
|
width="136">
|
</el-table-column>
|
|
<el-table-column align="center"
|
prop="personInCharge"
|
label="责任人">
|
</el-table-column>
|
|
<el-table-column label="操作"
|
width="136"
|
align="center">
|
<template slot-scope="scope">
|
<el-button @click="positionClick(scope.row)"
|
type="text"
|
size="small"
|
title="定位">
|
<i class="el-icon-location"></i>
|
</el-button>
|
<el-button @click="detailsClick(scope.row)"
|
type="text"
|
size="small"
|
title="轨迹">
|
<i class="el-icon-position"></i>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div ref="tablePagination">
|
<el-pagination @size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
background
|
:page-sizes="[10, 30, 50, 100]"
|
layout="sizes, prev, pager, next"
|
:current-page="page.currentPage"
|
:page-size="page.pageSize"
|
:pager-count="3"
|
:total="page.total">
|
</el-pagination>
|
</div>
|
</div>
|
<div class="track-box"
|
v-show="detailFlag">
|
<div>
|
<el-button @click="goOut"
|
type="text"
|
size="small"
|
title="轨迹">
|
<i class="el-icon-back"></i>
|
</el-button>
|
|
详细资料及轨迹查询
|
</div>
|
<ul>
|
<li>
|
<div>车辆型号：</div>
|
<div>{{ detailObj.mode }}</div>
|
</li>
|
|
<li>
|
<div>责任人：</div>
|
<div>{{ detailObj.personInCharge }}</div>
|
</li>
|
|
<li>
|
<div>出场日期：</div>
|
<div>{{ detailObj.dateForProduction }}</div>
|
</li>
|
|
<li>
|
<div>厂商：</div>
|
<div>{{ detailObj.brand }}</div>
|
</li>
|
|
<li>
|
<div>选择时间：</div>
|
<div class="datetime">
|
<el-date-picker v-model="trackTime"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
size="mini"
|
:editable="false"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
</li>
|
|
<li>
|
<el-button type="text"
|
@click="lookTrack">
|
查看轨迹
|
</el-button>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
|
<el-dialog title="视频监控"
|
:modal='false'
|
:visible.sync="dialogVisible"
|
:before-close="dialogBeforeClose"
|
:close-on-click-modal='false'
|
@closed="videoClose"
|
class="car-video-box">
|
<div class="container"
|
v-loading="videoLoading">
|
<video id="videoElementOne"
|
controls="controls"></video>
|
<video id="videoElementTwo"
|
controls="controls"></video>
|
<video id="videoElementThree"
|
controls="controls"></video>
|
<video id="videoElementFour"
|
controls="controls"></video>
|
</div>
|
</el-dialog>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import { getCarList, getPosition, getNewPosition, getTrack, getVideoSrc, getNewCarTark } from "@/api/map/car";
|
import axios from 'axios';
|
|
import carPng from "@/assets/img/car.png";
|
|
import flvjs from 'flv.js/dist/flv.min.js';
|
|
const d3 = require('d3-dsv');
|
|
export default {
|
data () {
|
return {
|
tableData: [],
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
},
|
detailFlag: false,
|
loading: true,
|
trackTime: [],
|
detailObj: {},
|
dialogVisible: false,
|
map: null,
|
videoLoading: true
|
};
|
},
|
created () {
|
this.getList();
|
},
|
mounted () {
|
|
},
|
methods: {
|
getList () {
|
getCarList({
|
current: this.page.currentPage,
|
size: this.page.pageSize,
|
}).then((res) => {
|
var data = res.data.data;
|
this.tableData = data.records;
|
this.page.total = data.total;
|
this.loading = false;
|
});
|
},
|
handleSizeChange (val) {
|
this.page.pageSize = val;
|
this.loading = true;
|
this.getList();
|
},
|
handleCurrentChange (val) {
|
this.page.currentPage = val;
|
this.loading = true;
|
this.getList();
|
},
|
|
positionClick (val) {
|
// console.log(val)
|
|
getNewPosition({ imei: "861636056082414" }).then((result) => {
|
var res = result.data.data;
|
|
if (JSON.stringify(res) != "{}") {
|
this.$refs.modalForm.addEntitys(
|
{
|
LGTD: res.x,
|
LTTD: res.y,
|
name: "车辆位置",
|
},
|
carPng,
|
0.8,
|
"gunlayer",
|
"gunAddlayer"
|
);
|
}
|
});
|
},
|
|
detailsClick (row) {
|
this.detailFlag = true;
|
this.detailObj = {
|
mode: row.mode,
|
personInCharge: row.personInCharge,
|
dateForProduction: row.dateForProduction,
|
brand: row.brand,
|
id: row.id,
|
};
|
},
|
|
lookTrack () {
|
if (this.trackTime.length == 0) {
|
this.$message({ message: "请选择开始时间", duration: 2000 });
|
return;
|
}
|
const startTime = new Date(this.trackTime[0]);
|
const start =
|
startTime.getFullYear() +
|
"-" +
|
this.disposeTime(startTime.getMonth() + 1) +
|
"-" +
|
this.disposeTime(startTime.getDate()) +
|
" " +
|
this.disposeTime(startTime.getHours()) +
|
":" +
|
this.disposeTime(startTime.getMinutes()) +
|
":" +
|
this.disposeTime(startTime.getSeconds());
|
|
const startTWO =
|
startTime.getFullYear() + '' +
|
this.disposeTime(startTime.getMonth() + 1) + '' +
|
this.disposeTime(startTime.getDate());
|
|
if (this.trackTime.length == 1) {
|
this.$message({ message: "请选择结束时间", duration: 2000 });
|
return;
|
}
|
const endTime = new Date(this.trackTime[1]);
|
const end =
|
endTime.getFullYear() +
|
"-" +
|
this.disposeTime(endTime.getMonth() + 1) +
|
"-" +
|
this.disposeTime(endTime.getDate()) +
|
" " +
|
this.disposeTime(endTime.getHours()) +
|
":" +
|
this.disposeTime(endTime.getMinutes()) +
|
":" +
|
this.disposeTime(endTime.getSeconds());
|
|
const endTWO =
|
endTime.getFullYear() + '' +
|
this.disposeTime(endTime.getMonth() + 1) + '' +
|
this.disposeTime(endTime.getDate());
|
|
getTrack({
|
workerId: this.detailObj.id,
|
type: 2,
|
startTime: start,
|
endTime: end,
|
}).then((res) => {
|
|
getNewCarTark({
|
beginTime: startTWO,
|
endTime: endTWO,
|
rectify: 0,
|
callbackId: 123
|
}).then(res => {
|
axios.get('http://s16s652780.51mypc.cn/car/' + res.data.data).then(result => {
|
var ret = d3.csvParse(result.data)
|
|
let arr = [];
|
ret.forEach((item, index) => {
|
if (index < ret.length - 1) {
|
arr.push([Number(item.x), Number(item.y)]);
|
}
|
|
})
|
|
this.$refs.modalForm.addLines(arr);
|
})
|
})
|
// var result = res.data.data;
|
// if (result.length > 1) {
|
// let arr = [];
|
|
// result.forEach((item) => {
|
// arr.push([Number(item.longitude), Number(item.latitude)]);
|
// });
|
|
// this.$refs.modalForm.addLines(arr);
|
// }
|
});
|
},
|
// 处理时间补零操作
|
disposeTime (s) {
|
return s < 10 ? "0" + s : s;
|
},
|
|
goOut () {
|
this.detailFlag = !this.detailFlag;
|
this.$refs.modalForm.clearLine();
|
this.trackTime = [];
|
},
|
|
childParameter (data) {
|
this.map = data;
|
this.$nextTick(function () {
|
data.on('singleclick', this.realVideo)
|
})
|
|
},
|
|
realVideo (e) {
|
var that = this;
|
// 在点击时获取像素区域
|
var pixel = this.map.getEventPixel(e.originalEvent)
|
|
this.map.forEachFeatureAtPixel(pixel, function (feature) {
|
|
const cont = feature.values_.attributes
|
|
if (cont != undefined) {
|
that.dialogVisible = true
|
var oneflag = false, twoflag = false, threefalse = false, fourfalse = false;
|
getVideoSrc({ camera: 0, action: 'start' }).then(res => {
|
oneflag = true;
|
if (twoflag == true && threefalse == true && fourfalse == true) {
|
that.videoLoading = false;
|
}
|
if (flvjs.isSupported()) {
|
var videoElement = document.getElementById('videoElementOne')
|
var flvPlayer = flvjs.createPlayer({
|
// isLive: true,
|
// hasAudio: false,
|
type: 'flv',
|
url: res.data.data.live_url
|
})
|
flvPlayer.attachMediaElement(videoElement)
|
flvPlayer.load()
|
flvPlayer.play()
|
}
|
})
|
|
getVideoSrc({ camera: 1, action: 'start' }).then(res => {
|
twoflag = true;
|
if (oneflag == true && threefalse == true && fourfalse == true) {
|
that.videoLoading = false;
|
}
|
if (flvjs.isSupported()) {
|
var videoElement = document.getElementById('videoElementTwo')
|
var flvPlayer = flvjs.createPlayer({
|
// isLive: true,
|
// hasAudio: false,
|
type: 'flv',
|
url: res.data.data.live_url
|
})
|
flvPlayer.attachMediaElement(videoElement)
|
flvPlayer.load()
|
flvPlayer.play()
|
}
|
})
|
|
getVideoSrc({ camera: 2, action: 'start' }).then(res => {
|
threefalse = true;
|
if (oneflag == true && twoflag == true && fourfalse == true) {
|
that.videoLoading = false;
|
}
|
if (flvjs.isSupported()) {
|
var videoElement = document.getElementById('videoElementThree')
|
var flvPlayer = flvjs.createPlayer({
|
// isLive: true,
|
// hasAudio: false,
|
type: 'flv',
|
url: res.data.data.live_url
|
})
|
flvPlayer.attachMediaElement(videoElement)
|
flvPlayer.load()
|
flvPlayer.play()
|
}
|
})
|
|
getVideoSrc({ camera: 4, action: 'start' }).then(res => {
|
fourfalse = true;
|
if (oneflag == true && twoflag == true && threefalse == true) {
|
that.videoLoading = false;
|
}
|
if (flvjs.isSupported()) {
|
var videoElement = document.getElementById('videoElementFour')
|
var flvPlayer = flvjs.createPlayer({
|
// isLive: true,
|
// hasAudio: false,
|
type: 'flv',
|
url: res.data.data.live_url
|
})
|
flvPlayer.attachMediaElement(videoElement)
|
flvPlayer.load()
|
flvPlayer.play()
|
}
|
})
|
|
}
|
})
|
|
},
|
|
videoClose () {
|
this.dialogVisible = false;
|
getVideoSrc({ camera: 0, action: 'stop' })
|
|
getVideoSrc({ camera: 1, action: 'stop' })
|
|
getVideoSrc({ camera: 2, action: 'stop' })
|
|
getVideoSrc({ camera: 4, action: 'stop' })
|
},
|
|
dialogBeforeClose () {
|
this.dialogVisible = false
|
}
|
|
},
|
destroyed () {
|
window.ol2d.removeLayer(this.peopleAddlayer);
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.data-table {
|
border: 1px solid transparent !important;
|
box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important;
|
}
|
.card-body {
|
display: flex;
|
& > div:first-child {
|
flex: 8;
|
}
|
|
& > div:last-child {
|
position: relative;
|
|
flex: 3;
|
& > div {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
|
& > .el-table {
|
height: calc(100% - 34px);
|
}
|
}
|
|
.track-box {
|
& > div {
|
position: relative;
|
height: 42px;
|
line-height: 42px;
|
text-align: center;
|
color: #fff;
|
border-bottom: 1px solid #fff;
|
.el-button {
|
padding: 0 !important;
|
position: absolute;
|
top: 4px;
|
left: 4px;
|
width: 42px;
|
height: 28px;
|
line-height: 28px;
|
}
|
}
|
ul {
|
margin: 0;
|
padding: 0px;
|
}
|
li {
|
margin: 0;
|
padding: 0 4px;
|
list-style: none;
|
height: 42px;
|
line-height: 42px;
|
display: flex;
|
color: #fff;
|
border-bottom: 1px solid #fff;
|
& > div {
|
text-align: center;
|
}
|
& > div:first-child {
|
flex: 2;
|
}
|
& > div:last-child {
|
flex: 6;
|
& > div {
|
width: 100% !important;
|
}
|
}
|
}
|
|
li:last-child {
|
text-align: center;
|
position: relative;
|
.el-button {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
padding: 0 !important;
|
width: 68px;
|
height: 32px;
|
line-height: 32px;
|
}
|
}
|
}
|
}
|
}
|
|
.car-video-box {
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
video {
|
flex: 1;
|
width: 50%;
|
height: 50%;
|
object-fit: fill;
|
}
|
// #videoElementOne {
|
// position: absolute;
|
// top: 0;
|
// left: 0;
|
// width: 50%;
|
// height: 50%;
|
// }
|
// #videoElementTwo {
|
// position: absolute;
|
// top: 0;
|
// right: 0;
|
// width: 50%;
|
// height: 50%;
|
// }
|
// #videoElementThree {
|
// position: absolute;
|
// bottom: 0;
|
// left: 0;
|
// width: 50%;
|
// height: 50%;
|
// }
|
// #videoElementFour {
|
// position: absolute;
|
// bottom: 0;
|
// right: 0;
|
// width: 50%;
|
// height: 50%;
|
// }
|
}
|
}
|
</style>
|
