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

新版式

Browse Source
This commit is contained in:
duanliang
2025-11-24 23:17:46 +08:00
parent 9d78158b77
commit 5c17235581
55 changed files with 973 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,8 +32,9 @@
</div> -->
</div>
<div class="chart">
<div class="chart-item">
<div class="chart-item" >
<Title3 title="拥堵频次占比" />
<div class="chart__inner">
<div>
<spotRate
@@ -41,8 +42,9 @@
:total="chartData.totalNum"
label="拥堵频次总数"
/>
<ul class="chart__legend">
<ul class="chart__legend flex" style="flex-wrap: wrap;">
<li
class="chart__legend-item"
v-for="(item, index) in chartData.roadNum"
:key="index"
@@ -65,6 +67,7 @@
<div class="new-ul">
<ul class="chart__legend">
<li
class="chart__legend-item"
v-for="(item, index) in chartData.typeNum"
:key="index"
@@ -88,8 +91,9 @@
:total="chartData.totalTime"
label="拥堵总时长"
/>
<ul class="chart__legend">
<ul class="chart__legend flex" style="flex-wrap: wrap;">
<li
class="chart__legend-item"
v-for="(item, index) in chartData.roadTime"
:key="index"
@@ -116,6 +120,7 @@
<div class="new-ul">
<ul class="chart__legend">
<li
class="chart__legend-item"
v-for="(item, index) in chartData.typeTime"
:key="index"
@@ -179,45 +184,62 @@
<style lang="scss" scoped>
.new-vehicle{
padding-top:vh(20);
width:100%;
}
.new-ul{
padding:0 vw(30);
padding:0 0;
margin-top:vh(20);
}
.box-1 {
margin-top: vh(120);
width: vw(626);
height: vh(950);
width: vw(800);
// height: vh(950);
// height: 100%;
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
.chart {
display: flex;
flex-wrap: wrap;
gap: vw(8);
gap: vw(4);
padding: 0 vw(8);
height:100%;
overflow: auto;
padding-bottom: vh(150);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&-item {
width: vw(300);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
// display: flex;
// align-items: center;
width:100%;
flex-wrap: wrap;
justify-content: center;
position: relative;
// top:vh(-10);
// height:20%;
overflow: hidden;
// width: vw(300);
// background-image: url('@/assets/images/bg-3.png');
// background-size: 100% 100%;
}
&__inner {
width:100%;
display: flex;
justify-content: center;
height: vh(380);
// height: vh(380);
}
&__legend {
flex: 1;
display: flex;
&-item {
position: relative;
width: 100%;
height: vh(30);
height: vh(50);
display: flex;
align-items: center;
margin-bottom: vh(8);
margin-bottom: vh(15);
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
&::before {
@@ -236,15 +258,15 @@
.name {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(20);
color: #ffffff;
width: vw(110);
// width: vw(110);
}
.value {
// padding-right: vw(20);
font-weight: bold;
font-size: vw(15);
font-size: font-vw(20);
color: #ffffff;
}
}
@@ -261,7 +283,7 @@
.item-t {
display: flex;
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: #fff;
text-align: left;
margin-bottom: vh(20);
@@ -277,7 +299,7 @@
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #02f9fa;
text-align: left;
font-style: normal;

51
src/views/traffic/components/box-2.vue
View File

@@ -234,6 +234,7 @@
.flex-1{
flex:1;
overflow:hidden;
height: 100%;
}
.title-1 {
position: relative;
@@ -241,7 +242,7 @@
.title {
margin: vh(10) auto;
margin-top:0;
width: vw(1500);
width: vw(1100);
height: vh(32);
display: flex;
align-items: center;
@@ -250,7 +251,7 @@
background-size: 100% 100%;
& > span {
font-weight: 800;
font-size: vw(24);
font-size: font-vw(24);
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-webkit-background-clip: text;
background-clip: text;
@@ -265,8 +266,9 @@
flex:1;
}
.nav {
width: vw(230);
height: vh(950);
width: vw(330);
// height: vh(950);
height:100%;
margin-left: vw(8);
padding-left: vw(5);
overflow: auto;
@@ -279,10 +281,10 @@
&-item {
cursor: pointer;
margin-bottom: vw(15);
width: vw(220);
height: vh(54);
width: 100%;
height: vh(100);
font-weight: bold;
font-size: vw(18);
font-size: font-vw(20);
color: #ffffff;
display: flex;
align-items: center;
@@ -302,6 +304,7 @@
// width: vw(2116);
width:100%;
height: vh(890);
height: 100%;
margin-left: vw(8);
box-sizing: border-box;
background-image: url('/src/assets/images/map-bg-2.png');
@@ -334,7 +337,7 @@
height: vh(60);
font-family: Inter, Inter;
font-weight: 400;
font-size: vw(12);
font-size: font-vw(12);
color: #ffffff;
line-height: vh(14);
text-align: left;
@@ -343,8 +346,8 @@
}
}
.list {
width: vw(806);
height: vh(952);
width: vw(1000);
height: 100%;
margin-left: vw(8);
overflow: auto;
&::-webkit-scrollbar {
@@ -371,7 +374,7 @@
}
&-left__title {
margin-right: vw(20);
font-size: vw(28);
font-size: font-vw(28);
font-weight: bold;
color: transparent;
-webkit-background-clip: text;
@@ -384,7 +387,7 @@
width: vw(120);
height: vw(72);
font-weight: 600;
font-size: vw(15);
font-size: font-vw(15);
color: #ffffff;
padding-left: vw(42);
display: flex;
@@ -399,7 +402,7 @@
width: vw(120);
height: vw(72);
font-weight: 600;
font-size: vw(15);
font-size: font-vw(15);
color: #ffffff;
padding-left: vw(42);
display: flex;
@@ -409,9 +412,9 @@
}
&-status {
min-width: vw(150);
height: vw(54);
height: vw(64);
font-weight: 600;
font-size: vw(14);
font-size: font-vw(22);
color: #fff;
display: flex;
align-items: center;
@@ -425,7 +428,7 @@
.chart-item {
padding: vw(1);
margin-top: vh(10);
height: vh(293);
height: vh(500);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
@@ -447,7 +450,7 @@
position: absolute;
bottom: vh(4);
left: vw(20);
font-size: vw(15);
font-size: font-vw(15);
font-weight: bold;
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
-webkit-background-clip: text;
@@ -461,7 +464,7 @@
}
.statistics {
height: vh(90);
height: vh(190);
display: flex;
align-items: center;
justify-content: space-evenly;
@@ -470,15 +473,15 @@
&-item__label {
font-weight: 400;
font-size: vw(14);
font-size: font-vw(22);
color: #fff;
margin-bottom: vh(10);
margin-bottom: vh(30);
}
&-item__value {
padding-left: vw(15);
height: vh(30);
height: vh(90);
font-weight: bold;
font-size: vw(24);
font-size: font-vw(28);
color: #02f9fa;
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
@@ -487,7 +490,7 @@
.item-t {
display: flex;
font-weight: 400;
font-size: vw(14);
font-size: font-vw(14);
color: rgba(255, 255, 255, 0.8);
margin-bottom: vh(20);
img {
@@ -503,7 +506,7 @@
background-image: url('@/assets/images/t-box-title-bg-1.png');
background-size: 100% 100%;
font-weight: bold;
font-size: vw(24);
font-size: font-vw(24);
color: #02f9fa;
text-align: left;
font-style: normal;

9
src/views/traffic/components/spotRate.vue
View File

@@ -59,13 +59,13 @@
rich: {
value: {
color: '#fff',
fontSize: fitChartSize(20),
fontSize: fitChartSize(24),
fontWeight: 'bold',
padding: [0, 0, 5, 0]
},
name: {
color: '#fff',
fontSize: fitChartSize(12)
fontSize: fitChartSize(16)
}
}
},
@@ -124,7 +124,8 @@
justify-content: center;
}
.spotRate {
width: vw(200);
height: vh(200);
width: vw(340);
height: vh(340);
margin:0 auto;
}
</style>

11
src/views/traffic/components/traffic-jam.vue
View File

@@ -61,7 +61,7 @@
}
},
axisLabel: {
fontSize: fitChartSize(12),
fontSize: fitChartSize(20),
color: 'rgba(255,255,255,0.9)'
},
data: getXAxisData()
@@ -70,7 +70,7 @@
type: 'value',
axisLabel: {
show: false,
fontSize: fitChartSize(12),
fontSize: fitChartSize(20),
color: 'rgba(255,255,255,0.9)'
},
splitLine: {
@@ -90,7 +90,7 @@
show: true,
position: 'top',
color: '#fff',
fontSize: fitChartSize(12),
fontSize: fitChartSize(20),
formatter: (res) => {
let valueMap = {
1: '畅通',
@@ -125,7 +125,8 @@
<style scoped lang="scss">
.traffic-jam {
width: vw(800);
height: vh(250);
width: 100%;
height: vh(430);
margin-top:vh(30);
}
</style>

10
src/views/traffic/components/vehicle-source.vue
View File

@@ -60,14 +60,14 @@
}
},
axisLabel: {
fontSize: fitChartSize(12),
fontSize: fitChartSize(20),
color: 'rgba(255,255,255,0.9)'
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: fitChartSize(12),
fontSize: fitChartSize(20),
color: 'rgba(255,255,255,0.9)'
},
splitLine: {
@@ -88,7 +88,7 @@
show: true,
position: 'top',
color: '#fff',
fontSize: fitChartSize(10)
fontSize: fitChartSize(20)
},
itemStyle: {
borderRadius: [0, 0, 0, 0],
@@ -124,7 +124,7 @@
<style scoped lang="scss">
.vehicle-source {
width:vw(310);
height: vh(160);
width:100%;
height: vh(350);
}
</style>