173 lines
3.7 KiB
Vue
173 lines
3.7 KiB
Vue
<template>
|
|
<view class="main-content">
|
|
<view class="fixedheader">
|
|
<headers :showBack="true" :themeType="true">
|
|
<view class="headerName"> 视频播放列表 </view>
|
|
</headers>
|
|
</view>
|
|
<view class="search-box" :style="{ paddingTop: statusBarHeight + 44 + 'px' }">
|
|
<view class="uni-form-item">
|
|
<u-search class="uni-input" placeholder="搜索视频分组" :show-action="false" @change="getVideoGroup"
|
|
v-model="searchName"></u-search>
|
|
</view>
|
|
</view>
|
|
<view class="content-part" :style="{ 'padding-top': statusBarHeight + 110 + 'px' }">
|
|
<tree-menu :iconShow="true" v-for="(item,index) in treeData" :key="item.id" :item="item" :treeIndex="treeIndex"
|
|
@clickItem="clickTreeItem"></tree-menu>
|
|
</view>
|
|
<levitatedsphere :x="100" :y="80"></levitatedsphere>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
|
|
// import TreeMenu from '../../components/tree-node/index.vue'
|
|
import TreeMenu from '../../components/tree-node/newIndex.vue'
|
|
export default {
|
|
name: 'Study',
|
|
components: {
|
|
TreeMenu
|
|
},
|
|
data() {
|
|
return {
|
|
treeIndex: 1, // 树形层级index
|
|
treeData: [],
|
|
projectSn: "",
|
|
statusBarHeight: 0,
|
|
searchName: "",
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
|
|
if(options.sn){
|
|
this.projectSn = options.sn;
|
|
}else {
|
|
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
|
}
|
|
this.getVideoGroup();
|
|
},
|
|
methods: {
|
|
clickTreeItem(item) {
|
|
console.log(item, 777888, this.projectSn)
|
|
uni.navigateTo({
|
|
url: `./videoList?obj=${JSON.stringify(item)}&sn=${this.projectSn}`
|
|
})
|
|
},
|
|
getVideoGroup() {
|
|
var that = this
|
|
let requestData = {
|
|
projectSn: this.projectSn,
|
|
groupName: this.searchName,
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/videoGroup/tree/list",
|
|
data: requestData,
|
|
success(res) {
|
|
console.log('视频分组列表', res)
|
|
that.treeData = res.result;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.main-content {
|
|
// background: #F4F5FD;
|
|
background: white;
|
|
height: 100vh;
|
|
|
|
.content-part {
|
|
// .tree-content-compontent:nth-child(2n -1){
|
|
// background: #F5F5F5;
|
|
// }
|
|
// .tree-content-compontent:nth-child(2n){
|
|
// background: #FFFFFF;
|
|
// }
|
|
}
|
|
}
|
|
|
|
.fixedheader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
|
|
/deep/ .headerBox {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.headerName {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
background-color: white;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 99;
|
|
|
|
.uni-form-item {
|
|
padding: 20rpx 26rpx;
|
|
position: relative;
|
|
display: flex;
|
|
|
|
.uni-input {
|
|
border: 2rpx solid #e4e4e4;
|
|
border-radius: 68rpx;
|
|
padding: 0;
|
|
font-size: 30rpx;
|
|
color: #444444;
|
|
|
|
/deep/ .u-content {
|
|
background-color: #ffffff !important;
|
|
|
|
.u-input {
|
|
background-color: #ffffff !important;
|
|
color: #999999 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
background: #498cec;
|
|
border-radius: 48rpx;
|
|
margin-left: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .u-dropdown {
|
|
padding-right: 60rpx;
|
|
}
|
|
|
|
.calendar_box {
|
|
position: absolute;
|
|
right: 28rpx;
|
|
bottom: 20rpx;
|
|
|
|
.calendar {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background-image: url("@/static/workTicketManage/calendar.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.calendar_active {
|
|
background-image: url("@/static/workTicketManage/calendar-active.png");
|
|
}
|
|
}
|
|
}
|
|
</style> |