update 标准组件良率

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-04-29 14:18:52 +08:00
parent 5ed4eed5de
commit b6820fd61f
4 changed files with 60 additions and 44 deletions

View File

@ -8,21 +8,13 @@
<template>
<div class="std-rate">
<div class="span-2">
<StdRateItem
:city="cities[5].name"
:target="cities[5].target"
:total="cities[5].total"
/>
<StdRateItem :city="cities[5]" />
</div>
<div
v-for="item in cities.filter((val, index) => index != 5)"
:key="item.name"
>
<StdRateItem
:city="item.name"
:target="item.target"
:total="item.total"
/>
<StdRateItem :city="item" />
</div>
</div>
</template>
@ -36,13 +28,13 @@ export default {
data() {
return {
cities: [
{ name: "A", target: 100, total: 200 },
{ name: "B", target: 200, total: 300 },
{ name: "C", target: 300, total: 400 },
{ name: "D", target: 400, total: 500 },
{ name: "E", target: 500, total: 600 },
{ name: "F", target: 400, total: 500 },
{ name: "G", target: 500, total: 600 },
{ name: "瑞昌", target: 100, total: 200, thisYear: 20 },
{ name: "邯郸", target: 200, total: 300, thisYear: 20 },
{ name: "株洲", target: 300, total: 400, thisYear: 20 },
{ name: "佳木斯", target: 400, total: 500, thisYear: 20 },
{ name: "成都", target: 500, total: 600, thisYear: 20 },
{ name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
{ name: "蚌埠", target: 500, total: 600, thisYear: 20 },
],
};
},

View File

@ -46,11 +46,9 @@ export default {
position: absolute;
top: 50%;
right: 0;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #002f6b;
width: 2px;
background: linear-gradient(to top, transparent, #0b5be1ee, transparent);
height: 100%;
transform: translateY(-50%);
}

View File

@ -37,7 +37,9 @@ export default {
},
computed: {
dataRate() {
return this.total == 0 ? "-" : `${parseInt(this.value / this.total)}%`;
return this.total == 0
? "-"
: `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`;
},
},
methods: {},
@ -46,10 +48,10 @@ export default {
<style scoped lang="scss">
.progress-bar {
height: 8px;
height: 10px;
background-color: #002f6b;
border-radius: 4px;
margin-bottom: 20px;
margin-bottom: 12px;
position: relative;
&:before {
@ -57,7 +59,7 @@ export default {
display: inline-block;
color: #fff;
position: absolute;
bottom: -18px;
bottom: -200%;
font-size: 12px;
}
@ -66,17 +68,46 @@ export default {
display: inline-block;
color: #fff;
position: absolute;
bottom: -18px;
bottom: -200%;
right: 0;
font-size: 12px;
}
&:first-child {
&:after {
color: #11eae3;
}
}
&:nth-child(2) {
&:after {
color: #0e65fd;
}
}
.progress-bar__rate {
position: absolute;
display: inline-block;
height: 100%;
width: 0;
background-color: #11e8e2;
border-radius: 4px;
}
&:first-child {
.progress-bar__rate {
background: linear-gradient(
to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3
);
}
}
&:nth-child(2) {
.progress-bar__rate {
background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd);
}
}
}
</style>

View File

@ -7,10 +7,14 @@
<template>
<div class="std-rate-item">
<CityName :value="city" />
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar title="24年目标" :total="100" :value="10" />
<ProgressBar title="24年目标" :total="100" :value="10" />
<ProgressBar title="24年目标" :total="city.target" :value="city.target" />
<ProgressBar
title="24年累计"
:total="city.target"
:value="city.thisYear"
/>
</div>
</div>
</template>
@ -24,23 +28,13 @@ export default {
components: { CityName, ProgressBar },
props: {
city: {
type: String,
default: "",
},
target: {
type: Number,
default: 0,
},
total: {
type: Number,
default: 0,
type: Object,
required: true,
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
@ -58,7 +52,8 @@ export default {
flex: 1;
margin: 6px;
display: flex;
gap: 2px;
gap: 12px;
height: 60px;
flex-direction: column;
justify-content: center;
}