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/funnel/index.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 171 insertions(+), 0 deletions(-)
diff --git a/src/views/crm/statistics/funnel/index.vue b/src/views/crm/statistics/funnel/index.vue
new file mode 100644
index 0000000..804cb49
--- /dev/null
+++ b/src/views/crm/statistics/funnel/index.vue
@@ -0,0 +1,171 @@
+<!-- 鏁版嵁缁熻 - 瀹㈡埛鐢诲儚 -->
+<template>
+ <ContentWrap>
+ <!-- 鎼滅储宸ヤ綔鏍� -->
+ <el-form
+ ref="queryFormRef"
+ :inline="true"
+ :model="queryParams"
+ class="-mb-15px"
+ label-width="68px"
+ >
+ <el-form-item label="鏃堕棿鑼冨洿" prop="orderDate">
+ <el-date-picker
+ v-model="queryParams.times"
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+ :shortcuts="defaultShortcuts"
+ class="!w-240px"
+ end-placeholder="缁撴潫鏃ユ湡"
+ start-placeholder="寮�濮嬫棩鏈�"
+ type="daterange"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ @change="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="鏃堕棿闂撮殧" prop="interval">
+ <el-select
+ v-model="queryParams.interval"
+ class="!w-240px"
+ placeholder="闂撮殧绫诲瀷"
+ @change="handleQuery"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.DATE_INTERVAL)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="褰掑睘閮ㄩ棬" prop="deptId">
+ <el-tree-select
+ v-model="queryParams.deptId"
+ :data="deptList"
+ :props="defaultProps"
+ check-strictly
+ class="!w-240px"
+ node-key="id"
+ placeholder="璇烽�夋嫨褰掑睘閮ㄩ棬"
+ @change="(queryParams.userId = undefined), handleQuery()"
+ />
+ </el-form-item>
+ <el-form-item label="鍛樺伐" prop="userId">
+ <el-select
+ v-model="queryParams.userId"
+ class="!w-240px"
+ clearable
+ placeholder="鍛樺伐"
+ @change="handleQuery"
+ >
+ <el-option
+ v-for="(user, index) in userListByDeptId"
+ :key="index"
+ :label="user.nickname"
+ :value="user.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="handleQuery">
+ <Icon class="mr-5px" icon="ep:search" />
+ 鏌ヨ
+ </el-button>
+ <el-button @click="resetQuery">
+ <Icon class="mr-5px" icon="ep:refresh" />
+ 閲嶇疆
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 瀹㈡埛缁熻 -->
+ <el-col>
+ <el-tabs v-model="activeTab">
+ <el-tab-pane label="閿�鍞紡鏂楀垎鏋�" lazy name="funnelRef">
+ <FunnelBusiness ref="funnelRef" :query-params="queryParams" />
+ </el-tab-pane>
+ <el-tab-pane label="鏂板鍟嗘満鍒嗘瀽" lazy name="businessSummaryRef">
+ <BusinessSummary ref="businessSummaryRef" :query-params="queryParams" />
+ </el-tab-pane>
+ <el-tab-pane label="鍟嗘満杞寲鐜囧垎鏋�" lazy name="businessInversionRateSummaryRef">
+ <BusinessInversionRateSummary
+ ref="businessInversionRateSummaryRef"
+ :query-params="queryParams"
+ />
+ </el-tab-pane>
+ </el-tabs>
+ </el-col>
+</template>
+
+<script lang="ts" setup>
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+import { useUserStore } from '@/store/modules/user'
+import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/formatTime'
+import { defaultProps, handleTree } from '@/utils/tree'
+import FunnelBusiness from './components/FunnelBusiness.vue'
+import BusinessSummary from './components/BusinessSummary.vue'
+import BusinessInversionRateSummary from './components/BusinessInversionRateSummary.vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
+defineOptions({ name: 'CrmStatisticsFunnel' })
+
+const queryParams = reactive({
+ interval: 2, // WEEK, 鍛�
+ deptId: useUserStore().getUser.deptId,
+ userId: undefined,
+ times: [
+ // 榛樿鏄剧ず鏈�杩戜竴鍛ㄧ殑鏁版嵁
+ formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))),
+ formatDate(endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)))
+ ]
+})
+
+const queryFormRef = ref() // 鎼滅储鐨勮〃鍗�
+const deptList = ref<Tree[]>([]) // 閮ㄩ棬鏍戝舰缁撴瀯
+const userList = ref<UserApi.UserVO[]>([]) // 鍏ㄩ噺鐢ㄦ埛娓呭崟
+
+/** 鏍规嵁閫夋嫨鐨勯儴闂ㄧ瓫閫夊憳宸ユ竻鍗� */
+const userListByDeptId = computed(() =>
+ queryParams.deptId
+ ? userList.value.filter((u: UserApi.UserVO) => u.deptId === queryParams.deptId)
+ : []
+)
+
+const activeTab = ref('funnelRef') // 娲昏穬鏍囩
+const funnelRef = ref() // 閿�鍞紡鏂�
+const businessSummaryRef = ref() // 鏂板鍟嗘満鍒嗘瀽
+const businessInversionRateSummaryRef = ref() // 鍟嗘満杞寲鐜囧垎鏋�
+
+/** 鎼滅储鎸夐挳鎿嶄綔 */
+const handleQuery = () => {
+ switch (activeTab.value) {
+ case 'funnelRef':
+ funnelRef.value?.loadData?.()
+ break
+ case 'businessSummaryRef':
+ businessSummaryRef.value?.loadData?.()
+ break
+ case 'businessInversionRateSummaryRef':
+ businessInversionRateSummaryRef.value?.loadData?.()
+ break
+ }
+}
+
+/** 褰� activeTab 鏀瑰彉鏃讹紝鍒锋柊褰撳墠娲诲姩鐨� tab */
+watch(activeTab, () => {
+ handleQuery()
+})
+
+/** 閲嶇疆鎸夐挳鎿嶄綔 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 鍒濆鍖� */
+onMounted(async () => {
+ deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+ userList.value = handleTree(await UserApi.getSimpleUserList())
+})
+</script>
--
Gitblit v1.8.0