| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <PanelHeader title="客户金额贡献排名" /> |
|---|
| | | <PanelHeader title="客户贡献排名" /> |
|---|
| | | <div class="panel-item-customers"> |
|---|
| | | <div class="switch-container"> |
|---|
| | | <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" /> |
|---|
| | |
|---|
| | | </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' |
|---|
| | |
|---|
| | | height: '100%', |
|---|
| | | } |
|---|
| | | |
|---|
| | | const dateType = ref(1) // 1=周 2=月 3=季度 |
|---|
| | | const dateType = ref(3) // 1=周 2=月 3=季度 |
|---|
| | | |
|---|
| | | // 飞机图标 SVG path（与 right-top 一致） |
|---|
| | | const aircraft = |
|---|
| | |
|---|
| | | formatter: function (params) { |
|---|
| | | let result = params[0].axisValueLabel + '<br/>' |
|---|
| | | params.forEach((item) => { |
|---|
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>` |
|---|
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value}元</div>` |
|---|
| | | }) |
|---|
| | | return result |
|---|
| | | }, |
|---|
| | |
|---|
| | | fetchCustomerRanking() |
|---|
| | | } |
|---|
| | | |
|---|
| | | const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null) |
|---|
| | | if (dataDashboardRefreshTick) { |
|---|
| | | watch(dataDashboardRefreshTick, () => { |
|---|
| | | fetchCustomerRanking() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | fetchCustomerRanking() |
|---|
| | | }) |
|---|
