368 lines
11 KiB
Vue
368 lines
11 KiB
Vue
|
<!--
|
|||
|
|
/*
|
|||
|
|
* @Author: lb
|
|||
|
|
* @Date: 2022-07-21 13:30:00
|
|||
|
|
* @LastEditors: lb
|
|||
|
|
* @LastEditTime: 2022-07-21 13:30:00
|
|||
|
|
* @Description: 设备产量时序图
|
|||
|
|
*/
|
|||
|
|
-->
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
|||
|
|
|
|||
|
|
<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
|
|||
|
|
key="table"
|
|||
|
|
:page="listQuery.current"
|
|||
|
|
:limit="listQuery.size"
|
|||
|
|
:table-config="tableProps"
|
|||
|
|
:table-data="dataList"
|
|||
|
|
:is-loading="listLoading"
|
|||
|
|
:index-config="{ align: 'left', fixed: 'left' }"
|
|||
|
|
@emitFun="handleTableEvents"
|
|||
|
|
/>
|
|||
|
|
</transition>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="app-container">
|
|||
|
|
<el-radio-group v-model="chartType" class="data-analysis-radio" size="mini" @change="changeChartType">
|
|||
|
|
<el-radio-button v-for="(item, index) in chartDataArr" :key="index" :label="index">
|
|||
|
|
{{ item.equipmentName }}
|
|||
|
|
</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
<Line-chart :chart-data="chartDataItem" width="100%" height="400px" />
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// import i18n from '@/lang'
|
|||
|
|
import HeadForm from '@/components/basicData/HeadForm'
|
|||
|
|
import BaseTable from '@/components/BaseTable/index-compound'
|
|||
|
|
// import LineChart from '@/components/Charts/LineChart'
|
|||
|
|
import { getLineList, getFactoryList, getOEE } from '@/api/DataAnalysis/equipmentEfficiency'
|
|||
|
|
import moment from 'moment'
|
|||
|
|
import commonBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
|||
|
|
|
|||
|
|
import EquipmentEfficiencyGraph from './components/equipmentEfficiencyGraph.vue'
|
|||
|
|
// import { timeFormatter } from '@/filters'
|
|||
|
|
/**
|
|||
|
|
* 表格表头配置项 TypeScript接口注释
|
|||
|
|
* tableConfig<ConfigItem> = []
|
|||
|
|
*
|
|||
|
|
* Interface ConfigItem = {
|
|||
|
|
* prop: string,
|
|||
|
|
* label: string,
|
|||
|
|
* width: string,
|
|||
|
|
* align: string,
|
|||
|
|
* subcomponent: function,
|
|||
|
|
* filter: function
|
|||
|
|
* }
|
|||
|
|
*
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const tableProps = [
|
|||
|
|
{
|
|||
|
|
label: '工厂',
|
|||
|
|
prop: 'factoryName'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '产线',
|
|||
|
|
prop: 'pdName'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '工序',
|
|||
|
|
prop: 'wsName'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '设备',
|
|||
|
|
prop: 'eqName'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '有效时间(h)',
|
|||
|
|
children: [
|
|||
|
|
{ prop: 'workTime', label: '工作时长(小时)', width: 120, filter: val => `${val} 小时` },
|
|||
|
|
{ prop: 'workRate', label: '工作时长比率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '关机时间(h)',
|
|||
|
|
children: [
|
|||
|
|
{ prop: 'stopTime', label: '停机时长(小时)', width: 120, filter: val => `${val} 小时` },
|
|||
|
|
{ prop: 'stopRate', label: '停机比率', filter: val => (val * 100).toFixed(2) + '%' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '中断损失',
|
|||
|
|
children: [
|
|||
|
|
{ prop: 'downTime', label: '故障时长(小时)', width: 120, filter: val => `${val} 小时` },
|
|||
|
|
{ prop: 'downRate', label: '故障比率', filter: val => (val * 100).toFixed(2) + '%' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '速度损失',
|
|||
|
|
children: [
|
|||
|
|
{ prop: 'realYield', label: '实际加工速度', width: 120, filter: val => `${val} 片/小时` }, // 片/小时
|
|||
|
|
{ prop: 'designYield', label: '理论加工速度', width: 120, filter: val => `${val} 片/小时` },
|
|||
|
|
{ prop: 'peEfficiency', label: '速度开动率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// prop: 'goodRate',
|
|||
|
|
// label: '良品率' // 暂时先隐藏
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
label: 'OEE',
|
|||
|
|
prop: 'oee',
|
|||
|
|
filter: val => (val * 100).toFixed(2) + '%'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'TEEP',
|
|||
|
|
prop: 'teep',
|
|||
|
|
filter: val => (val * 100).toFixed(2) + '%'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '操作',
|
|||
|
|
subcomponent: commonBtn,
|
|||
|
|
emitFullData: true,
|
|||
|
|
buttonContent: '查看趋势',
|
|||
|
|
actionName: 'view-trend'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'EquipmentEfficiency',
|
|||
|
|
components: { BaseTable, HeadForm, EquipmentEfficiencyGraph /** LineChart */ },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
addOrUpdateVisible: false,
|
|||
|
|
tableProps,
|
|||
|
|
dataList: [],
|
|||
|
|
total: 0,
|
|||
|
|
listLoading: false,
|
|||
|
|
listQuery: {
|
|||
|
|
current: 1,
|
|||
|
|
size: 20
|
|||
|
|
},
|
|||
|
|
lineList: [],
|
|||
|
|
headFormConfig: [
|
|||
|
|
// label: i18n.t('module.dataAnalysis.productionLineBalance.line'),
|
|||
|
|
// placeholder: this.$t('module.dataAnalysis.productionLineBalance.line'),
|
|||
|
|
// width: 300,
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '工厂',
|
|||
|
|
param: 'factoryId',
|
|||
|
|
selectOptions: []
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'select',
|
|||
|
|
label: '产线',
|
|||
|
|
param: 'productLineIds',
|
|||
|
|
multiple: true,
|
|||
|
|
selectOptions: []
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
// 对于日期：2022-7-1 ~ 2022-7-1 要转换为 2022/7/1T00:02:00 - 2022/7/2T00:02:00
|
|||
|
|
type: 'select',
|
|||
|
|
label: '时间类型',
|
|||
|
|
param: 'dateFilterType',
|
|||
|
|
defaultSelect: 0,
|
|||
|
|
selectOptions: [{ id: 0, name: '按时间段' }, { id: 1, name: '按日期' }],
|
|||
|
|
index: 2, // 记录下当前配置项的index，省的遍历的开销; index 和 extraOptions 要配合
|
|||
|
|
extraOptions: [
|
|||
|
|
{
|
|||
|
|
elDatePickerKey: '8dkfl', // 防止el-date-picker飞到左上角
|
|||
|
|
parent: 'dateFilterType',
|
|||
|
|
// 时间段选择
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '时间段',
|
|||
|
|
dateType: 'daterange',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
// valueFormat: 'yyyy-MM-dd',
|
|||
|
|
defaultTime: ['00:00:00', '00:00:00'],
|
|||
|
|
rangeSeparator: '-',
|
|||
|
|
startPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.startTime'),
|
|||
|
|
endPlaceholder: this.$t('module.dataAnalysis.productionLineBalance.endTime'),
|
|||
|
|
param: 'timeValue'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
elDatePickerKey: '0lkfl',
|
|||
|
|
parent: 'dateFilterType',
|
|||
|
|
// 日期选择
|
|||
|
|
type: 'datePicker',
|
|||
|
|
label: '日期',
|
|||
|
|
dateType: 'date',
|
|||
|
|
placeholder: '选择日期',
|
|||
|
|
format: 'yyyy-MM-dd',
|
|||
|
|
// valueFormat: 'yyyy-MM-dd', // 需要返回Date()
|
|||
|
|
param: 'timeValue'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'button',
|
|||
|
|
btnName: 'btn.search',
|
|||
|
|
name: 'search',
|
|||
|
|
color: 'primary'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
headFormValue: {},
|
|||
|
|
showGraph: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.fetchList('factory')
|
|||
|
|
this.fetchList('product-line')
|
|||
|
|
// this.getList() // 时间间隔必填
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取各种列表
|
|||
|
|
fetchList(type) {
|
|||
|
|
switch (type) {
|
|||
|
|
case 'factory':
|
|||
|
|
return getFactoryList().then(res => {
|
|||
|
|
if (res.data) {
|
|||
|
|
this.headFormConfig[0].selectOptions = res.data.map(factory => ({ id: factory.id, name: factory.name }))
|
|||
|
|
// 设置defaultSelect
|
|||
|
|
this.headFormConfig[0].defaultSelect = this.headFormConfig[0].selectOptions[0].id
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
case 'product-line':
|
|||
|
|
return getLineList().then(res => {
|
|||
|
|
if (res.data) {
|
|||
|
|
this.headFormConfig[1].selectOptions = res.data.map(line => ({ id: line.id, name: line.name }))
|
|||
|
|
// 设置defaultSelect
|
|||
|
|
this.headFormConfig[1].defaultSelect = [this.headFormConfig[1].selectOptions[0].id]
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取首页列表
|
|||
|
|
getList() {
|
|||
|
|
// this.listLoading = true
|
|||
|
|
|
|||
|
|
const ftId = this.headFormValue.factoryId ? this.headFormValue.factoryId : ''
|
|||
|
|
const productlines = this.headFormValue.productLineIds.length ? this.headFormValue.productLineIds : []
|
|||
|
|
let startTime
|
|||
|
|
let endTime
|
|||
|
|
|
|||
|
|
if (this.headFormValue.timeValue instanceof Array) {
|
|||
|
|
startTime = this.headFormValue.timeValue[0]
|
|||
|
|
? moment(this.headFormValue.timeValue[0]).format('YYYY-MM-DDTHH:mm:ss')
|
|||
|
|
: '' // 强制axios使用北京时间
|
|||
|
|
endTime = this.headFormValue.timeValue[1]
|
|||
|
|
? moment(this.headFormValue.timeValue[1]).format('YYYY-MM-DDTHH:mm:ss')
|
|||
|
|
: ''
|
|||
|
|
} else {
|
|||
|
|
if (this.headFormValue.timeValue) {
|
|||
|
|
startTime = moment(this.headFormValue.timeValue)
|
|||
|
|
.add(2, 'm')
|
|||
|
|
.format('YYYY-MM-DDTHH:mm:ss')
|
|||
|
|
endTime = moment(startTime)
|
|||
|
|
.add(1, 'd')
|
|||
|
|
.format('YYYY-MM-DDTHH:mm:ss')
|
|||
|
|
} else {
|
|||
|
|
startTime = ''
|
|||
|
|
endTime = ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getOEE({ ...this.listQuery, type: 1, ftId, productlines, startTime, endTime })
|
|||
|
|
.then(res => {
|
|||
|
|
this.dataList = res.data
|
|||
|
|
// this.listLoading = false
|
|||
|
|
})
|
|||
|
|
.catch(err => {
|
|||
|
|
if (err.message === '该时间段内设备未连接到数据库') {
|
|||
|
|
this.dataList.splice(0)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 顶部查询按钮
|
|||
|
|
btnClick(val) {
|
|||
|
|
this.headFormValue = val
|
|||
|
|
if (this.headFormValue.btnName === 'search') {
|
|||
|
|
this.getList()
|
|||
|
|
}
|
|||
|
|
this.showGraph = false
|
|||
|
|
},
|
|||
|
|
// handlers
|
|||
|
|
handleTableEvents({ action, data }) {
|
|||
|
|
// 有查看趋势，和保留待用的OEE对比图(此者暂时不做)
|
|||
|
|
switch (action) {
|
|||
|
|
case 'view-trend':
|
|||
|
|
this.viewTrends(data)
|
|||
|
|
break
|
|||
|
|
case 'view-oee-compare':
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
viewTrends(data) {
|
|||
|
|
const startTime = this.headFormValue.timeValue[0]
|
|||
|
|
? moment(this.headFormValue.timeValue[0]).format('YYYY-MM-DDTHH:mm:ss')
|
|||
|
|
: '' // 强制axios使用北京时间
|
|||
|
|
const endTime = this.headFormValue.timeValue[1]
|
|||
|
|
? moment(this.headFormValue.timeValue[1]).format('YYYY-MM-DDTHH:mm:ss')
|
|||
|
|
: ''
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
console.log('trends data: ', data)
|
|||
|
|
|
|||
|
|
this.showGraph = true
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
console.log('befoer graph: ', this.$refs.eegraph)
|
|||
|
|
this.$refs.eegraph.init(injectData) // 注入初始数据，这些数据在组件内部用作条件，有可能会被更改
|
|||
|
|
}, 600) // 动画是500ms
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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>
|