From 519211ac232866afe6b081ae4a97916ad5f1d7d2 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 27 一月 2026 17:58:57 +0800
Subject: [PATCH] fix: 排名样式修改
---
src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue | 244 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 244 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
new file mode 100644
index 0000000..520ffdf
--- /dev/null
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-bottom.vue
@@ -0,0 +1,244 @@
+<template>
+ <div>
+ <PanelHeader title="瀹㈡埛钀ユ敹璐＄尞鏁板�煎垎鏋�" />
+ <div class="main-panel panel-item-customers">
+ <div class="filters-row">
+ <el-select
+ v-model="customerValue"
+ class="customer-select"
+ placeholder="璇烽�夋嫨瀹㈡埛"
+ clearable
+ filterable
+ @change="handleFilterChange"
+ >
+ <el-option
+ v-for="item in customerOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+
+ <DateTypeSwitch v-model="dateType" @change="handleFilterChange" />
+ </div>
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="barLegend"
+ :series="barSeries1"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 260px"
+ />
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, 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'
+
+const dateType = ref(1) // 1=鍛� 2=鏈� 3=瀛ｅ害
+const customerValue = ref(null)
+const customerOptions = ref([])
+
+// 钀ユ敹鍒嗘瀽鏁版嵁
+const revenueData = ref({
+ items: []
+})
+
+const chartStyle = {
+ width: '100%',
+ height: '150%',
+}
+
+const grid = {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+}
+
+const barLegend = {
+ show: false,
+ textStyle: { color: '#B8C8E0' },
+ data: ['钀ユ敹'],
+}
+
+const barSeries1 = ref([
+ {
+ name: '钀ユ敹',
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series',
+ },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 1,
+ 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' },
+ ],
+ },
+ },
+ data: [],
+ },
+])
+
+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 xAxis1 = ref([
+ {
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: { color: '#B8C8E0' },
+ data: [],
+ },
+])
+
+const yAxis1 = [
+ {
+ type: 'value',
+ axisLabel: { color: '#B8C8E0' },
+ },
+]
+
+// 鑾峰彇瀹㈡埛钀ユ敹鍒嗘瀽鏁版嵁
+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
+ }
+
+ customerRevenueAnalysis(params)
+ .then((res) => {
+ xAxis1.value[0].data = []
+ barSeries1.value[0].data = []
+
+ const items = res.data?.items || []
+ items.forEach((item) => {
+ xAxis1.value[0].data.push(item.name)
+ barSeries1.value[0].data.push(item.value)
+ })
+ revenueData.value = res.data
+ })
+ .catch((error) => {
+ console.error('鑾峰彇瀹㈡埛钀ユ敹鍒嗘瀽澶辫触:', error)
+ })
+}
+
+const fetchCustomerOptions = async () => {
+ try {
+ const params = { pageNum: 1, pageSize: 200 }
+ const res = await listCustomer(params)
+ const records = res?.records || res?.data?.records || res?.rows || []
+ customerOptions.value = records.map((r) => ({
+ 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 = [
+ { label: '鍗庝笢绮惧瘑', value: '鍗庝笢绮惧瘑' },
+ { label: '鏄熻景鐢靛瓙', value: '鏄熻景鐢靛瓙' },
+ { label: '鍚埅绉戞妧', value: '鍚埅绉戞妧' },
+ { label: '閾瘹鍒堕��', value: '閾瘹鍒堕��' },
+ { label: '杩滄櫙鏉愭枡', value: '杩滄櫙鏉愭枡' },
+ ]
+ }
+}
+
+const handleFilterChange = () => {
+ getCustomerRevenueAnalysis()
+}
+
+onMounted(() => {
+ fetchCustomerOptions()
+})
+</script>
+
+<style scoped>
+.main-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.filters-row {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 10px;
+}
+
+.customer-select {
+ width: 180px;
+}
+
+/* 涓嬫媺妗嗛鏍硷細涓� 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);
+ box-shadow: none;
+}
+
+.customer-select :deep(.el-input__inner) {
+ color: rgba(184, 200, 224, 0.9);
+}
+
+.customer-select :deep(.el-input__inner::placeholder) {
+ color: rgba(184, 200, 224, 0.6);
+}
+
+.customer-select :deep(.el-select__caret),
+.customer-select :deep(.el-icon) {
+ color: rgba(184, 200, 224, 0.8);
+}
+
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 478px;
+}
+</style>
--
Gitblit v1.9.3