434 lines
11 KiB
Vue
434 lines
11 KiB
Vue
<template>
|
||
<view class="workbench-box">
|
||
<u-navbar title=" " :is-back="false">
|
||
<view class="navbar-title-box" @click="toggleTeam">
|
||
<text class="navbar-title u-line-1">{{activeTeam.name?activeTeam.name:'未查询到组织'}}</text>
|
||
<!-- <u-icon name="list" color="#222" size="48rpx"></u-icon> -->
|
||
</view>
|
||
</u-navbar>
|
||
|
||
<!-- 组织切换 -->
|
||
<u-popup v-model="teamShow" :border-radius="10" :negative-top="-300" mode="top" @close="teamClose">
|
||
<scroll-view scroll-y="true" show-scrollbar="true" scroll-top="0" class="popup-scroll">
|
||
<view class="team-list">
|
||
<text class="team-num">组织工作台 ({{teamList.length?teamList.length:0}})</text>
|
||
<view class="team-item" v-for="(item,index) in teamList" :key="item.id" @click="clickTeam(index)">
|
||
<view class="team-left">
|
||
<view class="team-item-icon" v-if="item.imgPath">
|
||
<image :src="item.imgPath" alt="">
|
||
</view>
|
||
<view class="team-item-icon icon-bg" v-else>
|
||
{{item.name[0]}}
|
||
</view>
|
||
<text class="team-name u-line-1" :class="teamIndex==index?'active':''">{{item.name}}</text>
|
||
</view>
|
||
<u-icon v-if="teamIndex==index" name="checkbox-mark" color="#1890ff" size="48rpx"></u-icon>
|
||
</view>
|
||
<u-empty v-if="!teamList.length" mode="list" text="未查询到组织,请联系管理员添加"></u-empty>
|
||
</view>
|
||
</scroll-view>
|
||
</u-popup>
|
||
<view class="main-box">
|
||
<u-swiper
|
||
class="item-box"
|
||
:list="bannerlist"
|
||
height="260rpx"
|
||
circular
|
||
></u-swiper>
|
||
<view class="common-list item-box">
|
||
<view class="common-item" v-for="(item,index) in commonList" :key="item.id" @click="goCommonApplication(item.isWebview,index)">
|
||
<view class="icon-bg" :style="{ backgroundColor: item.bgColor}">
|
||
<view v-if="item.icon" class="iconfont item-icon" :class="'icon-' + item.icon" :style="{fontWeight:item.iconBold == 'true'?'bold':'normal'}"></view>
|
||
<view v-else-if="item.iconImg" class="item-img" :class="item.iconImg">
|
||
<image :src="item.iconImg" mode=""></image>
|
||
</view>
|
||
<view v-else class="item-txt">{{item.title[0]}}</view>
|
||
</view>
|
||
<text class="item-name">{{item.title}}</text>
|
||
</view>
|
||
<view class="marauto" v-if="!commonList.length">
|
||
<u-empty
|
||
text="没有常用应用"
|
||
>
|
||
</u-empty>
|
||
</view>
|
||
</view>
|
||
<view class="app-list-box item-box" v-if="false">
|
||
<u-tabs class="tabs-box" :list="tabsList" :is-scroll="true" :current="tabIndex" @change="tabChange"></u-tabs>
|
||
<view class="app-list">
|
||
<view class="app-item" v-for="(item,index) in appList[tabIndex]" :key="item.id" @click="goApplication(item.isWebview,index)">
|
||
<view class="icon-bg" :style="{ backgroundColor: item.bgColor}">
|
||
<view v-if="item.iconfont" class="iconfont item-icon" :class="item.iconfont" :style="{fontWeight:item.iconBold == 'true'?'bold':'normal'}"></view>
|
||
<view v-else-if="item.iconImg" class="item-img" :class="item.iconImg">
|
||
<image :src="item.iconImg" mode=""></image>
|
||
</view>
|
||
<view v-else class="item-txt">{{item.name[0]}}</view>
|
||
</view>
|
||
<text class="item-name">{{item.name}}</text>
|
||
</view>
|
||
<view class="marauto" v-if="!appList[tabIndex].length">
|
||
<u-empty
|
||
mode="permission"
|
||
text="没有应用权限,请联系管理员添加"
|
||
>
|
||
</u-empty>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import data from '@/common/js/workbench.js'
|
||
export default{
|
||
data(){
|
||
return{
|
||
teamList:data.teamList,
|
||
activeTeam:{
|
||
id:1,
|
||
name:'IoT-Fast平台',
|
||
imgPath:''
|
||
},
|
||
teamIndex:0,
|
||
teamShow:false,
|
||
bannerlist: data.bannerlist,
|
||
commonList:[],
|
||
tabsList:data.tabsList,
|
||
tabIndex:0,
|
||
appList:data.appList,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getUserInfo();
|
||
this.getUserMenu();
|
||
this.tabIndex = 1;
|
||
this.tabIndex = 0;
|
||
},
|
||
onShow() {
|
||
this.getUnreadNewNum();
|
||
},
|
||
mounted() {
|
||
},
|
||
methods:{
|
||
// 获取未读消息数量
|
||
getUnreadNewNum(){
|
||
this.$api.newApi.getNewsCount({}).then((res)=>{
|
||
if(res.code == 0){
|
||
if(res.data.letterCount){
|
||
uni.showTabBarRedDot({
|
||
index: 3
|
||
})
|
||
}else{
|
||
uni.hideTabBarRedDot({
|
||
index: 3
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getUserInfo(){
|
||
this.$api.getUserInfo({}).then(res => {
|
||
console.log("获取用户信息",res)
|
||
if(res.code == 0){
|
||
uni.setStorageSync('userInfo',res.data)
|
||
}
|
||
}, error => {
|
||
})
|
||
},
|
||
getUserMenu(){
|
||
this.$api.getUserMenu({clientType:2}).then(res => {
|
||
console.log("获取用户菜单",res)
|
||
if(res.code == 0){
|
||
this.commonList = res.data.list?res.data.list:[];
|
||
}
|
||
}, error => {
|
||
})
|
||
},
|
||
toggleTeam(){
|
||
// this.teamShow = !this.teamShow;
|
||
},
|
||
teamClose(){
|
||
this.teamShow = false;
|
||
},
|
||
clickTeam(index){
|
||
this.teamIndex = index;
|
||
this.activeTeam = this.teamList[index];
|
||
// 切换组织、这里重新查询工作台数据
|
||
},
|
||
// 跳转常用应用
|
||
goCommonApplication(isWebview,index){
|
||
let data = this.commonList[index]
|
||
console.log("当前应用",isWebview,data)
|
||
if(isWebview){
|
||
// 跳转webview页面，带url参数
|
||
uni.navigateTo({
|
||
url:'/pages/work/webview?url='+encodeURIComponent(data.webviewUrl)+'&name='+data.name
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:data.path
|
||
})
|
||
}
|
||
},
|
||
// 跳转应用
|
||
goApplication(isWebview,index){
|
||
let data = this.appList[this.tabIndex][index]
|
||
if(isWebview){
|
||
// 跳转webview页面，带url参数
|
||
uni.navigateTo({
|
||
url:'/pages/work/webview?url='+encodeURIComponent(data.webviewUrl)+'&name='+data.name
|
||
})
|
||
}else if(data.path == '../tabbar/home'){
|
||
uni.switchTab({
|
||
url:'/pages/tabbar/home'
|
||
})
|
||
}else if(data.path == 'untapped'){
|
||
uni.$u.toast('功能开发中');
|
||
}else{
|
||
uni.navigateTo({
|
||
url:data.path
|
||
})
|
||
}
|
||
},
|
||
tabChange(e){
|
||
console.log("点击tab",e)
|
||
this.tabIndex = e;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page{
|
||
background: #f2f1f6;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.workbench-box{
|
||
.navbar-title-box{
|
||
display: flex;
|
||
align-items: center;
|
||
flex:1;
|
||
padding: 0 30rpx;
|
||
.navbar-title{
|
||
/* #ifdef MP-WEIXIN */
|
||
max-width: 480rpx;
|
||
/* #endif */
|
||
/* #ifndef MP-WEIXIN */
|
||
max-width: 630rpx;
|
||
/* #endif */
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
.popup-scroll{
|
||
max-height: 750rpx;
|
||
|
||
.team-list{
|
||
padding: 13px;
|
||
.team-num{
|
||
font-size: 24rpx;
|
||
color: $hintColor;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.team-item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10rpx 0;
|
||
.team-left{
|
||
display: flex;
|
||
align-items: center;
|
||
.team-item-icon{
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 10rpx;
|
||
&.icon-bg{
|
||
background-color: $bgColor-blue;
|
||
color: $uni-text-color-inverse;
|
||
font-size: 36rpx;
|
||
font-weight: 400;
|
||
}
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.team-name{
|
||
max-width: 580rpx;
|
||
&.active{
|
||
color: $bgColor-blue;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
::v-deep .u-drawer-top{
|
||
/* #ifdef MP-WEIXIN */
|
||
top:calc(var(--status-bar-height) + 42px) !important;
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS */
|
||
top:calc(var(--status-bar-height) + 44px) !important;
|
||
/* #endif */
|
||
}
|
||
// 提交导航栏层级、覆盖弹框
|
||
::v-deep .u-navbar{
|
||
z-index: 10076 !important;
|
||
}
|
||
|
||
.main-box{
|
||
// navbar title为空时没有占位
|
||
// margin-top: calc(var(--status-bar-height) + 44px);
|
||
padding: 20rpx;
|
||
|
||
.item-box{
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
}
|
||
.common-list{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-top: 30rpx;
|
||
.common-item{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 25%;
|
||
margin-bottom: 30rpx;
|
||
.icon-bg{
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
// border-radius: 20rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
|
||
// font-size: 60rpx;
|
||
// line-height: 60rpx;
|
||
// background-color: #016af9;
|
||
// background-color: #84c3f3;
|
||
// background-image: linear-gradient(180deg, #84c3f3 0%, #0a87e8 50%, #1890ff 100%);
|
||
// color: #0055ff;
|
||
background: linear-gradient(0deg, #C0E8FF 0%, #FFFFFF 64%);
|
||
|
||
|
||
.item-icon{
|
||
font-size: 60rpx;
|
||
background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.item-img{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image{
|
||
width: 80%;
|
||
height: 80%;
|
||
}
|
||
}
|
||
.item-txt{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 50rpx;
|
||
font-weight: 800;
|
||
background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||
}
|
||
}
|
||
.item-name{
|
||
margin-top: 5rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.app-list-box{
|
||
.tabs-box{
|
||
border-bottom: 1px solid #fbfbfb;
|
||
}
|
||
.app-list{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-top: 30rpx;
|
||
.app-item{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 20%;
|
||
margin-bottom: 30rpx;
|
||
.icon-bg{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
// border-radius: 20rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 50rpx;
|
||
line-height: 50rpx;
|
||
// background-color: #016af9;
|
||
background: linear-gradient(0deg, #C0E8FF 0%, #FFFFFF 64%);
|
||
.item-icon{
|
||
font-size: 50rpx;
|
||
background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.item-img{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image{
|
||
width: 80%;
|
||
height: 80%;
|
||
}
|
||
}
|
||
.item-txt{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 40rpx;
|
||
font-weight: 800;
|
||
background-image: -webkit-linear-gradient(90deg, #3BBCFF, #006CFF);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||
}
|
||
}
|
||
.item-name{
|
||
margin-top: 5rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.marauto{
|
||
margin: 0 auto;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
</style> |