Compare commits
No commits in common. "e1e39681ceeffe9f77e92aae5c69266de88dad63" and "0a10b7f177552d6237671eb00da6a0ff0b2e8df0" have entirely different histories.
e1e39681ce
...
0a10b7f177
8
.env.dev
8
.env.dev
@ -1,7 +1,7 @@
|
|||||||
###
|
###
|
||||||
# @Author: zhp
|
# @Author: zhp
|
||||||
# @Date: 2024-04-28 13:42:51
|
# @Date: 2024-04-28 13:42:51
|
||||||
# @LastEditTime: 2024-06-17 09:01:32
|
# @LastEditTime: 2024-06-07 10:32:24
|
||||||
# @LastEditors: DY
|
# @LastEditors: DY
|
||||||
# @Description:
|
# @Description:
|
||||||
###
|
###
|
||||||
@ -13,11 +13,9 @@ VUE_APP_TITLE = 发电玻璃智能管控平台
|
|||||||
|
|
||||||
# 芋道管理系统/开发环境
|
# 芋道管理系统/开发环境
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.70:30307'
|
# VUE_APP_BASE_API = 'http://192.168.1.70:30307'
|
||||||
VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
|
# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
|
||||||
# 郭
|
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
|
|
||||||
# sara
|
# sara
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.63:48080'
|
VUE_APP_BASE_API = 'http://192.168.1.63:48080'
|
||||||
# 张一丁
|
# 张一丁
|
||||||
# VUE_APP_BASE_API = 'http://192.168.4.139:48080'
|
# VUE_APP_BASE_API = 'http://192.168.4.139:48080'
|
||||||
|
|
||||||
|
@ -1,17 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>编组 15</title>
|
|
||||||
<g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="工单管理" transform="translate(-714.000000, -131.000000)">
|
|
||||||
<g id="编组-15" transform="translate(714.000000, 131.000000)">
|
|
||||||
<g id="编组-13备份" fill="#0B58FF" opacity="0.227236793">
|
|
||||||
<rect id="矩形备份-2" x="0" y="0" width="26" height="26" rx="6"></rect>
|
|
||||||
</g>
|
|
||||||
<g id="公司" transform="translate(4.749735, 4.749735)" fill-rule="nonzero">
|
|
||||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16.50053" height="16.50053"></rect>
|
|
||||||
<path d="M11.933204,3.46511501 L11.933204,1 C11.933204,0.44771525 11.4854888,-1.01453063e-16 10.933204,0 L7.7088886,0 L7.7088886,0 C3.83109495,0 0.687522083,3.16186639 0.687522083,7.06222625 L0.687522083,15.50053 C0.687522083,16.0528147 1.13523733,16.50053 1.68752208,16.50053 L14.8130079,16.50053 C15.3652927,16.50053 15.8130079,16.0528147 15.8130079,15.50053 L15.8130079,6.45996015 L15.8130079,6.45996015 L11.933204,3.46511501 Z M10.8812851,15.4709239 L1.80917527,15.4709239 L1.80917527,6.9505448 C1.81175925,3.6815283 4.55432163,1.03209261 7.93823277,1.02960612 L10.8812851,1.02960612 L10.8812851,15.4709239 Z M14.8298514,15.4709239 L11.9257773,15.4709239 L11.9257773,5.179727 L14.850314,7.12879718 L14.8298514,15.4709239 Z M3.75976827,9.04329837 L8.75976827,9.04329837 L8.75976827,10.3766317 L3.75976827,10.3766317 L3.75976827,9.04329837 Z M3.75976827,6.3766317 L8.75976827,6.3766317 L8.75976827,7.70996504 L3.75976827,7.70996504 L3.75976827,6.3766317 Z" id="形状" fill="#0B58FF"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.9 KiB |
@ -1,15 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>编组 13</title>
|
|
||||||
<g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="工单管理" transform="translate(-474.000000, -131.000000)">
|
|
||||||
<g id="编组-13" transform="translate(474.000000, 131.000000)">
|
|
||||||
<rect id="矩形备份-2" fill="#66DD89" opacity="0.227236793" x="0" y="0" width="26" height="26" rx="6"></rect>
|
|
||||||
<g id="机床、加工中心" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
|
|
||||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
|
|
||||||
<path d="M18.1818304,15.1909171 L18.1818304,2.5 C18.1818304,2.22385763 17.9579728,2 17.6818304,2 L2.7272736,2 C2.45113122,2 2.2272736,2.22385763 2.2272736,2.5 L2.2272736,10.195451 C2.2272736,10.3084167 2.31885035,10.3999934 2.431816,10.3999934 C2.54478165,10.3999934 2.63635841,10.4915702 2.63635841,10.6045358 L2.63635841,10.999993 C2.63635841,11.3313636 2.90498735,11.5999925 3.23635794,11.5999925 L3.24999521,11.5999925 C3.58889745,11.5999925 3.86363201,11.8747271 3.86363201,12.2136293 L3.86363201,12.7909094 C3.86363201,13.016846 4.04678981,13.2000037 4.2727264,13.2000037 C4.498663,13.2000037 4.6818208,13.016846 4.6818208,12.7909094 L4.6818208,12.2136293 C4.6818208,11.8747271 4.95655535,11.5999925 5.2954576,11.5999925 L5.30909486,11.5999925 C5.64046546,11.5999925 5.9090944,11.3313636 5.9090944,10.999993 L5.9090944,10.6045358 C5.9090944,10.4915702 6.00067115,10.3999934 6.1136368,10.3999934 C6.22660245,10.3999934 6.3181792,10.3084167 6.3181792,10.195451 L6.3181792,6.5 C6.3181792,6.22385763 6.54203683,6 6.8181792,6 L12.772736,6 C13.0488784,6 13.272736,6.22385763 13.272736,6.5 L13.272736,15.1000019 C13.272736,15.3761442 13.0488784,15.6000019 12.772736,15.6000019 L11.7272736,15.6000019 C11.4511312,15.6000019 11.2272736,15.3761442 11.2272736,15.1000019 L11.2272736,14.8000009 C11.2272736,14.3581726 10.869101,14 10.4272727,14 L8.75453855,14 C8.31271023,14 7.95453761,14.3581726 7.95453761,14.8000009 L7.95453761,15.1000019 C7.95453761,15.3761442 7.73067998,15.6000019 7.45453761,15.6000019 L6.4090944,15.6000019 C6.13295202,15.6000019 5.9090944,15.3761442 5.9090944,15.1000019 L5.9090944,14.8000009 C5.9090944,14.3581726 5.55092178,14 5.10909346,14 L3.43635934,14 C2.99453103,14 2.63635841,14.3581726 2.63635841,14.8000009 L2.63635841,15.1000019 C2.63635841,15.3761442 2.41250078,15.6000019 2.13635841,15.6000019 L1.8181792,15.6000019 C1.36631131,15.6000019 1,15.9663132 1,16.4181811 L1,17.5 C1,17.7761424 1.22385763,18 1.5,18 L18.5,18 C18.7761424,18 19,17.7761424 19,17.5 L19,16.0090867 C19,15.7831554 18.8168465,15.6000019 18.5909152,15.6000019 C18.3649839,15.6000019 18.1818304,15.4168484 18.1818304,15.1909171 Z M5.0909056,10.8000056 L3.4545472,10.8000056 L3.4545472,10.3999934 L5.0909056,10.3999934 L5.0909056,10.8000056 Z M5.49999041,6.20000375 L5.49999041,9.60000656 L5.49999041,9.60000656 L3.04544321,9.60000656 L3.04544321,2.80000562 L17.3636416,2.80000562 L17.3636416,15.6000019 L14.0909056,15.6000019 L14.0909056,6.20000375 C14.0909056,5.647719 13.6431904,5.20000375 13.0909056,5.20000375 L6.49999041,5.20000375 C5.94770566,5.20000375 5.49999041,5.647719 5.49999041,6.20000375 Z M8.7727264,14.7999963 L10.4090848,14.7999963 L10.4090848,15.6000019 L8.7727264,15.6000019 L8.7727264,14.7999963 Z M3.4545472,14.7999963 L5.0909056,14.7999963 L5.0909056,15.6000019 L3.4545472,15.6000019 L3.4545472,14.7999963 Z M18.1818304,17.1999944 L1.81816962,17.1999944 L1.81816962,16.3999888 L18.1818304,16.3999888 L18.1818304,17.1999944 Z M12.0454528,4.00000469 C12.0440427,4.28673847 12.1996755,4.55228735 12.4534043,4.69605646 C12.707133,4.83982557 13.0201502,4.83982557 13.2738789,4.69605646 C13.5276077,4.55228735 13.6832405,4.28673847 13.6818304,4.00000469 C13.6832405,3.71327091 13.5276077,3.44772202 13.2738789,3.30395291 C13.0201502,3.1601838 12.707133,3.1601838 12.4534043,3.30395291 C12.1996755,3.44772202 12.0440427,3.71327091 12.0454528,4.00000469 L12.0454528,4.00000469 Z M5.49999041,3.60001125 L11.2272736,3.60001125 L11.2272736,4.39999813 L5.49999041,4.39999813 L5.49999041,3.60001125 Z M15.3181792,11.5999925 L16.136368,11.5999925 L16.136368,14.7999963 L15.3181792,14.7999963 L15.3181792,11.5999925 Z M15.3181792,9.19999438 L16.136368,9.19999438 L16.136368,10.8000056 L15.3181792,10.8000056 L15.3181792,9.19999438 Z M15.3181792,6.79999625 L16.136368,6.79999625 L16.136368,8.4000075 L15.3181792,8.4000075 L15.3181792,6.79999625 Z" id="形状" fill="#43B866"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
Before Width: | Height: | Size: 8.5 MiB |
@ -378,14 +378,10 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
|
|||||||
transformRate.target[fId] = componentConversionEfficiency
|
transformRate.target[fId] = componentConversionEfficiency
|
||||||
}
|
}
|
||||||
// 芯片OEE
|
// 芯片OEE
|
||||||
if (factory.glassType === 0) {
|
chipOeeRate.current[fId] = factory.oee;
|
||||||
chipOeeRate.current[fId] = factory.oee;
|
|
||||||
}
|
|
||||||
// chipOeeRate.previous[fId] = factory.previousYearOee;
|
// chipOeeRate.previous[fId] = factory.previousYearOee;
|
||||||
// 转化效率
|
// 转化效率
|
||||||
if (factory.glassType === 1) {
|
transformRate.current[fId] = factory.componentConversionEfficiency;
|
||||||
transformRate.current[fId] = factory.componentConversionEfficiency;
|
|
||||||
}
|
|
||||||
// transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
|
// transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
|
||||||
// 芯片良率 与 标准组件良率
|
// 芯片良率 与 标准组件良率
|
||||||
if (![0, 1].includes(factory.glassType)) continue;
|
if (![0, 1].includes(factory.glassType)) continue;
|
||||||
@ -452,11 +448,8 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
|
|||||||
if (factoryListResponse && factoryListResponse[0] != null) {
|
if (factoryListResponse && factoryListResponse[0] != null) {
|
||||||
for (const factory of factoryListResponse) {
|
for (const factory of factoryListResponse) {
|
||||||
const fId = getFactoryId(factory);
|
const fId = getFactoryId(factory);
|
||||||
console.log('factory.inputNumber', factory, fId);
|
|
||||||
if (factory.glassType === 0) {
|
|
||||||
chipInvest.current[fId] = factory.inputNumber
|
|
||||||
}
|
|
||||||
// const preFId = getPreFactoryId(factory);
|
// const preFId = getPreFactoryId(factory);
|
||||||
|
|
||||||
// 获取目标值
|
// 获取目标值
|
||||||
if (targetListResponse) {
|
if (targetListResponse) {
|
||||||
const { chipYield, componentYield, bipvProductOutput } =
|
const { chipYield, componentYield, bipvProductOutput } =
|
||||||
@ -466,6 +459,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
|
|||||||
bipvOutput.target[fId] = bipvProductOutput;
|
bipvOutput.target[fId] = bipvProductOutput;
|
||||||
}
|
}
|
||||||
// 芯片投入
|
// 芯片投入
|
||||||
|
chipInvest.current[fId] = factory.inputNumber;
|
||||||
|
|
||||||
// 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出
|
// 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出
|
||||||
// 因为后端写的垃圾数据,所以这里要做一下判断
|
// 因为后端写的垃圾数据,所以这里要做一下判断
|
||||||
@ -473,7 +467,6 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
|
|||||||
const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
|
const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
|
||||||
_t.current[fId] = factory.outputNumber;
|
_t.current[fId] = factory.outputNumber;
|
||||||
}
|
}
|
||||||
console.log('chipInvest',chipInvest);
|
|
||||||
return {
|
return {
|
||||||
chipInvest,
|
chipInvest,
|
||||||
// ftoInvest,
|
// ftoInvest,
|
||||||
@ -482,6 +475,15 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
|
|||||||
stdOutput,
|
stdOutput,
|
||||||
bipvOutput,
|
bipvOutput,
|
||||||
};
|
};
|
||||||
|
}else{
|
||||||
|
return {
|
||||||
|
chipInvest,
|
||||||
|
// ftoInvest,
|
||||||
|
ftoInvest,
|
||||||
|
chipOutput,
|
||||||
|
stdOutput,
|
||||||
|
bipvOutput,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,11 +47,8 @@ export default {
|
|||||||
legend() {
|
legend() {
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -63,13 +60,13 @@ export default {
|
|||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
if (this.period === '日' && this.than === '同比') {
|
if (this.period === '日' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
|
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
|
||||||
{ label: `${yesterday}日`, color: "#58adfa" },
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${dayBeYes}日`, color: "#12f7f1" },
|
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||||
{ label: `${yesterday}日`, color: "#58adfa" },
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
@ -99,7 +96,7 @@ export default {
|
|||||||
items = [
|
items = [
|
||||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||||
{ label: `${year}年`, color: "#58adfa" },
|
{ label: `${year}年`, color: "#58adfa" },
|
||||||
{ label: `${year}年目标`, color: "#58adfa" },
|
{ label: `${year}年`, color: "#58adfa" },
|
||||||
|
|
||||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||||
];
|
];
|
||||||
@ -166,11 +163,8 @@ function getTemplate(period, dataList, than) {
|
|||||||
// console.log('dataList',dataList);
|
// console.log('dataList',dataList);
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -183,11 +177,11 @@ function getTemplate(period, dataList, than) {
|
|||||||
if (period === '日' && than === '同比') {
|
if (period === '日' && than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
name: `${year - 1}年${yesterday}日`,
|
name: `${year-1}年${month}月${today}日`,
|
||||||
data: dataList ? dataList[0] : [],
|
data: dataList ? dataList[0] : [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${yesterday}日`,
|
name: `${month}月${today}日`,
|
||||||
data: dataList ? dataList[1] : [],
|
data: dataList ? dataList[1] : [],
|
||||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||||
},
|
},
|
||||||
@ -195,11 +189,11 @@ function getTemplate(period, dataList, than) {
|
|||||||
} else if (period === '日' && than === '环比') {
|
} else if (period === '日' && than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
name: `${dayBeYes}日`,
|
name: `${yesterday}日`,
|
||||||
data: dataList ? dataList[0] : [],
|
data: dataList ? dataList[0] : [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${yesterday}日`,
|
name: `${month}月${today}日`,
|
||||||
data: dataList ? dataList[1] : [],
|
data: dataList ? dataList[1] : [],
|
||||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||||
},
|
},
|
||||||
|
@ -47,11 +47,8 @@ export default {
|
|||||||
legend() {
|
legend() {
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -63,13 +60,13 @@ export default {
|
|||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
if (this.period === '日' && this.than === '同比') {
|
if (this.period === '日' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
|
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
|
||||||
{ label: `${yesterday}日`, color: "#58adfa" },
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${dayBeYes}日`, color: "#12f7f1" },
|
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||||
{ label: `${yesterday}日`, color: "#58adfa" },
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
@ -99,7 +96,7 @@ export default {
|
|||||||
items = [
|
items = [
|
||||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||||
{ label: `${year}年`, color: "#58adfa" },
|
{ label: `${year}年`, color: "#58adfa" },
|
||||||
{ label: `${year}年目标`, color: "#58adfa" },
|
{ label: `${year}年`, color: "#58adfa" },
|
||||||
|
|
||||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||||
];
|
];
|
||||||
@ -157,11 +154,8 @@ function getTemplate(period, dataList,than) {
|
|||||||
// console.log('dataList',dataList);
|
// console.log('dataList',dataList);
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -174,11 +168,11 @@ function getTemplate(period, dataList,than) {
|
|||||||
if (period === '日' && than === '同比') {
|
if (period === '日' && than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
name: `${year - 1}年${yesterday}日`,
|
name: `${year-1}年${month}月${today}日`,
|
||||||
data: dataList ? dataList[0] : [],
|
data: dataList ? dataList[0] : [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${yesterday}日`,
|
name: `${month}月${today}日`,
|
||||||
data: dataList ? dataList[1] : [],
|
data: dataList ? dataList[1] : [],
|
||||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||||
},
|
},
|
||||||
@ -186,11 +180,11 @@ function getTemplate(period, dataList,than) {
|
|||||||
} else if (period === '日' && than === '环比') {
|
} else if (period === '日' && than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
name: `${dayBeYes}日`,
|
name: `${yesterday}日`,
|
||||||
data: dataList ? dataList[0] : [],
|
data: dataList ? dataList[0] : [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${yesterday}日`,
|
name: `${month}月${today}日`,
|
||||||
data: dataList ? dataList[1] : [],
|
data: dataList ? dataList[1] : [],
|
||||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||||
},
|
},
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 13:22:43
|
* @Date: 2024-05-07 13:22:43
|
||||||
* @LastEditTime: 2024-06-14 10:05:37
|
* @LastEditTime: 2024-06-06 15:12:58
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
|
@ -87,11 +87,8 @@ export default {
|
|||||||
const vt = this.valueTuple;
|
const vt = this.valueTuple;
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -103,13 +100,13 @@ export default {
|
|||||||
// const year = new Date().getFullYear();
|
// const year = new Date().getFullYear();
|
||||||
if (this.period === '日' && this.than === '同比') {
|
if (this.period === '日' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${yesterday}日良率`, },
|
{ label: `${month}月${today}日良率`, },
|
||||||
{ label: `${year - 1}年${yesterday}日良率` },
|
{ label: `${year-1}年${month}月${today}日良率` },
|
||||||
];
|
];
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
|
{ label: `${month}月${today}日良率` },
|
||||||
{ label: `${yesterday}日良率` },
|
{ label: `${yesterday}日良率` },
|
||||||
{ label: `${dayBeYes}日良率` },
|
|
||||||
];
|
];
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
@ -142,7 +139,7 @@ export default {
|
|||||||
}
|
}
|
||||||
let titleValue = vt[1] === null ? 0 + '%' : this.formatNumber(vt[1]) + '%',
|
let titleValue = vt[1] === null ? 0 + '%' : this.formatNumber(vt[1]) + '%',
|
||||||
subtitle = {
|
subtitle = {
|
||||||
日: "昨日良率",
|
日: "本日良率",
|
||||||
周: "本周良率",
|
周: "本周良率",
|
||||||
月: `${month}月良率`,
|
月: `${month}月良率`,
|
||||||
年: `${year}良率`,
|
年: `${year}良率`,
|
||||||
@ -164,11 +161,8 @@ export default {
|
|||||||
legend() {
|
legend() {
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -180,13 +174,13 @@ export default {
|
|||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
if (this.period === '日' && this.than === '同比') {
|
if (this.period === '日' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${year - 1}年${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
|
{ label: `${year-1}年${month}月${today}日良率`, 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])) + "%" },
|
{ label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${dayBeYes}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
|
{ label: `${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])) + "%" },
|
{ label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:25:10
|
* @Date: 2024-05-07 10:25:10
|
||||||
* @LastEditTime: 2024-06-14 09:58:01
|
* @LastEditTime: 2024-06-06 15:14:29
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -69,19 +69,16 @@ export default {
|
|||||||
titlePre() {
|
titlePre() {
|
||||||
console.log(this.city);
|
console.log(this.city);
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
const today = new Date().getDate();
|
const today = new Date().getDate();
|
||||||
const month = new Date().getMonth() + 1;
|
const month = new Date().getMonth() + 1;
|
||||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
if (this.period === '日' && this.than === '同比') {
|
if (this.period === '日' && this.than === '同比') {
|
||||||
return `${year - 1}年${yesterday}日`
|
return `${year-1}年${month}月${today}日`
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
return `${dayBeYes}日`
|
return `${yesterday}日`
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
return `${year-1}年本周`
|
return `${year-1}年本周`
|
||||||
} else if (this.period === '周' && this.than === '环比') {
|
} else if (this.period === '周' && this.than === '环比') {
|
||||||
@ -96,18 +93,14 @@ export default {
|
|||||||
},
|
},
|
||||||
title() {
|
title() {
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
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 today = new Date().getDate();
|
||||||
const month = new Date().getMonth() + 1;
|
const month = new Date().getMonth() + 1;
|
||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
if (this.period === '日' && this.than === '同比') {
|
if (this.period === '日' && this.than === '同比') {
|
||||||
return `${yesterday}日`
|
return `${month}月${today}日`
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
return `${yesterday}日`
|
return `${month}月${today}日`
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
return `本周`
|
return `本周`
|
||||||
} else if (this.period === '周' && this.than === '环比') {
|
} else if (this.period === '周' && this.than === '环比') {
|
||||||
|
@ -36,8 +36,6 @@ export default {
|
|||||||
isFullscreen: false,
|
isFullscreen: false,
|
||||||
actualOptions: null,
|
actualOptions: null,
|
||||||
chart: "",
|
chart: "",
|
||||||
data: [],
|
|
||||||
orderXAxis:[],
|
|
||||||
// obj:{
|
// obj:{
|
||||||
// seriesArr: [],
|
// seriesArr: [],
|
||||||
// targetProduceArr: [],
|
// targetProduceArr: [],
|
||||||
@ -52,7 +50,7 @@ export default {
|
|||||||
grid: {
|
grid: {
|
||||||
left: "7%",
|
left: "7%",
|
||||||
right: "7%",
|
right: "7%",
|
||||||
bottom: "15%",
|
bottom: "8%",
|
||||||
top: "15%",
|
top: "15%",
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
@ -68,7 +66,6 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
rotate:45,
|
|
||||||
color: "rgba(255, 255, 255, 0.7)",
|
color: "rgba(255, 255, 255, 0.7)",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
@ -194,7 +191,7 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
type(val) {
|
type(val) {
|
||||||
this.initChart()
|
|
||||||
},
|
},
|
||||||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
|
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
|
||||||
// isFullscreen(val) {
|
// isFullscreen(val) {
|
||||||
@ -252,62 +249,79 @@ export default {
|
|||||||
}, 500)();
|
}, 500)();
|
||||||
},
|
},
|
||||||
initChart() {
|
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 === '目标产量') {
|
if (this.type === '目标产量') {
|
||||||
this.orderXAxis = []
|
let orderXAxis = []
|
||||||
this.data = []
|
let targetProduceArr = []
|
||||||
if (this.energyCockpits) {
|
if (this.energyCockpits) {
|
||||||
this.energyCockpits.forEach(ele => {
|
this.energyCockpits.forEach(ele => {
|
||||||
this.data.push(ele.targetProduction)
|
targetProduceArr.push(ele.targetProduction)
|
||||||
this.orderXAxis.push(ele.workOrderNumber)
|
orderXAxis.push(ele.workOrderNumber)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
actualOptions.xAxis.data = orderXAxis;
|
||||||
|
actualOptions.series[0].data = targetProduceArr;
|
||||||
// this.initChart(targetProduceArr, orderXAxis)
|
// this.initChart(targetProduceArr, orderXAxis)
|
||||||
} else if (this.type === '计划投入') {
|
} else if (this.type === '计划投入') {
|
||||||
this.orderXAxis = []
|
let orderXAxis = []
|
||||||
this.data = []
|
let planIn = []
|
||||||
if (this.energyCockpits) {
|
if (this.energyCockpits) {
|
||||||
this.energyCockpits.forEach(ele => {
|
this.energyCockpits.forEach(ele => {
|
||||||
this.data.push(ele.plannedInvestment)
|
planIn.push(ele.plannedInvestment)
|
||||||
this.orderXAxis.push(ele.workOrderNumber)
|
orderXAxis.push(ele.workOrderNumber)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
actualOptions.xAxis.data = orderXAxis;
|
||||||
|
actualOptions.series[0].data = planIn;
|
||||||
} else if (this.type === '实际投入') {
|
} else if (this.type === '实际投入') {
|
||||||
this.orderXAxis = []
|
let orderXAxis = []
|
||||||
this.data = []
|
let acIn = []
|
||||||
if (this.energyCockpits) {
|
if (this.energyCockpits) {
|
||||||
this.energyCockpits.forEach(ele => {
|
this.energyCockpits.forEach(ele => {
|
||||||
this.data.push(ele.actualInvestment)
|
acIn.push(ele.actualInvestment)
|
||||||
this.orderXAxis.push(ele.workOrderNumber)
|
orderXAxis.push(ele.workOrderNumber)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
actualOptions.xAxis.data = orderXAxis;
|
||||||
|
actualOptions.series[0].data = acIn;
|
||||||
} else if (this.type === '实际产出') {
|
} else if (this.type === '实际产出') {
|
||||||
this.orderXAxis = []
|
let orderXAxis = []
|
||||||
this.data = []
|
let acProduceArr = []
|
||||||
if (this.energyCockpits) {
|
if (this.energyCockpits) {
|
||||||
this.energyCockpits.forEach(ele => {
|
this.energyCockpits.forEach(ele => {
|
||||||
this.data.push(ele.actualProduction)
|
acProduceArr.push(ele.actualProduction)
|
||||||
this.orderXAxis.push(ele.workOrderNumber)
|
orderXAxis.push(ele.workOrderNumber)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
actualOptions.xAxis.data = orderXAxis;
|
||||||
|
actualOptions.series[0].data = acProduceArr;
|
||||||
} else if (this.type === '废品数量') {
|
} else if (this.type === '废品数量') {
|
||||||
this.orderXAxis = []
|
let orderXAxis = []
|
||||||
this.data = []
|
let scrapNum = []
|
||||||
if (this.energyCockpits) {
|
if (this.energyCockpits) {
|
||||||
this.energyCockpits.forEach(ele => {
|
this.energyCockpits.forEach(ele => {
|
||||||
this.data.push(ele.wasteNum)
|
scrapNum.push(ele.wasteNum)
|
||||||
this.orderXAxis.push(ele.workOrderNumber)
|
orderXAxis.push(ele.workOrderNumber)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
actualOptions.xAxis.data = orderXAxis;
|
||||||
|
actualOptions.series[0].data = scrapNum;
|
||||||
} else if (this.type === '待再加工') {
|
} else if (this.type === '待再加工') {
|
||||||
this.orderXAxis = []
|
let orderXAxis = []
|
||||||
this.data = []
|
let processNum = []
|
||||||
if (this.energyCockpits) {
|
if (this.energyCockpits) {
|
||||||
this.energyCockpits.forEach(ele => {
|
this.energyCockpits.forEach(ele => {
|
||||||
console.log(ele.reworkNum);
|
console.log(ele.reworkNum);
|
||||||
this.data.push(ele.reworkNum)
|
processNum.push(ele.reworkNum)
|
||||||
this.orderXAxis.push(ele.workOrderNumber)
|
orderXAxis.push(ele.workOrderNumber)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
actualOptions.xAxis.data = orderXAxis;
|
||||||
|
actualOptions.series[0].data = processNum;
|
||||||
}
|
}
|
||||||
|
|
||||||
// let seriesArr = [
|
// let seriesArr = [
|
||||||
@ -356,13 +370,6 @@ export default {
|
|||||||
// actualOptions.series[1].name = seriesArr[1].name;
|
// actualOptions.series[1].name = seriesArr[1].name;
|
||||||
// actualOptions.series[2].data = seriesArr[2].data;
|
// actualOptions.series[2].data = seriesArr[2].data;
|
||||||
// actualOptions.series[2].name = seriesArr[2].name;
|
// 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.actualOptions = actualOptions;
|
||||||
this.chart.setOption(actualOptions);
|
this.chart.setOption(actualOptions);
|
||||||
},
|
},
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-29 14:48:06
|
* @Date: 2024-05-29 14:48:06
|
||||||
* @LastEditTime: 2024-06-07 14:11:01
|
* @LastEditTime: 2024-06-07 09:30:17
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -49,7 +49,7 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
xAxis() {
|
xAxis() {
|
||||||
console.log(' this.companyId', this.companyId);
|
console.log(' this.companyId', this.companyId);
|
||||||
return this.companyId === 0 ? ["FTO投入", "芯片产量", "标准组件产量"] : ["FTO投入", "芯片产量", "标准组件产量", 'BIPV产量'];
|
return this.companyId === 0 ? ["fto投入", "芯片产量", "标准组件产量"] : ["fto投入", "芯片产量", "标准组件产量", 'BIPV产量'];
|
||||||
},
|
},
|
||||||
legend() {
|
legend() {
|
||||||
let items = [];
|
let items = [];
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<left-container title="工单监控" icon="order">
|
<left-container title="工单监控" icon="order">
|
||||||
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
|
<order :prodOrder="prodOrder" />
|
||||||
</left-container>
|
</left-container>
|
||||||
<!-- <db-container title="" icon="store"> -->
|
<!-- <db-container title="" icon="store"> -->
|
||||||
<!-- <store :stock="stock" /> -->
|
<!-- <store :stock="stock" /> -->
|
||||||
@ -47,7 +47,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
type: '目标产量',
|
|
||||||
companyId: 1,
|
companyId: 1,
|
||||||
companyName: "邯郸中建材光电材料有限公司",
|
companyName: "邯郸中建材光电材料有限公司",
|
||||||
period: 1,
|
period: 1,
|
||||||
@ -76,10 +75,6 @@ export default {
|
|||||||
this.getMes();
|
this.getMes();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateType(val) {
|
|
||||||
console.log(val)
|
|
||||||
this.type = val
|
|
||||||
},
|
|
||||||
updateCompany(obj) {
|
updateCompany(obj) {
|
||||||
this.companyId = obj.companyId;
|
this.companyId = obj.companyId;
|
||||||
this.companyName = obj.companyName;
|
this.companyName = obj.companyName;
|
||||||
|
@ -45,11 +45,8 @@ export default {
|
|||||||
legend() {
|
legend() {
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -61,13 +58,13 @@ export default {
|
|||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
if (this.period === '日' && this.than === '同比') {
|
if (this.period === '日' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
|
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
|
||||||
{ label: `${yesterday}日`, color: "#58adfa" },
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${dayBeYes}日`, color: "#12f7f1" },
|
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||||
{ label: `${yesterday}日`, color: "#58adfa" },
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
@ -152,11 +149,8 @@ export default {
|
|||||||
function getTemplate(period, dataList,than) {
|
function getTemplate(period, dataList,than) {
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -169,11 +163,11 @@ function getTemplate(period, dataList,than) {
|
|||||||
if (period === '日' && than === '同比') {
|
if (period === '日' && than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
name: `${year - 1}年${yesterday}日`,
|
name: `${year-1}年${month}月${today}日`,
|
||||||
data: dataList ? dataList[0] : [],
|
data: dataList ? dataList[0] : [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${yesterday}日`,
|
name: `${month}月${today}日`,
|
||||||
data: dataList ? dataList[1] : [],
|
data: dataList ? dataList[1] : [],
|
||||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||||
},
|
},
|
||||||
@ -181,11 +175,11 @@ function getTemplate(period, dataList,than) {
|
|||||||
} else if (period === '日' && than === '环比') {
|
} else if (period === '日' && than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
name: `${dayBeYes}日`,
|
name: `${yesterday}日`,
|
||||||
data: dataList ? dataList[0] : [],
|
data: dataList ? dataList[0] : [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${yesterday}日`,
|
name: `${month}月${today}日`,
|
||||||
data: dataList ? dataList[1] : [],
|
data: dataList ? dataList[1] : [],
|
||||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||||
},
|
},
|
||||||
|
@ -45,11 +45,8 @@ export default {
|
|||||||
legend() {
|
legend() {
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -61,13 +58,13 @@ export default {
|
|||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
if (this.period === '日' && this.than === '同比') {
|
if (this.period === '日' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
|
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" },
|
||||||
{ label: `${yesterday}日`, color: "#58adfa" },
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${dayBeYes}日`, color: "#12f7f1" },
|
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||||
{ label: `${yesterday}日`, color: "#58adfa" },
|
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||||
];
|
];
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
@ -153,15 +150,9 @@ export default {
|
|||||||
|
|
||||||
function getTemplate(period, dataList,than) {
|
function getTemplate(period, dataList,than) {
|
||||||
let items = [];
|
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();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -174,11 +165,11 @@ function getTemplate(period, dataList,than) {
|
|||||||
if (period === '日' && than === '同比') {
|
if (period === '日' && than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
name: `${year - 1}年${yesterday}日`,
|
name: `${year-1}年${month}月${today}日`,
|
||||||
data: dataList ? dataList[0] : [],
|
data: dataList ? dataList[0] : [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${yesterday}日`,
|
name: `${month}月${today}日`,
|
||||||
data: dataList ? dataList[1] : [],
|
data: dataList ? dataList[1] : [],
|
||||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||||
},
|
},
|
||||||
@ -186,11 +177,11 @@ function getTemplate(period, dataList,than) {
|
|||||||
} else if (period === '日' && than === '环比') {
|
} else if (period === '日' && than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
name: `${dayBeYes}日`,
|
name: `${yesterday}日`,
|
||||||
data: dataList ? dataList[0] : [],
|
data: dataList ? dataList[0] : [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `${yesterday}日`,
|
name: `${month}月${today}日`,
|
||||||
data: dataList ? dataList[1] : [],
|
data: dataList ? dataList[1] : [],
|
||||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||||
},
|
},
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-20 13:32:59
|
* @Date: 2024-05-20 13:32:59
|
||||||
* @LastEditTime: 2024-06-14 09:44:42
|
* @LastEditTime: 2024-06-06 08:42:04
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -78,13 +78,13 @@ export default {
|
|||||||
valueTuple() {
|
valueTuple() {
|
||||||
// [previousValue, currentValue, sumValue?]
|
// [previousValue, currentValue, sumValue?]
|
||||||
const getter = this.$store.getters.copilot.yield[this.dataSourceField];
|
const getter = this.$store.getters.copilot.yield[this.dataSourceField];
|
||||||
// if (this.period === "日" || this.period === "周") {
|
if (this.period === "日" || this.period === "周") {
|
||||||
// console.log(this.period)
|
console.log(this.period)
|
||||||
// return [
|
return [
|
||||||
// getter.previous[this.factoryId],
|
getter.previous[this.factoryId],
|
||||||
// getter.current[this.factoryId],
|
getter.current[this.factoryId],
|
||||||
// ];
|
];
|
||||||
// }
|
}
|
||||||
// [100, 200, 200]
|
// [100, 200, 200]
|
||||||
return [
|
return [
|
||||||
getter.previous[this.factoryId],
|
getter.previous[this.factoryId],
|
||||||
@ -100,11 +100,8 @@ export default {
|
|||||||
const vt = this.valueTuple;
|
const vt = this.valueTuple;
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -116,14 +113,14 @@ export default {
|
|||||||
// const year = new Date().getFullYear();
|
// const year = new Date().getFullYear();
|
||||||
if (this.period === '日' && this.than === '同比') {
|
if (this.period === '日' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${yesterday}日累计`,},
|
{ label: `${month}月${today}日累计`,},
|
||||||
{ label: `${year - 1}年${yesterday}累计` },
|
{ label: `${year-1}年${month}月${today}日累计` },
|
||||||
{ label: `${month}月${today}日目标`, },
|
{ label: `${month}月${today}日目标`, },
|
||||||
];
|
];
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${yesterday}日累计`},
|
{ label: `${month}月${today}日累计`},
|
||||||
{ label: `${dayBeYes}日累计` },
|
{ label: `${yesterday}日累计` },
|
||||||
{ label: `${month}月${today}日目标`, },
|
{ label: `${month}月${today}日目标`, },
|
||||||
];
|
];
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
@ -163,9 +160,9 @@ export default {
|
|||||||
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0
|
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0
|
||||||
? "100%" : '0%',
|
? "100%" : '0%',
|
||||||
subtitle =
|
subtitle =
|
||||||
this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
|
this.period == "日" ? `${month}月${today}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
|
||||||
console.log('titleValue', items)
|
console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
|
||||||
// console.log(this.valueTuple[2]- this.valueTuple[1])
|
console.log(this.valueTuple[2]- this.valueTuple[1])
|
||||||
return getOptions({
|
return getOptions({
|
||||||
titleValue,
|
titleValue,
|
||||||
subtitle,
|
subtitle,
|
||||||
@ -224,12 +221,8 @@ function calculateItems(period, valueTuple, than) {
|
|||||||
console.log('valueTuple', valueTuple);
|
console.log('valueTuple', valueTuple);
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
var day2 = new Date();
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
|
|
||||||
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
|
|
||||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||||
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
|
|
||||||
|
|
||||||
//今天的时间
|
//今天的时间
|
||||||
// var day2 = new Date();
|
// var day2 = new Date();
|
||||||
// day2.setTime(day2.getTime());
|
// day2.setTime(day2.getTime());
|
||||||
@ -241,14 +234,14 @@ function calculateItems(period, valueTuple, than) {
|
|||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
if (period === '日' && than === '同比') {
|
if (period === '日' && than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${year - 1}年${yesterday}累计`, value: valueTuple[0] },
|
{ label: `${year-1}年${month}月${today}日累计`, value: valueTuple[0] },
|
||||||
{ label: `${yesterday}累计`, value: valueTuple[1] },
|
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
||||||
{ label: `${month}月${today}日目标`, value: valueTuple[2] },
|
{ label: `${month}月${today}日目标`, value: valueTuple[2] },
|
||||||
];
|
];
|
||||||
} else if (period === '日' && than === '环比') {
|
} else if (period === '日' && than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${dayBeYes}日累计`, value: valueTuple[0] },
|
{ label: `${yesterday}日累计`, value: valueTuple[0] },
|
||||||
{ label: `${yesterday}日累计`, value: valueTuple[1] },
|
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
||||||
{ label: `${month}月${today}日目标`, value: valueTuple[2] },
|
{ label: `${month}月${today}日目标`, value: valueTuple[2] },
|
||||||
];
|
];
|
||||||
} else if (period === '周' && than === '同比') {
|
} else if (period === '周' && than === '同比') {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-28 13:42:51
|
* @Date: 2024-04-28 13:42:51
|
||||||
* @LastEditTime: 2024-06-14 09:03:26
|
* @LastEditTime: 2024-06-05 14:12:31
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -221,7 +221,6 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
actualOptions() {
|
actualOptions() {
|
||||||
console.log('this.output.current / this.output.target', this.output.current/this.output.target);
|
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const options = JSON.parse(JSON.stringify(this.options));
|
const options = JSON.parse(JSON.stringify(this.options));
|
||||||
// console.log('options', options);
|
// console.log('options', options);
|
||||||
@ -229,7 +228,7 @@ export default {
|
|||||||
if (!this.output.target) options.title.text = "0%";
|
if (!this.output.target) options.title.text = "0%";
|
||||||
else
|
else
|
||||||
options.title.text =
|
options.title.text =
|
||||||
((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
|
(this.output.current / this.output.target) * 100 + "%";
|
||||||
// 外环
|
// 外环
|
||||||
if (
|
if (
|
||||||
this.output.current == this.output.target &&
|
this.output.current == this.output.target &&
|
||||||
|
@ -59,7 +59,7 @@ export default {
|
|||||||
actualOptions: null,
|
actualOptions: null,
|
||||||
options: {
|
options: {
|
||||||
grid: {
|
grid: {
|
||||||
left: "5%",
|
left: "3%",
|
||||||
right: "4%",
|
right: "4%",
|
||||||
bottom: "0",
|
bottom: "0",
|
||||||
top: "15%",
|
top: "15%",
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-28 13:42:51
|
* @Date: 2024-04-28 13:42:51
|
||||||
* @LastEditTime: 2024-06-14 09:16:09
|
* @LastEditTime: 2024-06-04 15:35:54
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -65,7 +65,7 @@ export default {
|
|||||||
isFullscreen: false,
|
isFullscreen: false,
|
||||||
options: {
|
options: {
|
||||||
grid: {
|
grid: {
|
||||||
left: "5%",
|
left: "3%",
|
||||||
right: "4%",
|
right: "4%",
|
||||||
bottom: "0",
|
bottom: "0",
|
||||||
top: "18%",
|
top: "18%",
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
style="
|
style="
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12%;
|
top: 12%;
|
||||||
left: 15%;
|
left: 20%;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -31,7 +31,7 @@
|
|||||||
<p
|
<p
|
||||||
style="
|
style="
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 24px;
|
font-size: 26px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
color: #26b9de;
|
color: #26b9de;
|
||||||
opacity: 75%;
|
opacity: 75%;
|
||||||
@ -52,8 +52,8 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
src="../assets/images/map.png"
|
src="../assets/images/login.png"
|
||||||
style="position: absolute; top: 00%; left: 11%; width: 50vw"
|
style="position: absolute; top: 30%; left: 15%; width: 40vw"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-17 16:31:51
|
* @Date: 2024-04-17 16:31:51
|
||||||
* @LastEditTime: 2024-06-07 14:44:22
|
* @LastEditTime: 2024-06-04 16:45:52
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -170,11 +170,6 @@
|
|||||||
<el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" />
|
<el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
|
||||||
<el-form-item label="标准组件转化效率" prop="componentConversionEfficiency">
|
|
||||||
<el-input-number v-model="dataForm.componentConversionEfficiency" :precision="2" controls-position="right" placeholder="请输入标准组件转化效率" style="width: 100%" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
|
|
||||||
@ -298,8 +293,7 @@ export default {
|
|||||||
bipvInsideMaterialCost: undefined,
|
bipvInsideMaterialCost: undefined,
|
||||||
bipvOeeMaterialCost: undefined,
|
bipvOeeMaterialCost: undefined,
|
||||||
bipvComprehensiveMaterialCost: undefined,
|
bipvComprehensiveMaterialCost: undefined,
|
||||||
molybdenumElectrodeInput: undefined,
|
molybdenumElectrodeInput: undefined
|
||||||
componentConversionEfficiency: undefined
|
|
||||||
},
|
},
|
||||||
// materialList: [],
|
// materialList: [],
|
||||||
dataRule: {
|
dataRule: {
|
||||||
|
@ -1,15 +1,14 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-11-06 15:15:30
|
* @Date: 2023-11-06 15:15:30
|
||||||
* @LastEditTime: 2024-06-14 10:41:23
|
* @LastEditTime: 2024-06-04 16:54:46
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<el-drawer class="drawer" :visible.sync="visible" size="70%" @closed="$emit('destroy')">
|
<el-drawer class="drawer" :visible.sync="visible" size="58%" @closed="$emit('destroy')">
|
||||||
<small-title slot="title" :no-padding="true">
|
<small-title slot="title" :no-padding="true">
|
||||||
<!-- {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }} -->
|
{{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }}
|
||||||
生产目标详情
|
|
||||||
</small-title>
|
</small-title>
|
||||||
<div class="detailBox">
|
<div class="detailBox">
|
||||||
<el-row :gutter="24">
|
<el-row :gutter="24">
|
||||||
@ -114,10 +113,6 @@
|
|||||||
<p class="title">标准组件平均功率(W)</p>
|
<p class="title">标准组件平均功率(W)</p>
|
||||||
<p class="text">{{ dataForm.componentAveragePower }}</p>
|
<p class="text">{{ dataForm.componentAveragePower }}</p>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
|
||||||
<p class="title">标准组件转化效率</p>
|
|
||||||
<p class="text">{{ dataForm.componentConversionEfficiency }}</p>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
|
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
|
||||||
{{ 'BIPV产品' }}
|
{{ 'BIPV产品' }}
|
||||||
@ -202,9 +197,35 @@ export default {
|
|||||||
],
|
],
|
||||||
sectionList: [],
|
sectionList: [],
|
||||||
visible: false,
|
visible: false,
|
||||||
dataForm: {}
|
dataForm: {
|
||||||
|
id: undefined,
|
||||||
|
logTime: undefined,
|
||||||
|
source: 1,
|
||||||
|
detId: undefined,
|
||||||
|
workOrderId: null,
|
||||||
|
teamId: undefined,
|
||||||
|
num: undefined,
|
||||||
|
lineId: undefined,
|
||||||
|
description: undefined,
|
||||||
|
// description: undefined,
|
||||||
|
remark: undefined,
|
||||||
|
},
|
||||||
|
// materialList: [],
|
||||||
|
dataRule: {
|
||||||
|
// materialId: [{ required: true, message: "", trigger: "blur" }],
|
||||||
|
workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
|
||||||
|
num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
|
||||||
|
detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
|
||||||
|
|
||||||
|
logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getDict()
|
||||||
|
console.log('我看看', this.dataForm)
|
||||||
|
// this.getCurrentTime()
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(id) {
|
init(id) {
|
||||||
this.visible = true
|
this.visible = true
|
||||||
@ -214,7 +235,102 @@ export default {
|
|||||||
this.dataForm = res.data
|
this.dataForm = res.data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
// getCurrentTime() {
|
||||||
|
// // new Date().Format("yyyy-MM-dd HH:mm:ss")
|
||||||
|
// this.dataForm.logTime = new Date()
|
||||||
|
// // this.dataForm.logTime = year + "-" + month + "-" + day;
|
||||||
|
// console.log(this.dataForm.logTime);
|
||||||
|
// },
|
||||||
|
async getDict() {
|
||||||
|
// // 物料列表
|
||||||
|
// const res = await getList()
|
||||||
|
// this.typeList = res.data
|
||||||
|
// getWorkOrderList().then((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
// // console.log(response);
|
||||||
|
// this.workOrderList = res.data.map((item) => {
|
||||||
|
// return {
|
||||||
|
// name: item.name,
|
||||||
|
// id: item.id
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// // console.log(this.formConfig[0].selectOptions);
|
||||||
|
// // this.listQuery.total = response.data.total;
|
||||||
|
// })
|
||||||
|
// getLineList().then((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
// // console.log(response);
|
||||||
|
// this.lineList = res.data.map((item) => {
|
||||||
|
// return {
|
||||||
|
// name: item.name,
|
||||||
|
// id: item.id
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// // console.log(this.formConfig[0].selectOptions);
|
||||||
|
// // this.listQuery.total = response.data.total;
|
||||||
|
// })
|
||||||
|
// getDetList().then((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
// // console.log(response);
|
||||||
|
// this.detList = res.data.map((item) => {
|
||||||
|
// return {
|
||||||
|
// name: item.content,
|
||||||
|
// id: item.id
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// // console.log(this.formConfig[0].selectOptions);
|
||||||
|
// // this.listQuery.total = response.data.total;
|
||||||
|
// })
|
||||||
|
// getTeamList().then((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
// // console.log(response);
|
||||||
|
// this.teamList = res.data.map((item) => {
|
||||||
|
// return {
|
||||||
|
// name: item.name,
|
||||||
|
// id: item.id
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// // console.log(this.formConfig[0].selectOptions);
|
||||||
|
// // this.listQuery.total = response.data.total;
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// async getWorksectionById(lineId) {
|
||||||
|
// if (lineId) {
|
||||||
|
// const { code, data } = await this.$axios({
|
||||||
|
// url: '/base/core-workshop-section/listByParentId',
|
||||||
|
// method: 'get',
|
||||||
|
// params: {
|
||||||
|
// id: lineId,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// if (code == 0) {
|
||||||
|
// console.log(data)
|
||||||
|
// this.sectionList = data.map((item) => {
|
||||||
|
// return {
|
||||||
|
// name: item.name,
|
||||||
|
// id: item.id,
|
||||||
|
// };
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// this.$axios({
|
||||||
|
// url: '/base/core-workshop-section/listAll',
|
||||||
|
// method: 'get',
|
||||||
|
// // params: {
|
||||||
|
// // id: lineId,
|
||||||
|
// // },
|
||||||
|
// }).then((res) => {
|
||||||
|
// // console.log(data)
|
||||||
|
// this.sectionList = res.data.map((item) => {
|
||||||
|
// return {
|
||||||
|
// name: item.name,
|
||||||
|
// id: item.id,
|
||||||
|
// };
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-11-06 15:15:30
|
* @Date: 2023-11-06 15:15:30
|
||||||
* @LastEditTime: 2024-06-14 10:55:21
|
* @LastEditTime: 2024-06-07 14:15:00
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -308,7 +308,7 @@ export default {
|
|||||||
this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
|
this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
|
||||||
this.equipmentLineChart.setOption({
|
this.equipmentLineChart.setOption({
|
||||||
title: {
|
title: {
|
||||||
text: '待制品分布',
|
text: '在制品分布',
|
||||||
left: 'center'
|
left: 'center'
|
||||||
// subtext: 'Fake Data'
|
// subtext: 'Fake Data'
|
||||||
},
|
},
|
||||||
@ -339,7 +339,7 @@ export default {
|
|||||||
{
|
{
|
||||||
data: yAxisList,
|
data: yAxisList,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '50%'
|
barWidth: '40px'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, true)
|
}, true)
|
||||||
@ -351,9 +351,6 @@ export default {
|
|||||||
text: '历史趋势',
|
text: '历史趋势',
|
||||||
left: 'center' // 设置标题居中
|
left: 'center' // 设置标题居中
|
||||||
},
|
},
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: xAxisList,
|
data: xAxisList,
|
||||||
|
@ -1,56 +1,28 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-15 10:49:13
|
* @Date: 2024-04-15 10:49:13
|
||||||
* @LastEditTime: 2024-06-14 11:04:04
|
* @LastEditTime: 2024-06-07 10:35:48
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
|
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
|
||||||
<el-row :gutter="10">
|
<div class="app-container" style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
|
||||||
<el-col :span="4">
|
<p style="margin-bottom: 0">数据概览</p>
|
||||||
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
|
<div class="view">
|
||||||
<!-- <p style="margin-bottom: 0">数据概览</p> -->
|
<div v-for="(item, index) in data" :key="index">
|
||||||
<div class="view">
|
<p style="color: rgb(194,128,255)">{{ item }}</p>
|
||||||
<div style="padding: 10px 0; width: 100%">
|
<p>{{ index }}</p>
|
||||||
<div class="topDiv">
|
|
||||||
<div style="width: 4px; height: 52px; background: #71CC8C; border-radius: 2px;"></div>
|
|
||||||
<div class="centerDiv">
|
|
||||||
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ inputNum }}</span>
|
|
||||||
<span style="font-size: 14px; color: rgba(0,0,0,0.85);">在制工单数量</span>
|
|
||||||
</div>
|
|
||||||
<svg-icon icon-class="workProcess" style="width: 26px; height: 26px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</div>
|
||||||
<el-col :span="20">
|
</div>
|
||||||
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
|
<div class="app-container" style="margin-top: 8px; height: auto;">
|
||||||
<!-- <p style="margin-bottom: 0">数据概览</p> -->
|
|
||||||
<div class="view">
|
|
||||||
<div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
|
|
||||||
<div class="topDiv">
|
|
||||||
<div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
|
|
||||||
<div class="centerDiv">
|
|
||||||
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
|
|
||||||
<span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
|
|
||||||
</div>
|
|
||||||
<svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<!-- <div class="app-container" style="margin-top: 8px; height: auto;">
|
|
||||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
|
||||||
</div> -->
|
|
||||||
<div class="app-container" style="margin-top: 8px;flex-grow: 1;">
|
|
||||||
<!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
|
|
||||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||||
|
</div>
|
||||||
|
<div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
|
||||||
|
<search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" />
|
||||||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
||||||
:table-data="tableData" :max-height="tableH">
|
:table-data="tableData">
|
||||||
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
|
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
|
||||||
:method-list="tableBtn" @clickBtn="handleClick" />
|
:method-list="tableBtn" @clickBtn="handleClick" />
|
||||||
</base-table>
|
</base-table>
|
||||||
@ -71,7 +43,6 @@ import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/or
|
|||||||
// import inputTable from './inputTable.vue';
|
// import inputTable from './inputTable.vue';
|
||||||
import lineChart from './lineChart';
|
import lineChart from './lineChart';
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import tableHeightMixin from "@/mixins/tableHeightMixin";
|
|
||||||
// import ButtonNav from '@/components/ButtonNav'
|
// import ButtonNav from '@/components/ButtonNav'
|
||||||
import basicPage from '@/mixins/basic-page'
|
import basicPage from '@/mixins/basic-page'
|
||||||
import AddOrUpdate from './add-or-updata';
|
import AddOrUpdate from './add-or-updata';
|
||||||
@ -82,13 +53,9 @@ import { publicFormatter } from "@/utils/dict";
|
|||||||
// import * as XLSX from 'xlsx'
|
// import * as XLSX from 'xlsx'
|
||||||
export default {
|
export default {
|
||||||
components: { lineChart, AddOrUpdate },
|
components: { lineChart, AddOrUpdate },
|
||||||
mixins: [basicPage, tableHeightMixin],
|
mixins: [basicPage],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
factorys: ['瑞昌中建材', '邯郸中建材', '株洲中建材', '佳木斯中建材', '成都中建材', '凯盛光伏', '蚌埠兴科'],
|
|
||||||
factoryNum: [0, 0, 0, 0, 0, 0, 0],
|
|
||||||
inputNum: 0,
|
|
||||||
heightNum: 210,
|
|
||||||
factoryList,
|
factoryList,
|
||||||
factoryArray,
|
factoryArray,
|
||||||
listQuery: {
|
listQuery: {
|
||||||
@ -212,8 +179,6 @@ export default {
|
|||||||
{
|
{
|
||||||
prop: 'workOrderNumber',
|
prop: 'workOrderNumber',
|
||||||
label: '工单号',
|
label: '工单号',
|
||||||
minWidth: 120,
|
|
||||||
showOverflowtooltip: true
|
|
||||||
// filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
|
// filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -246,8 +211,8 @@ export default {
|
|||||||
{
|
{
|
||||||
prop: 'orderStatus',
|
prop: 'orderStatus',
|
||||||
label: '工单状态',
|
label: '工单状态',
|
||||||
// filter: publicFormatter('workorder_status')
|
filter: publicFormatter('workorder_status')
|
||||||
filter: (val) => ['未开始', '生产中', '已完成'][val],
|
// filter: (val) => ['未开始', '生产中', '已完成'][val],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'startTime',
|
prop: 'startTime',
|
||||||
@ -264,15 +229,15 @@ export default {
|
|||||||
],
|
],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
xAxis: [],
|
xAxis: [],
|
||||||
lineData: {}
|
lineData: {},
|
||||||
// data: {}
|
data: {}
|
||||||
// proLineList: [],
|
// proLineList: [],
|
||||||
// all: {}
|
// all: {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
const today = new Date()
|
const today = new Date()
|
||||||
const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
|
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
|
||||||
this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')]
|
this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')]
|
||||||
this.formConfig[2].defaultSelect = this.listQuery.time
|
this.formConfig[2].defaultSelect = this.listQuery.time
|
||||||
},
|
},
|
||||||
@ -282,19 +247,8 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
getOverView() {
|
getOverView() {
|
||||||
getOverView().then(res => {
|
getOverView().then(res => {
|
||||||
// this.data = res.data
|
this.data = res.data
|
||||||
if (res.code === 0) {
|
console.log('aa', res.data)
|
||||||
for(const i in res.data) {
|
|
||||||
if (i === '在制工单数量') {
|
|
||||||
this.inputNum = res.data[i]
|
|
||||||
} else {
|
|
||||||
const index = this.factorys.indexOf(i)
|
|
||||||
if (index > -1) {
|
|
||||||
this.factoryNum[index] = res.data[i]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
otherMethods(val) {
|
otherMethods(val) {
|
||||||
@ -363,18 +317,10 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.centerDiv {
|
/* .blueTip { */
|
||||||
display: flex;
|
/* padding-bottom: 10px; */
|
||||||
flex-direction: column;
|
/* } */
|
||||||
justify-content: flex-start;
|
/* .blueTi */
|
||||||
}
|
|
||||||
.topDiv {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.view {
|
.view {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
@ -396,7 +342,7 @@ export default {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 16px 16px 0;
|
padding: 16px 16px 0;
|
||||||
height: calc(100vh - 80px);
|
height: calc(100vh - 134px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,253 +0,0 @@
|
|||||||
<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>
|
|
@ -1,244 +0,0 @@
|
|||||||
<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>
|
|
@ -1,244 +0,0 @@
|
|||||||
<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>
|
|
@ -1,253 +0,0 @@
|
|||||||
<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>
|
|
@ -1,213 +0,0 @@
|
|||||||
<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>
|
|
@ -1,136 +0,0 @@
|
|||||||
<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>
|
|
@ -1,148 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @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>
|
|
@ -1,218 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @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>
|
|
@ -1,460 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @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>
|
|
@ -1,253 +0,0 @@
|
|||||||
<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>
|
|
@ -1,292 +0,0 @@
|
|||||||
<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>
|
|
@ -1,253 +0,0 @@
|
|||||||
<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>
|
|
@ -1,450 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @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>
|
|
@ -1,244 +0,0 @@
|
|||||||
<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>
|
|
@ -1,244 +0,0 @@
|
|||||||
<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>
|
|
@ -1,253 +0,0 @@
|
|||||||
<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>
|
|
@ -1,283 +0,0 @@
|
|||||||
<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>
|
|
Loading…
Reference in New Issue
Block a user