From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/crm/statistics/rank/components/ContactCountRank.vue | 98 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 98 insertions(+), 0 deletions(-)
diff --git a/src/views/crm/statistics/rank/components/ContactCountRank.vue b/src/views/crm/statistics/rank/components/ContactCountRank.vue
new file mode 100644
index 0000000..5edc118
--- /dev/null
+++ b/src/views/crm/statistics/rank/components/ContactCountRank.vue
@@ -0,0 +1,98 @@
+<!-- 鏂板鑱旂郴浜烘暟鎺掕 -->
+<template>
+ <!-- 鏌辩姸鍥� -->
+ <el-card shadow="never">
+ <el-skeleton :loading="loading" animated>
+ <Echart :height="500" :options="echartsOption" />
+ </el-skeleton>
+ </el-card>
+
+ <!-- 鎺掕鍒楄〃 -->
+ <el-card shadow="never" class="mt-16px">
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="鍏徃鎺掑悕" align="center" type="index" width="80" />
+ <el-table-column label="鍒涘缓浜�" align="center" prop="nickname" min-width="200" />
+ <el-table-column label="閮ㄩ棬" align="center" prop="deptName" min-width="200" />
+ <el-table-column label="鏂板鑱旂郴浜烘暟锛堜釜锛�" align="center" prop="count" min-width="200" />
+ </el-table>
+ </el-card>
+</template>
+<script setup lang="ts">
+import { StatisticsRankApi, StatisticsRankRespVO } from '@/api/crm/statistics/rank'
+import { EChartsOption } from 'echarts'
+import { clone } from 'lodash-es'
+
+defineOptions({ name: 'ContactCountRank' })
+const props = defineProps<{ queryParams: any }>() // 鎼滅储鍙傛暟
+
+const loading = ref(false) // 鍔犺浇涓�
+const list = ref<StatisticsRankRespVO[]>([]) // 鍒楄〃鐨勬暟鎹�
+
+/** 鏌辩姸鍥鹃厤缃細妯悜 */
+const echartsOption = reactive<EChartsOption>({
+ dataset: {
+ dimensions: ['nickname', 'count'],
+ source: []
+ },
+ grid: {
+ left: 20,
+ right: 20,
+ bottom: 20,
+ containLabel: true
+ },
+ legend: {
+ top: 50
+ },
+ series: [
+ {
+ name: '鏂板鑱旂郴浜烘暟鎺掕',
+ type: 'bar'
+ }
+ ],
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: false // 鏁版嵁鍖哄煙缂╂斁锛歒 杞翠笉缂╂斁
+ },
+ brush: {
+ type: ['lineX', 'clear'] // 鍖哄煙缂╂斁鎸夐挳銆佽繕鍘熸寜閽�
+ },
+ saveAsImage: { show: true, name: '鏂板鑱旂郴浜烘暟鎺掕' } // 淇濆瓨涓哄浘鐗�
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ xAxis: {
+ type: 'value',
+ name: '鏂板鑱旂郴浜烘暟锛堜釜锛�'
+ },
+ yAxis: {
+ type: 'category',
+ name: '鍒涘缓浜�'
+ }
+}) as EChartsOption
+
+/** 鑾峰彇鏂板鑱旂郴浜烘暟鎺掕 */
+const loadData = async () => {
+ // 1. 鍔犺浇鎺掕鏁版嵁
+ loading.value = true
+ const rankingList = await StatisticsRankApi.getContactsCountRank(props.queryParams)
+ // 2.1 鏇存柊 Echarts 鏁版嵁
+ if (echartsOption.dataset && echartsOption.dataset['source']) {
+ echartsOption.dataset['source'] = clone(rankingList).reverse()
+ }
+ // 2.2 鏇存柊鍒楄〃鏁版嵁
+ list.value = rankingList
+ loading.value = false
+}
+defineExpose({ loadData })
+
+/** 鍒濆鍖� */
+onMounted(() => {
+ loadData()
+})
+</script>
--
Gitblit v1.8.0