From 2c2ba6e9f7d5b5e0c7ebbb958f67cdbc2da24990 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 01 Dec 2021 14:19:42 +0800
Subject: [PATCH] 枪支
---
src/views/map/gunGps.vue | 703 ++++++++++++++++++++++++++++++----------------------------
src/api/map/gun.js | 2
2 files changed, 363 insertions(+), 342 deletions(-)
diff --git a/src/api/map/gun.js b/src/api/map/gun.js
index 1f7051d..d10451c 100644
--- a/src/api/map/gun.js
+++ b/src/api/map/gun.js
@@ -18,7 +18,7 @@
export const getTrack = (param) => {
return request({
- url: '/api/liveLocation/getLocusInfoList',
+ url: '/api/liveLocation/Gun',
method: 'get',
params: param
})
diff --git a/src/views/map/gunGps.vue b/src/views/map/gunGps.vue
index e190c2b..6b47cf6 100644
--- a/src/views/map/gunGps.vue
+++ b/src/views/map/gunGps.vue
@@ -2,390 +2,411 @@
* @Author: Morpheus
* @Date: 2021-07-05 16:31:54
* @Last Modified by: Morpheus
- * @Last Modified time: 2021-11-30 16:47:29
+ * @Last Modified time: 2021-12-01 14:19:01
* 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-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 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>
+ <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>
+ 详细资料及轨迹查询
+ </div>
+ <ul>
+ <li>
+ <div>枪支类型：</div>
+ <div>{{ detailObj.gunMode }}</div>
+ </li>
- <li>
- <div>责任人：</div>
- <div>{{ detailObj.personInCharge }}</div>
- </li>
+ <li>
+ <div>责任人：</div>
+ <div>{{ detailObj.personInCharge }}</div>
+ </li>
- <li>
- <div>发证日期：</div>
- <div>{{ detailObj.issueTime }}</div>
- </li>
+ <li>
+ <div>发证日期：</div>
+ <div>{{ detailObj.issueTime }}</div>
+ </li>
- <li>
- <div>有效日期：</div>
- <div>{{ detailObj.validTime }}</div>
- </li>
+ <li>
+ <div>有效日期：</div>
+ <div>{{ detailObj.validTime }}</div>
+ </li>
- <li>
- <div>发证单位：</div>
- <div>{{ detailObj.issueUnit }}</div>
- </li>
+ <li>
+ <div>发证单位：</div>
+ <div>{{ detailObj.issueUnit }}</div>
+ </li>
- <li>
- <div>用枪编号：</div>
- <div>{{ detailObj.cardNumber }}</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>
+ <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>
+ <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, getNewTrack } from "@/api/map/gun";
+import { getGunList, getTrack } from "@/api/map/gun";
import gunPng from "@/assets/img/gun.png";
export default {
- data() {
- return {
- tableData: [],
- page: {
- pageSize: 10,
- currentPage: 1,
- total: 0,
- },
- 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: "枪支位置",
+ data () {
+ return {
+ tableData: [],
+ page: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
},
- gunPng,
- 0.8,
- "gunlayer",
- "gunAddlayer"
- );
- }
- });
+ detailFlag: false,
+ loading: true,
+ trackTime: [],
+ detailObj: {},
+ };
},
-
- 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,
- };
+ 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();
+ },
- 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());
- 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());
+ positionClick (val) {
+ var timestamp = Date.parse(new Date());
- // getTrack({
- // workerId: this.detailObj.id,
- // type: 3,
- // startTime: start,
- // endTime: end,
- // }).then((res) => {
- // var result = res.data.data;
- // if (result.length > 1) {
- // let arr = [];
+ var serverDate = new Date(timestamp);
- // result.forEach((item) => {
- // arr.push([Number(item.longitude), Number(item.latitude)]);
- // });
-
- // this.$refs.modalForm.addLines(arr);
- // }
- // });
-
- getNewTrack({
- startTime: start,
- endTime: end,
- }).then((res) => {
- console.log(res, "车辆轨迹");
- var result = res.data.data;
- if (result.length > 1) {
- let arr = [];
-
- result.res.forEach((item) => {
- arr.push([Number(item.dwjd), Number(item.dwwd)]);
- });
-
- this.$refs.modalForm.addLines(arr);
- }
- });
+ const start =
+ (serverDate.getFullYear() - 5) +
+ "-" +
+ this.disposeTime(serverDate.getMonth() + 1) +
+ "-" +
+ this.disposeTime(serverDate.getDate()) +
+ " " +
+ this.disposeTime(serverDate.getHours()) +
+ ":" +
+ this.disposeTime(serverDate.getMinutes()) +
+ ":" +
+ this.disposeTime(serverDate.getSeconds());
+ const end =
+ serverDate.getFullYear() +
+ "-" +
+ this.disposeTime(serverDate.getMonth() + 1) +
+ "-" +
+ this.disposeTime(serverDate.getDate()) +
+ " " +
+ this.disposeTime(serverDate.getHours()) +
+ ":" +
+ this.disposeTime(serverDate.getMinutes()) +
+ ":" +
+ this.disposeTime(serverDate.getSeconds());
+
+
+ getTrack({
+ hwysfzh: "",
+ szdw: "",
+ kssj: start,
+ jssj: end,
+ }).then((res) => {
+ var result = res.data.data;
+ if (JSON.stringify(res) != "{}") {
+ var array = result.sort(function (a, b) {
+ return a['dwsj'] < b['dwsj'] ? 1 : -1
+ })
+
+ this.$refs.modalForm.addEntitys(
+ {
+ LGTD: Number(array[0].dwjd),
+ LTTD: Number(array[0].dwwd),
+ 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());
+ 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.detailObj.cardNo
+ getTrack({
+ hwysfzh: "",
+ szdw: "",
+ kssj: start,
+ jssj: end,
+ }).then((res) => {
+ var result = res.data.data;
+ if (result.length > 1) {
+ let arr = [];
+
+ var array = result.sort(function (a, b) {
+ return a['dwsj'] > b['dwsj'] ? 1 : -1
+ })
+
+ array.forEach((item) => {
+ arr.push([Number(item.dwjd), Number(item.dwwd)]);
+ });
+
+ this.$refs.modalForm.addLines(arr);
+ }
+ });
+
+ },
+ // 处理时间补零操作
+ disposeTime (s) {
+ return s < 10 ? "0" + s : s;
+ },
+
+ goOut () {
+ this.detailFlag = !this.detailFlag;
+ this.$refs.modalForm.clearLine();
+ this.trackTime = [];
+ },
},
- // 处理时间补零操作
- disposeTime(s) {
- return s < 10 ? "0" + s : s;
+ destroyed () {
+ window.ol2d.removeLayer(this.peopleAddlayer);
},
-
- 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;
+ 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);
- }
+ display: flex;
+ & > div:first-child {
+ flex: 8;
}
- .track-box {
- & > div {
+ & > div:last-child {
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;
+
+ flex: 3;
& > div {
- text-align: center;
- }
- & > div:first-child {
- flex: 2;
- }
- & > div:last-child {
- flex: 6;
- & > div {
- width: 100% !important;
- }
- }
- }
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
- 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;
+ & > .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>
--
Gitblit v1.9.3