|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
|
|
|
|
|
<el-form-item label="生产时间">
|
|
|
|
|
<el-date-picker
|
|
|
|
@ -13,168 +13,223 @@
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- <el-row :gutter="10" class="mb8">-->
|
|
|
|
|
<!-- <el-col :span="1.5">-->
|
|
|
|
|
<!-- <el-button-->
|
|
|
|
|
<!-- type="warning"-->
|
|
|
|
|
<!-- plain-->
|
|
|
|
|
<!-- icon="el-icon-download"-->
|
|
|
|
|
<!-- size="mini"-->
|
|
|
|
|
<!-- @click="handleExport"-->
|
|
|
|
|
<!-- v-hasPermi="['mes:prepare:export']"-->
|
|
|
|
|
<!-- >导出</el-button>-->
|
|
|
|
|
<!-- </el-col>-->
|
|
|
|
|
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
|
|
|
|
|
<!-- </el-row>-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-table :data="tableData" border style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="equipment_name"
|
|
|
|
|
label="产线"
|
|
|
|
|
fixed="left"
|
|
|
|
|
width="150">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="category"
|
|
|
|
|
label="类别"
|
|
|
|
|
fixed="left"
|
|
|
|
|
width="150">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="total_monthly_summary"
|
|
|
|
|
label="当月汇总"
|
|
|
|
|
fixed="left"
|
|
|
|
|
width="150">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
v-for="day in days"
|
|
|
|
|
:key="day"
|
|
|
|
|
:prop="day"
|
|
|
|
|
:label="`${day.replace('day', '')}`"
|
|
|
|
|
:width="150"
|
|
|
|
|
align="center"
|
|
|
|
|
:formatter="formatNullToZero">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<div id="main" style="width: 100%; height: 820px; background: #fff"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-tabs type="border-card" @tab-click="handleTabClick">
|
|
|
|
|
<el-tab-pane label="当月产线产量汇总" >
|
|
|
|
|
<el-table :data="tableData" border style="width: 100%" :header-cell-style="getHeaderCellStyle" :summary-method="getSummaries" show-summary>
|
|
|
|
|
<el-table-column prop="equipment_name" label="产线" fixed="left" width="150"></el-table-column>
|
|
|
|
|
<el-table-column prop="category" label="类别" fixed="left" width="150"></el-table-column>
|
|
|
|
|
<el-table-column prop="total_monthly_summary" label="当月汇总" fixed="left" width="150"></el-table-column>
|
|
|
|
|
<el-table-column v-for="day in days" :key="day" :prop="day" :label="`${day.replace('day', '')}`" :width="150" align="center" :formatter="formatNullToZero">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div id="main" style="width: 100%; height: 820px; background: #fff"></div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
|
|
<el-tab-pane label="当月产线品类汇总" >
|
|
|
|
|
<el-table :data="tableDatas" border style="width: 100%" :header-cell-style="getHeaderCellStyle" :summary-method="getSummaries" show-summary>
|
|
|
|
|
<el-table-column prop="category" label="类别" fixed="left" width="150"></el-table-column>
|
|
|
|
|
<el-table-column prop="total_monthly_summarys" label="当月汇总" fixed="left" width="150"></el-table-column>
|
|
|
|
|
<el-table-column v-for="day in days" :key="day" :prop="day" :label="`${day.replace('day', '')}`" :width="150" align="center" :formatter="formatNullToZero">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div id="mains" style="width: 100%; height: 820px; background: #fff"></div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getmonthProductionSut} from "@/api/mes/reportWork";
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import { getmonthProductionSut } from "@/api/mes/reportWork";
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "Index",
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 遮罩层
|
|
|
|
|
loading: true,
|
|
|
|
|
// 选中数组
|
|
|
|
|
ids: [],
|
|
|
|
|
// 非单个禁用
|
|
|
|
|
single: true,
|
|
|
|
|
// 非多个禁用
|
|
|
|
|
multiple: true,
|
|
|
|
|
// 显示搜索条件
|
|
|
|
|
showSearch: true,
|
|
|
|
|
// 总条数
|
|
|
|
|
total: 0,
|
|
|
|
|
// 日期范围
|
|
|
|
|
|
|
|
|
|
// 备料单表格数据
|
|
|
|
|
tableData: [],
|
|
|
|
|
tableDatas: [],
|
|
|
|
|
days: [],
|
|
|
|
|
// 弹出层标题
|
|
|
|
|
title: "",
|
|
|
|
|
// 是否显示弹出层
|
|
|
|
|
open: false,
|
|
|
|
|
// 查询参数
|
|
|
|
|
queryParams: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
monthValue:''
|
|
|
|
|
monthValue: ''
|
|
|
|
|
},
|
|
|
|
|
// 表单参数
|
|
|
|
|
form: {},
|
|
|
|
|
// 表单校验
|
|
|
|
|
rules: {
|
|
|
|
|
monthValue: [
|
|
|
|
|
{ required: true, message: '生产时间不能为空', trigger: 'change' }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
charts: "",
|
|
|
|
|
legendData:[],
|
|
|
|
|
seriesData:[]
|
|
|
|
|
charts: null,
|
|
|
|
|
chartss: null,
|
|
|
|
|
legendData: [],
|
|
|
|
|
seriesData: [],
|
|
|
|
|
legendDatas: [],
|
|
|
|
|
seriesDatas: []
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
created() {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// Set current month initially
|
|
|
|
|
const currentMonth = new Date().toISOString().substr(0, 7);
|
|
|
|
|
this.queryParams.monthValue = currentMonth;
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
indexMethod(index) {
|
|
|
|
|
return index + 1;
|
|
|
|
|
pad(number) {
|
|
|
|
|
return number.toString().padStart(2, '0');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getHeaderCellStyle({rowIndex, columnIndex}) {
|
|
|
|
|
if (rowIndex === 0 && columnIndex === 0) {
|
|
|
|
|
return 'background-color: #afccfd; color: #000000;'; // 蓝色
|
|
|
|
|
} else if (rowIndex === 0 && columnIndex === 1) {
|
|
|
|
|
return 'background-color: #c0e33c; color: #000000;'; // 绿色
|
|
|
|
|
} else if (rowIndex === 0 && columnIndex === 2) {
|
|
|
|
|
return 'background-color: #fbc57b; color: #000000;'; // 橙色
|
|
|
|
|
} else {
|
|
|
|
|
return 'color: #000000; background: #ffffff;';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getSummaries(param) {
|
|
|
|
|
const {columns, data} = param;
|
|
|
|
|
const sums = [];
|
|
|
|
|
columns.forEach((column, index) => {
|
|
|
|
|
if (index === 0) {
|
|
|
|
|
sums[index] = '合计';
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const values = data.map(item => Number(item[column.property]));
|
|
|
|
|
if (!values.every(value => isNaN(value))) {
|
|
|
|
|
sums[index] = values.reduce((prev, curr) => {
|
|
|
|
|
const value = Number(curr);
|
|
|
|
|
if (!isNaN(value)) {
|
|
|
|
|
return prev + curr;
|
|
|
|
|
} else {
|
|
|
|
|
return prev;
|
|
|
|
|
}
|
|
|
|
|
}, 0);
|
|
|
|
|
sums[index] += '';
|
|
|
|
|
if (sums[index] > 1000000) {
|
|
|
|
|
sums[index] = '';
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
sums[index] = '';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return sums;
|
|
|
|
|
},
|
|
|
|
|
async handleTabClick(tab,event){
|
|
|
|
|
// if (tab.index==1){
|
|
|
|
|
await this.$nextTick();
|
|
|
|
|
this.drawLine("main")
|
|
|
|
|
this.drawLine_two("mains")
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
/** 查询备料单列表 */
|
|
|
|
|
getList() {
|
|
|
|
|
this.seriesData=[];
|
|
|
|
|
this.legendData=[];
|
|
|
|
|
this.seriesData = [];
|
|
|
|
|
this.legendData = [];
|
|
|
|
|
this.seriesDatas = [];
|
|
|
|
|
this.legendDatas = [];
|
|
|
|
|
this.charts = null;
|
|
|
|
|
this.loading = true;
|
|
|
|
|
const [year, month] = this.queryParams.monthValue.split('-').map(Number);
|
|
|
|
|
const daysInMonth = new Date(year, month, 0).getDate();
|
|
|
|
|
this.days = [];
|
|
|
|
|
for (let day = 1; day <= daysInMonth; day++) {
|
|
|
|
|
const formattedDate = `${year}-${this.pad(month)}-${this.pad(day)}`;
|
|
|
|
|
this.days.push(formattedDate);
|
|
|
|
|
}
|
|
|
|
|
getmonthProductionSut(this.queryParams).then(response => {
|
|
|
|
|
// this.prepareList = response.rows;
|
|
|
|
|
const data = response.data;
|
|
|
|
|
// this.total = response.total;
|
|
|
|
|
const data = response.data.mapList_one || [];
|
|
|
|
|
const datas = response.data.mapList_two || [];
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
|
|
|
|
// Process data for mapList_one
|
|
|
|
|
if (data.length > 0) {
|
|
|
|
|
// 获取所有键
|
|
|
|
|
const allKeys = Object.keys(data[0]);
|
|
|
|
|
// 使用正则表达式过滤出符合日期格式的键
|
|
|
|
|
this.days = allKeys.filter(key => /^\d{4}-\d{2}-\d{2}$/.test(key)).sort();
|
|
|
|
|
// 计算每行的日期列数据总和,并设置到 'total_monthly_summary' 字段
|
|
|
|
|
data.forEach(row => {
|
|
|
|
|
let totalSummary = 0;
|
|
|
|
|
const dailyValues = []; // 用于存放每天的值
|
|
|
|
|
const dailyValues = [];
|
|
|
|
|
this.days.forEach(day => {
|
|
|
|
|
const value = row[day] || 0;
|
|
|
|
|
totalSummary += value;
|
|
|
|
|
dailyValues.push(value); // 将每天的值按顺序存入 dailyValues 数组中
|
|
|
|
|
totalSummary += (row[day] || 0);
|
|
|
|
|
dailyValues.push(value);
|
|
|
|
|
});
|
|
|
|
|
row.total_monthly_summary = totalSummary;
|
|
|
|
|
this.legendData.push(row.equipment_name);
|
|
|
|
|
this.seriesData.push({
|
|
|
|
|
name: row.equipment_name, // 使用机器名或其他标识作为系列名称
|
|
|
|
|
name: row.equipment_name,
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total',
|
|
|
|
|
data: dailyValues,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: this.getRandomColor(), // 随机颜色
|
|
|
|
|
color: this.getRandomColor(),
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: this.getRandomColor(),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// No data for mapList_one
|
|
|
|
|
this.legendData.push('无数据');
|
|
|
|
|
this.seriesData.push({
|
|
|
|
|
name: '无数据',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: [],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#CCCCCC',
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#CCCCCC',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (datas.length > 0) {
|
|
|
|
|
datas.forEach(row => {
|
|
|
|
|
let totalSummary = 0;
|
|
|
|
|
const dailyValues = [];
|
|
|
|
|
this.days.forEach(day => {
|
|
|
|
|
const value = row[day] || 0;
|
|
|
|
|
totalSummary += value;
|
|
|
|
|
dailyValues.push(value);
|
|
|
|
|
});
|
|
|
|
|
row.total_monthly_summarys = totalSummary;
|
|
|
|
|
this.legendDatas.push(row.category);
|
|
|
|
|
this.seriesDatas.push({
|
|
|
|
|
name: row.category,
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total',
|
|
|
|
|
data: dailyValues,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: this.getRandomColor(),
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: this.getRandomColor(),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.tableData = data;
|
|
|
|
|
// 更新折线图数据
|
|
|
|
|
this.drawLine("main");
|
|
|
|
|
this.tableDatas = datas;
|
|
|
|
|
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
// 默认绘制第一个标签页的折线图
|
|
|
|
|
this.drawLine("main");
|
|
|
|
|
this.drawLine_two("mains");
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
console.error("Error fetching data:", error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
formatNullToZero(row, column, cellValue) {
|
|
|
|
|
return cellValue === null || cellValue === undefined ? 0 : cellValue;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getRandomColor() {
|
|
|
|
|
const letters = '0123456789ABCDEF';
|
|
|
|
|
let color = '#';
|
|
|
|
@ -183,37 +238,11 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
return color;
|
|
|
|
|
},
|
|
|
|
|
// 取消按钮
|
|
|
|
|
cancel() {
|
|
|
|
|
this.open = false;
|
|
|
|
|
this.reset();
|
|
|
|
|
},
|
|
|
|
|
// 表单重置
|
|
|
|
|
reset() {
|
|
|
|
|
this.form = {};
|
|
|
|
|
this.resetForm("form");
|
|
|
|
|
},
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
handleQuery() {
|
|
|
|
|
this.queryParams.pageNum = 1
|
|
|
|
|
this.getList()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** 导出按钮操作 */
|
|
|
|
|
handleExport() {
|
|
|
|
|
this.download('mes/reportWork/getDailyReportExport', {
|
|
|
|
|
...this.queryParams
|
|
|
|
|
}, `dailyReport${new Date().getTime()}.xlsx`)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
drawLine(id) {
|
|
|
|
|
// 初始化折线图
|
|
|
|
|
this.charts = echarts.init(document.getElementById(id));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 设置折线图数据和样式
|
|
|
|
|
this.charts.setOption({
|
|
|
|
|
this.charts.clear()
|
|
|
|
|
const options = {
|
|
|
|
|
title: {
|
|
|
|
|
text: '产量趋势'
|
|
|
|
|
},
|
|
|
|
@ -242,9 +271,68 @@ export default {
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
},
|
|
|
|
|
series: this.seriesData
|
|
|
|
|
series: this.seriesData || [] // Use empty array if seriesData is falsy
|
|
|
|
|
};
|
|
|
|
|
this.charts.setOption(options);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
drawLine_two(id) {
|
|
|
|
|
if (this.chartss){
|
|
|
|
|
this.chartss.dispose()
|
|
|
|
|
}
|
|
|
|
|
this.chartss = echarts.init(document.getElementById(id));
|
|
|
|
|
this.chartss.clear()
|
|
|
|
|
this.chartss.setOption({
|
|
|
|
|
title: {
|
|
|
|
|
text: '产量趋势'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: this.legendDatas
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
toolbox: {
|
|
|
|
|
feature: {
|
|
|
|
|
saveAsImage: {}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
data: this.days
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
},
|
|
|
|
|
series: this.seriesDatas
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
cancel() {
|
|
|
|
|
this.reset();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
reset() {
|
|
|
|
|
this.queryParams.monthValue = '';
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
handleQuery() {
|
|
|
|
|
this.getList();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.app-container {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|