From f303499ea96dc9402f470d9c64aadd5945a7b638 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期一, 03 六月 2024 11:17:28 +0800
Subject: [PATCH] OEE报表页面表格列属性ellipsis开启后内容若超出盒子宽度则出现与表头错位现象，而无法实现ellipsis开启后内容超出单元格则省略功能，现采取增加列宽度方式且关闭ellipsis属性功能方法解决问题
---
src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue | 419 +++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 260 insertions(+), 159 deletions(-)
diff --git a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
index e9fec71..c6c5f62 100644
--- a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
+++ b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
@@ -1,60 +1,123 @@
<template>
<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="5" :sm="5" :xs="5">
- <a-form-item label="椹卞姩绫诲瀷">
- <a-auto-complete
- v-model="queryParam.driveType"
- :data-source="driveTypeList"
- placeholder="璇烽�夋嫨椹卞姩绫诲瀷"
- :filter-option="filterOption"
- />
- </a-form-item>
- </a-col>
- <a-col :md="7" :sm="7" :xs="7">
- <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="2" :sm="2" :xs="2">
- <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 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-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="5" :sm="5" :xs="5">
+ <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="4" :sm="4" :xs="4">
+ <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.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="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>
- </div>
- </div>
+ </a-row>
- <div id="EfficiencyShift" style="flex:1;overflow: hidden">
- <a-table :columns="columns" rowKey="equipmentId" :dataSource="dataSource.records" :pagination="false" :scroll="{x:'max-content',y:scrollY}" bordered></a-table>
+ <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>
+ </a-form>
+
</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>
@@ -76,15 +139,18 @@
pageSize: 10000,
pageNo: 1
},
+ queryParams: {
+ equipmentType: [],
+ driveType: [],
+ deviceLevel: [],
+ deviceCategory: []
+ },
queryParamEquip: {},
queryParamPeople: {},
url: {
list: '/mdc/mdcOverallEquipmentEfficiency/list',
- initShiftList: '/mdc/mdcMdcShift/initShiftList',
- initShiftSubList: '/mdc/mdcShiftSub/initShiftSubList'
+ queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
},
- shiftList: [],
- shiftSubList: [],
columns: [
{
title: '搴忓彿',
@@ -123,9 +189,8 @@
{
title: '鐝',
align: 'center',
- width: 100,
+ width: 300,
dataIndex: 'shift',
- ellipsis: true,
},
{
title: '姣忕彮灏忔椂',
@@ -269,23 +334,38 @@
],
dataSource: [],
driveTypeList: [],
- scrollY:465,
+ equipmentTypeList: [],
+ device_level_list: [],
+ device_category_list: [],
+ scrollY: 465,
+ tableLoading: 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')
},
- mounted(){
- window.addEventListener('resize',this.handleWindowResize)
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
this.handleWindowResize()
},
- beforeDestroy(){
- window.removeEventListener('resize',this.handleWindowResize)
+ beforeDestroy() {
+ window.removeEventListener('resize', this.handleWindowResize)
},
watch: {
Type(valmath) {
@@ -318,46 +398,38 @@
}
}
},
- 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')
},
- 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
- }
- })
+ handleDateChange(value) {
+ console.log('handleDateChangeValue', value)
+ if (!value.length) {
+ delete this.queryParam.startTime
+ delete this.queryParam.endTime
+ this.dates = []
+ }
},
exportExcel() {
@@ -373,30 +445,32 @@
},
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()
+ 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: 20,
- pageNo: 1
+ pageSize: 10000,
+ pageNo: 1,
+ typeTree: 1
+ }
+ this.queryParams = {
+ equipmentType: [],
+ driveType: [],
+ deviceLevel: [],
+ deviceCategory: []
}
this.dates = []
this.loadData()
@@ -407,16 +481,40 @@
*/
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
+ })
+ }
})
},
loadData() {
- getAction(this.url.list, this.queryParam).then(res => {
- if (res.success) {
- this.dataSource = res.result
- }
- })
+ 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
+ })
},
/**
@@ -438,25 +536,17 @@
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 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
+ 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 // 琛ㄦ牸鍨傜洿婊氬姩鏉￠珮搴�
}
}
}
@@ -468,36 +558,47 @@
margin: 20px 0;
}
- .device_list{
+ .device_list {
overflow: hidden;
display: flex;
flex-direction: column;
}
- @media screen and (min-width: 1920px){
- .device_list{
- height: 811px!important;
- }
- }
- @media screen and (min-width: 1680px) and (max-width: 1920px){
- .device_list{
- height: 811px!important;
- }
- }
- @media screen and (min-width: 1400px) and (max-width: 1680px){
- .device_list{
- height: 663px!important;
- }
- }
- @media screen and (min-width: 1280px) and (max-width: 1400px){
- .device_list{
- height: 564px!important;
- }
- }
- @media screen and (max-width: 1280px){
- .device_list{
- height: 564px!important;
+ @media screen and (min-width: 1920px) {
+ .device_list {
+ height: 811px !important;
}
}
+ @media screen and (min-width: 1680px) and (max-width: 1920px) {
+ .device_list {
+ height: 811px !important;
+ }
+ }
+
+ @media screen and (min-width: 1400px) and (max-width: 1680px) {
+ .device_list {
+ height: 663px !important;
+ }
+ }
+
+ @media screen and (min-width: 1280px) and (max-width: 1400px) {
+ .device_list {
+ height: 564px !important;
+ }
+ }
+
+ @media screen and (max-width: 1280px) {
+ .device_list {
+ height: 564px !important;
+ }
+ }
+
+
+ /deep/ .ant-table-row-cell-break-word{
+ overflow: hidden;
+ text-overflow: ellipsis;
+ -webkit-line-clamp: 1;
+ white-space: initial;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3