yudao-dev/src/views/equipment/timing-diagram/output/index.vue

<!-- 
    filename: index.vue
    author: liubin
    date: 2023-09-04 09:34:52
    description: 设备产量时序图
-->

<template>
	<div class="app-container">
		<h1>设备产量时序图</h1>
		<!-- 搜索工作栏 -->
		<SearchBar
			:formConfigs="searchBarFormConfig"
			ref="search-bar"
			@headBtnClick="handleSearchBarBtnClick" />

		<div class="main-area">
			<div class="graphs" v-if="graphList.length">
				<div class="graph" v-for="eq,index in graphList" :key="eq.key">
					<h2 class="graph-title">{{ eq.key }}</h2>
					<LineChart :key="eq.key + '__linechart'" :config="getRealConfig(index)" />
				</div>
			</div>
			<h2 v-else>请添加设备</h2>
		</div>
	</div>
</template>

<script>
import LineChart from './components/lineChart.vue';

export default {
	name: 'SGProduction',
	components: { LineChart },
	props: {},
	data() {
		return {
			searchBarFormConfig: [
				{
					type: 'select',
					label: '产线',
					placeholder: '请选择产线',
					selectOptions: [],
					param: 'lineId',
				},
				{
					type: 'select',
					label: '工段',
					placeholder: '请选择工段',
					selectOptions: [],
					param: 'sectionId',
				},
				// 时间段
				{
					type: 'datePicker',
					label: '时间段',
					dateType: 'daterange', // datetimerange
					// format: 'yyyy-MM-dd HH:mm:ss',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					// valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始日期',
					endPlaceholder: '结束日期',
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'recordTime',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '设备对比',
					name: 'compare',
					color: 'warning',
					plain: true,
				},
			],
			queryParams: {
				lineId: null,
				sectionId: null,
				equipmentId: null,
				recordTime: [],
			},
			graphList: [],
			templateConfig: {
				grid: {
					top: 88,
					left: 56,
					right: 56,
					bottom: 56,
				},
				legend: {
					top: 0,
					left: 0,
					padding: 5,
					icon: 'roundRect',
					itemWidth: 12,
					itemHeight: 12,
					itemGap: 20,
					textStyle: {
						fontSize: 14,
						lineHeight: 14,
					},
				},
				xAxis: {
					type: 'category',
					data: Array(24)
						.fill(1)
						.map((item, index) => `${index}:00`),
				},
				yAxis: {
					type: 'value',
					name: '产量',
					nameLocation: 'end',
					nameTextStyle: {
						fontSize: 14,
						align: 'right',
					},
					nameGap: 26,
				},
				series: [
					{
						name: '产线1',
						data: Array(24)
							.fill(1)
							.map(() => Math.random() * 100),
						type: 'line',
						smooth: true,
					},
				],
			},
		};
	},
	created() {
		this.initProductline();
		this.initWorksection();
		this.getList();
	},
	methods: {
		handleSearchBarBtnClick({ btnName, ...payload }) {
			switch (btnName) {
				case 'search':
					this.queryParams.lineId = payload.lineId || null;
					this.queryParams.sectionId = payload.sectionId || null;
					this.queryParams.equipmentId = payload.equipmentId || null;
					this.queryParams.recordTime = payload.recordTime || null;
					this.getList();
					break;
				case 'compare':
					this.$message.info('暂未实现该接口');
					break;
			}
		},

		/** 重置查询条件 */
		initQuery() {
			this.queryParams.lineId = null;
			this.queryParams.sectionId = null;
			this.queryParams.equipmentId = null;
			this.queryParams.recordTime = [];
		},

		/** 对象到数组的转换 */
		objectToArray(obj) {
			return Object.keys(obj).map((key) => {
				obj[key].sort((a, b) => a.startTime - b.startTime);
				obj[key].key = key;
				return obj[key];
			});
		},

		async getList() {
			const { code, data } = await this.$axios({
				url: '/analysis/equipment-analysis/quantity',
				method: 'get',
				params: this.queryParams,
			});
			if (code == 0) {
				this.graphList = this.objectToArray(data);
				// const eq1 = [
				// 	{ totalQuantity: 20, startTime: 1693964578000 },
				// 	{ totalQuantity: 43, startTime: 1693964678000 },
				// 	{ totalQuantity: 12, startTime: 1693964778000 },
				// 	{ totalQuantity: 11, startTime: 1693964878000 },
				// 	{ totalQuantity: 98, startTime: 1693965478000 },
				// 	{ totalQuantity: 87, startTime: 1693965578000 },
				// ];
				// eq1.key = 'SS1';
				// const eq2 = [
				// 	{ totalQuantity: 23, startTime: 1693961578000 },
				// 	{ totalQuantity: 42, startTime: 1693964578000 },
				// 	{ totalQuantity: 51, startTime: 1693965578000 },
				// 	{ totalQuantity: 18, startTime: 1693966578000 },
				// 	{ totalQuantity: 77, startTime: 1693966778000 },
				// 	{ totalQuantity: 38, startTime: 1693967578000 },
				// 	{ totalQuantity: 57, startTime: 1693969578000 },
				// ];
				// eq2.key = 'SS2';
				// this.graphList = [eq1, eq2];
				console.log('graph list', this.graphList);
			}
		},

		/** 获得设备产量 */
		getEquipmentQuantity(equipmentArr) {
			return equipmentArr.map((item) => item.totalQuantity);
		},

		/** 获得设备产量的时间 */
		getTimeinfo(equipmentArr) {
			return equipmentArr.map((item) => new Date(item.startTime).toLocaleTimeString());
		},

		getRealConfig(index) {
			// if (!this.graphList || this.graphList.length == 0) return;
			const config = JSON.parse(JSON.stringify(this.templateConfig));
			// config.legend.data = this.graphList[index].key;
			config.series[0].name = this.graphList[index]?.key;
			// console.log("this.graphList?.[index]", this.graphList?.[index]);
			config.series[0].data = this.getEquipmentQuantity(this.graphList?.[index] || []);
			config.xAxis.data = this.getTimeinfo(this.graphList?.[index] || []);
			return config;
		},

		/** 准备产线数据 */
		async initProductline() {
			const { code, data } = await this.$axios({
				url: '/base/production-line/listAll',
				method: 'get',
			});
			if (code == 0) {
				this.searchBarFormConfig[0].selectOptions = data.map((item) => {
					return {
						name: item.name,
						id: item.id,
					};
				});
			}
		},

		/** 准备工段数据 */
		async initWorksection() {
			const { code, data } = await this.$axios({
				url: '/base/workshop-section/listAll',
				method: 'get',
			});
			if (code == 0) {
				this.searchBarFormConfig[1].selectOptions = data.map((item) => {
					return {
						name: item.name,
						id: item.id,
					};
				});
			}
		},
	},
};
</script>

<style scoped lang="scss"></style>