From 3a4e92acaa231be90348ebf2ff79956b47f884c5 Mon Sep 17 00:00:00 2001
From: zhengpz <1838927346@qq.com>
Date: Thu, 25 Nov 2021 15:34:59 +0800
Subject: [PATCH] 取消表格滚动条
---
src/views/map/carGps.vue | 227 +++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 199 insertions(+), 28 deletions(-)
diff --git a/src/views/map/carGps.vue b/src/views/map/carGps.vue
index f34b320..73a1371 100644
--- a/src/views/map/carGps.vue
+++ b/src/views/map/carGps.vue
@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2021-07-05 16:31:54
* @Last Modified by: Morpheus
- * @Last Modified time: 2021-11-17 09:20:19
+ * @Last Modified time: 2021-11-25 15:24:53
* menu-name 押运人员定位
*/
<template>
@@ -122,24 +122,38 @@
</div>
</el-card>
- <el-dialog title=""
+ <el-dialog title="视频监控"
:modal='false'
:visible.sync="dialogVisible"
:before-close="dialogBeforeClose"
:close-on-click-modal='false'
+ @closed="videoClose"
class="car-video-box">
- <iframe src="/carVideo/parent.html"
- ref="videoIframe"
- frameborder="0"></iframe>
+ <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, getTrack } from "@/api/map/car";
+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 () {
@@ -156,16 +170,13 @@
detailObj: {},
dialogVisible: false,
map: null,
+ videoLoading: true
};
},
created () {
this.getList();
},
mounted () {
-
-
-
-
},
methods: {
@@ -192,14 +203,17 @@
},
positionClick (val) {
- getPosition({ type: 2, workerId: val.id }).then((result) => {
+ // console.log(val)
+
+ getNewPosition({ imei: "861636056082414" }).then((result) => {
var res = result.data.data;
+
if (JSON.stringify(res) != "{}") {
this.$refs.modalForm.addEntitys(
{
- LGTD: 115.86,
- LTTD: 28.71,
- name: "枪支位置",
+ LGTD: res.x,
+ LTTD: res.y,
+ name: "车辆位置",
},
carPng,
0.8,
@@ -239,6 +253,12 @@
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;
@@ -257,22 +277,48 @@
":" +
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) => {
- var result = res.data.data;
- if (result.length > 1) {
- let arr = [];
- result.forEach((item) => {
- arr.push([Number(item.longitude), Number(item.latitude)]);
- });
+ 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)
- this.$refs.modalForm.addLines(arr);
- }
+ 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);
+ // }
});
},
// 处理时间补零操作
@@ -305,20 +351,101 @@
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()
+ }
+ })
- setTimeout(() =>{
- that.$refs.videoIframe.contentWindow.startVideo()
- },3000);
+ 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()
+ }
+ })
+
}
})
},
- dialogBeforeClose() {
- this.dialogVisible = false
+ videoClose () {
+ this.dialogVisible = false;
+ getVideoSrc({ camera: 0, action: 'stop' })
- this.$refs.videoIframe.contentWindow.closeVideo()
+ getVideoSrc({ camera: 1, action: 'stop' })
+ getVideoSrc({ camera: 2, action: 'stop' })
+
+ getVideoSrc({ camera: 4, action: 'stop' })
+ },
+
+ dialogBeforeClose () {
+ this.dialogVisible = false
}
},
@@ -419,4 +546,48 @@
}
}
}
+
+.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>
--
Gitblit v1.9.3