From 11d7990309ddace2fa600cbeae58e3ab5ac368f9 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期日, 20 九月 2026 19:25:45 +0800
Subject: [PATCH] 新疆-融邦 1. 委外管理：新增合作商档案、委外订单、往来台账三个页面及接口；合作商附件弹框支持直接上传/删除并即时保存。 2. 信托基金与代储台账：客户档案加「信托基金 / 代储金额」并对超限标红提示；销售台账拆「卖油 / 代储」页签，代储走油库+储罐+合同金额，卖油保留产品明细；台账列表加审批状态与超限红字；审批中心显示销售合同号并能下钻台账明细。 3. 储罐号带入库存：储罐信息表单加「是否启用 / 用途 / 租客信息」联动与校验；库存管理、批号明细、入库/出库表单与列表补齐储罐号、油品、物流、过磅等字段展示。 4. 出库即发货与往来备件：出库台账区分「发货单 / 油品出库」两类来源并分别处理详情；新增备件出入库流水页面。 5. 车辆管理与残油联动：新增车辆管理页面；油品出入库表单物流信息顺序调整，车牌/车挂牌号联动只读。 6. 油品出库联动发货台账：发货台账加「发货单号 / 销售合同号」筛选，修复油品出库行批号列取错字段。 7. 采购申请模块：新增采购申请页面及接口。 8. 付款流水组件：抽出公共「付款流水」弹框组件，采购付款分栏、收付款台账与委外往来台账复用。 9. 列调整：收付款台账删除「付款金额 / 退货金额」；委外往来台账删除「回款金额」，并去掉金额列右对齐。
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 66 +++++++++++++++++++++++++--------
1 files changed, 50 insertions(+), 16 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index 67e0217..16791de 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -2,8 +2,8 @@
<div>
<PanelHeader title="浜у搧澶х被" />
<div class="panel-item-customers">
- <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"
@@ -21,10 +21,15 @@
</template>
<script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount, inject, watch } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from '../PanelHeader.vue'
import { productCategoryDistribution } from '@/api/viewIndex.js'
+import { useChartBackground } from '@/hooks/useChartBackground.js'
+
+const pieWrapperRef = ref(null)
+const pieBackgroundRef = ref(null)
+const chart = ref(null)
// 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
const dataList = ref([])
@@ -83,17 +88,20 @@
// 鎻愮ず妗�
const landTooltip = {
- triggerOn: 'click',
+ // triggerOn: 'hover',
alwaysShowContent: true,
position: function (pt) {
return [pt[0], 130]
+ },
+ formatter: function (params) {
+ return `${params.name} (${params.value}绫�)`
},
}
// 鍙屽眰鐜舰楗煎浘
const landSeries = ref([
{
- name: '澶栧湀',
+ name: '浜у搧澶х被',
type: 'pie',
radius: ['35%', '55%'],
center: ['50%', '50%'],
@@ -105,21 +113,22 @@
lineHeight: 18,
rich: {
...dotRich,
- parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
+ parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
child: { fontSize: 12, color: '#fff', lineHeight: 18 },
},
formatter: function (params) {
const children = params?.data?.children || []
const parentName = params?.data?.name || ''
- const parentValue = params?.data?.value ?? 0
+ const rawVal = params?.data?.value
+ const parentValue = typeof rawVal === 'number' && !Number.isNaN(rawVal) ? rawVal : (Number(rawVal) || 0)
const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
const dot = `{${dotKey}|} `
- if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
- // 灏忓渾鐐� + 鐖剁骇 name + 鐖剁骇 value锛屾崲琛屽睍绀� children 鐨� name + value
- return [
- `${dot}{parent|${parentName}}`,
- ...children.map((c) => `{child|${c.name}}`),
- ].join('\n')
+ const parentLine = `${dot}{parent|${parentName} (${parentValue}绫�)}`
+ if (!children.length) return parentLine
+ // 鐖剁骇鍏ㄩ儴鏄剧ず锛涘瓙绾ф渶澶� 5 涓紝瓒呭嚭鏄剧ず鐪佺暐鍙�
+ const displayed = children.slice(0, 5).map((c) => `{child|${c.name}}`)
+ if (children.length > 5) displayed.push('{child|鈥')
+ return [parentLine, ...displayed].join('\n')
},
},
labelLine: {
@@ -166,6 +175,15 @@
textStyle: { color: '#B8C8E0' },
}
+// 浣跨敤灏佽鐨勮儗鏅綅缃皟鏁存柟娉曪紝鍙嚜瀹氫箟鍋忕Щ鍊�
+const { adjustBackgroundPosition, init: initBackground, cleanup: cleanupBackground } = useChartBackground({
+ wrapperRef: pieWrapperRef,
+ backgroundRef: pieBackgroundRef,
+ offsetX: '-51.5%', // X 杞村亸绉伙紝鍙姩鎬佽皟鏁�
+ offsetY: '-39%', // Y 杞村亸绉伙紝鍙姩鎬佽皟鏁�
+ watchData: dataList // 鐩戝惉鏁版嵁鍙樺寲锛岃嚜鍔ㄨ皟鏁翠綅缃�
+})
+
const loadData = async () => {
try {
const res = await productCategoryDistribution()
@@ -178,6 +196,8 @@
}))
landLegend.data = dataList.value.map((d) => d.name)
landSeries.value[0].data = dataList.value
+ // 鏁版嵁鍔犺浇瀹屾垚鍚庤皟鏁磋儗鏅綅缃�
+ adjustBackgroundPosition()
} catch (e) {
console.error('鑾峰彇浜у搧澶х被鍒嗗竷澶辫触:', e)
dataList.value = []
@@ -186,8 +206,21 @@
}
}
+
+const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
+if (dataDashboardRefreshTick) {
+ watch(dataDashboardRefreshTick, () => {
+ loadData()
+ })
+}
+
onMounted(() => {
loadData()
+ initBackground()
+})
+
+onBeforeUnmount(() => {
+ cleanupBackground()
})
</script>
@@ -208,9 +241,6 @@
.pie-background {
position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-51.5%, -39%);
width: 360px;
height: 360px;
background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
@@ -219,5 +249,9 @@
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
+ /* 榛樿灞呬腑锛屼細鍦� JS 涓姩鎬佽皟鏁� */
+ left: 50%;
+ top: 50%;
+ transform: translate(-51.5%, -39%);
}
</style>
--
Gitblit v1.9.3