From 1ef38f7b420900816f27bdea509017cab11a96d2 Mon Sep 17 00:00:00 2001
From: qushaowei <qushaowei@163.com>
Date: 星期日, 29 十月 2023 23:34:48 +0800
Subject: [PATCH] 主页面

---
 src/views/dashboard/Workplace.vue |  539 +++++++++++++++++++++++++++++++++--------------------------
 1 files changed, 305 insertions(+), 234 deletions(-)

diff --git a/src/views/dashboard/Workplace.vue b/src/views/dashboard/Workplace.vue
index 57d0a06..243b9f9 100644
--- a/src/views/dashboard/Workplace.vue
+++ b/src/views/dashboard/Workplace.vue
@@ -7,37 +7,74 @@
     <div slot="extra">
       <a-row class="more-info">
         <a-col :span="8">
-          <head-info title="椤圭洰鏁�" content="56" :center="false" :bordered="false"/>
+          <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"/>
+          <head-info
+            title="鍥㈤槦鎺掑悕"
+            content="8/24"
+            :center="false"
+            :bordered="false"
+          />
         </a-col>
         <a-col :span="8">
-          <head-info title="椤圭洰璁块棶" content="2,223" :center="false" />
+          <head-info
+            title="椤圭洰璁块棶"
+            content="2,223"
+            :center="false"
+          />
         </a-col>
       </a-row>
     </div>
 
     <div>
       <a-row :gutter="24">
-        <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="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 }">
+            :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-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"/>
+                    <div
+                      slot="title"
+                      class="card-title"
+                    >
+                      <a-avatar
+                        size="small"
+                        :src="item.cover"
+                      />
                       <a>{{ item.title }}</a>
                     </div>
-                    <div slot="description" class="card-description">
+                    <div
+                      slot="description"
+                      class="card-description"
+                    >
                       {{ item.description }}
                     </div>
                   </a-card-meta>
@@ -50,11 +87,21 @@
             </div>
           </a-card>
 
-          <a-card :loading="loading" title="鍔ㄦ��" :bordered="false">
+          <a-card
+            :loading="loading"
+            title="鍔ㄦ��"
+            :bordered="false"
+          >
             <a-list>
-              <a-list-item :key="index" v-for="(item, index) in activities">
+              <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"
+                    :src="item.user.avatar"
+                  />
                   <div slot="title">
                     <span>{{ item.user.nickname }}</span>&nbsp;
                     鍦�&nbsp;<a href="#">{{ item.project.name }}</a>&nbsp;
@@ -73,8 +120,14 @@
           :lg="24"
           :md="24"
           :sm="24"
-          :xs="24">
-          <a-card title="蹇�熷紑濮� / 渚挎嵎瀵艰埅" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
+          :xs="24"
+        >
+          <a-card
+            title="蹇�熷紑濮� / 渚挎嵎瀵艰埅"
+            style="margin-bottom: 24px"
+            :bordered="false"
+            :body-style="{padding: 0}"
+          >
             <div class="item-group">
               <a>鎿嶄綔涓�</a>
               <a>鎿嶄綔浜�</a>
@@ -82,21 +135,43 @@
               <a>鎿嶄綔鍥�</a>
               <a>鎿嶄綔浜�</a>
               <a>鎿嶄綔鍏�</a>
-              <a-button size="small" type="primary" ghost icon="plus">娣诲姞</a-button>
+              <a-button
+                size="small"
+                type="primary"
+                ghost
+                icon="plus"
+              >娣诲姞</a-button>
             </div>
           </a-card>
-          <a-card title="XX 鎸囨暟" style="margin-bottom: 24px" :loading="radarLoading" :bordered="false" :body-style="{ padding: 0 }">
+          <a-card
+            title="XX 鎸囨暟"
+            style="margin-bottom: 24px"
+            :loading="radarLoading"
+            :bordered="false"
+            :body-style="{ padding: 0 }"
+          >
             <div style="min-height: 400px;">
               <!-- :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts"  -->
               <radar :data="radarData" />
             </div>
           </a-card>
-          <a-card :loading="loading" title="鍥㈤槦" :bordered="false">
+          <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-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>
@@ -110,251 +185,247 @@
 </template>
 
 <script>
-  import { timeFix } from "@/utils/util"
-  import {mapGetters} from "vuex"
+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"
+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')
+const DataSet = require('@antv/data-set')
 
-  export default {
-    name: "Workplace",
-    components: {
-      PageLayout,
-      HeadInfo,
-      Radar
-    },
-    data() {
-      return {
-        timeFix: timeFix(),
-        avatar: '',
-        user: {},
+export default {
+  name: "Workplace",
+  components: {
+    PageLayout,
+    HeadInfo,
+    Radar
+  },
+  data() {
+    return {
+      timeFix: timeFix(),
+      avatar: '',
+      user: {},
 
-        projects: [],
-        loading: true,
-        radarLoading: true,
-        activities: [],
-        teams: [],
+      projects: [],
+      loading: true,
+      radarLoading: true,
+      activities: [],
+      teams: [],
 
-        // data
-        axis1Opts: {
-          dataKey: 'item',
-          line: null,
-          tickLine: null,
-          grid: {
-            lineStyle: {
-              lineDash: null
-            },
-            hideFirstLine: false
+      // 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
           }
-        },
-        axis2Opts: {
-          dataKey: 'score',
-          line: null,
-          tickLine: null,
-          grid: {
-            type: 'polygon',
-            lineStyle: {
-              lineDash: null
-            }
-          }
-        },
-        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
-          })
+        }
       },
-      getActivity() {
-        this.$http.get('/mock/api/workplace/activity')
-          .then(res => {
-            this.activities = res.result
-          })
-      },
-      getTeams() {
-        this.$http.get('/mock/api/workplace/teams')
-          .then(res => {
-            this.teams = res.result
-          })
-      },
-      initRadar() {
-        this.radarLoading = true
+      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)
 
-        this.$http.get('/mock/api/workplace/radar')
-          .then(res => {
+    getRoleList().then(res => {
+      console.log('workplace -> call getRoleList()', res)
+    })
 
-            const dv = new DataSet.View().source(res.result)
-            dv.transform({
-              type: 'fold',
-              fields: ['涓汉', '鍥㈤槦', '閮ㄩ棬'],
-              key: 'user',
-              value: 'score'
-            })
+    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
+        })
+    },
+    getActivity() {
+      this.$http.get('/mock/api/workplace/activity')
+        .then(res => {
+          this.activities = res.result
+        })
+    },
+    getTeams() {
+      this.$http.get('/mock/api/workplace/teams')
+        .then(res => {
+          this.teams = res.result
+        })
+    },
+    initRadar() {
+      this.radarLoading = true
 
-            this.radarData = dv.rows
-            this.radarLoading = false
+      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'
           })
-      }
+
+          this.radarData = dv.rows
+          this.radarLoading = false
+        })
     }
   }
+}
 </script>
 
 <style lang="less" scoped>
-  .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;
-
-        &: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;
-      a {
-        color: rgba(0, 0, 0, 0.45);
-        display: inline-block;
-        flex: 1 1 0;
-
-        &:hover {
-          color: #1890ff;
-        }
-      }
-      .datetime {
-        color: rgba(0, 0, 0, 0.25);
-        flex: 0 0 auto;
-        float: right;
-      }
-    }
-    .ant-card-meta-description {
-      color: rgba(0, 0, 0, 0.45);
-      height: 44px;
-      line-height: 22px;
-      overflow: hidden;
-    }
-  }
-
-  .item-group {
-    padding: 20px 0 8px 24px;
+.project-list {
+  .card-title {
     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;
+      color: rgba(0, 0, 0, 0.85);
+      margin-left: 12px;
       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;
-      }
+      display: inline-block;
+      vertical-align: top;
+      font-size: 14px;
+
       &:hover {
-        span {
-          color: #1890ff;
-        }
+        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;
+    a {
+      color: rgba(0, 0, 0, 0.45);
+      display: inline-block;
+      flex: 1 1 0;
 
-  .mobile {
-
-    .project-list {
-
-      .project-card-grid {
-        width: 100%;
+      &:hover {
+        color: #1890ff;
       }
     }
-
-    .more-info {
-      border: 0;
-      padding-top: 16px;
-      margin: 16px 0 16px;
+    .datetime {
+      color: rgba(0, 0, 0, 0.25);
+      flex: 0 0 auto;
+      float: right;
     }
+  }
+  .ant-card-meta-description {
+    color: rgba(0, 0, 0, 0.45);
+    height: 44px;
+    line-height: 22px;
+    overflow: hidden;
+  }
+}
 
-    .headerContent .title .welcome-text {
-      display: none;
+.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, 0.65);
+      line-height: 24px;
+      max-width: 100px;
+      vertical-align: top;
+      margin-left: 12px;
+      transition: all 0.3s;
+      display: inline-block;
+    }
+    &:hover {
+      span {
+        color: #1890ff;
+      }
+    }
+  }
+}
+
+.mobile {
+  .project-list {
+    .project-card-grid {
+      width: 100%;
     }
   }
 
+  .more-info {
+    border: 0;
+    padding-top: 16px;
+    margin: 16px 0 16px;
+  }
+
+  .headerContent .title .welcome-text {
+    display: none;
+  }
+}
 </style>
\ No newline at end of file

--
Gitblit v1.9.3