543 lines
16 KiB
Vue
543 lines
16 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="flex">
|
||
<div class="box mr-8">
|
||
<Title1 title="排队信息" />
|
||
<div class="count-box flex justify-between">
|
||
<count-item label="今日出票" :count="35600" suffix="张" />
|
||
<count-item label="今日接待人数" :count="35600" suffix="人" />
|
||
<count-item label="排队人数" :count="35600" suffix="人" />
|
||
<count-item label="排队持续时间" :count="35600" suffix="S" />
|
||
</div>
|
||
<div class="border">
|
||
<div class="pt-10">
|
||
<Title3 title="景区排队人数" />
|
||
</div>
|
||
<Line :width="520" :height="300" />
|
||
</div>
|
||
</div>
|
||
<div class="box mr-8">
|
||
<Title1 title="景区承载" />
|
||
<div class="flex">
|
||
<progress1 :width="200" :height="70" />
|
||
<div class="flex flex-1 justify-between">
|
||
<count-item label="景区当前人数" :count="35600" suffix="张" />
|
||
<count-item label="景区最大承载" :count="35600" suffix="人" />
|
||
</div>
|
||
</div>
|
||
<div class="border">
|
||
<div class="pt-10">
|
||
<Title3 title="景区排队人数" />
|
||
</div>
|
||
<Line :width="520" :height="300" />
|
||
</div>
|
||
</div>
|
||
<div class="box-1 mr-8">
|
||
<Title1 title="停车信息" />
|
||
<div class="flex">
|
||
<div class="flex">
|
||
<progress1 :width="140" :height="70" />
|
||
<progress1 :width="140" :height="70" />
|
||
<progress1 :width="140" :height="70" />
|
||
</div>
|
||
<div class="ml-20 flex flex-1 justify-between">
|
||
<count-item label="总停车场数" :count="561" suffix="个" />
|
||
<count-item label="总停车位数" :count="15" suffix="个" />
|
||
</div>
|
||
</div>
|
||
<div class="flex">
|
||
<div class="border mr-8 flex-1">
|
||
<div class="pt-10">
|
||
<Title3 title="今日景区承载量" />
|
||
</div>
|
||
<Line :width="360" :height="300" />
|
||
</div>
|
||
<div class="border flex-1">
|
||
<div class="pt-10">
|
||
<Title3 title="车辆归属地占比" />
|
||
</div>
|
||
<PieRow :width="360" :height="300" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box-2">
|
||
<Title1 title="安全信息 " />
|
||
<div class="count-box flex">
|
||
<count-item label="当前告警总数" :count="561" suffix="次" />
|
||
<count-item label="安全告警总数" :count="561" suffix="次" />
|
||
<count-item label="已解除告警数" :count="561" />
|
||
</div>
|
||
<div class="border flex-1">
|
||
<div class="pt-10">
|
||
<Title3 title="今日景区承载量" />
|
||
</div>
|
||
<PieRow :width="350" :height="300" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex mt-8">
|
||
<div class="box-3 mr-8">
|
||
<Title1 title="交通信息" />
|
||
<div class="count-box flex">
|
||
<count-item label="总通景路段" :count="35600" suffix="张" />
|
||
<count-item label="通景路段拥堵数" :count="35600" suffix="人" />
|
||
<count-item label="拥堵开始时间" :count="35600" suffix="人" />
|
||
<count-item label="拥堵持续时间" :count="35600" suffix="S" />
|
||
</div>
|
||
<div class="flex">
|
||
<div class="border mr-8">
|
||
<Title3 title="今日交通负载" />
|
||
<traffic-flow />
|
||
</div>
|
||
<div class="border mr-8">
|
||
<Title3 title="今日交通负载" />
|
||
<jam :width="220" :height="160" />
|
||
<div class="legend">
|
||
<ul class="legend__wrapper">
|
||
<li class="legend-item" v-for="(item, index) in 6" :key="index">
|
||
<p class="legend-item-label">路段1</p>
|
||
<p class="legend-item-value">10%</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="border">
|
||
<Title3 title="今日交通负载" />
|
||
<jam :width="220" :height="160" />
|
||
<div class="legend">
|
||
<ul class="legend__wrapper">
|
||
<li class="legend-item" v-for="(item, index) in 6" :key="index">
|
||
<p class="legend-item-label">路段1</p>
|
||
<p class="legend-item-value">10%</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box-4 mr-8">
|
||
<Title1 title="用户画像" />
|
||
<div class="flex">
|
||
<div class="border mr-8 flex-1">
|
||
<Title3 title="年龄/性别占比" />
|
||
<age-ratio />
|
||
<div class="count">总人数：<countup endVal="124563" /></div>
|
||
<div class="cell pt-20">
|
||
<img class="icon" src="@/assets/images/man.png" />
|
||
<div class="bg">
|
||
<span class="text">男性</span>
|
||
<div class="progress">
|
||
<el-progress
|
||
:percentage="50"
|
||
:show-text="false"
|
||
color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
|
||
/>
|
||
</div>
|
||
<span class="man">50%</span>
|
||
</div>
|
||
</div>
|
||
<div class="cell pt-20">
|
||
<img class="icon" src="@/assets/images/woman.png" />
|
||
<div class="bg">
|
||
<span class="text">女性</span>
|
||
<div class="progress">
|
||
<el-progress
|
||
:percentage="50"
|
||
:show-text="false"
|
||
color="linear-gradient( to right, #0A4482 0%, #FF7021 100%)"
|
||
/>
|
||
</div>
|
||
<span class="woman">50%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border mr-8 flex-1">
|
||
<Title3 title="客源地分析TOP5" />
|
||
<top />
|
||
</div>
|
||
<div class="border flex-1">
|
||
<Title3 title="购票来源" />
|
||
<div class="count">总人数：<countup endVal="124563" /></div>
|
||
<ticket />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box-5">
|
||
<Title1 title="车船信息" />
|
||
<div class="flex mb-6">
|
||
<div class="border mr-8 pt-10 pb-10">
|
||
<Title2 title="车车车车车车" />
|
||
<div class="car-box mt-10">
|
||
<img class="icon" src="@/assets/images/icon-6.png" />
|
||
<div class="car-item pr-20">
|
||
<div class="label">车总数</div>
|
||
<div class="value">130辆</div>
|
||
</div>
|
||
<div class="car-item">
|
||
<div class="label">今日累计运营(班次)</div>
|
||
<div class="value">130次</div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-box">
|
||
<span class="text">运营130辆</span>
|
||
<div class="progress">
|
||
<el-progress
|
||
:percentage="50"
|
||
:show-text="false"
|
||
color="linear-gradient(to right, rgba(0,150,255,0) 0%, #F15A25 100%)"
|
||
/>
|
||
</div>
|
||
<span class="value">空余100辆</span>
|
||
</div>
|
||
</div>
|
||
<div class="border pt-10 pb-10">
|
||
<Title2 title="船船船船船船" />
|
||
<div class="car-box mt-10">
|
||
<img class="icon" src="@/assets/images/icon-6.png" />
|
||
<div class="car-item pr-20">
|
||
<div class="label">车总数</div>
|
||
<div class="value">130辆</div>
|
||
</div>
|
||
<div class="car-item">
|
||
<div class="label">今日累计运营(班次)</div>
|
||
<div class="value">130次</div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-box">
|
||
<span class="text">运营130辆</span>
|
||
<div class="progress">
|
||
<el-progress
|
||
:percentage="50"
|
||
:show-text="false"
|
||
color="linear-gradient(to right, rgba(0,150,255,0) 0%, #F15A25 100%)"
|
||
/>
|
||
</div>
|
||
<span class="value">空余100辆</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border pt-10 pb-10">
|
||
<div id="car-ship" class="car-ship" />
|
||
<img class="full" src="@/assets/images/full.png" @click="show = true" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<BigCarShipMap v-model="show" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import progress1 from './progress-1.vue'
|
||
import { useMap } from '@/hooks/map'
|
||
import carIcon from '@/assets/images/car.png'
|
||
import shipIcon from '@/assets/images/ship.png'
|
||
import BigCarShipMap from './big-car-ship-map.vue'
|
||
import AgeRatio from './age-ratio.vue'
|
||
import top from './top.vue'
|
||
import jam from './jam.vue'
|
||
import ticket from './ticket.vue'
|
||
import TrafficFlow from './traffic-flow.vue'
|
||
|
||
const { initMap, addMarker } = useMap()
|
||
let show = ref(false)
|
||
onMounted(() => {
|
||
initMap('car-ship', 109.491961, 31.024285, 13)
|
||
addMarker(carIcon, [109.491045, 31.028725], [36, 50])
|
||
addMarker(carIcon, [109.483266, 31.024718], [36, 50])
|
||
addMarker(shipIcon, [109.479062, 31.021499], [36, 50])
|
||
addMarker(shipIcon, [109.488907, 31.017476], [36, 50])
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
:deep(.BMap_cpyCtrl) {
|
||
display: none;
|
||
}
|
||
:deep(.anchorBL) {
|
||
display: none;
|
||
}
|
||
.legend {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
@mixin icon($column) {
|
||
width: vw(50);
|
||
height: vh(60);
|
||
display: flex;
|
||
flex-direction: $column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
&__wrapper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: vw(8);
|
||
width: vw(170);
|
||
}
|
||
&-item {
|
||
color: #fff;
|
||
}
|
||
&-item:nth-child(1) {
|
||
@include icon(column);
|
||
background-image: url('@/assets/images/legend-item-1.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
&-item:nth-child(2) {
|
||
@include icon(column);
|
||
background-image: url('@/assets/images/legend-item-1.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
&-item:nth-child(3) {
|
||
@include icon(column);
|
||
background-image: url('@/assets/images/legend-item-1.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
&-item:nth-child(4) {
|
||
@include icon(column-reverse);
|
||
background-image: url('@/assets/images/legend-item-2.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
&-item:nth-child(5) {
|
||
@include icon(column-reverse);
|
||
background-image: url('@/assets/images/legend-item-2.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
&-item:nth-child(6) {
|
||
@include icon(column-reverse);
|
||
background-image: url('@/assets/images/legend-item-2.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
&-item-label {
|
||
font-weight: 400;
|
||
font-size: vw(12);
|
||
line-height: vh(14);
|
||
}
|
||
&-item-value {
|
||
font-weight: bold;
|
||
font-size: vw(16);
|
||
line-height: vh(18);
|
||
}
|
||
}
|
||
.dialog {
|
||
:deep(.el-dialog) {
|
||
width: vw(2540);
|
||
height: vh(904);
|
||
}
|
||
}
|
||
.progress-box {
|
||
margin-top: vh(10);
|
||
height: vh(20);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(to right, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.17) 100%);
|
||
.text {
|
||
margin-right: vw(10);
|
||
font-weight: 400;
|
||
font-size: vw(14);
|
||
color: #ffffff;
|
||
}
|
||
.progress {
|
||
width: vw(100);
|
||
}
|
||
.value {
|
||
margin-left: vw(10);
|
||
font-weight: 400;
|
||
font-size: vw(14);
|
||
color: #f15a25;
|
||
}
|
||
}
|
||
.container {
|
||
margin: vh(120) 0 0 vw(10);
|
||
.count-box {
|
||
padding: 0 vw(10);
|
||
height: vh(70);
|
||
}
|
||
.bg {
|
||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||
}
|
||
.border {
|
||
position: relative;
|
||
padding: 0 vw(10);
|
||
box-sizing: border-box;
|
||
background-image: url('@/assets/images/bg-3.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.box {
|
||
@extend .bg;
|
||
width: vw(510);
|
||
height: vh(475);
|
||
}
|
||
.box-1 {
|
||
@extend .bg;
|
||
height: vh(475);
|
||
}
|
||
.box-2 {
|
||
@extend .bg;
|
||
height: vh(475);
|
||
}
|
||
.box-3 {
|
||
@extend .bg;
|
||
height: vh(465);
|
||
}
|
||
.box-4 {
|
||
@extend .bg;
|
||
height: vh(465);
|
||
}
|
||
.box-5 {
|
||
@extend .bg;
|
||
height: vh(465);
|
||
}
|
||
.car-box {
|
||
width: vw(316);
|
||
height: vh(74);
|
||
display: flex;
|
||
align-items: center;
|
||
.icon {
|
||
position: absolute;
|
||
width: vw(350);
|
||
height: vw(74);
|
||
}
|
||
.car-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
&:nth-child(2) {
|
||
padding-left: vw(80);
|
||
}
|
||
}
|
||
.label {
|
||
font-weight: 400;
|
||
font-size: vw(14);
|
||
color: #fff;
|
||
}
|
||
.value {
|
||
font-weight: bold;
|
||
font-size: vw(24);
|
||
color: #02f9fa;
|
||
margin-top: vh(6);
|
||
}
|
||
}
|
||
.car-ship {
|
||
width: vw(660);
|
||
height: vh(240);
|
||
}
|
||
.full {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: vw(20);
|
||
bottom: vw(20);
|
||
width: vw(50);
|
||
z-index: 999;
|
||
}
|
||
.count {
|
||
margin: vw(20) vw(20) 0 vw(20);
|
||
height: vh(24);
|
||
font-weight: bold;
|
||
font-size: vw(14);
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
border-left: vw(4) solid #37d8fc;
|
||
border-right: vw(4) solid #37d8fc;
|
||
background: rgba(0, 150, 255, 0.19);
|
||
}
|
||
.cell {
|
||
margin-left: vw(10);
|
||
display: flex;
|
||
align-items: center;
|
||
.bg {
|
||
display: flex;
|
||
align-items: center;
|
||
height: vh(20);
|
||
padding-right: vw(10);
|
||
background: linear-gradient(to right, rgba(0, 150, 255, 0), rgba(0, 150, 255, 0.17) 100%);
|
||
}
|
||
.icon {
|
||
width: vw(26);
|
||
height: vw(28);
|
||
margin-right: vw(4);
|
||
}
|
||
.text {
|
||
font-weight: 400;
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
.progress {
|
||
width: vw(120);
|
||
margin-left: vw(4);
|
||
}
|
||
.man {
|
||
font-weight: bold;
|
||
font-size: vw(14);
|
||
color: #02f9fa;
|
||
margin-left: vw(10);
|
||
}
|
||
.woman {
|
||
font-weight: bold;
|
||
font-size: vw(14);
|
||
color: #f15a25;
|
||
margin-left: vw(10);
|
||
}
|
||
}
|
||
.ticket-box {
|
||
margin-top: vh(20);
|
||
width: 100%;
|
||
height: vh(106);
|
||
background-color: radial-gradient(to right, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
|
||
.title {
|
||
width: vw(253);
|
||
height: vh(28);
|
||
display: flex;
|
||
align-items: center;
|
||
background-image: url('@/assets/images/title-5.png');
|
||
background-size: 100% 100%;
|
||
& > span {
|
||
padding-left: vw(22);
|
||
font-weight: bold;
|
||
font-size: vw(15);
|
||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||
color: transparent; /* 兼容其他浏览器 */
|
||
}
|
||
}
|
||
}
|
||
.ticket-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
& > img {
|
||
width: vw(74);
|
||
height: vh(74);
|
||
}
|
||
& > div {
|
||
flex: 1;
|
||
height: vh(58);
|
||
display: flex;
|
||
align-items: center;
|
||
background-image: url('@/assets/images/ticket-item-bg.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.label {
|
||
padding-left: vw(10);
|
||
font-weight: 400;
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
.countup-wrap {
|
||
color: #02f9fa;
|
||
font-size: vw(28);
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
</style>
|