IDCDatasync-vue/src/views/system/IdcArchivesStatisticst.vue

<template>
  <a-card :bordered="false">
    <a-tabs defaultActiveKey="1" @change="callback">
      <a-tab-pane tab="柱状图" key="1">
        <a-row>
          <a-col :span="10">
            <a-radio-group :value="barType" @change="statisticst">
              <a-radio-button value="Log">日志统计</a-radio-button>
              <a-radio-button value="ErrorLog">错误日志统计</a-radio-button>
            </a-radio-group>
          </a-col>
          <bar class="statistic" title="日志统计" :dataSource="countSource" :height="400"/>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import Bar from '@/components/chart/Bar'
  import Pie from '@/components/chart/Pie'
  import ACol from 'ant-design-vue/es/grid/Col'
  import { getAction } from '@/api/manage'

  export default {
    name: 'ArchivesStatisticst',
    components: {
      ACol,
      Bar,
      Pie
    },
    data() {
      return {
        description: '档案统计页面',
        // 查询条件
        queryParam: {},
        // 数据集
        countSource: [],
        // 柱状图
        barType: 'Log',
        barDate: ['month', 'month'],
        barValue: [],
        tabStatus:"bar",
        url: {
          logStatistical: "/sys/quartzJob/logStatistical",
          getMonthCountInfo:"/mock/api/report/getMonthCountInfo"
        },
      }
    },
    created() {
      let url = this.url.logStatistical;
      this.loadDate(url,'Log',{});
    },
    methods: {
      loadDate(url,type,param) {
        getAction(url,param,'get').then((res) => {
          if (res.success) {
            this.countSource = [];
            if(type === 'Log'){
              this.getLogSource(res.result);
            }
            if(type === 'ErrorLog'){
              this.getErrorLogSource(res.result);
            }
          }else{
            var that=this;
            that.$message.warning(res.message);
          }
        })
      },
      getLogSource(data){
        console.log(data);
        for (let i = 0; i < data.length; i++) {
          if(this.tabStatus === "bar"){
            this.countSource.push({
              x: data[i].logLevel,
              y: parseInt(data[i].successNumber)
            })
          }else{
            this.countSource.push({
              item: `${data[i].year}年`,
              count:data[i].yearcount
            })
          }
        }
      },
      getErrorLogSource(data){
        for (let i = 0; i < data.length; i++) {
          if(this.tabStatus === "bar"){
            this.countSource.push({
              x: data[i].month,
              y: data[i].monthcount
            })
          }else{
            this.countSource.push({
              item: data[i].month,
              count:data[i].monthcount
            })
          }
        }
      },
      // 选择统计图类别
      callback(key) {
        if(key === "1"){
          this.tabStatus = "bar";
          this.queryDatebar();
        }else{
          this.tabStatus = "pie";
          this.queryDatepie();
        }
      },
      // 选择统计类别
      statisticst(e) {
        this.barType = e.target.value;
        this.queryDatebar();
      },
      // 按月份查询
      queryDatebar(){
        if(this.barValue.length>0){
          this.getUrl(this.barType,{startTime:this.barValue[0]._d,endTime:this.barValue[1]._d});
        }else{
          this.getUrl(this.barType,{});
        }
      },
      searchReset(){
        console.log(this.tabStatus);
        if(this.tabStatus === "pie"){
          this.pieValue = [];
        }else{
          this.barValue = [];
        }
        this.getUrl(this.barType,{});
      },
      // 选择请求url
      getUrl(type,param){
        let url = "";
        if(type === 'Log'){
          url = this.url.logStatistical;
        }
        if(type === 'ErrorLog'){
          url = this.url.getMonthCountInfo;
        }
        this.loadDate(url,type,param);
      },
      // 选择月份日期
      handleBarDate(value, mode) {
        this.barValue = value
        this.barDate = [
          mode[0] === 'date' ? 'month' : mode[0],
          mode[1] === 'date' ? 'month' : mode[1]
        ]
      },
      handlePieDate(value, mode) {
        this.pieValue = value
        this.pieDate = [
          mode[0] === 'date' ? 'month' : mode[0],
          mode[1] === 'date' ? 'month' : mode[1]
        ]
      },
    }
  }
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .statistic {
    padding: 0px !important;
    margin-top: 50px;
  }

  .statistic h4 {
    margin-bottom: 20px;
    text-align: center !important;
    font-size: 24px !important;;
  }

  .statistic #canvas_1 {
    width: 100% !important;
  }
</style>