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

<template>
  <div class="particleLine-chart">
    <div style="margin-bottom: 30px">
      <search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
    </div>
    <div
      id="particleLineChart"
      style="width: 100%"
      :style="{ height: chartHeight + 'px' }"
    />
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { tableHeight } from '@/utils/index'
import resize from '@/utils/chartMixins/resize'
// import { getProcessFull } from '@/api/qualityManagement'
import moment from 'moment'
export default {
  name: 'particleLineChart',
  mixins: [resize],
  data() {
    return {
      formConfig: [
        {
          type: 'datePicker',
          label: '检验时间',
          dateType: 'datetime',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '抽检时间',
          param: 'checkOutTime',
          defaultSelect: '',
          width: 200
        },
        {
          type: 'input',
          label: '合格上线',
          placeholder: '合格上线',
          param: 'maxLine'
        },
        {
          type: 'button',
          btnName: '确认',
          name: 'search',
          color: 'primary'
        }
      ],
      chartDom: '',
      chart: '',
      chartHeight: tableHeight(320),
      checkOutTime: '',
      maxLine: ''
    }
  },
  mounted() {
    this.chartDom = document.getElementById('particleLineChart')
    this.chart = echarts.init(this.chartDom)
    window.addEventListener('resize', () => {
      this.chartHeight = tableHeight(320)
    })
    this.formConfig[0].defaultSelect = moment().format('YYYY-MM-DD HH:mm:ss')
    this.getMsg()
  },
  methods: {
    buttonClick(val) {
      console.log(val)
      if (val.btnName === 'search') {
        this.checkOutTime = val.checkOutTime
        this.maxLine = val.maxLine
        this.getMsg()
      }
    },
    getMsg() {
      let time = []
      let sList = []
      let mList = []
      let lList = []
      let xlList = []
      let sumList = []
      let msg = {}
      for (let i = 0; i < 100; i++) {
        time.push(moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss'))
        sList.push(Math.floor(Math.random() * 80 + 10))
        mList.push(Math.floor(Math.random() * 80 + 20))
        lList.push(Math.floor(Math.random() * 80 + 30))
        xlList.push(Math.floor(Math.random() * 80 + 40))
        sumList.push(sList[i] + mList[i] + lList[i] + xlList[i])
      }
      msg.time = time
      msg.sList = sList
      msg.mList = mList
      msg.lList = lList
      msg.xlList = xlList
      msg.sumList = sumList
      this.getChart(msg)
      // getProcessFull({ checkOutTime: this.checkOutTime }).then((res) => {
      //   console.log(res)
      //   if (res.code === 0 && res.data.length > 0) {
      //     res.data.map((item) => {
      //       console.log(item)
      //       time.push(moment(item.hour).format('MM-DD HH:mm:ss'))
      //       sList.push(item.s)
      //       mList.push(item.m)
      //       lList.push(item.l)
      //       xlList.push(item.xl)
      //       sumList.push(item.sum)
      //     })
      //     msg.time = time
      //     msg.sList = sList
      //     msg.mList = mList
      //     msg.lList = lList
      //     msg.xlList = xlList
      //     msg.sumList = sumList
      //     this.getChart(msg)
      //   }
      // })
    },
    getChart1(msg) {
      var option = {
        color: ['#5AD8A6', '#5B8FF9', '#5D7092', '#F6BD16', '#E8684A'],
        title: {
          text: '时间段玻璃颗粒数'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Total', 'M', 'L', 'S', 'XL'],
          right: '4%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: msg.time
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Total',
            type: 'line',
            data: msg.sumList,
            markLine: {
              show: false,
              Symbol: 'none',
              label: {
                position: 'end',
                formatter: '合格线\n' + this.maxLine
              },
              data: [
                {
                  silent: false,
                  lineStyle: {
                    type: 'dashed',
                    color: '#0B58FF'
                  },
                  yAxis: this.maxLine
                }
              ]
            }
          },
          {
            name: 'M',
            type: 'line',
            data: msg.mList
          },
          {
            name: 'L',
            type: 'line',
            data: msg.lList
          },
          {
            name: 'S',
            type: 'line',
            data: msg.sList
          },
          {
            name: 'XL',
            type: 'line',
            data: msg.xlList
          }
        ]
      }

      option && this.chart.setOption(option)
    },
    getChart(msg) {
      console.log(msg)
      var option = {
        title: {
          text: 'Beijing AQI',
          left: '1%'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '5%',
          right: '15%',
          bottom: '10%'
        },
        xAxis: msg.time,
        yAxis: {},
        toolbox: {
          right: 10,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            startValue: '2014-06-01'
          },
          {
            type: 'inside'
          }
        ],
        visualMap: {
          top: 50,
          right: 10,
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          name: 'Beijing AQI',
          type: 'line',
          data: msg.sList
        }
      }

      option && this.chart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.particleLine-chart {
  height: calc(100vh - 205px);
  margin: 0 16px;
  border-radius: 8px;
  padding: 8px 16px;
  background-color: #fff;
}
</style>