From adb79299e86660a7f205466cf1ea48c6b25b1398 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期四, 18 六月 2026 13:14:37 +0800
Subject: [PATCH] 1.计量器具台账上传附件报错 2.质量拉的数据不对（未明确） 3.计量器具台账逾期的做标红提醒 4.设备保养定时任务和记录要加上具体的保养内容 5.质量要区分质检规则抽检还是全检，抽检的话是抽多少百分比 6.供应商管理东西太少了，没有资质文件啊这些东西（是不是可以参考pro） 7.采购审批把人从李莹莹改成龙红星
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 80 +++++++++++++++++++++++++++++++++++++---
1 files changed, 74 insertions(+), 6 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index c787fce..28c85a1 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([])
@@ -170,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()
@@ -182,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 = []
@@ -190,8 +206,21 @@
}
}
+
+const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
+if (dataDashboardRefreshTick) {
+ watch(dataDashboardRefreshTick, () => {
+ loadData()
+ })
+}
+
onMounted(() => {
loadData()
+ initBackground()
+})
+
+onBeforeUnmount(() => {
+ cleanupBackground()
})
</script>
@@ -201,6 +230,32 @@
padding: 18px;
width: 100%;
height: 420px;
+ position: relative;
+ overflow: hidden;
+}
+
+/* 闈㈡澘瑙掕惤瑁呴グ */
+.panel-item-customers::before,
+.panel-item-customers::after {
+ content: '';
+ position: absolute;
+ width: 15px;
+ height: 15px;
+ border-color: rgba(0, 212, 255, 0.5);
+ border-style: solid;
+ pointer-events: none;
+}
+
+.panel-item-customers::before {
+ top: -1px;
+ left: -1px;
+ border-width: 2px 0 0 2px;
+}
+
+.panel-item-customers::after {
+ bottom: -1px;
+ right: -1px;
+ border-width: 0 2px 2px 0;
}
.pie-chart-wrapper {
@@ -208,13 +263,16 @@
width: 100%;
height: 320px;
background: transparent;
+ animation: pieFloat 4s ease-in-out infinite;
+}
+
+@keyframes pieFloat {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-3px); }
}
.pie-background {
position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-51.5%, -39%);
width: 360px;
height: 360px;
background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
@@ -223,5 +281,15 @@
background-repeat: no-repeat;
z-index: 1;
pointer-events: none;
+ /* 榛樿灞呬腑锛屼細鍦� JS 涓姩鎬佽皟鏁� */
+ left: 50%;
+ top: 50%;
+ transform: translate(-51.5%, -39%);
+ animation: pieBgRotate 30s linear infinite;
+}
+
+@keyframes pieBgRotate {
+ from { transform: translate(-51.5%, -39%) rotate(0deg); }
+ to { transform: translate(-51.5%, -39%) rotate(360deg); }
}
</style>
--
Gitblit v1.9.3