feat：完善功能
This commit is contained in:
zjc
@@ -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;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<div id="traffic-map" class="traffic-map" />
|
||||
<div id="traffic-map" :class="[routers.length == 0 ? 'traffic-map-big' : 'traffic-map']" />
|
||||
<div class="map-box">
|
||||
<!-- <div class="video-list">
|
||||
<div class="li">
|
||||
@@ -23,17 +23,111 @@
|
||||
<div class="menu">查看更多</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-if="routers.length > 0" class="list">
|
||||
<div class="item" v-for="(item, index) in routers" :key="index">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<img src="@/assets/images/work-icon-xl-1.png" />
|
||||
<div class="header-left__title">{{ item.name }}</div>
|
||||
<div class="header-left__camera" @click="videoShow = true">道路监控</div>
|
||||
<!-- <div class="header-left__point" @click="videoShow = true">3号点位</div> -->
|
||||
</div>
|
||||
<div class="header-status">{{ item.congestLevelText }} </div>
|
||||
</div>
|
||||
<div class="statistics">
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />平均车速
|
||||
</div>
|
||||
<div class="statistics-item__value flex">
|
||||
<countup :end-val="item.speed" />
|
||||
<span>km/h</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵距离
|
||||
</div>
|
||||
<div class="statistics-item__value flex">
|
||||
<countup :end-val="item.congestLength" />
|
||||
<span>km</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵次数
|
||||
</div>
|
||||
<div class="statistics-item__value">
|
||||
<countup :end-val="item.congestCount" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵开始时间
|
||||
</div>
|
||||
<div class="statistics-item__value">
|
||||
{{ item.startTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵持续时长
|
||||
</div>
|
||||
<div class="statistics-item__value">
|
||||
{{ item.congestDuration }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<Title3 title="拥堵类型分析" />
|
||||
<div class="chart-box">
|
||||
<traffic-jam :series="item.series" :data="item.xdata" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<video-dialog v-model="videoShow" src="" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getRouterListApi } from '@/api/traffic'
|
||||
import countup from 'vue-countup-v3'
|
||||
import trafficJam from './traffic-jam'
|
||||
|
||||
import { useMap } from '@/hooks/map'
|
||||
|
||||
import { getRouterListApi, getRoutersApi } from '@/api/traffic'
|
||||
|
||||
const { map, initMap } = useMap()
|
||||
|
||||
let props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
let current = ref(0)
|
||||
let routerList = ref([])
|
||||
let routers = ref([])
|
||||
let videoShow = ref(false)
|
||||
|
||||
watch(
|
||||
() => [routerList.value, routers.value],
|
||||
(val) => {
|
||||
if (val[0].length > 0) {
|
||||
nextTick(() => {
|
||||
let { longitude, latitude, level } = val[0][0]
|
||||
initMap('traffic-map', longitude, latitude, level)
|
||||
map.value.setTrafficOn()
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const handleNav = (e, index) => {
|
||||
current.value = index
|
||||
map.value.centerAndZoom(new BMapGL.Point(e.longitude, e.latitude), e.level)
|
||||
@@ -42,15 +136,17 @@
|
||||
const getRouterList = async () => {
|
||||
let res = await getRouterListApi()
|
||||
routerList.value = res.data
|
||||
let { longitude, latitude, level } = routerList.value[0]
|
||||
nextTick(() => {
|
||||
initMap('traffic-map', longitude, latitude, level)
|
||||
map.value.setTrafficOn()
|
||||
})
|
||||
}
|
||||
|
||||
const getRouters = async () => {
|
||||
let res = await getRoutersApi()
|
||||
routers.value = res.data
|
||||
console.log(routers.value, 'routers')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getRouterList()
|
||||
getRouters()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -58,13 +154,14 @@
|
||||
.box-2 {
|
||||
margin-top: vh(120);
|
||||
display: flex;
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
}
|
||||
.nav {
|
||||
width: vw(232);
|
||||
margin-left: vw(10);
|
||||
overflow: auto;
|
||||
width: vw(230);
|
||||
height: vh(950);
|
||||
margin-left: vw(8);
|
||||
padding-left: vw(5);
|
||||
overflow: auto;
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(0); /* 滚动条的宽度 */
|
||||
@@ -89,47 +186,234 @@
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-map {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
width: vw(1290);
|
||||
width: vw(1300);
|
||||
height: vh(955);
|
||||
margin: 0 vw(8);
|
||||
padding: vw(20);
|
||||
margin-left: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
.video-list {
|
||||
width: vw(320);
|
||||
height: vh(120);
|
||||
background: #0a254b;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
position: absolute;
|
||||
bottom: vw(40);
|
||||
right: vw(40);
|
||||
z-index: 99;
|
||||
}
|
||||
.traffic-map-big {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
width: vw(2116);
|
||||
height: vh(955);
|
||||
margin-left: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.video-list {
|
||||
width: vw(320);
|
||||
height: vh(120);
|
||||
background: #0a254b;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
position: absolute;
|
||||
bottom: vw(40);
|
||||
right: vw(40);
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.li {
|
||||
width: vw(140);
|
||||
height: vh(105);
|
||||
background-image: url('/src/assets/images/small-v-bg.png');
|
||||
background-size: 100% 100%;
|
||||
margin-right: vw(6);
|
||||
}
|
||||
.menu {
|
||||
width: vw(12);
|
||||
height: vh(60);
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #ffffff;
|
||||
line-height: vh(14);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
width: vw(806);
|
||||
height: vh(952);
|
||||
margin-left: vw(8);
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(0); /* 滚动条的宽度 */
|
||||
}
|
||||
}
|
||||
.item {
|
||||
margin-bottom: vh(10);
|
||||
background-image: url('@/assets/images/bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
.header {
|
||||
height: vh(72);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.li {
|
||||
width: vw(140);
|
||||
height: vh(105);
|
||||
background-image: url('/src/assets/images/small-v-bg.png');
|
||||
background-size: 100% 100%;
|
||||
margin-right: vw(6);
|
||||
&-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: vw(30);
|
||||
height: auto;
|
||||
margin-right: vw(15);
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
width: vw(12);
|
||||
height: vh(60);
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
&-left__title {
|
||||
margin-right: vw(20);
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
|
||||
}
|
||||
&-left__camera {
|
||||
cursor: pointer;
|
||||
width: vw(120);
|
||||
height: vw(72);
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
line-height: vh(14);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding-left: vw(42);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 vw(20);
|
||||
background-image: url('/src/assets/images/t-a-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-left__point {
|
||||
cursor: pointer;
|
||||
margin: 0 vw(20);
|
||||
width: vw(120);
|
||||
height: vw(72);
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
padding-left: vw(42);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('/src/assets/images/t-a-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-status {
|
||||
min-width: vw(150);
|
||||
height: vw(54);
|
||||
font-weight: 600;
|
||||
font-size: vw(14);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: vw(50);
|
||||
padding-right: vw(20);
|
||||
background-image: url('/src/assets/images/t-b-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-item {
|
||||
padding: vw(1);
|
||||
margin-top: vh(10);
|
||||
height: vh(293);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: vh(250);
|
||||
}
|
||||
|
||||
.title-3 {
|
||||
margin-left: vw(10);
|
||||
position: relative;
|
||||
width: vw(344);
|
||||
height: vh(12);
|
||||
margin-top: vh(20);
|
||||
background-image: url('@/assets/images/title-6.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
left: vw(20);
|
||||
font-size: vw(15);
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
/* 兼容WebKit内核浏览器 */
|
||||
color: transparent;
|
||||
/* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statistics {
|
||||
height: vh(90);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
&-item__label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #fff;
|
||||
margin-bottom: vh(10);
|
||||
}
|
||||
&-item__value {
|
||||
padding-left: vw(15);
|
||||
height: vh(30);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
background-image: url('@/assets/images/t-box-title-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item-box {
|
||||
.item-t {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
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: vw(24);
|
||||
color: #02f9fa;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding-left: vw(15);
|
||||
position: relative;
|
||||
left: vw(-8);
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,414 +0,0 @@
|
||||
<template>
|
||||
<div class="box-3">
|
||||
<div class="item" v-for="(item, index) in 2" :key="index">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<img src="@/assets/images/work-icon-xl-1.png" />
|
||||
<div class="header-left__title">施家梁子大桥</div>
|
||||
<div class="header-left__camera">3号摄像机</div>
|
||||
<div class="header-left__point">3号点位</div>
|
||||
</div>
|
||||
<div class="header-status">严重拥堵</div>
|
||||
</div>
|
||||
<div class="statistics">
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />路段长度
|
||||
</div>
|
||||
<div class="statistics-item__value">
|
||||
<countup end-val="88895" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />平均车速
|
||||
</div>
|
||||
<div class="statistics-item__value">
|
||||
<countup end-val="88895" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵距离
|
||||
</div>
|
||||
<div class="statistics-item__value">
|
||||
<countup end-val="88895" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵次数
|
||||
</div>
|
||||
<div class="statistics-item__value">
|
||||
<countup end-val="88895" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵开始时间
|
||||
</div>
|
||||
<div class="statistics-item__value">
|
||||
<countup end-val="88895" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<div class="statistics-item__label">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="" />拥堵持续时长
|
||||
</div>
|
||||
<div class="statistics-item__value">
|
||||
<countup end-val="88895" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-item">
|
||||
<div class="title-3"><span>拥堵频次占比</span></div>
|
||||
<div class="chart-box">
|
||||
<v-chart class="chart" :option="option1" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import countup from 'vue-countup-v3'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import VChart, { THEME_KEY } from 'vue-echarts'
|
||||
|
||||
provide(THEME_KEY, 'dark')
|
||||
|
||||
const option1 = ref({
|
||||
backgroundColor: 'transparent',
|
||||
width: '92%',
|
||||
grid: {
|
||||
top: fitChartSize(90),
|
||||
bottom: '0',
|
||||
left: '4%',
|
||||
containLabel: true
|
||||
},
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0096FF' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#004D88' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FFCB39' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0A4190' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#9846FE' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0A4190' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FF5619' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0A4190' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
type: 'plain',
|
||||
orient: 'horizontal',
|
||||
right: fitChartSize(10),
|
||||
top: fitChartSize(10),
|
||||
bottom: fitChartSize(20),
|
||||
itemWidth: 6,
|
||||
itemHeight: 6
|
||||
},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
source: [
|
||||
['product', '路段类型1', '路段类型2', '路段类型3', '路段类型4'],
|
||||
['10:00', 399.3, 185.8, 293.7, 123],
|
||||
['10:30', 83.1, 273.4, 455.1, 123],
|
||||
['11:00', 86.4, 465.2, 382.5, 123],
|
||||
['11:30', 72.4, 153.9, 439.1, 123],
|
||||
['12:00', 72.4, 453.9, 239.1, 123],
|
||||
['12:30', 72.4, 453.9, 239.1, 123],
|
||||
['13:00', 86.4, 465.2, 282.5, 123],
|
||||
['13:30', 72.4, 453.9, 239.1, 123],
|
||||
['14:00', 72.4, 453.9, 239.1, 123],
|
||||
['14:30', 72.4, 453.9, 239.1]
|
||||
]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTisk: {
|
||||
show: true,
|
||||
// 设置刻度长度
|
||||
length: 1,
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置为虚线
|
||||
width: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100,
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12), // 设置Y轴刻度字体大小
|
||||
color: '#eee'
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#00D0FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series: [
|
||||
{
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-3 {
|
||||
width: vw(813);
|
||||
padding: 0 vw(8);
|
||||
margin-top: vh(120);
|
||||
|
||||
.item {
|
||||
margin-bottom: vh(10);
|
||||
background-image: url('@/assets/images/bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
.header {
|
||||
height: vh(72);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: vw(30);
|
||||
height: auto;
|
||||
margin-right: vw(15);
|
||||
}
|
||||
}
|
||||
&-left__title {
|
||||
margin-right: vw(20);
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
|
||||
}
|
||||
&-left__camera {
|
||||
width: vw(120);
|
||||
height: vw(72);
|
||||
background-image: url('/src/assets/images/t-a-1.png');
|
||||
background-size: 100% 100%;
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
padding-left: vw(42);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 vw(20);
|
||||
}
|
||||
&-left__point {
|
||||
margin: 0 vw(20);
|
||||
width: vw(120);
|
||||
height: vw(72);
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
padding-left: vw(42);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('/src/assets/images/t-a-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-status {
|
||||
width: vw(120);
|
||||
height: vw(40);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: vw(40);
|
||||
background-image: url('/src/assets/images/t-b-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-item {
|
||||
margin-top: vh(10);
|
||||
height: vh(293);
|
||||
background: radial-gradient(70% at 99% 50%, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
||||
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: vh(250);
|
||||
}
|
||||
|
||||
.title-3 {
|
||||
margin-left: vw(10);
|
||||
position: relative;
|
||||
width: vw(344);
|
||||
height: vh(12);
|
||||
margin-top: vh(20);
|
||||
background-image: url('@/assets/images/title-6.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
left: vw(20);
|
||||
font-size: vw(15);
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
/* 兼容WebKit内核浏览器 */
|
||||
color: transparent;
|
||||
/* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statistics {
|
||||
height: vh(90);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
&-item__label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #fff;
|
||||
margin-bottom: vh(10);
|
||||
}
|
||||
&-item__value {
|
||||
padding-left: vw(15);
|
||||
height: vh(30);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
background-image: url('@/assets/images/t-box-title-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item-box {
|
||||
.item-t {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
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: vw(24);
|
||||
color: #02f9fa;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding-left: vw(15);
|
||||
position: relative;
|
||||
left: vw(-8);
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -18,9 +18,13 @@
|
||||
default: () => []
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
type: [Number, String],
|
||||
default: () => 0
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
colors: {
|
||||
type: Array,
|
||||
default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
||||
@@ -29,6 +33,8 @@
|
||||
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
let params = null
|
||||
|
||||
var defaultCofig = {
|
||||
color: [],
|
||||
series: [
|
||||
@@ -47,12 +53,12 @@
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontSize: fitChartSize(20),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#7894A8',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
@@ -70,20 +76,26 @@
|
||||
(newVal) => {
|
||||
if (newVal.length > 0) {
|
||||
nextTick(() => {
|
||||
defaultCofig.color = props.colors
|
||||
defaultCofig.series[0].data = props.dataList
|
||||
defaultCofig.series[0].label.formatter = () => {
|
||||
return `{value|${props.total}}` + '\n' + `{name|工单总数}`
|
||||
if (!params) {
|
||||
defaultCofig.color = props.colors
|
||||
defaultCofig.series[0].data = props.dataList
|
||||
defaultCofig.series[0].label.formatter = () => {
|
||||
return `{value|${props.total}}` + '\n' + `{name|${props.label}}`
|
||||
}
|
||||
params = {
|
||||
...defaultCofig,
|
||||
...props.config
|
||||
}
|
||||
} else {
|
||||
}
|
||||
setOption({
|
||||
...defaultCofig,
|
||||
...props.config
|
||||
})
|
||||
setOption(params)
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const init = () => {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
136
src/views/traffic/components/traffic-jam.vue
Normal file
136
src/views/traffic/components/traffic-jam.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="traffic-jam" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
let props = defineProps({
|
||||
series: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.series,
|
||||
(val) => {
|
||||
if (val.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
let params = null
|
||||
|
||||
const getSeriesData = () => {
|
||||
let colorMap = {
|
||||
1: '#00C000',
|
||||
2: '#FFA700',
|
||||
3: '#FFO000',
|
||||
4: '#B50000'
|
||||
}
|
||||
return props.series.map((item) => {
|
||||
return {
|
||||
value: item,
|
||||
itemStyle: {
|
||||
color: colorMap[item]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const getXAxisData = () => {
|
||||
return props.data
|
||||
}
|
||||
const init = () => {
|
||||
if (!params) {
|
||||
params = {
|
||||
grid: {
|
||||
left: '8%',
|
||||
right: '8%',
|
||||
top: '10%',
|
||||
bottom: '4%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
boundaryGap: false,
|
||||
type: 'category',
|
||||
data: getXAxisData(),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(5, 72, 134, 1)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: fitChartSize(12),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 150, 255,0.4)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
opacity: 1
|
||||
},
|
||||
data: getSeriesData(),
|
||||
barWidth: fitChartSize(40),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12),
|
||||
formatter: (res) => {
|
||||
let valueMap = {
|
||||
1: '畅通',
|
||||
2: '高疑似事件拥堵',
|
||||
3: '异常拥堵',
|
||||
4: '常规拥堵'
|
||||
}
|
||||
return valueMap[res.value]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} else {
|
||||
params.xAxis.data = getXAxisData()
|
||||
params.series[0].data = getSeriesData()
|
||||
}
|
||||
setOption(params)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.traffic-jam {
|
||||
width: vw(800);
|
||||
height: vh(250);
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<box1 />
|
||||
<box2 />
|
||||
<box3 />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import box1 from './components/box-1.vue'
|
||||
import box2 from './components/box-2.vue'
|
||||
import box3 from './components/box-3.vue'
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user