云
4 天以前 fe6ba6220f32276f147a16c41e7a69c2a18e5012
src/views/reportAnalysis/dataDashboard/components/basic/right-bottom.vue
@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="客户金额贡献排名" />
    <PanelHeader title="客户贡献排名" />
    <div class="panel-item-customers">
      <div class="switch-container">
        <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
@@ -22,7 +22,7 @@
</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'
@@ -33,7 +33,15 @@
  height: '100%',
}
const dateType = ref(1) // 1=周 2=月 3=季度
// 复用本组件的页面可指定初始周期,不传按「周」展示
const props = defineProps({
  defaultDateType: {
    type: Number,
    default: 1, // 1=周 2=月 3=季度
  },
})
const dateType = ref(props.defaultDateType)
// 飞机图标 SVG path(与 right-top 一致)
const aircraft =
@@ -104,7 +112,7 @@
  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
  },
@@ -308,6 +316,13 @@
  fetchCustomerRanking()
}
const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
if (dataDashboardRefreshTick) {
  watch(dataDashboardRefreshTick, () => {
    fetchCustomerRanking()
  })
}
onMounted(() => {
  fetchCustomerRanking()
})