mt-yd-ui/src/views/modules/monitoring/equipmentEfficiency.vue

<template>
	<!-- 设备效率分析 -->
	<div class="mod-config">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
			<!-- 工厂 -->
			<el-form-item>
				<!-- <el-select v-model="dataForm.factoryId" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-select> -->
				<el-select v-model="dataForm.ftId" :placeholder="'工厂'" clearable>
					<el-option v-for="factory in factoryList" :key="factory.id" :value="factory.id" :label="factory.name" />
				</el-select>
			</el-form-item>
			<!-- 产线 -->
			<el-form-item>
				<el-select v-model="dataForm.productlines" :placeholder="'产线'" multiple clearable>
					<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id" :label="productLine.name" />
				</el-select>
			</el-form-item>
			<!-- 时间类型 -->
			<!-- 按时间段 -->
			<el-form-item>
				<el-select v-model="timeType" :placeholder="'时间类型'" clearable>
					<el-option value="range" label="按时间段" />
					<el-option value="date" label="按日期" />
				</el-select>
			</el-form-item>
			<!-- 日期选择 -->
			<el-form-item v-if="timeType === 'date'">
				<el-date-picker key="range-picker" v-model="rawTime" type="date" :placeholder="'请选择日期'" format="yyyy-MM-dd" />
			</el-form-item>
			<!-- 时间段选择 -->
			<el-form-item v-else>
				<el-date-picker
					key="time-picker"
					v-model="rawTime"
					type="daterange"
					:range-separator="'至'"
					:start-placeholder="'开始时间'"
					:end-placeholder="'结束时间'"
					format="yyyy-MM-dd"
				/>
			</el-form-item>
			<!-- 按钮 -->
			<el-form-item>
				<el-button @click="currentChangeHandle(1)">{{ $t('search') }}</el-button>
				<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
			</el-form-item>
		</el-form>

		<transition mode="out-in" name="slide-to-left">
			<equipment-efficiency-graph v-if="showGraph" key="graph" ref="eegraph" @close-graph="showGraph = false" />
			<base-table v-else :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
			<!-- v-loading="dataIsLoading " -->
		</transition>
		<!-- <el-pagination
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
			:current-page="pageIndex"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="pageSize"
			:total="totalPage"
			layout="total, sizes, prev, pager, next, jumper"
		></el-pagination> -->
	</div>
</template>

<script>
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
import TableOperateComponent from '@/components/base-table/components/operationComponent'
import TableTextComponent from '@/components/base-table/components/detailComponent'
import EquipmentEfficiencyGraph from './equipmentEfficiencyGraph.vue'
import { calcMaxHeight } from '@/utils'
import { timeFilter } from '@/utils/filters'
import moment from 'moment'

const tableConfigs = [
	{
		type: 'index',
		name: i18n.t('index')
	},
	{
		// name: i18n.t('createTime'),
		prop: 'factoryName',
		name: '工厂'
	},
	{ prop: 'pdName', name: '产线' },
	{ prop: 'wsName', name: '工段' },
	{ prop: 'eqName', name: '设备' },
	{
		name: '有效时间(h)',
		children: [
			{ prop: 'workTime', name: '工作时长(h)', width: 120, filter: val => `${val} 小时` },
			{ prop: 'workRate', name: '工作时长比率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
		]
	},
	{
		name: '关机时间(h)',
		children: [
			{ prop: 'stopTime', name: '停机时长(h)', width: 120, filter: val => `${val} 小时` },
			{ prop: 'stopRate', name: '停机比率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
		]
	},
	{
		name: '中断损失',
		children: [
			{ prop: 'downTime', name: '故障时长(h)', width: 120, filter: val => `${val} 小时` },
			{ prop: 'downRate', name: '故障比率', width: 120, filter: val => (val * 100).toFixed(2) + '%' },
			{ prop: 'timeEfficiency', name: '时间开动率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
		]
	},
	{
		name: '速度损失',
		children: [
			{ prop: 'realYield', name: '实际加工速度', width: 120, filter: val => `${val} 小时` },
			{ prop: 'designYield', name: '理论加工速度', width: 120, filter: val => `${val} 小时` },
			{ prop: 'peEfficiency', name: '速度开动率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
		]
	},
	{
		name: 'OEE',
		prop: 'oee',
		filter: val => (val * 100).toFixed(2) + '%'
	},
	{
		name: 'TEEP',
		prop: 'teep',
		filter: val => (val * 100).toFixed(2) + '%'
	},
	{
		prop: 'operations',
		name: i18n.t('handle'),
		fixed: 'right',
		width: 120,
		subcomponent: TableTextComponent,
		// options: ['edit', 'delete']
		// options: ['view-trend'] // 查看趋势
		buttonContent: '查看趋势',
		actionName: 'view-trend',
		emitFullData: true
	}
]

export default {
	data() {
		return {
			/** hfxny part */
			factoryList: [],
			productLineList: [],
			showGraph: false,
			/** */
			calcMaxHeight,
			tableConfigs,
			timeType: 'date',
			rawTime: null, // [] or datetime
			dataForm: {
				type: 1,
				ftId: null,
				productlines: [],
				startTime: null,
				entTime: null
			},
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			dataListLoading: false
		}
	},
	components: {
		BaseTable,
		EquipmentEfficiencyGraph
	},

	created() {
		this.getFactoryList()
		this.getProductLineList()
	},
	watch: {
		timeType() {
			// 防止切换日期类型时报错
			this.rawTime = null
		}
	},
	methods: {
		// 获取工厂列表
		getFactoryList() {
			this.$http({
				url: this.$http.adornUrl('/monitoring/factory/page'),
				method: 'get'
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.factoryList = data.data.list
					/** set default */
					if (this.factoryList.length) {
						this.dataForm.ftId = this.factoryList[0].id
					}
				} else {
					this.factoryList = []
					this.dataForm.ftId = null
				}
			})
		},
		// 获取产线列表
		getProductLineList() {
			this.$http({
				url: this.$http.adornUrl('/monitoring/productionLine/page'),
				method: 'get'
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.productLineList = data.data.list
					/** set default */
					if (this.productLineList.length) {
						this.dataForm.productlines = [this.productLineList[0].id]
					}
				} else {
					this.productLineList = []
				}
			})
		},

		// 时间类型预处理
		getTimeRange() {
			let startTime
			let endTime
			if (this.rawTime instanceof Array) {
				startTime = this.rawTime[0] ? moment(this.rawTime[0]).format('YYYY-MM-DDTHH:mm:ss') : '' // 强制axios使用北京时间
				endTime = this.rawTime[1] ? moment(this.rawTime[1]).format('YYYY-MM-DDTHH:mm:ss') : ''
			} else {
				if (this.rawTime) {
					startTime = moment(this.rawTime).format('YYYY-MM-DDTHH:mm:ss')
					endTime = moment(startTime)
						.add(1, 'd')
						.format('YYYY-MM-DDTHH:mm:ss')
				} else {
					startTime = ''
					endTime = ''
				}
			}
			return { startTime, endTime }
		},

		// 获取数据列表
		getDataList() {
			const { startTime, endTime } = this.getTimeRange()
			this.showGraph = false
			// this.dataListLoading = true
			this.$http({
				url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
				method: 'post',
				data: {
					startTime,
					endTime,
					ftId: this.dataForm.ftId,
					productlines: this.dataForm.productlines,
					// limit: this.pageIndex,
					// page: this.pageSize,
					type: 1
				}
			}).then(({ data: res }) => {
				if (res.data && res.code !== 500) {
					console.log('oee data:', res)
					if (res.data.length) {
						this.dataList = res.data
						// this.dataList = Array(20).fill(1)
					} else {
						this.dataList.splice(0)
					}
				} else {
					this.dataList.splice(0)
					this.$message.error(res.msg)
				}
			})
		},

		// 查看趋势
		viewTrend(data) {
			const { startTime, endTime } = this.getTimeRange()
			const injectData = {
				// 时间段
				startTime,
				endTime,
				// 设备id
				equipmentId: data.eqId,
				equipmentName: data.eqName,
				// 时间类型, type 按年，按月，按日等
				type: 1, // 默认 type 1, 1无间隔；2按月分隔；3按周分隔；4按天分隔
				// 时长数据: 工作时长， 停机时长，故障时长
				workTime: data.workTime,
				stopTime: data.stopTime,
				downTime: data.downTime,
				// 比例数据: 工作时长比率，停机时长比率，故障时长比率，速度开动率，OEE，TEEP
				workRate: data.workRate,
				stopRate: data.stopRate,
				downRate: data.downRate,
				peEfficiency: data.peEfficiency,
				timeEfficiency: data.timeEfficiency
			}
			// console.log('trends data: ', data)

			this.showGraph = true

			console.clear()
			console.log('inject data: ', injectData)
			
			setTimeout(() => {
				// console.log('befoer graph: ', this.$refs.eegraph)
				this.$refs.eegraph.init(injectData) // 注入初始数据，这些数据在组件内部用作条件，有可能会被更改
			}, 600) // 动画是500ms
		},

		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val
			this.pageIndex = 1
			this.getDataList()
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageIndex = val
			this.getDataList()
		},
		// 多选
		selectionChangeHandle(val) {
			this.dataListSelections = val
		},

		handleOperations({ type, data }) {
			switch (type) {
				case 'view-trend':
					return this.viewTrend(data)
				// return this.addOrUpdateHandle(id, true)
				// case 'edit':
				// 	return this.addOrUpdateHandle(id)
				// case 'delete':
				// 	return this.deleteHandle(id)
			}
		}
	}
}
</script>

<style scoped>
.slide-to-left-enter-active,
.slide-to-left-leave-active {
	transition: all 0.5s;
}

.slide-to-left-enter {
	transform: translateX(10px);
	opacity: 0;
}

.slide-to-left-leave-to {
	transform: translateX(-10px);
	opacity: 0;
}

.slide-to-left-leave,
.slide-to-left-enter-to {
	transform: translateX(0);
}
</style>