283 lines
8.5 KiB
Vue
283 lines
8.5 KiB
Vue
|
<!--
|
||
|
|
* @Author: zhp
|
||
|
|
* @Date: 2024-05-29 14:48:06
|
||
|
|
* @LastEditTime: 2024-05-29 14:58:51
|
||
|
|
* @LastEditors: zhp
|
||
|
|
* @Description:
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<BarChartBase
|
||
|
|
:legend="legend"
|
||
|
|
:series="series"
|
||
|
|
:xAxis="xAxis"
|
||
|
|
in="chipOEE"
|
||
|
|
class="chip-oee"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
|
||
|
|
export default {
|
||
|
|
name: "ChipOEE",
|
||
|
|
components: { BarChartBase },
|
||
|
|
props: {
|
||
|
|
period: {
|
||
|
|
type: Number,
|
||
|
|
default:1,
|
||
|
|
},
|
||
|
|
than: {
|
||
|
|
type: String,
|
||
|
|
default: "同比",
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default:{}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
// 城市数组的顺序必须是固定的
|
||
|
|
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
||
|
|
return {
|
||
|
|
xAxis: cities,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
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 === 1 && this.than === '同比') {
|
||
|
|
items = [
|
||
|
|
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||
|
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||
|
|
];
|
||
|
|
} else if (this.period ===1 && this.than === '环比') {
|
||
|
|
items = [
|
||
|
|
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||
|
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||
|
|
];
|
||
|
|
} else if (this.period === 2 && this.than === '同比') {
|
||
|
|
items = [
|
||
|
|
{ label: `去年本周`, color: "#12f7f1" },
|
||
|
|
{ label: `本周`, color: "#58adfa" },
|
||
|
|
];
|
||
|
|
} else if (this.period === 2 && this.than === '环比') {
|
||
|
|
items = [
|
||
|
|
{ label: `上周`, color: "#12f7f1" },
|
||
|
|
{ label: `本周`, color: "#58adfa" },
|
||
|
|
];
|
||
|
|
} else if (this.period === 3 && this.than === '同比') {
|
||
|
|
items = [
|
||
|
|
{ label: `去年${month}月`, color: "#12f7f1" },
|
||
|
|
{ label: `${month}月`, color: "#58adfa" },
|
||
|
|
{ label: `${month}月目标`, color: "#58adfa" },
|
||
|
|
// { label: `${month}月目标`, value: valueTuple[2] },
|
||
|
|
];
|
||
|
|
} else if (this.period === 3 && this.than === '环比') {
|
||
|
|
items = [
|
||
|
|
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||
|
|
{ label: `${month}月`, color: "#58adfa" },
|
||
|
|
{ label: `${month}月目标`, color: "#58adfa" },
|
||
|
|
// { label: `${month}月目标`, value: valueTuple[2] },
|
||
|
|
];
|
||
|
|
} else {
|
||
|
|
items = [
|
||
|
|
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||
|
|
{ label: `${year}年`, color: "#58adfa" },
|
||
|
|
{ label: `${year}年`, color: "#58adfa" },
|
||
|
|
|
||
|
|
// { label: `${year}年目标`, value: valueTuple[2] },
|
||
|
|
];
|
||
|
|
}
|
||
|
|
return items
|
||
|
|
// switch (this.period) {
|
||
|
|
// case "日":
|
||
|
|
// return [{ label: "昨日", color: "#12f7f1" }];
|
||
|
|
// case "周":
|
||
|
|
// return [{ label: "本周", color: "#12f7f1" }];
|
||
|
|
// case "月": {
|
||
|
|
// const year = new Date().getFullYear();
|
||
|
|
// const month = new Date().getMonth() + 1;
|
||
|
|
// return [
|
||
|
|
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||
|
|
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||
|
|
// ];
|
||
|
|
// }
|
||
|
|
// case "年": {
|
||
|
|
// const year = new Date().getFullYear();
|
||
|
|
// return [
|
||
|
|
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||
|
|
// { label: `${year}年`, color: "#58adfa" },
|
||
|
|
// ];
|
||
|
|
// }
|
||
|
|
// default:
|
||
|
|
// return [
|
||
|
|
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||
|
|
// { label: `${year}年`, color: "#58adfa" },
|
||
|
|
// ];
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
// chipOeeRate() {
|
||
|
|
// return this.$store.getters.copilot.efficiency.chipOeeRate
|
||
|
|
// },
|
||
|
|
series() {
|
||
|
|
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
|
||
|
|
const chipOeeRate = this.chipOeeRate
|
||
|
|
// console.log('chipOee', chipOeeRate)
|
||
|
|
let dataList = null
|
||
|
|
switch (this.period) {
|
||
|
|
case 1:
|
||
|
|
dataList = [];
|
||
|
|
dataList[0] = chipOeeRate?.previous;
|
||
|
|
dataList[1] = chipOeeRate?.current;
|
||
|
|
case 2:
|
||
|
|
dataList = [];
|
||
|
|
dataList[0] = chipOeeRate?.previous;
|
||
|
|
dataList[1] = chipOeeRate?.current;
|
||
|
|
default:
|
||
|
|
dataList = [];
|
||
|
|
dataList[0] = chipOeeRate?.previous;
|
||
|
|
dataList[1] = chipOeeRate?.current
|
||
|
|
dataList[2] = chipOeeRate?.target
|
||
|
|
}
|
||
|
|
console.log(dataList)
|
||
|
|
return getTemplate(this.period, dataList,this.than);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {},
|
||
|
|
};
|
||
|
|
|
||
|
|
function getTemplate(period, dataList, than) {
|
||
|
|
// console.log('dataList',dataList);
|
||
|
|
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 (period === 1 && than === '同比') {
|
||
|
|
items = [
|
||
|
|
{
|
||
|
|
name: `去年${month}月${today}日`,
|
||
|
|
data: dataList ? dataList[0] : [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `${month}月${today}日`,
|
||
|
|
data: dataList ? dataList[1] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
} else if (period ===1 && than === '环比') {
|
||
|
|
items = [
|
||
|
|
{
|
||
|
|
name: `${yesterday}日`,
|
||
|
|
data: dataList ? dataList[0] : [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `${month}月${today}日`,
|
||
|
|
data: dataList ? dataList[1] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
} else if (period === 2 && than === '同比') {
|
||
|
|
items = [
|
||
|
|
{
|
||
|
|
name: `去年本周`,
|
||
|
|
data: dataList ? dataList[0] : [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `本周`,
|
||
|
|
data: dataList ? dataList[1] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
} else if (period === 2&& than === '环比') {
|
||
|
|
items = [
|
||
|
|
{
|
||
|
|
name: `上周`,
|
||
|
|
data: dataList ? dataList[0] : [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `本周`,
|
||
|
|
data: dataList ? dataList[1] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
} else if (period === 3 && than === '同比') {
|
||
|
|
items = [
|
||
|
|
{
|
||
|
|
name: `去年${month}月`,
|
||
|
|
data: dataList ? dataList[0] : [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `${month}月`,
|
||
|
|
data: dataList ? dataList[1] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `${month}目标`,
|
||
|
|
data: dataList ? dataList[2] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
} else if (period === 3 && than === '环比') {
|
||
|
|
items = [
|
||
|
|
{
|
||
|
|
name: `${lastMonth}月`,
|
||
|
|
data: dataList ? dataList[0] : [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `${month}月`,
|
||
|
|
data: dataList ? dataList[1] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `${month}目标`,
|
||
|
|
data: dataList ? dataList[2] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
} else {
|
||
|
|
items = [
|
||
|
|
{
|
||
|
|
name: `${year - 1}年`,
|
||
|
|
data: dataList ? dataList[0] : [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `${year}年`,
|
||
|
|
data: dataList ? dataList[1] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: `${year}目标`,
|
||
|
|
data: dataList ? dataList[2] : [],
|
||
|
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
}
|
||
|
|
return items
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
|
||
|
|
</style>
|