qiushanhe
/
ss-crm-manage-web
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sc

Browse Source
dev-cl
qsh 2 weeks ago
parent 91a509d49d
commit d3b4a360dd
3 changed files with 193 additions and 183 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      src/api/home/reportSaler.js
  2. 271
      src/views/Home/Comp/DialogSalerReportDetail.vue
  3. 97
      src/views/Home/SalesReport.vue

8
src/api/home/reportSaler.js
Unescape View File

@ -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 })
}

271
src/views/Home/Comp/DialogSalerReportDetail.vue
Unescape View File

@ -1,14 +1,15 @@
<template> <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 :model="searchForm" label-width="0" inline>
<el-form-item> <el-form-item>
<el-date-picker <el-date-picker
v-model="searchForm.period" v-model="searchForm.consultTime"
type="daterange" type="daterange"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
start-placeholder="选择日期" start-placeholder="选择日期"
end-placeholder="选择日期" end-placeholder="选择日期"
:clearable="false"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -17,17 +18,19 @@
:data="props.sourceOptions" :data="props.sourceOptions"
:props="defaultProps" :props="defaultProps"
check-strictly check-strictly
clearable
node-key="sourceId" node-key="sourceId"
placeholder="请选择渠道" placeholder="请选择渠道"
@change="sourceChange"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-select v-model="searchForm.cartype" placeholder="选择驾照类型" clearable> <el-select v-model="searchForm.licenseType" placeholder="选择驾照类型" clearable>
<el-option <el-option
v-for="item in props.cartypeOptions" v-for="item in props.licenseTypeOptions"
:key="item.value" :key="item.label"
:label="item.label" :label="item.label"
:value="item.value" :value="item.label"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -42,17 +45,17 @@
<el-tab-pane label="详细数据" :name="1"> <el-tab-pane label="详细数据" :name="1">
<el-table v-loading="loading" :data="tableList" border stripe> <el-table v-loading="loading" :data="tableList" border stripe>
<el-table-column prop="sourceName" label="渠道名称" width="100" fixed="left" /> <el-table-column prop="sourceName" label="渠道名称" width="100" fixed="left" />
<el-table-column prop="" label="新线索数" sortable /> <el-table-column prop="newClueNumber" label="新线索数" sortable />
<el-table-column prop="" label="成交数" sortable /> <el-table-column prop="signNumber" label="成交数" sortable />
<el-table-column prop="" label="成交率" sortable /> <el-table-column prop="signRate" label="成交率" sortable />
<el-table-column prop="" label="成交周期" sortable /> <el-table-column prop="averageSignPeriod" label="成交周期" sortable />
<el-table-column prop="" label="毛利/单" sortable /> <el-table-column prop="grossProfitOfSingleSign" label="毛利/单" sortable />
<el-table-column prop="" label="支出/单" sortable /> <el-table-column prop="payPriceOfSingleSign" label="支出/单" sortable />
<el-table-column prop="" label="线索成本/条" sortable /> <el-table-column prop="costOfSingleClue" label="线索成本/条" sortable />
<el-table-column prop="" label="净利润/单" sortable /> <el-table-column prop="netProfitOfSingleSign" label="净利润/单" sortable />
<el-table-column label="总线索成本" prop="" sortable min-width="100" /> <el-table-column label="总线索成本" prop="clueCostTotal" sortable min-width="100" />
<el-table-column label="总支出" prop="" sortable min-width="100" /> <el-table-column label="总支出" prop="payPriceTotal" sortable min-width="100" />
<el-table-column label="总利润" prop="" sortable min-width="100" /> <el-table-column label="总利润" prop="profitTotal" sortable min-width="100" />
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="图表展示" :name="2" lazy> <el-tab-pane label="图表展示" :name="2" lazy>
@ -82,11 +85,12 @@
<script setup name="DialogSalerReportDetail"> <script setup name="DialogSalerReportDetail">
import { set } from 'lodash-es' 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' import { removeNullField } from '@/utils'
const props = defineProps({ const props = defineProps({
cartypeOptions: { licenseTypeOptions: {
type: Array, type: Array,
default: () => [] default: () => []
}, },
@ -103,18 +107,30 @@ const defaultProps = {
isLeaf: 'leaf' 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 dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题 const dialogTitle = ref('') // 弹窗的标题
const loading = ref(false) const loading = ref(false)
const searchForm = ref({}) const searchForm = ref({})
const showPane = ref(1) const showPane = ref(1)
const showChannel = ref([])
function handleReset() { function handleReset() {
searchForm.value = { searchForm.value = {
nickname: undefined, nickname: undefined,
period: [] consultTime: []
} }
} }
@ -122,12 +138,11 @@ function handleReset() {
const open = async (info, queryInfo) => { const open = async (info, queryInfo) => {
showPane.value = 1 showPane.value = 1
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = `销售详情-【${info.nickname}】` dialogTitle.value = info.nickname
searchForm.value.period = queryInfo.period searchForm.value = { ...queryInfo }
searchForm.value.cartype = queryInfo.cartype searchForm.value.userId = info.userId
showChannel.value = [...channelArr]
handleSearch() sourceChange()
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@ -136,31 +151,19 @@ const tableList = ref([])
async function handleSearch() { async function handleSearch() {
loading.value = true loading.value = true
try { try {
setReportData() const params = { ...searchForm.value }
const data = await reportApi.getList(removeNullField(searchForm.value)) const data = await reportApi.getInfo(removeNullField(params))
tableList.value = data.map((item) => { tableList.value = data.sourceDetailVOList
const count = item.monthClueSignRateReportList.reduce( setReportData(data)
(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
}
})
} finally { } finally {
loading.value = false loading.value = false
} }
} }
const channelArr = ['美团', '高德', '线下渠道', '其他', '一点通', '抖音', '小红书', '宝典'] function sourceChange() {
handleSearch()
showChannel.value = channelArr.value
}
const echart1Option = ref({ const echart1Option = ref({
title: { title: {
@ -174,7 +177,9 @@ const echart1Option = ref({
}, },
polar: {}, polar: {},
legend: { legend: {
show: true show: true,
type: 'scroll',
left: 100
} }
}) })
@ -190,7 +195,9 @@ const echart2Option = ref({
}, },
polar: {}, polar: {},
legend: { 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: '线索总成本' },
{ name: '总利润' } // { name: '总支出' },
// { name: '总利润' }
] ]
}, },
legend: { legend: {
show: true show: true,
right: '10px',
orient: 'vertical'
} }
}) })
const setReportData = async () => { const setReportData = async (data) => {
// const data = await HomeApi.getClueSignSignRate() // const data = await HomeApi.getClueSignSignRate()
set(echart1Option.value, 'radiusAxis', { const arr1 = intentionOptions.map((intention) => {
type: 'category', const list = []
data: showChannel.value, tableList.value.map((it) => {
axisLabel: { if (showChannel.value.includes(it.sourceName)) {
margin: 5, list.push(
fontSize: 10, it.clueIntentionNumVOList.find((row) => row.intentionState == intention.value)
interval: 0 .intentionNum
} )
})
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'
} }
}, })
{ return {
type: 'bar', type: 'bar',
data: [6, 6, 7, 8, 22, 14, 36, 128], data: list,
coordinateSystem: 'polar', coordinateSystem: 'polar',
name: '中意向B', name: intention.label,
stack: 'a', stack: 'a',
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -256,12 +251,23 @@ const setReportData = async () => {
show: true, show: true,
position: 'middle' 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', type: 'bar',
data: [1, 4, 7, 11, 16, 42, 13, 42], data: list,
coordinateSystem: 'polar', coordinateSystem: 'polar',
name: '低意向C', name: cartype.label,
stack: 'a', stack: 'a',
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -271,9 +277,9 @@ const setReportData = async () => {
position: 'middle' position: 'middle'
} }
} }
]) })
set(echart2Option.value, 'radiusAxis', { set(echart1Option.value, 'radiusAxis', {
type: 'category', type: 'category',
data: showChannel.value, data: showChannel.value,
axisLabel: { axisLabel: {
@ -282,64 +288,63 @@ const setReportData = async () => {
interval: 0 interval: 0
} }
}) })
set(echart2Option.value, 'series', [
{ set(echart1Option.value, 'series', arr1)
type: 'bar',
data: [2, 2, 3, 4, 1, 11, 23, 41], set(echart2Option.value, 'radiusAxis', {
coordinateSystem: 'polar', type: 'category',
name: 'C1', data: showChannel.value,
stack: 'a', axisLabel: {
emphasis: { margin: 5,
focus: 'series' fontSize: 10,
}, interval: 0
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(echart2Option.value, 'series', arr2)
const { personDetail, averageDetail } = data
set(echart3Option.value, 'series', [ set(echart3Option.value, 'series', [
{ {
type: 'radar', type: 'radar',
data: [ data: [
{ {
value: [5.5, 1000, 200, 51, 666, 12345, 1245, 65478], value: [
name: '平均', 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: { label: {
show: true show: true
} }
}, },
{ {
value: [15, 800, 300, 66, 551, 23456, 2123, 25698], value: [
name: '当前', 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: { label: {
show: true show: true
} }

97
src/views/Home/SalesReport.vue
Unescape View File

@ -3,12 +3,13 @@
<el-form :model="searchForm" label-width="0" inline> <el-form :model="searchForm" label-width="0" inline>
<el-form-item> <el-form-item>
<el-date-picker <el-date-picker
v-model="searchForm.period" v-model="searchForm.consultTime"
type="daterange" type="daterange"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
start-placeholder="选择日期" start-placeholder="选择日期"
end-placeholder="选择日期" end-placeholder="选择日期"
:clearable="false"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -20,17 +21,18 @@
:data="sourceOptions" :data="sourceOptions"
:props="defaultProps" :props="defaultProps"
check-strictly check-strictly
clearable
node-key="sourceId" node-key="sourceId"
placeholder="请选择渠道" placeholder="请选择渠道"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-select v-model="searchForm.cartype" placeholder="选择驾照类型" clearable> <el-select v-model="searchForm.licenseType" placeholder="选择驾照类型" clearable>
<el-option <el-option
v-for="item in cartypeOptions" v-for="item in licenseTypeOptions"
:key="item.value" :key="item.label"
:label="item.label" :label="item.label"
:value="item.value" :value="item.label"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -45,33 +47,33 @@
<el-table-column type="index" width="50" fixed="left" /> <el-table-column type="index" width="50" fixed="left" />
<el-table-column prop="nickname" label="姓名" width="80" fixed="left"> <el-table-column prop="nickname" label="姓名" width="80" fixed="left">
<template #default="{ row }"> <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 row.nickname
}}</el-button> }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" sortable min-width="100"> <el-table-column prop="newClueNumber" sortable min-width="100">
<template #header> <template #header>
<Tooltip message="咨询日期在所选周期内的线索总数" /> <Tooltip message="咨询日期在所选周期内的线索总数" />
<span>新线索数</span> <span>新线索数</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="成交数" prop="" sortable min-width="100"> <el-table-column label="成交数" prop="signNumber" sortable min-width="100">
<template #header> <template #header>
<Tooltip message="成交日期在所选周期内的成交数" /> <Tooltip message="成交日期在所选周期内的成交数" />
<span>成交数</span> <span>成交数</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="成交率" prop="" sortable min-width="100" /> <el-table-column label="成交率" prop="signRate" sortable min-width="100" />
<el-table-column label="跟进数/日" prop="" sortable min-width="100" /> <el-table-column label="跟进数/日" prop="dayFollowNumber" sortable min-width="100" />
<el-table-column label="成交数/日" prop="" sortable min-width="100" /> <el-table-column label="成交数/日" prop="daySignNumber" sortable min-width="100" />
<el-table-column label="平均成交周期" prop="" sortable min-width="100"> <el-table-column label="平均成交周期" prop="averageSignPeriod" sortable min-width="100">
<template #header> <template #header>
<Tooltip message="平均每条成交的线索，从咨询开始到成交所需要的天数" /> <Tooltip message="平均每条成交的线索，从咨询开始到成交所需要的天数" />
<span>平均成交周期</span> <span>平均成交周期</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" sortable min-width="100"> <el-table-column prop="grossProfitOfSingleSign" sortable min-width="100">
<template #header> <template #header>
<Tooltip <Tooltip
message="平均每笔成交订单的公司利润【按照登记，不按审核到账】=总公司利润/总成交数" message="平均每笔成交订单的公司利润【按照登记，不按审核到账】=总公司利润/总成交数"
@ -79,7 +81,7 @@
<span>毛利/单</span> <span>毛利/单</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" sortable min-width="100"> <el-table-column prop="payPriceOfSingleSign" sortable min-width="100">
<template #header> <template #header>
<Tooltip <Tooltip
message="平均每笔成交订单的额外支出（返费等）【按照登记，不按审核到账】=总支出/总成交数" message="平均每笔成交订单的额外支出（返费等）【按照登记，不按审核到账】=总支出/总成交数"
@ -87,42 +89,52 @@
<span>支出/单</span> <span>支出/单</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" sortable min-width="100"> <el-table-column prop="costOfSingleClue" sortable min-width="100">
<template #header> <template #header>
<Tooltip message="平均每条线索的成本=总线索成本/新线索条数" /> <Tooltip message="平均每条线索的成本=总线索成本/新线索条数" />
<span>线索成本/条</span> <span>线索成本/条</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="" sortable min-width="100"> <el-table-column prop="netProfitOfSingleSign" sortable min-width="100">
<template #header> <template #header>
<Tooltip message="=（总公司利润-总支出-总线索成本）/总成交数" /> <Tooltip message="=（总公司利润-总支出-总线索成本）/总成交数" />
<span>净利润/单</span> <span>净利润/单</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="总线索成本" prop="" sortable min-width="100" /> <el-table-column label="总线索成本" prop="clueCostTotal" sortable min-width="100" />
<el-table-column label="总支出" prop="" sortable min-width="100" /> <el-table-column label="总支出" prop="payPriceTotal" sortable min-width="100" />
<el-table-column label="总利润" prop="" sortable min-width="100" /> <el-table-column label="总利润" prop="profitTotal" sortable min-width="100" />
<el-table-column prop="" sortable min-width="100"> <el-table-column prop="efficiency" sortable min-width="100">
<template #header> <template #header>
<Tooltip message="=总利润/(总成本+总支出)" /> <Tooltip message="=总利润/(总成本+总支出)" />
<span>能效</span> <span>能效</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="撞单数" prop="" sortable min-width="100" /> <el-table-column label="撞单数" prop="repeatClueNum" sortable min-width="100" />
<el-table-column label="撞单成交数" prop="" sortable min-width="100" /> <el-table-column label="撞单成交数" prop="repeatClueSignNum" sortable min-width="100" />
</el-table> </el-table>
<DialogSalerReportDetail ref="SalerDetailDialog" /> <DialogSalerReportDetail
:licenseTypeOptions="licenseTypeOptions"
:source-options="sourceOptions"
ref="SalerDetailDialog"
/>
</ContentWrap> </ContentWrap>
</template> </template>
<script setup name="SalesReport"> <script setup name="SalesReport">
import DialogSalerReportDetail from './Comp/DialogSalerReportDetail.vue' 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 { removeNullField } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { handleTree } from '@/utils/tree'
import { getIntDictOptions } from '@/utils/dict'
onMounted(() => { onMounted(() => {
getOptions()
handleReset() handleReset()
handleSearch() handleSearch()
}) })
@ -135,14 +147,16 @@ const defaultProps = {
} }
const sourceOptions = ref([]) const sourceOptions = ref([])
const cartypeOptions = ref([]) const licenseTypeOptions = ref([])
const searchForm = ref({}) const searchForm = ref({})
function handleReset() { function handleReset() {
const year = new Date().getFullYear()
const month = new Date().getMonth() + 1
searchForm.value = { searchForm.value = {
nickname: undefined, nickname: undefined,
period: [] consultTime: [`${year}-${month}-01`, formatDate(new Date())]
} }
} }
@ -152,23 +166,7 @@ async function handleSearch() {
loading.value = true loading.value = true
try { try {
const data = await reportApi.getList(removeNullField(searchForm.value)) const data = await reportApi.getList(removeNullField(searchForm.value))
tableList.value = data.map((item) => { tableList.value = data
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
}
})
} finally { } finally {
loading.value = false loading.value = false
} }
@ -179,13 +177,12 @@ function handleDetail(info) {
SalerDetailDialog.value.open(info, searchForm.value) SalerDetailDialog.value.open(info, searchForm.value)
} }
// function monthSort(pre, cur, idx) { function getOptions() {
getResourceOptions().then((data) => {
// return ( sourceOptions.value = handleTree(data, 'sourceId')
// Number(pre.monthClueSignRateReportList[idx].rate) - })
// Number(cur.monthClueSignRateReportList[idx].rate) licenseTypeOptions.value = getIntDictOptions('license_type')
// ) }
// }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

Write Preview
Loading…
Cancel
Save