From 0f9b62278f0da862a32c1f1fba69882da46bd3a9 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 29 一月 2026 09:22:48 +0800
Subject: [PATCH] 内容完善
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 324 ++++++++++++++++++++++++++++--------------------------
1 files changed, 168 insertions(+), 156 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index 4f88f0b..c787fce 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -2,19 +2,18 @@
<div>
<PanelHeader title="浜у搧澶х被" />
<div class="panel-item-customers">
- <div style="height: 70%">
+ <div class="pie-chart-wrapper">
+ <div class="pie-background"></div>
<Echarts
ref="chart"
:chartStyle="chartStyle"
- :grid="grid"
- :legend="workInProcessBarLegend"
- :series="workInProcessBarSeries"
- :tooltip="tooltip"
- :xAxis="workInProcessXAxis"
- :yAxis="workInProcessYAxis"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ :legend="landLegend"
+ :series="landSeries"
+ :tooltip="landTooltip"
+ :color="landColors"
+ :options="pieOptions"
style="height: 100%"
- class="work-in-process-chart"
+ class="land-chart"
/>
</div>
</div>
@@ -25,141 +24,174 @@
import { ref, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from '../PanelHeader.vue'
-import { getWorkInProcessTurnover } from '@/api/viewIndex.js'
+import { productCategoryDistribution } from '@/api/viewIndex.js'
-// 鍦ㄥ埗鍝佸懆杞粺璁″璞�
-const workInProcessStatistics = ref({
- totalQuantity: 0,
- avgTurnoverDays: 0,
- turnoverEfficiency: 0,
-})
+// 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
+const dataList = ref([])
-// 鍦ㄥ埗鍝佸伐搴忔煴鐘跺浘閰嶇疆
-const workInProcessXAxis = ref([
- {
- type: 'category',
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- data: [],
- },
-])
+// 棰滆壊鍒楄〃
+const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
-const workInProcessYAxis = [
- {
- type: 'value',
- axisLabel: { color: '#B8C8E0' },
- name: '',
- },
-]
+// label 瀵屾枃鏈細涓烘瘡涓鑹茬敓鎴愪竴涓皬鍦嗙偣鏍峰紡锛堢‘淇濆湪 label 涓彲瑙侊級
+const dotRich = landColors.reduce((acc, color, idx) => {
+ acc[`dot${idx}`] = {
+ width: 8,
+ height: 8,
+ borderRadius: 8,
+ backgroundColor: color,
+ align: 'center',
+ }
+ return acc
+}, {})
-const workInProcessBarLegend = {
+// 鍥句緥閰嶇疆锛堝彸渚х珫鎺掞級
+const landLegend = {
show: false,
- textStyle: { color: '#B8C8E0' },
+ icon: 'circle',
data: [],
-}
-
-const workInProcessBarSeries = ref([
- {
- name: '鍦ㄥ埗鍝佹暟閲�',
- type: 'bar',
- barWidth: 25,
- barGap: 0,
- emphasis: {
- focus: 'series',
- },
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#4EE4FF' },
- { offset: 1, color: '#00A4ED' },
- ],
+ right: '8%',
+ top: '40%',
+ orient: 'vertical',
+ itemGap: 14,
+ itemWidth: 6,
+ itemHeight: 6,
+ textStyle: {
+ fontSize: 12,
+ rich: {
+ unit: {
+ color: '#fff',
+ fontSize: 12,
+ padding: [0, 10, 0, 0],
+ },
+ text: {
+ width: 60,
+ color: '#fff',
+ fontSize: 12,
},
},
+ },
+ formatter: function (name) {
+ const list = dataList.value || []
+ const item = list.find((d) => d.name === name)
+ if (!item) return name
+ const val = Number(item.value || 0)
+ const totalValue = list.reduce((sum, it) => sum + Number(it.value || 0), 0)
+ const percent = totalValue ? ((val / totalValue) * 100).toFixed(2) : '0.00'
+ return `{text|${name}}${val}{unit| 鍏》}${percent}{unit|%}`
+ },
+}
+
+// 鎻愮ず妗�
+const landTooltip = {
+ // triggerOn: 'hover',
+ alwaysShowContent: true,
+ position: function (pt) {
+ return [pt[0], 130]
+ },
+ formatter: function (params) {
+ return `${params.name} (${params.value}绫�)`
+ },
+}
+
+// 鍙屽眰鐜舰楗煎浘
+const landSeries = ref([
+ {
+ name: '浜у搧澶х被',
+ type: 'pie',
+ radius: ['35%', '55%'],
+ center: ['50%', '50%'],
label: {
show: true,
- position: 'top',
- color: '#B8C8E0',
+ 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 },
+ },
+ formatter: function (params) {
+ const children = params?.data?.children || []
+ const parentName = params?.data?.name || ''
+ 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}|} `
+ 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')
+ },
},
- data: [],
+ labelLine: {
+ show: true,
+ length: 20,
+ length2: 20,
+ lineStyle: {
+ color: '#B8C8E0',
+ },
+ },
+ itemStyle: {
+ color: function (params) {
+ return landColors[params.dataIndex % landColors.length]
+ },
+ },
+ data: dataList.value,
+ },
+ {
+ // 鍐呭湀
+ type: 'pie',
+ radius: ['35%', '40%'],
+ center: ['50%', '50%'],
+ silent: true,
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ itemStyle: {
+ color: 'rgba(0, 127, 255, 0.25)',
+ },
+ data: [1],
},
])
const chartStyle = {
width: '100%',
- height: '115%',
+ height: '126%',
}
-const grid = {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true,
+const pieOptions = {
+ backgroundColor: 'transparent',
+ textStyle: { color: '#B8C8E0' },
}
-const tooltip = {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- formatter: function (params) {
- let result = params[0].axisValueLabel + '<br/>'
- params.forEach((item) => {
- result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
- })
- return result
- },
-}
-
-// 鍦ㄥ埗鍝佸懆杞粺璁�
-const workInProcessTurnoverInfo = () => {
- getWorkInProcessTurnover()
- .then((res) => {
- console.log('鍦ㄥ埗鍝佸懆杞粺璁℃暟鎹�:', res)
-
- if (!res || !res.data) {
- console.warn('鍦ㄥ埗鍝佸懆杞粺璁℃暟鎹负绌�')
- return
- }
-
- // 浠庢帴鍙ｈ幏鍙栫粺璁℃暟鎹�
- workInProcessStatistics.value = {
- totalQuantity: res.data.totalOrderCount || 0,
- avgTurnoverDays: res.data.averageTurnoverDays || 0,
- turnoverEfficiency: res.data.turnoverEfficiency || 0,
- }
-
- // 璁剧疆宸ュ簭鏌辩姸鍥炬暟鎹�
- // X杞达細processDetails (宸ュ簭璇︽儏鏁扮粍)
- // Y杞达細processQuantityDetails (宸ュ簭鏁伴噺璇︽儏鏁扮粍)
- if (res.data.processDetails && Array.isArray(res.data.processDetails)) {
- // 璁剧疆X杞存暟鎹紙宸ュ簭鍚嶇О锛�
- workInProcessXAxis.value[0].data = res.data.processDetails
- } else {
- workInProcessXAxis.value[0].data = []
- }
-
- if (
- res.data.processQuantityDetails &&
- Array.isArray(res.data.processQuantityDetails)
- ) {
- // 璁剧疆Y杞存暟鎹紙鍦ㄥ埗鍝佹暟閲忥級
- workInProcessBarSeries.value[0].data = res.data.processQuantityDetails
- } else {
- workInProcessBarSeries.value[0].data = []
- }
- })
- .catch((error) => {
- console.error('鑾峰彇鍦ㄥ埗鍝佸懆杞粺璁″け璐�:', error)
- })
+const loadData = async () => {
+ 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 : [],
+ }))
+ landLegend.data = dataList.value.map((d) => d.name)
+ landSeries.value[0].data = dataList.value
+ } catch (e) {
+ console.error('鑾峰彇浜у搧澶х被鍒嗗竷澶辫触:', e)
+ dataList.value = []
+ landLegend.data = []
+ landSeries.value[0].data = []
+ }
}
onMounted(() => {
- workInProcessTurnoverInfo()
+ loadData()
})
</script>
@@ -171,45 +203,25 @@
height: 420px;
}
-.quality-cards {
- display: flex;
- gap: 12px;
+.pie-chart-wrapper {
+ position: relative;
width: 100%;
- height: 54px;
- justify-content: space-between;
- align-items: center;
+ height: 320px;
+ background: transparent;
}
-.quality-cardSec {
- display: flex;
-}
-
-.quality-cardTitle {
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- display: flex;
- align-items: flex-start;
- flex-direction: column;
-}
-
-.quality-card {
- width: 80px;
- height: 60px;
- background-size: cover;
+.pie-background {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-51.5%, -39%);
+ width: 360px;
+ height: 360px;
+ background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
+ background-size: contain;
background-position: center;
background-repeat: no-repeat;
-}
-
-.quality-card.one {
- background-image: url('@/assets/BI/yuancailiaoyijianicon@2x.png');
-}
-
-.quality-card.two {
- background-image: url('@/assets/BI/guochengyijianicon@2x.png');
-}
-
-.quality-card.three {
- background-image: url('@/assets/BI/chuchangyijianicon@2x.png');
+ z-index: 1;
+ pointer-events: none;
}
</style>
--
Gitblit v1.9.3