You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.4 KiB
101 lines
2.4 KiB
1 week ago
|
<template>
|
||
|
|
<div class="progress-container">
|
||
|
|
<div class="progress-item" v-for="(item, index) in progressData" :key="index">
|
||
|
|
<span class="progress-label">{{ item.label }}</span>
|
||
|
|
<div class="progress-bar-wrapper">
|
||
|
|
<div class="progress-bar" :style="{ width: item.percentage + '%', background: item.color }">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="progress-value">{{item.value}}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { allchanyexfcyfx } from '@/api/ManageApi/index';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ProgressBarWithLabel',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
progressData: [],
|
||
|
|
maxValue: 0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async fetchData() {
|
||
|
|
try {
|
||
|
|
const response = await allchanyexfcyfx();
|
||
|
|
// response.data 是一个数组，包含进度条的数据
|
||
|
|
const data = response.data;
|
||
|
|
|
||
|
|
// 计算最大值
|
||
|
|
this.maxValue = Math.max(...data.map(item => item.count));
|
||
|
|
|
||
|
|
// 更新 progressData
|
||
|
|
this.progressData = data.map((item, index) => ({
|
||
|
|
label: item.ssgnq,
|
||
|
|
value: item.count,
|
||
|
|
percentage: (item.count / this.maxValue) * 100,
|
||
|
|
color: item.color || (index % 2 === 0 ? '#5B76F9' : '#5B76F9')
|
||
|
|
}));
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching data:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.progress-container {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 34rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-label {
|
||
|
|
width: 10rem;
|
||
|
|
text-align: right;
|
||
|
|
padding-right: 0.7rem;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: #333;
|
||
|
|
font-family: alibold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-bar-wrapper {
|
||
|
|
flex: 1;
|
||
|
|
height: 0.8rem;
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
border-radius: 12px;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-bar {
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 12px;
|
||
|
|
transition: width 0.5s ease;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-value {
|
||
|
|
width: 1.5rem;
|
||
|
|
/* background-color: red; */
|
||
|
|
text-align: right;
|
||
|
|
margin-left: .3rem;
|
||
|
|
color: #333;
|
||
|
|
font-size: 0.88rem;
|
||
|
|
font-family: aliregular;
|
||
|
|
}
|
||
|
|
</style>
|