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

<template>
	<!-- 设备效率分析 -->
	<div class="mod-config">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)" class="blueTip" size="small">
			<el-form-item>
				{{ $t('prompt.month') }}
			</el-form-item>
			<!-- 月份 -->
			<el-form-item>
				<el-date-picker key="month-picker" v-model="rawTime" type="month" :placeholder="$t('prompt.month')" format="yyyy-MM" />
			</el-form-item>
			<!-- 产线 -->
			<el-form-item>
				{{ $t('pl.title') }}
			</el-form-item>
			<el-form-item>
				<el-select v-model="dataForm.productlines" :placeholder="$t('pl.title')" 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-button class="buttonColor" @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>

		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />

		<!-- <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"
		/> -->
	</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 { timeFilter } from '@/utils/filters'
import { calcMaxHeight } from '@/utils'
import moment from 'moment'

const tableConfigs = [
	{
		type: 'index',
		name: i18n.t('index')
	},
	// { prop: 'time', name: '时间', filter: timeFilter },
	{ prop: 'pdlName', name: i18n.t('pl.name') },
	{ prop: 'wsName', name: i18n.t('ws.title') },
	{ prop: 'eqName', name: i18n.t('eq.title') },
	{ prop: 'mtbf', name: i18n.t('eq.mtbf'), width: 220 },
	{ prop: 'mttr', name: i18n.t('eq.mttr'), width: 190 },
	{ prop: 'workTime', name: i18n.t('eq.worktimeh') },
	{ prop: 'downTime', name: i18n.t('eq.downtimeh') },
	{ prop: 'downCount', name: i18n.t('eq.downcount') }
	// {
	// 	prop: 'operations',
	// 	name: i18n.t('handle'),
	// 	fixed: 'right',
	// 	width: 120,
	// 	subcomponent: TableTextComponent,
	// 	buttonContent: '查看详情', // 会转到“设备报警”
	// 	emitFullData: true
	// }
]

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

	activated() {
		// this.getFactoryList()
		this.getProductLineList()
	},
	watch: {},
	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/list'),
				method: 'get'
			}).then(({ data: res }) => {
				if (res && res.code === 0) {
					this.productLineList = res.data
					/** set default */
					if (this.productLineList.length) {
						this.dataForm.productlines = [this.productLineList[0].id]
					}
				} else {
					this.productLineList = []
					this.dataForm.productlines = []
				}
			})
		},

		// 获取数据列表
		getDataList() {
			// this.dataList = Array(10).fill(1)
			// return
			let startTime = this.rawTime
				? moment(this.rawTime)
						.set({ date: 1, hour: 0, minute: 0, second: 0, millisecond: 0 })
						.format('YYYY-MM-DDTHH:mm:ss')
				: ''
			let endTime = startTime
				? moment(startTime)
						.add(1, 'M')
						.format('YYYY-MM-DDTHH:mm:ss')
				: ''

			this.dataListLoading = true

			this.$http({
				url: this.$http.adornUrl('/monitoring/eqAnalysis/mtbrAndMtbr'),
				method: 'post',
				data: {
					startTime,
					endTime,
					productlines: this.dataForm.productlines,
					type: 1
				}
			}).then(({ data: res }) => {
				if (res.code === 500) {
					this.dataList.splice(0)
					this.$message.error(res.msg)
				} else {
					this.dataList = res.data
				}
			})
		},
		// 每页数
		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: id }) {
			switch (type) {
				case 'view-detail':
					return this.addOrUpdateHandle(id, true)
				case 'edit':
					return this.addOrUpdateHandle(id)
				case 'delete':
					return this.deleteHandle(id)
			}
		}
	}
}
</script>

<style>
.blueTip::before {
	display: inline-block;
	content: '';
	width: 4px;
	height: 24px;
	background: #0b58ff;
	border-radius: 1px;
	margin-right: 8px;
	margin-top: 4px;
}
.buttonColor {
	color: #fff;
	background: #0b58ff;
}
</style>