This commit is contained in:
helloDy 2024-06-17 09:01:58 +08:00
commit e1e39681ce
35 changed files with 4635 additions and 150 deletions

View File

@ -1,7 +1,7 @@
###
# @Author: zhp
# @Date: 2024-04-28 13:42:51
# @LastEditTime: 2024-06-14 08:56:41
# @LastEditTime: 2024-06-17 09:01:32
# @LastEditors: DY
# @Description:
###

BIN
src/assets/images/map.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 MiB

View File

@ -378,10 +378,14 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
transformRate.target[fId] = componentConversionEfficiency
}
// 芯片OEE
chipOeeRate.current[fId] = factory.oee;
if (factory.glassType === 0) {
chipOeeRate.current[fId] = factory.oee;
}
// chipOeeRate.previous[fId] = factory.previousYearOee;
// 转化效率
transformRate.current[fId] = factory.componentConversionEfficiency;
if (factory.glassType === 1) {
transformRate.current[fId] = factory.componentConversionEfficiency;
}
// transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
// 芯片良率 与 标准组件良率
if (![0, 1].includes(factory.glassType)) continue;
@ -448,8 +452,11 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
if (factoryListResponse && factoryListResponse[0] != null) {
for (const factory of factoryListResponse) {
const fId = getFactoryId(factory);
console.log('factory.inputNumber', factory, fId);
if (factory.glassType === 0) {
chipInvest.current[fId] = factory.inputNumber
}
// const preFId = getPreFactoryId(factory);
// 获取目标值
if (targetListResponse) {
const { chipYield, componentYield, bipvProductOutput } =
@ -459,7 +466,6 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
bipvOutput.target[fId] = bipvProductOutput;
}
// 芯片投入
chipInvest.current[fId] = factory.inputNumber;
// 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出
// 因为后端写的垃圾数据,所以这里要做一下判断
@ -467,6 +473,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
_t.current[fId] = factory.outputNumber;
}
console.log('chipInvest',chipInvest);
return {
chipInvest,
// ftoInvest,
@ -475,15 +482,6 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
stdOutput,
bipvOutput,
};
}else{
return {
chipInvest,
// ftoInvest,
ftoInvest,
chipOutput,
stdOutput,
bipvOutput,
}
}
}

View File

@ -47,8 +47,11 @@ export default {
legend() {
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -60,13 +63,13 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year-1}${month}${today}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
@ -96,7 +99,7 @@ export default {
items = [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}目标`, color: "#58adfa" },
// { label: `${year}`, value: valueTuple[2] },
];
@ -163,8 +166,11 @@ function getTemplate(period, dataList, than) {
// console.log('dataList',dataList);
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -177,11 +183,11 @@ function getTemplate(period, dataList, than) {
if (period === '日' && than === '同比') {
items = [
{
name: `${year-1}${month}${today}`,
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}${today}`,
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
@ -189,11 +195,11 @@ function getTemplate(period, dataList, than) {
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}`,
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}${today}`,
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},

View File

@ -47,8 +47,11 @@ export default {
legend() {
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -60,13 +63,13 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year-1}${month}${today}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
@ -96,7 +99,7 @@ export default {
items = [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}目标`, color: "#58adfa" },
// { label: `${year}`, value: valueTuple[2] },
];
@ -154,8 +157,11 @@ function getTemplate(period, dataList,than) {
// console.log('dataList',dataList);
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -168,11 +174,11 @@ function getTemplate(period, dataList,than) {
if (period === '日' && than === '同比') {
items = [
{
name: `${year-1}${month}${today}`,
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}${today}`,
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
@ -180,11 +186,11 @@ function getTemplate(period, dataList,than) {
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}`,
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}${today}`,
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-06-06 15:12:58
* @LastEditTime: 2024-06-14 10:05:37
* @LastEditors: zhp
* @Description:
-->

View File

@ -87,8 +87,11 @@ export default {
const vt = this.valueTuple;
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -100,13 +103,13 @@ export default {
// const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${month}${today}日良率`, },
{ label: `${year-1}${month}${today}日良率` },
{ label: `${yesterday}日良率`, },
{ label: `${year - 1}${yesterday}日良率` },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${month}${today}日良率` },
{ label: `${yesterday}日良率` },
{ label: `${dayBeYes}日良率` },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
@ -139,7 +142,7 @@ export default {
}
let titleValue = vt[1] === null ? 0 + '%' : this.formatNumber(vt[1]) + '%',
subtitle = {
: "日良率",
: "日良率",
: "本周良率",
: `${month}月良率`,
: `${year}良率`,
@ -161,8 +164,11 @@ export default {
legend() {
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -174,13 +180,13 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year-1}${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])) + "%" },
{ label: `${year - 1}${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
{ label: `${yesterday}日良率`, 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])) + "%" },
{ label: `${dayBeYes}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-06-06 15:14:29
* @LastEditTime: 2024-06-14 09:58:01
* @LastEditors: zhp
* @Description:
-->
@ -69,16 +69,19 @@ export default {
titlePre() {
console.log(this.city);
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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()
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 `${year-1}${month}${today}`
return `${year - 1}${yesterday}`
} else if (this.period === '日' && this.than === '环比') {
return `${yesterday}`
return `${dayBeYes}`
} else if (this.period === '周' && this.than === '同比') {
return `${year-1}年本周`
} else if (this.period === '周' && this.than === '环比') {
@ -93,14 +96,18 @@ export default {
},
title() {
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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()
const today = new Date().getDate();
const month = new Date().getMonth() + 1;
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
return `${month}${today}`
return `${yesterday}`
} else if (this.period === '日' && this.than === '环比') {
return `${month}${today}`
return `${yesterday}`
} else if (this.period === '周' && this.than === '同比') {
return `本周`
} else if (this.period === '周' && this.than === '环比') {

View File

@ -36,6 +36,8 @@ export default {
isFullscreen: false,
actualOptions: null,
chart: "",
data: [],
orderXAxis:[],
// obj:{
// seriesArr: [],
// targetProduceArr: [],
@ -50,7 +52,7 @@ export default {
grid: {
left: "7%",
right: "7%",
bottom: "8%",
bottom: "15%",
top: "15%",
},
tooltip: {
@ -66,6 +68,7 @@ export default {
},
},
axisLabel: {
rotate:45,
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
},
@ -191,7 +194,7 @@ export default {
},
watch: {
type(val) {
this.initChart()
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) {
@ -249,79 +252,62 @@ export default {
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
const actualOptions = JSON.parse(JSON.stringify(this.options));
if (this.type === '目标产量') {
let orderXAxis = []
let targetProduceArr = []
this.orderXAxis = []
this.data = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
targetProduceArr.push(ele.targetProduction)
orderXAxis.push(ele.workOrderNumber)
this.data.push(ele.targetProduction)
this.orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = targetProduceArr;
// this.initChart(targetProduceArr, orderXAxis)
} else if (this.type === '计划投入') {
let orderXAxis = []
let planIn = []
this.orderXAxis = []
this.data = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
planIn.push(ele.plannedInvestment)
orderXAxis.push(ele.workOrderNumber)
this.data.push(ele.plannedInvestment)
this.orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = planIn;
} else if (this.type === '实际投入') {
let orderXAxis = []
let acIn = []
this.orderXAxis = []
this.data = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
acIn.push(ele.actualInvestment)
orderXAxis.push(ele.workOrderNumber)
this.data.push(ele.actualInvestment)
this.orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = acIn;
} else if (this.type === '实际产出') {
let orderXAxis = []
let acProduceArr = []
this.orderXAxis = []
this.data = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
acProduceArr.push(ele.actualProduction)
orderXAxis.push(ele.workOrderNumber)
this.data.push(ele.actualProduction)
this.orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = acProduceArr;
} else if (this.type === '废品数量') {
let orderXAxis = []
let scrapNum = []
this.orderXAxis = []
this.data = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
scrapNum.push(ele.wasteNum)
orderXAxis.push(ele.workOrderNumber)
this.data.push(ele.wasteNum)
this.orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = scrapNum;
} else if (this.type === '待再加工') {
let orderXAxis = []
let processNum = []
this.orderXAxis = []
this.data = []
if (this.energyCockpits) {
this.energyCockpits.forEach(ele => {
console.log(ele.reworkNum);
processNum.push(ele.reworkNum)
orderXAxis.push(ele.workOrderNumber)
this.data.push(ele.reworkNum)
this.orderXAxis.push(ele.workOrderNumber)
});
}
actualOptions.xAxis.data = orderXAxis;
actualOptions.series[0].data = processNum;
}
// let seriesArr = [
@ -370,6 +356,13 @@ export default {
// actualOptions.series[1].name = seriesArr[1].name;
// actualOptions.series[2].data = seriesArr[2].data;
// actualOptions.series[2].name = seriesArr[2].name;
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.xAxis.data = this.orderXAxis;
actualOptions.series[0].data = this.data;
this.actualOptions = actualOptions;
this.chart.setOption(actualOptions);
},

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-29 14:48:06
* @LastEditTime: 2024-06-07 09:30:17
* @LastEditTime: 2024-06-07 14:11:01
* @LastEditors: zhp
* @Description:
-->
@ -49,7 +49,7 @@ export default {
computed: {
xAxis() {
console.log(' this.companyId', this.companyId);
return this.companyId === 0 ? ["fto投入", "芯片产量", "标准组件产量"] : ["fto投入", "芯片产量", "标准组件产量", 'BIPV产量'];
return this.companyId === 0 ? ["FTO投入", "芯片产量", "标准组件产量"] : ["FTO投入", "芯片产量", "标准组件产量", 'BIPV产量'];
},
legend() {
let items = [];

View File

@ -9,7 +9,7 @@
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container>
<left-container title="工单监控" icon="order">
<order :prodOrder="prodOrder" />
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
</left-container>
<!-- <db-container title="" icon="store"> -->
<!-- <store :stock="stock" /> -->
@ -47,6 +47,7 @@ export default {
},
data() {
return {
type: '目标产量',
companyId: 1,
companyName: "邯郸中建材光电材料有限公司",
period: 1,
@ -75,6 +76,10 @@ export default {
this.getMes();
},
methods: {
updateType(val) {
console.log(val)
this.type = val
},
updateCompany(obj) {
this.companyId = obj.companyId;
this.companyName = obj.companyName;

View File

@ -45,8 +45,11 @@ export default {
legend() {
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -58,13 +61,13 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year-1}${month}${today}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
@ -149,8 +152,11 @@ export default {
function getTemplate(period, dataList,than) {
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -163,11 +169,11 @@ function getTemplate(period, dataList,than) {
if (period === '日' && than === '同比') {
items = [
{
name: `${year-1}${month}${today}`,
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}${today}`,
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
@ -175,11 +181,11 @@ function getTemplate(period, dataList,than) {
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}`,
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}${today}`,
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},

View File

@ -45,8 +45,11 @@ export default {
legend() {
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -58,13 +61,13 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year-1}${month}${today}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
@ -150,9 +153,15 @@ export default {
function getTemplate(period, dataList,than) {
let items = [];
// var day1 = new Date();
// day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
// var yesterday = (day1.getMonth() + 1) + "" + day1.getDate()
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -165,11 +174,11 @@ function getTemplate(period, dataList,than) {
if (period === '日' && than === '同比') {
items = [
{
name: `${year-1}${month}${today}`,
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}${today}`,
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
@ -177,11 +186,11 @@ function getTemplate(period, dataList,than) {
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}`,
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}${today}`,
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-06-06 08:42:04
* @LastEditTime: 2024-06-14 09:44:42
* @LastEditors: zhp
* @Description:
-->
@ -78,13 +78,13 @@ export default {
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],
];
}
// 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],
@ -100,8 +100,11 @@ export default {
const vt = this.valueTuple;
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -113,14 +116,14 @@ export default {
// const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${month}${today}日累计`,},
{ label: `${year-1}${month}${today}累计` },
{ label: `${yesterday}日累计`,},
{ label: `${year - 1}${yesterday}累计` },
{ label: `${month}${today}日目标`, },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${month}${today}日累计`},
{ label: `${yesterday}日累计` },
{ label: `${yesterday}日累计`},
{ label: `${dayBeYes}日累计` },
{ label: `${month}${today}日目标`, },
];
} else if (this.period === '周' && this.than === '同比') {
@ -160,9 +163,9 @@ export default {
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0
? "100%" : '0%',
subtitle =
this.period == "日" ? `${month}${today}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
console.log(this.valueTuple[2]- this.valueTuple[1])
this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
console.log('titleValue', items)
// console.log(this.valueTuple[2]- this.valueTuple[1])
return getOptions({
titleValue,
subtitle,
@ -221,8 +224,12 @@ function calculateItems(period, valueTuple, than) {
console.log('valueTuple', valueTuple);
let items = [];
var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
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());
@ -234,14 +241,14 @@ function calculateItems(period, valueTuple, than) {
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{ label: `${year-1}${month}${today}累计`, value: valueTuple[0] },
{ label: `${month}${today}累计`, value: valueTuple[1] },
{ label: `${year - 1}${yesterday}累计`, value: valueTuple[0] },
{ label: `${yesterday}累计`, value: valueTuple[1] },
{ label: `${month}${today}日目标`, value: valueTuple[2] },
];
} else if (period === '日' && than === '环比') {
items = [
{ label: `${yesterday}日累计`, value: valueTuple[0] },
{ label: `${month}${today}日累计`, value: valueTuple[1] },
{ label: `${dayBeYes}日累计`, value: valueTuple[0] },
{ label: `${yesterday}日累计`, value: valueTuple[1] },
{ label: `${month}${today}日目标`, value: valueTuple[2] },
];
} else if (period === '周' && than === '同比') {

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-05 14:12:31
* @LastEditTime: 2024-06-14 09:03:26
* @LastEditors: zhp
* @Description:
-->
@ -221,6 +221,7 @@ export default {
};
},
actualOptions() {
console.log('this.output.current / this.output.target', this.output.current/this.output.target);
const year = new Date().getFullYear()
const options = JSON.parse(JSON.stringify(this.options));
// console.log('options', options);
@ -228,7 +229,7 @@ export default {
if (!this.output.target) options.title.text = "0%";
else
options.title.text =
(this.output.current / this.output.target) * 100 + "%";
((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
//
if (
this.output.current == this.output.target &&

View File

@ -59,7 +59,7 @@ export default {
actualOptions: null,
options: {
grid: {
left: "3%",
left: "5%",
right: "4%",
bottom: "0",
top: "15%",

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-04 15:35:54
* @LastEditTime: 2024-06-14 09:16:09
* @LastEditors: zhp
* @Description:
-->
@ -65,7 +65,7 @@ export default {
isFullscreen: false,
options: {
grid: {
left: "3%",
left: "5%",
right: "4%",
bottom: "0",
top: "18%",

View File

@ -10,7 +10,7 @@
style="
position: absolute;
top: 12%;
left: 20%;
left: 15%;
user-select: none;
display: flex;
flex-direction: column;
@ -31,7 +31,7 @@
<p
style="
margin: 0;
font-size: 26px;
font-size: 24px;
letter-spacing: 1px;
color: #26b9de;
opacity: 75%;
@ -52,8 +52,8 @@
</p>
</div>
<img
src="../assets/images/login.png"
style="position: absolute; top: 30%; left: 15%; width: 40vw"
src="../assets/images/map.png"
style="position: absolute; top: 00%; left: 11%; width: 50vw"
alt=""
/>
</div>

View File

@ -0,0 +1,253 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">芯片OEE对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "ChipOEEBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
series: [
{
name: "2024年4月目标值",
data: [
{ name: "%", value: 85 },
{ name: "%", value: 85 },
{ name: "%", value: 85 },
],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [
{ name: "%", value: 57.5 },
{ name: "%", value: 21.66 },
{ name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [
{ name: "%", value: 23.33 },
{ name: "%", value: 7.02 },
{ name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "chipOEEBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "ChipOEEBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "ChipOEEBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ChipOEEBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,244 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">芯片产量对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "ChipOutputBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
series: [
{
name: "2024年4月目标值",
// data: [3000, 2000, 3000],
// data: [6800, 5000, 8900],
// data: [12000, 17000, 19000],
data: [560000, 540000, 600000],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2023年4月",
// data: [2100, 800, 1500],
// data: [9500, 7200, 9901],
// data: [14666, 15000, 17888],
data: [550000, 456666, 590000],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
// position: [-10, -16],
position: [-17, -16],
color: "#68C483",
},
},
{
name: "2024年4月",
// data: [2100, 900, 1300],
// data: [9100, 7300, 9700],
// data: [14666, 15300, 18000],
data: [556666, 456666, 650000],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
},
chartId: "chipOutputBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "ChipOutputBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "ChipOutputBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ChipOutputBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,244 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">芯片人均产量对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "ChipPerCapitaBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
series: [
{
name: "2024年4月目标值",
// data: [3000, 2000, 3000],
// data: [6800, 5000, 8900],
// data: [12000, 17000, 19000],
data: [560000, 540000, 600000],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2023年4月",
// data: [2100, 800, 1500],
// data: [9500, 7200, 9901],
// data: [14666, 15000, 17888],
data: [550000, 456666, 590000],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
// position: [-10, -16],
position: [-17, -16],
color: "#68C483",
},
},
{
name: "2024年4月",
// data: [2100, 900, 1300],
// data: [9100, 7300, 9700],
// data: [14666, 15300, 18000],
data: [556666, 456666, 650000],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
},
chartId: "chipPerCapitaBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "ChipPerCapitaBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "ChipPerCapitaBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ChipPerCapitaBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,253 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">芯片良率对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "ChipYieldBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
series: [
{
name: "2024年4月目标值",
data: [
{ name: "%", value: 85 },
{ name: "%", value: 85 },
{ name: "%", value: 85 },
],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [
{ name: "%", value: 57.5 },
{ name: "%", value: 21.66 },
{ name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [
{ name: "%", value: 23.33 },
{ name: "%", value: 7.02 },
{ name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "chipYieldBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "ChipYieldBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "ChipYieldBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ChipYieldBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,213 @@
<template>
<div>
<!-- 暂无数据 -->
<div
class="no-data-bg"
style="position: relative; left: 50%; transform: translateX(-50%)"
v-show="this.chartMsg.series.length === 0"
></div>
<!-- 图例 -->
<div v-show="this.chartMsg.series.length > 0">
<div class="legend">
<span class="item" v-for="item in legendList" :key="item.id">
<span
v-if="item.type === 1"
class="block"
:style="{ backgroundColor: item.color }"
></span>
<span
v-if="item.type === 2"
class="line"
:style="{ backgroundColor: item.color }"
>
<span
class="line-block"
:style="{ backgroundColor: item.color }"
></span>
</span>
{{ item.name }}</span
>
</div>
<div
:id="chartId"
:style="{ width: '100%', height: chartHeight + 'px' }"
></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { debounce } from "@/utils/debounce";
export default {
name: "bmLineBar",
data() {
return {
myChart: "",
option: {
color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: {
left: 100,
right: 10,
bottom: 30,
top: 30,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
formatter: function (params) {
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${
params[i].name === "%"
? (params[i].value ? params[i].value.toFixed(2) : 0.0) +
params[i].name
: params[i].value
}</span>`;
}
return res;
},
},
xAxis: {
type: "category",
data: [],
axisTick: {
show: false,
},
axisPointer: {
type: "shadow",
},
},
yAxis: {
type: "value",
name: "",
nameTextStyle: {
fontSize: 12,
align: "right",
},
axisLabel: {},
},
series: [],
},
};
},
props: {
chartHeight: {
type: Number,
default: 300,
},
legendList: {
type: Array,
default: () => [],
},
chartMsg: {
type: Object,
default: () => {},
},
chartId: {
type: String,
default: "bmChart",
},
chartNum: {
type: Number,
default: 1,
},
},
watch: {
chartHeight: {
handler(newVal) {
this.chartHeight = newVal;
},
},
chartNum(val) {
this.canvasReset();
},
chartMsg: {
handler(newVal) {
this.canvasReset();
},
deep: true,
},
},
mounted() {
this.canvasReset();
},
methods: {
canvasReset() {
debounce(() => {
this.getMes();
}, 500)();
},
getMes() {
if (this.myChart) {
this.myChart.dispose();
}
var chartDom = document.getElementById(this.chartId);
this.myChart = echarts.init(chartDom);
this.option.color = this.chartMsg.color;
this.option.xAxis.data = this.chartMsg.xData;
this.option.yAxis.name = this.chartMsg.yName;
if (
this.chartMsg.series.length > 0 &&
this.chartMsg.series[0].data[0].name === "%"
) {
this.option.yAxis.axisLabel = {
formatter: function (value) {
return value + ".00%";
},
};
} else {
this.option.yAxis.axisLabel = {
formatter: function (value) {
return value;
},
};
}
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
this.option.series = this.chartMsg.series;
this.myChart.setOption(this.option);
},
},
};
</script>
<style lang="scss" scoped>
.legend {
text-align: right;
.item {
display: inline-block;
margin-right: 10px;
font-size: 14px;
color: #8c8c8c;
.block {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;
}
.line {
width: 10px;
height: 10px;
border-radius: 5px;
display: inline-block;
margin-right: 4px;
position: relative;
.line-block {
position: absolute;
width: 20px;
height: 2px;
left: -5px;
top: 4px;
}
}
}
}
</style>

View File

@ -0,0 +1,136 @@
<template>
<el-form :model="form" :inline="true" ref="bmSearchBarForm" class="blueTip">
<el-form-item label="时间维度" prop="type">
<el-select
size="small"
v-model="form.type"
placeholder="请选择"
style="width: 100px"
>
<el-option
v-for="item in typeList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="form.type === 1" label="时间" prop="dayTime">
<el-date-picker
size="small"
clearable
v-model="form.dayTime"
type="date"
placeholder="选择日期"
style="width: 150px"
>
</el-date-picker>
</el-form-item>
<el-form-item v-show="form.type === 2" label="时间" prop="weekTime">
<el-date-picker
v-model="form.weekTime"
type="week"
format="yyyy 第 WW 周"
placeholder="选择周"
style="width: 150px"
>
</el-date-picker>
</el-form-item>
<el-form-item v-show="form.type === 3" label="时间" prop="monthTime">
<el-date-picker
v-model="form.monthTime"
type="month"
placeholder="选择月份"
style="width: 150px"
>
</el-date-picker>
</el-form-item>
<el-form-item v-show="form.type === 4" label="时间" prop="yearTime">
<el-date-picker
v-model="form.yearTime"
type="year"
placeholder="选择年份"
style="width: 150px"
>
</el-date-picker>
</el-form-item>
<el-form-item label="工厂" prop="factory">
<el-select
size="small"
multiple
v-model="form.factory"
placeholder="请选择"
style="width: 250px"
>
<el-option
v-for="item in factoryList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="getDataList"
>查询</el-button
>
<el-divider direction="vertical"></el-divider>
<el-button type="primary" size="small" plain @click="handleExport"
>导出</el-button
>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "bmSearchBar",
data() {
return {
form: {
type: 1,
dayTime: "",
weekTime: "",
monthTime: "",
yearTime: "",
factory: "",
},
typeList: [
{ id: 1, name: "日" },
{ id: 2, name: "周" },
{ id: 3, name: "月" },
{ id: 4, name: "年" },
],
factoryList: [
{ id: 1, name: "瑞昌" },
{ id: 2, name: "邯郸" },
],
};
},
methods: {
getDataList() {
console.log(this.form);
this.$emit("getSearch", this.form);
},
handleExport() {
this.$emit("handleExport");
},
},
};
</script>
<style lang="scss" scoped>
.el-divider--vertical {
height: 24px;
}
.blueTip::before {
display: inline-block;
content: "";
width: 4px;
height: 18px;
background: #0b58ff;
border-radius: 1px;
margin-right: 8px;
margin-top: 8px;
}
</style>

View File

@ -0,0 +1,148 @@
<!--
* @Author: zhp
* @Date: 2024-06-07 08:37:17
* @LastEditTime: 2024-06-07 11:04:41
* @LastEditors: zhp
* @Description:
-->
<template>
<button
class="chart-btn"
:class="[active ? 'active' : '']"
@click="$emit('click', label)"
>
{{ label }}
</button>
</template>
<script>
export default {
name: "CopilotButton",
props: {
label: {
type: String,
required: true,
},
active: {
type: Boolean,
default: false,
},
},
mounted() {
},
};
</script>
<style>
button {
appearance: none;
outline: none;
border: none;
background: none;
}
</style>
<style scoped>
.skate {
/* flex: 1; */
position: relative;
width: 88px;
height: 32px;
background: #01306C;
/* border-radius: 4px 0px 0px 4px; */
backdrop-filter: blur(3px);
/* text-align: center;
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
text-align: center;
font-style: normal;
/* margin-right: 1px; */
/* letter-spacing: 10px; */
cursor: pointer;
}
.chart-btn:nth-child(6)::after {
content: '';
width: 0;
height: 0;
display: none;
}
.chart-btn {
/* flex: 1; */
position: relative;
width: 88px;
height: 32px;
background: #01306C;
/* border-radius: 4px 0px 0px 4px; */
backdrop-filter: blur(3px);
/* text-align: center;
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
text-align: center;
font-style: normal;
/* margin-right: 1px; */
/* letter-spacing: 10px; */
cursor: pointer;
}
.chart-btn::after {
/* flex: 1; */
/* position: relative; */
content: "";
position: absolute;
/* width: 16px; */
/* height: 16px; */
top: px;
right: -1px;
width: 1px;
height: 23px;
border: 1px solid #010D18;
}
.chart-btn.active {
background: #1D74D8;
/* border-radius: 4px;; */
}
.chart-btn.active::after {
display: none;
/* border-radius: 4px;; */
}
/* .copilot-btn::before,
.copilot-btn::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
background: transparent;
border-style: solid;
border-width: 2px;
border-color: transparent;
border-top-color: #007be4;
}
.copilot-btn::before {
left: 0;
border-left-color: #007be4;
}
.copilot-btn::after {
right: 0;
border-right-color: #007be4;
} */
</style>

View File

@ -0,0 +1,218 @@
<!--
* @Author: zhp
* @Date: 2024-06-11 09:48:40
* @LastEditTime: 2024-06-11 10:22:05
* @LastEditors: zhp
* @Description:
-->
<template>
<!-- <div> -->
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
<div :id="id" :class="className" style="height: 100%,width: 100%;;" />
<!-- </div> -->
</template>
<script>
import * as echarts from 'echarts'
import { debounce } from "@/utils/debounce";
export default {
name: 'OverviewBar',
// mixins: [resize],
props: {
id: {
type: String,
default: 'reportChart'
},
className: {
type: String,
default: 'reportChart'
},
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '100%'
},
legendPosition: {
type: String,
default: 'center'
},
showLegend: {
type: Boolean,
default: false
},
legendData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
mounted() {
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
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() {
console.log(1111)
this.chart = echarts.init(document.getElementById(this.id))
console.log(this.$parent);
this.chart.setOption({
title: {
text: '',
// subtext: 'Fake Data'
},
tooltip: {
trigger: 'axis'
},
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
legend: {
data: ['芯片总功率', '标准组件总功率', '转化效率'],
right: '90px',
top: '0%',
icon: 'rect',
itemWidth: 10,
itemHeight: 10,
itemGap: 40,
},
// toolbox: {
// show: true,
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
calculable: true,
xAxis: [
{
type: 'category',
// prettier-ignore
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [
{
type: 'value'
},
{
type: 'value',
// name: 'Temperature',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
}
}
],
grid: {
top: '20%',
left: "1%",
right: "3%",
bottom: "1%",
containLabel: true
},
series: [
{
name: '芯片总功率',
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(142, 240, 171, 1)', //线
lineStyle: {
color: 'rgba(142, 240, 171, 1)' //线
}
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
],
},
{
name: '标准组件总功率',
type: 'bar',
itemStyle: {
normal: {
color: '#288AFF', //线
lineStyle: {
color: '#288AFF' //线
}
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
],
},
{
name: '转化效率',
type: 'bar',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#FFCE6A', //线
lineStyle: {
color: '#FFCE6A' //线
}
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
],
}
]
})
}
}
}
</script>
<style scoped>
/* .reportChart {
position: absolute;
height: 100%;
width: 100%;
top: 10px;
} */
</style>

View File

@ -0,0 +1,460 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-07 16:22:57
* @LastEditors: zhp
* @Description:
-->
<template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
<!-- <div class="app-container"
style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
<p style="margin-bottom: 0">数据概览</p>
<div class="view">
<div v-for="(item, index) in data" :key="index">
<p style="color: rgb(194,128,255)">{{ item }}</p>
<p>{{ index }}</p>
</div>
</div>
</div> -->
<div class="" style="height: auto;">
<ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
<!-- <template v-slot:tab1>
<div style="margin: 20px; background: #f001;">
Page1: 状态时序图
</div>
</template>
<template v-slot:tab2>
<div style="margin: 20px">
Page2: 产量时序图
</div>
</template> -->
</ButtonNav>
</div>
<div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="date">
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator=""
start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<!-- <span v-if="start && end" style="margin-left: 10px">
{{ date1 }} {{ date2 }} {{ weekNum }}
</span> -->
</el-form-item>
<el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM"
range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
<el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间">
</el-date-picker>
~
<el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
@change="getYear">
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="玻璃类型" prop="type">
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="玻璃类型" prop="type">
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
<el-form-item>
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
<el-divider direction="vertical"></el-divider>
<!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
<!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
</el-form-item>
</el-form>
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:table-data="tableData">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" />
</base-table>
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
@pagination="getDataList" />
</div>
<!-- <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> -->
</div>
</template>
<script>
// import { parseTime } from '../../core/mixins/code-filter';
// import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav'
// import inputTable from './inputTable.vue';
// import lineChart from './lineChart';
import moment from 'moment'
import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
// import AddOrUpdate from './add-or-updata';
import { factoryList, factoryArray } from "@/utils/constants";
import { publicFormatter } from "@/utils/dict";
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { ButtonNav },
mixins: [basicPage],
data() {
return {
factoryList,
factoryArray,
start: undefined,
end: undefined,
listQuery: {
size: 10,
current: 1,
factorys: null,
total: 0,
date: 3,
beginTime: undefined,
endTime: undefined,
reportTime: []
},
timeList: [
{
value: 1,
label: '日'
},
{
value: 2,
label: '周'
},
{
value: 3,
label: '月'
},
{
value: 4,
label: '年'
}
],
detailOrUpdateVisible: false,
tableBtn: [
{
type: 'detail',
btnName: '详情',
},
// {
// type: 'delete',
// btnName: '',
// },
].filter((v) => v),
typeList: [
{
name: '芯片',
id: 0,
},
{
name: '标准组件',
id: 1,
},
{
name: 'BIPV产品',
id: 2,
},
],
tableProps: [
{
prop: 'factory',
label: '玻璃类型',
fixed:true,
// filter: (val) => factoryList[val],
// minWidth: 200,
// showOverflowtooltip: true
},
{
prop: 'workOrderNumber',
label: '科目/日期',
fixed: true,
// filter: (val) => ['', '', 'BIPV', ''][val]
},
{
prop: 'workOrderType',
label: '单位',
fixed: true,
// filter: publicFormatter('workorder_status')
// filter: (val) => ['', '', '', 'bipv'][val],
},
{
prop: 'plannedInvestment',
label: '计划投入',
},
{
prop: 'actualInvestment',
label: '实际投入',
},
{
prop: 'targetProduction',
label: '目标产量',
},
{
prop: 'actualProduction',
label: '实际产量',
},
{
prop: 'productionProgress',
label: '生产进度',
filter: (val) => (val * 100) + '%'
},
{
prop: 'orderStatus',
label: '工单状态',
filter: publicFormatter('workorder_status')
// filter: (val) => ['', '', ''][val],
},
{
prop: 'startTime',
label: '开始时间',
minWidth: 100,
showOverflowtooltip: true
},
{
prop: 'endTime',
label: '完成时间',
minWidth: 100,
showOverflowtooltip: true
}
],
tableData: [],
xAxis: [],
lineData: {},
data: {}
// proLineList: [],
// all: {}
};
},
computed: {
weekNum() {
return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
},
},
created() {
const currentMonth = new Date()
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
this.changeTime()
},
mounted() {
this.getOverView()
const currentMonth = new Date()
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
this.changeTime()
},
methods: {
getYear(e) {
if (this.end && Number(this.end) - Number(this.start) > 10) {
this.$message({
message: '年份起止时间不能超过十年',
type: 'warning'
});
this.start = undefined
this.end = undefined
// console.log();
} else {
if (Number(this.end) < Number(this.start)) {
this.$message({
message: '结束年份不能小于开始年份',
type: 'warning'
});
this.start = undefined
this.end = undefined
} else {
this.listQuery.beginTime = Number(this.start)
this.listQuery.endTime = Number(this.end)
}
}
if (!this.start && !this.end) {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
// console.log(e);
},
changeTime() {
if (this.listQuery.reportTime) {
const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
if (years * 12 + months > 24) {
this.$message({
message: '时间范围不能超过24个月',
type: 'warning'
});
this.listQuery.reportTime = [];
} else {
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
}
} else {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
onValueChange(picker, k) { // k
if (this.start && this.end) {
this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
if (numDays > 168) {
console.log(numDays)
this.$message({
message: '周范围不能超过24周',
type: 'warning'
});
} else {
this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW'))
this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW'))
}
}
if (!this.start && !this.end) {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
changeDayTime() {
if (this.listQuery.reportTime) {
const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
if (numDays > 30) {
this.$message({
message: '时间范围不能超过30天',
type: 'warning'
});
this.listQuery.reportTime = [];
} else {
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
}
} else {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
getOverView() {
// getOverView().then(res => {
// this.data = res.data
// console.log('aa', res.data)
// })
},
otherMethods(val) {
this.detailOrUpdateVisible = true;
// this.addOrEditTitle = "";
this.$nextTick(() => {
// this.$refs.detailOrUpdate.init(val.data.id);
});
},
async getDataList() {
// const res = await getWorkOrderPage(this.listQuery)
// this.tableData = res.data.list
// this.listQuery.total = res.data.total
// if (this.listQuery.total > 0) {
// this.tableData.forEach(item => {
// item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
// item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
// })
// }
},
buttonClick(val) {
this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 20;
if (this.listQuery.time) {
this.getDataList();
} else {
this.$message.warning('请选择时间范围!')
}
break;
case 'export':
if (this.listQuery.time) {
this.handleExport();
} else {
this.$message.warning('请选择时间范围!')
}
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() {
// this.$modal.confirm('?').then(() => {
// //
// // let params = {...this.listQuery};
// // params.current = 1;
// // params.size = 999;
// this.exportLoading = true;
// return exportExcel({
// factorys: this.listQuery.factorys,
// orderStatus: this.listQuery.orderStatus,
// time: this.listQuery.time
// });
// }).then(response => {
// this.$download.excel(response, '.xls');
// this.exportLoading = false;
// }).catch(() => { })
},
},
};
</script>
<style scoped>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.view {
display: flex;
justify-content: space-around;
align-items: center;
flex: 1;
}
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
.app-container {
margin: 0 0px 0;
background-color: #fff;
border-radius: 4px;
padding: 16px 16px 0;
height: calc(100vh - 134px);
overflow: auto;
}
.noBack{
background-color:black;
}
</style>

View File

@ -0,0 +1,253 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">稼动率对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "ConversionEfficiencyBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
series: [
{
name: "2024年4月目标值",
data: [
{ name: "%", value: 85 },
{ name: "%", value: 85 },
{ name: "%", value: 85 },
],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [
{ name: "%", value: 57.5 },
{ name: "%", value: 21.66 },
{ name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [
{ name: "%", value: 23.33 },
{ name: "%", value: 7.02 },
{ name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "conversionEfficiencyBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "ConversionEfficiencyBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "ConversionEfficiencyBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "ConversionEfficiencyBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,292 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">产量对标FTO</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "FtoOutputBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
series: [
{
name: "2024年4月目标值",
// data: [3000, 2000, 3000],
// data: [6800, 5000, 8900],
// data: [12000, 17000, 19000],
data: [560000, 540000, 600000],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2023年4月",
// data: [2100, 800, 1500],
// data: [9500, 7200, 9901],
// data: [14666, 15000, 17888],
data: [550000, 456666, 590000],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
// position: [-10, -16],
position: [-17, -16],
color: "#68C483",
},
},
{
name: "2024年4月",
// data: [2100, 900, 1300],
// data: [9100, 7300, 9700],
// data: [14666, 15300, 18000],
data: [556666, 456666, 650000],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
},
chartId: "ftoOutputBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "FtoOutputBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "FtoOutputBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "FtoOutputBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("==========下面是测试代码,需删除");
this.chartMsg.series = [];
},
handleExport() {
console.log("导出=====下面是测试代码,需删除");
this.chartMsg.series = [
{
name: "2024年4月目标值1",
// data: [3000, 2000, 3000],
// data: [6800, 5000, 8900],
// data: [12000, 17000, 19000],
data: [560000, 540000, 600000],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2023年4月",
// data: [2100, 800, 1500],
// data: [9500, 7200, 9901],
// data: [14666, 15000, 17888],
data: [550000, 456666, 590000],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
// position: [-10, -16],
position: [-17, -16],
color: "#68C483",
},
},
{
name: "2024年4月",
// data: [2100, 900, 1300],
// data: [9100, 7300, 9700],
// data: [14666, 15300, 18000],
data: [556666, 456666, 650000],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
];
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,253 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">封装OEE对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "PackageOEEBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
series: [
{
name: "2024年4月目标值",
data: [
{ name: "%", value: 85 },
{ name: "%", value: 85 },
{ name: "%", value: 85 },
],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [
{ name: "%", value: 57.5 },
{ name: "%", value: 21.66 },
{ name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [
{ name: "%", value: 23.33 },
{ name: "%", value: 7.02 },
{ name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "packageOEEBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "PackageOEEBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "PackageOEEBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "PackageOEEBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,450 @@
<!--
* @Author: zhp
* @Date: 2024-06-11 08:45:34
* @LastEditTime: 2024-06-11 11:08:27
* @LastEditors: zhp
* @Description:
-->
<template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
<!-- <div class="app-container"
style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
<p style="margin-bottom: 0">数据概览</p>
<div class="view">
<div v-for="(item, index) in data" :key="index">
<p style="color: rgb(194,128,255)">{{ item }}</p>
<p>{{ index }}</p>
</div>
</div>
</div> -->
<div class="app-container" style="flex: 1;min-height: 40vh;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="date">
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator=""
start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<!-- <span v-if="start && end" style="margin-left: 10px">
{{ date1 }} {{ date2 }} {{ weekNum }}
</span> -->
</el-form-item>
<el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM"
range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
<el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间">
</el-date-picker>
~
<el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
@change="getYear">
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="玻璃类型" prop="type">
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="玻璃类型" prop="type">
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item> -->
<el-form-item>
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
<el-divider direction="vertical"></el-divider>
<!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
<!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
</el-form-item>
</el-form>
<line-chart ref="lineChart" style="height: 90%; width: 100%"></line-chart>
</div>
<div class="app-container" style="margin-top: 8px;flex: 1">
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:table-data="tableData">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" />
</base-table>
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
@pagination="getDataList" />
</div>
<!-- <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> -->
</div>
</template>
<script>
// import { parseTime } from '../../core/mixins/code-filter';
// import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav'
// import inputTable from './inputTable.vue';
// import lineChart from './lineChart';
import moment from 'moment'
import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
// import AddOrUpdate from './add-or-updata';
import { factoryList, factoryArray } from "@/utils/constants";
import { publicFormatter } from "@/utils/dict";
import lineChart from "./components/lineChart";
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { ButtonNav, lineChart },
mixins: [basicPage],
data() {
return {
factoryList,
factoryArray,
start: undefined,
end: undefined,
listQuery: {
size: 10,
current: 1,
factorys: null,
total: 0,
date: 3,
beginTime: undefined,
endTime: undefined,
reportTime: []
},
timeList: [
{
value: 1,
label: '日'
},
{
value: 2,
label: '周'
},
{
value: 3,
label: '月'
},
{
value: 4,
label: '年'
}
],
detailOrUpdateVisible: false,
tableBtn: [
{
type: 'detail',
btnName: '详情',
},
// {
// type: 'delete',
// btnName: '',
// },
].filter((v) => v),
typeList: [
{
name: '芯片',
id: 0,
},
{
name: '标准组件',
id: 1,
},
{
name: 'BIPV产品',
id: 2,
},
],
tableProps: [
{
prop: 'factory',
label: '玻璃类型',
fixed:true,
// filter: (val) => factoryList[val],
// minWidth: 200,
// showOverflowtooltip: true
},
{
prop: 'workOrderNumber',
label: '科目/日期',
fixed: true,
// filter: (val) => ['', '', 'BIPV', ''][val]
},
{
prop: 'workOrderType',
label: '单位',
fixed: true,
// filter: publicFormatter('workorder_status')
// filter: (val) => ['', '', '', 'bipv'][val],
},
{
prop: 'plannedInvestment',
label: '计划投入',
},
{
prop: 'actualInvestment',
label: '实际投入',
},
{
prop: 'targetProduction',
label: '目标产量',
},
{
prop: 'actualProduction',
label: '实际产量',
},
{
prop: 'productionProgress',
label: '生产进度',
filter: (val) => (val * 100) + '%'
},
{
prop: 'orderStatus',
label: '工单状态',
filter: publicFormatter('workorder_status')
// filter: (val) => ['', '', ''][val],
},
{
prop: 'startTime',
label: '开始时间',
minWidth: 100,
showOverflowtooltip: true
},
{
prop: 'endTime',
label: '完成时间',
minWidth: 100,
showOverflowtooltip: true
}
],
tableData: [],
xAxis: [],
lineData: {},
data: {}
// proLineList: [],
// all: {}
};
},
computed: {
weekNum() {
return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
},
},
created() {
const currentMonth = new Date()
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
this.changeTime()
},
mounted() {
this.getOverView()
const currentMonth = new Date()
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
this.changeTime()
},
methods: {
getYear(e) {
if (this.end && Number(this.end) - Number(this.start) > 10) {
this.$message({
message: '年份起止时间不能超过十年',
type: 'warning'
});
this.start = undefined
this.end = undefined
// console.log();
} else {
if (Number(this.end) < Number(this.start)) {
this.$message({
message: '结束年份不能小于开始年份',
type: 'warning'
});
this.start = undefined
this.end = undefined
} else {
this.listQuery.beginTime = Number(this.start)
this.listQuery.endTime = Number(this.end)
}
}
if (!this.start && !this.end) {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
// console.log(e);
},
changeTime() {
if (this.listQuery.reportTime) {
const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
if (years * 12 + months > 24) {
this.$message({
message: '时间范围不能超过24个月',
type: 'warning'
});
this.listQuery.reportTime = [];
} else {
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
}
} else {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
onValueChange(picker, k) { // k
if (this.start && this.end) {
this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
if (numDays > 168) {
console.log(numDays)
this.$message({
message: '周范围不能超过24周',
type: 'warning'
});
} else {
this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW'))
this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW'))
}
}
if (!this.start && !this.end) {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
changeDayTime() {
if (this.listQuery.reportTime) {
const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
if (numDays > 30) {
this.$message({
message: '时间范围不能超过30天',
type: 'warning'
});
this.listQuery.reportTime = [];
} else {
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
}
} else {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
getOverView() {
// getOverView().then(res => {
// this.data = res.data
// console.log('aa', res.data)
// })
},
otherMethods(val) {
this.detailOrUpdateVisible = true;
// this.addOrEditTitle = "";
this.$nextTick(() => {
// this.$refs.detailOrUpdate.init(val.data.id);
});
},
async getDataList() {
// const res = await getWorkOrderPage(this.listQuery)
// this.tableData = res.data.list
// this.listQuery.total = res.data.total
// if (this.listQuery.total > 0) {
// this.tableData.forEach(item => {
// item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
// item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
// })
// }
},
buttonClick(val) {
this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 20;
if (this.listQuery.time) {
this.getDataList();
} else {
this.$message.warning('请选择时间范围!')
}
break;
case 'export':
if (this.listQuery.time) {
this.handleExport();
} else {
this.$message.warning('请选择时间范围!')
}
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() {
// this.$modal.confirm('?').then(() => {
// //
// // let params = {...this.listQuery};
// // params.current = 1;
// // params.size = 999;
// this.exportLoading = true;
// return exportExcel({
// factorys: this.listQuery.factorys,
// orderStatus: this.listQuery.orderStatus,
// time: this.listQuery.time
// });
// }).then(response => {
// this.$download.excel(response, '.xls');
// this.exportLoading = false;
// }).catch(() => { })
},
},
};
</script>
<style scoped>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.view {
display: flex;
justify-content: space-around;
align-items: center;
flex: 1;
}
.blueTip::before {
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
.app-container {
margin: 0 0px 0;
background-color: #fff;
border-radius: 4px;
padding: 16px 16px 0;
height: calc(100vh - 134px);
overflow: auto;
}
.noBack{
background-color:black;
}
</style>

View File

@ -0,0 +1,244 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">标准组件产量对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "SCOutputBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
series: [
{
name: "2024年4月目标值",
// data: [3000, 2000, 3000],
// data: [6800, 5000, 8900],
// data: [12000, 17000, 19000],
data: [560000, 540000, 600000],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2023年4月",
// data: [2100, 800, 1500],
// data: [9500, 7200, 9901],
// data: [14666, 15000, 17888],
data: [550000, 456666, 590000],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
// position: [-10, -16],
position: [-17, -16],
color: "#68C483",
},
},
{
name: "2024年4月",
// data: [2100, 900, 1300],
// data: [9100, 7300, 9700],
// data: [14666, 15300, 18000],
data: [556666, 456666, 650000],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
},
chartId: "scOutputBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "SCOutputBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "SCOutputBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "SCOutputBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,244 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">组件人均产量对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "SCPerCapitaBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/片",
series: [
{
name: "2024年4月目标值",
// data: [3000, 2000, 3000],
// data: [6800, 5000, 8900],
// data: [12000, 17000, 19000],
data: [560000, 540000, 600000],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2023年4月",
// data: [2100, 800, 1500],
// data: [9500, 7200, 9901],
// data: [14666, 15000, 17888],
data: [550000, 456666, 590000],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
// position: [-10, -16],
position: [-17, -16],
color: "#68C483",
},
},
{
name: "2024年4月",
// data: [2100, 900, 1300],
// data: [9100, 7300, 9700],
// data: [14666, 15300, 18000],
data: [556666, 456666, 650000],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
},
chartId: "scPerCapitaBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "SCPerCapitaBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "SCPerCapitaBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "SCPerCapitaBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,253 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">芯片良率对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "SCYieldBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月目标值", type: 2, color: "#FFCE6A" },
{ id: 2, name: "2023年4月", type: 1, color: "#8EF0AB" },
{ id: 3, name: "2024年4月", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
series: [
{
name: "2024年4月目标值",
data: [
{ name: "%", value: 85 },
{ name: "%", value: 85 },
{ name: "%", value: 85 },
],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2023年4月",
data: [
{ name: "%", value: 57.5 },
{ name: "%", value: 21.66 },
{ name: "%", value: 18.4 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [
{ name: "%", value: 23.33 },
{ name: "%", value: 7.02 },
{ name: "%", value: 80.2 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "scYieldBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "SCYieldBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "SCYieldBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "SCYieldBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@ -0,0 +1,283 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
</div>
<div class="containerBottom">
<div class="smallTitle">封装OEE对标</div>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
const tableProps = [
{
prop: "factory",
label: "工厂名称",
// filter: (val) => factoryList[val],
minWidth: 200,
showOverflowtooltip: true,
},
{
prop: "name",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
{
prop: "time1",
label: "时间1",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "time2",
label: "时间2",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao",
label: "月目标值",
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "mubiao2",
label: "年目标值",
minWidth: 150,
showOverflowtooltip: true,
},
];
export default {
name: "TurnoverRateBM",
data() {
return {
tableProps,
listQuery: {
current: 1,
size: 1000,
},
tableData: [
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
{ factory: "工厂1" },
],
chartHeight: this.tableHeight(137) / 2 - 111,
tableH: this.tableHeight(137) / 2 - 70,
legendList: [
{ id: 1, name: "2024年4月", type: 1, color: "#8EF0AB" },
{ id: 2, name: "2023年4月", type: 1, color: "#63BDFF" },
{ id: 3, name: "2024年4月目标值", type: 1, color: "#288AFF" },
{ id: 4, name: "2024年目标值", type: 1, color: "#7164FF" },
],
chartMsg: {
color: ["#8EF0AB", "#63BDFF", "#288AFF", "#7164FF"],
xData: ["成都", "邯郸", "瑞昌"],
yName: "单位/%",
series: [
{
name: "2023年4月",
data: [
{ name: "%", value: 12.64444444 },
{ name: "%", value: 12.29 },
{ name: "%", value: 12.33 },
],
type: "bar",
barWidth: 20,
barGap: 0.5,
label: {
show: true,
position: "top",
color: "#68C483",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月",
data: [
{ name: "%", value: 14.92 },
{ name: "%", value: 15.31 },
{ name: "%", value: 15.36 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#63BDFF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年4月目标值",
data: [
{ name: "%", value: 15.36 },
{ name: "%", value: 15.52 },
{ name: "%", value: 15.63 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#288AFF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2024年目标值",
data: [
{ name: "%", value: 15.63 },
{ name: "%", value: 15.69 },
{ name: "%", value: 15.78 },
],
type: "bar",
barWidth: 20,
label: {
show: true,
position: "top",
color: "#7164FF",
fontSize: 9,
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "turnoverRateBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
//
isOpen(val) {
if (this.$route.name === "TurnoverRateBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
window.addEventListener("resize", this._setTableHeight);
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
//
if (this.$route.name === "TurnoverRateBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(137) / 2 - 70;
this.chartHeight = this.tableHeight(137) / 2 - 111;
if (this.$route.name === "TurnoverRateBM") {
this.chartNum++;
}
},
getSearch(val) {
console.log(val);
console.log("=========================");
},
handleExport() {
console.log("导出");
},
},
};
</script>
<style lang="scss" scoped>
.containerTop,
.containerBottom {
height: calc((100vh - 137px) / 2);
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>