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

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,11 +367,14 @@
color: #ffffff;
}
.error {
color: #e21b1b;
color: #F15A25;
}
.success {
color: #02f9fa;
color: #02F9FA;
}
.type3{
color:#E21B1B;
}
}
}
.car-ship {

11
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,7 +16,11 @@
list: {
type: Array,
default: () => []
}
},
text:{
type: String,
default: '暂无数据'
}
})
const { id, setOption } = useEchart()
@@ -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;

11
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,7 +18,11 @@
list: {
type: Array,
default: () => []
}
},
text:{
type: String,
default: '暂无数据'
}
})
let condShow = ref(0)
let aIndex = 1
@@ -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) {

35
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,14 +487,16 @@
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)=>{
item.show = true
})
}
console.log(regionList.value, ' regionList.value')
}
const onMonitorChange = () => {
@@ -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%;

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

@@ -101,22 +101,20 @@
<div class="pt-10">
<Title3 title="车辆归属地占比" />
</div>
<div v-if="dataLists.length">
<PieRow
label="停车总数"
:dataList="dataLists"
:total="carTotal"
:width="360"
:height="300"
/>
</div>
<div class="null-box" v-else> 暂无数据 </div>
<PieRow
label="停车总数"
:dataList="dataLists"
:total="carTotal"
:width="360"
:height="300"
/>
</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%;

52
src/views/scenic/components/jam.vue
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">{{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>

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

@@ -34,13 +34,13 @@
<div class="child-box">
<p class="item__label">{{ item.licenseNumber }}</p>
<span v-if="item.type == 0" class="label_img">
车
车
</span>
<span v-if="item.type == 2" class="label_img">
直通车
直通车
</span>
<span class="label_img label_img_2" v-if="item.type == 1" >
船
船
</span>
</div>
@@ -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 }