czh-20260609-增加门户卡片数据获取前端接口；增加顶部栏相应logo

2026-06-09 09:45:31 +08:00
parent 4828b52c73
commit 8185bb9bf4
12 changed files with 248 additions and 164 deletions
@@ -0,0 +1,14 @@
+import { defHttp } from '/@/utils/http/axios';
+
+const URL = {
+  stats: '/dashboard/processPortal/stats',
+};
+
+export interface ProcessPortalStats {
+  todoCount: number;
+  doneThisMonth: number;
+  avgDuration: string;
+  overdueCount: number;
+}
+
+export const getProcessPortalStats = () => defHttp.get<ProcessPortalStats>({ url: URL.stats });
@@ -112,9 +112,9 @@

  function goMore() {
    if (activeTab.value === 'todo') {
-      router.push('/task/myHandleTaskInfo');
+      router.push('/task/myTodoTaskInfo');
    } else {
-      router.push('/task/myCcTaskList');
+      router.push('/task/myCcTaskListInfo');
    }
  }

@@ -1,115 +1,110 @@
 <template>
  <a-row :gutter="16" class="stat-cards">
-    <a-col :xs="24" :sm="12" :lg="6" v-for="item in statList" :key="item.title">
-      <div class="stat-card" hoverable>
-        <div class="stat-card__header">
-          <span class="stat-card__label">{{ item.title }}</span>
-          <div class="stat-card__icon-wrap" :style="{ background: item.bgColor }">
-            <component :is="item.icon" :style="{ color: item.iconColor, fontSize: '18px' }" />
+    <!-- 骨架屏加载态 -->
+    <template v-if="loading">
+      <a-col :xs="24" :sm="12" :lg="6" v-for="i in 4" :key="'skeleton-' + i">
+        <div class="stat-card stat-card--skeleton">
+          <div class="stat-card__icon skeleton-box" />
+          <div class="stat-card__info">
+            <div class="skeleton-line skeleton-line--label" />
+            <div class="skeleton-line skeleton-line--value" />
          </div>
        </div>
-        <div class="stat-card__footer">
-          <div class="stat-card__value-group">
+      </a-col>
+    </template>
+
+    <!-- 真实数据 -->
+    <template v-else>
+      <a-col :xs="24" :sm="12" :lg="6" v-for="item in statList" :key="item.title">
+        <div class="stat-card" :style="{ '--accent': item.iconColor, '--accent-bg': item.bgColor }">
+          <div class="stat-card__glow" />
+          <div class="stat-card__icon" :style="{ background: item.bgColor }">
+            <component :is="item.icon" :style="{ color: item.iconColor, fontSize: '22px' }" />
+          </div>
+          <div class="stat-card__info">
+            <span class="stat-card__label">{{ item.title }}</span>
            <span class="stat-card__value">{{ item.value }}</span>
-            <span class="stat-card__change" :class="'stat-card__change--' + item.trend">
-              <CaretUpOutlined v-if="item.trend === 'up'" />
-              <CaretDownOutlined v-if="item.trend === 'down'" />
-              {{ item.change }}
-            </span>
          </div>
-          <svg class="stat-card__sparkline" width="80" height="32" :viewBox="'0 0 80 32'">
-            <defs>
-              <linearGradient :id="'grad-' + item.key" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" :stop-color="item.sparkColor" stop-opacity="0.3" />
-                <stop offset="100%" :stop-color="item.sparkColor" stop-opacity="0.05" />
-              </linearGradient>
-            </defs>
-            <polygon :points="item.fillPoints" :fill="'url(#grad-' + item.key + ')'" />
-            <path :d="item.pathD" fill="none" :stroke="item.sparkColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
        </div>
-      </div>
-    </a-col>
+      </a-col>
+    </template>
  </a-row>
 </template>

 <script lang="ts" setup>
+  import { ref, computed, onMounted } from 'vue';
  import {
    FileTextOutlined,
    CheckCircleOutlined,
    ClockCircleOutlined,
    WarningOutlined,
-    CaretUpOutlined,
-    CaretDownOutlined,
  } from '@ant-design/icons-vue';
+  import { getProcessPortalStats } from '../api/processPortal.api';

-  function buildSparkline(data: number[]) {
-    const max = Math.max(...data);
-    const min = Math.min(...data);
-    const range = max - min || 1;
-    const width = 80;
-    const height = 32;
-    const pad = 2;
-    const points = data.map((v, i) => {
-      const x = pad + (i / (data.length - 1)) * (width - pad * 2);
-      const y = height - pad - ((v - min) / range) * (height - pad * 2);
-      return `${x},${y}`;
-    });
-    const pathD = `M ${points.join(' L ')}`;
-    const fillPoints = [`${pad},${height - pad}`, ...points, `${width - pad},${height - pad}`].join(' ');
-    return { pathD, fillPoints };
-  }
+  const ICON_MAP = {
+    todo: FileTextOutlined,
+    done: CheckCircleOutlined,
+    avg: ClockCircleOutlined,
+    warn: WarningOutlined,
+  } as const;

-  const statList = [
+  const COLOR_MAP = {
+    todo: { bg: 'rgba(24, 144, 255, 0.1)', icon: '#1890ff' },
+    done: { bg: 'rgba(82, 196, 26, 0.1)', icon: '#52c41a' },
+    avg: { bg: 'rgba(168, 85, 247, 0.1)', icon: '#a855f7' },
+    warn: { bg: 'rgba(255, 77, 79, 0.1)', icon: '#ff4d4f' },
+  } as const;
+
+  const loading = ref(true);
+  const stats = ref({ todoCount: 0, doneThisMonth: 0, avgDuration: '0h', overdueCount: 0 });
+
+  const statList = computed(() => [
    {
      key: 'todo',
      title: '待办事项',
-      value: '28',
-      change: '+4',
-      trend: 'up',
-      icon: FileTextOutlined,
-      bgColor: 'rgba(24, 144, 255, 0.1)',
-      iconColor: '#1890ff',
-      sparkColor: '#3b82f6',
-      ...buildSparkline([20, 22, 18, 24, 21, 26, 28]),
+      value: stats.value.todoCount,
+      icon: ICON_MAP.todo,
+      bgColor: COLOR_MAP.todo.bg,
+      iconColor: COLOR_MAP.todo.icon,
    },
    {
      key: 'done',
      title: '本月已办',
-      value: '342',
-      change: '+18.2%',
-      trend: 'up',
-      icon: CheckCircleOutlined,
-      bgColor: 'rgba(82, 196, 26, 0.1)',
-      iconColor: '#52c41a',
-      sparkColor: '#22c55e',
-      ...buildSparkline([280, 295, 310, 305, 320, 335, 342]),
+      value: stats.value.doneThisMonth,
+      icon: ICON_MAP.done,
+      bgColor: COLOR_MAP.done.bg,
+      iconColor: COLOR_MAP.done.icon,
    },
    {
      key: 'avg',
      title: '平均时长',
-      value: '2.4h',
-      change: '-0.6h',
-      trend: 'down',
-      icon: ClockCircleOutlined,
-      bgColor: 'rgba(168, 85, 247, 0.1)',
-      iconColor: '#a855f7',
-      sparkColor: '#a855f7',
-      ...buildSparkline([3.2, 3.0, 2.8, 2.9, 2.6, 2.5, 2.4]),
+      value: stats.value.avgDuration,
+      icon: ICON_MAP.avg,
+      bgColor: COLOR_MAP.avg.bg,
+      iconColor: COLOR_MAP.avg.icon,
    },
    {
      key: 'warn',
      title: '超时预警',
-      value: '6',
-      change: '+2',
-      trend: 'up',
-      icon: WarningOutlined,
-      bgColor: 'rgba(255, 77, 79, 0.1)',
-      iconColor: '#ff4d4f',
-      sparkColor: '#ef4444',
-      ...buildSparkline([3, 4, 2, 5, 4, 5, 6]),
+      value: stats.value.overdueCount,
+      icon: ICON_MAP.warn,
+      bgColor: COLOR_MAP.warn.bg,
+      iconColor: COLOR_MAP.warn.icon,
    },
-  ];
+  ]);
+
+  onMounted(async () => {
+    try {
+      const res = await getProcessPortalStats();
+      if (res) {
+        stats.value = res;
+      }
+    } catch (e) {
+      console.error('获取流程门户统计数据失败', e);
+    } finally {
+      loading.value = false;
+    }
+  });
 </script>

 <style lang="less" scoped>
@@ -118,49 +113,67 @@
  }

  .stat-card {
+    position: relative;
    background: #fff;
    border: 1px solid #f0f0f0;
-    border-radius: 12px;
-    padding: 20px;
+    border-radius: 14px;
+    padding: 22px 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-    transition: box-shadow 0.2s;
+    transition: all 0.3s ease;
    cursor: default;
+    overflow: hidden;

    &:hover {
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+      transform: translateY(-2px);
+
+      .stat-card__glow {
+        opacity: 0.12;
+        transform: scale(1.15);
+      }
    }

-    &__header {
+    &__glow {
+      position: absolute;
+      right: -20px;
+      top: -20px;
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      background: var(--accent);
+      opacity: 0.06;
+      transition: all 0.4s ease;
+      pointer-events: none;
+    }
+
+    &__icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 12px;
      display: flex;
      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 12px;
+      justify-content: center;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 1;
+    }
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+      position: relative;
+      z-index: 1;
    }

    &__label {
      font-size: 13px;
      color: rgba(0, 0, 0, 0.45);
-    }
-
-    &__icon-wrap {
-      width: 36px;
-      height: 36px;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &__footer {
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-between;
-    }
-
-    &__value-group {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
+      line-height: 1.3;
    }

    &__value {
@@ -170,26 +183,48 @@
      line-height: 1.2;
      letter-spacing: -0.5px;
    }
+  }

-    &__change {
-      font-size: 12px;
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      gap: 2px;
+  // ---- 骨架屏 ----
+  .stat-card--skeleton {
+    cursor: default;

-      &--up {
-        color: #52c41a;
-      }
+    &:hover {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+    }
+  }

-      &--down {
-        color: #ff4d4f;
-      }
+  .skeleton-box {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s ease-in-out infinite;
+  }
+
+  .skeleton-line {
+    height: 14px;
+    border-radius: 6px;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s ease-in-out infinite;
+
+    &--label {
+      width: 56px;
+      margin-bottom: 4px;
    }

-    &__sparkline {
-      flex-shrink: 0;
-      overflow: visible;
+    &--value {
+      width: 64px;
+      height: 28px;
+      border-radius: 8px;
+    }
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
    }
  }
 </style>
@@ -5,10 +5,6 @@
    <div class="welcome-banner__content">
      <div class="welcome-banner__left">
        <h2 class="welcome-banner__title">{{ greeting }}，{{ userinfo.realname }}<span class="welcome-banner__wave">👋</span></h2>
-        <p class="welcome-banner__desc">
-          今天有 <span class="welcome-banner__highlight">8 项待办</span>、
-          <span class="welcome-banner__warn">2 项即将超时</span>
-        </p>
      </div>
      <div class="welcome-banner__right">
        <div class="welcome-banner__date-btn">
@@ -53,7 +53,7 @@

    <!-- 底部版权 -->
    <div class="footer-text">
-      中国船舶集团有限公司第七〇四研究所 数智化中心@2026
+      中国船舶集团有限公司第七〇四研究所 数智化中心&copy;2026
    </div>
  </div>
 </template>