|
|
@@ -3,7 +3,7 @@
|
|
|
<template v-slot:content>
|
|
|
<div class="page-header-content">
|
|
|
<div class="avatar">
|
|
|
- <a-avatar size="large" :src="currentUser.avatar"/>
|
|
|
+ <a-avatar size="large" :src="currentUser.avatar" />
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<div class="content-title">
|
|
|
@@ -36,14 +36,15 @@
|
|
|
style="margin-bottom: 24px;"
|
|
|
:bordered="false"
|
|
|
title="进行中的项目"
|
|
|
- :body-style="{ padding: 0 }">
|
|
|
+ :body-style="{ padding: 0 }"
|
|
|
+ >
|
|
|
<a slot="extra">全部项目</a>
|
|
|
<div>
|
|
|
<a-card-grid class="project-card-grid" :key="i" v-for="(item, i) in projects">
|
|
|
<a-card :bordered="false" :body-style="{ padding: 0 }">
|
|
|
<a-card-meta>
|
|
|
<div slot="title" class="card-title">
|
|
|
- <a-avatar size="small" :src="item.cover"/>
|
|
|
+ <a-avatar size="small" :src="item.cover" />
|
|
|
<a>{{ item.title }}</a>
|
|
|
</div>
|
|
|
<div slot="description" class="card-description">
|
|
|
@@ -63,11 +64,12 @@
|
|
|
<a-list>
|
|
|
<a-list-item :key="index" v-for="(item, index) in activities">
|
|
|
<a-list-item-meta>
|
|
|
- <a-avatar slot="avatar" :src="item.user.avatar"/>
|
|
|
+ <a-avatar slot="avatar" size="small" :src="item.user.avatar" />
|
|
|
<div slot="title">
|
|
|
- <span>{{ item.user.nickname }}</span>
|
|
|
- 在 <a href="#">{{ item.project.name }}</a>
|
|
|
- <span>{{ item.project.action }}</span>
|
|
|
+ <span>{{ item.user.nickname }}</span
|
|
|
+ > 在 <a href="#">{{ item.project.name }}</a
|
|
|
+ > <span>{{ item.project.action }}</span
|
|
|
+ >
|
|
|
<a href="#">{{ item.project.event }}</a>
|
|
|
</div>
|
|
|
<div slot="description">{{ item.time }}</div>
|
|
|
@@ -83,7 +85,12 @@
|
|
|
:md="24"
|
|
|
:sm="24"
|
|
|
:xs="24">
|
|
|
- <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
|
|
+ <a-card
|
|
|
+ title="快速开始 / 便捷导航"
|
|
|
+ style="margin-bottom: 24px"
|
|
|
+ :bordered="false"
|
|
|
+ :body-style="{ padding: 0 }"
|
|
|
+ >
|
|
|
<div class="item-group">
|
|
|
<a>操作一</a>
|
|
|
<a>操作二</a>
|
|
|
@@ -99,10 +106,11 @@
|
|
|
style="margin-bottom: 24px"
|
|
|
:loading="radarLoading"
|
|
|
:bordered="false"
|
|
|
- :body-style="{ padding: 0 }">
|
|
|
+ :body-style="{ padding: 0 }"
|
|
|
+ >
|
|
|
<div style="min-height: 400px;">
|
|
|
<!-- :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts" -->
|
|
|
- <radar :data="radarData"/>
|
|
|
+ <radar :data="radarData" />
|
|
|
</div>
|
|
|
</a-card>
|
|
|
<a-card :loading="loading" title="团队" :bordered="false">
|
|
|
@@ -110,7 +118,7 @@
|
|
|
<a-row>
|
|
|
<a-col :span="12" v-for="(item, index) in teams" :key="index">
|
|
|
<a>
|
|
|
- <a-avatar size="small" :src="item.avatar"/>
|
|
|
+ <a-avatar size="small" :src="item.avatar" />
|
|
|
<span class="member">{{ item.name }}</span>
|
|
|
</a>
|
|
|
</a-col>
|
|
|
@@ -174,11 +182,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- scale: [{
|
|
|
- dataKey: 'score',
|
|
|
- min: 0,
|
|
|
- max: 80
|
|
|
- }],
|
|
|
+ scale: [
|
|
|
+ {
|
|
|
+ dataKey: 'score',
|
|
|
+ min: 0,
|
|
|
+ max: 80
|
|
|
+ }
|
|
|
+ ],
|
|
|
axisData: [
|
|
|
{ item: '引用', a: 70, b: 30, c: 40 },
|
|
|
{ item: '口碑', a: 60, b: 70, c: 40 },
|
|
|
@@ -192,8 +202,8 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState({
|
|
|
- nickname: (state) => state.user.nickname,
|
|
|
- welcome: (state) => state.user.welcome
|
|
|
+ nickname: state => state.user.nickname,
|
|
|
+ welcome: state => state.user.welcome
|
|
|
}),
|
|
|
currentUser () {
|
|
|
return {
|
|
|
@@ -225,165 +235,157 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
getProjects () {
|
|
|
- this.$http.get('/list/search/projects')
|
|
|
- .then(res => {
|
|
|
- this.projects = res.result && res.result.data
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
+ this.$http.get('/list/search/projects').then(res => {
|
|
|
+ this.projects = res.result && res.result.data
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
},
|
|
|
getActivity () {
|
|
|
- this.$http.get('/workplace/activity')
|
|
|
- .then(res => {
|
|
|
- this.activities = res.result
|
|
|
- })
|
|
|
+ this.$http.get('/workplace/activity').then(res => {
|
|
|
+ this.activities = res.result
|
|
|
+ })
|
|
|
},
|
|
|
getTeams () {
|
|
|
- this.$http.get('/workplace/teams')
|
|
|
- .then(res => {
|
|
|
- this.teams = res.result
|
|
|
- })
|
|
|
+ this.$http.get('/workplace/teams').then(res => {
|
|
|
+ this.teams = res.result
|
|
|
+ })
|
|
|
},
|
|
|
initRadar () {
|
|
|
this.radarLoading = true
|
|
|
|
|
|
- this.$http.get('/workplace/radar')
|
|
|
- .then(res => {
|
|
|
- const dv = new DataSet.View().source(res.result)
|
|
|
- dv.transform({
|
|
|
- type: 'fold',
|
|
|
- fields: ['个人', '团队', '部门'],
|
|
|
- key: 'user',
|
|
|
- value: 'score'
|
|
|
- })
|
|
|
-
|
|
|
- this.radarData = dv.rows
|
|
|
- this.radarLoading = false
|
|
|
+ this.$http.get('/workplace/radar').then(res => {
|
|
|
+ const dv = new DataSet.View().source(res.result)
|
|
|
+ dv.transform({
|
|
|
+ type: 'fold',
|
|
|
+ fields: ['个人', '团队', '部门'],
|
|
|
+ key: 'user',
|
|
|
+ value: 'score'
|
|
|
})
|
|
|
+
|
|
|
+ this.radarData = dv.rows
|
|
|
+ this.radarLoading = false
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @import "./Workplace.less";
|
|
|
-
|
|
|
- .project-list {
|
|
|
+@import './Workplace.less';
|
|
|
|
|
|
- .card-title {
|
|
|
- font-size: 0;
|
|
|
+.project-list {
|
|
|
+ .card-title {
|
|
|
+ font-size: 0;
|
|
|
|
|
|
- a {
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- margin-left: 12px;
|
|
|
- line-height: 24px;
|
|
|
- height: 24px;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- font-size: 14px;
|
|
|
+ a {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ margin-left: 12px;
|
|
|
+ line-height: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- &:hover {
|
|
|
- color: #1890ff;
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .card-description {
|
|
|
- color: rgba(0, 0, 0, 0.45);
|
|
|
- height: 44px;
|
|
|
- line-height: 22px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .project-item {
|
|
|
- display: flex;
|
|
|
- margin-top: 8px;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 12px;
|
|
|
- height: 20px;
|
|
|
- line-height: 20px;
|
|
|
+ .card-description {
|
|
|
+ color: rgba(0, 0, 0, 0.45);
|
|
|
+ height: 44px;
|
|
|
+ line-height: 22px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
- a {
|
|
|
- color: rgba(0, 0, 0, 0.45);
|
|
|
- display: inline-block;
|
|
|
- flex: 1 1 0;
|
|
|
+ .project-item {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 12px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
|
|
|
- &:hover {
|
|
|
- color: #1890ff;
|
|
|
- }
|
|
|
- }
|
|
|
+ a {
|
|
|
+ color: rgba(0, 0, 0, 0.45);
|
|
|
+ display: inline-block;
|
|
|
+ flex: 1 1 0;
|
|
|
|
|
|
- .datetime {
|
|
|
- color: rgba(0, 0, 0, 0.25);
|
|
|
- flex: 0 0 auto;
|
|
|
- float: right;
|
|
|
+ &:hover {
|
|
|
+ color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .ant-card-meta-description {
|
|
|
- color: rgba(0, 0, 0, 0.45);
|
|
|
- height: 44px;
|
|
|
- line-height: 22px;
|
|
|
- overflow: hidden;
|
|
|
+ .datetime {
|
|
|
+ color: rgba(0, 0, 0, 0.25);
|
|
|
+ flex: 0 0 auto;
|
|
|
+ float: right;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .item-group {
|
|
|
- padding: 20px 0 8px 24px;
|
|
|
- font-size: 0;
|
|
|
-
|
|
|
- a {
|
|
|
- color: rgba(0, 0, 0, 0.65);
|
|
|
- display: inline-block;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 13px;
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
+ .ant-card-meta-description {
|
|
|
+ color: rgba(0, 0, 0, 0.45);
|
|
|
+ height: 44px;
|
|
|
+ line-height: 22px;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .members {
|
|
|
- a {
|
|
|
- display: block;
|
|
|
- margin: 12px 0;
|
|
|
- line-height: 24px;
|
|
|
- height: 24px;
|
|
|
-
|
|
|
- .member {
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(0, 0, 0, .65);
|
|
|
- line-height: 24px;
|
|
|
- max-width: 100px;
|
|
|
- vertical-align: top;
|
|
|
- margin-left: 12px;
|
|
|
- transition: all 0.3s;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
+.item-group {
|
|
|
+ padding: 20px 0 8px 24px;
|
|
|
+ font-size: 0;
|
|
|
|
|
|
- &:hover {
|
|
|
- span {
|
|
|
- color: #1890ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ a {
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 13px;
|
|
|
+ width: 25%;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .mobile {
|
|
|
+.members {
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ margin: 12px 0;
|
|
|
+ line-height: 24px;
|
|
|
+ height: 24px;
|
|
|
|
|
|
- .project-list {
|
|
|
+ .member {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
+ line-height: 24px;
|
|
|
+ max-width: 100px;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-left: 12px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
|
|
|
- .project-card-grid {
|
|
|
- width: 100%;
|
|
|
+ &:hover {
|
|
|
+ span {
|
|
|
+ color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .more-info {
|
|
|
- border: 0;
|
|
|
- padding-top: 16px;
|
|
|
- margin: 16px 0 16px;
|
|
|
+.mobile {
|
|
|
+ .project-list {
|
|
|
+ .project-card-grid {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .headerContent .title .welcome-text {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ .more-info {
|
|
|
+ border: 0;
|
|
|
+ padding-top: 16px;
|
|
|
+ margin: 16px 0 16px;
|
|
|
}
|
|
|
|
|
|
+ .headerContent .title .welcome-text {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
Sendya
