367 lines
9.1 KiB
Vue
367 lines
9.1 KiB
Vue
<!--
|
||
/*
|
||
* @Author: lb
|
||
* @Date: 2022-03-24 13:30:00
|
||
* @LastEditTime: 2022-05-10 18:38:26
|
||
* @LastEditors: gtz
|
||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||
*/
|
||
-->
|
||
<template>
|
||
<div>
|
||
<div class="app-container">
|
||
<top-title />
|
||
<head-form
|
||
:form-config="headFormConfig"
|
||
@headBtnClick="btnClick"
|
||
/>
|
||
<base-table
|
||
:page="listQuery.current"
|
||
:limit="listQuery.size"
|
||
:table-config="trueTableProps.length ? trueTableProps: tableProps"
|
||
:table-data="tableData.length ? tableData : []"
|
||
:span-method="spanMethod"
|
||
:is-loading="listLoading"
|
||
:index-config="{ align: 'left', fixed: 'left' }"
|
||
/>
|
||
</div>
|
||
<div class="app-container">
|
||
<el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
|
||
<el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">{{ item.equipmentName }}</el-radio-button>
|
||
</el-radio-group>
|
||
<Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
import i18n from '@/lang'
|
||
import TopTitle from '@/components/TopTitle'
|
||
import HeadForm from '@/components/basicData/HeadForm'
|
||
import BaseTable from '@/components/BaseTable/index-compound'
|
||
import LineChart from '@/components/Charts/LineChart'
|
||
import { lineList } from '@/api/DataAnalysis/productionLineBalance'
|
||
// import { timeFormatter } from '@/filters'
|
||
/**
|
||
* 表格表头配置项 TypeScript接口注释
|
||
* tableConfig<ConfigItem> = []
|
||
*
|
||
* Interface ConfigItem = {
|
||
* prop: string,
|
||
* label: string,
|
||
* width: string,
|
||
* align: string,
|
||
* subcomponent: function,
|
||
* filter: function
|
||
* }
|
||
*
|
||
*
|
||
*/
|
||
|
||
const tableProps = [
|
||
{
|
||
prop: 'process',
|
||
label: i18n.t('module.dataAnalysis.productionLineBalance.process'),
|
||
align: 'center',
|
||
fixed: 'left'
|
||
},
|
||
{
|
||
prop: 'equipmentName',
|
||
label: i18n.t('module.dataAnalysis.productionLineBalance.equipmentName'),
|
||
align: 'center',
|
||
fixed: 'left'
|
||
}
|
||
]
|
||
|
||
const testData = [
|
||
{
|
||
process: '清洗',
|
||
data: [
|
||
{
|
||
equipmentName: '上料清洗1',
|
||
data: [
|
||
{
|
||
time: '2022-5-6',
|
||
eqCT: 0.46,
|
||
eqTT: 0.12,
|
||
lineCT: 0.68,
|
||
lineTT: 0.25
|
||
},
|
||
{
|
||
time: '2022-5-7',
|
||
eqCT: 0.34,
|
||
eqTT: 0.25,
|
||
lineCT: 0.42,
|
||
lineTT: 0.4733
|
||
},
|
||
{
|
||
time: '2022-5-8',
|
||
eqCT: 0.01,
|
||
eqTT: 0.62,
|
||
lineCT: 0.73,
|
||
lineTT: 0.45
|
||
}
|
||
]
|
||
},
|
||
{
|
||
equipmentName: '上料清洗2',
|
||
data: [
|
||
{
|
||
time: '2022-5-6',
|
||
eqCT: 0.46,
|
||
eqTT: 0.62,
|
||
lineCT: 0.24,
|
||
lineTT: 0.70
|
||
},
|
||
{
|
||
time: '2022-5-7',
|
||
eqCT: 0.32,
|
||
eqTT: 0.58,
|
||
lineCT: 0.46,
|
||
lineTT: 0.80
|
||
},
|
||
{
|
||
time: '2022-5-8',
|
||
eqCT: 0.35,
|
||
eqTT: 0.83,
|
||
lineCT: 0.29,
|
||
lineTT: 0.90
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
process: '磨边',
|
||
data: [
|
||
{
|
||
equipmentName: '磨边1',
|
||
data: [
|
||
{
|
||
time: '2022-5-6',
|
||
eqCT: 0.16,
|
||
eqTT: 0.42,
|
||
lineCT: 0.85,
|
||
lineTT: 0.26
|
||
},
|
||
{
|
||
time: '2022-5-7',
|
||
eqCT: 0.31,
|
||
eqTT: 0.21,
|
||
lineCT: 0.11,
|
||
lineTT: 0.46
|
||
},
|
||
{
|
||
time: '2022-5-8',
|
||
eqCT: 0.82,
|
||
eqTT: 0.25,
|
||
lineCT: 0.09,
|
||
lineTT: 0.23
|
||
}
|
||
]
|
||
},
|
||
{
|
||
equipmentName: '磨边2',
|
||
data: [
|
||
{
|
||
time: '2022-5-6',
|
||
eqCT: 0.33,
|
||
eqTT: 0.62,
|
||
lineCT: 0.37,
|
||
lineTT: 0.22
|
||
},
|
||
{
|
||
time: '2022-5-7',
|
||
eqCT: 0.32,
|
||
eqTT: 0.24,
|
||
lineCT: 0.21,
|
||
lineTT: 0.25
|
||
},
|
||
{
|
||
time: '2022-5-8',
|
||
eqCT: 0.11,
|
||
eqTT: 0.23,
|
||
lineCT: 0.45,
|
||
lineTT: 0.21
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
|
||
export default {
|
||
name: 'ProductPool',
|
||
components: { TopTitle, BaseTable, HeadForm, LineChart },
|
||
filters: {
|
||
statusFilter(status) {
|
||
const statusMap = {
|
||
published: 'success',
|
||
draft: 'info',
|
||
deleted: 'danger'
|
||
}
|
||
return statusMap[status]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
addOrUpdateVisible: false,
|
||
trueWidth: 240,
|
||
tableProps,
|
||
testData,
|
||
tableData: [],
|
||
list: [],
|
||
total: 0,
|
||
listLoading: false,
|
||
listQuery: {
|
||
current: 1,
|
||
size: 10
|
||
},
|
||
lineList: [],
|
||
headFormConfig: [
|
||
{
|
||
type: 'select',
|
||
label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
|
||
placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
|
||
param: 'line',
|
||
width: 300,
|
||
selectOptions: []
|
||
},
|
||
{
|
||
type: 'datePicker',
|
||
label: this.$t('module.dataAnalysis.productionLineBalance.time'),
|
||
dateType: 'daterange',
|
||
format: 'yyyy-MM-dd',
|
||
valueFormat: 'yyyy-MM-dd',
|
||
rangeSeparator: '-',
|
||
startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
|
||
endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
|
||
param: 'searchTime'
|
||
},
|
||
{
|
||
type: 'button',
|
||
btnName: 'btn.search',
|
||
name: 'search',
|
||
color: 'primary'
|
||
}
|
||
],
|
||
trueTableProps: [],
|
||
headFormValue: {},
|
||
numArr: [],
|
||
chartDataArr: [],
|
||
chartType: 0,
|
||
chartDataItem: {}
|
||
}
|
||
},
|
||
created() {
|
||
this.getLineList()
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
// 获取产线列表
|
||
getLineList() {
|
||
lineList({ current: 1, size: 999 }).then(res => {
|
||
if (res.code === 0) {
|
||
this.lineList = res.data.records
|
||
Vue.set(this.headFormConfig[0], 'selectOptions', this.lineList)
|
||
}
|
||
console.log(res)
|
||
})
|
||
},
|
||
getList() {
|
||
this.numArr = []
|
||
let num = 0
|
||
const tableConfig = []
|
||
this.chartDataArr = []
|
||
const dataArr = this.testData.map((item, index) => {
|
||
let dataArr = []
|
||
if (item.data) {
|
||
this.chartDataArr = this.chartDataArr.concat(item.data)
|
||
num += item.data.length
|
||
this.numArr.push(num)
|
||
dataArr = item.data.map((z, idx) => {
|
||
const dataArr = {}
|
||
z.data.forEach(i => {
|
||
// 动态生成tableConfig
|
||
if (index === 0 && idx === 0) {
|
||
tableConfig.push({
|
||
label: i.time,
|
||
children: [
|
||
{ prop: i.time + 'eqCT', label: '设备CT' },
|
||
{ prop: i.time + 'eqTT', label: '设备TT' },
|
||
{ prop: i.time + 'lineCT', label: '产线CT' },
|
||
{ prop: i.time + 'lineTT', label: '产线TT' }
|
||
]
|
||
})
|
||
}
|
||
// 合并数据集
|
||
dataArr[i.time + 'eqCT'] = i.eqCT
|
||
dataArr[i.time + 'eqTT'] = i.eqTT
|
||
dataArr[i.time + 'lineCT'] = i.lineCT
|
||
dataArr[i.time + 'lineTT'] = i.lineTT
|
||
dataArr.process = item.process
|
||
dataArr.equipmentName = z.equipmentName
|
||
})
|
||
return dataArr
|
||
})
|
||
}
|
||
return dataArr
|
||
})
|
||
this.trueTableProps = this.tableProps.concat(tableConfig)
|
||
this.tableData = this.flatten(dataArr)
|
||
this.$nextTick(() => {
|
||
this.changeChartType(this.chartType)
|
||
})
|
||
},
|
||
changeChartType(idx) {
|
||
const chartDataItem = {
|
||
timeArr: [],
|
||
eqCT: [],
|
||
eqTT: [],
|
||
lineCT: [],
|
||
lineTT: []
|
||
}
|
||
this.chartDataArr[idx].data.forEach(item => {
|
||
chartDataItem.timeArr.push(item.time)
|
||
chartDataItem.eqCT.push(item.eqCT)
|
||
chartDataItem.eqTT.push(item.eqTT)
|
||
chartDataItem.lineCT.push(item.lineCT)
|
||
chartDataItem.lineTT.push(item.lineTT)
|
||
})
|
||
this.chartDataItem = chartDataItem
|
||
},
|
||
spanMethod({ rowIndex, columnIndex }) {
|
||
if (columnIndex === 1) {
|
||
if (rowIndex === 0) {
|
||
return [this.numArr[0], 1]
|
||
} else if (this.numArr.indexOf(rowIndex) >= 0) {
|
||
const rowNum = this.numArr[this.numArr.indexOf(rowIndex) + 1] - this.numArr[this.numArr.indexOf(rowIndex)]
|
||
return [rowNum, 1]
|
||
} else {
|
||
return [0, 0]
|
||
}
|
||
}
|
||
},
|
||
// 数组扁平
|
||
flatten(arr) {
|
||
var res = []
|
||
for (var i = 0; i < arr.length; i++) {
|
||
if (Array.isArray(arr[i])) {
|
||
res = res.concat(this.flatten(arr[i]))
|
||
} else {
|
||
res.push(arr[i])
|
||
}
|
||
}
|
||
return res
|
||
},
|
||
btnClick(val) {
|
||
this.headFormValue = val
|
||
if (this.headFormValue.btnName === 'search') {
|
||
this.getList()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|