修改bug

This commit is contained in:
‘937886381’
2024-06-07 11:13:59 +08:00
parent 1e8d60696b
commit ef618a4abb
27 changed files with 643 additions and 214 deletions

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-06-03 16:13:52
* @LastEditTime: 2024-06-06 15:12:58
* @LastEditors: zhp
* @Description:
-->
@@ -303,6 +303,7 @@ export default {
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
@@ -327,6 +328,9 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
margin-left: 1vw;
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-06-03 16:14:03
* @LastEditTime: 2024-06-06 15:13:06
* @LastEditors: zhp
* @Description:
-->
@@ -302,6 +302,7 @@ export default {
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
@@ -326,7 +327,9 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
margin-left: 1vw;
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}

View File

@@ -13,10 +13,11 @@
<!-- <div style="flex:1;padding: 0 20%;"> -->
<div class="chart" ref="chart"></div>
<!-- </div> -->
<div class="legend" >
<div class="legend">
<div class="legend-item" v-for="lgd in legend" :key="lgd.label">
<span class="legend-item__value">{{ lgd.value }}</span>
<span class="legend-item__label">{{ lgd.label }}</span>
<span class="legend-item__value">{{ lgd.value }}</span>
</div>
</div>
</div>
@@ -100,7 +101,7 @@ export default {
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${month}${today}日良率`, },
{ label: `${month}${today}日良率` },
{ label: `${year-1}${month}${today}日良率` },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
@@ -110,7 +111,7 @@ export default {
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `本周良率`, },
{ label: `年本周良率` },
{ label: `${year-1}年本周良率` },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
@@ -120,7 +121,7 @@ export default {
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${month}月良率`, },
{ label: `${month}月良率`, },
{ label: `${year-1}${month}月良率`, },
{ label: `${month}月目标良率`, },
];
} else if (this.period === '月' && this.than === '环比') {
@@ -143,7 +144,7 @@ export default {
: `${month}月良率`,
: `${year}良率`,
}[this.period];
console.log(vt[1]);
const t = getOptions({
// single,
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
@@ -173,7 +174,7 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${month}${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
{ label: `${year-1}${month}${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
{ label: `${month}${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
];
} else if (this.period === '日' && this.than === '环比') {
@@ -183,7 +184,7 @@ export default {
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${year-1}年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
];
@@ -194,24 +195,24 @@ export default {
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${year-1}${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
{ label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
{ label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else {
items = [
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${year}年目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
{ label: `${year}年目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
}
return items
@@ -247,6 +248,7 @@ export default {
},
methods: {
formatNumber(num) {
console.log(num);
// 判断是否为整数
if (Number.isInteger(num)) {
return num; // 如果是整数,直接转换为字符串
@@ -270,6 +272,7 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
// padding: 0 3px;
// justify-content: center;
gap: 3px;
backdrop-filter: blur(24px);
@@ -281,7 +284,7 @@ export default {
// margin-left: 5%;
// width: 290px;
flex: 1 1 auto;
padding: 0 15%;
padding: 0 20%;
/* margin: 10%; */
height: 16vh;
/* min-width: 300px; */
@@ -290,17 +293,24 @@ export default {
.legend {
height: 80px;
display: flex;
gap: 40px;
justify-content: space-around;
color: #fff;
justify-content: flex-end;
gap:20px;
// justify-content: space-between;
}
// .legend:nth-child(3){
// margin-left: 30px;
// }
.legend-item {
margin-left: 15px;
display: flex;
flex-direction: column;
align-items: center;
// align-items: center;
align-items: flex-start;
gap: 3px;
&:first-child {
// margin-left: 5px;
.legend-item__value {
color: #0e61f5;
}
@@ -312,7 +322,40 @@ export default {
}
}
}
.legend-item__label {
position: relative;
}
.legend-item__label::before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #ccc;
border-radius: 2px;
top: 6px;
left: -18px;
}
.legend-item:nth-child(2) .legend-item__label::before {
background: #12fff5;
}
.legend-item:nth-child(2) .legend-item__value {
color: #12fff5;
}
.legend-item:nth-child(1) .legend-item__label::before {
background: #0f65ff;
}
.legend-item:nth-child(1) .legend-item__value {
color: #0f65ff;
}
.legend-item:nth-child(3) .legend-item__label::before {
background: #003982;
}
.legend-item__value {
font-size: 24px;
font-weight: 600;

View File

@@ -132,19 +132,19 @@ function calculateItems(period, valueTuple) {
case "日":
items = [
{ label: `${month}${today}日累计`, value: valueTuple[1] },
{ label: `${month}${today}日累计`, value: valueTuple[0] },
{ label: `${year-1}${month}${today}日累计`, value: valueTuple[0] },
];
break;
case "周":
items = [
{ label: `本周累计`, value: valueTuple[1] },
{ label: `年本周累计`, value: valueTuple[0] },
{ label: `${year-1}年本周累计`, value: valueTuple[0] },
];
break;
case "月":
items = [
{ label: `${month}月累计`, value: valueTuple[1] },
{ label: `${month}月累计`, value: valueTuple[0] },
{ label: `${year-1}${month}月累计`, value: valueTuple[0] },
{ label: `${month}月目标`, value: valueTuple[2] },
];
break;

View File

@@ -6,7 +6,7 @@
-->
<template>
<div class="progress-bar" :data-title="title" :data-rate="value + '%'">
<div class="progress-bar" :data-title="title" :data-rate="current + '%'">
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
</div>
</template>
@@ -20,6 +20,18 @@ export default {
type: Number,
default: 0,
},
target: {
type: Number,
default: 0,
},
previous: {
type: Number,
default: 0,
},
current: {
type: Number,
default: 0,
},
// total: {
// type: Number,
// default: 0,
@@ -34,11 +46,16 @@ export default {
},
computed: {
dataRate() {
return this.value == 0
? "-"
: this.value > 1
? 100 + '%'
: `${(parseFloat(this.value)).toFixed(0)}%`;
// if (this.current != 0 && this.target != 0) {
console.log( '1111111111', this.current, this.target);
return this.current == 0 && this.target == 0
? 0
: this.current != 0 && this.target != 0
? `${((this.current / this.target) * 100).toFixed(2)}%`
: this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? this.current + '%' : this.previous >=100 ? 100 + '%' : this.previous + '%';
// } else if(this.previous != 0) {
// return this.previous + '%'
// }
},
},
methods: {},

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-29 17:03:00
* @LastEditTime: 2024-06-06 15:14:29
* @LastEditors: zhp
* @Description:
-->
@@ -10,31 +10,31 @@
<div v-if="period == '日'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="title" :value="city.current" />
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
<ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
<ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
</div>
</div>
<div v-else-if="period == '周'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="title" :value="city.current" />
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
<ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
<ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
</div>
</div>
<div v-else-if="period == '月'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
<ProgressBar :period="period" :title="title" :value="city.current" />
<ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
<ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
</div>
</div>
<div v-else="period == '年'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
<ProgressBar :period="period" :title="title" :value="city.current" />
<ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
<ProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
</div>
</div>
</template>
@@ -76,15 +76,15 @@ export default {
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
return `${month}${today}`
return `${year-1}${month}${today}`
} else if (this.period === '日' && this.than === '环比') {
return `${yesterday}`
} else if (this.period === '周' && this.than === '同比') {
return `年本周`
return `${year-1}年本周`
} else if (this.period === '周' && this.than === '环比') {
return `上周`
} else if (this.period === '月' && this.than === '同比') {
return `${month}`
return `${year-1}${month}`
} else if (this.period === '月' && this.than === '环比') {
return `${lastMonth}`
} else {
@@ -120,9 +120,13 @@ export default {
const month = new Date().getMonth() + 1;
const year = new Date().getFullYear();
if (this.period === '月') {
return `${month}月目标`
return `${month}月目标${this.city.target}%`
} else if (this.period === '年') {
return `${year}年目标`
return `${year}年目标${this.city.target}%`
} else if (this.period === '周') {
return `本周目标${this.city.target}%`
} else if (this.period === '日') {
return `${month}${today}日目标${this.city.target}%`
}
},
},