新增:CRM 商业智能,其他排名接口

(cherry picked from commit 3cdcd67a6a)
This commit is contained in:
安浩浩 2024-02-04 23:55:26 +08:00 committed by shizhong
parent 818dc4d8e3
commit 1c034ca575
10 changed files with 700 additions and 26 deletions

View File

@ -21,5 +21,47 @@ export const RankApi = {
url: '/crm/bi-rank/get-receivable-price-rank', url: '/crm/bi-rank/get-receivable-price-rank',
params params
}) })
},
// 签约合同排行
getContractCountRank: (params: any) => {
return request.get({
url: '/crm/bi-rank/get-contract-count-rank',
params
})
},
// 产品销量排行
getProductSalesRank: (params: any) => {
return request.get({
url: '/crm/bi-rank/get-product-sales-rank',
params
})
},
// 新增客户数排行
getCustomerCountRank: (params: any) => {
return request.get({
url: '/crm/bi-rank/get-customer-count-rank',
params
})
},
// 新增联系人数排行
getContactsCountRank: (params: any) => {
return request.get({
url: '/crm/bi-rank/get-contacts-count-rank',
params
})
},
// 跟进次数排行
getFollowCountRank: (params: any) => {
return request.get({
url: '/crm/bi-rank/get-follow-count-rank',
params
})
},
// 跟进客户数排行
getFollowCustomerCountRank: (params: any) => {
return request.get({
url: '/crm/bi-rank/get-follow-customer-count-rank',
params
})
} }
} }

View File

@ -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 { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts'
import { clone } from 'unocss'
defineOptions({ name: 'ContactsCountRank' })
const props = defineProps<{ queryParams: any }>() //
const loading = ref(false) //
const list = ref<BiRankRespVO[]>([]) //
/** 柱状图配置:横向 */
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 // Y
},
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 RankApi.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>

View File

@ -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 { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts'
import { clone } from 'unocss'
defineOptions({ name: 'ContractCountRank' })
const props = defineProps<{ queryParams: any }>() //
const loading = ref(false) //
const list = ref<BiRankRespVO[]>([]) //
/** 柱状图配置:横向 */
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 // Y
},
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 RankApi.getContractCountRank(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>

View File

@ -13,21 +13,13 @@
<el-table-column label="公司排名" align="center" type="index" width="80" /> <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="nickname" min-width="200" />
<el-table-column label="部门" align="center" prop="deptName" min-width="200" /> <el-table-column label="部门" align="center" prop="deptName" min-width="200" />
<el-table-column <el-table-column label="合同金额(元)" align="center" prop="count" min-width="200" />
label="合同金额(元)"
align="center"
prop="count"
min-width="200"
:formatter="fenToYuanFormat"
/>
</el-table> </el-table>
</el-card> </el-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { RankApi, BiRankRespVO } from '@/api/crm/bi/rank' import { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts' import { EChartsOption } from 'echarts'
import { fenToYuanFormat } from '@/utils/formatter'
import { fenToYuan } from '@/utils'
import { clone } from 'unocss' import { clone } from 'unocss'
defineOptions({ name: 'ContractPriceRank' }) defineOptions({ name: 'ContractPriceRank' })
@ -72,8 +64,7 @@ const echartsOption = reactive<EChartsOption>({
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
}, }
valueFormatter: fenToYuan
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',

View File

@ -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 { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts'
import { clone } from 'unocss'
defineOptions({ name: 'CustomerCountRank' })
const props = defineProps<{ queryParams: any }>() //
const loading = ref(false) //
const list = ref<BiRankRespVO[]>([]) //
/** 柱状图配置:横向 */
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 // Y
},
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 RankApi.getCustomerCountRank(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>

View File

@ -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 { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts'
import { clone } from 'unocss'
defineOptions({ name: 'FollowCountRank' })
const props = defineProps<{ queryParams: any }>() //
const loading = ref(false) //
const list = ref<BiRankRespVO[]>([]) //
/** 柱状图配置:横向 */
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 // Y
},
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 RankApi.getFollowCountRank(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>

View File

@ -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 { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts'
import { clone } from 'unocss'
defineOptions({ name: 'FollowCustomerCountRank' })
const props = defineProps<{ queryParams: any }>() //
const loading = ref(false) //
const list = ref<BiRankRespVO[]>([]) //
/** 柱状图配置:横向 */
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 // Y
},
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 RankApi.getFollowCustomerCountRank(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>

View File

@ -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 { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts'
import { clone } from 'unocss'
defineOptions({ name: 'ProductSalesRank' })
const props = defineProps<{ queryParams: any }>() //
const loading = ref(false) //
const list = ref<BiRankRespVO[]>([]) //
/** 柱状图配置:横向 */
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 // Y
},
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 RankApi.getProductSalesRank(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>

View File

@ -13,21 +13,13 @@
<el-table-column label="公司排名" align="center" type="index" width="80" /> <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="nickname" min-width="200" />
<el-table-column label="部门" align="center" prop="deptName" min-width="200" /> <el-table-column label="部门" align="center" prop="deptName" min-width="200" />
<el-table-column <el-table-column label="回款金额(元)" align="center" prop="count" min-width="200" />
label="回款金额(元)"
align="center"
prop="count"
min-width="200"
:formatter="fenToYuanFormat"
/>
</el-table> </el-table>
</el-card> </el-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { RankApi, BiRankRespVO } from '@/api/crm/bi/rank' import { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts' import { EChartsOption } from 'echarts'
import { fenToYuanFormat } from '@/utils/formatter'
import { fenToYuan } from '@/utils'
import { clone } from 'unocss' import { clone } from 'unocss'
defineOptions({ name: 'ReceivablePriceRank' }) defineOptions({ name: 'ReceivablePriceRank' })
@ -72,8 +64,7 @@ const echartsOption = reactive<EChartsOption>({
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
}, }
valueFormatter: fenToYuan
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',

View File

@ -49,12 +49,42 @@
<el-tab-pane label="回款金额排行" name="receivablePriceRank" lazy> <el-tab-pane label="回款金额排行" name="receivablePriceRank" lazy>
<ReceivablePriceRank :query-params="queryParams" ref="receivablePriceRankRef" /> <ReceivablePriceRank :query-params="queryParams" ref="receivablePriceRankRef" />
</el-tab-pane> </el-tab-pane>
<!-- 签约合同排行 -->
<el-tab-pane label="签约合同排行" name="contractCountRank" lazy>
<ContractCountRank :query-params="queryParams" ref="contractCountRankRef" />
</el-tab-pane>
<!-- 产品销量排行 -->
<el-tab-pane label="产品销量排行" name="productSalesRank" lazy>
<ProductSalesRank :query-params="queryParams" ref="productSalesRankRef" />
</el-tab-pane>
<!-- 新增客户数排行 -->
<el-tab-pane label="新增客户数排行" name="customerCountRank" lazy>
<CustomerCountRank :query-params="queryParams" ref="customerCountRankRef" />
</el-tab-pane>
<!-- 新增联系人数排行 -->
<el-tab-pane label="新增联系人数排行" name="contactsCountRank" lazy>
<ContactsCountRank :query-params="queryParams" ref="contactsCountRankRef" />
</el-tab-pane>
<!-- 跟进次数排行 -->
<el-tab-pane label="跟进次数排行" name="followCountRank" lazy>
<FollowCountRank :query-params="queryParams" ref="followCountRankRef" />
</el-tab-pane>
<!-- 跟进客户数排行 -->
<el-tab-pane label="跟进客户数排行" name="followCustomerCountRank" lazy>
<FollowCustomerCountRank :query-params="queryParams" ref="followCustomerCountRankRef" />
</el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ContractPriceRank from './ContractPriceRank.vue' import ContractPriceRank from './ContractPriceRank.vue'
import ReceivablePriceRank from './ReceivablePriceRank.vue' import ReceivablePriceRank from './ReceivablePriceRank.vue'
import ContractCountRank from './ContractCountRank.vue'
import ProductSalesRank from './ProductSalesRank.vue'
import CustomerCountRank from './CustomerCountRank.vue'
import ContactsCountRank from './ContactsCountRank.vue'
import FollowCountRank from './FollowCountRank.vue'
import FollowCustomerCountRank from './FollowCustomerCountRank.vue'
import { defaultProps, handleTree } from '@/utils/tree' import { defaultProps, handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept' import * as DeptApi from '@/api/system/dept'
import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/formatTime' import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/formatTime'
@ -76,16 +106,48 @@ const deptList = ref<Tree[]>([]) // 树形结构
const activeTab = ref('contractPriceRank') const activeTab = ref('contractPriceRank')
const contractPriceRankRef = ref() // ContractPriceRank const contractPriceRankRef = ref() // ContractPriceRank
const receivablePriceRankRef = ref() // ReceivablePriceRank const receivablePriceRankRef = ref() // ReceivablePriceRank
const contractCountRankRef = ref() // ContractCountRank
const productSalesRankRef = ref() // ProductSalesRank
const customerCountRankRef = ref() // CustomerCountRank
const contactsCountRankRef = ref() // ContactsCountRank
const followCountRankRef = ref() // FollowCountRank
const followCustomerCountRankRef = ref() // FollowCustomerCountRank
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { const handleQuery = () => {
if (activeTab.value === 'contractPriceRank') { switch (activeTab.value) {
contractPriceRankRef.value.loadData() case 'contractPriceRank':
} else if (activeTab.value === 'receivablePriceRank') { contractPriceRankRef.value?.loadData?.()
receivablePriceRankRef.value.loadData() break
case 'receivablePriceRank':
receivablePriceRankRef.value?.loadData?.()
break
case 'contractCountRank':
contractCountRankRef.value?.loadData?.()
break
case 'productSalesRank':
productSalesRankRef.value?.loadData?.()
break
case 'customerCountRank':
customerCountRankRef.value?.loadData?.()
break
case 'contactsCountRank':
contactsCountRankRef.value?.loadData?.()
break
case 'followCountRank':
followCountRankRef.value?.loadData?.()
break
case 'followCustomerCountRank':
followCustomerCountRankRef.value?.loadData?.()
break
} }
} }
// activeTab tab
watch(activeTab, () => {
handleQuery()
})
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = () => { const resetQuery = () => {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()