210 lines
4.1 KiB
Vue
210 lines
4.1 KiB
Vue
<!--
|
|
filename: index.vue
|
|
author: liubin
|
|
date: 2023-08-04 14:44:58
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<div class="app-container">
|
|
<SearchBar
|
|
:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
|
|
ref="search-bar" />
|
|
<pre><code v-html="jsondemo"></code></pre>
|
|
<base-table
|
|
:table-props="tableProps"
|
|
:page="queryParams.pageNo"
|
|
:limit="queryParams.pageSize"
|
|
:table-data="list"
|
|
@emit-fun="handleEmitFun"></base-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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 {
|
|
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',
|
|
},
|
|
],
|
|
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',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
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',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
async getList() {
|
|
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;
|
|
},
|
|
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,
|
|
};
|
|
});
|
|
},
|
|
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>
|