|
|
@@ -10,7 +10,7 @@ |
|
|
|
<SearchBar |
|
|
|
:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]" |
|
|
|
ref="search-bar" /> |
|
|
|
<pre><code v-html="jsondemo"></code></pre> |
|
|
|
<!-- <pre><code v-html="jsondemo"></code></pre> --> |
|
|
|
<base-table |
|
|
|
:table-props="tableProps" |
|
|
|
:page="queryParams.pageNo" |
|
|
@@ -21,11 +21,14 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import hljs from 'highlight.js/lib/highlight'; |
|
|
|
import json from 'highlight.js/lib/languages/json'; |
|
|
|
import 'highlight.js/styles/github-gist.css'; |
|
|
|
import response from './response.json'; |
|
|
|
import handleNameData from '@/utils/dynamicProps'; |
|
|
|
import handleDynamicData from '@/utils/dynamicData'; |
|
|
|
// 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); |
|
|
|
// hljs.registerLanguage('json', json); |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'QualityRecentHours', |
|
|
@@ -37,7 +40,7 @@ export default { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10, |
|
|
|
}, |
|
|
|
jsondemo: '', |
|
|
|
// jsondemo: '', |
|
|
|
list: [ |
|
|
|
{ |
|
|
|
inspectionContent: '检测内容1', |
|
|
@@ -48,82 +51,13 @@ export default { |
|
|
|
], |
|
|
|
tableProps: [ |
|
|
|
{ |
|
|
|
prop: 'inspectionContent', |
|
|
|
label: '检测内容', |
|
|
|
align: 'center', |
|
|
|
}, |
|
|
|
// 动态插入 |
|
|
|
// mock |
|
|
|
{ |
|
|
|
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', |
|
|
|
}, |
|
|
|
], |
|
|
|
type: 'index', |
|
|
|
label: '序号' |
|
|
|
}, |
|
|
|
{ |
|
|
|
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', |
|
|
|
prop: 'inspectionContent', |
|
|
|
label: '检测内容', |
|
|
|
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', |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
@@ -134,47 +68,31 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async getList() { |
|
|
|
const response = await this.$axios({ |
|
|
|
url: '/monitoring/record-in-one-day/get', |
|
|
|
method: 'get', |
|
|
|
}); |
|
|
|
// const response = await this.$axios({ |
|
|
|
// url: '/monitoring/record-in-one-day/get', |
|
|
|
// method: 'get', |
|
|
|
// }); |
|
|
|
console.log(response); |
|
|
|
// const { |
|
|
|
// // data: { nameData }, |
|
|
|
// code, |
|
|
|
// } = response; |
|
|
|
// this.jsondemo = hljs.highlight( |
|
|
|
// 'json', |
|
|
|
// JSON.stringify(response, null, 2), |
|
|
|
// true |
|
|
|
// ).value; |
|
|
|
const { |
|
|
|
// data: { nameData }, |
|
|
|
code, |
|
|
|
data: { data: dyanmicData, nameData }, |
|
|
|
} = response; |
|
|
|
this.jsondemo = hljs.highlight( |
|
|
|
'json', |
|
|
|
JSON.stringify(response, null, 2), |
|
|
|
true |
|
|
|
).value; |
|
|
|
}, |
|
|
|
filterNameData(nameData) { |
|
|
|
const ndSet = new Set(); |
|
|
|
nameData.forEach((nd) => { |
|
|
|
ndSet.add(nd.name); |
|
|
|
}); |
|
|
|
return Array.from(ndSet.values()) |
|
|
|
.sort() |
|
|
|
.map((name) => ({ |
|
|
|
prop: name, |
|
|
|
label: name, |
|
|
|
})); |
|
|
|
}, |
|
|
|
filterData(data) { |
|
|
|
return data.map((item) => { |
|
|
|
const { data: innerData } = item; |
|
|
|
const keyValuePairs = {}; |
|
|
|
innerData.map((d) => { |
|
|
|
keyValuePairs[d.dynamicName] = d.dynamicValue; |
|
|
|
}); |
|
|
|
return { |
|
|
|
inspectionContent: item.inspectionContent, |
|
|
|
...keyValuePairs, |
|
|
|
sumInput: item.sumInput, |
|
|
|
}; |
|
|
|
}); |
|
|
|
|
|
|
|
const dynamicProps = handleNameData(nameData); |
|
|
|
this.tableProps.push(...dynamicProps) |
|
|
|
const [dataList, length] = handleDynamicData(dyanmicData); |
|
|
|
this.list = dataList; |
|
|
|
this.queryParams.pageSize = length; |
|
|
|
}, |
|
|
|
|
|
|
|
handleEmitFun(payload) { |
|
|
|
console.log('payload', payload); |
|
|
|
}, |
|
|
|