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

类型：开发

Browse Source 
描述：
This commit is contained in:
lixuefeng
2025-01-27 06:50:21 +08:00
parent c9b8298c38
commit 5902de5b34
13 changed files with 125 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,61 +34,69 @@
<div class="chart-item">
<Title3 title="拥堵频次占比" />
<div class="chart__inner">
<spotRate
:dataList="chartData.roadNum"
:total="chartData.totalNum"
label="拥堵频次总数"
/>
<ul class="chart__legend">
<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>
<spotRate
:dataList="chartData.roadNum"
:total="chartData.totalNum"
label="拥堵频次总数"
/>
<ul class="chart__legend">
<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>
<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>
<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>
<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>
<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>
<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>
</li>
</ul>
<div>
<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>
</li>
</ul>
</div>
</div>
</div>
</div>
@@ -140,7 +148,7 @@
<style lang="scss" scoped>
.box-1 {
margin-top: vh(120);
width: vw(826);
width: vw(626);
height: vh(950);
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
@@ -151,24 +159,23 @@
padding: 0 vw(8);
&-item {
width: vw(400);
width: vw(300);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
}
&__inner {
display: flex;
align-items: center;
justify-content: center;
height: vh(380);
}
&__legend {
flex: 1;
&-item {
position: relative;
width: 100%;
height: vh(40);
height: vh(30);
display: flex;
align-items: center;
margin-bottom: vh(8);

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

@@ -189,7 +189,7 @@
.traffic-map {
position: relative;
z-index: 9;
width: vw(1300);
width: vw(1500);
height: vh(955);
margin-left: vw(8);
box-sizing: border-box;

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

@@ -101,6 +101,6 @@
<style scoped lang="scss">
.spotRate {
width: vw(200);
height: vh(320);
height: vh(260);
}
</style>