Merge branch 'develop'

2025-07-21 11:16:16 +08:00
parent 617c96dd1d
commit 2a82a7ba95
381 changed files with 106417 additions and 38 deletions
@@ -0,0 +1,209 @@
+<!-- 环型图卡片 -->
+<template>
+  <div class="donut-chart-card art-custom-card" :style="{ height: `${height}rem` }">
+    <div class="card-body">
+      <div class="card-content">
+        <div class="data-section">
+          <p class="title">{{ title }}</p>
+          <div>
+            <p class="value">{{ formatNumber(value) }}</p>
+            <div class="percentage" :class="{ 'is-increase': percentage > 0 }">
+              {{ percentage > 0 ? '+' : '' }}{{ percentage }}%
+              <span v-if="percentageLabel">{{ percentageLabel }}</span>
+            </div>
+          </div>
+          <div class="chart-legend">
+            <span class="legend-item current" v-if="currentValue">{{ currentValue }}</span>
+            <span class="legend-item previous" v-if="previousValue">{{ previousValue }}</span>
+          </div>
+        </div>
+        <div class="chart-section">
+          <div ref="chartRef" class="chart-container"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { EChartsOption } from 'echarts'
+  import { useChart, useChartOps } from '@/composables/useChart'
+  const { chartRef, isDark, initChart } = useChart()
+
+  defineOptions({ name: 'ArtDonutChartCard' })
+
+  interface Props {
+    /** 数值 */
+    value: number
+    /** 标题 */
+    title: string
+    /** 百分比 */
+    percentage: number
+    /** 百分比标签 */
+    percentageLabel?: string
+    /** 当前年份 */
+    currentValue?: string
+    /** 去年年份 */
+    previousValue?: string
+    /** 高度 */
+    height?: number
+    /** 颜色 */
+    color?: string
+    /** 半径 */
+    radius?: [string, string]
+    /** 数据 */
+    data: [number, number]
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    height: 9,
+    radius: () => ['70%', '90%'],
+    data: () => [0, 0]
+  })
+
+  const formatNumber = (num: number) => {
+    return num.toLocaleString()
+  }
+
+  const options: () => EChartsOption = () => {
+    const computedColor = props.color || useChartOps().themeColor
+
+    return {
+      series: [
+        {
+          type: 'pie',
+          radius: props.radius,
+          avoidLabelOverlap: false,
+          label: {
+            show: false
+          },
+          data: [
+            {
+              value: props.data[0],
+              name: props.currentValue,
+              itemStyle: { color: computedColor }
+            },
+            {
+              value: props.data[1],
+              name: props.previousValue,
+              itemStyle: { color: '#e6e8f7' }
+            }
+          ]
+        }
+      ]
+    }
+  }
+
+  watch(isDark, () => {
+    initChart(options())
+  })
+
+  onMounted(() => {
+    initChart(options())
+  })
+</script>
+
+<style lang="scss" scoped>
+  .donut-chart-card {
+    overflow: hidden;
+    color: #303133;
+    background-color: var(--art-main-bg-color);
+    border-radius: var(--custom-radius);
+    transition: 0.3s;
+
+    .card-body {
+      box-sizing: border-box;
+      display: flex;
+      height: 100%;
+      padding: 20px;
+    }
+
+    .card-content {
+      display: flex;
+      gap: 20px;
+      align-items: flex-start;
+      width: 100%;
+    }
+
+    .data-section {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+    }
+
+    .chart-section {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      max-width: 200px;
+      height: 100%;
+    }
+
+    .title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 1.2;
+      color: var(--art-text-gray-900);
+    }
+
+    .value {
+      margin: 0;
+      margin-top: 10px;
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 1.2;
+      color: var(--art-text-gray-900);
+    }
+
+    .percentage {
+      margin-top: 5px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #f56c6c;
+
+      &.is-increase {
+        color: #67c23a;
+      }
+    }
+
+    .chart-container {
+      width: 100%;
+      height: 120px;
+    }
+
+    .chart-legend {
+      display: flex;
+      gap: 16px;
+      margin-top: 8px;
+      font-size: 12px;
+      color: #909399;
+
+      .legend-item {
+        position: relative;
+        padding-left: 16px;
+
+        &::before {
+          position: absolute;
+          top: 50%;
+          left: 0;
+          width: 8px;
+          height: 8px;
+          content: '';
+          border-radius: 50%;
+          transform: translateY(-50%);
+        }
+
+        &.current::before {
+          background-color: var(--main-color);
+        }
+
+        &.previous::before {
+          background-color: #e6e8f7;
+        }
+      }
+    }
+  }
+</style>