Blame view

ant-design-vue-jeecg/src/views/dashboard/Workplace.vue 8.98 KB
肖超群 authored
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">
肖超群 authored
16
          <head-info title="项目访问" content="2,223" :center="false"/>
肖超群 authored
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>
肖超群 authored
57
                  <a-avatar slot="avatar" :src="item.user.avatar"/>
肖超群 authored
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>&nbsp;
                    在&nbsp;<a href="#">{{ item.project.name }}</a>&nbsp;
                    <span>{{ item.project.action }}</span>&nbsp;
                    <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>
肖超群 authored
88
89
          <a-card title="XX 指数" style="margin-bottom: 24px" :loading="radarLoading" :bordered="false"
                  :body-style="{ padding: 0 }">
肖超群 authored
90
91
            <div style="min-height: 400px;">
              <!-- :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts"  -->
肖超群 authored
92
              <radar :data="radarData"/>
肖超群 authored
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>
肖超群 authored
100
                    <a-avatar size="small" :src="item.avatar"/>
肖超群 authored
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>
肖超群 authored
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
肖超群 authored
163
          }
肖超群 authored
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
        })
肖超群 authored
214
    },
肖超群 authored
215
216
217
218
219
    getActivity() {
      this.$http.get('/mock/api/workplace/activity')
        .then(res => {
          this.activities = res.result
        })
肖超群 authored
220
    },
肖超群 authored
221
222
223
224
225
    getTeams() {
      this.$http.get('/mock/api/workplace/teams')
        .then(res => {
          this.teams = res.result
        })
肖超群 authored
226
    },
肖超群 authored
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'
肖超群 authored
239
          })
肖超群 authored
240
241
242
243

          this.radarData = dv.rows
          this.radarLoading = false
        })
肖超群 authored
244
245
    }
  }
肖超群 authored
246
}
肖超群 authored
247
248
249
</script>

<style lang="less" scoped>
肖超群 authored
250
.project-list {
肖超群 authored
251
肖超群 authored
252
253
  .card-title {
    font-size: 0;
肖超群 authored
254
肖超群 authored
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;
肖超群 authored
263
肖超群 authored
264
265
      &:hover {
        color: #1890ff;
肖超群 authored
266
267
      }
    }
肖超群 authored
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 {
肖超群 authored
286
      color: rgba(0, 0, 0, 0.45);
肖超群 authored
287
288
289
290
291
      display: inline-block;
      flex: 1 1 0;

      &:hover {
        color: #1890ff;
肖超群 authored
292
293
      }
    }
肖超群 authored
294
295
296
297
298

    .datetime {
      color: rgba(0, 0, 0, 0.25);
      flex: 0 0 auto;
      float: right;
肖超群 authored
299
300
301
    }
  }
肖超群 authored
302
303
304
305
306
  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
肖超群 authored
307
  }
肖超群 authored
308
}
肖超群 authored
309
肖超群 authored
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);
肖超群 authored
333
      line-height: 24px;
肖超群 authored
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;
肖超群 authored
344
345
346
      }
    }
  }
肖超群 authored
347
}
肖超群 authored
348
肖超群 authored
349
.mobile {
肖超群 authored
350
肖超群 authored
351
  .project-list {
肖超群 authored
352
肖超群 authored
353
354
    .project-card-grid {
      width: 100%;
肖超群 authored
355
    }
肖超群 authored
356
  }
肖超群 authored
357
肖超群 authored
358
359
360
361
362
  .more-info {
    border: 0;
    padding-top: 16px;
    margin: 16px 0 16px;
  }
肖超群 authored
363
肖超群 authored
364
365
  .headerContent .title .welcome-text {
    display: none;
肖超群 authored
366
  }
肖超群 authored
367
}
肖超群 authored
368
369

</style>