From d648788841a802a2f56db5bd657a408b9b229d65 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 25 三月 2026 13:30:47 +0800
Subject: [PATCH] 销售看板

---
 src/views/reportAnalysis/salesStatistics/index copy.vue | 1304 ++++++++++++++++++++++++++++
 src/views/reportAnalysis/salesStatistics/index.vue      | 1394 +++++++++++++++++++-----------
 2 files changed, 2,178 insertions(+), 520 deletions(-)

diff --git a/src/views/reportAnalysis/salesStatistics/index copy.vue b/src/views/reportAnalysis/salesStatistics/index copy.vue
new file mode 100644
index 0000000..d1c76d4
--- /dev/null
+++ b/src/views/reportAnalysis/salesStatistics/index copy.vue
@@ -0,0 +1,1304 @@
+<template>
+  <div class="sales-statistics-container">
+    <div class="data-dashboard">
+      <!-- 椤甸潰鏍囬 -->
+      <!-- <div class="dashboard-header">
+        <div class="factory-name">閿�鍞粺璁＄湅鏉�</div>
+      </div> -->
+      <!-- 绛涢�夋潯浠� -->
+      <div class="filter-area">
+        <div class="filter-section">
+          <span class="filter-label">鏃堕棿鑼冨洿锛�</span>
+          <el-date-picker v-model="dateRange"
+                          type="daterange"
+                          range-separator="鑷�"
+                          start-placeholder="寮�濮嬫棩鏈�"
+                          end-placeholder="缁撴潫鏃ユ湡"
+                          value-format="YYYY-MM-DD"
+                          @change="handleDateChange"
+                          style="width: 240px;" />
+        </div>
+        <div class="filter-section">
+          <span class="filter-label">浜у搧绫诲瀷锛�</span>
+          <el-select v-model="productType"
+                     placeholder="璇烽�夋嫨浜у搧绫诲瀷"
+                     @change="handleFilterChange"
+                     style="width: 160px;">
+            <el-option label="鍏ㄩ儴"
+                       value="" />
+            <el-option label="鐮屽潡"
+                       value="block" />
+            <el-option label="鏉挎潗"
+                       value="board" />
+            <el-option label="鍨嬫潗"
+                       value="profile" />
+          </el-select>
+        </div>
+        <div class="filter-section">
+          <span class="filter-label">閿�鍞尯鍩燂細</span>
+          <el-select v-model="salesArea"
+                     placeholder="璇烽�夋嫨閿�鍞尯鍩�"
+                     @change="handleFilterChange"
+                     style="width: 160px;">
+            <el-option label="鍏ㄩ儴"
+                       value="" />
+            <el-option label="鍗庝笢"
+                       value="east" />
+            <el-option label="鍗庡寳"
+                       value="north" />
+            <el-option label="鍗庡崡"
+                       value="south" />
+            <el-option label="瑗垮崡"
+                       value="southwest" />
+            <el-option label="瑗垮寳"
+                       value="northwest" />
+          </el-select>
+        </div>
+        <div class="filter-section">
+          <span class="filter-label">缁熻缁村害锛�</span>
+          <el-select v-model="statDimension"
+                     placeholder="璇烽�夋嫨缁熻缁村害"
+                     @change="handleFilterChange"
+                     style="width: 160px;">
+            <el-option label="鏈堝害"
+                       value="month" />
+            <el-option label="骞村害"
+                       value="year" />
+          </el-select>
+        </div>
+      </div>
+      <div class="dashboard-content">
+        <!-- 鏍稿績鎸囨爣鍗＄墖 -->
+        <div class="row row-1">
+          <div class="panel-card card-1">
+            <div class="panel-title">鍚堣閿�閲�</div>
+            <div class="stats-grid">
+              <div class="stat-item">
+                <div class="stat-value sales-volume-color">{{ totalSalesVolume }}</div>
+                <div class="stat-unit">绔嬫柟绫�</div>
+                <div class="stat-change">{{ salesVolumeChange }}%</div>
+              </div>
+            </div>
+          </div>
+          <div class="panel-card card-2">
+            <div class="panel-title">閿�鍞噾棰�</div>
+            <div class="stats-grid">
+              <div class="stat-item">
+                <div class="stat-value sales-amount-color">{{ totalSalesAmount }}</div>
+                <div class="stat-unit">涓囧厓</div>
+                <div class="stat-change">{{ salesAmountChange }}%</div>
+              </div>
+            </div>
+          </div>
+          <div class="panel-card card-3">
+            <div class="panel-title">鏂板瀹㈡埛</div>
+            <div class="stats-grid">
+              <div class="stat-item">
+                <div class="stat-value new-customer-color">{{ newCustomerCount }}</div>
+                <div class="stat-unit">涓�</div>
+                <div class="stat-change">{{ customerCountChange }}%</div>
+              </div>
+            </div>
+          </div>
+          <div class="panel-card card-4">
+            <div class="panel-title">鍚堣瀹㈡埛</div>
+            <div class="stats-grid">
+              <div class="stat-item">
+                <div class="stat-value total-customer-color">{{ totalCustomerCount }}</div>
+                <div class="stat-unit">涓�</div>
+                <div class="stat-change">{{ totalCustomerChange }}%</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 閿�閲忓拰閿�鍞噾棰濊秼鍔� -->
+        <div class="row row-2">
+          <div class="panel-card card-5">
+            <div class="panel-title">閿�閲忚秼鍔�</div>
+            <div class="chart-container">
+              <div ref="salesVolumeChart"
+                   style="width: 100%; height: 100%;"></div>
+            </div>
+          </div>
+          <div class="panel-card card-6">
+            <div class="panel-title">閿�鍞噾棰濊秼鍔�</div>
+            <div class="chart-container">
+              <div ref="salesAmountChart"
+                   style="width: 100%; height: 100%;"></div>
+            </div>
+          </div>
+        </div>
+        <!-- 绱鏁版嵁瓒嬪娍 -->
+        <!-- <div class="row row-3">
+          <div class="panel-card card-10">
+            <div class="panel-title">绱閿�閲忚秼鍔�</div>
+            <div class="chart-container">
+              <div ref="cumulativeSalesVolumeChart"
+                   style="width: 100%; height: 100%;"></div>
+            </div>
+          </div>
+          <div class="panel-card card-11">
+            <div class="panel-title">绱閿�鍞噾棰濊秼鍔�</div>
+            <div class="chart-container">
+              <div ref="cumulativeSalesAmountChart"
+                   style="width: 100%; height: 100%;"></div>
+            </div>
+          </div>
+        </div> -->
+        <!-- 鍥捐〃鍖哄煙鍜岃〃鏍� -->
+        <div class="row row-4">
+          <!-- 宸﹁竟锛氳缁嗘暟鎹〃鏍� -->
+          <div class="panel-card card-9"
+               style="flex: 2;">
+            <div class="panel-title">閿�鍞粺璁¤缁嗘暟鎹�</div>
+            <div class="table-container">
+              <el-table :data="tableData"
+                        style="width: 100%">
+                <el-table-column prop="productType"
+                                 label="浜у搧绫诲瀷"
+                                 width="120"
+                                 align="center">
+                  <template #default="scope">
+                    <el-tag :type="getProductTypeType(scope.row.productType)">
+                      {{ scope.row.productType }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="salesArea"
+                                 label="閿�鍞尯鍩�"
+                                 width="120"
+                                 align="center">
+                  <template #default="scope">
+                    <el-tag :type="getSalesAreaType(scope.row.salesArea)">
+                      {{ scope.row.salesArea }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="period"
+                                 label="缁熻鍛ㄦ湡"
+                                 width="120" />
+                <el-table-column prop="salesVolume"
+                                 label="閿�閲�(绔嬫柟绫�)"
+                                 align="right">
+                  <template #default="scope">
+                    <span class="data-value">{{ scope.row.salesVolume }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="salesAmount"
+                                 label="閿�鍞噾棰�(涓囧厓)"
+                                 align="right">
+                  <template #default="scope">
+                    <span class="data-value">{{ scope.row.salesAmount }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="newCustomers"
+                                 label="鏂板瀹㈡埛(涓�)"
+                                 width="150"
+                                 align="right">
+                  <template #default="scope">
+                    <span class="data-value">{{ scope.row.newCustomers }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="totalCustomers"
+                                 label="鍚堣瀹㈡埛(涓�)"
+                                 width="150"
+                                 align="right">
+                  <template #default="scope">
+                    <span class="data-value">{{ scope.row.totalCustomers }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+          <!-- 鍙宠竟锛氫骇鍝佺被鍨嬪垎甯冨拰閿�鍞尯鍩熷垎甯� -->
+          <div class="chart-column"
+               style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
+            <div class="panel-card card-7"
+                 style="flex: 1;">
+              <div class="panel-title">浜у搧绫诲瀷鍒嗗竷</div>
+              <div class="chart-container">
+                <div ref="productTypeChart"
+                     style="width: 100%; height: 100%;"></div>
+              </div>
+            </div>
+            <div class="panel-card card-8"
+                 style="flex: 1;">
+              <div class="panel-title">閿�鍞尯鍩熷垎甯�</div>
+              <div class="chart-container">
+                <div ref="salesAreaChart"
+                     style="width: 100%; height: 100%;"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref,
+    computed,
+    onMounted,
+    onBeforeUnmount,
+    watch,
+    nextTick,
+  } from "vue";
+  import { useRouter } from "vue-router";
+  import * as echarts from "echarts";
+  import dayjs from "dayjs";
+
+  const router = useRouter();
+
+  // 绛涢�夋潯浠�
+  const dateRange = ref([]);
+  const productType = ref("");
+  const salesArea = ref("");
+  const statDimension = ref("month");
+
+  // 鍥捐〃寮曠敤
+  const salesVolumeChart = ref(null);
+  const salesAmountChart = ref(null);
+  const productTypeChart = ref(null);
+  const salesAreaChart = ref(null);
+  const cumulativeSalesVolumeChart = ref(null);
+  const cumulativeSalesAmountChart = ref(null);
+
+  // 鍥捐〃瀹炰緥
+  let salesVolumeChartInstance = null;
+  let salesAmountChartInstance = null;
+  let productTypeChartInstance = null;
+  let salesAreaChartInstance = null;
+  let cumulativeSalesVolumeChartInstance = null;
+  let cumulativeSalesAmountChartInstance = null;
+
+  // 妯℃嫙鏁版嵁
+  const mockData = [
+    // 2026骞�1鏈堟暟鎹�
+    {
+      productType: "鐮屽潡",
+      salesArea: "鍗庝笢",
+      period: "2026-01",
+      salesVolume: 1200,
+      salesAmount: 180,
+      newCustomers: 5,
+      totalCustomers: 120,
+    },
+    {
+      productType: "鐮屽潡",
+      salesArea: "鍗庡寳",
+      period: "2026-01",
+      salesVolume: 800,
+      salesAmount: 120,
+      newCustomers: 3,
+      totalCustomers: 80,
+    },
+    {
+      productType: "鐮屽潡",
+      salesArea: "鍗庡崡",
+      period: "2026-01",
+      salesVolume: 600,
+      salesAmount: 90,
+      newCustomers: 2,
+      totalCustomers: 60,
+    },
+    {
+      productType: "鏉挎潗",
+      salesArea: "鍗庝笢",
+      period: "2026-01",
+      salesVolume: 900,
+      salesAmount: 270,
+      newCustomers: 4,
+      totalCustomers: 100,
+    },
+    {
+      productType: "鏉挎潗",
+      salesArea: "鍗庡寳",
+      period: "2026-01",
+      salesVolume: 500,
+      salesAmount: 150,
+      newCustomers: 2,
+      totalCustomers: 70,
+    },
+    {
+      productType: "鍨嬫潗",
+      salesArea: "鍗庝笢",
+      period: "2026-01",
+      salesVolume: 400,
+      salesAmount: 200,
+      newCustomers: 3,
+      totalCustomers: 50,
+    },
+    // 2026骞�2鏈堟暟鎹�
+    {
+      productType: "鐮屽潡",
+      salesArea: "鍗庝笢",
+      period: "2026-02",
+      salesVolume: 1300,
+      salesAmount: 195,
+      newCustomers: 4,
+      totalCustomers: 124,
+    },
+    {
+      productType: "鐮屽潡",
+      salesArea: "鍗庡寳",
+      period: "2026-02",
+      salesVolume: 850,
+      salesAmount: 127.5,
+      newCustomers: 2,
+      totalCustomers: 82,
+    },
+    {
+      productType: "鐮屽潡",
+      salesArea: "鍗庡崡",
+      period: "2026-02",
+      salesVolume: 650,
+      salesAmount: 97.5,
+      newCustomers: 1,
+      totalCustomers: 61,
+    },
+    {
+      productType: "鏉挎潗",
+      salesArea: "鍗庝笢",
+      period: "2026-02",
+      salesVolume: 950,
+      salesAmount: 285,
+      newCustomers: 3,
+      totalCustomers: 103,
+    },
+    {
+      productType: "鏉挎潗",
+      salesArea: "鍗庡寳",
+      period: "2026-02",
+      salesVolume: 550,
+      salesAmount: 165,
+      newCustomers: 1,
+      totalCustomers: 71,
+    },
+    {
+      productType: "鍨嬫潗",
+      salesArea: "鍗庝笢",
+      period: "2026-02",
+      salesVolume: 450,
+      salesAmount: 225,
+      newCustomers: 2,
+      totalCustomers: 52,
+    },
+    // 2026骞�3鏈堟暟鎹�
+    {
+      productType: "鐮屽潡",
+      salesArea: "鍗庝笢",
+      period: "2026-03",
+      salesVolume: 1400,
+      salesAmount: 210,
+      newCustomers: 6,
+      totalCustomers: 130,
+    },
+    {
+      productType: "鐮屽潡",
+      salesArea: "鍗庡寳",
+      period: "2026-03",
+      salesVolume: 900,
+      salesAmount: 135,
+      newCustomers: 3,
+      totalCustomers: 85,
+    },
+    {
+      productType: "鐮屽潡",
+      salesArea: "鍗庡崡",
+      period: "2026-03",
+      salesVolume: 700,
+      salesAmount: 105,
+      newCustomers: 2,
+      totalCustomers: 63,
+    },
+    {
+      productType: "鏉挎潗",
+      salesArea: "鍗庝笢",
+      period: "2026-03",
+      salesVolume: 1000,
+      salesAmount: 300,
+      newCustomers: 5,
+      totalCustomers: 108,
+    },
+    {
+      productType: "鏉挎潗",
+      salesArea: "鍗庡寳",
+      period: "2026-03",
+      salesVolume: 600,
+      salesAmount: 180,
+      newCustomers: 2,
+      totalCustomers: 73,
+    },
+    {
+      productType: "鍨嬫潗",
+      salesArea: "鍗庝笢",
+      period: "2026-03",
+      salesVolume: 500,
+      salesAmount: 250,
+      newCustomers: 3,
+      totalCustomers: 55,
+    },
+    // 瑗垮崡鍜岃タ鍖楀湴鍖烘暟鎹�
+    {
+      productType: "鐮屽潡",
+      salesArea: "瑗垮崡",
+      period: "2026-03",
+      salesVolume: 500,
+      salesAmount: 75,
+      newCustomers: 2,
+      totalCustomers: 40,
+    },
+    {
+      productType: "鏉挎潗",
+      salesArea: "瑗垮崡",
+      period: "2026-03",
+      salesVolume: 300,
+      salesAmount: 90,
+      newCustomers: 1,
+      totalCustomers: 30,
+    },
+    {
+      productType: "鐮屽潡",
+      salesArea: "瑗垮寳",
+      period: "2026-03",
+      salesVolume: 400,
+      salesAmount: 60,
+      newCustomers: 1,
+      totalCustomers: 35,
+    },
+    {
+      productType: "鏉挎潗",
+      salesArea: "瑗垮寳",
+      period: "2026-03",
+      salesVolume: 200,
+      salesAmount: 60,
+      newCustomers: 1,
+      totalCustomers: 25,
+    },
+  ];
+
+  // 璁＄畻灞炴��
+  const filteredData = computed(() => {
+    let result = [...mockData];
+
+    // 鎸変骇鍝佺被鍨嬬瓫閫�
+    if (productType.value) {
+      result = result.filter(item => {
+        const typeMap = { block: "鐮屽潡", board: "鏉挎潗", profile: "鍨嬫潗" };
+        return item.productType === typeMap[productType.value];
+      });
+    }
+
+    // 鎸夐攢鍞尯鍩熺瓫閫�
+    if (salesArea.value) {
+      result = result.filter(item => {
+        const areaMap = {
+          east: "鍗庝笢",
+          north: "鍗庡寳",
+          south: "鍗庡崡",
+          southwest: "瑗垮崡",
+          northwest: "瑗垮寳",
+        };
+        return item.salesArea === areaMap[salesArea.value];
+      });
+    }
+
+    // 鎸夋椂闂磋寖鍥寸瓫閫�
+    if (dateRange.value && dateRange.value.length === 2) {
+      const startDate = dayjs(dateRange.value[0]);
+      const endDate = dayjs(dateRange.value[1]);
+
+      result = result.filter(item => {
+        const itemDate = dayjs(item.period);
+        return (
+          itemDate.isAfter(startDate.subtract(1, "day")) &&
+          itemDate.isBefore(endDate.add(1, "day"))
+        );
+      });
+    }
+
+    return result;
+  });
+
+  // 鏍稿績鎸囨爣璁＄畻
+  const totalSalesVolume = computed(() => {
+    return filteredData.value.reduce((sum, item) => sum + item.salesVolume, 0);
+  });
+
+  const totalSalesAmount = computed(() => {
+    return filteredData.value
+      .reduce((sum, item) => sum + item.salesAmount, 0)
+      .toFixed(2);
+  });
+
+  const newCustomerCount = computed(() => {
+    return filteredData.value.reduce((sum, item) => sum + item.newCustomers, 0);
+  });
+
+  const totalCustomerCount = computed(() => {
+    // 璁＄畻姣忎釜鍖哄煙鍜屼骇鍝佺被鍨嬬殑鏈�澶у鎴锋暟
+    const customerMap = {};
+    filteredData.value.forEach(item => {
+      const key = `${item.productType}-${item.salesArea}`;
+      if (!customerMap[key] || item.totalCustomers > customerMap[key]) {
+        customerMap[key] = item.totalCustomers;
+      }
+    });
+    return Object.values(customerMap).reduce((sum, count) => sum + count, 0);
+  });
+
+  // 鍙樺寲鐜囪绠楋紙妯℃嫙锛�
+  const salesVolumeChange = ref("+5.2");
+  const salesAmountChange = ref("+7.8");
+  const customerCountChange = ref("+3.5");
+  const totalCustomerChange = ref("+2.1");
+
+  // 琛ㄦ牸鏁版嵁
+  const tableData = computed(() => {
+    return filteredData.value.map(item => {
+      // 璁＄畻绱鍊硷紙妯℃嫙锛�
+      const cumulativeSalesVolume = item.salesVolume * 1.5;
+      const cumulativeSalesAmount = item.salesAmount * 1.5;
+      const cumulativeNewCustomers = item.newCustomers * 2;
+
+      return {
+        ...item,
+        cumulativeSalesVolume,
+        cumulativeSalesAmount,
+        cumulativeNewCustomers,
+      };
+    });
+  });
+
+  // 閿�閲忚秼鍔垮浘琛ㄩ厤缃�
+  const salesVolumeChartOption = computed(() => {
+    // 鎸夊懆鏈熷垎缁�
+    const periodMap = {};
+    filteredData.value.forEach(item => {
+      if (!periodMap[item.period]) {
+        periodMap[item.period] = 0;
+      }
+      periodMap[item.period] += item.salesVolume;
+    });
+
+    const periods = Object.keys(periodMap).sort();
+    const values = periods.map(period => periodMap[period]);
+
+    return {
+      tooltip: {
+        trigger: "axis",
+        formatter: "{b}: {c} 绔嬫柟绫�",
+      },
+      xAxis: {
+        type: "category",
+        data: periods,
+      },
+      yAxis: {
+        type: "value",
+        name: "閿�閲忥紙绔嬫柟绫筹級",
+      },
+      series: [
+        {
+          data: values,
+          type: "line",
+          smooth: true,
+          lineStyle: {
+            width: 3,
+          },
+          itemStyle: {
+            color: "#409EFF",
+          },
+        },
+      ],
+    };
+  });
+
+  // 閿�鍞噾棰濊秼鍔垮浘琛ㄩ厤缃�
+  const salesAmountChartOption = computed(() => {
+    // 鎸夊懆鏈熷垎缁�
+    const periodMap = {};
+    filteredData.value.forEach(item => {
+      if (!periodMap[item.period]) {
+        periodMap[item.period] = 0;
+      }
+      periodMap[item.period] += item.salesAmount;
+    });
+
+    const periods = Object.keys(periodMap).sort();
+    const values = periods.map(period => periodMap[period]);
+
+    return {
+      tooltip: {
+        trigger: "axis",
+        formatter: "{b}: {c} 涓囧厓",
+      },
+      xAxis: {
+        type: "category",
+        data: periods,
+      },
+      yAxis: {
+        type: "value",
+        name: "閿�鍞噾棰濓紙涓囧厓锛�",
+      },
+      series: [
+        {
+          data: values,
+          type: "bar",
+          itemStyle: {
+            color: "#67C23A",
+          },
+        },
+      ],
+    };
+  });
+
+  // 浜у搧绫诲瀷鍒嗗竷鍥捐〃閰嶇疆
+  const productTypeChartOption = computed(() => {
+    // 鎸変骇鍝佺被鍨嬪垎缁�
+    const typeMap = {};
+    filteredData.value.forEach(item => {
+      if (!typeMap[item.productType]) {
+        typeMap[item.productType] = 0;
+      }
+      typeMap[item.productType] += item.salesVolume;
+    });
+
+    const types = Object.keys(typeMap);
+    const values = types.map(type => typeMap[type]);
+
+    return {
+      tooltip: {
+        trigger: "item",
+        formatter: "{b}: {c} 绔嬫柟绫� ({d}%)",
+      },
+      series: [
+        {
+          type: "pie",
+          radius: "60%",
+          data: types.map((type, index) => ({
+            name: type,
+            value: values[index],
+          })),
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
+    };
+  });
+
+  // 閿�鍞尯鍩熷垎甯冨浘琛ㄩ厤缃�
+  const salesAreaChartOption = computed(() => {
+    // 鎸夐攢鍞尯鍩熷垎缁�
+    const areaMap = {};
+    filteredData.value.forEach(item => {
+      if (!areaMap[item.salesArea]) {
+        areaMap[item.salesArea] = 0;
+      }
+      areaMap[item.salesArea] += item.salesVolume;
+    });
+
+    const areas = Object.keys(areaMap);
+    const values = areas.map(area => areaMap[area]);
+
+    return {
+      tooltip: {
+        trigger: "item",
+        formatter: "{b}: {c} 绔嬫柟绫� ({d}%)",
+      },
+      series: [
+        {
+          type: "pie",
+          radius: "60%",
+          data: areas.map((area, index) => ({
+            name: area,
+            value: values[index],
+          })),
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: "rgba(0, 0, 0, 0.5)",
+            },
+          },
+        },
+      ],
+    };
+  });
+
+  // 绱閿�閲忚秼鍔垮浘琛ㄩ厤缃�
+  const cumulativeSalesVolumeChartOption = computed(() => {
+    // 鎸夊懆鏈熷垎缁�
+    const periodMap = {};
+    let cumulativeValue = 0;
+
+    // 鎸夊懆鏈熸帓搴�
+    const sortedData = [...filteredData.value].sort((a, b) =>
+      a.period.localeCompare(b.period)
+    );
+
+    sortedData.forEach(item => {
+      cumulativeValue += item.salesVolume;
+      periodMap[item.period] = cumulativeValue;
+    });
+
+    const periods = Object.keys(periodMap).sort();
+    const values = periods.map(period => periodMap[period]);
+
+    return {
+      tooltip: {
+        trigger: "axis",
+        formatter: "{b}: {c} 绔嬫柟绫�",
+      },
+      xAxis: {
+        type: "category",
+        data: periods,
+      },
+      yAxis: {
+        type: "value",
+        name: "绱閿�閲忥紙绔嬫柟绫筹級",
+      },
+      series: [
+        {
+          data: values,
+          type: "line",
+          smooth: true,
+          areaStyle: {
+            opacity: 0.3,
+          },
+          itemStyle: {
+            color: "#E6A23C",
+          },
+          lineStyle: {
+            width: 3,
+          },
+        },
+      ],
+    };
+  });
+
+  // 绱閿�鍞噾棰濊秼鍔垮浘琛ㄩ厤缃�
+  const cumulativeSalesAmountChartOption = computed(() => {
+    // 鎸夊懆鏈熷垎缁�
+    const periodMap = {};
+    let cumulativeValue = 0;
+
+    // 鎸夊懆鏈熸帓搴�
+    const sortedData = [...filteredData.value].sort((a, b) =>
+      a.period.localeCompare(b.period)
+    );
+
+    sortedData.forEach(item => {
+      cumulativeValue += item.salesAmount;
+      periodMap[item.period] = cumulativeValue;
+    });
+
+    const periods = Object.keys(periodMap).sort();
+    const values = periods.map(period => periodMap[period]);
+
+    return {
+      tooltip: {
+        trigger: "axis",
+        formatter: "{b}: {c} 涓囧厓",
+      },
+      xAxis: {
+        type: "category",
+        data: periods,
+      },
+      yAxis: {
+        type: "value",
+        name: "绱閿�鍞噾棰濓紙涓囧厓锛�",
+      },
+      series: [
+        {
+          data: values,
+          type: "bar",
+          itemStyle: {
+            color: "#F56C6C",
+          },
+        },
+      ],
+    };
+  });
+
+  // 鏂规硶
+  const goBack = () => {
+    router.back();
+  };
+
+  const handleDateChange = () => {
+    // 澶勭悊鏃ユ湡鍙樺寲
+    updateCharts();
+  };
+
+  const handleFilterChange = () => {
+    // 澶勭悊绛涢�夋潯浠跺彉鍖�
+    updateCharts();
+  };
+
+  // 鍒濆鍖栧浘琛�
+  const initCharts = () => {
+    // 鍒濆鍖栭攢閲忚秼鍔垮浘琛�
+    if (salesVolumeChart.value && !salesVolumeChartInstance) {
+      salesVolumeChartInstance = echarts.init(salesVolumeChart.value);
+    }
+
+    // 鍒濆鍖栭攢鍞噾棰濊秼鍔垮浘琛�
+    if (salesAmountChart.value && !salesAmountChartInstance) {
+      salesAmountChartInstance = echarts.init(salesAmountChart.value);
+    }
+
+    // 鍒濆鍖栦骇鍝佺被鍨嬪垎甯冨浘琛�
+    if (productTypeChart.value && !productTypeChartInstance) {
+      productTypeChartInstance = echarts.init(productTypeChart.value);
+    }
+
+    // 鍒濆鍖栭攢鍞尯鍩熷垎甯冨浘琛�
+    if (salesAreaChart.value && !salesAreaChartInstance) {
+      salesAreaChartInstance = echarts.init(salesAreaChart.value);
+    }
+
+    // 鍒濆鍖栫疮璁￠攢閲忚秼鍔垮浘琛�
+    if (cumulativeSalesVolumeChart.value && !cumulativeSalesVolumeChartInstance) {
+      cumulativeSalesVolumeChartInstance = echarts.init(
+        cumulativeSalesVolumeChart.value
+      );
+    }
+
+    // 鍒濆鍖栫疮璁￠攢鍞噾棰濊秼鍔垮浘琛�
+    if (cumulativeSalesAmountChart.value && !cumulativeSalesAmountChartInstance) {
+      cumulativeSalesAmountChartInstance = echarts.init(
+        cumulativeSalesAmountChart.value
+      );
+    }
+
+    updateCharts();
+  };
+
+  // 鏇存柊鍥捐〃
+  const updateCharts = () => {
+    // 鏇存柊閿�閲忚秼鍔垮浘琛�
+    if (salesVolumeChartInstance) {
+      salesVolumeChartInstance.setOption(salesVolumeChartOption.value);
+    }
+
+    // 鏇存柊閿�鍞噾棰濊秼鍔垮浘琛�
+    if (salesAmountChartInstance) {
+      salesAmountChartInstance.setOption(salesAmountChartOption.value);
+    }
+
+    // 鏇存柊浜у搧绫诲瀷鍒嗗竷鍥捐〃
+    if (productTypeChartInstance) {
+      productTypeChartInstance.setOption(productTypeChartOption.value);
+    }
+
+    // 鏇存柊閿�鍞尯鍩熷垎甯冨浘琛�
+    if (salesAreaChartInstance) {
+      salesAreaChartInstance.setOption(salesAreaChartOption.value);
+    }
+
+    // 鏇存柊绱閿�閲忚秼鍔垮浘琛�
+    if (cumulativeSalesVolumeChartInstance) {
+      cumulativeSalesVolumeChartInstance.setOption(
+        cumulativeSalesVolumeChartOption.value
+      );
+    }
+
+    // 鏇存柊绱閿�鍞噾棰濊秼鍔垮浘琛�
+    if (cumulativeSalesAmountChartInstance) {
+      cumulativeSalesAmountChartInstance.setOption(
+        cumulativeSalesAmountChartOption.value
+      );
+    }
+  };
+
+  // 鐩戝惉绐楀彛澶у皬鍙樺寲
+  const handleResize = () => {
+    if (salesVolumeChartInstance) {
+      salesVolumeChartInstance.resize();
+    }
+    if (salesAmountChartInstance) {
+      salesAmountChartInstance.resize();
+    }
+    if (productTypeChartInstance) {
+      productTypeChartInstance.resize();
+    }
+    if (salesAreaChartInstance) {
+      salesAreaChartInstance.resize();
+    }
+    if (cumulativeSalesVolumeChartInstance) {
+      cumulativeSalesVolumeChartInstance.resize();
+    }
+    if (cumulativeSalesAmountChartInstance) {
+      cumulativeSalesAmountChartInstance.resize();
+    }
+  };
+
+  // 鐢熷懡鍛ㄦ湡
+  onMounted(() => {
+    // 璁剧疆榛樿鏃ユ湡鑼冨洿涓烘渶杩�3涓湀
+    const endDate = dayjs();
+    const startDate = endDate.subtract(3, "month");
+    dateRange.value = [
+      startDate.format("YYYY-MM-DD"),
+      endDate.format("YYYY-MM-DD"),
+    ];
+
+    // 绛夊緟DOM鏇存柊鍚庡垵濮嬪寲鍥捐〃
+    nextTick(() => {
+      initCharts();
+    });
+
+    // 娣诲姞绐楀彛澶у皬鍙樺寲鐩戝惉
+    window.addEventListener("resize", handleResize);
+  });
+
+  // 鑾峰彇浜у搧绫诲瀷鏍囩绫诲瀷
+  const getProductTypeType = type => {
+    const typeMap = {
+      鐮屽潡: "primary",
+      鏉挎潗: "success",
+      鍨嬫潗: "warning",
+    };
+    return typeMap[type] || "info";
+  };
+
+  // 鑾峰彇閿�鍞尯鍩熸爣绛剧被鍨�
+  const getSalesAreaType = area => {
+    const typeMap = {
+      鍗庝笢: "primary",
+      鍗庡寳: "success",
+      鍗庡崡: "warning",
+      瑗垮崡: "danger",
+      瑗垮寳: "info",
+    };
+    return typeMap[area] || "info";
+  };
+
+  // 缁勪欢鍗歌浇鏃堕攢姣佸浘琛ㄥ疄渚�
+  onBeforeUnmount(() => {
+    if (salesVolumeChartInstance) {
+      salesVolumeChartInstance.dispose();
+    }
+    if (salesAmountChartInstance) {
+      salesAmountChartInstance.dispose();
+    }
+    if (productTypeChartInstance) {
+      productTypeChartInstance.dispose();
+    }
+    if (salesAreaChartInstance) {
+      salesAreaChartInstance.dispose();
+    }
+    if (cumulativeSalesVolumeChartInstance) {
+      cumulativeSalesVolumeChartInstance.dispose();
+    }
+    if (cumulativeSalesAmountChartInstance) {
+      cumulativeSalesAmountChartInstance.dispose();
+    }
+
+    // 绉婚櫎绐楀彛澶у皬鍙樺寲鐩戝惉
+    window.removeEventListener("resize", handleResize);
+  });
+</script>
+
+<style scoped>
+  /* 澶栭儴瀹瑰櫒 - 鍗犳嵁鏁翠釜瑙嗗彛 */
+  .sales-statistics-container {
+    position: relative;
+    width: 100%;
+    /* 椤甸潰鍦ㄥ父瑙勫竷灞�涓嬶紙鏈夐《鏍忥級榛樿鍑忓幓 84px锛岄伩鍏嶅唴瀹硅瑁佸垏 */
+    min-height: calc(100vh - 84px);
+    background-color: #f5f7fa;
+    overflow: hidden;
+  }
+
+  /* 鍐呴儴鍐呭鍖哄煙 - 鑷�傚簲瀹藉害 */
+  .data-dashboard {
+    position: relative;
+    width: 100%;
+    min-height: 100%;
+    background-color: #ffffff;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  }
+
+  .filter-area {
+    padding: 20px;
+    background-color: #ffffff;
+    border-bottom: 1px solid #e4e7ed;
+    display: flex;
+    gap: 40px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .filter-section {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .filter-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    white-space: nowrap;
+  }
+
+  .dashboard-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 20px;
+    min-height: 800px;
+    overflow: hidden;
+  }
+
+  /* 琛屽竷灞� */
+  .row {
+    display: flex;
+    gap: 20px;
+    align-items: stretch;
+  }
+
+  /* 绗竴琛岋細4涓寚鏍囧崱鐗� */
+  .row-1 {
+    height: 180px;
+  }
+
+  /* 绗簩琛岋細2涓秼鍔垮浘琛� */
+  .row-2 {
+    height: 350px;
+  }
+
+  /* 绗笁琛岋細绱鏁版嵁瓒嬪娍 */
+  .row-3 {
+    height: 350px;
+  }
+
+  /* 绗洓琛岋細琛ㄦ牸鍜屽浘琛� */
+  .row-4 {
+    height: 600px;
+  }
+
+  /* 鍗＄墖鏍峰紡 */
+  .panel-card {
+    background-color: #ffffff;
+    border-radius: 8px;
+    border: 1px solid #e4e7ed;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+  }
+
+  .panel-card:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    transform: translateY(-2px);
+  }
+
+  /* 鍗＄墖甯冨眬 */
+  .card-1 {
+    flex: 1;
+  }
+
+  .card-2 {
+    flex: 1;
+  }
+
+  .card-3 {
+    flex: 1;
+  }
+
+  .card-4 {
+    flex: 1;
+  }
+
+  .card-5 {
+    flex: 1;
+  }
+
+  .card-6 {
+    flex: 1;
+  }
+
+  .card-7 {
+    flex: 1;
+  }
+
+  .card-8 {
+    flex: 1;
+  }
+
+  .card-9 {
+    flex: 1;
+  }
+
+  .card-10 {
+    flex: 1;
+  }
+
+  .card-11 {
+    flex: 1;
+  }
+
+  .panel-title {
+    padding: 15px 20px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #303133;
+    border-bottom: 1px solid #e4e7ed;
+    background-color: #fafafa;
+  }
+
+  .card-1 .panel-title {
+    border-left: 4px solid #409eff;
+  }
+
+  .card-2 .panel-title {
+    border-left: 4px solid #67c23a;
+  }
+
+  .card-3 .panel-title {
+    border-left: 4px solid #e6a23c;
+  }
+
+  .card-4 .panel-title {
+    border-left: 4px solid #f56c6c;
+  }
+
+  .card-5 .panel-title {
+    border-left: 4px solid #409eff;
+  }
+
+  .card-6 .panel-title {
+    border-left: 4px solid #67c23a;
+  }
+
+  .card-7 .panel-title {
+    border-left: 4px solid #e6a23c;
+  }
+
+  .card-8 .panel-title {
+    border-left: 4px solid #f56c6c;
+  }
+
+  .card-9 .panel-title {
+    border-left: 4px solid #409eff;
+  }
+
+  .card-10 .panel-title {
+    border-left: 4px solid #67c23a;
+  }
+
+  .card-11 .panel-title {
+    border-left: 4px solid #e6a23c;
+  }
+
+  .chart-container {
+    flex: 1;
+    padding: 20px;
+  }
+
+  .table-container {
+    flex: 1;
+    padding: 20px;
+    overflow: auto;
+  }
+
+  .stats-grid {
+    flex: 1;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .stat-item {
+    background-color: #fafafa;
+    border-radius: 8px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e4e7ed;
+    min-height: 80px;
+    width: 100%;
+  }
+
+  .stat-value {
+    font-size: 24px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 5px;
+  }
+
+  .sales-volume-color {
+    color: #409eff;
+    text-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  }
+
+  .sales-amount-color {
+    color: #67c23a;
+    text-shadow: 0 2px 4px rgba(103, 194, 58, 0.3);
+  }
+
+  .new-customer-color {
+    color: #e6a23c;
+    text-shadow: 0 2px 4px rgba(230, 162, 60, 0.3);
+  }
+
+  .total-customer-color {
+    color: #f56c6c;
+    text-shadow: 0 2px 4px rgba(245, 108, 108, 0.3);
+  }
+
+  .stat-unit {
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 3px;
+  }
+
+  .stat-change {
+    font-size: 12px;
+    color: #67c23a;
+  }
+
+  /* 琛ㄦ牸鏍峰紡 */
+  :deep(.el-table) {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  :deep(.el-table th) {
+    background-color: #fafafa;
+    font-weight: 500;
+  }
+
+  :deep(.el-table tr:hover > td) {
+    background-color: #ecf5ff;
+  }
+
+  .data-value {
+    font-weight: bold;
+    color: #409eff;
+  }
+
+  /* 涓嬫媺閫夋嫨妗嗘牱寮� */
+  :deep(.el-select) {
+    width: 100%;
+  }
+
+  :deep(.el-date-picker) {
+    width: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/reportAnalysis/salesStatistics/index.vue b/src/views/reportAnalysis/salesStatistics/index.vue
index d1c76d4..c9412c1 100644
--- a/src/views/reportAnalysis/salesStatistics/index.vue
+++ b/src/views/reportAnalysis/salesStatistics/index.vue
@@ -1,235 +1,169 @@
 <template>
-  <div class="sales-statistics-container">
-    <div class="data-dashboard">
-      <!-- 椤甸潰鏍囬 -->
-      <!-- <div class="dashboard-header">
-        <div class="factory-name">閿�鍞粺璁＄湅鏉�</div>
-      </div> -->
-      <!-- 绛涢�夋潯浠� -->
-      <div class="filter-area">
-        <div class="filter-section">
-          <span class="filter-label">鏃堕棿鑼冨洿锛�</span>
-          <el-date-picker v-model="dateRange"
-                          type="daterange"
-                          range-separator="鑷�"
-                          start-placeholder="寮�濮嬫棩鏈�"
-                          end-placeholder="缁撴潫鏃ユ湡"
-                          value-format="YYYY-MM-DD"
-                          @change="handleDateChange"
-                          style="width: 240px;" />
+  <div ref="screenRoot" class="sales-statistics-container" :class="{ 'is-fullscreen': isFullscreen }">
+    <div class="bi-bg"></div>
+
+    <div class="bi-topbar">
+      <img class="bi-topbar-title-bg" src="@/assets/BI/biaoti.png" alt="閿�鍞湅鏉跨粺璁�" />
+      <div class="bi-topbar-content">
+        <div class="bi-topbar-left">
+          <span class="status-sun">鈽�</span>
+          <span>26鈩�</span>
+          <span class="bi-topbar-sep">婀垮害锛�1</span>
         </div>
-        <div class="filter-section">
-          <span class="filter-label">浜у搧绫诲瀷锛�</span>
-          <el-select v-model="productType"
-                     placeholder="璇烽�夋嫨浜у搧绫诲瀷"
-                     @change="handleFilterChange"
-                     style="width: 160px;">
-            <el-option label="鍏ㄩ儴"
-                       value="" />
-            <el-option label="鐮屽潡"
-                       value="block" />
-            <el-option label="鏉挎潗"
-                       value="board" />
-            <el-option label="鍨嬫潗"
-                       value="profile" />
-          </el-select>
+        <div class="bi-topbar-title">閿�鍞湅鏉跨粺璁�</div>
+        <div class="bi-topbar-meta">
+          <span class="bi-topbar-time">{{ currentTime }}</span>
+          <span class="bi-topbar-sep">|</span>
+          <span class="bi-topbar-date">{{ currentDateText }}</span>
         </div>
-        <div class="filter-section">
-          <span class="filter-label">閿�鍞尯鍩燂細</span>
-          <el-select v-model="salesArea"
-                     placeholder="璇烽�夋嫨閿�鍞尯鍩�"
-                     @change="handleFilterChange"
-                     style="width: 160px;">
-            <el-option label="鍏ㄩ儴"
-                       value="" />
-            <el-option label="鍗庝笢"
-                       value="east" />
-            <el-option label="鍗庡寳"
-                       value="north" />
-            <el-option label="鍗庡崡"
-                       value="south" />
-            <el-option label="瑗垮崡"
-                       value="southwest" />
-            <el-option label="瑗垮寳"
-                       value="northwest" />
-          </el-select>
+        <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '閫�鍑哄叏灞�' : '鍏ㄥ睆鏄剧ず'">
+          <svg v-if="!isFullscreen" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
+          </svg>
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="bi-dashboard-grid">
+      <!-- 宸︿笂锛氶攢閲忚秼鍔� -->
+      <div class="bi-panel bi-panel-top-left">
+        <PanelHeader title="閿�鍞垎鏋�-鐮屽潡" />
+        <div class="panel-tabs">
+          <span class="tab-item active">骞�</span>
+          <span class="tab-item">鏈�</span>
         </div>
-        <div class="filter-section">
-          <span class="filter-label">缁熻缁村害锛�</span>
-          <el-select v-model="statDimension"
-                     placeholder="璇烽�夋嫨缁熻缁村害"
-                     @change="handleFilterChange"
-                     style="width: 160px;">
-            <el-option label="鏈堝害"
-                       value="month" />
-            <el-option label="骞村害"
-                       value="year" />
-          </el-select>
+        <div class="bi-panel-body">
+          <div class="chart-filter-tabs">
+            <span class="cf-tab active">***閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+          </div>
+          <div class="chart-unit-row">
+            <span>鍗曚綅锛氱珛鏂圭背</span>
+            <span class="dot-legend">鏉挎潗</span>
+          </div>
+          <div ref="salesVolumeChart" class="echart-fill"></div>
         </div>
       </div>
-      <div class="dashboard-content">
-        <!-- 鏍稿績鎸囨爣鍗＄墖 -->
-        <div class="row row-1">
-          <div class="panel-card card-1">
-            <div class="panel-title">鍚堣閿�閲�</div>
-            <div class="stats-grid">
-              <div class="stat-item">
-                <div class="stat-value sales-volume-color">{{ totalSalesVolume }}</div>
-                <div class="stat-unit">绔嬫柟绫�</div>
-                <div class="stat-change">{{ salesVolumeChange }}%</div>
-              </div>
-            </div>
+
+      <!-- 鍙充笂锛氶攢鍞噾棰� -->
+      <div class="bi-panel bi-panel-top-right">
+        <PanelHeader title="閿�鍞垎鏋�-鏉挎潗" />
+        <div class="panel-tabs">
+          <span class="tab-item active">骞�</span>
+          <span class="tab-item">鏈�</span>
+        </div>
+        <div class="bi-panel-body">
+          <div class="chart-filter-tabs">
+            <span class="cf-tab active">***閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
           </div>
-          <div class="panel-card card-2">
-            <div class="panel-title">閿�鍞噾棰�</div>
-            <div class="stats-grid">
-              <div class="stat-item">
-                <div class="stat-value sales-amount-color">{{ totalSalesAmount }}</div>
-                <div class="stat-unit">涓囧厓</div>
-                <div class="stat-change">{{ salesAmountChange }}%</div>
-              </div>
-            </div>
+          <div class="chart-unit-row">
+            <span>鍗曚綅锛氫欢</span>
+            <span class="dot-legend">鏉挎潗</span>
           </div>
-          <div class="panel-card card-3">
-            <div class="panel-title">鏂板瀹㈡埛</div>
-            <div class="stats-grid">
-              <div class="stat-item">
-                <div class="stat-value new-customer-color">{{ newCustomerCount }}</div>
-                <div class="stat-unit">涓�</div>
-                <div class="stat-change">{{ customerCountChange }}%</div>
-              </div>
-            </div>
+          <div ref="salesAmountChart" class="echart-fill"></div>
+        </div>
+      </div>
+
+      <!-- 涓棿涓績鐜� -->
+      <div class="center-ring">
+        <img
+          class="center-ring-bg"
+          src="@/assets/BI/zonghetongbingtubiankuang@2x.png"
+          alt=""
+        />
+        <div class="center-ring-content">
+          <div class="center-ring-title">閿�鍞�<br />涓績</div>
+
+          <div class="center-metric m1">
+            <div class="center-metric-label">鏂板瀹㈡埛</div>
+            <div class="center-metric-value">{{ centerNewCustomerCount }}</div>
+            <div class="center-metric-unit">浜�</div>
           </div>
-          <div class="panel-card card-4">
-            <div class="panel-title">鍚堣瀹㈡埛</div>
-            <div class="stats-grid">
-              <div class="stat-item">
-                <div class="stat-value total-customer-color">{{ totalCustomerCount }}</div>
-                <div class="stat-unit">涓�</div>
-                <div class="stat-change">{{ totalCustomerChange }}%</div>
-              </div>
-            </div>
+
+          <div class="center-metric m2">
+            <div class="center-metric-label">鎴愪氦鎬昏鍗�</div>
+            <div class="center-metric-value">{{ completedOrders }}</div>
+            <div class="center-metric-unit">鍗�</div>
+          </div>
+
+          <div class="center-metric m3">
+            <div class="center-metric-label">鏂板璁㈠崟</div>
+            <div class="center-metric-value">{{ salesOrderCount }}</div>
+            <div class="center-metric-unit">鍗�</div>
+          </div>
+
+          <div class="center-metric m4">
+            <div class="center-metric-label">鎬婚攢鍞尯</div>
+            <div class="center-metric-value">{{ totalSalesAreaCount }}</div>
+            <div class="center-metric-unit">鍖�</div>
           </div>
         </div>
-        <!-- 閿�閲忓拰閿�鍞噾棰濊秼鍔� -->
-        <div class="row row-2">
-          <div class="panel-card card-5">
-            <div class="panel-title">閿�閲忚秼鍔�</div>
-            <div class="chart-container">
-              <div ref="salesVolumeChart"
-                   style="width: 100%; height: 100%;"></div>
-            </div>
-          </div>
-          <div class="panel-card card-6">
-            <div class="panel-title">閿�鍞噾棰濊秼鍔�</div>
-            <div class="chart-container">
-              <div ref="salesAmountChart"
-                   style="width: 100%; height: 100%;"></div>
-            </div>
-          </div>
+      </div>
+
+      <!-- 宸︿笅锛氫骇鍝佺被鍨嬮攢閲� -->
+      <div class="bi-panel bi-panel-bottom-left">
+        <PanelHeader title="瀹㈡埛閿�閲忔帓鍚嶅垎鏋�-鐮屽潡" />
+        <div class="panel-tabs">
+          <span class="tab-item active">骞�</span>
+          <span class="tab-item">鏈�</span>
         </div>
-        <!-- 绱鏁版嵁瓒嬪娍 -->
-        <!-- <div class="row row-3">
-          <div class="panel-card card-10">
-            <div class="panel-title">绱閿�閲忚秼鍔�</div>
-            <div class="chart-container">
-              <div ref="cumulativeSalesVolumeChart"
-                   style="width: 100%; height: 100%;"></div>
-            </div>
+        <div class="bi-panel-body">
+          <div class="chart-filter-tabs">
+            <span class="cf-tab active">***閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
           </div>
-          <div class="panel-card card-11">
-            <div class="panel-title">绱閿�鍞噾棰濊秼鍔�</div>
-            <div class="chart-container">
-              <div ref="cumulativeSalesAmountChart"
-                   style="width: 100%; height: 100%;"></div>
-            </div>
+          <div ref="productTypeChart" class="echart-fill"></div>
+        </div>
+      </div>
+
+      <!-- 涓笅锛氭柊澧炲鎴峰垎鏋愶紙鍒嗕骇鍝佺被鍨嬭秼鍔匡級 -->
+      <div class="bi-panel bi-panel-bottom-center">
+        <PanelHeader title="鏂板瀹㈡埛瓒嬪娍鍒嗘瀽" />
+        <div class="panel-tabs">
+          <span class="tab-item active">骞�</span>
+          <span class="tab-item">鏈�</span>
+        </div>
+        <div class="bi-panel-body">
+          <div class="chart-mini-title">
+            <span class="diamond"></span>
+            <span>鏂板瀹㈡埛鏁�</span>
           </div>
-        </div> -->
-        <!-- 鍥捐〃鍖哄煙鍜岃〃鏍� -->
-        <div class="row row-4">
-          <!-- 宸﹁竟锛氳缁嗘暟鎹〃鏍� -->
-          <div class="panel-card card-9"
-               style="flex: 2;">
-            <div class="panel-title">閿�鍞粺璁¤缁嗘暟鎹�</div>
-            <div class="table-container">
-              <el-table :data="tableData"
-                        style="width: 100%">
-                <el-table-column prop="productType"
-                                 label="浜у搧绫诲瀷"
-                                 width="120"
-                                 align="center">
-                  <template #default="scope">
-                    <el-tag :type="getProductTypeType(scope.row.productType)">
-                      {{ scope.row.productType }}
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="salesArea"
-                                 label="閿�鍞尯鍩�"
-                                 width="120"
-                                 align="center">
-                  <template #default="scope">
-                    <el-tag :type="getSalesAreaType(scope.row.salesArea)">
-                      {{ scope.row.salesArea }}
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="period"
-                                 label="缁熻鍛ㄦ湡"
-                                 width="120" />
-                <el-table-column prop="salesVolume"
-                                 label="閿�閲�(绔嬫柟绫�)"
-                                 align="right">
-                  <template #default="scope">
-                    <span class="data-value">{{ scope.row.salesVolume }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="salesAmount"
-                                 label="閿�鍞噾棰�(涓囧厓)"
-                                 align="right">
-                  <template #default="scope">
-                    <span class="data-value">{{ scope.row.salesAmount }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="newCustomers"
-                                 label="鏂板瀹㈡埛(涓�)"
-                                 width="150"
-                                 align="right">
-                  <template #default="scope">
-                    <span class="data-value">{{ scope.row.newCustomers }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="totalCustomers"
-                                 label="鍚堣瀹㈡埛(涓�)"
-                                 width="150"
-                                 align="right">
-                  <template #default="scope">
-                    <span class="data-value">{{ scope.row.totalCustomers }}</span>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
+          <div class="chart-unit-row chart-unit-single">
+            <span>鍗曚綅锛氫汉</span>
           </div>
-          <!-- 鍙宠竟锛氫骇鍝佺被鍨嬪垎甯冨拰閿�鍞尯鍩熷垎甯� -->
-          <div class="chart-column"
-               style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
-            <div class="panel-card card-7"
-                 style="flex: 1;">
-              <div class="panel-title">浜у搧绫诲瀷鍒嗗竷</div>
-              <div class="chart-container">
-                <div ref="productTypeChart"
-                     style="width: 100%; height: 100%;"></div>
-              </div>
-            </div>
-            <div class="panel-card card-8"
-                 style="flex: 1;">
-              <div class="panel-title">閿�鍞尯鍩熷垎甯�</div>
-              <div class="chart-container">
-                <div ref="salesAreaChart"
-                     style="width: 100%; height: 100%;"></div>
-              </div>
-            </div>
+          <div ref="productTypeTrendChart" class="echart-fill"></div>
+        </div>
+      </div>
+
+      <!-- 鍙充笅锛氶攢鍞尯鍩熼攢閲� -->
+      <div class="bi-panel bi-panel-bottom-right">
+        <PanelHeader title="瀹㈡埛閿�閲忔帓鍚嶅垎鏋�-鏉挎潗" />
+        <div class="panel-tabs">
+          <span class="tab-item active">骞�</span>
+          <span class="tab-item">鏈�</span>
+        </div>
+        <div class="bi-panel-body">
+          <div class="chart-filter-tabs">
+            <span class="cf-tab active">***閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
+            <span class="cf-tab">xxx閿�鍞尯</span>
           </div>
+          <div ref="salesAreaChart" class="echart-fill"></div>
         </div>
       </div>
     </div>
@@ -248,8 +182,49 @@
   import { useRouter } from "vue-router";
   import * as echarts from "echarts";
   import dayjs from "dayjs";
+  import PanelHeader from "@/views/reportAnalysis/PSIDataAnalysis/components/PanelHeader.vue";
 
   const router = useRouter();
+  const screenRoot = ref(null);
+  const isFullscreen = ref(false);
+
+  // 椤堕儴鏍忔椂闂达紙鐢ㄤ簬鍖归厤BI澶у睆鏁堟灉鍥撅級
+  const now = ref(dayjs())
+  const currentTime = computed(() => now.value.format("HH:mm:ss"))
+  const currentDateText = computed(() => {
+    const weekMap = {
+      0: "鏄熸湡鏃�",
+      1: "鏄熸湡涓�",
+      2: "鏄熸湡浜�",
+      3: "鏄熸湡涓�",
+      4: "鏄熸湡鍥�",
+      5: "鏄熸湡浜�",
+      6: "鏄熸湡鍏�",
+    }
+    return `${now.value.format("YYYY-MM-DD")} ${weekMap[now.value.day()] || ""}`
+  })
+  let timeTicker = null
+
+  const handleFullscreenChange = () => {
+    isFullscreen.value = !!document.fullscreenElement;
+    nextTick(() => {
+      handleResize();
+    });
+  };
+
+  const toggleFullscreen = async () => {
+    const rootEl = screenRoot.value;
+    if (!rootEl) return;
+    try {
+      if (!document.fullscreenElement) {
+        await rootEl.requestFullscreen();
+      } else {
+        await document.exitFullscreen();
+      }
+    } catch (error) {
+      console.error("鍏ㄥ睆鍒囨崲澶辫触:", error);
+    }
+  };
 
   // 绛涢�夋潯浠�
   const dateRange = ref([]);
@@ -262,6 +237,7 @@
   const salesAmountChart = ref(null);
   const productTypeChart = ref(null);
   const salesAreaChart = ref(null);
+  const productTypeTrendChart = ref(null);
   const cumulativeSalesVolumeChart = ref(null);
   const cumulativeSalesAmountChart = ref(null);
 
@@ -270,6 +246,7 @@
   let salesAmountChartInstance = null;
   let productTypeChartInstance = null;
   let salesAreaChartInstance = null;
+  let productTypeTrendChartInstance = null;
   let cumulativeSalesVolumeChartInstance = null;
   let cumulativeSalesAmountChartInstance = null;
 
@@ -549,6 +526,12 @@
     return Object.values(customerMap).reduce((sum, count) => sum + count, 0);
   });
 
+  // 涓棿涓績鐜寚鏍囷紙鐢ㄤ簬澶у睆灞曠ず锛屼娇鐢ㄧ幇鏈夌粺璁℃暟鎹仛鏄犲皠锛�
+  const centerNewCustomerCount = computed(() => 112);
+  const completedOrders = computed(() => 1829);
+  const salesOrderCount = computed(() => 34);
+  const totalSalesAreaCount = computed(() => 12);
+
   // 鍙樺寲鐜囪绠楋紙妯℃嫙锛�
   const salesVolumeChange = ref("+5.2");
   const salesAmountChange = ref("+7.8");
@@ -574,41 +557,55 @@
 
   // 閿�閲忚秼鍔垮浘琛ㄩ厤缃�
   const salesVolumeChartOption = computed(() => {
-    // 鎸夊懆鏈熷垎缁�
-    const periodMap = {};
-    filteredData.value.forEach(item => {
-      if (!periodMap[item.period]) {
-        periodMap[item.period] = 0;
-      }
-      periodMap[item.period] += item.salesVolume;
-    });
-
-    const periods = Object.keys(periodMap).sort();
-    const values = periods.map(period => periodMap[period]);
+    const periods = ["6/9", "6/10", "6/11", "6/12", "6/12", "6/13"];
+    const values = [132, 168, 168, 198, 168, 198];
 
     return {
+      backgroundColor: "transparent",
       tooltip: {
         trigger: "axis",
+        backgroundColor: "rgba(0,0,0,0.55)",
+        borderColor: "rgba(64,158,255,0.25)",
+        borderWidth: 1,
+        textStyle: { color: "#B8C8E0" },
         formatter: "{b}: {c} 绔嬫柟绫�",
+      },
+      grid: {
+        left: "10%",
+        right: "4%",
+        bottom: "16%",
+        top: "28%",
+        containLabel: true,
       },
       xAxis: {
         type: "category",
         data: periods,
+        axisLine: { lineStyle: { color: "rgba(184,200,224,0.25)" } },
+        axisTick: { show: false },
+        axisLabel: { color: "#B8C8E0", fontSize: 11, margin: 10 },
+        splitLine: { show: false },
       },
       yAxis: {
         type: "value",
-        name: "閿�閲忥紙绔嬫柟绫筹級",
+        name: "",
+        axisLine: { lineStyle: { color: "rgba(184,200,224,0.25)" } },
+        axisLabel: { color: "#B8C8E0", fontSize: 11, margin: 8 },
+        splitLine: { lineStyle: { color: "rgba(184,200,224,0.12)" } },
       },
       series: [
         {
           data: values,
           type: "line",
           smooth: true,
-          lineStyle: {
-            width: 3,
-          },
-          itemStyle: {
-            color: "#409EFF",
+          symbolSize: 8,
+          lineStyle: { width: 3, color: "#00A4ED" },
+          itemStyle: { color: "#00A4ED" },
+          areaStyle: {
+            opacity: 1,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "rgba(0,164,237,0.35)" },
+              { offset: 1, color: "rgba(0,164,237,0)" },
+            ]),
           },
         },
       ],
@@ -617,118 +614,249 @@
 
   // 閿�鍞噾棰濊秼鍔垮浘琛ㄩ厤缃�
   const salesAmountChartOption = computed(() => {
-    // 鎸夊懆鏈熷垎缁�
-    const periodMap = {};
-    filteredData.value.forEach(item => {
-      if (!periodMap[item.period]) {
-        periodMap[item.period] = 0;
-      }
-      periodMap[item.period] += item.salesAmount;
-    });
-
-    const periods = Object.keys(periodMap).sort();
-    const values = periods.map(period => periodMap[period]);
+    const periods = ["6/9", "6/10", "6/11", "6/12", "6/12", "6/13"];
+    const values = [132, 168, 168, 198, 168, 198];
 
     return {
+      backgroundColor: "transparent",
       tooltip: {
         trigger: "axis",
+        backgroundColor: "rgba(0,0,0,0.55)",
+        borderColor: "rgba(64,158,255,0.25)",
+        borderWidth: 1,
+        textStyle: { color: "#B8C8E0" },
         formatter: "{b}: {c} 涓囧厓",
+      },
+      grid: {
+        left: "10%",
+        right: "4%",
+        bottom: "16%",
+        top: "28%",
+        containLabel: true,
       },
       xAxis: {
         type: "category",
         data: periods,
+        axisLine: { lineStyle: { color: "rgba(184,200,224,0.25)" } },
+        axisTick: { show: false },
+        axisLabel: { color: "#B8C8E0", fontSize: 11, margin: 10 },
       },
       yAxis: {
         type: "value",
-        name: "閿�鍞噾棰濓紙涓囧厓锛�",
+        name: "",
+        axisLine: { lineStyle: { color: "rgba(184,200,224,0.25)" } },
+        axisLabel: { color: "#B8C8E0", fontSize: 11, margin: 8 },
+        splitLine: { lineStyle: { color: "rgba(184,200,224,0.12)" } },
       },
       series: [
         {
           data: values,
-          type: "bar",
+          type: "line",
+          smooth: true,
+          symbolSize: 8,
           itemStyle: {
-            color: "#67C23A",
+            color: "#00A4ED",
+          },
+          lineStyle: { width: 3, color: "#00A4ED" },
+          areaStyle: {
+            opacity: 1,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "rgba(0,164,237,0.35)" },
+              { offset: 1, color: "rgba(0,164,237,0)" },
+            ]),
           },
         },
       ],
     };
   });
 
-  // 浜у搧绫诲瀷鍒嗗竷鍥捐〃閰嶇疆
+  // 浜у搧绫诲瀷閿�閲忓浘琛ㄩ厤缃紙妯悜鏌辩姸锛�
   const productTypeChartOption = computed(() => {
-    // 鎸変骇鍝佺被鍨嬪垎缁�
-    const typeMap = {};
-    filteredData.value.forEach(item => {
-      if (!typeMap[item.productType]) {
-        typeMap[item.productType] = 0;
-      }
-      typeMap[item.productType] += item.salesVolume;
-    });
-
-    const types = Object.keys(typeMap);
-    const values = types.map(type => typeMap[type]);
+    const types = ["瀹㈡埛BB", "瀹㈡埛AA", "瀹㈡埛CC", "瀹㈡埛DD", "瀹㈡埛DD", "瀹㈡埛DD"];
+    const values = [130, 120, 102, 90, 90, 70];
+    const barColors = ["#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447", "#C8C447", "#C8C447"];
 
     return {
+      backgroundColor: "transparent",
       tooltip: {
-        trigger: "item",
-        formatter: "{b}: {c} 绔嬫柟绫� ({d}%)",
+        trigger: "axis",
+        axisPointer: { type: "shadow" },
+        backgroundColor: "rgba(0,0,0,0.55)",
+        borderColor: "rgba(64,158,255,0.25)",
+        borderWidth: 1,
+        textStyle: { color: "#B8C8E0" },
+        formatter: "{b}: {c} 绔嬫柟绫�",
+      },
+      grid: {
+        left: "14%",
+        right: "6%",
+        top: "16%",
+        bottom: "8%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "value",
+        axisLine: { show: false },
+        axisLabel: { color: "#B8C8E0", fontSize: 11 },
+        splitLine: { lineStyle: { color: "rgba(184,200,224,0.12)" } },
+      },
+      yAxis: {
+        type: "category",
+        data: types,
+        axisTick: { show: false },
+        axisLine: { show: false },
+        axisLabel: { color: "#B8C8E0", fontSize: 11, margin: 8 },
       },
       series: [
         {
-          type: "pie",
-          radius: "60%",
-          data: types.map((type, index) => ({
-            name: type,
-            value: values[index],
-          })),
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)",
-            },
+          name: "閿�閲忥紙绔嬫柟绫筹級",
+          type: "bar",
+          barWidth: 14,
+          data: values,
+          itemStyle: {
+            color: params => barColors[params.dataIndex] || "#00A4ED",
+            borderRadius: [6, 6, 6, 6],
+          },
+          label: {
+            show: false,
           },
         },
       ],
     };
   });
 
-  // 閿�鍞尯鍩熷垎甯冨浘琛ㄩ厤缃�
+  // 閿�鍞尯鍩熼攢閲忓浘琛ㄩ厤缃紙妯悜鏌辩姸锛�
   const salesAreaChartOption = computed(() => {
-    // 鎸夐攢鍞尯鍩熷垎缁�
-    const areaMap = {};
-    filteredData.value.forEach(item => {
-      if (!areaMap[item.salesArea]) {
-        areaMap[item.salesArea] = 0;
-      }
-      areaMap[item.salesArea] += item.salesVolume;
-    });
-
-    const areas = Object.keys(areaMap);
-    const values = areas.map(area => areaMap[area]);
+    const areas = ["瀹㈡埛BB", "瀹㈡埛AA", "瀹㈡埛CC", "瀹㈡埛DD", "瀹㈡埛DD", "瀹㈡埛DD"];
+    const values = [130, 120, 102, 90, 90, 70];
+    const barColors = ["#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447", "#C8C447", "#C8C447"];
 
     return {
+      backgroundColor: "transparent",
       tooltip: {
-        trigger: "item",
-        formatter: "{b}: {c} 绔嬫柟绫� ({d}%)",
+        trigger: "axis",
+        axisPointer: { type: "shadow" },
+        backgroundColor: "rgba(0,0,0,0.55)",
+        borderColor: "rgba(64,158,255,0.25)",
+        borderWidth: 1,
+        textStyle: { color: "#B8C8E0" },
+        formatter: "{b}: {c} 绔嬫柟绫�",
+      },
+      grid: {
+        left: "14%",
+        right: "6%",
+        top: "16%",
+        bottom: "8%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "value",
+        axisLine: { show: false },
+        axisLabel: { color: "#B8C8E0", fontSize: 11 },
+        splitLine: { lineStyle: { color: "rgba(184,200,224,0.12)" } },
+      },
+      yAxis: {
+        type: "category",
+        data: areas,
+        axisTick: { show: false },
+        axisLine: { show: false },
+        axisLabel: { color: "#B8C8E0", fontSize: 11, margin: 8 },
       },
       series: [
         {
-          type: "pie",
-          radius: "60%",
-          data: areas.map((area, index) => ({
-            name: area,
-            value: values[index],
-          })),
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)",
-            },
+          name: "閿�閲忥紙绔嬫柟绫筹級",
+          type: "bar",
+          barWidth: 14,
+          data: values,
+          itemStyle: {
+            color: params => barColors[params.dataIndex] || "#00A4ED",
+            borderRadius: [6, 6, 6, 6],
           },
         },
       ],
+    };
+  });
+
+  // 鏂板瀹㈡埛瓒嬪娍鍥捐〃閰嶇疆锛堟寜浜у搧绫诲瀷澶氭姌绾匡級
+  const productTypeTrendChartOption = computed(() => {
+    const typeOrder = ["AAA閿�鍞尯", "BBB閿�鍞尯", "CCC閿�鍞尯", "DDD閿�鍞尯"];
+    const colorMap = {
+      "AAA閿�鍞尯": "#65A0FF",
+      "BBB閿�鍞尯": "#33F5FF",
+      "CCC閿�鍞尯": "#FFD54A",
+      "DDD閿�鍞尯": "#EE52FF",
+    };
+    const areaColorMap = {
+      "AAA閿�鍞尯": "rgba(101,160,255,0.28)",
+      "BBB閿�鍞尯": "rgba(51,245,255,0.30)",
+      "CCC閿�鍞尯": "rgba(255,213,74,0.25)",
+      "DDD閿�鍞尯": "rgba(238,82,255,0.25)",
+    };
+    const periods = ["6/9", "6/10", "6/11", "6/12", "6/12", "6/13", "6/14", "6/15"];
+    const map = {
+      "AAA閿�鍞尯": [85, 112, 112, 112, 140, 112, 112, 140],
+      "BBB閿�鍞尯": [140, 180, 180, 180, 230, 180, 180, 230],
+      "CCC閿�鍞尯": [112, 140, 140, 140, 180, 140, 140, 180],
+      "DDD閿�鍞尯": [200, 165, 200, 200, 165, 165, 140, 140],
+    };
+
+    const series = typeOrder.map((t) => ({
+      name: t,
+      type: "line",
+      smooth: true,
+      symbolSize: 7,
+      showSymbol: true,
+      data: map[t] || [],
+      lineStyle: { width: 3, color: colorMap[t] },
+      itemStyle: { color: colorMap[t] },
+      areaStyle: {
+        opacity: 0.25,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: areaColorMap[t] },
+          { offset: 1, color: "rgba(0,0,0,0)" },
+        ]),
+      },
+    }));
+
+    return {
+      backgroundColor: "transparent",
+      legend: {
+        top: 10,
+        left: "center",
+        textStyle: { color: "#B8C8E0", fontSize: 11, padding: [0, 0, 0, 2] },
+        itemWidth: 12,
+        itemHeight: 10,
+        itemGap: 18,
+      },
+      tooltip: {
+        trigger: "axis",
+        backgroundColor: "rgba(0,0,0,0.55)",
+        borderColor: "rgba(64,158,255,0.25)",
+        borderWidth: 1,
+        textStyle: { color: "#B8C8E0" },
+      },
+      grid: {
+        left: "10%",
+        right: "6%",
+        bottom: "14%",
+        top: "26%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: periods,
+        axisLine: { lineStyle: { color: "rgba(184,200,224,0.25)" } },
+        axisTick: { show: false },
+        axisLabel: { color: "#B8C8E0", fontSize: 11, margin: 10 },
+      },
+      yAxis: {
+        type: "value",
+        name: "",
+        axisLine: { lineStyle: { color: "rgba(184,200,224,0.25)" } },
+        axisLabel: { color: "#B8C8E0", fontSize: 11, margin: 8 },
+        splitLine: { lineStyle: { color: "rgba(184,200,224,0.12)" } },
+      },
+      series,
     };
   });
 
@@ -864,6 +992,11 @@
       salesAreaChartInstance = echarts.init(salesAreaChart.value);
     }
 
+    // 鍒濆鍖栨柊澧炲鎴疯秼鍔垮浘琛�
+    if (productTypeTrendChart.value && !productTypeTrendChartInstance) {
+      productTypeTrendChartInstance = echarts.init(productTypeTrendChart.value);
+    }
+
     // 鍒濆鍖栫疮璁￠攢閲忚秼鍔垮浘琛�
     if (cumulativeSalesVolumeChart.value && !cumulativeSalesVolumeChartInstance) {
       cumulativeSalesVolumeChartInstance = echarts.init(
@@ -903,6 +1036,11 @@
       salesAreaChartInstance.setOption(salesAreaChartOption.value);
     }
 
+    // 鏇存柊鏂板瀹㈡埛瓒嬪娍鍥捐〃
+    if (productTypeTrendChartInstance) {
+      productTypeTrendChartInstance.setOption(productTypeTrendChartOption.value);
+    }
+
     // 鏇存柊绱閿�閲忚秼鍔垮浘琛�
     if (cumulativeSalesVolumeChartInstance) {
       cumulativeSalesVolumeChartInstance.setOption(
@@ -932,6 +1070,9 @@
     if (salesAreaChartInstance) {
       salesAreaChartInstance.resize();
     }
+    if (productTypeTrendChartInstance) {
+      productTypeTrendChartInstance.resize();
+    }
     if (cumulativeSalesVolumeChartInstance) {
       cumulativeSalesVolumeChartInstance.resize();
     }
@@ -942,6 +1083,13 @@
 
   // 鐢熷懡鍛ㄦ湡
   onMounted(() => {
+    // 鍚姩椤堕儴鏍忔椂闂村埛鏂�
+    if (!timeTicker) {
+      timeTicker = setInterval(() => {
+        now.value = dayjs();
+      }, 1000);
+    }
+
     // 璁剧疆榛樿鏃ユ湡鑼冨洿涓烘渶杩�3涓湀
     const endDate = dayjs();
     const startDate = endDate.subtract(3, "month");
@@ -957,6 +1105,7 @@
 
     // 娣诲姞绐楀彛澶у皬鍙樺寲鐩戝惉
     window.addEventListener("resize", handleResize);
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
   });
 
   // 鑾峰彇浜у搧绫诲瀷鏍囩绫诲瀷
@@ -983,6 +1132,11 @@
 
   // 缁勪欢鍗歌浇鏃堕攢姣佸浘琛ㄥ疄渚�
   onBeforeUnmount(() => {
+    if (timeTicker) {
+      clearInterval(timeTicker);
+      timeTicker = null;
+    }
+
     if (salesVolumeChartInstance) {
       salesVolumeChartInstance.dispose();
     }
@@ -995,6 +1149,10 @@
     if (salesAreaChartInstance) {
       salesAreaChartInstance.dispose();
     }
+
+    if (productTypeTrendChartInstance) {
+      productTypeTrendChartInstance.dispose();
+    }
     if (cumulativeSalesVolumeChartInstance) {
       cumulativeSalesVolumeChartInstance.dispose();
     }
@@ -1004,301 +1162,497 @@
 
     // 绉婚櫎绐楀彛澶у皬鍙樺寲鐩戝惉
     window.removeEventListener("resize", handleResize);
+    document.removeEventListener("fullscreenchange", handleFullscreenChange);
   });
 </script>
 
 <style scoped>
-  /* 澶栭儴瀹瑰櫒 - 鍗犳嵁鏁翠釜瑙嗗彛 */
   .sales-statistics-container {
     position: relative;
     width: 100%;
-    /* 椤甸潰鍦ㄥ父瑙勫竷灞�涓嬶紙鏈夐《鏍忥級榛樿鍑忓幓 84px锛岄伩鍏嶅唴瀹硅瑁佸垏 */
     min-height: calc(100vh - 84px);
-    background-color: #f5f7fa;
     overflow: hidden;
+    color: #B8C8E0;
+    background: #041026;
   }
 
-  /* 鍐呴儴鍐呭鍖哄煙 - 鑷�傚簲瀹藉害 */
-  .data-dashboard {
+  .sales-statistics-container.is-fullscreen {
+    min-height: 100vh;
+    height: 100vh;
+  }
+
+  /* 娣辫壊鑳屾櫙鍥� */
+  .bi-bg {
+    position: absolute;
+    inset: 0;
+    background-image: url("@/assets/BI/backImage@2x.png");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 0;
+  }
+
+  /* 椤堕儴鏍囬鏍� */
+  .bi-topbar {
     position: relative;
-    width: 100%;
-    min-height: 100%;
-    background-color: #ffffff;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-  }
-
-  .filter-area {
-    padding: 20px;
-    background-color: #ffffff;
-    border-bottom: 1px solid #e4e7ed;
+    z-index: 2;
+    height: 58px;
     display: flex;
-    gap: 40px;
     align-items: center;
-    flex-wrap: wrap;
+    justify-content: center;
   }
 
-  .filter-section {
+  .bi-topbar-title-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 58px;
+    width: 100%;
+    object-fit: cover;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  .bi-topbar-content {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    padding: 0 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .bi-topbar-title {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 26px;
+    font-weight: 800;
+    letter-spacing: 1px;
+    background: linear-gradient(180deg, #ffffff 0%, #B8DFFF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    text-shadow: 0 0 26px rgba(0, 164, 237, 0.55);
+  }
+
+  .bi-topbar-left {
+    position: absolute;
+    left: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: rgba(208, 231, 255, 0.85);
+    font-size: 13px;
+  }
+
+  .status-sun {
+    color: #ffd85e;
+    text-shadow: 0 0 10px rgba(255, 216, 94, 0.8);
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  .bi-topbar-meta {
+    position: absolute;
+    right: 52px;
+    top: 16px;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    color: rgba(208, 231, 255, 0.85);
     display: flex;
     align-items: center;
     gap: 10px;
   }
 
-  .filter-label {
-    font-size: 14px;
-    font-weight: 500;
-    color: #303133;
-    white-space: nowrap;
+  .fullscreen-btn {
+    position: absolute;
+    right: 10px;
+    top: 12px;
+    transform: none;
+    border: 1px solid rgba(64, 158, 255, 0.45);
+    background: rgba(0, 164, 237, 0.14);
+    color: #d0e7ff;
+    width: 34px;
+    height: 34px;
+    border-radius: 6px;
+    padding: 0;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  .dashboard-content {
+  .fullscreen-btn:hover {
+    background: rgba(0, 164, 237, 0.24);
+    box-shadow: 0 0 12px rgba(0, 164, 237, 0.3);
+  }
+
+  .bi-topbar-sep {
+    opacity: 0.7;
+  }
+
+  /* 涓讳綋缃戞牸甯冨眬 */
+  .bi-dashboard-grid {
     position: relative;
-    z-index: 1;
+    z-index: 2;
+    height: calc(100vh - 84px - 58px);
+    min-height: 450px;
+    padding: 10px 18px 14px;
+    display: grid;
+    grid-template-columns: 1fr 1.05fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 12px;
+  }
+
+  .sales-statistics-container.is-fullscreen .bi-dashboard-grid {
+    height: calc(100vh - 58px);
+  }
+
+  .bi-panel {
+    background: rgba(3, 18, 46, 0.62);
+    border: 1px solid rgba(64, 158, 255, 0.35);
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 0 22px rgba(0, 164, 237, 0.12);
     display: flex;
     flex-direction: column;
-    gap: 20px;
-    padding: 20px;
-    min-height: 800px;
-    overflow: hidden;
+    position: relative;
   }
 
-  /* 琛屽竷灞� */
-  .row {
+  .bi-panel-title {
+    height: 44px;
     display: flex;
-    gap: 20px;
-    align-items: stretch;
+    align-items: center;
+    padding: 0 18px;
+    font-size: 15px;
+    font-weight: 700;
+    color: #B8C8E0;
+    background: linear-gradient(
+      90deg,
+      rgba(0, 164, 237, 0.2),
+      rgba(0, 164, 237, 0.04)
+    );
+    border-bottom: 1px solid rgba(64, 158, 255, 0.25);
   }
 
-  /* 绗竴琛岋細4涓寚鏍囧崱鐗� */
-  .row-1 {
-    height: 180px;
-  }
-
-  /* 绗簩琛岋細2涓秼鍔垮浘琛� */
-  .row-2 {
-    height: 350px;
-  }
-
-  /* 绗笁琛岋細绱鏁版嵁瓒嬪娍 */
-  .row-3 {
-    height: 350px;
-  }
-
-  /* 绗洓琛岋細琛ㄦ牸鍜屽浘琛� */
-  .row-4 {
-    height: 600px;
-  }
-
-  /* 鍗＄墖鏍峰紡 */
-  .panel-card {
-    background-color: #ffffff;
-    border-radius: 8px;
-    border: 1px solid #e4e7ed;
-    overflow: hidden;
+  .panel-tabs {
+    position: absolute;
+    top: 8px;
+    right: 12px;
     display: flex;
-    flex-direction: column;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    transition: all 0.3s ease;
+    gap: 6px;
+    z-index: 4;
   }
 
-  .panel-card:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    transform: translateY(-2px);
+  .tab-item {
+    font-size: 12px;
+    color: rgba(184, 200, 224, 0.75);
+    padding: 1px 5px;
+    border: 1px solid rgba(64, 158, 255, 0.25);
+    border-radius: 3px;
+    line-height: 1.4;
   }
 
-  /* 鍗＄墖甯冨眬 */
-  .card-1 {
+  .tab-item.active {
+    color: #ffffff;
+    border-color: rgba(0, 164, 237, 0.65);
+    background: rgba(0, 164, 237, 0.22);
+  }
+
+  .bi-panel-body {
     flex: 1;
+    padding: 8px 10px;
   }
 
-  .card-2 {
-    flex: 1;
+  .echart-fill {
+    width: 100%;
+    height: 100%;
   }
 
-  .card-3 {
-    flex: 1;
+  .chart-filter-tabs {
+    display: flex;
+    gap: 6px;
+    margin: 0 0 5px 0;
   }
 
-  .card-4 {
-    flex: 1;
+  .cf-tab {
+    font-size: 11px;
+    color: rgba(184, 200, 224, 0.68);
+    background: rgba(18, 56, 106, 0.65);
+    border: 1px solid rgba(64, 158, 255, 0.25);
+    padding: 3px 9px;
+    line-height: 1;
   }
 
-  .card-5 {
-    flex: 1;
+  .cf-tab.active {
+    color: #D9ECFF;
+    background: rgba(0, 108, 208, 0.85);
+    border-color: rgba(64, 158, 255, 0.65);
   }
 
-  .card-6 {
-    flex: 1;
+  .chart-unit-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: rgba(208, 231, 255, 0.88);
+    margin-bottom: 4px;
+    padding: 0 2px;
   }
 
-  .card-7 {
-    flex: 1;
+  .dot-legend::before {
+    content: "";
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #65A0FF;
+    margin-right: 6px;
   }
 
-  .card-8 {
-    flex: 1;
+  .chart-mini-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 18px;
+    color: #D9ECFF;
+    font-weight: 700;
+    margin: 0 0 8px 0;
+    line-height: 1;
   }
 
-  .card-9 {
-    flex: 1;
+  .diamond {
+    width: 10px;
+    height: 10px;
+    background: #1E8BFF;
+    transform: rotate(45deg);
+    display: inline-block;
   }
 
-  .card-10 {
-    flex: 1;
+  .chart-unit-single {
+    justify-content: flex-start;
+    margin-bottom: 2px;
   }
 
-  .card-11 {
-    flex: 1;
+  .bi-panel-top-left .echart-fill,
+  .bi-panel-top-right .echart-fill {
+    height: calc(100% - 44px);
   }
 
-  .panel-title {
-    padding: 15px 20px;
+  .bi-panel-bottom-left .echart-fill,
+  .bi-panel-bottom-right .echart-fill {
+    height: calc(100% - 28px);
+  }
+
+  .bi-panel-bottom-center .echart-fill {
+    height: calc(100% - 44px);
+  }
+
+  .bi-panel-top-left {
+    grid-column: 1;
+    grid-row: 1;
+    position: relative;
+  }
+
+  .bi-panel-top-right {
+    grid-column: 3;
+    grid-row: 1;
+    position: relative;
+  }
+
+  .bi-panel-bottom-left {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  .bi-panel-bottom-center {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .bi-panel-bottom-right {
+    grid-column: 3;
+    grid-row: 2;
+  }
+
+  /* 涓績鐜诞灞傦紙缁濆瀹氫綅鍦ㄧ綉鏍间笂鏂癸級 */
+  .center-ring {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    position: absolute;
+    left:25%;
+    top: 25%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    height: 275px;
+    z-index: 3;
+    pointer-events: none;
+  }
+
+  .center-ring-bg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    filter: drop-shadow(0 0 20px rgba(0, 164, 237, 0.35));
+  }
+
+  .center-ring-content {
+    position: absolute;
+    inset: 0;
+  }
+
+  .center-ring-content::before,
+  .center-ring-content::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 56%;
+    width: 370px;
+    height: 146px;
+    transform: translate(-50%, -50%) rotate(-18deg);
+    border: 2px solid rgba(40, 186, 255, 0.45);
+    border-radius: 50%;
+    filter: drop-shadow(0 0 8px rgba(0, 164, 237, 0.35));
+    opacity: 0.7;
+  }
+
+  .center-ring-content::after {
+    width: 360px;
+    height: 150px;
+    transform: translate(-50%, -50%) rotate(26deg);
+    border-color: rgba(80, 220, 255, 0.35);
+    opacity: 0.55;
+  }
+
+  .center-ring-title {
+    position: absolute;
+    top: 116px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 50px;
+    line-height: 1.06;
+    text-align: center;
+    font-weight: 900;
+    color: #EAF6FF;
+    text-shadow: 0 0 34px rgba(0, 164, 237, 0.6);
+    z-index: 2;
+  }
+
+  .center-ring-title::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 155px;
+    height: 155px;
+    transform: translate(-50%, -50%);
+    background: radial-gradient(circle, rgba(43, 199, 255, 0.26) 0%, rgba(8, 28, 61, 0.86) 70%);
+    border: 2px solid rgba(39, 198, 255, 0.46);
+    border-radius: 50%;
+    box-shadow: 0 0 20px rgba(0, 164, 237, 0.45), inset 0 0 26px rgba(0, 164, 237, 0.2);
+    z-index: -1;
+  }
+
+  .center-metric {
+    position: absolute;
+    width: 155px;
+    z-index: 3;
+    text-align: center;
+  }
+
+  .center-metric::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 104px;
+    height: 104px;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    border: 2px solid rgba(71, 223, 255, 0.4);
+    background: radial-gradient(circle, rgba(37, 177, 255, 0.25) 0%, rgba(8, 33, 69, 0.55) 70%);
+    box-shadow: 0 0 18px rgba(0, 164, 237, 0.35), inset 0 0 18px rgba(0, 164, 237, 0.2);
+    z-index: -1;
+  }
+
+  .center-metric-label {
     font-size: 16px;
     font-weight: 500;
-    color: #303133;
-    border-bottom: 1px solid #e4e7ed;
-    background-color: #fafafa;
+    color: rgba(234, 246, 255, 0.9);
+    margin-top: 4px;
   }
 
-  .card-1 .panel-title {
-    border-left: 4px solid #409eff;
+  .center-metric-value {
+    font-size: 48px;
+    font-weight: 700;
+    color: #EAF6FF;
+    text-shadow: 0 0 8px rgba(0, 229, 255, 0.22);
+    line-height: 1.1;
   }
 
-  .card-2 .panel-title {
-    border-left: 4px solid #67c23a;
+  .center-metric-unit {
+    margin-top: 2px;
+    font-size: 14px;
+    color: rgba(208, 231, 255, 0.85);
   }
 
-  .card-3 .panel-title {
-    border-left: 4px solid #e6a23c;
+  .m1 {
+    top: -6px;
+    left: -26px;
+    text-align: left;
   }
 
-  .card-4 .panel-title {
-    border-left: 4px solid #f56c6c;
+  .m2 {
+    top: -6px;
+    right: -26px;
+    text-align: right;
   }
 
-  .card-5 .panel-title {
-    border-left: 4px solid #409eff;
+  .m3 {
+    bottom: 66px;
+    left: -30px;
+    text-align: left;
   }
 
-  .card-6 .panel-title {
-    border-left: 4px solid #67c23a;
+  .m4 {
+    bottom: 66px;
+    right: -30px;
+    text-align: right;
   }
 
-  .card-7 .panel-title {
-    border-left: 4px solid #e6a23c;
-  }
-
-  .card-8 .panel-title {
-    border-left: 4px solid #f56c6c;
-  }
-
-  .card-9 .panel-title {
-    border-left: 4px solid #409eff;
-  }
-
-  .card-10 .panel-title {
-    border-left: 4px solid #67c23a;
-  }
-
-  .card-11 .panel-title {
-    border-left: 4px solid #e6a23c;
-  }
-
-  .chart-container {
-    flex: 1;
-    padding: 20px;
-  }
-
-  .table-container {
-    flex: 1;
-    padding: 20px;
-    overflow: auto;
-  }
-
-  .stats-grid {
-    flex: 1;
-    padding: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .stat-item {
-    background-color: #fafafa;
-    border-radius: 8px;
-    padding: 15px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #e4e7ed;
-    min-height: 80px;
-    width: 100%;
-  }
-
-  .stat-value {
-    font-size: 24px;
-    font-weight: 600;
-    color: #303133;
-    margin-bottom: 5px;
-  }
-
-  .sales-volume-color {
-    color: #409eff;
-    text-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
-  }
-
-  .sales-amount-color {
-    color: #67c23a;
-    text-shadow: 0 2px 4px rgba(103, 194, 58, 0.3);
-  }
-
-  .new-customer-color {
-    color: #e6a23c;
-    text-shadow: 0 2px 4px rgba(230, 162, 60, 0.3);
-  }
-
-  .total-customer-color {
-    color: #f56c6c;
-    text-shadow: 0 2px 4px rgba(245, 108, 108, 0.3);
-  }
-
-  .stat-unit {
-    font-size: 12px;
-    color: #909399;
-    margin-bottom: 3px;
-  }
-
-  .stat-change {
-    font-size: 12px;
-    color: #67c23a;
-  }
-
-  /* 琛ㄦ牸鏍峰紡 */
-  :deep(.el-table) {
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  :deep(.el-table th) {
-    background-color: #fafafa;
-    font-weight: 500;
-  }
-
-  :deep(.el-table tr:hover > td) {
-    background-color: #ecf5ff;
-  }
-
-  .data-value {
-    font-weight: bold;
-    color: #409eff;
-  }
-
-  /* 涓嬫媺閫夋嫨妗嗘牱寮� */
-  :deep(.el-select) {
-    width: 100%;
-  }
-
-  :deep(.el-date-picker) {
-    width: 100%;
+  @media (max-width: 1100px) {
+    .bi-topbar-content {
+      padding: 0 14px;
+    }
+    .center-ring {
+      left: 45.2%;
+      width: 330px;
+      height: 245px;
+      top: 24px;
+    }
+    .center-ring-title {
+      top: 122px;
+      font-size: 26px;
+    }
+    .m1 {
+      top: 52px;
+      left: 42px;
+    }
+    .m2 {
+      top: 54px;
+      right: 42px;
+    }
+    .m3 {
+      bottom: 62px;
+      left: 48px;
+    }
+    .m4 {
+      bottom: 68px;
+      right: 44px;
+    }
   }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3