wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

视频资源

This commit is contained in:
wuhongjian 2022-06-29 18:36:50 +08:00
parent d4a8ebf34f
commit ffaabe340a
4 changed files with 127 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/public/index.html
View File

@ -2,7 +2,7 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-03-29 16:45:25 * @Date: 2022-03-29 16:45:25
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-28 16:52:46 * @LastEditTime: 2022-06-29 16:00:06
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<!DOCTYPE html> <!DOCTYPE html>

3
front/src/supermap/advance-init.js
View File

@ -1726,6 +1726,9 @@ export function MapFun(mapObj) {
} }
}) })
} }
marker.on('click', e=>{
console.log('点位数据', e)
})
layers.addLayer(marker) layers.addLayer(marker)
} }
}) })

124
front/src/views/home/infrastructurePage.vue
View File

@ -11,10 +11,13 @@
:key="itemContent" :key="itemContent"
@click="tabClick(index, itemContent, itemContent)" @click="tabClick(index, itemContent, itemContent)"
:class=" :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> </span>
</div> </div>
</div> </div>
@ -43,11 +46,11 @@
<!-- 搜索@search="onSearch" --> <!-- 搜索@search="onSearch" -->
<div class="searchInput"> <div class="searchInput">
<a-input-search <a-input-search
v-model:value="name" v-model:value="mapSearchParam.cameraName"
placeholder="请输入关键词" placeholder="请输入关键词"
enter-button="搜索" enter-button="搜索"
size="large" size="large"
@change="onSearch" @change="getCamera"
/> />
<a-button <a-button
type="primary" type="primary"
@ -85,20 +88,70 @@
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: onSelectChange, 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> </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> </div>
</template> </template>
<script setup> <script setup>
import VideoSurveillance from '@/views/home/videoSurveillance' import VideoSurveillance from '@/views/home/videoSurveillance'
import { getCategoryTreePage } from '@/api/personalCenter' import { getCategoryTreePage } from '@/api/personalCenter'
import { dataType } from 'element-plus/es/components/table-v2/src/common' import { dataType } from 'element-plus/es/components/table-v2/src/common'
import { ref, onMounted } from 'vue' import { ref, reactive, onMounted } from 'vue'
import { getCameraByParentId } from '@/api/videoSurveillance' import {
getCameraByParentId,
getStreamByChannelCode,
getCameraAllLabel,
} from '@/api/videoSurveillance'
import { sgcInsert } from '@/api/home' import { sgcInsert } from '@/api/home'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import mybus from '@/myplugins/mybus' 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({ const pagination = ref({
total: 0, total: 0,
current: 1, current: 1,
@ -109,12 +162,14 @@
const mapSearchParam = ref({ const mapSearchParam = ref({
// 地图搜索初始化数据 // 地图搜索初始化数据
parentId: '', parentId: '',
cameraName: '',
checkStatus: '1', checkStatus: '1',
pageNum: pagination.value.current, pageNum: pagination.value.current,
pageSize: pagination.value.pageSize, pageSize: pagination.value.pageSize,
gpsX: '', gpsX: '',
gpsY: '', gpsY: '',
radius: '', radius: '',
labelCodes: [],
}) })
const showMap = ref(true) const showMap = ref(true)
onMounted(() => { onMounted(() => {
@ -144,6 +199,17 @@
content: [], 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 = () => { // const dataTypeList = () => {
// if (tabList.value[0].content.indexOf('视频资源') != -1) { // if (tabList.value[0].content.indexOf('视频资源') != -1) {
// tabList.value[1].content = ['123344', '213124'] // tabList.value[1].content = ['123344', '213124']
@ -173,6 +239,7 @@
let tableHeight = ref('600') let tableHeight = ref('600')
//tab切换点击事件 //tab切换点击事件
const tabClick = (indexFather, name) => { const tabClick = (indexFather, name) => {
debugger
if (clickList.value[indexFather].content.indexOf(name) != -1) { if (clickList.value[indexFather].content.indexOf(name) != -1) {
if (name == '视频资源') { if (name == '视频资源') {
tableHeight.value = 330 tableHeight.value = 330
@ -195,14 +262,12 @@
tabList.value[1].content = [] tabList.value[1].content = []
clickList.value[1].content = [] clickList.value[1].content = []
clickList.value[indexFather].content[0] = name clickList.value[indexFather].content[0] = name
const params = { getCameraAllLabel().then((res) => {
page: 1, res.data.data.forEach((val) => {
limit: 50, tabList.value[1].content.push({
dictTypeId: '1541336217898848257', labelCode: val.labelCode,
} labelName: val.labelName,
getCategoryTreePage(params).then((res) => { })
res.data.data.list.forEach((val) => {
tabList.value[1].content.push(val.dictLabel)
}) })
}) })
} else if (name == '云资源') { } else if (name == '云资源') {
@ -230,22 +295,26 @@
clickList.value[indexFather].content.push(name) 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 = () => { const nullClick = () => {
clickList.value[1].content = [] clickList.value[1].content = []
mapSearchParam.value.labelCodes = ''
getCamera()
console.log('hhhhhhhh') console.log('hhhhhhhh')
} }
const name = ref('')
// 搜索框
const onSearch = (name) => {
name.value = name
console.log(name.value)
}
// 重置 // 重置
const clean = () => { const clean = () => {
name.value = '' mapSearchParam.value.cameraName = ''
getCamera()
} }
// 一键申请 // 一键申请
const apply = () => { const apply = () => {
@ -287,8 +356,15 @@
{ {
title: '归属', title: '归属',
dataIndex: 'nodeName', dataIndex: 'nodeName',
width: '60%',
key: 'nodeName', key: 'nodeName',
}, },
{
title: '操作',
dataIndex: 'operation',
width: '10%',
key: 'channelId',
},
]) ])
const allClick = ref([]) const allClick = ref([])
const onSelectChange = (selectedRowKeys, selectedRows) => { const onSelectChange = (selectedRowKeys, selectedRows) => {

40
front/src/views/home/videoSurveillance/index.vue
View File

@ -139,6 +139,9 @@
this.addressMatchUrl = window.SITE_CONFIG.POI_URL; this.addressMatchUrl = window.SITE_CONFIG.POI_URL;
// 初始化地址检索服务 // 初始化地址检索服务
this.initAddressMatchService() this.initAddressMatchService()
this.getCameraAllLabel()
// 初始化展示所有摄像头
// this.getCameraAllPage()
// this.getMapPoint() // this.getMapPoint()
// 根据parentId查询摄像头列表 // 根据parentId查询摄像头列表
mybus.off('getCameraByParentId') mybus.off('getCameraByParentId')
@ -169,7 +172,7 @@
const type = e.layerType; const type = e.layerType;
const circleLayer = e.layer; const circleLayer = e.layer;
if (type === 'circle') { if (type === 'circle') {
const radius = (e.layer._mRadius).toFixed(2) const radius = (e.layer._mRadius)
if (radius > 5000) { if (radius > 5000) {
message.info('最大支持5km范围的圈选') message.info('最大支持5km范围的圈选')
} else { } else {
@ -177,8 +180,8 @@
this.hiMap.mapObj.featureGroup.addLayer(circlePloygonLayer); this.hiMap.mapObj.featureGroup.addLayer(circlePloygonLayer);
this.hiMap.mapObj.layerGroup.set('circlePloygonLayer', circlePloygonLayer); this.hiMap.mapObj.layerGroup.set('circlePloygonLayer', circlePloygonLayer);
console.log('查询图层为何发生了改变', e.layer); console.log('查询图层为何发生了改变', e.layer);
this.mapSearchParam.gpsX = e.layer._latlng.lng.toFixed(2) this.mapSearchParam.gpsX = e.layer._latlng.lng
this.mapSearchParam.gpsY = e.layer._latlng.lat.toFixed(2) this.mapSearchParam.gpsY = e.layer._latlng.lat
this.mapSearchParam.radius = radius this.mapSearchParam.radius = radius
const params = { const params = {
gpsX: this.mapSearchParam.gpsX, gpsX: this.mapSearchParam.gpsX,
@ -251,20 +254,23 @@
this.addressMatchService.code(geoCodeParam, match); this.addressMatchService.code(geoCodeParam, match);
} }
}, },
// getCameraAllPage(page) { getCameraAllPage(page) {
// let params = { let params = {
// name: '', name: '',
// page: page, page: page,
// pageSize: 20000, pageSize: 20000,
// } }
// selectByChannelName(params).then((res) => { getCameraAll(params).then((res) => {
// // let t1 = new Date().getTime(); // let t1 = new Date().getTime();
// this.cameraAllData = res.data.data // this.cameraAllData = res.data.data
// this.addResourceTomap('全部', res.data.data) this.addResourceTomap('videoMap', res.data)
// // let t2 = new Date().getTime(); // let t2 = new Date().getTime();
// // console.log("时间#############" + (t2 - t1)); // console.log("时间#############" + (t2 - t1));
// }) })
// }, },
getCameraAllLabel() {
},
tabChange(item) { tabChange(item) {
if (this.checkboxGroup.indexOf(item.labelName) !== -1) { if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
if (item.labelName == '全部') { if (item.labelName == '全部') {