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 pointer"
          v-for="item in  tabList"
          :class="tabActive == item.value ? 'tab_active' : ''"
          @click="switchTab(item.value)"
        >
          {{ item.label }}
        </div>
      </div>
    </el-card>
    <!-- 收藏夹 -->
    <div class="content">
      <collect v-if="tabActive == 0"></collect>
      <!-- 错题本 -->
      <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>
    </div>

  </div>
</template>
<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;
export default {
  components: {Collect,Mistake},
  data() {
    return {
      tabActive: 0,
      tabList: [
        {
          label:'收藏夹',
          value:0
        },
        {
          label:'错题本',
          value:1
        },
        {
          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);
  },
  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);
      });
    },
    // 知识点诊断记录
    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;
  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;
}



.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>