|
|
|
|
@ -2,7 +2,13 @@
|
|
|
|
|
<div class="panel bar1">
|
|
|
|
|
<div class="titleBg">
|
|
|
|
|
<h2>
|
|
|
|
|
<el-form :inline="true" :model="queryParams" class="el-form1" ref="queryForm" label-width="1.7rem">
|
|
|
|
|
<el-form
|
|
|
|
|
:inline="true"
|
|
|
|
|
:model="queryParams"
|
|
|
|
|
class="el-form1"
|
|
|
|
|
ref="queryForm"
|
|
|
|
|
label-width="1.7rem"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label prop="musicManage">
|
|
|
|
|
<el-select
|
|
|
|
|
class="selectNav"
|
|
|
|
|
@ -21,24 +27,23 @@
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
|
</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 音乐管理表格数据 -->
|
|
|
|
|
<div class="musicManagement" v-show="musicShow">
|
|
|
|
|
<el-table :data="musicManagementList" style="width: 100%">
|
|
|
|
|
<el-table-column prop="location" label="位置" width="140" height="25" align="center"></el-table-column>
|
|
|
|
|
<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="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">
|
|
|
|
|
<span v-if="scope.row.status == '0'">正常</span>
|
|
|
|
|
<span v-else-if="scope.row.status == '1'">异常</span>
|
|
|
|
|
</template>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span v-if="scope.row.status == '0'">正常</span>
|
|
|
|
|
<span v-else-if="scope.row.status == '1'">异常</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="note" label="音符" width="70" height="25" align="center"></el-table-column>
|
|
|
|
|
<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="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">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
@ -57,46 +62,47 @@
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<pagination
|
|
|
|
|
|
|
|
|
|
<pagination
|
|
|
|
|
v-show="total>0"
|
|
|
|
|
:total="total"
|
|
|
|
|
:page.sync="queryParams.pageNum"
|
|
|
|
|
:limit.sync="queryParams.pageSize"
|
|
|
|
|
@pagination="getList"
|
|
|
|
|
/>
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 编辑音乐管理对话框 -->
|
|
|
|
|
<el-dialog title :visible.sync="musicHandle" width="20%" style="top:20vh" center>
|
|
|
|
|
<el-dialog title :visible.sync="musicHandle" width="20%" style="top:20vh" center>
|
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="位置" prop="location">
|
|
|
|
|
<el-input placeholder="请输入位置" v-model="form.location" class="el-input1"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="IP地址" prop="address">
|
|
|
|
|
<el-input placeholder="请输入IP地址" v-model="form.address" class="el-input1"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="音符" prop="note">
|
|
|
|
|
<el-input placeholder="请输入音符" v-model="form.note" class="el-input1"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="音量" prop="volume">
|
|
|
|
|
<el-input placeholder="请输入音量" v-model="form.volume" class="el-input1"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="位置" prop="location">
|
|
|
|
|
<el-input placeholder="请输入位置" v-model="form.location" class="el-input1"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="IP地址" prop="deviceIp">
|
|
|
|
|
<el-input placeholder="请输入IP地址" v-model="form.deviceIp" class="el-input1"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="音符" prop="note">
|
|
|
|
|
<el-input placeholder="请输入音符" v-model="form.note" class="el-input1"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="音量" prop="volume">
|
|
|
|
|
<el-input placeholder="请输入音量" v-model="form.volume" class="el-input1"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
@ -124,7 +130,7 @@
|
|
|
|
|
<script>
|
|
|
|
|
import User from "@/layout/components/User";
|
|
|
|
|
import flexible from "@/layout/flexible.js";
|
|
|
|
|
import { listDevice } from "@/api/Device";
|
|
|
|
|
import { listMusic } from "@/api/DeviceManage";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
User
|
|
|
|
|
@ -149,28 +155,35 @@ export default {
|
|
|
|
|
userShow: false,
|
|
|
|
|
//编辑对话框
|
|
|
|
|
musicHandle: false,
|
|
|
|
|
form:{},
|
|
|
|
|
rules:{},
|
|
|
|
|
//表单
|
|
|
|
|
form: {
|
|
|
|
|
location: null,
|
|
|
|
|
deviceIp: null,
|
|
|
|
|
note: null,
|
|
|
|
|
volume: null
|
|
|
|
|
},
|
|
|
|
|
rules: {},
|
|
|
|
|
// 查询参数
|
|
|
|
|
queryParams: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 6,
|
|
|
|
|
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
note: null,
|
|
|
|
|
volume: null
|
|
|
|
|
},
|
|
|
|
|
// 总条数
|
|
|
|
|
total: 0,
|
|
|
|
|
// 总条数
|
|
|
|
|
total: 0
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
created() {
|
|
|
|
|
this.getList();
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//查询音乐管理列表数据
|
|
|
|
|
//查询音乐管理列表数据
|
|
|
|
|
getList() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
listDevice(this.queryParams).then(result => {
|
|
|
|
|
this. musicManagementList= result.rows;
|
|
|
|
|
listMusic(this.queryParams).then(result => {
|
|
|
|
|
this.musicManagementList = result.rows;
|
|
|
|
|
this.total = result.total;
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
@ -191,8 +204,19 @@ export default {
|
|
|
|
|
this.open = false;
|
|
|
|
|
},
|
|
|
|
|
//确定按钮
|
|
|
|
|
submitForm() {
|
|
|
|
|
this.musicHandle=false;
|
|
|
|
|
submitForm(row) {
|
|
|
|
|
var location = this.form.location;
|
|
|
|
|
var deviceIp = this.form.deviceIp;
|
|
|
|
|
var note = this.form.note;
|
|
|
|
|
var volume = this.form.volume;
|
|
|
|
|
var musicManagementList = this.musicManagementList;
|
|
|
|
|
|
|
|
|
|
musicManagementList.location = location;
|
|
|
|
|
musicManagementList.address = address;
|
|
|
|
|
musicManagementList.note = note;
|
|
|
|
|
musicManagementList.volume = volume;
|
|
|
|
|
|
|
|
|
|
this.musicHandle = false;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//删除按钮操作
|
|
|
|
|
@ -201,7 +225,6 @@ export default {
|
|
|
|
|
.confirm("确认要删除吗")
|
|
|
|
|
.then(function() {
|
|
|
|
|
musicManagementList.splice(index, 1);
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
this.$modal.msgSuccess("删除成功");
|
|
|
|
|
@ -209,45 +232,57 @@ export default {
|
|
|
|
|
.catch(() => {});
|
|
|
|
|
},
|
|
|
|
|
//编辑按钮
|
|
|
|
|
edit() {
|
|
|
|
|
edit(row) {
|
|
|
|
|
this.musicHandle = true;
|
|
|
|
|
|
|
|
|
|
// this.form = row;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
|
|
/* 滚动条样式 */
|
|
|
|
|
::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;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .pagination-container .el-select .el-input .el-select__caret {
|
|
|
|
|
color:#618dfa!important;
|
|
|
|
|
color: #618dfa !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .pagination-container .el-input__suffix {
|
|
|
|
|
right: 5px !important;
|
|
|
|
|
right: 5px !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .pagination-container .el-input__inner {
|
|
|
|
|
::v-deep .pagination-container .el-input__inner {
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
border: none !important;
|
|
|
|
|
color: #618dfa !important;
|
|
|
|
|
text-align: center !important;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.pagination-container[data-v-72233bcd]{
|
|
|
|
|
background:#111658;
|
|
|
|
|
.pagination-container[data-v-72233bcd] {
|
|
|
|
|
background: #111658;
|
|
|
|
|
}
|
|
|
|
|
.userManagement {
|
|
|
|
|
margin: 0.125rem 0 0.125rem;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input {
|
|
|
|
|
margin-left: 6px !important;
|
|
|
|
|
line-height: 0px!important;
|
|
|
|
|
|
|
|
|
|
line-height: 0px !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-form-item__label{
|
|
|
|
|
color:white!important;
|
|
|
|
|
::v-deep .el-form-item__label {
|
|
|
|
|
color: white !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input1 {
|
|
|
|
|
background: cornflowerblue!important;
|
|
|
|
|
background: #1c257f !important;
|
|
|
|
|
border: 1px solid rgba(25, 186, 139, 0.17) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .el-input__suffix {
|
|
|
|
|
right: 0.8rem !important;
|
|
|
|
|
}
|
|
|
|
|
@ -262,14 +297,15 @@ export default {
|
|
|
|
|
text-align: center !important;
|
|
|
|
|
letter-spacing: 4px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .el-input1 input::-webkit-input-placeholder {
|
|
|
|
|
color: gray !important ;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-form1 input::-webkit-input-placeholder {
|
|
|
|
|
color: white !important ;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .el-dialog {
|
|
|
|
|
background: #111658 !important;
|
|
|
|
|
border:1px solid gray;
|
|
|
|
|
border: 1px solid gray;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-dialog__body {
|
|
|
|
|
color: white !important;
|
|
|
|
|
|
