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

feat：完善功能

Browse Source
This commit is contained in:
zjc
2025-01-20 04:09:56 +08:00
parent 46c737fb93
commit 65244492b4
40 changed files with 2303 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,41 +1,89 @@
<template>
<div class="box-1">
<div class="statistics">
<div class="item-box">
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </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 endVal="334600" /> </span>
<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-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />道路总数 </div>
<div class="item-num">
<span><countup endVal="35600" /> </span>
<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 endVal="15000" /></span>
<div class="item-t flex">
<img src="@/assets/images/t-icon-1.png" alt="" />核心拥堵总数
</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 endVal="2345" /></span>
><span><countup :end-val="countData.jamCore" /></span>
</div>
</div>
</div>
<div class="chart">
<div class="chart-item" v-for="item in 4" :key="item">
<Title3 v-if="item == 1" title="拥堵频次占比" />
<Title3 v-if="item == 2" title="拥堵时长占比" />
<Title3 v-if="item == 3" title="拥堵类型频次占比" />
<Title3 v-if="item == 4" title="拥堵类型时长占比" />
<div class="chart-item">
<Title3 title="拥堵频次占比" />
<div class="chart__inner">
<spotRate :dataList="spotRateData" :total="8888" />
<spotRate
:dataList="chartData.roadNum"
:total="chartData.totalNum"
label="拥堵频次总数"
/>
<ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
<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 class="chart-item">
<Title3 title="拥堵时长占比" />
<div class="chart__inner">
<spotRate
:dataList="chartData.roadTime"
:total="chartData.totalTime"
label="拥堵总时长"
/>
<ul class="chart__legend">
<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 class="chart-item">
<Title3 title="拥堵类型频次占比" />
<div class="chart__inner">
<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 class="chart-item">
<Title3 title="拥堵类型时长占比" />
<div class="chart__inner">
<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>
@@ -50,16 +98,42 @@
<script setup>
import spotRate from './spotRate.vue'
import countup from 'vue-countup-v3'
import { getSpotRateApi } from '@/api/workOrder.js'
import { getSpotRateApi } from '@/api/workOrder'
import { getRouterStateApi, getRouterChartsApi } from '@/api/traffic'
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>
@@ -109,19 +183,20 @@
}
.dot {
width: vw(4);
height: vw(4);
width: vw(10);
height: vw(10);
margin: 0 vw(16);
}
.name {
font-weight: 400;
font-size: vw(12);
font-size: vw(14);
color: #ffffff;
width: vw(130);
width: vw(110);
}
.value {
// padding-right: vw(20);
font-weight: bold;
font-size: vw(15);
color: #ffffff;