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

28

Browse Source
This commit is contained in:
duanliang
2025-04-28 17:27:36 +08:00
parent 08e94cc855
commit 4128fd8c63
10 changed files with 300 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/views/traffic/components/box-1.vue
View File

@@ -1,6 +1,7 @@
<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">
@@ -13,7 +14,7 @@
<span><countup :end-val="countData.totalNum" /> </span>
</div>
</div> -->
<div class="item-box">
<!-- <div class="item-box">
<div class="item-t flex">
<img src="@/assets/images/t-icon-1.png" alt="" />核心道路总数
</div>
@@ -28,7 +29,7 @@
<div class="item-num"
><span><countup :end-val="countData.jamCore" /></span>
</div>
</div>
</div> -->
</div>
<div class="chart">
<div class="chart-item">
@@ -54,10 +55,34 @@
</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>
<div >
<spotRate
:dataList="chartData.roadTime"
:total="chartData.totalTime"
@@ -77,45 +102,31 @@
</div>
</div>
</div>
<div class="chart-item">
<Title3 title="拥堵类型频次占比" />
<div class="chart__inner">
<div>
<spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" />
<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 class="chart-item">
<Title3 title="拥堵类型时长占比" />
<div class="chart__inner">
<div>
<spotRate
<div class="new-vehicle">
<!-- <spotRate
:dataList="chartData.typeTime"
:total="chartData.totalTime"
label="拥堵总数"
/>
<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>
/> -->
<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>
@@ -128,7 +139,7 @@
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({
@@ -166,6 +177,13 @@
</script>
<style lang="scss" scoped>
.new-vehicle{
padding-top:vh(20);
}
.new-ul{
padding:0 vw(30);
margin-top:vh(20);
}
.box-1 {
margin-top: vh(120);
width: vw(626);
@@ -188,6 +206,7 @@
display: flex;
justify-content: center;
height: vh(380);
}
&__legend {
@@ -232,11 +251,11 @@
}
}
.statistics {
padding: 0 vw(40);
height: vh(110);
display: flex;
align-items: center;
// padding: 0 vw(40);
// height: vh(110);
// display: flex;
// align-items: center;
// width:100%;
.item-box {
flex: 1;
.item-t {