aucma-mes-ui/src/views/report/adverseRecordYearOnYear/index.vue

<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" ref="form">
      <el-form-item label="年度" prop="year">
        <el-date-picker
          v-model="form.year"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="选择年">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="产线" prop="productionLine">
        <el-select v-model="form.productionLine" placeholder="选择产线">
          <el-option :label="i.label" :value="i.value" v-for="i in option"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="工序"
        width="150">
      </el-table-column>
      <el-table-column :label="i.label" v-for="i in tableHead">
        <el-table-column
          v-for="item in i"
          :prop="i.value"
          :label="i.label"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {findProductLineList} from '@//api/base/productLine'
import {parseTime} from '@//utils/ruoyi'
import {
  boxTraceabilityDetailReport,
  boxTraceabilityReport,
} from '@//api/report/reportAPI'

export default {
  name: 'ProductOffLine',
  data() {
    return {
      tableData: [
        {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      form: {},
      option: [
        {
          value: '11',
          label: '一号线'
        },
        {
          value: '22',
          label: '二号线'
        },
      ],
      tableHead:[
        {
          label:'今年1月',
          children:[
            {
              label:'不良数',
              value:'column1_1',
            },
            {
              label:'总产量',
              value:'column1_2',
            },
            {
              label:'不良率',
              value:'column1_3',
            },
          ]
        },
        {
          label:'今年1月',
          children:[
            {
              label:'不良数',
              value:'column1_1',
            },
            {
              label:'总产量',
              value:'column1_2',
            },
            {
              label:'不良率',
              value:'column1_3',
            },
          ]
        },
        {
          label:'今年1月',
          children:[
            {
              label:'不良数',
              value:'column1_1',
            },
            {
              label:'总产量',
              value:'column1_2',
            },
            {
              label:'不良率',
              value:'column1_3',
            },
          ]
        },
        {
          label:'今年1月',
          children:[
            {
              label:'不良数',
              value:'column1_1',
            },
            {
              label:'总产量',
              value:'column1_2',
            },
            {
              label:'不良率',
              value:'column1_3',
            },
          ]
        },
        {
          label:'今年1月',
          children:[
            {
              label:'不良数',
              value:'column1_1',
            },
            {
              label:'总产量',
              value:'column1_2',
            },
            {
              label:'不良率',
              value:'column1_3',
            },
          ]
        },
        {
          label:'今年1月',
          children:[
            {
              label:'不良数',
              value:'column1_1',
            },
            {
              label:'总产量',
              value:'column1_2',
            },
            {
              label:'不良率',
              value:'column1_3',
            },
          ]
        },
        {
          label:'今年1月',
          children:[
            {
              label:'不良数',
              value:'column1_1',
            },
            {
              label:'总产量',
              value:'column1_2',
            },
            {
              label:'不良率',
              value:'column1_3',
            },
          ]
        },
        {
          label:'今年1月',
          children:[
            {
              label:'不良数',
              value:'column1_1',
            },
            {
              label:'总产量',
              value:'column1_2',
            },
            {
              label:'不良率',
              value:'column1_3',
            },
          ]
        },
      ]
    }
  },
  created() {
  },
  methods: {
    onSubmit(){
      console.log(this.form)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-table .cell{
  text-align: center !important;
}
</style>