登录界面记住我功能

2026-02-24 12:56:39 +08:00
parent c2921b9cc0
commit 186315d82c
5 changed files with 408 additions and 94 deletions
@@ -0,0 +1,329 @@
+<template>
+  <div class="erp-dashboard">
+    <!-- 第一行统计卡片 -->
+    <el-row :gutter="16" class="stat-row">
+      <el-col :span="4" v-for="(item, index) in firstRowStats" :key="'first-' + index">
+        <div class="stat-card">
+          <div class="stat-header">
+            <span class="stat-label">{{ item.label }}</span>
+            <el-icon class="stat-icon"><Info-Filled /></el-icon>
+          </div>
+          <div class="stat-value">
+            <span class="currency">¥</span>
+            <span class="number">{{ formatMoney(item.value) }}</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 第二行统计卡片 -->
+    <el-row :gutter="16" class="stat-row" style="margin-top: 16px;">
+      <el-col :span="4" v-for="(item, index) in secondRowStats" :key="'second-' + index">
+        <div class="stat-card">
+          <div class="stat-header">
+            <span class="stat-label">{{ item.label }}</span>
+            <el-icon class="stat-icon"><Info-Filled /></el-icon>
+          </div>
+          <div class="stat-value">
+            <span class="currency">¥</span>
+            <span class="number">{{ formatMoney(item.value) }}</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 图表区域 -->
+    <el-row :gutter="16" class="chart-row" style="margin-top: 16px;">
+      <el-col :span="8">
+        <div class="chart-card">
+          <div class="chart-title">销售统计</div>
+          <div ref="salesChartRef" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="chart-card">
+          <div class="chart-title">零售统计</div>
+          <div ref="retailChartRef" class="chart-container"></div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="chart-card">
+          <div class="chart-title">采购统计</div>
+          <div ref="purchaseChartRef" class="chart-container"></div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import { InfoFilled } from '@element-plus/icons-vue';
+
+// 统计卡片数据 - 第一行
+const firstRowStats = ref([
+  { label: '今日销售', value: 0 },
+  { label: '今日零售', value: 0 },
+  { label: '今日采购', value: 0 },
+  { label: '本月累计销售', value: 0 },
+  { label: '本月累计零售', value: 0 },
+  { label: '本月累计采购', value: 0 },
+]);
+
+// 统计卡片数据 - 第二行
+const secondRowStats = ref([
+  { label: '昨日销售', value: 0 },
+  { label: '昨日零售', value: 0 },
+  { label: '昨日采购', value: 0 },
+  { label: '今年累计销售', value: 0 },
+  { label: '今年累计零售', value: 0 },
+  { label: '今年累计采购', value: 0 },
+]);
+
+// 图表实例
+const salesChartRef = ref<HTMLElement | null>(null);
+const retailChartRef = ref<HTMLElement | null>(null);
+const purchaseChartRef = ref<HTMLElement | null>(null);
+const salesChartInstance = shallowRef<echarts.ECharts | null>(null);
+const retailChartInstance = shallowRef<echarts.ECharts | null>(null);
+const purchaseChartInstance = shallowRef<echarts.ECharts | null>(null);
+
+// 格式化金额
+const formatMoney = (value: number): string => {
+  return value.toLocaleString();
+};
+
+// 生成最近6个月的月份标签
+const getMonthLabels = (): string[] => {
+  const labels: string[] = [];
+  const now = new Date();
+  for (let i = 5; i >= 0; i--) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    labels.push(`${year}-${month}`);
+  }
+  return labels;
+};
+
+// 初始化图表通用配置
+const initChart = (refEl: HTMLElement, title: string, color: string) => {
+  const chart = echarts.init(refEl);
+  const months = getMonthLabels();
+  
+  chart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: months,
+      axisLine: { lineStyle: { color: '#E0E6ED' } },
+      axisLabel: { color: '#606266', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: { lineStyle: { color: '#F2F6FC' } },
+      axisLabel: { color: '#606266', fontSize: 11 }
+    },
+    series: [
+      {
+        name: title,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: { color: color, width: 2 },
+        itemStyle: { color: color },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: color + '40' },
+            { offset: 1, color: color + '10' }
+          ])
+        },
+        data: [0, 0, 0, 0, 0, 0]
+      }
+    ]
+  });
+  
+  return chart;
+};
+
+// 初始化所有图表
+const initCharts = () => {
+  if (salesChartRef.value) {
+    salesChartInstance.value = initChart(salesChartRef.value, '销售', '#409EFF');
+  }
+  if (retailChartRef.value) {
+    retailChartInstance.value = initChart(retailChartRef.value, '零售', '#67C23A');
+  }
+  if (purchaseChartRef.value) {
+    purchaseChartInstance.value = initChart(purchaseChartRef.value, '采购', '#E6A23C');
+  }
+};
+
+// 加载数据（模拟接口调用）
+const loadData = async () => {
+  // TODO: 调用接口获取真实数据
+  // const res = await getErpDashboard();
+  
+  // 模拟数据更新
+  firstRowStats.value = [
+    { label: '今日销售', value: 12580 },
+    { label: '今日零售', value: 8560 },
+    { label: '今日采购', value: 23400 },
+    { label: '本月累计销售', value: 358600 },
+    { label: '本月累计零售', value: 245800 },
+    { label: '本月累计采购', value: 568900 },
+  ];
+  
+  secondRowStats.value = [
+    { label: '昨日销售', value: 15230 },
+    { label: '昨日零售', value: 9870 },
+    { label: '昨日采购', value: 18900 },
+    { label: '今年累计销售', value: 2856000 },
+    { label: '今年累计零售', value: 1985000 },
+    { label: '今年累计采购', value: 4568000 },
+  ];
+  
+  // 更新图表数据
+  updateCharts();
+};
+
+// 更新图表数据
+const updateCharts = () => {
+  const salesData = [28000, 32000, 35000, 38000, 42000, 358600];
+  const retailData = [18000, 21000, 22000, 25000, 28000, 245800];
+  const purchaseData = [45000, 48000, 52000, 55000, 58000, 568900];
+  
+  if (salesChartInstance.value) {
+    salesChartInstance.value.setOption({ series: [{ data: salesData }] });
+  }
+  if (retailChartInstance.value) {
+    retailChartInstance.value.setOption({ series: [{ data: retailData }] });
+  }
+  if (purchaseChartInstance.value) {
+    purchaseChartInstance.value.setOption({ series: [{ data: purchaseData }] });
+  }
+};
+
+// 自适应窗口大小
+const handleResize = () => {
+  salesChartInstance.value?.resize();
+  retailChartInstance.value?.resize();
+  purchaseChartInstance.value?.resize();
+};
+
+onMounted(async () => {
+  initCharts();
+  await nextTick();
+  await loadData();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  salesChartInstance.value?.dispose();
+  retailChartInstance.value?.dispose();
+  purchaseChartInstance.value?.dispose();
+});
+</script>
+
+<style lang="less" scoped>
+.erp-dashboard {
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 84px);
+}
+
+.stat-row {
+  .el-col {
+    margin-bottom: 0;
+  }
+}
+
+.stat-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  
+  .stat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    
+    .stat-label {
+      font-size: 14px;
+      color: #606266;
+    }
+    
+    .stat-icon {
+      font-size: 14px;
+      color: #c0c4cc;
+      cursor: help;
+    }
+  }
+  
+  .stat-value {
+    display: flex;
+    align-items: baseline;
+    
+    .currency {
+      font-size: 14px;
+      color: #303133;
+      font-weight: 500;
+      margin-right: 4px;
+    }
+    
+    .number {
+      font-size: 24px;
+      font-weight: 600;
+      color: #303133;
+      font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    }
+  }
+}
+
+.chart-row {
+  .el-col {
+    margin-bottom: 0;
+  }
+}
+
+.chart-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  height: 320px;
+  display: flex;
+  flex-direction: column;
+  
+  .chart-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ebeef5;
+  }
+  
+  .chart-container {
+    flex: 1;
+    min-height: 0;
+  }
+}
+</style>