Merge branch 'dev' of https://gitee.com/scholarli/yudao-ui-admin-vue3 into dev
# Conflicts: # src/views/crm/statistics/performance/components/ContractCountPerformance.vue # src/views/crm/statistics/performance/components/ContractPricePerformance.vue # src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue # src/views/crm/statistics/performance/index.vue
This commit is contained in:
commit
56543b8db4
@ -1,4 +1,4 @@
|
|||||||
<!-- 客户总量统计 -->
|
<!-- 员工业绩统计 -->
|
||||||
<template>
|
<template>
|
||||||
<!-- Echarts图 -->
|
<!-- Echarts图 -->
|
||||||
<el-card shadow="never">
|
<el-card shadow="never">
|
||||||
@ -7,18 +7,12 @@
|
|||||||
</el-skeleton>
|
</el-skeleton>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<!-- 统计列表 TODO @scholar:统计列表的展示不对 -->
|
<!-- 统计列表 -->
|
||||||
<el-card shadow="never" class="mt-16px">
|
<el-card shadow="never" class="mt-16px">
|
||||||
<el-table v-loading="loading" :data="tableData">
|
<el-table v-loading="loading" :data="tableData">
|
||||||
<el-table-column
|
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
|
||||||
v-for="item in columnsData"
|
|
||||||
:key="item.prop"
|
|
||||||
:label="item.label"
|
|
||||||
:prop="item.prop"
|
|
||||||
align="center"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ scope.row[item.prop] }}
|
{{scope.row[item.prop]}}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -29,7 +23,7 @@ import { EChartsOption } from 'echarts'
|
|||||||
import {
|
import {
|
||||||
StatisticsPerformanceApi,
|
StatisticsPerformanceApi,
|
||||||
StatisticsPerformanceRespVO
|
StatisticsPerformanceRespVO
|
||||||
} from '@/api/crm/statistics/performance'
|
} from "@/api/crm/statistics/performance"
|
||||||
|
|
||||||
defineOptions({ name: 'ContractCountPerformance' })
|
defineOptions({ name: 'ContractCountPerformance' })
|
||||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||||
@ -92,30 +86,29 @@ const echartsOption = reactive<EChartsOption>({
|
|||||||
type: 'shadow'
|
type: 'shadow'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [{
|
||||||
{
|
type: 'value',
|
||||||
type: 'value',
|
name: '数量(个)',
|
||||||
name: '数量(个)',
|
axisTick: {
|
||||||
axisTick: {
|
show: false
|
||||||
show: false
|
},
|
||||||
},
|
axisLabel: {
|
||||||
axisLabel: {
|
color: '#BDBDBD',
|
||||||
color: '#BDBDBD',
|
formatter: '{value}'
|
||||||
formatter: '{value}'
|
},
|
||||||
},
|
/** 坐标轴轴线相关设置 */
|
||||||
/** 坐标轴轴线相关设置 */
|
axisLine: {
|
||||||
axisLine: {
|
lineStyle: {
|
||||||
lineStyle: {
|
color: '#BDBDBD'
|
||||||
color: '#BDBDBD'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#e6e6e6'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#e6e6e6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '',
|
name: '',
|
||||||
@ -141,8 +134,7 @@ const echartsOption = reactive<EChartsOption>({
|
|||||||
color: '#e6e6e6'
|
color: '#e6e6e6'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}],
|
||||||
],
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name: '日期',
|
name: '日期',
|
||||||
@ -160,7 +152,9 @@ const loadData = async () => {
|
|||||||
|
|
||||||
// 2.1 更新 Echarts 数据
|
// 2.1 更新 Echarts 数据
|
||||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
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']) {
|
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||||
echartsOption.series[0]['data'] = performanceList.map(
|
echartsOption.series[0]['data'] = performanceList.map(
|
||||||
@ -171,49 +165,45 @@ const loadData = async () => {
|
|||||||
echartsOption.series[1]['data'] = performanceList.map(
|
echartsOption.series[1]['data'] = performanceList.map(
|
||||||
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
|
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
|
||||||
)
|
)
|
||||||
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
echartsOption.series[3]['data'] = performanceList.map(
|
||||||
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
|
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
|
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
|
||||||
echartsOption.series[2]['data'] = performanceList.map(
|
echartsOption.series[2]['data'] = performanceList.map(
|
||||||
(s: StatisticsPerformanceRespVO) => s.lastYearCount
|
(s: StatisticsPerformanceRespVO) => s.lastYearCount
|
||||||
)
|
)
|
||||||
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
echartsOption.series[4]['data'] = performanceList.map(
|
||||||
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
|
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2.2 更新列表数据
|
// 2.2 更新列表数据
|
||||||
list.value = performanceList
|
list.value = performanceList
|
||||||
|
convertListData()
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化数据
|
// 初始化数据
|
||||||
const columnsData = reactive([])
|
const columnsData = reactive([]);
|
||||||
const tableData = reactive([
|
const tableData = reactive([{title: '当月合同数量统计(个)'}, {title: '上月合同数量统计(个)'},
|
||||||
{ title: '当月合同数量统计(个)' },
|
{title: '去年当月合同数量统计(个)'}, {title: '同比增长率(%)'}, {title: '环比增长率(%)'}])
|
||||||
{ title: '上月合同数量统计(个)' },
|
|
||||||
{ title: '去年当月合同数量统计(个)' },
|
|
||||||
{ title: '同比增长率(%)' },
|
|
||||||
{ title: '环比增长率(%)' }
|
|
||||||
])
|
|
||||||
|
|
||||||
// 定义 init 方法
|
// 定义 convertListData 方法,数据行列转置,展示每月数据
|
||||||
const init = () => {
|
const convertListData = () => {
|
||||||
const columnObj = { label: '日期', prop: 'title' }
|
const columnObj = {label: '日期', prop: 'title'}
|
||||||
|
columnsData.splice(0, columnsData.length);//清空数组
|
||||||
columnsData.push(columnObj)
|
columnsData.push(columnObj)
|
||||||
|
|
||||||
list.value.forEach((item, index) => {
|
list.value.forEach((item, index) => {
|
||||||
const columnObj = { label: item.time, prop: 'prop' + index }
|
const columnObj = {label: item.time, prop: 'prop' + index}
|
||||||
columnsData.push(columnObj)
|
columnsData.push(columnObj)
|
||||||
tableData[0]['prop' + index] = item.currentMonthCount
|
tableData[0]['prop' + index] = item.currentMonthCount
|
||||||
tableData[1]['prop' + index] = item.lastMonthCount
|
tableData[1]['prop' + index] = item.lastMonthCount
|
||||||
tableData[2]['prop' + index] = item.lastYearCount
|
tableData[2]['prop' + index] = item.lastYearCount
|
||||||
tableData[3]['prop' + index] =
|
tableData[3]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
||||||
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
|
tableData[4]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
|
||||||
tableData[4]['prop' + index] =
|
|
||||||
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -222,6 +212,5 @@ defineExpose({ loadData })
|
|||||||
/** 初始化 */
|
/** 初始化 */
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await loadData()
|
await loadData()
|
||||||
init()
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<!-- 客户总量统计 -->
|
<!-- 员工业绩统计 -->
|
||||||
<template>
|
<template>
|
||||||
<!-- Echarts图 -->
|
<!-- Echarts图 -->
|
||||||
<el-card shadow="never">
|
<el-card shadow="never">
|
||||||
@ -7,18 +7,12 @@
|
|||||||
</el-skeleton>
|
</el-skeleton>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<!-- 统计列表 TODO @scholar:统计列表的展示不对 -->
|
<!-- 统计列表 -->
|
||||||
<el-card shadow="never" class="mt-16px">
|
<el-card shadow="never" class="mt-16px">
|
||||||
<el-table v-loading="loading" :data="tableData">
|
<el-table v-loading="loading" :data="tableData">
|
||||||
<el-table-column
|
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
|
||||||
v-for="item in columnsData"
|
|
||||||
:key="item.prop"
|
|
||||||
:label="item.label"
|
|
||||||
:prop="item.prop"
|
|
||||||
align="center"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ scope.row[item.prop] }}
|
{{scope.row[item.prop]}}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -29,7 +23,7 @@ import { EChartsOption } from 'echarts'
|
|||||||
import {
|
import {
|
||||||
StatisticsPerformanceApi,
|
StatisticsPerformanceApi,
|
||||||
StatisticsPerformanceRespVO
|
StatisticsPerformanceRespVO
|
||||||
} from '@/api/crm/statistics/performance'
|
} from "@/api/crm/statistics/performance"
|
||||||
|
|
||||||
defineOptions({ name: 'ContractPricePerformance' })
|
defineOptions({ name: 'ContractPricePerformance' })
|
||||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||||
@ -92,30 +86,29 @@ const echartsOption = reactive<EChartsOption>({
|
|||||||
type: 'shadow'
|
type: 'shadow'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [{
|
||||||
{
|
type: 'value',
|
||||||
type: 'value',
|
name: '金额(元)',
|
||||||
name: '金额(元)',
|
axisTick: {
|
||||||
axisTick: {
|
show: false
|
||||||
show: false
|
},
|
||||||
},
|
axisLabel: {
|
||||||
axisLabel: {
|
color: '#BDBDBD',
|
||||||
color: '#BDBDBD',
|
formatter: '{value}'
|
||||||
formatter: '{value}'
|
},
|
||||||
},
|
/** 坐标轴轴线相关设置 */
|
||||||
/** 坐标轴轴线相关设置 */
|
axisLine: {
|
||||||
axisLine: {
|
lineStyle: {
|
||||||
lineStyle: {
|
color: '#BDBDBD'
|
||||||
color: '#BDBDBD'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#e6e6e6'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#e6e6e6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '',
|
name: '',
|
||||||
@ -141,8 +134,7 @@ const echartsOption = reactive<EChartsOption>({
|
|||||||
color: '#e6e6e6'
|
color: '#e6e6e6'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}],
|
||||||
],
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name: '日期',
|
name: '日期',
|
||||||
@ -160,7 +152,9 @@ const loadData = async () => {
|
|||||||
|
|
||||||
// 2.1 更新 Echarts 数据
|
// 2.1 更新 Echarts 数据
|
||||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
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']) {
|
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||||
echartsOption.series[0]['data'] = performanceList.map(
|
echartsOption.series[0]['data'] = performanceList.map(
|
||||||
@ -171,49 +165,45 @@ const loadData = async () => {
|
|||||||
echartsOption.series[1]['data'] = performanceList.map(
|
echartsOption.series[1]['data'] = performanceList.map(
|
||||||
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
|
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
|
||||||
)
|
)
|
||||||
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
echartsOption.series[3]['data'] = performanceList.map(
|
||||||
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
|
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
|
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
|
||||||
echartsOption.series[2]['data'] = performanceList.map(
|
echartsOption.series[2]['data'] = performanceList.map(
|
||||||
(s: StatisticsPerformanceRespVO) => s.lastYearCount
|
(s: StatisticsPerformanceRespVO) => s.lastYearCount
|
||||||
)
|
)
|
||||||
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
echartsOption.series[4]['data'] = performanceList.map(
|
||||||
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
|
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2.2 更新列表数据
|
// 2.2 更新列表数据
|
||||||
list.value = performanceList
|
list.value = performanceList
|
||||||
|
convertListData()
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化数据
|
// 初始化数据
|
||||||
const columnsData = reactive([])
|
const columnsData = reactive([]);
|
||||||
const tableData = reactive([
|
const tableData = reactive([{title: '当月合同金额统计(元)'}, {title: '上月合同金额统计(元)'}, {title: '去年当月合同金额统计(元)'},
|
||||||
{ title: '当月合同金额统计(元)' },
|
{title: '同比增长率(%)'}, {title: '环比增长率(%)'}])
|
||||||
{ title: '上月合同金额统计(元)' },
|
|
||||||
{ title: '去年当月合同金额统计(元)' },
|
|
||||||
{ title: '同比增长率(%)' },
|
|
||||||
{ title: '环比增长率(%)' }
|
|
||||||
])
|
|
||||||
|
|
||||||
// 定义 init 方法
|
// 定义 init 方法
|
||||||
const init = () => {
|
const convertListData = () => {
|
||||||
const columnObj = { label: '日期', prop: 'title' }
|
const columnObj = {label: '日期', prop: 'title'}
|
||||||
|
columnsData.splice(0, columnsData.length)//清空数组
|
||||||
columnsData.push(columnObj)
|
columnsData.push(columnObj)
|
||||||
|
|
||||||
list.value.forEach((item, index) => {
|
list.value.forEach((item, index) => {
|
||||||
const columnObj = { label: item.time, prop: 'prop' + index }
|
const columnObj = {label: item.time, prop: 'prop' + index}
|
||||||
columnsData.push(columnObj)
|
columnsData.push(columnObj)
|
||||||
tableData[0]['prop' + index] = item.currentMonthCount
|
tableData[0]['prop' + index] = item.currentMonthCount
|
||||||
tableData[1]['prop' + index] = item.lastMonthCount
|
tableData[1]['prop' + index] = item.lastMonthCount
|
||||||
tableData[2]['prop' + index] = item.lastYearCount
|
tableData[2]['prop' + index] = item.lastYearCount
|
||||||
tableData[3]['prop' + index] =
|
tableData[3]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
||||||
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
|
tableData[4]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
|
||||||
tableData[4]['prop' + index] =
|
|
||||||
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -222,6 +212,5 @@ defineExpose({ loadData })
|
|||||||
/** 初始化 */
|
/** 初始化 */
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await loadData()
|
await loadData()
|
||||||
init()
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<!-- 客户总量统计 -->
|
<!-- 员工业绩统计 -->
|
||||||
<template>
|
<template>
|
||||||
<!-- Echarts图 -->
|
<!-- Echarts图 -->
|
||||||
<el-card shadow="never">
|
<el-card shadow="never">
|
||||||
@ -7,18 +7,12 @@
|
|||||||
</el-skeleton>
|
</el-skeleton>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<!-- 统计列表 TODO @scholar:统计列表的展示不对 -->
|
<!-- 统计列表 -->
|
||||||
<el-card shadow="never" class="mt-16px">
|
<el-card shadow="never" class="mt-16px">
|
||||||
<el-table v-loading="loading" :data="tableData">
|
<el-table v-loading="loading" :data="tableData">
|
||||||
<el-table-column
|
<el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
|
||||||
v-for="item in columnsData"
|
|
||||||
:key="item.prop"
|
|
||||||
:label="item.label"
|
|
||||||
:prop="item.prop"
|
|
||||||
align="center"
|
|
||||||
>
|
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
{{ scope.row[item.prop] }}
|
{{scope.row[item.prop]}}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -29,7 +23,7 @@ import { EChartsOption } from 'echarts'
|
|||||||
import {
|
import {
|
||||||
StatisticsPerformanceApi,
|
StatisticsPerformanceApi,
|
||||||
StatisticsPerformanceRespVO
|
StatisticsPerformanceRespVO
|
||||||
} from '@/api/crm/statistics/performance'
|
} from "@/api/crm/statistics/performance"
|
||||||
|
|
||||||
defineOptions({ name: 'ContractPricePerformance' })
|
defineOptions({ name: 'ContractPricePerformance' })
|
||||||
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
const props = defineProps<{ queryParams: any }>() // 搜索参数
|
||||||
@ -92,30 +86,29 @@ const echartsOption = reactive<EChartsOption>({
|
|||||||
type: 'shadow'
|
type: 'shadow'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [{
|
||||||
{
|
type: 'value',
|
||||||
type: 'value',
|
name: '金额(元)',
|
||||||
name: '金额(元)',
|
axisTick: {
|
||||||
axisTick: {
|
show: false
|
||||||
show: false
|
},
|
||||||
},
|
axisLabel: {
|
||||||
axisLabel: {
|
color: '#BDBDBD',
|
||||||
color: '#BDBDBD',
|
formatter: '{value}'
|
||||||
formatter: '{value}'
|
},
|
||||||
},
|
/** 坐标轴轴线相关设置 */
|
||||||
/** 坐标轴轴线相关设置 */
|
axisLine: {
|
||||||
axisLine: {
|
lineStyle: {
|
||||||
lineStyle: {
|
color: '#BDBDBD'
|
||||||
color: '#BDBDBD'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#e6e6e6'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#e6e6e6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '',
|
name: '',
|
||||||
@ -141,8 +134,7 @@ const echartsOption = reactive<EChartsOption>({
|
|||||||
color: '#e6e6e6'
|
color: '#e6e6e6'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}],
|
||||||
],
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name: '日期',
|
name: '日期',
|
||||||
@ -160,7 +152,9 @@ const loadData = async () => {
|
|||||||
|
|
||||||
// 2.1 更新 Echarts 数据
|
// 2.1 更新 Echarts 数据
|
||||||
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
|
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']) {
|
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
|
||||||
echartsOption.series[0]['data'] = performanceList.map(
|
echartsOption.series[0]['data'] = performanceList.map(
|
||||||
@ -171,49 +165,45 @@ const loadData = async () => {
|
|||||||
echartsOption.series[1]['data'] = performanceList.map(
|
echartsOption.series[1]['data'] = performanceList.map(
|
||||||
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
|
(s: StatisticsPerformanceRespVO) => s.lastMonthCount
|
||||||
)
|
)
|
||||||
echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
echartsOption.series[3]['data'] = performanceList.map(
|
||||||
s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
|
(s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[1]['data']) {
|
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[1]['data']) {
|
||||||
echartsOption.series[2]['data'] = performanceList.map(
|
echartsOption.series[2]['data'] = performanceList.map(
|
||||||
(s: StatisticsPerformanceRespVO) => s.lastYearCount
|
(s: StatisticsPerformanceRespVO) => s.lastYearCount
|
||||||
)
|
)
|
||||||
echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
|
echartsOption.series[4]['data'] = performanceList.map(
|
||||||
s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
|
(s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2.2 更新列表数据
|
// 2.2 更新列表数据
|
||||||
list.value = performanceList
|
list.value = performanceList
|
||||||
|
convertListData()
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化数据
|
// 初始化数据
|
||||||
const columnsData = reactive([])
|
const columnsData = reactive([]);
|
||||||
const tableData = reactive([
|
const tableData = reactive([{title: '当月回款金额统计(元)'}, {title: '上月回款金额统计(元)'},
|
||||||
{ title: '当月回款金额统计(元)' },
|
{title: '去年当月回款金额统计(元)'}, {title: '同比增长率(%)'}, {title: '环比增长率(%)'}]);
|
||||||
{ title: '上月回款金额统计(元)' },
|
|
||||||
{ title: '去年当月回款金额统计(元)' },
|
|
||||||
{ title: '同比增长率(%)' },
|
|
||||||
{ title: '环比增长率(%)' }
|
|
||||||
])
|
|
||||||
|
|
||||||
// 定义 init 方法
|
// 定义 init 方法
|
||||||
const init = () => {
|
const convertListData = () => {
|
||||||
const columnObj = { label: '日期', prop: 'title' }
|
const columnObj = {label: '日期', prop: 'title'}
|
||||||
|
columnsData.splice(0, columnsData.length)//清空数组
|
||||||
columnsData.push(columnObj)
|
columnsData.push(columnObj)
|
||||||
|
|
||||||
list.value.forEach((item, index) => {
|
list.value.forEach((item, index) => {
|
||||||
const columnObj = { label: item.time, prop: 'prop' + index }
|
const columnObj = {label: item.time, prop: 'prop' + index}
|
||||||
columnsData.push(columnObj)
|
columnsData.push(columnObj)
|
||||||
tableData[0]['prop' + index] = item.currentMonthCount
|
tableData[0]['prop' + index] = item.currentMonthCount
|
||||||
tableData[1]['prop' + index] = item.lastMonthCount
|
tableData[1]['prop' + index] = item.lastMonthCount
|
||||||
tableData[2]['prop' + index] = item.lastYearCount
|
tableData[2]['prop' + index] = item.lastYearCount
|
||||||
tableData[3]['prop' + index] =
|
tableData[3]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
||||||
item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
|
tableData[4]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
|
||||||
tableData[4]['prop' + index] =
|
|
||||||
item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -222,6 +212,5 @@ defineExpose({ loadData })
|
|||||||
/** 初始化 */
|
/** 初始化 */
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await loadData()
|
await loadData()
|
||||||
init()
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<!-- 数据统计 - 员工客户分析 -->
|
<!-- 数据统计 - 员工业绩分析 -->
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<!-- 搜索工作栏 -->
|
<!-- 搜索工作栏 -->
|
||||||
@ -9,16 +9,13 @@
|
|||||||
: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.times"
|
v-model="queryParams.times[0]"
|
||||||
:shortcuts="defaultShortcuts"
|
|
||||||
class="!w-240px"
|
class="!w-240px"
|
||||||
end-placeholder="结束日期"
|
type="year"
|
||||||
start-placeholder="开始日期"
|
value-format="YYYY"
|
||||||
type="daterange"
|
:default-time="[new Date().getFullYear()]"
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="归属部门" prop="deptId">
|
<el-form-item label="归属部门" prop="deptId">
|
||||||
@ -62,11 +59,8 @@
|
|||||||
<ContractPricePerformance :query-params="queryParams" ref="ContractPricePerformanceRef" />
|
<ContractPricePerformance :query-params="queryParams" ref="ContractPricePerformanceRef" />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<!-- 员工回款金额统计 -->
|
<!-- 员工回款金额统计 -->
|
||||||
<el-tab-pane label="员工回款金额统计" name="followupType" lazy>
|
<el-tab-pane label="员工回款金额统计" name="ReceivablePricePerformance" lazy>
|
||||||
<ReceivablePricePerformance
|
<ReceivablePricePerformance :query-params="queryParams" ref="ReceivablePricePerformanceRef" />
|
||||||
:query-params="queryParams"
|
|
||||||
ref="ReceivablePricePerformanceRef"
|
|
||||||
/>
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -82,15 +76,14 @@ import ContractCountPerformance from './components/ContractCountPerformance.vue'
|
|||||||
import ContractPricePerformance from './components/ContractPricePerformance.vue'
|
import ContractPricePerformance from './components/ContractPricePerformance.vue'
|
||||||
import ReceivablePricePerformance from './components/ReceivablePricePerformance.vue'
|
import ReceivablePricePerformance from './components/ReceivablePricePerformance.vue'
|
||||||
|
|
||||||
defineOptions({ name: 'CrmStatisticsPerformance' })
|
defineOptions({ name: 'CrmStatisticsCustomer' })
|
||||||
|
|
||||||
const queryParams = reactive({
|
const queryParams = reactive({
|
||||||
deptId: useUserStore().getUser.deptId,
|
deptId: useUserStore().getUser.deptId,
|
||||||
userId: undefined,
|
userId: undefined,
|
||||||
times: [
|
times: [
|
||||||
// 默认显示最近一周的数据
|
// 默认显示当年的数据
|
||||||
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)))
|
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -114,7 +107,18 @@ const ContractPricePerformanceRef = ref()
|
|||||||
const ReceivablePricePerformanceRef = ref()
|
const ReceivablePricePerformanceRef = ref()
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
/** 搜索按钮操作 */
|
||||||
const handleQuery = () => {
|
const handleQuery = () => {
|
||||||
|
// 从 queryParams.times[0] 中获取到了年份
|
||||||
|
const selectYear = parseInt(queryParams.times[0])
|
||||||
|
|
||||||
|
// 创建一个新的 Date 对象,设置为指定的年份的第一天
|
||||||
|
const fullDate = new Date(selectYear, 0, 1, 0, 0, 0)
|
||||||
|
|
||||||
|
// 将完整的日期时间格式化为需要的字符串形式,比如 2004-01-01 00:00:00
|
||||||
|
queryParams.times[0] = `${fullDate.getFullYear()}-${
|
||||||
|
String(fullDate.getMonth() + 1).padStart(2, '0')
|
||||||
|
}-${String(fullDate.getDate()).padStart(2, '0')} ${String(fullDate.getHours()).padStart(2, '0')}:${String(fullDate.getMinutes()).padStart(2, '0')}:${String(fullDate.getSeconds()).padStart(2, '0')}`
|
||||||
|
|
||||||
switch (activeTab.value) {
|
switch (activeTab.value) {
|
||||||
case 'ContractCountPerformance':
|
case 'ContractCountPerformance':
|
||||||
ContractCountPerformanceRef.value?.loadData?.()
|
ContractCountPerformanceRef.value?.loadData?.()
|
||||||
|
Loading…
Reference in New Issue
Block a user