/*
|
* @Author: Morpheus
|
* @Date: 2021-07-05 16:31:54
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2021-07-23 11:20:51
|
* menu-name 押运人员定位
|
*/
|
<template>
|
<el-row class="morpheus-map-box">
|
<el-col :span="24">
|
<el-card>
|
<div class="card-body">
|
<div>
|
<Map 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="gunMode"
|
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.gunMode }}</div>
|
</li>
|
|
<li>
|
<div>责任人：</div>
|
<div>{{ detailObj.personInCharge }}</div>
|
</li>
|
|
<li>
|
<div>发证日期：</div>
|
<div>{{ detailObj.issueTime }}</div>
|
</li>
|
|
<li>
|
<div>有效日期：</div>
|
<div>{{ detailObj.validTime }}</div>
|
</li>
|
|
<li>
|
<div>发证单位：</div>
|
<div>{{ detailObj.issueUnit }}</div>
|
</li>
|
|
<li>
|
<div>用枪编号：</div>
|
<div>{{ detailObj.cardNumber }}</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-col>
|
</el-row>
|
</template>
|
|
<script>
|
import { getGunList, getPosition, getTrack } from "@/api/map/gun";
|
|
import gunPng from "@/assets/img/gun.png";
|
|
export default {
|
data() {
|
return {
|
tableData: [],
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
...this.$store.state.control.changePageSize,
|
},
|
detailFlag: false,
|
loading: true,
|
trackTime: [],
|
detailObj: {},
|
};
|
},
|
created() {
|
this.getList();
|
},
|
mounted() {},
|
methods: {
|
getList() {
|
getGunList({
|
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: 3, 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: "枪支位置",
|
},
|
gunPng,
|
0.8,
|
"gunlayer",
|
"gunAddlayer"
|
);
|
}
|
});
|
},
|
|
detailsClick(row) {
|
this.detailFlag = true;
|
this.detailObj = {
|
gunMode: row.gunMode,
|
personInCharge: row.personInCharge,
|
issueTime: row.issueTime,
|
validTime: row.validTime,
|
issueUnit: row.issueUnit,
|
cardNumber: row.cardNumber,
|
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: 3,
|
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 = [];
|
},
|
},
|
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>
|
