From 120cf05bfd146a9bd1c011c9dd0244a57d0dea64 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 12 一月 2024 17:35:43 +0800
Subject: [PATCH] 1、优化代码:mdc全局页面表格区域内容若需滚动无需翻至最底部且部分页面竖向滚动会滚动整个页面调整为仅滚动表格区域,表格操作列右固定以满足不同分辨率下操作列始终显示不被遮挡 2、优化代码:mdc全局左侧树组件所在区域的滚动条将不再进行全部内容滚动,调整为仅只有树组件内容滚动 3、优化代码:报警分析、利用率走势分析以及利用率分段分析页面在浏览器窗口尺寸变化后重绘图表以适应页面新尺寸 4、设备综合效率分析页面取消分页器以便能一次性导出所有表格数据 5、mdc全局左侧树区域宽度增大,右侧数据展示区域宽度减小

---
 src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue |   57 +++++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue b/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue
index 63b3d4a..8505d58 100644
--- a/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue
+++ b/src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue
@@ -60,9 +60,9 @@
     </div>
 
     <!-- table鍖哄煙-begin -->
-    <div id="DeviceList">
+    <div id="DeviceList" style="flex: 1;overflow: hidden">
       <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"
-               :scroll="{x:1000}" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
+               :scroll="{x:'max-content',y:scrollY}" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                @change="handleTableChange">
 
@@ -107,8 +107,6 @@
   } from '@/api/manage'
   import mdcPassRateModal from './mdcPassRateModal'
   import mdcPassRateEdit from './mdcPassRateEdit'
-  // import DeviceRepairModelAdd from './DeviceRepairModelAdd'
-  // import DeviceRepairModelEdit from './DeviceRepairModelEdit'
   import '@/components/table2excel/table2excel'
   import {
     JeecgListMixin
@@ -117,17 +115,14 @@
   import JEllipsis from '@/components/jeecg/JEllipsis'
   import Tooltip from 'ant-design-vue/es/tooltip'
   import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
-  import ACol from 'ant-design-vue/es/grid/Col'
+
   export default {
     name: 'mdcPassRateList',
     mixins: [JeecgListMixin],
     components: {
-      ACol,
       Tooltip,
       mdcPassRateModal,
       mdcPassRateEdit,
-      // DeviceRepairModelAdd,
-      // DeviceRepairModelEdit,
       JDictSelectTag,
       JInput,
       JDate,
@@ -147,16 +142,19 @@
         queryParamEquip:{},
         queryParamPeople:{},
         dataStartsoucre:[],
+        scrollY:465,
         columns: [
           {
             title: '璁惧缂栧彿',
             align: 'center',
-            dataIndex: 'equipmentId'
+            dataIndex: 'equipmentId',
+            width:200
           },
           {
             title: '璁惧鍚嶇О',
             align: 'center',
             dataIndex: 'equipmentName',
+            width:200
             // defaultSortOrder:'descend',
             // sorter: (a, b) => {return a.equipmentName>b.equipmentName?1:-1}
           },
@@ -164,6 +162,7 @@
             title: '鏃ユ湡',
             align: 'center',
             dataIndex: 'efficientDate',
+            width:200
             // scopedSlots:{customRender:'startTime'},
             // customRender:(text,row,index) => {
             //   return moment(text).format("YYYY-MM-DD HH:mm:ss")
@@ -172,30 +171,35 @@
           {
             title: '鍔犲伐鏁伴噺',
             align: 'center',
-            dataIndex: 'processQuantity'
+            dataIndex: 'processQuantity',
+            width:150
           },
           {
             title: '涓嶅悎鏍兼暟閲�',
             align: 'center',
-            dataIndex: 'unqualifiedQuantity'
+            dataIndex: 'unqualifiedQuantity',
+            width:150
           },
           {
             title: '鍚堟牸鐜�',
             align: 'center',
             dataIndex: 'passRate',
-            scopedSlots:{customRender:'discount1'}
+            scopedSlots:{customRender:'discount1'},
+            width:150
 
           },
           {
             title: '澶囨敞',
             align: 'center',
-            dataIndex: 'remark'
+            dataIndex: 'remark',
+            width:200
           },
           {
             title: '鎿嶄綔',
             dataIndex: 'action',
             scopedSlots: {customRender: 'action'},
             align: "center",
+            fixed:'right',
             width: 150
           }
         ],
@@ -685,9 +689,25 @@
           exclude_inputs: true
         });
       },
+
+      /**
+       * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙�
+       */
+      handleWindowResize(){
+        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
+        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
+        this.scrollY = boxHeight - tableHeadHeight - 50
+      }
     },
     created() {
       this.queryParam.typeTree = "1"
+    },
+    mounted(){
+      window.addEventListener('resize',this.handleWindowResize)
+      this.handleWindowResize()
+    },
+    beforeDestroy(){
+      window.removeEventListener('resize',this.handleWindowResize)
     }
   }
 </script>
@@ -695,34 +715,35 @@
 <style lang="less" scoped>
   @import '~@assets/less/common.less';
 
+  .device_list{
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
   @media screen and (min-width: 1920px){
     .device_list{
       height: 811px!important;
-      overflow: scroll;
     }
   }
   @media screen and (min-width: 1680px) and (max-width: 1920px){
     .device_list{
       height: 811px!important;
-      overflow: scroll;
     }
   }
   @media screen and (min-width: 1400px) and (max-width: 1680px){
     .device_list{
       height: 663px!important;
-      overflow: scroll;
     }
   }
   @media screen and (min-width: 1280px) and (max-width: 1400px){
     .device_list{
       height: 564px!important;
-      overflow: scroll;
     }
   }
   @media screen and (max-width: 1280px){
     .device_list{
       height: 564px!important;
-      overflow: scroll;
     }
   }
 </style>

--
Gitblit v1.9.3