题库功能优化

闫增涛

2024-07-01 d0940596d5f35ef96a5818ee315f86454c3d0ab1

 src/views/readerPages/webHome.vue

@@ -93,7 +93,7 @@
      <!-- 菜单内容 -->
      <div class="menuContent" v-if="menuState.open">
        <div class="searchBox">
          <div class="inputBox" v-if="activeMenu !== '资源' && activeMenu !== '习题'">
          <div class="inputBox" v-if="activeMenu !== '资源' && activeMenu !== '题库'">
            <el-input
              class="custom-input"
              placeholder="请输入内容"
@@ -117,17 +117,48 @@
              <div>教师资源</div>
              <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" />
            <div class="tabItem hover" @click="selectResourceType('collect')">
              <div>收藏资源</div>
              <div :class="resourceType == 'collect' ? 'text' : 'line'"></div>
            </div>
          </div>
          <div v-if="activeMenu == '习题'" class="resourceTab">
            <div class="tabItem hover" @click="selectExercisesType('exercises')">
          <div v-if="activeMenu == '题库'" class="resourceTab">
            <div
              class="tabItem hover"
              @click="selectExercisesType('exercises')"
              v-if="bookConfig.textbookComponents.indexOf('3D3B4F55') > -1"
            >
              <div>习题</div>
              <div :class="exercisesType == 'exercises' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" />
            <div class="tabItem hover" @click="selectExercisesType('wrong')">
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" />
            <div
              class="tabItem hover"
              @click="selectExercisesType('additional')"
              v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"
            >
              <div>附加题</div>
              <div :class="exercisesType == 'additional' ? 'text' : 'line'"></div>
            </div>
            <!-- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1" />
            <div
              class="tabItem hover"
              @click="selectExercisesType('wrong')"
              v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1"
            >
              <div>错题本</div>
              <div :class="exercisesType == 'wrong' ? 'text' : 'line'"></div>
            </div>
            </div> -->
            <!-- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1" />
            <div
              class="tabItem hover"
              @click="selectExercisesType('collection')"
              v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1"
            >
              <div>收藏夹</div>
              <div :class="exercisesType == 'collection' ? 'text' : 'line'"></div>
            </div> -->
          </div>
        </div>
        <!-- 目录 -->
@@ -192,7 +223,7 @@
          </div>
        </div>
        <!-- 笔记 -->
        <div class="notesBox" v-if="activeMenu == '笔记'">
        <div class="notesBox" v-if="activeMenu == '笔记'" v-loading="listLoading">
          <div class="screenBox">
            <div class="title">筛选</div>
            <div class="flex1 hover" @click="searchClick('all')">
@@ -210,7 +241,7 @@
              ></div>
            </div>
          </div>
          <div class="list-box" v-loading="listLoading">
          <div class="list-box">
            <div v-if="scribeData.noteList.length > 0">
              <div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem">
                <div class="chapterName">
@@ -391,6 +422,12 @@
                            "
                            ><Download
                          /></el-icon>
                          <!-- 收藏按钮 -->
                           <img 
                            :src="collectResourceList.findIndex(citem => citem.id == item.id) > -1 ? isHeart : heart  " 
                            class="icon hover" 
                            style="width: 15px;" 
                            @click="handleCollectResource(item.id,item.md5 ? item.md5 : '',item.resourcePath ? item.resourcePath : '',item.resourceType,item.resourceType == '视频' || '音频' ? 'bits' : 'json',item.resourceName)" />
                        </div>
                      </div>
                    </div>
@@ -413,8 +450,8 @@
          </div>
        </div>
        <!-- 截图 -->
        <div class="screenshotList" v-if="activeMenu == '截图'">
          <div class="list-box" v-loading="listLoading">
        <div class="screenshotList" v-if="activeMenu == '截图'" v-loading="listLoading">
          <div class="list-box">
            <div class="screenshot" v-if="screenshotList.length > 0">
              <div v-for="(item, index) in screenshotList" :key="item" class="captureItem">
                <div class="imgBox" @mouseover="showDelete = index" @mouseleave="showDelete = null">
@@ -438,8 +475,8 @@
          </div>
        </div>
        <!-- 书签 -->
        <div class="reMarkList" v-if="activeMenu == '书签'">
          <div class="list-box" v-loading="listLoading">
        <div class="reMarkList" v-if="activeMenu == '书签'" v-loading="listLoading">
          <div class="list-box">
            <div v-if="reMarkList.length > 0">
              <div v-for="(item, index) in reMarkList" :key="index" class="reMarkItem">
                <div class="reMarkCon hover" @click="goReMark(item)">
@@ -455,8 +492,11 @@
            </div>
          </div>
        </div>
        <div class="questionList" v-if="activeMenu == '习题'">
          <div class="resourceSearchBox">
        <div class="questionList" v-if="activeMenu == '题库'" v-loading="listLoading">
          <div
            class="resourceSearchBox"
            v-if="exercisesType !== 'collection' && exercisesType !== 'wrong'"
          >
            <div class="inputBox">
              <el-input
                class="custom-input"
@@ -477,18 +517,29 @@
              <div v-for="(item, index) in questionList" :key="index" class="reMarkItem">
                <div
                  class="questionCon hover"
                  @click="JumpPosition(item)"
                  @click="clickQuestion(exercisesType, item)"
                  :title="item.resourceName"
                >
                  {{ item.resourceName }}
                </div>
              </div>
            </div>
            <div v-else>
            <div
              v-if="
                questionList.length == 0 &&
                exercisesType !== 'collection' &&
                exercisesType !== 'wrong'
              "
            >
              <el-empty :image-size="60" description="暂无数据" />
            </div>
          </div>
        </div>
        <!-- 题库底部收藏夹和错题集 -->
        <ul class="question-bottom" v-if="activeMenu == '题库'">
            <li @click="selectExercisesType('collection')">收藏夹</li>
            <li @click="selectExercisesType('wrong')">错题本</li>
          </ul>
        <!-- 菜单内容收起 -->
        <div class="menuStateBox" v-if="menuState.open">
          <svg
@@ -1172,12 +1223,34 @@
      <newWord :resourceUrl="resourceUrl" />
    </div>
  </el-dialog>
  <el-dialog
    title="错题本"
    align-center
    v-model="wrongQuestionVisble"
    width="800"
    class="myDialogs"
  >
    <div class="wendabox">
      <wrongQuestion />
    </div>
  </el-dialog>
  <!-- 答题器 -->
  <examination
    ref="examinationRef"
    :activeBook="bookConfig"
    :info="examinationData.info"
    :type="examinationData.type"
    :infoType="examinationData.infoType"
  />
</template>

<script setup lang="ts">
import heart from '@/assets/images/examination/collectIcon.png'
import isHeart from '@/assets/images/examination/collectClickIcon.png'
import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useClipboard from 'vue-clipboard3'
import examination from '../examination/index.vue'
const { toClipboard } = useClipboard()
const MG: any = inject('MG')
const toolClass = inject('toolClass')
@@ -1189,6 +1262,7 @@
import moment from 'moment'
import dictionary from '@/views/components/dictionary.vue'
import newWord from '@/views/components/newWord.vue'
import wrongQuestion from '@/views/components/wrongQuestion.vue'
import { ElMessage, ElMessageBox, valueEquals } from 'element-plus'
import logo from '@/assets/images/header/logo.png'
import mulu from '@/assets/images/menu/mulu.png'
@@ -1198,6 +1272,7 @@
import jietu from '@/assets/images/menu/jietu.png'
import biaoqian from '@/assets/images/menu/biaoqian.png'
import allSearch from '@/assets/images/menu/allSearch.svg'
import question from '@/assets/images/menu/question.svg'
import topbg from '@/assets/images/header/top-bg.png'
import setting from '@/assets/images/operation/setting.png'
import search from '@/assets/images/operation/search.png'
@@ -1211,7 +1286,7 @@
import shengzikapian from '@/assets/images/menu/shengzikapian.png'
import hudongwenda from '@/assets/images/menu/hudongwenda.png'
import siweidaotu from '@/assets/images/menu/siweidaotu.png'
import GGB from '@/assets/images/menu/GGB.png'
import GGB from '@/assets/images/menu/function.png'
import jihe from '@/assets/images/menu/jihe.png'
import python from '@/assets/images/menu/python.png'
import cjiajia from '@/assets/images/menu/C++.png'
@@ -1285,6 +1360,7 @@

import { loadMicroApp } from 'qiankun'
import { microApps } from '@/child.ts'
import { open } from 'fs'
let token = localStorage.getItem('token')
const canvasWith = ref(1000)
const canvasheight = ref(3000)
@@ -1528,11 +1604,15 @@
      icon: biaoqian,
      isShow: bookConfig.value.textbookComponents.indexOf('CF2E1400') > -1
    },
    // {
    //   name: '习题',
    //   icon: zhishitupu,
    //   isShow: true
    // }
    {
      name: '题库',
      icon: question,
      isShow:
        bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 ||
        bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 ||
        bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 ||
        bookConfig.value.textbookComponents.indexOf('A4821F71') > -1
    }
  ]
  teachToolsMenuData = [
    {
@@ -1694,6 +1774,7 @@
      listLoading.value = false
    })
    .catch(function (error) {
      listLoading.value = false
      console.log(error)
    })
}
@@ -1746,6 +1827,7 @@
const showHandle = ref(null)
const playIndex = ref(null) //音频播放
const audioPlayer = ref(null)
const collectResourceList = ref([])
const getResourceData = () => {
  if (token) {
    imgPreviewList.value = []
@@ -1930,6 +2012,9 @@
      })
      .catch(function (error) {
        console.log(error)
        resourceDataList.value = []
        classifySelectList.value = []
        listLoading.value = false
      })
  } else {
    ElMessageBox.confirm('请先登录！', {
@@ -1939,7 +2024,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
@@ -1992,7 +2083,6 @@

//资源跳转到指定位置
const JumpPosition = (data) => {
  console.log(data, '跳转')
  if (window.qiankunState && window.qiankunState.gotoPage) {
    window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination))
  }
@@ -2002,14 +2092,23 @@
const selectResourceType = (type) => {
  resourceType.value = type
  searchText.value = ''
  getResourceData()
  if (type == 'collect') {
    getCollectResource()
  } else {
    getResourceData()
  }
}
//资源类型图片/视频/音频/习题/其他
const classifyClick = (item) => {
  activeClassify.value = item.key
  resourceDataList.value = []
  searchText.value = ''
  getResourceData()
  if(resourceType.value == 'collect') {
    getCollectResource()
  } else {
    getResourceData()
  }
  
}
const searchBtn = () => {
  if (searchShow.value) {
@@ -2019,32 +2118,218 @@
  }
}

// 获取收藏的资源
const getCollectResource = () => {
  if(token) {
    MG.identity
    .getUserKey({
      domain: 'collectResource',
      keys: [bookConfig.value.bookId]
    })
    .then((res) => {
      if (res.length) {
        collectResourceList.value = JSON.parse(res[0].value)
        console.log('收藏资源列表', collectResourceList.value)
        if(collectResourceList.value.length > 0) {
            let imgCount = 0
            let audioCount = 0
            let videoCount = 0
            let exercisesCount = 0
            let otherCount = 0
            resourceDataList.value = []
            collectResourceList.value.forEach((resItem) => {
              if (resItem.resourceType == '图片') {
                if (resItem.resourcePath) {
                  resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath
                } else {
                  resItem.resourcePath =
                    bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5
                }

                imgPreviewList.value.push(resItem.resourcePath)
                if (activeClassify.value == 'image') {
                  resourceDataList.value.push(resItem)
                }
                imgCount++
              } else if (resItem.resourceType == '音频') {
                if (activeClassify.value == 'audio') {
                  resourceDataList.value.push(resItem)
                }
                audioCount++
              } else if (resItem.resourceType == '视频') {
                if (activeClassify.value == 'video') {
                  resourceDataList.value.push(resItem)
                }
                videoCount++
              } else {
                if (activeClassify.value == 'other') {
                  resourceDataList.value.push(resItem)
                }
                otherCount++
              }
            })
            classifySelectList.value = []
            if (imgCount > 0) {
              classifySelectList.value.push({
                title: '图片',
                count: imgCount,
                key: 'image'
              })
            }
            if (audioCount > 0) {
              classifySelectList.value.push({
                title: '音频',
                count: audioCount,
                key: 'audio'
              })
            }
            if (videoCount > 0) {
              classifySelectList.value.push({
                title: '视频',
                count: videoCount,
                key: 'video'
              })
            }
            if (otherCount > 0) {
              classifySelectList.value.push({
                title: '其他',
                count: otherCount,
                key: 'other'
              })
            }
            if (!activeClassify.value) {
              activeClassify.value = classifySelectList.value[0].key
              collectResourceList.value.forEach((resItem1) => {
                if (resItem1.resourceType == classifySelectList.value[0].title) {
                  resourceDataList.value.push(resItem1)
                }
              })
            }
        }
      } else {
        resourceDataList.value = []
      }
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
}
// 收藏按钮
const handleCollectResource = (id,md5,resourcePath,resourceType,source,resourceName) => {
    if(collectResourceList.value.findIndex(item => item.id == id) > -1) {
      collectResourceList.value = collectResourceList.value.filter(item => item.id != id)
    } else {
      collectResourceList.value.push({
        id,
        md5,
        resourcePath:resourcePath.replace(bookConfig.value.resourceUrl + '/',''),
        resourceType,
        source,
        resourceName
      })
    }
    MG.identity.setUserKey({
    setKeyRequests: [
      {
        domain: "collectResource",
        key:bookConfig.value.bookId,
        value: JSON.stringify(collectResourceList.value),
      },
    ],
  })
}

//习题
const exercisesType = ref('exercises') //习题类型
const questionList = ref([])
const examinationRef = ref() // 答题器实例
const examinationData = reactive({
  type: '', // 答题类型  option 测试
  infoType: '', // 数据来源  bits 比特后台  json  假数据
  info: {} // 这套题的信息
})
// 获取习题
const getExercisesList = () => {
  if (token) {
    listLoading.value = true
    questionList.value = []
    axios.get(bookConfig.value.resourceUrl + '/resource.json').then(function (response) {
      var json = response.data
      // 处理获取到的json数据
      if (json.length > 0) {
        json.forEach((item) => {
          if (item.resourceType == '习题') {
            let text = searchText.value.replace(/^\s*|\s*$/g, '')
            if (searchText.value) {
              if (item.resourceName.indexOf(text) > -1) {
    axios
      .get(bookConfig.value.resourceUrl + '/resource.json')
      .then(function (response) {
        var json = response.data
        // 处理获取到的json数据
        if (json.length > 0) {
          json.forEach((item) => {
            if (item.resourceType == '习题') {
              let text = searchText.value.replace(/^\s*|\s*$/g, '')
              if (searchText.value) {
                if (item.resourceName.indexOf(text) > -1) {
                  questionList.value.push(item)
                }
              } else {
                questionList.value.push(item)
              }
            } else {
              questionList.value.push(item)
            }
          }
        })
      }
      listLoading.value = false
          })
        }
        listLoading.value = false
      })
      .catch(() => {
        listLoading.value = false
      })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
}

// 获取附加题
const getAdditionalList = () => {
  if (token) {
    listLoading.value = true
    questionList.value = []
    axios
      .get(bookConfig.value.resourceUrl + '/bits-question.json')
      .then((res) => {
        // 处理获取到的json数据
        if (res.data.data.length > 0) {
          questionList.value = res.data.data
          examinationData.infoType = res.data.type
        }
        listLoading.value = false
      })
      .catch(() => {
        listLoading.value = false
      })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
@@ -2058,14 +2343,43 @@
      .catch(() => {})
  }
}

//错题本
const wrongQuestionVisble = ref(false)
const selectExercisesType = (type) => {
  exercisesType.value = type
  searchText.value = ''

  if (type == 'exercises') {
    getExercisesList()
      exercisesType.value = type
      searchText.value = ''
  } else if (type == 'additional') {
    getAdditionalList()
      exercisesType.value = type
      searchText.value = ''
  } else if (type == 'wrong') {
    openExaminationDialog(true, {}, 'errorQuestion')
  } else {
    questionList.value = []
    openExaminationDialog(true, {}, 'collectQuestion')
  }
}
// 题列表点击
const clickQuestion = (type: string, data: any) => {
  switch (type) {
    case 'exercises':
      JumpPosition(data)
      break
    case 'additional':
      openExaminationDialog(true, data, 'option')
      break
    default:
      break
  }
}
const openExaminationDialog = (isSHow: boolean, data: any, type: string) => {
  if (examinationRef.value) {
    examinationRef.value.handleExaminationDialog(isSHow)
    examinationData.type = type
    examinationData.info = data
  }
}

@@ -2101,7 +2415,7 @@
      break
    case '检索':
      break
    case '习题':
    case '题库':
      getExercisesList()
      break
  }
@@ -2253,7 +2567,7 @@
    case '书签':
      getReMarkList()
      break
    case '习题':
    case '题库':
      getExercisesList()
      break
    case '检索':
@@ -2371,7 +2685,7 @@
    case '检索':
      allSearchReault.value = []
      break
    case '习题':
    case '题库':
      getExercisesList()
      break
  }
@@ -2421,7 +2735,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
@@ -2660,7 +2980,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
@@ -2700,7 +3026,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
@@ -2774,7 +3106,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
@@ -2879,7 +3217,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
@@ -3080,7 +3424,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {
        showToolBox.value = false
@@ -3180,7 +3530,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
@@ -3264,7 +3620,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
@@ -3345,7 +3707,13 @@
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
@@ -3625,11 +3993,25 @@
const layoutBtn = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  router.push('/login')
  // router.push('/login')
  if (sessionStorage.getItem('loginCtx')) {
    window.open(sessionStorage.getItem('loginCtx'))
  } else {
    router.replace({
      path: '/login'
    })
  }
}
const goLogin = () => {
  localStorage.removeItem('userInfo')
  router.push('/login')
  // router.push('/login')
  if (sessionStorage.getItem('loginCtx')) {
    window.open(sessionStorage.getItem('loginCtx'))
  } else {
    router.replace({
      path: '/login'
    })
  }
}
</script>

@@ -3738,6 +4120,7 @@
      }
    }
    .menuContent {
      // position: relative;
      width: 300px;
      flex-shrink: 0;
      height: calc(100vh - 48px);
@@ -4158,6 +4541,29 @@
        height: calc(100% - 60px);
        overflow-y: auto;
      }
      .questionList {
        height:83%
      }
      .question-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-evenly;
        width:300px;
        padding:20px 0;
        background-color:#fff;
        li {
          cursor: pointer;
          width: 65px;
          height:65px;
          border:1px solid #cfcfcf;
          border-radius:10px;
          background-color:#f9f9f9;
          display:flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .menuStateBox {
      width: 25px;