yudao-dev/src/views/report/ingredientReport/day.vue

<!--
 * @Author: zhp
 * @Date: 2024-04-18 14:08:46
 * @LastEditTime: 2024-04-23 15:23:05
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div class="app-container">
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
    <!-- <el-table show-summary :header-cell-style="{
      background: '#F2F4F9',
      color: '#606266'
    }" class="baseTable" :max-height="tableH" id="exportTable" :data="tableData" style="width: 100%"
      :span-method="objectSpanMethod">
      <el-table-column v-for="item in tableProps" :prop="item.prop" :label="item.label" align="center">
      </el-table-column>
    </el-table> -->
    <!-- <el-table border style="margin-top: 50px;" :data="transData">
      <el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center">
        <template slot-scope="scope">
          {{scope.row[index]}}
        </template>
      </el-table-column>
    </el-table> -->

    <el-table class="baseTable" :span-method="objectSpanMethod" :data="tableData" style="width: 100%">
      <el-table-column label="原料样式" align="right" width="150">
        <el-table-column prop="className" label="时间" width="120">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="putType" label="" width="180">
      </el-table-column>
      <!-- <el-table-column prop label="参考标准及评价方法">
        <el-table-column prop="activityName"></el-table-column>
        <el-table-column prop="message"></el-table-column>
      </el-table-column> -->
      <el-table-column v-for="(item,index) in codeList " :prop="item" :label="item">
        <!-- <template slot-scope="scope">
          <el-col :span="12">
            {{ codeList[index] }}
          </el-col>
          <el-col :span="12">

          </el-col>
          <el-row>
            <el-col :span="24">
              {{ scope.row.sj2 }}
            </el-col>
          </el-row>
        </template> -->
      </el-table-column>
    </el-table>
    <!-- <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
      @pagination="getDataList" /> -->
    <!-- <base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="addOrUpdateVisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			width="30%"> -->
    <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" /> -->
    <!-- </base-dialog> -->
  </div>
</template>

<script>
// import AddOrUpdate from './add-or-updata';
// import basicPage from '../../../core/mixins/basic-page';
// import { parseTime } from '../../../core/mixins/code-filter';
import {
  getIngredientData
} from '@/api/report/qcReport';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
import FileSaver from 'file-saver'
// import { getList, } from "@/api/base/qualityScrapType";
const headers = [
  // {
  //   prop: 'createTime',
  //   label: '添加时间',
  //   filter: parseTime
  // },
  {
    prop: 'classType',
    label: '时间'
  },
  {
    prop: 'equipmentName',
    label: ''
  },
  {
    prop: 'num',
    label: '片数'
  },
  {
    prop: 'area',
    label: '面积'
  },
  {
    prop: 'countNum',
    label: '托数',
    // filter: (val) => val == false ? '不合格' : '合格',
  },
  {
    prop: 'size',
    label: '规格',
    // filter: (val) => val == 1 ? 'A' : val == 2 ? 'B' : 'C',
  },
  // {
  //   prop: 'checkerName',
  //   label: '检测人员'
  // },
  // {
  //   prop: 'checkTime',
  //   label: '检测时间',
  //   filter: parseTime
  // },
];

export default {
  mixins: [ tableHeightMixin],
  data() {
    return {
      urlOptions: {
        getDataListURL: getIngredientData,
        // deleteURL: deleteQualityHotMaterial,
        // exportURL: exportFactoryExcel,
      },
      codeList: ['sj1', 'sj2', 'sj3', 'sj4', 'sj5', 'sj7', 'sj8', 'sj10', 'sj11', 'sj12', 'sj13', 'sj14' ],
      tableData: [],
      listQuery: {
        startTime: undefined,
        endTime:undefined
      },
      formConfig: [
        {
          type: 'datePicker',
          label: '时间段',
          dateType: 'daterange',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: "timestamp",
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'checkTime',
          defaultSelect: [Date.now() - 24 * 60 * 60 - 1000, Date.now()],
          width: 250
        },
        {
          type:'button',
          btnName: '查询',
          name: 'search',
          color: 'primary',
        },
        {
          type:'button',
          btnName: '导出',
          name: 'export',
          color: 'success',
          plain: true
        },
      ],
    };
  },
  components: {
    // AddOrUpdate,
  },
  created() {
  },
  mounted() {
    // this.formConfig[1].defaultSelect[]
    this.listQuery.startTime = this.formConfig[0].defaultSelect[0]
    this.listQuery.endTime = this.formConfig[0].defaultSelect[1]
    // this.formConfig[0].defaultSelect[0] = Date.now()-24*60*60-1000
    this.getDataList()
    // this.getSpanArr(this.tableData)
    // this.getDict();
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let spanOneArr = [], concatOne = 0;
      this.tableData.map((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //第一列需合并相同内容的判断条件
          if (item.classType === this.tableData[index - 1].classType) {
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          };
        }
      });

      if (columnIndex === 0) {
        const _row = spanOneArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 1 ) {
        if (rowIndex === 0 || rowIndex === 2 || rowIndex === 4 || rowIndex === 6 || rowIndex === 8 || rowIndex === 10) {
          return {
            rowspan: 2,
            colspan: 1
          }
      }
      }
      if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6)  {
        if (rowIndex === 1 || rowIndex === 3 || rowIndex === 5 || rowIndex === 7 || rowIndex === 9 || rowIndex === 11) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
      }
    },
    handleExport() {
      // 处理查询参数
      console.log(this.$refs);
      var xlsxParam = { raw: true };
      /* 从表生成工作簿对象 */
      import('xlsx').then(excel => {
        var wb = excel.utils.table_to_book(
          document.querySelector("#exportTable"),
          xlsxParam
        );
        /* 获取二进制字符串作为输出 */
        var wbout = excel.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        try {
          FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "原片各线堆垛表.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        //do something......
      })

    },
    // otherMethods(val) {
    //   if (val.type === 'detail') {
    //     this.addOrUpdateVisible = true;
    //     this.addOrEditTitle = "详情";
    //     this.$nextTick(() => {
    //       this.$refs.addOrUpdate.init(val.data.id, true);
    //     });
    //   }
    // },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.listQuery.startTime = '1713197388000';
      this.listQuery.endTime = '1713254961000';
      this.urlOptions.getDataListURL(this.listQuery).then(res => {
        // console.log(res)
        // console.log(res.data)
        let arr = [
          {
            classType: 1,
            className:'白班(8:00-20:00)',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: '投入数量'
          },
          {
            classType: 1,
            className: '白班(8:00-20:00)',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: ''
          },
          {
            classType: 1,
            className: '白班(8:00-20:00)',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: '投入次数'
          },
          {
            classType: 1,
            className: '白班(8:00-20:00)',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: ''
          },
          {
            classType: 2,
            className: '夜班(20:00-8:00)',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: '投入数量',
          },
          {
            classType: 2,
            className: '夜班(8:00-20:00)',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: ''
          },
          {
            classType:2,
            className: '夜班(20:00-8:00)',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: '投入次数',
          },
          {
            classType: 2,
            className: '夜班(8:00-20:00)',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: ''
          },
          {
            classType: 3,
            className: '全天',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: '投入数量',
          },
          {
            classType: 3,
            className: '全天',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: ''
          },
          {
            classType: 3,
            className: '全天',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: '投入次数',
          },
          {
            classType: 3,
            className: '全天',
            'sj1': null,
            'sj2': null,
            'sj3': null,
            'sj4': null,
            'sj5': null,
            'sj7': null,
            'sj8': null,
            'sj10': null,
            'sj11': null,
            'sj12': null,
            'sj13': null,
            'sj14': null,
            putType: ''
          },
        ]
        res.data.forEach((ele) => {
          this.codeList.forEach((item) => {
            if (ele.classType === 1 && ele.code == item) {
              // console.log(arr[0][item])
              arr[0][item] = ele.putNum
              arr[2][item] = ele.useNum
            } else if (ele.classType === 2 && ele.code == item) {
              arr[4][item] = ele.putNum
              arr[6][item] = ele.useNum
            } else if (ele.classType === 3 && ele.code == item) {
              arr[8][item] = ele.putNum
              arr[10][item] = ele.useNum
            }
          })
        })
        // console.log(arr)
        this.tableData = arr
        this.dataListLoading = false;
      });
    },
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.listQuery.startTime = val.checkTime ? val.checkTime[0] : undefined;
          this.listQuery.endTime = val.checkTime ? val.checkTime[1] : undefined;
          this.getDataList();
          break;
        case 'export':
          this.handleExport();
          break;
        default:
          console.log(val);
      }
    },
  },
};
</script>
<style scoped>
::v-deep.baseTable .el-table__body tr.current-row>td.el-table__cell {
  background-color: #EAF1FC;
}

::v-deep .baseTable .el-table .el-table__cell {
  padding: 0;
  height: 35px;
}
::v-deep.el-table thead.is-group th {
  background: none;
}

::v-deep.el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none;
}

::v-deep.el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 75px;
  /*这里需要自己调整，根据td的宽度和高度*/
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.3;
  display: block;
  transform: rotate(-53deg);
  /*这里需要自己调整，根据线的位置*/
  transform-origin: top;
}

::v-deep.el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 75px;
  /*这里需要自己调整，根据td的宽度和高度*/
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.3;
  display: block;
  transform: rotate(-54deg);
  /*这里需要自己调整，根据线的位置*/
  transform-origin: bottom;
}
</style>