fe.ems.vue3/src/views/dashboard/overview/components/mfOverview/DashboardCards.vue

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import TrendChart from './TrendChart.vue';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();

// 模拟数据
const activeCallsData = ref([10, 20, 30, 40, 30, 80, 100]);
const mosData = ref([40, 50, 60, 70, 80, 30, 70]);
const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);

// 新增三个卡片的模拟数据
const networkCpuData = ref([30, 40, 50, 60, 45, 35, 40]);
const systemCpuData = ref([20, 30, 45, 55, 65, 50, 55]);
const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);

</script>

<template>
  <a-card>
    <div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px;    text-align: center;">
      {{ t('views.dashboard.overview.psapTitle') }}</div>

    <div class="row-title">{{ t('views.dashboard.overview.userTitle') }}</div>
    <a-row :gutter="[48, 48]">
      <a-col :xs="24" :sm="24" :lg="8">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">{{ t('views.dashboard.overview.totalUser') }}</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="activeCallsData" color="#4CAF50" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                100
                <a-icon class="trend-icon up" type="arrow-up" />
              </div>
              <div class="metric-change">+20 last 5s</div>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :xs="24" :sm="24" :lg="8">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">{{ t('views.dashboard.overview.onlineUser') }}</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="mosData" color="#2196F3" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                70
                <a-icon class="trend-icon right" type="arrow-right" />
              </div>
              <div class="metric-change">+40 last 5s</div>
            </div>
          </div>
        </a-card>
      </a-col>



      <a-col :xs="24" :sm="24" :lg="8">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">{{ t('views.dashboard.overview.parallelUser') }}</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="failedCallsData" color="#F44336" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                30
              </div>
              <div class="metric-change">-10 last 5s</div>
            </div>
          </div>
        </a-card>
      </a-col>

    </a-row>

    <div class="row-title" style="margin-top: 100px;"> {{ t('views.dashboard.overview.sysTitle') }} </div>

    <a-row :gutter="[48, 48]">
      <a-col :xs="24" :sm="24" :lg="6">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">{{ t('views.dashboard.overview.resources.neCpu') }}</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="networkCpuData" color="#FF9800" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                40%
                <a-icon class="trend-icon up" type="arrow-up" />
              </div>
              <div class="metric-change">+5% last 5s</div>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :xs="24" :sm="24" :lg="6">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">{{ t('views.dashboard.overview.resources.sysCpu') }}</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="systemCpuData" color="#9C27B0" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                55%
                <a-icon class="trend-icon down" type="arrow-down" />
              </div>
              <div class="metric-change">+5% last 5s</div>
            </div>
          </div>
        </a-card>
      </a-col>


      <a-col :xs="24" :sm="24" :lg="6">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">{{ t('views.dashboard.overview.resources.sysMem') }}</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="systemMemData" color="#CDDC39" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                65%
                <a-icon class="trend-icon up" type="arrow-up" />
              </div>
              <div class="metric-change">+20% last 5s</div>
            </div>
          </div>
        </a-card>
      </a-col>
      
      <a-col :xs="24" :sm="24" :lg="6">
        <a-card :bordered="false" class="metric-card">
          <div class="card-title">{{ t('views.dashboard.overview.resources.sysDisk') }}</div>
          <div class="card-content">
            <div class="trend-chart">
              <TrendChart :data="systemStorageData" color="#00BCD4" />
            </div>
            <div class="metric-info">
              <div class="metric-value">
                90%
                <a-icon class="trend-icon up" type="arrow-up" />
              </div>
              <div class="metric-change">+5% last 5s</div>
            </div>
          </div>
        </a-card>
      </a-col>



    </a-row>
  </a-card>
</template>

<style scoped>
.row-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 3px solid #1890ff;
}

.dashboard-cards {
  padding: 16px;
}

.metric-card {
  border-radius: 8px;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

.card-content {
  display: flex;
  align-items: center;
}

.trend-chart {
  flex: 1;
  height: 50px;
}

.metric-info {
  margin-left: 16px;
  text-align: right;
  min-width: 90px;
}

.full-width {
  width: 100%;
  text-align: center;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.metric-change {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.trend-icon {
  margin-left: 8px;
  font-size: 16px;
}

.up {
  color: #4CAF50;
}

.down {
  color: #F44336;
}

.right {
  color: #2196F3;
}
</style>