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

src/api/dashboard.js

@@ -24,3 +24,11 @@ export const getStudentclassTotalList = (params) => request({
 export const getStudentAgeTotalList = (params) => request({
   url: '/admin/stat/student-total-age', params
 })
+/**
+ * 各培训签到率列表
+ * @param {*} params
+ * @returns
+ */
+export const getSigninRatioList = (params) => request({
+  url: '/admin/stat/signin-ratio', params
+})

src/components/ECharts/Pie.vue

@@ -14,8 +14,8 @@ export default {
       default: () => ({})
     },
     value: {
-      type: Object,
-      default: () => ({})
+      type: Array,
+      default: () => ([])
     },
     loading: Boolean
   },
@@ -43,13 +43,7 @@ export default {
             name: '年龄段',
             type: 'pie',
             radius: '50%',
-            data: [
-              { value: 1048, name: '20~25' },
-              { value: 735, name: '25~30' },
-              { value: 580, name: '30~35' },
-              { value: 484, name: '35~40' },
-              { value: 300, name: '40+' }
-            ],
+            data: this.value,
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,

src/views/dashboard/index.vue

@@ -9,7 +9,7 @@
 
     <el-row class="sec" type="flex" justify="space-between" :gutter="20">
       <el-col :span="12">
-        <el-card style="height:488px">
+        <el-card style="height:496px">
           <div slot="header">
             <span>各学期总人数柱状图</span>
           </div>
@@ -17,7 +17,7 @@
         </el-card>
       </el-col>
       <el-col :span="12">
-        <el-card style="height:488px">
+        <el-card style="height:496px">
           <div slot="header">
             <span>班级人数列表</span>
           </div>
@@ -50,30 +50,13 @@
 
     <el-row class="sec" type="flex" justify="space-between" :gutter="20">
       <el-col :span="12">
-        <el-card>
-          <div slot="header">
-            <span>{{ radio2 }}签到率折线图</span>
-          </div>
-          <el-radio-group v-model="radio2" style="margin-right:32px" @change="handleChangeDate">
-            <el-radio-button label="每日" />
-            <el-radio-button label="每周" />
-            <el-radio-button label="每月" />
-          </el-radio-group>
-          <line-chart :value="lineData" />
-        </el-card>
-      </el-col>
-      <el-col :span="11">
-        <el-card>
+        <el-card style="height:496px">
           <div slot="header">
             <span>年龄分布图</span>
           </div>
-          <el-radio-group v-model="radio1" style="margin-right:32px" @change="handleChange">
-            <el-radio-button label="学期" />
-            <el-radio-button label="班级" />
-          </el-radio-group>
-          <div v-if="radio1==='学期'" style="display: inline-block;">
+          <div style="display: inline-block;">
             学期名称：
-            <el-select v-model="termId" filterable placeholder="请选择" @change="changeTerm">
+            <el-select v-model="termId2" filterable placeholder="请选择" @change="changeTermAge">
               <el-option
                 v-for="item in options"
                 :key="item.termId"
@@ -82,24 +65,26 @@
               />
             </el-select>
           </div>
-          <div v-else style="display: inline-block;">
-            班级名称：
-            <el-select v-model="classId" filterable placeholder="请选择" @change="changeClass">
-              <el-option
-                v-for="item in classOptions"
-                :key="item.classId"
-                :label="item.name"
-                :value="item.classId"
-              />
-            </el-select>
+          <pie-chart :option="current" :value="ageData" style="margin-top:32px" />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card style="height:496px">
+          <div slot="header">
+            <span>{{ radio }}签到率折线图</span>
           </div>
-          <pie-chart :option="current" style="margin-top:32px" />
+          <el-radio-group v-model="radio" style="margin-right:32px" @change="handleChangeDate">
+            <el-radio-button label="每日" />
+            <el-radio-button label="每周" />
+            <el-radio-button label="每月" />
+          </el-radio-group>
+          <line-chart :value="lineData" />
         </el-card>
       </el-col>
     </el-row>
     <el-row class="sec" type="flex" justify="space-between" :gutter="20">
-      <el-col :span="12">
-        <el-card>
+      <el-col :span="24">
+        <el-card style="height:496px">
           <div slot="header">
             <span>各培训签到率柱状图</span>
           </div>
@@ -114,7 +99,7 @@
 import { mapGetters } from 'vuex'
 import { getSchoolTermList } from '@/api/schoolTerm'
 import { getSchoolClassList } from '@/api/schoolClass'
-import { getStudentTermTotalList, getStudentclassTotalList, getStudentAgeTotalList } from '@/api/dashboard'
+import { getStudentTermTotalList, getStudentclassTotalList, getStudentAgeTotalList, getSigninRatioList } from '@/api/dashboard'
 
 export default {
   name: 'Dashboard',
@@ -127,10 +112,10 @@ export default {
   data() {
     return {
       total: { reg: 972 },
-      radio1: '学期',
-      radio2: '每日',
+      radio: '每日',
       options: [],
       termId: undefined,
+      termId2: undefined,
       current: { name: undefined },
       classId: undefined,
       lineData: [],
@@ -225,19 +210,17 @@ export default {
         }
       ],
       termData: [],
-      signData: [
-        ['2021年十月第一次签到', '2021年十月第二次签到', '2021年十月第三次签到', '2021年十一月第一次签到', '2021年十二月第二次签到', '2022年一月第一次签到', '2022年二月第一次签到', '2022年二月第二次签到',
-          '2021年十月第一次签到', '2021年十月第二次签到', '2021年十月第三次签到', '2021年十一月第一次签到', '2021年十二月第二次签到', '2022年一月第一次签到', '2022年二月第一次签到', '2022年二月第二次签到',
-          '2021年十月第一次签到', '2021年十月第二次签到', '2021年十月第三次签到', '2021年十一月第一次签到', '2021年十二月第二次签到', '2022年一月第一次签到', '2022年二月第一次签到', '2022年二月第二次签到'
-        ],
-        [97, 25, 50, 70, 22, 90, 77, 86, 97, 25, 50, 70, 22, 90, 77, 86, 97, 25, 50, 70, 22, 90, 77, 86]
-      ],
+      signData: [],
 
+      // 表格分页数据
       allData: [],
       tableData: [],
       pageSize: 5,
       currentPage: 1,
-      Total: 0 // 条目总数
+      Total: 0, // 条目总数
+
+      // 年龄分布数据
+      ageData: []
     }
   },
   computed: {
@@ -248,6 +231,7 @@ export default {
       this.options = res.data.records
       this.current.name = res.data.records[0].name
       this.termId = res.data.records[0].termId
+      this.termId2 = res.data.records[0].termId
       getStudentclassTotalList({ termId: this.termId }).then(res => {
         this.Total = res.data.length
         this.allData = res.data
@@ -257,6 +241,12 @@ export default {
           }
         }
       })
+      getStudentAgeTotalList({ termId: this.termId2 }).then((res) => {
+        const list = res.data
+        list.map(item => {
+          this.ageData.push({ value: parseInt(item.value), name: item.key })
+        })
+      })
     })
     getSchoolClassList().then((res) => {
       this.classOptions = res.data.records
@@ -272,8 +262,15 @@ export default {
       this.termData.push(arr1)
       this.termData.push(arr2)
     })
-    getStudentAgeTotalList().then((res) => {
-
+    getSigninRatioList().then(res => {
+      const arr1 = []
+      const arr2 = []
+      res.data.map(item => {
+        arr1.push(item.key)
+        arr2.push(item.value)
+      })
+      this.signData.push(arr1)
+      this.signData.push(arr2)
     })
   },
   methods: {
@@ -294,16 +291,7 @@ export default {
         case '每月': this.lineData = this.monthData; break
         default: break
       }
-      this.radio2 = val
-    },
-    handleChange(val) {
-      if (val === '学期') {
-        this.termId = this.options[0].termId
-        this.current.name = this.options[0].name
-      } else {
-        this.classId = this.classOptions[0].classId
-        this.current.name = this.classOptions[0].name
-      }
+      this.radio = val
     },
     changeTerm(val) {
       getStudentclassTotalList({ termId: val }).then(res => {
@@ -316,11 +304,20 @@ export default {
           }
         }
       })
-      // this.options.map((item) => {
-      //   if (item.termId === val) {
-      //     this.current.name = item.name
-      //   }
-      // })
+    },
+    changeTermAge(val) {
+      this.ageData = []
+      getStudentAgeTotalList({ termId: val }).then((res) => {
+        const list = res.data
+        list.map(item => {
+          this.ageData.push({ value: parseInt(item.value), name: item.key })
+        })
+      })
+      this.options.map((item) => {
+        if (item.termId === val) {
+          this.current.name = item.name
+        }
+      })
     },
     changeClass(val) {
       this.classOptions.map((item) => {