hitch-sb-antd/src/views/report/daily/DayReportChart.vue

<template>
  <div class="page">
    <a-row>
      <a-col :span="19">
        <div class="chart">
          <a-row type="flex" justify="space-between">
            <a-col :span="24">
              <a-form :form="form">
                <a-row type="flex" justify="end">
                  <a-col :span="6">
                    <a-form-item label="开始时间" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
                      <a-date-picker
                        :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
                        v-model="queryParams.dateStart" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="结束时间" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
                      <a-date-picker
                        :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
                        v-model="queryParams.dateEnd" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="3">
                    <a-form-item >
                      <a-button type="primary" @click="getInfo">查询</a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </a-col>
          </a-row>
          <div>
            <chart-view height="640px" :chartOption="chartOption"></chart-view>
          </div>
        </div>
      </a-col>
      <a-col :span="4" :offset="1" >
        <div class="options">
          <div class="options-list">
            <a-checkbox-group v-model="queryParams.noList">
              <a-row :gutter="[0,20]">
                <a-col v-for="item in projectList" :key="item.value" :span="24" >
                  <a-checkbox :value="item.value">
                    {{ item.name }}
                  </a-checkbox>
                </a-col>
              <!-- <a-form-item label="数据报表筛选">
                <a-select
                  v-model="queryParams.no"
                  placeholder="请选择">
                  <a-select-option key="1" value="scl_0300027">CS-977</a-select-option>
                  <a-select-option key="18" value="水">水</a-select-option>
                  <a-select-option key="19" value="电">电</a-select-option>
                  <a-select-option key="20" value="dl_天然气_hy">天然气</a-select-option>
                  <a-select-option key="21" value="dl_蒸汽_hy">蒸汽</a-select-option>
                  <a-select-option key="22" value="dl_污水">河水</a-select-option>
                  <a-select-option key="23" value="dl_河水">污水</a-select-option>
                </a-select>
              </a-form-item> -->
              </a-row>
            </a-checkbox-group>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { queryProduceReport } from '@/api/produce/report'
export default {
  data () {
    return {
      form: this.$form.createForm(this),
      queryParams: {
        // dateStart: this.BaseTool.Moment().startOf('month'),
        dateStart: this.BaseTool.Moment().subtract(1, 'month'),
        dateEnd: this.BaseTool.Moment().subtract(1, 'days'),
        noList: ['scl_0300027']
      },
      chart1: null,
      typeTreeData: [],
      projectList: [
        { value: 'scl_0300027', name: 'CS-977' },
        { value: 'scl_scl_0600032', name: '902' },
        { value: 'hy_0100075', name: '氢氧化钠' },
        { value: 'hy_0100065', name: '氢氟酸' },
        { value: 'stock_0300083', name: '锂渣(库存)' },
        { value: 'stock_0300073', name: '氟化钠(库存)' },
        { value: 'hy_0600032', name: 'GS-902' },
        { value: 'hy_0100087', name: 'GS-903' },
        { value: 'hy_0100074', name: 'GS-904' },
        { value: 'hy_0100083', name: 'GS-905' },
        { value: 'hy_0100003', name: 'GS-907' },
        { value: 'hy_0100026', name: 'F-160C' },
        { value: 'hy_0100120', name: '硫酰氯' },
        { value: 'hy_0100160', name: '液碱' },
        { value: 'hy_0100086', name: '盐酸' },
        { value: 'dl_电_hy', name: '电' },
        { value: 'dl_天然气_hy', name: '天然气' },
        { value: 'dl_蒸汽_hy', name: '蒸汽' },
        { value: 'dl_污水', name: '河水' },
        { value: 'dl_河水', name: '污水' }
      ],
      dataList: [
      ]
    }
  },
  computed: {
    chartOption () {
      const x = []
      const data = new Map()
      this.dataList.forEach(item => {
        if (x.indexOf(item.date) === -1) {
          x.push(item.date)
        }
        if (data.has(item.lineOne)) { // 如果有这个key
          data.get(item.lineOne).data.push(item.value)
        } else {
          data.set(item.lineOne, {
            name: item.lineOne,
            type: 'line',
            stack: '总量',
            data: [item.value]
          })
        }
      })
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: new Array(...data.keys())
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            data: x
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: new Array(...data.values())
      }
    }
  },
  watch: {
    queryParams: {
      handler () {
        this.getInfo()
      },
      deep: true
    }
  },
  mounted () {
    this.getInfo()
  },
  methods: {
    getInfo (parameter) {
      const params = {
        dateStart: this.BaseTool.Date.formatter(this.queryParams.dateStart, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN),
        dateEnd: this.BaseTool.Date.formatter(this.queryParams.dateEnd, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN),
        noList: this.queryParams.noList
      }
      queryProduceReport(params).then(res => {
        this.dataList = res.data
      })
    },
    onChange (e, id) {

    }
  }
}
</script>

<style lang="less" scoped>
.page{
  width: 100%;
  height: 100%;
  background: #EEEEEE;
  padding:20px;
  font-family: PingFang SC;
  font-weight: 500;
  .title{
    width: 172px;
    height: 60px;
    background: #4688FF;
    border-radius: 10px;
    line-height: 60px;
    font-size: 28px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom:20px;
  }
  .chart{
    width: 100%;
    height: 815px;
    background: #FFFFFF;
    border-radius: 14px;
    padding:40px;
    .chart-title{
      font-size: 26px;
      text-align: center;
      position: relative;
      &::before {
        content:'';
        width: 100%;
        height: 36px;
        background: rgba(101, 151, 238, 0.5);
        border-radius: 5px;
        position: absolute;
        bottom:9px;
        left: 0;
      }
    }
  }
  .options{
    width: 100%;
    height: 815px;
    .options-list{
      background: #FFFFFF;
      border-radius: 14px;
      padding: 20px;
      max-height: 717px;
      overflow: hidden;
      overflow-y: auto;
    }
   ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
  }
}
</style>