375 lines
9.2 KiB
Vue
375 lines
9.2 KiB
Vue
<template>
|
|
<div>
|
|
<el-row :gutter="10" class="main-box">
|
|
<el-col :span="4">
|
|
<div class="left-box">
|
|
<el-tree
|
|
:data="treeData"
|
|
node-key="name"
|
|
:props="defaultTime"
|
|
default-expand-all
|
|
:highlight-current="true"
|
|
@node-click="clickDevice"
|
|
ref="deviceTree"
|
|
>
|
|
</el-tree>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="20">
|
|
<el-row :gutter="10">
|
|
<el-col :span="24">
|
|
<el-row :gutter="10">
|
|
<el-col :span="18">
|
|
<div class="top-left">
|
|
<div>
|
|
<search-bar
|
|
:formConfigs="formConfig"
|
|
@headBtnClick="buttonClick"
|
|
/>
|
|
<base-table
|
|
:page="listQuery.current"
|
|
:limit="listQuery.size"
|
|
:page-width="50"
|
|
:table-props="tableProps"
|
|
:table-data="tableData"
|
|
:max-height="tableH"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="top-right">
|
|
<div>
|
|
<span class="title">{{ eqName }}计划产能</span>
|
|
<svg-icon
|
|
icon-class="device_edit"
|
|
class="icon-style"
|
|
@click="editPower"
|
|
/>
|
|
</div>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<base-table
|
|
:table-props="tableProps2"
|
|
:table-data="tableData2"
|
|
:max-height="tableH"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<base-table
|
|
:table-props="tableProps2"
|
|
:table-data="tableData3"
|
|
:max-height="tableH"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="10">
|
|
<el-col :span="24">
|
|
<div class="right-bottom">
|
|
<device-oee-line ref="oeeLine" :chartMsg="tableData" />
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 编辑 -->
|
|
<base-dialog
|
|
dialogTitle="产能维护"
|
|
:dialogVisible="centervisible"
|
|
:close-on-click-modal="false"
|
|
@cancel="handleCancel"
|
|
@confirm="handleConfirm"
|
|
:before-close="handleCancel"
|
|
>
|
|
<product-power-edit ref="productPower" @successSubmit="successSubmit" />
|
|
</base-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getTreeData } from '@/api/app'
|
|
import { tableHeight, timeFormatter } from '@/utils/index'
|
|
import {
|
|
performanceAnalysisGet,
|
|
performanceAnalysisPlan
|
|
} from '@/api/deviceManagement'
|
|
import productPowerEdit from './../components/productPowerEdit.vue'
|
|
import deviceOeeLine from './../components/deviceOeeLine.vue'
|
|
// import moment from 'moment'
|
|
const tableProps = [
|
|
{
|
|
prop: 'recordDate',
|
|
label: '时间',
|
|
minWidth: 160,
|
|
filter: timeFormatter
|
|
},
|
|
{
|
|
prop: 'operationHours',
|
|
label: '开动时长(h)',
|
|
minWidth: 100
|
|
},
|
|
{
|
|
prop: 'loadHours',
|
|
label: '负荷时长(h)',
|
|
minWidth: 100
|
|
},
|
|
{
|
|
prop: 'actualCapacity',
|
|
label: '实际产能',
|
|
minWidth: 90
|
|
},
|
|
{
|
|
prop: 'planCountDay',
|
|
label: '设计产能',
|
|
minWidth: 90
|
|
},
|
|
{
|
|
prop: 'activation',
|
|
label: '时间开动率',
|
|
minWidth: 100
|
|
},
|
|
{
|
|
prop: 'performance',
|
|
label: '性能开动率',
|
|
minWidth: 100
|
|
},
|
|
{
|
|
prop: 'combinedEfficiency',
|
|
label: '综合效率OEE',
|
|
minWidth: 110
|
|
},
|
|
{
|
|
prop: 'failureHours',
|
|
label: '故障时长',
|
|
minWidth: 90
|
|
},
|
|
{
|
|
prop: 'failurePercent',
|
|
label: '设备故障率',
|
|
minWidth: 100
|
|
}
|
|
]
|
|
const tableProps2 = [
|
|
{
|
|
prop: 'month',
|
|
label: '月份',
|
|
width: 60
|
|
},
|
|
{
|
|
prop: 'value',
|
|
label: '设计产能',
|
|
minWidth: 80
|
|
}
|
|
]
|
|
export default {
|
|
name: 'deviceOEEPage',
|
|
data() {
|
|
return {
|
|
treeData: [],
|
|
defaultTime: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
eqName: '',
|
|
chooseMonth: '',
|
|
formConfig: [
|
|
{
|
|
type: 'datePicker',
|
|
label: '月份选择',
|
|
dateType: 'month',
|
|
format: 'yyyy-MM',
|
|
valueFormat: 'yyyy-MM',
|
|
placeholder: '月份选择',
|
|
param: 'timePosition',
|
|
defaultSelect: '',
|
|
width: 200
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary'
|
|
}
|
|
],
|
|
listQuery: {
|
|
current: 1,
|
|
size: 500,
|
|
timePosition: '',
|
|
name: ''
|
|
},
|
|
tableProps,
|
|
tableData: [],
|
|
tableH: tableHeight(214) / 2 - 75,
|
|
tableProps2,
|
|
tableData2: [],
|
|
tableData3: [],
|
|
centervisible: false
|
|
}
|
|
},
|
|
components: { productPowerEdit, deviceOeeLine },
|
|
mounted() {
|
|
window.addEventListener('resize', () => {
|
|
this.tableH = tableHeight(214) / 2 - 75
|
|
})
|
|
this.setDefaultVal()
|
|
this.getTree()
|
|
},
|
|
methods: {
|
|
setDefaultVal() {
|
|
let date = new Date()
|
|
let year = date.getFullYear()
|
|
let month =
|
|
date.getMonth() + 1 < 10
|
|
? '0' + (date.getMonth() + 1)
|
|
: date.getMonth() + 1
|
|
this.formConfig[0].defaultSelect = year + '-' + month
|
|
this.listQuery.timePosition = year + '-' + month
|
|
},
|
|
getTree() {
|
|
getTreeData().then((res) => {
|
|
this.treeData = res.data
|
|
this.eqName = res.data[0].children[0].children[0].name
|
|
this.listQuery.name = this.eqName
|
|
setTimeout(() => {
|
|
this.$refs.deviceTree.setCurrentKey(this.eqName)
|
|
}, 100)
|
|
this.getList()
|
|
this.getPlan()
|
|
})
|
|
},
|
|
getList() {
|
|
// 获取设备OEE
|
|
performanceAnalysisGet({ ...this.listQuery }).then((res) => {
|
|
if (res.code === 0) {
|
|
this.tableData = res.data
|
|
}
|
|
})
|
|
this.$refs.oeeLine.getChart()
|
|
},
|
|
buttonClick(val) {
|
|
if (val.btnName === 'search') {
|
|
this.listQuery.timePosition = val.timePosition
|
|
this.getList()
|
|
this.getPlan()
|
|
}
|
|
},
|
|
getPlan() {
|
|
// 获取计划产能
|
|
let date = new Date(this.listQuery.timePosition)
|
|
let year = date.getFullYear()
|
|
let arr = [
|
|
{ month: '1月', value: null, type: 'january' },
|
|
{ month: '2月', value: null, type: 'february' },
|
|
{ month: '3月', value: null, type: 'march' },
|
|
{ month: '4月', value: null, type: 'april' },
|
|
{ month: '5月', value: null, type: 'may' },
|
|
{ month: '6月', value: null, type: 'june' },
|
|
{ month: '7月', value: null, type: 'july' },
|
|
{ month: '8月', value: null, type: 'august' },
|
|
{ month: '9月', value: null, type: 'september' },
|
|
{ month: '10月', value: null, type: 'october' },
|
|
{ month: '11月', value: null, type: 'november' },
|
|
{ month: '12月', value: null, type: 'december' }
|
|
]
|
|
performanceAnalysisPlan({ name: this.eqName, year: year }).then((res) => {
|
|
if (res.code === 0 && !!res.data) {
|
|
let obj = res.data
|
|
for (let i = 0; i < arr.length; i++) {
|
|
arr[i].value = obj[arr[i].type]
|
|
}
|
|
} else {
|
|
for (let i = 0; i < arr.length; i++) {
|
|
arr[i].value = null
|
|
}
|
|
}
|
|
this.tableData2 = arr.slice(0, 6)
|
|
this.tableData3 = arr.slice(6, 12)
|
|
})
|
|
},
|
|
clickDevice(val) {
|
|
if (!val.children) {
|
|
// 设备
|
|
this.listQuery.name = val.name
|
|
this.eqName = val.name
|
|
// this.getList()
|
|
// this.getPlan()
|
|
}
|
|
},
|
|
editPower() {
|
|
this.centervisible = true
|
|
this.$nextTick(() => {
|
|
this.$refs.productPower.init(this.listQuery)
|
|
})
|
|
},
|
|
handleCancel() {
|
|
this.$refs.productPower.formClear()
|
|
this.centervisible = false
|
|
},
|
|
handleConfirm() {
|
|
this.$refs.productPower.submitForm()
|
|
},
|
|
successSubmit() {
|
|
this.handleCancel()
|
|
this.getPlan()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.main-box {
|
|
width: 100%;
|
|
padding: 0px 6px 0 16px;
|
|
.left-box {
|
|
padding-top: 16px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
}
|
|
.top-left,
|
|
.top-right,
|
|
.right-bottom {
|
|
padding: 16px 10px 0;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
}
|
|
.left-box {
|
|
overflow-y: auto;
|
|
height: calc(100vh - 204px);
|
|
}
|
|
.top-left,
|
|
.top-right,
|
|
.right-bottom {
|
|
height: calc((100vh - 214px) / 2);
|
|
}
|
|
.top-right,
|
|
.top-left {
|
|
.title {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
margin-bottom: 22px;
|
|
}
|
|
.title::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background: #0b58ff;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
.icon-style {
|
|
font-size: 14px;
|
|
margin-left: 18px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.right-bottom {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
</style>
|