From 6a415a072a98d64d2f95d16eef73b6d7270b8d56 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期六, 30 五月 2026 15:14:25 +0800
Subject: [PATCH] 新疆马铃薯 1.首页问题：挪新系统ui，需要确认一下页面数据完整。 2.协同办公：挪新系统 3.营销管理：客户往来取消回款金额字段，改为点击左侧客户时显示与该客户的所有订单信息，以及发货情况。销售可以选好对应的采购订单方便质量追溯。 4.采购管理：供应商往来同上逻辑，显示是否收货，也加上采购退货和采购报表功能。 5.采购加上设备备件选项，设备备件入库到备件库存。设备，仓储不足时做采购提醒。 6.仓储物流：得区分成品库和原料库（不存在半成品，成品只有一个产品，很好确认），原材料需要有批号，采集原料库需要做好仓库字段，让他们可以区分哪个仓库，然后把数采设备信息做一个实时的显示。总库存显示好当前存在的批次信息。 7.质量：只有不通过才需要填写对应的数据信息。在外侧做好选择通过不通过。过程，出厂检验无法对应到生产订单，那就对应到销售订单。 8.决策分析：基础数据分析和进销存分析，质量数据分析需要重新设计
---
src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue | 189 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 189 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue b/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue
new file mode 100644
index 0000000..f4b0a0c
--- /dev/null
+++ b/src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue
@@ -0,0 +1,189 @@
+<template>
+ <div>
+ <PanelHeader title="涓嶅悎鏍兼鍝佸鐞嗗垎鏋�" />
+ <div class="panel-item-customers">
+ <div class="pie-chart-wrapper" ref="pieWrapperRef">
+ <div class="pie-background" ref="pieBackgroundRef"></div>
+ <Echarts ref="chart" :chartStyle="chartStyle" :legend="landLegend" :series="computedSeries"
+ :tooltip="landTooltip" :color="landColors" :options="pieOptions" style="height: 100%" class="land-chart" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } 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'
+
+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']
+
+// label 瀵屾枃鏈牱寮�
+const dotRich = landColors.reduce((acc, color, idx) => {
+ acc[`dot${idx}`] = {
+ width: 8,
+ height: 8,
+ borderRadius: 8,
+ backgroundColor: color,
+ align: 'center',
+ }
+ return acc
+}, {})
+
+// 鍥句緥閰嶇疆
+const landLegend = ref({
+ show: false,
+ icon: 'circle',
+ data: [],
+ right: '8%',
+ top: '40%',
+ orient: 'vertical',
+ textStyle: {
+ color: '#fff',
+ rich: {
+ unit: { color: '#fff', fontSize: 12, padding: [0, 10, 0, 0] },
+ text: { width: 60, color: '#fff', fontSize: 12 },
+ }
+ }
+})
+
+// 鎻愮ず妗嗛厤缃�
+const landTooltip = {
+ trigger: 'item',
+ alwaysShowContent: false,
+ position: function (pt) {
+ return [pt[0], 130]
+ },
+ formatter: function (params) {
+ // 纭繚 params.data 瀛樺湪
+ if (!params.data) return ''
+ const { name, value, rate } = params.data
+ return `${name}<br/>鏁伴噺锛�${value}涓�<br/>鍗犳瘮锛�${rate}%`
+ },
+}
+
+// 浣跨敤璁＄畻灞炴�у鐞� Series
+const computedSeries = computed(() => {
+ return [
+ {
+ name: '涓嶅悎鏍兼鍝佸鐞嗗垎鏋�',
+ type: 'pie',
+ radius: ['35%', '55%'],
+ center: ['50%', '50%'],
+ label: {
+ show: true,
+ position: 'outside',
+ color: '#fff',
+ rich: {
+ ...dotRich,
+ parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
+ child: { fontSize: 12, color: '#fff', lineHeight: 18 },
+ },
+ formatter: function (params) {
+ if (!params.data) return ''
+ const dotKey = `dot${params.dataIndex % landColors.length}`
+ return `{${dotKey}|} {parent|${params.data.name} (${params.data.value}涓�)}`
+ },
+ },
+ labelLine: {
+ show: true,
+ length: 20,
+ lineStyle: { color: '#B8C8E0' },
+ },
+ data: dataList.value,
+ },
+ {
+ // 鍐呭湀瑁呴グ
+ type: 'pie',
+ radius: ['35%', '40%'],
+ center: ['50%', '50%'],
+ silent: true,
+ label: { show: false },
+ itemStyle: { color: 'rgba(0, 127, 255, 0.25)' },
+ 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 loadData = async () => {
+ try {
+ const res = await unqualifiedProductProcessingAnalysis()
+ if (res && res.code === 200) {
+ dataList.value = (res.data || []).map((it) => ({
+ name: it.name,
+ value: Number(it.value || 0),
+ rate: it.rate,
+ }))
+ landLegend.value.data = dataList.value.map((d) => d.name)
+
+ // 鏁版嵁鏇存柊鍚庡井璋冭儗鏅�
+ setTimeout(() => {
+ adjustBackgroundPosition()
+ }, 100)
+ }
+ } catch (e) {
+ console.error('鑾峰彇鏁版嵁澶辫触:', e)
+ }
+}
+
+onMounted(() => {
+ loadData()
+ initBackground()
+})
+
+onBeforeUnmount(() => {
+ cleanupBackground()
+})
+</script>
+
+<style scoped>
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 449px;
+}
+
+.pie-chart-wrapper {
+ position: relative;
+ width: 100%;
+ height: 320px;
+}
+
+.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
--
Gitblit v1.9.3