From 73e851602420bac1dbf34103ecce0c1de3b5b1a6 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Sat, 11 May 2024 22:30:44 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84=E5=AE=A1?= =?UTF-8?q?=E3=80=91CRM=EF=BC=9A=E4=BC=98=E5=8C=96=E5=91=98=E5=B7=A5?= =?UTF-8?q?=E4=B8=9A=E7=BB=A9=E7=BB=9F=E8=AE=A1=E7=9A=84=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ContractCountPerformance.vue | 102 +++++++++++------- .../components/ContractPricePerformance.vue | 102 +++++++++++------- .../components/ReceivablePricePerformance.vue | 102 +++++++++++------- .../crm/statistics/performance/index.vue | 34 +++--- 4 files changed, 197 insertions(+), 143 deletions(-) diff --git a/src/views/crm/statistics/performance/components/ContractCountPerformance.vue b/src/views/crm/statistics/performance/components/ContractCountPerformance.vue index 5dc4d9e7..fa5a897b 100644 --- a/src/views/crm/statistics/performance/components/ContractCountPerformance.vue +++ b/src/views/crm/statistics/performance/components/ContractCountPerformance.vue @@ -10,9 +10,15 @@ - + @@ -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({ 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({ 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' }) } diff --git a/src/views/crm/statistics/performance/components/ContractPricePerformance.vue b/src/views/crm/statistics/performance/components/ContractPricePerformance.vue index 0c33dc22..dd52d9fb 100644 --- a/src/views/crm/statistics/performance/components/ContractPricePerformance.vue +++ b/src/views/crm/statistics/performance/components/ContractPricePerformance.vue @@ -10,9 +10,15 @@ - + @@ -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({ 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({ 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' }) } diff --git a/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue b/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue index aa3f5b19..169f074b 100644 --- a/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue +++ b/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue @@ -10,9 +10,15 @@ - + @@ -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({ 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({ 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' }) } diff --git a/src/views/crm/statistics/performance/index.vue b/src/views/crm/statistics/performance/index.vue index 469569af..822afec9 100644 --- a/src/views/crm/statistics/performance/index.vue +++ b/src/views/crm/statistics/performance/index.vue @@ -60,7 +60,10 @@ - + @@ -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?.()