From a3828ee89b866f9b4857883cf6eee34170c5d87e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期五, 30 一月 2026 15:37:20 +0800
Subject: [PATCH] fix: 大屏初始化样式自适应问题
---
src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue | 121 +++++++++++++++++++---------------------
1 files changed, 57 insertions(+), 64 deletions(-)
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
index 9ddab7f..669c826 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue
@@ -1,10 +1,10 @@
<template>
<div>
- <PanelHeader title="浜у搧閲囪喘閲戦鍒嗘瀽" />
+ <PanelHeader title="閲囪喘鍝佸垎甯�" />
<div class="main-panel panel-item-customers">
<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 +22,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 { productCategoryDistribution } from '@/api/viewIndex.js'
+import { rawMaterialPurchaseAmountRatio } from '@/api/viewIndex.js'
+import { useChartBackground } from '@/hooks/useChartBackground.js'
+
+const pieWrapperRef = ref(null)
+const pieBackgroundRef = ref(null)
/**
* @introduction 鎶婃暟缁勪腑key鍊肩浉鍚岀殑閭ｄ竴椤规彁鍙栧嚭鏉ワ紝缁勬垚涓�涓璞�
@@ -48,16 +52,6 @@
// 鍗＄墖鏁版嵁
const cardItems = ref([])
-// 鍋囨暟鎹�
-const mockCardData = [
- { name: '鐢靛瓙浜у搧', value: 156, rate: '28.5' },
- { name: '鏈烘璁惧', value: 132, rate: '24.1' },
- { name: '鍘熸潗鏂�', value: 98, rate: '17.9' },
- { name: '鍖栧伐浜у搧', value: 87, rate: '15.9' },
- { name: '绾虹粐鍝�', value: 45, rate: '8.2' },
- { name: '鍏朵粬', value: 31, rate: '5.7' },
-]
-
// 棰滆壊鍒楄〃
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
@@ -77,13 +71,13 @@
return {
orient: 'vertical',
top: 'center',
- left: '60%',
+ left: '52%',
itemGap: 30,
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|${item.value}}{unit|鍏儅{percent|${item.rate}}{unit|%}`
},
textStyle: {
rich: {
@@ -91,7 +85,7 @@
color: '#43e8fc',
fontSize: 14,
fontWeight: 600,
- padding: [0, 0, 0, 30],
+ padding: [0, 0, 0, 10],
},
unit: {
color: '#82baff',
@@ -117,7 +111,7 @@
// 鎻愮ず妗�
const landTooltip = {
trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)',
+ formatter: '{a} <br/>{b} : {c}鍏� ({d}%)',
}
// 鍙屽眰鐜舰楗煎浘
@@ -174,52 +168,50 @@
textStyle: { color: '#B8C8E0' },
}
-const setMockData = () => {
- // 鍗＄墖鏁版嵁
- cardItems.value = mockCardData.map(item => ({
- label: item.name,
- value: item.value,
- unit: '浠�',
- rate: item.rate
- }))
- // 鍥捐〃鏁版嵁
- dataList.value = mockCardData.map((it) => ({
- name: it.name,
- value: Number(it.value || 0),
- rate: it.rate,
- children: [],
- }))
- landSeries.value[0].data = dataList.value
-}
+// 浣跨敤灏佽鐨勮儗鏅綅缃皟鏁存柟娉�
+// 鍥捐〃涓績鏄� ['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 loadData = async () => {
- setMockData()
- // try {
- // const res = await productCategoryDistribution()
- // const items = res?.data?.items || []
- // dataList.value = items.map((it) => ({
- // name: it.name,
- // value: Number(it.value || 0),
- // rate: it.rate,
- // children: Array.isArray(it.children) ? it.children : [],
- // }))
- // // 鍗＄墖鏁版嵁
- // cardItems.value = items.map(item => ({
- // label: item.name,
- // value: parseInt(item.value),
- // unit: '浠�',
- // rate: item.rate
- // }))
- // landLegend.data = dataList.value.map((d) => d.name)
- // landSeries.value[0].data = dataList.value
- // } catch (e) {
- // console.error('鑾峰彇浜у搧澶х被鍒嗗竷澶辫触:', e)
- // setMockData()
- // }
+const fetchData = () => {
+ rawMaterialPurchaseAmountRatio()
+ .then((res) => {
+ if (res.code === 200 && Array.isArray(res.data)) {
+ const items = res.data
+ cardItems.value = items.map((item) => ({
+ label: item.name,
+ value: item.value,
+ unit: '鍏�',
+ rate: item.rate,
+ }))
+ dataList.value = items.map((it) => ({
+ name: it.name,
+ value: parseFloat(it.value) || 0,
+ rate: it.rate,
+ children: [],
+ }))
+ landSeries.value[0].data = dataList.value
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇鍘熸潗鏂欓噰璐噾棰濆崰姣斿け璐�:', err)
+ })
}
onMounted(() => {
- loadData()
+ fetchData()
+ initBackground()
+})
+
+onBeforeUnmount(() => {
+ cleanupBackground()
})
</script>
@@ -247,9 +239,6 @@
.pie-background {
position: absolute;
- left: 25%;
- top: 50%;
- transform: translate(-51.5%, -50%);
width: 310px;
height: 310px;
background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
@@ -258,5 +247,9 @@
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