From 9bc4dcfe0928011e4e986014a2bb5bf3b897e292 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Mon, 30 Jan 2023 08:46:47 +0800
Subject: [PATCH] 活动监控
---
prod.env.js | 3
src/views/video/region.vue | 280 ++++++++++++++++++++++++++++++++--------
src/views/activity/index.vue | 76 ++++++++++
src/api/video/index.js | 4
4 files changed, 304 insertions(+), 59 deletions(-)
diff --git a/prod.env.js b/prod.env.js
index f8351cc..3872eaa 100644
--- a/prod.env.js
+++ b/prod.env.js
@@ -27,7 +27,8 @@
// 视频监控平台
// 本地开发
- VUE_APP_OUTER_NET_VIDEO: 'http://192.168.0.126:18185/api',
+ // VUE_APP_OUTER_NET_VIDEO: 'http://192.168.0.126:18185/api',
+ VUE_APP_OUTER_NET_VIDEO: 'http://192.168.0.129:18185/api',
// 内网部署
VUE_APP_INTRANET_VIDEO: 'http://10.141.11.11:18185/api',
}
\ No newline at end of file
diff --git a/src/api/video/index.js b/src/api/video/index.js
index 21d4a56..e7624a0 100644
--- a/src/api/video/index.js
+++ b/src/api/video/index.js
@@ -41,7 +41,9 @@
export const getDevices = (channelId) => {
return request({
// 内网使用地址，外网把36110000002009999000更换掉
- url: `/play/start/36110000002009999000/${channelId}`,
+ // url: `/play/start/36110000002009999000/${channelId}`,
+ // 外网使用地址
+ url: `/play/start/34020000002000000003/${channelId}`,
method: 'get',
requestBaseUrl: 'outside'
})
diff --git a/src/views/activity/index.vue b/src/views/activity/index.vue
index 6cf5b4f..0f8aca3 100644
--- a/src/views/activity/index.vue
+++ b/src/views/activity/index.vue
@@ -466,6 +466,7 @@
<script>
import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, updateActivityCar, getServiceDictionary, getActivityType, addSecurityPlot, getSecurityPlotList, updateSecurityPlot } from '@/api/activity/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
+import { getRegionList, getDevices } from '@/api/video/index.js'
import flvjs from 'flv.js'
let analyseLayer = null
@@ -677,6 +678,16 @@
video7: true,
video8: true,
},
+ flvListPlayer: {
+ flvPlayer1: null,
+ flvPlayer2: null,
+ flvPlayer3: null,
+ flvPlayer4: null,
+ flvPlayer5: null,
+ flvPlayer6: null,
+ flvPlayer7: null,
+ flvPlayer8: null,
+ },
}
},
created () {
@@ -694,6 +705,9 @@
this.getCarList()
this.getSecurityList(this.currentPage, this.pagesize)
+
+
+
},
mounted () {
this.$parent.$parent.resize('400px', true)
@@ -866,6 +880,7 @@
layerName: 'newCarDrawLayers',
type: 'VectorLayer'
})
+ polylineAreaLayer.clear()
getSecurityCarList(securityId).then(res => {
this.isHavePoliceCar = res.data.data.some(item => {
return item.type == 3
@@ -892,10 +907,14 @@
let polygon = new global.DC.Polygon(coords)
polygon.setStyle({
material: global.DC.Color.RED.withAlpha(0.4)
-
})
polylineAreaLayer.addOverlay(polygon)
// polylineAreaLayer.show = false
+ let positionStr = ''
+ coords.forEach(item => {
+ positionStr += item[0] + ',' + item[1] + ';'
+ })
+ this.getRegionList(positionStr)
}
this.$EventBus.$emit('layerPolylineAdd', {
layerName: 'newCarDrawLayers',
@@ -1530,6 +1549,61 @@
this.searchExtensivelyValue = ''
this.searchExtensivelyChange()
},
+
+ getRegionList (positionNewStr) {
+ getRegionList(1, 15, positionNewStr).then(res => {
+ console.log(11, res.data.data.list)
+ let monitorData = res.data.data.list
+ this.monitorOption = []
+ monitorData.forEach((item, index) => {
+ let flvAddress = ''
+ getDevices(item.channelId).then(res => {
+ if ('data' in res.data) {
+ flvAddress = res.data.data.flv
+ console.log(1111, flvAddress)
+ } else {
+ flvAddress = 'nodata'
+ console.log(222, flvAddress)
+ }
+ this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvAddress}` })
+ if (index == monitorData.length - 1) {
+ this.monitorOption.forEach((itemm, indexx) => {
+ if (indexx < 4) {
+ this.monitor[`type${indexx + 5}`] = itemm.label
+ this.playVideoList(`flvPlayer${indexx + 5}`, `${itemm.flvUrl}`, `videoElement${indexx + 5}`)
+ }
+ })
+ }
+ })
+
+ })
+ })
+ },
+
+ playVideoList (flvItemPlayer, flvUrl, videoEleName) {
+ if (this.flvListPlayer[flvItemPlayer] != null) {
+ this.flvListPlayer[flvItemPlayer].pause()
+ this.flvListPlayer[flvItemPlayer].unload()
+ this.flvListPlayer[flvItemPlayer].detachMediaElement()
+ this.flvListPlayer[flvItemPlayer].destroy()
+ this.flvListPlayer[flvItemPlayer] = null
+ }
+
+ if (flvjs.isSupported() && flvUrl != 'nodata') {
+ let videoElement = document.getElementById(videoEleName)
+ this.flvListPlayer[flvItemPlayer] = flvjs.createPlayer({
+ type: 'flv',
+ isLive: true,
+ hasAudio: false,
+ url: flvUrl
+ })
+ this.flvListPlayer[flvItemPlayer].attachMediaElement(videoElement)
+ this.flvListPlayer[flvItemPlayer].load()
+ this.flvListPlayer[flvItemPlayer].play()
+ }
+ },
+
+
},
computed: {
diff --git a/src/views/video/region.vue b/src/views/video/region.vue
index 31cc3b1..f46ab75 100644
--- a/src/views/video/region.vue
+++ b/src/views/video/region.vue
@@ -15,22 +15,33 @@
<div v-show="boxShow" class="container-content">
<div class="search-box">
范围名称：
- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
+ <input
+ v-model="searchValue"
+ @input="searchChange"
+ type="text"
+ placeholder="请输入搜索条件"
+ />
<button @click="searchClick" class="el-icon-search"></button>
</div>
<div v-show="true" class="search-val-box">
- <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
- </div>
+ <div
+ @click="searchVlaClick(item)"
+ v-for="(item, index) in searchArray"
+ :key="index"
+ >{{ item.name }}</div>
</div>
<div class="list-show">
<div class="car-list">
<div class="list-box">
- <el-table :data="saveRangeList" style="width: 100%"
+ <el-table
+ :data="saveRangeList"
+ style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
- @cell-click="rowClick">
+ @cell-click="rowClick"
+ >
<el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
<el-table-column prop="type" label="范围类型" min-width="50%">
<template slot-scope="scope">
@@ -40,11 +51,20 @@
</el-table-column>
<el-table-column prop="id" label="操作" min-width="50%">
<template slot-scope="scope">
- <el-button @click="flytoRange(scope.row)" type="text" size="small" title="定位">
+ <el-button
+ @click="flytoRange(scope.row)"
+ type="text"
+ size="small"
+ title="定位"
+ >
<i class="el-icon-location"></i>
</el-button>
- <el-button @click="deleteRegionSaveList(scope.row.id)" type="text" size="small"
- title="删除">
+ <el-button
+ @click="deleteRegionSaveList(scope.row.id)"
+ type="text"
+ size="small"
+ title="删除"
+ >
<i class="el-icon-delete"></i>
</el-button>
</template>
@@ -52,9 +72,14 @@
</el-table>
</div>
<div class="pages">
- <el-pagination background layout="prev, pager, next" :page-size="pagesize"
- :page-count="pagesCount" :current-page="currentPage"
- @current-change="handleCurrentChange"></el-pagination>
+ <el-pagination
+ background
+ layout="prev, pager, next"
+ :page-size="pagesize"
+ :page-count="pagesCount"
+ :current-page="currentPage"
+ @current-change="handleCurrentChange"
+ ></el-pagination>
</div>
</div>
</div>
@@ -62,104 +87,247 @@
</div>
<div class="item video1" v-show="isShowVideo.video1">
<div class="select" v-show="isShowSelect.video1">
- <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })"
- placeholder="请选择" ref="videoSelect1">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <el-select
+ size="small"
+ v-model="monitor.type1"
+ @change="((val) => { navClick(val, 1) })"
+ placeholder="请选择"
+ ref="videoSelect1"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
<div class="video">
- <video id="videoElement1" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <video
+ id="videoElement1"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
</div>
<div class="item video2" v-show="isShowVideo.video2">
<div class="select" v-show="isShowSelect.video2">
- <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })"
- placeholder="请选择" ref="videoSelect2">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <el-select
+ size="small"
+ v-model="monitor.type2"
+ @change="((val) => { navClick(val, 2) })"
+ placeholder="请选择"
+ ref="videoSelect2"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
<div class="video">
- <video id="videoElement2" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <video
+ id="videoElement2"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
</div>
<div class="item video3" v-show="isShowVideo.video3">
<div class="select" v-show="isShowSelect.video3">
- <el-select size="small" v-model="monitor.type3" @change="((val) => { navClick(val, 3) })"
- placeholder="请选择" ref="videoSelect3">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <el-select
+ size="small"
+ v-model="monitor.type3"
+ @change="((val) => { navClick(val, 3) })"
+ placeholder="请选择"
+ ref="videoSelect3"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
<div class="video">
- <video id="videoElement3" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <video
+ id="videoElement3"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
</div>
<div class="item video4" v-show="isShowVideo.video4">
<div class="select" v-show="isShowSelect.video4">
- <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })"
- placeholder="请选择" ref="videoSelect4">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <el-select
+ size="small"
+ v-model="monitor.type4"
+ @change="((val) => { navClick(val, 4) })"
+ placeholder="请选择"
+ ref="videoSelect4"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
<div class="video">
- <video id="videoElement4" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <video
+ id="videoElement4"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
</div>
<div class="item video5" v-show="isShowVideo.video5">
<div class="select" v-show="isShowSelect.video5">
- <el-select size="small" v-model="monitor.type5" @change="((val) => { navClick(val, 5) })"
- placeholder="请选择" ref="videoSelect5">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <el-select
+ size="small"
+ v-model="monitor.type5"
+ @change="((val) => { navClick(val, 5) })"
+ placeholder="请选择"
+ ref="videoSelect5"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
<div class="video">
- <video id="videoElement5" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <video
+ id="videoElement5"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
</div>
<div class="item video6" v-show="isShowVideo.video6">
<div class="select" v-show="isShowSelect.video6">
- <el-select size="small" v-model="monitor.type6" @change="((val) => { navClick(val, 6) })"
- placeholder="请选择" ref="videoSelect6">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <el-select
+ size="small"
+ v-model="monitor.type6"
+ @change="((val) => { navClick(val, 6) })"
+ placeholder="请选择"
+ ref="videoSelect6"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
<div class="video">
- <video id="videoElement6" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <video
+ id="videoElement6"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
</div>
<div class="item video7" v-show="isShowVideo.video7">
<div class="select" v-show="isShowSelect.video7">
- <el-select size="small" v-model="monitor.type7" v-show="isShowSelect.video7"
- @change="((val) => { navClick(val, 7) })" placeholder="请选择" ref="videoSelect7">
- <el-option v-show="isShowSelect.video7" v-for="item in monitorOption" :key="item.value"
- :label="item.label" :value="item.value"></el-option>
+ <el-select
+ size="small"
+ v-model="monitor.type7"
+ v-show="isShowSelect.video7"
+ @change="((val) => { navClick(val, 7) })"
+ placeholder="请选择"
+ ref="videoSelect7"
+ >
+ <el-option
+ v-show="isShowSelect.video7"
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
<div class="video">
- <video id="videoElement7" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <video
+ id="videoElement7"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
</div>
<div class="item video8" v-show="isShowVideo.video8">
<div class="select" v-show="isShowSelect.video8">
- <el-select size="small" v-model="monitor.type8" @change="((val) => { navClick(val, 8) })"
- placeholder="请选择" ref="videoSelect8">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
+ <el-select
+ size="small"
+ v-model="monitor.type8"
+ @change="((val) => { navClick(val, 8) })"
+ placeholder="请选择"
+ ref="videoSelect8"
+ >
+ <el-option
+ v-for="item in monitorOption"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
</el-select>
</div>
<div class="video">
- <video id="videoElement8" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <video
+ id="videoElement8"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</div>
</div>
- <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
- :close-on-click-modal="true" class="car-video-box">
- <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
+ <el-dialog
+ :title="dialogTitle"
+ :modal="false"
+ :visible.sync="dialogVisible"
+ :before-close="dialogBeforeClose"
+ :close-on-click-modal="true"
+ class="car-video-box"
+ >
+ <video
+ id="videoElement"
+ autoplay
+ controls
+ width="100%"
+ height="100%"
+ style="object-fit: fill"
+ ></video>
</el-dialog>
</div>
</template>
@@ -723,7 +891,7 @@
border-radius: 10px;
overflow-y: auto;
- &>div {
+ & > div {
height: 100%;
padding: 0 10px;
line-height: 36px;
@@ -734,7 +902,7 @@
.list-show {
flex: 1;
- &>div {
+ & > div {
height: 100%;
display: flex;
flex-direction: column;
--
Gitblit v1.9.3