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

376 lines
10 KiB
Vue
Raw Normal View History

2022-09-20 15:59:45 +08:00
<template>
<!-- 设备效率分析 -->
<div class="mod-config">
2022-09-28 11:23:39 +08:00
<el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
2022-09-21 10:15:53 +08:00
<!-- 工厂 -->
2022-09-20 15:59:45 +08:00
<el-form-item>
2022-09-21 10:15:53 +08:00
<!-- <el-select v-model="dataForm.factoryId" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-select> -->
2022-10-17 16:52:07 +08:00
<el-select v-model="dataForm.ftId" :placeholder="$t('factory.title')" clearable>
2022-09-21 10:15:53 +08:00
<el-option v-for="factory in factoryList" :key="factory.id" :value="factory.id" :label="factory.name" />
</el-select>
2022-09-20 15:59:45 +08:00
</el-form-item>
2022-09-21 10:15:53 +08:00
<!-- 产线 -->
<el-form-item>
2022-10-17 16:52:07 +08:00
<el-select v-model="dataForm.productlines" :placeholder="$t('pl.title')" multiple clearable>
2022-09-21 10:15:53 +08:00
<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id" :label="productLine.name" />
</el-select>
</el-form-item>
<!-- 时间类型 -->
<!-- 按时间段 -->
<el-form-item>
2022-10-17 16:52:07 +08:00
<el-select v-model="timeType" :placeholder="$t('timetype')" clearable>
<el-option value="range" :label="$t('reftimerange')" />
<el-option value="date" :label="$t('refdate')" />
2022-09-21 10:15:53 +08:00
</el-select>
</el-form-item>
<!-- 日期选择 -->
<el-form-item v-if="timeType === 'date'">
2022-10-17 16:52:07 +08:00
<el-date-picker key="range-picker" v-model="rawTime" type="date" :placeholder="$t('hints.date')" format="yyyy-MM-dd" />
2022-09-21 10:15:53 +08:00
</el-form-item>
<!-- 时间段选择 -->
<el-form-item v-else>
2022-09-21 10:34:40 +08:00
<el-date-picker
key="time-picker"
v-model="rawTime"
type="daterange"
2022-10-17 16:52:07 +08:00
:range-separator="$t('datePicker.range')"
:start-placeholder="$t('datePicker.starttime')"
:end-placeholder="$t('datePicker.endtime')"
2022-09-21 10:34:40 +08:00
format="yyyy-MM-dd"
/>
2022-09-21 10:15:53 +08:00
</el-form-item>
<!-- 按钮 -->
2022-09-20 15:59:45 +08:00
<el-form-item>
2022-09-28 11:23:39 +08:00
<el-button @click="currentChangeHandle(1)">{{ $t('search') }}</el-button>
2022-09-21 10:15:53 +08:00
<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
2022-09-20 15:59:45 +08:00
</el-form-item>
</el-form>
2022-09-21 15:30:51 +08:00
<transition mode="out-in" name="slide-to-left">
<equipment-efficiency-graph v-if="showGraph" key="graph" ref="eegraph" @close-graph="showGraph = false" />
2022-10-14 14:03:00 +08:00
<base-table v-else :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)"
@operate-event="handleOperations" @refreshDataList="getDataList" />
2022-09-21 15:30:51 +08:00
<!-- v-loading="dataIsLoading " -->
</transition>
<!-- <el-pagination
2022-09-20 15:59:45 +08:00
@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"
2022-09-21 15:30:51 +08:00
></el-pagination> -->
2022-09-20 15:59:45 +08:00
</div>
</template>
<script>
import i18n from '@/i18n'
import BaseTable from '@/components/base-table'
2022-10-14 14:03:00 +08:00
// import TableOperateComponent from '@/components/base-table/components/operationComponent'
2022-09-20 15:59:45 +08:00
import TableTextComponent from '@/components/base-table/components/detailComponent'
2022-09-21 15:30:51 +08:00
import EquipmentEfficiencyGraph from './equipmentEfficiencyGraph.vue'
2022-09-20 15:59:45 +08:00
import { calcMaxHeight } from '@/utils'
2022-10-14 14:03:00 +08:00
// import { timeFilter } from '@/utils/filters'
2022-09-21 10:15:53 +08:00
import moment from 'moment'
2022-09-20 15:59:45 +08:00
const tableConfigs = [
{
type: 'index',
name: i18n.t('index')
},
{
2022-09-21 10:34:40 +08:00
// name: i18n.t('createTime'),
prop: 'factoryName',
2022-10-17 16:52:07 +08:00
name: i18n.t('factory.title')
2022-09-21 10:34:40 +08:00
},
2022-10-17 16:52:07 +08:00
{ prop: 'pdName', name: i18n.t('pl.title') },
{ prop: 'wsName', name: i18n.t('ws.title') },
{ prop: 'eqName', name: i18n.t('eq.title') },
2022-09-21 10:34:40 +08:00
{
2022-10-17 16:52:07 +08:00
name: i18n.t('eq.efficienttimeh'),
2022-09-21 10:34:40 +08:00
children: [
2022-10-17 16:52:07 +08:00
{ prop: 'workTime', name: i18n.t('eq.worktimeh'), width: 120, filter: val => `${val} `+i18n.t('hour') },
{ prop: 'workRate', name: i18n.t('eq.workdurationratio'), width: 120, filter: val => (val * 100).toFixed(2) + '%' }
2022-09-21 10:34:40 +08:00
]
},
{
2022-10-17 16:52:07 +08:00
name: i18n.t('eq.shutdowntimeh'),
2022-09-21 10:34:40 +08:00
children: [
2022-10-17 16:52:07 +08:00
{ prop: 'stopTime', name: i18n.t('eq.stoptimeh'), width: 120, filter: val => `${val} `+i18n.t('hour') },
{ prop: 'stopRate', name: i18n.t('eq.stopratio'), width: 120, filter: val => (val * 100).toFixed(2) + '%' }
2022-09-21 10:34:40 +08:00
]
},
{
2022-10-17 16:52:07 +08:00
name: i18n.t('eq.stoplost'),
2022-09-21 10:34:40 +08:00
children: [
2022-10-17 16:52:07 +08:00
{ prop: 'downTime', name: i18n.t('eq.downtimeh'), width: 120, filter: val => `${val} `+i18n.t('hour') },
{ prop: 'downRate', name: i18n.t('eq.downrate'), width: 120, filter: val => (val * 100).toFixed(2) + '%' },
{ prop: 'timeEfficiency', name: i18n.t('eq.timeefficiency'), width: 120, filter: val => (val * 100).toFixed(2) + '%' }
2022-09-21 10:34:40 +08:00
]
},
{
2022-10-17 16:52:07 +08:00
name: i18n.t('eq.speedlost'),
2022-09-21 10:34:40 +08:00
children: [
2022-10-17 16:52:07 +08:00
{ prop: 'realYield', name: i18n.t('eq.realyield'), width: 120, filter: val => `${val} `+i18n.t('hour') },
{ prop: 'designYield', name: i18n.t('eq.designyield'), width: 120, filter: val => `${val} `+i18n.t('hour') },
{ prop: 'peEfficiency', name: i18n.t('eq.speedefficiency'), width: 120, filter: val => (val * 100).toFixed(2) + '%' }
2022-09-21 10:34:40 +08:00
]
},
{
name: 'OEE',
prop: 'oee',
filter: val => (val * 100).toFixed(2) + '%'
2022-09-20 15:59:45 +08:00
},
{
2022-09-21 10:34:40 +08:00
name: 'TEEP',
prop: 'teep',
filter: val => (val * 100).toFixed(2) + '%'
2022-09-20 15:59:45 +08:00
},
{
prop: 'operations',
name: i18n.t('handle'),
fixed: 'right',
2022-09-21 15:30:51 +08:00
width: 120,
subcomponent: TableTextComponent,
2022-09-21 10:34:40 +08:00
// options: ['edit', 'delete']
2022-09-21 15:30:51 +08:00
// options: ['view-trend'] // 查看趋势
2022-10-17 16:52:07 +08:00
buttonContent: i18n.t('eq.viewtrend'),
2022-09-21 15:30:51 +08:00
actionName: 'view-trend',
emitFullData: true
2022-09-20 15:59:45 +08:00
}
]
export default {
data() {
return {
2022-09-21 10:15:53 +08:00
/** hfxny part */
factoryList: [],
productLineList: [],
2022-09-21 15:30:51 +08:00
showGraph: false,
2022-09-21 10:15:53 +08:00
/** */
2022-09-20 15:59:45 +08:00
calcMaxHeight,
tableConfigs,
2022-09-21 15:30:51 +08:00
timeType: 'date',
2022-09-21 10:15:53 +08:00
rawTime: null, // [] or datetime
2022-09-20 15:59:45 +08:00
dataForm: {
2022-09-21 10:15:53 +08:00
type: 1,
ftId: null,
productlines: [],
startTime: null,
entTime: null
2022-09-20 15:59:45 +08:00
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
2022-09-21 10:34:40 +08:00
dataListLoading: false
2022-09-20 15:59:45 +08:00
}
},
components: {
BaseTable,
EquipmentEfficiencyGraph
2022-09-20 15:59:45 +08:00
},
2022-09-21 10:34:40 +08:00
2022-10-14 14:03:00 +08:00
activated() {
this.getFactoryList().then(() => {
this.getProductLineList()
})
2022-09-21 10:15:53 +08:00
},
watch: {
timeType() {
// 防止切换日期类型时报错
this.rawTime = null
}
2022-09-20 15:59:45 +08:00
},
methods: {
2022-09-21 10:15:53 +08:00
// 获取工厂列表
getFactoryList() {
2022-10-14 14:03:00 +08:00
return this.$http({
url: this.$http.adornUrl('/monitoring/factory/list'),
2022-09-21 10:15:53 +08:00
method: 'get'
2022-10-14 14:03:00 +08:00
}).then(({ data: res }) => {
if (res && res.code === 0) {
this.factoryList = res.data
2022-09-21 10:15:53 +08:00
/** set default */
if (this.factoryList.length) {
this.dataForm.ftId = this.factoryList[0].id
}
} else {
this.factoryList = []
this.dataForm.ftId = null
}
})
},
2022-10-14 14:03:00 +08:00
// 选择工厂时
handleFactoryChange(val) {
this.getProductLineList()
},
2022-09-21 10:15:53 +08:00
// 获取产线列表
getProductLineList() {
2022-10-14 14:03:00 +08:00
const query = {
url: this.$http.adornUrl('/monitoring/productionLine/list'),
2022-09-21 10:15:53 +08:00
method: 'get'
2022-10-14 14:03:00 +08:00
}
if (this.dataForm.ftId) {
query.params = this.$http.adornParams({
factoryId: this.dataForm.ftId
});
}
this.$http(query).then(({ data: res }) => {
if (res && res.code === 0 && res.data.length) {
this.productLineList = res.data
2022-09-21 10:15:53 +08:00
/** set default */
2022-10-14 14:03:00 +08:00
this.dataForm.productlines = [this.productLineList[0].id]
2022-09-21 10:15:53 +08:00
} else {
this.productLineList = []
2022-10-14 14:03:00 +08:00
this.dataForm.productlines = []
2022-09-21 10:15:53 +08:00
}
})
},
2022-09-21 10:34:40 +08:00
2022-09-21 10:15:53 +08:00
// 时间类型预处理
getTimeRange() {
let startTime
let endTime
2022-09-21 10:59:35 +08:00
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') : ''
2022-09-21 10:15:53 +08:00
} else {
2022-09-21 10:59:35 +08:00
if (this.rawTime) {
startTime = moment(this.rawTime).format('YYYY-MM-DDTHH:mm:ss')
2022-09-21 10:15:53 +08:00
endTime = moment(startTime)
.add(1, 'd')
.format('YYYY-MM-DDTHH:mm:ss')
} else {
startTime = ''
endTime = ''
}
}
return { startTime, endTime }
},
2022-09-21 10:34:40 +08:00
2022-09-20 15:59:45 +08:00
// 获取数据列表
getDataList() {
2022-09-21 10:59:35 +08:00
const { startTime, endTime } = this.getTimeRange()
2022-09-21 15:30:51 +08:00
this.showGraph = false
// this.dataListLoading = true
2022-09-20 15:59:45 +08:00
this.$http({
2022-09-21 10:59:35 +08:00
url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
method: 'post',
data: {
startTime,
endTime,
ftId: this.dataForm.ftId,
productlines: this.dataForm.productlines,
2022-09-21 15:30:51 +08:00
// limit: this.pageIndex,
// page: this.pageSize,
2022-09-21 10:59:35 +08:00
type: 1
2022-09-20 15:59:45 +08:00
}
2022-09-21 10:59:35 +08:00
}).then(({ data: res }) => {
2022-09-21 15:30:51 +08:00
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)
}
2022-09-21 13:25:36 +08:00
} else {
this.dataList.splice(0)
2022-09-21 15:30:51 +08:00
this.$message.error(res.msg)
2022-09-21 13:25:36 +08:00
}
2022-09-20 15:59:45 +08:00
})
},
2022-09-21 15:30:51 +08:00
// 查看趋势
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)
2022-10-17 16:52:07 +08:00
2022-09-21 15:30:51 +08:00
setTimeout(() => {
// console.log('befoer graph: ', this.$refs.eegraph)
this.$refs.eegraph.init(injectData) // 注入初始数据,这些数据在组件内部用作条件,有可能会被更改
}, 600) // 动画是500ms
},
2022-09-20 15:59:45 +08:00
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val
},
2022-09-21 15:30:51 +08:00
handleOperations({ type, data }) {
2022-09-20 15:59:45 +08:00
switch (type) {
2022-09-21 15:30:51 +08:00
case 'view-trend':
return this.viewTrend(data)
// return this.addOrUpdateHandle(id, true)
// case 'edit':
// return this.addOrUpdateHandle(id)
// case 'delete':
// return this.deleteHandle(id)
2022-09-20 15:59:45 +08:00
}
}
}
}
</script>
2022-09-21 15:30:51 +08:00
<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>