lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 1

Browse Source
This commit is contained in:
duanliang
2025-05-30 13:50:43 +08:00
parent 21a3bc6452
commit e3f0196e76
16 changed files with 2049 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

929
src/views/collect/components/video-box.vue Normal file
View File

@@ -0,0 +1,929 @@
<template>
<div class="video-box">
<div v-if="videoLog == 1" class="video-wrapper">
<div class="video-list">
<!-- <div class="empty-box" v-if="videoList.length==0&&cond">
未接入
</div> -->
<div class="type-item" v-for="(item,index) in videoList">
<div class="type-title">{{item.label}}</div>
<draggable :data-item-index="index" class="item-element" :item-key="item.key" :list="item.videos" ghost-class="ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
@start="onStart" @end="onEnd">
<template #item="{ element }">
<div class="video-item" :style="{
width:(100/grad)+'%'
}">
<div class="video-item__inner">
<div
v-if="element.isDiy == 1"
class="video-item__follow"
@click.stop="handleCollect(element.cameraIndexCode, element.isDiy, index,element)"
>取消收藏
</div>
<div
v-if="element.isDiy == 0"
class="video-item__unfollow"
@click.stop="handleCollect(element.cameraIndexCode, element.isDiy, index,element)"
>收藏
</div>
<video
class="video-item__video"
:id="'monitorVideo' + element.cameraIndexCode"
preload="auto"
muted
autoplay
:controls="false"
/>
<p class="video-item__title--primary">
{{ element.cameraName || element.scenicAreaId }}
</p>
</div>
</div>
</template>
</draggable>
</div>
</div>
<!-- <div class="pagination">
<el-pagination
v-model:current-page="params.pageNum"
:page-size="params.pageSize"
:total="total"
background
layout="prev, pager, next"
@current-change="currentChange"
/>
</div> -->
</div>
<!-- <ul class="videos">
<li class="video-item" v-for="item in 8" :key="item">
<img src="@/assets/images/sxzd.png" alt="" />
<p>
<span>核心路段：这是一条信息说明</span>
</p>
</li>
</ul> -->
<!-- <div class="pagination-box">
<el-pagination background layout="prev, pager, next" :total="1000" />
</div> -->
</div>
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy" :isCollect="isCollect" :src="videoSrc" />
</template>
<script setup>
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi } from '@/api/home'
import {
getVideoTypeApi,
getVideoRegionsApi,
postVideoRemainApi,
postVideoControlApi,
postVideoCollectApi
} from '@/api/monitor'
import draggable from 'vuedraggable';
import pubSub from 'pubsub-js'
import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const UP = 'UP' // 上转
const DOWN = 'DOWN' // 下转
const LEFT = 'LEFT' // 左转
const RIGHT = 'RIGHT' // 右转
const STOP = 'STOP' // 停止操作
let cond = ref(false)
let ACTION = '0'
let hlsRefs = []
let hlsRef = null
let timer = null
let videoLog = ref(1)
let videoList = ref([])
let cameraIndexCode = ref('')
let videoRef = ref()
let monitorChange = null
let total = ref(0)
let loading = ref(false)
let command = ref('')
let cameraName = ref('')
let regionList = ref()
let params = reactive({
businessScenicArea: "",
cameraName: "",
pageNum: 1,
pageSize: 6,
})
let grad = ref(3)
let show = ref(false)
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
params.businessScenicArea = data.name
params.pageNum = 1
videoList.value = []
total.value = 0
cond.value = false
getRegionsList()
})
}
const onStart = (res)=>{
}
const onEnd = (evt)=>{
const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
console.log(evt,itemIndex,'eeeeeeee')
getVideCollectCateSort({
key:videoList.value[itemIndex].key,
cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
}).then((ress)=>{
videoList.value[itemIndex] = newList
})
}
// 获取关注列表
const getVideCollectCateList = async () => {
clearHlsRefs()
params.businessVideoDisplayPosition = ''
let res = await getVideCollectCate(params)
videoList.value = res.data
console.log(res,videoList.value.length,'ressssssssssssss')
if(videoList.value.length<=3){
grad.value = 3
}else if(videoList.value.length<=6){
grad.value = 2
}else{
grad.value = 1
}
postVideoRemain()
// total.value = res.total
initVideo()
}
// 收藏
const handleCollect = async (id, status, index,element) => {
await getColletDiyApi({
cameraIndexCode:id,
isDiy: status == 0 ? 1 : 0
})
if (status == 0) {
element.isDiy = 1
} else {
element.isDiy = 0
}
// pubSub.publish('videoCollect', id)
}
// 采集
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
} else {
ACTION = '0'
command.value = e
}
await postVideoControlApi({
action: ACTION,
command: command.value,
cameraIndexCode: cameraIndexCode.value
})
if (e == STOP) {
command.value = ''
}
ElMessage({
message: '操作成功',
type: 'success'
})
}
// 返回列表
const handleBack = () => {
videoLog.value = 1
hlsRef.destroy()
initVideo()
}
let isCollect = ref(0)
let isDiy = ref(0)
let videoSrc = ref('')
const handleCamera = async (itemCode,resource) => {
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
cameraIndexCode:itemCode
})
cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
// 分页
const currentChange = (e) => {
clearHlsRefs()
videoList.value = []
getRegionsList()
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
hlsRef = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hlsRef.loadSource(url)
hlsRef.attachMedia(videoRef.value)
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play()
})
if (type == 100) initVideo()
}, 1000)
}
const initVideo = () => {
clearHlsRefs()
nextTick(() => {
videoList.value.forEach(async (it, i) => {
it.videos.forEach((item,index)=>{
setTimeout(() => {
const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
if(item.hlsUrl){
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(item.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
hlsRefs.push(hls)
}
}, 2000)
})
})
})
}
watch(
() => videoList.value,
(val) => {
if (val.length) {
postVideoRemain()
}
},
{ immediate: true }
)
// 更新视频
const postVideoRemain = async () => {
timer = setInterval(() => {
videoList.value.forEach((items,index)=>{
setTimeout(()=>{
postVideoRemainApi({
cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
})
},1500)
})
}, 1500)
}
const getVideoRegions = async () => {
let res = await getVideoRegionsApi({
cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea
})
console.log(res,11111111111111)
regionList.value = res.data
regionList.value.forEach((item,index)=>{
// item.show = true
item.videoResources=item.resourcesList[0].videoResources
})
regionList.value[0].show = true
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
}
const onInput = debounce((e) => {
getVideoRegions()
}, 500)
let hotelChange = null;
onMounted(()=>{
getVideCollectCateList()
console.log(draggable,'draggable')
})
onUnmounted(() => {
clearHlsRefs()
})
</script>
<style></style>
<style scoped lang="scss">
.type-item{
// width:32.5%;
flex: 1;
border:vw(2) solid #0096FF;
padding:vh(40) vw(20);
position:relative;
height:vh(900);
padding-bottom:vh(20);
.item-element{
display: flex;
align-items: flex-start;
height:100%;
flex-wrap: wrap;
// gap: vw(10);
// width:vw(800);
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
overflow: auto;
}
.type-title{
position:absolute;
left:vw(-5);
top:0;
color:#fff;
background: url(@/assets/images/nav-l-t-bg.png) no-repeat;
background-size: 100%;
width:100%;
height:vh(30);
padding:0 vw(30);
font-size:vw(24);
line-height:vh(30);
// line-height: vh(40);
}
}
.type-item:first-child {
margin-right: vw(20);
}
.type-item:last-child {
margin-left: vw(20);
}
.item-sc{
padding:vw(10);
}
.empty-box{
display:flex;
align-items: center;
font-size:vw(40);
height:vh(750);
justify-content: center;
text-align:center;
width:100%;
color:#fff;
}
.action {
&-box {
margin-top: vh(16);
gap: vw(20);
display: flex;
align-items: center;
justify-content: center;
}
&-item {
padding: vw(16);
display: flex;
align-items: center;
background: #0a4190;
border-radius: vw(8);
> img {
cursor: pointer;
width: vw(34);
height: auto;
}
> span {
margin: 0 vw(16);
font-weight: 400;
font-size: vw(16);
color: #ffffff;
}
.pause {
margin: 0 vw(10);
}
}
}
.video-box {
display: flex;
flex: 1;
flex: 1;
height: vh(950);
margin-top: vh(120);
margin-left: vw(10);
padding: vh(34) vw(26);
box-sizing: border-box;
// background-image: url('@/assets/images/one-video-bg.png');
background-size: 100% 100%;
.videos {
display: flex;
flex-wrap: wrap;
gap: vw(6);
.video-item {
position: relative;
width: vw(210);
height: vh(380);
padding: vh(12) vw(12);
box-sizing: border-box;
background-image: url('@/assets/images/item-primary.png');
background-size: 100% 100%;
> img {
width: 100%;
height: 100%;
}
> p {
position: absolute;
width: calc(100% - vw(24));
height: vh(40);
bottom: vh(12);
background: rgba(4, 30, 69, 0.72);
> span {
padding-left: vw(20);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
line-height: vh(40);
}
}
}
}
.pagination-box {
margin-top: vh(30);
margin-right: vw(50);
display: flex;
justify-content: flex-end;
}
}
.video {
&-wrapper {
position: relative;
width: 100%;
height: 100%;
// margin-top: vh(40);
margin-left: vw(10);
// padding: vh(30) vw(20);
// box-sizing: border-box;
// background-image: url('/src/assets/images/log-v-bg.png');
// background-size: 100% 100%;
.pagination {
padding: vh(10) vw(30);
position: absolute;
right: vw(30);
bottom: vh(20);
}
}
&-list {
// gap: vw(3);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
// height:vh(890);
// width:vw(800);
// &::-webkit-scrollbar {
// width: vw(4); /* 滚动条的宽度 */
// }
// /* 滚动条轨道 */
// &::-webkit-scrollbar-track {
// background: 'transparent'; /* 轨道的背景色 */
// }
// /* 滚动条滑块 */
// &::-webkit-scrollbar-thumb {
// background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
// border-radius: 5px; /* 滑块的圆角 */
// }
// overflow: auto;
}
&-item {
position: relative;
// width: vw(720);
// width:48%;
// margin-right: 1%;
height: vh(380);
padding: vh(10) vw(10);
box-sizing: border-box;
// margin-bottom:1%;
background-image: url('/src/assets/images/item-primary.png');
background-size: 100% 100%;
&:hover {
.video-item__follow {
display: block !important;
}
}
}
&-item__follow {
cursor: pointer;
display: none;
position: absolute;
right: vw(8);
top: vw(8);
z-index: 9999;
padding: 0 vw(20);
height: vh(24);
text-align: center;
line-height: vh(24);
font-weight: 400;
font-size: vw(16);
color: #ffffff;
background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
}
&-item__unfollow {
@extend .video-item__follow;
background-image: url('@/assets/images/unfollow.png');
}
&-item__inner {
position: relative;
}
&-item__title {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: vh(10) vw(10);
color: #fff;
font-size: vw(14);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 999;
}
&-item__title--error {
@extend .video-item__title;
background-color: rgba(226, 27, 27, 0.72);
}
&-item__title--primary {
@extend .video-item__title;
background-color: rgba(4, 30, 69, 0.72);
}
&-item__video {
width: 100%;
height: vh(366);
object-fit: fill;
}
&-detail {
margin-left: vw(10);
display: flex;
justify-content: space-between;
}
&-detail__wrapper {
position: relative;
padding: vh(40) vw(50);
width: vw(2060);
height: vh(960);
// background-image: url('/src/assets/images/one-video-bg.png');
// background-size: 100% 100%;
}
&-detail__title {
position: absolute;
left: vw(50);
right: vw(50);
top: 40 (vh);
z-index: 9;
font-weight: 400;
font-size: vw(14);
color: #ffffff;
padding: vw(20);
display: flex;
justify-content: space-between;
background: rgba(4, 30, 69, 0.5);
}
&-detail__video {
width: 100%;
height: vh(780);
object-fit: contain;
background-color: #000;
}
&-right {
margin-left: vw(8);
width: vw(440);
height: vh(890);
background: #082f5a;
.back-box {
cursor: pointer;
padding-right: vw(20);
display: flex;
align-items: center;
.icon {
width: vw(30);
height: auto;
margin-right: vw(10);
}
& > span {
font-weight: bold;
font-size: vw(20);
color: #ffffff;
}
}
.list {
overflow-y: auto;
overflow-x: hidden;
height: vh(870);
padding: vw(8);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: #888; /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
/* 当鼠标悬停在滚动条上时滑块的样式 */
&::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块的背景色 */
}
}
.item {
margin-bottom: vh(10);
padding: vw(10);
background-image: url('@/assets/images/item-primary.png');
background-size: 100% 100%;
& > div {
position: relative;
}
&-title {
position: absolute;
bottom: 0;
width: 100%;
padding: vw(10);
color: #fff;
font-size: vw(14);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 999;
}
&-title--error {
@extend .item-title;
background-color: rgba(226, 27, 27, 0.72);
}
&-title--primary {
@extend .item-title;
background-color: rgba(4, 30, 69, 0.72);
}
&-img {
width: 100%;
height: vh(164);
display: block;
object-fit: cover;
}
}
}
.video-live {
.video-rt {
width: vw(400);
height: vh(950);
background: radial-gradient(
to bottom 70% at 99% 50%,
#0a4190 0%,
rgba(0, 77, 136, 0.6) 100%
);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
opacity: 0.4;
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
margin-left: vw(10);
padding: vw(20);
.rt-v-box {
overflow-y: auto;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
height: 100%;
}
.title {
background-image: url('/src/assets/images/nav-l-t-bg.png');
background-size: 100% 100%;
margin-bottom: vh(10);
position: relative;
left: vw(-20);
span {
margin-left: vw(30);
font-weight: 800;
font-size: vw(15);
line-height: vh(26);
text-align: center;
font-style: normal;
text-transform: none;
background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
.rt-video {
width: 100%;
height: vh(300);
background-image: url('/src/assets/images/v-item-bg.png');
background-size: 100% 100%;
padding: vw(20);
box-sizing: border-box;
margin-bottom: vh(2);
position: relative;
.desc {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
z-index: 9;
background: rgba(4, 30, 69, 0.5);
border-radius: 0px 0px 0px 0px;
text-align: center;
font-weight: 400;
font-size: vw(14);
color: #ffffff;
padding: vw(20);
text-align: left;
font-style: normal;
text-transform: none;
}
}
.v-error-bg {
background-image: url('/src/assets/images/v-item-bg-1.png');
background-size: 100% 100%;
.desc {
background: rgba(226, 27, 27, 0.5);
}
}
}
}
}
.left-nav {
margin: 0 vw(8);
width: vw(250);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
.bom-box {
margin-top: vh(20);
.search-box {
border-radius: vw(2);
height: vh(36);
border: 1px solid #0096ff;
margin: vh(10) auto;
display: flex;
align-items: center;
justify-content: space-between;
.search-icon {
width: vw(20);
height: vw(20);
margin-right: vw(10);
}
}
.tree-box {
position: relative;
height: vh(750);
padding: 0 vw(20);
overflow-y: auto;
overflow-x: hidden;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
.tree-item {
cursor: pointer;
position: relative;
padding-top: vh(20);
// border-left: vw(2) solid #37d8fc;
&:nth-child(1) {
padding-top: 0;
}
&__node {
position: relative;
display: flex;
align-items: flex-start;
}
&__icon {
margin-left: vw(-8);
width: vw(16);
height: auto;
}
&__icon-up {
@extend .tree-item__icon;
transform: rotate(180deg);
}
&__name {
padding: 0 vw(20);
display: block;
font-weight: 400;
font-size: vw(15);
color: #ffffff;
text-align: left;
font-style: normal;
text-transform: none;
}
&__child {
position: relative;
margin-top: vh(20);
margin-left: vw(20);
// border-left: vw(2) solid #37d8fc;
}
&-top__icon {
position: absolute;
left: vw(-8);
top: vh(0);
width: vw(16);
height: vw(16);
}
&-bottom__icon {
position: absolute;
left: vw(-8);
bottom: vh(0);
width: vw(16);
height: vw(16);
}
&__child-item {
padding: vh(0) vw(20) vh(20) vw(20);
cursor: pointer;
color: rgb(192,216,254);
font-weight: 400;
font-size: vw(15);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: flex-start;
&:nth-last-of-type(1) {
padding: vh(0) vw(20);
}
}
}
}
}
}
//背景色设置为透明
:deep(.el-input__wrapper) {
background-color: rgba(0, 0, 0, 0);
border: none;
box-shadow: none;
}
//输入框颜色
:deep(.el-input__inner) {
background-color: rgba(0, 0, 0, 0) !important;
color: #fff;
}
:deep(.el-input__inner) {
height: vh(36);
font-size: vw(16);
color: #ffffff;
}
</style>

7
src/views/collect/index.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<video-box />
</template>
<script setup>
import videoBox from './components/video-box'
</script>