81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
import Vue from 'vue'
|
|
Vue.component("list-menu", {
|
|
template: `
|
|
<div class="video-list-max">
|
|
<div class="video-list-min">
|
|
<div class="video-list-for" v-for="item in videoListData" @click="onVideoListFor(item.id,item.videoList)">
|
|
<div class="video-list-title">{{item.project_abbreviation}}</div>
|
|
<el-collapse-transition>
|
|
<ul class="video-list-ul" v-show="item.type">
|
|
<li :class="user.type==true?'active':''" v-for="user in item.videoList" @click.stop="onVideoListLi(user)">
|
|
<button :class="user.signalState == 1?'video-state-zx':'video-state-lx'"></button>
|
|
<span>{{user.videoName}}</span>
|
|
</li>
|
|
</ul>
|
|
</el-collapse-transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
props: {
|
|
data:{
|
|
type:Array
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
videoListData:[]
|
|
}
|
|
},
|
|
mounted(){
|
|
this.init()
|
|
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.videoListData = this.data
|
|
},
|
|
onVideoListFor(id,item){
|
|
var data = this.videoListData
|
|
for (let i = 0; i < data.length ; i++) {
|
|
if(data[i].id == id){ //data[i].type == false
|
|
data[i].type = true
|
|
for (let j = 0; j <data[i].videoList.length ; j++) {
|
|
if(j == 0){
|
|
data[i].videoList[j].type = true
|
|
}else {
|
|
data[i].videoList[j].type = false
|
|
}
|
|
}
|
|
}else{
|
|
data[i].type = false
|
|
for (let k = 0; k <data[i].videoList.length ; k++) {
|
|
data[i].videoList[k].type = false
|
|
}
|
|
}
|
|
}
|
|
this.videoListData = data
|
|
this.$emit('project',item[0]);
|
|
},
|
|
onVideoListLi(user){
|
|
var data = this.videoListData
|
|
for (let i = 0; i <data.length ; i++) {
|
|
for (let j = 0; j <data[i].videoList.length ; j++) {
|
|
if(data[i].videoList[j].id == user.id){
|
|
data[i].videoList[j].type = true
|
|
}else{
|
|
data[i].videoList[j].type = false
|
|
}
|
|
}
|
|
}
|
|
this.videoListData = data
|
|
this.$emit('equipment',user);
|
|
},
|
|
},
|
|
watch:{
|
|
data:function () {
|
|
this.init()
|
|
}
|
|
}
|
|
})
|