|
|
@@ -17,10 +17,10 @@ |
|
|
|
<base-table |
|
|
|
class="base-table__margin" |
|
|
|
:table-props="tableProps" |
|
|
|
:page="queryParams.pageNo" |
|
|
|
:limit="queryParams.pageSize" |
|
|
|
:table-data="list" |
|
|
|
@emitFun="handleEmitFun"> |
|
|
|
<!-- :page="queryParams.pageNo" |
|
|
|
:limit="queryParams.pageSize" --> |
|
|
|
<!-- <method-btn |
|
|
|
v-if="tableBtn.length" |
|
|
|
slot="handleBtn" |
|
|
@@ -30,28 +30,34 @@ |
|
|
|
</base-table> |
|
|
|
|
|
|
|
<!-- 分页组件 --> |
|
|
|
<pagination |
|
|
|
<!-- <pagination |
|
|
|
v-show="total > 0" |
|
|
|
:total="total" |
|
|
|
:page.sync="queryParams.pageNo" |
|
|
|
:limit.sync="queryParams.pageSize" |
|
|
|
@pagination="getList" /> |
|
|
|
@pagination="getList" /> --> |
|
|
|
|
|
|
|
<!-- 对话框(添加 / 修改) --> |
|
|
|
<base-dialog |
|
|
|
:dialogTitle="title" |
|
|
|
:dialogTitle="visualizationOpen ? '设备可视化' : '查看趋势'" |
|
|
|
:dialogVisible="open" |
|
|
|
width="500px" |
|
|
|
:width="visualizationOpen ? '80%' : '700px'" |
|
|
|
@closed="closed" |
|
|
|
@close="cancel" |
|
|
|
@cancel="cancel" |
|
|
|
@confirm="submitForm"> |
|
|
|
<!-- some thing ... --> |
|
|
|
<div class="visualization" v-if="visualizationOpen"> |
|
|
|
<h1>设备可视化</h1> |
|
|
|
</div> |
|
|
|
<div v-if="trendOpen"> |
|
|
|
<h1>查看趋势</h1> |
|
|
|
</div> |
|
|
|
</base-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import moment from 'moment'; |
|
|
|
// import moment from 'moment'; |
|
|
|
import basicPageMixin from '@/mixins/lb/basicPageMixin'; |
|
|
|
|
|
|
|
export default { |
|
|
@@ -61,7 +67,9 @@ export default { |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
searchBarKeys: ['name', 'code'], |
|
|
|
open: false, |
|
|
|
visualizationOpen: false, |
|
|
|
trendOpen: false, |
|
|
|
// tableBtn: [ |
|
|
|
// this.$auth.hasPermi('base:equipment-group:update') |
|
|
|
// ? { |
|
|
@@ -77,21 +85,27 @@ export default { |
|
|
|
// : undefined, |
|
|
|
// ].filter((v) => v), |
|
|
|
tableProps: [ |
|
|
|
{ prop: 'duration', label: '工厂', align: 'center' }, |
|
|
|
{ prop: 'duration', label: '产线', align: 'center' }, |
|
|
|
{ prop: 'duration', label: '工段', align: 'center' }, |
|
|
|
{ prop: 'duration', label: '设备', align: 'center' }, |
|
|
|
{ prop: 'factoryName', label: '工厂', align: 'center' }, |
|
|
|
{ prop: 'lineName', label: '产线', align: 'center' }, |
|
|
|
{ prop: 'sectionName', label: '工段', align: 'center' }, |
|
|
|
{ prop: 'equipmentName', label: '设备', align: 'center' }, |
|
|
|
{ |
|
|
|
label: '有效时间', |
|
|
|
align: 'center', |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
width: 128, |
|
|
|
prop: 'duration', |
|
|
|
prop: 'workTime', |
|
|
|
label: '工作时长', |
|
|
|
align: 'center', |
|
|
|
}, |
|
|
|
{ width: 128, prop: 'duration1', label: '百分比', align: 'center' }, |
|
|
|
{ |
|
|
|
width: 128, |
|
|
|
prop: 'workRate', |
|
|
|
label: '百分比', |
|
|
|
align: 'center', |
|
|
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'), |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
@@ -100,11 +114,11 @@ export default { |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
width: 128, |
|
|
|
prop: 'duration', |
|
|
|
prop: 'stopTime', |
|
|
|
label: '停机时长', |
|
|
|
align: 'center', |
|
|
|
}, |
|
|
|
{ width: 128, prop: 'duration1', label: '百分比', align: 'center' }, |
|
|
|
{ width: 128, prop: 'stopRate', label: '百分比', align: 'center' }, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
@@ -113,16 +127,18 @@ export default { |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
width: 128, |
|
|
|
prop: 'duration', |
|
|
|
prop: 'downTime', |
|
|
|
label: '故障时长', |
|
|
|
align: 'center', |
|
|
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'), |
|
|
|
}, |
|
|
|
{ width: 128, prop: 'duration1', label: '百分比', align: 'center' }, |
|
|
|
{ width: 128, prop: 'downRate', label: '百分比', align: 'center' }, |
|
|
|
{ |
|
|
|
width: 128, |
|
|
|
prop: 'duration1', |
|
|
|
prop: 'timeEfficiency', |
|
|
|
label: '时间开动率', |
|
|
|
align: 'center', |
|
|
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'), |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
@@ -132,26 +148,37 @@ export default { |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
width: 128, |
|
|
|
prop: 'duration', |
|
|
|
prop: 'realProcSpeed', |
|
|
|
label: '实际加工速度', |
|
|
|
align: 'center', |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 128, |
|
|
|
prop: 'duration1', |
|
|
|
prop: 'designProcSpeed', |
|
|
|
label: '理论加工速度', |
|
|
|
align: 'center', |
|
|
|
}, |
|
|
|
{ |
|
|
|
width: 128, |
|
|
|
prop: 'duration1', |
|
|
|
prop: 'peEfficiency', |
|
|
|
label: '速度开动率', |
|
|
|
align: 'center', |
|
|
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'), |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ prop: 'duration1', label: 'OEE', align: 'center' }, |
|
|
|
{ prop: 'duration1', label: 'TEEP', align: 'center' }, |
|
|
|
{ |
|
|
|
prop: 'oee', |
|
|
|
label: 'OEE', |
|
|
|
align: 'center', |
|
|
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'), |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'teep', |
|
|
|
label: 'TEEP', |
|
|
|
align: 'center', |
|
|
|
filter: (val) => (val != null ? +val.toFixed(3) : '-'), |
|
|
|
}, |
|
|
|
{ |
|
|
|
_action: 'view-trend', |
|
|
|
label: '趋势', |
|
|
@@ -163,7 +190,7 @@ export default { |
|
|
|
return h( |
|
|
|
'el-button', |
|
|
|
{ |
|
|
|
props: { type: 'text', size: 'mini' }, |
|
|
|
props: { type: 'text' }, |
|
|
|
on: { |
|
|
|
click: function () { |
|
|
|
console.log('inejctdata', _this.injectData); |
|
|
@@ -186,27 +213,54 @@ export default { |
|
|
|
type: 'select', |
|
|
|
label: '工厂', |
|
|
|
placeholder: '请选择工厂', |
|
|
|
param: 'name', |
|
|
|
param: 'factoryId', |
|
|
|
selectOptions: [], |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'select', |
|
|
|
label: '产线', |
|
|
|
placeholder: '请选择产线', |
|
|
|
param: 'codes', |
|
|
|
param: 'lineId', |
|
|
|
selectOptions: [], |
|
|
|
}, |
|
|
|
// 选项切换 |
|
|
|
{ |
|
|
|
type: 'datePicker', |
|
|
|
label: '时间', |
|
|
|
dateType: 'daterange', |
|
|
|
format: 'yyyy-MM-dd', |
|
|
|
valueFormat: 'yyyy-MM-dd HH:mm:ss', |
|
|
|
rangeSeparator: '-', |
|
|
|
startPlaceholder: '开始时间', |
|
|
|
endPlaceholder: '结束时间', |
|
|
|
param: 'createTime', |
|
|
|
type: 'select', |
|
|
|
label: '时间类型', |
|
|
|
param: 'dateFilterType', |
|
|
|
defaultSelect: 0, |
|
|
|
selectOptions: [ |
|
|
|
{ id: 0, name: '按时间段' }, |
|
|
|
{ id: 1, name: '按日期' }, |
|
|
|
], |
|
|
|
index: 2, |
|
|
|
extraOptions: [ |
|
|
|
{ |
|
|
|
parent: 'dateFilterType', |
|
|
|
// 时间段选择 |
|
|
|
type: 'datePicker', |
|
|
|
label: '时间段', |
|
|
|
dateType: 'daterange', |
|
|
|
format: 'yyyy-MM-dd', |
|
|
|
valueFormat: 'yyyy-MM-dd HH:mm:ss', |
|
|
|
defaultTime: ['00:00:00', '00:00:00'], |
|
|
|
rangeSeparator: '-', |
|
|
|
startPlaceholder: '开始时间', |
|
|
|
endPlaceholder: '结束时间', |
|
|
|
param: 'recordTime', |
|
|
|
}, |
|
|
|
{ |
|
|
|
parent: 'dateFilterType', |
|
|
|
// 日期选择 |
|
|
|
type: 'datePicker', |
|
|
|
label: '日期', |
|
|
|
dateType: 'date', |
|
|
|
placeholder: '选择日期', |
|
|
|
format: 'yyyy-MM-dd', |
|
|
|
valueFormat: 'yyyy-MM-dd', |
|
|
|
param: 'recordTime', |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'button', |
|
|
@@ -219,121 +273,139 @@ export default { |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'button', |
|
|
|
btnName: 'OEE', |
|
|
|
name: 'add', |
|
|
|
btnName: '设备可视化', |
|
|
|
name: 'visualization', |
|
|
|
plain: true, |
|
|
|
color: 'success', |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'button', |
|
|
|
btnName: 'TEEP', |
|
|
|
name: 'add', |
|
|
|
plain: true, |
|
|
|
color: 'warning', |
|
|
|
}, |
|
|
|
// { |
|
|
|
// type: 'button', |
|
|
|
// btnName: 'OEE', |
|
|
|
// name: 'add', |
|
|
|
// plain: true, |
|
|
|
// color: 'success', |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// type: 'button', |
|
|
|
// btnName: 'TEEP', |
|
|
|
// name: 'add', |
|
|
|
// plain: true, |
|
|
|
// color: 'warning', |
|
|
|
// }, |
|
|
|
], |
|
|
|
// 是否显示弹出层 |
|
|
|
open: false, |
|
|
|
// 查询参数 |
|
|
|
queryParams: { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10, |
|
|
|
code: null, |
|
|
|
name: null, |
|
|
|
lineId: null, |
|
|
|
factoryId: null, |
|
|
|
recordTime: [], |
|
|
|
}, |
|
|
|
// 表单参数 |
|
|
|
form: {}, |
|
|
|
list: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getFactory(); |
|
|
|
this.getLine(); |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
/** 准备工厂数据 */ |
|
|
|
async getFactory() { |
|
|
|
const { code, data } = await this.$axios({ |
|
|
|
url: '/base/factory/listAll', |
|
|
|
method: 'get', |
|
|
|
}); |
|
|
|
if (code == 0) { |
|
|
|
this.searchBarFormConfig[0].selectOptions = data.map((item) => { |
|
|
|
return { |
|
|
|
name: item.name, |
|
|
|
id: item.id, |
|
|
|
}; |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** 准备产线数据 */ |
|
|
|
async getLine() { |
|
|
|
const { code, data } = await this.$axios({ |
|
|
|
url: '/base/production-line/listAll', |
|
|
|
method: 'get', |
|
|
|
}); |
|
|
|
if (code == 0) { |
|
|
|
this.searchBarFormConfig[1].selectOptions = data.map((item) => { |
|
|
|
return { |
|
|
|
name: item.name, |
|
|
|
id: item.id, |
|
|
|
}; |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** 覆盖 handleEmitFun 的默认实现 */ |
|
|
|
handleEmitFun({ action, value }) { |
|
|
|
const { |
|
|
|
id: equipmentGroupId, |
|
|
|
name: equipmentGroupName, |
|
|
|
code: equipmentGroupCode, |
|
|
|
} = value; |
|
|
|
switch (action) { |
|
|
|
case 'equipment-group-show-alert': |
|
|
|
// this.$router.push({ path: '/equipment/base/equipment-group-alarm' }); |
|
|
|
this.$router.push({ |
|
|
|
name: 'EquipmentGroupAlarm', |
|
|
|
params: { |
|
|
|
equipmentGroupId, |
|
|
|
equipmentGroupCode, |
|
|
|
equipmentGroupName, |
|
|
|
}, |
|
|
|
}); |
|
|
|
case 'view-trend': |
|
|
|
const { id } = value; |
|
|
|
this.open = true; |
|
|
|
this.trendOpen = true; |
|
|
|
break; |
|
|
|
} |
|
|
|
}, |
|
|
|
/** 查询列表 */ |
|
|
|
getList() { |
|
|
|
async getList() { |
|
|
|
this.loading = true; |
|
|
|
// 执行查询 |
|
|
|
getEquipmentGroupPage(this.queryParams).then((response) => { |
|
|
|
this.list = response.data.list; |
|
|
|
this.total = response.data.total; |
|
|
|
this.loading = false; |
|
|
|
const { code, data } = await this.$axios({ |
|
|
|
url: '/analysis/equipment-analysis/efficiency', |
|
|
|
method: 'get', |
|
|
|
params: this.queryParams, |
|
|
|
}); |
|
|
|
if (code == 0) { |
|
|
|
console.log('data', data); |
|
|
|
this.list = data; |
|
|
|
} |
|
|
|
}, |
|
|
|
/** 取消按钮 */ |
|
|
|
|
|
|
|
handleSearchBarBtnClick({ btnName, ...payload }) { |
|
|
|
console.log('handleSearchBarBtnClick', btnName, payload); |
|
|
|
if (btnName == 'visualization') { |
|
|
|
// 可视化 |
|
|
|
this.visualizationOpen = true; |
|
|
|
this.open = true; |
|
|
|
} |
|
|
|
if (btnName == 'search') { |
|
|
|
this.queryParams.factoryId = payload.factoryId || null; |
|
|
|
this.queryParams.lineId = payload.lineId || null; |
|
|
|
if (payload.recordTime != null) { |
|
|
|
if (typeof payload.recordTime == 'string') { |
|
|
|
if (payload.recordTime.trim() !== '') { |
|
|
|
this.queryParams.recordTime = [ |
|
|
|
`${payload.recordTime} 00:00:00`, |
|
|
|
`${payload.recordTime} 23:59:59`, |
|
|
|
]; |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.queryParams.recordTime = payload.recordTime; |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.queryParams.recordTime = null; |
|
|
|
} |
|
|
|
this.getList(); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
cancel() { |
|
|
|
this.open = false; |
|
|
|
this.reset(); |
|
|
|
}, |
|
|
|
/** 表单重置 */ |
|
|
|
reset() { |
|
|
|
this.form = { |
|
|
|
id: undefined, |
|
|
|
code: undefined, |
|
|
|
name: undefined, |
|
|
|
remark: undefined, |
|
|
|
}; |
|
|
|
this.resetForm('form'); |
|
|
|
}, |
|
|
|
/** 搜索按钮操作 */ |
|
|
|
handleQuery() { |
|
|
|
this.queryParams.pageNo = 1; |
|
|
|
this.getList(); |
|
|
|
}, |
|
|
|
/** 重置按钮操作 */ |
|
|
|
resetQuery() { |
|
|
|
this.resetForm('queryForm'); |
|
|
|
this.handleQuery(); |
|
|
|
}, |
|
|
|
/** 新增按钮操作 */ |
|
|
|
handleAdd() { |
|
|
|
this.reset(); |
|
|
|
this.open = true; |
|
|
|
this.title = '添加设备分组(用于同类型不同厂家的设备区分)'; |
|
|
|
}, |
|
|
|
/** 提交按钮 */ |
|
|
|
submitForm() { |
|
|
|
this.$refs['form'].validate((valid) => { |
|
|
|
if (!valid) { |
|
|
|
return; |
|
|
|
} |
|
|
|
// 修改的提交 |
|
|
|
if (this.form.id != null) { |
|
|
|
updateEquipmentGroup(this.form).then((response) => { |
|
|
|
this.$modal.msgSuccess('修改成功'); |
|
|
|
this.open = false; |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 添加的提交 |
|
|
|
createEquipmentGroup(this.form).then((response) => { |
|
|
|
this.$modal.msgSuccess('新增成功'); |
|
|
|
this.open = false; |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
closed() { |
|
|
|
this.visualizationOpen = false; |
|
|
|
this.trendOpen = false; |
|
|
|
}, |
|
|
|
|
|
|
|
submitForm() {}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|