dev-report
qsh
1 month ago
parent
41c20623d4
commit
2406bcb8e4
@ -0,0 +1,8 @@ |
||||
import request from '@/config/axios' |
||||
export const getInfo = async (data) => { |
||||
return await request.post({ url: '/admin-api/crm/sch-clue/signData/report/one', data }) |
||||
} |
||||
|
||||
export const getList = async (data) => { |
||||
return await request.post({ url: '/admin-api/crm/sch-clue/signData/report/two', data }) |
||||
} |
||||
@ -0,0 +1,147 @@ |
||||
<template> |
||||
<ContentWrap> |
||||
<el-form :model="searchForm" label-width="0" inline> |
||||
<el-form-item> |
||||
<el-date-picker |
||||
v-model="searchForm.period" |
||||
type="month" |
||||
format="YYYY-MM" |
||||
value-format="YYYY-MM" |
||||
placeholder="选择年月" |
||||
:clearable="false" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-tree-select |
||||
v-model="searchForm.sourceId" |
||||
:data="props.sourceOptions" |
||||
:props="defaultProps" |
||||
check-strictly |
||||
node-key="sourceId" |
||||
placeholder="请选择渠道" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleSearch">查询</el-button> |
||||
<el-button @click="handleReset">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="tableList" |
||||
border |
||||
stripe |
||||
:summary-method="getSummaries" |
||||
show-summary |
||||
> |
||||
<el-table-column prop="sourceName" label="渠道名称" /> |
||||
<el-table-column prop="newClueSignNum" label="新线索当月成交数" sortable> |
||||
<template #header> |
||||
<Tooltip message="当月咨询且当月成交的线索数" /> <span>新线索当月成交数</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="newClueNum" label="新线索总数" sortable> |
||||
<template #header> |
||||
<Tooltip message="当月咨询的线索数" /> <span>新线索总数</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="rate" label="新线索当月成交率" sortable :formatter="parseRate" /> |
||||
<el-table-column prop="reallyClueSignNum" sortable> |
||||
<template #header> |
||||
<Tooltip message="成交日期在本月的线索数" /> <span>当月总成交数</span> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</ContentWrap> |
||||
</template> |
||||
|
||||
<script setup name="ChannelMonthly"> |
||||
import * as reportApi from '@/api/home/reportChannel' |
||||
import { removeNullField } from '@/utils' |
||||
import { formatDate } from '@/utils/formatTime' |
||||
|
||||
const props = defineProps({ |
||||
sourceOptions: { |
||||
type: Array, |
||||
default: () => [] |
||||
} |
||||
}) |
||||
|
||||
const defaultProps = { |
||||
children: 'children', |
||||
label: 'sourceName', |
||||
value: 'sourceId', |
||||
isLeaf: 'leaf' |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getOptions() |
||||
handleReset() |
||||
handleSearch() |
||||
}) |
||||
|
||||
const searchForm = ref({}) |
||||
|
||||
function handleReset() { |
||||
searchForm.value = { |
||||
sourceId: undefined, |
||||
period: formatDate(new Date(), 'YYYY-MM') |
||||
} |
||||
} |
||||
|
||||
function getOptions() {} |
||||
|
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
async function handleSearch() { |
||||
loading.value = true |
||||
try { |
||||
const data = await reportApi.getList(removeNullField(searchForm.value)) |
||||
tableList.value = data |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
function parseRate(row) { |
||||
return Number(row.rate * 100).toFixed(2) + '%' |
||||
} |
||||
|
||||
function getSummaries({ columns, data }) { |
||||
let sums = [] |
||||
columns.forEach((column, index) => { |
||||
if (index == 0) { |
||||
sums[index] = '合计' |
||||
return |
||||
} |
||||
const values = data.map((item) => Number(item[column.property])) |
||||
if (!values.every((value) => Number.isNaN(value))) { |
||||
if (column.property == 'rate') { |
||||
const sum = data.reduce( |
||||
(pre, cur) => ({ |
||||
clueNum: pre.clueNum + cur.newClueNum, |
||||
signNum: pre.signNum + cur.newClueSignNum |
||||
}), |
||||
{ clueNum: 0, signNum: 0 } |
||||
) |
||||
sums[index] = sum.clueNum > 0 ? ((sum.signNum * 100) / sum.clueNum).toFixed(2) + '%' : 0 |
||||
} else { |
||||
sums[index] = values.reduce((prev, curr) => { |
||||
const value = Number(curr) |
||||
if (!Number.isNaN(value)) { |
||||
return prev + curr |
||||
} else { |
||||
return prev |
||||
} |
||||
}, 0) |
||||
} |
||||
} else { |
||||
sums[index] = '' |
||||
} |
||||
}) |
||||
return sums |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,160 @@ |
||||
<template> |
||||
<ContentWrap> |
||||
<el-form ref="searchRef" :model="searchForm" :rules="searchRules" label-width="100px" inline> |
||||
<el-form-item label="咨询日期" prop="consultDate"> |
||||
<el-date-picker |
||||
v-model="searchForm.consultDate" |
||||
type="daterange" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
start-placeholder="选择日期" |
||||
end-placeholder="选择日期" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="成交周期" prop="period"> |
||||
<el-input-number |
||||
v-model="searchForm.period" |
||||
:min="1" |
||||
:controls="false" |
||||
style="width: 100%" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item label="渠道来源" prop="sourceId"> |
||||
<el-tree-select |
||||
v-model="searchForm.sourceId" |
||||
:data="props.sourceOptions" |
||||
:props="defaultProps" |
||||
check-strictly |
||||
node-key="sourceId" |
||||
placeholder="请选择渠道" |
||||
style="width: 100%" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleSearch">查询</el-button> |
||||
<el-button @click="handleReset">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-table |
||||
v-loading="loading" |
||||
:data="tableList" |
||||
border |
||||
stripe |
||||
:summary-method="getSummaries" |
||||
show-summary |
||||
> |
||||
<el-table-column prop="sourceName" label="渠道名称" /> |
||||
<el-table-column prop="newClueSignNum" label="新线索成交数" sortable> |
||||
<template #header> |
||||
<Tooltip message="咨询日期在查询范围内，且在所查成交周期内成交的线索数" /> |
||||
<span>新线索成交数</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="newClueNum" label="新线索总数" sortable> |
||||
<template #header> |
||||
<Tooltip message="咨询日期在查询范围内，咨询的线索数" /> <span>新线索总数</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="rate" label="新线索成交率" sortable :formatter="parseRate" /> |
||||
</el-table> |
||||
</ContentWrap> |
||||
</template> |
||||
|
||||
<script setup name="ChannelPeriod"> |
||||
import * as reportApi from '@/api/home/reportChannel' |
||||
import { removeNullField } from '@/utils' |
||||
|
||||
const props = defineProps({ |
||||
sourceOptions: { |
||||
type: Array, |
||||
default: () => [] |
||||
} |
||||
}) |
||||
|
||||
const defaultProps = { |
||||
children: 'children', |
||||
label: 'sourceName', |
||||
value: 'sourceId', |
||||
isLeaf: 'leaf' |
||||
} |
||||
|
||||
const searchRef = ref() |
||||
|
||||
const searchRules = { |
||||
consultDate: { required: true, type: 'array', message: '请选择咨询日期', trigger: 'change,blur' }, |
||||
period: { required: true, message: '请输入成交周期', trigger: 'blur' } |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getOptions() |
||||
handleReset() |
||||
}) |
||||
|
||||
const searchForm = ref({}) |
||||
|
||||
function handleReset() { |
||||
searchForm.value = { |
||||
sourceId: undefined, |
||||
period: 30, |
||||
consultDate: [] |
||||
} |
||||
} |
||||
|
||||
function getOptions() {} |
||||
|
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
async function handleSearch() { |
||||
try { |
||||
const valid = await searchRef.value.validate() |
||||
if (!valid) return |
||||
loading.value = true |
||||
const data = await reportApi.getList(removeNullField(searchForm.value)) |
||||
tableList.value = data |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
function parseRate(row) { |
||||
return Number(row.rate * 100).toFixed(2) + '%' |
||||
} |
||||
|
||||
function getSummaries({ columns, data }) { |
||||
let sums = [] |
||||
columns.forEach((column, index) => { |
||||
if (index == 0) { |
||||
sums[index] = '合计' |
||||
return |
||||
} |
||||
const values = data.map((item) => Number(item[column.property])) |
||||
if (!values.every((value) => Number.isNaN(value))) { |
||||
if (column.property == 'rate') { |
||||
const sum = data.reduce( |
||||
(pre, cur) => ({ |
||||
clueNum: pre.clueNum + cur.newClueNum, |
||||
signNum: pre.signNum + cur.newClueSignNum |
||||
}), |
||||
{ clueNum: 0, signNum: 0 } |
||||
) |
||||
sums[index] = sum.clueNum > 0 ? ((sum.signNum * 100) / sum.clueNum).toFixed(2) + '%' : 0 |
||||
} else { |
||||
sums[index] = values.reduce((prev, curr) => { |
||||
const value = Number(curr) |
||||
if (!Number.isNaN(value)) { |
||||
return prev + curr |
||||
} else { |
||||
return prev |
||||
} |
||||
}, 0) |
||||
} |
||||
} else { |
||||
sums[index] = '' |
||||
} |
||||
}) |
||||
return sums |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,105 @@ |
||||
<template> |
||||
<ContentWrap> |
||||
<el-form :model="searchForm" label-width="0" inline> |
||||
<el-form-item> |
||||
<el-select v-model="searchForm.detailType" :clearable="false" filterable> |
||||
<el-option |
||||
v-for="item in detailTypeOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item v-if="searchForm.detailType == 1"> |
||||
<el-date-picker |
||||
v-model="searchForm.month" |
||||
type="month" |
||||
format="YYYY-MM" |
||||
value-format="YYYY-MM" |
||||
placeholder="选择年月" |
||||
:clearable="false" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item v-if="[2, 3].includes(searchForm.detailType)"> |
||||
<el-date-picker |
||||
v-model="searchForm.year" |
||||
type="year" |
||||
format="YYYY" |
||||
value-format="YYYY" |
||||
placeholder="选择年" |
||||
:clearable="false" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleSearch">查询</el-button> |
||||
<el-button @click="handleReset">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-table :data="tableList" border stripe> |
||||
<el-table-column label="周期" prop="period" width="110px" /> |
||||
<el-table-column prop="signNumber" label="成交数" /> |
||||
<el-table-column prop="signPrice" label="成交额" /> |
||||
<el-table-column prop="signPriceSequentialGrowth" label="成交额环比增长" /> |
||||
<el-table-column prop="signPriceSamePeriodCompareGrowth" label="成交额同比增长" /> |
||||
<el-table-column prop="profit" label="利润" /> |
||||
<el-table-column prop="profitSequentialGrowth" label="利润环比增长" /> |
||||
<el-table-column prop="profitSamePeriodCompareGrowth" label="利润同比增长" /> |
||||
<el-table-column prop="notReceivedMoney" label="未到账金额" /> |
||||
<el-table-column prop="receivedMoney" label="已到账金额" /> |
||||
<el-table-column prop="waitSettleMoney" label="待结算金额" /> |
||||
<el-table-column prop="settledMoney" label="已结算金额" /> |
||||
<el-table-column prop="refundAmount" label="已退款金额" /> |
||||
<el-table-column prop="remainMoney" label="结余" /> |
||||
</el-table> |
||||
</ContentWrap> |
||||
</template> |
||||
|
||||
<script setup name="SignListCard"> |
||||
import { getList } from '@/api/home/reportSignDetail' |
||||
import { formatDate } from '@/utils/formatTime' |
||||
import { removeNullField } from '@/utils' |
||||
|
||||
const detailTypeOptions = [ |
||||
{ label: '日明细', value: 1 }, |
||||
{ label: '月明细', value: 2 }, |
||||
{ label: '季明细', value: 3 }, |
||||
{ label: '年明细', value: 4 } |
||||
] |
||||
|
||||
onMounted(() => { |
||||
handleReset() |
||||
handleSearch() |
||||
}) |
||||
|
||||
const searchForm = ref({}) |
||||
|
||||
function handleReset() { |
||||
searchForm.value = { |
||||
detailType: 2, |
||||
month: formatDate(new Date(), 'YYYY-MM'), |
||||
year: new Date().getFullYear() + '' |
||||
} |
||||
} |
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
async function handleSearch() { |
||||
loading.value = true |
||||
try { |
||||
let params = { detailType: searchForm.value.detailType } |
||||
if (params.detailType == 1) { |
||||
const d = new Date(searchForm.value.month) |
||||
params.month = d.getMonth() + 1 |
||||
params.year = d.getFullYear() |
||||
} else if ([2, 3].includes(params.detailType)) { |
||||
params.year = searchForm.value.year |
||||
} |
||||
const data = await getList(removeNullField(params)) |
||||
tableList.value = data |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,195 @@ |
||||
<template> |
||||
<ContentWrap> |
||||
<div class="flex items-center"> |
||||
<span class="mr-20px">成交概况</span> |
||||
<el-dropdown> |
||||
<el-button size="small" |
||||
>{{ periodTypeOptions[periodType] }} <Icon icon="ep:arrow-down" |
||||
/></el-button> |
||||
<template #dropdown> |
||||
<el-dropdown-menu> |
||||
<el-dropdown-item |
||||
v-for="(item, index) in periodTypeOptions" |
||||
:key="index" |
||||
@click="handleSearchTotalInfo(index)" |
||||
> |
||||
{{ item }} |
||||
</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
</div> |
||||
<el-row :gutter="20" v-loading="infoLoading"> |
||||
<el-col :span="8" :offset="0"> |
||||
<div class="statistic-card"> |
||||
<el-statistic :value="totalData.signNumber" title="成交数" /> |
||||
<div |
||||
class="statistic-footer" |
||||
:class="periodType != 4 ? 'justify-between' : 'justify-center'" |
||||
> |
||||
<div class="footer-item"> |
||||
<span>环比</span> |
||||
<span :class="getColor(totalData.signNumberSequentialGrowth)"> |
||||
{{ totalData.signNumberSequentialGrowth }}% |
||||
<Icon class="ml-2px" :icon="getIcon(totalData.signNumberSequentialGrowth)" /> |
||||
</span> |
||||
</div> |
||||
<div class="footer-item" v-if="periodType != 4"> |
||||
<span>同比</span> |
||||
<span :class="getColor(totalData.signNumberPeriodCompareGrowth)"> |
||||
{{ totalData.signNumberPeriodCompareGrowth }}% |
||||
<Icon class="ml-2px" :icon="getIcon(totalData.signNumberPeriodCompareGrowth)" /> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="8" :offset="0"> |
||||
<div class="statistic-card"> |
||||
<el-statistic :value="totalData.signPrice" title="成交额" :precision="2" /> |
||||
<div |
||||
class="statistic-footer" |
||||
:class="periodType != 4 ? 'justify-between' : 'justify-center'" |
||||
> |
||||
<div class="footer-item"> |
||||
<span>环比</span> |
||||
<span :class="getColor(totalData.signPriceSequentialGrowth)"> |
||||
{{ totalData.signPriceSequentialGrowth }}% |
||||
<Icon class="ml-2px" :icon="getIcon(totalData.signPriceSequentialGrowth)" /> |
||||
</span> |
||||
</div> |
||||
<div class="footer-item" v-if="periodType != 4"> |
||||
<span>同比</span> |
||||
<span :class="getColor(totalData.signPriceSamePeriodCompareGrowth)"> |
||||
{{ totalData.signPriceSamePeriodCompareGrowth }}% |
||||
<Icon class="ml-2px" :icon="getIcon(totalData.signPriceSamePeriodCompareGrowth)" /> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="8" :offset="0"> |
||||
<div class="statistic-card"> |
||||
<el-statistic :value="totalData.profit" title="利润" :precision="2" /> |
||||
<div |
||||
class="statistic-footer" |
||||
:class="periodType != 4 ? 'justify-between' : 'justify-center'" |
||||
> |
||||
<div class="footer-item"> |
||||
<span>环比</span> |
||||
<span :class="getColor(totalData.profitSequentialGrowth)"> |
||||
{{ totalData.profitSequentialGrowth }}% |
||||
<Icon class="ml-2px" :icon="getIcon(totalData.profitSequentialGrowth)" /> |
||||
</span> |
||||
</div> |
||||
<div class="footer-item" v-if="periodType != 4"> |
||||
<span>同比</span> |
||||
<span :class="getColor(totalData.profitSamePeriodCompareGrowth)"> |
||||
{{ totalData.profitSamePeriodCompareGrowth }}% |
||||
<Icon class="ml-2px" :icon="getIcon(totalData.profitSamePeriodCompareGrowth)" /> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</ContentWrap> |
||||
</template> |
||||
|
||||
<script setup name="SignTotalCard"> |
||||
import { getInfo } from '@/api/home/reportSignDetail' |
||||
|
||||
const periodTypeOptions = ['本日', '本周', '本月', '本季', '本年'] |
||||
|
||||
const periodType = ref(2) |
||||
const totalData = ref({}) |
||||
|
||||
onMounted(() => { |
||||
handleSearchTotalInfo(2) |
||||
}) |
||||
|
||||
const infoLoading = ref(false) |
||||
async function handleSearchTotalInfo(index) { |
||||
periodType.value = index |
||||
infoLoading.value = true |
||||
try { |
||||
const data = await getInfo({ periodType: periodType.value + 1 }) |
||||
totalData.value = data |
||||
} finally { |
||||
infoLoading.value = false |
||||
} |
||||
} |
||||
|
||||
function getIcon(val) { |
||||
if (val > 0) { |
||||
return 'ep:caret-top' |
||||
} else if (val < 0) { |
||||
return 'ep:caret-bottom' |
||||
} else { |
||||
return 'ep:minus' |
||||
} |
||||
} |
||||
|
||||
function getColor(val) { |
||||
if (val > 0) { |
||||
return 'green' |
||||
} else if (val < 0) { |
||||
return 'red' |
||||
} else { |
||||
return 'gley' |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.el-col { |
||||
text-align: center; |
||||
} |
||||
:global(h2#card-usage ~ .example .example-showcase) { |
||||
background-color: var(--el-fill-color) !important; |
||||
} |
||||
|
||||
.el-statistic { |
||||
--el-statistic-content-font-size: 28px; |
||||
} |
||||
|
||||
.statistic-card { |
||||
height: 100%; |
||||
// padding: 20px; |
||||
border-radius: 4px; |
||||
background-color: var(--el-bg-color-overlay); |
||||
} |
||||
|
||||
.statistic-footer { |
||||
margin: 16px auto 0; |
||||
display: flex; |
||||
// justify-content: space-between; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
font-size: 12px; |
||||
color: var(--el-text-color-regular); |
||||
width: 300px; |
||||
} |
||||
|
||||
.statistic-footer .footer-item { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.statistic-footer .footer-item span:last-child { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin-left: 4px; |
||||
} |
||||
|
||||
.green { |
||||
color: var(--el-color-success); |
||||
} |
||||
.gley { |
||||
color: var(--el-color-info); |
||||
} |
||||
.red { |
||||
color: var(--el-color-error); |
||||
} |
||||
</style> |
||||
@ -1,7 +1,13 @@ |
||||
<template> |
||||
<div>成交报表</div> |
||||
<div> |
||||
<SignTotalCard /> |
||||
<SignListCard /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup></script> |
||||
<script setup name="SignReport"> |
||||
import SignTotalCard from './Comp/SignTotalCard.vue' |
||||
import SignListCard from './Comp/SignListCard.vue' |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
|
||||
Loading…
Reference in new issue