322 lines
11 KiB
Vue
322 lines
11 KiB
Vue
<!--
|
|
filename: ChipRateItem.vue
|
|
author: liubin
|
|
date: 2024-04-29 14:25:18
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<div class="chip-rate-item">
|
|
<div class="cities">
|
|
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
|
|
</div>
|
|
<!-- <div style="flex:1;padding: 0 20%;"> -->
|
|
<div class="chart" ref="chart"></div>
|
|
<!-- </div> -->
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CopilotButtons from "@/views/copilot/components/select.vue";
|
|
import chartMixin from "@/mixins/chart.js";
|
|
import fullscreenMixin from "@/mixins/fullscreen.js";
|
|
import getOptions from "../../../options/chipOptions.js";
|
|
import { mapGetters } from "vuex";
|
|
|
|
export default {
|
|
name: "ChipRateItem",
|
|
components: { CopilotButtons },
|
|
mixins: [chartMixin, fullscreenMixin],
|
|
props: {
|
|
cities: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
color: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
period: {
|
|
type: String,
|
|
default: "日",
|
|
},
|
|
than: {
|
|
type: String,
|
|
default: '同比',
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
factoryId: 0,
|
|
count: 1,
|
|
};
|
|
},
|
|
computed: {
|
|
chipRate() {
|
|
return this.$store.getters.copilot.efficiency.chipRate;
|
|
},
|
|
valueTuple() {
|
|
const getter = this.chipRate;
|
|
// console.log(getter)
|
|
if (this.period === "日" || this.period === "周") {
|
|
return [
|
|
getter.previous[this.factoryId],
|
|
getter.current[this.factoryId],
|
|
0,
|
|
];
|
|
}
|
|
// [100, 200, 200]
|
|
return [
|
|
getter.previous[this.factoryId],
|
|
getter.current[this.factoryId],
|
|
getter.target[this.factoryId],
|
|
];
|
|
},
|
|
options() {
|
|
// const single = this.period === "日" || this.period === "周";
|
|
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();
|
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.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: `${month}月${today}日良率`, },
|
|
{ label: `去年${month}月${today}日良率` },
|
|
];
|
|
} else if (this.period === '日' && this.than === '环比') {
|
|
items = [
|
|
{ label: `${month}月${today}日良率` },
|
|
{ label: `${yesterday}日良率` },
|
|
];
|
|
} else if (this.period === '周' && this.than === '同比') {
|
|
items = [
|
|
{ label: `本周良率`, },
|
|
{ label: `去年本周良率` },
|
|
];
|
|
} else if (this.period === '周' && this.than === '环比') {
|
|
items = [
|
|
{ label: `本周良率`, },
|
|
{ label: `上周良率`, },
|
|
];
|
|
} else if (this.period === '月' && this.than === '同比') {
|
|
items = [
|
|
{ label: `${month}月良率`, },
|
|
{ label: `去年${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 ? 0 + '%' : this.formatNumber(vt[1]) + '%',
|
|
subtitle = {
|
|
日: "本日良率",
|
|
周: "本周良率",
|
|
月: `${month}月良率`,
|
|
年: `${year}良率`,
|
|
}[this.period];
|
|
|
|
const t = getOptions({
|
|
// single,
|
|
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
|
|
titleValue,
|
|
subtitle,
|
|
currentName: items[0].label,
|
|
preName: items[1].label,
|
|
previousSum: vt[0],
|
|
currentSum: vt[1],
|
|
targetSum: vt[2],
|
|
});
|
|
return t;
|
|
},
|
|
legend() {
|
|
let items = [];
|
|
var day1 = new Date();
|
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.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: `去年${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 === '环比') {
|
|
items = [
|
|
{ label: `${yesterday}日良率`, 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 === '同比') {
|
|
items = [
|
|
{ label: `去年本周良率`, 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])) + "%" },
|
|
|
|
];
|
|
} else if (this.period === '周' && this.than === '环比') {
|
|
items = [
|
|
{ label: `上周良率`, 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])) + "%" },
|
|
];
|
|
} 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: `${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])) + "%" },
|
|
];
|
|
} 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])) + "%" },
|
|
];
|
|
} else {
|
|
items = [
|
|
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
|
|
{ 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])) + "%" },
|
|
];
|
|
}
|
|
return items
|
|
// [
|
|
// {
|
|
// label:
|
|
// this.period == "月"
|
|
// ? `${year - 1}年${month}月良率`
|
|
// : `${year - 1}年良率`,
|
|
// value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
|
|
// },
|
|
// {
|
|
// label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
|
|
// value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
|
|
// },
|
|
// ];
|
|
},
|
|
},
|
|
mounted() {
|
|
this.initOptions(this.options);
|
|
},
|
|
watch: {
|
|
period() {
|
|
console.log(this.$store.getters.copilot.efficiency)
|
|
this.initOptions(this.options);
|
|
},
|
|
factoryId() {
|
|
this.initOptions(this.options);
|
|
},
|
|
chipRate() {
|
|
this.initOptions(this.options);
|
|
},
|
|
},
|
|
methods: {
|
|
formatNumber(num) {
|
|
// 判断是否为整数
|
|
if (Number.isInteger(num)) {
|
|
return num; // 如果是整数，直接转换为字符串
|
|
} else {
|
|
// 如果不是整数，保留两位小数并转换为字符串
|
|
return num.toFixed(2);
|
|
}
|
|
},
|
|
handleCityUpdate(id) {
|
|
this.factoryId = id;
|
|
},
|
|
fullscreenCallback(isFullscreen) {},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.chip-rate-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
backdrop-filter: blur(24px);
|
|
.cities {
|
|
height: 40px;
|
|
}
|
|
|
|
.chart {
|
|
// margin-left: 5%;
|
|
// width: 290px;
|
|
flex: 1 1 auto;
|
|
padding: 0 15%;
|
|
/* margin: 10%; */
|
|
/* min-width: 300px; */
|
|
align-self: stretch;
|
|
}
|
|
.legend {
|
|
height: 80px;
|
|
display: flex;
|
|
gap: 40px;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 3px;
|
|
|
|
&:first-child {
|
|
.legend-item__value {
|
|
color: #0e61f5;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
.legend-item__value {
|
|
color: #0fd5d1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.legend-item__value {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
</style>
|
|
|