316 lines
7.0 KiB
Vue
316 lines
7.0 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="id"
|
|
:props="defaultTime"
|
|
default-expand-all
|
|
@node-click="clickDevice"
|
|
>
|
|
</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">xx单元计划产能</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 />
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 编辑 -->
|
|
<base-dialog
|
|
dialogTitle="产能维护"
|
|
:dialogVisible="centervisible"
|
|
@cancel="handleCancel"
|
|
@confirm="handleConfirm"
|
|
:before-close="handleCancel"
|
|
>
|
|
<product-power-edit ref="product-power" @successSubmit="successSubmit" />
|
|
</base-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getTreeData } from '@/api/app'
|
|
import { tableHeight } from '@/utils/index'
|
|
import {
|
|
performanceAnalysisGet,
|
|
performanceAnalysisPlan
|
|
} from '@/api/deviceManagement'
|
|
import productPowerEdit from './../components/productPowerEdit.vue'
|
|
import deviceOeeLine from './../components/deviceOeeLine.vue'
|
|
const tableProps = [
|
|
{
|
|
prop: 'startTime',
|
|
label: '时间',
|
|
minWidth: 90
|
|
},
|
|
{
|
|
prop: 'endTime',
|
|
label: '开动时长(h)',
|
|
minWidth: 100
|
|
},
|
|
{
|
|
prop: 'inputNum',
|
|
label: '负荷时长(h)',
|
|
minWidth: 100
|
|
},
|
|
{
|
|
prop: 'outputNum7',
|
|
label: '实际产能',
|
|
minWidth: 90
|
|
},
|
|
{
|
|
prop: 'lossesNum6',
|
|
label: '设计产能',
|
|
minWidth: 90
|
|
},
|
|
{
|
|
prop: 'lossesNum5',
|
|
label: '时间开动率',
|
|
minWidth: 100
|
|
},
|
|
{
|
|
prop: 'lossesNum4',
|
|
label: '性能开动率',
|
|
minWidth: 100
|
|
},
|
|
{
|
|
prop: 'lossesNum3',
|
|
label: '综合效率OEE',
|
|
minWidth: 110
|
|
},
|
|
{
|
|
prop: 'lossesNum2',
|
|
label: '故障时长',
|
|
minWidth: 90
|
|
},
|
|
{
|
|
prop: 'lossesNum1',
|
|
label: '设备故障率',
|
|
minWidth: 100
|
|
}
|
|
]
|
|
const tableProps2 = [
|
|
{
|
|
prop: 'startTime',
|
|
label: '月份',
|
|
width: 50
|
|
},
|
|
{
|
|
prop: 'endTime',
|
|
label: '设计产能',
|
|
minWidth: 80
|
|
}
|
|
]
|
|
export default {
|
|
name: 'deviceOEEPage',
|
|
data() {
|
|
return {
|
|
treeData: [],
|
|
defaultTime: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
chooseMonth: '',
|
|
formConfig: [
|
|
{
|
|
type: 'datePicker',
|
|
label: '月份选择',
|
|
dateType: 'month',
|
|
format: 'yyyy-MM',
|
|
valueFormat: 'yyyy-MM',
|
|
placeholder: '月份选择',
|
|
param: 'testTime',
|
|
width: 200
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary'
|
|
}
|
|
],
|
|
listQuery: {
|
|
current: 1,
|
|
size: 500
|
|
},
|
|
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.getTree()
|
|
this.getList()
|
|
for (let i = 0; i < 30; i++) {
|
|
let obj = {}
|
|
obj.startTime = i
|
|
this.tableData.push(obj)
|
|
}
|
|
let arr = []
|
|
for (let i = 1; i < 13; i++) {
|
|
let obj = {}
|
|
obj.endTime = i
|
|
arr.push(obj)
|
|
}
|
|
this.tableData2 = arr.slice(0, 6)
|
|
this.tableData3 = arr.slice(6, 12)
|
|
},
|
|
methods: {
|
|
getTree() {
|
|
getTreeData().then((res) => {
|
|
this.treeData = res.data
|
|
})
|
|
},
|
|
getList() {
|
|
// 获取设备OEE
|
|
performanceAnalysisGet({ ...this.listQuery }).then((res) => {
|
|
console.log(res)
|
|
})
|
|
},
|
|
buttonClick(val) {
|
|
console.log(val)
|
|
},
|
|
getPlan() {
|
|
// 获取计划产能
|
|
performanceAnalysisPlan({ name: '精切磨边', year: '2022' }).then(
|
|
(res) => {
|
|
console.log(res)
|
|
}
|
|
)
|
|
},
|
|
clickDevice(val) {
|
|
console.log(val)
|
|
if (!val.children) {
|
|
console.log(val.children)
|
|
}
|
|
},
|
|
editPower() {
|
|
this.centervisible = true
|
|
},
|
|
handleCancel() {
|
|
this.centervisible = false
|
|
},
|
|
handleConfirm() {
|
|
this.centervisible = false
|
|
},
|
|
successSubmit() {}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.main-box {
|
|
width: 100%;
|
|
padding: 0px 6px 0 16px;
|
|
.left-box,
|
|
.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>
|