From a5378ba9d7f0aac37092c43eecdf54782d714bc5 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 29 一月 2026 17:58:25 +0800
Subject: [PATCH] fix: 财务大屏接口联调90%
---
src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue | 65 +++++++++++++++++++++-----------
1 files changed, 43 insertions(+), 22 deletions(-)
diff --git a/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
index 076dcbe..7aa8c4e 100644
--- a/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
+++ b/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
@@ -1,7 +1,14 @@
<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>
@@ -25,7 +32,7 @@
import { ref, onMounted, computed } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
-import CarouselCards from './CarouselCards.vue'
+import ProductTypeSwitch from './ProductTypeSwitch.vue'
import { rawMaterialPurchaseAmountRatio } from '@/api/viewIndex.js'
/**
@@ -41,6 +48,14 @@
}
return resObj
}
+
+// 褰撳墠绫诲瀷锛�1=鏀嚭 2=鏀跺叆
+const amountType = ref(1)
+
+const amountTypeOptions = [
+ { label: 1, text: '鏀嚭' },
+ { label: 2, text: '鏀跺叆' },
+]
// 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
const dataList = ref([])
@@ -69,7 +84,7 @@
top: 'center',
left: '52%',
itemGap: 30,
- show: false,
+ show: true,
data: data,
formatter: function (name) {
const item = landObjData.value[name]
@@ -112,12 +127,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 +142,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 +155,8 @@
{
// 鍐呭湀
type: 'pie',
- radius: ['50%', '60%'],
- center: ['50%', '60%'],
+ radius: ['40%', '45%'],
+ center: ['25%', '50%'],
silent: true,
label: {
show: false,
@@ -175,6 +182,8 @@
}
const fetchData = () => {
+ // 鐩墠鎺ュ彛鍙湁鏀嚭鏋勬垚鍗犳瘮锛屽厛蹇界暐绫诲瀷鍙傛暟
+ // 棰勭暀鎵╁睍锛氬悗缁彲鏍规嵁 amountType 鍒囦笉鍚屾帴鍙�
rawMaterialPurchaseAmountRatio()
.then((res) => {
if (res.code === 200 && Array.isArray(res.data)) {
@@ -199,6 +208,10 @@
})
}
+const handleTypeChange = () => {
+ fetchData()
+}
+
onMounted(() => {
fetchData()
})
@@ -209,6 +222,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,11 +249,11 @@
.pie-background {
position: absolute;
- left: 50%;
- top: 60%;
+ left: 25%;
+ top: 50%;
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;
--
Gitblit v1.9.3