319 lines
8.3 KiB
Vue
319 lines
8.3 KiB
Vue
<template>
|
|
<div class="box-1">
|
|
<div class="statistics">
|
|
<Title1 title="拥堵情况" />
|
|
<!-- <div class="item-box">
|
|
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />拥堵总数 </div>
|
|
<div class="item-num">
|
|
<span><countup :end-val="countData.jamTotal" /> </span>
|
|
</div>
|
|
</div>
|
|
<div class="item-box">
|
|
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />道路总数 </div>
|
|
<div class="item-num">
|
|
<span><countup :end-val="countData.totalNum" /> </span>
|
|
</div>
|
|
</div> -->
|
|
<!-- <div class="item-box">
|
|
<div class="item-t flex">
|
|
<img src="@/assets/images/t-icon-1.png" alt="" />核心道路总数
|
|
</div>
|
|
<div class="item-num"
|
|
><span><countup :end-val="countData.coreNum" /></span>
|
|
</div>
|
|
</div>
|
|
<div class="item-box">
|
|
<div class="item-t flex">
|
|
<img src="@/assets/images/t-icon-1.png" alt="" />核心拥堵总数
|
|
</div>
|
|
<div class="item-num"
|
|
><span><countup :end-val="countData.jamCore" /></span>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="chart">
|
|
<div class="chart-item" >
|
|
<Title3 title="拥堵频次占比" />
|
|
|
|
<div class="chart__inner">
|
|
<div>
|
|
<spotRate
|
|
:dataList="chartData.roadNum"
|
|
:total="chartData.totalNum"
|
|
label="拥堵频次总数"
|
|
/>
|
|
<ul class="chart__legend flex" style="flex-wrap: wrap;">
|
|
<li
|
|
|
|
class="chart__legend-item"
|
|
v-for="(item, index) in chartData.roadNum"
|
|
:key="index"
|
|
>
|
|
<p class="dot" :style="{ background: colors[index] }" />
|
|
<p class="name">{{ item.name }}</p>
|
|
<p class="value">{{ item.value }}%</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-item">
|
|
<Title3 title="拥堵类型频次" />
|
|
<div class="chart__inner">
|
|
<div class="new-vehicle">
|
|
<vehicle-source :list="chartData.typeNum" />
|
|
<!-- <spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" /> -->
|
|
<div class="new-ul">
|
|
<ul class="chart__legend">
|
|
<li
|
|
|
|
class="chart__legend-item"
|
|
v-for="(item, index) in chartData.typeNum"
|
|
:key="index"
|
|
>
|
|
<p class="dot" :style="{ background: colors[index] }" />
|
|
<p class="name">{{ item.name }}</p>
|
|
<p class="value">{{ item.value }}次</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-item">
|
|
<Title3 title="拥堵时长占比" />
|
|
<div class="chart__inner">
|
|
<div >
|
|
<spotRate
|
|
:dataList="chartData.roadTime"
|
|
:total="chartData.totalTime"
|
|
label="拥堵总时长"
|
|
/>
|
|
<ul class="chart__legend flex" style="flex-wrap: wrap;">
|
|
<li
|
|
|
|
class="chart__legend-item"
|
|
v-for="(item, index) in chartData.roadTime"
|
|
:key="index"
|
|
>
|
|
<p class="dot" :style="{ background: colors[index] }" />
|
|
<p class="name">{{ item.name }}</p>
|
|
<p class="value">{{ item.value }}%</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-item">
|
|
<Title3 title="拥堵类型时长" />
|
|
<div class="chart__inner">
|
|
<div class="new-vehicle">
|
|
<!-- <spotRate
|
|
:dataList="chartData.typeTime"
|
|
:total="chartData.totalTime"
|
|
label="拥堵总数"
|
|
/> -->
|
|
<vehicle-source :list="chartData.typeTime" />
|
|
<div class="new-ul">
|
|
<ul class="chart__legend">
|
|
<li
|
|
|
|
class="chart__legend-item"
|
|
v-for="(item, index) in chartData.typeTime"
|
|
:key="index"
|
|
>
|
|
<p class="dot" :style="{ background: colors[index] }" />
|
|
<p class="name">{{ item.name }}</p>
|
|
<p class="value">{{ item.value }}分钟</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import spotRate from './spotRate.vue'
|
|
import countup from 'vue-countup-v3'
|
|
import { getSpotRateApi } from '@/api/workOrder'
|
|
import { getRouterStateApi, getRouterChartsApi } from '@/api/traffic'
|
|
import vehicleSource from './vehicle-source'
|
|
const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
|
let spotRateData = ref([])
|
|
let countData = ref({
|
|
coreNum: 0,
|
|
jamCore: 0,
|
|
jamTotal: 0,
|
|
totalNum: 0
|
|
})
|
|
let chartData = ref({
|
|
roadNum: [],
|
|
roadTime: [],
|
|
typeNum: [],
|
|
typeTime: [],
|
|
totalNum: 0,
|
|
totalTime: ''
|
|
})
|
|
|
|
const getRouterCharts = async () => {
|
|
let res = await getRouterChartsApi()
|
|
chartData.value = res.data
|
|
}
|
|
const getRouterState = async () => {
|
|
let res = await getRouterStateApi()
|
|
countData.value = res.data
|
|
}
|
|
const getSpotRate = async () => {
|
|
let res = await getSpotRateApi()
|
|
spotRateData.value = res.data.data
|
|
}
|
|
onMounted(() => {
|
|
getSpotRate()
|
|
getRouterState()
|
|
getRouterCharts()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.new-vehicle{
|
|
padding-top:vh(20);
|
|
width:100%;
|
|
}
|
|
.new-ul{
|
|
padding:0 0;
|
|
margin-top:vh(20);
|
|
}
|
|
.box-1 {
|
|
margin-top: vh(120);
|
|
width: vw(800);
|
|
// height: vh(950);
|
|
// height: 100%;
|
|
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
|
|
|
.chart {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: vw(4);
|
|
padding: 0 vw(8);
|
|
height:100%;
|
|
overflow: auto;
|
|
padding-bottom: vh(150);
|
|
background-image: url('@/assets/images/bg-3.png');
|
|
background-size: 100% 100%;
|
|
&-item {
|
|
// display: flex;
|
|
// align-items: center;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
position: relative;
|
|
// top:vh(-10);
|
|
// height:20%;
|
|
overflow: hidden;
|
|
// width: vw(300);
|
|
// background-image: url('@/assets/images/bg-3.png');
|
|
// background-size: 100% 100%;
|
|
}
|
|
|
|
&__inner {
|
|
width:100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
// height: vh(380);
|
|
|
|
}
|
|
|
|
&__legend {
|
|
flex: 1;
|
|
display: flex;
|
|
&-item {
|
|
position: relative;
|
|
width: 100%;
|
|
height: vh(50);
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: vh(15);
|
|
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
|
|
|
|
&::before {
|
|
position: absolute;
|
|
content: '';
|
|
width: vw(4);
|
|
height: vh(30);
|
|
background-color: #0096ff;
|
|
}
|
|
|
|
.dot {
|
|
width: vw(10);
|
|
height: vw(10);
|
|
margin: 0 vw(16);
|
|
}
|
|
|
|
.name {
|
|
font-weight: 400;
|
|
font-size: font-vw(20);
|
|
color: #ffffff;
|
|
// width: vw(110);
|
|
}
|
|
|
|
.value {
|
|
// padding-right: vw(20);
|
|
font-weight: bold;
|
|
font-size: font-vw(20);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.statistics {
|
|
// padding: 0 vw(40);
|
|
// height: vh(110);
|
|
// display: flex;
|
|
// align-items: center;
|
|
// width:100%;
|
|
.item-box {
|
|
flex: 1;
|
|
.item-t {
|
|
display: flex;
|
|
font-weight: 400;
|
|
font-size: font-vw(14);
|
|
color: #fff;
|
|
text-align: left;
|
|
margin-bottom: vh(20);
|
|
img {
|
|
margin-right: vw(5);
|
|
width: vw(8);
|
|
height: vh(8);
|
|
}
|
|
}
|
|
.item-num {
|
|
width: vw(134);
|
|
height: vh(30);
|
|
background-image: url('@/assets/images/t-box-title-bg-1.png');
|
|
background-size: 100% 100%;
|
|
font-weight: bold;
|
|
font-size: font-vw(24);
|
|
color: #02f9fa;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding-left: vw(15);
|
|
position: relative;
|
|
left: vw(-8);
|
|
span {
|
|
position: relative;
|
|
top: vh(-5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|