Merge branch 'ktyq-classroom-work' of http://git.dayaedu.com/liushengqiang/music-score into hqyDev

src/page-instrument/view-figner/change-subject/index.module.less

@@ -1,12 +1,13 @@
 .changeSubject {
-  padding: 18px 0;
+  padding: 49px 17px 19px 24px;
+
 }
 
 .changeSubjectContainer {
-  height: 217px;
+  height: 187px;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 15px;
+  padding: 0;
 
   &::-webkit-scrollbar {
     display: none;
@@ -19,7 +20,7 @@
 
   font-size: 16px;
   font-weight: 500;
-  color: #333333;
+  color: #AE8967;
   line-height: 22px;
 
   &::before {
@@ -27,7 +28,7 @@
     display: inline-block;
     width: 4px;
     height: 11px;
-    background: #1CACF1;
+    background: #D5AD89;
     border-radius: 3px;
     margin-right: 6px;
   }
@@ -37,18 +38,18 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  padding-top: 18px;
+  padding-top: 7px;
 
   .subjectItem {
     width: 31%;
     height: 34px;
     line-height: 34px;
     text-align: center;
-    background: #F6F6F6;
+    // background: #F6F6F6;
     border-radius: 50px;
     font-size: 13px;
     color: #333333;
-    border: 1px solid #F6F6F6;
+    border: 1px solid #D8D8D8;
     margin-bottom: 12px;
 
     &:nth-child(3n + 2) {
@@ -75,12 +76,13 @@
 
 
     &.active {
-      border: 1px solid #1CACF1;
-      background: #EBF8FF;
-      color: #1CACF1;
+      background: #FFF6E7;
+      border-radius: 16px;
+      border: 1px solid #AE8967;
+      color: #A98464;
 
       &::after {
-        border-bottom: 4px solid #1CACF1;
+        border-bottom: 4px solid #C4A78D;
         transform: translateY(-2px) rotate(0deg);
       }
     }
@@ -90,14 +92,33 @@
 }
 
 .btnGroups {
-  border-top: 1px solid #F2F2F2;
+  border-top: 1px solid #EBEBEB;
   display: flex;
   align-items: center;
-  padding: 18px 15px 0;
+  padding: 8px 15px 0;
+
+  // :global {
+  //   .van-button+.van-button {
+  //     margin-left: 15px;
+  //   }
+  // }
 
-  :global {
-    .van-button+.van-button {
-      margin-left: 15px;
+  .btn {
+    width: 143px;
+    height: 44px;
+
+    &+.btn {
+      margin-left: 9px;
     }
   }
+
+  .resetBtn {
+    background: url('../image/subject-btn1.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .confirmBtn {
+    background: url('../image/subject-btn2.png') no-repeat center;
+    background-size: contain;
+  }
 }

src/page-instrument/view-figner/change-subject/index.tsx

@@ -24,20 +24,51 @@ export default defineComponent({
 
     //
     const selectItem = () => {
-      const i: any = props.subjectList.find((item: any) => item.value === props.subject);
-      if (i) {
-        state.subjectValue = i.id;
-        state.instrumentCode = i.value;
-        state.selectList = [];
+      // const i: any = props.subjectList.find((item: any) => item.value === props.subject);
+      // if (i) {
+      //   state.subjectValue = i.id;
+      //   state.instrumentCode = i.value;
+      //   state.selectList = [];
+      // }
+      // const i: any = props.subjectList.find((item: any) => item.value === props.subject);
+      let i: any = {};
+      props.subjectList.forEach((item: any) => {
+        if (Array.isArray(item.children)) {
+          item.children.forEach((child: any) => {
+            if (child.value === props.subject) {
+              i = {
+                ...child,
+                parentId: item.id,
+              };
+              state.instrumentCode = child.value;
+              state.subjectValue = item.id;
+              state.selectList = item.children || [];
+            }
+          });
+        }
+      });
+      if (!i) {
+        props.subjectList.forEach((item: any) => {
+          if (item.children && item.children.length > 0) {
+            item.children.forEach((child: any) => {
+              if (child.value === props.subject) {
+                state.instrumentCode = child.value;
+                state.subjectValue = item.id;
+                state.selectList = item.children;
+              }
+            });
+          }
+        });
       }
     };
 
     onMounted(() => {
+      console.log(props.subjectList, "subjectList", props.subject);
       selectItem();
     });
     return () => (
       <div class={styles.changeSubject}>
-        <div class={styles.changeSubjectContainer}>
+        {/* <div class={styles.changeSubjectContainer}>
           <div class={styles.title}>乐器</div>
 
           <div class={styles.subjectContainer}>
@@ -57,12 +88,71 @@ export default defineComponent({
               </div>
             ))}
           </div>
+        </div> */}
+        <div class={styles.changeSubjectContainer}>
+          <div class={styles.title}>声部</div>
+
+          <div class={styles.subjectContainer}>
+            {props.subjectList.map((item: any) => (
+              <div
+                class={[styles.subjectItem, item.children.length > 0 && styles.arrow, item.id === state.subjectValue && styles.active]}
+                onClick={() => {
+                  if (item.children.length <= 0) {
+                    state.instrumentCode = "";
+                  }
+                  state.subjectValue = item.id;
+                  state.selectList = item.children;
+                  if (state.selectList.length > 0) {
+                    state.instrumentCode = state.selectList[0].value;
+                  }
+                }}
+              >
+                {item.text}
+              </div>
+            ))}
+          </div>
+
+          {state.selectList.length > 0 && (
+            <>
+              <div class={styles.title}>乐器</div>
+              <div class={styles.subjectContainer}>
+                {state.selectList.map((item: any) => (
+                  <div
+                    class={[styles.subjectItem, item.value === state.instrumentCode && styles.active]}
+                    onClick={() => {
+                      state.instrumentCode = item.value;
+                    }}
+                  >
+                    {item.text}
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
         </div>
 
         <div class={styles.btnGroups}>
-          <Button
+          <div
+            class={[styles.btn, styles.resetBtn]}
+            onClick={() => {
+              emit("close");
+              selectItem();
+            }}
+          ></div>
+          <div
+            class={[styles.btn, styles.confirmBtn]}
+            onClick={() => {
+              if (state.selectList.length > 0 && !state.instrumentCode) {
+                showToast("请选择乐器");
+                return;
+              }
+              emit("confirm", state.instrumentCode || state.subjectValue);
+            }}
+          ></div>
+          {/* <Button
             round
             block
+            class={styles.resetBtn}
             onClick={() => {
               emit("close");
               selectItem();
@@ -74,7 +164,7 @@ export default defineComponent({
             type="primary"
             block
             round
-            color="linear-gradient(90deg, #44C9FF 0%, #259CFE 100%)"
+            class={styles.confirmBtn}
             onClick={() => {
               if (state.selectList.length > 0 && !state.instrumentCode) {
                 showToast("请选择乐器");
@@ -84,7 +174,7 @@ export default defineComponent({
             }}
           >
             确认
-          </Button>
+          </Button> */}
         </div>
       </div>
     );

src/page-instrument/view-figner/index.module.less

@@ -1418,9 +1418,10 @@
 
 .changeSubjectPopup {
     width: 375px;
-    // height: 310px;
-    background: #FFFFFF;
+    height: 307px;
+    background: url('./image/subject-bg1.png') no-repeat center;
     border-radius: 12px;
+    background-size: contain;
 }
 
 .linkSourceClass {

src/page-instrument/view-figner/index.tsx

@@ -293,25 +293,72 @@ export default defineComponent({
     const getSubjects = async () => {
       try {
         // api_subjectList
-        const subjects = await api_musicalInstrumentList({
+        // const subjects = await api_musicalInstrumentList({
+        //   enableFlag: true,
+        // });
+
+        // const rows = subjects.data || [];
+        // rows.forEach((row: any) => {
+        //   const tempList: any = {
+        //     text: row.name,
+        //     value: mappingVoicePart(row.code, "INSTRUMENT"), // mappingVoicePart(row.code, "INSTRUMENT"),
+        //     id: row.id,
+        //   };
+        //   data.subjects.push(tempList);
+        // });
+
+        const subjects = await api_subjectList({
           enableFlag: true,
+          delFlag: 0,
+          page: 1,
+          rows: 999,
         });
 
         const rows = subjects.data || [];
+        const tempSubjects: any[] = [];
         rows.forEach((row: any) => {
           const tempList: any = {
             text: row.name,
-            value: mappingVoicePart(row.code, "INSTRUMENT"), // mappingVoicePart(row.code, "INSTRUMENT"),
+            value: "", // mappingVoicePart(row.code, "INSTRUMENT"),
             id: row.id,
+            children: [] as any,
           };
-          data.subjects.push(tempList);
+          if (Array.isArray(row.instruments)) {
+            row.instruments.forEach((i: any) => {
+              tempList.children.push({
+                text: i.name,
+                id: i.id,
+                value: mappingVoicePart(i.code, "INSTRUMENT"),
+              });
+            });
+          }
+          tempSubjects.push(tempList);
+          // if (row.instruments && row.instruments.length > 0) {
+          //   if (row.instruments.length > 1) {
+          //     row.instruments.forEach((i: any) => {
+          //       tempList.children.push({
+          //         text: i.name,
+          //         id: i.id,
+          //         value: mappingVoicePart(i.code, "INSTRUMENT"),
+          //       });
+          //     });
+          //   } else {
+          //     const singleRow = row.instruments[0];
+          //     if (singleRow.code) {
+          //       tempList.value = mappingVoicePart(singleRow.code, "INSTRUMENT");
+          //       tempList.id = singleRow.id;
+          //     }
+          //   }
+          // }
+          // data.subjects.push(tempList);
         });
-
-        // data.subjects.forEach((item: any) => {
+        console.log(data.subject, "data.subject");
+        // tempSubjects.forEach((item: any) => {
         //   if (item.value === data.subject && item.children?.length > 1) {
         //     data.subject = item.children[0].value;
         //   }
         // });
+        data.subjects = tempSubjects;
       } catch (e) {
         //
         console.log(e, "e");
@@ -351,7 +398,7 @@ export default defineComponent({
       if (showNote) {
         data.realKey = item.realKey;
       }
-      console.log('key:', item.realKey, data.soundFonts)
+      console.log("key:", item.realKey, data.soundFonts);
       data.noteAudio = data.soundFonts[item.realKey];
       if (data.noteAudio) {
         data.noteAudio.play();

src/view/fingering/fingering-config.ts

@@ -474,7 +474,7 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
         code: "陶笛",
         hasTizhi: false,
         id: 39,
-      };      
+      };
     case "melodica": // 口风琴
       return {
         name: "melodica",
@@ -704,7 +704,7 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
         styles: {
           marginTop: "auto",
         },
-      };      
+      };
     case "melodica":
       const melodica = await import(`./fingering-img/melodica/index.json`);
       return {

vite.config.ts

@@ -4,90 +4,90 @@ import vueJsx from "@vitejs/plugin-vue-jsx";
 import legacy from "@vitejs/plugin-legacy";
 import { resolve } from "path";
 import postCssPxToRem from "postcss-pxtorem";
-import { visualizer } from 'rollup-plugin-visualizer';
-import viteCompression from 'vite-plugin-compression';
+import { visualizer } from "rollup-plugin-visualizer";
+import viteCompression from "vite-plugin-compression";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	base: "./",
-	resolve: {},
-	// assetsInclude: ['**/*.html'],
-	plugins: [
-		// mkcert(), // 本地https
-		legacy({
-			targets: ['Chrome 63'],
-			additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
-			modernPolyfills: true
-		  }),
-		vue(),
-		vueJsx(),
-		visualizer({ open: true }), // 自动开启分析页面
-	],
-	css: {
-		postcss: {
-			plugins: [
-				postCssPxToRem({
-					rootValue: 37.5,
-					propList: ["*"],
-					selectorBlackList: [".norem"],
-				}),
-			],
-		},
-	},
-	build: {
-		rollupOptions: {
-			input: {
-				gym: resolve(__dirname, "index.html"),
-				colexiu: resolve(__dirname, "colexiu.html"),
-				orchestra: resolve(__dirname, "orchestra.html"),
-				"report-share": resolve(__dirname, "report-share.html"),
-				instrument: resolve(__dirname, "instrument.html"),
-			},
-			output: {
-				chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
-				entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
-				assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
-			},
-		},
-	},
-	server: {
-		cors: true,
-		port: 3000,
-		// https: true,
-		proxy: {
-			"^/gym/.*": {
-				target: "https://mstutest.dayaedu.com",
-				// target: "https://online.dayaedu.com",
-				changeOrigin: true,
-				rewrite: (path) => path.replace(/^\/gym/, ""),
-			},
-			"^/colexiu/.*": {
-				target: "https://dev.colexiu.com",
-				// target: "https://online.colexiu.com",
-				changeOrigin: true,
-				rewrite: (path) => path.replace(/^\/colexiu/, ""),
-			},
-			"^/orchestra/.*": {
-				target: "https://test.lexiaoya.cn",
-				changeOrigin: true,
-				rewrite: (path) => path.replace(/^\/orchestra/, ""),
-			},
-			"^/instrument/.*": {
-				// target: "https://kt.colexiu.com",
-				// target: "https://test.lexiaoya.cn",
-				// target: "https://dev.kt.colexiu.com",
-				target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
-				// target: "https://dev.resource.colexiu.com",
-				// target: "https://test.kt.colexiu.com",
-				// target: "https://mec.colexiu.com",
-				changeOrigin: true,
-				rewrite: (path) => path.replace(/^\/instrument/, ""),
-			},
-		},
-	},
-	preview:{
-		port: 3000,
-		host: '192.168.3.114'
-	}
+  base: "./",
+  resolve: {},
+  // assetsInclude: ['**/*.html'],
+  plugins: [
+    // mkcert(), // 本地https
+    legacy({
+      targets: ["Chrome 63"],
+      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
+      modernPolyfills: true,
+    }),
+    vue(),
+    vueJsx(),
+    visualizer({ open: true }), // 自动开启分析页面
+  ],
+  css: {
+    postcss: {
+      plugins: [
+        postCssPxToRem({
+          rootValue: 37.5,
+          propList: ["*"],
+          selectorBlackList: [".norem"],
+        }),
+      ],
+    },
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        gym: resolve(__dirname, "index.html"),
+        colexiu: resolve(__dirname, "colexiu.html"),
+        orchestra: resolve(__dirname, "orchestra.html"),
+        "report-share": resolve(__dirname, "report-share.html"),
+        instrument: resolve(__dirname, "instrument.html"),
+      },
+      output: {
+        chunkFileNames: "js/[name]-[hash].js", // 引入文件名的名称
+        entryFileNames: "js/[name]-[hash].js", // 包的入口文件名称
+        assetFileNames: "[ext]/[name]-[hash].[ext]", // 资源文件像 字体，图片等
+      },
+    },
+  },
+  server: {
+    cors: true,
+    port: 3000,
+    // https: true,
+    proxy: {
+      "^/gym/.*": {
+        target: "https://mstutest.dayaedu.com",
+        // target: "https://online.dayaedu.com",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/gym/, ""),
+      },
+      "^/colexiu/.*": {
+        target: "https://dev.colexiu.com",
+        // target: "https://online.colexiu.com",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/colexiu/, ""),
+      },
+      "^/orchestra/.*": {
+        target: "https://test.lexiaoya.cn",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/orchestra/, ""),
+      },
+      "^/instrument/.*": {
+        // target: "https://kt.colexiu.com",
+        // target: "https://test.lexiaoya.cn",
+        target: "https://dev.kt.colexiu.com",
+        // target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
+        // target: "https://dev.resource.colexiu.com",
+        // target: "https://test.kt.colexiu.com",
+        // target: "https://mec.colexiu.com",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/instrument/, ""),
+      },
+    },
+  },
+  preview: {
+    port: 3000,
+    host: "192.168.3.114",
+  },
 });
 // vite.config.js