Blame view

ant-design-vue-jeecg/src/views/jeecg/report/ArchivesStatisticst.vue 8.93 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
肖超群 authored
25
26
              <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">重置
              </a-button>
肖超群 authored
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
            </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>
肖超群 authored
55
56
57
                <a-button style="margin-top: 2px;margin-left: 8px" type="primary" icon="reload" @click="searchReset">
                  重置
                </a-button>
肖超群 authored
58
59
60
61
62
63
64
65
66
67
68
              </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>
肖超群 authored
69
70
71
72
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'
肖超群 authored
73
肖超群 authored
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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",
肖超群 authored
103
      },
肖超群 authored
104
105
106
107
108
109
110
111
112
113
114
115
116
    }
  },
  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);
肖超群 authored
117
          }
肖超群 authored
118
119
          if (type === 'month') {
            this.getMonthCountSource(res.result);
肖超群 authored
120
          }
肖超群 authored
121
122
          if (type === 'category') {
            this.getCategoryCountSource(res.result);
肖超群 authored
123
          }
肖超群 authored
124
125
          if (type === 'cabinet') {
            this.getCabinetCountSource(res.result);
肖超群 authored
126
          }
肖超群 authored
127
128
129
        } else {
          var that = this;
          that.$message.warning(res.message);
肖超群 authored
130
        }
肖超群 authored
131
132
133
134
135
136
137
138
139
140
141
142
143
144
      })
    },
    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
          })
肖超群 authored
145
        }
肖超群 authored
146
147
148
149
150
151
152
153
154
155
156
157
158
159
      }
    },
    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
          })
肖超群 authored
160
        }
肖超群 authored
161
162
163
164
165
166
167
168
169
170
171
172
173
174
      }
    },
    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
          })
肖超群 authored
175
        }
肖超群 authored
176
177
178
179
180
181
182
183
184
185
186
187
188
189
      }
    },
    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
          })
肖超群 authored
190
        }
肖超群 authored
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
      }
    },
    // 选择统计图类别
    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]
      ]
    },
肖超群 authored
269
  }
肖超群 authored
270
}
肖超群 authored
271
272
</script>
<style scoped>
肖超群 authored
273
274
275
.ant-card-body .table-operator {
  margin-bottom: 18px;
}
肖超群 authored
276
肖超群 authored
277
278
279
280
.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}
肖超群 authored
281
肖超群 authored
282
283
284
.anty-row-operator button {
  margin: 0 5px
}
肖超群 authored
285
肖超群 authored
286
287
288
.ant-btn-danger {
  background-color: #ffffff
}
肖超群 authored
289
肖超群 authored
290
291
292
.ant-modal-cust-warp {
  height: 100%
}
肖超群 authored
293
肖超群 authored
294
295
296
297
.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}
肖超群 authored
298
肖超群 authored
299
300
301
302
.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}
肖超群 authored
303
肖超群 authored
304
305
306
307
.statistic {
  padding: 0px !important;
  margin-top: 50px;
}
肖超群 authored
308
肖超群 authored
309
310
311
312
313
.statistic h4 {
  margin-bottom: 20px;
  text-align: center !important;
  font-size: 24px !important;;
}
肖超群 authored
314
肖超群 authored
315
316
317
.statistic #canvas_1 {
  width: 100% !important;
}
肖超群 authored
318
</style>