update 设备24小时记录

This commit is contained in:
lb 2023-08-30 10:27:49 +08:00
parent e37bb3f2ce
commit 0f5e4b8368
3 changed files with 711 additions and 0 deletions

View File

@ -0,0 +1,455 @@
<!--
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" />
<!-- <pre><code v-html="jsondemo"></code></pre> -->
<el-skeleton v-if="initing" :rows="6" animated />
<base-table
v-else
:span-method="mergeColumnHandler"
:table-props="tableProps"
:table-data="list"
@emitFun="handleEmitFun"></base-table>
<!-- :page="queryParams.pageNo"
:limit="queryParams.pageSize" -->
</div>
</template>
<script>
import response from './response.json';
import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
// import hljs from 'highlight.js/lib/highlight';
// import json from 'highlight.js/lib/languages/json';
// import 'highlight.js/styles/github-gist.css';
// hljs.registerLanguage('json', json);
export default {
name: 'QualityRecentHours',
components: {},
props: {},
data() {
return {
initing: false,
queryParams: {
pageNo: 1,
pageSize: 10,
},
// jsondemo: '',
list: [
// {
// inspectionContent: '1',
// '2023-03-18T00:00:00-线1': '线1-asdf',
// '2023-03-18T01:00:00-线2': '线2-kldf',
// '2023-03-18T02:00:00-线1': '线1-vasdkj',
// },
{
productLine: '产线1',
specification: ['80*11', '100*10'].join(','),
equipmentName: '上片机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
{
productLine: '产线1',
specification: ['80*11', '100*10'].join(','),
equipmentName: '磨边机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
{
productLine: '产线1',
specification: ['80*11', '100*10'].join(','),
equipmentName: '清洗机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
// 线2
{
productLine: '产线2',
specification: ['80*11', '100*10'].join(','),
equipmentName: '上片机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
{
productLine: '产线2',
specification: ['80*11', '100*10'].join(','),
equipmentName: '磨边机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
{
productLine: '产线2',
specification: ['80*11', '100*10'].join(','),
equipmentName: '清洗机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
],
tableProps: [
{ prop: 'productLine', label: '产线', align: 'center' },
{ prop: 'specification', label: '规格', align: 'center' },
{ prop: 'equipmentName', label: '设备', align: 'center' },
{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
{
prop: 'l-1',
label: 'l-1',
align: 'center',
children: [
{ prop: 'l-1__in', label: '进数据', align: 'center' },
{ prop: 'l-1__out', label: '出数据', align: 'center' },
{ prop: 'l-1__nok', label: '报废数据', align: 'center' },
{ prop: 'l-1__ratio', label: '报废率', align: 'center' },
],
},
{
prop: 'l-2',
label: 'l-2',
align: 'center',
children: [
{ prop: 'l-2__in', label: '进数据', align: 'center' },
{ prop: 'l-2__out', label: '出数据', align: 'center' },
{ prop: 'l-2__nok', label: '报废数据', align: 'center' },
{ prop: 'l-2__ratio', label: '报废率', align: 'center' },
],
},
{
prop: 'l-3',
label: 'l-3',
align: 'center',
children: [
{ prop: 'l-3__in', label: '进数据', align: 'center' },
{ prop: 'l-3__out', label: '出数据', align: 'center' },
{ prop: 'l-3__nok', label: '报废数据', align: 'center' },
{ prop: 'l-3__ratio', label: '报废率', align: 'center' },
],
},
],
equipments: [
{ id: 1, name: '上片机' },
{ id: 2, name: '打磨机' },
{ id: 3, name: '清洗机' },
{ id: 4, name: '打孔机' },
],
products: [
{ id: 'p1', name: '产品1', spec: '100*80' },
{ id: 'p2', name: '产品2', spec: '99*99' },
{ id: 'p3', name: '产品3', spec: '1*100' },
],
res: {
code: 0,
msg: '',
data: [
{
equipmentId: 1,
equipmentName: '上片机',
lineId: 'mock-line-id-1',
lineName: '产线1',
sectionId: 'mock-section-id-1',
sectionName: '工段1',
inQuantity: 100,
outQuantity: 99,
okQuantity: 99,
nokQuantity: 1,
scrapRation: 0.01,
passRate: 99,
recordTime: 1675180800000,
productIds: ['p1', 'p2'],
},
{
equipmentId: 2,
equipmentName: '打磨机',
lineId: 'mock-line-id-1',
lineName: '产线1',
sectionId: 'mock-section-id-1',
sectionName: '工段1',
inQuantity: 100,
outQuantity: 99,
okQuantity: 99,
nokQuantity: 1,
scrapRation: 0.01,
passRate: 99,
recordTime: 1675180800000,
productIds: ['p3', 'p2'],
},
{
equipmentId: 3,
equipmentName: '清洗机',
lineId: 'mock-line-id-1',
lineName: '产线1',
sectionId: 'mock-section-id-1',
sectionName: '工段1',
inQuantity: 100,
outQuantity: 99,
okQuantity: 99,
nokQuantity: 1,
scrapRation: 0.01,
passRate: 99,
recordTime: 1675180800000,
productIds: ['p1', 'p3'],
},
],
},
HTTPResponse: {
code: 0,
msg: 'success',
data: [
//
{
productLine: '产线001',
spectification: '规格1、规格2、规格3',
data: [
{
equipmentName: '上片机',
totalQuantity: 24444,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more
},
{
equipmentName: '磨边机',
totalQuantity: 222222,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more
},
{
equipmentName: '清洗机',
totalQuantity: 222,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more
},
// more
],
},
//
{
productLine: '产线002',
spectification: '规格1、规格2、规格3',
data: [
{
equipmentName: '上片机',
totalQuantity: 24444,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more
},
{
equipmentName: '磨边机',
totalQuantity: 222222,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more
},
{
equipmentName: '清洗机',
totalQuantity: 222,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more
},
// more
],
},
],
},
spanInfo: {},
};
},
computed: {},
mounted() {
this.getList();
},
methods: {
/** 构建tableProps - 依据第一个元素所提供的信息 */
buildProps(item) {
const { data, productLine, specification } = item;
const props = [{ prop: 'productLine', label: '产线', align: 'center' }];
this.tableProps = props;
},
/** 把 list 里的数据转换成 tableProps 对应的格式 */
convertList() {
const row = 0; // this.spanInfo
},
/** 合并table列的规则 */
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
console.log('handle merge column', row, column, rowIndex, columnIndex);
if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3) {
return [
this.spanInfo[rowIndex], // row span
1, // col span
];
}
return { rowspan: 3, colspan: 1 };
},
async getList() {
const { data } = await this.$axios({
url: '/monitoring/equipment-monitor/recent-24-hours',
method: 'get',
});
console.log('recent-24', data);
// const {
// // data: { nameData },
// code,
// } = response;
// this.jsondemo = hljs.highlight(
// 'json',
// JSON.stringify(response, null, 2),
// true
// ).value;
// this.buildProps(data[0]);
// this.initing = true;
// const dynamicProps = handleNameData(nameData);
// this.tableProps.push(...dynamicProps);
// const dataList = handleDynamicData(dyanmicData);
// this.list = dataList;
// this.queryParams.pageSize = dataList.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>

View File

@ -0,0 +1,80 @@
{
"tableProps": [
{
"prop": "inspectionContent",
"label": "检测内容",
"align": "center"
},
{
"prop": "2023-03-18T00:00:00",
"label": "2023-03-18T00:00:00",
"align": "center",
"children": [
{
"prop": "2023-03-18T00:00:00-产线1",
"label": "产线1",
"align": "center"
},
{
"prop": "2023-03-18T00:00:00-产线2",
"label": "产线2",
"align": "center"
},
{
"prop": "2023-03-18T00:00:00-产线3",
"label": "产线3",
"align": "center"
},
{
"prop": "2023-03-18T00:00:00-产线4",
"label": "产线4",
"align": "center"
},
{
"prop": "2023-03-18T00:00:00-产线5",
"label": "产线5",
"align": "center"
}
]
},
{
"prop": "2023-03-18T01:00:00",
"label": "2023-03-18T01:00:00",
"align": "center",
"children": [
{
"prop": "2023-03-18T01:00:00-产线1",
"label": "产线1",
"align": "center"
},
{
"prop": "2023-03-18T01:00:00-产线2",
"label": "产线2",
"align": "center"
},
{
"prop": "2023-03-18T01:00:00-产线3",
"label": "产线3",
"align": "center"
}
]
},
{
"prop": "2023-03-18T02:00:00",
"label": "2023-03-18T02:00:00",
"align": "center",
"children": [
{
"prop": "2023-03-18T02:00:00-产线1",
"label": "产线1",
"align": "center"
},
{
"prop": "2023-03-18T02:00:00-产线2",
"label": "产线2",
"align": "center"
}
]
}
]
}

View File

@ -0,0 +1,176 @@
{
"code": 0,
"data": {
"data": [
{
"data": [
{
"id": "测试222023-08-09T02:00",
"parentId": "测试22",
"dynamicName": "2023-08-09T02:00",
"dynamicValue": 1691517600000,
"children": [
{
"id": "1672847052717821953",
"parentId": "测试222023-08-09T02:00",
"dynamicName": "产线1",
"dynamicValue": 1
}
]
},
{
"id": "测试222023-08-09T08:00",
"parentId": "测试22",
"dynamicName": "2023-08-09T08:00",
"dynamicValue": 1691539200000,
"children": [
{
"id": "1672847052717821953",
"parentId": "测试222023-08-09T08:00",
"dynamicName": "产线1",
"dynamicValue": 1
}
]
},
{
"id": "测试222023-08-09T11:00",
"parentId": "测试22",
"dynamicName": "2023-08-09T11:00",
"dynamicValue": 1691550000000,
"children": [
{
"id": "1672847052717821953",
"parentId": "测试222023-08-09T11:00",
"dynamicName": "产线1",
"dynamicValue": 1
}
]
}
],
"inspectionDetContent": "测试22"
},
{
"data": [
{
"id": "测试112023-08-09T02:00",
"parentId": "测试11",
"dynamicName": "2023-08-09T02:00",
"dynamicValue": 1691517600000,
"children": [
{
"id": "1672847052717821954",
"parentId": "测试112023-08-09T02:00",
"dynamicName": "产线22",
"dynamicValue": 1
}
]
},
{
"id": "测试112023-08-09T08:00",
"parentId": "测试11",
"dynamicName": "2023-08-09T08:00",
"dynamicValue": 1691539200000,
"children": [
{
"id": "1672847052717821953",
"parentId": "测试112023-08-09T08:00",
"dynamicName": "产线1",
"dynamicValue": 1
}
]
},
{
"id": "测试112023-08-09T09:00",
"parentId": "测试11",
"dynamicName": "2023-08-09T09:00",
"dynamicValue": 1691542800000,
"children": [
{
"id": "1672847052717821954",
"parentId": "测试112023-08-09T09:00",
"dynamicName": "产线22",
"dynamicValue": 2
}
]
}
],
"inspectionDetContent": "测试11"
}
],
"nameData": [
{
"name": "2023-08-09T02:00",
"tree": 1,
"id": "测试222023-08-09T02:00",
"parentId": "测试22"
},
{
"name": "产线1",
"tree": 2,
"id": "1672847052717821953",
"parentId": "测试222023-08-09T02:00"
},
{
"name": "2023-08-09T08:00",
"tree": 1,
"id": "测试222023-08-09T08:00",
"parentId": "测试22"
},
{
"name": "产线1",
"tree": 2,
"id": "1672847052717821953",
"parentId": "测试222023-08-09T08:00"
},
{
"name": "2023-08-09T11:00",
"tree": 1,
"id": "测试222023-08-09T11:00",
"parentId": "测试22"
},
{
"name": "产线1",
"tree": 2,
"id": "1672847052717821953",
"parentId": "测试222023-08-09T11:00"
},
{
"name": "2023-08-09T02:00",
"tree": 1,
"id": "测试112023-08-09T02:00",
"parentId": "测试11"
},
{
"name": "产线22",
"tree": 2,
"id": "1672847052717821954",
"parentId": "测试112023-08-09T02:00"
},
{
"name": "2023-08-09T08:00",
"tree": 1,
"id": "测试112023-08-09T08:00",
"parentId": "测试11"
},
{
"name": "产线1",
"tree": 2,
"id": "1672847052717821953",
"parentId": "测试112023-08-09T08:00"
},
{
"name": "2023-08-09T09:00",
"tree": 1,
"id": "测试112023-08-09T09:00",
"parentId": "测试11"
},
{
"name": "产线22",
"tree": 2,
"id": "1672847052717821954",
"parentId": "测试112023-08-09T09:00"
}
]
},
"msg": ""
}