From 65a5e8c7ec6d6eab78b76c5831eaf40c30e23c61 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期五, 13 九月 2024 14:56:50 +0800
Subject: [PATCH] 1、设备管理页面设备种类字段改成重要程度字段；新增设备异常状态字段，若表格记录的设备状态不为正常时，则标红此表格记录 2、设备利用率、设备开动率、班次利用率以及设备综合效率分析新增按照重要程度字段查询表格数据；左侧树数据新增参数key，用来过滤异常状态设备 3、设备利用率页面新增设备型号字段
---
src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue | 371 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 270 insertions(+), 101 deletions(-)
diff --git a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
index 0b18f26..52d0796 100644
--- a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
+++ b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
@@ -6,17 +6,38 @@
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="5" :sm="5" :xs="5">
- <a-form-item label="椹卞姩绫诲瀷">
- <a-auto-complete
- v-model="queryParam.driveType"
- :data-source="driveTypeList"
- placeholder="璇烽�夋嫨椹卞姩绫诲瀷"
- :filter-option="filterOption"
- :allowClear="true"
- />
+ <a-form-item label="璁惧绫诲瀷">
+ <a-select
+ :value="queryParams.equipmentType"
+ mode="multiple"
+ placeholder="璇烽�夋嫨璁惧绫诲瀷"
+ allow-clear
+ :maxTagCount="1"
+ @change="selectChange($event,'equipmentType')"
+ >
+ <a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index">
+ {{item.label}}
+ </a-select-option>
+ </a-select>
</a-form-item>
</a-col>
- <a-col :md="7" :sm="7" :xs="7">
+ <a-col :md="6" :sm="6" :xs="6">
+ <a-form-item label="椹卞姩绫诲瀷">
+ <a-select
+ :value="queryParams.driveType"
+ mode="multiple"
+ placeholder="璇烽�夋嫨椹卞姩绫诲瀷"
+ allow-clear
+ :maxTagCount="1"
+ @change="selectChange($event,'driveType')"
+ >
+ <a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index">
+ {{item.label}}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="5" :sm="5" :xs="5">
<a-form-item label="鏃堕棿">
<a-range-picker
:placeholder="['寮�濮嬫椂闂�', '缁撴潫鏃堕棿']"
@@ -28,11 +49,95 @@
/>
</a-form-item>
</a-col>
- <a-col :md="2" :sm="2" :xs="2">
+ <a-col :md="5" :sm="5" :xs="5">
+ <a-form-item label="璁惧绉嶇被">
+ <a-select
+ :value="queryParams.deviceCategory"
+ mode="multiple"
+ placeholder="璇烽�夋嫨璁惧绉嶇被"
+ allow-clear
+ :maxTagCount="1"
+ @change="selectChange($event,'deviceCategory')"
+ >
+ <a-select-option v-for="(item,index) in device_category_list" :value="item.value" :key="index">
+ {{item.label}}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="2" :sm="2">
+ <a
+ @click="toggleSearchStatus=!toggleSearchStatus"
+ @selectstart="$event.preventDefault()"
+ style="display: inline-block;height: 32px;line-height: 32px"
+ >
+ {{ toggleSearchStatus ? '鏀惰捣' : '灞曞紑' }}
+ <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+ </a>
+ </a-col>
+ </a-row>
+
+ <a-row :gutter="24" v-if="toggleSearchStatus">
+ <a-col :md="5" :sm="5" :xs="5">
+ <a-form-item label="璁惧绾у埆">
+ <a-select
+ :value="queryParams.deviceLevel"
+ mode="multiple"
+ placeholder="璇烽�夋嫨璁惧绾у埆"
+ allow-clear
+ :maxTagCount="1"
+ @change="selectChange($event,'deviceLevel')"
+ >
+ <a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index">
+ {{item.label}}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ <!--<a-col :md="5" :sm="5" :xs="5">-->
+ <!--<a-form-item label="鏁版嵁鍒嗗竷">-->
+ <!--<a-select-->
+ <!--:value="queryParams.deviceLevel"-->
+ <!--mode="multiple"-->
+ <!--placeholder="璇烽�夋嫨鏁版嵁鍒嗗竷"-->
+ <!--allow-clear-->
+ <!--:maxTagCount="1"-->
+ <!--@change="selectChange($event,'deviceLevel')"-->
+ <!-->-->
+ <!--<a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index">-->
+ <!--{{item.label}}-->
+ <!--</a-select-option>-->
+ <!--</a-select>-->
+ <!--</a-form-item>-->
+ <!--</a-col>-->
+ <a-col :md="5" :sm="5" :xs="5">
+ <a-form-item label="閲嶈绋嬪害">
+ <a-select
+ :value="queryParams.deviceImportanceLevel"
+ mode="multiple"
+ placeholder="璇烽�夋嫨璁惧閲嶈绋嬪害"
+ allow-clear
+ :maxTagCount="1"
+ @change="selectChange($event,'deviceImportanceLevel')"
+ >
+ <a-select-option v-for="(item,index) in device_importance_level_list" :value="item.value"
+ :key="index">
+ {{item.label}}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ </a-col>
+ </a-row>
+
+ <a-row :gutter="24" style="margin-bottom: 20px">
+ <a-col :md="4" :sm="4" :xs="4">
<a-space>
<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
<a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
<a-button type="primary" @click="exportExcel" icon="download">瀵煎嚭</a-button>
+ <a-button type="primary" icon="printer" v-print="'#EfficiencyShift'" v-has="'efficiencyShift:print'">
+ 鎵撳嵃
+ </a-button>
</a-space>
</a-col>
</a-row>
@@ -41,9 +146,14 @@
</div>
</div>
- <div id="EfficiencyShift" style="flex:1;overflow: hidden">
- <a-table :columns="columns" rowKey="id" :dataSource="dataSource.records" :loading="tableLoading"
- :pagination="false" :scroll="{x:'max-content',y:scrollY}" bordered></a-table>
+ <div id="EfficiencyShift" style="flex:1;overflow: hidden;height: inherit">
+ <a-table :columns="columns" rowKey="id" :dataSource="dataSource.records?dataSource.records:[]"
+ :loading="tableLoading"
+ :pagination="false" :scroll="{x:'max-content',y:scrollY}" bordered>
+ <!--<template slot="equipmentModel" slot-scope="text, record">-->
+ <!--<editable-cell :text="text" @change="onCellChange(record.id, 'equipmentModel', $event)"/>-->
+ <!--</template>-->
+ </a-table>
</div>
<!--<div class="pagination">-->
<!--<a-pagination-->
@@ -69,6 +179,8 @@
import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
import api from '@api/mdc'
+ // import EditableCell from './EditableCell.vue'
+
export default {
name: 'OEEAnalysisList',
components: {},
@@ -79,28 +191,38 @@
pageSize: 10000,
pageNo: 1
},
+ queryParams: {
+ equipmentType: [],
+ driveType: [],
+ deviceLevel: [],
+ deviceCategory: [],
+ deviceImportanceLevel: []
+ },
queryParamEquip: {},
queryParamPeople: {},
url: {
list: '/mdc/mdcOverallEquipmentEfficiency/list',
- initShiftList: '/mdc/mdcMdcShift/initShiftList',
- initShiftSubList: '/mdc/mdcShiftSub/initShiftSubList'
+ queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
},
- shiftList: [],
- shiftSubList: [],
columns: [
{
title: '搴忓彿',
dataIndex: '',
key: 'rowIndex',
- width: 70,
+ width: 60,
align: 'center',
customRender: function(t, r, index) {
return parseInt(index) + 1
}
},
{
- title: '璁惧缁熶竴缂栧彿',
+ title: '杞﹂棿',
+ align: 'center',
+ dataIndex: 'productionName',
+ width: 110
+ },
+ {
+ title: '璁惧缂栧彿',
align: 'center',
dataIndex: 'equipmentId',
width: 120
@@ -108,14 +230,15 @@
{
title: '璁惧鍚嶇О',
align: 'center',
- width: 200,
+ width: 120,
dataIndex: 'equipmentName'
},
{
title: '璁惧鍨嬪彿',
align: 'center',
- width: 110,
- dataIndex: 'equipmentModel'
+ width: 120,
+ dataIndex: 'equipmentModel',
+ scopedSlots: { customRender: 'equipmentModel' }
},
{
title: '鏃ユ湡',
@@ -127,32 +250,31 @@
title: '鐝',
align: 'center',
width: 100,
- dataIndex: 'shift',
- ellipsis: true
+ dataIndex: 'shift'
},
{
title: '姣忕彮灏忔椂',
dataIndex: 'shiftTimeCount',
align: 'center',
- width: 110
+ width: 100
},
{
title: '鍔犵彮鏃堕棿锛堝垎閽燂級',
dataIndex: 'overtime',
align: 'center',
- width: 110
+ width: 100
},
{
title: '瀹為檯鐝骇澶╂暟',
dataIndex: 'actualWorkDayCount',
align: 'center',
- width: 120
+ width: 100
},
{
title: '鏈堝害瀹為檯鐝骇鎬绘椂闂达紙鍒嗛挓锛�',
dataIndex: 'monthActualWorkDayTimeCount',
align: 'center',
- width: 110
+ width: 100
},
{
title: '闈炶鍒掑仠鏈烘崯澶憋紙鍒嗛挓锛夛紙涓�涓湀锛�',
@@ -179,7 +301,7 @@
title: '璁″垝绛変换鍔�',
dataIndex: 'plannedTaskDuration',
align: 'center',
- width: 110
+ width: 100
},
{
title: '妫�楠�',
@@ -208,45 +330,45 @@
title: '浼氳/鍩硅',
dataIndex: 'conferenceTrainingDuration',
align: 'center',
- width: 110
+ width: 100
},
{
title: '鍏朵粬浼戞伅绛�',
dataIndex: 'otherRestDuration',
align: 'center',
- width: 110
+ width: 100
}]
},
{
title: '璐熻嵎鏃堕棿锛堝皬鏃讹級',
dataIndex: 'loadTime',
align: 'center',
- width: 110
+ width: 100
},
{
title: '鏃堕棿寮�鍔ㄧ巼',
dataIndex: 'timeActuationRate',
align: 'center',
- width: 110,
+ width: 100,
customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
},
- {
- title: '鍔犲伐闆朵欢鏁帮紙浠讹級',
- dataIndex: 'processQuantity',
- align: 'center',
- width: 120
- },
- {
- title: '鏍囧噯鍔犲伐鏃堕棿锛堝垎閽燂級',
- dataIndex: 'standardProcessDuration',
- align: 'center',
- width: 120
- },
+ // {
+ // title: '鍔犲伐闆朵欢鏁帮紙浠讹級',
+ // dataIndex: 'processQuantity',
+ // align: 'center',
+ // width: 120
+ // },
+ // {
+ // title: '鏍囧噯鍔犲伐鏃堕棿锛堝垎閽燂級',
+ // dataIndex: 'standardProcessDuration',
+ // align: 'center',
+ // width: 120
+ // },
{
title: '鎬ц兘寮�鍔ㄧ巼',
dataIndex: 'performanceRate',
align: 'center',
- width: 110,
+ width: 100,
customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
},
{
@@ -266,27 +388,43 @@
title: '璁惧缁煎悎鏁堢巼',
dataIndex: 'overallEquipmentEfficiency',
align: 'center',
- width: 120,
+ width: 100,
customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
}
],
dataSource: [],
driveTypeList: [],
+ equipmentTypeList: [],
+ device_level_list: [],
+ device_category_list: [],
scrollY: 465,
- tableLoading: false
+ tableLoading: false,
+ toggleSearchStatus: false
}
},
props: { nodeTree: '', Type: '', nodePeople: '' },
created() {
+ const { isEquipment, productionId } = this.$route.params
+ if (productionId) {
+ console.log('productionId', productionId)
+ console.log('isEquipment', isEquipment)
+ if (!isEquipment) this.queryParam.parentId = productionId
+ else this.queryParam.equipmentId = productionId
+ }
+
this.queryParam.startTime = moment(this.dates[0]).format('YYYY-MM')
this.queryParam.endTime = moment(this.dates[1]).format('YYYY-MM')
this.queryParam.typeTree = '1'
this.loadData()
this.getDriveTypeByApi()
+ this.queryGroup()
+ this.initDictData('device_level')
+ this.initDictData('device_category')
+ this.initDictData('device_importance_level')
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.handleWindowResize()
+ // this.handleWindowResize()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
@@ -322,22 +460,31 @@
}
}
},
- filters: {
- numFilter(value) {
- if (value) {
- return parseFloat((value * 100).toFixed(2))
- } else {
- return '0'
- }
- }
- },
methods: {
+ initDictData(dictCode) {
+ // //浼樺厛浠庣紦瀛樹腑璇诲彇瀛楀吀閰嶇疆
+ if (getDictItemsFromCache(dictCode)) {
+ this[dictCode + '_list'] = getDictItemsFromCache(dictCode)
+ return
+ }
+ //鏍规嵁瀛楀吀Code, 鍒濆鍖栧瓧鍏告暟缁�
+ ajaxGetDictItems(dictCode, null).then((res) => {
+ if (res.success) {
+ this[dictCode + '_list'] = res.result
+ return
+ }
+ })
+ },
+ selectChange(value, key) {
+ this.queryParams[key] = value
+ },
dateParamChange(value) {
console.log('dateParamChangeValue', value)
this.dates = value
this.queryParam.startTime = moment(this.dates[0]).format('YYYY-MM')
this.queryParam.endTime = moment(this.dates[1]).format('YYYY-MM')
},
+
handleDateChange(value) {
console.log('handleDateChangeValue', value)
if (!value.length) {
@@ -345,31 +492,6 @@
delete this.queryParam.endTime
this.dates = []
}
- },
- initShiftList() {
- getAction(this.url.initShiftList).then((res) => {
- if (res.success) {
- this.shiftList = res.result
- }
- })
- },
-
- initShiftSubList(val) {
- //姣忔閲嶆柊閫夋嫨鐝埗鏃剁彮娆℃竻绌轰笖鏄剧ずplaceholder鍐呭
- this.queryParam.shiftSubId = undefined
- getAction(this.url.initShiftSubList, { shiftId: val }).then((res) => {
- if (res.success) {
- this.shiftSubList = res.result
- }
- })
- },
-
- initShiftSubListChange() {
- getAction(this.url.initShiftSubList, { shiftId: this.queryParam.shiftId }).then((res) => {
- if (res.success) {
- this.shiftSubList = res.result
- }
- })
},
exportExcel() {
@@ -392,14 +514,25 @@
this.queryParam.parentId = this.queryParamPeople.parentId
this.queryParam.equipmentId = ''
}
- this.queryParam.pageNo = 1
+ Object.keys(this.queryParams).forEach(item => {
+ this.queryParam[item] = this.queryParams[item].join()
+ // 姝ゅ涓轰繚璇佹帴鍙ｅ弬鏁颁笉澶氫綑锛屽彲鐪佺暐
+ if (this.queryParams[item].length === 0) delete this.queryParam[item]
+ })
this.loadData()
},
searchReset() {
this.queryParam = {
pageSize: 10000,
- pageNo: 1
+ pageNo: 1,
+ typeTree: 1
+ }
+ this.queryParams = {
+ equipmentType: [],
+ driveType: [],
+ deviceLevel: [],
+ deviceCategory: []
}
this.dates = []
this.loadData()
@@ -410,7 +543,25 @@
*/
getDriveTypeByApi() {
api.getDriveTypeApi().then((res) => {
- this.driveTypeList = res.result.map(item => item.value)
+ if (res.success) this.driveTypeList = res.result
+ })
+ },
+
+ queryGroup() {
+ getAction(this.url.queryEquipmentType).then(res => {
+ if (res.success) {
+ this.equipmentTypeList = res.result.map(item => {
+ return {
+ label: item.equipmentTypeName,
+ value: item.equipmentTypeName
+ }
+ })
+ } else {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: res.message
+ })
+ }
})
},
@@ -418,13 +569,14 @@
this.tableLoading = true
getAction(this.url.list, this.queryParam)
.then(res => {
- if (res.success) {
+ if (res.success && res.result) {
this.dataSource = res.result
this.tableLoading = false
}
})
.finally(() => {
this.tableLoading = false
+ this.handleWindowResize()
})
},
@@ -447,30 +599,41 @@
this.queryParam.pageSize = size
this.loadData()
},
- /**
- * 鑱旀兂杈撳叆妗嗙瓫閫夊姛鑳�
- * @param input 杈撳叆鐨勫唴瀹�
- * @param option 閰嶇疆
- * @returns {boolean} 鍒ゆ柇鏄惁绛涢��
- */
- filterOption(input, option) {
- return (
- option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
- )
+
+ onCellChange(key, dataIndex, value) {
+ console.log('瑙﹀彂onCellChange', key, dataIndex, value)
},
/**
* 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙�
*/
handleWindowResize() {
- const boxHeight = +window.getComputedStyle(document.getElementById('EfficiencyShift')).height.slice(0, -2)
- const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
- this.scrollY = boxHeight - tableHeadHeight
+ const devicePixelRatio = window.devicePixelRatio // 娴忚鍣ㄧ缉鏀炬瘮
+ console.log('devicePixelRatio', devicePixelRatio)
+ if (devicePixelRatio < 1) return // 缂╂斁姣斿皬浜�1鏃朵笉杩涜楂樺害閲嶆柊璁剧疆锛屽洜涓簊crollY鍙樺ぇ鍚庤〃鏍艰秴鍑洪儴鍒嗕細琚殣钘忓鑷存粴鍔ㄦ潯涓嶅彲瑙�
+ const clientHeight = document.body.clientHeight || document.documentElement.clientHeight// 娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴�
+ console.log('clientHeight', clientHeight)
+ const containerTopToClientTopHeight = document.getElementById('EfficiencyShift').getBoundingClientRect().top // 琛ㄦ牸瀹瑰櫒椤堕儴鍒版祻瑙堝櫒鍙鍖哄煙椤堕儴鐨勯棿璺�
+ console.log('containerTopToClientTopHeight', containerTopToClientTopHeight)
+ // const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2) // 琛ㄦ牸琛ㄥご楂樺害
+ const tableHeadHeight = document.querySelector('.ant-table-thead th').offsetHeight // 琛ㄦ牸琛ㄥご楂樺害
+ console.log('tableHeadHeight', tableHeadHeight)
+ // this.scrollY = clientHeight - containerTopToClientTopHeight - tableHeadHeight
+ const tableSuitableScrollY = clientHeight - containerTopToClientTopHeight - tableHeadHeight // 琛ㄦ牸鍨傜洿婊氬姩鏉″悎閫傞珮搴︼紙琛ㄦ牸姘村钩婊氬姩鏉″垰濂藉湪鍙鍖哄煙鏈�涓嬫柟锛�
+ // const tableSuitableScrollY = 600
+ console.log('tableSuitableScrollY', tableSuitableScrollY)
+ const tableContainerHeight = document.getElementById('EfficiencyShift').offsetHeight
+ console.log('tableContainerHeight', tableContainerHeight)
+ const tableMaxScrollY = tableContainerHeight - tableHeadHeight // 琛ㄦ牸鍨傜洿婊氬姩鏉℃渶澶ч珮搴︼紙鑻ヨ秴鍑哄垯姘村钩婊氬姩鏉¤閬尅锛�
+ console.log('tableMaxScrollY', tableMaxScrollY)
+ if (tableSuitableScrollY && tableSuitableScrollY < tableMaxScrollY) this.scrollY = tableSuitableScrollY
+ else this.scrollY = tableMaxScrollY
+ console.log('scrollY', this.scrollY)
}
}
}
</script>
-<style scoped>
+<style scoped lang="less">
.pagination {
display: flex;
justify-content: end;
@@ -513,4 +676,10 @@
}
}
+ /deep/ .ant-table-body {
+ &::-webkit-scrollbar {
+ height: 12px;
+ }
+ }
+
</style>
\ No newline at end of file
--
Gitblit v1.9.3