From 3bc464bb272c2737e794a886ba89234fdacf6bf5 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期一, 23 三月 2026 11:35:41 +0800
Subject: [PATCH] 标准/实际成本对比分析图表功能优化
---
src/views/costAccounting/stdVsActCostAnalysis/index.vue | 122 +++++++++++++++++++++++++++++++++++++++-
1 files changed, 118 insertions(+), 4 deletions(-)
diff --git a/src/views/costAccounting/stdVsActCostAnalysis/index.vue b/src/views/costAccounting/stdVsActCostAnalysis/index.vue
index 599e1d9..45b0e25 100644
--- a/src/views/costAccounting/stdVsActCostAnalysis/index.vue
+++ b/src/views/costAccounting/stdVsActCostAnalysis/index.vue
@@ -118,9 +118,25 @@
</div>
</template>
<div class="chart-wrap">
+ <div class="chart-tools chart-tools-inline" @click.stop>
+ <button class="chart-tool" type="button" @click="openLargeChart">鏌ョ湅澶у浘</button>
+ <button class="chart-tool" type="button" @click="downloadChartImage">涓嬭浇鍥捐〃</button>
+ </div>
<div ref="chartRef" class="chart-content"></div>
</div>
</el-card>
+
+ <el-dialog
+ v-model="largeChartVisible"
+ title="鏍囧噯/瀹為檯鎴愭湰瀵规瘮澶у浘"
+ width="88%"
+ top="6vh"
+ destroy-on-close
+ @opened="initLargeChart"
+ @closed="disposeLargeChart"
+ >
+ <div ref="largeChartRef" class="large-chart-content"></div>
+ </el-dialog>
<el-card class="table-card" shadow="never">
<template #header>
@@ -191,7 +207,11 @@
const uploadRef = ref();
const chartRef = ref(null);
+const largeChartRef = ref(null);
let chartInstance = null;
+let largeChartInstance = null;
+const largeChartVisible = ref(false);
+const currentChartOption = ref(null);
const actualCostSource = ref([
{ month: "2026-01", category: "鐡风爾", costType: "鑳借�楁垚鏈�", actualCost: 182000 },
@@ -298,10 +318,9 @@
return { xAxis, standard, actual, diffRate };
};
-const updateChart = () => {
- if (!chartInstance) return;
+const buildChartOption = () => {
const { xAxis, standard, actual, diffRate } = getChartData();
- chartInstance.setOption({
+ return {
tooltip: {
trigger: "axis",
axisPointer: { type: "shadow" },
@@ -363,7 +382,14 @@
lineStyle: { width: 2 },
},
],
- });
+ };
+};
+
+const updateChart = () => {
+ const option = buildChartOption();
+ currentChartOption.value = option;
+ chartInstance?.setOption(option);
+ largeChartInstance?.setOption(option);
};
const normalizeCostType = (value) => {
@@ -501,6 +527,54 @@
const handleResize = () => {
chartInstance?.resize?.();
+ largeChartInstance?.resize?.();
+};
+
+const openLargeChart = () => {
+ if (!tableData.value.length) {
+ ElMessage.warning("鏆傛棤鍥捐〃鏁版嵁鍙煡鐪�");
+ return;
+ }
+ largeChartVisible.value = true;
+};
+
+const initLargeChart = () => {
+ nextTick(() => {
+ if (!largeChartRef.value) return;
+ if (!largeChartInstance) {
+ largeChartInstance = echarts.init(largeChartRef.value);
+ }
+ if (currentChartOption.value) {
+ largeChartInstance.setOption(currentChartOption.value);
+ } else {
+ updateChart();
+ }
+ });
+};
+
+const disposeLargeChart = () => {
+ largeChartInstance?.dispose?.();
+ largeChartInstance = null;
+};
+
+const downloadChartImage = () => {
+ const sourceChart = chartInstance || largeChartInstance;
+ if (!sourceChart) {
+ ElMessage.warning("鍥捐〃灏氭湭鍔犺浇瀹屾垚");
+ return;
+ }
+ const url = sourceChart.getDataURL({
+ type: "png",
+ pixelRatio: 2,
+ backgroundColor: "#ffffff",
+ });
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = `鏍囧噯瀹為檯鎴愭湰瀵规瘮鍥綺${new Date().toISOString().slice(0, 10)}.png`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ ElMessage.success("鍥捐〃涓嬭浇鎴愬姛");
};
onMounted(() => {
@@ -517,6 +591,7 @@
window.removeEventListener("resize", handleResize);
chartInstance?.dispose?.();
chartInstance = null;
+ disposeLargeChart();
});
watch(tableData, () => {
@@ -687,6 +762,8 @@
}
.chart-wrap {
+ position: relative;
+ padding-top: 34px;
border-radius: 12px;
overflow: hidden;
}
@@ -695,6 +772,43 @@
height: 360px;
}
+.chart-tools {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.chart-tools-inline {
+ position: absolute;
+ top: 4px;
+ right: 6px;
+ z-index: 2;
+}
+
+.chart-tool {
+ font-size: 11px;
+ font-weight: 650;
+ line-height: 1;
+ padding: 6px 10px;
+ border-radius: 10px;
+ border: 1px solid rgba(15, 23, 42, 0.1);
+ background: rgba(255, 255, 255, 0.78);
+ color: rgba(15, 23, 42, 0.72);
+ cursor: pointer;
+ transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
+}
+
+.chart-tool:hover {
+ background: rgba(47, 111, 237, 0.08);
+ border-color: rgba(47, 111, 237, 0.22);
+ transform: translateY(-1px);
+}
+
+.large-chart-content {
+ height: 70vh;
+ min-height: 520px;
+}
+
.pagination-container {
display: flex;
justify-content: flex-end;
--
Gitblit v1.9.3