From cea33b109fac8a3127a7104085b08ca50b0dd170 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 15 Feb 2023 14:45:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppLearningStatistics.vue                 | 284 +++++++++++++++---
 1 file changed, 240 insertions(+), 44 deletions(-)

diff --git a/project/qujing/app/AppLearningStatistics/AppLearningStatistics.vue b/project/qujing/app/AppLearningStatistics/AppLearningStatistics.vue
index 76ebabfb..a1bea1fe 100644
--- a/project/qujing/app/AppLearningStatistics/AppLearningStatistics.vue
+++ b/project/qujing/app/AppLearningStatistics/AppLearningStatistics.vue
@@ -1,48 +1,144 @@
 <template>
-  <ai-list class="notice">
+  <ai-list class="AppLearningStatistics">
     <template slot="title">
-      <ai-title title="学习统计" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance"></ai-title>
+      <ai-title title="学习统计" isShowBottomBorder></ai-title>
     </template>
     <template slot="content">
-      <ai-search-bar class="search-bar">
-        <template #left>
-        </template>
+      <ai-card title="关键数据">
         <template #right>
-          <el-input
-            v-model="search.title"
-            class="search-input"
+          <el-date-picker
+            v-model="today"
+            value-format="yyyy-MM-dd"
+            :clearable="false"
+            type="date"
             size="small"
-            v-throttle="() => { search.current = 1, getList() }"
-            placeholder="请输入标题"
-            clearable
-            @clear="search.current = 1, getList()"
-            suffix-icon="iconfont iconSearch">
-          </el-input>
+            placeholder="请选择开始日期">
+          </el-date-picker>
         </template>
-      </ai-search-bar>
-      <ai-table
-        :tableData="tableData"
-        :col-configs="colConfigs"
-        :total="total"
-        style="margin-top: 6px;"
-        :current.sync="search.current"
-        :size.sync="search.size"
-        @getList="getList">
-        <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
-          <template slot-scope="{ row }">
-            <div class="table-options">
-              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
-              <el-button type="text" @click="remove(row.id)">删除</el-button>
+        <template #content>
+          <div class="statistic ">
+            <div class="statistic-item">
+              <h2>课程数量</h2>
+              <div class="bottom">
+                <div class="bottom-item">
+                  <h3>2131</h3>
+                  <p>视频课程</p>
+                </div>
+                <div class="bottom-item">
+                  <h3>2131</h3>
+                  <p>图文课程</p>
+                </div>
+              </div>
+            </div>
+            <div class="statistic-item">
+              <h2>课程学习人数</h2>
+              <div class="bottom">
+                <div class="bottom-item">
+                  <h3>253000</h3>
+                </div>
+              </div>
+            </div>
+            <div class="statistic-item">
+              <h2>课程累计学习时长</h2>
+              <div class="bottom">
+                <div class="bottom-item">
+                  <h3>2131</h3>
+                </div>
+              </div>
+            </div>
+            <div class="statistic-item">
+              <h2>考试人数</h2>
+              <div class="bottom">
+                <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 class="bottom-item">
+                  <h3>2131</h3>
+                  <p>图文课程</p>
+                </div>
+              </div>
+            </div>
+            <div class="statistic-item">
+              <h2>获得证书人数</h2>
+              <div class="bottom">
+                <div class="bottom-item">
+                  <h3>2131</h3>
+                  <p>学习</p>
+                </div>
+                <div class="bottom-item">
+                  <h3>2131</h3>
+                  <p>考试</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ai-card>
+      <div class="middle">
+        <ai-card class="rank-card" title="热度榜单">
+          <template #title>
+            <div class="rank-title">
+              <h2>热度榜单</h2>
+              <el-radio-group v-model="date" size="small">
+                <el-radio-button label="课程" ></el-radio-button>
+                <el-radio-button label="考试"></el-radio-button>
+              </el-radio-group>
             </div>
           </template>
-        </el-table-column>
-      </ai-table>
+          <template #right>
+            <el-radio-group v-model="date" size="small">
+              <el-radio-button label="今天" ></el-radio-button>
+              <el-radio-button label="本周"></el-radio-button>
+              <el-radio-button label="本月"></el-radio-button>
+            </el-radio-group>
+            <el-date-picker
+              v-model="today"
+              value-format="yyyy-MM-dd"
+              :clearable="false"
+              type="date"
+              size="small"
+              placeholder="请选择开始日期">
+            </el-date-picker>
+          </template>
+          <template #content>
+            <ai-table
+              :tableData="tableData"
+              :col-configs="colConfigs"
+              :total="total"
+              style="margin-top: 6px;"
+              :current.sync="search.current"
+              :size.sync="search.size"
+              @getList="getList">
+              <el-table-column slot="options" align="center">
+                <template slot-scope="{ row }">
+
+                </template>
+              </el-table-column>
+            </ai-table>
+          </template>
+        </ai-card>
+        <ai-card class="resident" title="居民统计">
+          <template #right>
+          </template>
+          <template #content>
+            <div class="chart2" style="width: 100%; height: 340px"></div>
+          </template>
+        </ai-card>
+      </div>
     </template>
   </ai-list>
 </template>
 
 <script>
-  import {mapState} from 'vuex'
   export default {
     name: 'AppLearningStatistics',
     label: '学习统计',
@@ -54,31 +150,24 @@
 
     data () {
       return {
+        date: '',
         search: {
           current: 1,
           size: 10,
           title: '',
-          areaId: ''
+          status: ''
         },
         total: 10,
         colConfigs: [
-          { prop: 'title',  label: '题目', align: 'left' },
-          { prop: 'createUserName',  label: '证书名称', align: 'center' },
-          { prop: 'createUserName',  label: '类型', align: 'center' },
-          { prop: 'createUserName',  label: '已颁发数量', align: 'center' },
-          { prop: 'createUserName',  label: '累积学习时（分钟）', align: 'center' },
-          { prop: 'createUserName',  label: '通过考试', align: 'center' }
+          { type: 'index',  label: '排名', align: 'left' },
+          { prop: 'createUserName',  label: '课程', align: 'center' },
+          { prop: 'createUserName',  label: '学习人数', align: 'center' }
         ],
         tableData: []
       }
     },
 
-    computed: {
-      ...mapState(['user'])
-    },
-
-    mounted() {
-      this.search.areaId = this.user.info.areaId
+    created() {
       this.getList()
     },
 
@@ -129,4 +218,111 @@
 </script>
 
 <style lang="scss" scoped>
+  .AppLearningStatistics {
+    .right-search {
+      display: flex;
+      align-items: center;
+
+      div {
+        display: flex;
+        align-items: center;
+      }
+
+      span {
+        margin-right: 10px;
+        font-size: 14px;
+        color: #686868;
+      }
+
+      div:first-child {
+        margin-right: 20px;
+      }
+    }
+
+    .middle {
+      display: flex;
+
+      .rank-card {
+        flex: 1;
+      }
+
+      .resident {
+        width: 500px;
+        margin-left: 20px;
+      }
+    }
+
+    .rank-title {
+      display: flex;
+      align-items: center;
+
+      h2 {
+        margin-right: 32px;
+        color: #222;
+        font-size: 16px;
+        font-weight: 700;
+      }
+    }
+
+    :deep(.ai-list__content--right .ai-list__content--right-wrapper ) {
+      padding: 0!important;
+      background: transparent!important;
+      border-radius: 0!important;
+      box-shadow: none!important;
+    }
+
+    .statistic {
+      display: flex;
+      justify-content: space-between;
+
+      .statistic-item {
+        text-align: center;
+        line-height: 1;
+
+        h2 {
+          color: #333;
+          font-weight: 600;
+          font-size: 16px;
+        }
+
+        h3 {
+          font-size: 22px;
+          color: #FFA322;
+        }
+
+        p {
+          margin-top: 10px;
+          color: #777;
+          font-size: 14px;
+        }
+
+        .bottom {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 30px 0 10px;
+
+          .bottom-item {
+            flex: 1;
+            margin-right: 30px;
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+    }
+
+    :deep( .ai-list__content--right ){
+      flex: 1;
+      min-width: 0;
+      margin-left: 1px;
+      box-shadow: none;
+
+      .ai-list__content--right-wrapper {
+        width: 100%;
+      }
+    }
+  }
 </style>