修改bug
This commit is contained in:
@@ -60,7 +60,7 @@ export default {
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
@@ -70,7 +70,7 @@ export default {
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `${year-1}年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year-1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
@@ -177,7 +177,7 @@ function getTemplate(period, dataList, than) {
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月${today}日`,
|
||||
name: `${year-1}年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
@@ -201,7 +201,7 @@ function getTemplate(period, dataList, than) {
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
name: `${year-1}年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
@@ -225,7 +225,7 @@ function getTemplate(period, dataList, than) {
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
name: `${year-1}年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-10 11:10:54
|
||||
* @LastEditTime: 2024-05-31 16:19:45
|
||||
* @LastEditTime: 2024-06-06 10:04:49
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="chip-rate">
|
||||
<ChipRateItem :period="period" :than="than" :cities="['邯郸', '瑞昌']" :color="1" />
|
||||
<!-- <ChipRateItem :period="period" :than="than" :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" /> -->
|
||||
<ChipRateItem :period="period" :than="than" :cities="['邯郸',]" :color="1" />
|
||||
<ChipRateItem :period="period" :than="than" :cities="['瑞昌']" :color="2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -43,15 +43,15 @@ export default {
|
||||
gap: 5px;
|
||||
position: relative;
|
||||
|
||||
// &:after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// top: 0;
|
||||
// width: 3px;
|
||||
// height: 100%;
|
||||
// transform: translateX(-50%);
|
||||
// background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
|
||||
// }
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:25:10
|
||||
* @LastEditTime: 2024-06-04 14:18:52
|
||||
* @LastEditTime: 2024-06-06 13:55:10
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
data() {
|
||||
stdData() {
|
||||
return this.$store.getters.copilot.efficiency.stdRate
|
||||
},
|
||||
cities() {
|
||||
@@ -65,22 +65,22 @@ export default {
|
||||
{ name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||
{ name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||
]
|
||||
if (this.data?.previous) {
|
||||
this.data?.previous.forEach(
|
||||
if (this.stdData?.previous) {
|
||||
this.stdData?.previous.forEach(
|
||||
(v, idx) => {
|
||||
_cities[idx].previous = v ?? 0;
|
||||
}
|
||||
);
|
||||
}
|
||||
if (this.data?.target) {
|
||||
this.data?.target.forEach(
|
||||
if (this.stdData?.target) {
|
||||
this.stdData?.target.forEach(
|
||||
(v, idx) => {
|
||||
_cities[idx].target = v ?? 0;
|
||||
}
|
||||
)
|
||||
}
|
||||
if (this.data?.current) {
|
||||
this.data?.current.forEach(
|
||||
if (this.stdData?.current) {
|
||||
this.stdData?.current.forEach(
|
||||
(v, idx) => {
|
||||
_cities[idx].current = v ?? 0;
|
||||
}
|
||||
@@ -123,7 +123,7 @@ export default {
|
||||
// flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
// display: -webkit-box;
|
||||
// flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
// grid-template-columns: repeat(2, 1fr);
|
||||
// grid-template-rows: repeat(4, 1fr);
|
||||
@@ -136,7 +136,7 @@ export default {
|
||||
// width: 50%;
|
||||
}
|
||||
.span-2 {
|
||||
flex: 1 1 auto;
|
||||
// flex-basis: 100%;
|
||||
// flex: 1 1 auto;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -60,7 +60,7 @@ export default {
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
@@ -70,7 +70,7 @@ export default {
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `${year-1}年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year-1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
@@ -168,7 +168,7 @@ function getTemplate(period, dataList,than) {
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月${today}日`,
|
||||
name: `${year-1}年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
@@ -192,7 +192,7 @@ function getTemplate(period, dataList,than) {
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
name: `${year-1}年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
@@ -216,7 +216,7 @@ function getTemplate(period, dataList,than) {
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
name: `${year-1}年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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: {},
|
||||
|
||||
@@ -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}%`
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@@ -8,7 +8,7 @@ export default ({
|
||||
preName,
|
||||
}) => ({
|
||||
grid: {
|
||||
left: 0,
|
||||
left: '0%',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
@@ -41,7 +41,7 @@ export default ({
|
||||
radius: ["70%", "85%"],
|
||||
center: ["45%", "52%"],
|
||||
emptyCircleStyle: {
|
||||
color: "#042c5f33",
|
||||
color: "#003982",
|
||||
},
|
||||
},
|
||||
// 数据 series
|
||||
@@ -60,6 +60,9 @@ export default ({
|
||||
{
|
||||
value: currentSum,
|
||||
name: currentName,
|
||||
tooltip: {
|
||||
formatter: `${currentName} : ${currentSum}`
|
||||
},
|
||||
selected: false,
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
@@ -80,10 +83,11 @@ export default ({
|
||||
},
|
||||
},
|
||||
{
|
||||
value:currentSum == 0
|
||||
? 1
|
||||
: 0,
|
||||
name: "未达成良率",
|
||||
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
|
||||
name: currentName,
|
||||
tooltip: {
|
||||
formatter: `${currentName} : ${currentSum}`
|
||||
},
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user