From 1c829f9177eab675b22be4d20ef2761ed1bbb423 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期二, 15 九月 2026 16:15:48 +0800
Subject: [PATCH] refactor(layout): 调整布局样式并优化轮播卡片组件
---
src/views/reportAnalysis/productionAnalysis/components/left-top.vue | 150 ++++++++++++++++++++++++++-----------------------
1 files changed, 80 insertions(+), 70 deletions(-)
diff --git a/src/views/reportAnalysis/productionAnalysis/components/left-top.vue b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
index 932def8..fea816a 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
@@ -1,39 +1,43 @@
<template>
<div>
<PanelHeader title="宸ュ簭浜у嚭鍒嗘瀽" />
- <div class="main-panel panel-item-customers">
+ <div class="panel-item-customers bi-panel">
<div class="filters-row">
<DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
</div>
- <div class="pie-chart-wrapper" ref="pieWrapperRef">
- <div class="pie-background" ref="pieBackgroundRef"></div>
- <Echarts
- ref="echartsRef"
- :chartStyle="chartStyle"
- :legend="pieLegend"
- :series="pieSeries"
- :tooltip="pieTooltip"
- :color="pieColors"
- :options="pieOptions"
- style="height: 320px"
- />
+ <div class="pie-chart-wrapper">
+ <template v-if="hasData">
+ <Echarts
+ ref="echartsRef"
+ :chartStyle="chartStyle"
+ :legend="pieLegend"
+ :series="pieSeries"
+ :tooltip="pieTooltip"
+ :color="pieColors"
+ :options="pieOptions"
+ style="height: 320px"
+ />
+ <!-- 鐜績姹囨�伙紝鏇夸唬鍘熺帿鐟板浘杈规瑁呴グ鍥� -->
+ <div class="pie-center">
+ <span class="center-value">{{ totalValue }}</span>
+ <span class="center-label">鎬讳骇鍑�(浠�)</span>
+ </div>
+ </template>
+ <div v-else class="pie-empty">鏆傛棤鏁版嵁</div>
</div>
</div>
</div>
</template>
<script setup>
-import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
+import { ref, onMounted, computed } from 'vue'
import { processOutputAnalysis } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
-import DateTypeSwitch from '@/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue'
-import { useChartBackground } from '@/hooks/useChartBackground.js'
+import DateTypeSwitch from './DateTypeSwitch.vue'
+import { BI_COLORS, BI_PIE_PALETTE, BI_TOOLTIP } from '../theme.js'
-const pieWrapperRef = ref(null)
-const pieBackgroundRef = ref(null)
-
-const dateType = ref(1) // 1=鍛� 2=鏈� 3=瀛ｅ害
+const dateType = ref(3) // 1=鍛� 2=鏈� 3=瀛ｅ害锛岄粯璁ゅ搴�
function array2obj(array, key) {
const resObj = {}
@@ -50,9 +54,17 @@
const echartsRef = ref(null)
const pieDatas = ref([])
-const pieColors = ['#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF', '#43e8fc', '#27EBE7']
+const pieColors = BI_PIE_PALETTE
const pieObjData = computed(() => array2obj(pieDatas.value, 'name'))
+
+// 鐜績鎬婚噺锛堢┖鏁版嵁鍏滃簳 0锛�
+const totalValue = computed(() =>
+ pieDatas.value.reduce((sum, d) => sum + (Number(d.value) || 0), 0)
+)
+
+// 鍏ㄩ浂鏁版嵁涓嶆覆鏌撴墖鍖猴細minAngle 浼氭妸 0 鍊间篃鎾戞垚鏁寸幆锛岄�犳垚璇
+const hasData = computed(() => pieDatas.value.some((d) => Number(d.value) > 0))
const pieLegend = computed(() => {
const data = pieDatas.value.map((d, idx) => ({
@@ -78,24 +90,25 @@
textStyle: {
rich: {
value: {
- color: '#43e8fc',
+ color: BI_COLORS.textStrong,
fontSize: 14,
fontWeight: 600,
padding: [0, 0, 0, 10],
},
unit: {
- color: '#82baff',
+ color: BI_COLORS.text,
fontSize: 12,
fontWeight: 600,
padding: [0, 10, 0, 0],
},
percent: {
- color: '#43e8fc',
+ color: BI_COLORS.primary,
fontSize: 14,
fontWeight: 600,
padding: [0, 0, 0, 0],
},
title: {
+ color: BI_COLORS.text,
fontSize: 12,
padding: [0, 0, 0, 0],
},
@@ -107,47 +120,34 @@
const pieTooltip = {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}浠� ({d}%)',
+ ...BI_TOOLTIP,
}
const pieSeries = computed(() => [
{
name: '宸ュ簭浜у嚭鍒嗘瀽',
type: 'pie',
- radius: '60%',
- center: ['25%', '50%'],
+ radius: ['46%', '68%'],
+ center: ['27%', '50%'],
itemStyle: {
- borderColor: '#0a1c3a',
+ borderColor: BI_COLORS.surface,
borderWidth: 2,
+ borderRadius: 4,
},
label: {
show: false
},
minAngle: 15,
- data: pieDatas.value,
+ data: hasData.value ? pieDatas.value : [],
animationType: 'scale',
- animationEasing: 'elasticOut',
- animationDelay: function () {
- return Math.random() * 200
- },
+ animationEasing: 'cubicOut',
},
])
const pieOptions = {
backgroundColor: 'transparent',
- textStyle: { color: '#B8C8E0' },
+ textStyle: { color: BI_COLORS.text },
}
-
-// 浣跨敤灏佽鐨勮儗鏅綅缃皟鏁存柟娉�
-// 鍥捐〃涓績鏄� ['25%', '50%']锛岃儗鏅渶瑕佸榻愬埌杩欎釜浣嶇疆
-const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({
- wrapperRef: pieWrapperRef,
- backgroundRef: pieBackgroundRef,
- left: '25%', // 鍥捐〃涓績 X 鏄� 25%
- top: '50%', // 鍥捐〃涓績 Y 鏄� 50%
- offsetX: '-51.5%', // X 杞村亸绉�
- offsetY: '-50%', // Y 杞村亸绉�
- watchData: pieDatas // 鐩戝惉鏁版嵁鍙樺寲锛岃嚜鍔ㄨ皟鏁翠綅缃�
-})
const fetchData = () => {
processOutputAnalysis({ dateType: dateType.value })
@@ -172,26 +172,17 @@
onMounted(() => {
fetchData()
- initBackground()
-})
-
-onBeforeUnmount(() => {
- cleanupBackground()
})
</script>
<style scoped>
-.main-panel {
- display: flex;
- flex-direction: column;
- gap: 20px;
-}
-
.panel-item-customers {
- border: 1px solid #1a58b0;
padding: 18px;
width: 100%;
height: 449px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
}
.filters-row {
@@ -206,22 +197,41 @@
position: relative;
width: 100%;
height: 320px;
- background: transparent;
}
-.pie-background {
+/* 鐜績鏁板瓧涓庨ゼ鍥惧渾蹇冿紙27%,50%锛夊榻� */
+.pie-center {
position: absolute;
- width: 310px;
- height: 310px;
- background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
- background-size: contain;
- background-position: center;
- background-repeat: no-repeat;
- z-index: 1;
- pointer-events: none;
- /* 浣嶇疆鐢� JS 鍔ㄦ�佽缃紝榛樿灞呬腑 */
- left: 25%;
+ left: 27%;
top: 50%;
- transform: translate(-51.5%, -50%);
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ pointer-events: none;
+}
+
+.center-value {
+ font-weight: 600;
+ font-size: 26px;
+ line-height: 1;
+ color: var(--bi-text);
+ font-variant-numeric: tabular-nums;
+}
+
+.center-label {
+ font-size: 12px;
+ color: var(--bi-text-secondary);
+}
+
+.pie-empty {
+ position: absolute;
+ left: 27%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 14px;
+ color: var(--bi-text-tertiary);
+ pointer-events: none;
}
</style>
--
Gitblit v1.9.3