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 | 149 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 106 insertions(+), 43 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
index e4ebc30..225c1f0 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
@@ -9,6 +9,8 @@
placeholder="璇烽�夋嫨瀹㈡埛"
clearable
filterable
+ popper-class="customer-select-dropdown"
+ :teleported="false"
@change="handleFilterChange"
>
<el-option
@@ -30,36 +32,45 @@
: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 { qualityStatistics } from '@/api/viewIndex.js'
+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([])
-// 璐ㄦ缁熻瀵硅薄
-const qualityStatisticsObject = ref({
- supplierNum: 0,
- processNum: 0,
- factoryNum: 0,
+// 钀ユ敹鍒嗘瀽鏁版嵁
+const revenueData = ref({
+ items: []
})
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 style="color: #B8C8E0">${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,29 +138,46 @@
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)' } },
},
]
-// 璐ㄦ缁熻
-const qualityStatisticsInfo = () => {
- qualityStatistics()
+// 鑾峰彇瀹㈡埛钀ユ敹鍒嗘瀽鏁版嵁
+const getCustomerRevenueAnalysis = () => {
+ if (customerOptions.value.length > 0 && !customerValue.value) {
+ // 榛樿閫変腑绗竴涓鎴�
+ customerValue.value = customerOptions.value[0].value
+ }
+
+ if (!customerValue.value) return
+
+ const params = {
+ customerId: customerValue.value,
+ type: dateType.value
+ }
+
+ loaded.value = false
+ customerRevenueAnalysis(params)
.then((res) => {
- // 鍒囨崲绛涢�夋潯浠舵椂锛屽厛娓呯┖鍐嶅～鍏咃紝閬垮厤閲嶅 push
xAxis1.value[0].data = []
barSeries1.value[0].data = []
- res.data.item.forEach((item) => {
- xAxis1.value[0].data.push(item.date)
- // 杩欓噷鏆傜敤 supplierNum 浣滀负鏌辩姸鍥炬暟鍊硷紙鎺ュ彛杩斿洖閲屽綋鍓嶄篃鏈夎繖涓変釜瀛楁锛�
- barSeries1.value[0].data.push(item.supplierNum)
+ const items = res.data?.items || []
+ items.forEach((item) => {
+ xAxis1.value[0].data.push(item.name)
+ barSeries1.value[0].data.push(Number(item.value) || 0)
})
- qualityStatisticsObject.value.supplierNum = res.data.supplierNum
- qualityStatisticsObject.value.processNum = res.data.processNum
- qualityStatisticsObject.value.factoryNum = res.data.factoryNum
+ revenueData.value = res.data || { items: [] }
})
.catch((error) => {
- console.error('鑾峰彇璐ㄦ缁熻澶辫触:', error)
+ console.error('鑾峰彇瀹㈡埛钀ユ敹鍒嗘瀽澶辫触:', error)
+ revenueData.value = { items: [] }
+ })
+ .finally(() => {
+ loaded.value = true
})
}
@@ -161,6 +190,12 @@
label: r.customerName || r.name || r.customer || '-',
value: r.id ?? r.customerId ?? r.customerCode ?? r.customerName,
}))
+
+ // 鑾峰彇鍒伴�夐」鍚庯紝濡傛灉杩樻病閫変腑锛岄粯璁ら�変腑绗竴涓�
+ if (customerOptions.value.length > 0 && !customerValue.value) {
+ customerValue.value = customerOptions.value[0].value
+ getCustomerRevenueAnalysis()
+ }
} catch (e) {
// 鎺ュ彛寮傚父鏃剁粰涓�缁勬ā鎷熷鎴凤紝淇濊瘉UI鍙敤
customerOptions.value = [
@@ -174,14 +209,11 @@
}
const handleFilterChange = () => {
- // 鐩墠 qualityStatistics 鎺ュ彛鏈惡甯︾瓫閫夊弬鏁帮紝杩欓噷鍏堢粺涓�瑙﹀彂鍒锋柊锛岄伩鍏嶉噸澶嶆暟鎹�
- // 鑻ュ悗绔悗缁敮鎸� customerId/type锛屽彲鍦� qualityStatistics() 澶勬敼涓轰紶鍙�
- qualityStatisticsInfo()
+ getCustomerRevenueAnalysis()
}
onMounted(() => {
fetchCustomerOptions()
- qualityStatisticsInfo()
})
</script>
@@ -207,28 +239,59 @@
/* 涓嬫媺妗嗛鏍硷細涓� 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>
+/* 鍏ㄥ睆妯″紡涓嬩笅鎷夋灞傜骇淇 */
+.customer-select-dropdown {
+ z-index: 10001 !important;
+}
+
+/* 纭繚鍦ㄥ叏灞忓鍣ㄥ唴鐨勪笅鎷夋涔熻兘姝ｅ父鏄剧ず */
+.scale-container:fullscreen .customer-select-dropdown,
+.scale-container:-webkit-full-screen .customer-select-dropdown,
+.scale-container:-ms-fullscreen .customer-select-dropdown {
+ z-index: 10001 !important;
+}
</style>
--
Gitblit v1.9.3