feat: 添加波形展示组件

package.json

@@ -31,6 +31,7 @@
     "vue-router": "^4.3.0",
     "vue3-smooth-scroll": "^0.8.1",
     "vue3-virtual-scroll-list": "^0.2.1",
+    "wavesurfer": "^1.3.4",
     "xlsx": "^0.18.5",
     "xlsx-js-style": "^1.2.0"
   },

public/config.js

 
 //  export const ExternalSERVEICE='http://218.69.97.198:8001'
 //  export const WithinSERVEICE='http://192.168.1.252:8001'
-export const ExternalSERVEICE='http://localhost:5013'
-export const WithinSERVEICE='http://localhost:5013'
+export const ExternalSERVEICE='http://10.5.78.30:5013'
+export const WithinSERVEICE='http://10.5.78.30:5013'
 export const CURRLOGO="LOGO_gangyi.png"
 

src/components/FormBuilder.vue

 <template>
   <div class="annual-param-container">
-    <el-form ref="searchForm" label-suffix=":">
+    <el-form ref="form" label-suffix=":">
       <el-row :gutter="20" justify="space-evenly">
         <el-col
           v-for="(item, index) in props.schemas"
@@ -12,6 +12,7 @@
               :is="components[item.type]"
               :prop="item.prop"
               :items="item.componentProps"
+               v-model="formData[item.prop]"
             ></component>
             <!-- <el-input v-model="queryPrarms" placeholder="请选择" /> -->
           </el-form-item>

src/components/PageData.vue

@@ -14,8 +14,8 @@
                   :is="components[item.type]"
                   :prop="item.prop"
                   :items="item.componentProps"
+                  v-model="queryParams[item.prop]"
                 ></component>
-                <!-- <el-input v-model="queryPrarms" placeholder="请选择" /> -->
               </el-form-item>
             </el-col>
           </el-row>

src/utils/request.js

@@ -3,5 +3,5 @@ const port='8001';
 
 //export const SERVEICE='http://218.69.97.198:8001'
 //'http://218.69.97.198:8001'
-//export const TEST_SERVEICE='http://192.168.1.2:5013/'
-export const SERVEICE='http://192.168.1.2:5013/'
+//export const TEST_SERVEICE='http://10.5.78.30:5013/'
+export const SERVEICE='http://10.5.78.30:5013/'

src/views/SmartNumbers/detail.vue

+<template>
+
+    <div>
+        <div id="waveform" ref="waveform" />
+    </div>
+</template>
+<script setup>
+import WaveSurfer from 'wavesurfer';
+const getData = ()=>{
+	let dataList = [{'id':'1','musicUrl':'../123123a.mp3','track':[0.0029, -0.009, 0.0109, -0.0124, 0.0271]}];//模拟数据
+	this.wavesurfer = WaveSurfer.create({
+	    container: this.$refs.waveform, 
+	    //container: '#waveform',//或者这样
+	    barWidth: 3,
+	    progressColor: "#ddd",
+	    backend: 'MediaElement',
+	    waveColor: "#666",
+	    barGap: 3,
+	    height: 80,
+	    width:400
+	});
+	//this.wavesurfer.load() //进入页面加载音频
+	//2个参数 先加载音轨生成波形图，点击加载音频
+	this.wavesurfer.load(dataList[0].musicUrl, dataList[0].track);
+
+	//没有音轨时需要生成多条需要先获取容器ID，预加载音频生成波形图
+        //wavesurfer中的container参数值需要循环获取容器ID；
+        for (let i = 0; i < dataList.length; i++) {
+	    this.wavesurfer.load(dataList[i].musicUrl);
+        }
+    }
+    getData()
+</script>

vite.config.js

@@ -28,7 +28,7 @@ export default defineConfig({
       '/api': {
         // target: 'http://192.168.1.252:8001/',
         target: 'http://218.69.97.198:8001/', // 目标服务器地址
-        //target: 'http://localhost:5013/', // 目标服务器地址
+        //target: 'http://10.5.78.30:5013/', // 目标服务器地址
         changeOrigin: true, // 允许跨域
       }
     }