|
|
|
|
@ -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-column prop="number" type="index" label="序号" width="100" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="songName" label="歌曲名称" width="180" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="action" label="操作" align="center">
|
|
|
|
|
<el-table :data="songList" style="width: 100%" height="196px">
|
|
|
|
|
<el-table-column prop="number" type="index" label="序号" width="60" align="center"></el-table-column>
|
|
|
|
|
<el-table-column prop="songName" label="歌曲名称" align="center"></el-table-column>
|
|
|
|
|
<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-button type="primary" size="mini" @click="submitForm">确定</el-button>
|
|
|
|
|
<el-button type="primarys" size="mini" @click="cancel">取消</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 新增的对话框 -->
|
|
|
|
|
<el-dialog title :visible.sync="addDialog" width="20%" style="top:20vh" >
|
|
|
|
|
<el-form ref="form" :model="form" label-width="80px">
|
|
|
|
|
<el-row>
|
|
|
|
|
<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){
|
|
|
|
|
this.$modal.confirm('确认要删除吗')
|
|
|
|
|
.then(function() {
|
|
|
|
|
songList.splice(index, 1);
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
this.$modal.msgSuccess( "删除成功");
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
this.open = false;
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
deleteSong(index, songList) {
|
|
|
|
|
this.$modal
|
|
|
|
|
.confirm("确认要删除吗")
|
|
|
|
|
.then(function() {
|
|
|
|
|
songList.splice(index, 1);
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
this.$modal.msgSuccess("删除成功");
|
|
|
|
|
})
|
|
|
|
|
.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>
|
