From d55fef9c7205b412cadc99c2bb2dea9329b7a2c9 Mon Sep 17 00:00:00 2001 From: zhaowei <zhaowei> Date: 星期三, 31 七月 2024 09:39:19 +0800 Subject: [PATCH] 1、公司级与分厂级看板调整OEE图表样式 2、各看板中的饼图图表增加随分辨率变化而改变自身半径功能,从而更清晰的展示内容标题指示箭头 3、OEE综合效率分析页面新增车间字段 --- src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue | 71 ++++++++++++++++++++++++++--------- 1 files changed, 52 insertions(+), 19 deletions(-) diff --git a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue index c6c5f62..1fc1271 100644 --- a/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue +++ b/src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue @@ -101,9 +101,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--> @@ -129,9 +134,11 @@ import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api' import api from '@api/mdc' + import EditableCell from './EditableCell.vue' + export default { name: 'OEEAnalysisList', - components: {}, + components: { EditableCell }, data() { return { dates: [moment().subtract('month', 1), moment().subtract('month', 1)], @@ -163,6 +170,12 @@ } }, { + title: '杞﹂棿', + align: 'center', + dataIndex: 'productionName', + width: 200 + }, + { title: '璁惧缁熶竴缂栧彿', align: 'center', dataIndex: 'equipmentId', @@ -177,8 +190,9 @@ { title: '璁惧鍨嬪彿', align: 'center', - width: 110, - dataIndex: 'equipmentModel' + width: 200, + dataIndex: 'equipmentModel', + scopedSlots: { customRender: 'equipmentModel' } }, { title: '鏃ユ湡', @@ -190,7 +204,7 @@ title: '鐝', align: 'center', width: 300, - dataIndex: 'shift', + dataIndex: 'shift' }, { title: '姣忕彮灏忔椂', @@ -362,7 +376,7 @@ }, mounted() { window.addEventListener('resize', this.handleWindowResize) - this.handleWindowResize() + // this.handleWindowResize() }, beforeDestroy() { window.removeEventListener('resize', this.handleWindowResize) @@ -507,13 +521,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() }) }, @@ -537,21 +552,40 @@ this.loadData() }, + onCellChange(key, dataIndex, value) { + console.log('瑙﹀彂onCellChange', key, dataIndex, value) + }, + /** * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙� */ 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 +628,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 -- Gitblit v1.9.3