|
|
@@ -12,9 +12,7 @@ |
|
|
|
<div class="double-ring-chart__legend"> |
|
|
|
<div v-for="item in legendItems" :key="item.label" class="legend-item"> |
|
|
|
<span class="legend-item__label">{{ item.label }}</span> |
|
|
|
<span class="legend-item__value">{{ |
|
|
|
item.value.toLocaleString() |
|
|
|
}}</span> |
|
|
|
<span class="legend-item__value">{{ item.value | numberFilter }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@@ -33,6 +31,10 @@ export default { |
|
|
|
type: Number, |
|
|
|
default: 24, |
|
|
|
}, |
|
|
|
factoryId: { |
|
|
|
type: Number, |
|
|
|
required: true, |
|
|
|
}, |
|
|
|
period: { |
|
|
|
type: String, |
|
|
|
default: "日", |
|
|
@@ -45,26 +47,69 @@ export default { |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
numberFilter(val) { |
|
|
|
if (!isNaN(val)) { |
|
|
|
return (+val).toLocaleString(); |
|
|
|
} |
|
|
|
return 0; |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
legendItems() { |
|
|
|
return calculateItems(this.period); |
|
|
|
dataSourceField() { |
|
|
|
switch (this.dataSource) { |
|
|
|
case "标准组件产出": |
|
|
|
return "stdOutput"; |
|
|
|
case "芯片产出": |
|
|
|
return "chipOutput"; |
|
|
|
case "BIPV产出": |
|
|
|
return "bipvOutput"; |
|
|
|
} |
|
|
|
}, |
|
|
|
valueTuple() { |
|
|
|
// [previousValue, currentValue, sumValue?] |
|
|
|
const getter = this.$store.getters.copilot.yield[this.dataSourceField]; |
|
|
|
if (this.period === "日" || this.period === "周") { |
|
|
|
return [ |
|
|
|
getter.previous[this.factoryId], |
|
|
|
getter.current[this.factoryId], |
|
|
|
]; |
|
|
|
} |
|
|
|
return [ |
|
|
|
getter.previous[this.factoryId], |
|
|
|
getter.current[this.factoryId], |
|
|
|
getter.target[this.factoryId], |
|
|
|
]; |
|
|
|
}, |
|
|
|
|
|
|
|
options() { |
|
|
|
// TODO: 此处更新数据 |
|
|
|
let titleValue = "10%", |
|
|
|
subtitle = "测试子标题", |
|
|
|
previousSum = 10, |
|
|
|
currentSum = 0, |
|
|
|
targetSum = 100; |
|
|
|
const year = new Date().getFullYear(); |
|
|
|
const month = new Date().getMonth() + 1; |
|
|
|
const vt = this.valueTuple; |
|
|
|
let titleValue = |
|
|
|
vt[0] != null && vt[2] != null && vt[2] !== 0 |
|
|
|
? `${vt[1] / vt[2]}%` |
|
|
|
: "0%", |
|
|
|
subtitle = |
|
|
|
this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`; |
|
|
|
|
|
|
|
return getOptions({ |
|
|
|
titleValue, |
|
|
|
subtitle, |
|
|
|
previousSum, |
|
|
|
currentSum, |
|
|
|
targetSum, |
|
|
|
previousSum: this.valueTuple[0], |
|
|
|
currentSum: this.valueTuple[1], |
|
|
|
targetSum: this.valueTuple[2], |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
legendItems() { |
|
|
|
return calculateItems(this.period, this.valueTuple); |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
legendItems() { |
|
|
|
this.initOptions(this.options); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.initOptions(this.options); |
|
|
@@ -77,7 +122,7 @@ export default { |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
function calculateItems(period) { |
|
|
|
function calculateItems(period, valueTuple) { |
|
|
|
let items = []; |
|
|
|
const today = new Date().getDate(); |
|
|
|
const month = new Date().getMonth() + 1; |
|
|
@@ -85,28 +130,28 @@ function calculateItems(period) { |
|
|
|
switch (period) { |
|
|
|
case "日": |
|
|
|
items = [ |
|
|
|
{ label: `${month}月${today}日累计`, value: 24 }, |
|
|
|
{ label: `去年${month}月${today}日累计`, value: 33 }, |
|
|
|
{ label: `${month}月${today}日累计`, value: valueTuple[1] }, |
|
|
|
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] }, |
|
|
|
]; |
|
|
|
break; |
|
|
|
case "周": |
|
|
|
items = [ |
|
|
|
{ label: `本周累计`, value: 32 }, |
|
|
|
{ label: `去年本周累计`, value: 12 }, |
|
|
|
{ label: `本周累计`, value: valueTuple[1] }, |
|
|
|
{ label: `去年本周累计`, value: valueTuple[0] }, |
|
|
|
]; |
|
|
|
break; |
|
|
|
case "月": |
|
|
|
items = [ |
|
|
|
{ label: `${month}月累计`, value: 24 }, |
|
|
|
{ label: `去年${month}月累计`, value: 33 }, |
|
|
|
{ label: `${month}月目标`, value: 12334 }, |
|
|
|
{ label: `${month}月累计`, value: valueTuple[1] }, |
|
|
|
{ label: `去年${month}月累计`, value: valueTuple[0] }, |
|
|
|
{ label: `${month}月目标`, value: valueTuple[2] }, |
|
|
|
]; |
|
|
|
break; |
|
|
|
case "年": |
|
|
|
items = [ |
|
|
|
{ label: `${year - 1}年累计`, value: 23234 }, |
|
|
|
{ label: `${year}年累计`, value: 4324 }, |
|
|
|
{ label: `${year}年目标`, value: 12334 }, |
|
|
|
{ label: `${year}年累计`, value: valueTuple[1] }, |
|
|
|
{ label: `${year - 1}年累计`, value: valueTuple[0] }, |
|
|
|
{ label: `${year}年目标`, value: valueTuple[2] }, |
|
|
|
]; |
|
|
|
break; |
|
|
|
} |
|
|
|