From 6c7375701b519377752df5da89e8c3910c1661d8 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 27 一月 2026 17:40:23 +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 aa202b6..3840aa0 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,6 +28,7 @@
// 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
const dataList = ref([])
+import { productCategoryDistribution } from '@/api/viewIndex.js'
// 棰滆壊鍒楄〃
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
@@ -45,6 +47,29 @@
// 鍥句緥閰嶇疆锛堝彸渚х珫鎺掞級
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: [],
@@ -128,6 +153,12 @@
lineStyle: {
color: '#B8C8E0',
},
+ name: '浜у搧鏁伴噺',
+ type: 'bar',
+ barWidth: 25,
+ barGap: 0,
+ emphasis: {
+ focus: 'series',
},
itemStyle: {
color: function (params) {
@@ -143,6 +174,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,
},
@@ -159,6 +203,7 @@
const chartStyle = {
width: '100%',
height: '150%',
+ height: '100%',
}
const loadData = async () => {
@@ -179,10 +224,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>
@@ -192,47 +271,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