'init'
This commit is contained in:
359
src/views/QualityManager/retrospect/equipment/parameter-test.vue
Normal file
359
src/views/QualityManager/retrospect/equipment/parameter-test.vue
Normal file
@@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<div class="custom-container">
|
||||
<el-row :gutter="20" style="height: calc(100vh - 150px)">
|
||||
<el-col :span="4">
|
||||
<aside class="custom-container__common left-side-container">
|
||||
<section class="left-side-container__title">
|
||||
<span v-if="logoUrl" class="logo">
|
||||
<img :src="logoUrl" alt="side container logo">
|
||||
</span>
|
||||
<span class="text-content">
|
||||
{{ factoryName }}
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<section class="left-side-container__content">
|
||||
<!-- 导航栏 -->
|
||||
<el-tree
|
||||
class="custom-tree"
|
||||
:icon-class="'el-icon-document-copy'"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</section>
|
||||
</aside>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="20">
|
||||
<div class="custom-container__common right-side-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps && tableProps.length ? tableProps : [{ label: '', prop: '' }]"
|
||||
:table-data="dataList"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<!-- <method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" /> -->
|
||||
</base-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取树形数据结构:
|
||||
import { getEquipmentTree, getWorkOrders, equipParams } from '@/api/quality-manage/retrospect'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
// import Pagination from '@/components/Pagination'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import testData from './parameter.test.data.js'
|
||||
import moment from 'moment'
|
||||
import writeXlsxFile from 'write-excel-file'
|
||||
|
||||
export default {
|
||||
name: 'EquipmentRetrospectParameter',
|
||||
components: { BaseTable, HeadForm },
|
||||
data() {
|
||||
return {
|
||||
factoryName: 'xxx工厂',
|
||||
logoUrl: require('../../../../assets/img/cnbm.png'),
|
||||
treeData: null,
|
||||
defaultProps: { label: 'label', children: 'children' },
|
||||
tableProps: [],
|
||||
trueWidth: 200,
|
||||
dataList: [],
|
||||
productLineList: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
addOrUpdateVisible: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
selectedEquipmentId: null,
|
||||
headFormConfig: [
|
||||
{
|
||||
// 输入过滤
|
||||
// label: i18n.t('module.packingManage.PackingList.orderNo'),
|
||||
// placeholder: this.$t('module.packingManage.PackingList.orderNo'),
|
||||
type: 'select',
|
||||
label: '工单',
|
||||
placeholder: '工单',
|
||||
filterable: true,
|
||||
param: 'workOrderId',
|
||||
selectOptions: []
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
dateType: 'daterange',
|
||||
// valueFormat: 'yyyy-MM-dd hh:mm:ss', // 解决时间早一天问题
|
||||
rangeSeparator: '-',
|
||||
// startPlaceholder: '开始日期',
|
||||
// endPlaceholder: '结束日期',
|
||||
startPlaceholder: this.$t('module.orderManage.order.StartTime'),
|
||||
endPlaceholder: this.$t('module.orderManage.order.EndTime'),
|
||||
param: 'timeSlot'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.export',
|
||||
name: 'export',
|
||||
color: 'success'
|
||||
}
|
||||
],
|
||||
headFormValue: {},
|
||||
testData
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
|
||||
this.fetchList('eq-tree').then(res => {
|
||||
if (res.data) {
|
||||
const eqTree = res.data[0] // 只会返回一条工厂数据
|
||||
this.factoryName = eqTree.name
|
||||
// 构造tree展示的结构
|
||||
eqTree.pdlList.forEach(item => {
|
||||
const treeItem = {}
|
||||
treeItem.label = item.name
|
||||
if (item.wsList.length) {
|
||||
treeItem.children = []
|
||||
item.wsList.forEach(workSection => {
|
||||
const wsItem = {}
|
||||
wsItem.label = workSection.name
|
||||
if (workSection.eqList.length) {
|
||||
wsItem.children = []
|
||||
workSection.eqList.forEach(eq => {
|
||||
const eqItem = {}
|
||||
eqItem.label = eq.eqName
|
||||
eqItem.id = eq.eqId
|
||||
wsItem.children.push(eqItem)
|
||||
})
|
||||
}
|
||||
treeItem.children.push(wsItem)
|
||||
})
|
||||
}
|
||||
// 产线
|
||||
this.productLineList.push(treeItem)
|
||||
})
|
||||
this.treeData = this.productLineList
|
||||
}
|
||||
})
|
||||
this.fetchList('work-order').then(res => {
|
||||
if (res.data.records) {
|
||||
this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name }))
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.productLineList.splice(0)
|
||||
this.headFormConfig[0].selectOptions.splice(0)
|
||||
this.factoryName = ''
|
||||
// 设置静态props
|
||||
this.resetTableProps()
|
||||
},
|
||||
fetchList(type) {
|
||||
switch (type) {
|
||||
case 'eq-tree':
|
||||
return getEquipmentTree()
|
||||
case 'work-order':
|
||||
return getWorkOrders()
|
||||
case 'eq-params': {
|
||||
return equipParams({
|
||||
...this.listQuery,
|
||||
startTime: this.headFormValue.timeSlot ? this.headFormValue.timeSlot[0] : '',
|
||||
endTime: this.headFormValue.timeSlot ? this.headFormValue.timeSlot[1] : '',
|
||||
equipmentId: this.selectedEquipmentId,
|
||||
workOrderId: this.headFormValue.workOrderId ? this.headFormValue.workOrderId : null
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
//
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList('eq-params')
|
||||
} else if (this.headFormValue.btnName === 'export') {
|
||||
this.exportExcel()
|
||||
}
|
||||
},
|
||||
resetTableProps() {
|
||||
this.tableProps.splice(0)
|
||||
this.tableProps = [
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
// label: i18n.t('module.packingManage.PackingList.shelfId'),
|
||||
label: '设备名称',
|
||||
fixed: true
|
||||
}
|
||||
]
|
||||
},
|
||||
getList() {
|
||||
// 清除数据
|
||||
this.dataList.splice(0)
|
||||
// 清除原先的prop并设置静态props
|
||||
this.resetTableProps()
|
||||
// this.fetchList('eq-params').then(res => {})
|
||||
setTimeout(() => {
|
||||
// 创建动态列名
|
||||
this.createDynamicProps(this.testData)
|
||||
// 创建扁平化数据
|
||||
this.flattenRes(JSON.parse(JSON.stringify(this.testData)))
|
||||
// 加载数据
|
||||
}, 3000)
|
||||
},
|
||||
// dynamic props
|
||||
createDynamicProps(res) {
|
||||
const names = res.data.nameData
|
||||
if (names) {
|
||||
// 如果数据结构正确
|
||||
names
|
||||
.filter(item => item.parentId === '0')
|
||||
.map(item => item.name)
|
||||
.forEach(name => {
|
||||
this.tableProps.push({ label: name, prop: name })
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
console.log('createDynamicProps(): 数据结构不正确')
|
||||
},
|
||||
// 数据扁平化
|
||||
flattenRes(res) {
|
||||
// 注: parentId+tree+id+name 看情况叠加,一般是不会出现重复的prop,有可能多个设备有不同的参数，到时候可能就要求并集
|
||||
const dataList = res.data.data
|
||||
if (dataList && dataList.length > 0) {
|
||||
// 如果数据结构正确
|
||||
dataList.forEach(obj => {
|
||||
obj.data.forEach(item => {
|
||||
obj[item.dynamicName] =
|
||||
item.dynamicName === 'time' ? moment(item.dynamicValue).format('YYYY-MM-DD HH:mm:ss') : item.dynamicValue
|
||||
})
|
||||
// 原地删除data数组
|
||||
delete obj.data
|
||||
})
|
||||
|
||||
this.dataList = dataList
|
||||
}
|
||||
},
|
||||
async exportExcel() {
|
||||
const data = []
|
||||
if (this.dataList.length > 0) {
|
||||
const HEADER_ROW = this.tableProps.map(item => ({ value: item.label }))
|
||||
// table prop 里的 prop 是不全的，要补充
|
||||
HEADER_ROW.unshift({ value: 'plc' })
|
||||
HEADER_ROW.unshift({ value: '序号' })
|
||||
data.push(HEADER_ROW)
|
||||
|
||||
this.dataList.forEach(obj => {
|
||||
const DATA_ROW = []
|
||||
for (const key in obj) {
|
||||
DATA_ROW.push({ value: obj[key] })
|
||||
}
|
||||
data.push(DATA_ROW)
|
||||
})
|
||||
|
||||
await writeXlsxFile(data, {
|
||||
fileName: 'equipment_parameters_list.xlsx'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.hints.searchFirst'),
|
||||
type: 'error',
|
||||
duration: 1500
|
||||
})
|
||||
}
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (data.id) {
|
||||
this.selectedEquipmentId = data.id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-container {
|
||||
height: calc(100vh - 134px);
|
||||
margin: 0 16px 0;
|
||||
}
|
||||
|
||||
.custom-container__common {
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.left-side-container {
|
||||
height: calc(100vh - 147px);
|
||||
padding: 0;
|
||||
background: #fafafa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.left-side-container__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid rgba(204, 204, 204, 0.479);
|
||||
|
||||
.text-content {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.left-side-container__content {
|
||||
flex: 1 1;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.right-side-container {
|
||||
height: calc(100vh - 147px);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 0 12px 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree >>> .el-tree-node {
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.custom-tree >>> .el-tree-node__content {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.custom-tree >>> .is-current {
|
||||
border-left: 4px solid #0b58ff;
|
||||
}
|
||||
|
||||
.custom-tree >>> .is-current .el-tree-node__content {
|
||||
background: #fafafa;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user