Compare commits
No commits in common. "7ed4a512bc8512523c959044b2eade0103ffb69b" and "e532989ddf9dc0812e7a453c083c523d69c02d0c" have entirely different histories.
7ed4a512bc
...
e532989ddf
@ -19,8 +19,7 @@ export default {
|
|||||||
colors: {
|
colors: {
|
||||||
delete: '#FF5454',
|
delete: '#FF5454',
|
||||||
preview: '#f09843',
|
preview: '#f09843',
|
||||||
design: '#99089f',
|
design: '#99089f'
|
||||||
// 'view-trend': 'red'
|
|
||||||
// add more...
|
// add more...
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
@ -31,7 +30,6 @@ export default {
|
|||||||
viewAttr: i18n.t('viewattr'),
|
viewAttr: i18n.t('viewattr'),
|
||||||
preview: i18n.t('preview'),
|
preview: i18n.t('preview'),
|
||||||
design: i18n.t('design'),
|
design: i18n.t('design'),
|
||||||
'view-trend': '查看趋势'
|
|
||||||
// add more...
|
// add more...
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,7 +17,6 @@ t.routes['质量管理'] = 'Quality Management'
|
|||||||
t.routes['权限管理'] = 'Permission Management'
|
t.routes['权限管理'] = 'Permission Management'
|
||||||
t.routes['系统设置'] = 'System Settings'
|
t.routes['系统设置'] = 'System Settings'
|
||||||
t.routes['日志管理'] = 'Log Management'
|
t.routes['日志管理'] = 'Log Management'
|
||||||
t.routes['数据分析'] = 'Data Analysis'
|
|
||||||
|
|
||||||
// 二级
|
// 二级
|
||||||
t.routes['厂务'] = 'Factory Affair'
|
t.routes['厂务'] = 'Factory Affair'
|
||||||
@ -43,9 +42,6 @@ t.routes['定时任务'] = 'Timed Tasks'
|
|||||||
t.routes['文件上传'] = 'File Upload'
|
t.routes['文件上传'] = 'File Upload'
|
||||||
t.routes['登录日志'] = 'Login Records'
|
t.routes['登录日志'] = 'Login Records'
|
||||||
t.routes['操作日志'] = 'Oprations Records'
|
t.routes['操作日志'] = 'Oprations Records'
|
||||||
t.routes['设备效率分析'] = 'Equipment Efficiency Analysis'
|
|
||||||
t.routes['设备异常分析'] = 'Equipment Exceptions Analysis'
|
|
||||||
t.routes['设备状态时序图'] = 'Equipment Status Timesequence'
|
|
||||||
|
|
||||||
// 三级
|
// 三级
|
||||||
t.routes['工厂'] = 'Factory'
|
t.routes['工厂'] = 'Factory'
|
||||||
|
|||||||
@ -18,7 +18,6 @@ t.routes['质量管理'] = '质量管理'
|
|||||||
t.routes['权限管理'] = '权限管理'
|
t.routes['权限管理'] = '权限管理'
|
||||||
t.routes['系统设置'] = '系统设置'
|
t.routes['系统设置'] = '系统设置'
|
||||||
t.routes['日志管理'] = '日志管理'
|
t.routes['日志管理'] = '日志管理'
|
||||||
t.routes['数据分析'] = '数据分析'
|
|
||||||
|
|
||||||
// 二级
|
// 二级
|
||||||
t.routes['厂务'] = '厂务'
|
t.routes['厂务'] = '厂务'
|
||||||
@ -44,9 +43,6 @@ t.routes['定时任务'] = '定时任务'
|
|||||||
t.routes['文件上传'] = '文件上传'
|
t.routes['文件上传'] = '文件上传'
|
||||||
t.routes['登录日志'] = '登录日志'
|
t.routes['登录日志'] = '登录日志'
|
||||||
t.routes['操作日志'] = '操作日志'
|
t.routes['操作日志'] = '操作日志'
|
||||||
t.routes['设备效率分析'] = '设备效率分析'
|
|
||||||
t.routes['设备异常分析'] = '设备异常分析'
|
|
||||||
t.routes['设备状态时序图'] = '设备状态时序图'
|
|
||||||
|
|
||||||
// 三级
|
// 三级
|
||||||
t.routes['工厂'] = '工厂'
|
t.routes['工厂'] = '工厂'
|
||||||
|
|||||||
@ -1,362 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 设备效率分析 -->
|
|
||||||
<div class="mod-config">
|
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
|
||||||
<!-- 工厂 -->
|
|
||||||
<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="getDataList()">{{ $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>
|
|
||||||
@ -1,321 +0,0 @@
|
|||||||
<!--
|
|
||||||
/*
|
|
||||||
* @Author: lb
|
|
||||||
* @Date: 2022-07-24 13:30:00
|
|
||||||
* @LastEditTime: 2022-07-28 09:30:00
|
|
||||||
* @LastEditors: lb
|
|
||||||
* @Description: 设备效率分析-echarts图
|
|
||||||
*/
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="graph-area">
|
|
||||||
<span class="close-btn" @click="close">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: 100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="close-row">
|
|
||||||
<el-radio-group v-model="dataType" class="head-radio-group" size="small" @change="setLegend">
|
|
||||||
<el-radio-button label="百分比" />
|
|
||||||
<el-radio-button label="时间" />
|
|
||||||
</el-radio-group>
|
|
||||||
|
|
||||||
<el-radio-group v-if="1" v-model="searchType" class="head-radio-group" style="margin-left: 8px;" size="small" @change="handleRadioGroupChanged">
|
|
||||||
<el-radio-button v-for="(opt, index) in searchRadioOptions" :key="index" :label="opt" />
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="trend-graph" class="real-graph" style="width: 100%; height: 500px;" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
import moment from 'moment'
|
|
||||||
import { pick } from 'lodash/object'
|
|
||||||
|
|
||||||
class EchartConfigs {
|
|
||||||
constructor() {
|
|
||||||
this.color = ['#e91e63', '#4caf50', '#3f51b5', '#ffc107', '#607d8b']
|
|
||||||
this.title = {
|
|
||||||
text: '时间区间走势',
|
|
||||||
top: 0,
|
|
||||||
left: 'center',
|
|
||||||
textStyle: {
|
|
||||||
fontWeight: 'bold',
|
|
||||||
fontSize: 18,
|
|
||||||
lineHeight: 18
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.tooltip = {
|
|
||||||
trigger: 'axis',
|
|
||||||
// 将axisPointer设置得更显眼一点
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// legend
|
|
||||||
this.legend = {
|
|
||||||
icon: 'circle',
|
|
||||||
top: 24,
|
|
||||||
left: 'center',
|
|
||||||
padding: 8,
|
|
||||||
itemGap: 8,
|
|
||||||
data: [] // 动态设置
|
|
||||||
}
|
|
||||||
this.xAxis = {
|
|
||||||
type: 'category',
|
|
||||||
data: [] // 动态设置
|
|
||||||
// https://tushuo.baidu.com/wave/index#/manufacture/dta9pydmexfdhc0sg/999
|
|
||||||
}
|
|
||||||
this.yAxis = {
|
|
||||||
type: 'value'
|
|
||||||
}
|
|
||||||
this.series = [] // 动态设置
|
|
||||||
}
|
|
||||||
|
|
||||||
setTitle(val) {
|
|
||||||
this.title.text = val
|
|
||||||
}
|
|
||||||
|
|
||||||
setLegend(val) {
|
|
||||||
this.legend.data.splice(0)
|
|
||||||
if (Array.isArray(val)) {
|
|
||||||
this.legend.data = val
|
|
||||||
} else {
|
|
||||||
console.error('setLegend() 只接受数组参数')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setXAxis(val) {
|
|
||||||
// console.log('in setXAxis(): ', val)
|
|
||||||
this.xAxis.data.splice(0)
|
|
||||||
if (Array.isArray(val)) {
|
|
||||||
this.xAxis.data = val
|
|
||||||
} else {
|
|
||||||
console.error('setXAxis() 只接受数组参数')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setSeries(val) {
|
|
||||||
this.series.splice(0)
|
|
||||||
if (Array.isArray(val) && this.series.length === 0) {
|
|
||||||
this.series = val
|
|
||||||
} else {
|
|
||||||
console.error('setSeries() 只接受数组参数')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'EquipmentEfficiencyGraph',
|
|
||||||
props: {},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
searchType: '无间隔',
|
|
||||||
searchRadioOptions: ['无间隔', '按月', '按周', '按天'],
|
|
||||||
dataType: '时间',
|
|
||||||
dataRadioOptions: ['时间', '百分比'],
|
|
||||||
config: new EchartConfigs(),
|
|
||||||
chart: null,
|
|
||||||
rateList: [], // 对请求来的数据分流
|
|
||||||
timeList: [],
|
|
||||||
xAxis: [], // 动态设置
|
|
||||||
injectData: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async initChart() {
|
|
||||||
this.config.setTitle(this.injectData.equipmentName + '时间区间走势')
|
|
||||||
await this.getList()
|
|
||||||
this.setLegend()
|
|
||||||
},
|
|
||||||
|
|
||||||
init(data) {
|
|
||||||
this.injectData = data
|
|
||||||
if (!this.chart) {
|
|
||||||
this.chart = echarts.init(document.getElementById('trend-graph'))
|
|
||||||
// this.chart.setOption(this.config)
|
|
||||||
this.initChart()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
this.$emit('close-graph')
|
|
||||||
},
|
|
||||||
|
|
||||||
makeQuerys() {
|
|
||||||
const searchTypeMap = {
|
|
||||||
无间隔: 1,
|
|
||||||
按月: 2,
|
|
||||||
按周: 3,
|
|
||||||
按天: 4,
|
|
||||||
按小时: 5
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: searchTypeMap[this.searchType],
|
|
||||||
eqId: this.injectData.equipmentId,
|
|
||||||
startTime: this.injectData.startTime, // '2022-06-14T00:00:00'
|
|
||||||
endTime: this.injectData.endTime
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// getOEE
|
|
||||||
getOEE(params) {
|
|
||||||
return this.$http({
|
|
||||||
url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
|
|
||||||
method: 'post',
|
|
||||||
data: params
|
|
||||||
}).then(({ data: res }) => {
|
|
||||||
if (!res.data || res.code === 500) {
|
|
||||||
this.dataList.splice(0)
|
|
||||||
this.$message.error(res.msg)
|
|
||||||
return { data: null }
|
|
||||||
}
|
|
||||||
return res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
getList() {
|
|
||||||
const params = this.makeQuerys()
|
|
||||||
// 发起请求
|
|
||||||
return this.getOEE(params).then(datalist => {
|
|
||||||
console.log('getOEE res:', datalist)
|
|
||||||
this.timeList.splice(0)
|
|
||||||
this.rateList.splice(0)
|
|
||||||
this.xAxis.splice(0)
|
|
||||||
if (datalist.length) {
|
|
||||||
// 分流
|
|
||||||
datalist.map(item => {
|
|
||||||
const time = moment(item.time)
|
|
||||||
if (this.searchType === '按月') {
|
|
||||||
this.xAxis.push(`${time.year()}年${time.month() + 1}月`)
|
|
||||||
} else if (this.searchType === '按周') {
|
|
||||||
this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
|
|
||||||
} else if (this.searchType === '按天') {
|
|
||||||
this.xAxis.push(`${time.format('YY-M-D')}`)
|
|
||||||
} else {
|
|
||||||
this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
|
|
||||||
}
|
|
||||||
this.timeList.push(pick(item, ['workTime', 'stopTime', 'downTime']))
|
|
||||||
this.rateList.push(pick(item, ['workRate', 'stopRate', 'downRate', 'peEfficiency', 'timeEfficiency', 'oee', 'teep']))
|
|
||||||
})
|
|
||||||
|
|
||||||
// 设置横轴
|
|
||||||
this.config.setXAxis(JSON.parse(JSON.stringify(this.xAxis)))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
async handleRadioGroupChanged() {
|
|
||||||
// 获取数据且设置横轴
|
|
||||||
await this.getList()
|
|
||||||
// 设置legend和数据
|
|
||||||
this.setLegend()
|
|
||||||
},
|
|
||||||
|
|
||||||
setLegend() {
|
|
||||||
// 设置legend
|
|
||||||
const legendMap = {
|
|
||||||
百分比: ['工作时长比率', '停机时长比率', '故障时长比率', '速度开动率', '时间开动率', 'OEE', 'TEEP'],
|
|
||||||
时间: ['工作时长', '停机时长', '故障时长']
|
|
||||||
}
|
|
||||||
this.config.setLegend(legendMap[this.dataType])
|
|
||||||
this.setData()
|
|
||||||
// 重新绘制
|
|
||||||
this.renderGraph()
|
|
||||||
},
|
|
||||||
|
|
||||||
setData() {
|
|
||||||
if (this.dataType === '时间') {
|
|
||||||
const workTimeList = []
|
|
||||||
const stopTimeList = []
|
|
||||||
const downTimeList = []
|
|
||||||
this.timeList.map(item => {
|
|
||||||
workTimeList.push(item.workTime)
|
|
||||||
stopTimeList.push(item.stopTime)
|
|
||||||
downTimeList.push(item.downTime)
|
|
||||||
})
|
|
||||||
this.config.setSeries([
|
|
||||||
{ name: '工作时长', type: 'bar', data: workTimeList },
|
|
||||||
{ name: '停机时长', type: 'bar', data: stopTimeList },
|
|
||||||
{ name: '故障时长', type: 'bar', data: downTimeList }
|
|
||||||
])
|
|
||||||
} else {
|
|
||||||
// 百分比
|
|
||||||
const workRateList = []
|
|
||||||
const stopRateList = []
|
|
||||||
const downRateList = []
|
|
||||||
const peEfficiencyList = []
|
|
||||||
const timeEfficiencyList = []
|
|
||||||
const oeeList = []
|
|
||||||
const teepList = []
|
|
||||||
this.rateList.map(item => {
|
|
||||||
workRateList.push(item.workRate)
|
|
||||||
stopRateList.push(item.stopRate)
|
|
||||||
downRateList.push(item.downRate)
|
|
||||||
peEfficiencyList.push(item.peEfficiency)
|
|
||||||
timeEfficiencyList.push(item.timeEfficiency)
|
|
||||||
oeeList.push(item.oee)
|
|
||||||
teepList.push(item.teep)
|
|
||||||
})
|
|
||||||
this.config.setSeries([
|
|
||||||
{ name: '工作时长比率', type: 'bar', data: workRateList },
|
|
||||||
{ name: '停机时长比率', type: 'bar', data: stopRateList },
|
|
||||||
{ name: '故障时长比率', type: 'bar', data: downRateList },
|
|
||||||
{ name: '速度开动率', type: 'bar', data: peEfficiencyList },
|
|
||||||
{ name: '时间开动率', type: 'bar', data: timeEfficiencyList },
|
|
||||||
{ name: 'OEE', type: 'bar', data: oeeList },
|
|
||||||
{ name: 'TEEP', type: 'bar', data: teepList }
|
|
||||||
])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 重新绘制图形
|
|
||||||
renderGraph() {
|
|
||||||
console.log('latest config: ', JSON.stringify(this.config))
|
|
||||||
this.$nextTick(() => {
|
|
||||||
// this.chart.setOption(this.config)
|
|
||||||
this.chart.setOption(this.config, {
|
|
||||||
notMerge: true
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.graph-area {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 200px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-row {
|
|
||||||
position: relative;
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.3s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:hover {
|
|
||||||
color: #409eff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head-radio-group >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
||||||
background-color: #409eff;
|
|
||||||
border-color: #409eff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,210 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 设备效率分析 -->
|
|
||||||
<div class="mod-config">
|
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
|
||||||
<!-- 月份 -->
|
|
||||||
<el-form-item>
|
|
||||||
<el-date-picker key="month-picker" v-model="rawTime" type="month" :placeholder="'请选择月份'" format="yyyy-MM" />
|
|
||||||
</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-button @click="getDataList()">{{ $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"
|
|
||||||
></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 { calcMaxHeight } from '@/utils'
|
|
||||||
import { timeFilter } from '@/utils/filters'
|
|
||||||
import moment from 'moment'
|
|
||||||
|
|
||||||
const tableConfigs = [
|
|
||||||
{
|
|
||||||
type: 'index',
|
|
||||||
name: i18n.t('index')
|
|
||||||
},
|
|
||||||
{ prop: 'pdlName', name: '产线名称' },
|
|
||||||
{ prop: 'wsName', name: '工序' },
|
|
||||||
{ prop: 'eqName', name: '设备' },
|
|
||||||
{ prop: 'mtbf', name: '平均故障间隔时间[MTBF] (h)', width: 220 },
|
|
||||||
{ prop: 'mttr', name: '平均维修时间[MTTR] (h)', width: 190 },
|
|
||||||
{ prop: 'workTime', name: '工作时长 (h)' },
|
|
||||||
{ prop: 'downTime', name: '故障时长 (h)' },
|
|
||||||
{ prop: 'downCount', name: '故障次数' },
|
|
||||||
{
|
|
||||||
prop: 'operations',
|
|
||||||
name: i18n.t('handle'),
|
|
||||||
fixed: 'right',
|
|
||||||
width: 180,
|
|
||||||
subcomponent: TableOperateComponent,
|
|
||||||
// options: ['edit', 'delete']
|
|
||||||
options: ['view-trend'] // 查看趋势
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
/** hfxny part */
|
|
||||||
factoryList: [],
|
|
||||||
productLineList: [],
|
|
||||||
/** */
|
|
||||||
calcMaxHeight,
|
|
||||||
tableConfigs,
|
|
||||||
timeType: 'range',
|
|
||||||
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
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
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/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.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 }) => {
|
|
||||||
console.log('oee data:', res)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 每页数
|
|
||||||
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>
|
|
||||||
@ -1,266 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 设备效率分析 -->
|
|
||||||
<div class="mod-config">
|
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
|
||||||
<!-- 产线 -->
|
|
||||||
<el-form-item>
|
|
||||||
<el-select v-model="dataForm.productlines" :placeholder="'产线'" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 工序 -->
|
|
||||||
<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-date-picker key="date-picker" v-model="rawTime" type="date" :placeholder="'请选择日期'" format="yyyy-MM-dd" />
|
|
||||||
</el-form-item>
|
|
||||||
<!-- 按钮 -->
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="getDataList()">{{ $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"
|
|
||||||
></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 { 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: 180,
|
|
||||||
subcomponent: TableOperateComponent,
|
|
||||||
// options: ['edit', 'delete']
|
|
||||||
options: ['view-trend'] // 查看趋势
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
/** hfxny part */
|
|
||||||
factoryList: [],
|
|
||||||
productLineList: [],
|
|
||||||
/** */
|
|
||||||
calcMaxHeight,
|
|
||||||
tableConfigs,
|
|
||||||
timeType: 'range',
|
|
||||||
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
|
|
||||||
},
|
|
||||||
|
|
||||||
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.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 }) => {
|
|
||||||
console.log('oee data:', res)
|
|
||||||
if (res.length) {
|
|
||||||
this.dataList = res
|
|
||||||
this.totalPage = res.length
|
|
||||||
} else {
|
|
||||||
this.dataList.splice(0)
|
|
||||||
this.totalPage = 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 每页数
|
|
||||||
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>
|
|
||||||
Loading…
Reference in New Issue
Block a user