tft-fe/src/views/productionScheduling/productionData.vue

<template>
  <el-row :gutter="10" class="main-box">
    <el-col :span="4">
      <div class="left-box">
        <el-tree
          :data="treeData"
          node-key="name"
          :props="defaultProps"
          default-expand-all
          :highlight-current="true"
          @node-click="clickDevice"
          ref="deviceTree"
        >
        </el-tree>
      </div>
    </el-col>
    <el-col :span="20">
      <div class="right-box">
        <search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
        <base-table
          :page="listQuery.current"
          :limit="listQuery.size"
          :table-props="tableProps"
          :table-data="tableData"
          :max-height="tableH"
        />
        <pagination :limit="listQuery.size" :total="total" />
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { tableHeight, timeFormatter } from '@/utils/index'
import { getTreeData } from '@/api/app'
import { proDataPage, proDataExport } from '@/api/productionScheduling'
import moment from 'moment'
const tableProps = [
  {
    prop: 'name',
    label: '单元/设备名称',
    width: 300
  },
  {
    prop: 'startTime',
    label: '开始时间',
    minWidth: 160,
    filter: timeFormatter
  },
  {
    prop: 'endTime',
    label: '结束时间',
    minWidth: 160,
    filter: timeFormatter
  },
  {
    prop: 'glassInNum',
    label: '投入数量'
  },
  {
    prop: 'glassOutNum',
    label: '输出数量'
  },
  {
    prop: 'glassMissNum',
    label: '损失数量'
  }
]
export default {
  name: 'ProductionData',
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      formConfig: [
        {
          type: 'datePicker',
          label: '开始时间',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-ddTHH:mm:ss',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'timeVal',
          defaultSelect: [],
          width: 350
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'separate'
        },
        {
          type: 'button',
          btnName: '导出',
          name: 'export',
          color: 'primary',
          plain: true
        }
      ],
      tableProps,
      tableData: [],
      tableH: tableHeight(275),
      total: 0,
      listQuery: {
        current: 1,
        size: 20,
        unitName: '',
        eqName: ''
      },
      centervisible: false,
      addOrEditTitle: ''
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(275)
    })
    this.formConfig[0].defaultSelect = [
      moment().format('yyyy-MM-DD') + 'T00:00:00',
      moment().format('yyyy-MM-DD') + 'T23:59:59'
    ]
    this.listQuery.startTime = moment().format('yyyy-MM-DD') + 'T00:00:00'
    this.listQuery.endTime = moment().format('yyyy-MM-DD') + 'T23:59:59'
    this.getTree()
  },
  methods: {
    getTree() {
      getTreeData().then((res) => {
        this.treeData = res.data
        this.listQuery.unitName = res.data[0].children[0].name
        setTimeout(() => {
          this.$refs.deviceTree.setCurrentKey(this.listQuery.unitName)
        }, 100)
        this.getList()
      })
    },
    getList() {
      proDataPage({ ...this.listQuery }).then((res) => {
        console.log(res)
        if (res.code === 0 && res.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        } else {
          this.tableData = []
          this.total = 0
        }
      })
    },
    clickDevice(val) {
      if (!val.children) {
        // 设备
        this.listQuery.eqName = val.name
        this.listQuery.unitName = ''
      } else if (val.children && val.parent) {
        this.listQuery.eqName = ''
        this.listQuery.unitName = val.name
      }
      this.getList()
    },
    buttonClick(val) {
      console.log(val)
      switch (val.btnName) {
        case 'search':
          this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
          this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
          this.getList()
          break
        default:
          proDataExport({ ...this.listQuery }).then((response) => {
            console.log(response)
            let fileName = ''
            const contentDisposition = response.headers['content-disposition']
            if (contentDisposition) {
              fileName = decodeURIComponent(
                contentDisposition.slice(
                  contentDisposition.indexOf('filename=') + 9
                )
              )
            }
            const blob = new Blob([response.data])
            const reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = (e) => {
              const a = document.createElement('a')
              a.download = fileName
              a.href = e.target.result
              document.body.appendChild(a)
              a.click()
              document.body.removeChild(a)
            }
          })
      }
    },
    successSubmit(res) {
      alert(res)
      this.handleCancel()
    }
  }
}
</script>
<style lang="scss" scoped>
.main-box {
  width: 100%;
  padding: 8px 6px 0 16px;
  .left-box,
  .right-box {
    border-radius: 8px;
    background-color: #fff;
    height: calc(100vh - 148px);
  }
  .left-box {
    padding: 16px 10px 0;
    overflow-y: auto;
  }
  .right-box {
    padding: 16px;
  }
}
</style>