曲目列表样式设计

src/api/quniao/deviceOption.js

@@ -26,11 +26,54 @@ export function deleteTaskReq(data){
     })
 }
 
+//设备列表
+export function deviceListReq(){
+    return request({
+        url: '/api/brid/selectBridDeviceList',
+        method: 'post',
+    })
+}
 
-export function deviceListReq(data){
+//调节音量大小
+export function deviceVolumeReq(data){
     return request({
-        url: '/api/brid/deleteTaskState',
+        url: '/api/brid/volumeControl',
         method: 'post',
         data:data
     })
-}
+}
+
+//控制设备播放 00:播放  01：暂停  02：终止
+export function playMusicReq(data){
+    return request({
+        url: '/api/brid/musicPlay',
+        method: 'post',
+        data:data
+    })
+}
+
+//上报声音的状态（暂停，开始，终止）
+export function appearStatusReq(id){
+    return request({
+        url: `/api/brid/tellDeviceStatus?deviceId=${id}`,
+        method: 'post',
+    })
+}
+
+//设备播放模式 ，单曲循环  全部循环
+export function loopPlayReq(data){
+    return request({
+        url: `/api/brid/musicModel`,
+        method: 'post',
+        data:data
+    })
+}
+
+//获取曲目列表
+export function musicListReq(data){
+    return request({
+        url: `/api/brid/selectBridSongList`,
+        method: 'post',
+        data:data
+    })
+}

src/views/quniao/device/index.vue

@@ -10,12 +10,31 @@
             </div>
 
             <div class="tableList">
-                <el-table border height="350">
-                    <el-table-column label="序号"  align="center" width="80%"></el-table-column>
-                    <el-table-column label="设备名称" align="center"></el-table-column>
-                    <el-table-column label="操作" align="center"></el-table-column>
-                    <el-table-column label="设备分贝" align="center"></el-table-column>
-                    <el-table-column label="曲目列表" align="center"></el-table-column>
+                <el-table border :data="deviceList">
+                    <el-table-column label="序号"  align="center" width="80%" type="index"></el-table-column>
+                    <el-table-column label="设备名称" align="center" prop="name"></el-table-column>
+                    <el-table-column label="操作" align="center" width="220%">
+                        <template scope="props">
+                            <div class="deviceOption">
+                                <img title="播放" @click="playMusic(props.row.id,0)" v-if="props.row.volume1Status==1" src="@/assets/images/img/bofang.png">
+                                <img title="暂停" @click="playMusic(props.row.id,1)" v-if="props.row.volume1Status!=1" src="@/assets/images/img/zanting.png">
+                                <img title="终止" @click="playMusic(props.row.id,2)" src="@/assets/images/img/zhonzhi.png">
+                                <img @click="volumeOption(props.row)" src="@/assets/images/img/yinliang.png">
+                                <img title="单曲循环" @click="loopPlay(props.row.id,1)" src="@/assets/images/img/xunhuan(1).png">
+                                <!-- <img title="循环" @click="loopPlay(props.row.id,0)" src="@/assets/images/img/xunhuan.png"> -->
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="设备分贝" align="center">
+                        <template scope="props">
+                            {{ props.row.deviceStatus==1 ? `${props.row.volume1Fb} dB`:''}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="曲目列表" align="center">
+                        <template scope="props">
+                            <span class="musicName" @click="musicList(props.row.address)">{{ props.row.nowSong }}</span>
+                        </template>
+                    </el-table-column>
                 </el-table>
             </div>
 
@@ -115,7 +134,7 @@
                             {{ props.row.taskType==1?'日计划':props.row.taskType==2?'周计划':'月计划'}}
                         </template>
                     </el-table-column>
-                    <el-table-column label="创建时间" align="center" prop="createTime" width="160%"></el-table-column>
+                    <el-table-column label="创建时间" align="center" prop="createTime" width="170%"></el-table-column>
                     <el-table-column label="开始时间" align="center" prop="startTimeinfo"></el-table-column>
                     <el-table-column label="结束时间" align="center" prop="endTimeinfo"></el-table-column>
                     <el-table-column label="配置" align="center" width="200%">
@@ -130,12 +149,35 @@
                 </el-table>
             </div>
         </div>
+
+        <el-dialog
+            title="音量调节"
+            :visible.sync="dialogVisible"
+            width="18%">
+            <el-slider v-model="volumeSlider"></el-slider>
+            <span class="dialogTitle">{{volumeTitle}}</span>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="confirmVolume">确 定</el-button>
+            </span>
+        </el-dialog>
+        <musicList v-if="musicListState==1" :musicListData="musicListData"></musicList>
     </div>
 </template>
 
 <script>
-import {getDeviceTaskList,startTaskReq,deleteTaskReq} from '@/api/quniao/deviceOption'
+import {
+    getDeviceTaskList,startTaskReq,
+    deleteTaskReq,deviceListReq,
+    deviceVolumeReq,playMusicReq,
+    appearStatusReq,loopPlayReq,
+    musicListReq
+} from '@/api/quniao/deviceOption';
+import musicList from './musicList.vue';
 export default{
+    components:{
+        musicList
+    },
     data(){
         return{
             checkList:[],
@@ -191,7 +233,15 @@ export default{
             taskName:'',
             dayData:'',
 
-            taskListData:[]
+            taskListData:[],
+            deviceList:[],
+            dialogVisible:false,
+            volumeSlider:0, //音量调节
+            volumeTitle:'',
+            deviceId:'', //设备id
+
+            musicListState:0, //曲目列表显隐状态
+            musicListData:[], //曲目列表数据
         }
     },
 
@@ -288,6 +338,7 @@ export default{
             }
         },
 
+        //删除定时任务
         deleteTask(value){
             let data={
                 taskCode:value.taskCode,
@@ -303,13 +354,100 @@ export default{
             }else{
                 this.$message.error('执行中的任务无法删除')
             }
-            
+        },
+
+        //获取设备列表
+        getDeviceList(){
+            deviceListReq().then((res)=>{
+                if(res.code==200){
+                    this.deviceList=res.rows
+                }
+            })
+        },
+
+        //上报声音状态
+        appearStatus(id){
+            appearStatusReq(id).then()
+        },
+
+        //控制设备播放 00：播放    01：暂停   02：终止
+        playMusic(id,value){
+            let control='0'+value;
+            let data={
+                id,
+                control
+            }
+            playMusicReq(data).then((res)=>{
+                if(res.code==200){
+                    this.getDeviceList();
+                    this.appearStatus(id);
+                    this.$message.success('播放成功');
+                    
+                }
+            })
+        },
+
+        //调节设备音量大小
+        volumeOption(value){
+            if(value.volume1){
+                this.volumeSlider=value.volume1;
+            }else{
+                this.volumeSlider=0;
+            }
+            this.volumeTitle=value.name
+            this.deviceId=value.id;
+            this.dialogVisible=true;
+        },
+
+        //确定调节音量大小
+        confirmVolume(){
+            let data={
+                id:this.deviceId,
+                volume1:this.volumeSlider,
+                control:"00",
+                volume2:'100'
+            }
+            deviceVolumeReq(data).then((res)=>{
+                if(res.code==200){
+                    this.getDeviceList();
+                } 
+                dialogVisible = false;
+            })
+        },
+
+        //播放模式选择 （循环，单曲循环）
+        loopPlay(id,value){
+            let control='0'+value;
+            let data={
+                id,
+                control
+            }
+            loopPlayReq(data).then((res)=>{
+                if(res.code==200){
+                    this.$message.success('设置成功')
+                }
+            })
+        },
+
+        musicList(value){
+            let data={
+                bridDevice:value
+            }
+            musicListReq(data).then((res)=>{
+                if(res.code==200){
+                    this.musicListData=res.rows
+                    this.musicListState=1;
+                }
+                console.log(res)
+            })
         }
+
     },
 
     mounted(){
         this.mounthSelect();
         this.getTaskList();
+        this.getDeviceList();
     }
 }
 </script>
@@ -318,8 +456,10 @@ export default{
 
 .quniaoApp{
     display: flex;
-
+    position: relative;
 }
+
+
 .leftContent,.rightContent{
     
     height: 100%;
@@ -357,7 +497,7 @@ export default{
 .tableList{
     margin:2% 0;
     width: 98%;
-    height: 42%;
+    height: 34%;
 }
 
 .deviceStatus{
@@ -455,9 +595,39 @@ export default{
     opacity: 0.5;
 }
 
-.el-table .success{
-    color: #35EB68 !important;
-    /* background-color: #35EB68; */
+.deviceOption{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.deviceOption>img:hover{
+    cursor: pointer;
+}
+
+.dialogTitle{
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    font-size: 0.8vw;
+}
+
+.musicName:hover{
+    cursor: pointer;
+}
+
+
+
+
+
+
+
+
+::v-deep .el-table{
+    font-size: 0.8vw;
 }
 
 

src/views/quniao/device/musicList.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="musicList">
+        <div class="content">
+            <span>选择曲目</span>
+            <div>
+                <el-table :data="musicListData" border height="340">
+                    <el-table-column label="序号"  align="center" width="80%" type="index"></el-table-column>
+                    <el-table-column label="设备名" align="center" prop="name"></el-table-column>
+                    <el-table-column label="曲目" align="center" prop="songName"></el-table-column>
+                    <el-table-column label="操作" align="center"></el-table-column>
+                </el-table>
+            </div>
+            
+        </div>
+    </div>
+</template>
+
+
+<script>
+export default {
+    props:{
+        musicListData:{
+            type:Array
+        }
+    },
+
+    data(){
+        return{
+
+        }
+    },
+
+    mounted(){
+        console.log(this.musicListData)
+    }
+}
+</script>
+
+<style scoped>
+.musicList{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1000;
+    background-color: rgb(1,1,1,0.5);
+    display: flex;
+    justify-content: center;
+}
+
+.content{
+    width: 50%;
+    height: 60%;
+    border-radius: 10px;
+    background-color: rgb(34, 47, 61);
+    padding:1%;
+    margin-top: 2%;
+   
+}
+
+.content>span{
+    font-size: 1vw;
+    color: #ffffff;
+    
+}
+
+.content>div{
+    margin-top: 2%;
+}
+
+
+::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
+  width:5px;
+  display: none;
+}
+
+::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
+  background: #ffffff;
+  border-radius: 9px;
+  display: none;
+}
+
+::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 9px;
+  display: none;
+}
+
+::v-deep .el-table--border th.el-table__cell.gutter:last-of-type{
+    width: 0 !important;
+    border: none;
+    display: none;
+}
+</style>