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:
duanliang
2024-12-19 11:48:16 +08:00
parent 5f31856ac0
commit d60c8cbd38
9 changed files with 479 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
src/views/traffic/components/box-1.vue Normal file
View File

@@ -0,0 +1,253 @@
<template>
<div class="traffic-box-1">
<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>
<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>
</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';
provide(THEME_KEY, 'dark');
const option1 = ref({
backgroundColor:'transparent',
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 70,
bottom: 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: 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:-50,
top: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',
},
emphasis: {
label: {
show: true,
fontSize: fitChartSize(16),
fontWeight: 'bold',
color:'#fff'
}
},
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: 777, name: '其他' },
]
},
],
});
</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{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding:0 vw(10);
.item-li{
width: vw(394);
height: vh(420);
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%;
& > 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; /* 兼容其他浏览器 */
}
}
.chart-box{
width:100%;
height:vh(370);
}
}
}
.title-num{
display: flex;
justify-content: flex-start;
padding:vw(40);
.item-box{
flex: 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);
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: relative;
top:vh(-5);
}
}
}
}
}
</style>

9
src/views/traffic/index.vue
View File

@@ -1,7 +1,14 @@
<template>
<main class="wrapper">
<CoreVideo />
<box1/>
<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
<Correspondence />
</main>
</template>
<script>
<script setup>
import box1 from './components/box-1.vue'
</script>
<style>