From 73d112ddc9bdfeb7eaaf3b7308cfb4dbeb470c89 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 07 八月 2026 17:28:10 +0800
Subject: [PATCH] 天津_意博凯信 1.备件管理-新增独立备件出库功能入口，支持直接完成备件领用出库操作。 2.设备保养-支持按日期分组折叠展示，分组条目可展开查看明细；单条明细行末尾增加【保养完成】操作按钮，可单独办结单条保养任务；折叠汇总状态下，新增【一键保养完成】批量操作按钮，快速办结当前分组全部保养项。 3.设备巡检-按日期分组折叠展示，分组支持展开查看明细；每条巡检明细后增设【巡检完成】按钮，支持单独办结单条巡检记录；分组折叠未展开状态下，提供【一键巡检完成】批量操作，统一办结该分组下所有巡检任务。 4.增值税对比-优化数据展示逻辑，列表展示各订单增值税明细；页面右侧新增柱状可视化图表，直观对比进销项增值税数据。 5.管理驾驶舱-指标修改：将顶部「销售产品数」调整为「销售订单数」；时间筛选：页面左上角新增日期范围下拉筛选控件，所有统计指标标注当前筛选时段；
---
src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue | 513 +++++++++++++++++++++++++++++----------------------------
1 files changed, 261 insertions(+), 252 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
index 506ea9d..493b441 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
@@ -1,58 +1,60 @@
<template>
- <div>
- <PanelHeader title="瀹㈡埛閲戦璐＄尞鎺掑悕" />
- <div class="panel-item-customers">
- <div class="switch-container">
- <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
- </div>
- <Echarts
- ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="{ show: false }"
- :series="series"
- :tooltip="tooltip"
- :xAxis="xAxis"
- :yAxis="yAxis"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
- style="height: 360px"
- />
- </div>
- </div>
+ <div>
+ <PanelHeader title="瀹㈡埛璐＄尞鎺掑悕" />
+ <div class="panel-item-customers">
+ <div class="switch-container">
+ <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
+ </div>
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="{ show: false }"
+ :series="series"
+ :tooltip="tooltip"
+ :xAxis="xAxis"
+ :yAxis="yAxis"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 360px"
+ />
+ </div>
+ </div>
</template>
<script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, inject, watch } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from '../PanelHeader.vue'
import DateTypeSwitch from '../DateTypeSwitch.vue'
import { customerContributionRanking } from '@/api/viewIndex.js'
+const dateRange = inject('psiDateRange', null)
+
const chartStyle = {
- width: '100%',
- height: '100%',
+ width: '100%',
+ height: '100%',
}
const dateType = ref(1) // 1=鍛� 2=鏈� 3=瀛ｅ害
// 椋炴満鍥炬爣 SVG path锛堜笌 right-top 涓�鑷达級
const aircraft =
- 'path://M107.000,71.000 C104.936,71.000 102.665,70.806 100.273,70.467 C94.592,76.922 86.275,81.000 77.000,81.000 C70.794,81.000 65.020,79.170 60.172,76.029 C66.952,74.165 72.647,69.714 76.173,63.817 C69.821,61.362 64.063,58.593 60.000,56.039 L60.000,52.813 C70.456,53.950 80.723,55.000 83.000,55.000 C88.972,55.000 93.000,53.723 93.000,50.000 C93.000,47.071 89.222,45.000 83.000,45.000 C80.723,45.000 70.456,46.050 60.000,47.187 L60.000,43.989 C64.057,41.431 69.807,38.644 76.168,36.173 C72.641,30.281 66.948,25.834 60.172,23.971 C65.020,20.830 70.794,19.000 77.000,19.000 C86.270,19.000 94.584,23.074 100.265,29.524 C102.647,29.191 104.918,29.000 107.000,29.000 C129.644,29.000 148.000,50.000 148.000,50.000 C148.000,50.000 129.644,71.000 107.000,71.000 ZM113.000,38.000 C106.373,38.000 101.000,43.373 101.000,50.000 C101.000,56.627 106.373,62.000 113.000,62.000 C119.627,62.000 125.000,56.627 125.000,50.000 C125.000,43.373 119.627,38.000 113.000,38.000 ZM113.000,56.000 C109.686,56.000 107.000,53.314 107.000,50.000 C107.000,46.686 109.686,44.000 113.000,44.000 C116.314,44.000 119.000,46.686 119.000,50.000 C119.000,53.314 116.314,56.000 113.000,56.000 ZM110.500,19.000 C109.567,19.000 108.763,18.483 108.334,17.726 C100.231,9.857 89.187,5.000 77.000,5.000 C64.813,5.000 53.769,9.857 45.666,17.726 C45.237,18.483 44.433,19.000 43.500,19.000 C42.119,19.000 41.000,17.881 41.000,16.500 C41.000,15.847 41.256,15.259 41.665,14.813 L41.575,14.718 C50.629,5.628 63.156,-0.000 77.000,-0.000 C90.844,-0.000 103.371,5.628 112.425,14.718 L112.335,14.813 C112.744,15.259 113.000,15.847 113.000,16.500 C113.000,17.881 111.881,19.000 110.500,19.000 ZM53.000,49.484 C61.406,48.626 77.810,47.000 81.345,47.000 C87.353,47.000 91.000,48.243 91.000,50.000 C91.000,52.234 87.111,53.000 81.345,53.000 C77.810,53.000 61.406,51.374 53.000,50.516 L53.000,49.484 ZM53.000,47.000 L9.000,50.000 L53.000,53.000 L53.000,56.000 L-0.000,50.000 L53.000,44.000 L53.000,47.000 ZM43.500,81.000 C44.433,81.000 45.237,81.517 45.666,82.274 C53.769,90.143 64.813,95.000 77.000,95.000 C89.187,95.000 100.231,90.143 108.334,82.274 C108.763,81.517 109.567,81.000 110.500,81.000 C111.881,81.000 113.000,82.119 113.000,83.500 C113.000,84.153 112.744,84.741 112.335,85.187 L112.425,85.282 C103.371,94.372 90.844,100.000 77.000,100.000 C63.156,100.000 50.629,94.372 41.575,85.282 L41.665,85.187 C41.256,84.741 41.000,84.153 41.000,83.500 C41.000,82.119 42.119,81.000 43.500,81.000 Z'
+ 'path://M107.000,71.000 C104.936,71.000 102.665,70.806 100.273,70.467 C94.592,76.922 86.275,81.000 77.000,81.000 C70.794,81.000 65.020,79.170 60.172,76.029 C66.952,74.165 72.647,69.714 76.173,63.817 C69.821,61.362 64.063,58.593 60.000,56.039 L60.000,52.813 C70.456,53.950 80.723,55.000 83.000,55.000 C88.972,55.000 93.000,53.723 93.000,50.000 C93.000,47.071 89.222,45.000 83.000,45.000 C80.723,45.000 70.456,46.050 60.000,47.187 L60.000,43.989 C64.057,41.431 69.807,38.644 76.168,36.173 C72.641,30.281 66.948,25.834 60.172,23.971 C65.020,20.830 70.794,19.000 77.000,19.000 C86.270,19.000 94.584,23.074 100.265,29.524 C102.647,29.191 104.918,29.000 107.000,29.000 C129.644,29.000 148.000,50.000 148.000,50.000 C148.000,50.000 129.644,71.000 107.000,71.000 ZM113.000,38.000 C106.373,38.000 101.000,43.373 101.000,50.000 C101.000,56.627 106.373,62.000 113.000,62.000 C119.627,62.000 125.000,56.627 125.000,50.000 C125.000,43.373 119.627,38.000 113.000,38.000 ZM113.000,56.000 C109.686,56.000 107.000,53.314 107.000,50.000 C107.000,46.686 109.686,44.000 113.000,44.000 C116.314,44.000 119.000,46.686 119.000,50.000 C119.000,53.314 116.314,56.000 113.000,56.000 ZM110.500,19.000 C109.567,19.000 108.763,18.483 108.334,17.726 C100.231,9.857 89.187,5.000 77.000,5.000 C64.813,5.000 53.769,9.857 45.666,17.726 C45.237,18.483 44.433,19.000 43.500,19.000 C42.119,19.000 41.000,17.881 41.000,16.500 C41.000,15.847 41.256,15.259 41.665,14.813 L41.575,14.718 C50.629,5.628 63.156,-0.000 77.000,-0.000 C90.844,-0.000 103.371,5.628 112.425,14.718 L112.335,14.813 C112.744,15.259 113.000,15.847 113.000,16.500 C113.000,17.881 111.881,19.000 110.500,19.000 ZM53.000,49.484 C61.406,48.626 77.810,47.000 81.345,47.000 C87.353,47.000 91.000,48.243 91.000,50.000 C91.000,52.234 87.111,53.000 81.345,53.000 C77.810,53.000 61.406,51.374 53.000,50.516 L53.000,49.484 ZM53.000,47.000 L9.000,50.000 L53.000,53.000 L53.000,56.000 L-0.000,50.000 L53.000,44.000 L53.000,47.000 ZM43.500,81.000 C44.433,81.000 45.237,81.517 45.666,82.274 C53.769,90.143 64.813,95.000 77.000,95.000 C89.187,95.000 100.231,90.143 108.334,82.274 C108.763,81.517 109.567,81.000 110.500,81.000 C111.881,81.000 113.000,82.119 113.000,83.500 C113.000,84.153 112.744,84.741 112.335,85.187 L112.425,85.282 C103.371,94.372 90.844,100.000 77.000,100.000 C63.156,100.000 50.629,94.372 41.575,85.282 L41.665,85.187 C41.256,84.741 41.000,84.153 41.000,83.500 C41.000,82.119 42.119,81.000 43.500,81.000 Z'
// 棰滆壊閰嶇疆锛堜笌 right-top 涓�鑷达級
const color = {
- 0: '#ff5676',
- 1: '#ffd83e',
- 2: '#fbff94',
- 3: '#7daeff',
+ 0: '#ff5676',
+ 1: '#ffd83e',
+ 2: '#fbff94',
+ 3: '#7daeff',
}
// 鍘熷鏁版嵁锛堢粺涓�鎴� { NAME, NUM }锛�
const dataArr = ref([])
const dataArray = computed(() => {
- const sortedAsc = [...dataArr.value].sort((a, b) => a.NUM - b.NUM)
- return sortedAsc.length > 5 ? sortedAsc.slice(-5) : sortedAsc
+ const sortedAsc = [...dataArr.value].sort((a, b) => a.NUM - b.NUM)
+ return sortedAsc.length > 5 ? sortedAsc.slice(-5) : sortedAsc
})
const total = computed(() => dataArray.value.reduce((sum, v) => sum + Number(v.NUM || 0), 0))
@@ -60,270 +62,277 @@
const xdataName = computed(() => dataArray.value.map((v) => v.NAME))
const dataNum = computed(() => {
- return dataArray.value.map((v, i) => {
- const index = dataArray.value.length - i - 1
- const isTop3 = index < 3
-
- return {
- value: Number(v.NUM),
- itemStyle: {
- color: {
- type: 'linear',
- x: 1,
- y: 0,
- x2: 0,
- y2: 0,
- colorStops: [
- { offset: 0, color: isTop3 ? '#ffdae1' : '#ecf3ff' },
- { offset: 0.07, color: isTop3 ? color[index] : color[3] },
- {
- offset: 1,
- color: isTop3 ? 'rgba(255, 86, 118, .1)' : 'rgba(125,174,255, .1)',
- },
- ],
- global: false,
- },
- barBorderRadius: [0, 20, 20, 0],
- },
- symbol: isTop3 ? aircraft : 'none',
- symbolPosition: 'end',
- symbolSize: [30, 25],
- symbolOffset: [35, 0],
- }
- })
+ return dataArray.value.map((v, i) => {
+ const index = dataArray.value.length - i - 1
+ const isTop3 = index < 3
+
+ return {
+ value: Number(v.NUM),
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 1,
+ y: 0,
+ x2: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: isTop3 ? '#ffdae1' : '#ecf3ff' },
+ { offset: 0.07, color: isTop3 ? color[index] : color[3] },
+ {
+ offset: 1,
+ color: isTop3 ? 'rgba(255, 86, 118, .1)' : 'rgba(125,174,255, .1)',
+ },
+ ],
+ global: false,
+ },
+ barBorderRadius: [0, 20, 20, 0],
+ },
+ symbol: isTop3 ? aircraft : 'none',
+ symbolPosition: 'end',
+ symbolSize: [30, 25],
+ symbolOffset: [35, 0],
+ }
+ })
})
const bgData = computed(() => {
- const maxValue = Math.max(0, ...dataNum.value.map((v) => v.value))
- return dataNum.value.map(() => maxValue + 200)
+ const maxValue = Math.max(0, ...dataNum.value.map((v) => v.value))
+ return dataNum.value.map(() => maxValue + 200)
})
const tooltip = computed(() => ({
- trigger: 'axis',
- textStyle: { fontSize: '100%' },
- 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
- },
+ trigger: 'axis',
+ textStyle: { fontSize: '100%' },
+ formatter: function (params) {
+ let result = params[0].axisValueLabel + '<br/>'
+ params.forEach((item) => {
+ result += `<div>${item.marker} ${item.seriesName}: ${item.value}鍏�</div>`
+ })
+ return result
+ },
}))
const grid = computed(() => ({ top: 0, left: '20%', right: '10%', bottom: 0 }))
const xAxis = computed(() => [
- {
- splitLine: { show: false },
- axisLine: { show: false },
- axisLabel: { show: false },
- axisTick: { show: false },
- },
+ {
+ splitLine: { show: false },
+ axisLine: { show: false },
+ axisLabel: { show: false },
+ axisTick: { show: false },
+ },
])
const yAxis = computed(() => [
- {
- type: 'category',
- inverse: false,
- data: xdataName.value,
- axisLabel: {
- formatter: (value) => {
- if (!value) return ''
- const maxLen = 6 // 姣忚鏈�澶氬瓧绗︽暟锛屽彲鎸夐渶璋冩暣
- if (value.length <= maxLen) return `{a|${value}}`
-
- const lines = []
- for (let i = 0; i < value.length; i += maxLen) {
- lines.push(value.slice(i, i + maxLen))
- }
- return lines.map((line) => `{a|${line}}`).join('\n')
- },
- rich: {
- a: {
- width: 120,
- fontSize: 14,
- color: '#fff',
- padding: [5, 4, 5, 0],
- align: 'right',
- },
- },
- },
- axisLine: { show: false },
- axisTick: { show: false },
- splitLine: { show: false },
- },
- {
- type: 'category',
- data: dataNum.value.map((item) => item.value),
- axisLabel: {
- formatter: (params, index) => {
- const value = typeof params === 'object' ? params.value : params
- const percent = total.value ? ((value / total.value) * 100).toFixed(0) : 0
- const rank = dataArray.value.length - index
- const isTop3 = rank < 4
-
- return `{a${isTop3 ? rank : ''}|${percent} }{b${isTop3 ? rank : ''}|%}`
- },
- rich: {
- a: { fontSize: 18, color: '#98bfff', verticalAlign: 'bottom' },
- a1: { fontSize: 18, color: '#ff7f97', verticalAlign: 'bottom' },
- a2: { fontSize: 18, color: '#ffce64', verticalAlign: 'bottom' },
- a3: { fontSize: 18, color: '#e8ed66', verticalAlign: 'bottom' },
- b: { fontSize: 12, color: '#98bfff', verticalAlign: 'bottom' },
- b1: { fontSize: 12, color: '#ff7f97', verticalAlign: 'bottom' },
- b2: { fontSize: 12, color: '#ffce64', verticalAlign: 'bottom' },
- b3: { fontSize: 12, color: '#e8ed66', verticalAlign: 'bottom' },
- },
- },
- axisLine: { show: false },
- axisTick: { show: false },
- splitLine: { show: false },
- },
+ {
+ type: 'category',
+ inverse: false,
+ data: xdataName.value,
+ axisLabel: {
+ formatter: (value) => {
+ if (!value) return ''
+ const maxLen = 6 // 姣忚鏈�澶氬瓧绗︽暟锛屽彲鎸夐渶璋冩暣
+ if (value.length <= maxLen) return `{a|${value}}`
+
+ const lines = []
+ for (let i = 0; i < value.length; i += maxLen) {
+ lines.push(value.slice(i, i + maxLen))
+ }
+ return lines.map((line) => `{a|${line}}`).join('\n')
+ },
+ rich: {
+ a: {
+ width: 120,
+ fontSize: 14,
+ color: '#fff',
+ padding: [5, 4, 5, 0],
+ align: 'right',
+ },
+ },
+ },
+ axisLine: { show: false },
+ axisTick: { show: false },
+ splitLine: { show: false },
+ },
+ {
+ type: 'category',
+ data: dataNum.value.map((item) => item.value),
+ axisLabel: {
+ formatter: (params, index) => {
+ const value = typeof params === 'object' ? params.value : params
+ const percent = total.value ? ((value / total.value) * 100).toFixed(0) : 0
+ const rank = dataArray.value.length - index
+ const isTop3 = rank < 4
+
+ return `{a${isTop3 ? rank : ''}|${percent} }{b${isTop3 ? rank : ''}|%}`
+ },
+ rich: {
+ a: { fontSize: 18, color: '#98bfff', verticalAlign: 'bottom' },
+ a1: { fontSize: 18, color: '#ff7f97', verticalAlign: 'bottom' },
+ a2: { fontSize: 18, color: '#ffce64', verticalAlign: 'bottom' },
+ a3: { fontSize: 18, color: '#e8ed66', verticalAlign: 'bottom' },
+ b: { fontSize: 12, color: '#98bfff', verticalAlign: 'bottom' },
+ b1: { fontSize: 12, color: '#ff7f97', verticalAlign: 'bottom' },
+ b2: { fontSize: 12, color: '#ffce64', verticalAlign: 'bottom' },
+ b3: { fontSize: 12, color: '#e8ed66', verticalAlign: 'bottom' },
+ },
+ },
+ axisLine: { show: false },
+ axisTick: { show: false },
+ splitLine: { show: false },
+ },
])
const series = computed(() => [
- {
- name: '閲戦',
- z: 6,
- type: 'pictorialBar',
- data: dataNum.value,
- },
- {
- name: '鑳屾櫙',
- z: 6,
- type: 'bar',
- barWidth: 25,
- tooltip: { show: false },
- itemStyle: {
- color: 'rgba(255,255,255,.1)',
- barBorderRadius: [0, 20, 20, 0],
- },
- data: bgData.value,
- },
- {
- name: '閲戦娓愬彉',
- type: 'bar',
- barWidth: 25,
- barGap: '-100%',
- tooltip: { show: false },
- itemStyle: {
- color: {
- type: 'linear',
- x: 1,
- y: 0,
- x2: 0,
- y2: 0,
- colorStops: [
- { offset: 0, color: 'rgba(255, 218, 220)' },
- { offset: 0.07, color: 'rgba(255, 86, 118)' },
- { offset: 1, color: 'rgba(255, 86, 118, 0)' },
- ],
- global: false,
- },
- barBorderRadius: [0, 20, 20, 0],
- },
- data: dataNum.value,
- },
+ {
+ name: '閲戦',
+ z: 6,
+ type: 'pictorialBar',
+ data: dataNum.value,
+ },
+ {
+ name: '鑳屾櫙',
+ z: 6,
+ type: 'bar',
+ barWidth: 25,
+ tooltip: { show: false },
+ itemStyle: {
+ color: 'rgba(255,255,255,.1)',
+ barBorderRadius: [0, 20, 20, 0],
+ },
+ data: bgData.value,
+ },
+ {
+ name: '閲戦娓愬彉',
+ type: 'bar',
+ barWidth: 25,
+ barGap: '-100%',
+ tooltip: { show: false },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 1,
+ y: 0,
+ x2: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: 'rgba(255, 218, 220)' },
+ { offset: 0.07, color: 'rgba(255, 86, 118)' },
+ { offset: 1, color: 'rgba(255, 86, 118, 0)' },
+ ],
+ global: false,
+ },
+ barBorderRadius: [0, 20, 20, 0],
+ },
+ data: dataNum.value,
+ },
])
const normalizeItem = (item) => {
- const name =
- item?.NAME ??
- item?.name ??
- item?.customerName ??
- item?.customer ??
- item?.label ??
- '-'
-
- const num =
- item?.NUM ??
- item?.num ??
- item?.value ??
- item?.amount ??
- item?.money ??
- 0
-
- return { NAME: String(name), NUM: Number(num) || 0 }
+ const name =
+ item?.NAME ??
+ item?.name ??
+ item?.customerName ??
+ item?.customer ??
+ item?.label ??
+ '-'
+
+ const num =
+ item?.NUM ??
+ item?.num ??
+ item?.value ??
+ item?.amount ??
+ item?.money ??
+ 0
+
+ return { NAME: String(name), NUM: Number(num) || 0 }
}
const getMockListByType = (type) => {
- // 妯℃嫙鍋囨暟鎹紙閲戦璐＄尞鎺掑悕锛�
- // type: 1=鍛� 2=鏈� 3=瀛ｅ害
- if (type === 2) {
- return [
- { NAME: '鍗庝笢绮惧瘑', NUM: 5120000 },
- { NAME: '鏄熻景鐢靛瓙', NUM: 3860000 },
- { NAME: '鍚埅绉戞妧', NUM: 2720000 },
- { NAME: '閾瘹鍒堕��', NUM: 2160000 },
- { NAME: '杩滄櫙鏉愭枡', NUM: 1430000 },
- { NAME: '寰锋鼎璐告槗', NUM: 910000 },
- { NAME: '瀹忚揪閰嶅', NUM: 680000 },
- ]
- }
- if (type === 3) {
- return [
- { NAME: '鍗庝笢绮惧瘑', NUM: 16800000 },
- { NAME: '鏄熻景鐢靛瓙', NUM: 12960000 },
- { NAME: '鍚埅绉戞妧', NUM: 9720000 },
- { NAME: '閾瘹鍒堕��', NUM: 7560000 },
- { NAME: '杩滄櫙鏉愭枡', NUM: 5430000 },
- { NAME: '寰锋鼎璐告槗', NUM: 3910000 },
- { NAME: '瀹忚揪閰嶅', NUM: 2680000 },
- ]
- }
- return [
- { NAME: '鍗庝笢绮惧瘑', NUM: 1280000 },
- { NAME: '鏄熻景鐢靛瓙', NUM: 860000 },
- { NAME: '鍚埅绉戞妧', NUM: 720000 },
- { NAME: '閾瘹鍒堕��', NUM: 560000 },
- { NAME: '杩滄櫙鏉愭枡', NUM: 430000 },
- { NAME: '寰锋鼎璐告槗', NUM: 310000 },
- { NAME: '瀹忚揪閰嶅', NUM: 180000 },
- ]
+ // 妯℃嫙鍋囨暟鎹紙閲戦璐＄尞鎺掑悕锛�
+ // type: 1=鍛� 2=鏈� 3=瀛ｅ害
+ if (type === 2) {
+ return [
+ { NAME: '鍗庝笢绮惧瘑', NUM: 5120000 },
+ { NAME: '鏄熻景鐢靛瓙', NUM: 3860000 },
+ { NAME: '鍚埅绉戞妧', NUM: 2720000 },
+ { NAME: '閾瘹鍒堕��', NUM: 2160000 },
+ { NAME: '杩滄櫙鏉愭枡', NUM: 1430000 },
+ { NAME: '寰锋鼎璐告槗', NUM: 910000 },
+ { NAME: '瀹忚揪閰嶅', NUM: 680000 },
+ ]
+ }
+ if (type === 3) {
+ return [
+ { NAME: '鍗庝笢绮惧瘑', NUM: 16800000 },
+ { NAME: '鏄熻景鐢靛瓙', NUM: 12960000 },
+ { NAME: '鍚埅绉戞妧', NUM: 9720000 },
+ { NAME: '閾瘹鍒堕��', NUM: 7560000 },
+ { NAME: '杩滄櫙鏉愭枡', NUM: 5430000 },
+ { NAME: '寰锋鼎璐告槗', NUM: 3910000 },
+ { NAME: '瀹忚揪閰嶅', NUM: 2680000 },
+ ]
+ }
+ return [
+ { NAME: '鍗庝笢绮惧瘑', NUM: 1280000 },
+ { NAME: '鏄熻景鐢靛瓙', NUM: 860000 },
+ { NAME: '鍚埅绉戞妧', NUM: 720000 },
+ { NAME: '閾瘹鍒堕��', NUM: 560000 },
+ { NAME: '杩滄櫙鏉愭枡', NUM: 430000 },
+ { NAME: '寰锋鼎璐告槗', NUM: 310000 },
+ { NAME: '瀹忚揪閰嶅', NUM: 180000 },
+ ]
}
const setMockData = (type) => {
- dataArr.value = getMockListByType(type).map(normalizeItem)
+ dataArr.value = getMockListByType(type).map(normalizeItem)
}
const fetchCustomerRanking = () => {
- customerContributionRanking({ type: dateType.value })
- .then((res) => {
- if (res.code === 200 && Array.isArray(res.data)) {
- dataArr.value = res.data.map(item => ({
- NAME: item.customerName,
- NUM: item.totalAmount
- }))
- } else {
- setMockData(dateType.value)
- }
- })
- .catch((error) => {
- console.error('鑾峰彇瀹㈡埛閲戦璐＄尞鎺掑悕澶辫触:', error)
- setMockData(dateType.value)
- })
+ customerContributionRanking({ type: dateType.value, ...(dateRange?.value || {}) })
+ .then((res) => {
+ if (res.code === 200 && Array.isArray(res.data)) {
+ dataArr.value = res.data.map(item => ({
+ NAME: item.customerName,
+ NUM: item.totalAmount
+ }))
+ } else {
+ setMockData(dateType.value)
+ }
+ })
+ .catch((error) => {
+ console.error('鑾峰彇瀹㈡埛閲戦璐＄尞鎺掑悕澶辫触:', error)
+ setMockData(dateType.value)
+ })
}
const handleDateTypeChange = () => {
- fetchCustomerRanking()
+ fetchCustomerRanking()
+}
+
+const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
+if (dataDashboardRefreshTick) {
+ watch(dataDashboardRefreshTick, () => {
+ fetchCustomerRanking()
+ })
}
onMounted(() => {
- fetchCustomerRanking()
+ fetchCustomerRanking()
})
</script>
<style scoped>
.panel-item-customers {
- border: 1px solid #1a58b0;
- padding: 18px;
- width: 100%;
- height: 449px;
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 449px;
}
.switch-container {
- display: flex;
- justify-content: flex-end;
- margin-bottom: 16px;
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 16px;
}
</style>
--
Gitblit v1.9.3