<template>
<div>
<div class="video-menu">
<layer-manager :menu-tab="menuTab" :menus="menus" :select="selectIndex === 'layerBtn'" @btnClick="btnClick"
@menuClick="menuClick" @childrenClick="childrenClick" @changeSelect="changeSelect" />
<common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5"
height="5" text-hover="监测事件" @click="btnClick" />
<common-btn id="offlineBtn" :select="selectIndex === 'offlineBtn'" :bg="offline" :bg-hover="offlineHover"
width="5" height="5" text-hover="离线视频" @click="btnClick" />
<common-btn id="energyBtn" :select="selectIndex === 'energyBtn'" :bg="energy" :bg-hover="energyHover" width="5"
height="5" text-hover="赋能视频" @click="btnClick" />
<keyword-manager :select="ktSelect === 'keywordBtn'" @changeState="changeState" @handleKeyword="handleKeyword"
@localPoint="localPoint" :resultList="resultList" />
<time-manager :select="ktSelect === 'timeBtn'" v-if="selectIndex === 'caseBtn'" @changeState="changeState" />
</div>
<!-- 视频弹窗 -->
<videoPop ref="videopop" v-if="isShowPop" @close="isShowPop = false" />
<!-- 离线视频 -->
<offline-video v-if="selectIndex === 'offlineBtn'" :list="markerList" @menuClick="offlineClick" />
<!-- 赋能视频 -->
<offline-video v-if="selectIndex === 'energyBtn'" :list="markerList" @menuClick="energyClick" />
<!-- 监测事件 -->
<event-list1 v-if="selectIndex === 'caseBtn' && isShowEvent" :list="eventList" :total="eventList.length" @menuClick="menuEventClick"
@close="closeEvent" @changePage="changePage" />
<!-- 事件弹窗 -->
<eventPop ref="eventpop" v-if="isShowEventPop" @close="isShowEventPop = false" />
</div>
</template>
<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManager from "@/components/LayerManager";
import KeywordManager from "@/components/KeywordManager";
import TimeManager from "@/components/TimeManager";
import offlineVideo from "./components/offlineVideo.vue";
import eventList1 from "./components/eventList.vue";
import eventPop from "./eventPop.vue";
import { getStatistics, getEventList } from '@/api/csdz/videoCloud'
import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
import videoPop from './videoPop'
export default {
name: 'VideoCloud',
components: { TimeManager, KeywordManager, LayerManager, CommonBtn, videoPop, offlineVideo, eventList1, eventPop },
data() {
return {
isShowPop: false, // 是否展示点位弹窗
resultList: [], // 点位搜索列表
markerList: [], // 点位列表
showMarker: 'scene', // 当前展示点位
offlineVideo: [], //离线视频
eventList: [], // 监测事件
isShowEvent: false, // 展示监测事件
isShowEventPop: false, // 是否展示事件弹窗
ktSelect: '',
selectIndex: 'layerBtn',
caseBg: require('@/assets/images/function/视频云/视频检测事件未选中.png'),
caseHover: require('@/assets/images/function/视频云/视频检测事件选中.png'),
offline: require('@/assets/images/function/视频云/离线视频点位未选中.png'),
offlineHover: require('@/assets/images/function/视频云/离线视频点位选中.png'),
energy: require('@/assets/images/function/视频云/赋能视频点位未选中.png'),
energyHover: require('@/assets/images/function/视频云/赋能视频点位选中.png'),
menuTab: [{
name: '视频场景',
value: 'scene'
}, {
name: '视频类型',
value: 'type'
}],
menus: {
scene: [
{
type: "1", typename: "道路卡口", total: "111",
children: [
{
typename: '道路卡口',
name: '111道路卡口',
lng: '114.817018',
lat: '25.863392',
},
{
typename: '道路卡口',
name: '222道路卡口',
lng: '115.083274',
lat: '25.738548',
},
{
typename: '道路卡口',
name: '333道路卡口',
lng: '114.770822',
lat: '25.805374',
},
]
},
{
type: "2", typename: "工地", total: "111",
children: [
{
typename: "工地",
name: '111工地',
lng: '114.928116',
lat: '25.80921',
},
{
typename: "工地",
name: '222工地',
lng: '114.891245',
lat: '25.809243',
},
]
},
{
type: "3", typename: "园林", total: "111",
children: [
{
typename: "园林",
name: '111园林',
lng: '114.767957',
lat: '25.797636',
},
]
},
{
type: "4", typename: "学校", total: "111",
children: [
{
typename: "学校",
name: '111学校',
lng: '114.824897',
lat: '25.780224',
},
]
},
{
type: "5", typename: "环保", total: "111",
children: [
{
typename: "环保",
name: '111环保',
lng: '114.736085',
lat: '25.809565',
},
]
},
{
type: "6", typename: "车场", total: "111",
children: [
{
typename: "车场",
name: '111车场',
lng: '114.764734',
lat: '25.806341',
},
]
}
],
type: [
{
type: "1", typename: "球机", total: "111",
children: [
{
typename: '球机',
name: '111球机',
lng: '114.864044',
lat: '25.764514',
},
]
},
{
type: "2", typename: "枪机", total: "111",
children: [
{
typename: '枪机',
name: '111枪机',
lng: '114.85176',
lat: '25.765165',
},
{
typename: '枪机',
name: '222枪机',
lng: '114.851473',
lat: '25.76742',
},
]
},
{
type: "3", typename: "半球", total: "111",
children: [
{
typename: '半球',
name: '半球1',
lng: '114.844932',
lat: '25.76742',
},
{
typename: '半球',
name: '半球2',
lng: '114.854725',
lat: '25.772985',
},
]
},
{
type: "4", typename: "AR高点", total: "111",
children: [
{
typename: 'AR高点',
name: 'AR高点1',
lng: '114.864405',
lat: '25.773041',
},
{
typename: 'AR高点',
name: 'AR高点2',
lng: '114.869638',
lat: '25.7769',
},
]
},
{
type: "5", typename: "无人机视频", total: "111",
children: [
{
typename: '无人机视频',
name: '无人机视频1',
lng: '114.865548',
lat: '25.780058',
},
]
}
]
}
}
},
methods: {
// 切换展示
btnClick(e) {
console.log(e, '123')
this.isShowPop = false
this.isShowEvent = false
this.isShowEventPop = false
this.selectIndex = e.target.id
console.log(e.target.id, 'e.target.id')
if (this.selectIndex !== 'keywordBtn' && this.selectIndex !== 'timeBtn') {
clearResetMap()
}
// 展示点位
if (this.selectIndex === 'layerBtn') {
if (this.showMarker === 'scene') {
this.drawSence()
}
else {
this.drawType()
}
}
else if (this.selectIndex === 'offlineBtn') {
// 离线视频
this.drawOffline()
}
else if (this.selectIndex === 'energyBtn') {
// 赋能视频
this.drawEnable()
}
else if (this.selectIndex === 'caseBtn') {
// 监测事件
this.isShowEvent = true
this.fetchEventList({ pageNo: 1, pageSize: 10 })
}
},
changeState(v) {
console.log(v, '1111')
this.ktSelect = v
},
// 点击菜单
menuClick(e) {
console.log(e, '456')
},
// 点击列表二级弹窗
childrenClick(e) {
console.log(e)
// 掉起弹窗
this.clickIcon({
_data: {
data: e
}
})
},
// 点击点位弹窗
clickIcon(e) {
const showPop = (e) => {
const item = e._data.data
this.isShowPop = true
this.$nextTick(() => {
this.$refs.videopop.initData(item)
})
}
if (this.isShowPop) {
this.isShowPop = false
setTimeout(() => {
showPop(e)
}, 100);
}
else {
showPop(e)
}
},
// 绘制视频场景
drawSence() {
const iconKakou = require('@/assets/images/icon/物联网/卡口在线.png')
const iconGongdi = require('@/assets/images/icon/工地地图点位/工地已完成.png')
const iconYuanlin = require('@/assets/images/icon/物联网/环境监测在线.png')
const iconXuexiao = require('@/assets/images/icon/教育地图点位/学校.png')
const iconChechang = require('@/assets/images/icon/视频云/停车场.png')
const icondict = {
道路卡口: iconKakou,
工地: iconGongdi,
园林: iconYuanlin,
学校: iconXuexiao,
环保: iconYuanlin,
车场: iconChechang,
}
// getStatistics().then(res => {
// console.log(res.data, '视频云')
// })
// 绘制所有点位
const markerList = []
this.menus.scene.forEach((item) => {
if (item.children) {
item.children.forEach(citem => {
markerList.push(citem)
})
}
})
markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
icondict[item.typename],
[item.lng, item.lat, 0], 'gd', item,
this.clickIcon
)
})
this.markerList = markerList
},
// 绘制视频类型
drawType() {
const iconQiuji = require('@/assets/images/icon/视频云/球机未赋能在线.png')
const iconQiangji = require('@/assets/images/icon/视频云/枪机未赋能在线.png')
const iconBanqiu = require('@/assets/images/icon/视频云/半球机未赋能在线.png')
const iconAR = require('@/assets/images/icon/视频云/AR未赋能在线.png')
const iconWurenji = require('@/assets/images/icon/视频云/无人机未赋能在线.png')
const icondict = {
球机: iconQiuji,
枪机: iconQiangji,
半球: iconBanqiu,
AR高点: iconAR,
无人机视频: iconWurenji,
}
// 绘制所有点位
const markerList = []
this.menus.type.forEach((item) => {
if (item.children) {
item.children.forEach(citem => {
markerList.push(citem)
})
}
})
markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
icondict[item.typename],
[item.lng, item.lat, 0], 'gd', item,
this.clickIcon
)
})
this.markerList = markerList
},
// 选中菜单切换
changeSelect(e) {
this.showMarker = e
clearResetMap()
this.isShowPop = false
if (e === 'scene') {
this.drawSence()
}
else {
this.drawType()
}
},
// 点维搜索
handleKeyword(e) {
console.log(e, '点位搜索')
clearResetMap()
this.resultList = this.markerList.filter((item) => item.name.includes(e))
const iconQiuji = require('@/assets/images/icon/视频云/球机未赋能在线.png')
const iconQiangji = require('@/assets/images/icon/视频云/枪机未赋能在线.png')
const iconBanqiu = require('@/assets/images/icon/视频云/半球机未赋能在线.png')
const iconAR = require('@/assets/images/icon/视频云/AR未赋能在线.png')
const iconWurenji = require('@/assets/images/icon/视频云/无人机未赋能在线.png')
const iconKakou = require('@/assets/images/icon/物联网/卡口在线.png')
const iconGongdi = require('@/assets/images/icon/工地地图点位/工地已完成.png')
const iconYuanlin = require('@/assets/images/icon/物联网/环境监测在线.png')
const iconXuexiao = require('@/assets/images/icon/教育地图点位/学校.png')
const iconChechang = require('@/assets/images/icon/视频云/停车场.png')
const icondict = {
球机: iconQiuji,
枪机: iconQiangji,
半球: iconBanqiu,
AR高点: iconAR,
无人机视频: iconWurenji,
道路卡口: iconKakou,
工地: iconGongdi,
园林: iconYuanlin,
学校: iconXuexiao,
环保: iconYuanlin,
车场: iconChechang,
}
this.resultList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
icondict[item.typename],
[item.lng, item.lat, 0], 'gd', item,
this.clickIcon
)
})
},
// 搜索点位点击
localPoint(e) {
this.childrenClick(e)
},
// 绘制离线视频
drawOffline() {
this.markerList = []
const iconQiuji = require('@/assets/images/icon/视频云/球机未赋能离线.png')
const iconQiangji = require('@/assets/images/icon/视频云/枪机未赋能离线.png')
const iconBanqiu = require('@/assets/images/icon/视频云/半球机未赋能离线.png')
const iconAR = require('@/assets/images/icon/视频云/AR未赋能离线.png')
const iconWurenji = require('@/assets/images/icon/视频云/无人机未赋能离线.png')
const iconKakou = require('@/assets/images/icon/物联网/卡口离线.png')
const iconGongdi = require('@/assets/images/icon/工地地图点位/工地已完成.png')
const iconYuanlin = require('@/assets/images/icon/物联网/环境监测离线.png')
const iconXuexiao = require('@/assets/images/icon/教育地图点位/教育设备-摄像机离线.png')
const iconChechang = require('@/assets/images/icon/视频云/停车场离线.png')
const icondict = {
球机: iconQiuji,
枪机: iconQiangji,
半球: iconBanqiu,
AR高点: iconAR,
无人机视频: iconWurenji,
道路卡口: iconKakou,
工地: iconGongdi,
园林: iconYuanlin,
学校: iconXuexiao,
环保: iconYuanlin,
车场: iconChechang,
}
const markerList = [
{
typename: '无人机视频',
name: '222无人机',
lng: '114.865548',
lat: '25.780058',
},
{
typename: '无人机视频',
name: '无人机1',
lng: '114.865528',
lat: '25.780258',
},
{
typename: '道路卡口',
name: '222道路卡口',
lng: '115.083274',
lat: '25.738548',
},
{
typename: '枪机',
name: '111枪机',
lng: '114.853962',
lat: '25.725462',
},
{
typename: '球机',
name: '111球机',
lng: '114.790806',
lat: '25.734629',
},
]
this.markerList = markerList
this.markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
icondict[item.typename],
[item.lng, item.lat, 0], 'gd', item,
null
)
})
},
// 离线视频点击
offlineClick() {
},
// 绘制赋能视频
drawEnable() {
this.markerList = []
const iconQiuji = require('@/assets/images/icon/视频云/球机赋能在线.png')
const iconQiangji = require('@/assets/images/icon/视频云/枪机赋能在线.png')
const iconBanqiu = require('@/assets/images/icon/视频云/半球机赋能在线.png')
const iconAR = require('@/assets/images/icon/视频云/AR赋能在线.png')
const iconWurenji = require('@/assets/images/icon/视频云/无人机赋能在线.png')
const iconKakou = require('@/assets/images/icon/物联网/卡口在线.png')
const iconGongdi = require('@/assets/images/icon/工地地图点位/工地已完成.png')
const iconYuanlin = require('@/assets/images/icon/物联网/环境监测在线.png')
const iconXuexiao = require('@/assets/images/icon/教育地图点位/学校.png')
const iconChechang = require('@/assets/images/icon/视频云/停车场.png')
const icondict = {
球机: iconQiuji,
枪机: iconQiangji,
半球: iconBanqiu,
AR高点: iconAR,
无人机视频: iconWurenji,
道路卡口: iconKakou,
工地: iconGongdi,
园林: iconYuanlin,
学校: iconXuexiao,
环保: iconYuanlin,
车场: iconChechang,
}
let markerList = [
{
typename: '球机',
name: '111球机',
lng: '114.790806',
lat: '25.734629',
},
{
typename: 'AR高点',
name: '111AR高点',
lng: '114.839667',
lat: '25.744501',
},
{
typename: '车场',
name: '111AR车场',
lng: '114.894542',
lat: '25.731066',
},
{
typename: '工地',
name: '工地1',
lng: '114.771855',
lat: '25.747618',
},
]
this.markerList = markerList
this.markerList.forEach(item => {
AddLabelPoint(
item.id || new Date().getTime(),
item.name,
icondict[item.typename],
[item.lng, item.lat, 0], 'gd', item,
this.clickIcon
)
})
},
// 赋能视频点击
energyClick(e) {
this.childrenClick(e)
},
// 获取事件列表
fetchEventList(params) {
const icon = require('@/assets/images/icon/视频云/坐标.png')
getEventList({}).then((res) => {
this.eventList = [
{
id: new Date().getTime(),
deviceId: new Date().getTime(),
alarmId: new Date().getTime(),
lon: '114.818903',
lat: '25.743833',
code: new Date().getTime(),
deviceName: '111球机',
eventName: '突发事件',
urgencyName: '紧急高',
eventSource: '视频识别',
dutyDeptName: 'xxx部门',
evenTypeName: '市容市貌',
eventStatusName: '待立案',
location: '村头新村北100米',
imgUrl: 'https://img1.baidu.com/it/u=1696860963,3804811236&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
createTime: '2024-22-19 09:30:11',
report: '自动上报',
cover: '',
},
{
id: new Date().getTime(),
deviceId: new Date().getTime(),
alarmId: new Date().getTime(),
lon: '114.866776',
lat: '25.764915',
code: new Date().getTime(),
deviceName: '枪机2',
eventName: '突发事件',
urgencyName: '紧急',
eventSource: '视频识别',
dutyDeptName: 'xxx部门',
evenTypeName: '市容市貌',
eventStatusName: '待立案',
location: '宋溏村委会',
imgUrl: 'https://img2.baidu.com/it/u=1889999577,862790646&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
createTime: '2024-22-17 10:44:14',
report: '自动上报',
cover: '',
},
]
this.eventList.forEach((item) => {
AddLabelPoint(
item.id || new Date().getTime(),
item.eventName,
icon,
[item.lon, item.lat, 0], 'gd', item,
this.clickCaseIncon
)
})
})
},
// 点击事件坐标
clickCaseIncon(e) {
const showPop = (e) => {
const item = e._data.data
this.isShowEventPop = true
this.$nextTick(() => {
this.$refs.eventpop.initData(item)
})
}
if (this.isShowEventPop) {
this.isShowEventPop = false
setTimeout(() => {
showPop(e)
}, 100);
}
else {
showPop(e)
}
},
// 事件列表点击
menuEventClick(e) {
this.clickCaseIncon({
_data: {
data: e
}
})
},
// 关闭事件列表
closeEvent() {
this.isShowEvent = false
},
// 事件列表页面条数变化
changePage(val) {
console.log(val, '页面变化')
}
},
mounted() {
this.drawSence()
}
}
</script>
<style scoped>
.video-menu {
display: flex;
z-index: 111;
width: 40rem;
height: 5rem;
position: absolute;
left: 20px;
top: 1rem;
}
</style>
