From efaf84576990daddeff16875624bd1c46dafecfc Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期二, 27 一月 2026 17:32:26 +0800
Subject: [PATCH] Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New
---
src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue | 121 ++++++++++++++++++++++++++--------------
1 files changed, 79 insertions(+), 42 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index fa78974..998bfef 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -3,6 +3,7 @@
<PanelHeader title="浜у搧澶х被" />
<div class="panel-item-customers">
<div style="height: 70%">
+ <div style="height: 100%">
<Echarts
ref="chart"
:chartStyle="chartStyle"
@@ -27,12 +28,36 @@
// 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
const dataList = ref([])
+import { productCategoryDistribution } from '@/api/viewIndex.js'
// 棰滆壊鍒楄〃
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
// 鍥句緥閰嶇疆锛堝彸渚х珫鎺掞級
const landLegend = {
+// 鍦ㄥ埗鍝佸伐搴忔煴鐘跺浘閰嶇疆
+const workInProcessXAxis = ref([
+ {
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: {
+ color: '#B8C8E0',
+ interval: 0,
+ rotate: 25
+ },
+ data: [],
+ },
+])
+
+const workInProcessYAxis = [
+ {
+ type: 'value',
+ axisLabel: { color: '#B8C8E0' },
+ name: '',
+ },
+]
+
+const workInProcessBarLegend = {
show: false,
icon: 'circle',
data: [],
@@ -103,6 +128,12 @@
lineStyle: {
color: '#B8C8E0',
},
+ name: '浜у搧鏁伴噺',
+ type: 'bar',
+ barWidth: 25,
+ barGap: 0,
+ emphasis: {
+ focus: 'series',
},
itemStyle: {
color: function (params) {
@@ -118,6 +149,19 @@
radius: ['35%', '40%'],
center: ['50%', '50%'],
silent: true,
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: '#4EE4FF' },
+ { offset: 1, color: '#00A4ED' },
+ ],
+ },
+ borderRadius: [4, 4, 0, 0]
+ },
label: {
show: false,
},
@@ -134,6 +178,7 @@
const chartStyle = {
width: '100%',
height: '150%',
+ height: '100%',
}
const loadData = async () => {
@@ -154,10 +199,44 @@
landLegend.data = []
landSeries.value[0].data = []
}
+const grid = {
+ left: '3%',
+ right: '4%',
+ bottom: '15%',
+ containLabel: true,
+}
+
+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 getProductCategoryDistribution = () => {
+ productCategoryDistribution()
+ .then((res) => {
+ if (res.code === 200 && res.data && res.data.items) {
+ workInProcessXAxis.value[0].data = res.data.items.map(item => item.name)
+ workInProcessBarSeries.value[0].data = res.data.items.map(item => parseInt(item.value))
+ }
+ })
+ .catch((error) => {
+ console.error('鑾峰彇鍚勪骇鍝佸ぇ绫诲垎甯冨け璐�:', error)
+ })
}
onMounted(() => {
loadData()
+ getProductCategoryDistribution()
})
</script>
@@ -167,47 +246,5 @@
padding: 18px;
width: 100%;
height: 420px;
-}
-
-.quality-cards {
- display: flex;
- gap: 12px;
- width: 100%;
- height: 54px;
- justify-content: space-between;
- align-items: center;
-}
-
-.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;
- 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');
}
</style>
--
Gitblit v1.9.3