页面修改

package.json

@@ -58,7 +58,8 @@
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "wavesurfer.js": "^6.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/layout/components/Device/index.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="buttonBox">
       <el-button size="mini" type="primary" icon="el-icon-plus" @click="editDevice">新增</el-button>
-      <!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice">删除</el-button> -->
+      <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice">删除</el-button>
     </div>
     <div id="deviceBox">
       <div class="deviceMsg" v-for="(item, index) in deviceData" :key="index">
@@ -188,7 +188,10 @@ export default {
       this.addDevice = false;
       // this.deviceData.push({location});
     },
+    //
+    deleteDevice(){
 
+    },
     //删除对应的喇叭
     removeItem(index, deviceData) {
       this.$modal

src/layout/components/MusicManage/index.vue

@@ -33,7 +33,7 @@
     <!-- 音乐管理表格数据 -->
     <div class="musicManagement" v-show="musicShow">
       <el-table :data="musicManagementList" height="274" style="width: 100%">
-        <el-table-column prop="location" label="位置" width="140" height="25" align="center"></el-table-column>
+        <el-table-column prop="location" label="位置"  height="25" align="center"></el-table-column>
         <el-table-column prop="deviceIp" label="IP地址" width="130" height="25" align="center"></el-table-column>
         <el-table-column prop="status" label="设备状态" height="25" width="80" align="center">
           <template slot-scope="scope">
@@ -45,13 +45,13 @@
         <el-table-column prop="volume" label="音量" width="50" height="25" align="center"></el-table-column>
         <el-table-column prop="createTime" label="创建时间" width="160" height="25" align="center"></el-table-column>
         <el-table-column prop="createBy" label="创建人" width="80" height="25" align="center"></el-table-column>
-        <el-table-column prop="operate" label="操作" height="25" align="center">
+        <el-table-column prop="operate" label="操作" height="25" width="160" align="center">
           <template slot-scope="scope">
             <el-button
               size="mini"
               type="primary"
               icon="el-icon-edit-outline"
-              @click="edit(scope.row)"
+              @click="editMusic(scope.row)"
             >编辑</el-button>
             <el-button
               size="mini"
@@ -232,7 +232,7 @@ export default {
         .catch(() => {});
     },
     //编辑按钮
-    edit(row) {
+    editMusic(row) {
       this.musicHandle = true;
 
       //  this.form = row;
@@ -253,6 +253,7 @@ export default {
   border-radius: 0;
   background: none;
 }
+/* 分页样式 */
 ::v-deep .pagination-container .el-select .el-input .el-select__caret {
   color: #618dfa !important;
 }

src/layout/components/TrackManagement/index.vue

@@ -4,17 +4,29 @@
       <h2>曲目管理</h2>
     </div>
     <!-- 曲目管理表格 -->
+    <div class="addBox1">
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addSong">新增</el-button>
+    </div>
+
     <div class="trackManagement">
-      <el-table :data="songList" style="width: 100%">
+      <el-table :data="songList" style="width: 100%" height="196px">
-        <el-table-column prop="number" type="index" label="序号" width="100" align="center"></el-table-column>
+        <el-table-column prop="number" type="index" label="序号" width="60" align="center"></el-table-column>
-        <el-table-column prop="songName" label="歌曲名称" width="180" align="center"></el-table-column>
+        <el-table-column prop="songName" label="歌曲名称" align="center"></el-table-column>
-        <el-table-column prop="action" label="操作" align="center">
+        <el-table-column prop="action" label="操作" width="280" align="center">
           <template slot-scope="scope">
+            <el-button
+              class="addButton"
+              size="mini"
+              type="primary"
+              icon="el-icon-edit-outline"
+              @click="editSong(scope.row)"
+            >编辑</el-button>
             <el-button
               size="mini"
               type="primary"
               icon="el-icon-headset"
               @click="listenSong(scope.row)"
+              class="listenButton"
             >试听</el-button>
             <el-button
               size="mini"
@@ -31,26 +43,57 @@
           </template>
         </el-table-column>
       </el-table>
+
+      <!-- <el-dialog title="录音播放" :visible.sync="dialogVisible" width="20%" :before-close="stop">
+        <template>
+          <center>
+            <audio
+              src="./从别后.mp3"
+              autoplay="autoplay"
+              controls="controls"
+              ref="audio"
+            ></audio>
+          </center>
+        </template>
+      </el-dialog>-->
     </div>
-    <div class="waveBox"></div>
+    <!-- 音频波形图 -->
+    <div id="waveForm" ref="waveForm"></div>
     <div class="panel-footer"></div>
 
-    <el-dialog title="系统提示" :visible.sync="open" width="300px" style="background:#111658,color:white">
+    <!-- 新增的对话框 -->
-      <div slot="footer" class="dialog-footer">
+    <el-dialog title :visible.sync="addDialog" width="20%" style="top:20vh" >
-        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
+      <el-form ref="form" :model="form" label-width="80px">
-        <el-button type="primarys" size="mini" @click="cancel">取消</el-button>
+        <el-row>
-      </div>
+          <el-col :span="24">
+            <el-form-item label="曲目名称" prop="songName">
+              <el-input placeholder="请输入曲目" v-model="form.songName" class="el-input3"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="uploadSong">上传</el-button>
+        <el-button type="primary" @click="updateSong">更新</el-button>
+      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import flexible from "@/layout/flexible.js";
+import WaveSurfer from "wavesurfer.js";
 
 export default {
-  
+  data() {
-data() {
     return {
+      src: "",
+      wavesurfer: null,
+      addDialog: false,
+      audio: undefined,
+      wavesurfer: null,
+      tag: false,
+      form: {},
       songList: [
         {
           songName: "门没锁"
@@ -63,46 +106,138 @@ data() {
         },
         {
           songName: "南半球与北海道"
+        },
+        {
+          songName: "不再犹豫"
+        },
+        {
+          songName: "海阔天空"
         }
       ],
 
       // 是否显示弹出层
-      open: false,
+      open: false
     };
   },
 
+  //绘制音频波形图
+  mounted() {
+    this.$nextTick(() => {
+      // var wavesurfer = WaveSurfer.create({
+      //   container: this.$refs.waveForm,
+      //   waveColor: "white",
+      //   progressColor: "#42e8e0",
+      //   cursorColor: "transparent",
+      //   barWidth: 3
+      // });
+    //   wavesurfer.load(require("./从别后.mp3"));
+    });
+  },
   methods: {
+    //新增按钮
+    addSong() {
+      this.addDialog = true;
+    },
+    //编辑按钮
+    editSong() {},
+    //试听按钮操做
+    listenSong() {
+      this.$nextTick(() => {
+        var wavesurfer = WaveSurfer.create({
+          container: this.$refs.waveForm,
+          waveColor: "white",
+          progressColor: "#42e8e0",
+          cursorColor: "transparent",
+          barWidth: 3
+        });
+        wavesurfer.load(require("./从别后.mp3"));
 
-  // 取消按钮
+        wavesurfer.on("ready", function() {
+          wavesurfer.play();
+        });
+      });
+    },
+    download() {},
+    // 取消按钮
     cancel() {
-    this.open = false;
+      this.open = false;
     },
-   //确定按钮 
+    //上传按钮
-    submitForm() {
+    uploadSong() {
-      
+      this.addDialog = false;
+    },
+    // 跟新按钮
+    updateSong() {
+      this.addDialog = false;
     },
+    //确定按钮
+    submitForm() {},
     //删除按钮操作
-   deleteSong(index,songList){
+    deleteSong(index, songList) {
-     this.$modal.confirm('确认要删除吗')
+      this.$modal
-     .then(function() {
+        .confirm("确认要删除吗")
-        songList.splice(index, 1);
+        .then(function() {
-      })
+          songList.splice(index, 1);
-      .then(() => {
+        })
-        this.$modal.msgSuccess( "删除成功");
+        .then(() => {
-      })
+          this.$modal.msgSuccess("删除成功");
-      .catch(() => {
+        })
-       this.open = false;
+        .catch(() => {
-      })
+          this.open = false;
-  },
+        });
-  },
+    }
-
+  }
-}
+};
 </script>
 <style scoped>
+/* 新增对话框样式 */
+::v-deep .el-dialog {
+  background: #111658 !important;
+  border: 1px solid gray;
+}
+::v-deep .el-dialog__body {
+  color: white !important;
+}
+::v-deep .el-form .el-form-item__label {
+  color: white;
+}
+::v-deep .el-input3 .el-input__inner {
+  background-color: #1c257f !important;
+  border: 1px solid rgba(25, 186, 139, 0.17) !important;
+  color: white;
+}
+/* 滚动条样式 */
+::v-deep ::-webkit-scrollbar {
+  width: 7px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  border-radius: 14px;
+  background: #4a6cd5;
+}
+::v-deep ::-webkit-scrollbar-track {
+  border-radius: 0;
+  background: none;
+}
 .el-button--primarys {
   background: #3835a0 !important;
   color: white !important;
   border: none !important;
   /* padding: 0.06rem; */
 }
+#waveForm {
+  width: 7.2rem;
+  height: 1rem;
+  margin-top: 0.127rem;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+  /* overflow: hidden; */
+}
+.addBox1 {
+  margin-top: 0.125rem;
+}
+::v-deep canvas {
+  height: 1rem !important;
+}
+::v-deep .wave {
+  height: 1rem !important;
+}
 </style>

src/layout/components/TrackManagement/wave.js

@@ -0,0 +1,9 @@
+var WaveSurfer = require("WaveSurfer");
+var wavesurfer = WaveSurfer.create({
+    container: '#waveBox',
+    waveColor: '#42e8e0',
+    progressColor: 'hsla(200, 100%, 30%, 0.5)',
+    cursorColor: '#fff',
+    barWidth: 3
+   });
+   wavesurfer.load('./一吻天荒.mp3');   

src/layout/components/User/index.vue

@@ -22,7 +22,6 @@
       <el-form-item label="姓名" prop="roleName">
         <el-input v-model="queryParams.roleName" placeholder class="input2" size="mini"></el-input>
       </el-form-item>
-
       <el-button
         icon="el-icon-search"
         class="searchButton"
@@ -44,7 +43,7 @@
         <el-table-column prop="number" type="index" label="序号" align="center"></el-table-column>
         <el-table-column prop="roleName" label="用户姓名" align="center"></el-table-column>
         <el-table-column prop="roleType" label="角色" align="center"></el-table-column>
-        <el-table-column prop="roleStatus" type="用户状态" width="100" label="序号" align="center"></el-table-column>
+        <el-table-column prop="roleStatus" width="100" label="用户状态" align="center"></el-table-column>
         <el-table-column prop="createBy" label="创建时间" align="center"></el-table-column>
         <el-table-column prop="action" label="操作" width="250" align="center">
           <template slot-scope="scope">
@@ -96,9 +95,27 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
       </span>
     </el-dialog>
+      <!-- 重置密码对话框 -->
+      <!-- <el-dialog title :visible.sync="passwordDialog" width="20%" style="top:20vh" >
+      <el-form ref="passwordForm" :model="passwordForm" :rules="rules"   label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="新密码" prop="password">
+              <el-input placeholder="请输入新密码" v-model="passwordForm.password" class="input2"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+       <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="passwordDialog = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </span>
+      </el-dialog> -->
+
   </div>
 </template>
 <style  scoped>
+ 
 .roleListBox{
   margin-top: 20px;
 }
@@ -148,11 +165,14 @@ export default {
         roleType: null,
         roleName: null,
       },
+      passwordDialog:false,
       roleHandle:false,
       roleForm:{
         roleName:null,
         roleType:null,
       },
+      passwordForm:{},
+      rules:{},
       roleList: [
         {
           roleName: "admin",
@@ -193,7 +213,21 @@ export default {
     //停用状态操作
     stopStatus() {},
     //重置密码操作
-    revisePassword() {},
+    revisePassword() {
+      this.$prompt('请输入新密码', "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        closeOnClickModal: false,
+        inputPattern: /^[A-Za-z0-9]{5,20}$/,
+        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间数字或字母"
+      }).then(({ value }) => {
+          // resetUserPwd(row.userId, value).then(response => {
+          //   this.$modal.msgSuccess("修改成功");
+          // });
+          this.$modal.msgSuccess("修改成功");
+        }).catch(() => {});
+    
+    },
     //查询操作
     handleQuery() {},
     //重置操作

src/layout/index.vue

@@ -1,24 +1,6 @@
 <template>
 <div class="app-content home">
-  <head>
+  <router-view></router-view>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
-  <header>
-    <h1>陵川电子音乐公路管理系统</h1>
-    <navbar />
-  </header>
-  <div class="mainbox">
-    <div class="row1">
-      <vedio />
-      <car-msg />
-      <track-management />
-    </div>
-    <div class="row2">
-      <music-manage />
-      <device />
-    </div>
-  </div>
 </div>
 </template>
 
@@ -133,7 +115,7 @@ li {
 .el-message-box__content {
   color: white;
 }
-.el-button--small {
+/* .el-button--small {
   background: #3835a0;
   color: white;
   border: none;
@@ -141,6 +123,9 @@ li {
 .el-button--small:hover {
   background: #3835a0;
   color: white;
+} */
+.el-button--mini{
+  padding:7px 8px;
 }
 .trackManagement {
   width: 7.2rem;
@@ -157,12 +142,7 @@ li {
   color: white !important;
   border: none !important;
 }
-.waveBox {
+
-  width: 7.2rem;
-  height: 1.42rem;
-  margin-top: 0.127rem;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
 .musicManagement {
   margin: 0.125rem 0 0.125rem;
 }
@@ -359,6 +339,9 @@ header h1 {
   color:gray !important;
   padding:0px 0px 0px;
 }
+.el-message-box__input input.invalid{
+  border-color:transparent !important;
+}
 /*   设备管理*/
 .el-popover {
   background: #111658 !important;

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.31.27:8080`,
+        target: `http://192.168.31.97:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''