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
2024-04-23 23:17:15 +08:00 · 2024-04-23 23:17:15 +08:00 · 56543b8db4
commit 56543b8db4
parent f5d013187b f4dd1bed63
4 changed files with 159 additions and 188 deletions
--- a/src/views/crm/statistics/performance/components/ContractCountPerformance.vue
+++ b/src/views/crm/statistics/performance/components/ContractCountPerformance.vue
@ -1,4 +1,4 @@
-<!-- 客户总量统计 -->
+<!-- 员工业绩统计 -->
 <template>
  <!-- Echarts图 -->
  <el-card shadow="never">
@ -7,18 +7,12 @@
    </el-skeleton>
  </el-card>

-  <!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
+  <!-- 统计列表 -->
  <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>
@ -29,7 +23,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 }>() // 搜索参数
@ -92,8 +86,7 @@ const echartsOption = reactive<EChartsOption>({
      type: 'shadow'
    }
  },
-  yAxis: [
-    {
+  yAxis: [{
    type: 'value',
    name: '数量（个）',
    axisTick: {
@ -141,8 +134,7 @@ const echartsOption = reactive<EChartsOption>({
          color: '#e6e6e6'
        }
      }
-    }
-  ],
+    }],
  xAxis: {
    type: 'category',
    name: '日期',
@ -160,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(
@ -171,49 +165,45 @@ 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*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) * 100).toFixed(2) : 'NULL'
+    echartsOption.series[4]['data'] = performanceList.map(
+      (s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
    )
  }

  // 2.2 更新列表数据
  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 init = () => {
-  const columnObj = { label: '日期', prop: 'title' }
+// 定义 convertListData 方法，数据行列转置，展示每月数据
+const convertListData = () => {
+  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.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
-    tableData[4]['prop' + index] =
-      item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
+    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'
  })
 }

@ -222,6 +212,5 @@ defineExpose({ loadData })
 /** 初始化 */
 onMounted(async () => {
  await loadData()
-  init()
 })
 </script>
--- a/src/views/crm/statistics/performance/components/ContractPricePerformance.vue
+++ b/src/views/crm/statistics/performance/components/ContractPricePerformance.vue
@ -1,4 +1,4 @@
-<!-- 客户总量统计 -->
+<!-- 员工业绩统计 -->
 <template>
  <!-- Echarts图 -->
  <el-card shadow="never">
@ -7,18 +7,12 @@
    </el-skeleton>
  </el-card>

-  <!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
+  <!-- 统计列表 -->
  <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>
@ -29,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 }>() // 搜索参数
@ -92,8 +86,7 @@ const echartsOption = reactive<EChartsOption>({
      type: 'shadow'
    }
  },
-  yAxis: [
-    {
+  yAxis: [{
    type: 'value',
    name: '金额（元）',
    axisTick: {
@ -141,8 +134,7 @@ const echartsOption = reactive<EChartsOption>({
          color: '#e6e6e6'
        }
      }
-    }
-  ],
+    }],
  xAxis: {
    type: 'category',
    name: '日期',
@ -160,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(
@ -171,49 +165,45 @@ 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*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) * 100).toFixed(2) : 'NULL'
+    echartsOption.series[4]['data'] = performanceList.map(
+      (s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
    )
  }

  // 2.2 更新列表数据
  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 init = () => {
-  const columnObj = { label: '日期', prop: 'title' }
+const convertListData = () => {
+  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.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
-    tableData[4]['prop' + index] =
-      item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
+    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'
  })
 }

@ -222,6 +212,5 @@ defineExpose({ loadData })
 /** 初始化 */
 onMounted(async () => {
  await loadData()
-  init()
 })
 </script>
--- a/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
+++ b/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
@ -1,4 +1,4 @@
-<!-- 客户总量统计 -->
+<!-- 员工业绩统计 -->
 <template>
  <!-- Echarts图 -->
  <el-card shadow="never">
@ -7,18 +7,12 @@
    </el-skeleton>
  </el-card>

-  <!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
+  <!-- 统计列表 -->
  <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>
@ -29,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 }>() // 搜索参数
@ -92,8 +86,7 @@ const echartsOption = reactive<EChartsOption>({
      type: 'shadow'
    }
  },
-  yAxis: [
-    {
+  yAxis: [{
    type: 'value',
    name: '金额（元）',
    axisTick: {
@ -141,8 +134,7 @@ const echartsOption = reactive<EChartsOption>({
          color: '#e6e6e6'
        }
      }
-    }
-  ],
+    }],
  xAxis: {
    type: 'category',
    name: '日期',
@ -160,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(
@ -171,49 +165,45 @@ 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*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*100).toFixed(2) : 'NULL'
    )
  }

  // 2.2 更新列表数据
  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 init = () => {
-  const columnObj = { label: '日期', prop: 'title' }
+const convertListData = () => {
+  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.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
-    tableData[4]['prop' + index] =
-      item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
+    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'
  })
 }

@ -222,6 +212,5 @@ defineExpose({ loadData })
 /** 初始化 */
 onMounted(async () => {
  await loadData()
-  init()
 })
 </script>
--- a/src/views/crm/statistics/performance/index.vue
+++ b/src/views/crm/statistics/performance/index.vue
@ -1,4 +1,4 @@
-<!-- 数据统计 - 员工客户分析 -->
+<!-- 数据统计 - 员工业绩分析 -->
 <template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
@ -9,16 +9,13 @@
      :inline="true"
      label-width="68px"
    >
-      <el-form-item label="时间范围" prop="orderDate">
+      <el-form-item label="选择年份" prop="orderDate">
        <el-date-picker
-          v-model="queryParams.times"
-          :shortcuts="defaultShortcuts"
+          v-model="queryParams.times[0]"
          class="!w-240px"
-          end-placeholder="结束日期"
-          start-placeholder="开始日期"
-          type="daterange"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          type="year"
+          value-format="YYYY"
+          :default-time="[new Date().getFullYear()]"
        />
      </el-form-item>
      <el-form-item label="归属部门" prop="deptId">
@ -62,11 +59,8 @@
        <ContractPricePerformance :query-params="queryParams" ref="ContractPricePerformanceRef" />
      </el-tab-pane>
      <!-- 员工回款金额统计 -->
-      <el-tab-pane label="员工回款金额统计" name="followupType" lazy>
-        <ReceivablePricePerformance
-          :query-params="queryParams"
-          ref="ReceivablePricePerformanceRef"
-        />
+      <el-tab-pane label="员工回款金额统计" name="ReceivablePricePerformance" lazy>
+        <ReceivablePricePerformance :query-params="queryParams" ref="ReceivablePricePerformanceRef" />
      </el-tab-pane>
    </el-tabs>
  </el-col>
@ -82,15 +76,14 @@ import ContractCountPerformance from './components/ContractCountPerformance.vue'
 import ContractPricePerformance from './components/ContractPricePerformance.vue'
 import ReceivablePricePerformance from './components/ReceivablePricePerformance.vue'

-defineOptions({ name: 'CrmStatisticsPerformance' })
+defineOptions({ name: 'CrmStatisticsCustomer' })

 const queryParams = reactive({
  deptId: useUserStore().getUser.deptId,
  userId: undefined,
  times: [
-    // 默认显示最近一周的数据
-    formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))),
-    formatDate(endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)))
+    // 默认显示当年的数据
+    formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)))
  ]
 })

@ -115,6 +108,17 @@ const ReceivablePricePerformanceRef = ref()

 /** 搜索按钮操作 */
 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) {
    case 'ContractCountPerformance':
      ContractCountPerformanceRef.value?.loadData?.()