perf: Add Dashboard Summery

jumpserver · Jan 8, 2025 · 9014b2c · 9014b2c
1 parent edd85e7
commit 9014b2c
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 43 deletions.
diff --git a/src/views/dashboard/ChangeSecret/index.vue b/src/views/dashboard/ChangeSecret/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="this.$hasPerm('accounts.view_changesecretautomation')">
-    <div>
+    <div class="switch-date-wrapper">
       <SwitchDate class="switch-date" @change="onChange" />
     </div>
 
@@ -15,27 +15,21 @@
       </el-col>
 
     </el-row>
-
-    <el-row :gutter="24" type="flex">
-
-      <el-col :span="14">
-        <FailedAccountSummary :days="days" class="failed-account-summary" />
-      </el-col>
-
-      <el-col :span="10">
-        <AccountSummary :days="days" class="account-summary" />
-      </el-col>
-
+    <el-row>
+      <AccountSummary :days="days" class="account-summary" />
+    </el-row>
+    <el-row>
+      <FailedAccountSummary :days="days" class="failed-account-summary" />
     </el-row>
   </div>
 </template>
 
 <script>
-import SwitchDate from '../components/SwitchDate'
-import FailedAccountSummary from './FailedAccountSummary.vue'
 import DataSummary from './DataSummary.vue'
 import CardSummary from './CardSummary.vue'
+import SwitchDate from '../components/SwitchDate'
 import AccountSummary from './AccountSummary.vue'
+import FailedAccountSummary from './FailedAccountSummary.vue'
 
 export default {
   components: {
@@ -60,19 +54,68 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  %card-common {
+    background: #fff;
+    border-radius: 4px;
+    padding: 1.25rem;
+    height: 100%;
+    box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    transition: all .3s;
+
+    &:hover {
+      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    }
+
+    ::v-deep {
+      .card-content {
+        padding-bottom: unset;
+        border-bottom: unset;
+      }
+
+      .ring {
+        display: none;
+      }
+
+      .el-card {
+        box-shadow: none;
+        border: none;
+      }
+
+      .el-card__body {
+        padding: 0;
+      }
+    }
+  }
+
+  .switch-date-wrapper {
+    margin-bottom: 1.25rem;
+  }
 
   .page ::v-deep .page-heading {
     display: none;
   }
 
+  .card-summary {
+    @extend %card-common;
+  }
+
+  .data-summary {
+    @extend %card-common;
+  }
+
+  .account-summary {
+    @extend %card-common;
+    margin-top: 1rem;
+  }
+
   .failed-account-summary {
+    @extend %card-common;
     height: 100%;
     margin-top: 16px;
 
-   ::v-deep #HomeCard .el-card.no-border {
-     height: 100%;
-     margin-bottom: unset !important;
+    ::v-deep #HomeCard .el-card.no-border {
+      height: 100%;
+      margin-bottom: unset !important;
     }
   }
-
 </style>
diff --git a/src/views/dashboard/Console/index.vue b/src/views/dashboard/Console/index.vue
@@ -11,7 +11,7 @@
           <DataSummary />
         </el-col>
       </el-row>
-      <AssetProportionSummary />
+      <AssetProportionSummary :url="url" />
       <RankSummary />
     </div>
     <Page403 v-else />
@@ -42,6 +42,7 @@ export default {
   },
   data() {
     return {
+      url: '/api/v1/index/?total_count_type_to_assets_amount=1'
     }
   }
 }

diff --git a/src/views/dashboard/Pam/AssetProportionSummary.vue b/src/views/dashboard/Pam/AssetProportionSummary.vue
@@ -17,10 +17,16 @@ export default {
     Title,
     ProgressChart
   },
+  props: {
+    url: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
       titleConfig: {
-        title: this.$t('ProportionOfAssetTypes'),
+        title: '',
         tip: this.$t('ProportionOfAssetTypes')
       },
       config: {
@@ -33,9 +39,24 @@ export default {
   },
   methods: {
     async getChartData() {
-      const url = '/api/v1/index/?total_count_type_to_assets_amount=1'
-      const data = await this.$axios.get(url)
-      this.$set(this.config, 'data', data.total_count_type_to_assets_amount)
+      if (!this.url) return
+
+      try {
+        const data = await this.$axios.get(this.url)
+        const str = data[this.url.split('?')[1].split('=')[0]]
+
+        if (this.url.includes('accounts')) {
+          this.titleConfig.title = this.$t('ProportionOfAccontTypes')
+          this.titleConfig.tip = this.$t('ProportionOfAccountTypes')
+        } else {
+          this.titleConfig.title = this.$t('ProportionOfAssetTypes')
+          this.titleConfig.tip = this.$t('ProportionOfAssetTypes')
+        }
+
+        this.$set(this.config, 'data', str)
+      } catch (e) {
+        this.$message.error(e.message)
+      }
     }
   }
 }

diff --git a/src/views/dashboard/Pam/index.vue b/src/views/dashboard/Pam/index.vue
@@ -2,33 +2,48 @@
   <Page>
     <div v-if="this.$hasPerm('rbac.view_console')">
       <Announcement />
-      <el-row :gutter="16">
-        <el-col :lg="12" :sm="24">
-          <AccountSummary />
-          <RiskSummary />
-          <UserAssetActivity />
-        </el-col>
-        <el-col :lg="12" :sm="24">
-          <DataSummary />
-        </el-col>
-      </el-row>
-      <AssetProportionSummary />
-      <RankSummary />
+
+      <div class="dashboard-container">
+        <el-row :gutter="20" class="top-summary">
+          <el-col :span="18" :lg="18" :xs="24" class="left-column">
+            <div class="account-wrapper">
+              <AccountSummary class="summary-card" />
+            </div>
+            <div class="risk-wrapper">
+              <RiskSummary class="summary-card" />
+            </div>
+          </el-col>
+          <el-col :span="6" :lg="6" :xs="24">
+            <DataSummary class="summary-card" />
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="middle-section">
+          <el-col :span="24">
+            <AccountSecretSummary class="secret-summary" />
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="bottom-section">
+          <el-col :span="24" class="asset-proportion-wrapper">
+            <AssetProportionSummary :url="url" class="summary-card" />
+          </el-col>
+        </el-row>
+      </div>
     </div>
     <Page403 v-else />
   </Page>
 </template>
 
 <script>
-import { Announcement } from '@/components'
 import { Page } from '@/layout/components'
+import { Announcement } from '@/components'
 import Page403 from '@/views/403'
-import AccountSummary from './AccountSummary.vue'
-import RiskSummary from './RiskSummary.vue'
-import UserAssetActivity from './UserAssetActivity.vue'
 import DataSummary from './DataSummary'
+import RiskSummary from './RiskSummary.vue'
+import AccountSummary from './AccountSummary.vue'
 import AssetProportionSummary from './AssetProportionSummary'
-import RankSummary from './RankSummary'
+import AccountSecretSummary from '../ChangeSecret/AccountSummary.vue'
 
 export default {
   name: 'Dashboard',
@@ -38,16 +53,78 @@ export default {
     DataSummary,
     AssetProportionSummary,
     RiskSummary,
-    RankSummary,
     AccountSummary,
-    UserAssetActivity,
+    AccountSecretSummary,
     Page403
   },
   data() {
-    return {}
+    return {
+      url: '/api/v1/accounts/pam-dashboard/?total_count_type_to_accounts_amount=1'
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.dashboard-container {
+  padding: 1.25rem;
+
+  .top-summary,
+  .middle-section,
+  .bottom-section {
+    margin-bottom: 1.25rem;
+  }
+
+  .top-summary {
+    .left-column {
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+    }
+  }
+
+  .bottom-section {
+    .data-summary-wrapper {
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .summary-card {
+    background: #fff;
+    border-radius: 4px;
+    padding: 1.25rem;
+    height: 100%;
+    box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    transition: all .3s;
+
+    ::v-deep .card-content {
+      padding-bottom: unset;
+      border-bottom: unset;
+    }
+
+    ::v-deep .ring {
+      display: none;
+    }
+
+    &:hover {
+      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    }
+  }
+
+  .secret-summary {
+    background: #fff;
+    border-radius: 4px;
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+    box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  }
+
+  @media screen and (max-width: 768px) {
+    padding: 0.625rem;
+
+    .el-col {
+      margin-bottom: 1.25rem;
+    }
+  }
+}
 </style>