363 lines
9.9 KiB
Vue
363 lines
9.9 KiB
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>
|