Merge branch 'pam' of github.com:jumpserver/lina into pam

2026-01-15 14:24:39 +00:00 · 2025-01-09 19:19:05 +08:00
parent 63200bca26 305029649e
commit 1f5cc25b86
5 changed files with 244 additions and 11 deletions
--- 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>
--- 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>
--- a/src/views/dashboard/Pam/MissionSummery.vue
+++ 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>
--- 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;
--- 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}%'