|
|
|
@ -2,7 +2,13 @@
|
|
|
|
<div class="panel bar1">
|
|
|
|
<div class="panel bar1">
|
|
|
|
<div class="titleBg">
|
|
|
|
<div class="titleBg">
|
|
|
|
<h2>
|
|
|
|
<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-form-item label prop="musicManage">
|
|
|
|
<el-select
|
|
|
|
<el-select
|
|
|
|
class="selectNav"
|
|
|
|
class="selectNav"
|
|
|
|
@ -21,13 +27,12 @@
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
</h2>
|
|
|
|
</h2>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 音乐管理表格数据 -->
|
|
|
|
<!-- 音乐管理表格数据 -->
|
|
|
|
<div class="musicManagement" v-show="musicShow">
|
|
|
|
<div class="musicManagement" v-show="musicShow">
|
|
|
|
<el-table :data="musicManagementList" style="width: 100%">
|
|
|
|
<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="位置" 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="deviceIp" label="IP地址" width="130" height="25" align="center"></el-table-column>
|
|
|
|
<el-table-column prop="status" label="设备状态" height="25" width="80" align="center">
|
|
|
|
<el-table-column prop="status" label="设备状态" height="25" width="80" align="center">
|
|
|
|
@ -57,6 +62,7 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
|
|
<pagination
|
|
|
|
<pagination
|
|
|
|
v-show="total>0"
|
|
|
|
v-show="total>0"
|
|
|
|
:total="total"
|
|
|
|
:total="total"
|
|
|
|
@ -78,8 +84,8 @@
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-row>
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-col :span="24">
|
|
|
|
<el-form-item label="IP地址" prop="address">
|
|
|
|
<el-form-item label="IP地址" prop="deviceIp">
|
|
|
|
<el-input placeholder="请输入IP地址" v-model="form.address" class="el-input1"></el-input>
|
|
|
|
<el-input placeholder="请输入IP地址" v-model="form.deviceIp" class="el-input1"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
@ -124,7 +130,7 @@
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import User from "@/layout/components/User";
|
|
|
|
import User from "@/layout/components/User";
|
|
|
|
import flexible from "@/layout/flexible.js";
|
|
|
|
import flexible from "@/layout/flexible.js";
|
|
|
|
import { listDevice } from "@/api/Device";
|
|
|
|
import { listMusic } from "@/api/DeviceManage";
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
|
User
|
|
|
|
User
|
|
|
|
@ -149,16 +155,23 @@ export default {
|
|
|
|
userShow: false,
|
|
|
|
userShow: false,
|
|
|
|
//编辑对话框
|
|
|
|
//编辑对话框
|
|
|
|
musicHandle: false,
|
|
|
|
musicHandle: false,
|
|
|
|
form:{},
|
|
|
|
//表单
|
|
|
|
rules:{},
|
|
|
|
form: {
|
|
|
|
|
|
|
|
location: null,
|
|
|
|
|
|
|
|
deviceIp: null,
|
|
|
|
|
|
|
|
note: null,
|
|
|
|
|
|
|
|
volume: null
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
rules: {},
|
|
|
|
// 查询参数
|
|
|
|
// 查询参数
|
|
|
|
queryParams: {
|
|
|
|
queryParams: {
|
|
|
|
pageNum: 1,
|
|
|
|
pageNum: 1,
|
|
|
|
pageSize: 6,
|
|
|
|
pageSize: 10,
|
|
|
|
|
|
|
|
note: null,
|
|
|
|
|
|
|
|
volume: null
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 总条数
|
|
|
|
// 总条数
|
|
|
|
total: 0,
|
|
|
|
total: 0
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
@ -169,8 +182,8 @@ export default {
|
|
|
|
//查询音乐管理列表数据
|
|
|
|
//查询音乐管理列表数据
|
|
|
|
getList() {
|
|
|
|
getList() {
|
|
|
|
this.loading = true;
|
|
|
|
this.loading = true;
|
|
|
|
listDevice(this.queryParams).then(result => {
|
|
|
|
listMusic(this.queryParams).then(result => {
|
|
|
|
this. musicManagementList= result.rows;
|
|
|
|
this.musicManagementList = result.rows;
|
|
|
|
this.total = result.total;
|
|
|
|
this.total = result.total;
|
|
|
|
this.loading = false;
|
|
|
|
this.loading = false;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
@ -191,8 +204,19 @@ export default {
|
|
|
|
this.open = false;
|
|
|
|
this.open = false;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
//确定按钮
|
|
|
|
//确定按钮
|
|
|
|
submitForm() {
|
|
|
|
submitForm(row) {
|
|
|
|
this.musicHandle=false;
|
|
|
|
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("确认要删除吗")
|
|
|
|
.confirm("确认要删除吗")
|
|
|
|
.then(function() {
|
|
|
|
.then(function() {
|
|
|
|
musicManagementList.splice(index, 1);
|
|
|
|
musicManagementList.splice(index, 1);
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.then(() => {
|
|
|
|
.then(() => {
|
|
|
|
this.$modal.msgSuccess("删除成功");
|
|
|
|
this.$modal.msgSuccess("删除成功");
|
|
|
|
@ -209,16 +232,29 @@ export default {
|
|
|
|
.catch(() => {});
|
|
|
|
.catch(() => {});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
//编辑按钮
|
|
|
|
//编辑按钮
|
|
|
|
edit() {
|
|
|
|
edit(row) {
|
|
|
|
this.musicHandle = true;
|
|
|
|
this.musicHandle = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// this.form = row;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
<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 {
|
|
|
|
::v-deep .pagination-container .el-select .el-input .el-select__caret {
|
|
|
|
color:#618dfa!important;
|
|
|
|
color: #618dfa !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep .pagination-container .el-input__suffix {
|
|
|
|
::v-deep .pagination-container .el-input__suffix {
|
|
|
|
right: 5px !important;
|
|
|
|
right: 5px !important;
|
|
|
|
@ -228,26 +264,25 @@ export default {
|
|
|
|
border: none !important;
|
|
|
|
border: none !important;
|
|
|
|
color: #618dfa !important;
|
|
|
|
color: #618dfa !important;
|
|
|
|
text-align: center !important;
|
|
|
|
text-align: center !important;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.pagination-container[data-v-72233bcd]{
|
|
|
|
.pagination-container[data-v-72233bcd] {
|
|
|
|
background:#111658;
|
|
|
|
background: #111658;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.userManagement {
|
|
|
|
.userManagement {
|
|
|
|
margin: 0.125rem 0 0.125rem;
|
|
|
|
margin: 0.125rem 0 0.125rem;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep .el-input {
|
|
|
|
::v-deep .el-input {
|
|
|
|
margin-left: 6px !important;
|
|
|
|
margin-left: 6px !important;
|
|
|
|
line-height: 0px!important;
|
|
|
|
line-height: 0px !important;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep .el-form-item__label{
|
|
|
|
::v-deep .el-form-item__label {
|
|
|
|
color:white!important;
|
|
|
|
color: white !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep .el-input1 {
|
|
|
|
::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 {
|
|
|
|
::v-deep .el-input__suffix {
|
|
|
|
right: 0.8rem !important;
|
|
|
|
right: 0.8rem !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -262,14 +297,15 @@ export default {
|
|
|
|
text-align: center !important;
|
|
|
|
text-align: center !important;
|
|
|
|
letter-spacing: 4px !important;
|
|
|
|
letter-spacing: 4px !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-input1 input::-webkit-input-placeholder {
|
|
|
|
|
|
|
|
color: gray !important ;
|
|
|
|
|
|
|
|
}
|
|
|
|
::v-deep .el-form1 input::-webkit-input-placeholder {
|
|
|
|
::v-deep .el-form1 input::-webkit-input-placeholder {
|
|
|
|
color: white !important ;
|
|
|
|
color: white !important ;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .el-dialog {
|
|
|
|
::v-deep .el-dialog {
|
|
|
|
background: #111658 !important;
|
|
|
|
background: #111658 !important;
|
|
|
|
border:1px solid gray;
|
|
|
|
border: 1px solid gray;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
::v-deep .el-dialog__body {
|
|
|
|
::v-deep .el-dialog__body {
|
|
|
|
color: white !important;
|
|
|
|
color: white !important;
|
|
|
|
|
