From d3b4a360ddf90e382a2e47e52be005c91774bcc8 Mon Sep 17 00:00:00 2001
From: qsh <>
Date: Tue, 5 Nov 2024 09:41:16 +0800
Subject: [PATCH] sc

---
 src/api/home/reportSaler.js                   |   8 +
 .../Home/Comp/DialogSalerReportDetail.vue     | 271 +++++++++---------
 src/views/Home/SalesReport.vue                |  97 +++----
 3 files changed, 193 insertions(+), 183 deletions(-)
 create mode 100644 src/api/home/reportSaler.js

diff --git a/src/api/home/reportSaler.js b/src/api/home/reportSaler.js
new file mode 100644
index 0000000..aec09e1
--- /dev/null
+++ b/src/api/home/reportSaler.js
@@ -0,0 +1,8 @@
+import request from '@/config/axios'
+export const getInfo = async (data) => {
+  return await request.post({ url: '/admin-api/crm/sch-clue/sale/report/detail', data })
+}
+
+export const getList = async (data) => {
+  return await request.post({ url: '/admin-api/crm/sch-clue/sale/report', data })
+}
diff --git a/src/views/Home/Comp/DialogSalerReportDetail.vue b/src/views/Home/Comp/DialogSalerReportDetail.vue
index 12e6560..44c893d 100644
--- a/src/views/Home/Comp/DialogSalerReportDetail.vue
+++ b/src/views/Home/Comp/DialogSalerReportDetail.vue
@@ -1,14 +1,15 @@
 <template>
-  <Dialog title="详情" v-model="dialogVisible" width="1000px">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1000px">
     <el-form :model="searchForm" label-width="0" inline>
       <el-form-item>
         <el-date-picker
-          v-model="searchForm.period"
+          v-model="searchForm.consultTime"
           type="daterange"
           format="YYYY-MM-DD"
           value-format="YYYY-MM-DD"
           start-placeholder="选择日期"
           end-placeholder="选择日期"
+          :clearable="false"
         />
       </el-form-item>
       <el-form-item>
@@ -17,17 +18,19 @@
           :data="props.sourceOptions"
           :props="defaultProps"
           check-strictly
+          clearable
           node-key="sourceId"
           placeholder="请选择渠道"
+          @change="sourceChange"
         />
       </el-form-item>
       <el-form-item>
-        <el-select v-model="searchForm.cartype" placeholder="选择驾照类型" clearable>
+        <el-select v-model="searchForm.licenseType" placeholder="选择驾照类型" clearable>
           <el-option
-            v-for="item in props.cartypeOptions"
-            :key="item.value"
+            v-for="item in props.licenseTypeOptions"
+            :key="item.label"
             :label="item.label"
-            :value="item.value"
+            :value="item.label"
           />
         </el-select>
       </el-form-item>
@@ -42,17 +45,17 @@
       <el-tab-pane label="详细数据" :name="1">
         <el-table v-loading="loading" :data="tableList" border stripe>
           <el-table-column prop="sourceName" label="渠道名称" width="100" fixed="left" />
-          <el-table-column prop="" label="新线索数" sortable />
-          <el-table-column prop="" label="成交数" sortable />
-          <el-table-column prop="" label="成交率" sortable />
-          <el-table-column prop="" label="成交周期" sortable />
-          <el-table-column prop="" label="毛利/单" sortable />
-          <el-table-column prop="" label="支出/单" sortable />
-          <el-table-column prop="" label="线索成本/条" sortable />
-          <el-table-column prop="" label="净利润/单" sortable />
-          <el-table-column label="总线索成本" prop="" sortable min-width="100" />
-          <el-table-column label="总支出" prop="" sortable min-width="100" />
-          <el-table-column label="总利润" prop="" sortable min-width="100" />
+          <el-table-column prop="newClueNumber" label="新线索数" sortable />
+          <el-table-column prop="signNumber" label="成交数" sortable />
+          <el-table-column prop="signRate" label="成交率" sortable />
+          <el-table-column prop="averageSignPeriod" label="成交周期" sortable />
+          <el-table-column prop="grossProfitOfSingleSign" label="毛利/单" sortable />
+          <el-table-column prop="payPriceOfSingleSign" label="支出/单" sortable />
+          <el-table-column prop="costOfSingleClue" label="线索成本/条" sortable />
+          <el-table-column prop="netProfitOfSingleSign" label="净利润/单" sortable />
+          <el-table-column label="总线索成本" prop="clueCostTotal" sortable min-width="100" />
+          <el-table-column label="总支出" prop="payPriceTotal" sortable min-width="100" />
+          <el-table-column label="总利润" prop="profitTotal" sortable min-width="100" />
         </el-table>
       </el-tab-pane>
       <el-tab-pane label="图表展示" :name="2" lazy>
@@ -82,11 +85,12 @@
 
 <script setup name="DialogSalerReportDetail">
 import { set } from 'lodash-es'
-import * as reportApi from '@/api/home/reportSignRate'
+import * as reportApi from '@/api/home/reportSaler'
+import { getIntDictOptions } from '@/utils/dict'
 import { removeNullField } from '@/utils'
 
 const props = defineProps({
-  cartypeOptions: {
+  licenseTypeOptions: {
     type: Array,
     default: () => []
   },
@@ -103,18 +107,30 @@ const defaultProps = {
   isLeaf: 'leaf'
 }
 
+const showChannel = ref([])
+const intentionOptions = getIntDictOptions('intention_state')
+
+const channelArr = computed(() => {
+  if (searchForm.value.sourceId) {
+    let arr =
+      props.sourceOptions.find((it) => it.sourceId == searchForm.value.sourceId)?.children || []
+    return arr.map((it) => it.sourceName)
+  } else {
+    return props.sourceOptions.map((it) => it.sourceName)
+  }
+})
+
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const loading = ref(false)
 const searchForm = ref({})
 
 const showPane = ref(1)
-const showChannel = ref([])
 
 function handleReset() {
   searchForm.value = {
     nickname: undefined,
-    period: []
+    consultTime: []
   }
 }
 
@@ -122,12 +138,11 @@ function handleReset() {
 const open = async (info, queryInfo) => {
   showPane.value = 1
   dialogVisible.value = true
-  dialogTitle.value = `销售详情-【${info.nickname}】`
-  searchForm.value.period = queryInfo.period
-  searchForm.value.cartype = queryInfo.cartype
-  showChannel.value = [...channelArr]
+  dialogTitle.value = info.nickname
+  searchForm.value = { ...queryInfo }
+  searchForm.value.userId = info.userId
 
-  handleSearch()
+  sourceChange()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -136,31 +151,19 @@ const tableList = ref([])
 async function handleSearch() {
   loading.value = true
   try {
-    setReportData()
-    const data = await reportApi.getList(removeNullField(searchForm.value))
-    tableList.value = data.map((item) => {
-      const count = item.monthClueSignRateReportList.reduce(
-        (pre, cur) => {
-          return {
-            signCount: pre.signCount + cur.clueSignNum,
-            clueCount: pre.clueCount + cur.followClueNum
-          }
-        },
-        { signCount: 0, clueCount: 0 }
-      )
-      const rate = count.clueCount > 0 ? ((count.signCount * 100) / count.clueCount).toFixed(2) : 0
-      return {
-        ...item,
-        totalRate: `${rate}%(${count.signCount}/${count.clueCount})`,
-        totalRateNum: rate
-      }
-    })
+    const params = { ...searchForm.value }
+    const data = await reportApi.getInfo(removeNullField(params))
+    tableList.value = data.sourceDetailVOList
+    setReportData(data)
   } finally {
     loading.value = false
   }
 }
 
-const channelArr = ['美团', '高德', '线下渠道', '其他', '一点通', '抖音', '小红书', '宝典']
+function sourceChange() {
+  handleSearch()
+  showChannel.value = channelArr.value
+}
 
 const echart1Option = ref({
   title: {
@@ -174,7 +177,9 @@ const echart1Option = ref({
   },
   polar: {},
   legend: {
-    show: true
+    show: true,
+    type: 'scroll',
+    left: 100
   }
 })
 
@@ -190,7 +195,9 @@ const echart2Option = ref({
   },
   polar: {},
   legend: {
-    show: true
+    show: true,
+    type: 'scroll',
+    left: 100
   }
 })
 
@@ -205,49 +212,37 @@ const echart3Option = ref({
       { name: '支出/单' },
       { name: '线索成本/条' },
       { name: '净利润/单' },
-      { name: '线索总成本' },
-      { name: '总支出' },
-      { name: '总利润' }
+      { name: '成交率' }
+      // { name: '线索总成本' },
+      // { name: '总支出' },
+      // { name: '总利润' }
     ]
   },
   legend: {
-    show: true
+    show: true,
+    right: '10px',
+    orient: 'vertical'
   }
 })
 
-const setReportData = async () => {
+const setReportData = async (data) => {
   // const data = await HomeApi.getClueSignSignRate()
 
-  set(echart1Option.value, 'radiusAxis', {
-    type: 'category',
-    data: showChannel.value,
-    axisLabel: {
-      margin: 5,
-      fontSize: 10,
-      interval: 0
-    }
-  })
-
-  set(echart1Option.value, 'series', [
-    {
-      type: 'bar',
-      data: [2, 2, 3, 4, 10, 22, 43, 141],
-      coordinateSystem: 'polar',
-      name: '高意向A',
-      stack: 'a',
-      emphasis: {
-        focus: 'series'
-      },
-      label: {
-        show: true,
-        position: 'middle'
+  const arr1 = intentionOptions.map((intention) => {
+    const list = []
+    tableList.value.map((it) => {
+      if (showChannel.value.includes(it.sourceName)) {
+        list.push(
+          it.clueIntentionNumVOList.find((row) => row.intentionState == intention.value)
+            .intentionNum
+        )
       }
-    },
-    {
+    })
+    return {
       type: 'bar',
-      data: [6, 6, 7, 8, 22, 14, 36, 128],
+      data: list,
       coordinateSystem: 'polar',
-      name: '中意向B',
+      name: intention.label,
       stack: 'a',
       emphasis: {
         focus: 'series'
@@ -256,12 +251,23 @@ const setReportData = async () => {
         show: true,
         position: 'middle'
       }
-    },
-    {
+    }
+  })
+
+  const arr2 = props.licenseTypeOptions.map((cartype) => {
+    const list = []
+    tableList.value.map((it) => {
+      if (showChannel.value.includes(it.sourceName)) {
+        list.push(
+          it.signLicenseTypeNumVOList.find((row) => row.licenseType == cartype.label).licenseTypeNum
+        )
+      }
+    })
+    return {
       type: 'bar',
-      data: [1, 4, 7, 11, 16, 42, 13, 42],
+      data: list,
       coordinateSystem: 'polar',
-      name: '低意向C',
+      name: cartype.label,
       stack: 'a',
       emphasis: {
         focus: 'series'
@@ -271,9 +277,9 @@ const setReportData = async () => {
         position: 'middle'
       }
     }
-  ])
+  })
 
-  set(echart2Option.value, 'radiusAxis', {
+  set(echart1Option.value, 'radiusAxis', {
     type: 'category',
     data: showChannel.value,
     axisLabel: {
@@ -282,64 +288,63 @@ const setReportData = async () => {
       interval: 0
     }
   })
-  set(echart2Option.value, 'series', [
-    {
-      type: 'bar',
-      data: [2, 2, 3, 4, 1, 11, 23, 41],
-      coordinateSystem: 'polar',
-      name: 'C1',
-      stack: 'a',
-      emphasis: {
-        focus: 'series'
-      },
-      label: {
-        show: true,
-        position: 'middle'
-      }
-    },
-    {
-      type: 'bar',
-      data: [6, 6, 7, 8, 12, 14, 6, 28],
-      coordinateSystem: 'polar',
-      name: 'C2',
-      stack: 'a',
-      emphasis: {
-        focus: 'series'
-      },
-      label: {
-        show: true,
-        position: 'middle'
-      }
-    },
-    {
-      type: 'bar',
-      data: [1, 4, 7, 1, 6, 2, 23, 14],
-      coordinateSystem: 'polar',
-      name: 'D/E/F',
-      stack: 'a',
-      emphasis: {
-        focus: 'series'
-      },
-      label: {
-        show: true,
-        position: 'middle'
-      }
+
+  set(echart1Option.value, 'series', arr1)
+
+  set(echart2Option.value, 'radiusAxis', {
+    type: 'category',
+    data: showChannel.value,
+    axisLabel: {
+      margin: 5,
+      fontSize: 10,
+      interval: 0
     }
-  ])
+  })
+  set(echart2Option.value, 'series', arr2)
+  const { personDetail, averageDetail } = data
   set(echart3Option.value, 'series', [
     {
       type: 'radar',
       data: [
         {
-          value: [5.5, 1000, 200, 51, 666, 12345, 1245, 65478],
-          name: '平均',
+          value: [
+            averageDetail.averageSignPeriod,
+            averageDetail.grossProfitOfSingleSign,
+            averageDetail.payPriceOfSingleSign,
+            averageDetail.costOfSingleClue,
+            averageDetail.netProfitOfSingleSign,
+            averageDetail.signRate
+            // averageDetail.clueCostTotal,
+            // averageDetail.payPriceTotal,
+            // averageDetail.profitTotal
+          ],
+          name: '平均水平',
+          lineStyle: {
+            type: 'dashed'
+          },
+          areaStyle: {
+            color: 'rgba(0, 191, 255, 0.6)'
+          },
           label: {
             show: true
           }
         },
         {
-          value: [15, 800, 300, 66, 551, 23456, 2123, 25698],
-          name: '当前',
+          value: [
+            personDetail.averageSignPeriod,
+            personDetail.grossProfitOfSingleSign,
+            personDetail.payPriceOfSingleSign,
+            personDetail.costOfSingleClue,
+            personDetail.netProfitOfSingleSign,
+            averageDetail.signRate
+            // personDetail.clueCostTotal,
+            // personDetail.payPriceTotal,
+            // personDetail.profitTotal
+          ],
+          name: dialogTitle.value,
+          areaStyle: {
+            color: 'rgba(255, 145, 124, 0.4)'
+          },
           label: {
             show: true
           }
diff --git a/src/views/Home/SalesReport.vue b/src/views/Home/SalesReport.vue
index 05140c0..f1cbdfc 100644
--- a/src/views/Home/SalesReport.vue
+++ b/src/views/Home/SalesReport.vue
@@ -3,12 +3,13 @@
     <el-form :model="searchForm" label-width="0" inline>
       <el-form-item>
         <el-date-picker
-          v-model="searchForm.period"
+          v-model="searchForm.consultTime"
           type="daterange"
           format="YYYY-MM-DD"
           value-format="YYYY-MM-DD"
           start-placeholder="选择日期"
           end-placeholder="选择日期"
+          :clearable="false"
         />
       </el-form-item>
       <el-form-item>
@@ -20,17 +21,18 @@
           :data="sourceOptions"
           :props="defaultProps"
           check-strictly
+          clearable
           node-key="sourceId"
           placeholder="请选择渠道"
         />
       </el-form-item>
       <el-form-item>
-        <el-select v-model="searchForm.cartype" placeholder="选择驾照类型" clearable>
+        <el-select v-model="searchForm.licenseType" placeholder="选择驾照类型" clearable>
           <el-option
-            v-for="item in cartypeOptions"
-            :key="item.value"
+            v-for="item in licenseTypeOptions"
+            :key="item.label"
             :label="item.label"
-            :value="item.value"
+            :value="item.label"
           />
         </el-select>
       </el-form-item>
@@ -45,33 +47,33 @@
       <el-table-column type="index" width="50" fixed="left" />
       <el-table-column prop="nickname" label="姓名" width="80" fixed="left">
         <template #default="{ row }">
-          <el-button type="primary" style="padding: 0" text @click="handleDetail">{{
+          <el-button type="primary" style="padding: 0" text @click="handleDetail(row)">{{
             row.nickname
           }}</el-button>
         </template>
       </el-table-column>
-      <el-table-column prop="" sortable min-width="100">
+      <el-table-column prop="newClueNumber" sortable min-width="100">
         <template #header>
           <Tooltip message="咨询日期在所选周期内的线索总数" />
           <span>新线索数</span>
         </template>
       </el-table-column>
-      <el-table-column label="成交数" prop="" sortable min-width="100">
+      <el-table-column label="成交数" prop="signNumber" sortable min-width="100">
         <template #header>
           <Tooltip message="成交日期在所选周期内的成交数" />
           <span>成交数</span>
         </template>
       </el-table-column>
-      <el-table-column label="成交率" prop="" sortable min-width="100" />
-      <el-table-column label="跟进数/日" prop="" sortable min-width="100" />
-      <el-table-column label="成交数/日" prop="" sortable min-width="100" />
-      <el-table-column label="平均成交周期" prop="" sortable min-width="100">
+      <el-table-column label="成交率" prop="signRate" sortable min-width="100" />
+      <el-table-column label="跟进数/日" prop="dayFollowNumber" sortable min-width="100" />
+      <el-table-column label="成交数/日" prop="daySignNumber" sortable min-width="100" />
+      <el-table-column label="平均成交周期" prop="averageSignPeriod" sortable min-width="100">
         <template #header>
           <Tooltip message="平均每条成交的线索，从咨询开始到成交所需要的天数" />
           <span>平均成交周期</span>
         </template>
       </el-table-column>
-      <el-table-column prop="" sortable min-width="100">
+      <el-table-column prop="grossProfitOfSingleSign" sortable min-width="100">
         <template #header>
           <Tooltip
             message="平均每笔成交订单的公司利润【按照登记，不按审核到账】=总公司利润/总成交数"
@@ -79,7 +81,7 @@
           <span>毛利/单</span>
         </template>
       </el-table-column>
-      <el-table-column prop="" sortable min-width="100">
+      <el-table-column prop="payPriceOfSingleSign" sortable min-width="100">
         <template #header>
           <Tooltip
             message="平均每笔成交订单的额外支出（返费等）【按照登记，不按审核到账】=总支出/总成交数"
@@ -87,42 +89,52 @@
           <span>支出/单</span>
         </template>
       </el-table-column>
-      <el-table-column prop="" sortable min-width="100">
+      <el-table-column prop="costOfSingleClue" sortable min-width="100">
         <template #header>
           <Tooltip message="平均每条线索的成本=总线索成本/新线索条数" />
           <span>线索成本/条</span>
         </template>
       </el-table-column>
-      <el-table-column prop="" sortable min-width="100">
+      <el-table-column prop="netProfitOfSingleSign" sortable min-width="100">
         <template #header>
           <Tooltip message="=（总公司利润-总支出-总线索成本）/总成交数" />
           <span>净利润/单</span>
         </template>
       </el-table-column>
-      <el-table-column label="总线索成本" prop="" sortable min-width="100" />
-      <el-table-column label="总支出" prop="" sortable min-width="100" />
-      <el-table-column label="总利润" prop="" sortable min-width="100" />
-      <el-table-column prop="" sortable min-width="100">
+      <el-table-column label="总线索成本" prop="clueCostTotal" sortable min-width="100" />
+      <el-table-column label="总支出" prop="payPriceTotal" sortable min-width="100" />
+      <el-table-column label="总利润" prop="profitTotal" sortable min-width="100" />
+      <el-table-column prop="efficiency" sortable min-width="100">
         <template #header>
           <Tooltip message="=总利润/(总成本+总支出)" />
           <span>能效</span>
         </template>
       </el-table-column>
-      <el-table-column label="撞单数" prop="" sortable min-width="100" />
-      <el-table-column label="撞单成交数" prop="" sortable min-width="100" />
+      <el-table-column label="撞单数" prop="repeatClueNum" sortable min-width="100" />
+      <el-table-column label="撞单成交数" prop="repeatClueSignNum" sortable min-width="100" />
     </el-table>
 
-    <DialogSalerReportDetail ref="SalerDetailDialog" />
+    <DialogSalerReportDetail
+      :licenseTypeOptions="licenseTypeOptions"
+      :source-options="sourceOptions"
+      ref="SalerDetailDialog"
+    />
   </ContentWrap>
 </template>
 
 <script setup name="SalesReport">
 import DialogSalerReportDetail from './Comp/DialogSalerReportDetail.vue'
 
-import * as reportApi from '@/api/home/reportSignRate'
+import * as reportApi from '@/api/home/reportSaler'
+import { getSimpleSourceList as getResourceOptions } from '@/api/clue/source'
+
 import { removeNullField } from '@/utils'
+import { formatDate } from '@/utils/formatTime'
+import { handleTree } from '@/utils/tree'
+import { getIntDictOptions } from '@/utils/dict'
 
 onMounted(() => {
+  getOptions()
   handleReset()
   handleSearch()
 })
@@ -135,14 +147,16 @@ const defaultProps = {
 }
 
 const sourceOptions = ref([])
-const cartypeOptions = ref([])
+const licenseTypeOptions = ref([])
 
 const searchForm = ref({})
 
 function handleReset() {
+  const year = new Date().getFullYear()
+  const month = new Date().getMonth() + 1
   searchForm.value = {
     nickname: undefined,
-    period: []
+    consultTime: [`${year}-${month}-01`, formatDate(new Date())]
   }
 }
 
@@ -152,23 +166,7 @@ async function handleSearch() {
   loading.value = true
   try {
     const data = await reportApi.getList(removeNullField(searchForm.value))
-    tableList.value = data.map((item) => {
-      const count = item.monthClueSignRateReportList.reduce(
-        (pre, cur) => {
-          return {
-            signCount: pre.signCount + cur.clueSignNum,
-            clueCount: pre.clueCount + cur.followClueNum
-          }
-        },
-        { signCount: 0, clueCount: 0 }
-      )
-      const rate = count.clueCount > 0 ? ((count.signCount * 100) / count.clueCount).toFixed(2) : 0
-      return {
-        ...item,
-        totalRate: `${rate}%(${count.signCount}/${count.clueCount})`,
-        totalRateNum: rate
-      }
-    })
+    tableList.value = data
   } finally {
     loading.value = false
   }
@@ -179,13 +177,12 @@ function handleDetail(info) {
   SalerDetailDialog.value.open(info, searchForm.value)
 }
 
-// function monthSort(pre, cur, idx) {
-
-//   return (
-//     Number(pre.monthClueSignRateReportList[idx].rate) -
-//     Number(cur.monthClueSignRateReportList[idx].rate)
-//   )
-// }
+function getOptions() {
+  getResourceOptions().then((data) => {
+    sourceOptions.value = handleTree(data, 'sourceId')
+  })
+  licenseTypeOptions.value = getIntDictOptions('license_type')
+}
 </script>
 
 <style lang="scss" scoped></style>