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