1

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

@@ -24,8 +24,26 @@ 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) {
+      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;
+              }
+            });
+          }
+        });
+      } else {
         state.subjectValue = i.id;
         state.instrumentCode = i.value;
         state.selectList = [];
@@ -33,11 +51,12 @@ export default defineComponent({
     };
 
     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,6 +76,45 @@ 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.instrumentCode = item.value;
+                  state.selectList = item.children;
+                }}
+              >
+                {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}>

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

@@ -292,25 +292,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");
@@ -350,7 +397,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