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/PSIDataAnalysis/components/left-bottom.vue | 131 +++++++++++++++++++++----------------------
1 files changed, 63 insertions(+), 68 deletions(-)
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
index 669c826..eb2b081 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
@@ -3,8 +3,11 @@
<PanelHeader title="閲囪喘鍝佸垎甯�" />
<div class="main-panel panel-item-customers">
<CarouselCards :items="cardItems" :visible-count="3" />
- <div class="pie-chart-wrapper" ref="pieWrapperRef">
- <div class="pie-background" ref="pieBackgroundRef"></div>
+ <div class="pie-chart-wrapper">
+ <div class="pie-center">
+ <span class="pie-center-value">{{ totalAmount }}</span>
+ <span class="pie-center-label">鍚堣(鍏�)</span>
+ </div>
<Echarts
ref="chart"
:chartStyle="chartStyle"
@@ -22,15 +25,12 @@
</template>
<script setup>
-import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
+import { ref, onMounted, computed } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import { rawMaterialPurchaseAmountRatio } from '@/api/viewIndex.js'
-import { useChartBackground } from '@/hooks/useChartBackground.js'
-
-const pieWrapperRef = ref(null)
-const pieBackgroundRef = ref(null)
+import { BI, baseChartOptions, withTooltip, formatAmount } from '../theme.js'
/**
* @introduction 鎶婃暟缁勪腑key鍊肩浉鍚岀殑閭ｄ竴椤规彁鍙栧嚭鏉ワ紝缁勬垚涓�涓璞�
@@ -53,9 +53,13 @@
const cardItems = ref([])
// 棰滆壊鍒楄〃
-const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
+const landColors = BI.series
const landObjData = computed(() => array2obj(dataList.value, 'name'))
+
+const totalAmount = computed(() =>
+ formatAmount(dataList.value.reduce((sum, d) => sum + (Number(d.value) || 0), 0))
+)
// 鍥句緥閰嶇疆锛堝彸渚х珫鎺掞級
const landLegend = computed(() => {
@@ -63,7 +67,7 @@
name: d.name,
icon: 'circle',
textStyle: {
- fontSize: 18,
+ fontSize: 14,
color: landColors[idx % landColors.length],
},
}))
@@ -72,34 +76,34 @@
orient: 'vertical',
top: 'center',
left: '52%',
- itemGap: 30,
+ itemGap: 24,
data: data,
formatter: function (name) {
const item = landObjData.value[name]
if (!item) return name
- return `{title|${name}}{value|${item.value}}{unit|鍏儅{percent|${item.rate}}{unit|%}`
+ return `{title|${name}}{value|${formatAmount(item.value)}}{percent|${item.rate}}{unit|%}`
},
textStyle: {
rich: {
- value: {
- color: '#43e8fc',
+ title: {
fontSize: 14,
- fontWeight: 600,
- padding: [0, 0, 0, 10],
- },
- unit: {
- color: '#82baff',
- fontSize: 12,
- fontWeight: 600,
- padding: [0, 10, 0, 0],
- },
- percent: {
- color: '#43e8fc',
- fontSize: 14,
- fontWeight: 600,
+ color: BI.text,
padding: [0, 0, 0, 0],
},
- title: {
+ value: {
+ color: BI.textStrong,
+ fontSize: 14,
+ fontWeight: 600,
+ padding: [0, 6, 0, 10],
+ },
+ percent: {
+ color: BI.accentBright,
+ fontSize: 14,
+ fontWeight: 600,
+ padding: [0, 0, 0, 6],
+ },
+ unit: {
+ color: BI.text,
fontSize: 12,
padding: [0, 0, 0, 0],
},
@@ -109,21 +113,22 @@
})
// 鎻愮ず妗�
-const landTooltip = {
+const landTooltip = withTooltip({
trigger: 'item',
formatter: '{a} <br/>{b} : {c}鍏� ({d}%)',
-}
+})
// 鍙屽眰鐜舰楗煎浘
const landSeries = ref([
{
name: '浜у搧閲囪喘閲戦鍒嗘瀽',
type: 'pie',
- radius: ['40%', '60%'],
+ radius: ['48%', '68%'],
center: ['25%', '50%'],
itemStyle: {
- borderColor: '#0a1c3a',
+ borderColor: BI.sliceBorder,
borderWidth: 2,
+ borderRadius: 4,
color: function (params) {
return landColors[params.dataIndex % landColors.length]
},
@@ -140,9 +145,9 @@
},
},
{
- // 鍐呭湀
+ // 鍐呭湀杞ㄩ亾鐜�
type: 'pie',
- radius: ['40%', '45%'],
+ radius: ['40%', '43%'],
center: ['25%', '50%'],
silent: true,
label: {
@@ -152,7 +157,7 @@
show: false,
},
itemStyle: {
- color: 'rgba(0, 127, 255, 0.25)',
+ color: 'rgba(74, 108, 240, 0.22)',
},
data: [1],
},
@@ -163,22 +168,7 @@
height: '100%',
}
-const pieOptions = {
- backgroundColor: 'transparent',
- textStyle: { color: '#B8C8E0' },
-}
-
-// 浣跨敤灏佽鐨勮儗鏅綅缃皟鏁存柟娉�
-// 鍥捐〃涓績鏄� ['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: dataList // 鐩戝惉鏁版嵁鍙樺寲锛岃嚜鍔ㄨ皟鏁翠綅缃�
-})
+const pieOptions = baseChartOptions
const fetchData = () => {
rawMaterialPurchaseAmountRatio()
@@ -207,11 +197,6 @@
onMounted(() => {
fetchData()
- initBackground()
-})
-
-onBeforeUnmount(() => {
- cleanupBackground()
})
</script>
@@ -223,7 +208,9 @@
}
.panel-item-customers {
- border: 1px solid #1a58b0;
+ border: 1px solid var(--bi-panel-border);
+ background: var(--bi-panel-bg);
+ border-radius: 8px;
padding: 18px;
width: 100%;
height: 449px;
@@ -236,20 +223,28 @@
background: transparent;
}
-
-.pie-background {
+.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%;
top: 50%;
- transform: translate(-51.5%, -50%);
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ pointer-events: none;
+ z-index: 2;
+}
+
+.pie-center-value {
+ font-weight: 600;
+ font-size: 20px;
+ color: var(--bi-text-strong);
+ font-variant-numeric: tabular-nums;
+}
+
+.pie-center-label {
+ font-size: 12px;
+ color: var(--bi-text);
}
</style>
--
Gitblit v1.9.3