倍率报表页面调整为与TEEP页面样式功能及样式一致

zhaowei

9 小时以前 b8e2c776ec2cdd248fbef401f740e36153435ca0

倍率报表页面调整为与TEEP页面样式功能及样式一致

 src/views/mdc/base/modules/MagnificationReport/MagnificationReportList.vue

@@ -2,7 +2,7 @@
  <div class="device_list">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-form layout="inline" @keyup.enter.native="loadData">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="设备编号">
@@ -11,14 +11,15 @@
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="日期">
              <a-range-picker value-format="YYYY-MM-DD" v-model="queryParam.dates" @change="dateParamChange"
                              :disabled-date="disabledDate"/>
              <a-range-picker value-format="YYYY-MM-DD" v-model="dates" @change="dateParamChange"
                              :allow-clear="false" :disabled-date="disabledDate"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="loadData" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
              <a-button type="primary" icon="download" @click="handleExportXls('倍率报表')">导出</a-button>
            </a-space>
          </a-col>
        </a-row>
@@ -27,45 +28,106 @@
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('倍率报表')">导出</a-button>
    </div>
    <!--<div class="table-operator">-->
    <!--<a-button type="primary" icon="download" @click="handleExportXls('倍率报表')">导出</a-button>-->
    <!--</div>-->

    <!-- table区域-begin -->
    <div id="DeviceList" style="flex: 1;overflow: hidden">
      <a-table :scroll="{x:'max-content',y:scrollY}" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
               :pagination="ipagination" :loading="loading" @change="handleTableChange"/>
    </div>
    <a-spin :spinning="spinning">
      <div id="Efficiency" class="container" style="margin-top: 20px;">
        <div class="table2">
          <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap"
                 v-if="dataList.length>0">
            <thead>
            <tr class="thead fixed equipname">
              <th class="thgu dong1 name" rowspan="2"
                  style="min-width: 50px; max-width: 50px;width: 50px;height: 66px">公司
              </th>
              <th class="thgu dong2 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">车间</th>
              <th class="thgu dong3 name" rowspan="2" style="min-width: 50px; max-width: 50px;width: 50px;">工段</th>
              <th class="thgu dong4 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">设备编号
              </th>
              <th class="thgu dong5 name" rowspan="2" style="min-width: 162px; max-width: 162px;width: 162px;">设备名称
              </th>
              <th class="thgu dong6 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">设备类型
              </th>
              <template v-for="tableHead in tableHeads">
                <th class="timeth" colspan="2">{{tableHead}}</th>
              </template>
            </tr>
            <tr class="thead notfixed gudingth">
              <template v-for="tableHead in tableHeads">
                <th>主轴倍率平均值</th>
                <th>进给倍率平均值</th>
              </template>
            </tr>
            </thead>
            <tbody>

            <tr class="mathData" v-for="(item, index) in dataList">
              <template v-if="item.level1!=='合计'&&item.level1!=='平均值'">
                <td class="tdgu kaitou" :rowspan="item.level1span"
                    :class="{hidden: item.level1dis,noExl:item.level1dis}" v-show="!item.level1dis">
                  <div class="wenzi">
                    {{item.level1}}
                  </div>
                </td>
                <td class="tdgu1 kaitou" :rowspan="item.level2span"
                    :class="{hidden: item.level2dis,noExl:item.level2dis}" v-show="!item.level2dis">
                  <div class="wenzi">
                    {{item.level2}}
                  </div>
                </td>
                <td class="tdgu2 kaitou wenzi" :rowspan="item.level3span"
                    :class="{hidden: item.level3dis,noExl:item.level3dis}" v-show="!item.level3dis">
                  <div class="wenzi">
                    {{item.level3}}
                  </div>
                </td>
                <td class="tdgu3  kaitou">{{item.equipmentId}}</td>
                <td class="tdgu4 kaitou" style="min-width: 162px; max-width: 162px;width: 162px;">
                  {{item.equipmentName}}
                </td>
                <td class="tdgu5 kaitou">{{item.equipmentType}}</td>
              </template>

              <!--合计与平均值区域-->
              <template v-else>
                <td colspan="6" class="tdgu kaitou">{{item.level1}}</td>
              </template>

              <template v-for="(tableHead, index) in item.mdcBeilvVoList">
                <td>{{tableHead.spindlebeilv | numFilter}}</td>
                <td>{{tableHead.feedbeilv | numFilter}}</td>
              </template>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
  import moment from 'moment'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import $ from 'jquery'
  import '@/components/table2excel/table2excel'
  import { putAction, getAction } from '@/api/manage'

  export default {
    name: 'MagnificationReportList',
    mixins: [JeecgListMixin],
    components: {},
    props: { nodeTree: '', Type: '', nodePeople: '' },
    data() {
      return {
        disableMixinCreated: true,
        tableHeads: [],
        dataList: [],
        spinning: false,
        /* 分页参数 */
        ipagination: {
          current: 1,
          pageSize: 30,
          pageSizeOptions: ['30', '50', '100'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        queryParam: {
          dates: [moment().subtract(1, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')]
        },
        queryParam: {},
        dates: [moment().subtract(1, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')],
        // 表头
        columns: [
          {
@@ -101,10 +163,17 @@
            width: 300
          }
        ],
        scrollY: 465,
        url: {
          list: '/mdc/magnification/list',
          exportXlsUrl: '/mdc/magnification/exportXls'
          list: '/mdc/magnification/beilvList'
        }
      }
    },
    filters: {
      numFilter(value) {
        if (value) {
          return parseFloat((value * 100).toFixed(2))
        } else {
          return '0'
        }
      }
    },
@@ -122,7 +191,7 @@
            this.queryParam.parentId = val.key
            this.queryParam.equipmentId = ''
          }
          this.searchQuery()
          this.loadData()
        }
      },
      nodePeople(val) {
@@ -134,14 +203,14 @@
            this.queryParam.parentId = val.key
            this.queryParam.equipmentId = ''
          }
          this.searchQuery()
          this.loadData()
        }
      }
    },
    created() {
      this.queryParam.startTime = moment(this.queryParam.dates[0]).format('YYYY-MM-DD')
      this.queryParam.endTime = moment(this.queryParam.dates[1]).format('YYYY-MM-DD')
      this.loadData(1)
      this.queryParam.startTime = moment(this.dates[0]).format('YYYY-MM-DD')
      this.queryParam.endTime = moment(this.dates[1]).format('YYYY-MM-DD')
      this.loadData()
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
@@ -151,6 +220,133 @@
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      loadData() {
        this.tableHeads = []
        this.dataList = []
        this.spinning = true
        getAction(this.url.list, this.queryParam).then(res => {
          if (res.success) {
            this.tableHeads = res.result.dates
            this.dataList = res.result.mdcMagnificationVos
            if (res.result.mdcMagnificationVos && !res.result.mdcMagnificationVos.length) {
              this.$notification.info({
                message: '消息',
                description: '暂无该类型数据'
              })
            }
            this.checkSameData(this.dataList)
            this.checkSameData1(this.dataList)
            this.checkSameData2(this.dataList)
            this.combineCell()
          }
        }).finally(() => {
          this.spinning = false
        })
      },

      checkSameData(dataList) {
        let cache = {}  //存储的是键是kclx 的值，值是kclx 在indeces中数组的下标
        let indices = []  //数组中每一个值是一个数组，数组中的每一个元素是原数组中相同kclx的下标
        dataList.map((item, index) => {
          let level1 = item.level1
          let _index = cache[level1]
          if (_index !== undefined) {
            indices[_index].push(index)
          } else {
            cache[level1] = indices.length
            indices.push([index])
          }
        })
        let result = []
        indices.map((item) => {
          item.map((index) => {
            result.push(dataList[index])
          })
        })
        this.dataList = result
      },

      checkSameData1(dataList) {
        let cache = {}  //存储的是键是kclx 的值，值是kclx 在indeces中数组的下标
        let indices = []  //数组中每一个值是一个数组，数组中的每一个元素是原数组中相同kclx的下标
        dataList.map((item, index) => {
          let level2 = item.level2
          let _index = cache[level2]
          if (_index !== undefined) {
            indices[_index].push(index)
          } else {
            cache[level2] = indices.length
            indices.push([index])
          }
        })
        let result = []
        indices.map((item) => {
          item.map((index) => {
            result.push(dataList[index])
          })
        })
        this.dataList = result
      },

      checkSameData2(dataList) {
        let cache = {}  //存储的是键是kclx 的值，值是kclx 在indeces中数组的下标
        let indices = []  //数组中每一个值是一个数组，数组中的每一个元素是原数组中相同kclx的下标
        dataList.map((item, index) => {
          let level3 = item.level3
          let _index = cache[level3]
          if (_index !== undefined) {
            indices[_index].push(index)
          } else {
            cache[level3] = indices.length
            indices.push([index])
          }
        })
        let result = []
        indices.map((item) => {
          item.map((index) => {
            result.push(dataList[index])
          })
        })
        this.dataList = result
      },

      // 合并
      combineCell() {
        console.log(this.dataList)
        let list = this.dataList
        for (let field in list[0]) {
          var k = 0
          while (k < list.length) {
            list[k][field + 'span'] = 1
            list[k][field + 'dis'] = false
            for (var i = k + 1; i <= list.length - 1; i++) {
              if (list[k][field] == list[i][field] && list[k][field] != '') {
                list[k][field + 'span']++
                list[k][field + 'dis'] = false
                list[i][field + 'span'] = 1
                list[i][field + 'dis'] = true
              } else {
                break
              }
            }
            k = i
          }
        }
        return list
      },

      handleExportXls() {
        $('#Efficiency').table2excel({
          exclude: '.noExl',
          name: 'Excel Document Name',
          filename: '倍率报表',
          exclude_img: true,
          fileext: '.xls',
          exclude_links: true,
          exclude_inputs: false
        })
      },

      dateParamChange(dateArray) {
        this.queryParam.startTime = dateArray[0]
        this.queryParam.endTime = dateArray[1]
@@ -161,53 +357,154 @@
        return current > moment().subtract(1, 'day').endOf('day')
      },

      searchReset() {
        this.dates = [moment().subtract(1, 'day').startOf('day'), moment().subtract(1, 'day').endOf('day')]
        this.queryParam = {
          startTime: moment(this.dates[0]).format('YYYY-MM-DD'),
          endTime: moment(this.dates[1]).format('YYYY-MM-DD')
        }
        this.loadData()
      },

      /**
       * 当浏览器可视窗口尺寸发生改变时触发
       */
      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 - 100
        const tableContainer = document.getElementById('Efficiency') // 表格容器
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight // 浏览器可视区域高度
        const containerTopToClientTopHeight = tableContainer.getBoundingClientRect().top // 表格容器顶部到浏览器可视区域顶部的间距
        tableContainer.style.height = (clientHeight - containerTopToClientTopHeight - 32) + 'px'
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  .table2 {
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .device_list {
    display: flex;
    flex-direction: column;
  .table2 thead tr th:first-child,
  .table tbody tr .tdgu {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .table tbody tr .wenzi {
    transform: rotate(360deg);
    writing-mode: vertical-lr;
    letter-spacing: 2px;
  }

  .table tbody tr .kaitou {
    z-index: 1;
    background-color: white;
  }

  .table tbody tr .tdgu1 {
    position: sticky;
    left: 50px;
    z-index: 2;
  }

  .table tbody tr .tdgu2 {
    position: sticky;
    left: 100px;
    z-index: 2;
  }

  .table tbody tr .tdgu3 {
    position: sticky;
    left: 150px;
    z-index: 2;
  }

  .table tbody tr .tdgu4 {
    position: sticky;
    left: 300px;
    z-index: 2;
  }

  .table tbody tr .tdgu5 {
    position: sticky;
    left: 462px;
    z-index: 2;
  }

  .table2 thead tr .timeth,
  .table2 thead tr .thgu {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  .table2 thead .gudingth th {
    position: sticky;
    top: 32px;
    z-index: 2;
  }

  .table2 thead .equipname .name {
    z-index: 3;
  }

  .table2 thead .equipname .dong1 {
    z-index: 4;
    left: 0;
  }

  .table2 thead .equipname .dong2 {
    z-index: 5;
    left: 50px;
  }

  .table2 thead .equipname .dong3 {
    z-index: 5;
    left: 100px;
  }

  .table2 thead .equipname .dong4 {
    z-index: 5;
    left: 150px;
  }

  .table2 thead .equipname .dong5 {
    z-index: 5;
    left: 300px;
  }

  .table2 thead .equipname .dong6 {
    z-index: 5;
    left: 462px;
  }

  #Efficiency {
    overflow: hidden;
  }

  @media screen and (min-width: 1920px) {
    .device_list {
      height: 811px !important;
    }
  .dataContent {
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ccc;
    width: 100%;
    text-align: center;
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .device_list {
      height: 811px !important;
    }
  .dataContent .thead th {
    background-color: #fafafa;
    text-align: center;
    height: 30px;
    padding: 5px;
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .device_list {
      height: 663px !important;
    }
  .dataContent .mathData td {
    padding: 10px;
  }

  @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;
    }
  td {
    vertical-align: middle;
  }
</style>