From 58916670fe54367e9c9350596fb293787b73b425 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 23 三月 2026 18:00:36 +0800
Subject: [PATCH] Merge branch 'dev_银川_中盛建材' of http://114.132.189.42:9002/r/product-inventory-management into dev_银川_中盛建材
---
src/views/costAccounting/stdVsActCostAnalysis/index.vue | 1440 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,440 insertions(+), 0 deletions(-)
diff --git a/src/views/costAccounting/stdVsActCostAnalysis/index.vue b/src/views/costAccounting/stdVsActCostAnalysis/index.vue
new file mode 100644
index 0000000..8fa9f16
--- /dev/null
+++ b/src/views/costAccounting/stdVsActCostAnalysis/index.vue
@@ -0,0 +1,1440 @@
+<template>
+ <div class="std-cost-page">
+ <div class="page-bg" aria-hidden="true">
+ <div class="bg-mesh" />
+ <div class="bg-orb bg-orb--a" />
+ <div class="bg-orb bg-orb--b" />
+ <div class="bg-orb bg-orb--c" />
+ <div class="bg-grid" />
+ </div>
+
+ <div class="page-inner">
+ <el-card class="filter-card glass-card" shadow="never">
+ <template #header>
+ <div class="card-head">
+ <div class="card-head-left">
+ <div class="title-badge">
+ <el-icon class="card-icon ui-icon"><DataLine /></el-icon>
+ </div>
+ <div class="title-block">
+ <div class="title-row">
+ <span class="card-title shimmer-text">鏍囧噯/瀹為檯鎴愭湰瀵规瘮鍒嗘瀽</span>
+ <span class="live-pill">瀹炴椂鍒嗘瀽</span>
+ </div>
+ <span class="subtle">宸紓 = 瀹為檯鎴愭湰 鈭� 鏍囧噯鎴愭湰</span>
+ </div>
+ </div>
+ </div>
+ </template>
+
+ <div class="filter-layout">
+ <el-form :model="searchForm" :inline="true" class="filter-form">
+ <el-form-item label="鏈堜唤鑼冨洿">
+ <el-date-picker
+ v-model="searchForm.monthRange"
+ type="monthrange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫湀浠�"
+ end-placeholder="缁撴潫鏈堜唤"
+ value-format="YYYY-MM"
+ class="w-260"
+ @change="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="浜у搧绫诲埆">
+ <el-select
+ v-model="searchForm.category"
+ clearable
+ filterable
+ placeholder="鍏ㄩ儴绫诲埆"
+ class="w-180"
+ @change="handleQuery"
+ >
+ <el-option
+ v-for="item in categoryOptions"
+ :key="item"
+ :label="item"
+ :value="item"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鎴愭湰绫诲瀷">
+ <el-select
+ v-model="searchForm.costType"
+ clearable
+ placeholder="鍏ㄩ儴绫诲瀷"
+ class="w-180"
+ @change="handleQuery"
+ >
+ <el-option label="鑳借�楁垚鏈�" value="鑳借�楁垚鏈�" />
+ <el-option label="鐢熶骇鎴愭湰" value="鐢熶骇鎴愭湰" />
+ </el-select>
+ </el-form-item>
+ </el-form>
+
+ <div class="filter-actions">
+ <div class="action-group">
+ <el-button class="lux-btn" type="primary" @click="handleQuery">鍒锋柊</el-button>
+ <el-button class="lux-btn" @click="handleReset">閲嶇疆</el-button>
+ </div>
+ <div class="action-group">
+ <el-dropdown trigger="click" @command="handleImportCommand">
+ <el-button class="lux-btn" type="success" plain>
+ 鏍囧噯鎴愭湰瀵煎叆
+ <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+ </el-button>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item command="template">涓嬭浇瀵煎叆妯℃澘</el-dropdown-item>
+ <el-dropdown-item command="upload">Excel 瀵煎叆</el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ <el-upload
+ ref="uploadRef"
+ class="hidden-upload"
+ :auto-upload="false"
+ :show-file-list="false"
+ accept=".xlsx,.xls"
+ :on-change="handleFileChange"
+ />
+ </div>
+ </div>
+ </div>
+ </el-card>
+
+ <el-card class="panel-card glass-card kpi-card" shadow="never">
+ <div class="kpi-strip">
+ <div class="kpi-item kpi-std">
+ <div class="kpi-top">
+ <el-icon class="kpi-ico"><Histogram /></el-icon>
+ <div class="kpi-label">鏍囧噯鎴愭湰鍚堣</div>
+ </div>
+ <div class="kpi-value">楼{{ formatMoney(overview.standardCost) }}</div>
+ <div class="kpi-glow" />
+ </div>
+ <div class="kpi-item kpi-act">
+ <div class="kpi-top">
+ <el-icon class="kpi-ico"><TrendCharts /></el-icon>
+ <div class="kpi-label">瀹為檯鎴愭湰鍚堣</div>
+ </div>
+ <div class="kpi-value">楼{{ formatMoney(overview.actualCost) }}</div>
+ <div class="kpi-glow" />
+ </div>
+ <div class="kpi-item kpi-diff">
+ <div class="kpi-top">
+ <el-icon class="kpi-ico"><Switch /></el-icon>
+ <div class="kpi-label">宸紓鍚堣</div>
+ </div>
+ <div class="kpi-value" :class="overview.diff >= 0 ? 'cost-value' : 'ok-value'">
+ 楼{{ formatMoney(overview.diff) }}
+ </div>
+ <div class="kpi-glow" />
+ </div>
+ <div class="kpi-item kpi-rate">
+ <div class="kpi-top">
+ <el-icon class="kpi-ico"><PieChart /></el-icon>
+ <div class="kpi-label">宸紓鐜�</div>
+ </div>
+ <div class="kpi-value">{{ formatPercent(overview.diffRate) }}</div>
+ <div class="kpi-glow" />
+ </div>
+ </div>
+ </el-card>
+
+ <el-card class="table-card glass-card chart-section" shadow="never">
+ <template #header>
+ <div class="panel-head">
+ <div class="panel-head-main">
+ <span class="panel-accent" />
+ <div>
+ <span class="card-title">鏍囧噯/瀹為檯鎴愭湰鍙鍖�</span>
+ <span class="chart-tag">鏌辩姸 路 鎶樼嚎</span>
+ </div>
+ </div>
+ <span class="subtle">鏀寔鎸夋湀浠姐�佷骇鍝佺被鍒�佹垚鏈被鍨嬬瓫閫�</span>
+ </div>
+ </template>
+ <div class="chart-wrap">
+ <div class="chart-tools chart-tools-inline" @click.stop>
+ <button class="chart-tool chart-tool--primary" type="button" @click="openLargeChart">
+ <el-icon><ZoomIn /></el-icon>
+ 鏌ョ湅澶у浘
+ </button>
+ <button class="chart-tool" type="button" @click="downloadChartImage">
+ <el-icon><Download /></el-icon>
+ 涓嬭浇鍥捐〃
+ </button>
+ </div>
+ <div ref="chartRef" class="chart-content"></div>
+ </div>
+ </el-card>
+
+ <el-dialog
+ v-model="largeChartVisible"
+ title="鏍囧噯/瀹為檯鎴愭湰瀵规瘮澶у浘"
+ width="88%"
+ top="6vh"
+ append-to-body
+ destroy-on-close
+ @opened="initLargeChart"
+ @closed="disposeLargeChart"
+ >
+ <div ref="largeChartRef" class="large-chart-content"></div>
+ </el-dialog>
+
+ <el-card class="table-card glass-card" shadow="never">
+ <template #header>
+ <div class="panel-head">
+ <div class="panel-head-main">
+ <span class="panel-accent panel-accent--emerald" />
+ <span class="card-title">瀵规瘮鏄庣粏</span>
+ </div>
+ <span class="count-chip">鍏� {{ tableData.length }} 鏉�</span>
+ </div>
+ </template>
+ <el-table :data="pagedTableData" stripe class="lux-table" @sort-change="handleSortChange">
+ <el-table-column prop="month" label="鏈堜唤" width="110" />
+ <el-table-column prop="category" label="浜у搧绫诲埆" min-width="140" />
+ <el-table-column prop="costType" label="鎴愭湰绫诲瀷" min-width="120" />
+ <el-table-column prop="standardCost" label="鏍囧噯鎴愭湰(鍏�)" sortable="custom" align="right">
+ <template #default="scope">楼{{ formatMoney(scope.row.standardCost) }}</template>
+ </el-table-column>
+ <el-table-column prop="actualCost" label="瀹為檯鎴愭湰(鍏�)" sortable="custom" align="right">
+ <template #default="scope">楼{{ formatMoney(scope.row.actualCost) }}</template>
+ </el-table-column>
+ <el-table-column prop="diff" label="宸紓(鍏�)" sortable="custom" align="right">
+ <template #default="scope">
+ <span :class="scope.row.diff >= 0 ? 'cost-value' : 'ok-value'">
+ {{ formatSignedMoney(scope.row.diff) }}
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="diffRate" label="宸紓鐜�" sortable="custom" align="right">
+ <template #default="scope">
+ <span :class="scope.row.diffRate >= 0 ? 'cost-value' : 'ok-value'">
+ {{ formatPercent(scope.row.diffRate) }}
+ </span>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pagination-container">
+ <el-pagination
+ v-model:current-page="page.current"
+ v-model:page-size="page.size"
+ :page-sizes="[10, 20, 50, 100]"
+ :total="tableData.length"
+ layout="total, sizes, prev, pager, next, jumper"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </el-card>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import {
+ ArrowDown,
+ DataLine,
+ Download,
+ Histogram,
+ PieChart,
+ Switch,
+ TrendCharts,
+ ZoomIn,
+} from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+import * as echarts from "echarts";
+import * as XLSX from "xlsx";
+
+const getDefaultMonthRange = () => {
+ const end = new Date();
+ const start = new Date();
+ start.setMonth(start.getMonth() - 2);
+ return [start.toISOString().slice(0, 7), end.toISOString().slice(0, 7)];
+};
+
+const searchForm = reactive({
+ monthRange: getDefaultMonthRange(),
+ category: "",
+ costType: "",
+});
+
+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([]);
+const standardCostSource = ref([]);
+
+const fakeMonths = ["2026-01", "2026-02", "2026-03"];
+const fakeCategories = [
+ "绮夌叅鐏�",
+ "鐭崇伆",
+ "姘存偿",
+ "閾濈矇鑶�",
+ "鑴辨ā鍓�",
+ "鐭宠啅",
+ "鎵撳寘甯�",
+ "闃茶厫鍓傦紙鏉挎潗鐢級",
+ "姘у寲闀侊紙鏉挎潗鐢級",
+ "鍐锋尋涓濓紙鏉挎潗鐢級",
+ "鍗℃墸锛堟澘鏉愮敤锛�",
+ "鏉愭枡灏忚",
+ "姘�",
+ "鐢�",
+ "钂告苯",
+];
+
+const fakeCostType = (category) => (["姘�", "鐢�", "钂告苯"].includes(category) ? "鑳借�楁垚鏈�" : "鐢熶骇鎴愭湰");
+
+// 姣忎釜绫诲埆鐨勬爣鍑嗘垚鏈熀鍑嗗�硷紙浠呯敤浜庡亣鏁版嵁锛�
+const baseStandardCostByCategory = {
+ 绮夌叅鐏�: 98000,
+ 鐭崇伆: 52000,
+ 姘存偿: 175000,
+ 閾濈矇鑶�: 32000,
+ 鑴辨ā鍓�: 21000,
+ 鐭宠啅: 41000,
+ 鎵撳寘甯�: 14500,
+ "闃茶厫鍓傦紙鏉挎潗鐢級": 12500,
+ "姘у寲闀侊紙鏉挎潗鐢級": 22000,
+ "鍐锋尋涓濓紙鏉挎潗鐢級": 9800,
+ "鍗℃墸锛堟澘鏉愮敤锛�": 8600,
+ 鏉愭枡灏忚: 420000,
+ 姘�: 6800,
+ 鐢�: 26000,
+ 钂告苯: 52000,
+};
+
+// 鏈堜唤娉㈠姩绯绘暟锛堣鍥捐〃鐪嬭捣鏉ユ洿鈥滅湡瀹炩�濅竴浜涳級
+const monthFactorByMonth = {
+ "2026-01": 1.0,
+ "2026-02": 1.06,
+ "2026-03": 0.97,
+};
+
+// 瀹為檯鎴愭湰鐩稿鏍囧噯鎴愭湰鐨勫亸绉绘瘮渚嬶紙鐢ㄤ簬娴嬭瘯姝ｈ礋宸紓灞曠ず锛�
+const diffRatioByCategory = {
+ 绮夌叅鐏�: 0.05,
+ 鐭崇伆: -0.01,
+ 姘存偿: 0.03,
+ 閾濈矇鑶�: 0.0,
+ 鑴辨ā鍓�: -0.04,
+ 鐭宠啅: 0.02,
+ 鎵撳寘甯�: -0.03,
+ "闃茶厫鍓傦紙鏉挎潗鐢級": 0.06,
+ "姘у寲闀侊紙鏉挎潗鐢級": -0.02,
+ "鍐锋尋涓濓紙鏉挎潗鐢級": 0.01,
+ "鍗℃墸锛堟澘鏉愮敤锛�": -0.05,
+ 鏉愭枡灏忚: 0.02,
+ 姘�: -0.01,
+ 鐢�: 0.04,
+ 钂告苯: -0.03,
+};
+
+const buildFakeSources = () => {
+ const stdRows = [];
+ const actRows = [];
+
+ for (const month of fakeMonths) {
+ const monthFactor = monthFactorByMonth[month] ?? 1;
+ const monthAdj = month === "2026-02" ? 0.005 : month === "2026-03" ? -0.006 : 0;
+
+ for (const category of fakeCategories) {
+ const costType = fakeCostType(category);
+ const base = baseStandardCostByCategory[category] ?? 0;
+ const standardCost = Math.round(base * monthFactor);
+ const diffRatio = (diffRatioByCategory[category] ?? 0) + monthAdj;
+ const actualCost = Math.round(standardCost * (1 + diffRatio));
+
+ stdRows.push({ month, category, costType, standardCost });
+ actRows.push({ month, category, costType, actualCost });
+ }
+ }
+
+ standardCostSource.value = stdRows;
+ actualCostSource.value = actRows;
+};
+
+buildFakeSources();
+
+const categoryOptions = computed(() => {
+ const all = [...actualCostSource.value, ...standardCostSource.value];
+ return Array.from(new Set(all.map((item) => item.category)));
+});
+
+const inRange = (value, range) => {
+ if (!Array.isArray(range) || range.length !== 2 || !range[0] || !range[1]) return true;
+ return value >= range[0] && value <= range[1];
+};
+
+const mergedRows = computed(() => {
+ const key = (item) => `${item.month}__${item.category}__${item.costType}`;
+ const stdMap = new Map(standardCostSource.value.map((item) => [key(item), item]));
+ const actMap = new Map(actualCostSource.value.map((item) => [key(item), item]));
+ const keySet = new Set([...stdMap.keys(), ...actMap.keys()]);
+ const rows = [];
+
+ for (const k of keySet) {
+ const std = stdMap.get(k);
+ const act = actMap.get(k);
+ const month = std?.month || act?.month || "";
+ const category = std?.category || act?.category || "";
+ const costType = std?.costType || act?.costType || "";
+ const standardCost = Number(std?.standardCost || 0);
+ const actualCost = Number(act?.actualCost || 0);
+ const diff = actualCost - standardCost;
+ const diffRate = standardCost === 0 ? 0 : (diff / standardCost) * 100;
+
+ rows.push({ month, category, costType, standardCost, actualCost, diff, diffRate });
+ }
+
+ return rows.sort((a, b) => {
+ if (a.month !== b.month) return a.month > b.month ? 1 : -1;
+ if (a.category !== b.category) return a.category.localeCompare(b.category, "zh-Hans-CN");
+ return a.costType.localeCompare(b.costType, "zh-Hans-CN");
+ });
+});
+
+const tableData = computed(() =>
+ mergedRows.value.filter((item) => {
+ const hitMonth = inRange(item.month, searchForm.monthRange);
+ const hitCategory = !searchForm.category || item.category === searchForm.category;
+ const hitCostType = !searchForm.costType || item.costType === searchForm.costType;
+ return hitMonth && hitCategory && hitCostType;
+ })
+);
+
+const page = reactive({
+ current: 1,
+ size: 10,
+});
+
+/** sortable="custom" 闇�鍦� sort-change 閲岃嚜琛屾帓搴忥紝鍐嶅垎椤� */
+const tableSort = reactive({
+ prop: "",
+ order: "",
+});
+
+const handleSortChange = ({ prop, order }) => {
+ tableSort.prop = prop || "";
+ tableSort.order = order || "";
+ page.current = 1;
+};
+
+const sortedTableData = computed(() => {
+ const rows = [...tableData.value];
+ if (!tableSort.prop || !tableSort.order) return rows;
+ const dir = tableSort.order === "ascending" ? 1 : -1;
+ const key = tableSort.prop;
+ rows.sort((a, b) => {
+ const na = Number(a[key]);
+ const nb = Number(b[key]);
+ const va = Number.isFinite(na) ? na : 0;
+ const vb = Number.isFinite(nb) ? nb : 0;
+ if (va === vb) return 0;
+ return va < vb ? -dir : dir;
+ });
+ return rows;
+});
+
+const pagedTableData = computed(() => {
+ const start = (page.current - 1) * page.size;
+ return sortedTableData.value.slice(start, start + page.size);
+});
+
+const overview = computed(() => {
+ const standardCost = tableData.value.reduce((sum, item) => sum + item.standardCost, 0);
+ const actualCost = tableData.value.reduce((sum, item) => sum + item.actualCost, 0);
+ const diff = actualCost - standardCost;
+ const diffRate = standardCost === 0 ? 0 : (diff / standardCost) * 100;
+ return { standardCost, actualCost, diff, diffRate };
+});
+
+const getChartData = () => {
+ const xAxis = tableData.value.map(
+ (item) => `${item.month}\n${item.category}-${item.costType.replace("鎴愭湰", "")}`
+ );
+ const standard = tableData.value.map((item) => item.standardCost);
+ const actual = tableData.value.map((item) => item.actualCost);
+ const diffRate = tableData.value.map((item) => Number(item.diffRate.toFixed(2)));
+ return { xAxis, standard, actual, diffRate };
+};
+
+const buildChartOption = () => {
+ const { xAxis, standard, actual, diffRate } = getChartData();
+ return {
+ animation: true,
+ animationDuration: 920,
+ animationEasing: "cubicOut",
+ textStyle: { fontFamily: "inherit" },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "cross",
+ crossStyle: { color: "rgba(47, 111, 237, 0.35)" },
+ lineStyle: { type: "dashed" },
+ },
+ backgroundColor: "rgba(255, 255, 255, 0.94)",
+ borderColor: "rgba(47, 111, 237, 0.22)",
+ borderWidth: 1,
+ padding: [12, 14],
+ textStyle: { color: "rgba(15, 23, 42, 0.88)" },
+ extraCssText: "box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12); border-radius: 12px;",
+ formatter: (params) => {
+ const row = tableData.value[params[0]?.dataIndex] || {};
+ return [
+ `${row.month || ""} ${row.category || ""} ${row.costType || ""}`,
+ `鏍囧噯鎴愭湰锛毬�${formatMoney(row.standardCost || 0)}`,
+ `瀹為檯鎴愭湰锛毬�${formatMoney(row.actualCost || 0)}`,
+ `宸紓锛�${formatSignedMoney(row.diff || 0)}`,
+ `宸紓鐜囷細${formatPercent(row.diffRate || 0)}`,
+ ].join("<br/>");
+ },
+ },
+ legend: {
+ data: ["鏍囧噯鎴愭湰", "瀹為檯鎴愭湰", "宸紓鐜�"],
+ top: 6,
+ itemGap: 18,
+ textStyle: { color: "rgba(15, 23, 42, 0.72)" },
+ },
+ grid: { left: "3%", right: "3%", top: "18%", bottom: "14%", containLabel: true },
+ xAxis: {
+ type: "category",
+ data: xAxis,
+ axisLabel: { color: "rgba(15, 23, 42, 0.62)", fontSize: 11 },
+ axisLine: { lineStyle: { color: "rgba(15, 23, 42, 0.1)" } },
+ axisTick: { show: false },
+ },
+ yAxis: [
+ {
+ type: "value",
+ name: "鎴愭湰(鍏�)",
+ nameTextStyle: { color: "rgba(15, 23, 42, 0.5)", fontSize: 11 },
+ axisLabel: { color: "rgba(15, 23, 42, 0.55)" },
+ splitLine: { lineStyle: { color: "rgba(15, 23, 42, 0.06)", type: "dashed" } },
+ },
+ {
+ type: "value",
+ name: "宸紓鐜�(%)",
+ nameTextStyle: { color: "rgba(15, 23, 42, 0.5)", fontSize: 11 },
+ axisLabel: { color: "rgba(15, 23, 42, 0.55)" },
+ splitLine: { show: false },
+ },
+ ],
+ series: [
+ {
+ name: "鏍囧噯鎴愭湰",
+ type: "bar",
+ barMaxWidth: 26,
+ data: standard,
+ itemStyle: {
+ borderRadius: [6, 6, 0, 0],
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "#8eb4ff" },
+ { offset: 1, color: "#3d74f5" },
+ ]),
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 12,
+ shadowColor: "rgba(61, 116, 245, 0.45)",
+ },
+ },
+ },
+ {
+ name: "瀹為檯鎴愭湰",
+ type: "bar",
+ barMaxWidth: 26,
+ data: actual,
+ itemStyle: {
+ borderRadius: [6, 6, 0, 0],
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "#fcd34d" },
+ { offset: 1, color: "#ea580c" },
+ ]),
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 12,
+ shadowColor: "rgba(234, 88, 12, 0.4)",
+ },
+ },
+ },
+ {
+ name: "宸紓鐜�",
+ type: "line",
+ yAxisIndex: 1,
+ smooth: true,
+ symbol: "circle",
+ symbolSize: 7,
+ showSymbol: true,
+ data: diffRate,
+ lineStyle: { width: 3, shadowBlur: 8, shadowColor: "rgba(239, 68, 68, 0.35)" },
+ itemStyle: {
+ color: "#ef4444",
+ borderColor: "#fff",
+ borderWidth: 2,
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "rgba(239, 68, 68, 0.28)" },
+ { offset: 1, color: "rgba(239, 68, 68, 0.02)" },
+ ]),
+ },
+ },
+ ],
+ };
+};
+
+const updateChart = () => {
+ const option = buildChartOption();
+ currentChartOption.value = option;
+ chartInstance?.setOption(option);
+ largeChartInstance?.setOption(option);
+};
+
+const normalizeCostType = (value) => {
+ const text = String(value || "").trim();
+ if (!text) return "";
+ if (text.includes("鑳借��")) return "鑳借�楁垚鏈�";
+ if (text.includes("鐢熶骇")) return "鐢熶骇鎴愭湰";
+ return text;
+};
+
+const parseImportedRows = (rows) => {
+ const normalized = rows
+ .map((item) => {
+ const month = String(item["鏈堜唤"] || item.month || "").slice(0, 7);
+ const category = String(item["浜у搧绫诲埆"] || item.category || "").trim();
+ const costType = normalizeCostType(item["鎴愭湰绫诲瀷"] || item.costType);
+ const standardCost = Number(item["鏍囧噯鎴愭湰"] ?? item.standardCost ?? 0);
+ return { month, category, costType, standardCost };
+ })
+ .filter((item) => item.month && item.category && item.costType && Number.isFinite(item.standardCost));
+
+ return normalized;
+};
+
+const replaceStandardSourceByImport = (importRows) => {
+ const map = new Map();
+ for (const item of importRows) {
+ const k = `${item.month}__${item.category}__${item.costType}`;
+ map.set(k, item);
+ }
+ standardCostSource.value = Array.from(map.values());
+};
+
+const handleFileChange = async (uploadFile) => {
+ try {
+ const file = uploadFile.raw;
+ if (!file) return;
+ const data = await file.arrayBuffer();
+ const workbook = XLSX.read(data, { type: "array" });
+ const sheetName = workbook.SheetNames[0];
+ const sheet = workbook.Sheets[sheetName];
+ const rows = XLSX.utils.sheet_to_json(sheet, { defval: "" });
+ const parsed = parseImportedRows(rows);
+ if (!parsed.length) {
+ ElMessage.warning("瀵煎叆澶辫触锛氭ā鏉垮唴瀹逛负绌烘垨瀛楁涓嶅尮閰�");
+ return;
+ }
+ replaceStandardSourceByImport(parsed);
+ ElMessage.success(`瀵煎叆鎴愬姛锛�${parsed.length} 鏉℃爣鍑嗘垚鏈褰昤);
+ handleQuery();
+ } catch (error) {
+ console.error(error);
+ ElMessage.error("瀵煎叆澶辫触锛岃妫�鏌� Excel 鏍煎紡");
+ } finally {
+ uploadRef.value?.clearFiles?.();
+ }
+};
+
+const openUploadSelector = () => {
+ const input = uploadRef.value?.$el?.querySelector?.("input[type='file']");
+ if (!input) {
+ ElMessage.warning("涓婁紶缁勪欢灏氭湭灏辩华锛岃绋嶅悗閲嶈瘯");
+ return;
+ }
+ input.click();
+};
+
+const handleImportCommand = (command) => {
+ if (command === "template") {
+ downloadTemplate();
+ return;
+ }
+ if (command === "upload") {
+ openUploadSelector();
+ }
+};
+
+const downloadTemplate = () => {
+ const sample = [
+ { 鏈堜唤: "2026-03", 浜у搧绫诲埆: "绮夌叅鐏�", 鎴愭湰绫诲瀷: "鏍囧噯鐢熶骇鎴愭湰", 鏍囧噯鎴愭湰: 98000 },
+ { 鏈堜唤: "2026-03", 浜у搧绫诲埆: "姘存偿", 鎴愭湰绫诲瀷: "鏍囧噯鐢熶骇鎴愭湰", 鏍囧噯鎴愭湰: 175000 },
+ { 鏈堜唤: "2026-03", 浜у搧绫诲埆: "鐢�", 鎴愭湰绫诲瀷: "鏍囧噯鑳借�楁垚鏈�", 鏍囧噯鎴愭湰: 26000 },
+ { 鏈堜唤: "2026-03", 浜у搧绫诲埆: "钂告苯", 鎴愭湰绫诲瀷: "鏍囧噯鑳借�楁垚鏈�", 鏍囧噯鎴愭湰: 52000 },
+ { 鏈堜唤: "2026-03", 浜у搧绫诲埆: "姘�", 鎴愭湰绫诲瀷: "鏍囧噯鑳借�楁垚鏈�", 鏍囧噯鎴愭湰: 6800 },
+ ];
+ const ws = XLSX.utils.json_to_sheet(sample);
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, "鏍囧噯鎴愭湰妯℃澘");
+ XLSX.writeFile(wb, "鏍囧噯鎴愭湰鎸夋湀瀵煎叆妯℃澘.xlsx");
+ ElMessage.success("妯℃澘宸蹭笅杞�");
+};
+
+const handleQuery = () => {
+ updateChart();
+};
+
+const handleReset = () => {
+ searchForm.monthRange = getDefaultMonthRange();
+ searchForm.category = "";
+ searchForm.costType = "";
+ tableSort.prop = "";
+ tableSort.order = "";
+ page.current = 1;
+ handleQuery();
+};
+
+const handleSizeChange = (val) => {
+ page.size = val;
+ page.current = 1;
+};
+
+const handleCurrentChange = (val) => {
+ page.current = val;
+};
+
+const formatMoney = (v) => {
+ const n = Number.parseFloat(v);
+ const value = Number.isFinite(n) ? n : 0;
+ return value.toLocaleString("zh-CN", {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ });
+};
+
+const formatSignedMoney = (v) => {
+ const n = Number.parseFloat(v);
+ const value = Number.isFinite(n) ? n : 0;
+ const sign = value >= 0 ? "+" : "";
+ return `${sign}楼${formatMoney(value)}`;
+};
+
+const formatPercent = (v) => {
+ const n = Number.parseFloat(v);
+ const value = Number.isFinite(n) ? n : 0;
+ const sign = value >= 0 ? "+" : "";
+ return `${sign}${value.toFixed(2)}%`;
+};
+
+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();
+ }
+ // 寮圭獥鍑虹幇鍚庡鍣ㄥ昂瀵镐細鍙樺寲锛屽己鍒� resize 闃叉 canvas 婧㈠嚭閬尅琛ㄥご/鍏抽棴鎸夐挳
+ largeChartInstance?.resize?.();
+ });
+};
+
+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(() => {
+ nextTick(() => {
+ if (chartRef.value && !chartInstance) {
+ chartInstance = echarts.init(chartRef.value);
+ }
+ updateChart();
+ });
+ window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+ window.removeEventListener("resize", handleResize);
+ chartInstance?.dispose?.();
+ chartInstance = null;
+ disposeLargeChart();
+});
+
+watch(tableData, () => {
+ const maxPage = Math.max(1, Math.ceil(tableData.value.length / page.size));
+ if (page.current > maxPage) page.current = maxPage;
+ nextTick(updateChart);
+});
+</script>
+
+<style scoped lang="scss">
+@keyframes mesh-shift {
+ 0%,
+ 100% {
+ opacity: 1;
+ transform: scale(1) translate(0, 0);
+ }
+ 50% {
+ opacity: 0.85;
+ transform: scale(1.02) translate(-1%, 1%);
+ }
+}
+
+@keyframes orb-float {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(12px, -18px) scale(1.05);
+ }
+ 66% {
+ transform: translate(-8px, 10px) scale(0.98);
+ }
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: 200% center;
+ }
+ 100% {
+ background-position: -200% center;
+ }
+}
+
+.std-cost-page {
+ --lux-bg: #eef1f8;
+ --lux-card: rgba(255, 255, 255, 0.72);
+ --lux-border: rgba(15, 23, 42, 0.1);
+ --lux-text: rgba(15, 23, 42, 0.92);
+ --lux-subtle: rgba(15, 23, 42, 0.58);
+ --lux-primary: #2f6fed;
+ --lux-success: #16a34a;
+ --lux-warning: #f59e0b;
+ --lux-danger: #ef4444;
+ --lux-shadow-soft: 0 12px 40px rgba(15, 23, 42, 0.08);
+ --lux-shadow-lift: 0 20px 50px rgba(47, 111, 237, 0.12);
+ --lux-radius: 16px;
+
+ position: relative;
+ min-height: 100%;
+ padding: 20px 22px 28px;
+ overflow: hidden;
+ background: linear-gradient(165deg, #e8ecf7 0%, #f4f6fb 42%, #fafbfd 100%);
+}
+
+.page-bg {
+ pointer-events: none;
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+}
+
+.bg-mesh {
+ position: absolute;
+ inset: -20%;
+ background:
+ radial-gradient(ellipse 80% 50% at 15% 0%, rgba(47, 111, 237, 0.18), transparent 50%),
+ radial-gradient(ellipse 60% 45% at 85% 15%, rgba(245, 158, 11, 0.12), transparent 45%),
+ radial-gradient(ellipse 50% 40% at 50% 100%, rgba(22, 163, 74, 0.08), transparent 50%);
+ animation: mesh-shift 14s ease-in-out infinite;
+}
+
+.bg-orb {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(60px);
+ opacity: 0.55;
+ animation: orb-float 18s ease-in-out infinite;
+}
+
+.bg-orb--a {
+ width: 320px;
+ height: 320px;
+ top: -80px;
+ right: 5%;
+ background: rgba(47, 111, 237, 0.35);
+}
+
+.bg-orb--b {
+ width: 260px;
+ height: 260px;
+ bottom: 10%;
+ left: -40px;
+ background: rgba(99, 102, 241, 0.28);
+ animation-delay: -6s;
+}
+
+.bg-orb--c {
+ width: 200px;
+ height: 200px;
+ top: 40%;
+ right: 25%;
+ background: rgba(245, 158, 11, 0.22);
+ animation-delay: -12s;
+}
+
+.bg-grid {
+ position: absolute;
+ inset: 0;
+ opacity: 0.35;
+ background-image:
+ linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
+ background-size: 48px 48px;
+ mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 20%, transparent 75%);
+}
+
+.page-inner {
+ position: relative;
+ z-index: 1;
+}
+
+.glass-card {
+ backdrop-filter: blur(14px);
+ -webkit-backdrop-filter: blur(14px);
+ border: 1px solid rgba(255, 255, 255, 0.65);
+ box-shadow: var(--lux-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+ transition: box-shadow 0.35s ease, transform 0.35s ease;
+}
+
+.glass-card:hover {
+ box-shadow: var(--lux-shadow-lift), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.filter-card,
+.panel-card,
+.table-card {
+ border-radius: var(--lux-radius);
+ border-color: var(--lux-border);
+ background: var(--lux-card);
+}
+
+.filter-card,
+.panel-card,
+.table-card {
+ margin-bottom: 16px;
+}
+
+.title-badge {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 44px;
+ height: 44px;
+ border-radius: 14px;
+ background: linear-gradient(145deg, rgba(47, 111, 237, 0.2), rgba(47, 111, 237, 0.06));
+ box-shadow: 0 8px 24px rgba(47, 111, 237, 0.15);
+}
+
+.card-icon {
+ font-size: 22px;
+ color: var(--lux-primary);
+}
+
+.title-block {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.title-row {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.shimmer-text {
+ background: linear-gradient(
+ 90deg,
+ var(--lux-text) 0%,
+ var(--lux-text) 40%,
+ rgba(47, 111, 237, 0.95) 50%,
+ var(--lux-text) 60%,
+ var(--lux-text) 100%
+ );
+ background-size: 200% auto;
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ animation: shimmer 5s linear infinite;
+}
+
+.live-pill {
+ font-size: 11px;
+ font-weight: 650;
+ letter-spacing: 0.04em;
+ padding: 4px 10px;
+ border-radius: 999px;
+ color: #0d47a1;
+ background: linear-gradient(135deg, rgba(47, 111, 237, 0.18), rgba(47, 111, 237, 0.06));
+ border: 1px solid rgba(47, 111, 237, 0.22);
+ box-shadow: 0 2px 10px rgba(47, 111, 237, 0.12);
+}
+
+.filter-layout {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.filter-form {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 14px;
+ align-items: center;
+}
+
+.filter-form :deep(.el-form-item) {
+ margin: 0;
+}
+
+.filter-form :deep(.el-input__wrapper),
+.filter-form :deep(.el-select .el-input__wrapper) {
+ border-radius: 10px;
+ box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+ transition: box-shadow 0.2s ease;
+}
+
+.filter-form :deep(.el-input__wrapper:hover) {
+ box-shadow: 0 4px 14px rgba(47, 111, 237, 0.1);
+}
+
+.filter-actions {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 10px 14px;
+ padding-top: 12px;
+ border-top: 1px dashed rgba(15, 23, 42, 0.12);
+}
+
+.filter-actions :deep(.lux-btn) {
+ border-radius: 10px;
+ font-weight: 600;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.filter-actions :deep(.lux-btn:hover) {
+ transform: translateY(-1px);
+ box-shadow: 0 8px 20px rgba(47, 111, 237, 0.18);
+}
+
+.filter-actions :deep(.el-button--success.is-plain) {
+ border-color: rgba(22, 163, 74, 0.35);
+}
+
+.action-group {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex-wrap: wrap;
+}
+
+.filter-actions :deep(.el-upload) {
+ display: inline-flex;
+}
+
+.hidden-upload {
+ width: 0;
+ height: 0;
+ overflow: hidden;
+}
+
+.card-head,
+.panel-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+
+.card-head-left {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+}
+
+.panel-head-main {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.panel-accent {
+ width: 4px;
+ height: 22px;
+ border-radius: 4px;
+ background: linear-gradient(180deg, #5b8cff, #2f6fed);
+ box-shadow: 0 2px 8px rgba(47, 111, 237, 0.35);
+}
+
+.panel-accent--emerald {
+ background: linear-gradient(180deg, #34d399, #059669);
+ box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
+}
+
+.chart-tag {
+ margin-left: 10px;
+ font-size: 11px;
+ font-weight: 650;
+ color: rgba(15, 23, 42, 0.55);
+ padding: 2px 8px;
+ border-radius: 6px;
+ background: rgba(15, 23, 42, 0.05);
+}
+
+.count-chip {
+ font-size: 12px;
+ font-weight: 650;
+ color: var(--lux-primary);
+ padding: 6px 12px;
+ border-radius: 999px;
+ background: rgba(47, 111, 237, 0.1);
+ border: 1px solid rgba(47, 111, 237, 0.15);
+}
+
+.card-title {
+ font-weight: 760;
+ color: var(--lux-text);
+ letter-spacing: -0.02em;
+}
+
+.subtle {
+ color: var(--lux-subtle);
+ font-size: 12px;
+}
+
+.kpi-card {
+ padding: 2px;
+}
+
+.kpi-strip {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 14px;
+}
+
+.kpi-item {
+ position: relative;
+ padding: 16px 16px 14px;
+ border-radius: 14px;
+ border: 1px solid rgba(255, 255, 255, 0.7);
+ overflow: hidden;
+ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
+}
+
+.kpi-item:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
+}
+
+.kpi-glow {
+ position: absolute;
+ right: -20%;
+ bottom: -40%;
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ filter: blur(40px);
+ opacity: 0.45;
+ pointer-events: none;
+}
+
+.kpi-std .kpi-glow {
+ background: rgba(47, 111, 237, 0.55);
+}
+
+.kpi-act .kpi-glow {
+ background: rgba(245, 158, 11, 0.5);
+}
+
+.kpi-diff .kpi-glow {
+ background: rgba(239, 68, 68, 0.45);
+}
+
+.kpi-rate .kpi-glow {
+ background: rgba(22, 163, 74, 0.5);
+}
+
+.kpi-top {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.kpi-ico {
+ font-size: 18px;
+ opacity: 0.88;
+}
+
+.kpi-std {
+ background: linear-gradient(145deg, rgba(47, 111, 237, 0.14), rgba(255, 255, 255, 0.92));
+}
+
+.kpi-std .kpi-ico {
+ color: #2563eb;
+}
+
+.kpi-act {
+ background: linear-gradient(145deg, rgba(245, 158, 11, 0.16), rgba(255, 255, 255, 0.92));
+}
+
+.kpi-act .kpi-ico {
+ color: #d97706;
+}
+
+.kpi-diff {
+ background: linear-gradient(145deg, rgba(239, 68, 68, 0.12), rgba(255, 255, 255, 0.92));
+}
+
+.kpi-diff .kpi-ico {
+ color: #dc2626;
+}
+
+.kpi-rate {
+ background: linear-gradient(145deg, rgba(22, 163, 74, 0.12), rgba(255, 255, 255, 0.92));
+}
+
+.kpi-rate .kpi-ico {
+ color: #059669;
+}
+
+.kpi-label {
+ font-size: 12px;
+ color: var(--lux-subtle);
+ font-weight: 600;
+}
+
+.kpi-value {
+ position: relative;
+ z-index: 1;
+ font-size: 22px;
+ font-weight: 780;
+ color: var(--lux-text);
+ font-variant-numeric: tabular-nums;
+}
+
+.cost-value {
+ color: var(--lux-danger);
+ font-weight: 700;
+}
+
+.ok-value {
+ color: var(--lux-success);
+ font-weight: 700;
+}
+
+.chart-section :deep(.el-card__header) {
+ border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.chart-wrap {
+ position: relative;
+ padding-top: 40px;
+ border-radius: 14px;
+ overflow: hidden;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(248, 250, 252, 0.95) 100%);
+ border: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.chart-content {
+ height: 380px;
+}
+
+.chart-tools {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.chart-tools-inline {
+ position: absolute;
+ top: 6px;
+ right: 8px;
+ z-index: 2;
+}
+
+.chart-tool {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-size: 12px;
+ font-weight: 650;
+ line-height: 1;
+ padding: 8px 12px;
+ border-radius: 10px;
+ border: 1px solid rgba(15, 23, 42, 0.1);
+ background: rgba(255, 255, 255, 0.88);
+ color: rgba(15, 23, 42, 0.75);
+ cursor: pointer;
+ transition:
+ background-color 0.2s ease,
+ border-color 0.2s ease,
+ transform 0.2s ease,
+ box-shadow 0.2s ease;
+}
+
+.chart-tool--primary {
+ border-color: rgba(47, 111, 237, 0.28);
+ background: linear-gradient(135deg, rgba(47, 111, 237, 0.12), rgba(255, 255, 255, 0.95));
+ color: #1e40af;
+}
+
+.chart-tool:hover {
+ background: rgba(47, 111, 237, 0.1);
+ border-color: rgba(47, 111, 237, 0.28);
+ transform: translateY(-2px);
+ box-shadow: 0 6px 16px rgba(47, 111, 237, 0.12);
+}
+
+.large-chart-content {
+ height: 70vh;
+ min-height: 520px;
+ width: 100%;
+ overflow: hidden; // 闃叉 ECharts 鐢诲竷婧㈠嚭閬尅寮圭獥鏍囬鏍�
+}
+
+.std-cost-page :deep(.el-dialog__header) {
+ position: relative;
+ z-index: 3;
+}
+
+.std-cost-page :deep(.el-dialog__headerbtn) {
+ position: relative;
+ z-index: 4;
+}
+
+.std-cost-page :deep(.el-dialog__body) {
+ position: relative;
+ z-index: 1;
+}
+
+.pagination-container {
+ display: flex;
+ justify-content: flex-end;
+ padding-top: 14px;
+}
+
+.w-260 {
+ width: 260px;
+}
+
+.w-180 {
+ width: 180px;
+}
+
+::deep(.lux-table) {
+ border-radius: 12px;
+ overflow: hidden;
+ --el-table-border-color: rgba(15, 23, 42, 0.06);
+}
+
+::deep(.lux-table th.el-table__cell) {
+ background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.02));
+ font-weight: 700;
+ color: rgba(15, 23, 42, 0.75);
+}
+
+::deep(.lux-table .el-table__row) {
+ transition: background-color 0.2s ease;
+}
+
+::deep(.lux-table .el-table__row:hover > td.el-table__cell) {
+ background-color: rgba(47, 111, 237, 0.07) !important;
+}
+
+@media (max-width: 1100px) {
+ .kpi-strip {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .filter-actions {
+ justify-content: flex-start;
+ padding-top: 8px;
+ }
+
+ .shimmer-text {
+ animation: none;
+ color: var(--lux-text);
+ background: none;
+ -webkit-background-clip: unset;
+ background-clip: unset;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .bg-mesh,
+ .bg-orb,
+ .shimmer-text {
+ animation: none;
+ }
+
+ .shimmer-text {
+ color: var(--lux-text);
+ background: none;
+ -webkit-background-clip: unset;
+ background-clip: unset;
+ }
+
+ .kpi-item:hover {
+ transform: none;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3