This commit is contained in:
duanliang
2025-04-22 22:05:44 +08:00
parent d8a7a0f53e
commit 3bff33bf03
21 changed files with 318 additions and 119 deletions

View File

@@ -224,7 +224,8 @@
width: 100%;
height: 100%;
font-size:vw(18);
color:#999;
// color:#999;
color:#02f9fa;
display: flex;
align-items: center;
justify-content: center;

View File

@@ -1,11 +1,16 @@
<template>
<div
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
}"
/>
<div style="position:relative;">
<div
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
}"
/>
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
</div>
</template>
<script setup>
@@ -96,11 +101,17 @@
}
]
}
let condShow = ref(0)
let aIndex = 1
watch(
() => props.dataList,
(newVal) => {
aIndex+=1
if(aIndex>=3&&!newVal.length){
condShow.value = 1
}
if (newVal.length > 0) {
condShow.value = 2
nextTick(() => {
defaultCofig.legend.formatter = (name) => {
let percent = props.dataList.find((item) => item.name == name).value
@@ -121,4 +132,19 @@
)
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.nYong-du{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
font-size:vw(18);
// color:#999;
color:#02f9fa;
display: flex;
align-items: center;
justify-content: center;
}
</style>

View File

@@ -1,12 +1,17 @@
<!-- 购买来源 -->
<template>
<div
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
}"
/>
<div style="position:relative;">
<div
:id="id"
:style="{
width: styleUtil.px2vw(width),
height: styleUtil.px2vh(height)
}"
/>
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
</div>
</template>
<script setup>
@@ -32,12 +37,17 @@
})
let params = null
let condShow = ref(0)
let aIndex = 1
watch(
() => props.list,
(val) => {
if(aIndex>=3&&!newVal.length){
condShow.value = 1
}
if (val.length > 0) {
setTimeout(() => {
condShow.value = 2
init()
}, 1000)
}
@@ -48,18 +58,21 @@
)
const getSeriesData = () => {
console.log(props.list,'props.listprops.listprops.list')
return props.list.map((item) => {
return {
type: 'bar',
name: item.name,
clockwise: false,
silent: true,
roundCap: true,
barWidth: '13%',
showBackground: true,
coordinateSystem: 'polar',
data: [item.value]
}
item.value?item.value:0;
return {
type: 'bar',
name: item.name,
clockwise: false,
silent: true,
roundCap: true,
barWidth: '13%',
showBackground: true,
coordinateSystem: 'polar',
data: [item.value]
}
})
}
@@ -75,7 +88,11 @@
itemGap: fitChartSize(6),
formatter: function (name) {
let obj = props.list.find((item) => item.name == name)
return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
if(obj?.value){
obj.value?obj.value:0;
return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
}
},
textStyle: {
rich: {
@@ -114,7 +131,8 @@
},
series: getSeriesData()
}
} else {
}
else {
params.series = getSeriesData()
}
setOption(params)
@@ -122,6 +140,20 @@
</script>
<style scoped lang="scss">
.nYong-du{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
font-size:vw(18);
// color:#999;
color:#02f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.legend {
display: flex;
align-items: center;

View File

@@ -16,6 +16,20 @@
<source type="application/x-mpegURL" />
</video> -->
<div class="action-box">
<div class="action-item">
<div
v-if="isCollect == 1"
class="video-follow"
@click.stop="handleCollect()"
>取消关注
</div>
<div
v-if="isCollect == 0"
class="video-unfollow"
@click.stop="handleCollect()"
>关注
</div>
</div>
<div class="action-item">
<img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
<span>聚焦</span>
@@ -35,19 +49,10 @@
</div>
<div class="action-item">
<div
v-if="isCollect == 1"
class="video-follow"
@click.stop="handleCollect()"
>取消关注
</div>
<div
v-if="isCollect == 0"
class="video-unfollow"
@click.stop="handleCollect()"
>关注
</div>
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-if="isDayCurr==0">收藏</div>
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-else="isDayCurr==1">取消收藏</div>
</div>
</div>
</div>
<img class="close" src="@/assets/images/close.png" @click="handleClose" />
@@ -58,10 +63,8 @@
<script setup>
import Hls from 'hls.js'
import { ElMessage } from 'element-plus'
import {
postVideoCollectApi
} from '@/api/monitor'
import { postVideoControlApi } from '@/api/monitor'
import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
import { getColletDiyApi } from '@/api/home'
import pubSub from 'pubsub-js'
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
@@ -85,6 +88,10 @@
isCollect:{
type: Number,
default: 0
},
isDiy:{
type: Number,
default: 0
}
})
let colletCond = ref(0)
@@ -109,6 +116,22 @@
immediate: true
}
)
let isDayCurr = ref(props.isDiy)
// 收藏
const handleCollectAdd = async (id, status, index) => {
await getColletDiyApi({
cameraIndexCode:id,
isDiy: isDayCurr.value == 0 ? 1 : 0
})
if(isDayCurr.value==1){
isDayCurr.value=0
// modelValue.value = false
}else{
isDayCurr.value=1
}
pubSub.publish('videoIsDiy',{isDiy:isDayCurr.value,cameraIndexCode:props.cameraIndexCode} )
}
// 关注
const handleCollect = async (id, status, index) => {
await postVideoCollectApi({
@@ -196,10 +219,10 @@
// top: vw(8);
// z-index: 9999;
// margin-left:vw(20);
padding: 0 vw(20);
height: vh(24);
padding: vw(10);
// height: vh(24);
text-align: center;
line-height: vh(24);
// line-height: vh(24);
font-weight: 400;
font-size: vw(16);
color: #ffffff;