Skip to content

phsl / admin

Go to a project
Commit 4549f8ed by YunaiV
Options

CRM：优化合同金额排行、回款金额排行

parent d6438943
Showing with 117 additions and 199 deletions
src/api/crm/bi/ranking.ts → src/api/crm/bi/rank.ts
import request from '@/config/axios' import request from '@/config/axios'
export interface BiContractRanKingRespVO { export interface BiRankRespVO {
price: number count: number
nickname: string nickname: string
deptName: string deptName: string
} }
export interface BiReceivablesRanKingRespVO {
price: number
nickname: string
deptName: string
}
export interface BiRankReqVO {
deptId: number
orderDate: Date[]
startTime: Date
endTime: Date
}
// 排行 API // 排行 API
export const RankingStatisticsApi = { export const RankApi = {
// 获得合同排行榜 // 获得合同排行榜
contractAmountRanking: (params: any) => { getContractPriceRank: (params: any) => {
return request.get({ return request.get({
url: '/crm/bi-ranking/contract-ranking', url: '/crm/bi-rank/get-contract-price-rank',
params params
}) })
}, },
// 获得回款排行榜 // 获得回款排行榜
receivablesAmountRanking: (params: any) => { getReceivablePriceRank: (params: any) => {
return request.get({ return request.get({
url: '/crm/bi-ranking/receivables-ranking', url: '/crm/bi-rank/get-receivable-price-rank',
params params
}) })
} }
......
src/store/modules/user.ts
...@@ -10,7 +10,9 @@ interface UserVO { ...@@ -10,7 +10,9 @@ interface UserVO {
id: number id: number
avatar: string avatar: string
nickname: string nickname: string
deptId: number
} }
interface UserInfoVO { interface UserInfoVO {
permissions: string[] permissions: string[]
roles: string[] roles: string[]
...@@ -26,7 +28,8 @@ export const useUserStore = defineStore('admin-user', { ...@@ -26,7 +28,8 @@ export const useUserStore = defineStore('admin-user', {
user: { user: {
id: 0, id: 0,
avatar: '', avatar: '',
nickname: '' nickname: '',
deptId: 0
} }
}), }),
getters: { getters: {
...@@ -73,7 +76,8 @@ export const useUserStore = defineStore('admin-user', { ...@@ -73,7 +76,8 @@ export const useUserStore = defineStore('admin-user', {
this.user = { this.user = {
id: 0, id: 0,
avatar: '', avatar: '',
nickname: '' nickname: '',
deptId: 0
} }
} }
} }
......
src/views/crm/bi/ranking/components/RankingContractStatistics.vue → src/views/crm/bi/rank/ContractPriceRank.vue
<!-- 合同金额排行 -->
<template> <template>
<!-- 柱状图 -->
<el-card shadow="never"> <el-card shadow="never">
<!-- 柱状图 --> <el-skeleton :loading="loading" animated>
<el-skeleton :loading="trendLoading" animated> <Echart :height="500" :options="echartsOption" />
<Echart :height="500" :options="barChartOptions" />
</el-skeleton> </el-skeleton>
</el-card> </el-card>
<!-- 排行列表 -->
<el-card shadow="never" class="mt-16px"> <el-card shadow="never" class="mt-16px">
<!-- 排行列表 -->
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<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 label="合同金额（元）" align="center" prop="price" min-width="200" /> <el-table-column
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 { RankingStatisticsApi, BiContractRanKingRespVO, BiRankReqVO } from '@/api/crm/bi/ranking' import { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts' import { EChartsOption } from 'echarts'
import { beginOfDay, endOfDay, formatDate } from '@/utils/formatTime' import { fenToYuanFormat } from '@/utils/formatter'
import { fenToYuan } from '@/utils'
/** 合同金额排行 */ import { clone } from 'unocss'
defineOptions({ name: 'RankingContractStatistics' })
const params = reactive({ defineOptions({ name: 'ContractPriceRank' })
deptId: undefined, const props = defineProps<{ queryParams: any }>() // 搜索参数
startTime: undefined,
endTime: undefined
})
const trendLoading = ref(true) // 状态加载中 const loading = ref(false) // 加载中
const loading = ref(false) // 列表的加载中 const list = ref<BiRankRespVO[]>([]) // 列表的数据
const list = ref<BiContractRanKingRespVO[]>([]) // 列表的数据
const queryParams = defineProps<{ queryParams: BiRankReqVO }>() // 搜索参数
/** 柱状图配置 横向 */ /** 柱状图配置：横向 */
const barChartOptions = reactive<EChartsOption>({ const echartsOption = reactive<EChartsOption>({
dataset: { dataset: {
dimensions: ['name', 'value'], dimensions: ['nickname', 'count'],
source: [] source: []
}, },
grid: { grid: {
left: 20, left: 20,
right: 20, right: 20,
bottom: 20, bottom: 20,
top: 80,
containLabel: true containLabel: true
}, },
legend: { legend: {
...@@ -53,16 +54,13 @@ const barChartOptions = reactive<EChartsOption>({ ...@@ -53,16 +54,13 @@ const barChartOptions = reactive<EChartsOption>({
series: [ series: [
{ {
name: '合同金额排行', name: '合同金额排行',
type: 'bar', type: 'bar'
smooth: true,
itemStyle: { color: '#B37FEB' }
} }
], ],
toolbox: { toolbox: {
feature: { feature: {
// 数据区域缩放
dataZoom: { dataZoom: {
yAxisIndex: false // Y轴不缩放 yAxisIndex: false // 数据区域缩放：Y 轴不缩放
}, },
brush: { brush: {
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮 type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
...@@ -74,70 +72,36 @@ const barChartOptions = reactive<EChartsOption>({ ...@@ -74,70 +72,36 @@ const barChartOptions = reactive<EChartsOption>({
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} },
valueFormatter: fenToYuan
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
name: '合同金额（元）', name: '合同金额（元）'
nameGap: 30,
nameTextStyle: {
color: '#666',
fontSize: 14
}
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
name: '签订人', name: '签订人'
nameGap: 30,
nameTextStyle: {
color: '#666',
fontSize: 14
},
axisLabel: {
formatter: (value: string) => {
return value
}
}
} }
}) as EChartsOption }) as EChartsOption
/** 获取合同金额排行 */ /** 获取合同金额排行 */
const getRankingContractStatistics = async () => { const loadData = async () => {
trendLoading.value = true // 1. 加载排行数据
loading.value = true loading.value = true
params.deptId = queryParams.queryParams.deptId const rankingList = await RankApi.getContractPriceRank(props.queryParams)
params.startTime = formatDate(beginOfDay(new Date(queryParams.queryParams.orderDate[0]))) // 2.1 更新 Echarts 数据
params.endTime = formatDate(endOfDay(new Date(queryParams.queryParams.orderDate[1]))) if (echartsOption.dataset && echartsOption.dataset['source']) {
const rankingList = await RankingStatisticsApi.contractAmountRanking(params) echartsOption.dataset['source'] = clone(rankingList).reverse()
let source = rankingList.map((item: BiContractRanKingRespVO) => {
return {
name: item.nickname,
value: item.price
}
})
// 反转数据源
source = source.reverse()
// 更新 Echarts 数据
if (barChartOptions.dataset && barChartOptions.dataset['source']) {
barChartOptions.dataset['source'] = source
} }
// 更新列表数据 // 2.2 更新列表数据
list.value = rankingList list.value = rankingList
trendLoading.value = false
loading.value = false loading.value = false
} }
defineExpose({ loadData })
/** 重新加载数据 */ /** 初始化 */
const reloadData = async () => {
await getRankingContractStatistics()
}
// 暴露 reloadData 函数
defineExpose({
reloadData
})
onMounted(() => { onMounted(() => {
getRankingContractStatistics() loadData()
}) })
</script> </script>
<style scoped lang="scss"></style>
src/views/crm/bi/ranking/components/RankingReceivablesStatistics.vue → src/views/crm/bi/rank/ReceivablePriceRank.vue
<!-- 回款金额排行 -->
<template> <template>
<!-- 柱状图 -->
<el-card shadow="never"> <el-card shadow="never">
<!-- 柱状图 --> <el-skeleton :loading="loading" animated>
<el-skeleton :loading="trendLoading" animated> <Echart :height="500" :options="echartsOption" />
<Echart :height="500" :options="barChartOptions" />
</el-skeleton> </el-skeleton>
</el-card> </el-card>
<!-- 排行列表 -->
<el-card shadow="never" class="mt-16px"> <el-card shadow="never" class="mt-16px">
<!-- 排行列表 -->
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<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 label="合同金额（元）" align="center" prop="price" min-width="200" /> <el-table-column
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 { RankingStatisticsApi, BiReceivablesRanKingRespVO, BiRankReqVO } from '@/api/crm/bi/ranking' import { RankApi, BiRankRespVO } from '@/api/crm/bi/rank'
import { EChartsOption } from 'echarts' import { EChartsOption } from 'echarts'
import { beginOfDay, endOfDay, formatDate } from '@/utils/formatTime' import { fenToYuanFormat } from '@/utils/formatter'
import { fenToYuan } from '@/utils'
/** 回款金额排行 */ import { clone } from 'unocss'
defineOptions({ name: 'RankingReceivablesStatistics' })
const params = reactive({ defineOptions({ name: 'ReceivablePriceRank' })
deptId: undefined, const props = defineProps<{ queryParams: any }>() // 搜索参数
startTime: undefined,
endTime: undefined
})
const trendLoading = ref(true) // 状态加载中 const loading = ref(false) // 加载中
const loading = ref(false) // 列表的加载中 const list = ref<BiRankRespVO[]>([]) // 列表的数据
const list = ref<BiReceivablesRanKingRespVO[]>([]) // 列表的数据
const queryParams = defineProps<{ queryParams: BiRankReqVO }>() // 搜索参数
/** 柱状图配置 横向 */ /** 柱状图配置：横向 */
const barChartOptions = reactive<EChartsOption>({ const echartsOption = reactive<EChartsOption>({
dataset: { dataset: {
dimensions: ['name', 'value'], dimensions: ['nickname', 'count'],
source: [] source: []
}, },
grid: { grid: {
left: 20, left: 20,
right: 20, right: 20,
bottom: 20, bottom: 20,
top: 80,
containLabel: true containLabel: true
}, },
legend: { legend: {
...@@ -53,16 +54,13 @@ const barChartOptions = reactive<EChartsOption>({ ...@@ -53,16 +54,13 @@ const barChartOptions = reactive<EChartsOption>({
series: [ series: [
{ {
name: '回款金额排行', name: '回款金额排行',
type: 'bar', type: 'bar'
smooth: true,
itemStyle: { color: '#B37FEB' }
} }
], ],
toolbox: { toolbox: {
feature: { feature: {
// 数据区域缩放
dataZoom: { dataZoom: {
yAxisIndex: false // Y轴不缩放 yAxisIndex: false // 数据区域缩放：Y 轴不缩放
}, },
brush: { brush: {
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮 type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
...@@ -74,70 +72,37 @@ const barChartOptions = reactive<EChartsOption>({ ...@@ -74,70 +72,37 @@ const barChartOptions = reactive<EChartsOption>({
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} },
valueFormatter: fenToYuan
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
name: '回款金额（元）', name: '回款金额（元）'
nameGap: 30,
nameTextStyle: {
color: '#666',
fontSize: 14
}
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
name: '签订人', name: '签订人',
nameGap: 30, nameGap: 30
nameTextStyle: {
color: '#666',
fontSize: 14
},
axisLabel: {
formatter: (value: string) => {
return value
}
}
} }
}) as EChartsOption }) as EChartsOption
/** 获取回款金额排行 */ /** 获取回款金额排行 */
const getRankingReceivablesStatistics = async () => { const loadData = async () => {
trendLoading.value = true // 1. 加载排行数据
loading.value = true loading.value = true
params.deptId = queryParams.queryParams.deptId const rankingList = await RankApi.getReceivablePriceRank(props.queryParams)
params.startTime = formatDate(beginOfDay(new Date(queryParams.queryParams.orderDate[0]))) // 2.1 更新 Echarts 数据
params.endTime = formatDate(endOfDay(new Date(queryParams.queryParams.orderDate[1]))) if (echartsOption.dataset && echartsOption.dataset['source']) {
const rankingList = await RankingStatisticsApi.receivablesAmountRanking(params) echartsOption.dataset['source'] = clone(rankingList).reverse()
let source = rankingList.map((item: BiReceivablesRanKingRespVO) => {
return {
name: item.nickname,
value: item.price
}
})
// 反转数据源
source = source.reverse()
// 更新 Echarts 数据
if (barChartOptions.dataset && barChartOptions.dataset['source']) {
barChartOptions.dataset['source'] = source
} }
// 更新列表数据 // 2.2 更新列表数据
list.value = rankingList list.value = rankingList
trendLoading.value = false
loading.value = false loading.value = false
} }
defineExpose({ loadData })
/** 重新加载数据 */ /** 初始化 */
const reloadData = async () => {
await getRankingReceivablesStatistics()
}
// 暴露 reloadData 函数
defineExpose({
reloadData
})
onMounted(() => { onMounted(() => {
getRankingReceivablesStatistics() loadData()
}) })
</script> </script>
<style scoped lang="scss"></style>
src/views/crm/bi/ranking/index.vue → src/views/crm/bi/rank/index.vue
<!-- BI 排行版 -->
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
...@@ -8,9 +9,9 @@ ...@@ -8,9 +9,9 @@
:inline="true" :inline="true"
label-width="68px" label-width="68px"
> >
<el-form-item label="时间" prop="orderDate"> <el-form-item label="时间范围" prop="orderDate">
<el-date-picker <el-date-picker
v-model="queryParams.orderDate" v-model="queryParams.times"
:shortcuts="defaultShortcuts" :shortcuts="defaultShortcuts"
class="!w-240px" class="!w-240px"
end-placeholder="结束日期" end-placeholder="结束日期"
...@@ -36,55 +37,52 @@ ...@@ -36,55 +37,52 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</ContentWrap> </ContentWrap>
<!-- 排行数据 -->
<el-col> <el-col>
<el-tabs v-model="activeTab"> <el-tabs v-model="activeTab">
<!-- 合同金额排行 --> <!-- 合同金额排行 -->
<el-tab-pane label="合同金额排行" name="contractAmountRanking"> <el-tab-pane label="合同金额排行" name="contractPriceRank" lazy>
<RankingContractStatistics :queryParams="queryParams" ref="rankingContractStatisticsRef" /> <ContractPriceRank :query-params="queryParams" ref="contractPriceRankRef" />
</el-tab-pane> </el-tab-pane>
<!-- 回款金额排行 --> <!-- 回款金额排行 -->
<el-tab-pane label="回款金额排行" name="receivablesRanKing" lazy> <el-tab-pane label="回款金额排行" name="receivablePriceRank" lazy>
<RankingReceivablesStatistics <ReceivablePriceRank :query-params="queryParams" ref="receivablePriceRankRef" />
:queryParams="queryParams"
ref="rankingReceivablesStatisticsRef"
/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import RankingContractStatistics from './components/RankingContractStatistics.vue' import ContractPriceRank from './ContractPriceRank.vue'
import ReceivablePriceRank from './ReceivablePriceRank.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'
import RankingReceivablesStatistics from '@/views/crm/bi/ranking/components/RankingReceivablesStatistics.vue' import { useUserStore } from '@/store/modules/user'
/** 排行榜 */ defineOptions({ name: 'CrmBiRank' })
defineOptions({ name: 'RankingStatistics' })
const queryParams = reactive({ const queryParams = reactive({
deptId: undefined, deptId: useUserStore().getUser.deptId,
//默认显示最近一周的数据 times: [
orderDate: [ // 默认显示最近一周的数据
formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))), formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))),
formatDate(endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))) formatDate(endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)))
], ]
startTime: undefined,
endTime: undefined
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const deptList = ref<Tree[]>([]) // 树形结构 const deptList = ref<Tree[]>([]) // 树形结构
const activeTab = ref('contractAmountRanking') const activeTab = ref('contractPriceRank')
const rankingContractStatisticsRef = ref() // RankingContractStatistics组件的引用 const contractPriceRankRef = ref() // ContractPriceRank 组件的引用
const rankingReceivablesStatisticsRef = ref() // RankingReceivablesStatistics组件的引用 const receivablePriceRankRef = ref() // ReceivablePriceRank 组件的引用
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { const handleQuery = () => {
if (activeTab.value === 'contractAmountRanking') { if (activeTab.value === 'contractPriceRank') {
rankingContractStatisticsRef.value.reloadData() contractPriceRankRef.value.loadData()
} else if (activeTab.value === 'receivablesRanKing') { } else if (activeTab.value === 'receivablePriceRank') {
rankingReceivablesStatisticsRef.value.reloadData() receivablePriceRankRef.value.loadData()
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment