You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
8.8 KiB
Vue
308 lines
8.8 KiB
Vue
<template>
|
|
<view>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th rowspan="2">NO</th>
|
|
<th rowspan="2" width="50px">产线</th>
|
|
<th rowspan="2" width="50px">班次</th>
|
|
<th rowspan="2">生产产品</th>
|
|
<th rowspan="2" width="50px">品类</th>
|
|
<th rowspan="2">规格 PC/car</th>
|
|
<th rowspan="2">计划产量/箱</th>
|
|
<th rowspan="2">实际产量/箱</th>
|
|
<th rowspan="2">标准用人</th>
|
|
<th rowspan="2">实际用人</th>
|
|
<th rowspan="2">生产时长/H</th>
|
|
<th rowspan="2">标准人均效率</th>
|
|
<th rowspan="2">实际人均效率</th>
|
|
<th rowspan="2">达成率</th>
|
|
<th rowspan="2">单箱电耗</th>
|
|
<th rowspan="2">影响效率原因</th>
|
|
<th rowspan="2">用人情况说明</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in tableData" :key="index">
|
|
<td>{{ index + 1 }}</td>
|
|
<td>{{ item.equipmentName }}</td>
|
|
<td>{{ item.shift }}</td>
|
|
<td>{{ item.productName }}</td>
|
|
<td>{{ item.category }}</td>
|
|
<td>{{ item.spec }}</td>
|
|
<td>{{ item.planProduction }}</td>
|
|
<td>{{ item.actualProduction }}</td>
|
|
<td>{{ item.standardMan }}</td>
|
|
<td>{{ item.actualMan }}</td>
|
|
<td>{{ item.workTime }}</td>
|
|
<td>{{ item.standardEfficiency }}</td>
|
|
<td>{{ item.actualEfficiency }}</td>
|
|
<td>{{ item.achievementRate }}</td>
|
|
<td>{{ item.singleKw }}</td>
|
|
<td>{{ item.reason }}</td>
|
|
<td>{{ item.useManRemark }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
<td></td>
|
|
<td>合计</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>{{ totalActualProduction }}</td>
|
|
<td></td>
|
|
<td>{{ totalActualMan }}</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- 提示文字 -->
|
|
<div class="scroll-hint">
|
|
<p>*可左右滑动查看</p>
|
|
</div>
|
|
<div class="charts-box">
|
|
<!-- <qiun-data-charts
|
|
type="column"
|
|
:opts="opts"
|
|
:chartData="chartData"
|
|
:ontouch="true"
|
|
/> -->
|
|
<qiun-data-charts
|
|
type="bar"
|
|
:opts="opts"
|
|
:chartData="chartData"
|
|
:ontouch="true"
|
|
/>
|
|
</div>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
name: 'production-summary',
|
|
props: {
|
|
title: { // 接收父组件传递的 title
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
option: {},
|
|
chartData: {},
|
|
tableData: [],
|
|
categories: [],
|
|
series: [],
|
|
opts: {
|
|
// color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
// padding: [15,15,0,5],
|
|
// touchMoveLimit: 24,
|
|
// enableScroll: true,
|
|
// legend: {},
|
|
// xAxis: {
|
|
// disableGrid: true,
|
|
// scrollShow: true,
|
|
// itemCount: 4
|
|
// },
|
|
// yAxis: {
|
|
// data: [
|
|
// {
|
|
// min: 0
|
|
// }
|
|
// ]
|
|
// },
|
|
// extra: {
|
|
// column: {
|
|
// type: "group",
|
|
// width: 30,
|
|
// activeBgColor: "#000000",
|
|
// activeBgOpacity: 0.08
|
|
// }
|
|
// }
|
|
// },
|
|
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [0,50,0,5],
|
|
enableScroll: false,
|
|
legend: {},
|
|
xAxis: {
|
|
boundaryGap: "justify",
|
|
disableGrid: false,
|
|
min: 0,
|
|
axisLine: false,
|
|
max: 0,
|
|
|
|
},
|
|
yAxis: {
|
|
|
|
},
|
|
extra: {
|
|
bar: {
|
|
type: "group",
|
|
width: 30,
|
|
meterBorde: 1,
|
|
meterFillColor: "#FFFFFF",
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08,
|
|
linearType: "custom",
|
|
barBorderCircle: true,
|
|
seriesGap: 2,
|
|
categoryGap: 2
|
|
|
|
}
|
|
}
|
|
},
|
|
totalActualProduction: 0, // 新增字段用于存储实际产量总和
|
|
totalActualMan: 0 // 新增字段用于存储实际用人总和
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log(this.title+"-----------")
|
|
this.getServerData();
|
|
},
|
|
methods: {
|
|
getServerData() {
|
|
// 模拟从服务器获取数据时的延时
|
|
uni.request({
|
|
url: '/prod-api/mes/h5/dailyProductDetil?productDateStart='+this.title+'&productDateEnd='+this.title+'&pageNum=1&pageSize=50',
|
|
header: {
|
|
Poolname: 'ds_1000'
|
|
},
|
|
success: (res) => {
|
|
console.log('request success', res);
|
|
uni.showToast({
|
|
title: '请求成功',
|
|
icon: 'success',
|
|
mask: true
|
|
});
|
|
|
|
// 更新表格数据
|
|
this.tableData = res.data.map(item => {
|
|
return {
|
|
equipmentName: item.equipmentName,
|
|
shift: item.shiftDesc, // 班次
|
|
productName: item.productName, // 生产产品
|
|
category: item.prodType, // 品类
|
|
spec: item.spec, // 规格
|
|
planProduction: item.quantitySplit, // 计划产量
|
|
actualProduction: item.quantityFeedback, // 实际产量
|
|
standardMan: item.manStandard, // 标准用人
|
|
actualMan: item.useMan, // 实际用人
|
|
workTime: item.workTime, // 生产时长/H
|
|
standardEfficiency: item.manAvgStandard, // 标准人均效率
|
|
actualEfficiency: item.manAvgActual, // 实际人均效率
|
|
achievementRate: item.manAvgDo,// 达成率
|
|
singleKw: item.singleKw,// 单箱能耗
|
|
reason: item.reason ,// 原因
|
|
useManRemark: item.useManRemark,
|
|
};
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 计算合计
|
|
this.totalActualProduction = this.tableData.reduce((sum, item) =>
|
|
sum + (Number(item.actualProduction) || 0), 0);
|
|
|
|
this.totalActualMan = this.tableData.reduce((sum, item) => sum + item.actualMan, 0);
|
|
// 设置图表数据
|
|
this.categories = res.data.map(item => item.equipmentName);
|
|
this.series = [
|
|
{
|
|
name: "计划产量",
|
|
data: res.data.map(item => item.quantitySplit)
|
|
},
|
|
{
|
|
name: "完成量",
|
|
data: res.data.map(item => item.quantityFeedback)
|
|
}
|
|
];
|
|
|
|
// 格式化 chartData
|
|
this.chartData = {
|
|
categories: this.categories,
|
|
series: this.series,
|
|
};
|
|
// console.log(this.chartData);
|
|
},
|
|
fail: (err) => {
|
|
console.log('request fail', err);
|
|
uni.showModal({
|
|
content: err.errMsg,
|
|
showCancel: false
|
|
});
|
|
},
|
|
complete: () => {
|
|
this.loading = false;
|
|
}
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: auto; /* 设置水平滚动 */
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 1200px; /* 可选：设置表格的最小宽度 */
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #000;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
th {
|
|
background-color: #B0E0E6;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.highlight {
|
|
background-color: #B0E0E6;
|
|
}
|
|
.scroll-hint {
|
|
text-align: center;
|
|
margin: 10px 0;
|
|
font-size: 14px;
|
|
color: #FF6347;
|
|
}
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 400px;
|
|
padding-top: 50px;
|
|
}
|
|
.custom-navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #449dcc;
|
|
padding: 10px;
|
|
color: white;
|
|
}
|
|
</style>
|