|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<template>
<page-layout :avatar="avatar">
<div slot="headerContent">
<div class="title">{{ timeFix }},{{ nickname() }}<span class="welcome-text">,{{ welcome() }}</span></div>
<div>前端工程师 | 蚂蚁金服 - 某某某事业群 - VUE平台</div>
</div>
<div slot="extra">
<a-row class="more-info">
<a-col :span="8">
<head-info title="项目数" content="56" :center="false" :bordered="false"/>
</a-col>
<a-col :span="8">
<head-info title="团队排名" content="8/24" :center="false" :bordered="false"/>
</a-col>
<a-col :span="8">
|
|
16
|
<head-info title="项目访问" content="2,223" :center="false"/>
|
|
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
</a-col>
</a-row>
</div>
<div>
<a-row :gutter="24">
<a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
<a-card
class="project-list"
:loading="loading"
style="margin-bottom: 24px;"
:bordered="false"
title="进行中的项目"
: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>{{ item.title }}</a>
</div>
<div slot="description" class="card-description">
{{ item.description }}
</div>
</a-card-meta>
<div class="project-item">
<a href="/#/">科学搬砖组</a>
<span class="datetime">9小时前</span>
</div>
</a-card>
</a-card-grid>
</div>
</a-card>
<a-card :loading="loading" title="动态" :bordered="false">
<a-list>
<a-list-item :key="index" v-for="(item, index) in activities">
<a-list-item-meta>
|
|
57
|
<a-avatar slot="avatar" :src="item.user.avatar"/>
|
|
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<div slot="title">
<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>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-card>
</a-col>
<a-col
style="padding: 0 12px"
:xl="8"
:lg="24"
:md="24"
:sm="24"
:xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a>操作一</a>
<a>操作二</a>
<a>操作三</a>
<a>操作四</a>
<a>操作五</a>
<a>操作六</a>
<a-button size="small" type="primary" ghost icon="plus">添加</a-button>
</div>
</a-card>
|
|
88
89
|
<a-card title="XX 指数" style="margin-bottom: 24px" :loading="radarLoading" :bordered="false"
:body-style="{ padding: 0 }">
|
|
90
91
|
<div style="min-height: 400px;">
<!-- :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts" -->
|
|
92
|
<radar :data="radarData"/>
|
|
93
94
95
96
97
98
99
|
</div>
</a-card>
<a-card :loading="loading" title="团队" :bordered="false">
<div class="members">
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
|
|
100
|
<a-avatar size="small" :src="item.avatar"/>
|
|
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<span class="member">{{ item.name }}</span>
</a>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</div>
</page-layout>
</template>
<script>
|
|
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
import {timeFix} from "@/utils/util"
import {mapGetters} from "vuex"
import PageLayout from '@/components/page/PageLayout'
import HeadInfo from '@/components/tools/HeadInfo'
import Radar from '@/components/chart/Radar'
import {getRoleList, getServiceList, getFileAccessHttpUrl} from "@/api/manage"
const DataSet = require('@antv/data-set')
export default {
name: "Workplace",
components: {
PageLayout,
HeadInfo,
Radar
},
data() {
return {
timeFix: timeFix(),
avatar: '',
user: {},
projects: [],
loading: true,
radarLoading: true,
activities: [],
teams: [],
// data
axis1Opts: {
dataKey: 'item',
line: null,
tickLine: null,
grid: {
lineStyle: {
lineDash: null
},
hideFirstLine: false
}
},
axis2Opts: {
dataKey: 'score',
line: null,
tickLine: null,
grid: {
type: 'polygon',
lineStyle: {
lineDash: null
|
|
163
|
}
|
|
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
}
},
scale: [{
dataKey: 'score',
min: 0,
max: 80
}],
axisData: [
{item: '引用', a: 70, b: 30, c: 40},
{item: '口碑', a: 60, b: 70, c: 40},
{item: '产量', a: 50, b: 60, c: 40},
{item: '贡献', a: 40, b: 50, c: 40},
{item: '热度', a: 60, b: 70, c: 40},
{item: '引用', a: 70, b: 50, c: 40}
],
radarData: []
}
},
computed: {
userInfo() {
return this.$store.getters.userInfo
}
},
created() {
this.user = this.userInfo
this.avatar = getFileAccessHttpUrl(this.userInfo.avatar)
console.log('this.avatar :' + this.avatar)
getRoleList().then(res => {
console.log('workplace -> call getRoleList()', res)
})
getServiceList().then(res => {
console.log('workplace -> call getServiceList()', res)
})
},
mounted() {
this.getProjects()
this.getActivity()
this.getTeams()
this.initRadar()
},
methods: {
...mapGetters(["nickname", "welcome"]),
getProjects() {
this.$http.get('/mock/api/list/search/projects')
.then(res => {
this.projects = res.result && res.result.data
this.loading = false
})
|
|
214
|
},
|
|
215
216
217
218
219
|
getActivity() {
this.$http.get('/mock/api/workplace/activity')
.then(res => {
this.activities = res.result
})
|
|
220
|
},
|
|
221
222
223
224
225
|
getTeams() {
this.$http.get('/mock/api/workplace/teams')
.then(res => {
this.teams = res.result
})
|
|
226
|
},
|
|
227
228
229
230
231
232
233
234
235
236
237
238
|
initRadar() {
this.radarLoading = true
this.$http.get('/mock/api/workplace/radar')
.then(res => {
const dv = new DataSet.View().source(res.result)
dv.transform({
type: 'fold',
fields: ['个人', '团队', '部门'],
key: 'user',
value: 'score'
|
|
239
|
})
|
|
240
241
242
243
|
this.radarData = dv.rows
this.radarLoading = false
})
|
|
244
245
|
}
}
|
|
246
|
}
|
|
247
248
249
|
</script>
<style lang="less" scoped>
|
|
250
|
.project-list {
|
|
251
|
|
|
252
253
|
.card-title {
font-size: 0;
|
|
254
|
|
|
255
256
257
258
259
260
261
262
|
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;
|
|
263
|
|
|
264
265
|
&:hover {
color: #1890ff;
|
|
266
267
|
}
}
|
|
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
|
}
.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;
a {
|
|
286
|
color: rgba(0, 0, 0, 0.45);
|
|
287
288
289
290
291
|
display: inline-block;
flex: 1 1 0;
&:hover {
color: #1890ff;
|
|
292
293
|
}
}
|
|
294
295
296
297
298
|
.datetime {
color: rgba(0, 0, 0, 0.25);
flex: 0 0 auto;
float: right;
|
|
299
300
301
|
}
}
|
|
302
303
304
305
306
|
.ant-card-meta-description {
color: rgba(0, 0, 0, 0.45);
height: 44px;
line-height: 22px;
overflow: hidden;
|
|
307
|
}
|
|
308
|
}
|
|
309
|
|
|
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
|
.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%;
}
}
.members {
a {
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
.member {
font-size: 14px;
color: rgba(0, 0, 0, .65);
|
|
333
|
line-height: 24px;
|
|
334
335
336
337
338
339
340
341
342
343
|
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all 0.3s;
display: inline-block;
}
&:hover {
span {
color: #1890ff;
|
|
344
345
346
|
}
}
}
|
|
347
|
}
|
|
348
|
|
|
349
|
.mobile {
|
|
350
|
|
|
351
|
.project-list {
|
|
352
|
|
|
353
354
|
.project-card-grid {
width: 100%;
|
|
355
|
}
|
|
356
|
}
|
|
357
|
|
|
358
359
360
361
362
|
.more-info {
border: 0;
padding-top: 16px;
margin: 16px 0 16px;
}
|
|
363
|
|
|
364
365
|
.headerContent .title .welcome-text {
display: none;
|
|
366
|
}
|
|
367
|
}
|
|
368
369
|
</style>
|