fzq #31
@ -6,143 +6,140 @@
|
|||||||
* @Description: 质量检查实时数据
|
* @Description: 质量检查实时数据
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<small-title :size="'md'">质量检查实时数据</small-title>
|
<small-title :size="'md'">质量检查实时数据</small-title>
|
||||||
<base-table
|
<base-table v-if="loadTable" :table-head-configs="tableProps" :data="tableData.length ? tableData : []" />
|
||||||
v-if="tableReady"
|
</div>
|
||||||
:table-config="tableProps"
|
</div>
|
||||||
:table-data="tableData.length ? tableData : []"
|
|
||||||
:is-loading="listLoading"
|
|
||||||
:index-config="{ align: 'left', fixed: 'left' }"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import BaseTable from '@/components/BaseTable/index-compound'
|
import BaseTable from '@/components/base-table'
|
||||||
import SmallTitle from '@/components/small-title'
|
import SmallTitle from '@/components/small-title'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
// import fetchList from '@/api/factory-manage/realtimeData'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RealtimeDataOfTeam',
|
name: 'RealtimeDataOfTeam',
|
||||||
components: { BaseTable, SmallTitle },
|
components: { BaseTable, SmallTitle },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tableReady: false,
|
loadTable: false,
|
||||||
// dynamicPropSet: false,
|
// dynamicPropSet: false,
|
||||||
tableProps: [{ label: 'default', prop: 'default' }],
|
tableProps: [{ label: 'default', prop: 'default' }],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
testData,
|
testData: null,
|
||||||
listLoading: false,
|
listLoading: false,
|
||||||
intervalId: null
|
intervalId: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.clearData()
|
this.clearData()
|
||||||
|
|
||||||
// fetchList('quality').then(res => {
|
this.fetchList().then(({ data: res }) => {
|
||||||
// this.testData = res
|
this.testData = res
|
||||||
// this.handleData()
|
this.handleData()
|
||||||
// })
|
})
|
||||||
|
|
||||||
// this.intervalId = setInterval(() => {
|
this.intervalId = setInterval(() => {
|
||||||
// this.clearData()
|
this.clearData()
|
||||||
// fetchList('quality').then(res => {
|
this.fetchList().then(res => {
|
||||||
// this.testData = res
|
this.testData = res
|
||||||
// this.handleData()
|
this.handleData()
|
||||||
// })
|
})
|
||||||
// }, 1000 * 60 * 5)
|
}, 1000 * 60 * 5)
|
||||||
|
},
|
||||||
|
|
||||||
this.$nextTick(() => {
|
beforeDestroy() {
|
||||||
this.handleData()
|
if (this.intervalId) clearInterval(this.intervalId)
|
||||||
})
|
},
|
||||||
},
|
|
||||||
|
|
||||||
beforeDestroy() {
|
methods: {
|
||||||
if (this.intervalId) clearInterval(this.intervalId)
|
fetchList() {
|
||||||
},
|
// 获取质量数据
|
||||||
|
return this.$http({
|
||||||
|
url: this.$http.adornUrl('/monitoring/productionMonitoring/qualityInspectionRealTimeData'),
|
||||||
|
method: 'post'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
clearData() {
|
||||||
clearData() {
|
this.loadTable = false
|
||||||
this.tableReady = false
|
this.testData = null
|
||||||
// this.testData = null
|
this.tableData.splice(0)
|
||||||
this.tableData.splice(0)
|
this.tableProps.splice(0)
|
||||||
this.tableProps.splice(0)
|
},
|
||||||
},
|
|
||||||
|
|
||||||
handleData() {
|
handleData() {
|
||||||
// console.log('testData ===> ', this.testData)
|
// console.log('testData ===> ', this.testData)
|
||||||
this.initProps()
|
this.initProps()
|
||||||
// console.log('props ===> ', this.tableProps)
|
// console.log('props ===> ', this.tableProps)
|
||||||
this.initData()
|
this.initData()
|
||||||
// console.log('datas ===> ', this.tableData)
|
// console.log('datas ===> ', this.tableData)
|
||||||
this.tableReady = true
|
this.loadTable = true
|
||||||
},
|
},
|
||||||
|
|
||||||
handleRow(data) {
|
handleRow(data) {
|
||||||
// data: { data:[], checkType: '' }
|
// data: { data:[], checkType: '' }
|
||||||
const item = {}
|
const item = {}
|
||||||
item.checkType = data.checkType
|
item.checkType = data.checkType
|
||||||
|
|
||||||
data.data.forEach(timepoint => {
|
data.data.forEach(timepoint => {
|
||||||
if (timepoint.children && timepoint.children.length) {
|
if (timepoint.children && timepoint.children.length) {
|
||||||
timepoint.children.forEach(line => {
|
timepoint.children.forEach(line => {
|
||||||
// item[timepoint.dynamicValue + line.dynamicName] = line.dynamicValue
|
// item[timepoint.dynamicValue + line.dynamicName] = line.dynamicValue
|
||||||
item[timepoint.dynamicName + line.dynamicName] = line.dynamicValue
|
item[timepoint.dynamicName + line.dynamicName] = line.dynamicValue
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return item
|
return item
|
||||||
},
|
},
|
||||||
|
|
||||||
initData() {
|
initData() {
|
||||||
this.tableData = this.testData.data.data.map(row => this.handleRow(row))
|
this.tableData = this.testData.data.data.map(row => this.handleRow(row))
|
||||||
},
|
},
|
||||||
|
|
||||||
initProps() {
|
initProps() {
|
||||||
this.tableProps = this.handlePropsEntry(this.testData.data.nameData)
|
this.tableProps = this.handlePropsEntry(this.testData.data.nameData)
|
||||||
},
|
},
|
||||||
|
|
||||||
handlePropsEntry(nameData) {
|
handlePropsEntry(nameData) {
|
||||||
const dynamicPropNames = []
|
const dynamicPropNames = []
|
||||||
const timeMap = {}
|
const timeMap = {}
|
||||||
|
|
||||||
const parentNode = nameData.filter(item => item.tree === 1)
|
const parentNode = nameData.filter(item => item.tree === 1)
|
||||||
const childNode = nameData.filter(item => item.tree === 2)
|
const childNode = nameData.filter(item => item.tree === 2)
|
||||||
|
|
||||||
const handleChild = function(prop) {
|
const handleChild = function(prop) {
|
||||||
const time = parentNode.find(item => item.id === prop.parentId).name
|
const time = parentNode.find(item => item.id === prop.parentId).name
|
||||||
// 填充 timeMap
|
// 填充 timeMap
|
||||||
timeMap[time] = timeMap[time] ? timeMap[time] : {}
|
timeMap[time] = timeMap[time] ? timeMap[time] : {}
|
||||||
timeMap[time][prop.name] = true
|
timeMap[time][prop.name] = true
|
||||||
}
|
}
|
||||||
|
|
||||||
childNode.forEach(item => {
|
childNode.forEach(item => {
|
||||||
handleChild(item)
|
handleChild(item)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 对键值排序（时间排序）
|
// 对键值排序（时间排序）
|
||||||
const sortedTime = Object.keys(timeMap).sort((a, b) => {
|
const sortedTime = Object.keys(timeMap).sort((a, b) => {
|
||||||
if (moment(a).isBefore(b)) return -1
|
if (moment(a).isBefore(b)) return -1
|
||||||
else return 1
|
else return 1
|
||||||
})
|
})
|
||||||
|
|
||||||
// 保存为 props
|
// 保存为 props
|
||||||
for (const key of sortedTime) {
|
for (const key of sortedTime) {
|
||||||
const prop = { label: key, children: [] }
|
const prop = { label: key, children: [] }
|
||||||
for (const subKey in timeMap[key]) {
|
for (const subKey in timeMap[key]) {
|
||||||
prop.children.push({ label: subKey, prop: key + subKey })
|
prop.children.push({ label: subKey, prop: key + subKey })
|
||||||
}
|
}
|
||||||
dynamicPropNames.push(prop)
|
dynamicPropNames.push(prop)
|
||||||
}
|
}
|
||||||
|
|
||||||
return [{ prop: 'checkType', label: '检查类型', isFixed: true }, ...dynamicPropNames]
|
return [{ prop: 'checkType', label: '检查类型', isFixed: true }, ...dynamicPropNames]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user