From 3d0eb36471cfc8f6e3e72d10600be4e255e3db13 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Wed, 12 Apr 2023 10:05:11 +0800
Subject: [PATCH] 视频巡逻路线分割、新增路线、一分钟播放路线
---
src/views/video/region.vue | 293 +++++++++++++++++++++++++++++++++++++++++-------
src/views/activity/components/publicIndex.vue | 1
src/views/activity/components/videoControlBox.vue | 7
3 files changed, 252 insertions(+), 49 deletions(-)
diff --git a/src/views/activity/components/publicIndex.vue b/src/views/activity/components/publicIndex.vue
index 80c8f6b..c9bbcac 100644
--- a/src/views/activity/components/publicIndex.vue
+++ b/src/views/activity/components/publicIndex.vue
@@ -18,7 +18,6 @@
<polyline-plot ref="PolylinePlotPage" :showingSecurityId="showingSecurityId"></polyline-plot>
-
<police-car-change ref="PoliceCarChange" :policeOption="policeOption"
:showingSecurityId="showingSecurityId"></police-car-change>
diff --git a/src/views/activity/components/videoControlBox.vue b/src/views/activity/components/videoControlBox.vue
index e1e4c32..fd9638e 100644
--- a/src/views/activity/components/videoControlBox.vue
+++ b/src/views/activity/components/videoControlBox.vue
@@ -179,6 +179,8 @@
mounted () {
this.$nextTick(() => {
tc = new global.DC.TrackController(global.viewer)
+
+
})
},
@@ -188,18 +190,19 @@
* @return {*}
*/
watchVideo (linePosition, polygonPosition) {
+
const that = this
const line = this.$turf.lineString(linePosition.split(';').filter(item => item != '').map(item => item.split(',').map(i => Number(i))))
// const lineLength = this.$turf.length(line) * 1000
const chunkLine = this.$turf.lineChunk(line, 0.1)
+ console.log('chunkLine', chunkLine)
let arr = chunkLine.features.reduce((pre, cur) =>
pre.concat(cur.geometry.coordinates)
, []).map(item => item.join(','))
-
-
const time = arr.filter(item => arr.indexOf(item) == arr.lastIndexOf(item)).length * 16
const newPostion = arr.filter((item, index) => index == arr.lastIndexOf(item)).join(';')
+ console.log('arr', arr, 'time', time, 'newPostion', newPostion)
this.getRegionList(polygonPosition)
this.videoShow = true
diff --git a/src/views/video/region.vue b/src/views/video/region.vue
index 3a4dab8..17492c6 100644
--- a/src/views/video/region.vue
+++ b/src/views/video/region.vue
@@ -18,6 +18,11 @@
<input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
<button @click="searchClick" class="el-icon-search"></button>
</div>
+ <div class="draw-btn">
+ 新增路线：
+ <el-button type="primary" size="mini" @click="draw('polyline')">新增路线</el-button>
+ <el-button type="primary" size="mini" @click="removeDrawLayer">清除</el-button>
+ </div>
<div v-show="true" class="search-val-box">
<div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
@@ -35,9 +40,9 @@
<el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
<el-table-column prop="extent" label="长度km/面积㎡" min-width="50%">
<!-- <template slot-scope="scope">
- <span>{{ scope.row.extent }}</span>
- <span>千米</span>
- </template>-->
+ <span>{{ scope.row.extent }}</span>
+ <span>千米</span>
+ </template>-->
</el-table-column>
<el-table-column prop="id" label="操作" min-width="50%">
<template slot-scope="scope">
@@ -260,19 +265,46 @@
<el-button @click="editRangeVisible = false">取消</el-button>
</div>
</el-dialog>
+
+ <el-dialog title="新增路线" :modal="false" :visible.sync="drawDialogVisible" :before-close="drawDialogBeforeClose"
+ :close-on-click-modal="true" class="video-draw-box">
+ <div>
+ <div>名称：</div>
+ <input type="text" v-model="drawName" placeholder="请输入绘制线的名称" />
+ </div>
+ <div>
+ <div>范围：</div>
+ <input type="text" v-model="range" placeholder="请输入绘制线的范围" />
+ </div>
+ <div class="line">
+ <div class="value-name-box">颜色：</div>
+ <div class="pick-color-box">
+ <el-color-picker v-model="chooseAddRangeColor" :predefine="predefineColors" size="small">
+ </el-color-picker>
+ </div>
+ </div>
+ <div>
+ <button @click="saveDrawInfo">保存</button>
+ <button @click="cancelSaveDrawInfo">取消</button>
+ </div>
+ </el-dialog>
</div>
</template>
<script>
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"
-import { getVideoList, getDevices, getRegionSaveList, deleteRegionSaveList, getRegionList, updataRegionSaveList } from '@/api/video/index.js'
+import { getVideoList, getDevices, getRegionSaveList, deleteRegionSaveList, getRegionList, updataRegionSaveList, insertRegionSaveList, getRegionListAll } from '@/api/video/index.js'
import flvjs from 'flv.js'
// let graphicLayer = null
let rangeLayer = null
let rangeLineLayer = null
+let drawPlotLayers = null
let plot = undefined
+let drwaPlot = undefined
+let videoTimer = null
+let videoLineIndex = -1
import { initMapPosition } from '@/utils/mapPositionInit'
@@ -281,6 +313,7 @@
data () {
return {
+ drawDialogVisible: false,
currentPage: 1,
pagesize: 13,
pagesCount: 1,
@@ -358,6 +391,7 @@
video8: false,
},
chooseRangeColor: '#FF0000',
+ chooseAddRangeColor: '#FF0000',
editRangeVisible: false,
lineWidth: '',
rangeOverlayData: {},
@@ -379,6 +413,7 @@
'hsla(209, 100%, 56%)',
'#c7158577'
],
+ drawType: 1,
}
},
@@ -405,6 +440,13 @@
if (rangeLineLayer == null) {
rangeLineLayer = new global.DC.VectorLayer('rangeLineLayer')
global.viewer.addLayer(rangeLineLayer)
+ }
+ if (drawPlotLayers == null) {
+ drawPlotLayers = new global.DC.VectorLayer('drawPlotLayers')
+ global.viewer.addLayer(drawPlotLayers)
+ drwaPlot = new global.DC.Plot(global.viewer, {
+ clampToModel: true
+ })
}
})
@@ -549,14 +591,13 @@
}
this.saveRangeList.forEach(item => {
- console.log(item, 656565656)
let positionStr = ''
if (item.type == 1) {
let linePositionStr = ''
linePositionStr = item.positions.replace(/,/g, ';')
linePositionStr = linePositionStr.replace(/ /g, ',')
linePositionStr += ';'
- let coords = global.DC.GeoTools.polylineBuffer(linePositionStr, 100)
+ let coords = global.DC.GeoTools.polylineBuffer(linePositionStr, item.width)
let polygon = new global.DC.Polygon(coords)
let position = ''
polygon._positions.forEach(item => {
@@ -707,6 +748,7 @@
initMonitoringIcon () {
this.monitoringList.forEach((item, index) => {
+ let iconUrl = item.status == 0 ? '/img/icon/video-off.png' : '/img/icon/video.png'
this.$EventBus.$emit('layerPointAdd', {
layerName: 'monitoringLayers',
type: "billboard",
@@ -715,7 +757,7 @@
lng: item.longitude,
lat: item.latitude,
alt: 1,
- url: '/img/icon/video.png',
+ url: iconUrl,
// deviceId: item.deviceId
},
// incident: this.siteClick
@@ -754,6 +796,8 @@
type: 'VectorLayer'
})
} else {
+ clearInterval(videoTimer)
+
this.isShowVideo = {
video1: false,
video2: false,
@@ -781,7 +825,6 @@
id: row.id
}).then(res => {
let monitorData = res.data.data.list
-
this.monitoringList = res.data.data.list
this.$EventBus.$emit('mapRemoveLayer', {
layerName: 'monitoringLayers',
@@ -815,46 +858,20 @@
let positionStr = row.positions.replace(/,/g, ';')
positionStr = positionStr.replace(/ /g, ',')
positionStr += ';'
- let coords = global.DC.GeoTools.polylineBuffer(positionStr, row.width)
- let polygon = new global.DC.Polygon(coords)
- let position = ''
- polygon._positions.forEach(item => {
- position += item._lng + ',' + item._lat + ';'
+ let positionArr = positionStr.slice(0, positionStr.length - 1).split(';')
+ let positionNewArr = []
+ positionArr.forEach(item => {
+ positionNewArr.push([Number(item.split(',')[0]), Number(item.split(',')[1])])
})
- getRegionList({
- page: 1,
- count: 20,
- range: position
- }).then(res => {
- let monitorData = res.data.data.list
+ // 按距离获取路线划分块
+ let videoLine = this.$turf.lineString(positionNewArr)
+ let videoChunk = this.$turf.lineChunk(videoLine, 0.1, { units: 'kilometers' })
+ videoLineIndex = -1
+ this.initVideoLineFrag(videoChunk, row)
+ videoTimer = setInterval(() => {
+ this.initVideoLineFrag(videoChunk, row)
+ }, 60000)
- this.monitoringList = res.data.data.list
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
-
- this.initMonitoringIcon()
-
- this.monitorOption = []
-
- monitorData.forEach((item, index) => {
- this.monitorOption.push({ value: index, label: item.name, item })
-
- if (index < 8) {
- const ind = index + 1
- this.isShowVideo[`video${ind}`] = true
- this.monitor[`type${ind}`] = item.name
- if (item.status == 0) {
- this.isShowOutline[`video${ind}`] = true
- }
-
- this.getDevices(item.channelId).then(res => {
- this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`, `${ind}`)
- })
- }
- })
- })
}
}
@@ -889,6 +906,62 @@
// this.flvPlayer.play()
// }
// },
+
+ initVideoLineFrag (videoChunk, row) {
+ videoLineIndex++
+ if (videoLineIndex == videoChunk.features.length) {
+ clearInterval(videoTimer)
+ }
+ let positionStr = ''
+ let positionArr = videoChunk.features[videoLineIndex].geometry.coordinates
+ positionArr.forEach(item => {
+ positionStr += item[0] + ',' + item[1] + ';'
+ })
+ let point1 = this.$turf.point(positionArr[0])
+ let point2 = this.$turf.point(positionArr[1])
+ let midpoint = this.$turf.midpoint(point1, point2).geometry.coordinates
+ console.log('midpoint', midpoint)
+ this.$EventBus.$emit('toPosition', {
+ siteJd: midpoint[0],
+ siteWd: midpoint[1],
+ siteGd: 5000,
+ })
+ let coords = global.DC.GeoTools.polylineBuffer(positionStr, row.width)
+ let polygon = new global.DC.Polygon(coords)
+ let position = ''
+ polygon._positions.forEach(item => {
+ position += item._lng + ',' + item._lat + ';'
+ })
+ getRegionListAll({
+ range: position
+ }).then(res => {
+ let monitorData = res.data.data.filter(item => { return item.status == 1 })
+ this.monitoringList = res.data.data
+ this.$EventBus.$emit('mapRemoveLayer', {
+ layerName: 'monitoringLayers',
+ type: 'VectorLayer'
+ })
+
+ this.initMonitoringIcon()
+ this.monitorOption = []
+ monitorData.forEach((item, index) => {
+ this.monitorOption.push({ value: index, label: item.name, item })
+
+ if (index < 8) {
+ const ind = index + 1
+ this.isShowVideo[`video${ind}`] = true
+ this.monitor[`type${ind}`] = item.name
+ if (item.status == 0) {
+ this.isShowOutline[`video${ind}`] = true
+ }
+
+ this.getDevices(item.channelId).then(res => {
+ this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`, `${ind}`)
+ })
+ }
+ })
+ })
+ },
dialogBeforeClose () {
this.dialogVisible = false
@@ -976,6 +1049,112 @@
}
},
+ // 绘制新增路线
+ draw (type) {
+ this.drawType = 1
+
+ drwaPlot && drwaPlot.draw(type, overlay => {
+ if (overlay) {
+ drawPlotLayers.addOverlay(overlay)
+ drwaPlot.edit(overlay)
+ if (overlay) {
+ drawPlotLayers.addOverlay(overlay)
+ drwaPlot.edit(overlay, (e) => {
+ this.drawDialogVisible = true
+ this.range = 100
+ this.drawPlotData = overlay
+ document.oncontextmenu = function () {
+ return false
+ }
+ // this.getRegionList(type, overlay)
+ })
+ }
+ }
+ }, { material: global.DC.Color.RED })
+ },
+
+ // 清楚绘制图层
+ removeDrawLayer () {
+ if (drawPlotLayers != null) {
+ drawPlotLayers.clear()
+ }
+ },
+
+ // 保存绘制的线面
+ saveDrawInfo () {
+ if (this.drawName == '') {
+ this.$message({
+ message: '请输入名称',
+ type: 'error'
+ })
+ } else {
+ let drawPositionStr = ''
+ let extent = 0
+
+ if (this.drawType == 1) {
+ // 获取线坐标
+ this.drawPlotData._positions.forEach(item => {
+ drawPositionStr += item._lng + ' ' + item._lat + ','
+ })
+ drawPositionStr = drawPositionStr.slice(0, drawPositionStr.length - 1)
+ // 求线长度
+ let linePosition = []
+ this.drawPlotData._positions.forEach(item => {
+ linePosition.push([item._lng, item._lat])
+ })
+ let line = this.$turf.lineString(linePosition)
+ let length = this.$turf.length(line, { units: 'kilometers' })
+ extent = length.toFixed(3)
+ }
+ this.insertRegionSaveList({ type: this.drawType, positions: drawPositionStr, name: this.drawName, extent: extent, width: this.range, color: this.chooseAddRangeColor })
+ this.drawDialogVisible = false
+ this.drawName = ''
+ if (drawPlotLayers != null) {
+ drawPlotLayers.clear()
+ }
+ // this.$EventBus.$emit('mapRemoveLayer', {
+ // layerName: 'monitoringLayers',
+ // type: 'VectorLayer'
+ // })
+ }
+ },
+
+ // 关闭新增路线弹窗
+ drawDialogBeforeClose () {
+ this.drawName = ''
+ if (drawPlotLayers != null) {
+ drawPlotLayers.clear()
+ }
+ this.$EventBus.$emit('mapRemoveLayer', {
+ layerName: 'monitoringLayers',
+ type: 'VectorLayer'
+ })
+ this.drawDialogVisible = false
+ },
+
+ // 取消绘制线面
+ cancelSaveDrawInfo () {
+ this.drawDialogBeforeClose()
+ },
+
+ // type线面类型, positions坐标, name名称, width线宽度, extent线长度或面面积
+ insertRegionSaveList (parmas) {
+ insertRegionSaveList(parmas).then(res => {
+ if (res.data.success) {
+ this.$message({
+ message: '保存成功',
+ type: 'warning'
+ })
+ this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
+ } else {
+ this.$message({
+ message: '保存失败'
+ })
+ }
+
+ })
+ },
+
//#region
// enterVideoBox (num) {
@@ -1056,6 +1235,10 @@
this.flvPlayer.destroy()
this.flvPlayer = null
}
+
+ this.removeDrawLayer()
+
+ clearInterval(videoTimer)
}
}
@@ -1148,6 +1331,24 @@
}
}
+ .draw-btn {
+ margin: 8px;
+ margin-top: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ height: 26px;
+
+ .el-button {
+ flex: 1;
+ }
+
+ :deep(.el-button--primary) {
+ background-color: #1d5ce4;
+ border-color: #1d5ce4;
+ }
+ }
+
.list-show {
flex: 1;
--
Gitblit v1.9.3