From e081f232138b318338ffca07e7c9fcd941ac20b4 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 12 四月 2024 09:54:17 +0800
Subject: [PATCH] 1、设备综合效率分析以及设备加工工件报表页面表格高度设置为页面进入时即可拖动水平滚动条的高度 2、首页 （1）OEE标题增加月份展示，利用率等效率标题增加日期展示 （2）公司及车间级看板单击OEE车间图表跳转至设备综合效率分析页面并根据唯一编号筛选页面对应数据 （3）工段级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据 （4）调整折线图数据展示维度，通过当前工段下各个设备前7天的利用率、开动率和开机率轮播展示
---
src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue | 368 +++++++++++++++++++++++++---------------------------
1 files changed, 179 insertions(+), 189 deletions(-)
diff --git a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
index 136a05d..a7f309b 100644
--- a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
+++ b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
@@ -1,77 +1,78 @@
<template>
- <div style="width: 100%;">
- <div :bordered="false">
- <!-- 鏌ヨ鍖哄煙 -->
- <div class="seach-content">
- <div class="table-page-search-wrapper">
- <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-range-picker
- :placeholder="['寮�濮嬫椂闂�', '缁撴潫鏃堕棿']"
- format="YYYY-MM"
- :value="dates"
- :mode="['month', 'month']"
- @panelChange="dateParamChange"
- />
- </a-form-item>
- </a-col>
- <!--<a-col :md="5" :sm="5" :xs="5">-->
- <!--<a-form-item label="鐝埗">-->
- <!--<a-select v-model="queryParam.shiftId" placeholder="璇烽�夋嫨鐝埗"-->
- <!--@change="initShiftSubList" :allowClear="allowClear">-->
- <!--<a-select-option v-for="(em,index) in shiftList" :key="index" :value="em.value">-->
- <!--{{ em.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 v-model="queryParam.shiftSubId" placeholder="璇烽�夋嫨鐝" @change="initShiftSubListChange"-->
- <!--:allowClear="allowClearSu">-->
- <!--<a-select-option v-for="(em,index) in shiftSubList" :key="index" :value="em.value">-->
- <!--{{ em.label }}-->
- <!--</a-select-option>-->
- <!--</a-select>-->
- <!--</a-form-item>-->
- <!--</a-col>-->
+ <div class="device_list">
+ <!-- 鏌ヨ鍖哄煙 -->
+ <div class="seach-content">
+ <div class="table-page-search-wrapper">
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
+ <a-row :gutter="24">
+ <a-col :md="4" :sm="4" :xs="4">
+ <a-form-item label="椹卞姩绫诲瀷">
+ <a-auto-complete
+ v-model="queryParam.driveType"
+ :data-source="driveTypeList"
+ placeholder="璇烽�夋嫨椹卞姩绫诲瀷"
+ :filter-option="filterOption"
+ :allowClear="true"
+ />
+ </a-form-item>
+ </a-col>
+ <a-col :md="4" :sm="4" :xs="4">
+ <a-form-item label="璁惧绾у埆">
+ <j-dict-select-tag placeholder="璇烽�夋嫨璁惧绾у埆" dictCode="device_level" v-model="queryParam.deviceLevel"
+ allow-clear/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="4" :sm="4" :xs="4">
+ <a-form-item label="璁惧绉嶇被">
+ <j-dict-select-tag placeholder="璇烽�夋嫨璁惧绉嶇被" dictCode="device_category" v-model="queryParam.deviceCategory"
+ allow-clear/>
+ </a-form-item>
+ </a-col>
+ <a-col :md="5" :sm="5" :xs="5">
+ <a-form-item label="鏃堕棿">
+ <a-range-picker
+ :placeholder="['寮�濮嬫椂闂�', '缁撴潫鏃堕棿']"
+ format="YYYY-MM"
+ :value="dates"
+ :mode="['month', 'month']"
+ @panelChange="dateParamChange"
+ @change="handleDateChange"
+ />
+ </a-form-item>
+ </a-col>
+ <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>
+ </a-form>
- <a-col :md="8" :sm="8" :xs="8">
- <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-space>
- </a-col>
- </a-row>
- </a-form>
-
- </div>
- </div>
-
- <div class="container" id="EfficiencyShift" style="margin-top: 20px;">
- <div class="table2">
- <a-table :columns="columns" :dataSource="dataSource.records" :pagination="false" bordered
- :scroll="{ x: 3000, y: false }">
- </a-table>
- </div>
- </div>
- <div class="pagination">
- <a-pagination
- :total=dataSource.total
- :show-total="(total, range) => `${range[0]}-${range[1]} 鍏� ${total} 鏉"
- :page-size="+queryParam.pageSize"
- :default-current="1"
- :current=+queryParam.pageNo
- show-size-changer
- :pageSizeOptions="['20','30','40','50']"
- @change="handlePageNoChange"
- @showSizeChange="handlePageSizeChange"
- />
</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>
+ <!--<div class="pagination">-->
+ <!--<a-pagination-->
+ <!--:total=dataSource.total-->
+ <!--:show-total="(total, range) => `${range[0]}-${range[1]} 鍏� ${total} 鏉"-->
+ <!--:page-size="+queryParam.pageSize"-->
+ <!--:default-current="1"-->
+ <!--:current=+queryParam.pageNo-->
+ <!--show-size-changer-->
+ <!--:pageSizeOptions="['20','30','40','50']"-->
+ <!--@change="handlePageNoChange"-->
+ <!--@showSizeChange="handlePageSizeChange"-->
+ <!--/>-->
+ <!--</div>-->
</div>
</template>
@@ -81,21 +82,16 @@
import $ from 'jquery'
import '@/components/table2excel/table2excel'
import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
+ import api from '@api/mdc'
export default {
name: 'OEEAnalysisList',
components: {},
data() {
return {
- typeTree: '',
- typeParent: 1,
- typeEquipment: 1,
- allowClear: true,
- allowClearSu: true,
dates: [moment().subtract('month', 1), moment().subtract('month', 1)],
- identifying: [],
queryParam: {
- pageSize: 20,
+ pageSize: 10000,
pageNo: 1
},
queryParamEquip: {},
@@ -117,21 +113,18 @@
customRender: function(t, r, index) {
return parseInt(index) + 1
}
- // fixed: 'left'
},
{
title: '璁惧缁熶竴缂栧彿',
align: 'center',
dataIndex: 'equipmentId',
width: 120
- // fixed: 'left'
},
{
title: '璁惧鍚嶇О',
align: 'center',
- width: 150,
+ width: 200,
dataIndex: 'equipmentName'
- // fixed: 'left'
},
{
title: '璁惧鍨嬪彿',
@@ -148,8 +141,9 @@
{
title: '鐝',
align: 'center',
- width: 80,
- dataIndex: 'shift'
+ width: 100,
+ dataIndex: 'shift',
+ ellipsis: true
},
{
title: '姣忕彮灏忔椂',
@@ -249,7 +243,7 @@
dataIndex: 'timeActuationRate',
align: 'center',
width: 110,
- customRender: text => text != 0 ? text * 100 + '%' : 0
+ customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
},
{
title: '鍔犲伐闆朵欢鏁帮紙浠讹級',
@@ -268,7 +262,7 @@
dataIndex: 'performanceRate',
align: 'center',
width: 110,
- customRender: text => text != 0 ? text * 100 + '%' : 0
+ customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
},
{
title: '搴熷搧鏁�',
@@ -281,26 +275,44 @@
dataIndex: 'passRate',
align: 'center',
width: 100,
- customRender: text => text != 0 ? text * 100 + '%' : 0
+ customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
},
{
title: '璁惧缁煎悎鏁堢巼',
dataIndex: 'overallEquipmentEfficiency',
align: 'center',
width: 120,
- customRender: text => text != 0 ? text * 100 + '%' : 0
+ customRender: text => text != 0 ? parseFloat((text * 100).toFixed(2)) + '%' : 0
}
],
- dataSource: []
+ dataSource: [],
+ driveTypeList: [],
+ scrollY: 465,
+ tableLoading: false
}
},
props: { nodeTree: '', Type: '', nodePeople: '' },
created() {
- this.initShiftList()
+ 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()
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.handleWindowResize()
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.handleWindowResize)
},
watch: {
Type(valmath) {
@@ -344,11 +356,19 @@
},
methods: {
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) {
+ delete this.queryParam.startTime
+ delete this.queryParam.endTime
+ this.dates = []
+ }
+ },
initShiftList() {
getAction(this.url.initShiftList).then((res) => {
if (res.success) {
@@ -388,41 +408,49 @@
},
searchQuery() {
- if (this.dates != '') {
- if (this.queryParam.typeTree == '1') {
- this.queryParam.parentId = this.queryParamEquip.parentId
- this.queryParam.equipmentId = this.queryParamEquip.equipmentId
- } else {
- this.queryParam.parentId = this.queryParamPeople.parentId
- this.queryParam.equipmentId = ''
- }
- this.queryParam.pageNo = 1
- this.loadData()
+ if (this.queryParam.typeTree == '1') {
+ this.queryParam.parentId = this.queryParamEquip.parentId
+ this.queryParam.equipmentId = this.queryParamEquip.equipmentId
} else {
- // this.$message.warning("璇烽�夋嫨鏃堕棿")
- this.$notification.warning({
- message: '娑堟伅',
- description: '璇烽�夋嫨鏃堕棿'
- })
+ this.queryParam.parentId = this.queryParamPeople.parentId
+ this.queryParam.equipmentId = ''
}
- // this.onClearSelected()
+
+
+ this.queryParam.pageNo = 1
+ this.loadData()
},
searchReset() {
this.queryParam = {
- pageSize: 20,
+ pageSize: 10000,
pageNo: 1
}
this.dates = []
this.loadData()
},
- loadData() {
- getAction(this.url.list, this.queryParam).then(res => {
- if (res.success) {
- this.dataSource = res.result
- }
+ /**
+ * 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷
+ */
+ getDriveTypeByApi() {
+ api.getDriveTypeApi().then((res) => {
+ this.driveTypeList = res.result.map(item => item.value)
})
+ },
+
+ loadData() {
+ this.tableLoading = true
+ getAction(this.url.list, this.queryParam)
+ .then(res => {
+ if (res.success) {
+ this.dataSource = res.result
+ this.tableLoading = false
+ }
+ })
+ .finally(() => {
+ this.tableLoading = false
+ })
},
/**
@@ -443,112 +471,74 @@
handlePageSizeChange(current, size) {
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
+ )
+ },
+
+ /**
+ * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙�
+ */
+ handleWindowResize() {
+ const devicePixelRatio = window.devicePixelRatio // 娴忚鍣ㄧ缉鏀炬瘮
+ if (devicePixelRatio < 1) return // 缂╂斁姣斿皬浜�1鏃朵笉杩涜楂樺害閲嶆柊璁剧疆锛屽洜涓簊crollY鍙樺ぇ鍚庤〃鏍艰秴鍑洪儴鍒嗕細琚殣钘忓鑷存粴鍔ㄦ潯涓嶅彲瑙�
+ const clientHeight = document.body.clientHeight // 娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴�
+ const containerTopToClientTopHeight = document.getElementById('EfficiencyShift').getBoundingClientRect().top // 琛ㄦ牸瀹瑰櫒椤堕儴鍒版祻瑙堝櫒鍙鍖哄煙椤堕儴鐨勯棿璺�
+ const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2) // 琛ㄦ牸琛ㄥご楂樺害
+ this.scrollY = clientHeight - containerTopToClientTopHeight - tableHeadHeight // 琛ㄦ牸鍨傜洿婊氬姩鏉￠珮搴�
}
}
}
</script>
<style scoped>
- .table2 {
- width: 100%;
- height: 100%;
- overflow: auto;
- }
-
.pagination {
display: flex;
justify-content: end;
margin: 20px 0;
}
+ .device_list {
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+
@media screen and (min-width: 1920px) {
- #EfficiencyShift {
- height: 670px !important;
- overflow: scroll;
+ .device_list {
+ height: 811px !important;
}
}
@media screen and (min-width: 1680px) and (max-width: 1920px) {
- #EfficiencyShift {
- height: 670px !important;
- overflow: scroll;
+ .device_list {
+ height: 811px !important;
}
}
@media screen and (min-width: 1400px) and (max-width: 1680px) {
- #EfficiencyShift {
- height: 522px !important;
- overflow: scroll;
+ .device_list {
+ height: 663px !important;
}
}
@media screen and (min-width: 1280px) and (max-width: 1400px) {
- #EfficiencyShift {
- height: 414px !important;
- overflow: scroll;
+ .device_list {
+ height: 564px !important;
}
}
@media screen and (max-width: 1280px) {
- #EfficiencyShift {
- height: 414px !important;
- overflow: scroll;
+ .device_list {
+ height: 564px !important;
}
- }
-
- .identifyingclass {
- width: 55px;
- height: 15px;
- display: inline-block
- }
-
- .dataContent {
- white-space: nowrap;
- /*margin: 0;*/
- /*border: none;*/
- border-collapse: separate;
- border-spacing: 0;
- /*table-layout: fixed;*/
- border: 1px solid #ccc;
- /*border: 1px solid #ccc;*/
- width: 100%;
- /*height: 100%;*/
- /*overflow: hidden;*/
- /*overflow-y: auto;*/
- text-align: center;
- }
-
- .dataContent .fixed th {
- width: 50px;
- }
-
- .dataContent .thead th {
- background-color: #fafafa;
- text-align: center;
- height: 30px;
- padding: 5px;
- }
-
- .dataContent .notfixed th {
- width: auto;
- }
-
- /*.dataContent tr td {*/
- /*height: 35px*/
- /*}*/
-
- .dataContent .mathData td {
- padding: 10px;
- /*display: none;*/
- }
-
- .dataContent .mathData .td {
- /*background-color: #ff9bd2;*/
- display: inline-block;
- padding: 10px;
- }
-
- .dataContent .mathData .tdd {
- /*display: none;*/
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3