caojunting
/
MusicRoadUI
forked from software/MusicRoadUI
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

设备接口调试

Browse Source
master
zhaowei 3 years ago
parent ec2636e62e
commit b7a38912de
6 changed files with 315 additions and 60 deletions
Show Stats Download Patch File Download Diff File

9
src/api/Device.js
Unescape Escape View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
// 查询设备数据
export function listDevice(query) {
return request({
url: '/system/device/list',
method: 'get',
params: query
})
}

142
src/layout/components/Device/index.vue
Unescape Escape View File

@ -7,17 +7,16 @@
<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>
</div>
<div id="deviceBox">
<div class="deviceMsg" v-for="i in 150" :key="i">
<el-popover placement="right" width="250" trigger="click">
<div class="deviceMsg" v-for="(item, index) in deviceData" :key="index">
<el-popover placement="right" width="270" trigger="click">
<el-row>
<el-col :span="24">
<div class="iconBox">
<img src="../../../assets/images/位置.png" class="iconImg" alt />
</div>
<span class="span1 span2">位置</span>
<span class="span1 span3">001</span>
<span class="span1 span3">{{item.location}}</span>
</el-col>
</el-row>
<el-row>
@ -26,7 +25,7 @@
<img src="../../../assets/images/网络.png" class="iconImg" alt />
</div>
<span class="span1 span4">IP地址</span>
<span class="span1 span5">192.168.88.88</span>
<span class="span1 span5">{{item.deviceIp}}</span>
</el-col>
</el-row>
<el-row>
@ -35,7 +34,7 @@
<img src="../../../assets/images/音符.png" class="iconImg" alt />
</div>
<span class="span1 span2">音符</span>
<span class="span1 span3">1</span>
<span class="span1 span3">{{item.note}}</span>
</el-col>
</el-row>
<el-row>
@ -44,7 +43,7 @@
<img src="../../../assets/images/音量.png" class="iconImg" alt />
</div>
<span class="span1 span2">音量</span>
<span class="span1 span3">50%</span>
<span class="span1 span3">{{item.volume}}</span>
</el-col>
</el-row>
<el-row>
@ -53,7 +52,11 @@
<img src="../../../assets/images/设置.png" class="iconImg" alt />
</div>
<span class="span1">设备状态</span>
<span class="span1">正常</span>
<span class="span1">{{item.status==0?'正常':'异常'}}</span>
<!-- <template slot-scope="scope">
<span class="span1" v-if="scope.row.stasus == '1'">不正常</span>
<span class="span1" v-else-if="scope.row.status == '0'">正常</span>
</template>-->
</el-col>
</el-row>
<el-row>
@ -62,7 +65,7 @@
<img src="../../../assets/images/时间.png" class="iconImg" alt />
</div>
<span class="span1">创建时间</span>
<span class="span1">2022.02.22</span>
<span class="span1">{{item.createTime}}</span>
</el-col>
</el-row>
<el-row>
@ -71,37 +74,121 @@
<img src="../../../assets/images/创建人.png" class="iconImg" alt />
</div>
<span class="span1 span6">创建人</span>
<span class="span1 span7">张大大</span>
<span class="span1 span7">{{item.createBy}}</span>
</el-col>
</el-row>
<div class="shadows" slot="reference"></div>
<div :class="item.status==0?'shadows':'active'" slot="reference"></div>
</el-popover>
<div class="deleteIcon">
<div class="deleteIcon" @click="removeItem(index,deviceData)">
<img src="../../../assets/images/删除.png" class="deleteImg" alt />
</div>
<span class="deviceStatus">正常</span>
<span class="deviceNumber">{{i}}</span>
<span class="deviceStatus">{{item.status==0?'正常':'异常'}}</span>
<span class="deviceNumber">{{item.deviceId}}</span>
<img src="../../../assets/images/喇叭.png" class="deviceImg" alt />
</div>
</div>
<!-- 新增设备对话框-->
<el-dialog title :visible.sync="addDevice" 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"></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"></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"></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"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="addDevice = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</span>
</el-dialog>
<div class="panel-footer"></div>
</div>
</template>
<script>
import flexible from "@/layout/flexible.js";
import { listDevice } from "@/api/Device";
export default {
data() {
return {};
return {
//查询参数
queryParams: {
pageNum: 1
},
address: null,
note: null,
volume: null,
location: null,
addDevice: false,
form: {},
forms: {},
rules: {},
deviceData: []
};
},
created() {
this.getList();
},
methods: {
//查询设备数据
getList() {
this.loading = true;
listDevice(this.queryParams).then(result => {
this.deviceData = result.rows;
this.loading = false;
});
},
//新增按钮
editDevice() {},
editDevice() {
this.addDevice = true;
},
//确定按钮
submitForm() {
this.addDevice = false;
},
//删除按钮
deleteDevice() {}
deleteDevice() {},
//删除对应的喇叭
removeItem(index, deviceData) {
this.$modal
.confirm("确认要删除吗")
.then(function() {
deviceData.splice(index, 1);
})
.then(() => {
this.$modal.msgSuccess("删除成功");
})
.catch(() => {
});
}
}
};
</script>
@ -139,7 +226,7 @@ export default {
display: inline-block;
width: 14px;
height: 14px;
margin-right: -15px;
}
.iconImg {
@ -181,6 +268,7 @@ export default {
border-radius: 0;
background: none;
}
/* 设备正常时的遮罩层 */
.shadows {
position: absolute;
top: 0px;
@ -188,8 +276,19 @@ export default {
width: 79px;
height: 90px;
cursor: pointer;
/* background:grey;
opacity: 0.4; */
/* background:red;
opacity: 0.4; */
}
/* 设备异常时的遮罩层 */
.active {
position: absolute;
top: 0px;
left: 0px;
width: 79px;
height: 90px;
cursor: pointer;
background: red;
opacity: 0.4;
}
.deviceStatus {
color: white;
@ -215,6 +314,7 @@ export default {
}
.deleteIcon {
width: 8px;
height: 5px;
position: absolute;
top: 2px;
right: 5px;

142
src/layout/components/MusicManage/index.vue
Unescape Escape View File

@ -2,12 +2,7 @@
<div class="panel bar1">
<div class="titleBg">
<h2>
<el-form
:inline="true"
:model="queryParams"
ref="queryForm"
label-width="1.7rem"
>
<el-form :inline="true" :model="queryParams" ref="queryForm" label-width="1.7rem">
<el-form-item label prop="musicManage">
<el-select
class="selectNav"
@ -29,7 +24,7 @@
</el-form>
</h2>
</div>
<!-- 音乐管理表格数据 -->
<!-- 音乐管理表格数据 -->
<div class="musicManagement" v-show="musicShow">
<el-table :data="musicManagementList" style="width: 100%">
<el-table-column prop="location" label="位置" width="50" height="25" align="center"></el-table-column>
@ -57,13 +52,52 @@
</el-table-column>
</el-table>
</div>
<!-- 用户管理 -->
<div class="userManagement" v-show="userShow">
</div>
<!-- 编辑音乐管理对话框 -->
<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-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="musicHandle = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</span>
</el-dialog>
<!-- 用户管理 -->
<div class="userManagement" v-show="userShow">
<user />
</div>
<div class="panel-footer"></div>
<!-- <pagination
v-show="total>0"
:total="total"
@ -75,9 +109,14 @@
</template>
<script>
import User from "@/layout/components/User";
import flexible from "@/layout/flexible.js";
export default {
components: {
User
},
data() {
return {
musicManagementList: [
@ -110,42 +149,44 @@ export default {
}
],
musicManageArr: [
{
{
value: 1,
label: "音乐管理"
},
{
value: 2,
label: "用户管理"
}
],
// 音乐管理显示隐藏
musicShow:true,
musicShow: true,
// 用户管理显示隐藏
userShow:false,
userShow: false,
//编辑对话框
musicHandle: false,
form:{},
rules:{},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 7,
musicManage: undefined,
musicManage: undefined
}
};
},
created() {},
methods: {
// 下拉菜单页面切换
pageShow(e){
console.log(e,8888888888888)
if(e==2){
this.musicShow=false;
this.userShow=true;
}
else{
this.musicShow=true;
this.userShow=false;
pageShow(e) {
console.log(e, 8888888888888);
if (e == 2) {
this.musicShow = false;
this.userShow = true;
} else {
this.musicShow = true;
this.userShow = false;
}
},
// 取消按钮
@ -153,7 +194,9 @@ export default {
this.open = false;
},
//确定按钮
submitForm() {},
submitForm() {
this.musicHandle=false;
},
//删除按钮操作
deleteMusic(index, musicManagementList) {
@ -161,39 +204,66 @@ export default {
.confirm("确认要删除吗")
.then(function() {
musicManagementList.splice(index, 1);
})
.then(() => {
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
//编辑按钮
edit() {
this.musicHandle = true;
}
}
};
</script>
<style scoped>
.userManagement{
.userManagement {
margin: 0.125rem 0 0.125rem;
border:1px solid rgba(25, 186, 139, 0.17);
height: 3rem;
border: 1px solid rgba(25, 186, 139, 0.17);
}
::v-deep .el-input {
::v-deep .el-input {
margin-left: 6px !important;
line-height: 0px!important;
}
::v-deep .el-form-item__label{
color:white!important;
}
::v-deep .el-input__suffix {
::v-deep .el-input1 {
background: cornflowerblue!important;
}
::v-deep .el-input__suffix {
right: 0.8rem !important;
}
::v-deep .el-input--small {
::v-deep .el-input--small {
font-size: 0.25rem !important;
color: white !important;
}
::v-deep .el-input__inner {
::v-deep .el-input__inner {
background: transparent !important;
border: none !important;
color: white !important;
text-align: center !important;
letter-spacing: 4px !important;
}
}
/* ::v-deep .el-input1 .el-input__inner {
border:1px solid rgba(25, 186, 139, 0.17) !important;
border-radius: 4px!important;
} */
::v-deep input::-webkit-input-placeholder {
color: white !important ;
}
::v-deep .el-input1::-webkit-input-placeholder {
color: gray !important ;
}
::v-deep .el-dialog {
background: #111658 !important;
border:1px solid gray;
}
::v-deep .el-dialog__body {
color: white !important;
}
</style>

74
src/layout/components/User/index.vue
Unescape Escape View File

@ -0,0 +1,74 @@
<template>
<div class="userBox">
<el-form
:inline="true"
:model="queryParams"
ref="queryForm"
class="demo-form-inline"
label-width="68px"
>
<el-form-item label prop="roleType">
<el-select
class="input2"
v-model="queryParams.roleType"
placeholder="角色类型"
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="dict in roleTypeArr"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<style scoped>
.userBox {
width: 100%;
height: 100%;
}
::v-deep .el-input__inner {
background: #111658 !important;
border: 1px solid rgba(25, 186, 139, 0.17) !important;
color: white !important;
text-align: center !important;
letter-spacing: 4px !important;
}
::v-deep .el-input--small {
font-size:14px !important;
color: white !important;
}
</style>
<script>
import flexible from "@/layout/flexible.js";
export default {
data() {
return {
//查询参数
queryParams:{
roleType:null,
},
roleTypeArr:[
{
value: 1,
label: "管理员"
},
{
value: 2,
label: "操作员"
},
]
};
},
methods: {}
};
</script>

6
src/layout/index.vue
Unescape Escape View File

@ -27,7 +27,8 @@ import {
CarMsg,
TrackManagement,
MusicManage,
Device
Device,
} from "./components";
import flexible from "@/layout/flexible.js";
export default {
@ -37,7 +38,8 @@ export default {
CarMsg,
TrackManagement,
MusicManage,
Device
Device,
},
methods: {},
data() {

2
vue.config.js
Unescape Escape View File

@ -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.99:8080`,
target: `http://192.168.31.27:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''

Write Preview
Loading…
Cancel
Save