diff --git a/gear-ui3/src/layout/components/Navbar.vue b/gear-ui3/src/layout/components/Navbar.vue
index ba0a337..ab2db22 100644
--- a/gear-ui3/src/layout/components/Navbar.vue
+++ b/gear-ui3/src/layout/components/Navbar.vue
@@ -10,12 +10,12 @@
-
+
-
+
-
+
-
+
@@ -37,7 +20,7 @@ import { useStorage } from '@vueuse/core';
import { ElRow, ElCol } from 'element-plus';
// 1. 导入所有图表子组件(不变)
-import OrderTrendChart from '../components/OrderTrendChart.vue';
+import OrderTrendChart from '../components/OrderTrendChart.vue';
import ProductSalesRank from '../components/ProductSalesRank.vue';
import CustomerFollowStatus from '../components/CustomerFollowStatus.vue';
import ReturnExchangeAnalysis from '../components/ReturnExchangeAnalysis.vue';
@@ -61,68 +44,120 @@ const chartComponentMap = {
// 3. 图表默认配置数组:新增height默认值(核心修改)
const DEFAULT_CHART_CONFIGS = [
{
- id: 'order-trend',
- componentName: 'OrderTrendChart',
- title: '订单趋势图表',
- dataKey: 'orders',
- height: 400, // 新增:默认高度400px
- layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+ "id": "product-rank",
+ "componentName": "ProductSalesRank",
+ "title": "产品销售排行图表",
+ "dataKey": "orderDetails",
+ "layout": {
+ "xs": 24,
+ "sm": 24,
+ "md": 8,
+ "lg": "8",
+ "xl": 12
+ },
+ "height": 400
},
{
- id: 'product-rank',
- componentName: 'ProductSalesRank',
- title: '产品销售排行图表',
- dataKey: 'orderDetails',
- height: 400, // 新增:默认高度400px
- layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+ "id": "customer-follow",
+ "componentName": "CustomerFollowStatus",
+ "title": "客户跟进状态图表",
+ "dataKey": "customers",
+ "layout": {
+ "xs": 24,
+ "sm": 24,
+ "md": 8,
+ "lg": "8",
+ "xl": 12
+ },
+ "height": 400
},
{
- id: 'sales-manager',
- componentName: 'SalesByManagerChart',
- title: '负责人订单汇总',
- dataKey: 'orders',
- height: 400, // 新增:默认高度400px
- layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+ "id": "sales-metrics",
+ "componentName": "SalesMetricsCard",
+ "title": "销售指标图表",
+ "dataKey": [
+ "orders",
+ "customers",
+ "returnExchanges"
+ ],
+ "layout": {
+ "xs": 24,
+ "sm": 24,
+ "md": 8,
+ "lg": "8",
+ "xl": 12
+ },
+ "height": 200
},
{
- id: 'customer-follow',
- componentName: 'CustomerFollowStatus',
- title: '客户跟进状态图表',
- dataKey: 'customers',
- height: 400, // 新增:默认高度400px
- layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+ "id": "order-trend",
+ "componentName": "OrderTrendChart",
+ "title": "订单趋势图表",
+ "dataKey": "orders",
+ "layout": {
+ "xs": 24,
+ "sm": 24,
+ "md": 12,
+ "lg": 12,
+ "xl": 12
+ },
+ "height": 400
},
{
- id: 'return-exchange',
- componentName: 'ReturnExchangeAnalysis',
- title: '退换货分析图表',
- dataKey: 'returnExchanges',
- height: 400, // 新增:默认高度400px
- layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+ "id": "sales-manager",
+ "componentName": "SalesByManagerChart",
+ "title": "负责人订单汇总",
+ "dataKey": "orders",
+ "layout": {
+ "xs": 24,
+ "sm": 24,
+ "md": 12,
+ "lg": 12,
+ "xl": 12
+ },
+ "height": 400
},
{
- id: 'sales-customer',
- componentName: 'SalesByCustomerChart',
- title: '客户订单汇总',
- dataKey: 'orders',
- height: 400, // 新增:默认高度400px
- layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+ "id": "return-exchange",
+ "componentName": "ReturnExchangeAnalysis",
+ "title": "退换货分析图表",
+ "dataKey": "returnExchanges",
+ "layout": {
+ "xs": 24,
+ "sm": 24,
+ "md": 12,
+ "lg": 12,
+ "xl": 12
+ },
+ "height": 400
},
{
- id: 'sales-metrics',
- componentName: 'SalesMetricsCard',
- title: '销售指标图表',
- dataKey: ['orders', 'customers', 'returnExchanges'],
- height: 200, // 新增:指标卡高度较小,默认200px
- layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+ "id": "sales-customer",
+ "componentName": "SalesByCustomerChart",
+ "title": "客户订单汇总",
+ "dataKey": "orders",
+ "layout": {
+ "xs": 24,
+ "sm": 24,
+ "md": 12,
+ "lg": 12,
+ "xl": 12
+ },
+ "height": 400
},
{
- id: 'recent-orders',
- componentName: 'RecentOrdersTable',
- title: '最近订单',
- dataKey: 'orders',
- height: 500, // 新增:表格高度较大,默认500px
- layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
+ "id": "recent-orders",
+ "componentName": "RecentOrdersTable",
+ "title": "最近订单",
+ "dataKey": "orders",
+ "layout": {
+ "xs": 24,
+ "sm": 24,
+ "md": "24",
+ "lg": "24",
+ "xl": "24"
+ },
+ "height": 400
}
];
@@ -158,7 +193,7 @@ const getChartProps = (chartConfig) => {
o[key.replace(/([A-Z])/g, '-$1').toLowerCase()] = dataMap[key];
});
return o;
- }
+ }
return {
[chartConfig.dataKey.replace(/([A-Z])/g, '-$1').toLowerCase()]: dataMap[chartConfig.dataKey],
title: chartConfig.title
@@ -195,7 +230,8 @@ const getChartProps = (chartConfig) => {
/* 图表项:100%高度继承列容器(核心修改) */
.chart-item {
width: 100%;
- height: 100%; /* 关键:让组件填满列容器高度 */
+ height: 100%;
+ /* 关键:让组件填满列容器高度 */
background-color: #1e293b;
border-radius: 8px;
padding: 16px;
@@ -210,6 +246,7 @@ const getChartProps = (chartConfig) => {
.charts-container {
padding: 10px;
}
+
.chart-item {
padding: 12px;
}
diff --git a/gear-ui3/src/views/index.vue b/gear-ui3/src/views/index.vue
index cde14b1..59f540e 100644
--- a/gear-ui3/src/views/index.vue
+++ b/gear-ui3/src/views/index.vue
@@ -145,7 +145,7 @@ const deleteModule = (index) => {