Browse Source

Merge branch 'master' of http://git.ycjcjy.com/state_grid/training-admin

张延森 3 years ago
parent
commit
eabc164b5d
3 changed files with 71 additions and 72 deletions
  1. 8
    0
      src/api/dashboard.js
  2. 3
    9
      src/components/ECharts/Pie.vue
  3. 60
    63
      src/views/dashboard/index.vue

+ 8
- 0
src/api/dashboard.js View File

24
 export const getStudentAgeTotalList = (params) => request({
24
 export const getStudentAgeTotalList = (params) => request({
25
   url: '/admin/stat/student-total-age', params
25
   url: '/admin/stat/student-total-age', params
26
 })
26
 })
27
+/**
28
+ * 各培训签到率列表
29
+ * @param {*} params
30
+ * @returns
31
+ */
32
+export const getSigninRatioList = (params) => request({
33
+  url: '/admin/stat/signin-ratio', params
34
+})

+ 3
- 9
src/components/ECharts/Pie.vue View File

14
       default: () => ({})
14
       default: () => ({})
15
     },
15
     },
16
     value: {
16
     value: {
17
-      type: Object,
18
-      default: () => ({})
17
+      type: Array,
18
+      default: () => ([])
19
     },
19
     },
20
     loading: Boolean
20
     loading: Boolean
21
   },
21
   },
43
             name: '年龄段',
43
             name: '年龄段',
44
             type: 'pie',
44
             type: 'pie',
45
             radius: '50%',
45
             radius: '50%',
46
-            data: [
47
-              { value: 1048, name: '20~25' },
48
-              { value: 735, name: '25~30' },
49
-              { value: 580, name: '30~35' },
50
-              { value: 484, name: '35~40' },
51
-              { value: 300, name: '40+' }
52
-            ],
46
+            data: this.value,
53
             emphasis: {
47
             emphasis: {
54
               itemStyle: {
48
               itemStyle: {
55
                 shadowBlur: 10,
49
                 shadowBlur: 10,

+ 60
- 63
src/views/dashboard/index.vue View File

9
 
9
 
10
     <el-row class="sec" type="flex" justify="space-between" :gutter="20">
10
     <el-row class="sec" type="flex" justify="space-between" :gutter="20">
11
       <el-col :span="12">
11
       <el-col :span="12">
12
-        <el-card style="height:488px">
12
+        <el-card style="height:496px">
13
           <div slot="header">
13
           <div slot="header">
14
             <span>各学期总人数柱状图</span>
14
             <span>各学期总人数柱状图</span>
15
           </div>
15
           </div>
17
         </el-card>
17
         </el-card>
18
       </el-col>
18
       </el-col>
19
       <el-col :span="12">
19
       <el-col :span="12">
20
-        <el-card style="height:488px">
20
+        <el-card style="height:496px">
21
           <div slot="header">
21
           <div slot="header">
22
             <span>班级人数列表</span>
22
             <span>班级人数列表</span>
23
           </div>
23
           </div>
50
 
50
 
51
     <el-row class="sec" type="flex" justify="space-between" :gutter="20">
51
     <el-row class="sec" type="flex" justify="space-between" :gutter="20">
52
       <el-col :span="12">
52
       <el-col :span="12">
53
-        <el-card>
54
-          <div slot="header">
55
-            <span>{{ radio2 }}签到率折线图</span>
56
-          </div>
57
-          <el-radio-group v-model="radio2" style="margin-right:32px" @change="handleChangeDate">
58
-            <el-radio-button label="每日" />
59
-            <el-radio-button label="每周" />
60
-            <el-radio-button label="每月" />
61
-          </el-radio-group>
62
-          <line-chart :value="lineData" />
63
-        </el-card>
64
-      </el-col>
65
-      <el-col :span="11">
66
-        <el-card>
53
+        <el-card style="height:496px">
67
           <div slot="header">
54
           <div slot="header">
68
             <span>年龄分布图</span>
55
             <span>年龄分布图</span>
69
           </div>
56
           </div>
70
-          <el-radio-group v-model="radio1" style="margin-right:32px" @change="handleChange">
71
-            <el-radio-button label="学期" />
72
-            <el-radio-button label="班级" />
73
-          </el-radio-group>
74
-          <div v-if="radio1==='学期'" style="display: inline-block;">
57
+          <div style="display: inline-block;">
75
             学期名称:
58
             学期名称:
76
-            <el-select v-model="termId" filterable placeholder="请选择" @change="changeTerm">
59
+            <el-select v-model="termId2" filterable placeholder="请选择" @change="changeTermAge">
77
               <el-option
60
               <el-option
78
                 v-for="item in options"
61
                 v-for="item in options"
79
                 :key="item.termId"
62
                 :key="item.termId"
82
               />
65
               />
83
             </el-select>
66
             </el-select>
84
           </div>
67
           </div>
85
-          <div v-else style="display: inline-block;">
86
-            班级名称:
87
-            <el-select v-model="classId" filterable placeholder="请选择" @change="changeClass">
88
-              <el-option
89
-                v-for="item in classOptions"
90
-                :key="item.classId"
91
-                :label="item.name"
92
-                :value="item.classId"
93
-              />
94
-            </el-select>
68
+          <pie-chart :option="current" :value="ageData" style="margin-top:32px" />
69
+        </el-card>
70
+      </el-col>
71
+      <el-col :span="12">
72
+        <el-card style="height:496px">
73
+          <div slot="header">
74
+            <span>{{ radio }}签到率折线图</span>
95
           </div>
75
           </div>
96
-          <pie-chart :option="current" style="margin-top:32px" />
76
+          <el-radio-group v-model="radio" style="margin-right:32px" @change="handleChangeDate">
77
+            <el-radio-button label="每日" />
78
+            <el-radio-button label="每周" />
79
+            <el-radio-button label="每月" />
80
+          </el-radio-group>
81
+          <line-chart :value="lineData" />
97
         </el-card>
82
         </el-card>
98
       </el-col>
83
       </el-col>
99
     </el-row>
84
     </el-row>
100
     <el-row class="sec" type="flex" justify="space-between" :gutter="20">
85
     <el-row class="sec" type="flex" justify="space-between" :gutter="20">
101
-      <el-col :span="12">
102
-        <el-card>
86
+      <el-col :span="24">
87
+        <el-card style="height:496px">
103
           <div slot="header">
88
           <div slot="header">
104
             <span>各培训签到率柱状图</span>
89
             <span>各培训签到率柱状图</span>
105
           </div>
90
           </div>
114
 import { mapGetters } from 'vuex'
99
 import { mapGetters } from 'vuex'
115
 import { getSchoolTermList } from '@/api/schoolTerm'
100
 import { getSchoolTermList } from '@/api/schoolTerm'
116
 import { getSchoolClassList } from '@/api/schoolClass'
101
 import { getSchoolClassList } from '@/api/schoolClass'
117
-import { getStudentTermTotalList, getStudentclassTotalList, getStudentAgeTotalList } from '@/api/dashboard'
102
+import { getStudentTermTotalList, getStudentclassTotalList, getStudentAgeTotalList, getSigninRatioList } from '@/api/dashboard'
118
 
103
 
119
 export default {
104
 export default {
120
   name: 'Dashboard',
105
   name: 'Dashboard',
127
   data() {
112
   data() {
128
     return {
113
     return {
129
       total: { reg: 972 },
114
       total: { reg: 972 },
130
-      radio1: '学期',
131
-      radio2: '每日',
115
+      radio: '每日',
132
       options: [],
116
       options: [],
133
       termId: undefined,
117
       termId: undefined,
118
+      termId2: undefined,
134
       current: { name: undefined },
119
       current: { name: undefined },
135
       classId: undefined,
120
       classId: undefined,
136
       lineData: [],
121
       lineData: [],
225
         }
210
         }
226
       ],
211
       ],
227
       termData: [],
212
       termData: [],
228
-      signData: [
229
-        ['2021年十月第一次签到', '2021年十月第二次签到', '2021年十月第三次签到', '2021年十一月第一次签到', '2021年十二月第二次签到', '2022年一月第一次签到', '2022年二月第一次签到', '2022年二月第二次签到',
230
-          '2021年十月第一次签到', '2021年十月第二次签到', '2021年十月第三次签到', '2021年十一月第一次签到', '2021年十二月第二次签到', '2022年一月第一次签到', '2022年二月第一次签到', '2022年二月第二次签到',
231
-          '2021年十月第一次签到', '2021年十月第二次签到', '2021年十月第三次签到', '2021年十一月第一次签到', '2021年十二月第二次签到', '2022年一月第一次签到', '2022年二月第一次签到', '2022年二月第二次签到'
232
-        ],
233
-        [97, 25, 50, 70, 22, 90, 77, 86, 97, 25, 50, 70, 22, 90, 77, 86, 97, 25, 50, 70, 22, 90, 77, 86]
234
-      ],
213
+      signData: [],
235
 
214
 
215
+      // 表格分页数据
236
       allData: [],
216
       allData: [],
237
       tableData: [],
217
       tableData: [],
238
       pageSize: 5,
218
       pageSize: 5,
239
       currentPage: 1,
219
       currentPage: 1,
240
-      Total: 0 // 条目总数
220
+      Total: 0, // 条目总数
221
+
222
+      // 年龄分布数据
223
+      ageData: []
241
     }
224
     }
242
   },
225
   },
243
   computed: {
226
   computed: {
248
       this.options = res.data.records
231
       this.options = res.data.records
249
       this.current.name = res.data.records[0].name
232
       this.current.name = res.data.records[0].name
250
       this.termId = res.data.records[0].termId
233
       this.termId = res.data.records[0].termId
234
+      this.termId2 = res.data.records[0].termId
251
       getStudentclassTotalList({ termId: this.termId }).then(res => {
235
       getStudentclassTotalList({ termId: this.termId }).then(res => {
252
         this.Total = res.data.length
236
         this.Total = res.data.length
253
         this.allData = res.data
237
         this.allData = res.data
257
           }
241
           }
258
         }
242
         }
259
       })
243
       })
244
+      getStudentAgeTotalList({ termId: this.termId2 }).then((res) => {
245
+        const list = res.data
246
+        list.map(item => {
247
+          this.ageData.push({ value: parseInt(item.value), name: item.key })
248
+        })
249
+      })
260
     })
250
     })
261
     getSchoolClassList().then((res) => {
251
     getSchoolClassList().then((res) => {
262
       this.classOptions = res.data.records
252
       this.classOptions = res.data.records
272
       this.termData.push(arr1)
262
       this.termData.push(arr1)
273
       this.termData.push(arr2)
263
       this.termData.push(arr2)
274
     })
264
     })
275
-    getStudentAgeTotalList().then((res) => {
276
-
265
+    getSigninRatioList().then(res => {
266
+      const arr1 = []
267
+      const arr2 = []
268
+      res.data.map(item => {
269
+        arr1.push(item.key)
270
+        arr2.push(item.value)
271
+      })
272
+      this.signData.push(arr1)
273
+      this.signData.push(arr2)
277
     })
274
     })
278
   },
275
   },
279
   methods: {
276
   methods: {
294
         case '每月': this.lineData = this.monthData; break
291
         case '每月': this.lineData = this.monthData; break
295
         default: break
292
         default: break
296
       }
293
       }
297
-      this.radio2 = val
298
-    },
299
-    handleChange(val) {
300
-      if (val === '学期') {
301
-        this.termId = this.options[0].termId
302
-        this.current.name = this.options[0].name
303
-      } else {
304
-        this.classId = this.classOptions[0].classId
305
-        this.current.name = this.classOptions[0].name
306
-      }
294
+      this.radio = val
307
     },
295
     },
308
     changeTerm(val) {
296
     changeTerm(val) {
309
       getStudentclassTotalList({ termId: val }).then(res => {
297
       getStudentclassTotalList({ termId: val }).then(res => {
316
           }
304
           }
317
         }
305
         }
318
       })
306
       })
319
-      // this.options.map((item) => {
320
-      //   if (item.termId === val) {
321
-      //     this.current.name = item.name
322
-      //   }
323
-      // })
307
+    },
308
+    changeTermAge(val) {
309
+      this.ageData = []
310
+      getStudentAgeTotalList({ termId: val }).then((res) => {
311
+        const list = res.data
312
+        list.map(item => {
313
+          this.ageData.push({ value: parseInt(item.value), name: item.key })
314
+        })
315
+      })
316
+      this.options.map((item) => {
317
+        if (item.termId === val) {
318
+          this.current.name = item.name
319
+        }
320
+      })
324
     },
321
     },
325
     changeClass(val) {
322
     changeClass(val) {
326
       this.classOptions.map((item) => {
323
       this.classOptions.map((item) => {