yudao-dev/src/views/equipment/analysis/exception/index.vue

<!-- 
    filename: index.vue
    author: liubin
    date: 2023-09-04 09:34:52
    description: 设备异常分析
-->

<template>
	<div class="app-container">
		<!-- 搜索工作栏 -->
		<SearchBar
			:formConfigs="searchBarFormConfig"
			ref="search-bar"
			@headBtnClick="handleSearchBarBtnClick" />

		<!-- 列表 -->
		<base-table
			:table-props="tableProps"
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-data="list"
			:max-height="tableH"
			@emitFun="handleEmitFun">
			<!-- <method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				label="操作"
				:method-list="tableBtn"
				@clickBtn="handleTableBtnClick" /> -->
		</base-table>

		<!-- 分页组件 -->
		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			@pagination="getList" />
	</div>
</template>

<script>
import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';

export default {
	name: 'ExceptionAnalysis',
	mixins: [basicPageMixin, tableHeightMixin],
	components: {},
	props: {},
	data() {
		return {
			heightNum: 220,
			searchBarKeys: ['name', 'code'],
			// tableBtn: [
			// 	this.$auth.hasPermi('base:equipment-group:update')
			// 		? {
			// 				type: 'edit',
			// 				btnName: '修改',
			// 		  }
			// 		: undefined,
			// 	this.$auth.hasPermi('base:equipment-group:delete')
			// 		? {
			// 				type: 'delete',
			// 				btnName: '删除',
			// 		  }
			// 		: undefined,
			// ].filter((v) => v),
			tableBtn: [
				{
					type: 'edit',
					btnName: '修改',
				},
				{
					type: 'delete',
					btnName: '删除',
				},
			],
			tableProps: [
				{ prop: 'lineName', label: '产线名称' },
				{ prop: 'sectionName', label: '工段' },
				{ prop: 'equipmentName', label: '设备' },
				{
					width: 240,
					prop: 'mtbf',
					label: '平均故障间隔时间[MTBF](h)',
				},
				{
					width: 240,
					prop: 'mttr',
					label: '平均维修时间[MTTR](h)',
				},
				{ width: 128, prop: 'workTime', label: '工作时长(h)' },
				{ width: 128, prop: 'downTime', label: '故障时长(h)' },
				{ prop: 'downCount', label: '故障次数' },
			],
			searchBarFormConfig: [
				// {
				// 	type: 'select',
				// 	label: '请选择月份',
				// 	placeholder: '请选择月份',
				// 	param: 'month',
				// 	selectOptions: Array(12)
				// 		.fill(0)
				// 		.map((v, i) => ({
				// 			id: i + 1,
				// 			name: `${i + 1}月`,
				// 		})),
				// },
				{
					type: 'datePicker',
					label: '时间',
					dateType: 'month',
					format: 'yyyy-MM',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					width: 240,
					param: 'month',
				},
				{
					__index: 'line',
					type: 'select',
					label: '产线',
					placeholder: '请选择产线',
					param: 'lineId',
					filterable: true
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
			],
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				lineId: null,
				factoryId: null,
				recordTime: null,
			},
		};
	},
	computed: {},
	created() {
		this.fillLineOptions();
	},
	methods: {
		async fillLineOptions() {
			const { data } = await this.$axios({
				url: '/base/core-production-line/listAll',
				method: 'get',
			});
			const cfg = this.searchBarFormConfig.find(
				(item) => item.__index == 'line'
			);
			this.$set(
				cfg,
				'selectOptions',
				data.map((item) => ({
					id: item.id,
					name: item.name,
				}))
			);
		},

		async getList() {
			this.loading = true;
			// 执行查询
			const { code, data } = await this.$axios({
				url: '/analysis/equipment-analysis/efficiency',
				method: 'get',
				params: {
					lineId: this.queryParams.lineId || null,
					recordTime: this.queryParams.recordTime || null,
				},
			});
			if (code === 0) {
				this.list = data.map(item => {
					item.mtbf = item.mtbf?.toFixed(2)
					item.mttr = item.mttr?.toFixed(2)
					item.workTime = item.workTime?.toFixed(2)
					item.downTime = item.downTime?.toFixed(2)
					return item
				});
			} else {
				this.list.splice(0);
			}
		},

		handleSearchBarBtnClick(btn) {
			switch (btn.btnName) {
				case 'search':
					if (btn.month) {
						// this.queryParams.recordTime = [
						// 	moment()
						// 		.month(btn.month - 1)
						// 		.format('YYYY-MM') + '-01 00:00:00',
						// 	moment().month(btn.month).format('YYYY-MM') + '-01 00:00:00',
						// ];
						this.queryParams.recordTime = [btn.month, moment().month(new Date(btn.month).getMonth() + 1).format('YYYY-MM') + '-01 00:00:00']
						console.log(btn.month, moment().month(new Date(btn.month).getMonth() + 1).format('YYYY-MM') + '-01 00:00:00')
					} else {
						this.queryParams.recordTime = null;
					}
					this.queryParams.lineId = btn.lineId || null;
					this.handleQuery();
					break;
			}
		},

		/** 搜索按钮操作 */
		handleQuery() {
			// this.queryParams.pageNo = 1;
			this.getList();
		},

		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
	},
};
</script>

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