Compare commits
2 Commits
50d0576a70
...
ab7e377dea
| Author | SHA1 | Date |
|---|---|---|
 wuhongjian
|
ab7e377dea | |
|
wuhongjian
|
ffaabe340a |
|
|
@ -1,8 +1,8 @@
|
||||||
<!--
|
<!--
|
||||||
* @Author: hisense.wuhongjian
|
* @Author: hisense.wuhongjian
|
||||||
* @Date: 2022-03-29 16:45:25
|
* @Date: 2022-03-29 16:45:25
|
||||||
* @LastEditors: hisense.liangjunhua
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-06-29 16:59:49
|
* @LastEditTime: 2022-06-29 18:37:11
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
-->
|
-->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
|
||||||
|
|
@ -1726,6 +1726,9 @@ export function MapFun(mapObj) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
marker.on('click', e=>{
|
||||||
|
console.log('点位数据', e)
|
||||||
|
})
|
||||||
layers.addLayer(marker)
|
layers.addLayer(marker)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -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) => {
|
||||||
|
|
|
||||||
|
|
@ -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 == '全部') {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue