<script lang="ts" setup name="ResourceList">
import type { Ref } from 'vue'
import { getCurrentInstance, nextTick, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import { getPlaybackUrl, getPreviewUrl } from '@/utils/hik'
import { videoTree } from '@/api/ycjg/aqbb'
const router = useRouter()
const treeRef = ref(null) as any
const filterText = ref('')
const deviceData: Ref<any> = ref({})
const timeRange = ref<[any, any]>(['', ''])
const listQuery = ref({
id: '',
startTime: '',
endTime: '',
})
const leafLoading = ref(false)
const data = ref([])
const defaultProps = ref({
children: 'children',
label: 'name',
isDisabled: 'disabled',
})
const player = ref(null) as any
const { proxy } = getCurrentInstance() as any
const width = ref(0)
const height = ref(0)
const loading = ref(false)
const currentLeafId = ref('')
const src = ref('')
const resize = () => {
const divPlugin = document.getElementById('home')
console.log(divPlugin)
width.value = divPlugin!.clientWidth - 20
height.value = divPlugin!.clientHeight - 60
}
function createPlayer() {
player.value = new window.JSPlugin({
szId: 'player',
szBasePath: './',
iMaxSplit: 1,
iCurrentSplit: 2,
openDebug: true,
iWidth: width.value,
iHeight: height.value,
oStyle: {
borderSelect: '#FFCC00',
},
})
}
// 筛选节点
function filterNode(value: any, data: { name: string | any[] }) {
if (value === '' || value === null) {
return true
}
return data.name.includes(value)
}
let treeClickCount = 0
// let currentCameras = {} as any
// function recordStart(this: any, type: any) {
// const codeMap = { MP4: 5, PS: 2 }
// // let player = this.player
// let index = player.value!.currentWindowIndex
// let fileName = `${moment().format('YYYYMMDDHHmm')}.mp4`
// typeCode = codeMap[type]
// player.JS_StartSaveEx(index, fileName, typeCode).then(
// () => { console.log('record start ...') },
// (e: any) => { console.error(e) },
// )
// }
// function recordStop(this: any) {
// // let player = this.player
// const index = player.value.currentWindowIndex
// player.JS_StopSave(index).then(
// () => { console.log('record stoped, saving ...') },
// (e: any) => { console.error(e) },
// )
// }
function handleNodeClick(data: any, node: any, self: any) {
if (data.device.deviceStatusName === '离线') {
ElMessage.warning(`设备 ${data.device.monitorName} 离线`)
return false
}
deviceData.value = data
currentLeafId.value = deviceData.value.device.id
const now = new Date().getTime()
if (now - treeClickCount < 300) { // 双击事件的判断，300毫秒内重复点击
console.log('Double click on:', data)
if (data.device === '') { // 点击父亲
return
}
// src.value = data.url // todo 视频地址
// currentCameras = data
search()
}
treeClickCount = now
}
const unwatch = watch(filterText, (newVal) => {
treeRef.value.filter(newVal)
})
/**
* 查询回放录像
* @param type tableClick点击查询按钮
*/
function search(type = '') {
if (deviceData.value && deviceData.value.device && deviceData.value.device.cameraIndexCode) {
const params = {
beginTime: convertISO8601ToBeijingTime(listQuery.value.startTime), // 开始时间
endTime: convertISO8601ToBeijingTime(listQuery.value.endTime), // 结束时间
cameraIndexCode: deviceData.value.device.cameraIndexCode, // 监控点唯一标识
}
stopPlay()
leafLoading.value = true
getPlaybackUrl(params.cameraIndexCode, params.beginTime, params.endTime).then((res: any) => {
if (res) {
const playUrl = res // 预览地址
console.log('isc场景回放预览地址', playUrl)
// 预览
player.value!.JS_Play(playUrl, { playURL: playUrl, mode: 0 }, 0, params.beginTime, params.endTime).then(
() => { console.log('realplay success') },
(e: any) => { ElMessage.warning('预览失败！'); console.error(e); leafLoading.value = false },
)
leafLoading.value = false
}
}).catch(() => leafLoading.value = false)
}
else {
if (type === 'tableClick') {
ElMessage.warning('请先选中一个设备')
leafLoading.value = false
}
}
}
// 停止预览
function stopPlay() {
player.value!.JS_Stop().then(
() => { console.log('stop realplay success') },
(e: any) => { console.error(e) },
)
}
// 搜索重置
function reset() {
listQuery.value = {
startTime: dayjs(Date.now() - 1 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
id: '',
}
timeRange.value = [listQuery.value.startTime, listQuery.value.endTime]
search()
}
onBeforeUnmount(() => {
unwatch()
window.removeEventListener('resize', resize)
})
function convertISO8601ToBeijingTime(isoString: string) {
// const date = new Date(isoString)
// date.setHours(date.getHours() + 8)
// return date.toISOString()
// console.log(isoString.slice(0, 10));
// console.log(isoString.slice(11));
return isoString.slice(0, 10) + 'T' + isoString.slice(11) + '.000+08:00'
}
watch(timeRange, (val) => {
if (val) {
console.log(val[0], val[1])
listQuery.value.startTime = `${val[0]}`
listQuery.value.endTime = `${val[1]}`
// listQuery.value.startTime = convertISO8601ToBeijingTime(`${val[0]}`)
// listQuery.value.endTime = convertISO8601ToBeijingTime(`${val[1]}`)
console.log(listQuery.value.startTime, listQuery.value.endTime)
}
else {
listQuery.value.startTime = ''
listQuery.value.endTime = ''
}
})
function solveData(data: any) {
data.forEach((item: any) => {
if (item.device) {
item.name = `${item.name} (${item.device.deviceStatusName})`
console.log('修改后的name', item.name)
}
if (item.children && item.children.length) {
solveData(item.children)
}
})
return data
}
onMounted(() => {
videoTree().then((response) => {
if (response.code === 200) {
data.value = response.data
// data.value = solveData(data.value)
}
})
// resize()
// createPlayer()
reset()
setTimeout(() => {
window.addEventListener('resize', resize)
resize()
createPlayer()
}, 200)
// window.addEventListener('resize', resize)
})
</script>
<template>
<app-container style="height: calc(100vh - 110px)">
<div style="display: flex;height: 100%">
<el-card class="left">
<el-input
v-model="filterText"
placeholder="设备名称过滤"
style="margin-bottom: 10px;"
/>
<el-tree
ref="treeRef"
class="filter-tree"
style="width: 100%;height: 100%"
:data="data"
:filter-node-method="filterNode"
node-key="id"
:default-expand-all="true"
:props="defaultProps"
:highlight-current="true"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span style="display: flex;align-items: center;">
<el-icon class="loading-rotate" v-if="data.device.id === currentLeafId && leafLoading" style="margin-right: 5px">
<svg-icon name="icon-loading" />
</el-icon>
<el-icon v-if="data.device.deviceStatusName === '在线'" style="margin-right: 5px">
<svg-icon name="icon-online" />
</el-icon>
<el-icon v-if="data.device.deviceStatusName === '离线'" style="margin-right: 5px">
<svg-icon name="icon-offline" />
</el-icon>
<el-tooltip
class="box-item"
effect="dark"
:content="node.label"
placement="right"
>
<template #content>
<span>{{ node.label }}</span>
<span v-if="data.device.deviceTypeName">({{ data.device.deviceTypeName }})</span>
</template>
<span v-if="data.device.deviceTypeName" :style="{ 'color': data.device.deviceStatusName === '在线' ? '#0e932e' : '#606266', 'font-weight': data.device.deviceStatusName === '在线' ? 600 : 500 }">{{ node.label }}</span>
<span v-else>{{ node.label }}</span>
</el-tooltip>
<el-icon v-if="data.device.deviceType === '0'" style="margin-left: 5px">
<svg-icon name="icon-qiang" :color="data.device.deviceStatusName === '在线' ? '#0e932e' : '#979797'"/>
</el-icon>
<el-icon v-if="data.device.deviceType === '1' || data.device.deviceType === '2'" style="margin-left: 5px;">
<svg-icon name="icon-ball" :color="data.device.deviceStatusName === '在线' ? '#0e932e' : '#979797'" />
</el-icon>
<el-icon v-if="data.device.deviceType === '3'" style="margin-left: 5px;">
<svg-icon name="icon-ball" :color="data.device.deviceStatusName === '在线' ? '#0e932e' : '#979797'" />
</el-icon>
<el-icon v-if="data.device.deviceType === '4'" style="margin-left: 5px;">
<svg-icon name="icon-ytqiang" :color="data.device.deviceStatusName === '在线' ? '#0e932e' : '#979797'" />
</el-icon>
<!-- <span v-if="data.device.deviceStatusName === '在线' || node.label.slice(node.label.indexOf('(')) === '(离线)'" :style="{ color: data.device.deviceStatusName === '在线' ? 'green' : 'red' , 'font-weight': 600 }">{{ node.label.slice(node.label.indexOf('(')) }}</span> -->
</span>
</template>
</el-tree>
</el-card>
<div id="home" class="right">
<div style="display:flex;">
<search-area :need-clear="true" @search="search('tableClick')" @clear="reset">
<search-item>
<el-date-picker
v-model="timeRange"
type="datetimerange"
range-separator="到"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 450px;"
:clearable="false"
/>
</search-item>
</search-area>
<!-- <div style="position: absolute;right: 20px;top: 22px">
<el-button type="primary" @click="recordStart('MP4')" plain>录制MP4</el-button>
<el-button @click="recordStop" type="info" plain>停止录制并保存文件</el-button>
</div> -->
</div>
<div id="player"></div>
<!-- <video id="video0" :src="src" autoPlay :width="width" :height="height" style="margin: 0 10px"/> -->
</div>
</div>
</app-container>
</template>
<style lang="scss" scoped>
.left {
width: 300px;
height: 100%;
padding: 10px;
overflow-y: scroll;
}
.right {
width: calc(100% - 310px);
margin-left: 10px;
background-color: white;
}
.video-container {
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 5px;
}
video {
position: relative;
object-fit: fill;
overflow: hidden;
background: #000;
}
</style>
