更新
This commit is contained in:
parent
43ba33062b
commit
19dbe38458
@ -1,8 +1,8 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-09-12 14:07:04
|
* @Date: 2023-09-12 14:07:04
|
||||||
* @LastEditTime: 2023-09-13 09:53:45
|
* @LastEditTime: 2025-01-08 15:47:17
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zwq
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
@ -22,3 +22,26 @@ export function getCT(data) {
|
|||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 获取产线平衡分析数据(new)
|
||||||
|
export function getNewCTNow(data) {
|
||||||
|
return request({
|
||||||
|
url: '/analysis/production-analysis/getNewCTNow',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 获取产线平衡分析数据趋势图(new)
|
||||||
|
export function getNewCTCharts(data) {
|
||||||
|
return request({
|
||||||
|
url: '/analysis/production-analysis/getNewCTCharts',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 获取产线平衡分析数据设备list(new)
|
||||||
|
export function getNewCTDet(id) {
|
||||||
|
return request({
|
||||||
|
url: '/analysis/production-analysis/getNewCTDet?lineId='+id,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2023-09-12 09:44:53
|
* @Date: 2023-09-12 09:44:53
|
||||||
* @LastEditTime: 2023-09-13 16:11:41
|
* @LastEditTime: 2025-01-07 09:57:36
|
||||||
* @LastEditors: DY
|
* @LastEditors: zwq
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
@ -17,9 +17,26 @@ export function getPdlAutoReport(data) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 获得所有工厂产线列表
|
// 获得所有工厂产线列表
|
||||||
export function getPdList() {
|
export function getPdList(id) {
|
||||||
return request({
|
return request({
|
||||||
url: '/base/production-line/listAll',
|
url: '/base/production-line/listAll' + (id ? '?id=' + id : ''),
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 获得产线自动报表
|
||||||
|
export function getLineAuto(data) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/production-monitor/getPdlAutoReportNew',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获得产品自动报表
|
||||||
|
export function getProductAuto(data) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/production-monitor/getProcessAutoReportNew',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
* @Date: 2023-09-12 09:44:53
|
* @Date: 2023-09-12 09:44:53
|
||||||
* @LastEditTime: 2023-09-14 10:25:46
|
* @LastEditTime: 2023-09-14 10:25:46
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
@ -22,4 +22,21 @@ export function getPdList() {
|
|||||||
url: '/base/production-line/listAll',
|
url: '/base/production-line/listAll',
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 产线统计数据查询-历史
|
||||||
|
export function getPdlAutoReportNewSearch(data) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/production-monitor/getPdlAutoReportNewSearch',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 产线统计数据查询-当前
|
||||||
|
export function getPdlAutoReportNewSearchNow(data) {
|
||||||
|
return request({
|
||||||
|
url: '/monitoring/production-monitor/getPdlAutoReportNewSearchNow',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
@ -98,7 +98,7 @@ export default {
|
|||||||
prop: 'sectionDataType',
|
prop: 'sectionDataType',
|
||||||
label: '工段数据类型',
|
label: '工段数据类型',
|
||||||
filter: (val) =>
|
filter: (val) =>
|
||||||
val != null ? ['无类型', '进口计数', '出口计数'][val] : '-',
|
val != null ? ['无类型', '进口计数', '出口计数', '进出口计数'][val] : '-',
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// action: 'show-alert',
|
// action: 'show-alert',
|
||||||
@ -209,8 +209,8 @@ export default {
|
|||||||
label: '产线数据类型',
|
label: '产线数据类型',
|
||||||
options: [
|
options: [
|
||||||
{ label: '无类型', value: 0 },
|
{ label: '无类型', value: 0 },
|
||||||
{ label: '进口统计', value: 1 },
|
{ label: '进口计数', value: 1 },
|
||||||
{ label: '出口统计', value: 2 },
|
{ label: '出口计数', value: 2 },
|
||||||
],
|
],
|
||||||
prop: 'lineDataType',
|
prop: 'lineDataType',
|
||||||
},
|
},
|
||||||
@ -219,8 +219,9 @@ export default {
|
|||||||
label: '工段数据类型',
|
label: '工段数据类型',
|
||||||
options: [
|
options: [
|
||||||
{ label: '无类型', value: 0 },
|
{ label: '无类型', value: 0 },
|
||||||
{ label: '进口统计', value: 1 },
|
{ label: '进口计数', value: 1 },
|
||||||
{ label: '出口统计', value: 2 },
|
{ label: '出口计数', value: 2 },
|
||||||
|
{ label: '进出口计数', value: 3 },
|
||||||
],
|
],
|
||||||
prop: 'sectionDataType',
|
prop: 'sectionDataType',
|
||||||
},
|
},
|
||||||
|
198
src/views/core/analysis/balanceAnalysis/BarChart.vue
Normal file
198
src/views/core/analysis/balanceAnalysis/BarChart.vue
Normal file
@ -0,0 +1,198 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
ref="lineChart"
|
||||||
|
:id="id"
|
||||||
|
:class="className"
|
||||||
|
:style="{ height: height, width: width, marginLeft: '10px' }" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
require('echarts/theme/macarons'); // echarts theme
|
||||||
|
import resize from '@/utils/chartMixins/resize';
|
||||||
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
|
|
||||||
|
const animationDuration = 1000;
|
||||||
|
export default {
|
||||||
|
name: 'lineChart',
|
||||||
|
mixins: [resize],
|
||||||
|
props: {
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart',
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '300px',
|
||||||
|
},
|
||||||
|
barData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (!this.chart) {
|
||||||
|
this.chart = echarts.init(this.$refs.lineChart);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.chart.dispose();
|
||||||
|
this.chart = null;
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
barData: {
|
||||||
|
handler() {
|
||||||
|
if (this.chart) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.chart = echarts.init(this.$refs.lineChart);
|
||||||
|
this.initChart();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
const _this = this;
|
||||||
|
this.chart.setOption({
|
||||||
|
title: {
|
||||||
|
text: this.title
|
||||||
|
? '{space|}{tip|}{space|}{value|' + this.title + '}'
|
||||||
|
: '',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
tip: {
|
||||||
|
width: 6,
|
||||||
|
height: 6,
|
||||||
|
borderRadius: 50,
|
||||||
|
backgroundColor: '#288AFF',
|
||||||
|
},
|
||||||
|
space: {
|
||||||
|
width: 8,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: 'black',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['磨边节拍', '钢化节拍', '下片节拍'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: this.barData.edgeCt.map((item) => {
|
||||||
|
return parseTime(item.recordTime, '{m}-{d} {h}:{i}');
|
||||||
|
}),
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '节拍',
|
||||||
|
min: 0,
|
||||||
|
interval: 20,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} pcs/min',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '磨边节拍',
|
||||||
|
type: 'line',
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value + 'pcs/min';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.barData.edgeCt.map((item) => {
|
||||||
|
return item.ct;
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '钢化节拍',
|
||||||
|
type: 'line',
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value + 'pcs/min';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.barData.temperCt.map((item) => {
|
||||||
|
return item.ct;
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '下片节拍',
|
||||||
|
type: 'line',
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value + 'pcs/min';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.barData.downCt.map((item) => {
|
||||||
|
return item.ct;
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
273
src/views/core/analysis/balanceAnalysis/eq-detail.vue
Normal file
273
src/views/core/analysis/balanceAnalysis/eq-detail.vue
Normal file
@ -0,0 +1,273 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2023-08-24 14:47:58
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2025-01-09 10:04:17
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<base-table
|
||||||
|
:page="1"
|
||||||
|
:limit="999"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
:table-props="tableProps"
|
||||||
|
max-height="400"
|
||||||
|
:table-data="tableData">
|
||||||
|
<method-btn
|
||||||
|
v-if="tableData.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
:width="80"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleClick" />
|
||||||
|
</base-table>
|
||||||
|
<div v-if="eqChartData.length > 0" style="margin-top: 10px">
|
||||||
|
<search-bar
|
||||||
|
:formConfigs="formConfig"
|
||||||
|
ref="searchBarForm1"
|
||||||
|
@headBtnClick="buttonClick" />
|
||||||
|
<div
|
||||||
|
ref="lineChart"
|
||||||
|
id="chart"
|
||||||
|
:style="{ height: '400px', width: '100%', marginLeft: '10px' }" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getNewCTDet, getNewCTCharts } from '@/api/core/analysis/index';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
require('echarts/theme/macarons'); // echarts theme
|
||||||
|
import resize from '@/utils/chartMixins/resize';
|
||||||
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
|
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'equipmentName',
|
||||||
|
label: '设备',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'size',
|
||||||
|
label: '规格',
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'process',
|
||||||
|
label: '产品工艺',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'standardCt',
|
||||||
|
label: '标准节拍pcs/min',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ct',
|
||||||
|
label: '当前节拍pcs/min',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableProps,
|
||||||
|
tableData: [],
|
||||||
|
tableBtn: [
|
||||||
|
{
|
||||||
|
type: 'eqChart',
|
||||||
|
btnName: '趋势图',
|
||||||
|
},
|
||||||
|
].filter((v) => v),
|
||||||
|
dataListLoading: false,
|
||||||
|
time: {},
|
||||||
|
eqChartData: [],
|
||||||
|
eqName: null,
|
||||||
|
equipmentId: null,
|
||||||
|
chart: null,
|
||||||
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间范围',
|
||||||
|
dateType: 'datetimerange',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'timeVal',
|
||||||
|
width: 350,
|
||||||
|
clearable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.chart.dispose();
|
||||||
|
this.chart = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取数据列表
|
||||||
|
init(lineId, startTime, endTime) {
|
||||||
|
this.eqChartData = [];
|
||||||
|
this.time.startTime = startTime;
|
||||||
|
this.time.endTime = endTime;
|
||||||
|
this.dataListLoading = true;
|
||||||
|
getNewCTDet(lineId).then((response) => {
|
||||||
|
this.tableData = response.data;
|
||||||
|
this.dataListLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleClick(val) {
|
||||||
|
const data = {
|
||||||
|
...this.time,
|
||||||
|
equipmentId: val.data.equipmentId,
|
||||||
|
};
|
||||||
|
this.eqName = val.data.equipmentName;
|
||||||
|
this.equipmentId = val.data.equipmentId;
|
||||||
|
getNewCTCharts(data).then((response) => {
|
||||||
|
this.eqChartData = response.data;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.searchBarForm1.formInline.timeVal = [
|
||||||
|
this.time.startTime,
|
||||||
|
this.time.endTime,
|
||||||
|
];
|
||||||
|
this.initChart();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
buttonClick(val) {
|
||||||
|
switch (val.btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.time.startTime = val.timeVal ? val.timeVal[0] : undefined;
|
||||||
|
this.time.endTime = val.timeVal ? val.timeVal[1] : undefined;
|
||||||
|
const data = {
|
||||||
|
...this.time,
|
||||||
|
equipmentId: this.equipmentId,
|
||||||
|
};
|
||||||
|
getNewCTCharts(data).then((response) => {
|
||||||
|
this.eqChartData = response.data;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$refs.lineChart);
|
||||||
|
const _this = this;
|
||||||
|
this.chart.setOption({
|
||||||
|
title: {
|
||||||
|
text: this.eqName
|
||||||
|
? '{space|}{tip|}{space|}{value|' + this.eqName + ' 节拍趋势图' + '}'
|
||||||
|
: '',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
tip: {
|
||||||
|
width: 6,
|
||||||
|
height: 6,
|
||||||
|
borderRadius: 50,
|
||||||
|
backgroundColor: '#288AFF',
|
||||||
|
},
|
||||||
|
space: {
|
||||||
|
width: 8,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: 'black',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['当前节拍', '标准节拍'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: this.eqChartData[0].ct.map((item) => {
|
||||||
|
return parseTime(item.recordTime, '{m}-{d} {h}:{i}');
|
||||||
|
}),
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '节拍',
|
||||||
|
min: 0,
|
||||||
|
interval: 20,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} pcs/min',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '标准节拍',
|
||||||
|
type: 'line',
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value + 'pcs/min';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.eqChartData[0].ct.map((item) => {
|
||||||
|
return item.standardCt;
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '当前节拍',
|
||||||
|
type: 'line',
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value + 'pcs/min';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.eqChartData[0].ct.map((item) => {
|
||||||
|
return item.ct;
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
296
src/views/core/analysis/balanceAnalysis/index-old.vue
Normal file
296
src/views/core/analysis/balanceAnalysis/index-old.vue
Normal file
@ -0,0 +1,296 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<search-bar
|
||||||
|
:formConfigs="formConfig"
|
||||||
|
ref="searchBarForm"
|
||||||
|
@headBtnClick="buttonClick" />
|
||||||
|
<div v-if="tableData.length">
|
||||||
|
<base-table
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
:span-method="mergeColumnHandler"
|
||||||
|
:max-height="tableH"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData" />
|
||||||
|
<SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" />
|
||||||
|
<balance-chart ref="lineChart" />
|
||||||
|
</div>
|
||||||
|
<div v-else class="no-data-bg"></div>
|
||||||
|
<!-- <pagination
|
||||||
|
:limit.sync="listQuery.pageSize"
|
||||||
|
:page.sync="listQuery.pageNo"
|
||||||
|
:total="listQuery.total"
|
||||||
|
@pagination="getDataList" /> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import basicPage from '../../mixins/basic-page';
|
||||||
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
|
import { getCT } from '@/api/core/analysis/index';
|
||||||
|
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
||||||
|
import BalanceChart from '../balanceChart';
|
||||||
|
import { time } from 'echarts';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
|
||||||
|
|
||||||
|
// const tableProps = [
|
||||||
|
// // {
|
||||||
|
// // prop: 'lineName',
|
||||||
|
// // label: '产线',
|
||||||
|
// // align: 'center',
|
||||||
|
// // },
|
||||||
|
// // {
|
||||||
|
// // prop: 'sum',
|
||||||
|
// // label: '合计',
|
||||||
|
// // align: 'center',
|
||||||
|
// // },
|
||||||
|
// // {
|
||||||
|
// // prop: 'dynamicValue',
|
||||||
|
// // label: 'dynamicName',
|
||||||
|
// // align: 'center',
|
||||||
|
// // children:[
|
||||||
|
|
||||||
|
// // ]
|
||||||
|
// // }
|
||||||
|
// ];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
BalanceChart,
|
||||||
|
},
|
||||||
|
mixins: [tableHeightMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
urlOptions: {
|
||||||
|
getDataListURL: getCT,
|
||||||
|
},
|
||||||
|
tableProps: [],
|
||||||
|
dataListLoading: false,
|
||||||
|
tableData: [],
|
||||||
|
listQuery: {
|
||||||
|
// time: ''
|
||||||
|
endTime: undefined,
|
||||||
|
lineId: undefined,
|
||||||
|
startTime: undefined,
|
||||||
|
},
|
||||||
|
timeList: [],
|
||||||
|
spanArr: [],
|
||||||
|
xData: [],
|
||||||
|
yData: [],
|
||||||
|
optionArrUrl: [getProductionLinePage],
|
||||||
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'lineIds',
|
||||||
|
defaultSelect: '',
|
||||||
|
multiple: false,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间',
|
||||||
|
dateType: 'datetimerange',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
width: 350,
|
||||||
|
param: 'time',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getArr();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getArr() {
|
||||||
|
const params = {
|
||||||
|
page: 1,
|
||||||
|
limit: 500,
|
||||||
|
};
|
||||||
|
this.optionArrUrl.forEach((item, index) => {
|
||||||
|
item(params).then((response) => {
|
||||||
|
this.formConfig[index].selectOptions = response.data.list;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setRowSpan(arr) {
|
||||||
|
let count = 0;
|
||||||
|
arr.forEach((item, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
this.spanArr.push(1);
|
||||||
|
} else {
|
||||||
|
if (item === arr[index - 1]) {
|
||||||
|
this.spanArr[count] += 1;
|
||||||
|
this.spanArr.push(0);
|
||||||
|
} else {
|
||||||
|
count = index;
|
||||||
|
this.spanArr.push(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 合并table列的规则 */
|
||||||
|
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
|
||||||
|
if (columnIndex == 0) {
|
||||||
|
if (this.spanArr[rowIndex]) {
|
||||||
|
return [
|
||||||
|
this.spanArr[rowIndex], // row span
|
||||||
|
1, // col span
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
return [0, 0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
// this.listQuery.lineId = '1672847052717821953'
|
||||||
|
// this.listQuery.startTime = '1693497600000';
|
||||||
|
// this.listQuery.endTime = '1693843200000';
|
||||||
|
this.urlOptions.getDataListURL(this.listQuery).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
let arr = [
|
||||||
|
{
|
||||||
|
prop: 'sectionName',
|
||||||
|
label: '工段',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'equName',
|
||||||
|
label: '设备',
|
||||||
|
align: 'center',
|
||||||
|
width: 150
|
||||||
|
},
|
||||||
|
];
|
||||||
|
let sectionArr = [];
|
||||||
|
res.data.data.forEach((ele, index) => {
|
||||||
|
let tempData = [];
|
||||||
|
let ggData = [];
|
||||||
|
let sbluData = [];
|
||||||
|
let sbsjData = [];
|
||||||
|
let cxluData = [];
|
||||||
|
let cxsjData = [];
|
||||||
|
ele.data.forEach((item, index) => {
|
||||||
|
item.children.forEach((params) => {
|
||||||
|
if (params.dynamicName === '生产规格') {
|
||||||
|
tempData[item.dynamicName + '_gg'] = params.dynamicValue;
|
||||||
|
ggData[index] = params.dynamicValue;
|
||||||
|
} else if (params.dynamicName === '设备理论速度') {
|
||||||
|
tempData[item.dynamicName + '_sblu'] = params.dynamicValue;
|
||||||
|
sbluData[index] = params.dynamicValue;
|
||||||
|
} else if (params.dynamicName === '设备实际速度') {
|
||||||
|
tempData[item.dynamicName + '_sbsj'] = params.dynamicValue;
|
||||||
|
sbsjData[index] = params.dynamicValue;
|
||||||
|
} else if (params.dynamicName === '产线理论速度') {
|
||||||
|
tempData[item.dynamicName + '_cxlu'] = params.dynamicValue;
|
||||||
|
cxluData[index] = params.dynamicValue;
|
||||||
|
} else if(params.dynamicName === '产线实际速度') {
|
||||||
|
tempData[item.dynamicName + '_cxsj'] = params.dynamicValue;
|
||||||
|
cxsjData[index] = params.dynamicValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const equipment = {
|
||||||
|
name: ele.equName,
|
||||||
|
ggData: ggData,
|
||||||
|
sbluData: sbluData,
|
||||||
|
sbsjData: sbsjData,
|
||||||
|
cxluData: cxluData,
|
||||||
|
cxsjData: cxsjData,
|
||||||
|
};
|
||||||
|
tempData['equName'] = ele.equName;
|
||||||
|
tempData['sectionName'] = ele.sectionName;
|
||||||
|
this.tableData.push(tempData);
|
||||||
|
const { sectionName } = tempData;
|
||||||
|
sectionArr.push(sectionName);
|
||||||
|
this.yData.push(equipment);
|
||||||
|
});
|
||||||
|
this.setRowSpan(sectionArr);
|
||||||
|
res.data.nameData.forEach((item) => {
|
||||||
|
this.timeList.push(item.name);
|
||||||
|
});
|
||||||
|
const timeArray = Array.from(new Set(this.timeList));
|
||||||
|
console.log(timeArray)
|
||||||
|
for (const times of timeArray) {
|
||||||
|
if (times !== '生产规格' && times !== '设备理论速度' && times !== '设备实际速度'
|
||||||
|
&& times !== '产线理论速度' && times !== '产线实际速度'
|
||||||
|
) {
|
||||||
|
const subprop = {
|
||||||
|
label: times,
|
||||||
|
align: 'center',
|
||||||
|
children: [
|
||||||
|
{ prop: times + '_gg', label: '生产规格', align: 'center' },
|
||||||
|
{ prop: times + '_sblu', label: '设备理论速度[片/min]', align: 'center' },
|
||||||
|
{ prop: times + '_sbsj', label: '设备实际速度[片/min]', align: 'center' },
|
||||||
|
{ prop: times + '_cxlu', label: '产线理论速度[片/min]', align: 'center' },
|
||||||
|
{ prop: times + '_cxsj', label: '产线实际速度[片/min]', align: 'center' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
arr.push(subprop);
|
||||||
|
this.xData.push(times);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.tableProps = arr;
|
||||||
|
|
||||||
|
console.log(this.$refs)
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.$refs.lineChart.initChart(this.xData, this.yData);
|
||||||
|
})
|
||||||
|
// this.total = response.data.total;
|
||||||
|
// this.dataListLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
buttonClick(val) {
|
||||||
|
// console.log(val)
|
||||||
|
switch (val.btnName) {
|
||||||
|
case 'search':
|
||||||
|
// this.listQuery.pageNo = 1;
|
||||||
|
// this.listQuery.pageSize = 10;
|
||||||
|
this.listQuery.lineId = val.lineIds;
|
||||||
|
this.listQuery.startTime = val.time
|
||||||
|
? String(new Date(val.time[0]).getTime())
|
||||||
|
: undefined;
|
||||||
|
this.listQuery.endTime = val.time
|
||||||
|
? String(new Date(val.time[1]).getTime())
|
||||||
|
: undefined;
|
||||||
|
if (val.time && val.lineIds) {
|
||||||
|
this.tableData = [];
|
||||||
|
this.xData = [];
|
||||||
|
this.yData = [];
|
||||||
|
this.tableProps = [];
|
||||||
|
this.spanArr = [];
|
||||||
|
this.timeList = [];
|
||||||
|
this.getData();
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: '请选择产线和时间',
|
||||||
|
type: 'warning',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'reset':
|
||||||
|
this.$refs.searchBarForm.resetForm();
|
||||||
|
this.listQuery = {
|
||||||
|
pageSize: 10,
|
||||||
|
pageNo: 1,
|
||||||
|
total: 1,
|
||||||
|
};
|
||||||
|
this.getDataList();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
@ -1,104 +1,162 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: Do not edit
|
||||||
|
* @Date: 2023-08-29 14:59:29
|
||||||
|
* @LastEditTime: 2025-01-09 10:27:53
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<search-bar
|
<search-bar
|
||||||
:formConfigs="formConfig"
|
:formConfigs="formConfig"
|
||||||
ref="searchBarForm"
|
ref="searchBarForm"
|
||||||
|
@select-changed="handleSearchBarChanged"
|
||||||
@headBtnClick="buttonClick" />
|
@headBtnClick="buttonClick" />
|
||||||
<div v-if="tableData.length">
|
<div v-if="showData.length">
|
||||||
<base-table
|
<base-table
|
||||||
|
class="right-aside"
|
||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
:span-method="mergeColumnHandler"
|
|
||||||
:max-height="tableH"
|
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
:table-data="tableData" />
|
:page="1"
|
||||||
<SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" />
|
:limit="999"
|
||||||
<balance-chart ref="lineChart" />
|
:table-data="showData">
|
||||||
|
<method-btn
|
||||||
|
v-if="showData.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
:width="80"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleClick" />
|
||||||
|
</base-table>
|
||||||
|
<barChart
|
||||||
|
v-for="item in chartData"
|
||||||
|
:key="item.name + 'echart'"
|
||||||
|
style="margin-top: 50px"
|
||||||
|
height="600px"
|
||||||
|
:id="item.name + 'echart'"
|
||||||
|
:title="item.name + ' 节拍趋势图'"
|
||||||
|
:bar-data="item" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="no-data-bg"></div>
|
<div v-else class="no-data-bg"></div>
|
||||||
<!-- <pagination
|
<base-dialog
|
||||||
:limit.sync="listQuery.pageSize"
|
:dialogTitle="addOrEditTitle"
|
||||||
:page.sync="listQuery.pageNo"
|
:dialogVisible="addOrUpdateVisible"
|
||||||
:total="listQuery.total"
|
@cancel="handleCancel"
|
||||||
@pagination="getDataList" /> -->
|
@confirm="handleConfirm"
|
||||||
|
:before-close="handleCancel"
|
||||||
|
close-on-click-modal
|
||||||
|
top="0"
|
||||||
|
width="50%">
|
||||||
|
<eq-detail ref="eqDetail" />
|
||||||
|
<slot name="footer">
|
||||||
|
<el-row slot="footer" type="flex" justify="end">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-button size="small" class="btnTextStyle" @click="handleCancel">
|
||||||
|
取消
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</slot>
|
||||||
|
</base-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import basicPage from '../../mixins/basic-page';
|
import eqDetail from './eq-detail';
|
||||||
import { parseTime } from '../../mixins/code-filter';
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
import { getCT } from '@/api/core/analysis/index';
|
import { getPdList } from '@/api/core/monitoring/auto';
|
||||||
import { getProductionLinePage } from '@/api/core/base/productionLine';
|
import { getNewCTNow, getNewCTCharts } from '@/api/core/analysis/index';
|
||||||
import BalanceChart from '../balanceChart';
|
import { getFactoryPage } from '@/api/core/base/factory';
|
||||||
import { time } from 'echarts';
|
// import codeFilter from '../../mixins/code-filter'
|
||||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
import * as XLSX from 'xlsx';
|
||||||
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
|
import FileSaver from 'file-saver';
|
||||||
|
import barChart from './BarChart.vue';
|
||||||
|
|
||||||
// const tableProps = [
|
const tableProps = [
|
||||||
// // {
|
{
|
||||||
// // prop: 'lineName',
|
prop: 'factoryName',
|
||||||
// // label: '产线',
|
label: '工厂',
|
||||||
// // align: 'center',
|
},
|
||||||
// // },
|
{
|
||||||
// // {
|
prop: 'lineName',
|
||||||
// // prop: 'sum',
|
label: '产线',
|
||||||
// // label: '合计',
|
},
|
||||||
// // align: 'center',
|
{
|
||||||
// // },
|
prop: 'size',
|
||||||
// // {
|
label: '规格',
|
||||||
// // prop: 'dynamicValue',
|
showOverflowtooltip: true,
|
||||||
// // label: 'dynamicName',
|
},
|
||||||
// // align: 'center',
|
{
|
||||||
// // children:[
|
prop: 'process',
|
||||||
|
label: '产品工艺',
|
||||||
// // ]
|
},
|
||||||
// // }
|
{
|
||||||
// ];
|
prop: 'edgeCt',
|
||||||
|
label: '磨边当前节拍pcs/min',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'temperCt',
|
||||||
|
label: '钢化当前节拍pcs/min',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'downCt',
|
||||||
|
label: '下片当前节拍pcs/min',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
BalanceChart,
|
barChart,
|
||||||
|
eqDetail,
|
||||||
},
|
},
|
||||||
mixins: [tableHeightMixin],
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
getDataListURL: getCT,
|
getDataListURL: getNewCTNow,
|
||||||
},
|
},
|
||||||
tableProps: [],
|
|
||||||
dataListLoading: false,
|
|
||||||
tableData: [],
|
|
||||||
listQuery: {
|
listQuery: {
|
||||||
// time: ''
|
lineId: [],
|
||||||
endTime: undefined,
|
|
||||||
lineId: undefined,
|
|
||||||
startTime: undefined,
|
|
||||||
},
|
},
|
||||||
timeList: [],
|
fileName: '',
|
||||||
spanArr: [],
|
dataListLoading: false,
|
||||||
xData: [],
|
tableProps,
|
||||||
yData: [],
|
tableBtn: [
|
||||||
optionArrUrl: [getProductionLinePage],
|
{
|
||||||
|
type: 'eq',
|
||||||
|
btnName: '详情',
|
||||||
|
},
|
||||||
|
].filter((v) => v),
|
||||||
|
showData: [],
|
||||||
|
tableData: [],
|
||||||
|
chartData: [],
|
||||||
formConfig: [
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工厂',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'factoryId',
|
||||||
|
onchange: true,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
label: '产线',
|
label: '产线',
|
||||||
selectOptions: [],
|
selectOptions: [],
|
||||||
param: 'lineIds',
|
param: 'lineId',
|
||||||
defaultSelect: '',
|
multiple: true,
|
||||||
multiple: false,
|
|
||||||
filterable: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'datePicker',
|
type: 'datePicker',
|
||||||
label: '时间',
|
label: '时间范围',
|
||||||
dateType: 'datetimerange',
|
dateType: 'datetimerange',
|
||||||
format: 'yyyy-MM-dd',
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
valueFormat: 'timestamp',
|
||||||
rangeSeparator: '-',
|
rangeSeparator: '-',
|
||||||
startPlaceholder: '开始时间',
|
startPlaceholder: '开始时间',
|
||||||
endPlaceholder: '结束时间',
|
endPlaceholder: '结束时间',
|
||||||
|
defaultTime: ['00:00:00', '23:59:59'],
|
||||||
|
param: 'timeVal',
|
||||||
width: 350,
|
width: 350,
|
||||||
param: 'time',
|
clearable: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
@ -106,191 +164,139 @@ export default {
|
|||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// type: 'separate',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// // type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||||
|
// type: 'button',
|
||||||
|
// btnName: '导出',
|
||||||
|
// name: 'export',
|
||||||
|
// color: 'warning',
|
||||||
|
// },
|
||||||
],
|
],
|
||||||
|
addOrEditTitle: '',
|
||||||
|
addOrUpdateVisible: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getArr();
|
// 获取当前时间
|
||||||
|
const now = new Date();
|
||||||
|
// 获取前一天的同一时间
|
||||||
|
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||||
|
// 设置为00:00:00
|
||||||
|
yesterday.setHours(0, 0, 0, 0);
|
||||||
|
// 设置为23:59:59
|
||||||
|
const end = new Date(yesterday.getTime());
|
||||||
|
end.setHours(23, 59, 59, 59);
|
||||||
|
this.listQuery.startTime = yesterday.getTime();
|
||||||
|
this.listQuery.endTime = end.getTime();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.searchBarForm.formInline.timeVal = [
|
||||||
|
yesterday.getTime(),
|
||||||
|
end.getTime(),
|
||||||
|
];
|
||||||
|
});
|
||||||
|
this.getDataList();
|
||||||
|
this.getPdLineList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getArr() {
|
handleExport() {
|
||||||
const params = {
|
let tables = document.querySelector('.el-table').cloneNode(true);
|
||||||
page: 1,
|
const fix = tables.querySelector('.el-table__fixed');
|
||||||
limit: 500,
|
const fixRight = tables.querySelector('.el-table__fixed-right');
|
||||||
};
|
if (fix) {
|
||||||
this.optionArrUrl.forEach((item, index) => {
|
tables.removeChild(tables.querySelector('.el-table__fixed'));
|
||||||
item(params).then((response) => {
|
|
||||||
this.formConfig[index].selectOptions = response.data.list;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
setRowSpan(arr) {
|
|
||||||
let count = 0;
|
|
||||||
arr.forEach((item, index) => {
|
|
||||||
if (index === 0) {
|
|
||||||
this.spanArr.push(1);
|
|
||||||
} else {
|
|
||||||
if (item === arr[index - 1]) {
|
|
||||||
this.spanArr[count] += 1;
|
|
||||||
this.spanArr.push(0);
|
|
||||||
} else {
|
|
||||||
count = index;
|
|
||||||
this.spanArr.push(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/** 合并table列的规则 */
|
|
||||||
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
|
|
||||||
if (columnIndex == 0) {
|
|
||||||
if (this.spanArr[rowIndex]) {
|
|
||||||
return [
|
|
||||||
this.spanArr[rowIndex], // row span
|
|
||||||
1, // col span
|
|
||||||
];
|
|
||||||
} else {
|
|
||||||
return [0, 0];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
if (fixRight) {
|
||||||
getData() {
|
tables.removeChild(tables.querySelector('.el-table__fixed-right'));
|
||||||
// this.listQuery.lineId = '1672847052717821953'
|
}
|
||||||
// this.listQuery.startTime = '1693497600000';
|
let exportTable = XLSX.utils.table_to_book(tables);
|
||||||
// this.listQuery.endTime = '1693843200000';
|
|
||||||
this.urlOptions.getDataListURL(this.listQuery).then((res) => {
|
|
||||||
console.log(res);
|
|
||||||
let arr = [
|
|
||||||
{
|
|
||||||
prop: 'sectionName',
|
|
||||||
label: '工段',
|
|
||||||
align: 'center',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'equName',
|
|
||||||
label: '设备',
|
|
||||||
align: 'center',
|
|
||||||
width: 150
|
|
||||||
},
|
|
||||||
];
|
|
||||||
let sectionArr = [];
|
|
||||||
res.data.data.forEach((ele, index) => {
|
|
||||||
let tempData = [];
|
|
||||||
let ggData = [];
|
|
||||||
let sbluData = [];
|
|
||||||
let sbsjData = [];
|
|
||||||
let cxluData = [];
|
|
||||||
let cxsjData = [];
|
|
||||||
ele.data.forEach((item, index) => {
|
|
||||||
item.children.forEach((params) => {
|
|
||||||
if (params.dynamicName === '生产规格') {
|
|
||||||
tempData[item.dynamicName + '_gg'] = params.dynamicValue;
|
|
||||||
ggData[index] = params.dynamicValue;
|
|
||||||
} else if (params.dynamicName === '设备理论速度') {
|
|
||||||
tempData[item.dynamicName + '_sblu'] = params.dynamicValue;
|
|
||||||
sbluData[index] = params.dynamicValue;
|
|
||||||
} else if (params.dynamicName === '设备实际速度') {
|
|
||||||
tempData[item.dynamicName + '_sbsj'] = params.dynamicValue;
|
|
||||||
sbsjData[index] = params.dynamicValue;
|
|
||||||
} else if (params.dynamicName === '产线理论速度') {
|
|
||||||
tempData[item.dynamicName + '_cxlu'] = params.dynamicValue;
|
|
||||||
cxluData[index] = params.dynamicValue;
|
|
||||||
} else if(params.dynamicName === '产线实际速度') {
|
|
||||||
tempData[item.dynamicName + '_cxsj'] = params.dynamicValue;
|
|
||||||
cxsjData[index] = params.dynamicValue;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
const equipment = {
|
|
||||||
name: ele.equName,
|
|
||||||
ggData: ggData,
|
|
||||||
sbluData: sbluData,
|
|
||||||
sbsjData: sbsjData,
|
|
||||||
cxluData: cxluData,
|
|
||||||
cxsjData: cxsjData,
|
|
||||||
};
|
|
||||||
tempData['equName'] = ele.equName;
|
|
||||||
tempData['sectionName'] = ele.sectionName;
|
|
||||||
this.tableData.push(tempData);
|
|
||||||
const { sectionName } = tempData;
|
|
||||||
sectionArr.push(sectionName);
|
|
||||||
this.yData.push(equipment);
|
|
||||||
});
|
|
||||||
this.setRowSpan(sectionArr);
|
|
||||||
res.data.nameData.forEach((item) => {
|
|
||||||
this.timeList.push(item.name);
|
|
||||||
});
|
|
||||||
const timeArray = Array.from(new Set(this.timeList));
|
|
||||||
console.log(timeArray)
|
|
||||||
for (const times of timeArray) {
|
|
||||||
if (times !== '生产规格' && times !== '设备理论速度' && times !== '设备实际速度'
|
|
||||||
&& times !== '产线理论速度' && times !== '产线实际速度'
|
|
||||||
) {
|
|
||||||
const subprop = {
|
|
||||||
label: times,
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{ prop: times + '_gg', label: '生产规格', align: 'center' },
|
|
||||||
{ prop: times + '_sblu', label: '设备理论速度', align: 'center' },
|
|
||||||
{ prop: times + '_sbsj', label: '设备实际速度', align: 'center' },
|
|
||||||
{ prop: times + '_cxlu', label: '产线理论速度', align: 'center' },
|
|
||||||
{ prop: times + '_cxsj', label: '产线实际速度', align: 'center' },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
arr.push(subprop);
|
|
||||||
this.xData.push(times);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.tableProps = arr;
|
|
||||||
|
|
||||||
console.log(this.$refs)
|
var exportTableOut = XLSX.write(exportTable, {
|
||||||
this.$nextTick(()=>{
|
bookType: 'xlsx',
|
||||||
this.$refs.lineChart.initChart(this.xData, this.yData);
|
bookSST: true,
|
||||||
})
|
type: 'array',
|
||||||
// this.total = response.data.total;
|
});
|
||||||
// this.dataListLoading = false;
|
// sheetjs.xlsx为导出表格的标题名称
|
||||||
|
try {
|
||||||
|
FileSaver.saveAs(
|
||||||
|
new Blob([exportTableOut], {
|
||||||
|
type: 'application/octet-stream',
|
||||||
|
}),
|
||||||
|
this.fileName + '产线自动报表.xlsx'
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
if (typeof console !== 'undefined') console.log(e, exportTableOut);
|
||||||
|
}
|
||||||
|
return exportTableOut;
|
||||||
|
},
|
||||||
|
getPdLineList() {
|
||||||
|
getPdList().then((res) => {
|
||||||
|
this.formConfig[1].selectOptions = res.data || [];
|
||||||
|
});
|
||||||
|
const params = {
|
||||||
|
pageSize: 100,
|
||||||
|
pageNo: 1,
|
||||||
|
};
|
||||||
|
getFactoryPage(params).then((res) => {
|
||||||
|
this.formConfig[0].selectOptions = res.data.list || [];
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
// console.log(val)
|
|
||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
// this.listQuery.pageNo = 1;
|
this.listQuery.factoryId = val.factoryId || undefined;
|
||||||
// this.listQuery.pageSize = 10;
|
this.listQuery.lineId = val.lineId ? val.lineId : [];
|
||||||
this.listQuery.lineId = val.lineIds;
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
|
||||||
this.listQuery.startTime = val.time
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
|
||||||
? String(new Date(val.time[0]).getTime())
|
|
||||||
: undefined;
|
|
||||||
this.listQuery.endTime = val.time
|
|
||||||
? String(new Date(val.time[1]).getTime())
|
|
||||||
: undefined;
|
|
||||||
if (val.time && val.lineIds) {
|
|
||||||
this.tableData = [];
|
|
||||||
this.xData = [];
|
|
||||||
this.yData = [];
|
|
||||||
this.tableProps = [];
|
|
||||||
this.spanArr = [];
|
|
||||||
this.timeList = [];
|
|
||||||
this.getData();
|
|
||||||
} else {
|
|
||||||
this.$message({
|
|
||||||
message: '请选择产线和时间',
|
|
||||||
type: 'warning',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'reset':
|
|
||||||
this.$refs.searchBarForm.resetForm();
|
|
||||||
this.listQuery = {
|
|
||||||
pageSize: 10,
|
|
||||||
pageNo: 1,
|
|
||||||
total: 1,
|
|
||||||
};
|
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
break;
|
break;
|
||||||
|
case 'export':
|
||||||
|
this.handleExport();
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
console.log(val);
|
console.log(val);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 获取数据列表
|
||||||
|
getDataList() {
|
||||||
|
this.dataListLoading = true;
|
||||||
|
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||||
|
this.tableData = response.data;
|
||||||
|
this.dataListLoading = false;
|
||||||
|
this.showData = this.tableData;
|
||||||
|
});
|
||||||
|
getNewCTCharts(this.listQuery).then((response) => {
|
||||||
|
this.chartData = response.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSearchBarChanged({ param, value }) {
|
||||||
|
this.listQuery.lineId = [];
|
||||||
|
this.$refs.searchBarForm.formInline.lineId = undefined;
|
||||||
|
getPdList(value).then((res) => {
|
||||||
|
this.formConfig[1].selectOptions = res.data || [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleClick(val) {
|
||||||
|
this.addOrUpdateVisible = true;
|
||||||
|
this.addOrEditTitle =
|
||||||
|
val.data?.factoryName + '-' + val.data?.lineName + ' 详情';
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.eqDetail.init(
|
||||||
|
val.data.lineId,
|
||||||
|
this.listQuery.startTime,
|
||||||
|
this.listQuery.endTime
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleCancel() {
|
||||||
|
this.addOrUpdateVisible = false;
|
||||||
|
this.addOrEditTitle = '';
|
||||||
|
},
|
||||||
|
handleConfirm() {
|
||||||
|
this.handleCancel();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -99,7 +99,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item
|
<el-form-item
|
||||||
label="设备TT值"
|
label="设备理论生产能效(片/min)"
|
||||||
prop="tvalue"
|
prop="tvalue"
|
||||||
:rules="[
|
:rules="[
|
||||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||||
@ -113,7 +113,7 @@
|
|||||||
<el-input
|
<el-input
|
||||||
v-model="form.tvalue"
|
v-model="form.tvalue"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
placeholder="请输入设备TT值"></el-input>
|
placeholder="请输入"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
@ -295,7 +295,7 @@ export default {
|
|||||||
{
|
{
|
||||||
input: true,
|
input: true,
|
||||||
prop: 'tvalue',
|
prop: 'tvalue',
|
||||||
label: '设备TT值',
|
label: '设备理论生产能效(片/min)',
|
||||||
rules: [
|
rules: [
|
||||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||||
{
|
{
|
||||||
|
@ -12,6 +12,7 @@
|
|||||||
:rules="dataRule"
|
:rules="dataRule"
|
||||||
ref="dataForm"
|
ref="dataForm"
|
||||||
@keyup.enter.native="dataFormSubmit()"
|
@keyup.enter.native="dataFormSubmit()"
|
||||||
|
label-position="top"
|
||||||
label-width="90px">
|
label-width="90px">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
@ -48,11 +49,11 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="产线TT值(h)" prop="tvalue">
|
<el-form-item label="产线理论生产能效(片/min)" prop="tvalue">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.tvalue"
|
v-model="dataForm.tvalue"
|
||||||
clearable
|
clearable
|
||||||
placeholder="请输入每小时下片数量" />
|
placeholder="请输入数量" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
@ -48,6 +48,7 @@ import {
|
|||||||
exportProductionLineExcel,
|
exportProductionLineExcel,
|
||||||
getStatus,
|
getStatus,
|
||||||
} from '@/api/core/base/productionLine';
|
} from '@/api/core/base/productionLine';
|
||||||
|
import { getFactoryPage } from '@/api/core/base/factory';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
@ -121,6 +122,13 @@ export default {
|
|||||||
].filter((v) => v),
|
].filter((v) => v),
|
||||||
tableData: [],
|
tableData: [],
|
||||||
formConfig: [
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工厂',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'factoryId',
|
||||||
|
onchange: true,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
label: '产线名称',
|
label: '产线名称',
|
||||||
@ -168,7 +176,15 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
AddOrUpdate,
|
AddOrUpdate,
|
||||||
},
|
},
|
||||||
created() {},
|
created() {
|
||||||
|
const params = {
|
||||||
|
pageSize: 100,
|
||||||
|
pageNo: 1,
|
||||||
|
};
|
||||||
|
getFactoryPage(params).then((res) => {
|
||||||
|
this.formConfig[0].selectOptions = res.data.list || [];
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取数据列表
|
// 获取数据列表
|
||||||
getDataList() {
|
getDataList() {
|
||||||
@ -197,6 +213,7 @@ export default {
|
|||||||
case 'search':
|
case 'search':
|
||||||
this.listQuery.pageNo = 1;
|
this.listQuery.pageNo = 1;
|
||||||
this.listQuery.pageSize = 10;
|
this.listQuery.pageSize = 10;
|
||||||
|
this.listQuery.factoryId = val.factoryId || undefined;
|
||||||
this.listQuery.name = val.name;
|
this.listQuery.name = val.name;
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
break;
|
break;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2023-08-29 14:59:29
|
* @Date: 2023-08-29 14:59:29
|
||||||
* @LastEditTime: 2024-11-20 15:17:53
|
* @LastEditTime: 2024-12-02 13:59:32
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -92,7 +92,8 @@ const tableProps = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'outputArea',
|
prop: 'outputArea',
|
||||||
label: '产出面积/㎡'
|
label: '产出面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossNum',
|
prop: 'lossNum',
|
||||||
@ -100,11 +101,13 @@ const tableProps = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossArea',
|
prop: 'lossArea',
|
||||||
label: '损耗面积/㎡'
|
label: '损耗面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossRatio',
|
prop: 'lossRatio',
|
||||||
label: '损耗比例%'
|
label: '损耗比例%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -180,7 +183,6 @@ export default {
|
|||||||
startPlaceholder: '开始时间',
|
startPlaceholder: '开始时间',
|
||||||
endPlaceholder: '结束时间',
|
endPlaceholder: '结束时间',
|
||||||
param: 'timeVal',
|
param: 'timeVal',
|
||||||
defaultSelect: [],
|
|
||||||
width: 350
|
width: 350
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
170
src/views/core/monitoring/data/BarChart.vue
Normal file
170
src/views/core/monitoring/data/BarChart.vue
Normal file
@ -0,0 +1,170 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="className"
|
||||||
|
:style="{ height: height, width: width, marginLeft: '10px' }" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
require('echarts/theme/macarons'); // echarts theme
|
||||||
|
import resize from '@/utils/chartMixins/resize';
|
||||||
|
|
||||||
|
const animationDuration = 1000;
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '300px',
|
||||||
|
},
|
||||||
|
barData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
targetId: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.chart.dispose();
|
||||||
|
this.chart = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, 'macarons');
|
||||||
|
const _this = this;
|
||||||
|
this.chart.setOption({
|
||||||
|
title: {
|
||||||
|
text: this.title
|
||||||
|
? '{space|}{tip|}{space|}{value|' + this.title + '}'
|
||||||
|
: '',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
tip: {
|
||||||
|
width: 6,
|
||||||
|
height: 6,
|
||||||
|
borderRadius: 50,
|
||||||
|
backgroundColor: '#288AFF',
|
||||||
|
},
|
||||||
|
space: {
|
||||||
|
width: 8,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: 'black',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['投入', '产出', '加工成品率'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: this.barData.map((item) => {
|
||||||
|
return item.lineName;
|
||||||
|
}),
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '投入/产出',
|
||||||
|
min: 0,
|
||||||
|
interval: 100,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} 片',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '加工成品率',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
interval: 10,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} %',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '投入',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '20',
|
||||||
|
data: this.barData.map((item) => {
|
||||||
|
return item.inputNum;
|
||||||
|
}),
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value + ' 片';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animationDuration,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '产出',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '20',
|
||||||
|
data: this.barData.map((item) => {
|
||||||
|
return item.outputNum;
|
||||||
|
}),
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value + ' 片';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animationDuration,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '加工成品率',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value + ' %';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: this.barData.map((item) => {
|
||||||
|
return item.processingRatio;
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
273
src/views/core/monitoring/data/baseTable.vue
Normal file
273
src/views/core/monitoring/data/baseTable.vue
Normal file
@ -0,0 +1,273 @@
|
|||||||
|
<template>
|
||||||
|
<div class="baseTable">
|
||||||
|
<el-table
|
||||||
|
:ref="id"
|
||||||
|
:data="renderData"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:border="cancelBorder ? false : true"
|
||||||
|
@current-change="currentChange"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
style="width: 100%"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: '#F2F4F9',
|
||||||
|
color: '#606266',
|
||||||
|
}">
|
||||||
|
<!-- 多选 -->
|
||||||
|
<el-table-column
|
||||||
|
v-if="selectWidth"
|
||||||
|
type="selection"
|
||||||
|
:width="selectWidth" />
|
||||||
|
<!-- 序号 -->
|
||||||
|
<el-table-column
|
||||||
|
v-if="page && limit"
|
||||||
|
prop="_pageIndex"
|
||||||
|
:width="pageWidth"
|
||||||
|
align="center"
|
||||||
|
:fixed="cancelPageFixed ? false : true">
|
||||||
|
<template slot="header">
|
||||||
|
<el-popover placement="bottom-start" width="300" trigger="click">
|
||||||
|
<div
|
||||||
|
class="setting-box"
|
||||||
|
style="max-height: 400px; overflow-y: auto">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in tableProps"
|
||||||
|
:key="'cb' + index"
|
||||||
|
v-model="selectedBox[index]"
|
||||||
|
:label="item.label" />
|
||||||
|
</div>
|
||||||
|
<i slot="reference" class="el-icon-s-tools" />
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
v-for="item in renderTableHeadList"
|
||||||
|
:key="item.prop"
|
||||||
|
v-bind="item"
|
||||||
|
:label="item.label"
|
||||||
|
:prop="item.prop"
|
||||||
|
:fixed="item.fixed || false"
|
||||||
|
:show-overflow-tooltip="item.showOverflowtooltip || false"
|
||||||
|
:sortable="item.sortable || false">
|
||||||
|
<template slot="header">
|
||||||
|
<span>{{ item.label }}</span>
|
||||||
|
</template>
|
||||||
|
<!-- 多表头 -->
|
||||||
|
<template v-if="item.children">
|
||||||
|
<el-table-column
|
||||||
|
v-for="sub in item.children"
|
||||||
|
:prop="sub.prop"
|
||||||
|
:key="sub.prop"
|
||||||
|
v-bind="sub"
|
||||||
|
:label="sub.label">
|
||||||
|
<template v-if="sub.children">
|
||||||
|
<el-table-column
|
||||||
|
v-for="ssub in sub.children"
|
||||||
|
:prop="ssub.prop"
|
||||||
|
:key="ssub.prop"
|
||||||
|
v-bind="ssub"
|
||||||
|
:label="ssub.label">
|
||||||
|
<template slot-scope="sscopeInner">
|
||||||
|
<component
|
||||||
|
:is="ssub.subcomponent"
|
||||||
|
v-if="ssub.subcomponent"
|
||||||
|
:key="sscopeInner.row.id"
|
||||||
|
:inject-data="{ ...sscopeInner.row, ...ssub }"
|
||||||
|
@emitData="emitData" />
|
||||||
|
<span v-else>
|
||||||
|
{{ sscopeInner.row[ssub.prop] | commonFilter(ssub.filter) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scopeInner">
|
||||||
|
<component
|
||||||
|
:is="sub.subcomponent"
|
||||||
|
v-if="sub.subcomponent"
|
||||||
|
:key="scopeInner.row.id"
|
||||||
|
:inject-data="{ ...scopeInner.row, ...sub }"
|
||||||
|
@emitData="emitData" />
|
||||||
|
<span v-else>
|
||||||
|
{{ scopeInner.row[sub.prop] | commonFilter(sub.filter) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<component
|
||||||
|
:is="item.subcomponent"
|
||||||
|
v-if="item.subcomponent"
|
||||||
|
:key="scope.row.id"
|
||||||
|
:itemProp="item.prop"
|
||||||
|
:inject-data="{ ...scope.row, ...item }"
|
||||||
|
@emitData="emitData" />
|
||||||
|
<span v-else>
|
||||||
|
{{ scope.row[item.prop] | commonFilter(item.filter) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<slot name="handleBtn" />
|
||||||
|
</el-table>
|
||||||
|
<!-- 表格底部加号 -->
|
||||||
|
<el-button
|
||||||
|
v-if="addButtonShow"
|
||||||
|
class="addButton"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="emitButtonClick">
|
||||||
|
{{ addButtonShow }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'BaseTable',
|
||||||
|
filters: {
|
||||||
|
commonFilter: (source, filterType = (a) => a) => {
|
||||||
|
return filterType(source);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
cancelBorder: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
cancelPageFixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tableProps: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
page: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
pageWidth: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 70,
|
||||||
|
},
|
||||||
|
limit: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
selectWidth: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
addButtonShow: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedBox: new Array(100).fill(true),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
renderTableHeadList() {
|
||||||
|
return this.tableProps.filter((item, index) => {
|
||||||
|
return this.selectedBox[index];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
renderData() {
|
||||||
|
return this.tableData.map((item, index) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
_pageIndex: (this.page - 1) * this.limit + index + 1,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
this.selectedBox = new Array(100).fill(true);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
currentChange(newVal, oldVal) {
|
||||||
|
this.$emit('current-change', { newVal, oldVal });
|
||||||
|
},
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.$emit('selection-change', val);
|
||||||
|
},
|
||||||
|
emitData(val) {
|
||||||
|
this.$emit('emitFun', val);
|
||||||
|
},
|
||||||
|
emitButtonClick() {
|
||||||
|
this.$emit('emitButtonClick');
|
||||||
|
},
|
||||||
|
setCurrent(name, index) {
|
||||||
|
let _this = this;
|
||||||
|
let obj = _this.$refs[name].data[index];
|
||||||
|
_this.$refs[name].setCurrentRow(obj);
|
||||||
|
},
|
||||||
|
doLayout(name) {
|
||||||
|
this.$refs[name].doLayout();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.baseTable .show-col-btn {
|
||||||
|
margin-right: 5px;
|
||||||
|
line-height: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.baseTable .el-icon-refresh {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.baseTable .el-table__body tr.current-row > td.el-table__cell {
|
||||||
|
background-color: #eaf1fc;
|
||||||
|
}
|
||||||
|
.baseTable .el-table .el-table__cell {
|
||||||
|
padding: 0;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
.baseTable .addButton {
|
||||||
|
width: 100%;
|
||||||
|
height: 35px;
|
||||||
|
border-top: none;
|
||||||
|
color: #0b58ff;
|
||||||
|
border-color: #ebeef5;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.baseTable .addButton:hover {
|
||||||
|
color: #0b58ff;
|
||||||
|
border-color: #ebeef5;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.baseTable .addButton:focus {
|
||||||
|
border-color: #ebeef5;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tooltip__popper.is-dark {
|
||||||
|
background: rgba(0, 0, 0, 0.6) !important;
|
||||||
|
}
|
||||||
|
.el-tooltip__popper .popper__arrow,
|
||||||
|
.el-tooltip__popper .popper__arrow::after {
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.4) !important;
|
||||||
|
}
|
||||||
|
</style>
|
314
src/views/core/monitoring/data/index-old.vue
Normal file
314
src/views/core/monitoring/data/index-old.vue
Normal file
@ -0,0 +1,314 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: Do not edit
|
||||||
|
* @Date: 2023-08-29 14:59:29
|
||||||
|
* @LastEditTime: 2024-12-02 13:43:57
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<search-bar
|
||||||
|
:formConfigs="formConfig"
|
||||||
|
ref="searchBarForm"
|
||||||
|
@headBtnClick="buttonClick" />
|
||||||
|
<base-table
|
||||||
|
v-if="showData.length"
|
||||||
|
class="right-aside"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="listQuery.pageNo"
|
||||||
|
:limit="listQuery.pageSize"
|
||||||
|
:selectWidth="55"
|
||||||
|
:table-data="showData"
|
||||||
|
@selection-change="selectChange"
|
||||||
|
>
|
||||||
|
<method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
:width="120"
|
||||||
|
label="操作"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleClick" />
|
||||||
|
</base-table>
|
||||||
|
<div v-else class="no-data-bg"></div>
|
||||||
|
<pagination
|
||||||
|
:limit.sync="listQuery.pageSize"
|
||||||
|
:page.sync="listQuery.pageNo"
|
||||||
|
:total="listQuery.total"
|
||||||
|
@pagination="getDataList" />
|
||||||
|
<el-dialog
|
||||||
|
title="提示"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose">
|
||||||
|
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
||||||
|
<el-button type="success" @click="exportPdf">pdf</el-button>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
|
||||||
|
import * as XLSX from 'xlsx'
|
||||||
|
import FileSaver from 'file-saver'
|
||||||
|
import jsPDF from 'jspdf'
|
||||||
|
import html2canvas from 'html2canvas'
|
||||||
|
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'proLineName',
|
||||||
|
label: '产线名称'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'inputNum',
|
||||||
|
label: '投入数量/片'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputNum',
|
||||||
|
label: '产出数量/片'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputArea',
|
||||||
|
label: '产出面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossNum',
|
||||||
|
label: '损耗数量/片'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossArea',
|
||||||
|
label: '损耗面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossRate',
|
||||||
|
label: '损耗比例%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
urlOptions: {
|
||||||
|
getDataListURL: getPdlDataSearch
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
listQuery: {
|
||||||
|
pageSize: 10,
|
||||||
|
pageNo: 1,
|
||||||
|
total: 1,
|
||||||
|
proLineId: undefined
|
||||||
|
},
|
||||||
|
exportLoading: false,
|
||||||
|
dataListLoading: false,
|
||||||
|
dialogVisible: false,
|
||||||
|
addOrEditTitle: '',
|
||||||
|
addOrUpdateVisible: false,
|
||||||
|
tableProps,
|
||||||
|
tableBtn: [],
|
||||||
|
showData: [],
|
||||||
|
tableData: [],
|
||||||
|
selectedList: [],
|
||||||
|
fileName: '',
|
||||||
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'line'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间范围',
|
||||||
|
dateType: 'datetimerange',
|
||||||
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
|
valueFormat: "yyyy-MM-ddTHH:mm:ss",
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'timeVal',
|
||||||
|
defaultSelect: [],
|
||||||
|
width: 350
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||||
|
type: 'button',
|
||||||
|
btnName: '导出',
|
||||||
|
name: 'export',
|
||||||
|
color: 'warning',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.$route.params.startTime) {
|
||||||
|
this.formConfig[1].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
|
||||||
|
}
|
||||||
|
// const time = new Date()
|
||||||
|
// this.formConfig[1].defaultSelect = [time, time]
|
||||||
|
this.getDataList()
|
||||||
|
this.getPdLineList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
test() {
|
||||||
|
var target = document.getElementsByClassName("right-aside")[0]
|
||||||
|
target.style.background = '#FFFFFF'
|
||||||
|
var that = this
|
||||||
|
setTimeout(() => {
|
||||||
|
html2canvas(target).then(function(canvas) {
|
||||||
|
var contentWidth = canvas.width
|
||||||
|
var contentHeight = canvas.height
|
||||||
|
|
||||||
|
// 一页pdf显示html页面生成的canvas高度
|
||||||
|
var pageHeight = contentHeight / 592.28 * 841.89
|
||||||
|
// 未生成pdf的html页面高度
|
||||||
|
var leftHeight = contentHeight
|
||||||
|
// 页面偏移
|
||||||
|
var position = 0
|
||||||
|
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的高度
|
||||||
|
var imgWidth = 595.28
|
||||||
|
var imgHeight = 592.28 / contentWidth * contentHeight
|
||||||
|
|
||||||
|
var pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||||
|
|
||||||
|
console.log('nihc URL', leftHeight, pageHeight)
|
||||||
|
|
||||||
|
var pdf = new jsPDF('', 'pt', 'a4')
|
||||||
|
|
||||||
|
if (leftHeight < pageHeight) {
|
||||||
|
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
|
||||||
|
} else {
|
||||||
|
while(leftHeight > 0) {
|
||||||
|
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||||
|
leftHeight -= pageHeight
|
||||||
|
position -= 841.89
|
||||||
|
// 避免空白页
|
||||||
|
if (leftHeight > 0) {
|
||||||
|
pdf.addPage()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pdf.save(that.fileName + '产线产量.pdf')
|
||||||
|
})
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
exportECL() {
|
||||||
|
let tables = document.querySelector('.el-table').cloneNode(true)
|
||||||
|
const fix = tables.querySelector('.el-table__fixed')
|
||||||
|
const fixRight = tables.querySelector('.el-table__fixed-right')
|
||||||
|
if (fix) {
|
||||||
|
tables.removeChild(tables.querySelector('.el-table__fixed'))
|
||||||
|
}
|
||||||
|
if (fixRight) {
|
||||||
|
tables.removeChild(tables.querySelector('.el-table__fixed-right'))
|
||||||
|
}
|
||||||
|
let exportTable = XLSX.utils.table_to_book(tables)
|
||||||
|
|
||||||
|
var exportTableOut = XLSX.write(exportTable, {
|
||||||
|
bookType: 'xlsx', bookSST: true, type: 'array'
|
||||||
|
})
|
||||||
|
// sheetjs.xlsx为导出表格的标题名称
|
||||||
|
try {
|
||||||
|
FileSaver.saveAs(new Blob([exportTableOut], {
|
||||||
|
type: 'application/octet-stream'
|
||||||
|
}), this.fileName + '产线产量.xlsx')
|
||||||
|
} catch (e) {
|
||||||
|
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
||||||
|
}
|
||||||
|
return exportTableOut
|
||||||
|
},
|
||||||
|
exportPdf() {
|
||||||
|
this.test()
|
||||||
|
setTimeout(() =>{
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.showData = this.tableData
|
||||||
|
}, 600)
|
||||||
|
|
||||||
|
},
|
||||||
|
exportXlsx() {
|
||||||
|
this.exportECL()
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.showData = this.tableData
|
||||||
|
},
|
||||||
|
handleClose(done) {
|
||||||
|
this.$confirm('确认关闭?')
|
||||||
|
.then(_ => {
|
||||||
|
done();
|
||||||
|
})
|
||||||
|
.catch(_ => {});
|
||||||
|
},
|
||||||
|
getPdLineList() {
|
||||||
|
getPdList().then((res) => {
|
||||||
|
this.formConfig[0].selectOptions = res.data || []
|
||||||
|
})
|
||||||
|
},
|
||||||
|
selectChange(val) {
|
||||||
|
console.log(val)
|
||||||
|
this.selectedList = val
|
||||||
|
},
|
||||||
|
buttonClick(val) {
|
||||||
|
switch (val.btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.listQuery.pageNo = 1;
|
||||||
|
this.listQuery.pageSize = 10;
|
||||||
|
this.listQuery.proLineId = val.line ? val.line : undefined;
|
||||||
|
this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined;
|
||||||
|
this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined;
|
||||||
|
if (val.timeVal && val.timeVal.length > 0) {
|
||||||
|
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
|
||||||
|
}
|
||||||
|
this.getDataList();
|
||||||
|
break;
|
||||||
|
case 'export':
|
||||||
|
this.handleExport();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取数据列表
|
||||||
|
getDataList() {
|
||||||
|
this.dataListLoading = true;
|
||||||
|
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
||||||
|
this.tableData = response.data;
|
||||||
|
this.listQuery.total = response.data.length;
|
||||||
|
this.dataListLoading = false;
|
||||||
|
this.showData = this.tableData
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 每页数
|
||||||
|
sizeChangeHandle(val) {
|
||||||
|
this.listQuery.pageSize = val;
|
||||||
|
this.listQuery.pageNo = 1;
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
// 当前页
|
||||||
|
currentChangeHandle(val) {
|
||||||
|
this.listQuery.pageNo = val;
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
handleExport() {
|
||||||
|
if (this.selectedList.length > 0) {
|
||||||
|
this.showData = this.selectedList
|
||||||
|
}
|
||||||
|
this.dialogVisible = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
@ -1,138 +1,297 @@
|
|||||||
<!--
|
|
||||||
* @Author: Do not edit
|
|
||||||
* @Date: 2023-08-29 14:59:29
|
|
||||||
* @LastEditTime: 2023-10-16 15:18:23
|
|
||||||
* @LastEditors: DY
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div>
|
||||||
<search-bar
|
<div style="background: #f2f4f9; height: 40px; width: 100%">
|
||||||
:formConfigs="formConfig"
|
<ButtonNav :menus="['当前', '历史']" @change="currentMenu">
|
||||||
ref="searchBarForm"
|
<template v-slot:tab1>
|
||||||
@headBtnClick="buttonClick" />
|
<div>当前</div>
|
||||||
<base-table
|
</template>
|
||||||
v-if="showData.length"
|
<template v-slot:tab2>
|
||||||
class="right-aside"
|
<div>历史</div>
|
||||||
v-loading="dataListLoading"
|
</template>
|
||||||
:table-props="tableProps"
|
</ButtonNav>
|
||||||
:page="listQuery.pageNo"
|
</div>
|
||||||
:limit="listQuery.pageSize"
|
<div class="app-container energyOverlimitLog">
|
||||||
:selectWidth="55"
|
<div v-show="activeName === 'his'">
|
||||||
:table-data="showData"
|
<!-- 搜索工作栏 -->
|
||||||
@selection-change="selectChange"
|
<search-bar
|
||||||
>
|
:formConfigs="formConfig"
|
||||||
<method-btn
|
ref="searchBarForm"
|
||||||
v-if="tableBtn.length"
|
@select-changed="handleSearchBarChanged"
|
||||||
slot="handleBtn"
|
@headBtnClick="buttonClick" />
|
||||||
:width="120"
|
</div>
|
||||||
label="操作"
|
<div v-show="activeName === 'now'"></div>
|
||||||
:method-list="tableBtn"
|
<!-- 列表 -->
|
||||||
@clickBtn="handleClick" />
|
<div v-if="activeName === 'his'">
|
||||||
</base-table>
|
<base-table-s
|
||||||
<div v-else class="no-data-bg"></div>
|
:page="1"
|
||||||
<pagination
|
:limit="100"
|
||||||
:limit.sync="listQuery.pageSize"
|
:table-props="tableProps"
|
||||||
:page.sync="listQuery.pageNo"
|
:table-data="tableData"
|
||||||
:total="listQuery.total"
|
:max-height="tableH / 2"></base-table-s>
|
||||||
@pagination="getDataList" />
|
<div v-if="listQuery.lineId.length !== 1 && tableData.length > 0">
|
||||||
<el-dialog
|
<barChart
|
||||||
title="提示"
|
style="margin-top: 50px"
|
||||||
:visible.sync="dialogVisible"
|
ref="barChart"
|
||||||
width="30%"
|
height="600px"
|
||||||
:before-close="handleClose">
|
:bar-data="tableData" />
|
||||||
<el-button type="primary" @click="exportXlsx">xlsx</el-button>
|
</div>
|
||||||
<el-button type="success" @click="exportPdf">pdf</el-button>
|
</div>
|
||||||
<span slot="footer" class="dialog-footer">
|
<div v-if="activeName === 'now'">
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
<span class="blue-block"></span>
|
||||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
<span class="tip">当班数据</span>
|
||||||
</span>
|
<base-table-s
|
||||||
</el-dialog>
|
:page="1"
|
||||||
|
:limit="100"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData2"
|
||||||
|
:max-height="tableH / 2" />
|
||||||
|
<span class="blue-block"></span>
|
||||||
|
<span class="tip">当天数据</span>
|
||||||
|
<base-table-s
|
||||||
|
:page="1"
|
||||||
|
:limit="100"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:table-data="tableData3"
|
||||||
|
:max-height="tableH / 2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getPdlDataSearch, getPdList } from '@/api/core/monitoring/data'
|
import {
|
||||||
import * as XLSX from 'xlsx'
|
getPdlAutoReportNewSearch,
|
||||||
import FileSaver from 'file-saver'
|
getPdlAutoReportNewSearchNow,
|
||||||
import jsPDF from 'jspdf'
|
} from '@/api/core/monitoring/data';
|
||||||
import html2canvas from 'html2canvas'
|
import { getPdList } from '@/api/core/monitoring/auto';
|
||||||
|
import { getFactoryPage } from '@/api/core/base/factory';
|
||||||
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
import ButtonNav from '@/components/ButtonNav';
|
||||||
|
import baseTableS from './baseTable.vue';
|
||||||
|
import barChart from './BarChart.vue';
|
||||||
|
|
||||||
const tableProps = [
|
const tableProps = [
|
||||||
{
|
{
|
||||||
prop: 'proLineName',
|
prop: 'factoryName',
|
||||||
label: '产线名称'
|
label: '工厂',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'inputNum',
|
prop: 'lineName',
|
||||||
label: '投入数量/片'
|
label: '产线',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'outputNum',
|
prop: 'sizes',
|
||||||
label: '产出数量/片'
|
label: '规格',
|
||||||
|
width: 105,
|
||||||
|
showOverflowtooltip: true,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
prop: 'outputArea',
|
|
||||||
label: '产出面积/㎡'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'lossNum',
|
|
||||||
label: '损耗数量/片'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'lossArea',
|
|
||||||
label: '损耗面积/㎡'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'lossRate',
|
|
||||||
label: '损耗比例%'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
|
{
|
||||||
|
prop: 'inputN',
|
||||||
|
label: '投入',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'inputNum',
|
||||||
|
label: '投入数量/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'inputArea',
|
||||||
|
label: '投入面积/m²',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputN',
|
||||||
|
label: '产出',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'outputNum',
|
||||||
|
label: '产出数量/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputArea',
|
||||||
|
label: '产出面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossN',
|
||||||
|
label: '不良',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'lossNum',
|
||||||
|
label: '不良数量/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossArea',
|
||||||
|
label: '不良面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossRatio',
|
||||||
|
label: '不良率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputRatio',
|
||||||
|
label: '投入产出率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'processingRatio',
|
||||||
|
label: '加工成品率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossD',
|
||||||
|
label: '不良详情',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'original',
|
||||||
|
label: '原片',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'originalLossNum',
|
||||||
|
label: '原片不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'originalLossArea',
|
||||||
|
label: '原片不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'edge',
|
||||||
|
label: '磨边',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'edgeLossNum',
|
||||||
|
label: '磨边不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'edgeLossArea',
|
||||||
|
label: '磨边不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'drill',
|
||||||
|
label: '打孔',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'drillLossNum',
|
||||||
|
label: '打孔不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'drillLossArea',
|
||||||
|
label: '打孔不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'coating',
|
||||||
|
label: '镀膜',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'coatingLossNum',
|
||||||
|
label: '镀膜不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'coatingLossArea',
|
||||||
|
label: '镀膜不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'silk',
|
||||||
|
label: '丝印',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'silkLossNum',
|
||||||
|
label: '丝印不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'silkLossArea',
|
||||||
|
label: '丝印不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'tempering',
|
||||||
|
label: '钢化',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'temperingLossNum',
|
||||||
|
label: '钢化不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'temperingLossArea',
|
||||||
|
label: '钢化不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'packing',
|
||||||
|
label: '包装',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'packingLossNum',
|
||||||
|
label: '包装不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'packingLossArea',
|
||||||
|
label: '包装不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
export default {
|
export default {
|
||||||
|
name: '',
|
||||||
|
mixins: [tableHeightMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlOptions: {
|
urlOptions: {
|
||||||
getDataListURL: getPdlDataSearch
|
getDataListURL: getPdlAutoReportNewSearch,
|
||||||
},
|
},
|
||||||
tableData: [],
|
|
||||||
listQuery: {
|
|
||||||
pageSize: 10,
|
|
||||||
pageNo: 1,
|
|
||||||
total: 1,
|
|
||||||
proLineId: undefined
|
|
||||||
},
|
|
||||||
exportLoading: false,
|
|
||||||
dataListLoading: false,
|
|
||||||
dialogVisible: false,
|
|
||||||
addOrEditTitle: '',
|
|
||||||
addOrUpdateVisible: false,
|
|
||||||
tableProps,
|
|
||||||
tableBtn: [],
|
|
||||||
showData: [],
|
|
||||||
tableData: [],
|
|
||||||
selectedList: [],
|
|
||||||
fileName: '',
|
|
||||||
formConfig: [
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工厂',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'factoryId',
|
||||||
|
onchange: true,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
label: '产线',
|
label: '产线',
|
||||||
selectOptions: [],
|
selectOptions: [],
|
||||||
param: 'line'
|
param: 'lineId',
|
||||||
|
multiple: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'datePicker',
|
type: 'datePicker',
|
||||||
label: '时间范围',
|
label: '时间范围',
|
||||||
dateType: 'datetimerange',
|
dateType: 'daterange',
|
||||||
format: 'yyyy-MM-dd HH:mm:ss',
|
format: 'yyyy-MM-dd',
|
||||||
valueFormat: "yyyy-MM-ddTHH:mm:ss",
|
valueFormat: 'timestamp',
|
||||||
rangeSeparator: '-',
|
rangeSeparator: '-',
|
||||||
startPlaceholder: '开始时间',
|
startPlaceholder: '开始时间',
|
||||||
endPlaceholder: '结束时间',
|
endPlaceholder: '结束时间',
|
||||||
param: 'timeVal',
|
param: 'timeVal',
|
||||||
defaultSelect: [],
|
width: 350,
|
||||||
width: 350
|
},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: 'button',
|
type: 'button',
|
||||||
btnName: '查询',
|
btnName: '查询',
|
||||||
@ -148,129 +307,51 @@ export default {
|
|||||||
btnName: '导出',
|
btnName: '导出',
|
||||||
name: 'export',
|
name: 'export',
|
||||||
color: 'warning',
|
color: 'warning',
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
|
listQuery: {
|
||||||
|
lineId: [],
|
||||||
|
},
|
||||||
|
activeName: 'now',
|
||||||
|
tableProps,
|
||||||
|
tableData: [],
|
||||||
|
tableData2: [],
|
||||||
|
tableData3: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
ButtonNav,
|
||||||
|
baseTableS,
|
||||||
|
barChart,
|
||||||
|
},
|
||||||
created() {
|
created() {
|
||||||
if (this.$route.params.startTime) {
|
this.getPdLineList();
|
||||||
this.formConfig[1].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime]
|
|
||||||
}
|
|
||||||
// const time = new Date()
|
|
||||||
// this.formConfig[1].defaultSelect = [time, time]
|
|
||||||
this.getDataList()
|
|
||||||
this.getPdLineList()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
test() {
|
|
||||||
var target = document.getElementsByClassName("right-aside")[0]
|
|
||||||
target.style.background = '#FFFFFF'
|
|
||||||
var that = this
|
|
||||||
setTimeout(() => {
|
|
||||||
html2canvas(target).then(function(canvas) {
|
|
||||||
var contentWidth = canvas.width
|
|
||||||
var contentHeight = canvas.height
|
|
||||||
|
|
||||||
// 一页pdf显示html页面生成的canvas高度
|
|
||||||
var pageHeight = contentHeight / 592.28 * 841.89
|
|
||||||
// 未生成pdf的html页面高度
|
|
||||||
var leftHeight = contentHeight
|
|
||||||
// 页面偏移
|
|
||||||
var position = 0
|
|
||||||
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的高度
|
|
||||||
var imgWidth = 595.28
|
|
||||||
var imgHeight = 592.28 / contentWidth * contentHeight
|
|
||||||
|
|
||||||
var pageData = canvas.toDataURL('image/jpeg', 1.0)
|
|
||||||
|
|
||||||
console.log('nihc URL', leftHeight, pageHeight)
|
|
||||||
|
|
||||||
var pdf = new jsPDF('', 'pt', 'a4')
|
|
||||||
|
|
||||||
if (leftHeight < pageHeight) {
|
|
||||||
pdf.addImage(pageData, 'JPEG', 0, 20, imgWidth, imgHeight)
|
|
||||||
} else {
|
|
||||||
while(leftHeight > 0) {
|
|
||||||
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
|
||||||
leftHeight -= pageHeight
|
|
||||||
position -= 841.89
|
|
||||||
// 避免空白页
|
|
||||||
if (leftHeight > 0) {
|
|
||||||
pdf.addPage()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pdf.save(that.fileName + '产线产量.pdf')
|
|
||||||
})
|
|
||||||
}, 300)
|
|
||||||
},
|
|
||||||
exportECL() {
|
|
||||||
let tables = document.querySelector('.el-table').cloneNode(true)
|
|
||||||
const fix = tables.querySelector('.el-table__fixed')
|
|
||||||
const fixRight = tables.querySelector('.el-table__fixed-right')
|
|
||||||
if (fix) {
|
|
||||||
tables.removeChild(tables.querySelector('.el-table__fixed'))
|
|
||||||
}
|
|
||||||
if (fixRight) {
|
|
||||||
tables.removeChild(tables.querySelector('.el-table__fixed-right'))
|
|
||||||
}
|
|
||||||
let exportTable = XLSX.utils.table_to_book(tables)
|
|
||||||
|
|
||||||
var exportTableOut = XLSX.write(exportTable, {
|
|
||||||
bookType: 'xlsx', bookSST: true, type: 'array'
|
|
||||||
})
|
|
||||||
// sheetjs.xlsx为导出表格的标题名称
|
|
||||||
try {
|
|
||||||
FileSaver.saveAs(new Blob([exportTableOut], {
|
|
||||||
type: 'application/octet-stream'
|
|
||||||
}), this.fileName + '产线产量.xlsx')
|
|
||||||
} catch (e) {
|
|
||||||
if (typeof console !== 'undefined') console.log(e, exportTableOut)
|
|
||||||
}
|
|
||||||
return exportTableOut
|
|
||||||
},
|
|
||||||
exportPdf() {
|
|
||||||
this.test()
|
|
||||||
setTimeout(() =>{
|
|
||||||
this.dialogVisible = false
|
|
||||||
this.showData = this.tableData
|
|
||||||
}, 600)
|
|
||||||
|
|
||||||
},
|
|
||||||
exportXlsx() {
|
|
||||||
this.exportECL()
|
|
||||||
this.dialogVisible = false
|
|
||||||
this.showData = this.tableData
|
|
||||||
},
|
|
||||||
handleClose(done) {
|
|
||||||
this.$confirm('确认关闭?')
|
|
||||||
.then(_ => {
|
|
||||||
done();
|
|
||||||
})
|
|
||||||
.catch(_ => {});
|
|
||||||
},
|
|
||||||
getPdLineList() {
|
getPdLineList() {
|
||||||
getPdList().then((res) => {
|
getPdList().then((res) => {
|
||||||
this.formConfig[0].selectOptions = res.data || []
|
this.formConfig[1].selectOptions = res.data || [];
|
||||||
})
|
});
|
||||||
|
const params = {
|
||||||
|
pageSize: 100,
|
||||||
|
pageNo: 1,
|
||||||
|
};
|
||||||
|
getFactoryPage(params).then((res) => {
|
||||||
|
this.formConfig[0].selectOptions = res.data.list || [];
|
||||||
|
});
|
||||||
},
|
},
|
||||||
selectChange(val) {
|
|
||||||
console.log(val)
|
|
||||||
this.selectedList = val
|
|
||||||
},
|
|
||||||
buttonClick(val) {
|
buttonClick(val) {
|
||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
this.listQuery.pageNo = 1;
|
this.listQuery.factoryId = val.factoryId || undefined;
|
||||||
this.listQuery.pageSize = 10;
|
this.listQuery.lineId = val.lineId || [];
|
||||||
this.listQuery.proLineId = val.line ? val.line : undefined;
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
|
||||||
this.listQuery.startTime = val.timeVal ? new Date(val.timeVal[0]).getTime() : undefined;
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
|
||||||
this.listQuery.endTime = val.timeVal ? new Date(val.timeVal[1]).getTime() : undefined;
|
if (this.activeName === 'his') {
|
||||||
if (val.timeVal && val.timeVal.length > 0) {
|
this.getDataList();
|
||||||
this.fileName = val.timeVal[0].slice(0, 10) + '-' + val.timeVal[1].slice(0, 10) + '_'
|
} else {
|
||||||
}
|
this.getDataList2();
|
||||||
this.getDataList();
|
}
|
||||||
break;
|
break;
|
||||||
case 'export':
|
case 'export':
|
||||||
this.handleExport();
|
this.handleExport();
|
||||||
@ -279,33 +360,198 @@ export default {
|
|||||||
console.log(val);
|
console.log(val);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 获取数据列表
|
currentMenu(val) {
|
||||||
getDataList() {
|
this.activeName = val === '历史' ? 'his' : 'now';
|
||||||
this.dataListLoading = true;
|
if (this.activeName === 'his') {
|
||||||
this.urlOptions.getDataListURL(this.listQuery).then(response => {
|
this.$refs.searchBarForm.resetForm();
|
||||||
this.tableData = response.data;
|
this.listQuery.factoryId = undefined;
|
||||||
this.listQuery.total = response.data.length;
|
this.listQuery.lineId = [];
|
||||||
this.dataListLoading = false;
|
// 获取当前时间
|
||||||
this.showData = this.tableData
|
const now = new Date();
|
||||||
});
|
// 获取前一天的同一时间
|
||||||
},
|
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||||
// 每页数
|
// 设置为00:00:00
|
||||||
sizeChangeHandle(val) {
|
yesterday.setHours(0, 0, 0, 0);
|
||||||
this.listQuery.pageSize = val;
|
// 设置为23:59:59
|
||||||
this.listQuery.pageNo = 1;
|
const end = new Date(yesterday.getTime());
|
||||||
this.getDataList();
|
end.setHours(23, 59, 59, 59);
|
||||||
},
|
this.listQuery.startTime = yesterday.getTime();
|
||||||
// 当前页
|
this.listQuery.endTime = end.getTime();
|
||||||
currentChangeHandle(val) {
|
this.$nextTick(() => {
|
||||||
this.listQuery.pageNo = val;
|
this.$refs.searchBarForm.formInline.timeVal = [
|
||||||
this.getDataList();
|
yesterday.getTime(),
|
||||||
},
|
end.getTime(),
|
||||||
handleExport() {
|
];
|
||||||
if (this.selectedList.length > 0) {
|
});
|
||||||
this.showData = this.selectedList
|
this.getDataList();
|
||||||
|
} else {
|
||||||
|
this.getDataList2();
|
||||||
}
|
}
|
||||||
this.dialogVisible = true
|
},
|
||||||
}
|
// 获取数据列表
|
||||||
|
getDataList() {
|
||||||
|
if (this.listQuery.startTime) {
|
||||||
|
this.dataListLoading = true;
|
||||||
|
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||||
|
this.tableData = response.data.map((item, index) => {
|
||||||
|
item.originalLossNum = item.original?.lossNum;
|
||||||
|
item.originalLossArea = item.original?.lossArea;
|
||||||
|
item.edgeLossNum = item.edge?.lossNum;
|
||||||
|
item.edgeLossArea = item.edge?.lossArea;
|
||||||
|
item.drillLossNum = item.drill?.lossNum;
|
||||||
|
item.drillLossArea = item.drill?.lossArea;
|
||||||
|
item.coatingLossNum = item.coating?.lossNum;
|
||||||
|
item.coatingLossArea = item.coating?.lossArea;
|
||||||
|
item.silkLossNum = item.silk?.lossNum;
|
||||||
|
item.silkLossArea = item.silk?.lossArea;
|
||||||
|
item.temperingLossNum = item.tempering?.lossNum;
|
||||||
|
item.temperingLossArea = item.tempering?.lossArea;
|
||||||
|
item.packingLossNum = item.packing?.lossNum;
|
||||||
|
item.packingLossArea = item.packing?.lossArea;
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if(this.tableData.length>0){
|
||||||
|
this.$refs.barChart.initChart();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.dataListLoading = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$message.warning('请选择时间范围');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取数据2列表
|
||||||
|
getDataList2() {
|
||||||
|
getPdlAutoReportNewSearchNow().then((response) => {
|
||||||
|
this.tableData2 = response.data.classData.map((item, index) => {
|
||||||
|
item.originalLossNum = item.original?.lossNum;
|
||||||
|
item.originalLossArea = item.original?.lossArea;
|
||||||
|
item.edgeLossNum = item.edge?.lossNum;
|
||||||
|
item.edgeLossArea = item.edge?.lossArea;
|
||||||
|
item.drillLossNum = item.drill?.lossNum;
|
||||||
|
item.drillLossArea = item.drill?.lossArea;
|
||||||
|
item.coatingLossNum = item.coating?.lossNum;
|
||||||
|
item.coatingLossArea = item.coating?.lossArea;
|
||||||
|
item.silkLossNum = item.silk?.lossNum;
|
||||||
|
item.silkLossArea = item.silk?.lossArea;
|
||||||
|
item.temperingLossNum = item.tempering?.lossNum;
|
||||||
|
item.temperingLossArea = item.tempering?.lossArea;
|
||||||
|
item.packingLossNum = item.packing?.lossNum;
|
||||||
|
item.packingLossArea = item.packing?.lossArea;
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.tableData3 = response.data.todayData.map((item, index) => {
|
||||||
|
item.originalLossNum = item.original?.lossNum;
|
||||||
|
item.originalLossArea = item.original?.lossArea;
|
||||||
|
item.edgeLossNum = item.edge?.lossNum;
|
||||||
|
item.edgeLossArea = item.edge?.lossArea;
|
||||||
|
item.drillLossNum = item.drill?.lossNum;
|
||||||
|
item.drillLossArea = item.drill?.lossArea;
|
||||||
|
item.coatingLossNum = item.coating?.lossNum;
|
||||||
|
item.coatingLossArea = item.coating?.lossArea;
|
||||||
|
item.silkLossNum = item.silk?.lossNum;
|
||||||
|
item.silkLossArea = item.silk?.lossArea;
|
||||||
|
item.temperingLossNum = item.tempering?.lossNum;
|
||||||
|
item.temperingLossArea = item.tempering?.lossArea;
|
||||||
|
item.packingLossNum = item.packing?.lossNum;
|
||||||
|
item.packingLossArea = item.packing?.lossArea;
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSearchBarChanged({ param, value }) {
|
||||||
|
this.listQuery.lineId = [];
|
||||||
|
this.$refs.searchBarForm.formInline.lineId = undefined;
|
||||||
|
getPdList(value).then((res) => {
|
||||||
|
this.formConfig[1].selectOptions = res.data || [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
|
||||||
|
handleExport() {
|
||||||
|
let tables = document.querySelector('.el-table').cloneNode(true);
|
||||||
|
const fix = tables.querySelector('.el-table__fixed');
|
||||||
|
const fixRight = tables.querySelector('.el-table__fixed-right');
|
||||||
|
if (fix) {
|
||||||
|
tables.removeChild(tables.querySelector('.el-table__fixed'));
|
||||||
|
}
|
||||||
|
if (fixRight) {
|
||||||
|
tables.removeChild(tables.querySelector('.el-table__fixed-right'));
|
||||||
|
}
|
||||||
|
let exportTable = XLSX.utils.table_to_book(tables);
|
||||||
|
|
||||||
|
var exportTableOut = XLSX.write(exportTable, {
|
||||||
|
bookType: 'xlsx',
|
||||||
|
bookSST: true,
|
||||||
|
type: 'array',
|
||||||
|
});
|
||||||
|
// sheetjs.xlsx为导出表格的标题名称
|
||||||
|
try {
|
||||||
|
FileSaver.saveAs(
|
||||||
|
new Blob([exportTableOut], {
|
||||||
|
type: 'application/octet-stream',
|
||||||
|
}),
|
||||||
|
this.fileName + '产线统计数据查询-当前.xlsx'
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
if (typeof console !== 'undefined') console.log(e, exportTableOut);
|
||||||
|
}
|
||||||
|
return exportTableOut;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.energyOverlimitLog {
|
||||||
|
.el-tabs__nav::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #e4e7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__nav-wrap::after {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__item {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__item:hover {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__item.is-active {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs__item {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBarBox {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.blue-block {
|
||||||
|
float: left;
|
||||||
|
display: inline-block;
|
||||||
|
width: 4px;
|
||||||
|
height: 16px;
|
||||||
|
background-color: #0b58ff;
|
||||||
|
border-radius: 1px;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.tip {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -69,10 +69,14 @@ export default {
|
|||||||
label: times.slice(0, 10) + ' ' + times.slice(11),
|
label: times.slice(0, 10) + ' ' + times.slice(11),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
children: [
|
children: [
|
||||||
{ prop: times + '_in', label: '投入数量' },
|
{ prop: times + '_in', label: '投入数量',
|
||||||
{ prop: times + '_out', label: '产出数量' },
|
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||||
{ prop: times + '_junk', label: '报废数量' },
|
{ prop: times + '_out', label: '产出数量',
|
||||||
{ prop: times + '_area', label: '产出面积' }
|
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||||
|
{ prop: times + '_junk', label: '报废数量',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||||
|
{ prop: times + '_area', label: '产出面积',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'), }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
this.arr.push(subprop)
|
this.arr.push(subprop)
|
||||||
|
273
src/views/core/monitoring/lineAuto/baseTable.vue
Normal file
273
src/views/core/monitoring/lineAuto/baseTable.vue
Normal file
@ -0,0 +1,273 @@
|
|||||||
|
<template>
|
||||||
|
<div class="baseTable">
|
||||||
|
<el-table
|
||||||
|
:ref="id"
|
||||||
|
:data="renderData"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:border="cancelBorder ? false : true"
|
||||||
|
@current-change="currentChange"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
style="width: 100%"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: '#F2F4F9',
|
||||||
|
color: '#606266',
|
||||||
|
}">
|
||||||
|
<!-- 多选 -->
|
||||||
|
<el-table-column
|
||||||
|
v-if="selectWidth"
|
||||||
|
type="selection"
|
||||||
|
:width="selectWidth" />
|
||||||
|
<!-- 序号 -->
|
||||||
|
<el-table-column
|
||||||
|
v-if="page && limit"
|
||||||
|
prop="_pageIndex"
|
||||||
|
:width="pageWidth"
|
||||||
|
align="center"
|
||||||
|
:fixed="cancelPageFixed ? false : true">
|
||||||
|
<template slot="header">
|
||||||
|
<el-popover placement="bottom-start" width="300" trigger="click">
|
||||||
|
<div
|
||||||
|
class="setting-box"
|
||||||
|
style="max-height: 400px; overflow-y: auto">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in tableProps"
|
||||||
|
:key="'cb' + index"
|
||||||
|
v-model="selectedBox[index]"
|
||||||
|
:label="item.label" />
|
||||||
|
</div>
|
||||||
|
<i slot="reference" class="el-icon-s-tools" />
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
v-for="item in renderTableHeadList"
|
||||||
|
:key="item.prop"
|
||||||
|
v-bind="item"
|
||||||
|
:label="item.label"
|
||||||
|
:prop="item.prop"
|
||||||
|
:fixed="item.fixed || false"
|
||||||
|
:show-overflow-tooltip="item.showOverflowtooltip || false"
|
||||||
|
:sortable="item.sortable || false">
|
||||||
|
<template slot="header">
|
||||||
|
<span>{{ item.label }}</span>
|
||||||
|
</template>
|
||||||
|
<!-- 多表头 -->
|
||||||
|
<template v-if="item.children">
|
||||||
|
<el-table-column
|
||||||
|
v-for="sub in item.children"
|
||||||
|
:prop="sub.prop"
|
||||||
|
:key="sub.prop"
|
||||||
|
v-bind="sub"
|
||||||
|
:label="sub.label">
|
||||||
|
<template v-if="sub.children">
|
||||||
|
<el-table-column
|
||||||
|
v-for="ssub in sub.children"
|
||||||
|
:prop="ssub.prop"
|
||||||
|
:key="ssub.prop"
|
||||||
|
v-bind="ssub"
|
||||||
|
:label="ssub.label">
|
||||||
|
<template slot-scope="sscopeInner">
|
||||||
|
<component
|
||||||
|
:is="ssub.subcomponent"
|
||||||
|
v-if="ssub.subcomponent"
|
||||||
|
:key="sscopeInner.row.id"
|
||||||
|
:inject-data="{ ...sscopeInner.row, ...ssub }"
|
||||||
|
@emitData="emitData" />
|
||||||
|
<span v-else>
|
||||||
|
{{ sscopeInner.row[ssub.prop] | commonFilter(ssub.filter) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scopeInner">
|
||||||
|
<component
|
||||||
|
:is="sub.subcomponent"
|
||||||
|
v-if="sub.subcomponent"
|
||||||
|
:key="scopeInner.row.id"
|
||||||
|
:inject-data="{ ...scopeInner.row, ...sub }"
|
||||||
|
@emitData="emitData" />
|
||||||
|
<span v-else>
|
||||||
|
{{ scopeInner.row[sub.prop] | commonFilter(sub.filter) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<component
|
||||||
|
:is="item.subcomponent"
|
||||||
|
v-if="item.subcomponent"
|
||||||
|
:key="scope.row.id"
|
||||||
|
:itemProp="item.prop"
|
||||||
|
:inject-data="{ ...scope.row, ...item }"
|
||||||
|
@emitData="emitData" />
|
||||||
|
<span v-else>
|
||||||
|
{{ scope.row[item.prop] | commonFilter(item.filter) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<slot name="handleBtn" />
|
||||||
|
</el-table>
|
||||||
|
<!-- 表格底部加号 -->
|
||||||
|
<el-button
|
||||||
|
v-if="addButtonShow"
|
||||||
|
class="addButton"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click="emitButtonClick">
|
||||||
|
{{ addButtonShow }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'BaseTable',
|
||||||
|
filters: {
|
||||||
|
commonFilter: (source, filterType = (a) => a) => {
|
||||||
|
return filterType(source);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
cancelBorder: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
cancelPageFixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tableProps: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
page: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
pageWidth: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 70,
|
||||||
|
},
|
||||||
|
limit: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
selectWidth: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
addButtonShow: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedBox: new Array(100).fill(true),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
renderTableHeadList() {
|
||||||
|
return this.tableProps.filter((item, index) => {
|
||||||
|
return this.selectedBox[index];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
renderData() {
|
||||||
|
return this.tableData.map((item, index) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
_pageIndex: (this.page - 1) * this.limit + index + 1,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
this.selectedBox = new Array(100).fill(true);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
currentChange(newVal, oldVal) {
|
||||||
|
this.$emit('current-change', { newVal, oldVal });
|
||||||
|
},
|
||||||
|
handleSelectionChange(val) {
|
||||||
|
this.$emit('selection-change', val);
|
||||||
|
},
|
||||||
|
emitData(val) {
|
||||||
|
this.$emit('emitFun', val);
|
||||||
|
},
|
||||||
|
emitButtonClick() {
|
||||||
|
this.$emit('emitButtonClick');
|
||||||
|
},
|
||||||
|
setCurrent(name, index) {
|
||||||
|
let _this = this;
|
||||||
|
let obj = _this.$refs[name].data[index];
|
||||||
|
_this.$refs[name].setCurrentRow(obj);
|
||||||
|
},
|
||||||
|
doLayout(name) {
|
||||||
|
this.$refs[name].doLayout();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.baseTable .show-col-btn {
|
||||||
|
margin-right: 5px;
|
||||||
|
line-height: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.baseTable .el-icon-refresh {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.baseTable .el-table__body tr.current-row > td.el-table__cell {
|
||||||
|
background-color: #eaf1fc;
|
||||||
|
}
|
||||||
|
.baseTable .el-table .el-table__cell {
|
||||||
|
padding: 0;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
.baseTable .addButton {
|
||||||
|
width: 100%;
|
||||||
|
height: 35px;
|
||||||
|
border-top: none;
|
||||||
|
color: #0b58ff;
|
||||||
|
border-color: #ebeef5;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.baseTable .addButton:hover {
|
||||||
|
color: #0b58ff;
|
||||||
|
border-color: #ebeef5;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.baseTable .addButton:focus {
|
||||||
|
border-color: #ebeef5;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tooltip__popper.is-dark {
|
||||||
|
background: rgba(0, 0, 0, 0.6) !important;
|
||||||
|
}
|
||||||
|
.el-tooltip__popper .popper__arrow,
|
||||||
|
.el-tooltip__popper .popper__arrow::after {
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.4) !important;
|
||||||
|
}
|
||||||
|
</style>
|
462
src/views/core/monitoring/lineAuto/index.vue
Normal file
462
src/views/core/monitoring/lineAuto/index.vue
Normal file
@ -0,0 +1,462 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: Do not edit
|
||||||
|
* @Date: 2023-08-29 14:59:29
|
||||||
|
* @LastEditTime: 2025-01-07 10:53:31
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<search-bar
|
||||||
|
:formConfigs="formConfig"
|
||||||
|
ref="searchBarForm"
|
||||||
|
@select-changed="handleSearchBarChanged"
|
||||||
|
@headBtnClick="buttonClick" />
|
||||||
|
<base-table-s
|
||||||
|
v-if="showData.length"
|
||||||
|
class="right-aside"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="listQuery.pageNo"
|
||||||
|
:limit="listQuery.pageSize"
|
||||||
|
:table-data="showData"></base-table-s>
|
||||||
|
<div v-else class="no-data-bg"></div>
|
||||||
|
<pagination
|
||||||
|
:limit.sync="listQuery.pageSize"
|
||||||
|
:page.sync="listQuery.pageNo"
|
||||||
|
:total="listQuery.total"
|
||||||
|
@pagination="getDataList" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
|
import { getLineAuto, getPdList } from '@/api/core/monitoring/auto';
|
||||||
|
import { getFactoryPage } from '@/api/core/base/factory';
|
||||||
|
// import codeFilter from '../../mixins/code-filter'
|
||||||
|
import * as XLSX from 'xlsx';
|
||||||
|
import FileSaver from 'file-saver';
|
||||||
|
import baseTableS from './baseTable.vue';
|
||||||
|
|
||||||
|
const tableProps = [
|
||||||
|
{
|
||||||
|
prop: 'reportType',
|
||||||
|
label: '报表类型',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'reportDate',
|
||||||
|
label: '日期',
|
||||||
|
width: 130,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'factoryName',
|
||||||
|
label: '工厂',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lineName',
|
||||||
|
label: '产线',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'sizes',
|
||||||
|
label: '规格',
|
||||||
|
width: 105,
|
||||||
|
showOverflowtooltip: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'process',
|
||||||
|
label: '产品工艺',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
prop: 'inputN',
|
||||||
|
label: '投入',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'inputNum',
|
||||||
|
label: '投入数量/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'inputArea',
|
||||||
|
label: '投入面积/m²',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputN',
|
||||||
|
label: '产出',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'outputNum',
|
||||||
|
label: '产出数量/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputArea',
|
||||||
|
label: '产出面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossN',
|
||||||
|
label: '不良',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'lossNum',
|
||||||
|
label: '不良数量/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossArea',
|
||||||
|
label: '不良面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossRatio',
|
||||||
|
label: '不良率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputRatio',
|
||||||
|
label: '投入产出率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'processingRatio',
|
||||||
|
label: '加工成品率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossD',
|
||||||
|
label: '不良详情',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'original',
|
||||||
|
label: '原片',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'originalLossNum',
|
||||||
|
label: '原片不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'originalLossArea',
|
||||||
|
label: '原片不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'edge',
|
||||||
|
label: '磨边',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'edgeLossNum',
|
||||||
|
label: '磨边不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'edgeLossArea',
|
||||||
|
label: '磨边不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'drill',
|
||||||
|
label: '打孔',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'drillLossNum',
|
||||||
|
label: '打孔不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'drillLossArea',
|
||||||
|
label: '打孔不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'coating',
|
||||||
|
label: '镀膜',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'coatingLossNum',
|
||||||
|
label: '镀膜不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'coatingLossArea',
|
||||||
|
label: '镀膜不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'silk',
|
||||||
|
label: '丝印',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'silkLossNum',
|
||||||
|
label: '丝印不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'silkLossArea',
|
||||||
|
label: '丝印不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'tempering',
|
||||||
|
label: '钢化',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'temperingLossNum',
|
||||||
|
label: '钢化不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'temperingLossArea',
|
||||||
|
label: '钢化不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'packing',
|
||||||
|
label: '包装',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'packingLossNum',
|
||||||
|
label: '包装不良/片',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'packingLossArea',
|
||||||
|
label: '包装不良/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
baseTableS,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
urlOptions: {
|
||||||
|
getDataListURL: getLineAuto,
|
||||||
|
},
|
||||||
|
listQuery: {
|
||||||
|
lineId: [],
|
||||||
|
pageSize: 10,
|
||||||
|
pageNo: 1,
|
||||||
|
total: 1,
|
||||||
|
},
|
||||||
|
fileName: '',
|
||||||
|
dataListLoading: false,
|
||||||
|
tableProps,
|
||||||
|
tableBtn: [],
|
||||||
|
showData: [],
|
||||||
|
tableData: [],
|
||||||
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工厂',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'factoryId',
|
||||||
|
onchange: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '维度',
|
||||||
|
selectOptions: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '日',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '周',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '月',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '年',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
param: 'reportType',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产线',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'lineId',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间范围',
|
||||||
|
dateType: 'daterange',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'timeVal',
|
||||||
|
width: 350,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||||
|
type: 'button',
|
||||||
|
btnName: '导出',
|
||||||
|
name: 'export',
|
||||||
|
color: 'warning',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 获取当前时间
|
||||||
|
const now = new Date();
|
||||||
|
// 获取前一天的同一时间
|
||||||
|
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||||
|
// 设置为00:00:00
|
||||||
|
yesterday.setHours(0, 0, 0, 0);
|
||||||
|
// 设置为23:59:59
|
||||||
|
const end = new Date(yesterday.getTime());
|
||||||
|
end.setHours(23, 59, 59, 59);
|
||||||
|
this.listQuery.startTime = yesterday.getTime();
|
||||||
|
this.listQuery.endTime = end.getTime();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.searchBarForm.formInline.timeVal = [
|
||||||
|
yesterday.getTime(),
|
||||||
|
end.getTime(),
|
||||||
|
];
|
||||||
|
});
|
||||||
|
this.getDataList();
|
||||||
|
this.getPdLineList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleExport() {
|
||||||
|
let tables = document.querySelector('.el-table').cloneNode(true);
|
||||||
|
const fix = tables.querySelector('.el-table__fixed');
|
||||||
|
const fixRight = tables.querySelector('.el-table__fixed-right');
|
||||||
|
if (fix) {
|
||||||
|
tables.removeChild(tables.querySelector('.el-table__fixed'));
|
||||||
|
}
|
||||||
|
if (fixRight) {
|
||||||
|
tables.removeChild(tables.querySelector('.el-table__fixed-right'));
|
||||||
|
}
|
||||||
|
let exportTable = XLSX.utils.table_to_book(tables);
|
||||||
|
|
||||||
|
var exportTableOut = XLSX.write(exportTable, {
|
||||||
|
bookType: 'xlsx',
|
||||||
|
bookSST: true,
|
||||||
|
type: 'array',
|
||||||
|
});
|
||||||
|
// sheetjs.xlsx为导出表格的标题名称
|
||||||
|
try {
|
||||||
|
FileSaver.saveAs(
|
||||||
|
new Blob([exportTableOut], {
|
||||||
|
type: 'application/octet-stream',
|
||||||
|
}),
|
||||||
|
this.fileName + '产线自动报表.xlsx'
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
if (typeof console !== 'undefined') console.log(e, exportTableOut);
|
||||||
|
}
|
||||||
|
return exportTableOut;
|
||||||
|
},
|
||||||
|
getPdLineList() {
|
||||||
|
getPdList().then((res) => {
|
||||||
|
this.formConfig[2].selectOptions = res.data || [];
|
||||||
|
});
|
||||||
|
const params = {
|
||||||
|
pageSize: 100,
|
||||||
|
pageNo: 1,
|
||||||
|
};
|
||||||
|
getFactoryPage(params).then((res) => {
|
||||||
|
this.formConfig[0].selectOptions = res.data.list || [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
buttonClick(val) {
|
||||||
|
switch (val.btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.listQuery.pageNo = 1;
|
||||||
|
this.listQuery.pageSize = 10;
|
||||||
|
this.listQuery.factoryId = val.factoryId || undefined;
|
||||||
|
this.listQuery.lineId = val.lineId ? [val.lineId] : [];
|
||||||
|
this.listQuery.reportType = val.reportType || undefined;
|
||||||
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
|
||||||
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
|
||||||
|
this.getDataList();
|
||||||
|
break;
|
||||||
|
case 'export':
|
||||||
|
this.handleExport();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取数据列表
|
||||||
|
getDataList() {
|
||||||
|
this.dataListLoading = true;
|
||||||
|
const arr = ['日', '周', '月', '年'];
|
||||||
|
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||||
|
this.tableData = response.data.list.map((item, index) => {
|
||||||
|
item.reportType = arr[item.reportType - 1];
|
||||||
|
item.originalLossNum = item.original?.lossNum;
|
||||||
|
item.originalLossArea = item.original?.lossArea;
|
||||||
|
item.edgeLossNum = item.edge?.lossNum;
|
||||||
|
item.edgeLossArea = item.edge?.lossArea;
|
||||||
|
item.drillLossNum = item.drill?.lossNum;
|
||||||
|
item.drillLossArea = item.drill?.lossArea;
|
||||||
|
item.coatingLossNum = item.coating?.lossNum;
|
||||||
|
item.coatingLossArea = item.coating?.lossArea;
|
||||||
|
item.silkLossNum = item.silk?.lossNum;
|
||||||
|
item.silkLossArea = item.silk?.lossArea;
|
||||||
|
item.temperingLossNum = item.tempering?.lossNum;
|
||||||
|
item.temperingLossArea = item.tempering?.lossArea;
|
||||||
|
item.packingLossNum = item.packing?.lossNum;
|
||||||
|
item.packingLossArea = item.packing?.lossArea;
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.listQuery.total = response.data.total;
|
||||||
|
this.dataListLoading = false;
|
||||||
|
this.showData = this.tableData;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 每页数
|
||||||
|
sizeChangeHandle(val) {
|
||||||
|
this.listQuery.pageSize = val;
|
||||||
|
this.listQuery.pageNo = 1;
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
// 当前页
|
||||||
|
currentChangeHandle(val) {
|
||||||
|
this.listQuery.pageNo = val;
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
handleSearchBarChanged({ param, value }) {
|
||||||
|
this.listQuery.lineId = [];
|
||||||
|
this.$refs.searchBarForm.formInline.lineId = undefined;
|
||||||
|
getPdList(value).then((res) => {
|
||||||
|
this.formConfig[2].selectOptions = res.data || [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
358
src/views/core/monitoring/productAuto/index.vue
Normal file
358
src/views/core/monitoring/productAuto/index.vue
Normal file
@ -0,0 +1,358 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: Do not edit
|
||||||
|
* @Date: 2023-08-29 14:59:29
|
||||||
|
* @LastEditTime: 2025-01-09 10:45:41
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<search-bar
|
||||||
|
:formConfigs="formConfig"
|
||||||
|
ref="searchBarForm"
|
||||||
|
@headBtnClick="buttonClick" />
|
||||||
|
<base-table
|
||||||
|
v-if="showData.length"
|
||||||
|
class="right-aside"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="listQuery.pageNo"
|
||||||
|
:limit="listQuery.pageSize"
|
||||||
|
:table-data="showData"></base-table>
|
||||||
|
<div v-else class="no-data-bg"></div>
|
||||||
|
<pagination
|
||||||
|
:limit.sync="listQuery.pageSize"
|
||||||
|
:page.sync="listQuery.pageNo"
|
||||||
|
:total="listQuery.total"
|
||||||
|
@pagination="getDataList" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { parseTime } from '../../mixins/code-filter';
|
||||||
|
import { getProductAuto, getPdList } from '@/api/core/monitoring/auto';
|
||||||
|
import { listData } from '@/api/system/dict/data';
|
||||||
|
import { getFactoryPage } from '@/api/core/base/factory';
|
||||||
|
// import codeFilter from '../../mixins/code-filter'
|
||||||
|
import * as XLSX from 'xlsx';
|
||||||
|
import FileSaver from 'file-saver';
|
||||||
|
|
||||||
|
const tableProps1 = [
|
||||||
|
{
|
||||||
|
prop: 'processType',
|
||||||
|
label: '工艺类型',
|
||||||
|
filter: (val) => (val === 1 ? '面板' : '背板'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'reportType',
|
||||||
|
label: '报表类型',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'reportDate',
|
||||||
|
label: '日期',
|
||||||
|
width: 130,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'factoryName',
|
||||||
|
label: '工厂',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'process',
|
||||||
|
label: '产品工艺',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
prop: 'all',
|
||||||
|
label: '合计',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'inputArea',
|
||||||
|
label: '投入面积/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputArea',
|
||||||
|
label: '产出面积/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossArea',
|
||||||
|
label: '不良面积//m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'originalLossArea',
|
||||||
|
label: '原片不良/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputRatio',
|
||||||
|
label: '投入产出率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'processingRatio',
|
||||||
|
label: '加工成品率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
urlOptions: {
|
||||||
|
getDataListURL: getProductAuto,
|
||||||
|
},
|
||||||
|
listQuery: {
|
||||||
|
pageSize: 10,
|
||||||
|
pageNo: 1,
|
||||||
|
total: 1,
|
||||||
|
},
|
||||||
|
fileName: '',
|
||||||
|
dataListLoading: false,
|
||||||
|
tableProps1,
|
||||||
|
tableProps: [],
|
||||||
|
tableBtn: [],
|
||||||
|
showData: [],
|
||||||
|
tableData: [],
|
||||||
|
formConfig: [
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '工厂',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'factoryId',
|
||||||
|
onchange: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '维度',
|
||||||
|
selectOptions: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '日',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '周',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '月',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '年',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
param: 'reportType',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label: '产品工艺',
|
||||||
|
selectOptions: [],
|
||||||
|
param: 'process',
|
||||||
|
labelField: 'label',
|
||||||
|
valueField: 'label',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'datePicker',
|
||||||
|
label: '时间范围',
|
||||||
|
dateType: 'daterange',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'timestamp',
|
||||||
|
rangeSeparator: '-',
|
||||||
|
startPlaceholder: '开始时间',
|
||||||
|
endPlaceholder: '结束时间',
|
||||||
|
param: 'timeVal',
|
||||||
|
width: 350,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'button',
|
||||||
|
btnName: '查询',
|
||||||
|
name: 'search',
|
||||||
|
color: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separate',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||||
|
type: 'button',
|
||||||
|
btnName: '导出',
|
||||||
|
name: 'export',
|
||||||
|
color: 'warning',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 获取当前时间
|
||||||
|
const now = new Date();
|
||||||
|
// 获取前一天的同一时间
|
||||||
|
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||||
|
// 设置为00:00:00
|
||||||
|
yesterday.setHours(0, 0, 0, 0);
|
||||||
|
// 设置为23:59:59
|
||||||
|
const end = new Date(yesterday.getTime());
|
||||||
|
end.setHours(23, 59, 59, 59);
|
||||||
|
this.listQuery.startTime = yesterday.getTime();
|
||||||
|
this.listQuery.endTime = end.getTime();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.searchBarForm.formInline.timeVal = [
|
||||||
|
yesterday.getTime(),
|
||||||
|
end.getTime(),
|
||||||
|
];
|
||||||
|
});
|
||||||
|
const queryParams = {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 99,
|
||||||
|
dictType: 'process_type',
|
||||||
|
};
|
||||||
|
listData(queryParams).then((response) => {
|
||||||
|
this.formConfig[2].selectOptions = response.data.list;
|
||||||
|
});
|
||||||
|
this.getDataList();
|
||||||
|
this.getPdLineList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleExport() {
|
||||||
|
let tables = document.querySelector('.el-table').cloneNode(true);
|
||||||
|
const fix = tables.querySelector('.el-table__fixed');
|
||||||
|
const fixRight = tables.querySelector('.el-table__fixed-right');
|
||||||
|
if (fix) {
|
||||||
|
tables.removeChild(tables.querySelector('.el-table__fixed'));
|
||||||
|
}
|
||||||
|
if (fixRight) {
|
||||||
|
tables.removeChild(tables.querySelector('.el-table__fixed-right'));
|
||||||
|
}
|
||||||
|
let exportTable = XLSX.utils.table_to_book(tables);
|
||||||
|
|
||||||
|
var exportTableOut = XLSX.write(exportTable, {
|
||||||
|
bookType: 'xlsx',
|
||||||
|
bookSST: true,
|
||||||
|
type: 'array',
|
||||||
|
});
|
||||||
|
// sheetjs.xlsx为导出表格的标题名称
|
||||||
|
try {
|
||||||
|
FileSaver.saveAs(
|
||||||
|
new Blob([exportTableOut], {
|
||||||
|
type: 'application/octet-stream',
|
||||||
|
}),
|
||||||
|
this.fileName + '产品自动报表.xlsx'
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
if (typeof console !== 'undefined') console.log(e, exportTableOut);
|
||||||
|
}
|
||||||
|
return exportTableOut;
|
||||||
|
},
|
||||||
|
getPdLineList() {
|
||||||
|
const params = {
|
||||||
|
pageSize: 100,
|
||||||
|
pageNo: 1,
|
||||||
|
};
|
||||||
|
getFactoryPage(params).then((res) => {
|
||||||
|
this.formConfig[0].selectOptions = res.data.list || [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
buttonClick(val) {
|
||||||
|
switch (val.btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.listQuery.pageNo = 1;
|
||||||
|
this.listQuery.pageSize = 10;
|
||||||
|
this.listQuery.factoryId = val.factoryId || undefined;
|
||||||
|
this.listQuery.process = val.process || undefined;
|
||||||
|
this.listQuery.reportType = val.reportType || undefined;
|
||||||
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
|
||||||
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
|
||||||
|
this.getDataList();
|
||||||
|
break;
|
||||||
|
case 'export':
|
||||||
|
this.handleExport();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取数据列表
|
||||||
|
getDataList() {
|
||||||
|
this.dataListLoading = true;
|
||||||
|
const arr = ['日', '周', '月', '年'];
|
||||||
|
this.tableProps = [];
|
||||||
|
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||||
|
if (response.data) {
|
||||||
|
let tableArr = [];
|
||||||
|
this.tableData = response.data?.list?.map((item, stop) => {
|
||||||
|
item.reportType = arr[item.reportType - 1];
|
||||||
|
if (stop === 0) {
|
||||||
|
item.lineDetList.forEach((prop, index) => {
|
||||||
|
item['inputArea' + index] = prop.inputArea;
|
||||||
|
item['outputArea' + index] = prop.outputArea;
|
||||||
|
item['lossArea' + index] = prop.lossArea;
|
||||||
|
item['originalLossArea' + index] = prop.originalLossArea;
|
||||||
|
item['outputRatio' + index] = prop.outputRatio;
|
||||||
|
item['processingRatio' + index] = prop.processingRatio;
|
||||||
|
const subprop = {
|
||||||
|
label: prop.lineName,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
prop: 'inputArea' + index,
|
||||||
|
label: '投入面积/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputArea' + index,
|
||||||
|
label: '产出面积/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'lossArea' + index,
|
||||||
|
label: '不良面积/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'originalLossArea' + index,
|
||||||
|
label: '原片不良/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'outputRatio' + index,
|
||||||
|
label: '投入产出率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'processingRatio' + index,
|
||||||
|
label: '加工成品率/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
tableArr.push(subprop);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.tableProps.push(...this.tableProps1);
|
||||||
|
this.tableProps.splice(5, 0, ...tableArr);
|
||||||
|
this.listQuery.total = response.data.total;
|
||||||
|
}
|
||||||
|
this.listQuery.total = 0;
|
||||||
|
this.dataListLoading = false;
|
||||||
|
this.showData = this.tableData||[];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 每页数
|
||||||
|
sizeChangeHandle(val) {
|
||||||
|
this.listQuery.pageSize = val;
|
||||||
|
this.listQuery.pageNo = 1;
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
// 当前页
|
||||||
|
currentChangeHandle(val) {
|
||||||
|
this.listQuery.pageNo = val;
|
||||||
|
this.getDataList();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2023-08-29 14:59:29
|
* @Date: 2023-08-29 14:59:29
|
||||||
* @LastEditTime: 2024-11-26 16:35:22
|
* @LastEditTime: 2024-12-02 13:44:47
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -95,7 +95,8 @@ const tableProps = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'outputArea',
|
prop: 'outputArea',
|
||||||
label: '产出面积/㎡'
|
label: '产出面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossNum',
|
prop: 'lossNum',
|
||||||
@ -103,11 +104,13 @@ const tableProps = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossArea',
|
prop: 'lossArea',
|
||||||
label: '损耗面积/㎡'
|
label: '损耗面积/㎡',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossRatio',
|
prop: 'lossRatio',
|
||||||
label: '损耗比例%'
|
label: '损耗比例%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -73,10 +73,12 @@ const tableProps = [
|
|||||||
{
|
{
|
||||||
prop: 'lossArea',
|
prop: 'lossArea',
|
||||||
label: '损耗面积/m²',
|
label: '损耗面积/m²',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'lossRate',
|
prop: 'lossRate',
|
||||||
label: '损耗比例/%',
|
label: '损耗比例/%',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -328,7 +330,8 @@ export default {
|
|||||||
switch (val.btnName) {
|
switch (val.btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
console.log(val.timeSlot);
|
console.log(val.timeSlot);
|
||||||
|
this.formConfig[2].startPlaceholder = '开始时间';
|
||||||
|
this.formConfig[2].endPlaceholder = '结束时间';
|
||||||
// this.listQuery.pageNo = 1;
|
// this.listQuery.pageNo = 1;
|
||||||
// this.listQuery.pageSize = 10;
|
// this.listQuery.pageSize = 10;
|
||||||
this.listQuery.proLineId = val.proLineId ? val.proLineId : undefined;
|
this.listQuery.proLineId = val.proLineId ? val.proLineId : undefined;
|
||||||
|
@ -196,14 +196,14 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
prop: 'oee',
|
// prop: 'oee',
|
||||||
label: 'OEE',
|
// label: 'OEE',
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
// filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
prop: 'teep',
|
prop: 'teep',
|
||||||
label: 'TEEP',
|
label: '设备生产能效比例',
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
@ -84,14 +84,18 @@ export default {
|
|||||||
width: 240,
|
width: 240,
|
||||||
prop: 'mtbf',
|
prop: 'mtbf',
|
||||||
label: '平均故障间隔时间[MTBF](h)',
|
label: '平均故障间隔时间[MTBF](h)',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
width: 240,
|
width: 240,
|
||||||
prop: 'mttr',
|
prop: 'mttr',
|
||||||
label: '平均维修时间[MTTR](h)',
|
label: '平均维修时间[MTTR](h)',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
{ width: 128, prop: 'workTime', label: '工作时长(h)' },
|
{ width: 128, prop: 'workTime', label: '工作时长(h)',
|
||||||
{ width: 128, prop: 'downTime', label: '故障时长(h)' },
|
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||||
|
{ width: 128, prop: 'downTime', label: '故障时长(h)',
|
||||||
|
filter: (val) => (val != null ? val.toFixed(2) : '-'), },
|
||||||
{ prop: 'downCount', label: '故障次数' },
|
{ prop: 'downCount', label: '故障次数' },
|
||||||
],
|
],
|
||||||
searchBarFormConfig: [
|
searchBarFormConfig: [
|
||||||
|
@ -158,7 +158,7 @@ export default {
|
|||||||
// width: 160,
|
// width: 160,
|
||||||
prop: 'passRate',
|
prop: 'passRate',
|
||||||
label: '合格率',
|
label: '合格率',
|
||||||
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
filter: (val) => (val != null ? val.toFixed(2) : '-'),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
lineChartConfig: {
|
lineChartConfig: {
|
||||||
@ -315,6 +315,8 @@ export default {
|
|||||||
// debugger;
|
// debugger;
|
||||||
switch (btn.btnName) {
|
switch (btn.btnName) {
|
||||||
case 'search':
|
case 'search':
|
||||||
|
this.searchBarFormConfig[2].startPlaceholder = '开始时间';
|
||||||
|
this.searchBarFormConfig[2].endPlaceholder = '结束时间';
|
||||||
this.queryParams.lineId = btn.lineId;
|
this.queryParams.lineId = btn.lineId;
|
||||||
this.queryParams.productId = btn.productId;
|
this.queryParams.productId = btn.productId;
|
||||||
this.queryParams.recordTime = btn.recordTime
|
this.queryParams.recordTime = btn.recordTime
|
||||||
|
@ -12,7 +12,9 @@
|
|||||||
ref="search-bar"
|
ref="search-bar"
|
||||||
@headBtnClick="handleSearchBarBtnClick" />
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
<div v-if="tableList.length" class="tables">
|
<div
|
||||||
|
v-if="tableList.length"
|
||||||
|
class="tables">
|
||||||
<div class="custom-table" v-for="table in tableList" :key="table.key">
|
<div class="custom-table" v-for="table in tableList" :key="table.key">
|
||||||
<!-- {{ JSON.stringify(spanMethod) }} -->
|
<!-- {{ JSON.stringify(spanMethod) }} -->
|
||||||
<base-table
|
<base-table
|
||||||
@ -44,6 +46,7 @@
|
|||||||
import LocalDataManager from './utils/local-data-manager';
|
import LocalDataManager from './utils/local-data-manager';
|
||||||
// import response from './response';
|
// import response from './response';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { parseTime } from '@/filter/code-filter';
|
||||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -76,14 +79,13 @@ export default {
|
|||||||
{
|
{
|
||||||
type: 'datePicker',
|
type: 'datePicker',
|
||||||
label: '时间段',
|
label: '时间段',
|
||||||
dateType: 'daterange', // datetimerange
|
dateType: 'datetimerange', // datetimerange
|
||||||
format: 'yyyy-MM-dd HH:mm:ss',
|
format: 'yyyy-MM-dd HH:mm:ss',
|
||||||
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||||
valueFormat: 'timestamp',
|
// valueFormat: 'timestamp',
|
||||||
rangeSeparator: '-',
|
rangeSeparator: '-',
|
||||||
startPlaceholder: '开始时间',
|
startPlaceholder: '开始时间',
|
||||||
endPlaceholder: '结束时间',
|
endPlaceholder: '结束时间',
|
||||||
defaultTime: ['00:00:00', '23:59:59'],
|
|
||||||
param: 'timeVal',
|
param: 'timeVal',
|
||||||
width: 350,
|
width: 350,
|
||||||
// defaultSelect: [new Date(aWeekAgo), new Date(today)],
|
// defaultSelect: [new Date(aWeekAgo), new Date(today)],
|
||||||
@ -97,7 +99,7 @@ export default {
|
|||||||
],
|
],
|
||||||
queryParams: {
|
queryParams: {
|
||||||
equipmentId: null,
|
equipmentId: null,
|
||||||
time: [new Date(aWeekAgo), new Date(today)],
|
recordTime: null,
|
||||||
},
|
},
|
||||||
tableList: [
|
tableList: [
|
||||||
// {
|
// {
|
||||||
@ -128,7 +130,12 @@ export default {
|
|||||||
this.$set(this.searchBarFormConfig[0], 'defaultSelect', this.code);
|
this.$set(this.searchBarFormConfig[0], 'defaultSelect', this.code);
|
||||||
if (this.name)
|
if (this.name)
|
||||||
this.$set(this.searchBarFormConfig[1], 'defaultSelect', this.name);
|
this.$set(this.searchBarFormConfig[1], 'defaultSelect', this.name);
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date() - 1800 * 1000;
|
||||||
|
this.queryParams.recordTime = [parseTime(start), parseTime(end)];
|
||||||
|
this.searchBarFormConfig[2].startPlaceholder = parseTime(start);
|
||||||
|
this.searchBarFormConfig[2].endPlaceholder = parseTime(end);
|
||||||
|
this.handleQuery();
|
||||||
// this.handleResponse();
|
// this.handleResponse();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -238,10 +245,12 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
||||||
|
this.searchBarFormConfig[2].startPlaceholder = '开始时间';
|
||||||
|
this.searchBarFormConfig[2].endPlaceholder = '结束时间';
|
||||||
if (timeVal && timeVal.length > 0) {
|
if (timeVal && timeVal.length > 0) {
|
||||||
this.queryParams.time = timeVal;
|
this.queryParams.recordTime = timeVal;
|
||||||
} else {
|
} else {
|
||||||
this.queryParams.time = [];
|
this.queryParams.recordTime = [];
|
||||||
}
|
}
|
||||||
await this.handleQuery();
|
await this.handleQuery();
|
||||||
},
|
},
|
||||||
@ -270,7 +279,6 @@ export default {
|
|||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 18px;
|
gap: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tables >>> .baseTable {
|
.tables >>> .baseTable {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user