1、mdc菜单下除特殊要求外，页面表格最少条数由10条调整为30条，每页最多条数区间由[10,20,30]调整为[30,50,100] 2、OEE基础...

zhuzhuanzhuan

2024-03-18 51b9e548b0e533e8a415ce141808f2bb747b381e

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

@@ -1,61 +1,78 @@
<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"
                    @change="handleDateChange"
                  />
                </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="4" :sm="4" :xs="4">
              <a-form-item label="驱动类型">
                <a-auto-complete
                  v-model="queryParam.driveType"
                  :data-source="driveTypeList"
                  placeholder="请选择驱动类型"
                  :filter-option="filterOption"
                  :allowClear="true"
                />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="4" :xs="4">
              <a-form-item label="设备级别">
                <j-dict-select-tag placeholder="请选择设备级别" dictCode="device_level" v-model="queryParam.deviceLevel"
                                   allow-clear/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="4" :xs="4">
              <a-form-item label="设备种类">
                <j-dict-select-tag placeholder="请选择设备种类" dictCode="device_category" v-model="queryParam.deviceCategory"
                                   allow-clear/>
              </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>
            <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>
    </div>

      <div id="EfficiencyShift" style="flex:1;overflow: hidden">
        <a-table :columns="columns" rowKey="id" :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 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>

@@ -126,7 +143,7 @@
            align: 'center',
            width: 100,
            dataIndex: 'shift',
            ellipsis: true,
            ellipsis: true
          },
          {
            title: '每班小时',
@@ -270,7 +287,8 @@
        ],
        dataSource: [],
        driveTypeList: [],
        scrollY:465,
        scrollY: 465,
        tableLoading: false
      }
    },
    props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -281,12 +299,12 @@
      this.loadData()
      this.getDriveTypeByApi()
    },
    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) {
@@ -330,14 +348,14 @@
    },
    methods: {
      dateParamChange(value) {
        console.log('dateParamChangeValue',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')
      },
      handleDateChange(value){
        console.log('handleDateChangeValue',value)
        if(!value.length) {
      handleDateChange(value) {
        console.log('handleDateChangeValue', value)
        if (!value.length) {
          delete this.queryParam.startTime
          delete this.queryParam.endTime
          this.dates = []
@@ -395,7 +413,7 @@

      searchReset() {
        this.queryParam = {
          pageSize: 20,
          pageSize: 10000,
          pageNo: 1
        }
        this.dates = []
@@ -412,11 +430,17 @@
      },

      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
          })
      },

      /**
@@ -453,9 +477,9 @@
      /**
       * 当浏览器可视窗口尺寸发生改变时触发
       */
      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)
      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
      }
    }
@@ -468,35 +492,39 @@
    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: 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: 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: 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 (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 (max-width: 1280px) {
    .device_list {
      height: 564px !important;
    }
  }