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

4.22

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist417大屏.zip → dist418new.zip
View File

Binary file not shown.

BIN
src/assets/images/d-ico-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

3
src/components/Line/index.vue
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;

30
src/components/PieRow/index.vue
View File

@@ -1,4 +1,5 @@
<template>
<div style="position:relative;">
<div
:id="id"
:style="{
@@ -6,6 +7,10 @@
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>

36
src/components/TicketSource/index.vue
View File

@@ -1,5 +1,7 @@
<!-- 购买来源 -->
<template>
<div style="position:relative;">
<div
:id="id"
:style="{
@@ -7,6 +9,9 @@
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,7 +58,9 @@
)
const getSeriesData = () => {
console.log(props.list,'props.listprops.listprops.list')
return props.list.map((item) => {
item.value?item.value:0;
return {
type: 'bar',
name: item.name,
@@ -60,6 +72,7 @@
coordinateSystem: 'polar',
data: [item.value]
}
})
}
@@ -75,7 +88,11 @@
itemGap: fitChartSize(6),
formatter: function (name) {
let obj = props.list.find((item) => item.name == name)
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;

61
src/components/VideoDialog/index.vue
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;

5
src/layout/components/CoreVideo/allList.vue
View File

@@ -32,7 +32,7 @@
</div>
</el-dialog>
</div>
<video-dialog v-model="videoShow" :src="src" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
<video-dialog v-model="videoShow" :src="src" :isDiy="isDiy" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
</template>
<script setup>
@@ -52,6 +52,7 @@
let src = ref('')
let cameraIndexCode = ref('')
let videoShow = ref(false)
let isDiy = ref(0)
let params = reactive({
pageNum: 1,
pageSize: 15,
@@ -70,7 +71,6 @@
)
const onVideoCollect = () => {
pubSub.subscribe('videoCollect', () => {
console.log(1111111111111111111111)
clearHlsRefs()
getVideoList()
})
@@ -79,6 +79,7 @@
console.log(item,'iscollect')
src.value = item.hlsUrl
isCollect.value = item.isCollect
isDiy.value = item.isDiy
cameraIndexCode.value = item.cameraIndexCode
videoShow.value = true
}

13
src/layout/components/CoreVideo/index.vue
View File

@@ -32,7 +32,7 @@
</li>
</ul>
</div>
<video-dialog v-model="videoShow" :src="src" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
<video-dialog v-model="videoShow" :src="src" :isCollect="isCollect" :isDiy="isDiy" :cameraIndexCode="cameraIndexCode" />
<all-list v-model="allShow" />
</template>
@@ -71,11 +71,13 @@ let isCollect = ref(0)
let allShow = ref(false)
let hlsRefs = []
let timer = null
let isDiy = ref(0)
const handleItem = (item) => {
console.log(item,'1111111111111111111111111')
src.value = item.hlsUrl
cameraIndexCode.value = item.cameraIndexCode
isCollect.value = item.isCollect
isDiy.value = item.isDiy
videoShow.value = true
}
@@ -161,6 +163,13 @@ let isCollect = ref(0)
onMounted(() => {
onVideoCollect()
getVideoList()
pubSub.subscribe('videoIsDiy', (msg, data) => {
console.log(data,'收藏 ++++++++++++++')
getVideoList()
})
})
onUnmounted(() => {

2
src/utils/config.js
View File

@@ -4,7 +4,7 @@ export const proBaseUrl = 'http://192.168.77.200'
export const socketBaseUrl = 'ws://192.168.77.209:81/fjtcc-api'
export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
export const mode = 'dev' // 测试 dev 正式 pro
export const mode = 'pro' // 测试 dev 正式 pro
export const devToken =
'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ'

34
src/views/home/components/box-3.vue
View File

@@ -48,13 +48,13 @@
<div class="box">
<div class="pt-10">
<Title3 title="拥堵次数占比" />
<jam-count :list="homeStore.trafficInfoData.data.countRate" />
<jam-count :text="'暂无拥堵'" :list="homeStore.trafficInfoData.data.countRate" />
</div>
</div>
<div class="box">
<div class="pt-10">
<Title3 title="拥堵时长" />
<jam-duration :list="homeStore.trafficInfoData.data.timeRate" />
<jam-duration :text="'暂无拥堵'" :list="homeStore.trafficInfoData.data.timeRate" />
</div>
</div>
</div>
@@ -78,7 +78,7 @@
<div>
<div v-for="item in homeStore.carStopInfoData.spotInfo">
<div class="label">{{ item.name }}</div>
<div class="value" :class="{ error: item.type == 1, success: item.type == 0 }">
<div class="value" :class="{ error: item.type == 1, success: item.type == 0,type3: item.type==2 }">
{{ item.value }}
</div>
</div>
@@ -108,8 +108,12 @@
</div>
<div class="box-1">
<div class="pt-10">
<Title3 title="停车场空余" />
<vacancy :list="homeStore.carStopInfoData.dataList2" />
<Title3 title="停车场使用" />
<el-carousel trigger="click" interval="5000">
<el-carousel-item v-for="item in splitList" :key="item">
<vacancy :list="item" />
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
@@ -259,7 +263,17 @@
const shipMove = computed(() => {
return homeStore.carShipData?.ship?.info.length > 3
})
const splitArray = (arr,len)=>{
let result = [];
for (let i = 0; i < arr.length; i += len) {
result.push(arr.slice(i, i + len));
}
return result;
}
const splitList = computed(()=>{
let splittedArrays = splitArray(homeStore.carStopInfoData.dataList2, 3);
return splittedArrays
})
const parkData = computed(() => {
return [{ data: homeStore.carStopInfoData.dataList.map((item) => item.value) }]
})
@@ -273,6 +287,7 @@
const congestionXAxisData = computed(() => {
return homeStore.trafficInfoData.data.congestion.map((item) => item.name)
})
console.log(homeStore.carStopInfoData.spotInfo,'homeStore.carStopInfoData.spotInfo')
</script>
<style lang="scss" scoped>
@@ -352,10 +367,13 @@
color: #ffffff;
}
.error {
color: #e21b1b;
color: #F15A25;
}
.success {
color: #02f9fa;
color: #02F9FA;
}
.type3{
color:#E21B1B;
}
}
}

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

@@ -3,7 +3,7 @@
<div style="position: relative;">
<div class="jam-count" :id="id" />
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
<div v-if="condShow==1" class="nYong-du">{{text}}</div>
</div>
</template>
@@ -16,6 +16,10 @@
list: {
type: Array,
default: () => []
},
text:{
type: String,
default: '暂无数据'
}
})
@@ -145,7 +149,8 @@
width: 100%;
height: 100%;
font-size:vw(18);
color:#999;
// color:#999;
color:#02f9fa;
display: flex;
align-items: center;
justify-content: center;

9
src/views/home/components/jam-duration.vue
View File

@@ -3,7 +3,7 @@
<div style="position:relative;">
<div class="jam" :id="id" />
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
<div v-if="condShow==1" class="nYong-du">{{text}}</div>
</div>
</template>
@@ -18,6 +18,10 @@
list: {
type: Array,
default: () => []
},
text:{
type: String,
default: '暂无数据'
}
})
let condShow = ref(0)
@@ -208,7 +212,8 @@
width: 100%;
height: 100%;
font-size:vw(18);
color:#999;
// color:#999;
color:#02f9fa;
display: flex;
align-items: center;
justify-content: center;

1
src/views/home/index.vue
View File

@@ -70,6 +70,7 @@
homeStore.setTrafficInfoData(val)
break
case 'carStopInfo':
console.log(val,'carStopInfocarStopInfocarStopInfocarStopInfocarStopInfo')
homeStore.setCarStopInfoData(val)
break
case 'carShipData':

24
src/views/hotel/components/video-box.vue
View File

@@ -61,7 +61,7 @@
class="video-item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode)"
@click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode,item)"
>
<div class="video-item__inner">
<div
@@ -110,6 +110,10 @@
<source type="application/x-mpegURL" />
</video>
<div class="action-box">
<div class="action-item">
<span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-if="thisVideo.isCollect==0">关注</span>
<span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-else="thisVideo.isCollect==1">取消关注</span>
</div>
<div class="action-item">
<img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
<span>聚焦</span>
@@ -142,7 +146,7 @@
class="item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo)"
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
>
<div>
<p class="item-title--primary">
@@ -176,7 +180,7 @@
<el-pagination background layout="prev, pager, next" :total="1000" />
</div> -->
</div>
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isCollect="isCollect" :src="videoSrc" />
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy" :isCollect="isCollect" :src="videoSrc" />
</template>
<script setup>
@@ -238,8 +242,11 @@
isCollect: status == 0 ? 1 : 0
})
if (status == 0) {
thisVideo.value.isCollect=1
videoList.value[index].isCollect = 1
} else {
thisVideo.value.isCollect=0
videoList.value[index].isCollect = 0
}
pubSub.publish('videoCollect', id)
@@ -272,6 +279,7 @@
initVideo()
}
let isCollect = ref(0)
let isDiy = ref(0)
let videoSrc = ref('')
const handleCamera = async (itemCode,resource) => {
show.value = true
@@ -281,6 +289,7 @@
})
cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
//清除 hls
@@ -339,7 +348,7 @@
break;
default:
console.log('无法恢复的错误，销毁播放器');
hls.destroy();
// hls.destroy();
break;
}
}
@@ -358,7 +367,9 @@
}
}
const handleItemVideo = (url, type, code) => {
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
@@ -446,6 +457,9 @@
</script>
<style></style>
<style scoped lang="scss">
.item-sc{
padding:vw(10);
}
.empty-box{
display:flex;
align-items: center;

6
src/views/monitor/components/box-1.vue
View File

@@ -562,10 +562,12 @@
}
}
&:nth-child(4) {
background-image: url('/src/assets/images/four-t-3.png');
// background-image: url('/src/assets/images/four-t-3.png');
background-image: url('/src/assets/images/four-t-1.png');
background-size: 100% 100%;
.scenic-item__value {
color: #f15a25;
// color: #f15a25;
color: #02f9fa;
}
}
&:nth-child(5) {

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

@@ -112,6 +112,10 @@
<source type="application/x-mpegURL" />
</video>
<div class="action-box">
<div class="action-item">
<span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-if="thisVideo.isCollect==0">关注</span>
<span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-else="thisVideo.isCollect==1">取消关注</span>
</div>
<div class="action-item">
<img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
<span>聚焦</span>
@@ -170,7 +174,7 @@
</div>
</div>
</div>
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isCollect="isCollect" :src="videoSrc" />
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy" :isCollect="isCollect" :src="videoSrc" />
</template>
<script setup>
@@ -202,6 +206,7 @@
children: 'children'
}
let isCollect = ref(0)
let isDiy = ref(0)
let command = ref('')
let videoList = ref([])
let navList = ref([])
@@ -346,6 +351,7 @@
regionList.value[e].show = !regionList.value[e].show
}
const handleCamera = async (itemCode,resource) => {
console.log(resource,'resourceresourceresourceresourceresourceresource')
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
@@ -353,6 +359,7 @@
})
cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
const handleCollect = async (id, status, index) => {
@@ -361,8 +368,10 @@
isCollect: status == 0 ? 1 : 0
})
if (status == 0) {
thisVideo.value.isCollect=1
videoList.value[index].isCollect = 1
} else {
thisVideo.value.isCollect=0
videoList.value[index].isCollect = 0
}
pubSub.publish('videoCollect', id)
@@ -426,9 +435,9 @@
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
console.log(7778888)
hls.on(Hls.Events.ERROR, (event, data) => {
console.error('HLS 播放器遇到错误:', data);
// console.error('HLS 播放器遇到错误:', data);
// hls.startLoad();
// initVideo()
// 根据错误类型进行处理
if (data.fatal) {
@@ -444,7 +453,7 @@
default:
console.log('无法恢复的错误，销毁播放器');
hls.destroy();
// hls.destroy();
break;
}
}
@@ -478,7 +487,9 @@
cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea
})
console.log(params.businessScenicArea,'测收拾收拾')
regionList.value = res.data
regionList.value.videoResources = res.data.videoResources
regionList.value[0].show = true
if(search=='search'){
regionList.value.forEach((item,index)=>{
@@ -506,6 +517,20 @@
getVideoType()
getVideoRegions()
onMonitorChange()
pubSub.subscribe('videoIsDiy', (msg, data) => {
console.log(data,'收藏 ++++++++++++++')
if(data.isDiy){
if(current.value==navList.value.length){
getColletList()
}
}else{
videoList.value.forEach((item,index)=>{
if(item.cameraIndexCode==data.cameraIndexCode){
videoList.value.splice(index,1)
}
})
}
})
})
onUnmounted(() => {
clearHlsRefs()

8
src/views/scenic/components/big-map.vue
View File

@@ -167,8 +167,8 @@ let tabsIndex = ref(0)
if(val[0].map){
tabs.value[0].leng = val[0].all.length
tabs.value[1].leng = val[0].moving.length
tabs.value[2].leng = val[0].offline.length
tabs.value[3].leng = val[0].still.length
tabs.value[2].leng = val[0].still.length
tabs.value[3].leng = val[0].offline.length
}
if(val[1]==0){
listTabs.value = val[0].all
@@ -177,10 +177,10 @@ let tabsIndex = ref(0)
listTabs.value = val[0].moving
}
if(val[1]==2){
listTabs.value = val[0].offline
listTabs.value = val[0].still
}
if(val[1]==3){
listTabs.value = val[0].still
listTabs.value = val[0].offline
}
return false

14
src/views/scenic/components/box-1.vue
View File

@@ -20,7 +20,9 @@
</div>
</div>
<div class="main">
<div @click="hanldeToDetails" class="look-btn">查看详情</div>
<a @click="hanldeToDetails" class="look-btn">
<img src="@/assets/images/d-ico-1.png" />
</a>
<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
@@ -152,7 +154,6 @@ import pubSub from 'pubsub-js'
onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
hrefItem.value = data
console.log(data,'llllllllllllllllllllllllllllllll')
// initMap('scenic-map', data.lng, data.lat, 15)
// map.value.setDisplayOptions({
// poiText: false, // 隐藏poi标注
@@ -248,18 +249,23 @@ import pubSub from 'pubsub-js'
overflow-y: hidden;
position:relative;
.look-btn{
cursor: pointer;
position: absolute;
right: vw(20);
top: 10%;
top: 6%;
transform: translateY(-50%);
padding: vw(12);
display: flex;
align-items: center;
background: #0a4190;
// background: #0a4190;
border-radius: vw(4);
font-size: vw(14);
color: #fff;
z-index: 999;
img{
width:vw(100);
// height:;
}
}
.scenic-box {
width: 100%;

11
src/views/scenic/components/box-2.vue
View File

@@ -101,7 +101,6 @@
<div class="pt-10">
<Title3 title="车辆归属地占比" />
</div>
<div v-if="dataLists.length">
<PieRow
label="停车总数"
:dataList="dataLists"
@@ -109,14 +108,13 @@
:width="360"
:height="300"
/>
</div>
<div class="null-box" v-else> 暂无数据 </div>
</div>
</div>
</div>
<div class="box-2">
<Title1 title="异常信息 " />
<div @click="handleToWorkOrder" class="count-box flex">
<div @click="handleToWorkOrder" style="cursor: pointer;" class="count-box flex">
<count-item
v-for="item in headList"
:label="item.name"
@@ -166,14 +164,16 @@
:height="300"
sub-title="拥堵频次总数"
:list="scenicStore.trafficData.data.countRate"
:text="'暂无拥堵'"
/>
</div>
<div class="border">
<Title3 title="拥堵时长占比" />
<jam
:text="'暂无拥堵'"
:width="220"
:height="300"
sub-title="拥堵总时长"
sub-title="拥堵总时长(分钟)"
:list="scenicStore.trafficData.data.timeRate"
/>
</div>
@@ -502,6 +502,7 @@
.look-box {
position: relative;
.look-btn {
cursor: pointer;
position: absolute;
right: vw(20);
top: 50%;

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

@@ -1,4 +1,6 @@
<template>
<div style="position: relative;">
<div
:id="id"
:style="{
@@ -6,6 +8,9 @@
height: styleUtil.px2vh(height)
}"
/>
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">{{text}}</div>
</div>
</template>
<script setup>
@@ -33,16 +38,26 @@
subTitle: {
type: [String, Number],
default: () => ''
},
text:{
type: String,
default: '暂无数据'
}
})
const { id, setOption } = useEchart()
let condShow = ref(0)
let aIndex = 1
watch(
() => props.list,
() => {
(val) => {
aIndex+=1
if(aIndex>=3&&!val.length){
condShow.value = 1
}
if (props.list.length > 0) {
setTimeout(() => {
condShow.value = 2
init()
}, 1000)
}
@@ -139,4 +154,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>

8
src/views/vehicles/components/big-map.vue
View File

@@ -155,8 +155,8 @@ import PubSub from 'pubsub-js'
if(val[0].map){
tabs.value[0].leng = val[0].all.length
tabs.value[1].leng = val[0].moving.length
tabs.value[2].leng = val[0].offline.length
tabs.value[3].leng = val[0].still.length
tabs.value[2].leng = val[0].still.length
tabs.value[3].leng = val[0].offline.length
}
if(val[1]==0){
listTabs.value = val[0].all
@@ -165,10 +165,10 @@ import PubSub from 'pubsub-js'
listTabs.value = val[0].moving
}
if(val[1]==2){
listTabs.value = val[0].offline
listTabs.value = val[0].still
}
if(val[1]==3){
listTabs.value = val[0].still
listTabs.value = val[0].offline
}
},
{ immediate: true }