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.vue | 2397 +++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 1,566 insertions(+), 831 deletions(-)
diff --git a/src/views/reportAnalysis/salesStatistics/index.vue b/src/views/reportAnalysis/salesStatistics/index.vue
index 8dc1a6a..c9412c1 100644
--- a/src/views/reportAnalysis/salesStatistics/index.vue
+++ b/src/views/reportAnalysis/salesStatistics/index.vue
@@ -1,165 +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">{{ 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">{{ 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">{{ 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">{{ 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>
+ <div ref="productTypeChart" class="echart-fill"></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" />
- <el-table-column prop="salesArea" label="閿�鍞尯鍩�" width="120" />
- <el-table-column prop="period" label="缁熻鍛ㄦ湡" width="120" />
- <el-table-column prop="salesVolume" label="閿�閲�(绔嬫柟绫�)" />
- <el-table-column prop="salesAmount" label="閿�鍞噾棰�(涓囧厓)" />
- <el-table-column prop="newCustomers" label="鏂板瀹㈡埛(涓�)" width="150" />
- <el-table-column prop="totalCustomers" label="鍚堣瀹㈡埛(涓�)" width="150" />
- </el-table>
- </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 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 class="chart-unit-row chart-unit-single">
+ <span>鍗曚綅锛氫汉</span>
</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>
@@ -167,757 +171,1488 @@
</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';
+ import {
+ ref,
+ computed,
+ onMounted,
+ onBeforeUnmount,
+ watch,
+ nextTick,
+ } from "vue";
+ 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 router = useRouter();
+ const screenRoot = ref(null);
+ const isFullscreen = ref(false);
-// 绛涢�夋潯浠�
-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;
+ // 椤堕儴鏍忔椂闂达紙鐢ㄤ簬鍖归厤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([]);
+ 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 productTypeTrendChart = ref(null);
+ const cumulativeSalesVolumeChart = ref(null);
+ const cumulativeSalesAmountChart = ref(null);
+
+ // 鍥捐〃瀹炰緥
+ let salesVolumeChartInstance = null;
+ let salesAmountChartInstance = null;
+ let productTypeChartInstance = null;
+ let salesAreaChartInstance = null;
+ let productTypeTrendChartInstance = 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;
});
- 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 totalSalesVolume = computed(() => {
+ return filteredData.value.reduce((sum, item) => sum + item.salesVolume, 0);
+ });
-// 琛ㄦ牸鏁版嵁
-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;
-
+ 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 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");
+ 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 periods = ["6/9", "6/10", "6/11", "6/12", "6/12", "6/13"];
+ const values = [132, 168, 168, 198, 168, 198];
+
return {
- ...item,
- cumulativeSalesVolume,
- cumulativeSalesAmount,
- cumulativeNewCustomers
+ 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: "",
+ 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,
+ 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)" },
+ ]),
+ },
+ },
+ ],
};
});
-});
-// 閿�閲忚秼鍔垮浘琛ㄩ厤缃�
-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
+ // 閿�鍞噾棰濊秼鍔垮浘琛ㄩ厤缃�
+ const salesAmountChartOption = computed(() => {
+ 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} 涓囧厓",
},
- 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;
+ 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: "",
+ 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,
+ symbolSize: 8,
+ itemStyle: {
+ 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 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 productTypeChartOption = computed(() => {
+ const types = ["瀹㈡埛BB", "瀹㈡埛AA", "瀹㈡埛CC", "瀹㈡埛DD", "瀹㈡埛DD", "瀹㈡埛DD"];
+ const values = [130, 120, 102, 90, 90, 70];
+ const barColors = ["#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447", "#C8C447", "#C8C447"];
-// 閿�鍞尯鍩熷垎甯冨浘琛ㄩ厤缃�
-const salesAreaChartOption = computed(() => {
- // 鎸夐攢鍞尯鍩熷垎缁�
- const areaMap = {};
- filteredData.value.forEach(item => {
- if (!areaMap[item.salesArea]) {
- areaMap[item.salesArea] = 0;
- }
- areaMap[item.salesArea] += item.salesVolume;
+ return {
+ backgroundColor: "transparent",
+ tooltip: {
+ 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: [
+ {
+ name: "閿�閲忥紙绔嬫柟绫筹級",
+ type: "bar",
+ barWidth: 14,
+ data: values,
+ itemStyle: {
+ color: params => barColors[params.dataIndex] || "#00A4ED",
+ borderRadius: [6, 6, 6, 6],
+ },
+ label: {
+ show: false,
+ },
+ },
+ ],
+ };
});
-
- 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 salesAreaChartOption = computed(() => {
+ 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: "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: [
+ {
+ name: "閿�閲忥紙绔嬫柟绫筹級",
+ type: "bar",
+ barWidth: 14,
+ data: values,
+ itemStyle: {
+ color: params => barColors[params.dataIndex] || "#00A4ED",
+ borderRadius: [6, 6, 6, 6],
+ },
+ },
+ ],
+ };
});
-
- 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',
+
+ // 鏂板瀹㈡埛瓒嬪娍鍥捐〃閰嶇疆锛堟寜浜у搧绫诲瀷澶氭姌绾匡級
+ 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.3
+ 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)" },
+ ]),
},
- itemStyle: {
- color: '#E6A23C'
+ }));
+
+ return {
+ backgroundColor: "transparent",
+ legend: {
+ top: 10,
+ left: "center",
+ textStyle: { color: "#B8C8E0", fontSize: 11, padding: [0, 0, 0, 2] },
+ itemWidth: 12,
+ itemHeight: 10,
+ itemGap: 18,
},
- 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;
+ 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,
+ };
});
-
- 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 cumulativeSalesVolumeChartOption = computed(() => {
+ // 鎸夊懆鏈熷垎缁�
+ const periodMap = {};
+ let cumulativeValue = 0;
-const handleDateChange = () => {
- // 澶勭悊鏃ユ湡鍙樺寲
- updateCharts();
-};
+ // 鎸夊懆鏈熸帓搴�
+ const sortedData = [...filteredData.value].sort((a, b) =>
+ a.period.localeCompare(b.period)
+ );
-const handleFilterChange = () => {
- // 澶勭悊绛涢�夋潯浠跺彉鍖�
- updateCharts();
-};
+ sortedData.forEach(item => {
+ cumulativeValue += item.salesVolume;
+ periodMap[item.period] = cumulativeValue;
+ });
-// 鍒濆鍖栧浘琛�
-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 periods = Object.keys(periodMap).sort();
+ const values = periods.map(period => periodMap[period]);
-// 鏇存柊鍥捐〃
-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();
+ 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,
+ },
+ },
+ ],
+ };
});
-
- // 娣诲姞绐楀彛澶у皬鍙樺寲鐩戝惉
- window.addEventListener('resize', handleResize);
-});
-// 缁勪欢鍗歌浇鏃堕攢姣佸浘琛ㄥ疄渚�
-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);
-});
+ // 绱閿�鍞噾棰濊秼鍔垮浘琛ㄩ厤缃�
+ 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 (productTypeTrendChart.value && !productTypeTrendChartInstance) {
+ productTypeTrendChartInstance = echarts.init(productTypeTrendChart.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 (productTypeTrendChartInstance) {
+ productTypeTrendChartInstance.setOption(productTypeTrendChartOption.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 (productTypeTrendChartInstance) {
+ productTypeTrendChartInstance.resize();
+ }
+ if (cumulativeSalesVolumeChartInstance) {
+ cumulativeSalesVolumeChartInstance.resize();
+ }
+ if (cumulativeSalesAmountChartInstance) {
+ cumulativeSalesAmountChartInstance.resize();
+ }
+ };
+
+ // 鐢熷懡鍛ㄦ湡
+ onMounted(() => {
+ // 鍚姩椤堕儴鏍忔椂闂村埛鏂�
+ if (!timeTicker) {
+ timeTicker = setInterval(() => {
+ now.value = dayjs();
+ }, 1000);
+ }
+
+ // 璁剧疆榛樿鏃ユ湡鑼冨洿涓烘渶杩�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);
+ document.addEventListener("fullscreenchange", handleFullscreenChange);
+ });
+
+ // 鑾峰彇浜у搧绫诲瀷鏍囩绫诲瀷
+ 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 (timeTicker) {
+ clearInterval(timeTicker);
+ timeTicker = null;
+ }
+
+ if (salesVolumeChartInstance) {
+ salesVolumeChartInstance.dispose();
+ }
+ if (salesAmountChartInstance) {
+ salesAmountChartInstance.dispose();
+ }
+ if (productTypeChartInstance) {
+ productTypeChartInstance.dispose();
+ }
+ if (salesAreaChartInstance) {
+ salesAreaChartInstance.dispose();
+ }
+
+ if (productTypeTrendChartInstance) {
+ productTypeTrendChartInstance.dispose();
+ }
+ if (cumulativeSalesVolumeChartInstance) {
+ cumulativeSalesVolumeChartInstance.dispose();
+ }
+ if (cumulativeSalesAmountChartInstance) {
+ cumulativeSalesAmountChartInstance.dispose();
+ }
+
+ // 绉婚櫎绐楀彛澶у皬鍙樺寲鐩戝惉
+ 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;
-}
+ .sales-statistics-container {
+ position: relative;
+ width: 100%;
+ min-height: calc(100vh - 84px);
+ overflow: hidden;
+ color: #B8C8E0;
+ background: #041026;
+ }
-/* 鍐呴儴鍐呭鍖哄煙 - 鑷�傚簲瀹藉害 */
-.data-dashboard {
- position: relative;
- width: 100%;
- min-height: 100%;
- background-color: #ffffff;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-}
+ .sales-statistics-container.is-fullscreen {
+ min-height: 100vh;
+ height: 100vh;
+ }
-.filter-area {
- padding: 20px;
- background-color: #ffffff;
- border-bottom: 1px solid #e4e7ed;
- display: flex;
- gap: 40px;
- align-items: center;
- flex-wrap: wrap;
-}
+ /* 娣辫壊鑳屾櫙鍥� */
+ .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;
+ }
-.filter-section {
- display: flex;
- align-items: center;
- gap: 10px;
-}
+ /* 椤堕儴鏍囬鏍� */
+ .bi-topbar {
+ position: relative;
+ z-index: 2;
+ height: 58px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
-.filter-label {
- font-size: 14px;
- font-weight: 500;
- color: #303133;
- white-space: nowrap;
-}
+ .bi-topbar-title-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 58px;
+ width: 100%;
+ object-fit: cover;
+ z-index: 0;
+ pointer-events: none;
+ }
-.dashboard-content {
- position: relative;
- z-index: 1;
- display: flex;
- flex-direction: column;
- gap: 20px;
- padding: 20px;
- min-height: 800px;
- overflow: hidden;
-}
+ .bi-topbar-content {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ padding: 0 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
-/* 琛屽竷灞� */
-.row {
- display: flex;
- gap: 20px;
- align-items: stretch;
-}
+ .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);
+ }
-/* 绗竴琛岋細4涓寚鏍囧崱鐗� */
-.row-1 {
- height: 180px;
-}
+ .bi-topbar-left {
+ position: absolute;
+ left: 10px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: rgba(208, 231, 255, 0.85);
+ font-size: 13px;
+ }
-/* 绗簩琛岋細2涓秼鍔垮浘琛� */
-.row-2 {
- height: 350px;
-}
+ .status-sun {
+ color: #ffd85e;
+ text-shadow: 0 0 10px rgba(255, 216, 94, 0.8);
+ font-size: 13px;
+ line-height: 1;
+ }
-/* 绗笁琛岋細绱鏁版嵁瓒嬪娍 */
-.row-3 {
- height: 350px;
-}
+ .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;
+ }
-/* 绗洓琛岋細琛ㄦ牸鍜屽浘琛� */
-.row-4 {
- height: 600px;
-}
+ .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;
+ }
-/* 鍗＄墖鏍峰紡 */
-.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;
-}
+ .fullscreen-btn:hover {
+ background: rgba(0, 164, 237, 0.24);
+ box-shadow: 0 0 12px rgba(0, 164, 237, 0.3);
+ }
-.panel-card:hover {
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
- transform: translateY(-2px);
-}
+ .bi-topbar-sep {
+ opacity: 0.7;
+ }
-/* 鍗＄墖甯冨眬 */
-.card-1 {
- flex: 1;
-}
+ /* 涓讳綋缃戞牸甯冨眬 */
+ .bi-dashboard-grid {
+ position: relative;
+ 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;
+ }
-.card-2 {
- flex: 1;
-}
+ .sales-statistics-container.is-fullscreen .bi-dashboard-grid {
+ height: calc(100vh - 58px);
+ }
-.card-3 {
- flex: 1;
-}
+ .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;
+ position: relative;
+ }
-.card-4 {
- flex: 1;
-}
+ .bi-panel-title {
+ height: 44px;
+ display: flex;
+ 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);
+ }
-.card-5 {
- flex: 1;
-}
+ .panel-tabs {
+ position: absolute;
+ top: 8px;
+ right: 12px;
+ display: flex;
+ gap: 6px;
+ z-index: 4;
+ }
-.card-6 {
- flex: 1;
-}
+ .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-7 {
- flex: 1;
-}
+ .tab-item.active {
+ color: #ffffff;
+ border-color: rgba(0, 164, 237, 0.65);
+ background: rgba(0, 164, 237, 0.22);
+ }
-.card-8 {
- flex: 1;
-}
+ .bi-panel-body {
+ flex: 1;
+ padding: 8px 10px;
+ }
-.card-9 {
- flex: 1;
-}
+ .echart-fill {
+ width: 100%;
+ height: 100%;
+ }
-.card-10 {
- flex: 1;
-}
+ .chart-filter-tabs {
+ display: flex;
+ gap: 6px;
+ margin: 0 0 5px 0;
+ }
-.card-11 {
- 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;
+ }
-.panel-title {
- padding: 15px 20px;
- font-size: 16px;
- font-weight: 500;
- color: #303133;
- border-bottom: 1px solid #e4e7ed;
- background-color: #fafafa;
-}
+ .cf-tab.active {
+ color: #D9ECFF;
+ background: rgba(0, 108, 208, 0.85);
+ border-color: rgba(64, 158, 255, 0.65);
+ }
-.chart-container {
- flex: 1;
- padding: 20px;
-}
+ .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;
+ }
-.table-container {
- flex: 1;
- padding: 20px;
- overflow: auto;
-}
+ .dot-legend::before {
+ content: "";
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ background: #65A0FF;
+ margin-right: 6px;
+ }
-.stats-grid {
- flex: 1;
- padding: 15px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
+ .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;
+ }
-.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%;
-}
+ .diamond {
+ width: 10px;
+ height: 10px;
+ background: #1E8BFF;
+ transform: rotate(45deg);
+ display: inline-block;
+ }
-.stat-value {
- font-size: 24px;
- font-weight: 600;
- color: #303133;
- margin-bottom: 5px;
-}
+ .chart-unit-single {
+ justify-content: flex-start;
+ margin-bottom: 2px;
+ }
-.stat-unit {
- font-size: 12px;
- color: #909399;
- margin-bottom: 3px;
-}
+ .bi-panel-top-left .echart-fill,
+ .bi-panel-top-right .echart-fill {
+ height: calc(100% - 44px);
+ }
-.stat-change {
- font-size: 12px;
- color: #67c23a;
-}
+ .bi-panel-bottom-left .echart-fill,
+ .bi-panel-bottom-right .echart-fill {
+ height: calc(100% - 28px);
+ }
-/* 琛ㄦ牸鏍峰紡 */
-:deep(.el-table) {
- border-radius: 8px;
- overflow: hidden;
-}
+ .bi-panel-bottom-center .echart-fill {
+ height: calc(100% - 44px);
+ }
-:deep(.el-table th) {
- background-color: #fafafa;
- font-weight: 500;
-}
+ .bi-panel-top-left {
+ grid-column: 1;
+ grid-row: 1;
+ position: relative;
+ }
-:deep(.el-table tr:hover > td) {
- background-color: #ecf5ff;
-}
+ .bi-panel-top-right {
+ grid-column: 3;
+ grid-row: 1;
+ position: relative;
+ }
-/* 涓嬫媺閫夋嫨妗嗘牱寮� */
-:deep(.el-select) {
- width: 100%;
-}
+ .bi-panel-bottom-left {
+ grid-column: 1;
+ grid-row: 2;
+ }
-:deep(.el-date-picker) {
- width: 100%;
-}
+ .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: rgba(234, 246, 255, 0.9);
+ margin-top: 4px;
+ }
+
+ .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;
+ }
+
+ .center-metric-unit {
+ margin-top: 2px;
+ font-size: 14px;
+ color: rgba(208, 231, 255, 0.85);
+ }
+
+ .m1 {
+ top: -6px;
+ left: -26px;
+ text-align: left;
+ }
+
+ .m2 {
+ top: -6px;
+ right: -26px;
+ text-align: right;
+ }
+
+ .m3 {
+ bottom: 66px;
+ left: -30px;
+ text-align: left;
+ }
+
+ .m4 {
+ bottom: 66px;
+ right: -30px;
+ text-align: right;
+ }
+
+ @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