front/src/views/questioncenter/LearnHelper.vue

/* 学习助手 */
<template>
  <div class="learn_container">
    <el-card class="header" style="padding-bottom: 0">
      <div class="tab">
        <div
          class="tab_item"
          :class="tabActive == 0 ? 'tab_active' : ''"
          @click="switchTab(0)"
        >
          收藏夹
        </div>
        <div
          class="tab_item"
          :class="tabActive == 1 ? 'tab_active' : ''"
          @click="switchTab(1)"
        >
          错题本
        </div>
        <div
          class="tab_item"
          :class="tabActive == 2 ? 'tab_active' : ''"
          @click="switchTab(2)"
        >
          学习记录
        </div>
      </div>
      <div class="radio_contianer" v-show="tabActive == 0">
        <div style="margin-bottom: 16px">
          <span>类型</span>
          <el-radio-group v-model="form.type" size="mini" @change="toggleType">
            <el-radio-button
              :label="item.type"
              v-for="item in types"
              :key="item.type"
              >{{ item.name }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px">
          <span>学科</span>
          <el-radio-group
            v-model="form.subjectName"
            size="mini"
            @change="toggleSub"
          >
            <el-radio-button
              :label="item"
              v-for="(item, index) in subjects"
              :key="index"
              >{{ item }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px" v-if="form.type == 'question'">
          <span>题型</span>
          <el-radio-group
            v-model="form.qtype"
            size="mini"
            @change="toggleQueType"
          >
            <el-radio-button
              :label="item"
              v-for="(item, index) in queTypes"
              :key="index"
              >{{ item }}</el-radio-button
            >
          </el-radio-group>
        </div>
      </div>
      <div class="radio_contianer" v-show="tabActive == 1">
        <div style="margin-bottom: 16px">
          <span>科目</span>
          <el-radio-group
            v-model="form.worngSubjectName"
            size="mini"
            @change="toggleWrongSub"
          >
            <el-radio-button
              :label="item"
              v-for="(item, index) in wrongSubject"
              :key="index"
              >{{ item }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px">
          <span>题型</span>
          <el-radio-group
            v-model="form.wrongType"
            size="mini"
            @change="toggleWrongType"
          >
            <el-radio-button
              :label="item"
              v-for="(item, index) in wrongTypes"
              :key="index"
              >{{ item }}</el-radio-button
            >
          </el-radio-group>
        </div>
      </div>
    </el-card>
    <!-- 收藏夹 -->
    <div class="shoucan_content" v-show="tabActive == 0">
      <!-- 试题收藏 -->
      <div class="topic" v-show="form.type == 'question'">
        <!-- 题目 -->
        <div class="paper_questions" id="collect-question">
          <div
            class="que_item"
            v-for="(item, index) in collectQue"
            :key="item.id"
          >
            <div class="que_content" style="display: flex">
              <div>{{ index + 1 }}.</div>
              <div v-html="item.title"></div>
            </div>
            <div class="option" v-if="item.optionA">
              <div style="margin-right: 5px">A:</div>
              <div v-html="item.optionA"></div>
            </div>
            <div class="option" v-if="item.optionB">
              <div style="margin-right: 5px">B:</div>
              <div v-html="item.optionB"></div>
            </div>
            <div class="option" v-if="item.optionC">
              C:
              <div v-html="item.optionC"></div>
            </div>
            <div class="option" v-if="item.optionD">
              <div style="margin-right: 5px">D:</div>
              <div v-html="item.optionD"></div>
            </div>
            <div class="que_footer">
              <div class="spans">
                <span class="id">ID: {{ item.id }}</span>
                <span>题型： {{ item.qtpye }}</span>
                <span>难度： 一般</span>
              </div>
              <div class="operation">
                <div class="shoucan">
                  <div
                    v-show="item.collect"
                    @click="toCancelCollectQue(item)"
                    style="display: flex; align-items: center"
                  >
                    <img
                      src="@/assets/images/icon_shoucang_s.png"
                      style="margin-right: 8px"
                    />
                    <span>已收藏</span>
                  </div>
                  <div
                    v-show="!item.collect"
                    @click="toCollectQue(item)"
                    style="display: flex; align-items: center"
                  >
                    <img
                      src="@/assets/images/icon_shoucang_n.png"
                      style="margin-right: 8px"
                    />
                    <span>收藏</span>
                  </div>
                </div>
                <div class="detail" @click="viewDetail(index)">
                  <img src="@/assets/images/icon_chakan.png" alt="" />
                  <span>查看解析>></span>
                </div>
                <div class="addQue">
                  <i
                    class="el-icon-shopping-cart-2"
                    style="margin-right: 5px"
                  ></i>
                  <span>加入选题</span>
                </div>
              </div>
            </div>
            <div
              class="parse"
              v-show="item.createTime"
              v-html="item.parse"
            ></div>
          </div>
        </div>
      </div>
      <!-- 试卷收藏 -->
      <div class="exam" v-show="form.type == 'paper'">
        <div class="paper_container">
          <div class="paper_item" v-for="item in collectPaper" :key="item.id">
            <div class="tit">
              <div>{{ item.papername }}</div>
              <div class="viewCount">
                <img src="@/assets/images/icon_eye.png" alt="" />
                <span>{{item.readNum}}人已预览</span>
              </div>
            </div>
            <div class="opera">
              <div class="view" @click="toPreView(item.id, item.papername)">
                <img
                  style="margin-right: 8px"
                  src="@/assets/images/icon_view.png"
                  alt=""
                />
                <span>预览</span>
              </div>
              <div class="download">下载</div>
              <div>
                <img
                  src="@/assets/images/icon_shoucang_s.png"
                  alt=""
                  style="margin-right: 8px"
                />
                <span>已收藏</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div style="display: flex; justify-content: center; margin-top: 92px">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :current-page="pageNum"
          :page-size="pageSize"
          @prev-click="prev"
          @next-click="next"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 错题本 -->
    <div class="mis_content" v-show="tabActive == 1">
      <div class="topic">
        <!-- 题目 -->
        <div class="paper_questions" id="wrong-question">
          <div
            class="que_item"
            v-for="(item, index) in wrongQues"
            :key="item.id"
          >
            <div class="que_content" style="display: flex">
              <div>{{ index + 1 }}.</div>
              <div v-html="item.title"></div>
            </div>
            <div class="option" v-if="item.optionA">
              <div style="margin-right: 5px">A:</div>
              <div v-html="item.optionA"></div>
            </div>
            <div class="option" v-if="item.optionB">
              <div style="margin-right: 5px">B:</div>
              <div v-html="item.optionB"></div>
            </div>
            <div class="option" v-if="item.optionC">
              C:
              <div v-html="item.optionC"></div>
            </div>
            <div class="option" v-if="item.optionD">
              <div style="margin-right: 5px">D:</div>
              <div v-html="item.optionD"></div>
            </div>
            <div class="que_footer">
              <div class="spans">
                <span>题型： {{ item.qtpye }}</span>
                <span>难度： 一般</span>
              </div>
              <div class="operation">
                <div class="delete" style="display: flex; align-items: center">
                  <div
                    style="margin-right: 24px; cursor: pointer display: flex;align-items: center;"
                    @click="toDeleteWrongQue(item.id, index)"
                  >
                    <img
                      src="@/assets/images/icon_wrong.png"
                      style="margin-right: 8px"
                    />
                    <span>删除错题</span>
                  </div>
                </div>
                <div class="detail" @click="viewWrongDetail(index)">
                  <img src="@/assets/images/icon_chakan.png" alt="" />
                  <span>查看解析>></span>
                </div>
              </div>
            </div>
            <div
              class="parse"
              v-show="item.createTime"
              v-html="item.parse"
            ></div>
          </div>
        </div>
      </div>
      <!-- 错题分页 -->
      <div style="display: flex; justify-content: center; margin-top: 92px">
        <el-pagination
          layout="prev, pager, next"
          :total="wrongForm.total"
          :current-page="wrongForm.pageNum"
          :page-size="wrongForm.pageSize"
          @prev-click="wrongPrev"
          @next-click="wrongNext"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 学习记录 -->
    <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>
  </div>
</template>
<script>
import {
  favSubjects,
  favQueTypes,
  favQuestions,
  favPapers,
  wrongSubjects,
  wrongTypes,
  wrongQuestions,
  deleteWrongQuestion,
  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;
export default {
  data() {
    return {
      tabActive: 0,
      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: [],
      wrongSubject: [],
      wrongTypes: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      wrongQues: [],
      wrongForm: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
      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;
    if (this.tabActive == 1) {
      this.switchTab(1);
    } else if (this.tabActive == 2) {
      this.switchTab(2);
    } else {
      this.toggleType("question");
    }
  },
  methods: {
    switchTab(index) {
      this.tabActive = index;
      if (this.tabActive == 1) {
        this.getWrongSubject();
      } 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();
      }
    },
    toggleType(e) {
      this.form.type = e;
      this.getSubjects();
    },
    // 收藏涉及的学科
    getSubjects() {
      favSubjects({ type: this.form.type }).then((res) => {
        console.log(res);
        this.form.subjectName = res.data[0];
        this.subjects = res.data;
        if (this.form.type == "question") {
          this.getFavQue();
        } else if (this.form.type == "paper") {
          this.getFavPapers();
        }
      });
    },
    // 收藏涉及的题型
    getFavQue() {
      favQueTypes({ subjectName: this.form.subjectName }).then((res) => {
        this.form.qtype = res.data[0];
        this.queTypes = res.data;
        this.getFavQuestions();
      });
    },
    //  错题涉及的题型
    getWrongTypes() {
      wrongTypes({ subjectName: this.form.worngSubjectName }).then((res) => {
        if (res.data.length > 0) {
          this.form.wrongType = res.data[0];
        }
        this.wrongTypes = res.data;
        this.wrongForm.pageNum;
        this.getWrongQuestions();
      });
    },
    //  错题涉及的科目
    getWrongSubject() {
      wrongSubjects().then((res) => {
        if (res.data.length > 0) {
          this.form.worngSubjectName = res.data[0];
        }
        this.wrongSubject = res.data;
        this.getWrongTypes();
      });
    },
    // 错题列表
    getWrongQuestions() {
      wrongQuestions({
        subjectName: this.form.worngSubjectName,
        qtype: this.form.wrongType,
        pageSize: this.wrongForm.pageSize,
        pageNum: this.wrongForm.pageNum,
      }).then((res) => {
        this.wrongQues = res.rows;
        this.wrongForm.total = res.total;
        this.$nextTick(_=>this.mxGlobal.MathQueue('wrong-question'))
        console.log(res);
      });
    },
    // 收藏的问题列表
    getFavQuestions() {
      favQuestions({
        subjectName: this.form.subjectName,
        qtype: this.form.qtype,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.total = res.total;
        this.collectQue = res.rows;
        this.$nextTick(_=>this.mxGlobal.MathQueue('collect-question'))
        console.log(res);
      });
    },
    getFavPapers() {
      favPapers({
        subjectName: this.form.subjectName,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        console.log(res);
        this.total = res.total;
        this.collectPaper = res.rows;
      });
    },
    toggleSub() {
      this.pageNum == 1;
      if (this.form.type == "paper") {
        this.getFavPapers();
      } else {
        this.getFavQue();
      }
    },
    toggleQueType() {
      this.pageNum == 1;
      this.getFavQuestions();
    },
    viewDetail(index) {
      if (this.collectQue[index].createTime) {
        this.collectQue[index].createTime = false;
      } else {
        this.collectQue[index].createTime = true;
      }
    },
    viewWrongDetail(index) {
      if (this.wrongQues[index].createTime) {
        this.wrongQues[index].createTime = false;
      } else {
        this.wrongQues[index].createTime = true;
      }
    },
    // 跳转到预览页面
    toPreView(paperId, paperName) {
      this.$router.push({
        path: "/question-center/bestPaper/preview",
        query: { paperId, paperName },
      });
    },
    prev() {
      this.pageNum = this.pageNum - 1;
      if (this.form.type == "question") {
        this.getFavQuestions();
      } else {
      }
    },
    next() {
      this.pageNum = this.pageNum + 1;
      if (this.form.type == "question") {
        this.getFavQuestions();
      } else {
        this.getFavPapers();
      }
    },
    toDeleteWrongQue(id, index) {
      this.wrongQues.splice(index, 1);
      deleteWrongQuestion({ questionId: id }).then((res) => {
        this.msgSuccess("删除成功");
        console.log(res);
      });
    },
    toggleWrongType() {
      this.wrongForm.pageNum = 1;
      this.getWrongQuestions();
    },
    toggleWrongSub() {
      this.getWrongTypes();
    },
    wrongNext() {
      this.wrongForm.pageNum++;
      this.getWrongQuestions();
    },
    wrongPrev() {
      this.wrongForm.pageNum--;
      this.getWrongQuestions();
    },
    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);
      });
    },
    // 知识点诊断记录
    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;
}
.option {
  padding-left: 33px;
  display: flex;
  margin-bottom: 10px;
}
.learn_container {
  padding: 20px;
  background: #f7f7f7;
  min-height: 100vh;
}
.header {
  margin-bottom: 16px;
}
.mis_content,
.shoucan_content {
  background: #fff;
  padding: 32px 28px;
}
.record_content {
  padding: 32px 28px;
}
.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;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  line-height: 22px;
  padding-bottom: 28px;
  position: relative;
}
.tab .tab_active {
  color: #47c6a2;
}
.tab .tab_active::after {
  content: "";
  height: 4px;
  width: 100%;
  background: #47c6a2;
  position: absolute;
  transform: translateY(50%);
  left: 0;
  bottom: 0;
}
.tab .tab_item:hover {
  color: #47c6a2;
}
.tab .tab_item:hover::after {
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  background: #47c6a2;
  left: 0;
  transform: translateY(50%);
  bottom: 0;
}
.que_item {
  border-radius: 1px;
  border: 1px solid #dedede;
  margin-bottom: 8px;
}
.que_content {
  padding: 12px 24px 0 33px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #4c4c4c;
  line-height: 27px;
  margin-bottom: 40px;
}
.que_footer {
  border-top: 1px solid #dedede;
  padding-left: 33px;
  overflow: hidden;
  padding-bottom: 23px;
  padding-top: 21px;
}
.que_footer .spans {
  float: left;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #979797;
  line-height: 20px;
}
.que_footer .spans > span {
  margin-right: 20px;
}
.operation {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #47c6a2;
  line-height: 20px;
  justify-content: flex-end;
}
.operation > div {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.operation .shoucan {
  margin-right: 46px;
}
.operation .detail span {
  border-radius: 1px;
  border-bottom: 1px solid #47c6a2;
}
.operation .detail {
  margin-right: 32px;
}
.operation > div > img {
  margin-right: 10px;
}
.operation .addQue {
  padding: 7px;
  border-radius: 4px;
  border: 1px solid #979797;
  margin-right: 24px;
}
.info {
  padding: 12px 40px;
}
.radio_contianer > div {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.radio_contianer > div > span {
  flex-shrink: 0;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #232323;
  line-height: 20px;
  height: 20px;
  width: 50px;
}
.paper_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 30px;
  margin-bottom: 40px;
}
.paper_item .tit {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #343434;
  line-height: 22px;
}
.paper_item .viewCount {
  margin-top: 16px;
  color: #9f9f9f;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.paper_item .viewCount img {
  margin-right: 9px;
}
.paper_item .opera {
  display: flex;
  justify-content: space-between;
}
.paper_item .opera > div {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.paper_item .opera .view {
  color: #47c6a2;
  border-radius: 4px;
  border: 1px solid #47c6a2;
  padding: 6px 12px;
}
.paper_item .opera .download {
  border-radius: 4px;
  border: 1px solid #47c6a2;
  padding: 6px 22px;
  background: #47c6a2;
  color: white;
  margin: 0 24px;
}
.paper_item .opera > div:last-child {
  color: #47c6a2;
}
.parse {
  padding: 0 30px;
}
.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;
}
.el-card__body {
  padding-bottom: 0;
}
.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>
<style >
.el-dialog__header .el-dialog__title {
  color: #47c6a2;
}
.radio_contianer .el-radio-button__inner {
  border-left: 1px solid #dcdfe6;
}
.radio_contianer .el-radio-button .el-radio-button__inner {
  border-radius: 16px;
  margin-bottom: 5px;
}
.radio_contianer .el-radio-button:first-child:last-child .el-radio-button__inner {
  border-radius: 16px;
}
.radio_contianer .el-radio-button {
  margin-right: 8px;
}
</style>