Vue 项目 - 分区设备列表状态离线不可选中
<template>
<div class='music-management'>
<el-card class='music-left'>
<div>
<div class='music-title'>音源列表</div>
<div class='music-content'>
<div class='music-list' v-for='(item, index) in dateList' :key='index' @click='musicStart(item, index)'
:class='[index === highlightIndex ? 'highlight' : '', highlightIndex == index ? 'active' : '']'>
<svg-icon icon-class='music' style='font-size:25px;vertical-align: middle;color: #f30511;'></svg-icon>
{{ item.musicName }}
</div>
</div>
</div>
</el-card>
<pre><code><el-card class='musci-right'>
<div class='music-title' style='margin-bottom: 0'>
<div class='music-tab'>
<div :class='index == 1 ? 'active' : ''' @click='index = 1; musicChoose = musicList.zone' class='tab'>分区</div>
</div>
</div>
<div class='music-bottom'>
<el-card class='music-item' v-for='(item, index) in musicChoose' :key='index' :class='isActive(index) ? 'active' : '''
@click.native='musicClick(item, index)'>
<div class='top'>
<div>状态：{{ item.deviceState }}</div>
<div>
<svg-icon icon-class='naozhong'></svg-icon>
</div>
</div>
<div class='icon'>
<svg-icon icon-class='lianjie' style='font-size: 40px;vertical-align: middle'></svg-icon>
</div>
<div style='text-align: center'>
{{ item.deviceIP }}
</div>
<div class='text'>
<div> 位置: {{ item.deviceName }}</div>
<div class='check' :class='[isActive(index) ? 'active' : '', item.deviceState === '离线' ? 'disabled' : '']'>
<svg-icon icon-class='icon-duihao'
style='font-size: 12px; vertical-align: middle;'></svg-icon>
</div>
</div>
</el-card>
</div>
</el-card>
<div class='music-play'>
<div class='left'>
<img src='../../../assets/images/music-left.png' alt='' @click='playPrev'>
</div>
<div class='play' v-if='playState' >
<img src='../../../assets/images/music-play.png' alt='' @click='stopMusic'>
</div>
<div class='pause' v-if='!playState' >
<img src='../../../assets/images/music-pause.png' alt='' @click='playMusic'>
</div>
<div class='right'>
<img src='../../../assets/images/music-right.png' alt='' @click='playNext'>
</div>
<div class='sound'>
<img src='../../../assets/images/music-sound.png' alt=''>
</div>
<div class='slider'>
<el-slider v-model='soundValue' @change='setVol'></el-slider>
</div>
</div>
</code></pre>
</div>
</template>
<script>
import { getMusicList, getAllDevice, openMusic, closeMusic, setVolume } from '@/api/data/music'
export default {
data() {
return {
ids:'',
groupAndMusic:'11',
playState:false,
checkShow: false,
securityData: [],
soundValue: 80,
highlightIndex: 0, // 当前选中的音源索引
index: 1,
activeTab: 'zone',
dateList: [],
musicChoose: [
{ id: 1, status: '离线', ip: '192.168.80.30', percent: '10%' },
{ id: 2, status: '离线', ip: '192.168.80.31', percent: '20%' },
{ id: 3, status: '离线', ip: '192.168.80.32', percent: '30%' },
],
musicList: {
zone: [
{ id: 1, status: '离线', ip: '192.168.80.30', percent: '10%' },
{ id: 2, status: '离线', ip: '192.168.80.31', percent: '20%' },
{ id: 3, status: '离线', ip: '192.168.80.32', percent: '30%' },
],
group: [
{ id: 4, status: '离线', ip: '192.168.80.33', percent: '10%' },
{ id: 5, status: '离线', ip: '192.168.80.34', percent: '0%' },
{ id: 6, status: '离线', ip: '192.168.80.35', percent: '0%' },
],
task: [
{ id: 7, status: '离线', ip: '192.168.80.36', percent: '20%' },
{ id: 8, status: '离线', ip: '192.168.80.37', percent: '0%' },
{ id: 9, status: '离线', ip: '192.168.80.38', percent: '0%' },
],
},
};
},
created() {
//this.musicChoose = this.musicList.zone;
console.log('初始化分区====', this.musicChoose)
this.getMusics();
this.getDevice();
},
methods: {
musicClick(item, path) {
let index = this.securityData.indexOf(path);
if (this.isActive(path)) {
this.securityData.splice(index, 1);
} else {
this.securityData.push(path);
}
this.ids = this.securityData.map(i => this.musicChoose[i].id).join(',');
console.log('设备ids:',this.ids)
},
isActive(item) {
let isClass = false;
if (this.securityData.indexOf(item) != '-1') {
isClass = true;
} else {
isClass = false;
}
return isClass;
},
ipChoose(item) {
console.log('选择ip=====', item)
},
musicStart(item, index) {
console.log('播放music=====', item)
// 处理点击事件，可以将 item 作为参数传递给其他组件或函数
console.log('索引', index)
this.highlightIndex = index; // 更新选中的音源索引
console.log('更新选中的音源索引', this.highlightIndex);
this.groupAndMusic = item.groupAndMusic;
},
//获取音乐目录
getMusics() {
getMusicList().then(res => {
console.log('音乐列表', res.data)
this.dateList = res.data;
this.groupAndMusic = this.dateList[0].groupAndMusic
})
},
//功放列表
getDevice() {
getAllDevice().then(res => {
this.musicChoose = res.data
console.log('广播设备列表---> ', this.musicChoose);
})
},
// 播放音乐
playMusic() {
openMusic(this.groupAndMusic.split('_')[0],this.groupAndMusic.split('_')[1],this.ids).then(res=>{
console.log('设备播放结果:-->',res)
this.$message({
message: '播放设备成功',
type: 'success'
});
})
console.log('播放音乐');
this.playState=true
},
// 暂停音乐
stopMusic() {
if ( this.groupAndMusic=='11'){
this.$message.error('请选中歌曲')
}else {
this.playState=false ;
console.log(this.groupAndMusic)
}
closeMusic(this.ids).then(res=>{
console.log('设备停止的结果---->',res)
this.$message({
message: '设备停止成功',
type: 'success'
});
})
console.log('停止音乐');
},
//播放上一首
playPrev(){
if (this.highlightIndex==0){
this.highlightIndex = this.dateList.length-1
}else {
this.highlightIndex--;
console.log( '上一 当前播放歌曲->',this.highlightIndex)
}
this.groupAndMusic= this.dateList[this.highlightIndex].groupAndMusic
if (this.playState){
this.playMusic()
}
},
playNext(){
if (this.highlightIndex==this.dateList.length-1){
this.highlightIndex =0;
}else {
this.highlightIndex++;
console.log( '下一 当前播放歌曲->',this.highlightIndex)
}
this.groupAndMusic= this.dateList[this.highlightIndex].groupAndMusic
if (this.playState){
this.playMusic()
}
},
//设置音量
setVol() {
setVolume(this.soundValue,this.ids).then(res=>{
console.log('设置音量的结果--->',res);
})
},
},
mounted() {
},
};
</script>
<style scoped lang='less'>
/deep/.el-slider__runway {
height: 8px !important;
}
/deep/ .el-slider__bar {
height: 8px !important;
}
/deep/ .el-slider__button {
border: 2px solid #eeeeee;
width: 18px;
height: 18px;
}
.highlight {
background-color: #dd0090;
}
.music-management {
display: flex;
padding: 20px;
padding-bottom: 80px;
}
.music-left {
width: 20%;
height: 1080px;
border-radius: 15px;
margin-right: 15px;
}
.musci-right {
width: 70%;
height: 1080px;
}
.music-title {
height: 60px;
background: #4e9bff;
color: #fff;
font-size: 20px;
line-height: 60px;
padding-left: 30px;
margin-bottom: 10px;
}
.music-content {
overflow-y: auto;
height: 1010px;
&::-webkit-scrollbar {
width: 0;
}
}
.music-list {
height: 50px;
line-height: 50px;
padding-left: 15px;
background: #e3d2c3;
/* 设置文本超出部分隐藏 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: #598dca !important;
color: #fff;
.svg-icon {
color: #fff !important;
}
}
&.active {
background-color: #598dca !important;
color: #fff;
.svg-icon {
color: #fff !important;
}
}
}
.music-list:nth-child(2n) {
background: #e4cab0;
}
.musci-right {
border-radius: 15px;
}
.music-tab {
display: flex;
align-items: center;
height: 60px;
}
.tab {
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
// border:1px solid #6acfc1;
// &.active{
// background: #6acfc1;
// }
}
.music-bottom {
flex-wrap: wrap;
display: flex;
padding: 20px;
overflow-y: auto;
height: 1020px;
&::-webkit-scrollbar {
width: 0;
}
.music-item {
width: 250px;
height: 200px;
border-radius: 12px;
background: #fae5e4;
padding: 10px;
text-align: center;
margin-right: 10px;
border: 2px solid transparent;
margin-bottom: 6px;
.top {
display: flex;
justify-content: space-between;
}
.icon {
width: 70px;
height: 70px;
background: #fff;
border-radius: 50%;
line-height: 70px;
margin: 20px auto;
}
.text {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
.check {
width: 16px;
height: 16px;
background-color: #fff;
border: 1px solid #4e9bff;
border-radius: 4px;
text-align: center;
line-height: 16px;
.svg-icon {
visibility: hidden;
}
&.active {
.svg-icon {
visibility: inherit;
}
}
}
}
&:hover {
border: 2px solid #95c2fa;
}
&.active {
border: 2px solid #95c2fa;
}
}
}
.music-play {
position: fixed;
bottom: 0;
left: 0;
width: 91%;
height: 70px;
background: #fff;
display: flex;
align-items: center;
// margin-left: 200px;
padding-left: 280px;
.left{
cursor: pointer;
}
.play {
padding: 0 20px;
cursor: pointer;
}
.pause {
padding: 0 20px;
}
.sound {
margin-left: 100px;
cursor: pointer;
}
.slider {
margin-left: 20px;
width: 240px;
}
}</style>
<p>内容：在 Vue 项目中，设备列表的状态为离线时不可选中。你可以使用条件渲染和绑定 class 的方式实现这个功能。具体步骤如下：</p>
<ol>
<li>在 data 中添加一个名为 <code>highlightIndex</code> 的变量，用于记录当前选中的设备索引。</li>
</ol>
<pre><code class="language-javascript">data() {
return {
highlightIndex: 0, // 当前选中的设备索引
musicChoose: [
{ id: 1, deviceState: '离线', deviceIP: '192.168.80.30', deviceName: '设备1' },
{ id: 2, deviceState: '离线', deviceIP: '192.168.80.31', deviceName: '设备2' },
{ id: 3, deviceState: '离线', deviceIP: '192.168.80.32', deviceName: '设备3' },
],
};
},
</code></pre>
<ol start="2">
<li>在设备列表的 HTML 代码中，使用条件渲染和绑定 class 的方式设置离线状态的设备不可选中。</li>
</ol>
<pre><code class="language-html"><el-card class='music-item' v-for='(item, index) in musicChoose' :key='index'
:class='[isActive(index) ? 'active' : '']'
@click.native='musicClick(item, index)'>
<div class='top'>
<div>状态：{{ item.deviceState }}</div>
<div>
<svg-icon icon-class='naozhong'></svg-icon>
</div>
</div>
<div class='icon'>
<svg-icon icon-class='lianjie' style='font-size: 40px;vertical-align: middle'></svg-icon>
</div>
<div style='text-align: center'>
{{ item.deviceIP }}
</div>
<div class='text'>
<div>位置: {{ item.deviceName }}</div>
<div class='check' :class='[isActive(index) ? 'active' : '', item.deviceState === '离线' ? 'disabled' : '']'>
<svg-icon icon-class='icon-duihao' style='font-size: 12px; vertical-align: middle;'></svg-icon>
</div>
</div>
</el-card>
</code></pre>
<ol start="3">
<li>在 methods 中添加 <code>musicClick</code> 和 <code>isActive</code> 方法来处理设备的选中状态。</li>
</ol>
<pre><code class="language-javascript">methods: {
musicClick(item, index) {
if (item.deviceState === '离线') {
return; // 如果设备状态为离线，不执行后续操作
}
this.highlightIndex = index; // 更新选中的设备索引
},
isActive(index) {
return this.highlightIndex === index; // 判断当前设备是否为选中状态
},
</code></pre>
<ol start="4">
<li>根据设备的选中状态，在设备列表的 HTML 代码中添加选中样式。</li>
</ol>
<pre><code class="language-html"><div class='text'>
<div>位置: {{ item.deviceName }}</div>
<div class='check' :class='[isActive(index) ? 'active' : '', item.deviceState === '离线' ? 'disabled' : '']'>
<svg-icon icon-class='icon-duihao' style='font-size: 12px; vertical-align: middle;'></svg-icon>
</div>
</div>
</code></pre>
<ol start="5">
<li>在样式表中添加离线设备的禁用样式。</li>
</ol>
<pre><code class="language-css">.disabled {
pointer-events: none; // 禁用点击事件
opacity: 0.5; // 降低透明度表示禁用状态
}
</code></pre>
<p>这样，当设备状态为离线时，点击设备不会触发选中操作，且显示为禁用状态。</p>
原文地址: https://www.cveoy.top/t/topic/plzU 著作权归作者所有。请勿转载和采集!