tft-fe/src/views/deviceManagement/performanceAnalysis/analysisOfPallet.vue

<template>
  <div>
    <el-row :gutter="10" class="main-box">
      <el-col :span="18">
        <div class="left-box">
          <search-bar
            :formConfigs="formConfig"
            ref="searchBarForm"
            @headBtnClick="buttonClick"
          />
          <base-table
            ref="palletTable1"
            id="palletTable"
            :page="listQuery.current"
            :limit="listQuery.size"
            :table-props="tableProps"
            :table-data="tableData"
            :max-height="tableH"
            highlight-current-row
            @current-change="selectPallet"
          />
          <pagination
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            :total="total"
            @pagination="getList()"
          />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="right-box">
          <el-row>
            <el-col class="rigth-top">
              <span class="title">托盘对应产品等级数据</span>
              <base-table
                :table-props="tableProps2"
                :table-data="tableData2"
                :max-height="tableH2"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col class="right-bottom">
              <span class="title">托盘对应产品等级分析</span>
              <pallet-level-chart :chartMsg="chartMsg" />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import palletLevelChart from './../components/palletLevelChart.vue'
import {
  palletIndicatorAnalysisPage,
  palletIndicatorGetType
} from '@/api/deviceManagement'
import { timeFormatter } from '@/utils'
const tableProps = [
  {
    prop: 'proLineName',
    label: '产线',
    minWidth: 80
  },
  {
    prop: 'code',
    label: '工单编号',
    minWidth: 120
  },
  {
    prop: 'glassId',
    label: '玻璃ID',
    minWidth: 120
  },
  {
    prop: 'rackId',
    label: '成品架ID',
    minWidth: 120
  },
  {
    prop: 'loadTime',
    label: '产品上片时间',
    filter: timeFormatter,
    minWidth: 160
  },
  {
    prop: 'unloadTime',
    label: '产品下片时间',
    filter: timeFormatter,
    minWidth: 160
  },
  {
    prop: 'grade',
    label: '玻璃等级',
    minWidth: 80
  },
  {
    prop: 'palletId',
    label: '面磨托盘ID',
    minWidth: 120
  },
  {
    prop: 'glassLength',
    label: '玻璃长度'
  },
  {
    prop: 'glassWidth',
    label: '玻璃宽度'
  },
  {
    prop: 'glassHeight',
    label: '玻璃厚度'
  }
]
const tableProps2 = [
  {
    prop: 'productType',
    label: '产品分类'
  },
  {
    prop: 'num',
    label: '数量'
  },
  {
    prop: 'percentage',
    label: '占比'
  }
]
export default {
  name: 'analysisOfPallet',
  components: { palletLevelChart },
  data() {
    return {
      formConfig: [
        {
          type: 'input',
          label: '托盘ID',
          placeholder: '托盘ID',
          param: 'palletId'
        },
        {
          type: 'datePicker',
          label: '产品上片时间',
          dateType: 'datetime',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '产品上片时间',
          param: 'testTime',
          width: 200
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        }
      ],
      listQuery: {
        current: 1,
        size: 20,
        palletId: ''
      },
      total: 0,
      tableProps,
      tableData: [],
      tableH: tableHeight(330),
      listQuery2: {
        current: 1,
        size: 500
      },
      tableProps2,
      tableData2: [],
      tableH2: tableHeight(360) / 2,
      chartMsg: {}
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(330)
      this.tableH2 = tableHeight(360) / 2
    })
    this.getList()
  },
  methods: {
    getList() {
      palletIndicatorAnalysisPage({ ...this.listQuery }).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.setCurrent()
        let palletId = this.tableData[0].palletId
        this.getLevel(palletId)
      })
    },
    setCurrent() {
      let _this = this
      setTimeout(function () {
        _this.$refs.palletTable1.setCurrent('palletTable', 0)
      }, 500)
    },
    getLevel() {
      // 需要修改ID
      palletIndicatorGetType({ id: 1 }).then((res) => {
        this.tableData2 = []
        if (res.code === 0) {
          const data = res.data
          this.chartMsg = data
          console.log(this.chartMsg)
          let obj = {}
          obj.productType = '良品'
          obj.num = data.okNum
          obj.percentage = data.okPercentage
          this.tableData2.push(obj)
          let obj2 = {}
          obj2.productType = '待再加工'
          obj2.num = data.reprocessNum
          obj2.percentage = data.rePercentage
          this.tableData2.push(obj2)
          let obj3 = {}
          obj3.productType = '废品'
          obj3.num = data.wasteNum
          obj3.percentage = data.noPercentage
          this.tableData2.push(obj3)
        }
      })
    },
    buttonClick(val) {
      if (val.btnName === 'search') {
        this.listQuery.palletId = val.palletId
        this.getList()
      }
    },
    selectPallet(newVal) {
      let palletId = newVal.palletId
      this.getLevel(palletId)
    }
  }
}
</script>
<style lang="scss" scoped>
.main-box {
  width: 100%;
  padding: 0px 6px 0 16px;
  .left-box {
    height: calc(100vh - 204px);
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
  }
  .rigth-top {
    background-color: #fff;
    margin-bottom: 10px;
    height: calc((100vh - 214px) / 2);
    border-radius: 8px;
    padding: 16px;
  }
  .right-bottom {
    background-color: #fff;
    height: calc((100vh - 214px) / 2);
    border-radius: 8px;
    padding: 16px;
  }
  .title {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 22px;
  }
  .title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #0b58ff;
    border-radius: 1px;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>