709 lines
19 KiB
Vue
709 lines
19 KiB
Vue
<template>
|
||
<div class="ele-body ele-body-card">
|
||
<!-- 顶部卡片 -->
|
||
<a-card
|
||
:bordered="false"
|
||
:body-style="{padding: '20px'}">
|
||
<div class="ele-cell workplace-user-card">
|
||
<div class="ele-cell-content ele-cell">
|
||
<a-avatar :size="68" :src="loginUser.avatar"/>
|
||
<div class="ele-cell-content">
|
||
<h4 class="ele-elip">早安，{{ loginUser.nickname }}，开始您一天的工作吧！</h4>
|
||
<div class="ele-elip ele-text-secondary">
|
||
<cloud-outlined/>
|
||
<em>今日多云转阴，18℃ - 22℃，出门记得穿外套哦~</em>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="workplace-count-group">
|
||
<div class="workplace-count-item">
|
||
<div class="workplace-count-header">
|
||
<ele-tag
|
||
color="blue"
|
||
shape="circle"
|
||
size="small">
|
||
<appstore-filled/>
|
||
</ele-tag>
|
||
<span class="workplace-count-name">项目数</span>
|
||
</div>
|
||
<h2>3</h2>
|
||
</div>
|
||
<div class="workplace-count-item">
|
||
<div class="workplace-count-header">
|
||
<ele-tag
|
||
color="orange"
|
||
shape="circle"
|
||
size="small">
|
||
<check-square-outlined/>
|
||
</ele-tag>
|
||
<span class="workplace-count-name">待办项</span>
|
||
</div>
|
||
<h2>6 / 24</h2>
|
||
</div>
|
||
<div class="workplace-count-item">
|
||
<div class="workplace-count-header">
|
||
<ele-tag
|
||
color="green"
|
||
shape="circle"
|
||
size="small">
|
||
<bell-filled/>
|
||
</ele-tag>
|
||
<span class="workplace-count-name">消息</span>
|
||
</div>
|
||
<h2>1,689</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
<!-- 快捷方式块 -->
|
||
<a-row :gutter="16">
|
||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||
<a-card
|
||
:bordered="false"
|
||
hoverable
|
||
:body-style="{padding: 0}">
|
||
<router-link
|
||
to="/system/user"
|
||
class="app-link-block">
|
||
<user-outlined class="app-link-icon"/>
|
||
<div class="app-link-title">用户</div>
|
||
</router-link>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||
<a-card
|
||
:bordered="false"
|
||
hoverable
|
||
:body-style="{padding: 0}">
|
||
<router-link
|
||
to="/dashboard/analysis"
|
||
class="app-link-block">
|
||
<shopping-cart-outlined
|
||
class="app-link-icon"
|
||
style="color: #95de64;"/>
|
||
<div class="app-link-title">分析</div>
|
||
</router-link>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||
<a-card
|
||
:bordered="false"
|
||
hoverable
|
||
:body-style="{padding: 0}">
|
||
<router-link
|
||
to="/list/card/project"
|
||
class="app-link-block">
|
||
<fund-projection-screen-outlined
|
||
class="app-link-icon"
|
||
style="color: #ff9c6e;"/>
|
||
<div class="app-link-title">商品</div>
|
||
</router-link>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||
<a-card
|
||
:bordered="false"
|
||
hoverable
|
||
:body-style="{padding: 0}">
|
||
<router-link
|
||
to="/list/basic"
|
||
class="app-link-block">
|
||
<file-search-outlined
|
||
class="app-link-icon"
|
||
style="color: #b37feb;"/>
|
||
<div class="app-link-title">订单</div>
|
||
</router-link>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||
<a-card
|
||
:bordered="false"
|
||
hoverable
|
||
:body-style="{padding: 0}">
|
||
<router-link
|
||
to="/list/advanced"
|
||
class="app-link-block">
|
||
<credit-card-outlined
|
||
class="app-link-icon"
|
||
style="color: #ffd666;"/>
|
||
<div class="app-link-title">票据</div>
|
||
</router-link>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||
<a-card
|
||
:bordered="false"
|
||
hoverable
|
||
:body-style="{padding: 0}">
|
||
<router-link
|
||
to="/user/message"
|
||
class="app-link-block">
|
||
<mail-outlined
|
||
class="app-link-icon"
|
||
style="color: #5cdbd3;"/>
|
||
<div class="app-link-title">消息</div>
|
||
</router-link>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||
<a-card
|
||
:bordered="false"
|
||
hoverable
|
||
:body-style="{padding: 0}">
|
||
<router-link
|
||
to="/extension/more"
|
||
class="app-link-block">
|
||
<tags-outlined
|
||
class="app-link-icon"
|
||
style="color: #ff85c0;"/>
|
||
<div class="app-link-title">标签</div>
|
||
</router-link>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :lg="3" :md="6" :sm="12" :xs="12">
|
||
<a-card
|
||
:bordered="false"
|
||
hoverable
|
||
:body-style="{padding: 0}">
|
||
<router-link
|
||
to="/user/profile"
|
||
class="app-link-block">
|
||
<control-outlined
|
||
class="app-link-icon"
|
||
style="color: #ffc069;"/>
|
||
<div class="app-link-title">配置</div>
|
||
</router-link>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="16">
|
||
<!-- 最新动态 -->
|
||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||
<a-card
|
||
title="最新动态"
|
||
:bordered="false"
|
||
:body-style="{padding: 0}">
|
||
<div
|
||
style="height: 347px;padding: 28px 20px 0 20px;"
|
||
class="ele-scrollbar-hover">
|
||
<a-timeline>
|
||
<a-timeline-item
|
||
v-for="(item, index) in activities"
|
||
:key="index"
|
||
:color="item.color">
|
||
<em>{{ item.time }}</em>
|
||
<em>{{ item.title }}</em>
|
||
</a-timeline-item>
|
||
</a-timeline>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
<!-- 我的任务 -->
|
||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||
<a-card
|
||
title="我的任务"
|
||
:bordered="false"
|
||
:body-style="{padding: '10px 8px 10px 8px'}">
|
||
<div class="ant-table ant-table-middle">
|
||
<div class="ant-table-content">
|
||
<div class="ant-table-body" style="overflow-x: auto;">
|
||
<table style="min-width: max-content;">
|
||
<colgroup>
|
||
<col width="48"/>
|
||
<col width="60"/>
|
||
<col/>
|
||
<col width="80"/>
|
||
</colgroup>
|
||
<thead class="ant-table-thead">
|
||
<tr>
|
||
<th></th>
|
||
<th style="text-align: center;">优先级</th>
|
||
<th>任务名称</th>
|
||
<th style="text-align: center;">状态</th>
|
||
</tr>
|
||
</thead>
|
||
<draggable
|
||
tag="tbody"
|
||
item-key="id"
|
||
v-model="taskList"
|
||
:component-data="{class: 'ant-table-tbody'}"
|
||
handle=".anticon-menu"
|
||
:animation="300">
|
||
<template #item="{ element }">
|
||
<tr>
|
||
<td style="text-align: center;">
|
||
<menu-outlined style="cursor: move;"/>
|
||
</td>
|
||
<td style="text-align: center;padding: 8px;">
|
||
<ele-tag
|
||
:color="['red', 'orange', 'blue'][element.priority - 1]"
|
||
shape="circle">
|
||
{{ element.priority }}
|
||
</ele-tag>
|
||
</td>
|
||
<td>
|
||
<a>{{ element.taskName }}</a>
|
||
</td>
|
||
<td style="text-align: center;">
|
||
<span
|
||
:class="['ele-text-warning', 'ele-text-success', 'ele-text-info'][element.state]">
|
||
{{ ['未开始', '进行中', '已完成'][element.state] }}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
</template>
|
||
</draggable>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
<!-- 本月目标 -->
|
||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||
<a-card title="本月目标" :bordered="false">
|
||
<div class="workplace-goal-group">
|
||
<a-progress
|
||
type="dashboard"
|
||
:percent="80"
|
||
:show-info="false"
|
||
:width="181"
|
||
:stroke-width="4"/>
|
||
<div class="workplace-goal-content">
|
||
<ele-tag
|
||
color="blue"
|
||
size="large"
|
||
shape="circle">
|
||
<trophy-outlined/>
|
||
</ele-tag>
|
||
<div class="workplace-goal-num">285</div>
|
||
</div>
|
||
<div class="workplace-goal-text">恭喜，本月目标已达标！</div>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
<!-- 项目进度 -->
|
||
<a-col :lg="16" :md="24" :sm="24" :xs="24">
|
||
<a-card
|
||
title="项目进度"
|
||
:bordered="false"
|
||
:body-style="{padding: '12px 12px 1px 12px'}">
|
||
<a-table
|
||
:data-source="projectList"
|
||
row-key="id"
|
||
:pagination="false"
|
||
size="middle"
|
||
:scroll="{x: 'max-content'}">
|
||
<a-table-column
|
||
key="index"
|
||
align="center"
|
||
:width="48">
|
||
<template #default="{index}">{{ index + 1 }}</template>
|
||
</a-table-column>
|
||
<a-table-column
|
||
title="项目名称"
|
||
data-index="projectName">
|
||
<template #default="{text}">
|
||
<a>{{ text }}</a>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column
|
||
title="开始时间"
|
||
data-index="startDate"/>
|
||
<a-table-column
|
||
title="结束时间"
|
||
data-index="endDate"/>
|
||
<a-table-column
|
||
title="状态"
|
||
data-index="state"
|
||
align="center"
|
||
:width="90">
|
||
<template #default="{text}">
|
||
<span
|
||
:class="['ele-text-success', 'ele-text-danger', 'ele-text-warning', 'ele-text-info ele-text-delete'][text]">
|
||
{{ ['进行中', '已延期', '未开始', '已结束'][text] }}
|
||
</span>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column
|
||
title="进度"
|
||
data-index="progress"
|
||
align="center"
|
||
:width="180">
|
||
<template #default="{text}">
|
||
<a-progress
|
||
:percent="text"
|
||
size="small"/>
|
||
</template>
|
||
</a-table-column>
|
||
</a-table>
|
||
</a-card>
|
||
</a-col>
|
||
<!-- 小组成员 -->
|
||
<a-col :lg="8" :md="24" :sm="24" :xs="24">
|
||
<a-card
|
||
title="小组成员"
|
||
:bordered="false"
|
||
:body-style="{padding: 0}">
|
||
<div
|
||
v-for="(item,index) in userList"
|
||
:key="index"
|
||
class="ele-cell user-list-item">
|
||
<a-avatar
|
||
:size="46"
|
||
:src="item.avatar"/>
|
||
<div class="ele-cell-content">
|
||
<div class="ele-cell-title">{{ item.name }}</div>
|
||
<div class="ele-cell-desc">{{ item.desc }}</div>
|
||
</div>
|
||
<a-tag
|
||
:color="['green', 'red'][item.state]">
|
||
{{ ['在线', '离线'][item.state] }}
|
||
</a-tag>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
CloudOutlined,
|
||
AppstoreFilled,
|
||
CheckSquareOutlined,
|
||
BellFilled,
|
||
UserOutlined,
|
||
ShoppingCartOutlined,
|
||
FundProjectionScreenOutlined,
|
||
FileSearchOutlined,
|
||
CreditCardOutlined,
|
||
MailOutlined,
|
||
TagsOutlined,
|
||
ControlOutlined,
|
||
MenuOutlined,
|
||
TrophyOutlined
|
||
} from '@ant-design/icons-vue';
|
||
import draggable from 'vuedraggable';
|
||
|
||
export default {
|
||
name: 'DashboardWorkplace',
|
||
components: {
|
||
CloudOutlined,
|
||
AppstoreFilled,
|
||
CheckSquareOutlined,
|
||
BellFilled,
|
||
UserOutlined,
|
||
ShoppingCartOutlined,
|
||
FundProjectionScreenOutlined,
|
||
FileSearchOutlined,
|
||
CreditCardOutlined,
|
||
MailOutlined,
|
||
TagsOutlined,
|
||
ControlOutlined,
|
||
MenuOutlined,
|
||
TrophyOutlined,
|
||
draggable
|
||
},
|
||
data() {
|
||
return {
|
||
// 最新动态数据
|
||
activities: [
|
||
{
|
||
title: 'SunSmile 解决了bug 登录提示操作失败',
|
||
time: '20:30',
|
||
color: 'gray'
|
||
},
|
||
{
|
||
title: 'Jasmine 解决了bug 按钮颜色与设计不符',
|
||
time: '19:30',
|
||
color: 'gray'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目一的bug',
|
||
time: '18:30'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目二的bug',
|
||
time: '17:30'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目三的bug',
|
||
time: '16:30'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目四的bug',
|
||
time: '15:30',
|
||
color: 'gray'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目五的bug',
|
||
time: '14:30',
|
||
color: 'gray'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目六的bug',
|
||
time: '12:30',
|
||
color: 'gray'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目七的bug',
|
||
time: '11:30'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目八的bug',
|
||
time: '10:30',
|
||
color: 'gray'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目九的bug',
|
||
time: '09:30',
|
||
color: 'green'
|
||
},
|
||
{
|
||
title: '项目经理 指派了任务 解决项目十的bug',
|
||
time: '08:30',
|
||
color: 'red'
|
||
}
|
||
],
|
||
// 我的任务数据
|
||
taskList: [
|
||
{
|
||
id: 1,
|
||
priority: 1,
|
||
taskName: '解决项目一的bug',
|
||
state: 0
|
||
},
|
||
{
|
||
id: 2,
|
||
priority: 2,
|
||
taskName: '解决项目二的bug',
|
||
state: 0
|
||
},
|
||
{
|
||
id: 3,
|
||
priority: 2,
|
||
taskName: '解决项目三的bug',
|
||
state: 1
|
||
},
|
||
{
|
||
id: 4,
|
||
priority: 3,
|
||
taskName: '解决项目四的bug',
|
||
state: 1
|
||
},
|
||
{
|
||
id: 5,
|
||
priority: 3,
|
||
taskName: '解决项目五的bug',
|
||
state: 2
|
||
},
|
||
{
|
||
id: 6,
|
||
priority: 3,
|
||
taskName: '解决项目六的bug',
|
||
state: 2
|
||
}
|
||
],
|
||
// 项目进度数据
|
||
projectList: [
|
||
{
|
||
id: 1,
|
||
projectName: '项目0000001',
|
||
state: 0,
|
||
startDate: '2020-03-01',
|
||
endDate: '2020-06-01',
|
||
progress: 30
|
||
},
|
||
{
|
||
id: 2,
|
||
projectName: '项目0000002',
|
||
state: 0,
|
||
startDate: '2020-03-01',
|
||
endDate: '2020-08-01',
|
||
progress: 10
|
||
},
|
||
{
|
||
id: 3,
|
||
projectName: '项目0000003',
|
||
state: 1,
|
||
startDate: '2020-01-01',
|
||
endDate: '2020-05-01',
|
||
progress: 60
|
||
},
|
||
{
|
||
id: 4,
|
||
projectName: '项目0000004',
|
||
state: 1,
|
||
startDate: '2020-06-01',
|
||
endDate: '2020-10-01',
|
||
progress: 0
|
||
},
|
||
{
|
||
id: 5,
|
||
projectName: '项目0000005',
|
||
state: 2,
|
||
startDate: '2020-01-01',
|
||
endDate: '2020-03-01',
|
||
progress: 100
|
||
},
|
||
{
|
||
id: 6,
|
||
projectName: '项目0000006',
|
||
state: 3,
|
||
startDate: '2020-01-01',
|
||
endDate: '2020-03-01',
|
||
progress: 100
|
||
},
|
||
{
|
||
id: 7,
|
||
projectName: '项目0000007',
|
||
state: 3,
|
||
startDate: '2020-01-01',
|
||
endDate: '2020-03-01',
|
||
progress: 100
|
||
}
|
||
],
|
||
// 小组成员数据
|
||
userList: [
|
||
{
|
||
name: 'SunSmile',
|
||
desc: 'UI设计师、交互专家',
|
||
state: 0,
|
||
avatar: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg'
|
||
},
|
||
{
|
||
name: '你的名字很好听',
|
||
desc: '前端工程师',
|
||
state: 0,
|
||
avatar: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg'
|
||
},
|
||
{
|
||
name: '全村人的希望',
|
||
desc: '前端工程师',
|
||
state: 0,
|
||
avatar: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg'
|
||
},
|
||
{
|
||
name: 'Jasmine',
|
||
desc: '产品经理、项目经理',
|
||
state: 1,
|
||
avatar: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg'
|
||
},
|
||
{
|
||
name: '酷酷的大叔',
|
||
desc: '组长、后端工程师',
|
||
state: 1,
|
||
avatar: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg'
|
||
}
|
||
]
|
||
};
|
||
},
|
||
computed: {
|
||
// 当前登录用户信息
|
||
loginUser() {
|
||
return this.$store.state.user.user;
|
||
}
|
||
},
|
||
mounted() {
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/** 用户卡片 */
|
||
.workplace-user-card .ele-cell-content {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.workplace-user-card h4 {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.workplace-count-group {
|
||
white-space: nowrap;
|
||
text-align: right;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.workplace-count-item {
|
||
display: inline-block;
|
||
margin: 0 4px 0 24px;
|
||
}
|
||
|
||
.workplace-count-name {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
@media screen and (max-width: 992px) {
|
||
.workplace-count-item {
|
||
margin: 0 2px 0 12px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.workplace-user-card {
|
||
display: block;
|
||
}
|
||
|
||
.workplace-count-group {
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
/** 快捷方式 */
|
||
.app-link-block {
|
||
padding: 12px;
|
||
text-align: center;
|
||
display: block;
|
||
color: inherit;
|
||
}
|
||
|
||
.app-link-block .app-link-icon {
|
||
color: #69c0ff;
|
||
font-size: 30px;
|
||
margin: 6px 0 10px 0;
|
||
}
|
||
|
||
/** 时间轴 */
|
||
.ele-scrollbar-hover :deep(.ant-timeline-item-last > .ant-timeline-item-content) {
|
||
min-height: auto;
|
||
}
|
||
|
||
/** 本月目标 */
|
||
.workplace-goal-group {
|
||
padding: 48px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.workplace-goal-group .workplace-goal-content {
|
||
position: absolute;
|
||
top: 90px;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.workplace-goal-group .workplace-goal-num {
|
||
font-size: 40px;
|
||
}
|
||
|
||
/** 小组成员 */
|
||
.user-list-item {
|
||
padding: 16px 18px;
|
||
}
|
||
|
||
.user-list-item + .user-list-item {
|
||
border-top: 1px solid hsla(0, 0%, 60%, .15);
|
||
}
|
||
|
||
/** 表格拖拽 */
|
||
.ant-table-tbody tr.sortable-chosen {
|
||
background: hsla(0, 0%, 60%, .1) !important;
|
||
}
|
||
|
||
.ant-table-tbody tr.sortable-chosen td {
|
||
background: none !important;
|
||
}
|
||
</style>
|