373 lines
11 KiB
Vue
373 lines
11 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2024-05-20 13:32:59
|
|
* @LastEditTime: 2024-07-22 14:41:37
|
|
* @LastEditors: zhp
|
|
* @Description:
|
|
-->
|
|
|
|
<template>
|
|
<div class="double-ring-chart">
|
|
<!-- <div> -->
|
|
<div ref="chart" class="double-ring-chart__container"></div>
|
|
<!-- </div> -->
|
|
<!-- style="{ height: vHeight + 'vh' }" -->
|
|
<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 | numberFilter }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import chartMixin from "@/mixins/chart.js";
|
|
import screenfull from "screenfull";
|
|
import getOptions from "../../../options/double-ring-chart-options";
|
|
|
|
export default {
|
|
name: "DoubleRingChart",
|
|
mixins: [chartMixin],
|
|
props: {
|
|
vHeight: {
|
|
type: Number,
|
|
default: 24,
|
|
},
|
|
factoryId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
period: {
|
|
type: String,
|
|
default: "日",
|
|
},
|
|
dataSource: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
than: {
|
|
type: String,
|
|
default: "同比",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isFullscreen: false,
|
|
};
|
|
},
|
|
filters: {
|
|
numberFilter(val) {
|
|
if (!isNaN(val)) {
|
|
return (+val).toLocaleString();
|
|
}
|
|
return 0;
|
|
},
|
|
},
|
|
computed: {
|
|
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 === "周") {
|
|
// console.log(this.period)
|
|
// return [
|
|
// getter.previous[this.factoryId],
|
|
// getter.current[this.factoryId],
|
|
// ];
|
|
// }
|
|
// [100, 200, 200]
|
|
return [
|
|
getter.previous[this.factoryId],
|
|
getter.current[this.factoryId],
|
|
getter.target[this.factoryId],
|
|
];
|
|
},
|
|
|
|
options() {
|
|
const today = new Date().getDate();
|
|
const year = new Date().getFullYear();
|
|
const month = new Date().getMonth() + 1;
|
|
const vt = this.valueTuple;
|
|
let items = [];
|
|
var day1 = new Date();
|
|
var day2 = new Date();
|
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
|
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
//今天的时间
|
|
// var day2 = new Date();
|
|
// day2.setTime(day2.getTime());
|
|
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
|
// const today = new Date().getDate();
|
|
// let yesterday = new Date().getDate() -1;
|
|
// const month = new Date().getMonth() + 1;
|
|
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
|
// const year = new Date().getFullYear();
|
|
if (this.period === '日' && this.than === '同比') {
|
|
items = [
|
|
{ label: `${yesterday}日累计`,},
|
|
{ label: `${year - 1}年${yesterday}累计` },
|
|
{ label: `${yesterday}日目标`, },
|
|
];
|
|
} else if (this.period === '日' && this.than === '环比') {
|
|
items = [
|
|
{ label: `${yesterday}日累计`},
|
|
{ label: `${dayBeYes}日累计` },
|
|
{ label: `${yesterday}日目标`, },
|
|
];
|
|
} else if (this.period === '周' && this.than === '同比') {
|
|
items = [
|
|
{ label: `本周累计`,},
|
|
{ label: `${year-1}年本周累计` },
|
|
{ label: `本周目标`, },
|
|
];
|
|
} else if (this.period === '周' && this.than === '环比') {
|
|
items = [
|
|
{ label: `本周累计`,},
|
|
{ label: `上周累计`, },
|
|
{ label: `本周目标`, },
|
|
];
|
|
} else if (this.period === '月' && this.than === '同比') {
|
|
items = [
|
|
{ label: `${month}月累计`,},
|
|
{ label: `${year-1}年${month}月累计`, },
|
|
{ label: `${month}月目标`,},
|
|
];
|
|
} else if (this.period === '月' && this.than === '环比') {
|
|
items = [
|
|
{ label: `${month}月累计`, },
|
|
{ label: `${lastMonth}月累计`,},
|
|
{ label: `${month}月目标`, },
|
|
];
|
|
} else {
|
|
items = [
|
|
{ label: `${year}年累计`, },
|
|
{ label: `${year - 1}年累计` },
|
|
{ label: `${year}年目标` },
|
|
];
|
|
}
|
|
let titleValue =
|
|
vt[1] != null && (vt[2] !== 0 && vt[2] !== undefined)
|
|
? this.formatNumber((vt[1] / vt[2] * 100)) + '%'
|
|
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0
|
|
? "100%" : '0%',
|
|
subtitle =
|
|
this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
|
|
console.log('titleValue', items)
|
|
let titleSize = fontSize(0.35)
|
|
let subtitleSize = fontSize(0.14)
|
|
|
|
// console.log(this.valueTuple[2]- this.valueTuple[1])
|
|
return getOptions({
|
|
titleValue,
|
|
subtitle,
|
|
titleSize,
|
|
subtitleSize,
|
|
currentName: items[0].label,
|
|
preName: items[1].label,
|
|
previousSum: this.valueTuple[0],
|
|
currentSum: this.valueTuple[1],
|
|
targetSum: this.valueTuple[2] ? this.valueTuple[2] :0,
|
|
});
|
|
},
|
|
|
|
legendItems() {
|
|
return calculateItems(this.period, this.valueTuple,this.than);
|
|
},
|
|
},
|
|
watch: {
|
|
isFullscreen(val) {
|
|
// this.actualOptions.series.map((item) => {
|
|
// item.barWidth = val ? 18 : 12;
|
|
// });
|
|
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
|
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
|
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
|
this.initOptions(this.options)
|
|
},
|
|
legendItems() {
|
|
this.initOptions(this.options);
|
|
},
|
|
},
|
|
mounted() {
|
|
this.initOptions(this.options);
|
|
if (screenfull.isEnabled) {
|
|
screenfull.on("change", () => {
|
|
this.isFullscreen = screenfull.isFullscreen;
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
formatNumber(num) {
|
|
// 判断是否为整数
|
|
if (Number.isInteger(num)) {
|
|
return num; // 如果是整数，直接转换为字符串
|
|
} else {
|
|
// 如果不是整数，保留两位小数并转换为字符串
|
|
return num.toFixed(2);
|
|
}
|
|
}
|
|
// fullscreen mixin 需要的回调
|
|
// fullscreenCallback(isFullscreen) {
|
|
// console.log("isFullscreen--->", isFullscreen);
|
|
// },
|
|
},
|
|
};
|
|
function fontSize(res){
|
|
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
if (!clientWidth) return;
|
|
let fontSize = 100 * (clientWidth / 1920);
|
|
return res * fontSize;
|
|
}
|
|
function calculateItems(period, valueTuple, than) {
|
|
console.log('valueTuple', valueTuple);
|
|
let items = [];
|
|
var day1 = new Date();
|
|
var day2 = new Date();
|
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
|
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
|
|
//今天的时间
|
|
// var day2 = new Date();
|
|
// day2.setTime(day2.getTime());
|
|
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
|
const today = new Date().getDate();
|
|
// let yesterday = new Date().getDate() -1;
|
|
const month = new Date().getMonth() + 1;
|
|
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 -1;
|
|
const year = new Date().getFullYear();
|
|
if (period === '日' && than === '同比') {
|
|
items = [
|
|
{ label: `${year - 1}年${yesterday}累计`, value: valueTuple[0] },
|
|
{ label: `${yesterday}累计`, value: valueTuple[1] },
|
|
{ label: `${yesterday}日目标`, value: valueTuple[2] },
|
|
];
|
|
} else if (period === '日' && than === '环比') {
|
|
items = [
|
|
{ label: `${dayBeYes}日累计`, value: valueTuple[0] },
|
|
{ label: `${yesterday}日累计`, value: valueTuple[1] },
|
|
{ label: `${yesterday}日目标`, value: valueTuple[2] },
|
|
];
|
|
} else if (period === '周' && than === '同比') {
|
|
items = [
|
|
{ label: `${year-1}年本周累计`, value: valueTuple[0] },
|
|
{ label: `本周累计`, value: valueTuple[1] },
|
|
{ label: `本周目标`, value: valueTuple[2] },
|
|
];
|
|
} else if (period === '周' && than === '环比') {
|
|
items = [
|
|
{ label: `上周累计`, value: valueTuple[0] },
|
|
{ label: `本周累计`, value: valueTuple[1] },
|
|
{ label: `本周目标`, value: valueTuple[2] },
|
|
];
|
|
} else if (period === '月' && than === '同比') {
|
|
items = [
|
|
{ label: `${year-1}年${month}月累计`, value: valueTuple[0] },
|
|
{ label: `${month}月累计`, value: valueTuple[1] },
|
|
{ label: `${month}月目标`, value: valueTuple[2] },
|
|
];
|
|
} else if (period === '月' && than === '环比') {
|
|
items = [
|
|
{ label: `${lastMonth}月累计`, value: valueTuple[0] },
|
|
{ label: `${month}月累计`, value: valueTuple[1] },
|
|
{ label: `${month}月目标`, value: valueTuple[2] },
|
|
];
|
|
} else {
|
|
items = [
|
|
{ label: `${year - 1}年累计`, value: valueTuple[0] },
|
|
{ label: `${year}年累计`, value: valueTuple[1] },
|
|
{ label: `${year}年目标`, value: valueTuple[2] },
|
|
];
|
|
}
|
|
// switch (period) {
|
|
// case "年":
|
|
// items = [
|
|
// { label: `${year}年累计`, value: valueTuple[1] },
|
|
// { label: `${year - 1}年累计`, value: valueTuple[0] },
|
|
// { label: `${year}年目标`, value: valueTuple[2] },
|
|
// ];
|
|
// break;
|
|
// }
|
|
return items;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.double-ring-chart {
|
|
height: 98%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.double-ring-chart__container {
|
|
flex:1 1 auto;
|
|
padding: 0 10%;
|
|
/* margin: 10%; */
|
|
/* min-width: 300px; */
|
|
align-self: stretch;
|
|
height: 0;
|
|
}
|
|
|
|
.double-ring-chart__legend {
|
|
/* padding: 12px; */
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
/* font-size:16px; */
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|