/*
|
* @Author: Morpheus
|
* @Date: 2021-07-05 16:31:54
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2021-09-03 16:20:17
|
* 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"
|
class="car-video-box"
|
>
|
<iframe
|
src="/carVideo/parent.html"
|
ref="videoIframe"
|
frameborder="0"
|
></iframe>
|
</el-dialog>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import { getCarList, getPosition, getTrack } from "@/api/map/car";
|
|
import carPng from "@/assets/img/car.png";
|
|
export default {
|
data() {
|
return {
|
tableData: [],
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
...this.$store.state.control.changePageSize,
|
},
|
detailFlag: false,
|
loading: true,
|
trackTime: [],
|
detailObj: {},
|
dialogVisible: false,
|
map: null,
|
};
|
},
|
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) {
|
getPosition({ type: 2, workerId: val.id }).then((result) => {
|
var res = result.data.data;
|
if (JSON.stringify(res) != "{}") {
|
this.$refs.modalForm.addEntitys(
|
{
|
LGTD: 115.86,
|
LTTD: 28.71,
|
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());
|
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());
|
|
getTrack({
|
workerId: this.detailObj.id,
|
type: 2,
|
startTime: start,
|
endTime: end,
|
}).then((res) => {
|
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;
|
|
setTimeout(() => {
|
that.$refs.videoIframe.contentWindow.startVideo();
|
}, 3000);
|
}
|
});
|
},
|
|
dialogBeforeClose() {
|
this.dialogVisible = false;
|
|
this.$refs.videoIframe.contentWindow.closeVideo();
|
},
|
},
|
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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
