This commit is contained in:
2025-01-20 10:03:22 +08:00
parent 4c18bc54b8
commit ce347a77c1
15 changed files with 2565 additions and 733 deletions

View File

@@ -1,45 +1,47 @@
<template>
<div class="header">
<!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage">
<i v-if="!collapse" class="el-icon-s-fold"></i>
<i v-else class="el-icon-s-unfold"></i>
</div>
<div class="logo">
<div>
<img src="../../assets/img/logo.png" />
<p>{{ $t('system.title_1') }}</p>
</div>
<div>
{{ $t('system.title_2') }}
</div>
<!-- {{ $t('system.title') }} -->
</div>
<div class="header-right">
<div class="header-user-con">
<div class="changelang">
<el-dropdown trigger="click" @command="chengelang">
<span class="el-dropdown-link">
language
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="en">english</el-dropdown-item>
<el-dropdown-item command="zh">中文简体</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 全屏显示 -->
<div class="btn-fullscreen" @click="handleFullScreen">
<el-tooltip effect="dark" :content="fullscreen ? $t('system.noscreen') : $t('system.screen')" placement="bottom">
<i class="el-icon-rank"></i>
</el-tooltip>
</div>
<!-- 消息中心 -->
<div class="header">
<!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage" v-if="!home">
<i v-if="!collapse" class="el-icon-s-fold"></i>
<i v-else class="el-icon-s-unfold"></i>
</div>
<div class="collapse-btn" @click="goHome" v-if="home">
<i class="el-icon-s-home"></i>
</div>
<div class="logo">
<div>
<img src="../../assets/img/logo.png" />
<p>{{ $t('system.title_1') }}</p>
</div>
<div>
{{ $t('system.title_2') }}
</div>
<!-- {{ $t('system.title') }} -->
</div>
<div class="header-right">
<div class="header-user-con">
<div class="changelang">
<el-dropdown trigger="click" @command="chengelang">
<span class="el-dropdown-link">
language
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="en">english</el-dropdown-item>
<el-dropdown-item command="zh">中文简体</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 全屏显示 -->
<div class="btn-fullscreen" @click="handleFullScreen">
<el-tooltip effect="dark" :content="fullscreen ? $t('system.noscreen') : $t('system.screen')" placement="bottom">
<i class="el-icon-rank"></i>
</el-tooltip>
</div>
<!-- 消息中心 -->
<!-- 身份切换 -->
<!-- <span style="font-size: 14px;margin-right: 8px;" v-if="this.user_cap.includes('author')">View as :</span>
<!-- 身份切换 -->
<!-- <span style="font-size: 14px;margin-right: 8px;" v-if="this.user_cap.includes('author')">View as :</span>
<el-dropdown class="link_role" trigger="click" v-if="this.user_cap.includes('author')">
<span style="color: #fff;cursor: pointer;">
Author<i class="el-icon-arrow-down el-icon--right"></i>
@@ -63,350 +65,346 @@
</el-dropdown-menu>
</el-dropdown> -->
<!-- 用户头像 -->
<div class="user-avator" @click="skip_link()" v-if="hasorcie">
<el-tooltip class="item" effect="light" content="Link to Orcid" placement="bottom-end">
<img src="../../assets/img/orcid.png" />
</el-tooltip>
</div>
<div class="user-avator" @click="skip_check()" v-else>
<el-tooltip class="item" effect="light" content="Connect to ORCID" placement="bottom-end">
<img src="../../assets/img/orcno.png" />
</el-tooltip>
</div>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{ username }}
<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item divided command="personcenter">Personal Center</el-dropdown-item> -->
<el-dropdown-item divided command="loginout">{{ $t('system.loyout') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
<!-- 用户头像 -->
<div class="user-avator" @click="skip_link()" v-if="hasorcie">
<el-tooltip class="item" effect="light" content="Link to Orcid" placement="bottom-end">
<img src="../../assets/img/orcid.png" />
</el-tooltip>
</div>
<div class="user-avator" @click="skip_check()" v-else>
<el-tooltip class="item" effect="light" content="Connect to ORCID" placement="bottom-end">
<img src="../../assets/img/orcno.png" />
</el-tooltip>
</div>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{ username }}
<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item divided command="personcenter">Personal Center</el-dropdown-item> -->
<el-dropdown-item divided command="loginout">{{ $t('system.loyout') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</template>
<script>
import bus from '../common/bus';
export default {
data() {
return {
collapse: false,
fullscreen: false,
name: 'unknown user',
message: 2,
hasorcie: false,
link_path: '',
user_id: localStorage.getItem('U_id'),
user_cap: localStorage.getItem('U_role'),
orcid: '',
orcidLink: 'https://orcid.org/oauth/authorize?client_id=APP-PKF0BGRP6DWM6FUB&response_type=code&scope=/authenticate&redirect_uri=https://submission.tmrjournals.com/orcidBind',
langArr: [{
value: 'zh',
label: '中文'
},
{
value: 'en',
label: 'English'
}
],
curStartTime: '2019-07-31 08:00:00',
daojishi: '',
day: '0',
hour: '00',
min: '00',
second: '00',
};
},
created() {
if(!this.$route.meta.hideSidebar){
this.collapse=true
}else{
this.collapse=false
import bus from '../common/bus';
export default {
props: ['home'],
data() {
return {
collapse: false,
fullscreen: false,
name: 'unknown user',
message: 2,
hasorcie: false,
link_path: '',
user_id: localStorage.getItem('U_id'),
user_cap: localStorage.getItem('U_role'),
orcid: '',
orcidLink:
'https://orcid.org/oauth/authorize?client_id=APP-PKF0BGRP6DWM6FUB&response_type=code&scope=/authenticate&redirect_uri=https://submission.tmrjournals.com/orcidBind',
langArr: [
{
value: 'zh',
label: '中文'
},
{
value: 'en',
label: 'English'
}
],
curStartTime: '2019-07-31 08:00:00',
daojishi: '',
day: '0',
hour: '00',
min: '00',
second: '00'
};
},
created() {
this.initORCID();
if (this.user_id == 24) {
this.daojishi = '2021.9.3 - 2021.9.30';
this.curStartTime = '2021-10-01 00:00:00';
this.countTime();
}
if (this.user_id == 25) {
this.daojishi = '2021.9.6 - 2021.12.31';
this.curStartTime = '2022-01-01 00:00:00';
this.countTime();
}
},
computed: {
username() {
let username = localStorage.getItem('U_name');
return username ? username : this.name;
},
onRoutes() {
0;
return this.$route.path.replace('/', '');
},
userrole() {
let userrole = localStorage.getItem('U_status');
if (userrole == 1) {
return this.$t('total.author');
} else if (userrole == 2) {
return this.$t('total.editor');
} else if (userrole == 'admin') {
return this.$t('total.admin');
} else {
return this.$t('total.reviewers');
}
this.initORCID();
if (this.user_id == 24) {
this.daojishi = '2021.9.3 - 2021.9.30'
this.curStartTime = '2021-10-01 00:00:00'
this.countTime();
}
if (this.user_id == 25) {
this.daojishi = '2021.9.6 - 2021.12.31'
this.curStartTime = '2022-01-01 00:00:00'
this.countTime();
}
},
computed: {
username() {
let username = localStorage.getItem('U_name');
return username ? username : this.name;
},
onRoutes() {
0
return this.$route.path.replace('/', '');
},
userrole() {
let userrole = localStorage.getItem('U_status');
if (userrole == 1) {
return this.$t('total.author');
} else if (userrole == 2) {
return this.$t('total.editor');
} else if (userrole == 'admin') {
return this.$t('total.admin');
} else {
return this.$t('total.reviewers');
}
}
},
methods: {
// 用户名下拉菜单选择事件
handleCommand(command) {
// 个人中心
if (command == 'personcenter') {
this.$router.push('/percenter');
}
// 退出系统
if (command == 'loginout') {
localStorage.removeItem('U_role');
localStorage.removeItem('U_id');
localStorage.removeItem('U_name');
localStorage.removeItem('U_status');
localStorage.removeItem('ms_journal_alias');
this.$router.push('/login');
}
},
// 侧边栏折叠
collapseChage() {
this.collapse = !this.collapse;
bus.$emit('collapse', this.collapse);
},
//判断orcid
initORCID() {
this.$api
.post('api/user/checkOrcid', {
account: localStorage.getItem('U_name')
})
.then((res) => {
this.hasorcie = res.userinfo.orcid == '' ? false : true;
this.orcid = res.userinfo.orcid;
})
.catch((err) => {
console.log(err);
});
},
// 全屏事件
handleFullScreen() {
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},
//切换语言
chengelang(commond) {
localStorage.setItem('langs', commond);
this.$router.go(0);
},
skip_link() {
location.href = 'https://orcid.org/' + this.orcid;
},
skip_check() {
location.href = this.orcidLink;
},
}
},
methods: {
goHome() {
this.$router.push('/');
},
// 用户名下拉菜单选择事件
handleCommand(command) {
// 个人中心
if (command == 'personcenter') {
this.$router.push('/percenter');
}
// 退出系统
if (command == 'loginout') {
localStorage.removeItem('U_role');
localStorage.removeItem('U_id');
localStorage.removeItem('U_name');
localStorage.removeItem('U_status');
localStorage.removeItem('ms_journal_alias');
this.$router.push('/login');
}
},
// 侧边栏折叠
collapseChage() {
this.collapse = !this.collapse;
bus.$emit('collapse', this.collapse);
},
//判断orcid
initORCID() {
this.$api
.post('api/user/checkOrcid', {
account: localStorage.getItem('U_name')
})
.then((res) => {
this.hasorcie = res.userinfo.orcid == '' ? false : true;
this.orcid = res.userinfo.orcid;
})
.catch((err) => {
console.log(err);
});
},
// 全屏事件
handleFullScreen() {
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},
//切换语言
chengelang(commond) {
localStorage.setItem('langs', commond);
this.$router.go(0);
},
skip_link() {
location.href = 'https://orcid.org/' + this.orcid;
},
skip_check() {
location.href = this.orcidLink;
},
// 倒计时
countTime() {
// 获取当前时间
let date = new Date()
let now = date.getTime()
// 设置截止时间
let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
let end = endDate.getTime()
// 时间差
let leftTime = end - now
// 定义变量 d,h,m,s保存倒计时的时间
if (leftTime >= 0) {
// 天
this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
// 时
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
this.hour = h < 10 ? '0' + h : h
// 分
let m = Math.floor(leftTime / 1000 / 60 % 60)
this.min = m < 10 ? '0' + m : m
// 秒
let s = Math.floor(leftTime / 1000 % 60)
this.second = s < 10 ? '0' + s : s
} else {
this.day = 0
this.hour = '00'
this.min = '00'
this.second = '00'
}
// 等于0的时候不调用
if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
return
} else {
// 递归每秒调用countTime方法显示动态时间效果,
setTimeout(this.countTime, 1000)
}
},
},
mounted() {
if (document.body.clientWidth < 1000) {
this.collapseChage();
}
},
watch: {
$route: {
handler: function(route) {
this.link_path = route.path
},
immediate: true
}
}
};
// 倒计时
countTime() {
// 获取当前时间
let date = new Date();
let now = date.getTime();
// 设置截止时间
let endDate = new Date(this.curStartTime); // this.curStartTime需要倒计时的日期
let end = endDate.getTime();
// 时间差
let leftTime = end - now;
// 定义变量 d,h,m,s保存倒计时的时间
if (leftTime >= 0) {
// 天
this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
// 时
let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
this.hour = h < 10 ? '0' + h : h;
// 分
let m = Math.floor((leftTime / 1000 / 60) % 60);
this.min = m < 10 ? '0' + m : m;
// 秒
let s = Math.floor((leftTime / 1000) % 60);
this.second = s < 10 ? '0' + s : s;
} else {
this.day = 0;
this.hour = '00';
this.min = '00';
this.second = '00';
}
// 等于0的时候不调用
if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
return;
} else {
// 递归每秒调用countTime方法显示动态时间效果,
setTimeout(this.countTime, 1000);
}
}
},
mounted() {
if (document.body.clientWidth < 1000) {
this.collapseChage();
}
},
watch: {
$route: {
handler: function (route) {
this.link_path = route.path;
},
immediate: true
}
}
};
</script>
<style scoped>
.header {
position: relative;
box-sizing: border-box;
width: 100%;
height: 70px;
font-size: 22px;
color: #fff;
}
.header {
position: relative;
box-sizing: border-box;
width: 100%;
height: 70px;
font-size: 22px;
color: #fff;
}
.collapse-btn {
float: left;
padding: 0 15px 0 21px;
cursor: pointer;
line-height: 70px;
}
.collapse-btn {
float: left;
padding: 0 15px 0 21px;
cursor: pointer;
line-height: 70px;
}
.header .logo {
float: left;
padding-top: 19px;
vertical-align: middle;
font-size: 20px;
}
.header .logo {
float: left;
padding-top: 19px;
vertical-align: middle;
font-size: 20px;
}
.header .logo img {
width: 84px;
height: 20px;
margin-top: -4px;
margin-right: 15px;
padding-left: 12px;
}
.header .logo img {
width: 84px;
height: 20px;
margin-top: -4px;
margin-right: 15px;
padding-left: 12px;
}
.header .logo>div {
float: left;
height: 40px;
}
.header .logo > div {
float: left;
height: 40px;
}
.header .logo p {
font-size: 12px;
text-align: center;
}
.header .logo p {
font-size: 12px;
text-align: center;
}
.header-right {
float: right;
padding-right: 50px;
}
.header-right {
float: right;
padding-right: 50px;
}
.header-user-con {
display: flex;
height: 70px;
align-items: center;
}
.header-user-con {
display: flex;
height: 70px;
align-items: center;
}
.btn-fullscreen {
transform: rotate(45deg);
margin-right: 5px;
font-size: 24px;
}
.btn-fullscreen {
transform: rotate(45deg);
margin-right: 5px;
font-size: 24px;
}
.changelang {
position: relative;
width: 90px;
height: 30px;
}
.changelang {
position: relative;
width: 90px;
height: 30px;
}
.btn-fullscreen {
position: relative;
width: 30px;
height: 30px;
text-align: center;
border-radius: 15px;
cursor: pointer;
}
.btn-fullscreen {
position: relative;
width: 30px;
height: 30px;
text-align: center;
border-radius: 15px;
cursor: pointer;
}
.btn-bell-badge {
position: absolute;
right: 0;
top: -2px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #f56c6c;
color: #fff;
}
.btn-bell-badge {
position: absolute;
right: 0;
top: -2px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #f56c6c;
color: #fff;
}
.btn-bell .el-icon-bell {
color: #fff;
}
.btn-bell .el-icon-bell {
color: #fff;
}
.user-name {
margin-left: 10px;
}
.user-name {
margin-left: 10px;
}
.user-avator {
margin-left: 20px;
}
.user-avator {
margin-left: 20px;
}
.user-avator img {
display: block;
width: 20px;
height: 20px;
}
.user-avator img {
display: block;
width: 20px;
height: 20px;
}
.el-dropdown-link {
color: #fff;
cursor: pointer;
}
.el-dropdown-link {
color: #fff;
cursor: pointer;
}
.el-dropdown-menu__item {
text-align: center;
}
#colgreen {
color: rgb(142, 150, 74);
}
.el-dropdown-menu__item {
text-align: center;
}
#colgreen {
color: rgb(142, 150, 74);
}
</style>