mt-yd-ui/src/views/modules/monitoring/equipmentEfficiency.vue
2022-09-28 11:23:39 +08:00

363 lines
9.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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,
// 比例数据: 工作时长比率停机时长比率故障时长比率速度开动率OEETEEP
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>