<!-- 
    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
			class="base-table__margin"
			:table-props="tableProps"
			:table-data="list"
			@emitFun="handleEmitFun">
			<!-- :page="queryParams.pageNo"
			:limit="queryParams.pageSize" -->
			<!-- <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" /> -->

		<!-- 对话框(添加 / 修改) -->
		<base-dialog
			:dialogTitle="visualizationOpen ? '设备可视化' : '查看趋势'"
			:dialogVisible="open"
			:width="visualizationOpen ? '80%' : '700px'"
			@closed="closed"
			@close="cancel"
			@cancel="cancel"
			@confirm="submitForm">
			<div class="visualization" v-if="visualizationOpen">
				<pie-chart v-for="item in list" :key="item.id" :value="item" />
			</div>
			<div v-if="trendOpen">
				<h1>查看趋势</h1>
			</div>
		</base-dialog>
	</div>
</template>

<script>
// import moment from 'moment';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import PieChart from './components/pieChart.vue';

export default {
	name: 'EfficiencyAnalysis',
	mixins: [basicPageMixin],
	components: { PieChart },
	props: {},
	data() {
		return {
			open: false,
			visualizationOpen: false,
			trendOpen: false,
			// 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),
			tableProps: [
				{ prop: 'factoryName', label: '工厂' },
				{ prop: 'lineName', label: '产线' },
				{ prop: 'sectionName', label: '工段' },
				{ prop: 'equipmentName', label: '设备' },
				{
					label: '有效时间',
					children: [
						{
							width: 128,
							prop: 'workTime',
							label: '工作时长',
						},
						{
							width: 128,
							prop: 'workRate',
							label: '百分比',
							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
						},
					],
				},
				{
					label: '关机时间',
					children: [
						{
							width: 128,
							prop: 'stopTime',
							label: '停机时长',
						},
						{ width: 128, prop: 'stopRate', label: '百分比' },
					],
				},
				{
					label: '中断损失',
					children: [
						{
							width: 128,
							prop: 'downTime',
							label: '故障时长',
							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
						},
						{ width: 128, prop: 'downRate', label: '百分比' },
						{
							width: 128,
							prop: 'timeEfficiency',
							label: '时间开动率',
							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
						},
					],
				},
				{
					label: '速度损失',
					children: [
						{
							width: 128,
							prop: 'realProcSpeed',
							label: '实际加工速度',
						},
						{
							width: 128,
							prop: 'designProcSpeed',
							label: '理论加工速度',
						},
						{
							width: 128,
							prop: 'peEfficiency',
							label: '速度开动率',
							filter: (val) => (val != null ? +val.toFixed(3) : '-'),
						},
					],
				},
				{
					prop: 'oee',
					label: 'OEE',
					filter: (val) => (val != null ? +val.toFixed(3) : '-'),
				},
				{
					prop: 'teep',
					label: 'TEEP',
					filter: (val) => (val != null ? +val.toFixed(3) : '-'),
				},
				// {
				// 	_action: 'view-trend',
				// 	label: '趋势',
				// 	,
				// 	subcomponent: {
				// 		props: ['injectData'],
				// 		render: function (h) {
				// 			const _this = this;
				// 			return h(
				// 				'el-button',
				// 				{
				// 					props: { type: 'text' },
				// 					on: {
				// 						click: function () {
				// 							console.log('inejctdata', _this.injectData);
				// 							_this.$emit('emitData', {
				// 								action: _this.injectData._action,
				// 								// value: _this.injectData.id,
				// 								value: _this.injectData,
				// 							});
				// 						},
				// 					},
				// 				},
				// 				'查看趋势'
				// 			);
				// 		},
				// 	},
				// },
			],
			searchBarFormConfig: [
				{
					type: 'select',
					label: '工厂',
					placeholder: '请选择工厂',
					param: 'factoryId',
					selectOptions: [],
				},
				{
					type: 'select',
					label: '产线',
					placeholder: '请选择产线',
					param: 'lineId',
					selectOptions: [],
				},
				// 选项切换
				{
					type: 'select',
					label: '时间类型',
					param: 'dateFilterType',
					defaultSelect: 0,
					selectOptions: [
						{ id: 0, name: '按时间段' },
						{ id: 1, name: '按日期' },
					],
					index: 2,
					extraOptions: [
						{
							parent: 'dateFilterType',
							// 时间段选择
							type: 'datePicker',
							label: '时间段',
							dateType: 'daterange',
							format: 'yyyy-MM-dd',
							valueFormat: 'yyyy-MM-dd HH:mm:ss',
							defaultTime: ['00:00:00', '00:00:00'],
							rangeSeparator: '-',
							startPlaceholder: '开始时间',
							endPlaceholder: '结束时间',
							param: 'recordTime',
						},
						{
							parent: 'dateFilterType',
							// 日期选择
							type: 'datePicker',
							label: '日期',
							dateType: 'date',
							placeholder: '选择日期',
							format: 'yyyy-MM-dd',
							valueFormat: 'yyyy-MM-dd',
							param: 'recordTime',
						},
					],
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '设备可视化',
					name: 'visualization',
					plain: true,
					color: 'success',
				},
				// {
				// 	type: 'button',
				// 	btnName: 'OEE',
				// 	name: 'add',
				// 	plain: true,
				// 	color: 'success',
				// },
				// {
				// 	type: 'button',
				// 	btnName: 'TEEP',
				// 	name: 'add',
				// 	plain: true,
				// 	color: 'warning',
				// },
			],
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				lineId: null,
				factoryId: null,
				recordTime: [],
			},
			// 表单参数
			form: {},
			list: [],
		};
	},
	created() {
		this.getFactory();
		this.getLine();
		this.getList();
	},
	methods: {
		/** 准备工厂数据 */
		async getFactory() {
			const { code, data } = await this.$axios({
				url: '/base/factory/listAll',
				method: 'get',
			});
			if (code == 0) {
				this.searchBarFormConfig[0].selectOptions = data.map((item) => {
					return {
						name: item.name,
						id: item.id,
					};
				});
			}
		},

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

		/** 覆盖 handleEmitFun 的默认实现 */
		handleEmitFun({ action, value }) {
			switch (action) {
				case 'view-trend':
					const { id } = value;
					this.open = true;
					this.trendOpen = true;
					break;
			}
		},
		/** 查询列表 */
		async getList() {
			this.loading = true;
			const { code, data } = await this.$axios({
				url: '/analysis/equipment-analysis/efficiency',
				method: 'get',
				params: this.queryParams,
			});
			if (code == 0) {
				console.log('data', data);
				this.list = data;
			}
		},

		handleSearchBarBtnClick({ btnName, ...payload }) {
			console.log('handleSearchBarBtnClick', btnName, payload);
			if (btnName == 'visualization') {
				// 可视化
				this.visualizationOpen = true;
				this.open = true;
			}
			if (btnName == 'search') {
				this.queryParams.factoryId = payload.factoryId || null;
				this.queryParams.lineId = payload.lineId || null;
				if (payload.recordTime != null) {
					if (typeof payload.recordTime == 'string') {
						if (payload.recordTime.trim() !== '') {
							this.queryParams.recordTime = [
								`${payload.recordTime} 00:00:00`,
								`${payload.recordTime} 23:59:59`,
							];
						}
					} else {
						this.queryParams.recordTime = payload.recordTime;
					}
				} else {
					this.queryParams.recordTime = null;
				}
				this.getList();
			}
		},

		cancel() {
			this.open = false;
		},

		closed() {
			this.visualizationOpen = false;
			this.trendOpen = false;
		},

		submitForm() {},
	},
};
</script>

<style scoped lang="scss">
.visualization {
	display: grid;
	grid-template-columns: repeat(3, minmax(240px, 1fr));
}
</style>
