Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
commit
5b8d002d5d
|
|
@ -1,15 +1,15 @@
|
|||
/*
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2020-07-07 16:03:23
|
||||
* @LastEditors: Light
|
||||
* @LastEditTime: 2022-11-14 18:00:12
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-11-22 14:37:59
|
||||
* @Description: 系统静态参数配置
|
||||
*/
|
||||
var _global = {}
|
||||
var CONFIGITEM = {
|
||||
// version: 'qingdao', //青岛
|
||||
// version: 'xihaian', // 西海岸
|
||||
version: 'dev', // 开发
|
||||
version: 'xihaian', // 西海岸
|
||||
// version: 'dev', // 开发
|
||||
// version: 'zhanTingDev', // 展厅dev (2022-09-13:姜永超让添加)
|
||||
// version: 'qingdao', // 测试
|
||||
//version: 'frp', // 内网穿透
|
||||
|
|
@ -68,6 +68,8 @@ var CONFIGITEM = {
|
|||
cameraUrl: '192.168.124.236:9537', // 远雄（不挂vpn可直接连）
|
||||
},
|
||||
backUrl: 'http://10.134.135.9:9797',
|
||||
// apiURL: 'http://10.134.135.92:8888/renren-admin',
|
||||
apiURL: 'http://192.168.124.233:8888/ucs-admin',
|
||||
previewUrl: 'http://10.134.135.9:9796/',
|
||||
// websocketURL: '10.134.135.9:8888/ucs-admin', // 正式环境
|
||||
// websocketURL: '10.134.135.92:8888/ucs-admin', // 测试环境
|
||||
|
|
|
|||
|
|
@ -1675,10 +1675,9 @@ export function MapFun(mapObj) {
|
|||
// })
|
||||
|
||||
// }
|
||||
//_removeLayerByLayerName(layerName)
|
||||
_removeLayerByLayerName(layerName)
|
||||
let selectedLayerList = [];
|
||||
let layers = null;
|
||||
let clickDataList = [];
|
||||
// 判断是否是聚合图层
|
||||
layers = createMarkerClusterLayer('', map)
|
||||
const icon1 = createDefaultFeatureStyle({
|
||||
|
|
@ -1734,6 +1733,7 @@ export function MapFun(mapObj) {
|
|||
// })
|
||||
// }
|
||||
marker.on('click', e => {
|
||||
let clickDataList = [];
|
||||
//console.log('点位数据', e)
|
||||
//console.log('点位数据1', e.sourceTarget.resourceData)
|
||||
clickDataList.push(e.sourceTarget.resourceData);
|
||||
|
|
|
|||
|
|
@ -66,26 +66,26 @@ function createMarkerClusterLayer(layerClassName, mapObj) {
|
|||
} else {
|
||||
// 使用默认图标
|
||||
markerClusterLayer = L.markerClusterGroup({
|
||||
iconCreateFunction(cluster) {
|
||||
const markers = cluster.getAllChildMarkers()
|
||||
let n = 0
|
||||
for (let i = 0; i < markers.length; i++) {
|
||||
n += markers[i].number
|
||||
}
|
||||
return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
|
||||
},
|
||||
// iconCreateFunction(cluster) {
|
||||
// const markers = cluster.getAllChildMarkers()
|
||||
// let n = 0
|
||||
// for (let i = 0; i < markers.length; i++) {
|
||||
// n += markers[i].number
|
||||
// }
|
||||
// return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
|
||||
// },
|
||||
// 是否允许指定 PolylineOptions 样式 spider
|
||||
spiderfyOnMaxZoom: false,
|
||||
// 是否显示标记的边界
|
||||
showCoverageOnHover: false,
|
||||
showCoverageOnHover: true,
|
||||
// 是否点击展开
|
||||
zoomToBoundsOnClick: true,
|
||||
maxClusterRadius: 80,
|
||||
})
|
||||
markerClusterLayer.on('clusterclick', function(a) {
|
||||
let clusterList = [];
|
||||
//console.log('cluster ' + a.layer.getAllChildMarkers());
|
||||
if (a.layer.getAllChildMarkers().length < 50) {
|
||||
let clusterList = [];
|
||||
for (var i = 0; i < a.layer.getAllChildMarkers().length; i++) {
|
||||
//console.log('yyyyyyyyy', a.layer.getAllChildMarkers()[i].resourceData);
|
||||
//console.log('yyyyyyyyy', a.layer.getAllChildMarkers()[i].fData);
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@
|
|||
</div>
|
||||
|
||||
<!-- 西海岸--附件上传 -->
|
||||
<div v-if="iskfq && isXiHaiAn">
|
||||
<div v-if="isXiHaiAn">
|
||||
<a-row style="margin-top: 0.4rem">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
|
|
@ -991,7 +991,7 @@
|
|||
|
||||
.form-container {
|
||||
padding: 20px 20px 30px 20px;
|
||||
|
||||
overflow: hidden;
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
|
|
|
|||
|
|
@ -2,182 +2,239 @@
|
|||
海康H5Player
|
||||
-->
|
||||
<template>
|
||||
<div id='player' style="width:800px;height:600px;z-index:9999"></div>
|
||||
<div id="player" style="width: 800px; height: 600px; z-index: 9999"></div>
|
||||
</template>
|
||||
<script>
|
||||
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
|
||||
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
||||
import { message } from 'ant-design-vue'
|
||||
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
|
||||
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
||||
import { message } from 'ant-design-vue'
|
||||
export default {
|
||||
name: 'H5Player',
|
||||
props: {
|
||||
videoUrl:{
|
||||
videoUrl: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
index:{
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
stopFlag: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
player: null,
|
||||
splitNum: 1,
|
||||
mseSupport: MSE_IS_SUPPORT,
|
||||
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
|
||||
tabActive: 'decoder',
|
||||
urls: {
|
||||
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
|
||||
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
|
||||
playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
|
||||
},
|
||||
playback: {
|
||||
startTime: '2021-07-26T00:00:00',
|
||||
endTime: '2021-07-26T23:59:59',
|
||||
valueFormat: '',
|
||||
seekStart: '2021-07-26T12:00:00',
|
||||
rate: ''
|
||||
},
|
||||
muted: true,
|
||||
volume: 50,
|
||||
volumeOnSvg: {
|
||||
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
|
||||
},
|
||||
volumeOffSvg: {
|
||||
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
|
||||
},
|
||||
recordStartState: 0,
|
||||
recordStartText: '录像'
|
||||
player: null,
|
||||
splitNum: 1,
|
||||
mseSupport: MSE_IS_SUPPORT,
|
||||
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
|
||||
tabActive: 'decoder',
|
||||
urls: {
|
||||
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
|
||||
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
|
||||
playback:
|
||||
'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
|
||||
},
|
||||
playback: {
|
||||
startTime: '2021-07-26T00:00:00',
|
||||
endTime: '2021-07-26T23:59:59',
|
||||
valueFormat: '',
|
||||
seekStart: '2021-07-26T12:00:00',
|
||||
rate: '',
|
||||
},
|
||||
muted: true,
|
||||
volume: 50,
|
||||
volumeOnSvg: {
|
||||
template:
|
||||
'<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
|
||||
},
|
||||
volumeOffSvg: {
|
||||
template:
|
||||
'<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
|
||||
},
|
||||
recordStartState: 0,
|
||||
recordStartText: '录像',
|
||||
}
|
||||
},
|
||||
created(){
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.createPlayer()
|
||||
this.arrangeWindow()
|
||||
//videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放，index根据选中的个数
|
||||
this.realplay(this.videoUrl,0);
|
||||
this.realplay(this.videoUrl, 0)
|
||||
//this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
|
||||
},
|
||||
watch: {
|
||||
videoUrl: {
|
||||
// 数据发生变化就会调用这个函数
|
||||
handler(newVal, oldVal) {
|
||||
console.log('oldVal:', oldVal)
|
||||
console.log('newVal:', newVal)
|
||||
//this.realplay(newVal,0);
|
||||
},
|
||||
// 立即处理 进入页面就触发
|
||||
immediate: true
|
||||
}
|
||||
watch: {
|
||||
videoUrl: {
|
||||
// 数据发生变化就会调用这个函数
|
||||
handler(newVal, oldVal) {
|
||||
console.log('oldVal:', oldVal)
|
||||
console.log('newVal:', newVal)
|
||||
if (newVal) {
|
||||
this.realplay(newVal, 0)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 海康视频初始化加载
|
||||
init () {
|
||||
// 设置播放容器的宽高并监听窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
this.player.JS_Resize()
|
||||
})
|
||||
},
|
||||
createPlayer () {
|
||||
//console.log('this.index',this.index);
|
||||
this.player = new window.JSPlugin({
|
||||
//szId: 'player'+this.index,
|
||||
szId: 'player',
|
||||
szBasePath: "/util/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
|
||||
iMaxSplit: 4,
|
||||
iCurrentSplit: 4,
|
||||
openDebug: true,
|
||||
oStyle: {
|
||||
borderSelect: '#FFCC00',
|
||||
}
|
||||
})
|
||||
// 事件回调绑定
|
||||
this.player.JS_SetWindowControlCallback({
|
||||
windowEventSelect: function (iWndIndex) { //插件选中窗口回调
|
||||
console.log('windowSelect callback: ', iWndIndex);
|
||||
},
|
||||
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
|
||||
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
|
||||
},
|
||||
windowEventOver: function (iWndIndex) { //鼠标移过回调
|
||||
//console.log(iWndIndex);
|
||||
},
|
||||
windowEventOut: function (iWndIndex) { //鼠标移出回调
|
||||
//console.log(iWndIndex);
|
||||
},
|
||||
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
|
||||
//console.log(iWndIndex);
|
||||
},
|
||||
windowFullCcreenChange: function (bFull) { //全屏切换回调
|
||||
console.log('fullScreen callback: ', bFull);
|
||||
},
|
||||
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
|
||||
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
|
||||
},
|
||||
performanceLack: function () { //性能不足回调
|
||||
console.log('performanceLack callback: ');
|
||||
}
|
||||
});
|
||||
},
|
||||
arrangeWindow () {
|
||||
const splitNum = this.splitNum
|
||||
this.player.JS_ArrangeWindow(splitNum).then(
|
||||
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
|
||||
e => { console.error(e) }
|
||||
)
|
||||
},
|
||||
// 初始化结束
|
||||
// 视频预览
|
||||
realplay (playURL, index1) {
|
||||
this.mode = 1 //解码方式：0普通模式 1高级模式
|
||||
const { player, mode, urls } = this,
|
||||
index = player.currentWindowIndex
|
||||
// playURL = this.realplay
|
||||
|
||||
player.JS_Play(playURL, { playURL, mode }, index1).then(
|
||||
() => {
|
||||
console.log('realplay success')
|
||||
},
|
||||
e => {
|
||||
console.error(e);
|
||||
message.error('请联系视频提供方!')
|
||||
}
|
||||
)
|
||||
},
|
||||
// 关闭所有视频
|
||||
stopAllPlay () {
|
||||
this.player.JS_StopRealPlayAll().then(
|
||||
() => {
|
||||
this.playback.rate = 0
|
||||
console.log('stopAllPlay success')
|
||||
this.closeVideoTree()
|
||||
},
|
||||
e => { console.error(e) }
|
||||
)
|
||||
},
|
||||
// 关闭单个视频
|
||||
stopPlay () {
|
||||
this.player.JS_Stop().then(
|
||||
() => {
|
||||
this.playback.rate = 0
|
||||
console.log('stop realplay success')
|
||||
// this.closeVideoTree()
|
||||
const index = this.player.currentWindowIndex
|
||||
this.selectAisle(this.videoList[index], index)
|
||||
},
|
||||
e => { console.error(e) }
|
||||
)
|
||||
// 立即处理 进入页面就触发
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 海康视频初始化加载
|
||||
init() {
|
||||
// 设置播放容器的宽高并监听窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
this.player.JS_Resize()
|
||||
})
|
||||
},
|
||||
createPlayer() {
|
||||
//console.log('this.index',this.index);
|
||||
this.player = new window.JSPlugin({
|
||||
//szId: 'player'+this.index,
|
||||
szId: 'player',
|
||||
szBasePath: '/util/', //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
|
||||
iMaxSplit: 4,
|
||||
iCurrentSplit: 4,
|
||||
openDebug: true,
|
||||
oStyle: {
|
||||
borderSelect: '#FFCC00',
|
||||
},
|
||||
})
|
||||
let that = this
|
||||
// 事件回调绑定
|
||||
this.player.JS_SetWindowControlCallback({
|
||||
windowEventSelect: function (iWndIndex) {
|
||||
//插件选中窗口回调
|
||||
console.log('windowSelect callback: ', iWndIndex)
|
||||
},
|
||||
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
|
||||
//插件错误回调
|
||||
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
|
||||
message.error('取流异常,请稍后尝试')
|
||||
},
|
||||
windowEventOver: function (iWndIndex) {
|
||||
//鼠标移过回调
|
||||
//console.log(iWndIndex);
|
||||
},
|
||||
windowEventOut: function (iWndIndex) {
|
||||
//鼠标移出回调
|
||||
//console.log(iWndIndex);
|
||||
},
|
||||
windowEventUp: function (iWndIndex) {
|
||||
//鼠标mouseup事件回调
|
||||
//console.log(iWndIndex);
|
||||
},
|
||||
windowFullCcreenChange: function (bFull) {
|
||||
//全屏切换回调
|
||||
console.log('fullScreen callback: ', bFull)
|
||||
},
|
||||
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
|
||||
//首帧显示回调
|
||||
console.log(
|
||||
'firstFrame loaded callback: ',
|
||||
iWndIndex,
|
||||
iWidth,
|
||||
iHeight
|
||||
)
|
||||
// 首帧绘制完成后停止
|
||||
that.pausePlay(iWndIndex)
|
||||
},
|
||||
performanceLack: function () {
|
||||
//性能不足回调
|
||||
console.log('performanceLack callback: ')
|
||||
},
|
||||
})
|
||||
},
|
||||
arrangeWindow() {
|
||||
const splitNum = this.splitNum
|
||||
this.player.JS_ArrangeWindow(splitNum).then(
|
||||
() => {
|
||||
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
|
||||
},
|
||||
(e) => {
|
||||
console.error(e)
|
||||
}
|
||||
)
|
||||
},
|
||||
// 初始化结束
|
||||
// 视频预览
|
||||
realplay(playURL, index1) {
|
||||
this.mode = 1 //解码方式：0普通模式 1高级模式
|
||||
const { player, mode, urls } = this,
|
||||
index = player.currentWindowIndex
|
||||
// playURL = this.realplay
|
||||
console.log('视频播放地址', playURL)
|
||||
// const startTime = {
|
||||
// startTime: ,
|
||||
// }
|
||||
// const endTime = {
|
||||
// endTime: ,
|
||||
// }
|
||||
player
|
||||
.JS_Play(
|
||||
playURL,
|
||||
{ playURL, mode },
|
||||
index1,
|
||||
'2022-11-22T10:00:00Z',
|
||||
'2022-11-22T11:00:00Z'
|
||||
)
|
||||
.then(
|
||||
() => {
|
||||
console.log('realplay success')
|
||||
},
|
||||
(e) => {
|
||||
console.error(e)
|
||||
// message.error('错误代码:' + e)
|
||||
}
|
||||
)
|
||||
},
|
||||
// 关闭所有视频
|
||||
stopAllPlay() {
|
||||
this.player.JS_StopRealPlayAll().then(
|
||||
() => {
|
||||
this.playback.rate = 0
|
||||
console.log('stopAllPlay success')
|
||||
this.closeVideoTree()
|
||||
},
|
||||
(e) => {
|
||||
console.error(e)
|
||||
}
|
||||
)
|
||||
},
|
||||
// 暂停单个视频
|
||||
pausePlay(index) {
|
||||
this.player.JS_Pause(index).then(
|
||||
() => {
|
||||
console.log('暂停成功')
|
||||
},
|
||||
(e) => {
|
||||
console.error(e)
|
||||
}
|
||||
)
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
console.log('关闭所有视频')
|
||||
this.stopAllPlay()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.tiled-map {
|
||||
.video-player {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.play-button {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
left: 350px;
|
||||
z-index: 9;
|
||||
top: 240px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: Light
|
||||
* @Date: 2022-11-18 11:53:43
|
||||
* @LastEditors: Light
|
||||
* @LastEditTime: 2022-11-22 11:57:18
|
||||
* @LastEditTime: 2022-11-22 14:50:32
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<a-list size="small" bordered :data-source="dataList.requested">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<div class="name">
|
||||
<div class="name" @click="selectItem(item)">
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.cameraInfo.channelName }}</template>
|
||||
{{ item.cameraInfo.channelName }}
|
||||
|
|
@ -96,6 +96,32 @@
|
|||
</template>
|
||||
</a-table>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
v-if="dataList.selectItem.cameraInfo"
|
||||
v-model:visible="showVisible"
|
||||
:title="dataList.selectItem.cameraInfo.channelName"
|
||||
:footer="null"
|
||||
@cancel="clear"
|
||||
>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div
|
||||
style="width: 100%; height: 100%; position: relative">
|
||||
<div class="waterMark waterMark-left-top">
|
||||
{{ userInfo.usernameShow }}
|
||||
</div>
|
||||
<div class="waterMark waterMark-right-top">
|
||||
{{ userInfo.realNameShow }}
|
||||
</div>
|
||||
<div class="waterMark waterMark-left-bottom">
|
||||
{{ userInfo.usernameShow }}
|
||||
</div>
|
||||
<div class="waterMark waterMark-right-bottom">
|
||||
{{ userInfo.realNameShow }}
|
||||
</div>
|
||||
<h5-player :video-url="videoUrl"></h5-player>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
|
|
@ -110,7 +136,10 @@
|
|||
import { message } from 'ant-design-vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { useRouter } from 'vue-router'
|
||||
const dataList = reactive({ toBeApplied: [], requested: [] })
|
||||
import H5Player from '@/views/home/components/H5Player.vue'
|
||||
import {getCameraLiveStream} from '@/api/file'
|
||||
const dataList = reactive({ toBeApplied: [], requested: [], selectItem: {} })
|
||||
const showVisible = ref(false)
|
||||
// 待办
|
||||
const addWacFlag = ref(true)
|
||||
const delWacFlag = ref(true)
|
||||
|
|
@ -214,6 +243,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
const selectItem = (item) => {
|
||||
if (item.approveStatus == '通过') {
|
||||
dataList.selectItem = item
|
||||
getVideoUrl(item.cameraInfo);
|
||||
} else {
|
||||
dataList.selectItem = {}
|
||||
showVisible.value = false
|
||||
}
|
||||
}
|
||||
const handleOk = () => {
|
||||
endProcess({ instanceId: instanceId.value }).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
|
|
@ -226,10 +264,13 @@
|
|||
})
|
||||
}
|
||||
const clear = () => {
|
||||
console.log('清空')
|
||||
instanceId.value = ''
|
||||
showArr.value = []
|
||||
visible.value = false
|
||||
delApply.value = true
|
||||
dataList.selectItem = {}
|
||||
showVisible.value = false
|
||||
}
|
||||
const init = () => {
|
||||
willApplyCameraSelect().then((res) => {
|
||||
|
|
@ -259,6 +300,18 @@
|
|||
}
|
||||
init()
|
||||
initApply()
|
||||
const videoUrl = ref('')
|
||||
//获取视频控件所需播放地址
|
||||
const getVideoUrl = (data) =>{
|
||||
let param = data;
|
||||
getCameraLiveStream(param).then((res) => {
|
||||
//console.log('555555rrrrr',res)
|
||||
if(res.data.data){
|
||||
videoUrl.value = res.data.data.url;
|
||||
}
|
||||
showVisible.value = true
|
||||
})
|
||||
}
|
||||
mybus.on('selectCamera', (obj) => {
|
||||
// 判断最多10条
|
||||
if (dataList.toBeApplied.length + dataList.requested.length >= 10) {
|
||||
|
|
@ -338,5 +391,44 @@
|
|||
width: 2.5rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.waterMark {
|
||||
position: absolute;
|
||||
z-index: 99999999;
|
||||
color: #0058e1;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
opacity: 0.4;
|
||||
transform: rotate(-25deg);
|
||||
width: 470px;
|
||||
}
|
||||
|
||||
// 左上
|
||||
.waterMark-left-top {
|
||||
left: 50px;
|
||||
top: 100px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// 右上
|
||||
.waterMark-right-top {
|
||||
right: 50px;
|
||||
top: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// 左下
|
||||
.waterMark-left-bottom {
|
||||
left: 50px;
|
||||
bottom: 100px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// 右下
|
||||
.waterMark-right-bottom {
|
||||
right: 50px;
|
||||
bottom: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -613,16 +613,40 @@
|
|||
</template>
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- 地图上点或者聚合图层点击后出现的操作弹窗 -->
|
||||
<a-modal
|
||||
<!-- 地图上点或者聚合图层点击后出现的操作弹窗 -->
|
||||
<a-modal
|
||||
wrapClassName="camera-popup"
|
||||
v-model:visible="operationPopupFlag"
|
||||
:width="1000"
|
||||
:title="'视频监控点选择'"
|
||||
footer={null}
|
||||
destroyOnClose
|
||||
footer="{null}"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div
|
||||
style="width: 100%; height: 100%; position: relative"
|
||||
v-show="isXiHaiAn"
|
||||
>
|
||||
<!-- 西海岸--预览视频--遮罩 todo-->
|
||||
<div class="video-cover-new" @click="videoShowMsg"></div>
|
||||
<div class="waterMark waterMark-left-top">
|
||||
{{ userInfo.usernameShow }}
|
||||
</div>
|
||||
<div class="waterMark waterMark-right-top">
|
||||
{{ userInfo.realNameShow }}
|
||||
</div>
|
||||
<div class="waterMark waterMark-left-bottom">
|
||||
{{ userInfo.usernameShow }}
|
||||
</div>
|
||||
<div class="waterMark waterMark-right-bottom">
|
||||
{{ userInfo.realNameShow }}
|
||||
</div>
|
||||
<!--地图上点击之后弹出的操作弹窗-->
|
||||
<camera-popup-on-map :camera-Data-List="cameraDataList"></camera-popup-on-map>
|
||||
<camera-popup-on-map :camera-Data-List="cameraDataList" :reset-flag="resetFlag"></camera-popup-on-map>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -960,13 +984,13 @@
|
|||
let pointData = new Proxy(point.data, point)
|
||||
onSelectChange(pointData, !check, '', '', 'proxy')
|
||||
})
|
||||
//聚合图层的弹窗openOperationPopup
|
||||
mybus.off('openOperationPopup')
|
||||
mybus.on('openOperationPopup', (data) => {
|
||||
//console.log('pppppppppppppp',data);
|
||||
cameraDataList.value = data;
|
||||
operationPopupFlag.value = true;
|
||||
})
|
||||
//聚合图层的弹窗openOperationPopup
|
||||
mybus.off('openOperationPopup')
|
||||
mybus.on('openOperationPopup', (data) => {
|
||||
//console.log('pppppppppppppp',data);
|
||||
cameraDataList.value = data
|
||||
operationPopupFlag.value = true
|
||||
})
|
||||
})
|
||||
const selectedList = ref([])
|
||||
const selectedRowKeys = ref([])
|
||||
|
|
@ -2244,6 +2268,14 @@
|
|||
|
||||
//地图视频操作弹窗
|
||||
const operationPopupFlag = ref(false)//地图操作弹窗显示标志位
|
||||
//关闭地图弹窗重新弹窗数字显示标志位
|
||||
const resetFlag = ref(false)
|
||||
|
||||
//地图弹窗右上角按钮关闭事件
|
||||
const handleCancel = () => {
|
||||
//console.log('是否关');
|
||||
resetFlag.value = true
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.infrastructrueBox {
|
||||
|
|
@ -2390,7 +2422,7 @@
|
|||
.map-contain {
|
||||
// width: 9.46rem;
|
||||
height: 6.9rem;
|
||||
margin-left:0;
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -2599,14 +2631,14 @@
|
|||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.camera-popup{
|
||||
.ant-modal-body {
|
||||
.camera-popup {
|
||||
.ant-modal-body {
|
||||
height: 720px !important;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
padding:14px;
|
||||
padding: 14px;
|
||||
}
|
||||
.ant-modal-footer{
|
||||
.ant-modal-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -2709,6 +2741,19 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.video-cover-new {
|
||||
width: 798px;
|
||||
height: 600px;
|
||||
position: absolute;
|
||||
left: 85px;
|
||||
top: 15px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
z-index: 99999999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.batch-video-cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</a-carousel>
|
||||
<div class="operation-content" style="position:ab">
|
||||
<div class="video-content">
|
||||
<h5-player :video-url="videoUrl"></h5-player>
|
||||
<h5-player :video-url="videoUrl" :stop-flag="selectedFlag"></h5-player>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
<span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span>
|
||||
|
|
@ -70,6 +70,10 @@
|
|||
return {}
|
||||
},
|
||||
},
|
||||
resetFlag:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
|
||||
|
|
@ -79,12 +83,25 @@
|
|||
// debug: true,
|
||||
// }),
|
||||
// },
|
||||
watch: {
|
||||
resetFlag: {
|
||||
// 关闭弹窗刷新底部个数显示数值
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.defaultIndex = 0;
|
||||
}
|
||||
},
|
||||
// 立即处理 进入页面就触发
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openVideo: false,
|
||||
videoStream: '',
|
||||
videoUrl:'', //视频预览url
|
||||
defaultIndex:0,//默认显示列表中的对一个
|
||||
selectedFlag:true
|
||||
// router:useRouter()
|
||||
}
|
||||
},
|
||||
|
|
@ -190,8 +207,9 @@
|
|||
},
|
||||
//查看下一个
|
||||
handleNext(){
|
||||
if(this.defaultIndex === this.cameraDataList.length){
|
||||
this.defaultIndex = this.cameraDataList.length;
|
||||
let lastIndex = this.cameraDataList.length-1;
|
||||
if(this.defaultIndex === Number(lastIndex)){
|
||||
this.defaultIndex = 0;
|
||||
console.log('opopopop',this.cameraDataList[0]);
|
||||
this.getVideoUrl(this.cameraDataList[0]);
|
||||
}else{
|
||||
|
|
|
|||
|
|
@ -431,7 +431,7 @@ import { ElMessage } from 'element-plus'
|
|||
}
|
||||
}
|
||||
}
|
||||
params.type='0';
|
||||
//params.type='0';
|
||||
getCameraByCondition(params).then((res) => {
|
||||
//console.log('根据parent查询摄像头44444', res.data.data)
|
||||
if(type=='map'){
|
||||
|
|
@ -441,11 +441,11 @@ import { ElMessage } from 'element-plus'
|
|||
mybus.emit('getListByMap', params);
|
||||
}
|
||||
this.pointAllData = res.data.data;
|
||||
if(this.mapSearchParam.type!=0){
|
||||
if(this.mapSearchParam.type!=0)
|
||||
this.addResourceTomap('videoMap', res.data.data)
|
||||
}
|
||||
|
||||
else
|
||||
{this.addResourceTomap('videoMap', []) } //查询全部时不打点}
|
||||
this.addResourceTomap('videoMap', []) //查询全部时不打点}
|
||||
|
||||
})
|
||||
}
|
||||
|
|
@ -615,7 +615,7 @@ import { ElMessage } from 'element-plus'
|
|||
this.getMapPoint(dataEvent, 'icon_camare.png', type)
|
||||
},
|
||||
getMapPoint(data, img, type) {
|
||||
this.hiMapFun.clearAllLayers();
|
||||
//this.hiMapFun.clearAllLayers();
|
||||
const features = data
|
||||
// debugger
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||
|
|
|
|||
Loading…
Reference in New Issue