kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工作台入库

Browse Source
This commit is contained in:
aixianling
2022-08-24 11:46:01 +08:00
parent ccc6455274
commit 0d7c0a9671
2 changed files with 505 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

505
packages/extra/AppConsole/AppConsole.vue Normal file
View File

@@ -0,0 +1,505 @@
<template>
<section class="AppConsole">
<el-row type="flex" class="header-text">
<el-row style="width: 392px" type="flex" align="middle">
<i class="iconfont iconDate1"/>
<span v-text="`今天是 ${$moment().format('YYYY年M月D日 dddd')}`"/>
</el-row>
<el-row type="flex" align="middle" class="notice fill">
<el-button type="primary" icon="iconfont iconNotice">通知公告</el-button>
<div class="notice-content nowarp-text fill">
<el-carousel ref="noticeCarousel" height="32px" direction="vertical" indicator-position="none">
<template v-if="noticeList.length">
<el-carousel-item v-for="(notice,i) in noticeList" :key="i">
<div style="text-align: left">{{ notice.title }}</div>
</el-carousel-item>
</template>
<el-carousel-item v-else style="text-align: left">暂无通知</el-carousel-item>
</el-carousel>
</div>
<el-button type="text" style="color:rgba(153,153,153,1)" @click="$router.push({name:'通知公告'})">更多</el-button>
<el-button type="text" style="color:rgba(153,153,153,1);margin-left: 0;padding: 8px 0"
icon="iconfont iconTriangle_Up" @click="$refs.noticeCarousel.prev()"></el-button>
<el-button type="text" style="color:rgba(153,153,153,1);margin-left: 0;padding: 8px 8px 8px 0"
icon="iconfont iconTriangle_Down" @click="$refs.noticeCarousel.next()"></el-button>
</el-row>
</el-row>
<div class="main-console">
<el-row type="flex">
<!--用户信息卡片-->
<div class="card-panel userinfo-panel">
<el-row type="flex" class="top-panel" align="middle">
<div class="avatar">
<el-avatar :size="64" :src="user.info.avatar">
{{ defaultAvatar }}
</el-avatar>
</div>
<el-row type="flex" justify="space-between" align="middle">
<div class="basic-info">
{{ $moment().format("A") + "好，" + user.info.name }}
<br>{{ welcomeWord() }}
</div>
<el-button type="text" @click="$router.push({name:'个人中心'})">
个人中心 <i class="iconfont iconArrow_Right"/></el-button>
</el-row>
</el-row>
<div class="user-info-panel">
<li>
<div>所属单位</div>
{{ user.info.unitName }}
</li>
<li>
<div>当前职务</div>
{{ user.info.position }}
</li>
<li>
<div>所属党组织</div>
{{ user.info.organizationName }}
</li>
<li>
<div>上次登录</div>
<span style="color: #2266ff">{{ user.info.lastLoginTime }}</span></li>
</div>
</div>
<div class="fill mar-l20 topLeft">
<el-row type="flex" justify="space-between">
<div class="data-panel-area">
<div class="card-panel data-panel" @click="$router.push({name:'待办事项'})">
<div class="item-label">
<svg class="icon" aria-hidden="true">
<use xlink:href="#iconBacklog"></use>
</svg>
<div style="margin-left: 8px">待办事项</div>
</div>
<b style="font-size: 20px">{{ todoTotal }}</b>
</div>
</div>
<div class="data-panel-area">
<div class="card-panel data-panel" @click="$router.push({name:'消息中心'})">
<div class="item-label">
<svg class="icon" aria-hidden="true">
<use xlink:href="#iconUnread_message"></use>
</svg>
<div style="margin-left: 8px">未读消息</div>
</div>
<b style="font-size: 20px">{{ msgTotal }}</b>
</div>
</div>
<div class="data-panel-area">
<div class="card-panel data-panel"
@click="$router.push({name:'33',query:{listType: 1,meetingStatus: 1}})">
<div class="item-label">
<svg class="icon" aria-hidden="true">
<use xlink:href="#iconAttend_The_Meeting"></use>
</svg>
<div style="margin-left: 8px">待参加会议</div>
</div>
<b style="font-size: 20px">{{ conferenceTotal }}</b>
</div>
</div>
</el-row>
<ai-card title="待办事项" class="mar-t20 fill">
<template #content>
<el-row type="flex">
<el-col :span="3" class="todo-item" v-for="(todo,i) in todoList" :key="i"
@click.native="$router.push({name:$dict.getLabel('todoFrom',todo.type),query:$dict.getLabel('todoParams',todo.type)})">
<div style="width: 48px;margin: 8px auto 0">
<el-badge type="warning" :value="todo.count">
<svg class="icon" aria-hidden="true">
<use :xlink:href="$dict.getLabel('todoIcon',todo.type)"></use>
</svg>
</el-badge>
</div>
<div class="item-label">{{ $dict.getLabel("todoFrom", todo.type) }}</div>
</el-col>
</el-row>
</template>
</ai-card>
</div>
</el-row>
<el-row type="flex" class="conference-and-message">
<ai-card title="未读消息" class="fill">
<template #right>
<el-button type="text" @click="$router.push({name:'消息中心'})">消息中心<i class="iconfont iconArrow_Right"/></el-button>
</template>
<template #content>
<div class="unread-message-list">
<li v-for="(msg,i) in msgList" :key="i" class="nowarp-text">
<div class="list-type">&nbsp;</div>
<div style="width: calc(100% - 16px)">
<p class="nowarp-text">{{ msg.content }}</p>
<span style="color: #26f" v-text="`[${msg.title}]`"/><span style="color:#999" v-text="msg.receiveTime"/>
</div>
</li>
<ai-empty v-if="!msgList.length">暂无消息</ai-empty>
</div>
</template>
</ai-card>
<ai-card title="我的会议" class="fill">
<template #right>
<el-button type="text" @click="$router.push({name:'33'})">更多会议<i class="iconfont iconArrow_Right"/></el-button>
</template>
<template #content>
<div class="conference-list">
<li v-for="(item,i) in conferenceList" :key="i" @click="$router.push({name:'33',query:{listType: 1,meetingStatus: 1,confirmStatus:1}})">
<div class="list-type"></div>
<div>
<span>{{ item.title }}</span><br>
<span
style="color:#999">{{
[$moment(item.startTime).format("YYYY-MM-DD hh:mm"), item.address].join(" ")
}}</span>
</div>
</li>
</div>
<ai-empty v-if="!conferenceList.length">暂无会议</ai-empty>
</template>
</ai-card>
</el-row>
</div>
</section>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "AppConsole",
label: "工作台",
computed: {
...mapState(['user']),
defaultAvatar() {
return this.user.info.name?.slice(-2) || "游客"
}
},
data() {
return {
todoList: [],
todoTotal: 0,
msgList: [],
msgTotal: 0,
conferenceList: [],
conferenceTotal: 0,
noticeList: []
}
},
methods: {
getTodoList() {
this.$request.post("/message/systodolist/type-count").then(res => {
this.todoList = res.data.list
this.todoTotal = res.data.total
})
},
getUnreadMessage() {
this.$request.post("/message/appmessage/list", null, {
params: {readStatus: 0}
}).then(res => {
this.msgList = res.data.records
this.msgTotal = res.data.total
})
},
getConferences() {
this.$request.post("/app/appmeetinginfo/list", null, {
params: {listType: 1, meetingStatus: 1}
}).then(res => {
this.conferenceList = res.data.records
this.conferenceTotal = res.data.total
})
},
getNotice() {
this.$request.post("/app/appannouncement/list-latest", null, {
params: {
areaId: this.user.info.areaId,
current: 1,
size: 3
}
}).then(res => {
this.noticeList = res.data.records
})
},
welcomeWord() {
let word = "", hour = this.$moment().hour()
if (hour < 6) {
word = "你来的似乎有点早~"
} else if (hour < 9) {
word = "又是愉快的一天!"
} else if (hour < 12) {
word = "好好工作!"
} else if (hour < 14) {
word = "养精蓄锐,以逸待劳!"
} else if (hour < 17) {
word = "欢迎回来!"
} else if (hour < 19) {
word = "要按时下班哦~"
} else if (hour < 22) {
word = "忙碌了一天,注意休息~"
} else {
word = "夜深了,该休息了~"
}
return word;
}
},
create() {
this.$dict.load("todoFrom", "todoIcon", "todoParams")
}
}
</script>
<style lang="scss" scoped>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.AppConsole {
.header-text {
font-weight: normal;
color: #333333;
padding: 0 calc(50% - 580px);
background: #fff;
span {
font-size: 14px;
margin-left: 8px;
}
.notice {
margin: 8px auto;
background: rgba(247, 247, 247, 1);
border-radius: 2px;
border: 1px solid rgba(221, 221, 221, 1);
text-align: center;
height: 32px;
font-size: 14px;
.label {
padding: 0 8px;
min-width: 112px;
color: white;
background: rgba(34, 102, 255, 1);
border-radius: 2px 0 0 2px;
line-height: 32px;
box-sizing: border-box;
}
.notice-content {
padding: 0 8px;
color: rgba(51, 51, 51, 1);
line-height: 32px;
}
}
}
.topLeft {
display: flex;
flex-direction: column;
.ai-card:last-of-type {
margin-bottom: 0;
}
}
.main-console {
height: calc(100% - 92px);
padding: 20px 20px 24px;
width: 1200px;
margin: auto;
.userinfo-panel {
min-width: 372px;
.top-panel {
padding: 0 16px;
background-image: url("./assets/bg_prolife.png");
background-size: 100%;
background-repeat: no-repeat;
::v-deep .avatar {
padding: 8px;
width: initial;
height: initial;
border-radius: 50%;
border: 2px solid rgba(34, 102, 255, 0.5);
background: white;
font-size: 24px;
box-sizing: border-box;
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
}
.el-avatar:hover {
animation: rotate 15s ease-in-out;
}
}
.basic-info {
font-size: 16px;
color: rgba(51, 51, 51, 1);
line-height: 24px;
margin: 36px 0;
}
.el-row {
flex: 1;
min-width: 0;
.el-button {
color: #999;
}
}
}
.user-info-panel {
padding: 24px;
li {
font-size: 14px;
line-height: 19px;
margin-bottom: 8px;
display: flex;
div {
width: 94px;
color: rgba(102, 102, 102, 1);
}
}
}
}
.card-panel {
background: rgba(255, 255, 255, 1);
box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.02);
border-radius: 4px;
}
.todo-item {
background: rgba(243, 246, 249, 0);
border-radius: 4px;
cursor: pointer;
svg {
height: 48px;
width: 48px;
}
.item-label {
color: #333;
text-align: center;
font-size: 14px;
line-height: 32px
}
&:hover {
background: rgba(239, 246, 255, 1);
}
}
.data-panel-area:hover > .data-panel {
transform: translateY(-2px);
box-shadow: 0 16px 32px -16px rgba(36, 103, 255, 0.3);
}
.data-panel {
width: 224px;
height: 80px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
display: flex;
justify-content: space-between;
padding: 0 16px;
line-height: 80px;
cursor: pointer;
svg {
margin: 29px 0;
width: 24px;
height: 24px;
}
.item-label {
display: flex;
font-size: 14px;
}
b {
font-size: 20px;
color: rgba(51, 51, 51, 1);
font-family: Arial, serif;
}
}
.conference-and-message {
height: calc(100% - 296px);
margin-top: 20px;
gap: 20px;
}
.unread-message-list {
height: calc(100% - 48px);
overflow-y: auto;
overflow-x: hidden;
.list-type {
width: 5px;
height: 5px;
border-radius: 50%;
border: 3px solid #26f;
margin: 4px 8px;
}
li {
display: flex;
font-size: 14px;
margin: 0 16px;
padding: 15px 8px;
line-height: 19px;
&:hover {
background: rgba(239, 246, 255, 1);
}
}
}
.conference-list {
height: calc(100% - 48px);
overflow-y: auto;
.list-type {
width: 2px;
height: 40px;
background: rgba(255, 136, 34, 1);
border-radius: 2px;
margin-right: 14px;
}
li {
display: flex;
font-size: 14px;
margin: 0 16px;
padding: 15px 8px;
line-height: 19px;
cursor: pointer;
&:hover {
background: rgba(239, 246, 255, 1);
}
}
}
}
}
@keyframes rotate {
to {
transform: rotate(60turn);
}
}
</style>