552 lines
17 KiB
Vue
552 lines
17 KiB
Vue
<template>
|
|
<div class="mod-config">
|
|
<el-form :inline="true" class="blueTip" size="small">
|
|
<!-- <el-form-item>
|
|
{{ $t('eq.plcname') }}
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="dataForm.lineId" :placeholder="$t('eq.plcname')" clearable>
|
|
<el-option v-for="line in lineList" :key="line.code" :value="line.id" :label="line.name" />
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<!-- <el-form-item :label="$t('eqId')">
|
|
<strong>{{ $route.params.id }}</strong>
|
|
</el-form-item> -->
|
|
<el-form-item :label="$t('equName')">
|
|
<strong>{{ equipmentName }}</strong>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('equCode')">
|
|
<strong>{{ equipmentCode }}</strong>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- <base-table :page="pageIndex" :size="pageSize" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" /> -->
|
|
<base-table v-if="tableConfigs.length > 3" :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" />
|
|
<base-table v-if="tableConfigs2.length > 3" :data="dataList2" :table-head-configs="tableConfigs2" :max-height="calcMaxHeight(8)" />
|
|
<base-table v-if="tableConfigs3.length > 3" :data="dataList3" :table-head-configs="tableConfigs3" :max-height="calcMaxHeight(8)" />
|
|
<base-table v-if="tableConfigs4.length > 3" :data="dataList4" :table-head-configs="tableConfigs4" :max-height="calcMaxHeight(8)" />
|
|
<base-table v-if="tableConfigs5.length > 3" :data="dataList5" :table-head-configs="tableConfigs5" :max-height="calcMaxHeight(8)" />
|
|
<base-table v-if="tableConfigs6.length > 3" :data="dataList6" :table-head-configs="tableConfigs6" :max-height="calcMaxHeight(8)" />
|
|
<base-table v-if="tableConfigs7.length > 3" :data="dataList7" :table-head-configs="tableConfigs7" :max-height="calcMaxHeight(8)" />
|
|
<base-table v-if="tableConfigs8.length > 3" :data="dataList8" :table-head-configs="tableConfigs8" :max-height="calcMaxHeight(8)" />
|
|
<base-table v-if="tableConfigs9.length > 3" :data="dataList9" :table-head-configs="tableConfigs9" :max-height="calcMaxHeight(8)" />
|
|
<base-table v-if="tableConfigs10.length > 3" :data="dataList10" :table-head-configs="tableConfigs10" :max-height="calcMaxHeight(8)" />
|
|
<!-- <base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" /> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { calcMaxHeight } from '@/utils'
|
|
import { timeFilter } from '@/utils/filters'
|
|
import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
|
|
import i18n from '@/i18n'
|
|
import BaseTable from '@/components/base-table'
|
|
import { pick } from 'lodash/object'
|
|
import equipmentVue from './equipment.vue'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
calcMaxHeight,
|
|
equipmentName: null,
|
|
equipmentCode: null,
|
|
tableConfigs: [],
|
|
tableConfigs2: [],
|
|
tableConfigs3: [],
|
|
tableConfigs4: [],
|
|
tableConfigs5: [],
|
|
tableConfigs6: [],
|
|
tableConfigs7: [],
|
|
tableConfigs8: [],
|
|
tableConfigs9: [],
|
|
tableConfigs10: [],
|
|
dataLength: null,
|
|
dataList: [],
|
|
dataList2: [],
|
|
dataList3: [],
|
|
dataList4: [],
|
|
dataList5: [],
|
|
dataList6: [],
|
|
dataList7: [],
|
|
dataList8: [],
|
|
dataList9: [],
|
|
dataList10: [],
|
|
dataListLoading: false,
|
|
dataListSelections: []
|
|
}
|
|
},
|
|
components: {
|
|
AddOrUpdate,
|
|
BaseTable
|
|
},
|
|
activated() {
|
|
this.getDataList()
|
|
},
|
|
mouted() {
|
|
this.getDataList()
|
|
},
|
|
created() {
|
|
// console.log('params',this.$route.params)
|
|
},
|
|
methods: {
|
|
// destroy dialog
|
|
handleDestroyDialog() {
|
|
setTimeout(() => {
|
|
this.addOrUpdateVisible = false
|
|
}, /** after dialog animated */ 200)
|
|
},
|
|
// 获取数据列表
|
|
getDataList() {
|
|
this.dataListLoading = true
|
|
this.$http({
|
|
url: this.$http.adornUrl(`/monitoring/equipmentValueMonitor/runLog/${this.$route.params.id}`),
|
|
method: 'get'
|
|
}).then(({ data: res }) => {
|
|
console.log('/monitoring/equipmentValueMonitor/runLog/', res)
|
|
this.equipmentName = res.data[0].data[0].equName
|
|
this.equipmentCode = res.data[0].data[0].equCode
|
|
this.dataLength = res.data.length
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[0].nameData &&
|
|
res.data[0].nameData.length > 0 &&
|
|
res.data[0].data &&
|
|
res.data[0].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps(res.data[0].nameData)
|
|
this.setTableData(res.data[0].data)
|
|
}
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[1].nameData &&
|
|
res.data[1].nameData.length > 0 &&
|
|
res.data[1].data &&
|
|
res.data[1].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps2(res.data[1].nameData)
|
|
this.setTableData2(res.data[1].data)
|
|
}
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[2].nameData &&
|
|
res.data[2].nameData.length > 0 &&
|
|
res.data[2].data &&
|
|
res.data[2].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps3(res.data[2].nameData)
|
|
this.setTableData3(res.data[2].data)
|
|
}
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[3].nameData &&
|
|
res.data[3].nameData.length > 0 &&
|
|
res.data[3].data &&
|
|
res.data[3].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps4(res.data[3].nameData)
|
|
this.setTableData4(res.data[3].data)
|
|
}
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[4].nameData &&
|
|
res.data[4].nameData.length > 0 &&
|
|
res.data[4].data &&
|
|
res.data[4].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps5(res.data[4].nameData)
|
|
this.setTableData5(res.data[4].data)
|
|
}
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[5].nameData &&
|
|
res.data[5].nameData.length > 0 &&
|
|
res.data[5].data &&
|
|
res.data[5].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps6(res.data[5].nameData)
|
|
this.setTableData6(res.data[5].data)
|
|
}
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[6].nameData &&
|
|
res.data[6].nameData.length > 0 &&
|
|
res.data[6].data &&
|
|
res.data[6].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps7(res.data[6].nameData)
|
|
this.setTableData7(res.data[6].data)
|
|
}
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[7].nameData &&
|
|
res.data[7].nameData.length > 0 &&
|
|
res.data[7].data &&
|
|
res.data[7].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps8(res.data[7].nameData)
|
|
this.setTableData8(res.data[7].data)
|
|
}
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[8].nameData &&
|
|
res.data[8].nameData.length > 0 &&
|
|
res.data[8].data &&
|
|
res.data[8].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps9(res.data[8].nameData)
|
|
this.setTableData9(res.data[8].data)
|
|
}
|
|
if (
|
|
res &&
|
|
res.code === 0 &&
|
|
res.data &&
|
|
res.data.length > 0 &&
|
|
res.data[9].nameData &&
|
|
res.data[9].nameData.length > 0 &&
|
|
res.data[9].data &&
|
|
res.data[9].data.length > 0
|
|
) {
|
|
// console.log(this.equipmentName)
|
|
this.setTableProps10(res.data[9].nameData)
|
|
this.setTableData10(res.data[9].data)
|
|
}
|
|
this.dataListLoading = false
|
|
}).catch(()=>{}) //---去除无效报错---
|
|
},
|
|
setTableProps(nameData) {
|
|
this.tableConfigs = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps2(nameData) {
|
|
this.tableConfigs2 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps3(nameData) {
|
|
this.tableConfigs3 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps3(nameData) {
|
|
this.tableConfigs3 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps4(nameData) {
|
|
this.tableConfigs4 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps5(nameData) {
|
|
this.tableConfigs5 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps6(nameData) {
|
|
this.tableConfigs6 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps7(nameData) {
|
|
this.tableConfigs7 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps8(nameData) {
|
|
this.tableConfigs8 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps9(nameData) {
|
|
this.tableConfigs9 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableProps10(nameData) {
|
|
this.tableConfigs10 = [
|
|
{
|
|
type: 'index',
|
|
name: i18n.t('index')
|
|
},
|
|
{ prop: 'time', name: this.$t('ti'), filter: timeFilter },
|
|
{ prop: 'plcCode', name: this.$t('plcCode') },
|
|
// { prop: 'equName', name: this.$t('equName') },
|
|
// { prop: 'equCode', name: this.$t('equCode') },
|
|
// ...['数值1', '数值2', '数值3'].map(name => {
|
|
// return { prop: name, name }
|
|
// })
|
|
...Array.from(new Set(nameData.map((item) => item.name))).map((name) => ({ prop: name, name }))
|
|
]
|
|
// console.log(this.tableConfigs[i]);
|
|
},
|
|
setTableData(data) {
|
|
this.dataList = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
},
|
|
setTableData2(data) {
|
|
this.dataList2 = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
},
|
|
setTableData3(data) {
|
|
this.dataList3 = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
},
|
|
setTableData4(data) {
|
|
this.dataList4 = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
},
|
|
setTableData5(data) {
|
|
this.dataList5 = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
},
|
|
setTableData6(data) {
|
|
this.dataList6 = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
},
|
|
setTableData7(data) {
|
|
this.dataList7 = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
},
|
|
setTableData8(data) {
|
|
this.dataList8 = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
},
|
|
setTableData9(data) {
|
|
this.dataList9 = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
},
|
|
setTableData10(data) {
|
|
this.dataList10 = data.map((item) => {
|
|
const rowItem = pick(item, ['time', 'plcCode', 'equName', 'equCode'])
|
|
if (item.data && item.data.length > 0) {
|
|
item.data.forEach((param) => {
|
|
rowItem[param.dynamicName] = param.dynamicValue
|
|
})
|
|
}
|
|
return rowItem
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|