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="type"
        label="工序"
        width="150">
      </el-table-column>
      <el-table-column
        v-for="i in tableHead"
        :prop="i.value"
        :label="i.label"
        width="120">
      </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";

export default {
  name: 'ProductOffLine',
  components: {
    Chart,
  },
  data() {
    return {
      total: 100,
      form: {
        pageNum: 1,
        pageSize: 10
      },
      option: [
        {
          value: '11',
          label: '日'
        },
        {
          value: '22',
          label: '月'
        },
        {
          value: '33',
          label: '年'
        },
      ],
      tableData: [
        {
          type: '1',
          column1: 1,
        },
        {
          type: '1',
          column1: 1,
        },
        {
          type: '1',
          column1: 1,
        },
        {
          type: '1',
          column1: 1,
        },
        {
          type: '1',
          column1: 1,
        },
      ],

      tableHead:  [
        {
          label: '第1周',
          value: 'column1',
        },
        {
          label: '第2周',
          value: 'column1',
        },
        {
          label: '第3周',
          value: 'column1',
        },
        {
          label: '第4周',
          value: 'column1',
        },
        {
          label: '第5周',
          value: 'column1',
        },
        {
          label: '第6周',
          value: 'column1',
        },
      ]
    }
  }
  ,
  mounted() {
    this.$refs.chart1.setData({
      tooltip: {
        trigger: "axis",
      },
      legend: {},
      grid: {
        top: "middle",
        left: "3%",
        right: "4%",
        bottom: "3%",
        height: "80%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [100, 200, 20, 30, 60, 89],
        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: [
        {
          name: "冰箱A线",
          type: "line",
          data: [800, 900, 220, 130, 660, 289],
          color: "#F58080",
          lineStyle: {
            normal: {
              width: 2,
              color: {
                type: "linear",

                colorStops: [
                  {
                    offset: 0,
                    color: "#FFCAD4", // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: "#F58080", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#F58080", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#F58080",
              borderWidth: 10,
              /*shadowColor: 'rgba(72,216,191, 0.3)',
                         shadowBlur: 100,*/
              borderColor: "#F58080",
            },
          },
          smooth: true,
        },
        {
          name: "冰箱B线",
          type: "line",
          data: [123, 568, 111, 222, 123, 56],
          lineStyle: {
            normal: {
              width: 2,
              color: {
                type: "linear",

                colorStops: [
                  {
                    offset: 0,
                    color: "#AAF487", // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: "#47D8BE", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#47D8BE", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(71,216,190, 0.5)",
              shadowBlur: 10,
              shadowOffsetY: 7,
            },
          },
          itemStyle: {
            normal: {
              color: "#AAF487",
              borderWidth: 10,
              /*shadowColor: 'rgba(72,216,191, 0.3)',
                         shadowBlur: 100,*/
              borderColor: "#AAF487",
            },
          },
          smooth: true,
        },
      ],
    })
  }
  ,
  methods: {
    getList() {
      console.log(this.form)
    }
    ,
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-table .cell {
  text-align: center !important;
}
</style>