Skip to content

phsl / admin

Go to a project
Commit 73e85160 by YunaiV
Options

【代码评审】CRM：优化员工业绩统计的实现

parent 8ba6095b
Showing with 197 additions and 143 deletions
src/views/crm/statistics/performance/components/ContractCountPerformance.vue
......@@ -10,9 +10,15 @@
<!-- 统计列表 -->
<el-card shadow="never" class="mt-16px">
<el-table v-loading="loading" :data="tableData">
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
<el-table-column
v-for="item in columnsData"
:key="item.prop"
:label="item.label"
:prop="item.prop"
align="center"
>
<template #default="scope">
{{scope.row[item.prop]}}
{{ scope.row[item.prop] }}
</template>
</el-table-column>
</el-table>
......@@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
import {
StatisticsPerformanceApi,
StatisticsPerformanceRespVO
} from "@/api/crm/statistics/performance"
} from '@/api/crm/statistics/performance'
defineOptions({ name: 'ContractCountPerformance' })
const props = defineProps<{ queryParams: any }>() // 搜索参数
......@@ -86,29 +92,30 @@ const echartsOption = reactive<EChartsOption>({
type: 'shadow'
}
},
yAxis: [{
type: 'value',
name: '数量（个）',
axisTick: {
show: false
},
axisLabel: {
color: '#BDBDBD',
formatter: '{value}'
},
/** 坐标轴轴线相关设置 */
axisLine: {
lineStyle: {
color: '#BDBDBD'
yAxis: [
{
type: 'value',
name: '数量（个）',
axisTick: {
show: false
},
axisLabel: {
color: '#BDBDBD',
formatter: '{value}'
},
/** 坐标轴轴线相关设置 */
axisLine: {
lineStyle: {
color: '#BDBDBD'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#e6e6e6'
}
}
},
splitLine: {
show: true,
lineStyle: {
color: '#e6e6e6'
}
}
},
{
type: 'value',
name: '',
......@@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
color: '#e6e6e6'
}
}
}],
}
],
xAxis: {
type: 'category',
name: '日期',
......@@ -152,9 +160,7 @@ const loadData = async () => {
// 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.time
)
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
}
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = performanceList.map(
......@@ -165,16 +171,20 @@ const loadData = async () => {
echartsOption.series[1]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
)
echartsOption.series[3]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? ((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount*100).toFixed(2) : 'NULL'
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastMonthCount !== 0
? (((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount) * 100).toFixed(2)
: 'NULL'
)
}
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
echartsOption.series[2]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastYearCount
)
echartsOption.series[4]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? ((s.currentMonthCount - s.lastYearCount) / s.lastYearCount*100).toFixed(2) : 'NULL'
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastYearCount !== 0
? (((s.currentMonthCount - s.lastYearCount) / s.lastYearCount) * 100).toFixed(2)
: 'NULL'
)
}
......@@ -182,28 +192,38 @@ const loadData = async () => {
list.value = performanceList
convertListData()
loading.value = false
}
// 初始化数据
const columnsData = reactive([]);
const tableData = reactive([{title: '当月合同数量统计（个）'}, {title: '上月合同数量统计（个）'},
{title: '去年当月合同数量统计（个）'}, {title: '环比增长率（%）'}, {title: '同比增长率（%）'}])
const columnsData = reactive([])
const tableData = reactive([
{ title: '当月合同数量统计（个）' },
{ title: '上月合同数量统计（个）' },
{ title: '去年当月合同数量统计（个）' },
{ title: '环比增长率（%）' },
{ title: '同比增长率（%）' }
])
// 定义 convertListData 方法，数据行列转置，展示每月数据
const convertListData = () => {
const columnObj = {label: '日期', prop: 'title'}
columnsData.splice(0, columnsData.length);//清空数组
const columnObj = { label: '日期', prop: 'title' }
columnsData.splice(0, columnsData.length) //清空数组
columnsData.push(columnObj)
list.value.forEach((item, index) => {
const columnObj = {label: item.time, prop: 'prop' + index}
const columnObj = { label: item.time, prop: 'prop' + index }
columnsData.push(columnObj)
tableData[0]['prop' + index] = item.currentMonthCount
tableData[1]['prop' + index] = item.lastMonthCount
tableData[2]['prop' + index] = item.lastYearCount
tableData[3]['prop' + index] = item.lastMonthCount !== 0 ? ((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount * 100).toFixed(2) : 'NULL'
tableData[4]['prop' + index] = item.lastYearCount !== 0 ? ((item.currentMonthCount - item.lastYearCount) / item.lastYearCount * 100).toFixed(2) : 'NULL'
tableData[3]['prop' + index] =
item.lastMonthCount !== 0
? (((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount) * 100).toFixed(2)
: 'NULL'
tableData[4]['prop' + index] =
item.lastYearCount !== 0
? (((item.currentMonthCount - item.lastYearCount) / item.lastYearCount) * 100).toFixed(2)
: 'NULL'
})
}
......
src/views/crm/statistics/performance/components/ContractPricePerformance.vue
......@@ -10,9 +10,15 @@
<!-- 统计列表 -->
<el-card shadow="never" class="mt-16px">
<el-table v-loading="loading" :data="tableData">
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
<el-table-column
v-for="item in columnsData"
:key="item.prop"
:label="item.label"
:prop="item.prop"
align="center"
>
<template #default="scope">
{{scope.row[item.prop]}}
{{ scope.row[item.prop] }}
</template>
</el-table-column>
</el-table>
......@@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
import {
StatisticsPerformanceApi,
StatisticsPerformanceRespVO
} from "@/api/crm/statistics/performance"
} from '@/api/crm/statistics/performance'
defineOptions({ name: 'ContractPricePerformance' })
const props = defineProps<{ queryParams: any }>() // 搜索参数
......@@ -86,29 +92,30 @@ const echartsOption = reactive<EChartsOption>({
type: 'shadow'
}
},
yAxis: [{
type: 'value',
name: '金额（元）',
axisTick: {
show: false
},
axisLabel: {
color: '#BDBDBD',
formatter: '{value}'
},
/** 坐标轴轴线相关设置 */
axisLine: {
lineStyle: {
color: '#BDBDBD'
yAxis: [
{
type: 'value',
name: '金额（元）',
axisTick: {
show: false
},
axisLabel: {
color: '#BDBDBD',
formatter: '{value}'
},
/** 坐标轴轴线相关设置 */
axisLine: {
lineStyle: {
color: '#BDBDBD'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#e6e6e6'
}
}
},
splitLine: {
show: true,
lineStyle: {
color: '#e6e6e6'
}
}
},
{
type: 'value',
name: '',
......@@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
color: '#e6e6e6'
}
}
}],
}
],
xAxis: {
type: 'category',
name: '日期',
......@@ -152,9 +160,7 @@ const loadData = async () => {
// 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.time
)
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
}
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = performanceList.map(
......@@ -165,16 +171,20 @@ const loadData = async () => {
echartsOption.series[1]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
)
echartsOption.series[3]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? ((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount*100).toFixed(2) : 'NULL'
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastMonthCount !== 0
? (((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount) * 100).toFixed(2)
: 'NULL'
)
}
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
echartsOption.series[2]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastYearCount
)
echartsOption.series[4]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? ((s.currentMonthCount - s.lastYearCount) / s.lastYearCount*100).toFixed(2) : 'NULL'
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastYearCount !== 0
? (((s.currentMonthCount - s.lastYearCount) / s.lastYearCount) * 100).toFixed(2)
: 'NULL'
)
}
......@@ -182,28 +192,38 @@ const loadData = async () => {
list.value = performanceList
convertListData()
loading.value = false
}
// 初始化数据
const columnsData = reactive([]);
const tableData = reactive([{title: '当月合同金额统计（元）'}, {title: '上月合同金额统计（元）'}, {title: '去年当月合同金额统计（元）'},
{title: '环比增长率（%）'}, {title: '同比增长率（%）'}])
const columnsData = reactive([])
const tableData = reactive([
{ title: '当月合同金额统计（元）' },
{ title: '上月合同金额统计（元）' },
{ title: '去年当月合同金额统计（元）' },
{ title: '环比增长率（%）' },
{ title: '同比增长率（%）' }
])
// 定义 init 方法
const convertListData = () => {
const columnObj = {label: '日期', prop: 'title'}
columnsData.splice(0, columnsData.length)//清空数组
const columnObj = { label: '日期', prop: 'title' }
columnsData.splice(0, columnsData.length) //清空数组
columnsData.push(columnObj)
list.value.forEach((item, index) => {
const columnObj = {label: item.time, prop: 'prop' + index}
const columnObj = { label: item.time, prop: 'prop' + index }
columnsData.push(columnObj)
tableData[0]['prop' + index] = item.currentMonthCount
tableData[1]['prop' + index] = item.lastMonthCount
tableData[2]['prop' + index] = item.lastYearCount
tableData[3]['prop' + index] = item.lastMonthCount !== 0 ? ((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount*100).toFixed(2) : 'NULL'
tableData[4]['prop' + index] = item.lastYearCount !== 0 ? ((item.currentMonthCount - item.lastYearCount) / item.lastYearCount*100).toFixed(2) : 'NULL'
tableData[3]['prop' + index] =
item.lastMonthCount !== 0
? (((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount) * 100).toFixed(2)
: 'NULL'
tableData[4]['prop' + index] =
item.lastYearCount !== 0
? (((item.currentMonthCount - item.lastYearCount) / item.lastYearCount) * 100).toFixed(2)
: 'NULL'
})
}
......
src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
......@@ -10,9 +10,15 @@
<!-- 统计列表 -->
<el-card shadow="never" class="mt-16px">
<el-table v-loading="loading" :data="tableData">
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
<el-table-column
v-for="item in columnsData"
:key="item.prop"
:label="item.label"
:prop="item.prop"
align="center"
>
<template #default="scope">
{{scope.row[item.prop]}}
{{ scope.row[item.prop] }}
</template>
</el-table-column>
</el-table>
......@@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
import {
StatisticsPerformanceApi,
StatisticsPerformanceRespVO
} from "@/api/crm/statistics/performance"
} from '@/api/crm/statistics/performance'
defineOptions({ name: 'ContractPricePerformance' })
const props = defineProps<{ queryParams: any }>() // 搜索参数
......@@ -86,29 +92,30 @@ const echartsOption = reactive<EChartsOption>({
type: 'shadow'
}
},
yAxis: [{
type: 'value',
name: '金额（元）',
axisTick: {
show: false
},
axisLabel: {
color: '#BDBDBD',
formatter: '{value}'
},
/** 坐标轴轴线相关设置 */
axisLine: {
lineStyle: {
color: '#BDBDBD'
yAxis: [
{
type: 'value',
name: '金额（元）',
axisTick: {
show: false
},
axisLabel: {
color: '#BDBDBD',
formatter: '{value}'
},
/** 坐标轴轴线相关设置 */
axisLine: {
lineStyle: {
color: '#BDBDBD'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#e6e6e6'
}
}
},
splitLine: {
show: true,
lineStyle: {
color: '#e6e6e6'
}
}
},
{
type: 'value',
name: '',
......@@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
color: '#e6e6e6'
}
}
}],
}
],
xAxis: {
type: 'category',
name: '日期',
......@@ -152,9 +160,7 @@ const loadData = async () => {
// 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.time
)
echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
}
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = performanceList.map(
......@@ -165,16 +171,20 @@ const loadData = async () => {
echartsOption.series[1]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
)
echartsOption.series[3]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? ((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount*100).toFixed(2) : 'NULL'
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastMonthCount !== 0
? (((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount) * 100).toFixed(2)
: 'NULL'
)
}
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[1]['data']) {
echartsOption.series[2]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastYearCount
)
echartsOption.series[4]['data'] = performanceList.map(
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? ((s.currentMonthCount - s.lastYearCount) / s.lastYearCount*100).toFixed(2) : 'NULL'
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
s.lastYearCount !== 0
? (((s.currentMonthCount - s.lastYearCount) / s.lastYearCount) * 100).toFixed(2)
: 'NULL'
)
}
......@@ -182,28 +192,38 @@ const loadData = async () => {
list.value = performanceList
convertListData()
loading.value = false
}
// 初始化数据
const columnsData = reactive([]);
const tableData = reactive([{title: '当月回款金额统计（元）'}, {title: '上月回款金额统计（元）'},
{title: '去年当月回款金额统计（元）'}, {title: '环比增长率（%）'}, {title: '同比增长率（%）'}]);
const columnsData = reactive([])
const tableData = reactive([
{ title: '当月回款金额统计（元）' },
{ title: '上月回款金额统计（元）' },
{ title: '去年当月回款金额统计（元）' },
{ title: '环比增长率（%）' },
{ title: '同比增长率（%）' }
])
// 定义 init 方法
const convertListData = () => {
const columnObj = {label: '日期', prop: 'title'}
columnsData.splice(0, columnsData.length)//清空数组
const columnObj = { label: '日期', prop: 'title' }
columnsData.splice(0, columnsData.length) //清空数组
columnsData.push(columnObj)
list.value.forEach((item, index) => {
const columnObj = {label: item.time, prop: 'prop' + index}
const columnObj = { label: item.time, prop: 'prop' + index }
columnsData.push(columnObj)
tableData[0]['prop' + index] = item.currentMonthCount
tableData[1]['prop' + index] = item.lastMonthCount
tableData[2]['prop' + index] = item.lastYearCount
tableData[3]['prop' + index] = item.lastMonthCount !== 0 ? ((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount*100).toFixed(2) : 'NULL'
tableData[4]['prop' + index] = item.lastYearCount !== 0 ? ((item.currentMonthCount - item.lastYearCount) / item.lastYearCount*100).toFixed(2) : 'NULL'
tableData[3]['prop' + index] =
item.lastMonthCount !== 0
? (((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount) * 100).toFixed(2)
: 'NULL'
tableData[4]['prop' + index] =
item.lastYearCount !== 0
? (((item.currentMonthCount - item.lastYearCount) / item.lastYearCount) * 100).toFixed(2)
: 'NULL'
})
}
......
src/views/crm/statistics/performance/index.vue
......@@ -60,7 +60,10 @@
</el-tab-pane>
<!-- 员工回款金额统计 -->
<el-tab-pane label="员工回款金额统计" name="ReceivablePricePerformance" lazy>
<ReceivablePricePerformance :query-params="queryParams" ref="ReceivablePricePerformanceRef" />
<ReceivablePricePerformance
:query-params="queryParams"
ref="ReceivablePricePerformanceRef"
/>
</el-tab-pane>
</el-tabs>
</el-col>
......@@ -70,12 +73,11 @@
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 { beginOfDay, endOfDay, formatDate } from '@/utils/formatTime'
import { defaultProps, handleTree } from '@/utils/tree'
import ContractCountPerformance from './components/ContractCountPerformance.vue'
import ContractPricePerformance from './components/ContractPricePerformance.vue'
import ReceivablePricePerformance from './components/ReceivablePricePerformance.vue'
import dayjs from "dayjs"
defineOptions({ name: 'CrmStatisticsCustomer' })
......@@ -83,8 +85,8 @@ const queryParams = reactive({
deptId: useUserStore().getUser.deptId,
userId: undefined,
times: [
formatDate(beginOfDay(new Date(new Date().getFullYear(),0, 1, 0, 0, 0))), // 默认查询当年的数据，比如2024年，起始时间2024-01-01 00:00:00
formatDate(beginOfDay(new Date(new Date().getFullYear()+1,0, 1, 0, 0, 0))) //查询时间范围结束时间，2025-01-01 00:00:00
formatDate(beginOfDay(new Date(new Date().getFullYear(), 0, 1))),
formatDate(endOfDay(new Date(new Date().getFullYear(), 11, 31)))
]
})
......@@ -100,26 +102,18 @@ const userListByDeptId = computed(() =>
// 活跃标签
const activeTab = ref('ContractCountPerformance')
// 1.员工合同数量统计
const ContractCountPerformanceRef = ref()
// 2.员工合同金额统计
const ContractPricePerformanceRef = ref()
// 3.员工回款金额统计
const ReceivablePricePerformanceRef = ref()
const ContractCountPerformanceRef = ref() // 员工合同数量统计
const ContractPricePerformanceRef = ref() // 员工合同金额统计
const ReceivablePricePerformanceRef = ref() // 员工回款金额统计
/** 搜索按钮操作 */
const handleQuery = () => {
const handleQuery = () => {
// 从 queryParams.times[0] 中获取到了年份
const selectYear = parseInt(queryParams.times[0])
queryParams.times[0] = formatDate(beginOfDay(new Date(selectYear, 0, 1)))
queryParams.times[1] = formatDate(endOfDay(new Date(selectYear, 11, 31)))
// 创建一个新的 Date 对象，设置为指定的年份的第一天，以及第二年的第一天，以时间段的方式，将查询时间传递给后端
const fullDate = new Date(selectYear, 0, 1, 0, 0, 0) //比如2024年，起始时间2024-01-01 00:00:00
const nextFullDate = new Date(selectYear+1, 0, 1, 0, 0, 0) //查询时间范围结束时间，2025-01-01 00:00:00
// 将完整的日期时间格式化为需要的字符串形式，比如 2004-01-01 00:00:00
queryParams.times[0] = dayjs(fullDate).format('YYYY-MM-DD HH:mm:ss')
queryParams.times[1] = dayjs(nextFullDate).format('YYYY-MM-DD HH:mm:ss')
// 执行查询
switch (activeTab.value) {
case 'ContractCountPerformance':
ContractCountPerformanceRef.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