feat：完善首页功能
This commit is contained in:
zjc
@@ -2,51 +2,36 @@
|
||||
<div class="box-4">
|
||||
<Title1 title="交通信息" />
|
||||
<div class="traffic-info flex justify-evenly pt-10 pb-20">
|
||||
<div v-for="item in list" class="cell">
|
||||
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
|
||||
<div class="cell">
|
||||
<img class="icon" :src="icon1" alt="" />
|
||||
<div>
|
||||
<countup :end-val="item.value" />
|
||||
<div class="label">{{ item.label }}</div>
|
||||
<countup :end-val="countItems.now_yongdu_sum" />
|
||||
<div class="label">路段总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<img class="icon" :src="icon2" alt="" />
|
||||
<div>
|
||||
<countup :end-val="countItems.yongdu_luduan_count" />
|
||||
<div class="label">当前拥堵路段</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<img class="icon" :src="icon3" alt="" />
|
||||
<div>
|
||||
<countup :end-val="countItems.yongdu_sum" />
|
||||
<div class="label">总拥堵次数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<img class="icon" :src="icon4" alt="" />
|
||||
<div>
|
||||
<countup :end-val="countItems.max_congestion_duration" />
|
||||
<div class="label">最大拥堵时长 </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<div class="">
|
||||
<Line
|
||||
: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'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
@@ -54,37 +39,21 @@
|
||||
: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="congestionData"
|
||||
:xAxisData="congestionXAxisData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<jam :width="250" :height="200" />
|
||||
<Title3 title="拥堵次数占比" />
|
||||
<jam-count :list="countRate" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵时长" />
|
||||
<jam-duration :list="timeRate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,11 +96,11 @@
|
||||
<div class="flex pt-10">
|
||||
<div class="box-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<div class="pt-20">
|
||||
<Title3 title="停车场车流量" />
|
||||
<div class="pt-10">
|
||||
<Line
|
||||
:width="250"
|
||||
:height="120"
|
||||
:height="150"
|
||||
:config="{ legend: false }"
|
||||
:data="[
|
||||
{
|
||||
@@ -163,7 +132,7 @@
|
||||
</div>
|
||||
<div class="box-1">
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<Title3 title="车源地" />
|
||||
<traffic />
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,15 +168,24 @@
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
class="cell"
|
||||
v-for="(item, index) in homeData?.carShipData?.car.info"
|
||||
:key="index"
|
||||
<vue3-seamless-scroll
|
||||
:list="homeData?.carShipData?.car.info"
|
||||
:limitScrollNum="3"
|
||||
:hover="true"
|
||||
:step="0.2"
|
||||
:wheel="true"
|
||||
:isWatch="true"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
<div
|
||||
class="cell"
|
||||
v-for="(item, index) in homeData?.carShipData?.car.info"
|
||||
:key="index"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -226,15 +204,24 @@
|
||||
<div>空余</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
class="cell"
|
||||
v-for="(item, index) in homeData?.carShipData.ship.info"
|
||||
:key="index"
|
||||
<vue3-seamless-scroll
|
||||
:list="homeData?.carShipData?.car.info"
|
||||
:limitScrollNum="3"
|
||||
:hover="true"
|
||||
:step="0.2"
|
||||
:wheel="true"
|
||||
:isWatch="true"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
<div
|
||||
class="cell"
|
||||
v-for="(item, index) in homeData?.carShipData?.ship.info"
|
||||
:key="index"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.started_count }}<span class="unit-1">辆</span></div>
|
||||
<div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -279,7 +266,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import jam from './jam.vue'
|
||||
import jamDuration from './jam-duration.vue'
|
||||
import jamCount from './jam-count.vue'
|
||||
import vacancy from './vacancy.vue'
|
||||
import occupancy from './occupancy.vue'
|
||||
import traffic from './traffic.vue'
|
||||
@@ -289,30 +277,45 @@
|
||||
import icon3 from '@/assets/images/icon-3.png'
|
||||
import icon4 from '@/assets/images/icon-4.png'
|
||||
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
|
||||
|
||||
const homeData = inject('homeData')
|
||||
|
||||
let list = ref([
|
||||
{
|
||||
label: '路段总数',
|
||||
value: '1234',
|
||||
icon: icon1
|
||||
},
|
||||
{
|
||||
label: '当前拥堵路段',
|
||||
value: '1234',
|
||||
icon: icon2
|
||||
},
|
||||
{
|
||||
label: '总拥堵次数',
|
||||
value: '1234',
|
||||
icon: icon3
|
||||
},
|
||||
{
|
||||
label: '最大拥堵时长',
|
||||
value: '1234',
|
||||
icon: icon4
|
||||
const congestionData = computed(() => {
|
||||
if (homeData.value) {
|
||||
return [{ data: homeData.value?.trafficInformation?.congestion.map((item) => item.value) }]
|
||||
}
|
||||
])
|
||||
return []
|
||||
})
|
||||
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 []
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -338,6 +341,7 @@
|
||||
color: #02f9fa;
|
||||
font-size: vw(24);
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 9px #0096ff;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
@@ -466,21 +470,21 @@
|
||||
}
|
||||
}
|
||||
.content {
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
height: vh(82);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
// /* 滚动条整体样式 */
|
||||
// &::-webkit-scrollbar {
|
||||
// width: vw(4); /* 滚动条的宽度 */
|
||||
// }
|
||||
// /* 滚动条轨道 */
|
||||
// &::-webkit-scrollbar-track {
|
||||
// background: 'transparent'; /* 轨道的背景色 */
|
||||
// }
|
||||
// /* 滚动条滑块 */
|
||||
// &::-webkit-scrollbar-thumb {
|
||||
// background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
// border-radius: 5px; /* 滑块的圆角 */
|
||||
// }
|
||||
}
|
||||
.cell {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user