Browse Source

学习记录

shilipojs 2 years ago
parent
commit
1dfdc2b770

+ 1 - 1
src/views/career/bigdataSelectCourse/report.vue

@@ -2,7 +2,7 @@
   <div class="report f16">
     <p class="mb10">{{ nickName }}同学:</p>
     <p class="mb10">您好!</p>
-    <div style="letterSpacing:10px">
+    <div style="letterSpacing:1px">
       <span>您所在的学校开设了</span>
       <span v-for="item in stepOne">{{ `${item.groupName}(${item.classCount}个班级)(${item.count})` }},</span>
       <span>共计{{ stepOne.length }}个组合。</span>

+ 25 - 680
src/views/questioncenter/LearnHelper.vue

@@ -18,167 +18,7 @@
       <!-- 错题本 -->
       <mistake v-if="tabActive == 1"></mistake>
       <!-- 学习记录 -->
-      <div class="record_content" v-show="tabActive == 2">
-        <div class="record_contian">
-          <div class="tit">数据统计(总)</div>
-          <div style="display: flex; justify-content: space-between">
-            <div class="count_item">
-              <img src="" alt="" />
-              <div class="count_intro">
-                <p style="color: #ff974d">{{ learnInfo.videoCount }}</p>
-                <p class="gary">共看完视频(节)</p>
-              </div>
-            </div>
-            <div class="count_item">
-              <img src="" alt="" />
-              <div class="count_intro">
-                <p style="color: #89928a">{{ learnInfo.videoMinutes }}</p>
-                <p class="gary">共看完视频时长(分钟)</p>
-              </div>
-            </div>
-            <div class="count_item">
-              <img src="" alt="" />
-              <div class="count_intro">
-                <p style="color: #86dcf2">{{ learnInfo.questionCount }}</p>
-                <p class="gary">共完成习题</p>
-              </div>
-            </div>
-            <div class="count_item">
-              <img src="" alt="" />
-              <div class="count_intro">
-                <p style="color: #ee625c">
-                  {{
-                    learnInfo.correctPercent == "" ? 0 : learnInfo.correctPercent
-                  }}
-                </p>
-                <p class="gary">正确率</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="record_contian">
-          <div class="tit">数据统计(周)</div>
-          <el-form
-            :inline="true"
-            :model="dateForm"
-            :rules="dateRule"
-            ref="ruleForm"
-            class="demo-form-inline"
-          >
-            <div class="date_contain">
-              <el-form-item label="日期" prop="year">
-                <el-select
-                  v-model="dateForm.year"
-                  placeholder="年份"
-                  size="small"
-                >
-                  <el-option
-                    v-for="(item, index) in dateYears"
-                    :key="index"
-                    :value="item"
-                    :label="item + '年'"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="" prop="month">
-                <el-select
-                  v-model="dateForm.month"
-                  placeholder="月份"
-                  size="small"
-                >
-                  <el-option
-                    v-for="(item, index) in dateMonth"
-                    :key="index"
-                    :value="item"
-                    :label="item + '月'"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="周" prop="week">
-                <el-select
-                  v-model="dateForm.week"
-                  placeholder="第几周"
-                  size="small"
-                >
-                  <el-option
-                    v-for="(item, index) in dateWeek"
-                    :key="index"
-                    :value="item"
-                    :label="'第' + item + '周'"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-
-              <el-button
-                style="margin-left: 24px; width: 100px; height: 40px"
-                type="primary"
-                icon="el-icon-search"
-                @click="searchData"
-              ></el-button>
-            </div>
-          </el-form>
-          <div style="display: flex; justify-content: space-around">
-            <div style="width: 300px; height: 269px" id="echarts_quecount"></div>
-            <div style="width: 320px; height: 269px" id="echarts_queBySub"></div>
-            <div
-              style="width: 300px; height: 269px"
-              id="echarts_videocount"
-            ></div>
-            <div style="width: 320px; height: 269px" id="echarts_vidBysub"></div>
-          </div>
-        </div>
-
-        <div class="record_contian">
-          <div class="tit">学习记录</div>
-          <div class="video_contian" v-if="videoRecord.length > 0">
-            <div class="video_item" v-for="item in videoRecord" :key="item.id">
-              <img :src="item.pict" alt="" />
-              <p>{{ item.title }}</p>
-              <p>
-                {{ item.percent > 90 ? "已看完" : "观看" + item.percent + "%" }}
-              </p>
-            </div>
-          </div>
-          <div class="empty" v-else>
-            <img src="@/assets/images/icon_data.png" />
-            <span>没有信息</span>
-          </div>
-        </div>
-        <div class="record_contian">
-          <div class="tit">知识点诊断记录</div>
-          <div>
-            <el-table :data="knowRecord" style="width: 100%">
-              <el-table-column prop="day" label="日期"> </el-table-column>
-              <el-table-column prop="coursename" label="科目"> </el-table-column>
-              <el-table-column prop="knowledgeName" label="知识点" width="500">
-              </el-table-column>
-              <el-table-column label="用时">
-                <template slot-scope="scope">
-                  {{
-                    scope.row.seconds != "null"
-                      ? Math.ceil(scope.row.seconds / 60) + "分钟"
-                      : scope.row.seconds
-                  }}
-                </template>
-              </el-table-column>
-              <el-table-column prop="wrongs" label="正确率">
-                <template slot-scope="scope">
-                  {{ (scope.row.rights / 10) * 100 }}%
-                </template>
-              </el-table-column>
-              <template slot="empty">
-                <div class="empty">
-                  <img src="@/assets/images/icon_data.png" />
-                  <span>没有信息</span>
-                </div>
-              </template>
-            </el-table>
-          </div>
-        </div>
-      </div>
+      <learn-record v-if="tabActive == 2"></learn-record>
     </div>
 
   </div>
@@ -186,532 +26,66 @@
 <script>
 import Collect from './components/collect'
 import Mistake from './components/mistake'
-import {
-  summary,
-  questionStatsByDay,
-  videoStatsBySubject,
-  videoStatsByDay,
-  questionStatsBySubject,
-  videoWatchRecords,
-  knowRecords,
-  queCancelCollect,
-  queCollect,
-} from "@/api/webApi/webQue.js";
-const echarts = require("echarts/lib/echarts");
-require("echarts/lib/component/title");
-require("echarts/lib/component/tooltip");
-require("echarts/lib/component/grid");
-require("echarts/lib/component/legend");
-require("echarts/lib/chart/line");
-require("echarts/lib/chart/pie");
-var date = new Date();
-var myChart1;
-var myChart2;
-var myChart3;
-var myChart4;
-var flag = 1;
+import LearnRecord from './components/learn-record'
 export default {
-  components: {Collect,Mistake},
+  components: { Collect, Mistake, LearnRecord },
   data() {
     return {
       tabActive: 0,
       tabList: [
         {
-          label:'收藏夹',
-          value:0
+          label: '收藏夹',
+          value: 0
         },
         {
-          label:'错题本',
-          value:1
+          label: '错题本',
+          value: 1
         },
         {
-          label:'学习记录',
-          value:2
+          label: '学习记录',
+          value: 2
         }
       ],
-      dateYears: [2021, 2020],
-      dateMonth: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-      dateWeek: [1, 2, 3, 4, 5],
-      form: {
-        type: "",
-        subjectName: "",
-        qtype: "",
-        worngSubjectName: "",
-        wrongType: "",
-      },
-      types: [
-        { type: "question", name: "试题收藏" },
-        { type: "paper", name: "试卷收藏" },
-      ],
-      subjects: [],
-      queTypes: [],
-      collectQue: [],
-      collectPaper: [],
-      pageSize: 10,
-      pageNum: 1,
-      total: 0,
-      learnInfo: {},
-      dateForm: {
-        year: date.getFullYear(),
-        month: date.getMonth() + 1,
-        week: date.getDay / 7 > 0 ? date.getDay / 7 : 5,
-      },
-      dateRule: {
-        year: [{ required: true, message: "请选择年份", trigger: "change" }],
-        month: [{ required: true, message: "请选择月份", trigger: "change" }],
-        week: [{ required: true, message: "请选择周数", trigger: "change" }],
-      },
-      knowRecord: [],
-      videoRecord: [],
-      // 数据统计-做题数量
-      queCountOption: {
-        title: {
-          text: "做题数目(道数)",
-          textStyle: {
-            color: "#676767",
-            fontWeight: "400",
-            fontSize: 16,
-          },
-        },
-        tooltip: {
-          trigger: "axis",
-        },
-        xAxis: {
-          type: "category",
-          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周七"],
-          axisTick: {
-            show: false,
-          },
-        },
-        yAxis: {
-          type: "value",
-          axisTick: {
-            show: false,
-          },
-          axisLine: { show: false },
-        },
-        series: [
-          {
-            data: [0, 0, 0, 0, 0, 0, 0],
-            type: "line",
-            name: "做题数",
-            lineStyle: {
-              color: "#47c6a2",
-              width: 2,
-            },
-            itemStyle: {
-              normal: {
-                color: "#47c6a2",
-                borderColor: "#47c6a2", //拐点边框颜色
-              },
-            },
-          },
-        ],
-      },
-      // 数据统计-视频时长
-      videoCountOption: {
-        title: {
-          text: "看视频时长(分钟)",
-          textStyle: {
-            color: "#676767",
-            fontWeight: "400",
-            fontSize: 16,
-          },
-        },
-        tooltip: {
-          trigger: "axis",
-        },
-        xAxis: {
-          type: "category",
-          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周七"],
-          axisTick: {
-            show: false,
-          },
-        },
-        yAxis: {
-          type: "value",
-          axisTick: {
-            show: false,
-          },
-          axisLine: { show: false },
-        },
-        series: [
-          {
-            data: [0, 0, 0, 0, 0, 0, 0],
-            type: "line",
-            name: "观看时长",
-            lineStyle: {
-              color: "#2EC7C9",
-              width: 2,
-            },
-            itemStyle: {
-              normal: {
-                color: "#2EC7C9",
-                borderColor: "#2EC7C9", //拐点边框颜色
-              },
-            },
-          },
-        ],
-      },
-      // 数据统计-做题数量 根据科目
-      queSubCount: {
-        title: {
-          text: "学科分类数据(道数)",
-          textStyle: {
-            color: "#676767",
-            fontWeight: "400",
-            fontSize: 16,
-          },
-        },
-        tooltip: {
-          trigger: "item",
-        },
-        color: [
-          "#5B8FF9",
-          "#5AD8A6",
-          "#DEEAFF",
-          "#FFE18B",
-          "#FEB3A2",
-          "#BAEF83",
-          "#DBC7FA",
-          "#FFE6D2",
-          "#76DDDC",
-        ],
-        legend: {
-          orient: "vertical",
-          left: "right",
-          align: "left",
-          icon: "circle",
-          top: "20",
-        },
-        series: [
-          {
-            name: "做题数",
-            type: "pie",
-            radius: "70%",
-            data: [
-              { value: 0, name: "语文" },
-              { value: 0, name: "数学" },
-              { value: 0, name: "英语" },
-              { value: 0, name: "物理" },
-              { value: 0, name: "化学" },
-              { value: 0, name: "生物" },
-              { value: 0, name: "历史" },
-              { value: 0, name: "地理" },
-              { value: 0, name: "政治" },
-            ],
-            left: "-80",
-            label: {
-              position: "inside",
-              formatter: "{c}",
-              color: "#000000",
-            },
-            labelLine: {
-              show: false,
-            },
-          },
-        ],
-      },
-      // 数据统计-视频时长 根据科目
-      vidSubCount: {
-        title: {
-          text: "学科分类数据(分钟)",
-          textStyle: {
-            color: "#676767",
-            fontWeight: "400",
-            fontSize: 16,
-          },
-        },
-        tooltip: {
-          trigger: "item",
-        },
-        color: [
-          "#5B8FF9",
-          "#5AD8A6",
-          "#DEEAFF",
-          "#FFE18B",
-          "#FEB3A2",
-          "#BAEF83",
-          "#DBC7FA",
-          "#FFE6D2",
-          "#76DDDC",
-        ],
-        legend: {
-          orient: "vertical",
-          left: "right",
-          align: "left",
-          icon: "circle",
-          top: "20",
-        },
-        series: [
-          {
-            name: "做题时长",
-            type: "pie",
-            radius: "70%",
-            data: [
-              { value: 0, name: "语文" },
-              { value: 0, name: "数学" },
-              { value: 0, name: "英语" },
-              { value: 0, name: "物理" },
-              { value: 0, name: "化学" },
-              { value: 0, name: "生物" },
-              { value: 0, name: "历史" },
-              { value: 0, name: "地理" },
-              { value: 0, name: "政治" },
-            ],
-            label: {
-              position: "inside",
-              formatter: "{c}",
-              color: "#000000",
-            },
-            left: "-80",
-            labelLine: {
-              show: false,
-            },
-          },
-        ],
-      },
-    };
+    }
   },
   created() {
     // 设置默认高亮
     this.tabActive = this.$route.query.tabActive
       ? this.$route.query.tabActive
-      : 0;
-
-      this.switchTab(this.tabActive);
+      : 0
+    this.switchTab(this.tabActive)
   },
   methods: {
     switchTab(index) {
-      this.tabActive = index;
-      if (this.tabActive == 1) {
-
-      } else if (this.tabActive == 2 && flag == 1) {
-        let queCountChart = document.getElementById("echarts_quecount");
-        myChart1 = echarts.init(queCountChart);
-        myChart1.setOption(this.queCountOption);
-
-        let videoCountChart = document.getElementById("echarts_videocount");
-        myChart2 = echarts.init(videoCountChart);
-        myChart2.setOption(this.videoCountOption);
-
-        let queBySubChart = document.getElementById("echarts_queBySub");
-        myChart3 = echarts.init(queBySubChart);
-        myChart3.setOption(this.queSubCount);
-
-        let vidBySubChart = document.getElementById("echarts_vidBysub");
-        myChart4 = echarts.init(vidBySubChart);
-        myChart4.setOption(this.vidSubCount);
-        flag++;
-      }
-      if (index == 2) {
-        this.getSummary();
-        this.searchData();
-      }
-    },
-    getSummary() {
-      summary().then((res) => {
-        this.learnInfo = res.data;
-        console.log(res);
-      });
-    },
-    // 数据统计-做题数量-按天
-    getQuestionStatsByDay() {
-      questionStatsByDay({
-        year: this.dateForm.year,
-        month: this.dateForm.month,
-        week: this.dateForm.week,
-      }).then((res) => {
-        let arr = [];
-        const kesArr = Object.keys(res.data).sort();
-        for (const key of kesArr) {
-          arr.push(res.data[key]);
-        }
-        this.queCountOption.series[0].data = arr;
-        myChart1.setOption(this.queCountOption);
-      });
-    },
-    // 数据统计-视频观看时长 - 按天
-    getVideoStatsByDay() {
-      videoStatsByDay({
-        year: this.dateForm.year,
-        month: this.dateForm.month,
-        week: this.dateForm.week,
-      }).then((res) => {
-        let arr = [];
-        const kesArr = Object.keys(res.data).sort();
-        for (const key of kesArr) {
-          arr.push(res.data[key]);
-        }
-        this.videoCountOption.series[0].data = arr;
-        myChart2.setOption(this.videoCountOption);
-      });
-    },
-    // 数据统计-视频观看时长 - 按学科
-    getVideoStatsBySubject() {
-      videoStatsBySubject({
-        year: this.dateForm.year,
-        month: this.dateForm.month,
-        week: this.dateForm.week,
-      }).then((res) => {
-        console.log(res);
-        if (Object.keys(res.data).length > 0) {
-          console.log(res);
-          let objArr = [];
-          for (const key in res.data) {
-            objArr.push({ name: key, value: res.data[key] });
-          }
-          console.log(objArr);
-          this.vidSubCount.series[0].data = objArr;
-          myChart4.setOption(this.vidSubCount);
-        } else {
-          this.vidSubCount.series[0].data = [
-            { value: 0, name: "语文" },
-            { value: 0, name: "数学" },
-            { value: 0, name: "英语" },
-            { value: 0, name: "物理" },
-            { value: 0, name: "化学" },
-            { value: 0, name: "生物" },
-            { value: 0, name: "历史" },
-            { value: 0, name: "地理" },
-            { value: 0, name: "政治" },
-          ];
-          myChart4.setOption(this.vidSubCount);
-        }
-      });
-    },
-    // 数据统计-做题数量 - 按学科
-    getQuestionStatsBySubject() {
-      questionStatsBySubject({
-        year: this.dateForm.year,
-        month: this.dateForm.month,
-        week: this.dateForm.week,
-      }).then((res) => {
-        if (Object.keys(res.data).length > 0) {
-          console.log(res);
-          let objArr = [];
-          for (const key in res.data) {
-            objArr.push({ name: key, value: res.data[key] });
-          }
-          console.log(objArr);
-          this.queSubCount.series[0].data = objArr;
-          myChart3.setOption(this.queSubCount);
-        } else {
-          this.queSubCount.series[0].data = [
-            { value: 0, name: "语文" },
-            { value: 0, name: "数学" },
-            { value: 0, name: "英语" },
-            { value: 0, name: "物理" },
-            { value: 0, name: "化学" },
-            { value: 0, name: "生物" },
-            { value: 0, name: "历史" },
-            { value: 0, name: "地理" },
-            { value: 0, name: "政治" },
-          ];
-          myChart3.setOption(this.queSubCount);
-        }
-      });
-    },
-    // 视频学习记录
-    getVideoRecord() {
-      videoWatchRecords({
-        year: this.dateForm.year,
-        month: this.dateForm.month,
-        week: this.dateForm.week,
-      }).then((res) => {
-        this.videoRecord = res.data;
-        console.log(res);
-      });
+      this.tabActive = index
     },
-    // 知识点诊断记录
-    getKnowRecords() {
-      knowRecords({
-        year: this.dateForm.year,
-        month: this.dateForm.month,
-        week: this.dateForm.week,
-      }).then((res) => {
-        this.knowRecord = res.data;
-        console.log(this.knowRecord);
-      });
-    },
-    searchData() {
-      console.log(this.dateForm);
-      this.$refs.ruleForm.validate((valid) => {
-        if (valid) {
-          this.getQuestionStatsByDay();
-          this.getVideoStatsByDay();
-          this.getQuestionStatsBySubject();
-          this.getVideoStatsBySubject();
-
-          this.getVideoRecord();
-          this.getKnowRecords();
-          /* this.getVideoStatsByDay();
-          this.getQuestionStatsBySubject(); */
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
-    },
-    toCollectQue(item) {
-      queCollect({ questionId: item.id }).then((res) => {
-        item.collect = !item.collect;
-        this.msgSuccess("收藏成功");
-        console.log(res);
-      });
-    },
-    toCancelCollectQue(item) {
-      queCancelCollect({ questionId: item.id }).then((res) => {
-        item.collect = !item.collect;
-        this.msgSuccess("取消收藏成功");
-        console.log(res);
-      });
-    },
-  },
-};
+  }
+}
 </script>
 <style scoped>
-.empty {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  font-size: 14px;
-  color: #909399;
-}
 .learn_container {
   padding: 20px;
   background: #f7f7f7;
   min-height: 100vh;
 }
+
 .header {
   margin-bottom: 16px;
 }
+
 .content {
   background: #fff;
   padding: 20px;
 }
-.record_content .record_contian {
-  border-radius: 8px;
-  margin-bottom: 20px;
-  background: #fff;
-  padding: 32px 28px;
-}
-.record_content .record_contian .tit {
-  color: #47c6a2;
-  margin-bottom: 36px;
-}
-.record_content .record_contian .count_item img {
-  margin-right: 16px;
-}
+
+
 .tab {
   display: flex;
   margin-bottom: 14px;
   border-bottom: 1px solid #dedede;
 }
-.delete > div:first-child > span {
-  color: #f44949;
-}
+
+
 .tab .tab_item {
   flex: 1;
   cursor: pointer;
@@ -723,9 +97,11 @@ export default {
   padding-bottom: 28px;
   position: relative;
 }
+
 .tab .tab_active {
   color: #47c6a2;
 }
+
 .tab .tab_active::after {
   content: "";
   height: 4px;
@@ -739,39 +115,8 @@ export default {
 
 
 
-.gary {
-  margin-top: 8px;
-  font-size: 16px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #7a7a7a;
-  line-height: 22px;
-}
-.date_contain > span {
-  display: inline-block;
-  border-radius: 1px;
-  margin-right: 16px;
-  font-size: 16px;
-}
 
-.video_contian {
-  display: flex;
-}
-.video_contian img {
-  width: 200px;
-}
-.video_contian .video_item {
-  margin-right: 80px;
-}
-.video_contian .video_item > p:first-child {
-  color: #4a4a4a;
-  font-size: 14px;
-  margin-top: 7px;
-  margin-bottom: 4px;
-}
-.video_contian .video_item > p:last-child {
-  font-size: 12px;
-  color: #bdbdbd;
-}
+
+
 </style>
 

+ 2 - 2
src/views/questioncenter/PaperPreview.vue

@@ -5,11 +5,11 @@
         <div class="paper_title">{{ paperName }}</div>
         <div class="operation">
           <div class="shoucan">
-            <div v-if="collectFlag" @click="cancelCollect()">
+            <div v-if="collectFlag" class="fx-row ai-center" @click="cancelCollect()">
               <img src="@/assets/images/icon_shoucang_s.png" alt="" />
               <span class="sc_text">已收藏</span>
             </div>
-            <div v-else @click="Collect()">
+            <div v-else @click="Collect()" class="fx-row ai-center">
               <img src="@/assets/images/icon_shoucang_n.png" alt="" />
               <span class="sc_text">收藏</span>
             </div>

+ 633 - 0
src/views/questioncenter/components/learn-record.vue

@@ -0,0 +1,633 @@
+<template>
+  <div class="record_content">
+    <div class="record_contian">
+      <div class="tit">数据统计(总)</div>
+      <div class="fx-row jc-between">
+        <div class="count_item">
+          <img src="" alt="" />
+          <div class="count_intro">
+            <p style="color: #ff974d">{{ learnInfo.videoCount }}</p>
+            <p class="gary">共看完视频(节)</p>
+          </div>
+        </div>
+        <div class="count_item">
+          <img src="" alt="" />
+          <div class="count_intro">
+            <p style="color: #89928a">{{ learnInfo.videoMinutes }}</p>
+            <p class="gary">共看完视频时长(分钟)</p>
+          </div>
+        </div>
+        <div class="count_item">
+          <img src="" alt="" />
+          <div class="count_intro">
+            <p style="color: #86dcf2">{{ learnInfo.questionCount }}</p>
+            <p class="gary">共完成习题</p>
+          </div>
+        </div>
+        <div class="count_item">
+          <img src="" alt="" />
+          <div class="count_intro">
+            <p style="color: #ee625c">
+              {{
+                learnInfo.correctPercent == "" ? 0 : learnInfo.correctPercent
+              }}
+            </p>
+            <p class="gary">正确率</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="record_contian">
+      <div class="tit">数据统计(周)</div>
+      <el-form
+        :inline="true"
+        :model="dateForm"
+        :rules="dateRule"
+        ref="ruleForm"
+        class="demo-form-inline"
+      >
+        <div class="date_contain">
+          <el-form-item label="日期" prop="year">
+            <el-select
+              v-model="dateForm.year"
+              placeholder="年份"
+              size="small"
+            >
+              <el-option
+                v-for="(item, index) in dateYears"
+                :key="index"
+                :value="item"
+                :label="item + '年'"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="" prop="month">
+            <el-select
+              v-model="dateForm.month"
+              placeholder="月份"
+              size="small"
+            >
+              <el-option
+                v-for="(item, index) in dateMonth"
+                :key="index"
+                :value="item"
+                :label="item + '月'"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="周" prop="week">
+            <el-select
+              v-model="dateForm.week"
+              placeholder="第几周"
+              size="small"
+            >
+              <el-option
+                v-for="(item, index) in dateWeek"
+                :key="index"
+                :value="item"
+                :label="'第' + item + '周'"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-button
+            style="margin-left: 24px; width: 100px; height: 40px"
+            type="primary"
+            icon="el-icon-search"
+            @click="searchData"
+          ></el-button>
+        </div>
+      </el-form>
+      <div style="display: flex; justify-content: space-around">
+        <mx-chart :options="queCountOption" width="360px" height="250px"></mx-chart>
+        <mx-chart :options="queSubCountOption" width="360px"  height="250px"></mx-chart>
+        <mx-chart :options="videoCountOption" width="360px"  height="250px"></mx-chart>
+        <mx-chart :options="vidSubCountOption" width="360px"  height="250px"></mx-chart>
+      </div>
+    </div>
+    <div class="record_contian">
+      <div class="tit">学习记录</div>
+      <div class="video_contian" v-if="videoRecord.length > 0">
+        <div class="video_item" v-for="item in videoRecord" :key="item.id">
+          <img :src="item.pict" alt="" />
+          <p>{{ item.title }}</p>
+          <p>
+            {{ item.percent > 90 ? "已看完" : "观看" + item.percent + "%" }}
+          </p>
+        </div>
+      </div>
+      <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
+    </div>
+    <div class="record_contian">
+      <div class="tit">知识点诊断记录</div>
+      <div>
+        <el-table :data="knowRecord" style="width: 100%">
+          <el-table-column prop="day" label="日期"> </el-table-column>
+          <el-table-column prop="coursename" label="科目"> </el-table-column>
+          <el-table-column prop="knowledgeName" label="知识点" width="500">
+          </el-table-column>
+          <el-table-column label="用时">
+            <template slot-scope="scope">
+              {{
+                scope.row.seconds != "null"
+                  ? Math.ceil(scope.row.seconds / 60) + "分钟"
+                  : scope.row.seconds
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="wrongs" label="正确率">
+            <template slot-scope="scope">
+              {{ (scope.row.rights / 10) * 100 }}%
+            </template>
+          </el-table-column>
+          <template slot="empty">
+            <div class="empty">
+              <img src="@/assets/images/icon_data.png" />
+              <span>没有信息</span>
+            </div>
+          </template>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  knowRecords,
+  queCancelCollect,
+  queCollect,
+  questionStatsByDay,
+  questionStatsBySubject,
+  summary,
+  videoStatsByDay,
+  videoStatsBySubject,
+  videoWatchRecords
+} from '@/api/webApi/webQue'
+import MxChart from '@/components/MxChart'
+var date = new Date()
+export default {
+  components:{
+    MxChart
+  },
+  data() {
+    return {
+      dateYears: [2021, 2020],
+      dateMonth: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      dateWeek: [1, 2, 3, 4, 5],
+      dateForm: {
+        year: date.getFullYear(),
+        month: date.getMonth() + 1,
+        week: date.getDay / 7 > 0 ? date.getDay / 7 : 5
+      },
+      learnInfo: {},
+      dateRule: {
+        year: [{ required: true, message: '请选择年份', trigger: 'change' }],
+        month: [{ required: true, message: '请选择月份', trigger: 'change' }],
+        week: [{ required: true, message: '请选择周数', trigger: 'change' }]
+      },
+      knowRecord: [],
+      videoRecord: [],
+      queCount:[],
+      videoCount:[],
+      queSubCount:[],
+      vidSubCount:[],
+    }
+  },
+  computed:{
+    queCountOption(){
+      if (!this.queCount.length) return null
+      const data = this.queCount
+      const options = {
+        title: {
+          text: '做题数目(道数)',
+          textStyle: {
+            color: '#676767',
+            fontWeight: '400',
+            fontSize: 16
+          }
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周七'],
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: { show: false }
+        },
+        series: [
+          {
+            data: data,
+            type: 'line',
+            name: '做题数',
+            lineStyle: {
+              color: '#47c6a2',
+              width: 2
+            },
+            itemStyle: {
+              normal: {
+                color: '#47c6a2',
+                borderColor: '#47c6a2' //拐点边框颜色
+              }
+            }
+          }
+        ]
+      }
+      return options
+    },
+    videoCountOption() {
+      if (!this.videoCount.length) return null
+      const data = this.videoCount
+      const options = {
+        title: {
+          text: '看视频时长(分钟)',
+          textStyle: {
+            color: '#676767',
+            fontWeight: '400',
+            fontSize: 16
+          }
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周七'],
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: { show: false }
+        },
+        series: [
+          {
+            data: data,
+            type: 'line',
+            name: '观看时长',
+            lineStyle: {
+              color: '#2EC7C9',
+              width: 2
+            },
+            itemStyle: {
+              normal: {
+                color: '#2EC7C9',
+                borderColor: '#2EC7C9' //拐点边框颜色
+              }
+            }
+          }
+        ]
+      }
+      return options
+    },
+    queSubCountOption(){
+      if (!this.queSubCount.length) return null
+      const data = this.queSubCount
+      const options = {
+        title: {
+          text: '学科分类数据(道数)',
+          textStyle: {
+            color: '#676767',
+            fontWeight: '400',
+            fontSize: 16
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        color: [
+          '#5B8FF9',
+          '#5AD8A6',
+          '#DEEAFF',
+          '#FFE18B',
+          '#FEB3A2',
+          '#BAEF83',
+          '#DBC7FA',
+          '#FFE6D2',
+          '#76DDDC'
+        ],
+        legend: {
+          orient: 'vertical',
+          left: 'right',
+          align: 'left',
+          icon: 'circle',
+          top: '20'
+        },
+        series: [
+          {
+            name: '做题数',
+            type: 'pie',
+            radius: '70%',
+            data: data,
+            left: '-80',
+            label: {
+              position: 'inside',
+              formatter: '{c}',
+              color: '#000000'
+            },
+            labelLine: {
+              show: false
+            }
+          }
+        ]
+      }
+      return options
+    },
+    vidSubCountOption(){
+      if (!this.vidSubCount.length) return null
+      const data = this.vidSubCount
+      const options = {
+        title: {
+          text: '学科分类数据(分钟)',
+          textStyle: {
+            color: '#676767',
+            fontWeight: '400',
+            fontSize: 16
+          }
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        color: [
+          '#5B8FF9',
+          '#5AD8A6',
+          '#DEEAFF',
+          '#FFE18B',
+          '#FEB3A2',
+          '#BAEF83',
+          '#DBC7FA',
+          '#FFE6D2',
+          '#76DDDC'
+        ],
+        legend: {
+          orient: 'vertical',
+          left: 'right',
+          align: 'left',
+          icon: 'circle',
+          top: '20'
+        },
+        series: [
+          {
+            name: '做题时长',
+            type: 'pie',
+            radius: '70%',
+            data: data,
+            label: {
+              position: 'inside',
+              formatter: '{c}',
+              color: '#000000'
+            },
+            left: '-80',
+            labelLine: {
+              show: false
+            }
+          }
+        ]
+      }
+      return options
+    }
+  },
+  mounted() {
+    this.getSummary();
+    this.searchData();
+  },
+  methods:{
+    getSummary() {
+      summary().then((res) => {
+        this.learnInfo = res.data;
+        console.log(res);
+      });
+    },
+    // 数据统计-做题数量-按天
+    getQuestionStatsByDay() {
+      questionStatsByDay({
+        year: this.dateForm.year,
+        month: this.dateForm.month,
+        week: this.dateForm.week,
+      }).then((res) => {
+        let arr = [];
+        const kesArr = Object.keys(res.data).sort();
+        for (const key of kesArr) {
+          arr.push(res.data[key]);
+        }
+        this.queCount = arr
+      });
+    },
+    // 数据统计-视频观看时长 - 按天
+    getVideoStatsByDay() {
+      videoStatsByDay({
+        year: this.dateForm.year,
+        month: this.dateForm.month,
+        week: this.dateForm.week,
+      }).then((res) => {
+        let arr = [];
+        const kesArr = Object.keys(res.data).sort();
+        for (const key of kesArr) {
+          arr.push(res.data[key]);
+        }
+        this.videoCount = arr;
+      });
+    },
+    // 数据统计-视频观看时长 - 按学科
+    getVideoStatsBySubject() {
+      videoStatsBySubject({
+        year: this.dateForm.year,
+        month: this.dateForm.month,
+        week: this.dateForm.week,
+      }).then((res) => {
+        console.log(res);
+        if (Object.keys(res.data).length > 0) {
+          console.log(res);
+          let objArr = [];
+          for (const key in res.data) {
+            objArr.push({ name: key, value: res.data[key] });
+          }
+          this.vidSubCount= objArr;
+        } else {
+          this.vidSubCount = [
+            { value: 0, name: "语文" },
+            { value: 0, name: "数学" },
+            { value: 0, name: "英语" },
+            { value: 0, name: "物理" },
+            { value: 0, name: "化学" },
+            { value: 0, name: "生物" },
+            { value: 0, name: "历史" },
+            { value: 0, name: "地理" },
+            { value: 0, name: "政治" },
+          ];
+        }
+      });
+    },
+    // 数据统计-做题数量 - 按学科
+    getQuestionStatsBySubject() {
+      questionStatsBySubject({
+        year: this.dateForm.year,
+        month: this.dateForm.month,
+        week: this.dateForm.week,
+      }).then((res) => {
+        if (Object.keys(res.data).length > 0) {
+          console.log(res);
+          let objArr = [];
+          for (const key in res.data) {
+            objArr.push({ name: key, value: res.data[key] });
+          }
+          this.queSubCount = objArr;
+        } else {
+          this.queSubCount = [
+            { value: 0, name: "语文" },
+            { value: 0, name: "数学" },
+            { value: 0, name: "英语" },
+            { value: 0, name: "物理" },
+            { value: 0, name: "化学" },
+            { value: 0, name: "生物" },
+            { value: 0, name: "历史" },
+            { value: 0, name: "地理" },
+            { value: 0, name: "政治" },
+          ];
+        }
+      });
+    },
+    // 视频学习记录
+    getVideoRecord() {
+      videoWatchRecords({
+        year: this.dateForm.year,
+        month: this.dateForm.month,
+        week: this.dateForm.week,
+      }).then((res) => {
+        this.videoRecord = res.data;
+        console.log(res);
+      });
+    },
+    // 知识点诊断记录
+    getKnowRecords() {
+      knowRecords({
+        year: this.dateForm.year,
+        month: this.dateForm.month,
+        week: this.dateForm.week,
+      }).then((res) => {
+        this.knowRecord = res.data;
+        console.log(this.knowRecord);
+      });
+    },
+    searchData() {
+      console.log(this.dateForm);
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.getQuestionStatsByDay();
+          this.getVideoStatsByDay();
+          this.getQuestionStatsBySubject();
+          this.getVideoStatsBySubject();
+
+          this.getVideoRecord();
+          this.getKnowRecords();
+          /* this.getVideoStatsByDay();
+          this.getQuestionStatsBySubject(); */
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    toCollectQue(item) {
+      queCollect({ questionId: item.id }).then((res) => {
+        item.collect = !item.collect;
+        this.msgSuccess("收藏成功");
+        console.log(res);
+      });
+    },
+    toCancelCollectQue(item) {
+      queCancelCollect({ questionId: item.id }).then((res) => {
+        item.collect = !item.collect;
+        this.msgSuccess("取消收藏成功");
+        console.log(res);
+      });
+    },
+  }
+}
+</script>
+<style scoped>
+.empty {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  font-size: 14px;
+  color: #909399;
+}
+.record_content .record_contian {
+  border-radius: 8px;
+  margin-bottom: 20px;
+  background: #fff;
+  padding: 32px 28px;
+}
+
+.record_content .record_contian .tit {
+  color: #47c6a2;
+  margin-bottom: 36px;
+}
+
+.record_content .record_contian .count_item img {
+  margin-right: 16px;
+}
+
+
+.delete > div:first-child > span {
+  color: #f44949;
+}
+
+.gary {
+  margin-top: 8px;
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #7a7a7a;
+  line-height: 22px;
+}
+
+.date_contain > span {
+  display: inline-block;
+  border-radius: 1px;
+  margin-right: 16px;
+  font-size: 16px;
+}
+
+.video_contian {
+  display: flex;
+}
+
+.video_contian img {
+  width: 200px;
+}
+
+.video_contian .video_item {
+  margin-right: 80px;
+}
+
+.video_contian .video_item > p:first-child {
+  color: #4a4a4a;
+  font-size: 14px;
+  margin-top: 7px;
+  margin-bottom: 4px;
+}
+
+.video_contian .video_item > p:last-child {
+  font-size: 12px;
+  color: #bdbdbd;
+}
+
+</style>