add 动态表结构处理相关工具
This commit is contained in:
rodzic
5cc3fb758e
commit
54ce9639ab
4
src/utils/dynamicData.js
Normal file
4
src/utils/dynamicData.js
Normal file
@ -0,0 +1,4 @@
|
||||
/**
|
||||
* 用于调整服务器返回的动态数据
|
||||
*/
|
||||
export default function handleDynamicData() {}
|
||||
44
src/utils/dynamicProps.js
Normal file
44
src/utils/dynamicProps.js
Normal file
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* 用于动态表结构的 tableProps 生成
|
||||
* @param {*} nameData
|
||||
* @returns
|
||||
*/
|
||||
export default function handleNameData(nameData) {
|
||||
const props = step1(nameData.filter((item) => item.tree == 1));
|
||||
step2(
|
||||
props,
|
||||
nameData.filter((item) => item.tree == 2)
|
||||
);
|
||||
// console.log('level 1', JSON.stringify(props, null, 2));
|
||||
return props;
|
||||
}
|
||||
|
||||
function step1(tree1) {
|
||||
return Array.from(new Set(tree1.map((item) => item.name)))
|
||||
.sort()
|
||||
.map((item) => ({
|
||||
prop: item,
|
||||
label: item,
|
||||
align: 'center',
|
||||
children: [],
|
||||
}));
|
||||
}
|
||||
|
||||
function step2(firstTierProps, tree2) {
|
||||
tree2.map((nd) => {
|
||||
const parent = firstTierProps.find(
|
||||
({ prop }) => nd.parentId.indexOf(prop) > -1
|
||||
);
|
||||
if (notRepeat(parent.children, nd.name)) {
|
||||
parent.children.push({
|
||||
label: nd.name,
|
||||
prop: `${parent.prop}-${nd.name}`,
|
||||
align: 'center',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function notRepeat(propArray, name) {
|
||||
return propArray.every((item) => item.label !== name);
|
||||
}
|
||||
@ -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',
|
||||
@ -47,84 +50,15 @@ export default {
|
||||
},
|
||||
],
|
||||
tableProps: [
|
||||
{
|
||||
type: 'index',
|
||||
label: '序号'
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -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);
|
||||
},
|
||||
|
||||
80
src/views/quality/monitoring/qualityRecentHours/props.json
Normal file
80
src/views/quality/monitoring/qualityRecentHours/props.json
Normal 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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Ładowanie…
Reference in New Issue
Block a user