update 标准组件良率
This commit is contained in:
parent
5ed4eed5de
commit
b6820fd61f
@ -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 },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
@ -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%);
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user