TEAMModelOS/TEAMModelOS/ClientApp/src/common/BaseUserPoptip.vue

<template>
	<div class="base-user-center">
		<div style="display: flex;">
			<div class="base-user-info">
				<p class="base-user-name">{{ userInfo.username }}</p>
				<!-- <p class="base-user-post">教务主任</p> -->
				<Dropdown @on-click="onRoleSelect">
					<a href="javascript:void(0)" class="base-user-post">
						{{ getRoleName(curRole) }}
						<Icon type="ios-arrow-down"></Icon>
					</a>
					<DropdownMenu slot="list">
						<DropdownItem v-if="curRole != 'teacher' && curRole != 'admin'" :name="'teacher'">教师</DropdownItem>
						<DropdownItem v-if="curRole != 'student'" :name="'student'">學生</DropdownItem>
					</DropdownMenu>
				</Dropdown>
			</div>
			<Poptip class="dark-iview-poptip" @on-popper-show="getSize()">
				<!-- <img :src="user.picture" /> -->
				<PersonalPhoto style="cursor: pointer;" :name="userInfo.username" :picture="user.picture" :color="userInfo.nameColor"/>

				<div slot="content" class="user-center">
					<div class="user-info">
						<!-- <img :src="user.picture" />     border: 2px solid #fff;-->
						<PersonalPhoto :width="'70px'" :height="'70px'" :fontSize="'2.50rem'" :name="userInfo.username" :picture="user.picture" :color="userInfo.nameColor"/>

						<span class="user-info-username">{{ userInfo.username }}</span>
						<span class="user-info-account">{{ user.id }}</span>
						<span class="user-info-account">{{ userInfo.role }}</span>
						<span class="user-info-btn">账号管理</span>
					</div>
					<div class="user-nums">
						<div class="user-nums-item">
							<span>{{ userInfo.courseNum }}</span>
							<span>任教课程数</span>
						</div>
						<div class="user-nums-item">
							<span>{{ userInfo.activityNum }}</span>
							<span>发布活动数</span>
						</div>
						<div class="user-nums-item">
							<span>{{ userInfo.classNum }}</span>
							<span>任教班级数</span>
						</div>
					</div>
					<div class="user-storage">
						<p :style="{color: sizeInfo.total > $GLOBAL.PRIVATE_SPACE ? '#ff2929' : '#a5a5a5'}">
							<span v-if="sizeInfo.total > $GLOBAL.PRIVATE_SPACE">(已满)</span>
							个人空间状态：
							{{ getSizeVal(sizeInfo.total) }} / {{ getSizeVal($GLOBAL.PRIVATE_SPACE) }}
						</p>
                        <div class="user-storage-distribution">
                            <span class="percent-item-span storage-full" :style="{ width: '100%' }" v-if="sizeInfo.total > $GLOBAL.PRIVATE_SPACE"></span>
                            <span class="storage-res" :style='{ width: getPercent(sizeInfo.res) }'></span>
                            <span class="storage-image" :style='{ width: getPercent(sizeInfo.image) }'></span>
                            <span class="storage-video" :style='{ width: getPercent(sizeInfo.video) }'></span>
                            <span class="storage-audio" :style='{ width: getPercent(sizeInfo.audio) }'></span>
                            <span class="storage-doc" :style='{ width: getPercent(sizeInfo.doc) }'></span>
                            <span class="storage-other" :style='{ width: getPercent(sizeInfo.other) }'></span>
                            <span class="storage-data" :style='{ width: getPercent(sizeInfo.data) }'></span>
                        </div>
						<p class="user-storage-text">
							<span v-if="sizeInfo.res != 0" class="text-res">教材：{{ getSizeVal(sizeInfo.res) }}</span>
							<span v-if="sizeInfo.image != 0" class="text-image">图片：{{ getSizeVal(sizeInfo.image) }}</span>
							<span v-if="sizeInfo.video != 0" class="text-video">视频：{{ getSizeVal(sizeInfo.video) }}</span>
							<span v-if="sizeInfo.audio != 0" class="text-audio">音频：{{ getSizeVal(sizeInfo.audio) }}</span>
							<span v-if="sizeInfo.doc != 0" class="text-doc">文档：{{ getSizeVal(sizeInfo.doc) }}</span>
							<span v-if="sizeInfo.data != 0" class="text-data">题库：{{ getSizeVal(sizeInfo.data) }}</span>
							<span v-if="sizeInfo.other != 0" class="text-other">其他内容：{{ getSizeVal(sizeInfo.other) }}</span>
						</p>
					</div>
					<div class="btn-logout" @click="onQuit">登出</div>
				</div>
			</Poptip>
		</div>
	</div>
</template>

<script>
    import BlobTool from '@/utils/blobTool.js';
	import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
	export default {
		data() {
			return {
				curRole: '',
				userInfo: {
					username: 'Hao James Ker',
					account: '15895626464',
					role: 'admin',
					courseNum: 7,
					activityNum: 16,
					classNum: 21,
					nameColor: '',
				},
				user: {},
                sizeInfo: {
                    total: 0,   //所有
                    image: 0,   //内容模块图片
                    res: 0,     //内容模块教材
                    video: 0,   //内容模块视频
                    audio: 0,   //内容模块音频
                    doc: 0,     //内容模块文档
                    other: 0,   //内容模块其他文件
                    data: 0      //除了内容模块之外的文件
                }
			}
		},
		created() {
			this.user = JSON.parse(decodeURIComponent(localStorage.userInfo, "utf-8"));
            let user_profile = JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8"));
   //         if (user_profile.schools.length) {
			//	this.$store.commit('setUserInfo', {
			//		TEAMModelId: this.user.id,
			//		name: this.user.name,
			//		schoolCode: user_profile.defaultschool || user_profile.schools[0].schoolId
			//	})
			//} else {
			//	this.$store.commit('setUserInfo', {
			//		TEAMModelId: this.user.id,
			//		name: this.user.name,
			//		schoolCode: 'SYSTEM_NO_SCHOOL'
			//	})
			//}
			
			if(this.user.roles.length){
				this.curRole = this.user.roles[0]
			}
			this.userInfo.username = this.user.name
			this.userInfo.nameColor = this.randomColor()
            this.getSize()
		},
		methods: {
			//获取Blob空间信息
			async getSize() {
				let sasRes = await this.$tools.getPrivateSas()
                let containerClient = new BlobTool(sasRes.url, sasRes.name, sasRes.sas, 'private')
                containerClient.getSize().then(
                    res => {
                        this.sizeInfo = res
                    },
                    err => {
                        this.$Message.error('空间计算异常')
                    }
                )
			},
            //计算空间占比
            getPercent(size) {
                if (this.sizeInfo.total > this.$GLOBAL.PRIVATE_SPACE) {
                    return '0%'
                } else {
                    let p = (size * 100 / this.$GLOBAL.PRIVATE_SPACE)
					p = p > 1 ? p.toFixed(2) : p > 0 ? 1 : 0
                    return p + '%'
                }
            },
			onRoleSelect(val){
				if(localStorage.getItem('identity') != val){
					this.curRole = val
					let path = val === 'student' ? '/studentWeb' : '/home'
					localStorage.setItem('identity', val)
					this.$router.push({ path: path })					
				}
			},
			onQuit() {
				this.$emit('logout')
			},
			randomColor: function(){
				let r = Math.floor(Math.random()*255);
				let g = Math.floor(Math.random()*255);
				let b = Math.floor(Math.random()*255);
				return 'rgba('+ r +','+ g +','+ b +',0.8)';
			},
		},

		computed: {
            
			getSizeVal() {
				return val => {
					return this.$tools.bytesToSize(val)
				}
			},
			getRoleName() {
				return val => {
					return val === 'student' ? '学生' : '教师'
				}
			}
		},
    	components:{
			PersonalPhoto
		}
	}
</script>
<style scoped>
    .user-storage-distribution {
		overflow:hidden;
	}
    .user-storage-text span {
		margin-right:20px;
		display:inline-block;
	}
    .storage-full {
        background-color: red;
    }

    .storage-data {
        background-color: #F8C006;
    }

    .storage-image {
        background-color: #45C84A;
    }

    .storage-video {
        background-color: #8E2BDD;
    }

    .storage-audio {
        background-color: #E1027B;
    }

    .storage-doc {
        background-color: #03C0C2;
    }

    .storage-res {
        background-color: #1FFCC5;
    }

    .storage-other {
        background-color: #E87B22;
    }

    .text-data {
        color: #F8C006;
    }

    .text-image {
        color: #45C84A;
    }

    .text-video {
        color: #8E2BDD;
    }

    .text-audio {
        color: #E1027B;
    }

    .text-doc {
        color: #03C0C2;
    }

    .text-res {
        color: #1FFCC5;
    }

    .text-other {
        color: #E87B22;
    }
</style>
<style lang="less">
	.base-user-center {
		font-family: '微軟正黑體', 'Heiti TC' !important;
		.base-user-info {
			margin-right: 20px;
			text-align: right;

			.base-user-name {
				font-weight: bold;
				color: #b2b5b4;
			}

			.base-user-post {
				color: #686b6b;
			}
		}


		img {
			width: 40px;
			border-radius: 50%;
			border: 2px solid #dddddd;
			cursor: pointer;
		}
		
		.ivu-dropdown-item{
			text-align: left;
		}

		.ivu-poptip-popper {
			width: 460px !important;
		}

		.ivu-poptip-popper {
			left: -400px !important;
			padding: 0;
		}

		.ivu-poptip-title {
			display: none;
		}

		.ivu-poptip-arrow {
			left: 90% !important;
		}

		.user-center {
			height: 620px;
			padding-top: 30px;

			.user-info {
				.fl-col-center;

				img {
					width: 70px;
					border: 2px solid #fff;
				}

				&-username {
					margin: 10px 0;
					font-size: 18px;
					font-weight: bold;
					letter-spacing: .6px;
					color: #1CC0F3;
				}

				&-account {
					color: #a5a5a5;
				}

				&-btn {
					background: #1CC0F3;
					padding: 5px 60px;
					color: #fff;
					margin-top: 20px;
					border-radius: 5px;
					cursor: pointer;
				}

			}


			.user-nums {
				display: flex;
				justify-content: space-around;
				padding-top: 60px;

				&-item {
					.fl-col-center;

					span {

						&:first-child {
							font-size: 34px;
							font-weight: bold;
							color: #fff
						}

						&:last-child {
							font-size: 14px;
							color: #1CC0F3
						}
					}

					;
				}
			}

			.user-storage {
				padding-top: 50px;

				p {
					text-align: center;
					color: #a5a5a5;
					font-size: 12px;
				}

				&-distribution {
					margin: 15px 0;
					height: 10px;
					width: 100%;
					border-radius: 50px;
					background-color: #888888;
					display: flex;

					span {
						display: inline-block;
						width: 50px;
						height: 10px;
					}

					&-green {
						border-radius: 5px 0 0 5px;
						background-color: #00D523;
					}

					&-orange {
						background-color: #e87b22;
					}

					&-red {
						background-color: #ff40bc;
					}

					&-blue {
						background-color: #1fccd5;
					}
				}

				&-text {
					margin-top: 10px;
					font-size: 12px;
					font-weight: bold;
					white-space:normal;
					/*display: flex;
					flex-wrap: wrap;
					justify-content: space-around;*/
				}
			}

			.btn-logout {
				.fl-col-center;
				background: #1CC0F3;
				padding: 10px 60px;
				color: #fff;
				width: 70%;
				margin-left: 15%;
				margin-top: 40px;
				border-radius: 5px;
				font-size: 16px;
				cursor: pointer;
			}
		}

		.fl-col-center {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
</style>