From e8a728024b32be3d227e406c13aee47bb254d10f Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 13 Aug 2021 09:05:33 +0800
Subject: [PATCH] 视频，地图等相关修改
---
src/views/map/carGps.vue | 684 +++++++++++++++++++++++++++++---------------------------
1 files changed, 354 insertions(+), 330 deletions(-)
diff --git a/src/views/map/carGps.vue b/src/views/map/carGps.vue
index 00f21bc..3bdc114 100644
--- a/src/views/map/carGps.vue
+++ b/src/views/map/carGps.vue
@@ -2,371 +2,395 @@
* @Author: Morpheus
* @Date: 2021-07-05 16:31:54
* @Last Modified by: Morpheus
- * @Last Modified time: 2021-07-23 14:12:24
+ * @Last Modified time: 2021-08-11 16:41:36
* 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="mode"
- label="车辆型号"
- width="136"
- >
- </el-table-column>
+ <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 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.mode }}</div>
- </li>
+ 详细资料及轨迹查询
+ </div>
+ <ul>
+ <li>
+ <div>车辆型号：</div>
+ <div>{{ detailObj.mode }}</div>
+ </li>
- <li>
- <div>责任人：</div>
- <div>{{ detailObj.personInCharge }}</div>
- </li>
+ <li>
+ <div>责任人：</div>
+ <div>{{ detailObj.personInCharge }}</div>
+ </li>
- <li>
- <div>出场日期：</div>
- <div>{{ detailObj.dateForProduction }}</div>
- </li>
+ <li>
+ <div>出场日期：</div>
+ <div>{{ detailObj.dateForProduction }}</div>
+ </li>
- <li>
- <div>厂商：</div>
- <div>{{ detailObj.brand }}</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>
+ <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-dialog title=""
+ :modal='false'
+ :visible.sync="dialogVisible"
+ :before-close="dialogBeforeClose"
+ class="car-video-box">
+ <iframe src="/carVideo/parent.html"
+ frameborder="0"></iframe>
+ </el-dialog>
+ </el-col>
+ </el-row>
</template>
<script>
import { getCarList, getPosition, getTrack } from "@/api/map/car";
-import gunPng from "@/assets/img/gun.png";
+import carPng from "@/assets/img/car.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() {
- 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: "枪支位置",
+ data () {
+ return {
+ tableData: [],
+ page: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
},
- gunPng,
- 0.8,
- "gunlayer",
- "gunAddlayer"
- );
+ detailFlag: false,
+ loading: true,
+ trackTime: [],
+ detailObj: {},
+ dialogVisible: false
+ };
+ },
+ 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.$nextTick(function () {
+ data.on('singleclick', this.realVideo)
+ })
+
+ },
+
+ realVideo () {
+ this.dialogVisible = true
}
- });
+
},
-
- detailsClick(row) {
- this.detailFlag = true;
- this.detailObj = {
- mode: row.mode,
- personInCharge: row.personInCharge,
- dateForProduction: row.dateForProduction,
- brand: row.brand,
- id: row.id,
- };
+ destroyed () {
+ window.ol2d.removeLayer(this.peopleAddlayer);
},
-
- 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 = [];
- },
- },
- 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