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

feat：重新对接首页接口

Browse Source
This commit is contained in:
zjc
2025-01-14 19:01:09 +08:00
parent 880db48579
commit ebac43f818
28 changed files with 2250 additions and 2133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,30 +3,30 @@
<Title1 title="交通信息" />
<div class="traffic-info flex justify-evenly pt-10 pb-20">
<div class="cell">
<img class="icon" :src="icon1" alt="" />
<img class="icon" src="@/assets/images/icon-1.png" alt="" />
<div>
<countup :end-val="countItems.now_yongdu_sum" />
<countup :end-val="homeStore.trafficInfoData.info.ldzs" />
<div class="label">路段总数</div>
</div>
</div>
<div class="cell">
<img class="icon" :src="icon2" alt="" />
<img class="icon" src="@/assets/images/icon-2.png" alt="" />
<div>
<countup :end-val="countItems.yongdu_luduan_count" />
<countup :end-val="homeStore.trafficInfoData.info.dqydld" />
<div class="label">当前拥堵路段</div>
</div>
</div>
<div class="cell">
<img class="icon" :src="icon3" alt="" />
<img class="icon" src="@/assets/images/icon-3.png" alt="" />
<div>
<countup :end-val="countItems.yongdu_sum" />
<countup :end-val="homeStore.trafficInfoData.info.zydcs" />
<div class="label">总拥堵次数</div>
</div>
</div>
<div class="cell">
<img class="icon" :src="icon4" alt="" />
<img class="icon" src="@/assets/images/icon-4.png" alt="" />
<div>
<countup :end-val="countItems.max_congestion_duration" />
<countup :end-val="homeStore.trafficInfoData.info.zdydsc" />
<div class="label">最大拥堵时长 </div>
</div>
</div>
@@ -47,13 +47,13 @@
<div class="box">
<div class="pt-10">
<Title3 title="拥堵次数占比" />
<jam-count :list="countRate" />
<jam-count :list="homeStore.trafficInfoData.data.countRate" />
</div>
</div>
<div class="box">
<div class="pt-10">
<Title3 title="拥堵时长" />
<jam-duration :list="timeRate" />
<jam-duration :list="homeStore.trafficInfoData.data.timeRate" />
</div>
</div>
</div>
@@ -63,36 +63,27 @@
<img class="icon" src="@/assets/images/icon-5.png" alt="" />
<div>
<div class="label">车库总数</div>
<countup class="value" :end-val="500" />
<countup class="value" :end-val="homeStore.carStopInfoData.countInfo.ckzs" />
</div>
<div>
<div class="label">总车位数</div>
<countup class="value" :end-val="500" />
<countup class="value" :end-val="homeStore.carStopInfoData.countInfo.zcws" />
</div>
<div>
<div class="label">已使用车位数</div>
<countup class="value" :end-val="500" />
<countup class="value" :end-val="homeStore.carStopInfoData.countInfo.ysycws" />
</div>
</div>
<div>
<div>
<div class="label">三峡之巅</div>
<div class="value error">已满</div>
</div>
<div>
<div class="label">白帝城</div>
<div class="value error">已满</div>
</div>
<div>
<div class="label">天坑地缝</div>
<div class="value success">空余</div>
</div>
<div>
<div class="label">永安宫</div>
<div class="value success">空余</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 }">
{{ item.value }}
</div>
</div>
</div>
</div>
<div class="flex pt-10">
<div class="box-1">
<div class="pt-10">
@@ -102,30 +93,8 @@
:width="250"
:height="150"
:config="{ legend: false }"
:data="[
{
name: '企业数',
data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
}
]"
:xAxisData="[
'12-16 10:00',
'12-16 14:00',
'12-16 16:00',
'12-16 22:00',
'12-17 02:00',
'12-17 06:00',
'12-17 10:00',
'12-17 14:00',
'12-17 16:00',
'12-16 22:00',
'12-18 02:00',
'12-18 06:00',
'12-8 10:00',
'12-18 14:00',
'12-18 16:00',
'12-18 20:00'
]"
:data="parkData"
:xAxisData="parkXAxisData"
/>
</div>
</div>
@@ -133,16 +102,17 @@
<div class="box-1">
<div class="pt-10">
<Title3 title="车源地" />
<traffic />
<vehicle-source :list="homeStore.carStopInfoData.dataList1" />
</div>
</div>
<div class="box-1">
<div class="pt-10">
<Title3 title="景区停车场空位" />
<vacancy />
<vacancy :list="homeStore.carStopInfoData.dataList2" />
</div>
</div>
</div>
<div class="flex">
<div class="flex-1">
<Title1 title="车船信息" class="title1" />
@@ -151,13 +121,14 @@
<Title1 title="酒店信息" class="title1" />
</div>
</div>
<div class="flex">
<div class="car-ship">
<div class="mb-6">
<div class="car">
<div class="label">车总数</div>
<div class="flex align-center">
<countup class="value" :end-val="homeData?.carShipData?.car?.count || 0" />
<countup class="value" :end-val="homeStore.carShipData?.car?.count || 0" />
<span class="unit">辆</span>
</div>
</div>
@@ -169,16 +140,18 @@
</div>
<div class="content">
<vue3-seamless-scroll
:list="homeData?.carShipData?.car.info"
v-model="carMove"
:list="homeStore.carShipData?.car?.info"
:limitScrollNum="3"
:hover="true"
:step="0.2"
:copy-num="0"
:wheel="true"
:isWatch="true"
>
<div
class="cell"
v-for="(item, index) in homeData?.carShipData?.car.info"
v-for="(item, index) in homeStore.carShipData?.car?.info"
:key="index"
>
<div>{{ item.name }}</div>
@@ -193,7 +166,7 @@
<div class="ship">
<div class="label">船总数</div>
<div class="flex align-center">
<countup class="value" :end-val="homeData?.carShipData?.ship?.count || 0" />
<countup class="value" :end-val="homeStore.carShipData?.ship?.count || 0" />
<span class="unit">辆</span>
</div>
</div>
@@ -205,16 +178,18 @@
</div>
<div class="content">
<vue3-seamless-scroll
:list="homeData?.carShipData?.car.info"
v-model="shipMove"
:list="homeStore.carShipData?.ship?.info"
:limitScrollNum="3"
:hover="true"
:step="0.2"
:copy-num="0"
:wheel="true"
:isWatch="true"
>
<div
class="cell"
v-for="(item, index) in homeData?.carShipData?.ship.info"
v-for="(item, index) in homeStore.carShipData?.ship?.info"
:key="index"
>
<div>{{ item.name }}</div>
@@ -230,17 +205,17 @@
<div>
<div class="item">
<div class="label">酒店总数</div>
<countup class="value" :end-val="homeData?.hotelData.info.hotel_count || 0" />
<countup class="value" :end-val="homeStore.hotelData?.info?.hotel_count || 0" />
</div>
<div class="item">
<div class="label">房间总数</div>
<countup class="value" :end-val="homeData?.hotelData.info.total_room_count || 0" />
<countup class="value" :end-val="homeStore.hotelData?.info?.total_room_count || 0" />
</div>
<div class="item">
<div class="label">总入住</div>
<countup
class="value success"
:end-val="homeData?.hotelData.info.total_guest_count || 0"
:end-val="homeStore.hotelData?.info?.total_guest_count || 0"
/>
</div>
<div class="item">
@@ -248,7 +223,7 @@
<div class="flex align-center">
<countup
class="value success"
:end-val="homeData?.hotelData.info.occupancy_rate || 0"
:end-val="homeStore.hotelData?.info?.occupancy_rate || 0"
/>
<span class="suffix">%</span>
</div>
@@ -258,7 +233,7 @@
<div class="occupancy">
<Title3 title="酒店入住人数及入住率" />
</div>
<occupancy />
<occupancy :list="homeStore.hotelData?.list" />
</div>
</div>
</div>
@@ -270,51 +245,32 @@
import jamCount from './jam-count.vue'
import vacancy from './vacancy.vue'
import occupancy from './occupancy.vue'
import traffic from './traffic.vue'
import vehicleSource from './vehicle-source.vue'
import countup from 'vue-countup-v3'
import icon1 from '@/assets/images/icon-1.png'
import icon2 from '@/assets/images/icon-2.png'
import icon3 from '@/assets/images/icon-3.png'
import icon4 from '@/assets/images/icon-4.png'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { useHomeStore } from '@/stores/home'
const homeData = inject('homeData')
const homeStore = useHomeStore()
const carMove = computed(() => {
return homeStore.carShipData?.car?.info.length > 3
})
const shipMove = computed(() => {
return homeStore.carShipData?.ship?.info.length > 3
})
const parkData = computed(() => {
return [{ data: homeStore.carStopInfoData.dataList.map((item) => item.value) }]
})
const parkXAxisData = computed(() => {
return homeStore.carStopInfoData.dataList.map((item) => item.name)
})
const congestionData = computed(() => {
if (homeData.value) {
return [{ data: homeData.value?.trafficInformation?.congestion.map((item) => item.value) }]
}
return []
return [{ data: homeStore.trafficInfoData.data.congestion.map((item) => item.value) }]
})
const congestionXAxisData = computed(() => {
if (homeData.value) {
return homeData.value?.trafficInformation?.congestion.map((item) => item.name)
}
return []
})
const countItems = computed(() => {
if (homeData.value) {
return homeData.value?.trafficInformation?.countItem
}
return {
max_congestion_duration: 0, // 最大拥堵时长
now_yongdu_sum: 0,
yongdu_luduan_count: 0,
yongdu_sum: 0
}
})
const countRate = computed(() => {
if (homeData.value) {
return homeData.value?.trafficInformation?.countRate
}
return []
})
const timeRate = computed(() => {
if (homeData.value) {
return homeData.value?.trafficInformation?.timeRate
}
return []
return homeStore.trafficInfoData.data.congestion.map((item) => item.name)
})
</script>
@@ -466,7 +422,7 @@
flex: 1;
font-weight: 400;
font-size: vw(12);
color: #52b8ff;
color: #fff;
}
}
.content {
@@ -492,9 +448,12 @@
line-height: vh(27);
text-align: center;
background: #074686;
&:nth-child(2n + 1) {
&:nth-child(odd) {
background: rgba(0, 150, 255, 0.1);
}
&:nth-child(even) {
background: #074686;
}
& > div {
flex: 1;
}