From b0c3dbefea78b106b7c680597361ea37930eaa0d Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期五, 30 一月 2026 16:12:27 +0800
Subject: [PATCH] Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New
---
src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue | 105 +++++++++++++++++++++++++++++++++++++---------------
1 files changed, 75 insertions(+), 30 deletions(-)
diff --git a/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
index 076dcbe..3fe95d6 100644
--- a/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
+++ b/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
@@ -1,10 +1,17 @@
<template>
<div>
- <PanelHeader title="鏀嚭鏋勬垚鍒嗘瀽" />
+ <PanelHeader title="鏋勬垚鍒嗘瀽" />
<div class="main-panel panel-item-customers">
+ <div class="filters-row">
+ <ProductTypeSwitch
+ v-model="amountType"
+ :options="amountTypeOptions"
+ @change="handleTypeChange"
+ />
+ </div>
<!-- <CarouselCards :items="cardItems" :visible-count="3" /> -->
- <div class="pie-chart-wrapper">
- <div class="pie-background"></div>
+ <div class="pie-chart-wrapper" ref="pieWrapperRef">
+ <div class="pie-background" ref="pieBackgroundRef"></div>
<Echarts
ref="chart"
:chartStyle="chartStyle"
@@ -22,11 +29,15 @@
</template>
<script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, 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 ProductTypeSwitch from './ProductTypeSwitch.vue'
+import { expenseCompositionAnalysis } from '@/api/viewIndex.js'
+import { useChartBackground } from '@/hooks/useChartBackground.js'
+
+const pieWrapperRef = ref(null)
+const pieBackgroundRef = ref(null)
/**
* @introduction 鎶婃暟缁勪腑key鍊肩浉鍚岀殑閭ｄ竴椤规彁鍙栧嚭鏉ワ紝缁勬垚涓�涓璞�
@@ -41,6 +52,14 @@
}
return resObj
}
+
+// 褰撳墠绫诲瀷锛�1=鏀嚭 2=鏀跺叆
+const amountType = ref(1)
+
+const amountTypeOptions = [
+ { label: 1, text: '浜у搧' },
+ { label: 2, text: '瀹㈡埛' },
+]
// 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
const dataList = ref([])
@@ -69,12 +88,16 @@
top: 'center',
left: '52%',
itemGap: 30,
- show: false,
+ show: true,
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|%}`
+ const num = Number(item.value)
+ const isWan = num > 10000
+ const displayValue = isWan ? (num / 10000).toFixed(2) : num
+ const displayUnit = isWan ? '涓囧厓' : '鍏�'
+ return `{title|${name}}{value|${displayValue}}{unit|${displayUnit}}{percent|${item.rate}}{unit|%}`
},
textStyle: {
rich: {
@@ -112,12 +135,13 @@
}
// 鍙屽眰鐜舰楗煎浘
+// 鍙屽眰鐜舰楗煎浘
const landSeries = ref([
{
- name: '浜у搧閲囪喘閲戦鍒嗘瀽',
+ name: '鏋勬垚鍒嗘瀽',
type: 'pie',
- radius: ['50%', '75%'],
- center: ['50%', '60%'],
+ radius: ['40%', '60%'],
+ center: ['25%', '50%'],
itemStyle: {
borderColor: '#0a1c3a',
borderWidth: 2,
@@ -126,16 +150,7 @@
},
},
label: {
- show: true,
- position: 'outside',
- color: '#fff',
- fontSize: 12,
- lineHeight: 18,
- // rich: {
- // ...dotRich,
- // parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
- // child: { fontSize: 12, color: '#fff', lineHeight: 18 },
- // },
+ show: false
},
minAngle: 15,
data: dataList.value,
@@ -148,8 +163,8 @@
{
// 鍐呭湀
type: 'pie',
- radius: ['50%', '60%'],
- center: ['50%', '60%'],
+ radius: ['40%', '45%'],
+ center: ['25%', '50%'],
silent: true,
label: {
show: false,
@@ -174,8 +189,20 @@
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 fetchData = () => {
- rawMaterialPurchaseAmountRatio()
+ expenseCompositionAnalysis({ type: amountType.value })
.then((res) => {
if (res.code === 200 && Array.isArray(res.data)) {
const items = res.data
@@ -195,12 +222,21 @@
}
})
.catch((err) => {
- console.error('鑾峰彇鍘熸潗鏂欓噰璐噾棰濆崰姣斿け璐�:', err)
+ console.error('鑾峰彇璐圭敤鏋勬垚鍒嗘瀽澶辫触:', err)
})
+}
+
+const handleTypeChange = () => {
+ fetchData()
}
onMounted(() => {
fetchData()
+ initBackground()
+})
+
+onBeforeUnmount(() => {
+ cleanupBackground()
})
</script>
@@ -209,6 +245,14 @@
display: flex;
flex-direction: column;
gap: 20px;
+}
+
+.filters-row {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 10px;
}
.panel-item-customers {
@@ -228,16 +272,17 @@
.pie-background {
position: absolute;
- left: 50%;
- top: 60%;
- transform: translate(-51.5%, -50%);
- width: 380px;
- height: 380px;
+ 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%);
}
</style>
--
Gitblit v1.9.3