From 305029649e24b00f240fbbf72719daa1ae9d6321 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Thu, 9 Jan 2025 18:03:22 +0800
Subject: [PATCH] Perf: Add Mission Card

---
 .../dashboard/ChangeSecret/CardSummary.vue    |   4 +-
 .../dashboard/ChangeSecret/DataSummary.vue    |   2 +-
 src/views/dashboard/Pam/MissionSummery.vue    | 222 ++++++++++++++++++
 src/views/dashboard/Pam/index.vue             |  23 +-
 src/views/dashboard/components/RingChart.vue  |   4 +-
 5 files changed, 244 insertions(+), 11 deletions(-)
 create mode 100644 src/views/dashboard/Pam/MissionSummery.vue

diff --git a/src/views/dashboard/ChangeSecret/CardSummary.vue b/src/views/dashboard/ChangeSecret/CardSummary.vue
index 921092265..d4acc5136 100644
--- a/src/views/dashboard/ChangeSecret/CardSummary.vue
+++ b/src/views/dashboard/ChangeSecret/CardSummary.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <el-row :gutter="16">
-      <el-col :lg="12" :sm="24" class="card-left">
+      <el-col :lg="12" :sm="24" class="margin-top-10 card-left">
         <SummaryCountCard :config="logConfig" :items="LogItems" />
       </el-col>
-      <el-col :lg="12" :sm="24" class="card-right">
+      <el-col :lg="12" :sm="24" class="margin-top-10 card-right">
         <SummaryCountCard :config="sessionConfig" :items="sessionItems" />
       </el-col>
     </el-row>
diff --git a/src/views/dashboard/ChangeSecret/DataSummary.vue b/src/views/dashboard/ChangeSecret/DataSummary.vue
index bca0a3df1..04ae005a2 100644
--- a/src/views/dashboard/ChangeSecret/DataSummary.vue
+++ b/src/views/dashboard/ChangeSecret/DataSummary.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="16">
-      <el-col :lg="24" :sm="12">
+      <el-col :lg="24" :sm="12" class="margin-top-10">
         <SummaryCountCard :config="logConfig" :items="LogItems" />
       </el-col>
     </el-row>
diff --git a/src/views/dashboard/Pam/MissionSummery.vue b/src/views/dashboard/Pam/MissionSummery.vue
new file mode 100644
index 000000000..459f72df1
--- /dev/null
+++ b/src/views/dashboard/Pam/MissionSummery.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="box">
+    <div class="header">
+      <Title :config="config" />
+    </div>
+
+    <div class="content">
+      <!-- eslint-disable-next-line -->
+      <div ref="chartRef" class="chart-container"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Title from '../components/Title.vue'
+import * as echarts from 'echarts'
+import 'echarts/lib/chart/pie'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/title'
+import 'echarts/lib/component/legend'
+
+export default {
+  name: 'MissionSummery',
+  components: { Title },
+  data() {
+    return {
+      config: {
+        title: '任务执行情况',
+        tip: '任务执行情况'
+      },
+      counter: {
+        total_count_gathered_account_automation: 0,
+        total_count_push_account_automation: 0,
+        total_count_backup_account_automation: 0,
+        total_count_risk_account: 0,
+        total_count_integration_application: 0
+      },
+      chart: null
+    }
+  },
+  computed: {
+    chartOption() {
+      return {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)',
+          backgroundColor: 'rgba(255, 255, 255, 0.9)',
+          borderColor: '#eee',
+          borderWidth: 1,
+          padding: [10, 15],
+          textStyle: {
+            color: '#666'
+          }
+        },
+        legend: {
+          type: 'scroll',
+          orient: 'horizontal',
+          top: 0,
+          left: 0,
+          right: 0,
+          itemGap: 20,
+          textStyle: {
+            color: '#666',
+            fontSize: 12
+          },
+          icon: 'circle',
+          itemWidth: 8,
+          itemHeight: 8
+        },
+        series: [
+          {
+            name: '任务分布',
+            type: 'pie',
+            radius: ['45%', '65%'],
+            center: ['50%', '55%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 8
+            },
+            label: {
+              show: true,
+              position: 'outside',
+              formatter: '{b}\n{c}',
+              color: '#666',
+              fontSize: 12,
+              lineHeight: 18
+            },
+            labelLine: {
+              show: true,
+              length: 15,
+              length2: 10,
+              smooth: true
+            },
+            data: [
+              {
+                value: this.counter.total_count_gathered_account_automation,
+                name: '账号收集任务'
+              },
+              {
+                value: this.counter.total_count_push_account_automation,
+                name: '账号推送任务'
+              },
+              {
+                value: this.counter.total_count_backup_account_automation,
+                name: '账号备份任务'
+              },
+              {
+                value: this.counter.total_count_risk_account,
+                name: '风险账号'
+              },
+              {
+                value: this.counter.total_count_integration_application,
+                name: '集成应用'
+              }
+            ],
+            emphasis: {
+              scaleSize: 5,
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.2)'
+              }
+            }
+          }
+        ],
+        color: ['#2B937C', '#5470c6', '#91cc75', '#fac858', '#ee6666']
+      }
+    }
+  },
+  watch: {
+    counter: {
+      handler() {
+        this.updateChart()
+      },
+      deep: true
+    }
+  },
+  async mounted() {
+    this.initChart()
+    this.counter = await this.getResourcesCount()
+    this.updateChart()
+    window.addEventListener('resize', this.resizeChart)
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+    window.removeEventListener('resize', this.resizeChart)
+  },
+  methods: {
+    async getResourcesCount() {
+      return this.$axios.get('/api/v1/accounts/pam-dashboard/',
+        {
+          params: {
+            total_count_gathered_account_automation: 1,
+            total_count_push_account_automation: 1,
+            total_count_backup_account_automation: 1,
+            total_count_risk_account: 1,
+            total_count_integration_application: 1
+          }
+        }
+      )
+    },
+    initChart() {
+      this.chart = echarts.init(this.$refs.chartRef)
+      this.chart.setOption(this.chartOption)
+    },
+    updateChart() {
+      if (this.chart) {
+        this.chart.setOption(this.chartOption)
+      }
+    },
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.box {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  .header {
+    padding: 16px 20px 0;
+  }
+
+  .content {
+    flex: 1;
+    min-height: 0;
+    padding: 0 10px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .chart-container {
+      width: 100%;
+      height: 420px;
+    }
+  }
+}
+
+:deep(.echarts) {
+  .el-legend {
+    .el-legend-item {
+      &:hover {
+        color: var(--color-primary);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/Pam/index.vue b/src/views/dashboard/Pam/index.vue
index 5f59cbc50..db6e55a44 100644
--- a/src/views/dashboard/Pam/index.vue
+++ b/src/views/dashboard/Pam/index.vue
@@ -6,6 +6,9 @@
       <div class="dashboard-container">
         <el-row :gutter="20" class="top-summary">
           <el-col :lg="16" :xs="24" class="left-column">
+            <div class="mission-wrapper">
+              <DataSummary class="summary-card" />
+            </div>
             <div class="account-wrapper">
               <AccountSummary class="summary-card" />
             </div>
@@ -14,7 +17,7 @@
             </div>
           </el-col>
           <el-col :lg="8" :xs="24" class="right-column">
-            <DataSummary class="summary-card" />
+            <MissionSummery class="summary-card" />
           </el-col>
         </el-row>
 
@@ -43,19 +46,21 @@ import DataSummary from './DataSummary'
 import RiskSummary from './RiskSummary.vue'
 import AccountSummary from './AccountSummary.vue'
 import AssetProportionSummary from './AssetProportionSummary'
+import MissionSummery from './MissionSummery.vue'
 import AccountSecretSummary from '../ChangeSecret/AccountSummary.vue'
 
 export default {
   name: 'Dashboard',
   components: {
     Page,
-    Announcement,
+    Page403,
     DataSummary,
-    AssetProportionSummary,
     RiskSummary,
+    Announcement,
+    MissionSummery,
     AccountSummary,
     AccountSecretSummary,
-    Page403
+    AssetProportionSummary
   },
   data() {
     return {
@@ -83,8 +88,8 @@ export default {
     }
 
     .right-column {
-      max-height: 286px;
-      height: 286px;
+      max-height: 540px;
+      height: 540px;
 
       ::v-deep .el-row,
       ::v-deep .el-col {
@@ -116,6 +121,12 @@ export default {
     }
   }
 
+  .mission-summary {
+    background: #fff;
+    padding: 1.25rem;
+    box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  }
+
   .secret-summary {
     background: #fff;
     padding: 1.25rem;
diff --git a/src/views/dashboard/components/RingChart.vue b/src/views/dashboard/components/RingChart.vue
index 3935ca74e..16dae4b0a 100644
--- a/src/views/dashboard/components/RingChart.vue
+++ b/src/views/dashboard/components/RingChart.vue
@@ -23,7 +23,7 @@ export default {
   },
   computed: {
     options() {
-      const { total = 0, active = 0, title, color } = this.config
+      const { total = 0, active = 0, title, color, colors } = this.config
       const activeDecimal = new Decimal(active)
       const totalDecimal = new Decimal(total)
 
@@ -61,7 +61,7 @@ export default {
         legend: {
           show: false
         },
-        color: [color, 'rgba(43, 147, 124, 0.05)'],
+        color: colors || [color, 'rgba(43, 147, 124, 0.05)'],
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {d}%'