From 018ac11ffce99df1efe62edcc726268b012c766c Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 29 九月 2026 14:30:12 +0800
Subject: [PATCH] 新疆-融邦 1.协同办公-协同审批：采购及销售审批进入销售流程后也可预览在台账上传的附件 2.销售合同号只有直销时显示，别的时候隐藏 3.付款方式设置选项-网银-现金-微信-支票-承兑汇票
---
src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue | 134 ++++++++++++++++++++++----------------------
1 files changed, 67 insertions(+), 67 deletions(-)
diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
index cd8f1e3..ca95e82 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.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="echartsRef"
:chartStyle="chartStyle"
@@ -13,7 +13,7 @@
:tooltip="pieTooltip"
:color="pieColors"
:options="pieOptions"
- style="height: 320px"
+ style="height: 100%"
/>
</div>
</div>
@@ -21,11 +21,15 @@
</template>
<script setup>
-import { ref, onMounted, computed } from 'vue'
-import { deptStaffDistribution } from '@/api/viewIndex.js'
+import { ref, onMounted, onBeforeUnmount, computed, inject, watch } from 'vue'
+import { productSalesAnalysis } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import Echarts from '@/components/Echarts/echarts.vue'
+import { useChartBackground } from '@/hooks/useChartBackground.js'
+
+const pieWrapperRef = ref(null)
+const pieBackgroundRef = ref(null)
/**
* @introduction 鎶婃暟缁勪腑key鍊肩浉鍚岀殑閭ｄ竴椤规彁鍙栧嚭鏉ワ紝缁勬垚涓�涓璞�
@@ -63,15 +67,15 @@
}))
return {
- orient: 'vertical',
- top: 'center',
- left: '60%',
+ orient: 'horizontal',
+ bottom: 0,
+ left: 'center',
itemGap: 30,
data: data,
formatter: function (name) {
const item = pieObjData.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: {
@@ -79,7 +83,7 @@
color: '#43e8fc',
fontSize: 14,
fontWeight: 600,
- padding: [0, 0, 0, 30],
+ padding: [0, 0, 0, 10],
},
unit: {
color: '#82baff',
@@ -104,15 +108,15 @@
const pieTooltip = {
trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)',
+ formatter: '{a} <br/>{b} : {c}鍏� ({d}%)',
}
const pieSeries = computed(() => [
{
- name: '鍚勪骇鍝侀攢鍞噾棰濆垎鏋�',
+ name: '浜у搧閿�鍞噾棰濆垎鏋�',
type: 'pie',
radius: '60%',
- center: ['25%', '50%'],
+ center: ['50%', '45%'],
itemStyle: {
borderColor: '#0a1c3a',
borderWidth: 2,
@@ -137,61 +141,54 @@
const cardItems = ref([])
-// 鍋囨暟鎹�
-const mockData = [
- { name: '鐢熶骇閮�', value: 125, rate: '35.2' },
- { name: '鎶�鏈儴', value: 85, rate: '23.9' },
- { name: '閿�鍞儴', value: 65, rate: '18.3' },
- { name: '璐㈠姟閮�', value: 32, rate: '9.0' },
- { name: '浜轰簨閮�', value: 28, rate: '7.9' },
- { name: '琛屾斂閮�', value: 20, rate: '5.6' },
-]
+// 浣跨敤灏佽鐨勮儗鏅綅缃皟鏁存柟娉曪紙涓庡叾浠栨枃浠朵繚鎸佷竴鑷达級
+const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({
+ wrapperRef: pieWrapperRef,
+ backgroundRef: pieBackgroundRef,
+ left: '50%', // 鍥捐〃涓績 X 鏄� 50%
+ top: '45%', // 鍥捐〃涓績 Y 鏄� 45%锛堜笅闈㈢暀鍑哄浘渚嬬殑浣嶇疆锛�
+ offsetX: '-51.5%', // X 杞村亸绉�
+ offsetY: '-50%', // Y 杞村亸绉�
+ watchData: pieDatas // 鐩戝惉鏁版嵁鍙樺寲锛岃嚜鍔ㄨ皟鏁翠綅缃�
+})
-const getDeptStaffDistribution = () => {
- setMockData()
- // deptStaffDistribution().then(res => {
- // if (res.code === 200) {
- // const items = res.data.items || []
- // // 鍗＄墖鏁版嵁
- // cardItems.value = items.map(item => ({
- // label: item.name,
- // value: parseInt(item.value),
- // unit: '浜�'
- // }))
- // // 鍥捐〃鏁版嵁
- // pieDatas.value = items.map(item => ({
- // name: item.name,
- // value: parseInt(item.value),
- // rate: item.rate
- // }))
- // } else {
- // // 浣跨敤鍋囨暟鎹�
- // setMockData()
- // }
- // }).catch(err => {
- // console.error('鑾峰彇閮ㄩ棬浜哄憳鍒嗗竷鏁版嵁澶辫触:', err)
- // // 浣跨敤鍋囨暟鎹�
- // setMockData()
- // })
+const fetchData = () => {
+ productSalesAnalysis()
+ .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,
+ }))
+ pieDatas.value = items.map((item) => ({
+ name: item.name,
+ value: parseFloat(item.value) || 0,
+ rate: item.rate,
+ }))
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇浜у搧閿�鍞噾棰濆垎鏋愬け璐�:', err)
+ })
}
-const setMockData = () => {
- // 鍗＄墖鏁版嵁
- cardItems.value = mockData.map(item => ({
- label: item.name,
- value: item.value,
- unit: '浜�'
- }))
- // 鍥捐〃鏁版嵁
- pieDatas.value = mockData.map(item => ({
- name: item.name,
- value: item.value,
- rate: item.rate
- }))
+const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
+if (dataDashboardRefreshTick) {
+ watch(dataDashboardRefreshTick, () => {
+ fetchData()
+ })
}
onMounted(() => {
- getDeptStaffDistribution()
+ fetchData()
+ initBackground()
+})
+
+onBeforeUnmount(() => {
+ cleanupBackground()
})
</script>
@@ -202,21 +199,24 @@
gap: 20px;
}
+/* 宸︽爮鍙墿杩欎竴鍧楅潰鏉匡紝楂樺害鎾戞弧鏁存爮锛屽浘琛ㄨ窡鐫�鎶婂墿浣欑┖闂村崰鎺� */
.panel-item-customers {
border: 1px solid #1a58b0;
padding: 18px;
width: 100%;
- height: 449px;
+ flex: 1;
+ min-height: 0;
}
.pie-chart-wrapper {
position: relative;
width: 100%;
- height: 320px;
+ flex: 1;
+ min-height: 0;
}
.pie-background {
position: absolute;
- left: 25%;
- top: 50%;
+ left: 50%;
+ top: 45%;
transform: translate(-51.5%, -50%);
width: 310px;
height: 310px;
--
Gitblit v1.9.3