DeXun/GEAR-OA
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 可视化大屏完善

Browse Source
This commit is contained in:
砂糖
2025-09-05 14:05:07 +08:00
parent d459072a11
commit b293cbd04f
8 changed files with 752 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
gear-ui3/src/views/dashboard/grid/index.vue
View File

@@ -1,13 +1,13 @@
<template>
<!-- 图表容器（含滚动） -->
<div class="charts-container">
<!-- Element 布局：el-row 为行容器，gutter 控制间距 -->
<!-- Element 布局：行容器（不变） -->
<el-row
class="charts-row"
:gutter="20"
:style="{ height: `calc(100% - 40px)` }"
>
<!-- 动态渲染图表：遍历持久化后的配置数组 -->
<!-- 动态渲染图表：应用高度配置（核心修改） -->
<el-col
v-for="(chartConfig, index) in persistedChartConfigs"
:key="chartConfig.id"
@@ -17,14 +17,15 @@
:md="chartConfig.layout.md"
:lg="chartConfig.layout.lg"
:xl="chartConfig.layout.xl"
:style="{ height: `calc(${100 / Math.ceil(persistedChartConfigs.length / 2)}% - 10px)` }"
:style="{ height: `${chartConfig.height || 400}px`, marginBottom: '20px' }"
>
<!-- 动态加载图表组件 -->
<!-- 动态加载图表组件：确保组件高度100% -->
<component
:is="chartComponentMap[chartConfig.componentName]"
class="chart-item"
v-bind="getChartProps(chartConfig)"
:is-refreshing="isRefreshing"
:chart-height="chartConfig.height || 400"
/>
</el-col>
</el-row>
@@ -32,150 +33,118 @@
</template>
<script setup>
import { useStorage } from '@vueuse/core'; // 导入持久化工具
import { ElRow, ElCol } from 'element-plus'; // 导入Element布局组件
import { useStorage } from '@vueuse/core';
import { ElRow, ElCol } from 'element-plus';
// 1. 导入所有图表子组件
// 1. 导入所有图表子组件（不变）
import OrderTrendChart from '../components/OrderTrendChart.vue';
import ProductSalesRank from '../components/ProductSalesRank.vue';
import CustomerFollowStatus from '../components/CustomerFollowStatus.vue';
import ReturnExchangeAnalysis from '../components/ReturnExchangeAnalysis.vue';
import SalesByManagerChart from '../components/SalesByManagerChart.vue';
import SalesByCustomerChart from '../components/SalesByCustomerChart.vue';
import SalesMetricsCard from '../components/SalesMetricsCard.vue';
import RecentOrdersTable from '../components/RecentOrdersTable.vue';
// 2. 图表组件映射表：用于动态匹配组件（组件名 → 组件实例）
// 2. 图表组件映射表（不变）
const chartComponentMap = {
OrderTrendChart,
ProductSalesRank,
CustomerFollowStatus,
ReturnExchangeAnalysis,
SalesByManagerChart,
SalesByCustomerChart
SalesByCustomerChart,
SalesMetricsCard,
RecentOrdersTable
};
// 3. 图表默认配置数组：定义每个图表的基础信息、布局、数据源
// 3. 图表默认配置数组：新增height默认值（核心修改）
const DEFAULT_CHART_CONFIGS = [
{
id: 'order-trend', // 唯一标识（不可重复）
componentName: 'OrderTrendChart', // 对应组件名（与chartComponentMap匹配）
title: '订单趋势图表', // 图表标题（可用于组件内部或表头）
dataKey: 'orders', // 数据源key（对应props中的数据字段）
layout: { // Element Col 布局配置（span范围：1-24，24为整行）
xs: 24, // 超小屏：独占1行
sm: 24, // 小屏：独占1行
md: 12, // 中屏：占1/2行
lg: 12, // 大屏：占1/2行
xl: 12 // 超大屏：占1/2行
}
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', // 依赖orderDetails数据
layout: {
xs: 24,
sm: 24,
md: 12,
lg: 12,
xl: 12
}
dataKey: 'orderDetails',
height: 400, // 新增：默认高度400px
layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
},
{
id: 'sales-manager',
componentName: 'SalesByManagerChart',
title: '负责人订单汇总',
dataKey: 'orders', // 依赖orders数据
layout: {
xs: 24,
sm: 24,
md: 12,
lg: 12,
xl: 12
}
dataKey: 'orders',
height: 400, // 新增：默认高度400px
layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
},
{
id: 'customer-follow',
componentName: 'CustomerFollowStatus',
title: '客户跟进状态图表',
dataKey: 'customers', // 依赖customers数据
layout: {
xs: 24,
sm: 24,
md: 12,
lg: 12,
xl: 12
}
dataKey: 'customers',
height: 400, // 新增：默认高度400px
layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
},
{
id: 'return-exchange',
componentName: 'ReturnExchangeAnalysis',
title: '退换货分析图表',
dataKey: 'returnExchanges', // 依赖returnExchanges数据
layout: {
xs: 24,
sm: 24,
md: 12,
lg: 12,
xl: 12
}
dataKey: 'returnExchanges',
height: 400, // 新增：默认高度400px
layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
},
{
id: 'sales-customer',
componentName: 'SalesByCustomerChart',
title: '客户订单汇总',
dataKey: 'orders', // 依赖orders数据
layout: {
xs: 24,
sm: 24,
md: 12,
lg: 12,
xl: 12
}
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'],
height: 200, // 新增：指标卡高度较小，默认200px
layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
},
{
id: 'recent-orders',
componentName: 'RecentOrdersTable',
title: '最近订单',
dataKey: 'orders',
height: 500, // 新增：表格高度较大，默认500px
layout: { xs:24, sm:24, md:12, lg:12, xl:12 }
}
];
// 4. 持久化图表配置：用useStorage存入localStorage，key为"saleDashboardChartConfigs"
// 逻辑：优先读取localStorage中的配置，若无则使用默认配置
// 4. 持久化图表配置（不变，但默认值包含height）
const persistedChartConfigs = useStorage(
'saleDashboardChartConfigs', // 存储key（自定义，确保唯一）
DEFAULT_CHART_CONFIGS, // 默认值
localStorage, // 存储介质（localStorage/sessionStorage）
{ mergeDefaults: true } // 合并默认值与存储值（避免字段缺失）
'saleDashboardChartConfigs',
DEFAULT_CHART_CONFIGS,
localStorage,
{ mergeDefaults: true }
);
// 5. 接收父组件传入的数据源与状态
// 5. 接收父组件传入的数据源与状态（不变）
const props = defineProps({
orders: {
type: Array,
required: true,
default: () => []
},
orderDetails: {
type: Array,
required: true,
default: () => []
},
customers: {
type: Array,
required: true,
default: () => []
},
returnExchanges: {
type: Array,
required: true,
default: () => []
},
isRefreshing: {
type: Boolean,
required: true,
default: false
}
orders: { type: Array, required: true, default: () => [] },
orderDetails: { type: Array, required: true, default: () => [] },
customers: { type: Array, required: true, default: () => [] },
returnExchanges: { type: Array, required: true, default: () => [] },
isRefreshing: { type: Boolean, required: true, default: false }
});
// 6. 工具函数：根据图表配置，动态生成组件所需的props
// 6. 工具函数：传递props（不变）
const getChartProps = (chartConfig) => {
// 映射数据源：根据chartConfig.dataKey匹配props中的数据
const dataMap = {
orders: props.orders,
orderDetails: props.orderDetails,
@@ -183,45 +152,50 @@ const getChartProps = (chartConfig) => {
returnExchanges: props.returnExchanges
};
// 返回该图表需要的props（如OrderTrendChart需要:orders，ProductSalesRank需要:order-details）
if (Array.isArray(chartConfig.dataKey)) {
const o = { title: chartConfig.title };
chartConfig.dataKey.forEach(key => {
o[key.replace(/([A-Z])/g, '-$1').toLowerCase()] = dataMap[key];
});
return o;
}
return {
// 驼峰转连字符（如orderDetails → order-details，匹配组件props定义）
[chartConfig.dataKey.replace(/([A-Z])/g, '-$1').toLowerCase()]: dataMap[chartConfig.dataKey],
title: chartConfig.title // 可选：传递标题给图表组件
title: chartConfig.title
};
};
</script>
<style scoped>
/* 图表容器（含滚动） */
/* 图表容器（不变） */
.charts-container {
width: 100%;
height: 100%;
padding: 20px;
overflow: auto;
box-sizing: border-box;
background-color: #0f172a; /* 继承父组件深色背景 */
background-color: #0f172a;
}
/* Element Row 容器：清除默认margin，确保高度自适应 */
/* 行容器（不变） */
.charts-row {
width: 100%;
margin: 0;
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* 顶部对齐，避免空白 */
align-content: flex-start;
}
/* Element Col 容器：控制列的高度与间距 */
/* 列容器：移除固定高度，由配置动态控制（核心修改） */
.chart-col {
margin-bottom: 20px; /* 行间距，与gutter配合 */
box-sizing: border-box;
/* 高度由父组件style动态设置，此处不固定 */
}
/* 图表项样式：保持原有设计，适配弹性布局 */
/* 图表项：100%高度继承列容器（核心修改） */
.chart-item {
width: 100%;
height: 100%;
height: 100%; /* 关键：让组件填满列容器高度 */
background-color: #1e293b;
border-radius: 8px;
padding: 16px;
@@ -231,7 +205,7 @@ const getChartProps = (chartConfig) => {
flex-direction: column;
}
/* 小屏幕下优化：减少内边距 */
/* 小屏幕优化（不变） */
@media (max-width: 768px) {
.charts-container {
padding: 10px;
@@ -239,8 +213,5 @@ const getChartProps = (chartConfig) => {
.chart-item {
padding: 12px;
}
.chart-col {
margin-bottom: 10px;
}
}
</style>

518
gear-ui3/src/views/dashboard/grid/setting.vue
View File

@@ -3,21 +3,12 @@
<!-- 面板标题与操作区 -->
<div class="panel-header">
<h2 class="panel-title">图表布局设置</h2>
<div class="header-actions">
<el-button
size="small"
type="primary"
@click="applySettings"
:loading="saving"
>
<div class="header-actions">
<el-button size="small" type="primary" @click="applySettings" :loading="saving">
<el-icon v-if="saving"><Loading /></el-icon>
<span>应用设置</span>
</el-button>
<el-button
size="small"
@click="resetToSession"
:disabled="saving"
>
<el-button size="small" @click="resetToSession" :disabled="saving">
取消修改
</el-button>
</div>
@@ -25,106 +16,132 @@
<!-- 配置内容区 -->
<div class="settings-content">
<!-- 布局预览 -->
<div class="layout-preview">
<h3 class="section-title">布局预览</h3>
<div class="preview-container">
<el-row :gutter="10" class="preview-row">
<el-col
v-for="(chart, index) in tempChartConfigs"
:key="chart.id"
:span="getPreviewSpan(chart)"
class="preview-col"
:class="{ 'preview-col-hidden': !chart.visible }"
>
<div class="preview-chart">
<div class="chart-header">
<span class="chart-name">{{ chart.title }}</span>
<el-switch
v-model="chart.visible"
size="small"
active-color="#1677ff"
/>
</div>
<div class="chart-placeholder">
<span class="chart-id">{{ chart.id }}</span>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- 图表配置列表 -->
<div class="charts-config">
<h3 class="section-title">图表配置</h3>
<el-table
:data="tempChartConfigs"
border
size="small"
:height="tableHeight"
>
<el-table-column
prop="title"
label="图表名称"
width="200"
/>
<el-table-column
prop="id"
label="标识"
width="160"
/>
<el-table-column label="显示状态">
<h3 class="section-title">
图表配置
</h3>
<!-- 直接保留表格，移除draggable包裹 -->
<el-table
border
size="small"
:height="tableHeight"
row-key="id"
:data="tempChartConfigs">
<el-table-column prop="title" label="图表名称" min-width="120" />
<el-table-column prop="id" label="标识" min-width="100" />
<!-- 图表高度配置列 -->
<el-table-column label="图表高度" min-width="120">
<template #default="scope">
<el-switch
v-model="scope.row.visible"
size="small"
active-color="#1677ff"
/>
<el-input
v-model.number="scope.row.height"
size="small"
type="number"
:min="100"
:max="1000"
placeholder="px (100-1000)"
@input="validateHeight(scope.row, scope.$index)"
:disabled="saving" />
<div v-if="heightErrorIndex === scope.$index" class="height-error">
请输入100-1000之间的有效数字
</div>
</template>
</el-table-column>
<!-- 布局尺寸配置 -->
<el-table-column label="超小屏 (≤768px)">
<!-- 布局配置列 -->
<el-table-column label="超小屏 (≤768px)" min-width="120">
<template #default="scope">
<el-select
v-model="scope.row.layout.xs"
size="small"
:disabled="!scope.row.visible"
>
<el-select
v-model="scope.row.layout.xs"
size="small"
append-to="#full-dashboard-container"
:disabled="saving">
<el-option :value="24">独占一行</el-option>
<el-option :value="12">半行宽度</el-option>
<el-option :value="8">三分之一</el-option>
<el-option :value="6">四分之一</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="中大屏 (≥992px)">
<el-table-column label="小屏 (≥768px)" min-width="120">
<template #default="scope">
<el-select
v-model="scope.row.layout.md"
size="small"
:disabled="!scope.row.visible"
>
<el-select
v-model="scope.row.layout.sm"
size="small"
append-to="#full-dashboard-container"
:disabled="saving">
<el-option :value="24">独占一行</el-option>
<el-option :value="12">半行宽度</el-option>
<el-option :value="8">三分之一</el-option>
<el-option :value="6">四分之一</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作">
<el-table-column label="中屏 (≥992px)" min-width="120">
<template #default="scope">
<el-button
size="small"
text
<el-select
v-model="scope.row.layout.md"
size="small"
append-to="#full-dashboard-container"
:disabled="saving">
<el-option :value="24">独占一行</el-option>
<el-option :value="12">半行宽度</el-option>
<el-option :value="8">三分之一</el-option>
<el-option :value="6">四分之一</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="大屏 (≥1200px)" min-width="120">
<template #default="scope">
<el-select
v-model="scope.row.layout.lg"
size="small"
append-to="#full-dashboard-container"
:disabled="saving">
<el-option value="24">独占一行</el-option>
<el-option value="12">半行宽度</el-option>
<el-option value="8">三分之一</el-option>
<el-option value="6">四分之一</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="超大屏 (≥1920px)" min-width="120">
<template #default="scope">
<el-select
v-model="scope.row.layout.xl"
size="small"
append-to="#full-dashboard-container"
:disabled="saving">
<el-option value="24">独占一行</el-option>
<el-option value="12">半行宽度</el-option>
<el-option value="8">三分之一</el-option>
<el-option value="6">四分之一</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template #default="scope">
<el-button
size="small"
type="primary"
text
@click="moveChart(scope.$index, 'up')"
:disabled="scope.$index === 0"
>
上移
:disabled="scope.$index === 0 || saving"
icon="ArrowUp">
</el-button>
<el-button
size="small"
text
<el-button
size="small"
type="primary"
text
@click="moveChart(scope.$index, 'down')"
:disabled="scope.$index === tempChartConfigs.length - 1"
>
下移
:disabled="scope.$index === tempChartConfigs.length - 1 || saving"
icon="ArrowDown">
</el-button>
</template>
</el-table-column>
@@ -134,22 +151,22 @@
<!-- 提示信息 -->
<div class="settings-footer">
<el-alert
title="提示：取消修改将恢复到打开设置时的状态"
type="info"
size="small"
:closable="false"
/>
<el-alert
title="提示：可通过上下按钮调整图表顺序，取消修改将恢复到打开设置时的状态"
type="info"
size="small"
:closable="false" />
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, reactive } from 'vue';
import { useStorage } from '@vueuse/core';
import { useEventListener } from '@vueuse/core';
import { ElMessage } from 'element-plus';
import { Loading } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Loading, ArrowUp, ArrowDown, Grid } from '@element-plus/icons-vue';
// 移除draggable组件导入
// 接收存储键名props
const props = defineProps({
@@ -160,10 +177,10 @@ const props = defineProps({
}
});
// 从storage读取配置，不设置预设默认值
// 从storage读取配置
const persistedChartConfigs = useStorage(
props.storageKey,
[], // 空数组作为初始值，不预设默认配置
[],
localStorage,
{
serializer: {
@@ -175,7 +192,7 @@ const persistedChartConfigs = useStorage(
if (Array.isArray(v)) {
return v;
}
return []; // 解析失败时返回空数组
return [];
} catch (e) {
console.error('解析存储的图表配置失败，使用空配置:', e);
return [];
@@ -183,19 +200,37 @@ const persistedChartConfigs = useStorage(
},
write: (v) => JSON.stringify(v)
},
mergeDefaults: false // 关闭默认值合并
mergeDefaults: false
}
);
// 临时配置（用于编辑）
// 临时配置
const tempChartConfigs = ref([]);
// 保存弹窗打开时的初始配置快照（直接来自storage）
// 初始配置快照
const initialChartConfigs = ref([]);
// 保存状态
const saving = ref(false);
// 移除拖拽状态变量：isDragging
// 窗口尺寸响应
const windowWidth = ref(window.innerWidth);
const tableHeight = ref(300);
// 高度输入错误标记
const heightErrorIndex = ref(-1);
// 批量设置弹窗
const showBatchSettings = ref(false);
// 批量设置数据
const batchSettings = reactive({
applyRange: 'all', // 'all' 或 'visible'
height: null,
layout: {
xs: null,
sm: null,
md: null,
lg: null,
xl: null
}
});
// 监听窗口尺寸变化
useEventListener('resize', () => {
@@ -203,35 +238,45 @@ useEventListener('resize', () => {
calculateTableHeight();
});
// 初始化：从storage读取数据，并保存初始快照
// 初始化：补充height默认值
onMounted(() => {
// 确保初始数据是数组
if (!Array.isArray(persistedChartConfigs.value)) {
persistedChartConfigs.value = [];
}
// 初始化临时配置和初始快照
resetToSession();
calculateTableHeight();
});
// 计算表格高度
const calculateTableHeight = () => {
tableHeight.value = Math.max(300, window.innerHeight - 500);
// 根据屏幕高度动态计算表格高度，确保整体布局合理
const panelHeight = window.innerHeight - 220;
tableHeight.value = Math.max(300, Math.min(600, panelHeight));
};
// 重置临时配置为打开弹窗时的状态
// 重置临时配置：补充height默认值
const resetToSession = () => {
try {
// 从storage数据读取
const source = Array.isArray(persistedChartConfigs.value)
? persistedChartConfigs.value
const source = Array.isArray(persistedChartConfigs.value)
? persistedChartConfigs.value
: [];
// 深拷贝保存到临时配置和初始快照
const configCopy = JSON.parse(JSON.stringify(source));
// 深拷贝 + 补充height默认值和visible属性
const configCopy = JSON.parse(JSON.stringify(source)).map(config => ({
...config,
height: config.height || 400,
visible: config.visible !== undefined ? config.visible : true,
layout: {
xs: config.layout?.xs || 24,
sm: config.layout?.sm || 24,
md: config.layout?.md || 12,
lg: config.layout?.lg || 12,
xl: config.layout?.xl || 6
}
}));
tempChartConfigs.value = configCopy;
initialChartConfigs.value = JSON.parse(JSON.stringify(configCopy));
ElMessage.info('已恢复到打开设置时的状态');
} catch (e) {
console.error('重置配置失败:', e);
@@ -239,39 +284,127 @@ const resetToSession = () => {
}
};
// 计算预览区域的span值
const getPreviewSpan = (chart) => {
return Math.floor(chart.layout.md / 4);
// 高度输入验证
const validateHeight = (row, index) => {
heightErrorIndex.value = -1;
if (isNaN(row.height) || row.height < 100 || row.height > 1000) {
heightErrorIndex.value = index;
return false;
}
return true;
};
// 移动图表位置
// 移动图表位置（按钮控制）- 保留按钮功能，移除拖拽相关逻辑
const moveChart = (index, direction) => {
let newIndex;
if (direction === 'up' && index > 0) {
[tempChartConfigs.value[index], tempChartConfigs.value[index - 1]] =
[tempChartConfigs.value[index - 1], tempChartConfigs.value[index]];
newIndex = index - 1;
// 交换位置
[tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] =
[tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
// 触发重绘
tempChartConfigs.value = [...tempChartConfigs.value];
// 添加动画效果
highlightRow(index);
highlightRow(newIndex);
} else if (direction === 'down' && index < tempChartConfigs.value.length - 1) {
[tempChartConfigs.value[index], tempChartConfigs.value[index + 1]] =
[tempChartConfigs.value[index + 1], tempChartConfigs.value[index]];
newIndex = index + 1;
// 交换位置
[tempChartConfigs.value[index], tempChartConfigs.value[newIndex]] =
[tempChartConfigs.value[newIndex], tempChartConfigs.value[index]];
// 触发重绘
tempChartConfigs.value = [...tempChartConfigs.value];
// 添加动画效果
highlightRow(index);
highlightRow(newIndex);
}
};
// 高亮行（动画效果）- 保留按钮移动后的高亮效果
const highlightRow = (index) => {
const rowEl = document.querySelector(`.el-table__row:nth-child(${index + 1})`);
if (rowEl) {
rowEl.classList.add('row-highlight');
setTimeout(() => {
rowEl.classList.remove('row-highlight');
}, 600);
}
};
// 应用批量设置
const applyBatchSettings = () => {
// 过滤需要应用设置的图表
const targetCharts = batchSettings.applyRange === 'visible'
? tempChartConfigs.value.filter(chart => chart.visible)
: tempChartConfigs.value;
if (targetCharts.length === 0) {
ElMessage.warning('没有符合条件的图表可应用设置');
return;
}
// 应用设置
targetCharts.forEach(chart => {
// 应用高度设置
if (batchSettings.height !== null && !isNaN(batchSettings.height) &&
batchSettings.height >= 100 && batchSettings.height <= 1000) {
chart.height = batchSettings.height;
}
// 应用布局设置
Object.keys(batchSettings.layout).forEach(key => {
if (batchSettings.layout[key] !== null) {
chart.layout[key] = batchSettings.layout[key];
}
});
});
// 刷新表格
tempChartConfigs.value = [...tempChartConfigs.value];
showBatchSettings.value = false;
ElMessage.success(`已对 ${targetCharts.length} 个图表应用批量设置`);
};
// 应用设置
const applySettings = async () => {
try {
// 验证所有高度输入
const hasInvalidHeight = tempChartConfigs.value.some((row, index) =>
!validateHeight(row, index)
);
if (hasInvalidHeight) {
ElMessage.error('存在无效的高度配置，请修正后重试');
return;
}
// 检查是否有可见图表
const visibleCharts = tempChartConfigs.value.filter(chart => chart.visible);
if (visibleCharts.length === 0) {
await ElMessageBox.confirm(
'所有图表都处于隐藏状态，确定要应用设置吗？',
'确认提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
);
}
saving.value = true;
if (Array.isArray(tempChartConfigs.value)) {
persistedChartConfigs.value = JSON.parse(JSON.stringify(tempChartConfigs.value));
emits('config-updated', persistedChartConfigs.value);
// 更新初始快照为当前已应用的配置
initialChartConfigs.value = JSON.parse(JSON.stringify(tempChartConfigs.value));
ElMessage.success('配置已保存并生效');
} else {
throw new Error('配置数据格式错误，必须为数组');
}
} catch (error) {
console.error('保存配置失败:', error);
ElMessage.error('保存配置失败，请重试');
if (error !== 'cancel') { // 忽略取消操作的错误
console.error('保存配置失败:', error);
ElMessage.error('保存配置失败，请重试');
}
} finally {
saving.value = false;
}
@@ -288,15 +421,47 @@ defineExpose({
</script>
<style scoped>
/* 保持原有样式不变 */
/* 基础样式 */
.chart-settings-panel {
display: flex;
flex-direction: column;
height: 100%;
min-width: 600px;
min-width: 900px;
padding: 10px;
}
/* 移除所有拖拽相关样式 */
/* 表格行动画效果 */
.el-table__body .el-table-row {
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
/* 行高亮动画 - 保留按钮移动后的高亮效果 */
.row-highlight {
animation: rowHighlight 0.6s ease;
}
@keyframes rowHighlight {
0% { background-color: rgba(22, 119, 255, 0.2); }
100% { background-color: transparent; }
}
/* 高度错误提示 */
.height-error {
font-size: 12px;
color: #ef4444;
margin-top: 4px;
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
20%, 40%, 60%, 80% { transform: translateX(2px); }
}
/* 其他样式 */
.panel-header {
display: flex;
justify-content: space-between;
@@ -330,65 +495,9 @@ defineExpose({
font-size: 16px;
font-weight: 500;
color: #333;
}
.layout-preview {
padding: 12px;
background-color: #f5f7fa;
border-radius: 6px;
}
.preview-container {
width: 100%;
overflow: hidden;
}
.preview-row {
width: 100%;
margin-bottom: 10px !important;
}
.preview-col {
padding: 5px !important;
}
.preview-col-hidden {
opacity: 0.3;
}
.preview-chart {
background-color: white;
border: 1px dashed #ccc;
border-radius: 4px;
height: 80px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
background-color: #f0f2f5;
font-size: 12px;
border-bottom: 1px dashed #ccc;
}
.chart-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chart-placeholder {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #888;
gap: 8px;
}
.charts-config {
@@ -403,14 +512,37 @@ defineExpose({
border-top: 1px solid #eee;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.chart-settings-panel {
min-width: 800px;
}
}
@media (max-width: 992px) {
.chart-settings-panel {
min-width: 700px;
padding: 5px;
}
.settings-content {
gap: 10px;
}
}
@media (max-width: 768px) {
.chart-settings-panel {
min-width: auto;
width: 100%;
overflow-x: auto;
}
.settings-content {
gap: 12px;
.panel-title {
font-size: 16px;
}
.section-title {
font-size: 14px;
}
}
</style>
</style>