From 4ef0342708910d02453fdcfae2148eadbf6d7004 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期三, 05 六月 2024 11:34:21 +0800
Subject: [PATCH] 1、设备综合效率分析页面表格列属性ellipsis开启后内容若超出盒子宽度则出现与表头错位现象，而无法实现ellipsis开启后内容超出单元格则省略功能，现采取增加列宽度方式且关闭ellipsis属性功能方法解决问题 2、设备综合效率分析页面调整计算表格垂直滚动条方法以试图解决项目服务器上无法正常显示水平滚动条问题
---
vue.config.js | 2 +-
src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue | 41 ++++++++++++++++++++++++++++-------------
2 files changed, 29 insertions(+), 14 deletions(-)
diff --git a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
index c6c5f62..acb9a04 100644
--- a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
+++ b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue
@@ -101,7 +101,7 @@
</div>
</div>
- <div id="EfficiencyShift" style="flex:1;overflow: hidden">
+ <div id="EfficiencyShift" style="flex:1;overflow: hidden;height: inherit">
<a-table :columns="columns" rowKey="id" :dataSource="dataSource.records" :loading="tableLoading"
:pagination="false" :scroll="{x:'max-content',y:scrollY}" bordered></a-table>
</div>
@@ -190,7 +190,7 @@
title: '鐝',
align: 'center',
width: 300,
- dataIndex: 'shift',
+ dataIndex: 'shift'
},
{
title: '姣忕彮灏忔椂',
@@ -362,7 +362,7 @@
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.handleWindowResize()
+ // this.handleWindowResize()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
@@ -514,6 +514,7 @@
})
.finally(() => {
this.tableLoading = false
+ this.handleWindowResize()
})
},
@@ -542,16 +543,31 @@
*/
handleWindowResize() {
const devicePixelRatio = window.devicePixelRatio // 娴忚鍣ㄧ缉鏀炬瘮
+ console.log('devicePixelRatio', devicePixelRatio)
if (devicePixelRatio < 1) return // 缂╂斁姣斿皬浜�1鏃朵笉杩涜楂樺害閲嶆柊璁剧疆锛屽洜涓簊crollY鍙樺ぇ鍚庤〃鏍艰秴鍑洪儴鍒嗕細琚殣钘忓鑷存粴鍔ㄦ潯涓嶅彲瑙�
- const clientHeight = document.body.clientHeight // 娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴�
+ const clientHeight = document.body.clientHeight || document.documentElement.clientHeight// 娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴�
+ console.log('clientHeight', 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 // 琛ㄦ牸鍨傜洿婊氬姩鏉￠珮搴�
+ 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;
@@ -594,11 +610,10 @@
}
}
-
- /deep/ .ant-table-row-cell-break-word{
- overflow: hidden;
- text-overflow: ellipsis;
- -webkit-line-clamp: 1;
- white-space: initial;
+ /deep/ .ant-table-body {
+ &::-webkit-scrollbar {
+ height: 12px;
+ }
}
+
</style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index d8001c9..243647b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -27,7 +27,7 @@
configureWebpack: config => {
// 鐢熶骇鐜鍙栨秷 console.log
if (process.env.NODE_ENV === 'production') {
- config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
+ config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false
}
},
chainWebpack: (config) => {
--
Gitblit v1.9.3