537 lines
14 KiB
Vue
537 lines
14 KiB
Vue
<template>
|
|
<div class="box-4">
|
|
<Title1 title="交通信息" />
|
|
<div class="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>
|
|
<countup :end-val="item.value" />
|
|
<div class="label">{{ item.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="拥堵路段总数" />
|
|
<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 class="box">
|
|
<div class="pt-10">
|
|
<Title3 title="拥堵路段总数" />
|
|
<jam :width="250" :height="200" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Title1 title="停车信息" />
|
|
<div class="stop-box">
|
|
<div>
|
|
<img class="icon" src="@/assets/images/icon-5.png" alt="" />
|
|
<div>
|
|
<div class="label">车库总数</div>
|
|
<countup class="value" :end-val="500" />
|
|
</div>
|
|
<div>
|
|
<div class="label">车库总数</div>
|
|
<countup class="value" :end-val="500" />
|
|
</div>
|
|
<div>
|
|
<div class="label">已使用车位数</div>
|
|
<countup class="value" :end-val="500" />
|
|
</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>
|
|
</div>
|
|
</div>
|
|
<div class="flex pt-10">
|
|
<div class="box-1">
|
|
<div class="pt-10">
|
|
<Title3 title="拥堵路段总数" />
|
|
<div class="pt-20">
|
|
<Line
|
|
:width="250"
|
|
:height="120"
|
|
: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-1">
|
|
<div class="pt-10">
|
|
<Title3 title="拥堵路段总数" />
|
|
<traffic-flow />
|
|
</div>
|
|
</div>
|
|
<div class="box-1">
|
|
<div class="pt-10">
|
|
<Title3 title="景区停车场空位" />
|
|
<vacancy />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="flex-1">
|
|
<Title1 title="车船信息" class="title1" />
|
|
</div>
|
|
<div class="flex-1">
|
|
<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="130" /> <span class="unit">辆</span>
|
|
</div>
|
|
</div>
|
|
<div class="table">
|
|
<div class="header">
|
|
<div>景区</div>
|
|
<div>调度</div>
|
|
<div>空余</div>
|
|
</div>
|
|
<div class="cell">
|
|
<div>白帝城</div>
|
|
<div>5<span class="unit-1">辆</span></div>
|
|
<div>1<span class="unit-1">辆</span></div>
|
|
</div>
|
|
<div class="cell">
|
|
<div>白帝城</div>
|
|
<div>5<span class="unit-1">辆</span></div>
|
|
<div>1<span class="unit-1">辆</span></div>
|
|
</div>
|
|
<div class="cell">
|
|
<div>白帝城</div>
|
|
<div>5<span class="unit-1">辆</span></div>
|
|
<div>1<span class="unit-1">辆</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="ship">
|
|
<div class="label">车总数</div>
|
|
<div class="flex align-center">
|
|
<countup class="value" :end-val="130" /> <span class="unit">辆</span>
|
|
</div>
|
|
<div class="table">
|
|
<div class="header">
|
|
<div>景区</div>
|
|
<div>调度</div>
|
|
<div>空余</div>
|
|
</div>
|
|
<div class="cell">
|
|
<div>白帝城</div>
|
|
<div>5<span class="unit-1">辆</span></div>
|
|
<div>1<span class="unit-1">辆</span></div>
|
|
</div>
|
|
<div class="cell">
|
|
<div>白帝城</div>
|
|
<div>5<span class="unit-1">辆</span></div>
|
|
<div>1<span class="unit-1">辆</span></div>
|
|
</div>
|
|
<div class="cell">
|
|
<div>白帝城</div>
|
|
<div>5<span class="unit-1">辆</span></div>
|
|
<div>1<span class="unit-1">辆</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hotel">
|
|
<div>
|
|
<div class="item">
|
|
<div class="label">车库总数</div>
|
|
<countup class="value" :end-val="500" />
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">房间总数</div>
|
|
<countup class="value" :end-val="500" />
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">总入住</div>
|
|
<countup class="value" :end-val="500" />
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">总入住率</div>
|
|
<countup class="value" :end-val="500" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="lodging">
|
|
<Title3 title="酒店入住人数及入住率" />
|
|
</div>
|
|
<lodging-ratio />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import jam from './jam.vue'
|
|
import vacancy from './vacancy.vue'
|
|
import LodgingRatio from './lodging-ratio.vue'
|
|
import TrafficFlow from './traffic-flow.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'
|
|
|
|
let list = ref([
|
|
{
|
|
label: '路段总数',
|
|
value: '1234',
|
|
icon: icon1
|
|
},
|
|
{
|
|
label: '当前拥堵路段',
|
|
value: '1234',
|
|
icon: icon2
|
|
},
|
|
{
|
|
label: '总拥堵次数',
|
|
value: '1234',
|
|
icon: icon3
|
|
},
|
|
{
|
|
label: '最大拥堵时长',
|
|
value: '1234',
|
|
icon: icon4
|
|
}
|
|
])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box-4 {
|
|
margin-top: vh(120);
|
|
width: vw(750);
|
|
height: vh(950);
|
|
padding: vw(8);
|
|
box-sizing: border-box;
|
|
background-image: url('@/assets/images/bg-5.png');
|
|
background-size: 100% 100%;
|
|
.cell {
|
|
display: flex;
|
|
align-items: center;
|
|
.icon {
|
|
width: vw(64);
|
|
height: auto;
|
|
}
|
|
.countup-wrap {
|
|
color: #02f9fa;
|
|
font-size: vw(24);
|
|
font-weight: bold;
|
|
}
|
|
.label {
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
margin-top: vh(10);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
}
|
|
.box {
|
|
width: vw(250);
|
|
height: vh(200);
|
|
margin-right: vw(8);
|
|
background-image: url('@/assets/images/bg-3.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.box-1 {
|
|
width: vw(250);
|
|
height: vh(200);
|
|
margin-right: vw(8);
|
|
background-image: url('@/assets/images/bg-3.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.stop-box {
|
|
display: flex;
|
|
gap: vw(20);
|
|
.icon {
|
|
width: vw(45);
|
|
height: auto;
|
|
}
|
|
& > div {
|
|
flex: 1;
|
|
height: vh(70);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
background-image: url('@/assets/images/bg-4.png');
|
|
background-size: 100% 100%;
|
|
.label {
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
.value {
|
|
margin-top: vh(10);
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #ffffff;
|
|
}
|
|
.error {
|
|
color: #e21b1b;
|
|
}
|
|
.success {
|
|
color: #02f9fa;
|
|
}
|
|
}
|
|
}
|
|
.car-ship {
|
|
flex: 1;
|
|
& > div {
|
|
position: relative;
|
|
flex: 1;
|
|
height: vh(110);
|
|
display: flex;
|
|
align-items: center;
|
|
background-image: url('@/assets/images/bg-4.png');
|
|
background-size: 100% 100%;
|
|
.icon {
|
|
padding-left: vw(90);
|
|
width: vw(352);
|
|
height: vh(70);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
.car {
|
|
@extend .icon;
|
|
background-image: url('@/assets/images/icon-6.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.ship {
|
|
@extend .icon;
|
|
background-image: url('@/assets/images/icon-7.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.label {
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
margin-bottom: vh(6);
|
|
}
|
|
.value {
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #02f9fa;
|
|
}
|
|
.unit {
|
|
font-weight: bold;
|
|
font-size: vw(14);
|
|
color: #02f9fa;
|
|
margin-top: vh(6);
|
|
}
|
|
.table {
|
|
position: absolute;
|
|
left: vw(160);
|
|
width: vw(200);
|
|
height: vh(100);
|
|
z-index: 2;
|
|
.header {
|
|
display: flex;
|
|
height: vh(18);
|
|
line-height: vh(18);
|
|
text-align: center;
|
|
background: rgba(0, 150, 255, 0.4);
|
|
& > div {
|
|
flex: 1;
|
|
font-weight: 400;
|
|
font-size: vw(12);
|
|
color: #52b8ff;
|
|
}
|
|
}
|
|
.cell {
|
|
display: flex;
|
|
height: vh(27);
|
|
line-height: vh(27);
|
|
text-align: center;
|
|
background: #074686;
|
|
&:nth-child(2n + 1) {
|
|
background: rgba(0, 150, 255, 0.1);
|
|
}
|
|
& > div {
|
|
flex: 1;
|
|
}
|
|
& > div:nth-child(1) {
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
& > div:nth-child(2) {
|
|
font-weight: bold;
|
|
font-size: vw(18);
|
|
color: #ffffff;
|
|
}
|
|
& > div:nth-child(3) {
|
|
font-weight: bold;
|
|
font-size: vw(18);
|
|
color: #02f9fa;
|
|
}
|
|
.unit-1 {
|
|
font-size: vw(12);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hotel {
|
|
flex: 1;
|
|
margin-left: vw(6);
|
|
& > div:nth-child(1) {
|
|
display: flex;
|
|
width: vw(360);
|
|
height: vh(70);
|
|
background-image: url('@/assets/images/bg-4.png');
|
|
background-size: 100% 100%;
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.label {
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
.value {
|
|
margin-top: vh(10);
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
& > div:nth-child(2) {
|
|
padding-top: vh(10);
|
|
margin-top: vh(8);
|
|
width: vw(360);
|
|
height: vh(140);
|
|
background-image: url('@/assets/images/bg-4.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
.lodging {
|
|
:deep(.title-3) {
|
|
margin-top: vh(10);
|
|
}
|
|
}
|
|
.title1 {
|
|
:deep(.title) {
|
|
width: vw(300) !important;
|
|
}
|
|
}
|
|
</style>
|