Merge branch 'iteration-temp-http' into iteration-select-courseware

src/api/cloudPractice.api.ts

@@ -29,10 +29,11 @@ export const queryPage2_gym = (data: any) => {
    })
 }
 
-export const cbsDetail_gym = (id: number) => {
+export const cbsDetail_gym = (id: number, data = {}) => {
    return httpAxios_gym.axioseRquest({
       method: "get",
-      url: `/api-teacher/musicSheet/cbsDetail/${id}`
+      url: `/api-teacher/musicSheet/cbsDetail/${id}`,
+      params: data
    })
 }
 

src/views/cloudPractice/cloudPractice.tsx

@@ -12,7 +12,7 @@ import iconBtnPlay from "../../img/cloudPractice/icon-btn-play.png"
 import btnSubmit from "../../img/cloudPractice/btn-submit.png"
 import iconTransfer from "../../img/cloudPractice/icon-transfer.png"
 import iconDownload from "../../img/cloudPractice/icon-download.png"
-import { httpAjax, httpAjaxErrMsg } from "@/plugin/httpAjax"
+import { httpAjaxErrMsg } from "@/plugin/httpAjax"
 import {
    queryPage2_gym,
    queryPage2_gyt,
@@ -35,7 +35,7 @@ import PlayLoading from "./component/play-loading"
 import PracticeForm from "@/businessComponents/practiceForm"
 import { saveAs } from "file-saver"
 import JSZip from "jszip"
-import { canvasAddTitle, imgToCanvas, svgtoblob } from "./formatSvgToImg"
+import { svgtoblob } from "./formatSvgToImg"
 import { penShow, whitePenShow } from "@/businessComponents/globalTools/globalTools"
 import { handleFullscreen } from "@/libs/fullscreen"
 
@@ -250,8 +250,8 @@ export default defineComponent({
       const handleGetDetail_gym = async () => {
          loading.value = true
          const { id } = state.list[state.listActive] || {}
-         if (!id) return
-         await httpAjaxErrMsg(cbsDetail_gym, id).then(res => {
+         if (!id) return (loading.value = false)
+         await httpAjaxErrMsg(cbsDetail_gym, id, { simpleFlag: "1" }).then(res => {
             loading.value = false
             if (res.code === 200) {
                const result = res.data || {}
@@ -752,6 +752,7 @@ export default defineComponent({
          state.playState = "pause"
          state.partNames = []
          state.partList = []
+         state.details = {}
          state.selectedPartName = ""
          state.selectedTrack = ""
          state.selectedPartIndex = 0
@@ -776,6 +777,7 @@ export default defineComponent({
          }
          // state.partNames = await getPartNames(row.xmlUrl)
          let partList = details.musicSheetSoundList || []
+         partList = partList.filter((item: any) => item.audioPlayType === "PLAY")
          partList = partList.filter((item: any) => !item.track?.toLocaleUpperCase()?.includes("COMMON"))
          partColumns.value = partList.map((item: any, index: number) => {
             const instrumentName = getInstrumentName(item.track)
@@ -792,7 +794,7 @@ export default defineComponent({
 
          // 初始化数据
          // 是否显示总谱
-         if (row.isScoreRender) {
+         if (details.isScoreRender) {
             partColumns.value.unshift({
                label: "总谱",
                instrumentName: null,
@@ -801,34 +803,34 @@ export default defineComponent({
                xmlIndex: 999,
                value: 999
             })
-
-            if (row.defaultScoreRender) {
-               state.selectedPartIndex = 999
-            }
          }
-
-         console.log(partColumns.value, "partColumns.value")
          // gym 现在单独处理 管乐迷根据查询条件来筛选谱面
          let defaultShowStaff
-         // 这里筛选当前的声轨
-         const soundCodes = filterSoundCodes()
-         if (soundCodes) {
-            const soundCodesArr = soundCodes.split(",").map((code: string) => {
-               return code
-                  .toLowerCase()
-                  .replace(/^\d+|\d+$/g, "")
-                  .trim()
-            })
-            defaultShowStaff = partColumns.value.find((item: any) =>
-               soundCodesArr.includes(
-                  item.track &&
-                     item.track
-                        .toLowerCase()
-                        .replace(/^\d+|\d+$/g, "")
-                        .trim()
+
+         if (details.defaultScoreRender) {
+            state.selectedPartIndex = 999
+         } else {
+            // 这里筛选当前的声轨
+            const soundCodes = filterSoundCodes()
+            if (soundCodes) {
+               const soundCodesArr = soundCodes.split(",").map((code: string) => {
+                  return code
+                     .toLowerCase()
+                     .replace(/^\d+|\d+$/g, "")
+                     .trim()
+               })
+               defaultShowStaff = partColumns.value.find((item: any) =>
+                  soundCodesArr.includes(
+                     item.track &&
+                        item.track
+                           .toLowerCase()
+                           .replace(/^\d+|\d+$/g, "")
+                           .trim()
+                  )
                )
-            )
+            }
          }
+
          defaultShowStaff || (defaultShowStaff = partColumns.value.find((item: any) => item.value === state.selectedPartIndex))
 
          state.selectedPartName = defaultShowStaff?.instrumentName
@@ -905,32 +907,8 @@ export default defineComponent({
             }
          }
 
-         // gym 现在单独处理 管乐迷根据查询条件来筛选谱面
-         // let defaultShowStaff
-         // if (userStoreHook.roles === "GYM") {
-         //    // 这里筛选当前的声轨
-         //    const soundCodes = await filterSoundCodes()
-         //    if (soundCodes) {
-         //       const soundCodesArr = soundCodes.split(",").map((code: string) => {
-         //          return code
-         //             .toLowerCase()
-         //             .replace(/^\d+|\d+$/g, "")
-         //             .trim()
-         //       })
-         //       defaultShowStaff = partColumns.value.find((item: any) =>
-         //          soundCodesArr.includes(
-         //             item.track &&
-         //                item.track
-         //                   .toLowerCase()
-         //                   .replace(/^\d+|\d+$/g, "")
-         //                   .trim()
-         //          )
-         //       )
-         //    }
-         //    defaultShowStaff || (defaultShowStaff = partColumns.value.find((item: any) => item.value === state.selectedPartIndex))
-         // } else {
          const defaultShowStaff = partColumns.value.find((item: any) => item.value === state.selectedPartIndex)
-         // }
+
          state.selectedPartName = defaultShowStaff?.instrumentName
          state.selectedTrack = defaultShowStaff?.track
          state.partXmlIndex = defaultShowStaff?.xmlIndex
@@ -1015,6 +993,7 @@ export default defineComponent({
                // https://cdn.oss.dayaedu.com/daya202409/UODQffO.pdf
             } else {
                if (userStoreHook.roles === "GYM") {
+                  console.log(state.partXmlIndex, state.selectedTrack, "----------")
                   state.iframeSrc = getPreViewCloud(activeItem.value.id, state.partXmlIndex, state.selectedTrack)
                } else {
                   state.iframeSrc = `/osmd/index.html`
@@ -1072,7 +1051,8 @@ export default defineComponent({
          if (e.data?.api === "musicStaffRender") {
             const musicName =
                activeItem.value.name +
-               ((activeItem.value.musicSheetType === "CONCERT" && state.selectedPartName) || state.selectedTrack
+               (((activeItem.value.musicSheetType === "CONCERT" || state.details.musicSheetType === "CONCERT") && state.selectedPartName) ||
+               state.selectedTrack
                   ? `(${state.selectedPartName || state.selectedTrack})`
                   : "")
             try {
@@ -1496,6 +1476,7 @@ export default defineComponent({
                               state.selectedPartName = item.instrumentName
                               state.selectedTrack = item.track
                               state.partXmlIndex = item.xmlIndex
+                              state.imgs = []
                               nextTick(() => {
                                  let tempPdf = ""
                                  if (activeItem.value?.isScoreRender && value === 999) {

src/views/cloudPractice/formatSvgToImg.ts

@@ -70,7 +70,8 @@ export const svgtoblob = async (svg: any, width: any, height: any, name: string)
     * @param height
     * @param preserveAspectRatio
     */
-   v.resize(width * 2, height * 2, "xMidYMid meet")
+   // v.resize(width * 2, height * 2, "xMidYMid meet")
+   v.resize(width / 1.2, height / 1.2, "xMidYMid meet")
 
    // Render only first frame, ignoring animations and mouse.
    await v.start()
@@ -83,6 +84,31 @@ export const svgtoblob = async (svg: any, width: any, height: any, name: string)
    return base64
 }
 
+// export const svgtopng = async (svg: any, width: any, height: any) => {
+//    let canvas: any = new OffscreenCanvas(width, height);
+//    const ctx = canvas.getContext("2d")!;
+//    let v: any = await Canvg.fromString(ctx!, svg, preset);
+
+//    /**
+//     * Resize SVG to fit in given size.
+//     * @param width
+//     * @param height
+//     * @param preserveAspectRatio
+//     */
+//    v.resize(width / 1.2, height / 1.2, "xMidYMid meet");
+
+//    // Render only first frame, ignoring animations and mouse.
+//    await v.start();
+//    let blob: any = await canvas.convertToBlob();
+//    const base64 = await blobToBase64(blob);
+//    ctx.clearRect(0, 0, canvas.width, canvas.height);
+//    canvas = null;
+//    v.stop();
+//    v = null;
+//    blob = null;
+//    return base64;
+//  };
+
 const convertToBlob = (canvas: any, type = "image/png") => {
    return new Promise((resolve, reject) => {
       canvas.toBlob((blob: Blob) => {

src/views/cloudPractice/index.module.scss

@@ -302,7 +302,7 @@
          display: flex;
          align-items: center;
          justify-content: space-between;
-         padding: 15px 10px 15px 26px;
+         padding: 15px 10px 15px 15px;
          border-radius: 12px;
 
          cursor: pointer;

src/views/cloudPractice/instrument.ts

@@ -53,6 +53,7 @@ export const onlyVisible = (xml: string, partIndex: number): string => {
    if (!xml) return ""
    const xmlParse = new DOMParser().parseFromString(xml, "text/xml")
    const partList = xmlParse.getElementsByTagName("part-list")?.[0]?.getElementsByTagName("score-part") || []
+   // @typescript-eslint/no-unused-vars
    const partListNames = Array.from(partList).map(item => item.getElementsByTagName("part-name")?.[0].textContent || "")
    const parts: any = xmlParse.getElementsByTagName("part")
    // const firstTimeInfo = parts[0]?.getElementsByTagName('metronome')[0]?.parentElement?.parentElement?.cloneNode(true)

src/views/cloudPractice/useData.ts

@@ -39,7 +39,7 @@ export const useFunction = () => {
 
    function getPreViewCloud(musicId: string, partIndex = 0, track = "") {
       //  GYM,GYT,KLX 区分   云教练
-      let gymUrl = `${URL_TEACH_GYM}?t=${Date.now()}#/?id=${musicId}&Authorization=${getToken()}&isPreView=true&systemType=teacher`
+      let gymUrl = `${URL_TEACH_GYM}?t=${Date.now()}#/?id=${musicId}&Authorization=${getToken()}&isPreView=true&zoom=1&downPng=A4&systemType=teacher`
       if (partIndex === 999) {
          gymUrl += `&part-index=${partIndex}`
       } else {

src/views/cloudTextbooks/chooseDialog.vue

@@ -125,6 +125,7 @@ function handleCourseClick(value: any) {
       query: {
          source: "search",
          search: queryStr.value,
+         knowledgePointId: value.knowledgePointId,
          materialId: value.id
       }
    })

src/views/cloudTextbooks/searchCollapse/searchCollapse.vue

@@ -129,7 +129,7 @@ function handleClick(value: any) {
       > .el-collapse-item__header {
          border-bottom-color: transparent;
          &.is-active {
-            border-bottom-color: #f2f2f2;
+            border-bottom-color: #f2f2f2 !important;
          }
       }
       &:last-child {
@@ -277,7 +277,7 @@ function handleClick(value: any) {
          align-items: center;
          // padding: 0 10px 0 24px;
          padding: 0;
-         margin-bottom: 6px;
+         // margin-bottom: 6px;
          cursor: pointer;
          // &.isActive {
          // background: #f0f0f0;
@@ -288,7 +288,7 @@ function handleClick(value: any) {
          // }
          // }
          .courseTitleCon {
-            padding: 12px 0 0 10px;
+            padding: 4px 0 20px 10px;
             flex-grow: 1;
             overflow: hidden;
             margin-right: 8px;

src/views/cloudTextbooks/useData.ts

@@ -236,7 +236,7 @@ export const useDataDetailList = () => {
    function handlePage(type: "next" | "prev") {
       type === "next" ? pageNum.value++ : pageNum.value--
    }
-   const flattenCoursewareListData: any[] = []
+   let flattenCoursewareListData: any[] = []
    // 获取管乐迷
    function handleGetDetaList_gym(id: string, isSearch = false, search?: string) {
       if (coursewareDetailController) {
@@ -265,6 +265,7 @@ export const useDataDetailList = () => {
                item.id = item.coursewareDetailId
                item.name = item.coursewareDetailName
             })
+            flattenCoursewareListData = []
             listSearchData.value = filterPointList(resultList)
             flattenCoursewareList.value = flattenCoursewareListData
             if (flattenCoursewareList.value[0]) {

src/views/coursewarePlay/components/courseCollapse/courseCollapse.vue

@@ -109,6 +109,7 @@ function handleClick(value: any) {
 }
 
 function formatName(name: string) {
+   // console.log(name, searchStr.value, "searchStr")
    if (!name || !searchStr.value) return name
    const search: any = searchStr.value
    return name.replace(search, `<span style="color: #F67146;">${search}</span>`)

src/views/coursewarePlay/coursewarePlay.vue

@@ -24,7 +24,15 @@
             <ElImage :hide-on-click-modal="true" fit="contain" :src="activeCourseware?.content" class="imgPlay" />
          </div>
          <div class="songPlayBox" v-if="fileType === 'SONG'">
-            <iframe ref="songPlayDom" class="songIframe" @mousemove="handleMousemove" :src="songPlaySrc" frameborder="0"></iframe>
+            <iframe
+               ref="songPlayDom"
+               :key="activeCourseware?.content"
+               class="songIframe"
+               @mousemove="handleMousemove"
+               :src="songPlaySrc"
+               frameborder="0"
+            ></iframe>
+            <!-- <span></span> -->
          </div>
       </div>
       <div class="leftTools posTools">
@@ -130,8 +138,8 @@
                description="暂无搜索结果"
             />
             <courseCollapse
-               :activeCollapse="activeCourseware"
-               :search="searchObj.search"
+               :activeCollapse="tempActiveCourseware || activeCourseware"
+               :search="searchObj.tempSearch || searchObj.search"
                :courseList="tempCoursewareList"
                @handleClick="handleCourseClick"
             />
@@ -204,10 +212,12 @@ const searchObj = reactive({
    isSearch: false, // 是否搜索 标识
    queryStr: route.query.search as any,
    source: route.query.source as any, // 从哪里来的
-   search: route.query.search as any // 默认的搜索条件 -
+   search: route.query.search as any, // 默认的搜索条件 -
+   tempSearch: route.query.search as any
 })
 
 // 选中的知识点
+const tempActiveCourseware: any = ref() // 临时数据
 const activeCourseware = computed<undefined | Record<string, any>>(() => {
    return flattenCoursewareList.value[activeCoursewareIndex.value]
 })
@@ -229,6 +239,11 @@ const songPlaySrc = computed<string>(() => {
          activeCourseware.value?.content
       }&Authorization=${getToken()}&platform=pc&isHideBack=true&isHideMusicList=true&isYjt=1&systemType=teacher`
    }
+
+   // const iframeRef = document.querySelector("#songPlayDom") as any
+   // iframeRef?.contentWindow.location.replace(urlObj[userStoreHook.roles!])
+   // console.log(iframeRef, "iframeRef")
+
    return urlObj[userStoreHook.roles!]
 })
 // 视频是否自动播放
@@ -382,6 +397,14 @@ function handlePointList(pointList: any[], isSearch?: boolean) {
          index > -1 && (activeCoursewareIndex.value = index)
       }
       flattenCoursewareList.value = deepCopy(flattenCoursewareListData)
+   } else {
+      if (flattenCoursewareListData[0]) {
+         // 默认展开第一个
+         tempActiveCourseware.value = {
+            ...flattenCoursewareListData[0],
+            id: null
+         }
+      }
    }
    tempCoursewareList.value = list
    tempFlattenCoursewareList.value = deepCopy(flattenCoursewareListData)
@@ -431,7 +454,7 @@ function handleChangeCourseware(index: -1 | 1) {
 }
 function handleCourseClick(value: any) {
    // 选择之后初始化数据
-   searchObj.search = JSON.parse(JSON.stringify(searchObj.queryStr))
+   searchObj.search = searchObj.tempSearch ? JSON.parse(JSON.stringify(searchObj.tempSearch)) : ""
    coursewareList.value = deepCopy(tempCoursewareList.value)
    flattenCoursewareList.value = deepCopy(tempFlattenCoursewareList.value)
    activeCoursewareIndex.value = flattenCoursewareList.value.findIndex((item: any) => {
@@ -511,7 +534,10 @@ function preventDefaultContextmenu(event: MouseEvent) {
 }
 function handleKeydown(e: KeyboardEvent) {
    const key = e.key
-
+   // 打开弹窗之后快捷键失效
+   if (drawerShow.value || drawerMenuShow.value) {
+      return
+   }
    if (key === " ") {
       closeAllModalFrame()
       drawerShow.value = false
@@ -543,7 +569,9 @@ function handleToolClick(type: string) {
       drawerMenuShow.value = true
    } else if (type === "point") {
       tempCoursewareList.value = deepCopy(coursewareList.value)
-      searchObj.queryStr = JSON.parse(JSON.stringify(searchObj.search))
+      searchObj.queryStr = searchObj.search ? JSON.parse(JSON.stringify(searchObj.search)) : ""
+
+      tempActiveCourseware.value = null
       drawerShow.value = true
    }
 }
@@ -673,6 +701,7 @@ function onTitleTip(type: "phaseGoals" | "checkItem", text: string) {
 function handleQuery() {
    //
    searchObj.isSearch = true
+   searchObj.tempSearch = searchObj.queryStr ? JSON.parse(JSON.stringify(searchObj.queryStr)) : ""
    getLessCoursewareList()
 }
 </script>
@@ -935,12 +964,14 @@ function handleQuery() {
 .empty {
    height: calc(100vh - 54px);
    :deep(.el-empty__image) {
-      width: 238px;
+      width: 228px;
    }
 
    :deep(.el-empty__description) {
-      font-size: 18px;
       color: #aaa;
+      p {
+         font-size: 18px;
+      }
    }
 }
 </style>