feat：对接消息相关接口
This commit is contained in:
zjc
@@ -26,11 +26,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="item-li" v-for="item in 4">
|
||||
<div class="title-3"><span>拥堵频次占比</span></div>
|
||||
<div class="chart-box">
|
||||
<v-chart class="chart" :option="option1" autoresize />
|
||||
<div class="chart">
|
||||
<div class="chart-item" v-for="item in 4" :key="item">
|
||||
<Title3 title="拥堵频次占比" />
|
||||
<div class="chart__inner">
|
||||
<spotRate :dataList="spotRateData" :total="8888" />
|
||||
<ul class="chart__legend">
|
||||
<li class="chart__legend-item" v-for="(item, index) in spotRateData" :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>
|
||||
@@ -38,204 +45,87 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import spotRate from './spotRate.vue'
|
||||
import countup from 'vue-countup-v3'
|
||||
import * as echarts from 'echarts'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
import VChart, { THEME_KEY } from 'vue-echarts'
|
||||
import { ref, provide } from 'vue'
|
||||
import { getSpotRateApi } from '@/api/workOrder.js'
|
||||
|
||||
provide(THEME_KEY, 'dark')
|
||||
const option1 = ref({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: fitChartSize(10),
|
||||
top: fitChartSize(70),
|
||||
bottom: fitChartSize(20),
|
||||
itemWidth: 5,
|
||||
itemHeight: 5,
|
||||
padding: [20, 10, 20, 10],
|
||||
// itemGap:15,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
borderColor: '#fff',
|
||||
width: 5
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(16),
|
||||
lineHeight: 16,
|
||||
rich: {
|
||||
d: {
|
||||
width: '100%',
|
||||
borderWidth: 0.5,
|
||||
height: 5,
|
||||
backgroundColor: '1'
|
||||
},
|
||||
a: {
|
||||
width: fitChartSize(75),
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(16)
|
||||
// backgroundColor:'1'
|
||||
// color:'1',
|
||||
// borderColor:'#eee',
|
||||
// borderWidth:2
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (e) => {
|
||||
let ratio = 0
|
||||
let value = 0
|
||||
if (option1.value.series[0].data.length > 0) {
|
||||
option1.value.series[0].data.forEach((item) => {
|
||||
if (e == item.name) {
|
||||
ratio = ((item.value * 100) / 3799).toFixed(0)
|
||||
value = item.value
|
||||
}
|
||||
})
|
||||
}
|
||||
// return `${e} ${ratio}%
|
||||
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
|
||||
return arr.join('')
|
||||
},
|
||||
itemStyle: {
|
||||
// color:'#fff'
|
||||
},
|
||||
backgroundColor: 'rgba(0,77,136,0.6)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left: fitChartSize(-50),
|
||||
top: fitChartSize(40),
|
||||
width: fitChartSize(350),
|
||||
height: fitChartSize(350),
|
||||
// width:200,
|
||||
// height:200,
|
||||
radius: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
fontWeight: 'bold'
|
||||
// formatter: function (o) {
|
||||
// let data = o.data.value
|
||||
// return `{value|${data}}` + '\n' + `{name|整改率}`
|
||||
// },
|
||||
// rich: {
|
||||
|
||||
// value: {
|
||||
// color: '#fff',
|
||||
// fontSize: fitChartSize(24),
|
||||
// fontWeight: 'bold',
|
||||
// padding: [0, 0, 5, 0]
|
||||
// },
|
||||
// name: {
|
||||
// color: '#7894A8',
|
||||
// fontSize: fitChartSize(12)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: fitChartSize(16),
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (o) {
|
||||
let data = o.data.value
|
||||
return `{value|${data}}` + '\n' + `{name|整改率}`
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#7894A8',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 200, name: '异常状况1' },
|
||||
{ value: 500, name: '异常状况2' },
|
||||
{ value: 234, name: '异常状况3' },
|
||||
{ value: 135, name: '异常状况4' },
|
||||
{ value: 100, name: '异常状况5' },
|
||||
{ value: 777, name: '异常状况6' },
|
||||
{ value: 888, name: '其他' }
|
||||
]
|
||||
}
|
||||
]
|
||||
const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
||||
let spotRateData = ref([])
|
||||
const getSpotRate = async () => {
|
||||
let res = await getSpotRateApi()
|
||||
spotRateData.value = res.data.data
|
||||
}
|
||||
onMounted(() => {
|
||||
getSpotRate()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.traffic-box-1 {
|
||||
width: vw(815);
|
||||
height: vh(975);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
margin-top: vh(100);
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
.list-item {
|
||||
.chart {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: vw(8);
|
||||
padding: vw(8);
|
||||
|
||||
&-item {
|
||||
width: vw(444);
|
||||
height: vh(420);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 vw(10);
|
||||
.item-li {
|
||||
width: vw(388);
|
||||
height: vh(420);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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%;
|
||||
&__legend {
|
||||
flex: 1;
|
||||
|
||||
& > 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; /* 兼容其他浏览器 */
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: vh(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: vh(8);
|
||||
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(40);
|
||||
background-color: #0096ff;
|
||||
}
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: vh(370);
|
||||
|
||||
.dot {
|
||||
width: vw(4);
|
||||
height: vw(4);
|
||||
margin: 0 vw(16);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #ffffff;
|
||||
width: vw(130);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-box-1 {
|
||||
position: relative;
|
||||
margin-top: vh(120);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
.title-num {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
@@ -1,162 +1,159 @@
|
||||
<template>
|
||||
<div class="n-box-traffic">
|
||||
<!-- nav -->
|
||||
<div class="left-nav">
|
||||
<div class="top-box">
|
||||
|
||||
<div class="ul">
|
||||
<div class="li active">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="traffic-box-2">
|
||||
<div class="map-box">
|
||||
|
||||
<Map></Map>
|
||||
<!-- 视频 -->
|
||||
<div class="video-list">
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
<div class="menu">查看更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="n-box-traffic">
|
||||
<!-- nav -->
|
||||
<div class="left-nav">
|
||||
<div class="top-box">
|
||||
<div class="ul">
|
||||
<div class="li active">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
<div class="li">路段1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="traffic-box-2">
|
||||
<div class="map-box">
|
||||
<Map></Map>
|
||||
<!-- 视频 -->
|
||||
<div class="video-list">
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options" />
|
||||
</div>
|
||||
<div class="li">
|
||||
<vue3VideoPlay v-bind="options" />
|
||||
</div>
|
||||
<div class="menu">查看更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
const options = reactive({
|
||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
width:"100%",
|
||||
height:"100%",
|
||||
color: "#409eff", //主题色
|
||||
title: "", //视频名称
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// "audioTrack",
|
||||
// "quality",
|
||||
// "speedRate",
|
||||
// "volume",
|
||||
"setting",
|
||||
"pip",
|
||||
"pageFullScreen",
|
||||
"fullScreen",
|
||||
], //显示所有按钮,
|
||||
});
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
const options = reactive({
|
||||
src: 'http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8', //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// "audioTrack",
|
||||
// "quality",
|
||||
// "speedRate",
|
||||
// "volume",
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen'
|
||||
] //显示所有按钮,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.n-box-traffic{
|
||||
display: flex;
|
||||
margin-top:vh(100);
|
||||
}
|
||||
.left-nav{
|
||||
margin-left:vw(10);
|
||||
// margin-top:vh(35);
|
||||
// width:vw(250);
|
||||
.top-box{
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
color: rgba(255,255,255,0.7);
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
.title{
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
height:vh(35);
|
||||
line-height: vh(34);
|
||||
padding-left:vw(20);
|
||||
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
|
||||
}
|
||||
.ul{
|
||||
.li{
|
||||
background: url('/src/assets/images/m-nav-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
width:vw(120);
|
||||
height:vh(58);
|
||||
line-height:vh(58);
|
||||
text-align: center;
|
||||
margin-bottom:vh(15);
|
||||
}
|
||||
.active{
|
||||
background: url('/src/assets/images/m-nav-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
// width:vw(178);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.traffic-box-2{
|
||||
width:vw(1390);
|
||||
height:vh(975);
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
margin:0 vw(10);
|
||||
padding:vh(35) vw(30);
|
||||
margin-right:0;
|
||||
position:relative;
|
||||
z-index:9;
|
||||
.map-box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:relative;
|
||||
.video-list{
|
||||
width:vw(320);
|
||||
height:vh(120);
|
||||
background: #0A254B;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
position: absolute;
|
||||
bottom:vw(10);
|
||||
right:vw(10);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.n-box-traffic {
|
||||
display: flex;
|
||||
margin-top: vh(120);
|
||||
}
|
||||
.left-nav {
|
||||
margin-left: vw(10);
|
||||
// margin-top:vh(35);
|
||||
// width:vw(250);
|
||||
.top-box {
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
height: vh(35);
|
||||
line-height: vh(34);
|
||||
padding-left: vw(20);
|
||||
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
|
||||
}
|
||||
.ul {
|
||||
.li {
|
||||
background: url('/src/assets/images/m-nav-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
width: vw(120);
|
||||
height: vh(58);
|
||||
line-height: vh(58);
|
||||
text-align: center;
|
||||
margin-bottom: vh(15);
|
||||
}
|
||||
.active {
|
||||
background: url('/src/assets/images/m-nav-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
// width:vw(178);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.traffic-box-2 {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
width: vw(1290);
|
||||
height: vh(955);
|
||||
margin: 0 vw(8);
|
||||
padding: vw(20);
|
||||
box-sizing: border-box;
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
.map-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.video-list {
|
||||
width: vw(320);
|
||||
height: vh(120);
|
||||
background: #0a254b;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
position: absolute;
|
||||
bottom: vw(10);
|
||||
right: vw(10);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,474 +1,462 @@
|
||||
<template>
|
||||
<div class="traffic-box-3">
|
||||
<!-- 1 -->
|
||||
<div class="content-1">
|
||||
<div class="tp-title">
|
||||
<div class="box-1">
|
||||
<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="">
|
||||
<div class="xl-title">施家梁子大桥</div>
|
||||
<div class="tp-item">3号摄像机</div>
|
||||
<div class="tp-item item-bg-2">3号点位</div>
|
||||
</div>
|
||||
<div class="rt-text">严重拥堵</div>
|
||||
</div>
|
||||
<div class="title-num">
|
||||
<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="88895" />
|
||||
</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="88895" />
|
||||
</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="88895" />
|
||||
</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="88895" />
|
||||
</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>12:00:00</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>1h30S</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- chart -->
|
||||
<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>
|
||||
<!-- 2 -->
|
||||
<div class="content-1 content-2">
|
||||
<div class="tp-title">
|
||||
<div class="box-1">
|
||||
<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="">
|
||||
<div class="xl-title">施家梁子大桥</div>
|
||||
<div class="tp-item">3号摄像机</div>
|
||||
<div class="tp-item item-bg-2">3号点位</div>
|
||||
</div>
|
||||
<div class="rt-text rt-text-2">常规拥堵</div>
|
||||
</div>
|
||||
<div class="title-num">
|
||||
<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="88895" />
|
||||
</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="88895" />
|
||||
</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="88895" />
|
||||
</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="88895" />
|
||||
</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>12:00:00</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>1h30S</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- chart -->
|
||||
<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>
|
||||
<div class="traffic-box-3">
|
||||
<!-- 1 -->
|
||||
<div class="content-1">
|
||||
<div class="tp-title">
|
||||
<div class="box-1">
|
||||
<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="" />
|
||||
<div class="xl-title">施家梁子大桥</div>
|
||||
<div class="tp-item">3号摄像机</div>
|
||||
<div class="tp-item item-bg-2">3号点位</div>
|
||||
</div>
|
||||
<div class="rt-text">严重拥堵</div>
|
||||
</div>
|
||||
<div class="title-num">
|
||||
<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="88895" />
|
||||
</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="88895" /> </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="88895" /> </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="88895" /> </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>12:00:00</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>1h30S</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- chart -->
|
||||
<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>
|
||||
<!-- 2 -->
|
||||
<div class="content-1 content-2">
|
||||
<div class="tp-title">
|
||||
<div class="box-1">
|
||||
<img class="icon-xl" src="@/assets/images/work-icon-xl-1.png" alt="" />
|
||||
<div class="xl-title">施家梁子大桥</div>
|
||||
<div class="tp-item">3号摄像机</div>
|
||||
<div class="tp-item item-bg-2">3号点位</div>
|
||||
</div>
|
||||
<div class="rt-text rt-text-2">常规拥堵</div>
|
||||
</div>
|
||||
<div class="title-num">
|
||||
<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="88895" />
|
||||
</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="88895" /> </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="88895" /> </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="88895" /> </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>12:00:00</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>1h30S</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- chart -->
|
||||
<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 * as echarts from 'echarts'
|
||||
import {
|
||||
fitChartSize
|
||||
} from '@/utils/dataUtil'
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
import VChart, {
|
||||
THEME_KEY
|
||||
} from 'vue-echarts';
|
||||
import {
|
||||
ref,
|
||||
provide
|
||||
} from 'vue';
|
||||
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%',
|
||||
// height: fitChartSize(300),
|
||||
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'
|
||||
}
|
||||
]
|
||||
})
|
||||
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>
|
||||
.traffic-box-3 {
|
||||
width: vw(818);
|
||||
height: vh(480);
|
||||
background: linear-gradient(330deg, #0B2F64 0%, #062B57 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
padding: vw(10);
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
margin: 0 vw(10);
|
||||
margin-top: vh(100);
|
||||
.content-2{
|
||||
margin-top:vh(20);
|
||||
}
|
||||
.content-1 {
|
||||
.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;
|
||||
.traffic-box-3 {
|
||||
margin-top: vh(120);
|
||||
width: vw(818);
|
||||
height: vh(480);
|
||||
padding: vw(8);
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
background: linear-gradient(330deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: vh(250);
|
||||
}
|
||||
.content-2 {
|
||||
margin-top: vh(20);
|
||||
}
|
||||
.content-1 {
|
||||
.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;
|
||||
|
||||
.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%;
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: vh(250);
|
||||
}
|
||||
|
||||
&>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;
|
||||
/* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
}
|
||||
.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%;
|
||||
|
||||
.title-num {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: vw(20);
|
||||
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;
|
||||
& > 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;
|
||||
/* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-box {
|
||||
flex: 1;
|
||||
.title-num {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: vw(20);
|
||||
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;
|
||||
|
||||
.item-t {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: vh(20);
|
||||
.item-box {
|
||||
flex: 1;
|
||||
|
||||
img {
|
||||
margin-right: vw(5);
|
||||
width: vw(8);
|
||||
height: vh(8);
|
||||
}
|
||||
.item-t {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
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);
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tp-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tp-title {
|
||||
height: vh(72);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.box-1 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.box-1 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-xl {
|
||||
width: vw(30);
|
||||
height: vh(22);
|
||||
margin-right: vw(15);
|
||||
}
|
||||
.icon-xl {
|
||||
width: vw(30);
|
||||
height: vh(22);
|
||||
margin-right: vw(15);
|
||||
}
|
||||
|
||||
.xl-title {
|
||||
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%);
|
||||
margin-right: vw(20);
|
||||
}
|
||||
.xl-title {
|
||||
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%);
|
||||
margin-right: vw(20);
|
||||
}
|
||||
|
||||
.tp-item {
|
||||
width: vw(120);
|
||||
height: vh(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)
|
||||
}
|
||||
.tp-item {
|
||||
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);
|
||||
}
|
||||
|
||||
.item-bg-2 {
|
||||
background-image: url('/src/assets/images/t-a-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.item-bg-2 {
|
||||
background-image: url('/src/assets/images/t-a-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rt-text {
|
||||
width: vw(116);
|
||||
height: vh(40);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #FFFFFF;
|
||||
padding-left: vw(15);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background-image: url('/src/assets/images/t-b-1.png');
|
||||
background-size: 100% 100%;
|
||||
line-height: vh(40);
|
||||
padding-left: vw(40);
|
||||
}
|
||||
.rt-text-2{
|
||||
background-image: url('/src/assets/images/t-b-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.rt-text {
|
||||
width: vw(116);
|
||||
height: vw(40);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
line-height: vw(40);
|
||||
padding-left: vw(40);
|
||||
background-image: url('/src/assets/images/t-b-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rt-text-2 {
|
||||
background-image: url('/src/assets/images/t-b-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
94
src/views/traffic/components/spotRate.vue
Normal file
94
src/views/traffic/components/spotRate.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="spotRate" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
colors: {
|
||||
type: Array,
|
||||
default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
||||
}
|
||||
})
|
||||
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
var defaultCofig = {
|
||||
color: [],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
radius: ['70%', '90%'],
|
||||
itemStyle: {
|
||||
borderWidth: fitChartSize(4),
|
||||
borderColor: '#093672'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#7894A8',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(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|工单总数}`
|
||||
}
|
||||
setOption({
|
||||
...defaultCofig,
|
||||
...props.config
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.spotRate {
|
||||
width: vw(240);
|
||||
height: vh(320);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user