197 lines
4.2 KiB
Vue
197 lines
4.2 KiB
Vue
<!--
|
|
filename: index.vue
|
|
author: liubin
|
|
date: 2023-08-04 14:44:58
|
|
description: 设备24小时生产记录
|
|
-->
|
|
|
|
<template>
|
|
<div class="app-container">
|
|
<SearchBar
|
|
:formConfigs="[{ label: '设备近24小时生产记录', type: 'title' }]"
|
|
ref="search-bar" />
|
|
<el-skeleton v-if="initing" :rows="6" animated />
|
|
<div v-else :class="{ 'no-data-bg': !list || list.length == 0 }">
|
|
<base-table
|
|
v-if="list && list.length > 0"
|
|
:span-method="mergeColumnHandler"
|
|
:table-props="tableProps"
|
|
:table-data="list"
|
|
@emitFun="handleEmitFun"></base-table>
|
|
<!-- :page="queryParams.pageNo"
|
|
:limit="queryParams.pageSize" -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment';
|
|
|
|
export default {
|
|
name: 'QualityRecentHours',
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
initing: false,
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
},
|
|
list: [],
|
|
tableProps: [],
|
|
spanInfo: {},
|
|
noData: true,
|
|
};
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
/** 构建tableProps - 依据第一个元素所提供的信息 */
|
|
buildProps(item) {
|
|
const {
|
|
data: [{ hourData }],
|
|
} = item;
|
|
|
|
const props = [
|
|
{ prop: 'productLine', label: '产线' },
|
|
{ prop: 'specification', label: '规格' },
|
|
{ prop: 'equipmentName', label: '设备' },
|
|
{ prop: 'totalQuantity', label: '生产总数' },
|
|
];
|
|
|
|
for (const key of Object.keys(hourData).sort()) {
|
|
const subprop = {
|
|
// label: 'key',
|
|
label: moment(key).format('YYYY-MM-DD HH:mm:ss'),
|
|
children: [
|
|
{ prop: key + '__in', label: '进数据' },
|
|
{ prop: key + '__out', label: '出数据' },
|
|
{ prop: key + '__nok', label: '报废数据' },
|
|
{
|
|
prop: key + '__ratio',
|
|
label: '报废率',
|
|
filter: (val) => (val != null ? val + ' %' : '-'),
|
|
},
|
|
],
|
|
};
|
|
props.push(subprop);
|
|
}
|
|
|
|
this.tableProps = props;
|
|
},
|
|
|
|
/** 把 list 里的数据转换成 tableProps 对应的格式 */
|
|
convertList(list) {
|
|
this.list.splice(0);
|
|
let rowIndex = 0;
|
|
for (const line of list) {
|
|
const {
|
|
productLine,
|
|
specification = [],
|
|
data,
|
|
} = line;
|
|
|
|
// 设置span的行数
|
|
this.spanInfo[rowIndex] = data.length;
|
|
for (const equipment of data) {
|
|
const { equipmentName, totalQuantity } = equipment;
|
|
let row = {
|
|
productLine,
|
|
specification: specification.join('、'),
|
|
equipmentName,
|
|
totalQuantity,
|
|
};
|
|
rowIndex += 1;
|
|
for (const [key, hourData] of Object.entries(equipment.hourData)) {
|
|
const { inQuantity, outQuantity, nokQuantity, scrapRatio } =
|
|
hourData;
|
|
row[key + '__in'] = inQuantity;
|
|
row[key + '__out'] = outQuantity;
|
|
row[key + '__nok'] = nokQuantity;
|
|
row[key + '__ratio'] = scrapRatio;
|
|
}
|
|
this.list.push(row);
|
|
}
|
|
}
|
|
},
|
|
|
|
buildData(data) {
|
|
this.convertList(data);
|
|
},
|
|
|
|
/** 合并table列的规则 */
|
|
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex == 0 || columnIndex == 1) {
|
|
if (this.spanInfo[rowIndex]) {
|
|
return [
|
|
this.spanInfo[rowIndex], // row span
|
|
1, // col span
|
|
];
|
|
} else {
|
|
return [0, 0];
|
|
}
|
|
}
|
|
},
|
|
|
|
async getList() {
|
|
const { data } = await this.$axios({
|
|
url: '/monitoring/equipment-monitor/recent-24-hours',
|
|
method: 'get',
|
|
});
|
|
|
|
// const data = this.res.data;
|
|
// console.log('recent-24', data);
|
|
|
|
this.initing = true;
|
|
|
|
if (!data || !data.length) {
|
|
this.initing = false;
|
|
this.noData = true;
|
|
return;
|
|
}
|
|
this.noData = false;
|
|
this.buildProps(data[0]);
|
|
this.buildData(data);
|
|
this.queryParams.pageSize = this.list.length;
|
|
|
|
setTimeout(() => {
|
|
this.initing = false;
|
|
}, 1000);
|
|
},
|
|
|
|
handleEmitFun(payload) {
|
|
console.log('payload', payload);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
pre {
|
|
margin: 10px;
|
|
background: #f6f8faf6;
|
|
border: 1px solid #e1e4e8;
|
|
padding: 12px;
|
|
border-radius: 12px;
|
|
position: fixed;
|
|
// top: 15vh;
|
|
top: 10vh;
|
|
left: 0;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
z-index: 100000;
|
|
box-shadow: 0 0 32px 12px #0001;
|
|
}
|
|
|
|
code {
|
|
font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
|
|
}
|
|
</style>
|