Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

月度报表、计件工资

Browse Source
yangwl
Yangwl 3 months ago
parent 390a40ae15
commit 5465aec2c9
2 changed files with 270 additions and 164 deletions
Show Stats Download Patch File Download Diff File

326
src/views/mes/monthProductionSut/index.vue
Unescape Escape View File

@ -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-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 * 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: ''
},
// 表单参数
form: {},
// 表单校验
rules: {
monthValue: [
{ required: true, message: '生产时间不能为空', trigger: 'change' }
]
},
charts: "",
charts: null,
chartss: null,
legendData: [],
seriesData:[]
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.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,51 @@ export default {
}
return color;
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
drawLine(id) {
this.charts = echarts.init(document.getElementById(id));
this.charts.clear()
const options = {
title: {
text: '产量趋势'
},
// 表单重置
reset() {
this.form = {};
this.resetForm("form");
tooltip: {
trigger: 'axis'
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
legend: {
data: this.legendData
},
/** 导出按钮操作 */
handleExport() {
this.download('mes/reportWork/getDailyReportExport', {
...this.queryParams
}, `dailyReport${new Date().getTime()}.xlsx`)
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.seriesData || [] // Use empty array if seriesData is falsy
};
this.charts.setOption(options);
},
drawLine(id) {
// 初始化折线图
this.charts = echarts.init(document.getElementById(id));
// 设置折线图数据和样式
this.charts.setOption({
drawLine_two(id) {
if (this.chartss){
this.chartss.dispose()
}
this.chartss = echarts.init(document.getElementById(id));
this.chartss.clear()
this.chartss.setOption({
title: {
text: '产量趋势'
},
@ -221,7 +290,7 @@ export default {
trigger: 'axis'
},
legend: {
data: this.legendData
data: this.legendDatas
},
grid: {
left: '3%',
@ -242,9 +311,28 @@ export default {
yAxis: {
type: 'value',
},
series: this.seriesData
series: this.seriesDatas
});
},
cancel() {
this.reset();
},
reset() {
this.queryParams.monthValue = '';
this.getList();
},
handleQuery() {
this.getList();
}
}
};
</script>
<style scoped>
.app-container {
padding: 20px;
}
</style>

84
src/views/mes/unitpriceReport/index.vue
Unescape Escape View File

@ -42,7 +42,25 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="员工姓名" prop="nickName">
<el-input
v-model="queryParams.equipmentName"
placeholder="请输入员工姓名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@ -77,40 +95,43 @@
<el-table-column label="操作者" width="110" align="center" prop="nickName" />
<el-table-column label="子工序名称" width="110" align="center" prop="childprocessName" />
<el-table-column label="工序单价" width="110" align="center" prop="attr1" />
<el-table-column label="工时" width="110" align="center" prop="attr2" />
<el-table-column label="工时工资" width="100" align="center" prop="realWages" />
<el-table-column label="件数（PC）" width="100" align="center" prop="totalQuantity" />
<el-table-column label="薪酬（元）" width="110" align="center" prop="result" />
<el-table-column label="人数" align="center" prop="headCount" />
<!-- <el-table-column label="平均工资（元）" width="110" align="center" prop="avgResult" />-->
<el-table-column label="实际工资（元）" width="110" align="center" prop="realWages" />
<el-table-column label="备注" align="center" prop="remark">
<template slot-scope="scope">
<dict-tag :options="dict.type.unit_price" :value="scope.row.remark"/>
</template>
</el-table-column>
<!-- <el-table-column label="实际工资" align="center" prop="realWages">-->
<el-table-column label="创建时间" width="110" align="center" prop="createTime" />
<!-- <el-table-column label="人数" align="center" prop="headCount" />-->
<!--&lt;!&ndash; <el-table-column label="平均工资（元）" width="110" align="center" prop="avgResult" />&ndash;&gt;-->
<!-- <el-table-column label="实际工资（元）" width="110" align="center" prop="realWages" />-->
<!-- <el-table-column label="备注" align="center" prop="remark">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input type="text" size="small" v-model="scope.row.realWages" @change="handleEdit(scope.$index,scope.row)"></el-input>-->
<!-- <dict-tag :options="dict.type.unit_price" :value="scope.row.remark"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="实际工资" align="center" prop="realWages" />-->
<el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"p
@click="handleUpdate(scope.row)"
v-hasPermi="['unitPriceReport:report:edit']"
>工资修改</el-button>
<!--&lt;!&ndash; <el-table-column label="实际工资" align="center" prop="realWages">&ndash;&gt;-->
<!--&lt;!&ndash; <template slot-scope="scope">&ndash;&gt;-->
<!--&lt;!&ndash; <el-input type="text" size="small" v-model="scope.row.realWages" @change="handleEdit(scope.$index,scope.row)"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash; </template>&ndash;&gt;-->
<!--&lt;!&ndash; </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash; <el-table-column label="实际工资" align="center" prop="realWages" />&ndash;&gt;-->
<!-- <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['system:unitPrice:remove']"-->
<!-- >删除</el-button>-->
</template>
</el-table-column>
<!-- icon="el-icon-edit"p-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['unitPriceReport:report:edit']"-->
<!-- >工资修改</el-button>-->
<!--&lt;!&ndash; <el-button&ndash;&gt;-->
<!--&lt;!&ndash; size="mini"&ndash;&gt;-->
<!--&lt;!&ndash; type="text"&ndash;&gt;-->
<!--&lt;!&ndash; icon="el-icon-delete"&ndash;&gt;-->
<!--&lt;!&ndash; @click="handleDelete(scope.row)"&ndash;&gt;-->
<!--&lt;!&ndash; v-hasPermi="['system:unitPrice:remove']"&ndash;&gt;-->
<!--&lt;!&ndash; >删除</el-button>&ndash;&gt;-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
@ -217,6 +238,8 @@ export default {
// 是否显示弹出层
open: false,
value: '',
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
@ -262,7 +285,7 @@ export default {
/** 查询unitPrice列表 */
getList() {
this.loading = true;
listUnitPriceReport(this.queryParams).then(response => {
listUnitPriceReport(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.unitPriceList = response.rows;
this.total = response.total;
this.loading = false;
@ -328,11 +351,6 @@ export default {
getReport(picId).then(response => {
this.form = response.data.MesUnitpriceReport;
this.open = true;
if (response.data.attr2 === null || response.data.attr2 === undefined) {
this.form.attr2 = row.result;
} else {
this.form.attr2 = response.data.attr2;
}
this.MesUnitPriceInfo=response.data.MesUnitPriceInfo;
});
},

Write Preview
Loading…
Cancel
Save