视频资源
This commit is contained in:
parent
d4a8ebf34f
commit
ffaabe340a
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-03-29 16:45:25
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-28 16:52:46
|
||||
* @LastEditTime: 2022-06-29 16:00:06
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
|
|
|
|||
|
|
@ -1726,6 +1726,9 @@ export function MapFun(mapObj) {
|
|||
}
|
||||
})
|
||||
}
|
||||
marker.on('click', e=>{
|
||||
console.log('点位数据', e)
|
||||
})
|
||||
layers.addLayer(marker)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -11,10 +11,13 @@
|
|||
:key="itemContent"
|
||||
@click="tabClick(index, itemContent, itemContent)"
|
||||
:class="
|
||||
clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
|
||||
clickList[index].content.indexOf(itemContent.labelName) != -1 ||
|
||||
clickList[index].content.indexOf(itemContent) != -1
|
||||
? 'down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ itemContent }}
|
||||
{{ itemContent.labelName || itemContent }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,11 +46,11 @@
|
|||
<!-- 搜索@search="onSearch" -->
|
||||
<div class="searchInput">
|
||||
<a-input-search
|
||||
v-model:value="name"
|
||||
v-model:value="mapSearchParam.cameraName"
|
||||
placeholder="请输入关键词"
|
||||
enter-button="搜索"
|
||||
size="large"
|
||||
@change="onSearch"
|
||||
@change="getCamera"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
|
|
@ -85,20 +88,70 @@
|
|||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
></a-table>
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'operation'">
|
||||
<a @click="openVideo(record.channelCode)">预览</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="视频预览"
|
||||
:width="750"
|
||||
destroyOnClose
|
||||
>
|
||||
<template #footer></template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="width: 100%; height: 100%">
|
||||
<vue3VideoPlay v-bind="options" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import VideoSurveillance from '@/views/home/videoSurveillance'
|
||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
import { dataType } from 'element-plus/es/components/table-v2/src/common'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getCameraByParentId } from '@/api/videoSurveillance'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import {
|
||||
getCameraByParentId,
|
||||
getStreamByChannelCode,
|
||||
getCameraAllLabel,
|
||||
} from '@/api/videoSurveillance'
|
||||
import { sgcInsert } from '@/api/home'
|
||||
import { message } from 'ant-design-vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
|
||||
const options = reactive({
|
||||
width: '700px', //播放器宽度
|
||||
height: '400px', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: '', //视频源
|
||||
type: 'm3u8', // 视频源类型
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
'audioTrack',
|
||||
'quality',
|
||||
'speedRate',
|
||||
'volume',
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
let visible = ref(false)
|
||||
const pagination = ref({
|
||||
total: 0,
|
||||
current: 1,
|
||||
|
|
@ -109,12 +162,14 @@
|
|||
const mapSearchParam = ref({
|
||||
// 地图搜索初始化数据
|
||||
parentId: '',
|
||||
cameraName: '',
|
||||
checkStatus: '1',
|
||||
pageNum: pagination.value.current,
|
||||
pageSize: pagination.value.pageSize,
|
||||
gpsX: '',
|
||||
gpsY: '',
|
||||
radius: '',
|
||||
labelCodes: [],
|
||||
})
|
||||
const showMap = ref(true)
|
||||
onMounted(() => {
|
||||
|
|
@ -144,6 +199,17 @@
|
|||
content: [],
|
||||
},
|
||||
])
|
||||
const openVideo = (id) => {
|
||||
console.log('打开视频', id)
|
||||
const param = {
|
||||
channelCode: id,
|
||||
}
|
||||
getStreamByChannelCode(param).then((res) => {
|
||||
console.log(res)
|
||||
visible.value = true
|
||||
options.value.src = res.data.data
|
||||
})
|
||||
}
|
||||
// const dataTypeList = () => {
|
||||
// if (tabList.value[0].content.indexOf('视频资源') != -1) {
|
||||
// tabList.value[1].content = ['123344', '213124']
|
||||
|
|
@ -173,6 +239,7 @@
|
|||
let tableHeight = ref('600')
|
||||
//tab切换点击事件
|
||||
const tabClick = (indexFather, name) => {
|
||||
debugger
|
||||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||||
if (name == '视频资源') {
|
||||
tableHeight.value = 330
|
||||
|
|
@ -195,14 +262,12 @@
|
|||
tabList.value[1].content = []
|
||||
clickList.value[1].content = []
|
||||
clickList.value[indexFather].content[0] = name
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 50,
|
||||
dictTypeId: '1541336217898848257',
|
||||
}
|
||||
getCategoryTreePage(params).then((res) => {
|
||||
res.data.data.list.forEach((val) => {
|
||||
tabList.value[1].content.push(val.dictLabel)
|
||||
getCameraAllLabel().then((res) => {
|
||||
res.data.data.forEach((val) => {
|
||||
tabList.value[1].content.push({
|
||||
labelCode: val.labelCode,
|
||||
labelName: val.labelName,
|
||||
})
|
||||
})
|
||||
})
|
||||
} else if (name == '云资源') {
|
||||
|
|
@ -230,22 +295,26 @@
|
|||
clickList.value[indexFather].content.push(name)
|
||||
}
|
||||
}
|
||||
console.log('clickList.value', clickList.value)
|
||||
// 改变查询摄像头接口的labelCode数组
|
||||
mapSearchParam.value.labelCodes = []
|
||||
clickList.value[1].content.map((item) => {
|
||||
mapSearchParam.value.labelCodes.push(item.labelCode)
|
||||
})
|
||||
console.log('选中的标签code', mapSearchParam.value)
|
||||
mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
|
||||
getCamera()
|
||||
}
|
||||
// 清空
|
||||
const nullClick = () => {
|
||||
clickList.value[1].content = []
|
||||
mapSearchParam.value.labelCodes = ''
|
||||
getCamera()
|
||||
console.log('hhhhhhhh')
|
||||
}
|
||||
const name = ref('')
|
||||
// 搜索框
|
||||
const onSearch = (name) => {
|
||||
name.value = name
|
||||
console.log(name.value)
|
||||
}
|
||||
// 重置
|
||||
const clean = () => {
|
||||
name.value = ''
|
||||
mapSearchParam.value.cameraName = ''
|
||||
getCamera()
|
||||
}
|
||||
// 一键申请
|
||||
const apply = () => {
|
||||
|
|
@ -287,8 +356,15 @@
|
|||
{
|
||||
title: '归属',
|
||||
dataIndex: 'nodeName',
|
||||
width: '60%',
|
||||
key: 'nodeName',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: '10%',
|
||||
key: 'channelId',
|
||||
},
|
||||
])
|
||||
const allClick = ref([])
|
||||
const onSelectChange = (selectedRowKeys, selectedRows) => {
|
||||
|
|
|
|||
|
|
@ -139,6 +139,9 @@
|
|||
this.addressMatchUrl = window.SITE_CONFIG.POI_URL;
|
||||
// 初始化地址检索服务
|
||||
this.initAddressMatchService()
|
||||
this.getCameraAllLabel()
|
||||
// 初始化展示所有摄像头
|
||||
// this.getCameraAllPage()
|
||||
// this.getMapPoint()
|
||||
// 根据parentId查询摄像头列表
|
||||
mybus.off('getCameraByParentId')
|
||||
|
|
@ -169,7 +172,7 @@
|
|||
const type = e.layerType;
|
||||
const circleLayer = e.layer;
|
||||
if (type === 'circle') {
|
||||
const radius = (e.layer._mRadius).toFixed(2)
|
||||
const radius = (e.layer._mRadius)
|
||||
if (radius > 5000) {
|
||||
message.info('最大支持5km范围的圈选')
|
||||
} else {
|
||||
|
|
@ -177,8 +180,8 @@
|
|||
this.hiMap.mapObj.featureGroup.addLayer(circlePloygonLayer);
|
||||
this.hiMap.mapObj.layerGroup.set('circlePloygonLayer', circlePloygonLayer);
|
||||
console.log('查询图层为何发生了改变', e.layer);
|
||||
this.mapSearchParam.gpsX = e.layer._latlng.lng.toFixed(2)
|
||||
this.mapSearchParam.gpsY = e.layer._latlng.lat.toFixed(2)
|
||||
this.mapSearchParam.gpsX = e.layer._latlng.lng
|
||||
this.mapSearchParam.gpsY = e.layer._latlng.lat
|
||||
this.mapSearchParam.radius = radius
|
||||
const params = {
|
||||
gpsX: this.mapSearchParam.gpsX,
|
||||
|
|
@ -251,20 +254,23 @@
|
|||
this.addressMatchService.code(geoCodeParam, match);
|
||||
}
|
||||
},
|
||||
// getCameraAllPage(page) {
|
||||
// let params = {
|
||||
// name: '',
|
||||
// page: page,
|
||||
// pageSize: 20000,
|
||||
// }
|
||||
// selectByChannelName(params).then((res) => {
|
||||
// // let t1 = new Date().getTime();
|
||||
// this.cameraAllData = res.data.data
|
||||
// this.addResourceTomap('全部', res.data.data)
|
||||
// // let t2 = new Date().getTime();
|
||||
// // console.log("时间#############" + (t2 - t1));
|
||||
// })
|
||||
// },
|
||||
getCameraAllPage(page) {
|
||||
let params = {
|
||||
name: '',
|
||||
page: page,
|
||||
pageSize: 20000,
|
||||
}
|
||||
getCameraAll(params).then((res) => {
|
||||
// let t1 = new Date().getTime();
|
||||
// this.cameraAllData = res.data.data
|
||||
this.addResourceTomap('videoMap', res.data)
|
||||
// let t2 = new Date().getTime();
|
||||
// console.log("时间#############" + (t2 - t1));
|
||||
})
|
||||
},
|
||||
getCameraAllLabel() {
|
||||
|
||||
},
|
||||
tabChange(item) {
|
||||
if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
|
||||
if (item.labelName == '全部') {
|
||||
|
|
|
|||
Loading…
Reference in New Issue