From 1c829f9177eab675b22be4d20ef2761ed1bbb423 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期二, 15 九月 2026 16:15:48 +0800
Subject: [PATCH] refactor(layout): 调整布局样式并优化轮播卡片组件
---
src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue | 111 ++++++++++++++++++++++++-------------------------------
1 files changed, 48 insertions(+), 63 deletions(-)
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue b/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue
index f4b0a0c..9a1014e 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue
@@ -1,9 +1,8 @@
<template>
- <div>
+ <div class="panel-root">
<PanelHeader title="涓嶅悎鏍兼鍝佸鐞嗗垎鏋�" />
<div class="panel-item-customers">
- <div class="pie-chart-wrapper" ref="pieWrapperRef">
- <div class="pie-background" ref="pieBackgroundRef"></div>
+ <div class="pie-chart-wrapper">
<Echarts ref="chart" :chartStyle="chartStyle" :legend="landLegend" :series="computedSeries"
:tooltip="landTooltip" :color="landColors" :options="pieOptions" style="height: 100%" class="land-chart" />
</div>
@@ -12,21 +11,19 @@
</template>
<script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import { unqualifiedProductProcessingAnalysis } from '@/api/viewIndex.js'
-import { useChartBackground } from '@/hooks/useChartBackground.js'
+import { BI, baseChartOptions, withTooltip } from '../theme.js'
-const pieWrapperRef = ref(null)
-const pieBackgroundRef = ref(null)
const chart = ref(null)
// 鏁版嵁鍒楄〃
const dataList = ref([])
-// 棰滆壊鍒楄〃
-const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
+// 棰滆壊鍒楄〃锛堝ぇ灞忕粺涓�搴忓垪鑹诧級
+const landColors = BI.series
// label 瀵屾枃鏈牱寮�
const dotRich = landColors.reduce((acc, color, idx) => {
@@ -49,16 +46,16 @@
top: '40%',
orient: 'vertical',
textStyle: {
- color: '#fff',
+ color: BI.textStrong,
rich: {
- unit: { color: '#fff', fontSize: 12, padding: [0, 10, 0, 0] },
- text: { width: 60, color: '#fff', fontSize: 12 },
+ unit: { color: BI.textStrong, fontSize: 12, padding: [0, 10, 0, 0] },
+ text: { width: 60, color: BI.textStrong, fontSize: 12 },
}
}
})
// 鎻愮ず妗嗛厤缃�
-const landTooltip = {
+const landTooltip = withTooltip({
trigger: 'item',
alwaysShowContent: false,
position: function (pt) {
@@ -70,24 +67,33 @@
const { name, value, rate } = params.data
return `${name}<br/>鏁伴噺锛�${value}涓�<br/>鍗犳瘮锛�${rate}%`
},
-}
+})
// 浣跨敤璁＄畻灞炴�у鐞� Series
const computedSeries = computed(() => {
+ const isEmpty = dataList.value.length === 0
return [
{
name: '涓嶅悎鏍兼鍝佸鐞嗗垎鏋�',
type: 'pie',
radius: ['35%', '55%'],
center: ['50%', '50%'],
+ silent: isEmpty,
+ itemStyle: isEmpty
+ ? { color: 'rgba(74, 108, 240, 0.12)', borderWidth: 0 }
+ : {
+ borderColor: BI.sliceBorder,
+ borderWidth: 2,
+ borderRadius: 4,
+ },
label: {
- show: true,
+ show: !isEmpty,
position: 'outside',
- color: '#fff',
+ color: BI.textStrong,
rich: {
...dotRich,
- parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
- child: { fontSize: 12, color: '#fff', lineHeight: 18 },
+ parent: { fontSize: 14, fontWeight: 600, color: BI.textStrong, lineHeight: 20 },
+ child: { fontSize: 12, color: BI.text, lineHeight: 18 },
},
formatter: function (params) {
if (!params.data) return ''
@@ -96,11 +102,11 @@
},
},
labelLine: {
- show: true,
+ show: !isEmpty,
length: 20,
- lineStyle: { color: '#B8C8E0' },
+ lineStyle: { color: 'rgba(143, 163, 200, 0.4)' },
},
- data: dataList.value,
+ data: isEmpty ? [1] : dataList.value,
},
{
// 鍐呭湀瑁呴グ
@@ -109,23 +115,14 @@
center: ['50%', '50%'],
silent: true,
label: { show: false },
- itemStyle: { color: 'rgba(0, 127, 255, 0.25)' },
+ itemStyle: { color: 'rgba(74, 108, 240, 0.22)' },
data: [1],
},
]
})
-const chartStyle = { width: '100%', height: '126%' }
-const pieOptions = { backgroundColor: 'transparent' }
-
-// 鑳屾櫙澶勭悊閽╁瓙
-const { adjustBackgroundPosition, init: initBackground, cleanup: cleanupBackground } = useChartBackground({
- wrapperRef: pieWrapperRef,
- backgroundRef: pieBackgroundRef,
- offsetX: '-51.5%',
- offsetY: '-39%',
- watchData: dataList
-})
+const chartStyle = { width: '100%', height: '100%' }
+const pieOptions = baseChartOptions
const loadData = async () => {
try {
@@ -134,14 +131,9 @@
dataList.value = (res.data || []).map((it) => ({
name: it.name,
value: Number(it.value || 0),
- rate: it.rate,
+ rate: it.rate,
}))
landLegend.value.data = dataList.value.map((d) => d.name)
-
- // 鏁版嵁鏇存柊鍚庡井璋冭儗鏅�
- setTimeout(() => {
- adjustBackgroundPosition()
- }, 100)
}
} catch (e) {
console.error('鑾峰彇鏁版嵁澶辫触:', e)
@@ -150,40 +142,33 @@
onMounted(() => {
loadData()
- initBackground()
-})
-
-onBeforeUnmount(() => {
- cleanupBackground()
})
</script>
<style scoped>
+.panel-root {
+ flex: 1;
+ height: 100%;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+}
+
.panel-item-customers {
- border: 1px solid #1a58b0;
+ border: 1px solid var(--bi-panel-border);
+ background: var(--bi-panel-bg);
+ border-radius: 8px;
padding: 18px;
width: 100%;
- height: 449px;
+ box-sizing: border-box;
+ flex: 1;
+ min-height: 0;
}
.pie-chart-wrapper {
position: relative;
width: 100%;
- height: 320px;
+ height: 100%;
+ min-height: 0;
}
-
-.pie-background {
- position: absolute;
- width: 360px;
- height: 360px;
- background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
- background-size: contain;
- background-position: center;
- background-repeat: no-repeat;
- z-index: 1;
- pointer-events: none;
- left: 50%;
- top: 50%;
- transform: translate(-51.5%, -39%);
-}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3