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/dataDashboard/components/basic/left-bottom.vue |   83 ++++++++++++++++++++++++++++++-----------
 1 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
index da736e1..225c1f0 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
@@ -32,22 +32,25 @@
           :tooltip="tooltip"
           :xAxis="xAxis1"
           :yAxis="yAxis1"
-          :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
-          style="height: 260px"
-        />
+          :options="{ backgroundColor: 'transparent', textStyle: { color: '#8FA3C8' } }"
+          style="height: 370px"
+        >
+          <div v-if="loaded && !hasRevenueData" class="chart-empty">鏆傛棤钀ユ敹鏁版嵁</div>
+        </Echarts>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import Echarts from '@/components/Echarts/echarts.vue'
 import PanelHeader from '../PanelHeader.vue'
 import DateTypeSwitch from '../DateTypeSwitch.vue'
 import { customerRevenueAnalysis } from '@/api/viewIndex.js'
 import { listCustomer } from '@/api/basicData/customerFile.js'
+import { BI, withTooltip } from '../../theme.js'
 
-const dateType = ref(1) // 1=鍛� 2=鏈� 3=瀛ｅ害
+const dateType = ref(3) // 1=鍛� 2=鏈� 3=瀛ｅ害锛岄粯璁ゅ搴�
 const customerValue = ref(null)
 const customerOptions = ref([])
 
@@ -58,8 +61,16 @@
 
 const chartStyle = {
   width: '100%',
-  height: '150%',
+  height: '100%',
 }
+
+// 鏄惁宸叉嬁鍒板搷搴旓紙鍖哄垎鍔犺浇涓笌鐪熺殑鏃犳暟鎹級
+const loaded = ref(false)
+
+// 鏈夋暟鎹墠鏄剧ず鏌卞瓙
+const hasRevenueData = computed(
+  () => (revenueData.value.items || []).some((i) => Number(i.value) > 0)
+)
 
 const grid = {
   left: '3%',
@@ -70,7 +81,7 @@
 
 const barLegend = {
   show: false,
-  textStyle: { color: '#B8C8E0' },
+  textStyle: { color: BI.text },
   data: ['钀ユ敹'],
 }
 
@@ -90,9 +101,8 @@
         x2: 0,
         y2: 0,
         colorStops: [
-          // linear-gradient(360deg, rgba(0,164,237,0) 0%, #4EE4FF 100%)
-          { offset: 0, color: 'rgba(0,164,237,0)' },
-          { offset: 1, color: '#4EE4FF' },
+          { offset: 0, color: 'rgba(74, 108, 240, 0)' },
+          { offset: 1, color: '#4A6CF0' },
         ],
       },
     },
@@ -100,7 +110,7 @@
   },
 ])
 
-const tooltip = {
+const tooltip = withTooltip({
   trigger: 'axis',
   axisPointer: {
     type: 'shadow',
@@ -108,17 +118,19 @@
   formatter: function (params) {
     let result = params[0].axisValueLabel + '<br/>'
     params.forEach((item) => {
-      result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`
+      const val = Number(item.value || 0).toLocaleString('zh-CN')
+      result += `<div>${item.marker} ${item.seriesName}: ${val} 鍏�</div>`
     })
     return result
   },
-}
+})
 
 const xAxis1 = ref([
   {
     type: 'category',
     axisTick: { show: false },
-    axisLabel: { color: '#B8C8E0' },
+    axisLine: { show: false },
+    axisLabel: { color: BI.text, fontSize: 12 },
     data: [],
   },
 ])
@@ -126,7 +138,10 @@
 const yAxis1 = [
   {
     type: 'value',
-    axisLabel: { color: '#B8C8E0' },
+    axisLabel: { color: BI.text, fontSize: 12 },
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { lineStyle: { color: 'rgba(143, 163, 200, 0.15)' } },
   },
 ]
 
@@ -144,6 +159,7 @@
     type: dateType.value
   }
 
+  loaded.value = false
   customerRevenueAnalysis(params)
     .then((res) => {
       xAxis1.value[0].data = []
@@ -152,12 +168,16 @@
       const items = res.data?.items || []
       items.forEach((item) => {
         xAxis1.value[0].data.push(item.name)
-        barSeries1.value[0].data.push(item.value)
+        barSeries1.value[0].data.push(Number(item.value) || 0)
       })
-      revenueData.value = res.data
+      revenueData.value = res.data || { items: [] }
     })
     .catch((error) => {
       console.error('鑾峰彇瀹㈡埛钀ユ敹鍒嗘瀽澶辫触:', error)
+      revenueData.value = { items: [] }
+    })
+    .finally(() => {
+      loaded.value = true
     })
 }
 
@@ -219,30 +239,47 @@
 /* 涓嬫媺妗嗛鏍硷細涓� DateTypeSwitch 淇濇寔涓�鑷达紙娣辫壊鍗婇�忔槑銆佹祬鑹叉枃瀛椼�佺粏杈规锛� */
 .customer-select :deep(.el-input__wrapper),
 .customer-select :deep(.el-select__wrapper) {
-  background-color: rgba(26, 88, 176, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: rgba(20, 32, 66, 0.55);
+  border: 1px solid #1e3160;
   box-shadow: none;
 }
 
 .customer-select :deep(.el-input__inner) {
-  color: rgba(184, 200, 224, 0.9);
+  color: #8fa3c8;
 }
 
 .customer-select :deep(.el-input__inner::placeholder) {
-  color: rgba(184, 200, 224, 0.6);
+  color: rgba(143, 163, 200, 0.6);
 }
 
 .customer-select :deep(.el-select__caret),
 .customer-select :deep(.el-icon) {
-  color: rgba(184, 200, 224, 0.8);
+  color: #8fa3c8;
 }
 
 .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: 478px;
 }
+
+.chart-empty {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 370px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bi-text);
+  font-size: 14px;
+  letter-spacing: 1px;
+  pointer-events: none;
+}
 </style>
 
 <style>

--
Gitblit v1.9.3