dl_site_system/dl_vue/src/views/statistics/thirdItem/inquiryChart.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="120px">
      <el-form-item label="时间范围" prop="dataRange">
        <el-date-picker
          v-model="queryParams.dataRange"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <line-chart ref="lineChart" :chart-data="lineChartData"></line-chart>
  </div>
</template>

<script>
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
import { inquiryChart } from "@/api/statistics/statistics";
import LineChart from '../../dashboard/LineChart'
import PanelGroup from '../../dashboard/PanelGroup'
import RaddarChart from '../../dashboard/RaddarChart'
export default {
  name: 'inquiryChart',
  components: { RaddarChart, PanelGroup, LineChart },
  data() {
    return {
      // 查询参数
      queryParams: {
        dataRange: '',
        startDate: '',
        endDate: '',
        tenantId: null
      },
      lineChartData: lineChartData.newVisitis,
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    this.initDateRange()
  },
  methods:{
    initDateRange(){
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 6);
      this.queryParams.dataRange = [start,end]
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      if (this.queryParams.dataRange && this.queryParams.dataRange.length > 1) {
        this.queryParams.startDate = this.formatDate(this.queryParams.dataRange[0],false)
        this.queryParams.endDate = this.formatDate(this.queryParams.dataRange[1],true)
        console.log(this.queryParams, '12')
      } else {
        this.queryParams.startDate = null
        this.queryParams.endDate = null
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.initDateRange()
    },
    /**
     * 查询数据
     */
    getList(){
      inquiryChart(this.queryParams).then(response => {
        this.rtnMap =  response.data
        this.$refs.barChart.initChart(this.rtnMap.nationalData)
        this.$refs.pieChart.initChart(this.rtnMap.equipmentData)
      });
    },
    /**
     * 格式化时间戳
     */
    formatDate(timestamp,ifEnd) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      // 月份是从0开始的，所以要加1
      const month = String(date.getMonth() + 1).padStart(2, '0')
      if(ifEnd){
        //取这个月最后一天
        const date = new Date(year, month, 0);
        return `${year}-${month}`+"-"+date.getDate();
      }else{
        //取这个月第一天
        return `${year}-${month}`+"-01"
      }
    },
  }
}
</script>

<style scoped>

</style>