yudao-dev/src/views/core/analysis/balanceAnalysis/index copy.vue

<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>