|
@@ -10,16 +10,9 @@
|
|
|
<!-- 统计列表 -->
|
|
|
<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"
|
|
|
- >
|
|
|
- <!-- TODO @scholar:IDEA 爆红的处理 -->
|
|
|
+ <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>
|
|
@@ -30,7 +23,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 }>() // 搜索参数
|
|
@@ -64,13 +57,13 @@ const echartsOption = reactive<EChartsOption>({
|
|
|
data: []
|
|
|
},
|
|
|
{
|
|
|
- name: '同比增长率(%)',
|
|
|
+ name: '环比增长率(%)',
|
|
|
type: 'line',
|
|
|
yAxisIndex: 1,
|
|
|
data: []
|
|
|
},
|
|
|
{
|
|
|
- name: '环比增长率(%)',
|
|
|
+ name: '同比增长率(%)',
|
|
|
type: 'line',
|
|
|
yAxisIndex: 1,
|
|
|
data: []
|
|
@@ -93,35 +86,33 @@ const echartsOption = reactive<EChartsOption>({
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: '金额(元)',
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: '#BDBDBD',
|
|
|
- formatter: '{value}'
|
|
|
- },
|
|
|
- /** 坐标轴轴线相关设置 */
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#BDBDBD'
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#e6e6e6'
|
|
|
- }
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ name: '金额(元)',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#BDBDBD',
|
|
|
+ formatter: '{value}'
|
|
|
+ },
|
|
|
+ /** 坐标轴轴线相关设置 */
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#BDBDBD'
|
|
|
}
|
|
|
},
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e6e6e6'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
{
|
|
|
type: 'value',
|
|
|
name: '',
|
|
|
axisTick: {
|
|
|
- // TODO @scholar:IDEA 爆红的处理
|
|
|
alignWithLabel: true,
|
|
|
lineStyle: {
|
|
|
width: 0
|
|
@@ -143,8 +134,7 @@ const echartsOption = reactive<EChartsOption>({
|
|
|
color: '#e6e6e6'
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- ],
|
|
|
+ }],
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
name: '日期',
|
|
@@ -162,7 +152,9 @@ 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(
|
|
@@ -173,16 +165,16 @@ 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) * 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) * 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'
|
|
|
)
|
|
|
}
|
|
|
|
|
@@ -190,36 +182,28 @@ const loadData = async () => {
|
|
|
list.value = performanceList
|
|
|
convertListData()
|
|
|
loading.value = false
|
|
|
+
|
|
|
}
|
|
|
|
|
|
// 初始化数据
|
|
|
-// TODO @scholar:加个 as any[],避免 idea 爆红
|
|
|
-const columnsData = reactive([] as any[])
|
|
|
-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
|
|
|
- // TODO @scholar:百分比,使用 erpCalculatePercentage 直接计算;如果是 0,则返回 0,统一就好哈;
|
|
|
- tableData[3]['prop' + index] =
|
|
|
- item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
|
|
|
- tableData[4]['prop' + index] =
|
|
|
- item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).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'
|
|
|
})
|
|
|
}
|
|
|
|