收拢题库中心样式影响范围 - 还有待校验

src/views/questioncenter/LearnHelper.vue

@@ -1382,17 +1382,17 @@ export default {
 .el-dialog__header .el-dialog__title {
   color: #47c6a2;
 }
-.el-radio-button__inner {
+.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;
 }
-.el-radio-button:first-child:last-child .el-radio-button__inner {
+.radio_contianer .el-radio-button:first-child:last-child .el-radio-button__inner {
   border-radius: 16px;
 }
-.el-radio-button {
+.radio_contianer .el-radio-button {
   margin-right: 8px;
 }
 </style>

src/views/questioncenter/bestpaper.vue

@@ -376,7 +376,7 @@ export default {
   margin-right: 16px;
   flex-shrink: 0;
 }
-.el-radio-button {
+.radio_contianer .el-radio-button {
   margin-right: 8px;
 }
 .search_header {

src/views/questioncenter/generating.vue

@@ -965,7 +965,7 @@ export default {
   bottom: 0;
 }
 
-.el-radio-button {
+.radio_contianer .el-radio-button {
   margin-right: 8px;
 }
 

src/views/questioncenter/smart.vue

@@ -1,646 +1,684 @@
-<template >
-  <div class="smart_container">
-    <el-card class="header">
-      <div class="smart_tabs">
-        <div
-          class="tab"
-          :class="tabActive == 0 ? 'tab_active' : ''"
-          @click="switchTab(0)"
-        >
-          同步在线练习
-        </div>
-        <div
-          class="tab"
-          :class="tabActive == 1 ? 'tab_active' : ''"
-          @click="switchTab(1)"
-        >
-          知识点在线练习
-        </div>
-      </div>
-      <div class="radio_contianer">
-        <div style="margin-bottom: 16px">
-          <span>科目</span>
-          <el-radio-group
-            v-model="form.subjectId"
-            size="mini"
-            @change="toggleSub"
-          >
-            <el-radio-button
-              :label="item.subjectid"
-              v-for="item in subjectList"
-              :key="item.subjectid"
-              >{{ item.subjectname }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px" v-show="tabActive == 0">
-          <span>版本</span>
-          <el-radio-group
-            v-model="form.editionId"
-            size="mini"
-            @change="toggleEdi"
-          >
-            <el-radio-button
-              :label="item.id"
-              v-for="(item,i) in editionList"
-              :key="i"
-              >{{ item.name }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px" v-show="tabActive == 0">
-          <span>学册</span>
-          <el-radio-group
-            v-model="form.gradeId"
-            size="mini"
-            @change="toggleGrade"
-          >
-            <el-radio-button
-              :label="item.gradeid"
-              v-for="item in gradeList"
-              :key="item.gradeid"
-              >{{ item.gradename }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-      </div>
-    </el-card>
-    <el-container>
-      <el-aside width="284px" style="padding-bottom: 104px">
-        <div class="aside_header">
-          <span>CONTACT</span>
-          <span>章节目录</span>
-        </div>
-        <div class="aside_content">
-          <el-tree
-            v-show="tabActive == 0"
-            :data="treeList"
-            :props="defaultProps"
-            node-key="$treeNodeId"
-            @node-click="clickChapterNode"
-            highlight-current
-            ref="treeChapter"
-            :expand-on-click-node="false"
-          ></el-tree>
-          <el-tree
-            v-show="tabActive == 1"
-            :data="knowTreeList"
-            :props="knowDefaultProps"
-            node-key="knowledgeId"
-            @node-click="clickKnowNode"
-            :expand-on-click-node="false"
-            highlight-current
-            ref="tree"
-          ></el-tree>
-        </div>
-      </el-aside>
-      <el-main style="padding: 0; background: #fff">
-        <div class="main_tit">
-          <div class="tit_left" v-show="tabActive == 0">{{ chapterTitle }}</div>
-          <div class="tit_left" v-show="tabActive == 1">{{ konwTitle }}</div>
-          <div class="tit_right">
-            <div>
-              <input type="checkbox" />
-              <span>过滤已做题</span>
-            </div>
-            <div
-              class="btn"
-              style="cursor: pointer"
-              @click="httpDiagnosticRecords(1)"
-            >
-              诊断记录
-            </div>
-          </div>
-        </div>
-        <!-- 主题内容 -->
-        <div class="main_con" v-show="tabActive == 0">
-          <div class="con_item" v-for="item in chapterList" :key="item.id">
-            <img src="@/assets/images/img_bg_tongbulianxi.png" alt="" />
-            <div class="con_info">
-              <div class="tit">
-                {{ item.chapterName }}
-              </div>
-              <div class="count">共{{ item.num }}题</div>
-              <div class="btn" @click="toChapterQue(item)">马上做题</div>
-            </div>
-          </div>
-        </div>
-        <!-- 主题内容 -->
-        <div class="main_con" v-show="tabActive == 1">
-          <div
-            class="con_item"
-            v-for="item in knowList"
-            :key="item.knowledgeId"
-          >
-            <img src="@/assets/images/img_bg_tongbulianxi.png" alt="" />
-            <div class="con_info">
-              <p class="tit">{{ item.knowledgeName }}</p>
-              <p class="count">共{{ item.num }}题</p>
-              <p class="btn" @click="toKnowQue(item)">马上做题</p>
-            </div>
-          </div>
-        </div>
-      </el-main>
-    </el-container>
-    <!-- 诊断的弹窗 -->
-    <el-dialog
-      title="同步在线诊断记录"
-      :visible.sync="dialogVisible"
-      width="50%"
-    >
-      <div class="tables">
-        <el-table :data="tableData.rows" stripe style="width: 100%">
-          <el-table-column type="index" width="50" label="序号">
-          </el-table-column>
-          <el-table-column prop="coursename" label="科目"> </el-table-column>
-          <el-table-column prop="day" label="日期"> </el-table-column>
-          <el-table-column label="用时">
-            <template slot-scope="scope">
-              <span>{{ scope.row.seconds + "秒" }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="正确率">
-            <template slot-scope="scope">
-              <span>{{ scope.row.rate + "%" }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作">
-            <template slot-scope="scope">
-              <span
-                style="color: #47c6a2; cursor: pointer"
-                @click="toDetails(scope.row)"
-              >
-                <i class="el-icon-search" style="margin-right: 4px"></i
-                >操作</span
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="block">
-          <el-pagination
-            :page-sizes="[tablePageSize]"
-            layout="prev, pager, next"
-            :page-count="tableData.pageNum"
-            style="backgrond: #47c6a2"
-            @current-change="httpDiagnosticRecords"
-          >
-          </el-pagination>
-          <div class="count">
-            共{{ tableData.pageNum }}页 {{ tableData.total }}条
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-let flag = 1;
-import {
-  treeList,
-  smartSubjectList,
-  smartGradeList,
-  newEditionList,
-  getQuestionsNumByChapter,
-  getQuestionsNumByKnowledge,
-  knowledgeTree,
-  diagnosticRecords,
-} from "@/api/webApi/webQue.js";
-
-export default {
-  data() {
-    return {
-      tabActive: 0,
-      form: {
-        subjectId: 0,
-        editionId: 0,
-        gradeId: 0,
-        chapterId: 0,
-        knowledgeId: 0,
-      },
-      tablePageSize: 5,
-      chapterTitle: "",
-      konwTitle: "",
-      dialogVisible: false,
-      tableData: [],
-      // 章节树的prop
-      defaultProps: {
-        children: "children",
-        label: "name",
-      },
-      // 知识树的prop
-      knowDefaultProps: {
-        children: "children",
-        label: "name",
-      },
-      subjectList: [],
-      editionList: {},
-      gradeList: [],
-      treeList: [],
-      knowTreeList: [],
-      knowList: [],
-      chapterList: [],
-    };
-  },
-  created() {
-    // 设置默认高亮
-    this.tabActive = this.$route.query.tabActive
-      ? this.$route.query.tabActive
-      : 0;
-    this.getSubjects();
-  },
-  methods: {
-    // 获取所有课程
-    getSubjects() {
-      smartSubjectList().then((res) => {
-        console.log(res);
-        this.form.subjectId = res.rows[0].subjectid;
-        this.subjectList = res.rows;
-        this.getEidtion();
-      });
-    },
-    getEidtion() {
-      newEditionList({ subjectId: this.form.subjectId }).then((res) => {
-        this.form.editionId = res.data[0].id;
-        this.editionList = res.data;
-        this.getGrade();
-      });
-    },
-    httpDiagnosticRecords(pageNum) {
-      diagnosticRecords({
-        pageNum: pageNum,
-        pageSize: this.tablePageSize,
-        type: 1,
-      }).then((res) => {
-        this.dialogVisible = true;
-        this.tableData = res;
-        this.tableData["pageNum"] = Math.ceil(res.total / this.tablePageSize);
-        console.log(res);
-      });
-    },
-    // 获取所有的学册
-    getGrade() {
-      smartGradeList({ ...this.form }).then((res) => {
-        console.log(res);
-        if (res.data.length > 0) {
-          this.form.gradeId = res.data[0].gradeid;
-        }
-        this.gradeList = res.data;
-        if (this.tabActive == 0) {
-          this.getTree();
-        } else {
-          this.getTreeByKnowledge();
-        }
-      });
-    },
-    // 获取章节树
-    getTree() {
-      treeList({ ...this.form }).then((res) => {
-        console.log("gettree", res);
-        this.treeList = res.data;
-        this.$nextTick(() => {
-          if (res.data.length > 0) {
-            this.chapterTitle = res.data[0].name;
-            this.$refs.treeChapter.setCurrentKey(res.data[0].$treeNodeId);
-            this.form.chapterId = res.data[0].id;
-          }
-          this.getQueByChapter();
-        });
-      });
-    },
-    // 获取知识点树
-    getTreeByKnowledge() {
-      knowledgeTree({ pharseId: 3, subjectId: this.form.subjectId }).then(
-        (res) => {
-          this.knowTreeList = res.data;
-          console.log(res);
-          this.$nextTick(() => {
-            this.konwTitle = res.data[0].name;
-            this.form.knowledgeId = res.data[0].id;
-            this.getQueByKnowledge();
-          });
-        }
-      );
-    },
-    toDetails(item) {
-      this.$router.push({
-        path: "/question-center/smartExercise/answerDetailas",
-        query: {
-          batchno: item.batchno,
-          info: encodeURIComponent(JSON.stringify(item)),
-        },
-      });
-    },
-    // 根据章节来获取题目
-    getQueByChapter() {
-      console.log("-------获取题目-------")
-      getQuestionsNumByChapter({
-        chapterId: this.form.chapterId,
-        subjectId: this.form.subjectId,
-        gradeId: this.form.gradeId,
-        editionId: this.form.editionId,
-      }).then((res) => {
-        console.log(res);
-        this.chapterList = res.data;
-      });
-    },
-    // 根据知识点来获取题目
-    getQueByKnowledge() {
-      getQuestionsNumByKnowledge({
-        knowledgeId: this.form.knowledgeId,
-        subjectId: this.form.subjectId,
-      }).then((res) => {
-        this.knowList = res.data;
-        console.log(res);
-      });
-    },
-    toggleSub(e) {
-      this.form.subjectId = e;
-      this.getEidtion();
-      if (this.tabActive == 1) {
-        this.getTreeByKnowledge();
-      }
-    },
-    toggleEdi(e) {
-      this.form.editionId = e;
-      this.getGrade();
-    },
-    toggleGrade(e) {
-      this.form.gradeId = e;
-      this.getTree();
-    },
-    clickChapterNode(item) {
-      console.log(item);
-      this.chapterTitle = item.name;
-      this.form.chapterId = item.id;
-      this.getQueByChapter();
-    },
-    clickKnowNode(item) {
-      console.log(item);
-      this.form.knowledgeId = item.id;
-      this.konwTitle = item.name;
-      this.getQueByKnowledge();
-    },
-    switchTab(index) {
-      this.tabActive = index;
-      if (index == 1) {
-        console.log(111111111111);
-        this.getTreeByKnowledge();
-      } else {
-        console.log(22222222);
-        this.getTree();
-      }
-    },
-    // 做章节题目
-    toChapterQue(item) {
-      console.log(item);
-      this.$router.push({
-        path: "/question-center/smartExercise/practice",
-        query: {
-          chapterId: item.chapterId,
-          title: item.chapterName,
-          subjectId: this.form.subjectId,
-        },
-      });
-    },
-    // 做知识点题目
-    toKnowQue(item) {
-      console.log(item);
-      this.$router.push({
-        path: "/question-center/smartExercise/practice",
-        query: {
-          knowledgeId: item.knowledgeId,
-          title: item.knowledgeName,
-          subjectId: this.form.subjectId,
-        },
-      });
-    },
-  },
-};
-</script>
-<style scoped>
-.smart_container {
-  padding: 20px;
-  background: #f7f7f7;
-}
-.smart_tabs {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.smart_tabs .tab {
-  text-align: center;
-  flex: 1;
-  padding: 8px 0 24px 0;
-  border-bottom: 4px solid transparent;
-}
-.smart_tabs .tab_active {
-  color: #47c6a2;
-  border-bottom: 4px solid #47c6a2;
-}
-.radio_contianer span {
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #232323;
-  line-height: 20px;
-  height: 20px;
-  margin-right: 16px;
-}
-.el-radio-button {
-  margin-right: 8px;
-}
-.aside_header {
-  background: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  padding: 24px 16px 0 16px;
-  margin-bottom: 16px;
-}
-.el-aside {
-  background: white;
-  padding: 0;
-  margin-bottom: 0;
-  margin-right: 16px;
-}
-.aside_header span {
-  margin-top: 5px;
-  width: 84px;
-  height: 22px;
-  font-size: 16px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #343434;
-  line-height: 22px;
-}
-.aside_header span:first-child {
-  width: 173px;
-  height: 27px;
-  background: linear-gradient(180deg, #ffffff 0%, #47c6a2 100%);
-  opacity: 0.5;
-}
-.main_tit {
-  display: flex;
-  justify-content: space-between;
-  padding-top: 52px;
-  padding-bottom: 19px;
-  border-bottom: 1px solid #eee;
-  padding-left: 19px;
-  margin-bottom: 23px;
-}
-.main_tit .tit_right {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.main_tit .tit_right .btn {
-  background: #47c6a2;
-  border-radius: 16px;
-  padding: 6px 19px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #ffffff;
-  margin-left: 32px;
-  margin-right: 57px;
-}
-.tit_right input {
-  background: #d8d8d8;
-  margin: 0;
-}
-.tit_right span {
-  margin-left: 8px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #47c6a2;
-}
-.main_con {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0 21px 0 16px;
-}
-.main_con .con_item {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  flex: 0 0 33%;
-  padding-right: 15px;
-  position: relative;
-  margin-bottom: 20px;
-}
-.main_con .con_item img {
-  width: 100%;
-  height: 100%;
-}
-.main_con .con_item .con_info {
-  position: absolute;
-  top: 24px;
-  left: 24px;
-}
-.main_con .con_item .con_info p {
-  margin: 0;
-}
-.main_con .con_item .con_info .tit {
-  height: 22px;
-  font-size: 16px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #343434;
-  line-height: 22px;
-}
-.main_con .con_item .con_info .count {
-  height: 16px;
-  font-size: 12px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #717171;
-  line-height: 17px;
-  margin-top: 8px;
-}
-.main_con .con_item .con_info .btn {
-  cursor: pointer;
-  display: inline-block;
-  font-size: 12px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #ffffff;
-  line-height: 17px;
-  padding: 4px 12px;
-  background: #47c6a2;
-  margin-top: 20px;
-  text-align: center;
-}
-.block {
-  text-align: center;
-  margin-top: 20px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-}
-.block > .count {
-  top: 10px;
-  left: 0;
-  position: absolute;
-}
-</style>
-<style >
-.el-radio-button__inner {
-  border-left: 1px solid #dcdfe6;
-}
-.radio_contianer .el-radio-button .el-radio-button__inner {
-  border-radius: 16px;
-}
-.split_page .el-pager > li {
-  border-radius: 50%;
-}
-.header {
-  margin-bottom: 10px;
-}
-</style>
-<style >
-.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-  color: #47c6a2;
-  background: #ffffff;
-}
-.el-tree-node__content {
-  padding-top: 6px;
-  padding-bottom: 6px;
-  height: 32px;
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #343434;
-  line-height: 20px;
-}
-.el-tree-node {
-  padding-left: 16px;
-}
-.el-tree-node__expand-icon.expanded {
-  content: "";
-}
-.el-tree-node__content > .el-tree-node__expand-icon {
-  padding: 6px;
-  /* position: absolute; */
-  right: 16px;
-}
-.el-table .el-table__header-wrapper th,
-.el-table .el-table__fixed-header-wrapper th {
-  background: #47c6a2;
-  color: white;
-}
-.el-dialog__header .el-dialog__title {
-  color: #47c6a2;
-}
-.el-radio-button:first-child:last-child .el-radio-button__inner {
-  border-radius: 16px;
-}
-.el-tree-node__content {
-  white-space: break-space !important;
-}
-.el-tree-node__content {
-  padding-right: 25px;
-}
-</style>
+<template>
+  <div class="smart_container">
+    <el-card class="header">
+      <div class="smart_tabs">
+        <div
+          class="tab"
+          :class="tabActive == 0 ? 'tab_active' : ''"
+          @click="switchTab(0)"
+        >
+          同步在线练习
+        </div>
+        <div
+          class="tab"
+          :class="tabActive == 1 ? 'tab_active' : ''"
+          @click="switchTab(1)"
+        >
+          知识点在线练习
+        </div>
+      </div>
+      <div class="radio_contianer">
+        <div style="margin-bottom: 16px">
+          <span>科目</span>
+          <el-radio-group
+            v-model="form.subjectId"
+            size="mini"
+            @change="toggleSub"
+          >
+            <el-radio-button
+              :label="item.subjectid"
+              v-for="item in subjectList"
+              :key="item.subjectid"
+            >{{ item.subjectname }}
+            </el-radio-button
+            >
+          </el-radio-group>
+        </div>
+        <div style="margin-bottom: 16px" v-show="tabActive == 0">
+          <span>版本</span>
+          <el-radio-group
+            v-model="form.editionId"
+            size="mini"
+            @change="toggleEdi"
+          >
+            <el-radio-button
+              :label="item.id"
+              v-for="(item,i) in editionList"
+              :key="i"
+            >{{ item.name }}
+            </el-radio-button
+            >
+          </el-radio-group>
+        </div>
+        <div style="margin-bottom: 16px" v-show="tabActive == 0">
+          <span>学册</span>
+          <el-radio-group
+            v-model="form.gradeId"
+            size="mini"
+            @change="toggleGrade"
+          >
+            <el-radio-button
+              :label="item.gradeid"
+              v-for="item in gradeList"
+              :key="item.gradeid"
+            >{{ item.gradename }}
+            </el-radio-button
+            >
+          </el-radio-group>
+        </div>
+      </div>
+    </el-card>
+    <el-container>
+      <el-aside width="284px" style="padding-bottom: 104px">
+        <div class="aside_header">
+          <span>CONTACT</span>
+          <span>章节目录</span>
+        </div>
+        <div class="aside_content">
+          <el-tree
+            v-show="tabActive == 0"
+            :data="treeList"
+            :props="defaultProps"
+            node-key="$treeNodeId"
+            @node-click="clickChapterNode"
+            highlight-current
+            ref="treeChapter"
+            :expand-on-click-node="false"
+          ></el-tree>
+          <el-tree
+            v-show="tabActive == 1"
+            :data="knowTreeList"
+            :props="knowDefaultProps"
+            node-key="knowledgeId"
+            @node-click="clickKnowNode"
+            :expand-on-click-node="false"
+            highlight-current
+            ref="tree"
+          ></el-tree>
+        </div>
+      </el-aside>
+      <el-main style="padding: 0; background: #fff">
+        <div class="main_tit">
+          <div class="tit_left" v-show="tabActive == 0">{{ chapterTitle }}</div>
+          <div class="tit_left" v-show="tabActive == 1">{{ konwTitle }}</div>
+          <div class="tit_right">
+            <div>
+              <input type="checkbox"/>
+              <span>过滤已做题</span>
+            </div>
+            <div
+              class="btn"
+              style="cursor: pointer"
+              @click="httpDiagnosticRecords(1)"
+            >
+              诊断记录
+            </div>
+          </div>
+        </div>
+        <!-- 主题内容 -->
+        <div class="main_con" v-show="tabActive == 0">
+          <div class="con_item" v-for="item in chapterList" :key="item.id">
+            <img src="@/assets/images/img_bg_tongbulianxi.png" alt=""/>
+            <div class="con_info">
+              <div class="tit">
+                {{ item.chapterName }}
+              </div>
+              <div class="count">共{{ item.num }}题</div>
+              <div class="btn" @click="toChapterQue(item)">马上做题</div>
+            </div>
+          </div>
+        </div>
+        <!-- 主题内容 -->
+        <div class="main_con" v-show="tabActive == 1">
+          <div
+            class="con_item"
+            v-for="item in knowList"
+            :key="item.knowledgeId"
+          >
+            <img src="@/assets/images/img_bg_tongbulianxi.png" alt=""/>
+            <div class="con_info">
+              <p class="tit">{{ item.knowledgeName }}</p>
+              <p class="count">共{{ item.num }}题</p>
+              <p class="btn" @click="toKnowQue(item)">马上做题</p>
+            </div>
+          </div>
+        </div>
+      </el-main>
+    </el-container>
+    <!-- 诊断的弹窗 -->
+    <el-dialog
+      title="同步在线诊断记录"
+      :visible.sync="dialogVisible"
+      width="50%"
+    >
+      <div class="tables">
+        <el-table :data="tableData.rows" stripe style="width: 100%">
+          <el-table-column type="index" width="50" label="序号">
+          </el-table-column>
+          <el-table-column prop="coursename" label="科目"></el-table-column>
+          <el-table-column prop="day" label="日期"></el-table-column>
+          <el-table-column label="用时">
+            <template slot-scope="scope">
+              <span>{{ scope.row.seconds + '秒' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="正确率">
+            <template slot-scope="scope">
+              <span>{{ scope.row.rate + '%' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <span
+                style="color: #47c6a2; cursor: pointer"
+                @click="toDetails(scope.row)"
+              >
+                <i class="el-icon-search" style="margin-right: 4px"></i
+                >操作</span
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="block">
+          <el-pagination
+            :page-sizes="[tablePageSize]"
+            layout="prev, pager, next"
+            :page-count="tableData.pageNum"
+            style="backgrond: #47c6a2"
+            @current-change="httpDiagnosticRecords"
+          >
+          </el-pagination>
+          <div class="count">
+            共{{ tableData.pageNum }}页 {{ tableData.total }}条
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+let flag = 1
+import {
+  treeList,
+  smartSubjectList,
+  smartGradeList,
+  newEditionList,
+  getQuestionsNumByChapter,
+  getQuestionsNumByKnowledge,
+  knowledgeTree,
+  diagnosticRecords
+} from '@/api/webApi/webQue.js'
+
+export default {
+  data() {
+    return {
+      tabActive: 0,
+      form: {
+        subjectId: 0,
+        editionId: 0,
+        gradeId: 0,
+        chapterId: 0,
+        knowledgeId: 0
+      },
+      tablePageSize: 5,
+      chapterTitle: '',
+      konwTitle: '',
+      dialogVisible: false,
+      tableData: [],
+      // 章节树的prop
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      // 知识树的prop
+      knowDefaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      subjectList: [],
+      editionList: {},
+      gradeList: [],
+      treeList: [],
+      knowTreeList: [],
+      knowList: [],
+      chapterList: []
+    }
+  },
+  created() {
+    // 设置默认高亮
+    this.tabActive = this.$route.query.tabActive
+      ? this.$route.query.tabActive
+      : 0
+    this.getSubjects()
+  },
+  methods: {
+    // 获取所有课程
+    getSubjects() {
+      smartSubjectList().then((res) => {
+        console.log(res)
+        this.form.subjectId = res.rows[0].subjectid
+        this.subjectList = res.rows
+        this.getEidtion()
+      })
+    },
+    getEidtion() {
+      newEditionList({ subjectId: this.form.subjectId }).then((res) => {
+        this.form.editionId = res.data[0].id
+        this.editionList = res.data
+        this.getGrade()
+      })
+    },
+    httpDiagnosticRecords(pageNum) {
+      diagnosticRecords({
+        pageNum: pageNum,
+        pageSize: this.tablePageSize,
+        type: 1
+      }).then((res) => {
+        this.dialogVisible = true
+        this.tableData = res
+        this.tableData['pageNum'] = Math.ceil(res.total / this.tablePageSize)
+        console.log(res)
+      })
+    },
+    // 获取所有的学册
+    getGrade() {
+      smartGradeList({ ...this.form }).then((res) => {
+        console.log(res)
+        if (res.data.length > 0) {
+          this.form.gradeId = res.data[0].gradeid
+        }
+        this.gradeList = res.data
+        if (this.tabActive == 0) {
+          this.getTree()
+        } else {
+          this.getTreeByKnowledge()
+        }
+      })
+    },
+    // 获取章节树
+    getTree() {
+      treeList({ ...this.form }).then((res) => {
+        console.log('gettree', res)
+        this.treeList = res.data
+        this.$nextTick(() => {
+          if (res.data.length > 0) {
+            this.chapterTitle = res.data[0].name
+            this.$refs.treeChapter.setCurrentKey(res.data[0].$treeNodeId)
+            this.form.chapterId = res.data[0].id
+          }
+          this.getQueByChapter()
+        })
+      })
+    },
+    // 获取知识点树
+    getTreeByKnowledge() {
+      knowledgeTree({ pharseId: 3, subjectId: this.form.subjectId }).then(
+        (res) => {
+          this.knowTreeList = res.data
+          console.log(res)
+          this.$nextTick(() => {
+            this.konwTitle = res.data[0].name
+            this.form.knowledgeId = res.data[0].id
+            this.getQueByKnowledge()
+          })
+        }
+      )
+    },
+    toDetails(item) {
+      this.$router.push({
+        path: '/question-center/smartExercise/answerDetailas',
+        query: {
+          batchno: item.batchno,
+          info: encodeURIComponent(JSON.stringify(item))
+        }
+      })
+    },
+    // 根据章节来获取题目
+    getQueByChapter() {
+      console.log('-------获取题目-------')
+      getQuestionsNumByChapter({
+        chapterId: this.form.chapterId,
+        subjectId: this.form.subjectId,
+        gradeId: this.form.gradeId,
+        editionId: this.form.editionId
+      }).then((res) => {
+        console.log(res)
+        this.chapterList = res.data
+      })
+    },
+    // 根据知识点来获取题目
+    getQueByKnowledge() {
+      getQuestionsNumByKnowledge({
+        knowledgeId: this.form.knowledgeId,
+        subjectId: this.form.subjectId
+      }).then((res) => {
+        this.knowList = res.data
+        console.log(res)
+      })
+    },
+    toggleSub(e) {
+      this.form.subjectId = e
+      this.getEidtion()
+      if (this.tabActive == 1) {
+        this.getTreeByKnowledge()
+      }
+    },
+    toggleEdi(e) {
+      this.form.editionId = e
+      this.getGrade()
+    },
+    toggleGrade(e) {
+      this.form.gradeId = e
+      this.getTree()
+    },
+    clickChapterNode(item) {
+      console.log(item)
+      this.chapterTitle = item.name
+      this.form.chapterId = item.id
+      this.getQueByChapter()
+    },
+    clickKnowNode(item) {
+      console.log(item)
+      this.form.knowledgeId = item.id
+      this.konwTitle = item.name
+      this.getQueByKnowledge()
+    },
+    switchTab(index) {
+      this.tabActive = index
+      if (index == 1) {
+        console.log(111111111111)
+        this.getTreeByKnowledge()
+      } else {
+        console.log(22222222)
+        this.getTree()
+      }
+    },
+    // 做章节题目
+    toChapterQue(item) {
+      console.log(item)
+      this.$router.push({
+        path: '/question-center/smartExercise/practice',
+        query: {
+          chapterId: item.chapterId,
+          title: item.chapterName,
+          subjectId: this.form.subjectId
+        }
+      })
+    },
+    // 做知识点题目
+    toKnowQue(item) {
+      console.log(item)
+      this.$router.push({
+        path: '/question-center/smartExercise/practice',
+        query: {
+          knowledgeId: item.knowledgeId,
+          title: item.knowledgeName,
+          subjectId: this.form.subjectId
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.smart_container {
+  padding: 20px;
+  background: #f7f7f7;
+}
+
+.smart_tabs {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.smart_tabs .tab {
+  text-align: center;
+  flex: 1;
+  padding: 8px 0 24px 0;
+  border-bottom: 4px solid transparent;
+}
+
+.smart_tabs .tab_active {
+  color: #47c6a2;
+  border-bottom: 4px solid #47c6a2;
+}
+
+.radio_contianer span {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #232323;
+  line-height: 20px;
+  height: 20px;
+  margin-right: 16px;
+}
+
+.radio_contianer .el-radio-button {
+  margin-right: 8px;
+}
+
+.aside_header {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 24px 16px 0 16px;
+  margin-bottom: 16px;
+}
+
+.el-aside {
+  background: white;
+  padding: 0;
+  margin-bottom: 0;
+  margin-right: 16px;
+}
+
+.aside_header span {
+  margin-top: 5px;
+  width: 84px;
+  height: 22px;
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #343434;
+  line-height: 22px;
+}
+
+.aside_header span:first-child {
+  width: 173px;
+  height: 27px;
+  background: linear-gradient(180deg, #ffffff 0%, #47c6a2 100%);
+  opacity: 0.5;
+}
+
+.main_tit {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 52px;
+  padding-bottom: 19px;
+  border-bottom: 1px solid #eee;
+  padding-left: 19px;
+  margin-bottom: 23px;
+}
+
+.main_tit .tit_right {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.main_tit .tit_right .btn {
+  background: #47c6a2;
+  border-radius: 16px;
+  padding: 6px 19px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  margin-left: 32px;
+  margin-right: 57px;
+}
+
+.tit_right input {
+  background: #d8d8d8;
+  margin: 0;
+}
+
+.tit_right span {
+  margin-left: 8px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #47c6a2;
+}
+
+.main_con {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 21px 0 16px;
+}
+
+.main_con .con_item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  flex: 0 0 33%;
+  padding-right: 15px;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.main_con .con_item img {
+  width: 100%;
+  height: 100%;
+}
+
+.main_con .con_item .con_info {
+  position: absolute;
+  top: 24px;
+  left: 24px;
+}
+
+.main_con .con_item .con_info p {
+  margin: 0;
+}
+
+.main_con .con_item .con_info .tit {
+  height: 22px;
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #343434;
+  line-height: 22px;
+}
+
+.main_con .con_item .con_info .count {
+  height: 16px;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #717171;
+  line-height: 17px;
+  margin-top: 8px;
+}
+
+.main_con .con_item .con_info .btn {
+  cursor: pointer;
+  display: inline-block;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 17px;
+  padding: 4px 12px;
+  background: #47c6a2;
+  margin-top: 20px;
+  text-align: center;
+}
+
+.block {
+  text-align: center;
+  margin-top: 20px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.block > .count {
+  top: 10px;
+  left: 0;
+  position: absolute;
+}
+</style>
+<style>
+.el-radio-button__inner {
+  border-left: 1px solid #dcdfe6;
+}
+
+.radio_contianer .el-radio-button .el-radio-button__inner {
+  border-radius: 16px;
+}
+
+.split_page .el-pager > li {
+  border-radius: 50%;
+}
+
+.header {
+  margin-bottom: 10px;
+}
+</style>
+<style>
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  color: #47c6a2;
+  background: #ffffff;
+}
+
+.el-tree-node__content {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  height: 32px;
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #343434;
+  line-height: 20px;
+}
+
+.el-tree-node {
+  padding-left: 16px;
+}
+
+.el-tree-node__expand-icon.expanded {
+  content: "";
+}
+
+.el-tree-node__content > .el-tree-node__expand-icon {
+  padding: 6px;
+  /* position: absolute; */
+  right: 16px;
+}
+
+.el-table .el-table__header-wrapper th,
+.el-table .el-table__fixed-header-wrapper th {
+  background: #47c6a2;
+  color: white;
+}
+
+.el-dialog__header .el-dialog__title {
+  color: #47c6a2;
+}
+
+.radio_contianer .el-radio-button:first-child:last-child .el-radio-button__inner {
+  border-radius: 16px;
+}
+
+.el-tree-node__content {
+  white-space: break-space !important;
+}
+
+.el-tree-node__content {
+  padding-right: 25px;
+}
+</style>

src/views/videocourse/video_course.vue

@@ -1,376 +1,376 @@
-<template >
-  <div class="video_contianer">
-    <el-card>
-      <div slot="header" class="header">
-        <div class="spans">
-          <span
-            v-for="item in videoType"
-            :key="item.code"
-            :class="typeActive == item.code ? 'active_text' : ''"
-            @click="toggleType(item.code)"
-            >{{ item.label }}</span
-          >
-        </div>
-        <div class="search_btn" style="float: right; overflow: auto">
-          <input
-            v-model="form.sectionName"
-            @keyup.enter="searchVideo"
-            placeholder="请输入搜索内容"
-          />
-          <img src="@/assets/images/icon_search.png" @click="searchVideo" />
-        </div>
-      </div>
-      <div class="radio_contianer">
-        <div style="margin-bottom: 16px">
-          <span>科目</span>
-          <el-radio-group v-model="form.course" @change="getGrade" size="mini">
-            <el-radio-button
-              :label="item.code"
-              v-for="item in subjects"
-              :key="item.code"
-              >{{ item.label }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px">
-          <span>年级</span>
-          <el-radio-group v-model="form.grade" @change="getVersion" size="mini">
-            <el-radio-button
-              :label="item.code"
-              v-for="item in grade"
-              :key="item.code"
-              >{{ item.label }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px" v-if="version.length > 0">
-          <span>版本</span>
-          <el-radio-group
-            v-model="form.version"
-            size="mini"
-            @change="toggleCondition"
-          >
-            <el-radio-button
-              :label="item.code"
-              v-for="item in version"
-              :key="item.code"
-              >{{ item.label }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-        <div style="margin-bottom: 16px" v-if="packList.length > 0">
-          <span>分类</span>
-          <el-radio-group
-            v-model="form.pack"
-            size="mini"
-            @change="togglePack($event)"
-          >
-            <el-radio-button
-              :label="item.value"
-              v-for="item in packList"
-              :key="item.code"
-              >{{ item.label }}</el-radio-button
-            >
-          </el-radio-group>
-        </div>
-      </div>
-    </el-card>
-    <!-- 视频主体 -->
-    <el-card class="video_content" v-if="videoList.length > 0">
-      <el-row :span="24">
-        <el-col
-          :span="6"
-          class="video_item"
-          v-for="item in videoList"
-          :key="item.id"
-        >
-          <img
-            :src="item.img"
-            alt=""
-            @click="
-              toVideoDetail(
-                item.pack_id,
-                item.chapter_id,
-                item.id,
-                item.section_aliId,
-                item.aliIdType
-              )
-            "
-          />
-          <p>{{ item.section_name }}</p>
-        </el-col>
-      </el-row>
-      <!-- 分页 -->
-      <div class="split_page">
-        <el-pagination
-          background
-          layout="prev, pager, next"
-          :total="total"
-          :page-size="this.form.pageSize"
-          :current-page="this.form.pageNum"
-          @next-click="next"
-          @prev-click="prev"
-          @current-change="togglePage"
-        >
-        </el-pagination>
-      </div>
-    </el-card>
-    <evaluation-empty v-if="videoList.length == 0" />
-  </div>
-</template>
-<script>
-import {
-  videoSubjects,
-  videoType,
-  videoGrades,
-  videoVersions,
-  packList,
-  videoList,
-  videoInfo,
-} from "@/api/webApi/webVideo";
-import FormSearch from "@/components/formSearch";
-export default {
-  components: { FormSearch },
-  data() {
-    return {
-      input: "",
-      videoList: [],
-      grade: [],
-      typeActive: 0,
-      videoType: [],
-      input: "",
-      form: {
-        course: "", // 科目
-        subject: "", // 大类
-        grade: "", // 年级
-        version: "", // 版本
-        pageNum: 1,
-        pageSize: 16,
-        pack: 0,
-        sectionName: "",
-      },
-      subjects: [], // 课程
-      grade: [], // 年级
-      version: [], //  版本
-      packList: [], // 分类
-      total: 0,
-      packNewList: [],
-      videoList: [], // 视频列表
-    };
-  },
-  methods: {
-    tohandle(code) {
-      console.log(code);
-    },
-    toVideoDetail(id, chapter_id, childrenId, section_aliId, aliIdType) {
-      this.$router.push({
-        path: "/video_course/detail",
-        query: {
-          packId: id,
-          chapter_id: chapter_id,
-          childrenId: childrenId,
-          section_aliId,
-          aliIdType: aliIdType
-        },
-      });
-    },
-    searchVideo() {
-      this.getVideoList();
-    },
-    // 获取视频课程大类
-    getVideoType() {
-      videoType().then((res) => {
-        this.videoType = res.rows;
-        if (res.rows.length > 0) {
-          this.toggleType(res.rows[0].code);
-        }
-      });
-    },
-    //  切换大类获取科目
-    toggleType(params) {
-      this.typeActive = params;
-      this.form.subject = params;
-      let { subject } = this.form;
-      // 获取科目
-      videoSubjects({ subject }).then((res) => {
-        this.subjects = res.rows;
-        if (res.rows.length > 0) {
-          this.form.course = res.rows[0].code;
-        }
-        // 获取年级
-        this.getGrade();
-      });
-    },
-    // 获取年级
-    getGrade() {
-      let { subject, course } = this.form;
-      videoGrades({ subject, course }).then((res) => {
-        console.log(JSON.stringify(res.rows));
-        this.grade = res.rows;
-        if (res.rows.length > 0) {
-          this.form.grade = res.rows[0].code;
-        }
-        this.getVersion();
-      });
-    },
-    // 获取版本
-    getVersion() {
-      let { subject, course, grade } = this.form;
-      videoVersions({ subject, course, grade }).then((res) => {
-        let resArr = res.rows.filter((item) => {
-          return item != null;
-        });
-        if (resArr.length > 0) {
-          this.version = resArr;
-          this.form.version = this.version[0].code;
-          this.getPack();
-        } else {
-          this.version = []
-          this.form.version = ''
-          this.videoList = []
-        }
-      });
-    },
-    // 获取包分类
-    getPack() {
-      packList(this.form).then((res) => {
-        if (res.rows.length > 0) {
-          this.form.pack = res.rows[0].value;
-          this.packList = res.rows;
-          this.getVideoList();
-        } else {
-          this.packList = []
-          this.form.pack = ''
-          this.videoList = []
-        }
-      });
-    },
-    // 获取视频列表
-    getVideoList() {
-      videoList(this.form).then((res) => {
-        console.log(res);
-        this.total = res.total;
-        this.videoList = res.rows;
-      });
-    },
-    togglePack(pack) {
-      this.form.pack = pack;
-      this.getVideoList();
-    },
-    toggleCondition(code) {
-      this.form.version = code;
-      this.getPack();
-    },
-    next() {
-      this.form.pageNum++, this.getVideoList();
-    },
-    prev() {
-      this.form.pageNum--, this.getVideoList();
-    },
-    togglePage(e) {
-      this.form.pageNum = e;
-      this.getVideoList();
-    },
-  },
-  created() {
-    this.getVideoType();
-  },
-};
-</script>
-<style scoped>
-.el-card {
-  margin-bottom: 32px;
-}
-.header {
-  padding-bottom: 17px;
-}
-.video_contianer {
-  padding: 20px;
-}
-.spans {
-  display: inline-block;
-}
-.spans > span {
-  padding: 6px 19px;
-  border-radius: 16px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  margin-right: 8px;
-  border: 1px solid #eee;
-}
-.active_text {
-  background: #47c6a2;
-  color: white;
-}
-.search_btn {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.search_btn input {
-  border: 0;
-  height: 100%;
-}
-.search_btn input:focus {
-  outline: 0;
-}
-.search_btn img {
-  cursor: pointer;
-}
-.radio_contianer {
-  margin-top: 24px;
-}
-.radio_contianer span {
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #232323;
-  line-height: 20px;
-  height: 20px;
-  margin-right: 16px;
-}
-.radio_contianer .el-radio-button {
-  margin-right: 8px;
-}
-.video_content p {
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  height: 27px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #343434;
-  line-height: 20px;
-  margin-top: 11px;
-}
-.video_item > img {
-  cursor: pointer;
-}
-.video_content .el-col {
-  margin-bottom: 42px;
-}
-.video_item > img {
-  width: 100%;
-  padding-right: 22px;
-}
-.split_page {
-  display: flex;
-  justify-content: center;
-}
-</style>
-<style >
-.el-radio-button__inner {
-  border-left: 1px solid #dcdfe6;
-}
-.el-radio-button:first-child:last-child .el-radio-button__inner {
-  border-radius: 16px;
-}
-.radio_contianer .el-radio-button .el-radio-button__inner {
-  border-radius: 16px;
-}
-.split_page .el-pager > li {
-  border-radius: 50%;
-}
-</style>
+<template >
+  <div class="video_contianer">
+    <el-card>
+      <div slot="header" class="header">
+        <div class="spans">
+          <span
+            v-for="item in videoType"
+            :key="item.code"
+            :class="typeActive == item.code ? 'active_text' : ''"
+            @click="toggleType(item.code)"
+            >{{ item.label }}</span
+          >
+        </div>
+        <div class="search_btn" style="float: right; overflow: auto">
+          <input
+            v-model="form.sectionName"
+            @keyup.enter="searchVideo"
+            placeholder="请输入搜索内容"
+          />
+          <img src="@/assets/images/icon_search.png" @click="searchVideo" />
+        </div>
+      </div>
+      <div class="radio_contianer">
+        <div style="margin-bottom: 16px">
+          <span>科目</span>
+          <el-radio-group v-model="form.course" @change="getGrade" size="mini">
+            <el-radio-button
+              :label="item.code"
+              v-for="item in subjects"
+              :key="item.code"
+              >{{ item.label }}</el-radio-button
+            >
+          </el-radio-group>
+        </div>
+        <div style="margin-bottom: 16px">
+          <span>年级</span>
+          <el-radio-group v-model="form.grade" @change="getVersion" size="mini">
+            <el-radio-button
+              :label="item.code"
+              v-for="item in grade"
+              :key="item.code"
+              >{{ item.label }}</el-radio-button
+            >
+          </el-radio-group>
+        </div>
+        <div style="margin-bottom: 16px" v-if="version.length > 0">
+          <span>版本</span>
+          <el-radio-group
+            v-model="form.version"
+            size="mini"
+            @change="toggleCondition"
+          >
+            <el-radio-button
+              :label="item.code"
+              v-for="item in version"
+              :key="item.code"
+              >{{ item.label }}</el-radio-button
+            >
+          </el-radio-group>
+        </div>
+        <div style="margin-bottom: 16px" v-if="packList.length > 0">
+          <span>分类</span>
+          <el-radio-group
+            v-model="form.pack"
+            size="mini"
+            @change="togglePack($event)"
+          >
+            <el-radio-button
+              :label="item.value"
+              v-for="item in packList"
+              :key="item.code"
+              >{{ item.label }}</el-radio-button
+            >
+          </el-radio-group>
+        </div>
+      </div>
+    </el-card>
+    <!-- 视频主体 -->
+    <el-card class="video_content" v-if="videoList.length > 0">
+      <el-row :span="24">
+        <el-col
+          :span="6"
+          class="video_item"
+          v-for="item in videoList"
+          :key="item.id"
+        >
+          <img
+            :src="item.img"
+            alt=""
+            @click="
+              toVideoDetail(
+                item.pack_id,
+                item.chapter_id,
+                item.id,
+                item.section_aliId,
+                item.aliIdType
+              )
+            "
+          />
+          <p>{{ item.section_name }}</p>
+        </el-col>
+      </el-row>
+      <!-- 分页 -->
+      <div class="split_page">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :page-size="this.form.pageSize"
+          :current-page="this.form.pageNum"
+          @next-click="next"
+          @prev-click="prev"
+          @current-change="togglePage"
+        >
+        </el-pagination>
+      </div>
+    </el-card>
+    <evaluation-empty v-if="videoList.length == 0" />
+  </div>
+</template>
+<script>
+import {
+  videoSubjects,
+  videoType,
+  videoGrades,
+  videoVersions,
+  packList,
+  videoList,
+  videoInfo,
+} from "@/api/webApi/webVideo";
+import FormSearch from "@/components/formSearch";
+export default {
+  components: { FormSearch },
+  data() {
+    return {
+      input: "",
+      videoList: [],
+      grade: [],
+      typeActive: 0,
+      videoType: [],
+      input: "",
+      form: {
+        course: "", // 科目
+        subject: "", // 大类
+        grade: "", // 年级
+        version: "", // 版本
+        pageNum: 1,
+        pageSize: 16,
+        pack: 0,
+        sectionName: "",
+      },
+      subjects: [], // 课程
+      grade: [], // 年级
+      version: [], //  版本
+      packList: [], // 分类
+      total: 0,
+      packNewList: [],
+      videoList: [], // 视频列表
+    };
+  },
+  methods: {
+    tohandle(code) {
+      console.log(code);
+    },
+    toVideoDetail(id, chapter_id, childrenId, section_aliId, aliIdType) {
+      this.$router.push({
+        path: "/video_course/detail",
+        query: {
+          packId: id,
+          chapter_id: chapter_id,
+          childrenId: childrenId,
+          section_aliId,
+          aliIdType: aliIdType
+        },
+      });
+    },
+    searchVideo() {
+      this.getVideoList();
+    },
+    // 获取视频课程大类
+    getVideoType() {
+      videoType().then((res) => {
+        this.videoType = res.rows;
+        if (res.rows.length > 0) {
+          this.toggleType(res.rows[0].code);
+        }
+      });
+    },
+    //  切换大类获取科目
+    toggleType(params) {
+      this.typeActive = params;
+      this.form.subject = params;
+      let { subject } = this.form;
+      // 获取科目
+      videoSubjects({ subject }).then((res) => {
+        this.subjects = res.rows;
+        if (res.rows.length > 0) {
+          this.form.course = res.rows[0].code;
+        }
+        // 获取年级
+        this.getGrade();
+      });
+    },
+    // 获取年级
+    getGrade() {
+      let { subject, course } = this.form;
+      videoGrades({ subject, course }).then((res) => {
+        console.log(JSON.stringify(res.rows));
+        this.grade = res.rows;
+        if (res.rows.length > 0) {
+          this.form.grade = res.rows[0].code;
+        }
+        this.getVersion();
+      });
+    },
+    // 获取版本
+    getVersion() {
+      let { subject, course, grade } = this.form;
+      videoVersions({ subject, course, grade }).then((res) => {
+        let resArr = res.rows.filter((item) => {
+          return item != null;
+        });
+        if (resArr.length > 0) {
+          this.version = resArr;
+          this.form.version = this.version[0].code;
+          this.getPack();
+        } else {
+          this.version = []
+          this.form.version = ''
+          this.videoList = []
+        }
+      });
+    },
+    // 获取包分类
+    getPack() {
+      packList(this.form).then((res) => {
+        if (res.rows.length > 0) {
+          this.form.pack = res.rows[0].value;
+          this.packList = res.rows;
+          this.getVideoList();
+        } else {
+          this.packList = []
+          this.form.pack = ''
+          this.videoList = []
+        }
+      });
+    },
+    // 获取视频列表
+    getVideoList() {
+      videoList(this.form).then((res) => {
+        console.log(res);
+        this.total = res.total;
+        this.videoList = res.rows;
+      });
+    },
+    togglePack(pack) {
+      this.form.pack = pack;
+      this.getVideoList();
+    },
+    toggleCondition(code) {
+      this.form.version = code;
+      this.getPack();
+    },
+    next() {
+      this.form.pageNum++, this.getVideoList();
+    },
+    prev() {
+      this.form.pageNum--, this.getVideoList();
+    },
+    togglePage(e) {
+      this.form.pageNum = e;
+      this.getVideoList();
+    },
+  },
+  created() {
+    this.getVideoType();
+  },
+};
+</script>
+<style scoped>
+.el-card {
+  margin-bottom: 32px;
+}
+.header {
+  padding-bottom: 17px;
+}
+.video_contianer {
+  padding: 20px;
+}
+.spans {
+  display: inline-block;
+}
+.spans > span {
+  padding: 6px 19px;
+  border-radius: 16px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  margin-right: 8px;
+  border: 1px solid #eee;
+}
+.active_text {
+  background: #47c6a2;
+  color: white;
+}
+.search_btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.search_btn input {
+  border: 0;
+  height: 100%;
+}
+.search_btn input:focus {
+  outline: 0;
+}
+.search_btn img {
+  cursor: pointer;
+}
+.radio_contianer {
+  margin-top: 24px;
+}
+.radio_contianer span {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #232323;
+  line-height: 20px;
+  height: 20px;
+  margin-right: 16px;
+}
+.radio_contianer .el-radio-button {
+  margin-right: 8px;
+}
+.video_content p {
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  height: 27px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #343434;
+  line-height: 20px;
+  margin-top: 11px;
+}
+.video_item > img {
+  cursor: pointer;
+}
+.video_content .el-col {
+  margin-bottom: 42px;
+}
+.video_item > img {
+  width: 100%;
+  padding-right: 22px;
+}
+.split_page {
+  display: flex;
+  justify-content: center;
+}
+</style>
+<style >
+.radio_contianer .el-radio-button__inner {
+  border-left: 1px solid #dcdfe6;
+}
+.radio_contianer .el-radio-button:first-child:last-child .el-radio-button__inner {
+  border-radius: 16px;
+}
+.radio_contianer .el-radio-button .el-radio-button__inner {
+  border-radius: 16px;
+}
+.split_page .el-pager > li {
+  border-radius: 50%;
+}
+</style>