<template> <div class="app-container"> <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> <div v-if="tableData.length"> <el-tabs v-model="activeName" @tab-click="handleTabClick" style="height: 100%"> <el-tab-pane :label="'\u2002数据列表\u2002'" name="table"> <!-- @emitFun="handleEmitFun"> --> <base-table v-if="mode == 'table'" :span-method="mergeColumnHandler" :page="1" :limit="999" :table-props="tableProps" :table-data="tableData" /> </el-tab-pane> <el-tab-pane :label="'\u3000产线平衡分析图\u3000'" name="graph"> <div class="graph" style="height: 100%"> <!-- graph --> <!-- <Graph v-if="list.length" :equipment-list="list" :render="renderKey" /> --> <BalanceChart ref="lineChart" /> <div v-if="list.length == 0" class="no-data-bg"></div> </div> </el-tab-pane> </el-tabs> <!-- <SearchBar :formConfigs="[{ label: '产线平衡分析图', type: 'title' }]" /> --> </div> <div v-else class="no-data-bg"></div> </div> </template> <script> import { getCT } from '@/api/core/analysis/index'; import { getCorePLList } from '@/api/base/coreProductionLine'; import BalanceChart from '../balanceChart'; export default { components: { BalanceChart, }, // mixins: [basicPage], data() { return { urlOptions: { getDataListURL: getCT, }, activeName: 'table', tableProps: [], tableData: [], listQuery: { // time: '' endTime: undefined, lineId: undefined, startTime: undefined, }, timeList: [], spanArr: [], xData: [], yData: [], optionArrUrl: [getCorePLList], formConfig: [ { type: 'select', label: '产线', selectOptions: [], param: 'lineIds', defaultSelect: '', multiple: false, filterable: true, }, { type: 'datePicker', label: '时间', dateType: 'datetimerange', format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd HH:mm:ss', rangeSeparator: '-', startPlaceholder: '开始时间', endPlaceholder: '结束时间', width: 350, param: 'time', }, { type: 'button', btnName: '查询', name: 'search', color: 'primary', }, ], }; }, created() { this.getArr(); }, methods: { handleTabClick(tab, event) { if (tab.name == 'graph') this.renderKey = Math.random(); }, getArr() { const params = { page: 1, limit: 500, }; this.optionArrUrl.forEach((item, index) => { item(params).then((response) => { this.formConfig[index].selectOptions = response.data; }); }); }, setRowSpan(arr) { let count = 0; arr.forEach((item, index) => { if (index === 0) { this.spanArr.push(1); } else { if (item === arr[index - 1]) { this.spanArr[count] += 1; this.spanArr.push(0); } else { count = index; this.spanArr.push(1); } } }); }, /** 合并table列的规则 */ mergeColumnHandler({ row, column, rowIndex, columnIndex }) { if (columnIndex == 0) { if (this.spanArr[rowIndex]) { return [ this.spanArr[rowIndex], // row span 1, // col span ]; } else { return [0, 0]; } } }, getData() { // this.listQuery.lineId = '1672847052717821953' // this.listQuery.startTime = '1693497600000'; // this.listQuery.endTime = '1693843200000'; this.urlOptions.getDataListURL(this.listQuery).then((res) => { console.log(res); let arr = [ { prop: 'sectionName', label: '工段', align: 'center', }, { prop: 'equName', label: '设备', align: 'center', }, ]; let sectionArr = []; res.data.data.forEach((ele, index) => { let tempData = []; let eqData = []; let plData = []; ele.data.forEach((item, index) => { item.children.forEach((params) => { if (params.dynamicName === '设备CT') { tempData[item.dynamicName + '_eq'] = params.dynamicValue; eqData[index] = params.dynamicValue; } else { tempData[item.dynamicName + '_pl'] = params.dynamicValue; plData[index] = params.dynamicValue; } }); }); const equipment = { name: ele.equName, eqData: eqData, plData: plData, }; tempData['equName'] = ele.equName; tempData['sectionName'] = ele.sectionName; this.tableData.push(tempData); const { sectionName } = tempData; sectionArr.push(sectionName); this.yData.push(equipment); console.log('看看equ', this.yData); }); this.setRowSpan(sectionArr); res.data.nameData.forEach((item) => { this.timeList.push(item.name); }); const timeArray = Array.from(new Set(this.timeList)); for (const times of timeArray) { if (times !== '设备CT' && times !== '产线CT') { const subprop = { label: times, align: 'center', children: [ { prop: times + '_eq', label: '设备CT', align: 'center' }, { prop: times + '_pl', label: '产线CT', align: 'center' }, ], }; arr.push(subprop); this.xData.push(times); } } this.tableProps = arr; console.log('表格横坐标', this.xData, this.yData); this.$nextTick(() => { this.$refs.lineChart.initChart(this.xData, this.yData); }); // this.total = response.data.total; // this.dataListLoading = false; }); }, buttonClick(val) { // console.log(val) switch (val.btnName) { case 'search': // this.listQuery.pageNo = 1; // this.listQuery.pageSize = 10; this.listQuery.lineId = val.lineIds; this.listQuery.startTime = val.time ? String(new Date(val.time[0]).getTime()) : undefined; this.listQuery.endTime = val.time ? String(new Date(val.time[1]).getTime()) : undefined; if (val.time && val.lineIds) { this.tableData = []; this.xData = []; this.yData = []; this.tableProps = []; this.spanArr = []; this.timeList = []; this.getData(); } else { this.$message({ message: '请选择产线和时间', type: 'warning', }); } break; case 'reset': this.$refs.searchBarForm.resetForm(); this.listQuery = { pageSize: 10, pageNo: 1, total: 1, }; this.getDataList(); break; default: console.log(val); } }, }, }; </script>