wms / wms4_hunanhongwang · Files

<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="year">按年统计</a-radio-button>
              <a-radio-button value="month">按月统计</a-radio-button>
              <a-radio-button value="category">按类别统计</a-radio-button>
              <a-radio-button value="cabinet">按柜号统计</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="14">
            <a-form v-if="barType === 'month' && false" layout="inline" style="margin-top: -4px">
              <a-form-item label="月份区间">
                <a-range-picker
                  :placeholder="['开始月份', '结束月份']"
                  format="YYYY-MM"
                  :value="barValue"
                  :mode="barDate"
                  @panelChange="handleBarDate"/>
              </a-form-item>
              <a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatebar">查询</a-button>
              <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置
              </a-button>
            </a-form>
          </a-col>
          <bar class="statistic" title="档案统计" :dataSource="countSource" :height="400"/>
        </a-row>
      </a-tab-pane>

      <a-tab-pane tab="饼状图" key="2">
        <a-row :gutter="24">
          <a-col :span="10">
            <a-radio-group :value="pieType" @change="statisticst">
              <a-radio-button value="year">按年统计</a-radio-button>
              <a-radio-button value="month">按月统计</a-radio-button>
              <a-radio-button value="category">按类别统计</a-radio-button>
              <a-radio-button value="cabinet">按柜号统计</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="14">
            <a-form v-if="pieType === 'month' && false" layout="inline" style="margin-top: -4px">
              <a-row :gutter="24">
                <a-form-item label="月份区间">
                  <a-range-picker
                    :placeholder="['开始月份', '结束月份']"
                    format="YYYY-MM"
                    :value="pieValue"
                    :mode="pieDate"
                    @panelChange="handlePieDate"/>
                </a-form-item>
                <a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatepie">查询</a-button>
                <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">
                  重置
                </a-button>
              </a-row>
            </a-form>
          </a-col>
          <pie class="statistic" title="档案统计" :dataSource="countSource" :height="450"/>
        </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: 'year',
      barDate: ['month', 'month'],
      barValue: [],
      // 饼状图
      pieType: 'year',
      pieDate: ['month', 'month'],
      pieValue: [],
      // 统计图类型
      tabStatus: "bar",
      url: {
        getYearCountInfo: "/mock/api/report/getYearCountInfo",
        getMonthCountInfo: "/mock/api/report/getMonthCountInfo",
        getCntrNoCountInfo: "/mock/api/report/getCntrNoCountInfo",
        getCabinetCountInfo: "/mock/api/report/getCabinetCountInfo",
      },
    }
  },
  created() {
    let url = this.url.getYearCountInfo;
    this.loadDate(url, 'year', {});
  },
  methods: {
    loadDate(url, type, param) {
      getAction(url, param, 'get').then((res) => {
        if (res.success) {
          this.countSource = [];
          if (type === 'year') {
            this.getYearCountSource(res.result);
          }
          if (type === 'month') {
            this.getMonthCountSource(res.result);
          }
          if (type === 'category') {
            this.getCategoryCountSource(res.result);
          }
          if (type === 'cabinet') {
            this.getCabinetCountSource(res.result);
          }
        } else {
          var that = this;
          that.$message.warning(res.message);
        }
      })
    },
    getYearCountSource(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.tabStatus === "bar") {
          this.countSource.push({
            x: `${data[i].year}年`,
            y: data[i].yearcount
          })
        } else {
          this.countSource.push({
            item: `${data[i].year}年`,
            count: data[i].yearcount
          })
        }
      }
    },
    getMonthCountSource(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
          })
        }
      }
    },
    getCategoryCountSource(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.tabStatus === "bar") {
          this.countSource.push({
            x: data[i].classifyname,
            y: data[i].cntrnocount
          })
        } else {
          this.countSource.push({
            item: data[i].classifyname,
            count: data[i].cntrnocount
          })
        }
      }
    },
    getCabinetCountSource(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.tabStatus === "bar") {
          this.countSource.push({
            x: data[i].cabinetname,
            y: data[i].cabinetcocunt
          })
        } else {
          this.countSource.push({
            item: data[i].cabinetname,
            count: data[i].cabinetcocunt
          })
        }
      }
    },
    // 选择统计图类别
    callback(key) {
      if (key === "1") {
        this.tabStatus = "bar";
        this.queryDatebar();
      } else {
        this.tabStatus = "pie";
        this.queryDatepie();
      }
    },
    // 选择统计类别
    statisticst(e) {
      if (this.tabStatus === "pie") {
        this.pieType = e.target.value;
        this.queryDatepie();
      } else {
        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, {});
      }
    },
    queryDatepie() {
      if (this.pieValue.length > 0) {
        this.getUrl(this.pieType, {startTime: this.pieValue[0]._d, endTime: this.pieValue[1]._d});
      } else {
        this.getUrl(this.pieType, {});
      }
    },
    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 === 'year') {
        url = this.url.getYearCountInfo;
      }
      if (type === 'month') {
        url = this.url.getMonthCountInfo;
      }
      if (type === 'category') {
        url = this.url.getCntrNoCountInfo;
      }
      if (type === 'cabinet') {
        url = this.url.getCabinetCountInfo;
      }
      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>