yudao-dev/src/views/core/analysis/balanceAnalysis/eq-detail.vue

<!--
 * @Author: zwq
 * @Date: 2023-08-24 14:47:58
 * @LastEditors: zwq
 * @LastEditTime: 2025-01-09 10:04:17
 * @Description:
-->
<template>
	<div>
		<base-table
			:page="1"
			:limit="999"
			v-loading="dataListLoading"
			:table-props="tableProps"
			max-height="400"
			:table-data="tableData">
			<method-btn
				v-if="tableData.length"
				slot="handleBtn"
				:width="80"
				label="操作"
				:method-list="tableBtn"
				@clickBtn="handleClick" />
		</base-table>
		<div v-if="eqChartData.length > 0" style="margin-top: 10px">
			<search-bar
				:formConfigs="formConfig"
				ref="searchBarForm1"
				@headBtnClick="buttonClick" />
			<div
				ref="lineChart"
				id="chart"
				:style="{ height: '400px', width: '100%', marginLeft: '10px' }" />
		</div>
	</div>
</template>

<script>
import { getNewCTDet, getNewCTCharts } from '@/api/core/analysis/index';
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '@/utils/chartMixins/resize';
import { parseTime } from '../../mixins/code-filter';

const tableProps = [
	{
		prop: 'equipmentName',
		label: '设备',
	},
	{
		prop: 'size',
		label: '规格',
		showOverflowtooltip: true,
	},
	{
		prop: 'process',
		label: '产品工艺',
	},
	{
		prop: 'standardCt',
		label: '标准节拍pcs/min',
	},
	{
		prop: 'ct',
		label: '当前节拍pcs/min',
	},
];
export default {
	mixins: [resize],
	data() {
		return {
			tableProps,
			tableData: [],
			tableBtn: [
				{
					type: 'eqChart',
					btnName: '趋势图',
				},
			].filter((v) => v),
			dataListLoading: false,
			time: {},
			eqChartData: [],
			eqName: null,
			equipmentId: null,
			chart: null,
			formConfig: [
				{
					type: 'datePicker',
					label: '时间范围',
					dateType: 'datetimerange',
					format: 'yyyy-MM-dd HH:mm:ss',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'timeVal',
					width: 350,
					clearable: false,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
			],
		};
	},
	components: {},
	created() {},
	mounted() {},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		// 获取数据列表
		init(lineId, startTime, endTime) {
			this.eqChartData = [];
			this.time.startTime = startTime;
			this.time.endTime = endTime;
			this.dataListLoading = true;
			getNewCTDet(lineId).then((response) => {
				this.tableData = response.data;
				this.dataListLoading = false;
			});
		},
		handleClick(val) {
			const data = {
				...this.time,
				equipmentId: val.data.equipmentId,
			};
			this.eqName = val.data.equipmentName;
			this.equipmentId = val.data.equipmentId;
			getNewCTCharts(data).then((response) => {
				this.eqChartData = response.data;
				this.$nextTick(() => {
					this.$refs.searchBarForm1.formInline.timeVal = [
						this.time.startTime,
						this.time.endTime,
					];
					this.initChart();
				});
			});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.time.startTime = val.timeVal ? val.timeVal[0] : undefined;
					this.time.endTime = val.timeVal ? val.timeVal[1] : undefined;
					const data = {
						...this.time,
						equipmentId: this.equipmentId,
					};
					getNewCTCharts(data).then((response) => {
						this.eqChartData = response.data;
						this.$nextTick(() => {
							this.initChart();
						});
					});
					break;
				default:
					console.log(val);
			}
		},
		initChart() {
			this.chart = echarts.init(this.$refs.lineChart);
			const _this = this;
			this.chart.setOption({
				title: {
					text: this.eqName
						? '{space|}{tip|}{space|}{value|' + this.eqName + ' 节拍趋势图' + '}'
						: '',
					textStyle: {
						rich: {
							tip: {
								width: 6,
								height: 6,
								borderRadius: 50,
								backgroundColor: '#288AFF',
							},
							space: {
								width: 8,
							},
							value: {
								fontSize: 14,
								color: 'black',
							},
						},
					},
				},
				color: ['#288AFF', '#8EF0AB', '#FFDC94'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				legend: {
					data: ['当前节拍', '标准节拍'],
				},
				grid: {
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: this.eqChartData[0].ct.map((item) => {
						return parseTime(item.recordTime, '{m}-{d} {h}:{i}');
					}),
					axisPointer: {
						type: 'shadow',
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '节拍',
						min: 0,
						interval: 20,
						axisLabel: {
							formatter: '{value} pcs/min',
						},
					},
				],
				dataZoom: [
					{
						type: 'inside',
						start: 0,
						end: 100,
					},
					{
						start: 0,
						end: 100,
					},
				],
				series: [
					{
						name: '标准节拍',
						type: 'line',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'pcs/min';
							},
						},
						data: this.eqChartData[0].ct.map((item) => {
							return item.standardCt;
						}),
					},
					{
						name: '当前节拍',
						type: 'line',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'pcs/min';
							},
						},
						data: this.eqChartData[0].ct.map((item) => {
							return item.ct;
						}),
					},
				],
			});
		},
	},
};
</script>