parent
5c2ed7256a
commit
e19fe4f585
@ -0,0 +1,215 @@ |
|||||||
|
<script setup> |
||||||
|
import { reactive,onMounted } from 'vue' |
||||||
|
import { getRtspUrl,getDevicePage,getPlaybackByTimeRtspUrl,getRegularVideoRecords } from './api' |
||||||
|
import { ElMessage } from 'element-plus' |
||||||
|
|
||||||
|
const state = reactive({ |
||||||
|
currentCameraIndex: 0, |
||||||
|
cameraList: [], |
||||||
|
cameraInfo: null |
||||||
|
}) |
||||||
|
const switchCamera = (index)=>{ |
||||||
|
state.currentCameraIndex = index; |
||||||
|
startVideo(); |
||||||
|
} |
||||||
|
const startVideo = () => { |
||||||
|
let index = state.currentCameraIndex; |
||||||
|
let channelCode = state.cameraList[index].units && state.cameraList[index].units[0].channels[0].channelCode; |
||||||
|
if(!channelCode){ |
||||||
|
ElMessage({ |
||||||
|
message: '设备异常', |
||||||
|
type: 'error' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
getRtspUrl({ |
||||||
|
data: { |
||||||
|
channelId: channelCode, |
||||||
|
dataType: "1", |
||||||
|
streamType: "1" |
||||||
|
} |
||||||
|
}).then(res=>{ |
||||||
|
state.cameraInfo = { |
||||||
|
channelId: channelCode, |
||||||
|
url: res.data.url, |
||||||
|
token: res.data.token |
||||||
|
} |
||||||
|
//发送消息给子页面 |
||||||
|
let video = document.getElementById('video') |
||||||
|
video.contentWindow.postMessage({ |
||||||
|
type: 'startVideo', |
||||||
|
data: {...state.cameraInfo} |
||||||
|
}, '*') |
||||||
|
}) |
||||||
|
} |
||||||
|
const playRecord = (date) => { |
||||||
|
let index = state.currentCameraIndex; |
||||||
|
let channelCode = state.cameraList[index].units && state.cameraList[index].units[0].channels[0].channelCode; |
||||||
|
if(!channelCode){ |
||||||
|
ElMessage({ |
||||||
|
message: '设备异常', |
||||||
|
type: 'error' |
||||||
|
}) |
||||||
|
return; |
||||||
|
} |
||||||
|
//获取当日的开始时间和结束时间 |
||||||
|
let current = new Date(date); |
||||||
|
let startTime = parseInt(current.setHours(0, 0, 0, 0)/1000); |
||||||
|
let endTime = parseInt(current.setHours(23, 59, 59, 999)/1000); |
||||||
|
getRegularVideoRecords({ |
||||||
|
data: { |
||||||
|
channelId: channelCode, |
||||||
|
recordSource: '1', |
||||||
|
startTime, |
||||||
|
endTime, |
||||||
|
streamType: "1", |
||||||
|
recordType: "1" |
||||||
|
} |
||||||
|
}).then(res=>{ |
||||||
|
console.log('res :>> ', res); |
||||||
|
let records = res.data.records; |
||||||
|
getPlaybackByTimeRtspUrl({ |
||||||
|
data: { |
||||||
|
channelId: records[0].channelId, |
||||||
|
recordSource: records[0].recordSource, |
||||||
|
startTime: records[0].startTime, |
||||||
|
endTime: records[0].endTime, |
||||||
|
streamType: records[0].streamType, |
||||||
|
recordType: records[0].recordType |
||||||
|
} |
||||||
|
}).then(res=>{ |
||||||
|
let recordInfo = { |
||||||
|
records: records, |
||||||
|
channelId: records[0].channelId, |
||||||
|
url: res.data.url, |
||||||
|
token: res.data.token, |
||||||
|
startTime: records[0].startTime, |
||||||
|
endTime: records[0].endTime, |
||||||
|
streamType: records[0].streamType, |
||||||
|
recordType: records[0].recordType |
||||||
|
} |
||||||
|
//发送消息给子页面 |
||||||
|
let video = document.getElementById('video') |
||||||
|
console.log('video :>> ', video); |
||||||
|
video.contentWindow.postMessage({ |
||||||
|
type: 'playRecord', |
||||||
|
data: JSON.parse(JSON.stringify(recordInfo)) |
||||||
|
}, '*') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
onMounted(() => { |
||||||
|
getDevicePage({ |
||||||
|
"pageNum": 1, |
||||||
|
"pageSize": 100, |
||||||
|
}).then((res) => { |
||||||
|
state.cameraList = res.data.pageData |
||||||
|
}).catch((err) => { |
||||||
|
|
||||||
|
}); |
||||||
|
// 监听子页面的消息 |
||||||
|
window.addEventListener('message', (event) => { |
||||||
|
console.log('event :>> ', event.data); |
||||||
|
if (event.data.type === 'startVideo') { |
||||||
|
startVideo(); |
||||||
|
}else if(event.data.type ==='playRecord'){ |
||||||
|
playRecord(event.data.date); |
||||||
|
} |
||||||
|
}); |
||||||
|
}) |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<!-- 监控摄像头名称列表 --> |
||||||
|
<div class="camera-name-list"> |
||||||
|
<template v-for="(camera, index) in state.cameraList" :key="index"> |
||||||
|
<span |
||||||
|
class="camera-name" |
||||||
|
@click="switchCamera(index)" |
||||||
|
:class="{ active: state.currentCameraIndex === index }" |
||||||
|
> |
||||||
|
{{ camera.deviceName }} |
||||||
|
<el-tag style="scale: 0.8;position: absolute;top: -10px;right:-15px;border-radius: 20px;" :type="camera.isOnline == 1 ? 'success':'danger'">{{ camera.isOnline == 1 ? '在线' : '离线' }}</el-tag> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
<!-- 摄像头展示区域 --> |
||||||
|
<div class="camera-display"> |
||||||
|
<iframe id="video" src="/dahua/demo.html?real=true" style="width:100%;height:100%;" frameborder="0"></iframe> |
||||||
|
<!-- <video |
||||||
|
v-if="state.currentCameraIndex !== -1" |
||||||
|
:src="cameraList[state.currentCameraIndex].source" |
||||||
|
controls |
||||||
|
autoplay |
||||||
|
muted |
||||||
|
></video> --> |
||||||
|
<!-- <p v-else>请选择摄像头</p> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.app-container { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
padding: 20px; |
||||||
|
height: calc(100vh - 135px); |
||||||
|
} |
||||||
|
|
||||||
|
.camera-name-list { |
||||||
|
display: flex; |
||||||
|
gap: 15px; |
||||||
|
margin-bottom: 20px; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
width: 130px; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.camera-name { |
||||||
|
padding: 8px 32px; |
||||||
|
border: 1px solid #ccc; |
||||||
|
border-radius: 20px; |
||||||
|
cursor: pointer; |
||||||
|
transition: all 0.3s ease; |
||||||
|
background-color: white; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.camera-name:hover { |
||||||
|
background-color: #e0e0e0; |
||||||
|
transform: translateY(-2px); |
||||||
|
} |
||||||
|
|
||||||
|
.camera-name.active { |
||||||
|
background-color: #2196F3; |
||||||
|
color: white; |
||||||
|
border-color: #2196F3; |
||||||
|
} |
||||||
|
|
||||||
|
.camera-display { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
background-color: #fff; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 8px; |
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
|
||||||
|
video { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
text-align: center; |
||||||
|
color: #666; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue