10.19
This commit is contained in:
366
src/views/DataAnalysis/productionBeat.vue
Normal file
366
src/views/DataAnalysis/productionBeat.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-24 13:30:00
|
||||
* @LastEditTime: 2022-05-10 18:38:25
|
||||
* @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>
|
||||
Reference in New Issue
Block a user