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

View File

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

View File

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

View File

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