bug

project/qujing/app/AppLearningStatistics/AppLearningStatistics.vue

@@ -6,13 +6,20 @@
     <template slot="content">
       <ai-card title="关键数据">
         <template #right>
+          <el-radio-group v-model="search1.dateRange" size="small" @change="getStatisticsKeyData">
+            <el-radio-button label="0">今天</el-radio-button>
+            <el-radio-button label="1">本周</el-radio-button>
+            <el-radio-button label="2">本月</el-radio-button>
+          </el-radio-group>
           <el-date-picker
-            v-model="today"
+            style="width: 240px"
+            v-model="search1.date"
             value-format="yyyy-MM-dd"
-            :clearable="false"
+            @change="getStatisticsKeyData"
-            type="date"
+            type="daterange"
-            size="small"
+            start-placeholder="开始日期"
-            placeholder="请选择开始日期">
+            end-placeholder="结束日期"
+            size="small">
           </el-date-picker>
         </template>
         <template #content>
@@ -49,21 +56,9 @@
             <div class="statistic-item">
               <h2>考试人数</h2>
               <div class="bottom">
-                <div class="bottom-item">
+                <div class="bottom-item" v-for="(item, index) in statisticsKeyData" :key="index">
-                  <h3>2131</h3>
+                  <h3>{{ item }}</h3>
-                  <p>视频课程</p>
+                  <p>{{ index }}</p>
-                </div>
-                <div class="bottom-item">
-                  <h3>2131</h3>
-                  <p>图文课程</p>
-                </div>
-                <div class="bottom-item">
-                  <h3>2131</h3>
-                  <p>视频课程</p>
-                </div>
-                <div class="bottom-item">
-                  <h3>2131</h3>
-                  <p>图文课程</p>
                 </div>
               </div>
             </div>
@@ -88,49 +83,67 @@
           <template #title>
             <div class="rank-title">
               <h2>热度榜单</h2>
-              <el-radio-group v-model="date" size="small">
+              <el-radio-group v-model="type" size="small">
-                <el-radio-button label="课程" ></el-radio-button>
+                <el-radio-button :label="0">课程</el-radio-button>
-                <el-radio-button label="考试"></el-radio-button>
+                <el-radio-button :label="1">考试</el-radio-button>
               </el-radio-group>
             </div>
           </template>
           <template #right>
-            <el-radio-group v-model="date" size="small">
+            <el-radio-group v-model="search2.dateRange" size="small" @change="getStatisticsHot">
-              <el-radio-button label="今天" ></el-radio-button>
+              <el-radio-button label="0" >今天</el-radio-button>
-              <el-radio-button label="本周"></el-radio-button>
+              <el-radio-button label="1">本周</el-radio-button>
-              <el-radio-button label="本月"></el-radio-button>
+              <el-radio-button label="2">本月</el-radio-button>
             </el-radio-group>
             <el-date-picker
-              v-model="today"
+              style="width: 240px"
+              v-model="search2.date"
               value-format="yyyy-MM-dd"
-              :clearable="false"
+              @change="getStatisticsHot"
-              type="date"
+              type="daterange"
-              size="small"
+              start-placeholder="开始日期"
-              placeholder="请选择开始日期">
+              end-placeholder="结束日期"
+              size="small">
             </el-date-picker>
           </template>
           <template #content>
             <ai-table
-              :tableData="tableData"
+              v-if="type === 0"
-              :col-configs="colConfigs"
+              :tableData="tableData1"
-              :total="total"
+              :col-configs="colConfigs1"
+              :isShowPagination="false"
               style="margin-top: 6px;"
-              :current.sync="search.current"
+              @getList="getStatisticsHot">
-              :size.sync="search.size"
+            </ai-table>
-              @getList="getList">
+            <ai-table
-              <el-table-column slot="options" align="center">
+              v-else
-                <template slot-scope="{ row }">
+              :tableData="tableData2"
-
+              :col-configs="colConfigs2"
-                </template>
+              style="margin-top: 6px;"
-              </el-table-column>
+              @getList="getStatisticsHot">
             </ai-table>
           </template>
         </ai-card>
         <ai-card class="resident" title="居民统计">
           <template #right>
+            <el-radio-group v-model="search4.dateRange" size="small" @change="getStatisticsHot">
+              <el-radio-button label="0" >今天</el-radio-button>
+              <el-radio-button label="1">本周</el-radio-button>
+              <el-radio-button label="2">本月</el-radio-button>
+            </el-radio-group>
+            <el-date-picker
+              style="width: 240px"
+              v-model="search4.date"
+              value-format="yyyy-MM-dd"
+              @change="getStatisticsHot"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              size="small">
+            </el-date-picker>
           </template>
           <template #content>
-            <div class="chart2" style="width: 100%; height: 340px"></div>
+            <div class="chart" style="width: 100%; height: 340px"></div>
           </template>
         </ai-card>
       </div>
@@ -152,19 +165,42 @@
     data () {
       return {
         date: '',
-        search: {
+        today: '',
-          current: 1,
+        search1: {
-          size: 10,
           title: '',
-          areaId: ''
+          areaId: '',
+          dateRange: '0',
+          date: []
         },
-        total: 10,
+        search2: {
-        colConfigs: [
+          areaId: '',
+          dateRange: '0',
+          date: []
+        },
+        search3: {
+          areaId: '',
+          dateRange: '0',
+          date: []
+        },
+        search4: {
+          areaId: '',
+          dateRange: '0',
+          date: []
+        },
+        type: 0,
+        colConfigs1: [
+          { type: 'index',  label: '排名', align: 'left' },
+          { prop: 'examinationName',  label: '课程', align: 'center' },
+          { prop: 'examinationNumber',  label: '学习人数', align: 'center' }
+        ],
+        colConfigs2: [
           { type: 'index',  label: '排名', align: 'left' },
           { prop: 'createUserName',  label: '课程', align: 'center' },
           { prop: 'createUserName',  label: '学习人数', align: 'center' }
         ],
-        tableData: []
+        tableData1: [],
+        tableData2: [],
+        statisticsKeyData: {}
       }
     },
 
@@ -172,52 +208,87 @@
       ...mapState(['user'])
     },
 
-    created() {
+    created () {
-      this.search.areaId = this.user.info.areaId
+      this.search1.areaId = this.user.info.areaId
-      this.getList()
+      this.getStatisticsKeyData()
+      this.getStatisticsHot()
     },
 
     methods: {
-      getList() {
+      getStatisticsKeyData () {
-        this.instance.post(`/app/appmarketingactivityinfo/list`, null, {
+        this.instance.post(`/app/appexaminationinfo/statisticsKeyData`, null, {
           params: {
-            ...this.search
+            ...this.search1,
+            beginDate: this.search1.date[0],
+            endDate: this.search1.date[1]
           }
         }).then(res => {
           if (res.code == 0) {
-            this.tableData = res.data.records
+            this.statisticsKeyData = res.data
-            this.total = res.data.total
           }
         })
       },
 
-      remove (id) {
+      getStatisticsHot () {
-        this.$confirm('确定删除该活动？').then(() => {
+        this.instance.post(`/app/appexaminationinfo/statisticsHot`, null, {
-          this.instance.post(`/app/appmarketingactivityinfo/delete?id=${id}`).then(res => {
+          params: {
-            if (res.code == 0) {
+            ...this.search2,
-              this.$message.success('删除成功！')
+            size: 20
-              this.getList()
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData1 = res.data
+          }
+        })
+      },
+
+      initPieChart (data) {
+        let chart = echarts.init(document.querySelector('.chart'))
+        const option = {
+          tooltip: {},
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          legend: {
+            right: '5%',
+            top: 'center',
+            orient: 'vertical',
+            formatter: function(name) {
+              let data = option.series[0].data
+              let total = 0
+              let tarValue = 0
+              for (let i = 0, l = data.length; i < l; i++) {
+                total += data[i].value
+                if (data[i].name == name) {
+                  tarValue = data[i].value
+                }
+              }
+              let p = total === 0 ? 0 : (tarValue / total * 100).toFixed(2)
+              return name + '：' + tarValue + ' ' + p + '%'
             }
-          })
+          },
-        })
+          series: [
-      },
+            {
+              type: 'pie',
+              radius: '50%',
+              data: data.map(v => {
+                return {
+                  value: v.c,
+                  name: v.status
+                }
+              }),
+              label : {
+                normal : {
+                formatter: '{b}：({d}%)',
+                textStyle : {
+                  fontWeight : 'normal',
+                    fontSize : 15
+                  }
+                }
+              }
+            }
+          ]
+        }
 
-      toDetail (id) {
+        chart.setOption(option)
-        this.$emit('change', {
-          type: 'Detail',
-          params: {
-            id: id || ''
-          }
-        })
-      },
-
-      toAdd(id) {
-        this.$emit('change', {
-          type: 'Add',
-          params: {
-            id: id || ''
-          }
-        })
       }
     }
   }
@@ -253,7 +324,7 @@
       }
 
       .resident {
-        width: 500px;
+        width: 560px;
         margin-left: 20px;
       }
     }
@@ -298,6 +369,7 @@
 
         p {
           margin-top: 10px;
+          word-break: keep-all;
           color: #777;
           font-size: 14px;
         }