tft-fe/src/views/qualityManagement/processFullInspection/fullInspectionDetail.vue

<template>
  <div class="full-inspection-detail">
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <div class="plot-total">
      <defect-scatter-plot-total
        ref="fullInspectionDetailPlot"
        :detailObj="detailObj"
        class="plot-total-box"
      />
    </div>
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-props="tableProps"
      :table-data="tableData"
      :max-height="tableH"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="80"
        label="操作"
        fixed="right"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination :limit="listQuery.size" :total="total" />
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import {
  processCompleteInspetionListType,
  processCompleteInspetionDetails,
  pageIIS
} from '@/api/qualityManagement'
import defectScatterPlotTotal from './../components/defectScatterPlotTotal.vue'
const tableProps = [
  {
    prop: 'virtualcode',
    label: '缺陷编号'
  },
  {
    prop: 'filetype',
    label: 'Y轴位置(mm)'
  },
  {
    prop: 'glassLength',
    label: 'X轴位置(mm)'
  },
  {
    prop: 'glassWidth',
    label: '缺陷尺寸等级'
  },
  {
    prop: 'glassHeight',
    label: '缺陷类型'
  },
  {
    prop: 'grade',
    label: '长度(mm)'
  },
  {
    prop: 'line',
    label: '宽度(mm)'
  }
]
const tableBtn = [
  {
    type: 'detail',
    btnName: '查看图片'
  }
]
export default {
  name: 'FullInspectionDetail',
  components: { defectScatterPlotTotal },
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '缺陷类型',
          selectOptions: [],
          param: 'defectType',
          labelField: 'defectType',
          valueField: 'defectType',
          defaultSelect: '',
          filterable: true,
          width: 200
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'separate'
        },
        {
          type: 'button',
          btnName: '返回',
          name: 'export',
          color: 'primary',
          plain: true
        }
      ],
      detailObj: {},
      tableProps,
      tableData: [],
      tableH: tableHeight(330),
      tableBtn,
      total: 0,
      listQuery: {
        current: 1,
        size: 20,
        glassId: ''
      }
    }
  },
  mounted() {
    const { virtualcode, filetype, time } = this.$route.query
    this.listQuery.glassId = virtualcode
    this.getDetail(virtualcode, filetype, time)
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(330)
    })
    this.getListType()
  },
  methods: {
    getDetail(virtualcode, filetype, time) {
      processCompleteInspetionDetails({
        virtualcode,
        time,
        defectType: decodeURIComponent(filetype)
      }).then((res) => {
        console.log(res)
        this.detailObj = res.data
        this.$nextTick(() => {
          this.$refs.fullInspectionDetailPlot.init()
        })
      })
    },
    getListType() {
      processCompleteInspetionListType({
        size: 500,
        current: 1
      }).then((res) => {
        console.log(res)
        this.formConfig[0].selectOptions = res.data
      })
    },
    getList() {
      pageIIS({ ...this.listQuery }).then((res) => {
        console.log(res)
      })
    },
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.listQuery.defectType = val.defectType
          this.listQuery.current = 1
          this.getList()
          break
        default:
          this.$router.push({
            path: '/qualityManagement/processFullInspection/fullInspection'
          })
      }
    },
    handleClick(val) {
      console.log(val)
      alert('图片详情')
    }
  }
}
</script>
<style lang="scss" scoped>
.full-inspection-detail {
  margin: 0 16px;
  padding: 16px;
  border-radius: 8px;
  height: calc(100vh - 205px);
  background-color: #fff;
  .plot-total {
    position: relative;
    height: 115px;
    .plot-total-box {
      position: absolute;
      width: 100%;
      top: 25px;
      left: 0px;
    }
  }
}
</style>