4.22
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user