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

类型：开发

Browse Source 
描述：
This commit is contained in:
lixuefeng
2025-11-13 21:18:45 +08:00
parent a23660efd6
commit d1411314a5
18 changed files with 1724 additions and 1100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/collect/components/video-box.vue
View File

@@ -7,19 +7,19 @@
</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"
<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" @click.stop="handleCamera(element.cameraIndexCode,element,index)">
<div
v-if="element.isDiy == 1"
@@ -45,12 +45,12 @@
{{ element.cameraName || element.scenicAreaId }}
</p>
</div>
</div>
</div>
</template>
</draggable>
</div>
</div>
<!-- <div class="pagination">
<el-pagination
@@ -93,6 +93,7 @@
import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
import mpegtsjs from "mpegts.js";
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const UP = 'UP' // 上转
@@ -139,17 +140,17 @@
isDiy.value = val
if(!val){
show.value = false
videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
}
// videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
// if(it.cameraIndexCode == cameraIndexCode.value){
// it.isDiy = val
// }
// })
}
const onStart = (res)=>{
}
const onEnd = (evt)=>{
const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
@@ -157,7 +158,7 @@
key:videoList.value[itemIndex].key,
cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
}).then((ress)=>{
// getVideCollectCateList()
})
// postVideoRemain()
@@ -179,7 +180,7 @@
}
postVideoRemain()
// total.value = res.total
initVideo()
}
// 收藏
@@ -189,12 +190,12 @@
isDiy: status == 0 ? 1 : 0
})
if (status == 0) {
element.isDiy = 1
} else {
videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
console.log('取消收藏',)
element.isDiy = 0
show.value = false
@@ -283,27 +284,49 @@
clearHlsRefs()
nextTick(() => {
videoList.value.forEach(async (it, i) => {
it.videos.forEach((item,index)=>{
setTimeout(() => {
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)
}
if(item.hlsUrl.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: item.hlsUrl,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(video)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
})
}else{
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)
}
}
}, 1000)
})
})
})
}
@@ -318,18 +341,18 @@
)
// 更新视频
const postVideoRemain = async () => {
timer = setInterval(() => {
clearInterval(timer)
videoList.value.forEach((items,index)=>{
setTimeout(()=>{
postVideoRemainApi({
cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
})
},1500)
})
}, 1500)
// timer = setInterval(() => {
// clearInterval(timer)
// videoList.value.forEach((items,index)=>{
// setTimeout(()=>{
// postVideoRemainApi({
// cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
// })
// },1500)
//
// })
//
// }, 1500)
}
const getVideoRegions = async () => {
let res = await getVideoRegionsApi({
@@ -343,7 +366,7 @@
item.videoResources=item.resourcesList[0].videoResources
})
regionList.value[0].show = true
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
@@ -359,7 +382,7 @@
onUnmounted(() => {
if (timer) clearInterval(timer)
clearHlsRefs()
})
</script>
<style></style>
@@ -393,7 +416,7 @@
}
overflow: auto;
}
.type-title{
position:absolute;
left:vw(-5);
@@ -528,7 +551,7 @@
}
&-list {
// gap: vw(3);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
@@ -547,7 +570,7 @@
// border-radius: 5px; /* 滑块的圆角 */
// }
// overflow: auto;
}
&-item {
position: relative;

18
src/views/home/components/jam-count.vue
View File

@@ -138,7 +138,23 @@
} else {
params.series[0].data = getSeriesData()
}
setOption(params)
const chart = setOption(params)
chart.on('legendselectchanged', function (e) {
var echartsArr = [];
for (let key in e.selected) {
if (e.selected[key]) {
echartsArr.push(key)
}
}
var echartsNum = 0;
props.list.forEach(item => {
if(echartsArr.includes(item.name)){
echartsNum += parseInt(item.count)
}
})
params.series[0].label.formatter = `{label|拥堵次数}` + '\n' + `{value|${echartsNum}}`;
setOption(params);
});
}
onMounted(() => {})

1962
src/views/monitor/components/box-2.vue
View File

File diff suppressed because it is too large Load Diff

20
src/views/scenic/components/jam.vue
View File

@@ -151,12 +151,28 @@
params.series[0].label.formatter = formatLabel()
params.series[0].data = getSeriesData()
}
setOption(params)
const chart = setOption(params);
chart.on('legendselectchanged', function (e) {
var echartsArr = [];
for (let key in e.selected) {
if (e.selected[key]) {
echartsArr.push(key)
}
}
var echartsNum = 0;
props.list.forEach(item => {
if(echartsArr.includes(item.name)){
echartsNum += parseInt(item.count)
}
})
params.series[0].label.formatter = `{value|${echartsNum}}` + '\n' + `{name|${props.subTitle}}`;
setOption(params);
});
}
</script>
<style scoped lang="scss">
.nYong-du{
position:absolute;
left:0;

13
src/views/sentiment/index.vue
View File

@@ -60,7 +60,7 @@
:seriesConfig="{ smooth: false, symbol: 'circle' }"
/>
</div>
</div>
<div class="box-4 mr-8 rela">
<Title1 title="地域分析" />
@@ -88,7 +88,7 @@
<span class="label">情感属性：</span>
<span class="value">{{ detailsHot.newsEmotion }}</span>
</div>
</div>
<div class="m-modal">
<div class="detail-item">
@@ -101,7 +101,7 @@
</div>
</div>
<div class="m-modal">
<div class="detail-item">
<span class="label">原文链接：</span>
<a :href="detailsHot.newsUrl" target="_blank" class="link">{{ detailsHot.newsUrl }}</a>
@@ -116,7 +116,7 @@
<div class="content" v-html="detailsHot.newsContent"></div>
</div>
</div>
</div>
</div>
</el-dialog>
@@ -229,7 +229,7 @@
}
.m-modal{
display: flex;
}
.detail-item {
flex:1;
@@ -461,7 +461,7 @@
</style>
<style scoped lang="scss">
.select-box {
position: absolute;
z-index: 99;
@@ -531,6 +531,7 @@
display: flex;
align-items: center;
height: vh(40);
cursor: pointer;
&:nth-child(2n + 1) {
background: rgba(3, 78, 153, 0.3);
}

2
src/views/traffic/components/box-2.vue
View File

@@ -29,7 +29,7 @@
<!-- <div class="header-left__camera" @click="videoShow = true">道路监控</div> -->
<!-- <div class="header-left__point" @click="videoShow = true">3号点位</div> -->
</div>
<div class="header-status">{{ item.congestLevelText }} </div>
<div class="header-status" v-if="item.congestLevel>0">{{ item.congestLevelText }} </div>
</div>
<div class="statistics">
<div class="statistics-item">