zs_aucma-mes-ui/src/views/report/weldLeakRate/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"
          placeholder="选择年">
        </el-date-picker>
      </el-form-item>
      <!--      <el-form-item label="周期" prop="period">-->
      <!--        <el-select v-model="form.period" 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="getList">查询</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="productLineName"
        label="产线"
        width="150">
      </el-table-column>
      <el-table-column
        v-for="i in 52"
        :label="'第'+(i)+'周'"
        width="120">
        <template slot-scope="scope">
          {{
            ((tableData.find(v => v.productLineName === scope.row.productLineName).children.find(r => r.WEEK_NUMBER === i) || {}).REPAIR_RATE) || '0'
          }}%
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="form.pageNum"
      :limit.sync="form.pageSize"
      @pagination="getList"
    />
    <h3 style="font-weight: 600">焊漏率折线图</h3>
    <div style="width: 100%;height: 30vw">
      <Chart ref="chart1"></Chart>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/board/Chart";
import {highFaultList, weldLeakRateList} from '@//api/report/reportAPI'

export default {
  name: 'ProductOffLine',
  components: {
    Chart,
  },
  data() {
    return {
      total: 0,
      form: {
        year: new Date().getFullYear().toString(),
        pageNum: 1,
        pageSize: 10
      },
      option: [
        {
          value: '11',
          label: '日'
        },
        {
          value: '22',
          label: '月'
        },
        {
          value: '33',
          label: '年'
        },
      ],
      tableData: [],
    }
  }
  ,
  mounted() {
  }
  ,
  methods: {
    getList() {
      weldLeakRateList({year: this.form.year,}).then(response => {
        this.total = response?.total || 0
        //分页查询
        let productLineArr = [...new Set(response.data.map(v => v.PRODUCT_LINE_NAME))]
        let data = productLineArr.map(v => {
          return {
            productLineName: v,
            children: response.data.filter(val => val.PRODUCT_LINE_NAME === v)
          }
        })
        this.tableData = data

        this.$refs.chart1.setData({
          tooltip: {
            trigger: "axis",
            formatter: (v)=>{
              console.log(v)
              return v[0].axisValueLabel+'<br />'+v.map(e=>{
                return `
              ${e.marker}${e.seriesName} : ${e.data}%\n
              `
              }).join('')
            }
          },
          legend: {},
          grid: {
            top: "middle",
            left: "3%",
            right: "4%",
            bottom: "3%",
            height: "80%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: Array(52).fill('').map((v, k) => '第' + (k + 1) + '周'),
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
          },
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: '{value}%'
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#DDD",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#333",
              },
            },
            nameTextStyle: {
              color: "#999",
            },
            splitArea: {
              show: false,
            },
          },
          series: data.map(v => {
            return {
              name: v.productLineName,
              type: "line",
              data: v.children.map(r => parseFloat(r.REPAIR_RATE)),
              color: "#F58080",
              lineStyle: {
                normal: {
                  width: 2,
                },
              },
              itemStyle: {
                normal: {
                  // color: "#F58080",
                  borderWidth: 10,
                  // borderColor: "#F58080",
                },
              },
              smooth: true,
            }
          }),
        })
      });
    }
    ,
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-table .cell {
  text-align: center !important;
}
</style>