1、优化代码：mdc全局页面表格区域内容若需滚动无需翻至最底部且部分页面竖向滚动会滚动整个页面调整为仅滚动表格区域，表格操作列右固定以满足不同分辨率下...

zhuzhuanzhuan

2024-01-12 120cf05bfd146a9bd1c011c9dd0244a57d0dea64

 src/views/mdc/base/modules/OEEAnalysis/OEEAnalysisList.vue

@@ -1,6 +1,5 @@
<template>
  <div style="width: 100%;">
    <div :bordered="false">
  <div class="device_list">
      <!-- 查询区域 -->
      <div class="seach-content">
        <div class="table-page-search-wrapper">
@@ -16,7 +15,7 @@
                  />
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="5" :xs="5">
              <a-col :md="7" :sm="7" :xs="7">
                <a-form-item label="时间">
                  <a-range-picker
                    :placeholder="['开始时间', '结束时间']"
@@ -27,7 +26,7 @@
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8" :xs="8">
              <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>
@@ -40,27 +39,22 @@
        </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: 3200, y: false }">
          </a-table>
        </div>
      <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>
      </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 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>

@@ -77,15 +71,9 @@
    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: {},
@@ -107,21 +95,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: 200,
            dataIndex: 'equipmentName'
            // fixed: 'left'
          },
          {
            title: '设备型号',
@@ -283,17 +268,24 @@
          }
        ],
        dataSource: [],
        driveTypeList: []
        driveTypeList: [],
        scrollY:465,
      }
    },
    props: { nodeTree: '', Type: '', nodePeople: '' },
    created() {
      // this.initShiftList()
      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) {
@@ -456,112 +448,56 @@
        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
      }
    }
  }
</script>
<style scoped>
  .table2 {
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .pagination {
    display: flex;
    justify-content: end;
    margin: 20px 0;
  }

  @media screen and (min-width: 1920px) {
    #EfficiencyShift {
      height: 670px !important;
      overflow: scroll;
  .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) {
    #EfficiencyShift {
      height: 670px !important;
      overflow: scroll;
  @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) {
    #EfficiencyShift {
      height: 522px !important;
      overflow: scroll;
  @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) {
    #EfficiencyShift {
      height: 414px !important;
      overflow: scroll;
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .device_list{
      height: 564px!important;
    }
  }

  @media screen and (max-width: 1280px) {
    #EfficiencyShift {
      height: 414px !important;
      overflow: scroll;
  @media screen and (max-width: 1280px){
    .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>