mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

产量和效率

Browse Source
This commit is contained in:
‘937886381’
2024-05-29 17:05:55 +08:00
parent 5c05e6c2e4 ab4d7a8e4b
commit dc1667cdb7
83 changed files with 17006 additions and 10610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
src/views/copilot/efficiency/components/ChipOee.vue
View File

@@ -25,6 +25,14 @@ export default {
type: String,
default: "日",
},
than: {
type: String,
default: "同比",
},
chipOeeRate: {
type: Object,
default:{}
}
},
data() {
// 城市数组的顺序必须是固定的
@@ -35,78 +43,236 @@ export default {
},
computed: {
legend() {
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" },
];
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}日`, color: "#12f7f1" },
{ label: `${month}月${today}日`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}日`, color: "#12f7f1" },
{ label: `${month}月${today}日`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `去年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `去年${month}月`, color: "#12f7f1" },
{ label: `${month}月`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else if (this.period === '月' && 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 { chipOee } = this.$store.getters.copilot.efficiency;
let dataList = null;
const chipOeeRate = this.chipOeeRate
// console.log('chipOee', chipOeeRate)
let dataList = null
switch (this.period) {
case "日":
case "周":
dataList = chipOee?.current;
case "周":
dataList = chipOee?.current;
break;
default:
dataList = [];
dataList[0] = chipOee?.previous;
dataList[1] = chipOee?.current;
dataList[0] = chipOeeRate?.previous;
dataList[1] = chipOeeRate?.current;
case "周":
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);
console.log(dataList)
return getTemplate(this.period, dataList,this.than);
},
},
methods: {},
};
function getTemplate(period, dataList) {
const year = new Date().getFullYear();
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;
// console.log('11111', dataList);
return period == "日" || period == "周"
? [
{
name: period == "日" ? "昨日" : "本周",
data: dataList ?? [],
},
]
: [
{
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
data: dataList ? dataList[0] : [],
},
{
name: period == "年" ? `${year}年` : `${year}年${month}月`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
const year = new Date().getFullYear();
if (period === '日' && 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 === '日' && 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 === '周' && than === '同比') {
items = [
{
name: `去年本周`,
data: dataList ? dataList[0] : [],
},
{
name: `本周`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
},
{
name: `本周`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && 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 === '月' && 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>

27
src/views/copilot/efficiency/components/ChipRate.vue
View File

@@ -1,22 +1,15 @@
<!--
filename: ChipRate.vue
author: liubin
date: 2024-04-29 08:50:54
description: 芯片良率
<!--
* @Author: zhp
* @Date: 2024-05-10 11:10:54
* @LastEditTime: 2024-05-29 09:09:43
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="chip-rate">
<ChipRateItem
:period="period"
:cities="['成都', '邯郸', '株洲', '瑞昌']"
:color="1"
/>
<ChipRateItem
:period="period"
:cities="['佳木斯', '凯盛光伏', '蚌埠兴科']"
:color="2"
/>
<ChipRateItem :period="period" :than="than" :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
<ChipRateItem :period="period" :than="than" :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
</div>
</template>
@@ -30,6 +23,10 @@ export default {
type: String,
default: "日",
},
than: {
type: String,
default: '同比',
}
},
data() {
return {};

8
src/views/copilot/efficiency/components/StdRate.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-20 10:04:03
* @LastEditTime: 2024-05-29 16:10:45
* @LastEditors: zhp
* @Description:
-->
@@ -12,7 +12,7 @@
<StdRateItem :period="period" :city="cities[5]" />
</div>
<div class="flex-item" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
<StdRateItem :period="period" :city="item" />
<StdRateItem :period="period" :than="than" :city="item" />
</div>
</div>
</template>
@@ -27,6 +27,10 @@ export default {
type: String,
default: "日",
},
than: {
type: String,
default: "同比",
},
},
computed: {
cities() {

274
src/views/copilot/efficiency/components/TransformRate.vue
View File

@@ -16,7 +16,7 @@
</template>
<script>
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue";
export default {
name: "TransformRate",
components: { BarChartBase },
@@ -25,6 +25,14 @@ export default {
type: String,
default: "日",
},
than: {
type: String,
default: '同比',
},
transformRate: {
type: Object,
default: {}
}
},
data() {
// 城市数组的顺序必须是固定的
@@ -35,75 +43,227 @@ export default {
},
computed: {
legend() {
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" },
];
}
},
series() {
const { transformRate } = this.$store.getters.copilot.efficiency;
let dataList = null;
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}日`, color: "#12f7f1" },
{ label: `${month}月${today}日`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}日`, color: "#12f7f1" },
{ label: `${month}月${today}日`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `去年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `去年${month}月`, color: "#12f7f1" },
{ label: `${month}月`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else if (this.period === '月' && 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
},
// transformRate() {
// return this.$store.getters.copilot.efficiency.transformRate
// },
series() {
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
const transformRate = this.transformRate
// console.log('chipOee', chipOeeRate)
let dataList = null;
switch (this.period) {
case "日":
dataList = [];
dataList[0] = transformRate.previous;
dataList[1] = transformRate.current;
case "周":
dataList = transformRate?.current;
break;
dataList = [];
dataList[0] = transformRate.previous;
dataList[1] = transformRate.current;
default:
dataList = [];
dataList[0] = transformRate?.previous;
dataList[1] = transformRate?.current;
dataList[0] = transformRate.previous;
dataList[1] = transformRate.current
dataList[2] = transformRate.target
}
return getTemplate(this.period, dataList);
console.log('transformRate', dataList)
return getTemplate(this.period, dataList, this.than);
},
// series() {
// const { transformRate } = this.$store.getters.copilot.efficiency;
// let dataList = null;
// switch (this.period) {
// case "日":
// case "周":
// dataList = transformRate?.current;
// break;
// default:
// dataList = [];
// dataList[0] = transformRate?.previous;
// dataList[1] = transformRate?.current;
// }
// return getTemplate(this.period, dataList);
// },
},
methods: {},
};
function getTemplate(period, dataList) {
const year = new Date().getFullYear();
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;
return period == "日" || period == "周"
? [
{
name: period == "日" ? "昨日" : "本周",
data: dataList ?? [],
},
]
: [
{
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
data: dataList ? dataList[0] : [],
},
{
name: period == "年" ? `${year}年` : `${year}年${month}月`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
const year = new Date().getFullYear();
if (period === '日' && 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 === '日' && 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 === '周' && than === '同比') {
items = [
{
name: `去年本周`,
data: dataList ? dataList[0] : [],
},
{
name: `本周`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
},
{
name: `本周`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && 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 === '月' && 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>

111
src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
View File

@@ -1,17 +1,17 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-05-14 08:32:44
* @LastEditTime: 2024-05-29 14:09:08
* @LastEditors: zhp
* @Description:
-->
<template>
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="chart" :style="{ height: '100%',width: width}"></div>
<div ref="oeeChart" style="height:96%;width:100%"></div>
</chart-container>
</template>
@@ -171,6 +171,41 @@ export default {
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#f3c000", // 0% 处的颜色
},
{
offset: 0.55,
color: "#f3c00033",
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
],
},
};
@@ -182,13 +217,7 @@ export default {
},
watch: {
isOpen(val) {
if (val === true) {
this.width = '100%-128px'
this.canvasReset()
} else {
this.watch = 100 + '%'
this.canvasReset()
}
this.canvasReset()
},
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
@@ -198,24 +227,47 @@ export default {
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.initChart(this.actualOptions);
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
// this.canvasReset()
// } else if (val === false && this.isOpen === false) {
// this.width = 100 + '%'
// this.canvasReset()
// }
// 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.initChart(this.actualOptions)
this.canvasReset()
},
series(val) {
if (!val) {
this.initChart(this.options);
return;
}
console.log(val)
// console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
actualOptions.series[1].data = val?.[1]?.data;
actualOptions.series[1].name = val?.[1]?.name;
actualOptions.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
},
},
mounted() {
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
@@ -243,7 +295,7 @@ export default {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.chart);
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions);
},
},
@@ -263,7 +315,7 @@ export default {
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
margin-right: 1.3vw;
&::before {
content: "";
@@ -275,7 +327,34 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}

366
src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue Normal file
View File

@@ -0,0 +1,366 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-05-29 14:25:10
* @LastEditors: zhp
* @Description:
-->
<template>
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:96%;width:100%"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "../../../../components/ChartContainer.vue";
// import chartMixin from "@/mixins/chart.js";
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
export default {
name: "BarChartBase",
components: {
ChartContainer,
},
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 36,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "0%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#f3c000", // 0% 处的颜色
},
{
offset: 0.55,
color: "#f3c00033",
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
],
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
isOpen(val) {
this.canvasReset()
},
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
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;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
// this.canvasReset()
// } else if (val === false && this.isOpen === false) {
// this.width = 100 + '%'
// this.canvasReset()
// }
// 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.initChart(this.actualOptions)
// this.canvasReset()
},
series(val) {
if (!val) {
this.initChart(this.options);
return;
}
console.log(val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
actualOptions.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
},
},
mounted() {
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions);
},
},
};
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right:1.3vw;
&::before {
content: "";
display: inline-block;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
background-color: #58adfa;
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
}
</style>

89
src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
View File

@@ -13,7 +13,7 @@
<!-- <div style="flex:1;padding: 0 20%;"> -->
<div class="chart" ref="chart"></div>
<!-- </div> -->
<div class="legend" v-if="period == '月' || period == '年'">
<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>
@@ -46,6 +46,10 @@ export default {
type: String,
default: "日",
},
than: {
type: String,
default: '同比',
}
},
data() {
return {
@@ -103,21 +107,72 @@ export default {
return t;
},
legend() {
const year = new Date().getFullYear();
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;
return [
{
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) + "%"
},
];
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[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
{ label: `去年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
{ label: `${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
{ label: `去年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
{ label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
{ label: `去年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
{ label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
];
} else {
items = [
{ label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
{ label: `${year}年目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (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() {
@@ -163,7 +218,9 @@ export default {
// width: 290px;
align-self: stretch;
// flex: 1 1 auto;
// padding: 0 10%;
align-items: center;
// margin:0 auto;
// padding: 0 10%;;
/* margin: 10%; */
/* min-width: 300px; */
height: 200px;

65
src/views/copilot/efficiency/components/sub/std/ProgressBar.vue
View File

@@ -6,7 +6,7 @@
-->
<template>
<div class="progress-bar" :data-title="titleYear" :data-rate="number">
<div class="progress-bar" :data-title="title" :data-rate="value + '%'">
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
</div>
</template>
@@ -20,52 +20,25 @@ export default {
type: Number,
default: 0,
},
target: {
type: Number,
default: 0,
},
goodNumber: {
type: Number,
default:0
},
componentYield: {
type: Number,
default:0
},
period: {
type: String,
default:'日',
},
// total: {
// type: Number,
// default: 0,
// },
title: {
type: String,
default: "",
},
city: {
type: String,
default:""
}
},
data() {
return {
number: 0,
titleYear:'',
};
return {};
},
computed: {
dataRate() {
if ((this.period === '年' || this.period === '月') && this.target != 0) {
// console.log(this.componentYield)
this.titleYear = this.title + ' ' + `${(this.target * 100).toFixed(0)}%`
} else {
this.titleYear = this.title
}
this.number = this.value == 0
? "-"
: `${(this.value * 100).toFixed(0)}%`
// console.log(this.period)
return this.value == 0
? "-"
: this.value >1 ? 100 + '%' :`${(this.value * 100).toFixed(0)}%`
: this.value > 1
? 100 + '%'
: `${(parseFloat(this.value)).toFixed(0)}%`;
},
},
methods: {},
@@ -95,7 +68,7 @@ export default {
color: #fff;
position: absolute;
bottom: -200%;
right: 10px;
right: 0;
font-size: 12px;
}
@@ -104,6 +77,7 @@ export default {
color: #11eae3;
}
}
&:nth-child(2) {
&:after {
color: #0e65fd;
@@ -116,17 +90,20 @@ export default {
height: 100%;
width: 0;
border-radius: 4px;
background: linear-gradient(to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3);
}
&:first-child {
.progress-bar__rate {
background: linear-gradient(
to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3
);
background: linear-gradient(to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3);
}
}

113
src/views/copilot/efficiency/components/sub/std/StdRateItem.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-20 09:46:19
* @LastEditTime: 2024-05-29 17:03:00
* @LastEditors: zhp
* @Description:
-->
@@ -11,28 +11,30 @@
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="title" :value="city.current" />
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
<ProgressBar :period="period" :title="titlePre" :value="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 title="24年累计" :total="city.target" :value="city.thisYear" /> -->
<ProgressBar :period="period" :title="titlePre" :value="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="titleEnd" :target="city.target" :value="city.current" />
<ProgressBar :period="period" :title="title" :value="city.previous" />
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
<ProgressBar :period="period" :title="titlePre" :value="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="titleEnd" :target="city.target" :value="city.current" />
<ProgressBar :period="period" :title="title" :value="city.previous" />
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
<ProgressBar :period="period" :title="title" :value="city.current" />
</div>
</div>
</template>
@@ -52,7 +54,11 @@ export default {
period: {
type: String,
default: "日",
}
},
than: {
type: String,
default: "同比",
},
},
data() {
return {
@@ -60,44 +66,65 @@ export default {
};
},
computed: {
title() {
switch (this.period) {
case "日":
return "今日"
case "周":
return "本周"
case "月":
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return `${year - 1}年${month}月累计`
case "年": {
const year = new Date().getFullYear();
// return [
return `${year - 1}年累计`
// ];
}
default:
return "今日"
titlePre() {
console.log(this.city);
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
const today = new Date().getDate();
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 === '同比') {
return `去年${month}月${today}日`
} else if (this.period === '日' && this.than === '环比') {
return `${yesterday}日`
} else if (this.period === '周' && this.than === '同比') {
return `去年本周`
} else if (this.period === '周' && this.than === '环比') {
return `上周`
} else if (this.period === '月' && this.than === '同比') {
return `去年${month}月`
} else if (this.period === '月' && this.than === '环比') {
return `${lastMonth}月`
} else {
return `${year - 1}年`
}
},
titleEnd() {
switch (this.period) {
// case "日":
// return "今日"
// case "周":
// return "本周"
case "月":
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return `${year}年${month}月目标`
case "年": {
const year = new Date().getFullYear();
// return [
return `${year}年目标`
// ];
}
title() {
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
const today = new Date().getDate();
const month = new Date().getMonth() + 1;
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
return `${month}月${today}日`
} else if (this.period === '日' && this.than === '环比') {
return `${month}月${today}日`
} else if (this.period === '周' && this.than === '同比') {
return `本周`
} else if (this.period === '周' && this.than === '环比') {
return `本周`
} else if (this.period === '月' && this.than === '同比') {
return `${month}月`
} else if (this.period === '月' && this.than === '环比') {
return `${month}月`
} else {
return `${year}年`
}
}
},
titleTarget() {
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
const today = new Date().getDate();
const month = new Date().getMonth() + 1;
const year = new Date().getFullYear();
if (this.period === '月') {
return `${month}月目标`
} else if (this.period === '年') {
return `${year}年目标`
}
},
},
};
</script>

38
src/views/copilot/efficiency/index.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:04:53
* @LastEditTime: 2024-05-17 17:05:36
* @LastEditTime: 2024-05-29 14:24:48
* @LastEditors: zhp
* @Description:
-->
@@ -9,16 +9,16 @@
<template>
<div class="efficiency-copilot">
<Container title="芯片良率" icon="chip2">
<ChipRate :period="period" />
<ChipRate :period="period" :than="than" />
</Container>
<Container title="标准组件良率" icon="std">
<StdRate :period="period" />
<StdRate :period="period" :than="than" />
</Container>
<Container title="芯片OEE" icon="chip">
<ChipOee :period="period" />
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
</Container>
<Container title="转化效率" icon="cube">
<TransformRate :period="period" />
<TransformRate :transformRate="transformRate" :period="period" :than="than" />
</Container>
</div>
</template>
@@ -44,25 +44,45 @@ export default {
type: String,
default: "日",
},
than: {
type: String,
default: "同比",
},
},
data() {
return {};
return {
chipOeeRate: {},
transformRate:{}
};
},
watch: {
period: {
handler(val) {
val && this.fetchData(val);
val && this.fetchData(val,this.than);
},
immediate: true,
},
than: {
handler(val) {
console.log(val)
val && this.fetchData(this.period, val);
},
immediate: true,
},
},
methods: {
fetchData(period = "日") {
fetchData(period = "日",than) {
console.log(`效率驾驶舱，获取${period}数据`);
this.$store.dispatch("copilot/initCopilot", {
period,
source: "efficiency",
});
than
}).then(() => {
this.$nextTick(() => {
this.chipOeeRate = this.$store.getters.copilot.efficiency.chipOeeRate
this.transformRate = this.$store.getters.copilot.efficiency.transformRate
})
})
},
},
};

2
src/views/copilot/efficiency/options/double-ring-chart-options.js
View File

@@ -6,7 +6,7 @@ export default ({
targetSum,
}) => ({
grid: {
left: 0,
left: '50%',
right: 0,
bottom: 0,
top: 0,