456 lines
11 KiB
Vue
456 lines
11 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" />
|
||
|
|
<!-- <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>
|