11 changed files with 1014 additions and 151 deletions
@ -0,0 +1,46 @@ |
|||||
|
<template> |
||||
|
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
|
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
|
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
|
<tr> |
||||
|
<th v-for="(col, i) in columns" :key="i" class="px-4 py-2 border"> |
||||
|
{{ col }} |
||||
|
</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr |
||||
|
v-for="(row, rIndex) in rows" |
||||
|
:key="rIndex" |
||||
|
class="hover:bg-gray-50" |
||||
|
> |
||||
|
<td v-for="(col, cIndex) in columns" :key="cIndex" class="px-4 py-2 border"> |
||||
|
{{ row[cIndex] || '0' }} |
||||
|
</td> |
||||
|
</tr> |
||||
|
|
||||
|
<!-- 合计行 --> |
||||
|
<tr v-if="showTotalRow" class="bg-gray-50 font-semibold text-gray-900"> |
||||
|
<td v-for="(col, cIndex) in columns" :key="cIndex" class="px-4 py-2 border"> |
||||
|
{{ totalRow[col] || (cIndex === 0 ? '合计' : '') }} |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
defineProps({ |
||||
|
columns: Array, |
||||
|
rows: Array, |
||||
|
showTotalRow: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
totalRow: { |
||||
|
type: Object, |
||||
|
default: () => ({}), |
||||
|
}, |
||||
|
}) |
||||
|
</script> |
||||
@ -1,188 +1,433 @@ |
|||||
<template> |
<template> |
||||
<div class="main-container"> |
<div class="main-container" v-loading="loading"> |
||||
<!-- 实时概况 --> |
<!-- 实时概况 --> |
||||
<el-card shadow="never" class="!border-none"> |
<el-card shadow="never" class="!border-none"> |
||||
|
|
||||
<template #header> |
<template #header> |
||||
<span class="text-lg font-extrabold mr-[10px]">统计概括</span> |
<span class="text-lg font-extrabold mr-[10px]">一、年度业绩情况</span> |
||||
<span class="text-sm text-[#a19f98]">查看校区、员工、资源和学员的实时数据</span> |
|
||||
</template> |
</template> |
||||
|
|
||||
|
|
||||
<el-row :gutter="20"> |
<el-row :gutter="20"> |
||||
<el-col :span="6"> |
<el-col :span="12"> |
||||
<div class="text-sm text-[#a19f98] leading-8 "> |
<span class="text-sm">{{list.year}}年年度业绩完成情况</span> |
||||
<el-statistic :value="info.campus_count"> |
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
<template #title> |
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
<div style="display: inline-flex; align-items: center"> |
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
<span class="mr-[5px]">校区数量</span> |
<tr> |
||||
|
<th class="px-4 py-2 border">序号</th> |
||||
|
<th class="px-4 py-2 border">校区</th> |
||||
|
<th class="px-4 py-2 border">任务</th> |
||||
|
<th class="px-4 py-2 border">完成</th> |
||||
|
<th class="px-4 py-2 border">完成率</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, rIndex) in list.campus_list" :key="rIndex" class="hover:bg-gray-50"> |
||||
|
<td class="px-4 py-2 border">{{rIndex+1}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.campus_name}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.year_task_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.year_complete_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.complete}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td class="px-4 py-2 border">合计</td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border">{{list.complete_rate}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
</tbody> |
||||
|
</table> |
||||
</div> |
</div> |
||||
</template> |
|
||||
</el-statistic> |
|
||||
<div class="text-sm text-[#a19f98] leading-8"> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
</el-col> |
||||
|
|
||||
<el-col :span="6"> |
<el-col :span="12"> |
||||
<div class="text-sm text-[#a19f98] leading-8 "> |
<span class="text-sm">{{list.year}}年年度月卡续费完成情况</span> |
||||
<el-statistic :value="info.personnel_count"> |
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
<template #title> |
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
<div style="display: inline-flex; align-items: center"> |
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
<span class="mr-[5px]">员工数量</span> |
<tr> |
||||
|
<th class="px-4 py-2 border">序号</th> |
||||
|
<th class="px-4 py-2 border">校区</th> |
||||
|
<th class="px-4 py-2 border">到期</th> |
||||
|
<th class="px-4 py-2 border">续费</th> |
||||
|
<th class="px-4 py-2 border">续费率</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, rIndex) in list.campus_list" :key="rIndex" class="hover:bg-gray-50"> |
||||
|
<td class="px-4 py-2 border">{{rIndex+1}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.campus_name}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.year_expire_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.year_renew_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.xf_complete}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td class="px-4 py-2 border">合计</td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border">{{list.xf_complete_rate}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
</tbody> |
||||
|
</table> |
||||
</div> |
</div> |
||||
</template> |
|
||||
</el-statistic> |
|
||||
|
|
||||
<div class="text-sm text-[#a19f98] leading-8"> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
</el-col> |
||||
|
|
||||
<el-col :span="6"> |
</el-row> |
||||
<div class="text-sm text-[#a19f98] leading-8 "> |
</el-card> |
||||
<el-statistic :value="info.customerResources_count"> |
|
||||
<template #title> |
|
||||
<div style="display: inline-flex; align-items: center"> |
|
||||
<span class="mr-[5px]">资源数量</span> |
<el-card shadow="never" class="!border-none"> |
||||
</div> |
|
||||
|
<template #header> |
||||
|
<span class="text-lg font-extrabold mr-[10px]">二、月度(校区)业绩情况</span> |
||||
</template> |
</template> |
||||
</el-statistic> |
|
||||
|
|
||||
<div class="text-sm text-[#a19f98] leading-8"> |
|
||||
<span>昨日新增</span> |
<el-row :gutter="20"> |
||||
<span>{{info.customerResources_day_count}}</span> |
<el-col :span="12"> |
||||
</div> |
<span class="text-sm">{{list.month}}月业绩完成情况</span> |
||||
|
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
|
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
|
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
|
<tr> |
||||
|
<th class="px-4 py-2 border">序号</th> |
||||
|
<th class="px-4 py-2 border">校区</th> |
||||
|
<th class="px-4 py-2 border">任务</th> |
||||
|
<th class="px-4 py-2 border">完成</th> |
||||
|
<th class="px-4 py-2 border">完成率</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, rIndex) in list.campus_list" :key="rIndex" class="hover:bg-gray-50"> |
||||
|
<td class="px-4 py-2 border">{{rIndex+1}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.campus_name}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_task_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_complete_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_complete}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td class="px-4 py-2 border">合计</td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border">{{list.month_complete_rate}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
</tbody> |
||||
|
</table> |
||||
</div> |
</div> |
||||
|
|
||||
|
|
||||
</el-col> |
</el-col> |
||||
|
|
||||
<el-col :span="6"> |
<el-col :span="12"> |
||||
<div class="text-sm text-[#a19f98] leading-8 "> |
<span class="text-sm">{{list.month}}月月卡续费完成情况</span> |
||||
<el-statistic :value="info.student_count"> |
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
<template #title> |
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
<div style="display: inline-flex; align-items: center"> |
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
<span class="mr-[5px]">学员数量</span> |
<tr> |
||||
|
<th class="px-4 py-2 border">序号</th> |
||||
|
<th class="px-4 py-2 border">校区</th> |
||||
|
<th class="px-4 py-2 border">到期</th> |
||||
|
<th class="px-4 py-2 border">续费</th> |
||||
|
<th class="px-4 py-2 border">续费率</th> |
||||
|
<th class="px-4 py-2 border">流失率</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, rIndex) in list.campus_list" :key="rIndex" class="hover:bg-gray-50"> |
||||
|
<td class="px-4 py-2 border">{{rIndex+1}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.campus_name}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_expire_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_renew_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_xf_complete}}%</td> |
||||
|
<td class="px-4 py-2 border">{{row.ls_month_xf_complete}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td class="px-4 py-2 border">合计</td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border">{{list.month_xf_complete_rate}}%</td> |
||||
|
<td class="px-4 py-2 border">{{list.ls_month_xf_complete_rate}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
</tbody> |
||||
|
</table> |
||||
</div> |
</div> |
||||
|
|
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
|
||||
|
|
||||
|
<el-card shadow="never" class="!border-none"> |
||||
|
|
||||
|
<template #header> |
||||
|
<span class="text-lg font-extrabold mr-[10px]">三、月度(个人)业绩情况</span> |
||||
</template> |
</template> |
||||
</el-statistic> |
|
||||
<div class="text-sm text-[#a19f98] leading-8"> |
|
||||
<span>昨日新增</span> |
<el-row :gutter="20"> |
||||
<span>{{info.student_day_count}}</span> |
<el-col :span="8"> |
||||
</div> |
<span class="text-sm">{{list.month}}月销售业绩完成排名 </span> |
||||
|
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
|
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
|
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
|
<tr> |
||||
|
<th class="px-4 py-2 border">序号</th> |
||||
|
<th class="px-4 py-2 border">销售</th> |
||||
|
<th class="px-4 py-2 border">月度</th> |
||||
|
<th class="px-4 py-2 border">年度</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, rIndex) in list.wx_summary_list" :key="rIndex" |
||||
|
class="hover:bg-gray-50"> |
||||
|
<td class="px-4 py-2 border">{{rIndex+1}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.name}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.complete_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.year_complete_num}}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
</div> |
</div> |
||||
|
|
||||
|
|
||||
</el-col> |
</el-col> |
||||
|
|
||||
|
<el-col :span="8"> |
||||
|
<span class="text-sm">{{list.month}}月销售月卡续费完成排名</span> |
||||
|
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
|
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
|
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
|
<tr> |
||||
|
<th class="px-4 py-2 border">序号</th> |
||||
|
<th class="px-4 py-2 border">销售</th> |
||||
|
<th class="px-4 py-2 border">到期</th> |
||||
|
<th class="px-4 py-2 border">续费</th> |
||||
|
<th class="px-4 py-2 border">续费率</th> |
||||
|
<th class="px-4 py-2 border">流失率</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, rIndex) in list.xf_summary_list" :key="rIndex" |
||||
|
class="hover:bg-gray-50"> |
||||
|
<td class="px-4 py-2 border">{{rIndex+1}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.name}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.expire_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.renew_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.xf_complete}}%</td> |
||||
|
<td class="px-4 py-2 border">{{row.ls_xf_complete}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
|
||||
</el-row> |
|
||||
|
|
||||
|
<el-col :span="8"> |
||||
|
<span class="text-sm">{{list.month}}月教练月卡续费完成排名</span> |
||||
|
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
|
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
|
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
|
<tr> |
||||
|
<th class="px-4 py-2 border">序号</th> |
||||
|
<th class="px-4 py-2 border">教练</th> |
||||
|
<th class="px-4 py-2 border">到期</th> |
||||
|
<th class="px-4 py-2 border">续费</th> |
||||
|
<th class="px-4 py-2 border">续费率</th> |
||||
|
<th class="px-4 py-2 border">流失率</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, rIndex) in list.xf_jl_summary_list" :key="rIndex" |
||||
|
class="hover:bg-gray-50"> |
||||
|
<td class="px-4 py-2 border">{{rIndex+1}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.name}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.expire_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.renew_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.xf_complete}}%</td> |
||||
|
<td class="px-4 py-2 border">{{row.ls_xf_complete}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
|
||||
|
</el-row> |
||||
</el-card> |
</el-card> |
||||
<!-- 实时概况 end --> |
|
||||
|
|
||||
|
|
||||
<el-row :gutter="15" class="mt-[15px]"> |
|
||||
<el-col :span="24"> |
|
||||
<el-card shadow="never" class="!border-none"> |
<el-card shadow="never" class="!border-none"> |
||||
|
|
||||
<template #header> |
<template #header> |
||||
<span class="text-lg font-extrabold">资源增长趋势</span> |
<span class="text-lg font-extrabold mr-[10px]">四、资源及到访情况</span> |
||||
</template> |
</template> |
||||
<div > |
|
||||
<el-button :type="activeRange === 'week' ? 'primary' : 'default'" size="small" |
|
||||
@click="changeRange('week')">周</el-button> |
|
||||
<el-button :type="activeRange === 'month' ? 'primary' : 'default'" size="small" |
|
||||
@click="changeRange('month')">月</el-button> |
|
||||
<el-button :type="activeRange === 'year' ? 'primary' : 'default'" size="small" |
|
||||
@click="changeRange('year')">年</el-button> |
|
||||
|
|
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<span class="text-sm">{{list.month}}月资源完成情况</span> |
||||
|
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
|
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
|
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
|
<tr> |
||||
|
<th class="px-4 py-2 border">序号</th> |
||||
|
<th class="px-4 py-2 border">校区</th> |
||||
|
<th class="px-4 py-2 border">任务</th> |
||||
|
<th class="px-4 py-2 border">完成</th> |
||||
|
<th class="px-4 py-2 border">完成率</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, rIndex) in list.campus_list" :key="rIndex" class="hover:bg-gray-50"> |
||||
|
<td class="px-4 py-2 border">{{rIndex+1}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.campus_name}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_task_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_zy_complete_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_zy_complete}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td class="px-4 py-2 border">合计</td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border">{{list.zy_complete_rate}}%</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
</div> |
</div> |
||||
|
|
||||
<div ref="visitStat" :style="{ width: '100%', height: '300px' }"> |
|
||||
|
|
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="12"> |
||||
|
<span class="text-sm">{{list.month}}月资源到访情况</span> |
||||
|
<div class="overflow-x-auto shadow-lg rounded-xl border border-gray-200 mb-6"> |
||||
|
<table class="min-w-full text-sm text-left text-gray-700"> |
||||
|
<thead class="bg-gray-100 text-gray-800 uppercase tracking-wider"> |
||||
|
<tr> |
||||
|
<th class="px-4 py-2 border">序号</th> |
||||
|
<th class="px-4 py-2 border">校区</th> |
||||
|
<th class="px-4 py-2 border">资源</th> |
||||
|
<th class="px-4 py-2 border">到访</th> |
||||
|
<th class="px-4 py-2 border">到访率</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, rIndex) in list.campus_list" :key="rIndex" class="hover:bg-gray-50"> |
||||
|
<td class="px-4 py-2 border">{{rIndex+1}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.campus_name}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_resource_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.month_visit_num}}</td> |
||||
|
<td class="px-4 py-2 border">{{row.visit_num_rate}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
<tr> |
||||
|
<td class="px-4 py-2 border">合计</td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border"></td> |
||||
|
<td class="px-4 py-2 border">{{list.zy_visit_complete_rate}}%</td> |
||||
|
</tr> |
||||
|
|
||||
|
</tbody> |
||||
|
</table> |
||||
</div> |
</div> |
||||
</el-card> |
|
||||
</el-col> |
</el-col> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
</el-row> |
</el-row> |
||||
|
</el-card> |
||||
|
|
||||
</div> |
</div> |
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { ref, reactive } from 'vue' |
|
||||
import { getHome } from '@/app/api/sys' |
|
||||
import * as echarts from 'echarts' |
|
||||
const visitStat = ref<any>(null) |
|
||||
const activeRange = ref<'week' | 'month' | 'year'>('week') |
|
||||
|
|
||||
const info = reactive({ |
|
||||
campus_count: 0, |
|
||||
personnel_count: 0, |
|
||||
customerResources_count: 0, |
|
||||
customerResources_day_count: 0, |
|
||||
student_count: 0, |
|
||||
student_day_count: 0, |
|
||||
customer: [] |
|
||||
}) |
|
||||
|
|
||||
const changeRange = (range) => { |
</template> |
||||
activeRange.value = range |
|
||||
Init(range) // 加载新数据 |
|
||||
} |
|
||||
|
|
||||
const Init = (range) => { |
|
||||
|
|
||||
getHome({'date':range}) |
<script setup> |
||||
.then((res) => { |
import PerformanceTable from '@/app/views/statistics/components/PerformanceTable.vue' |
||||
info.campus_count = res.data.campus_count |
import { |
||||
info.personnel_count = res.data.personnel_count |
getHome |
||||
info.customerResources_count = res.data.customerResources_count |
} from '@/app/api/sys' |
||||
info.customerResources_day_count = res.data.customerResources_day_count |
import { |
||||
info.student_count = res.data.student_count |
ref, |
||||
info.student_day_count = res.data.student_day_count |
reactive |
||||
info.customer = res.data.customer |
} from 'vue' |
||||
drawChart(''); |
|
||||
|
const loading = ref(true); |
||||
|
|
||||
|
const list = reactive({ |
||||
|
year: '', |
||||
|
month: '', |
||||
|
campus_list: [], |
||||
|
complete_rate: '', |
||||
|
xf_complete_rate: '', |
||||
|
month_complete_rate: '', |
||||
|
month_xf_complete_rate: '', |
||||
|
ls_month_xf_complete_rate: '', |
||||
|
wx_summary_list: [], |
||||
|
xf_summary_list: [], |
||||
|
xf_jl_summary_list: [], |
||||
|
zy_complete_rate: '', |
||||
|
zy_visit_complete_rate: '' |
||||
}) |
}) |
||||
.catch(() => { |
|
||||
|
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
Init(); |
const Init = (range) => { |
||||
|
loading.value = true |
||||
|
getHome({ |
||||
|
'date': '' |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
list.year = res.data.year |
||||
|
list.month = res.data.month |
||||
|
list.campus_list = res.data.campus_list |
||||
|
list.complete_rate = res.data.complete_rate |
||||
|
list.xf_complete_rate = res.data.xf_complete_rate |
||||
|
|
||||
|
list.month_complete_rate = res.data.month_complete_rate |
||||
|
list.month_xf_complete_rate = res.data.month_xf_complete_rate |
||||
|
list.ls_month_xf_complete_rate = res.data.ls_month_xf_complete_rate |
||||
|
|
||||
const drawChart = (item : any) => { |
list.wx_summary_list = res.data.wx_summary_list |
||||
let value = info.customer.value |
list.xf_summary_list = res.data.xf_summary_list |
||||
if (item) value = item |
list.xf_jl_summary_list = res.data.xf_jl_summary_list |
||||
if (!visitStat.value) return |
|
||||
|
|
||||
|
|
||||
const visitStatChart = echarts.init(visitStat.value) |
|
||||
const visitStatOption = ref({ |
|
||||
// title: { |
|
||||
// text: '订单量趋势' |
|
||||
// }, |
|
||||
legend: {}, |
|
||||
xAxis: { |
|
||||
data: [] |
|
||||
}, |
|
||||
yAxis: {}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis' |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
type: 'line', |
|
||||
data: [] |
|
||||
} |
|
||||
] |
|
||||
}) |
|
||||
|
|
||||
|
|
||||
visitStatOption.value.xAxis.data = info.customer.time |
list.zy_complete_rate = res.data.zy_complete_rate |
||||
visitStatOption.value.series[0].data = value |
list.zy_visit_complete_rate = res.data.zy_visit_complete_rate |
||||
|
|
||||
visitStatChart.setOption(visitStatOption.value) |
loading.value = false |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
loading.value = false |
||||
|
}) |
||||
} |
} |
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped></style> |
Init(); |
||||
|
</script> |
||||
@ -0,0 +1,188 @@ |
|||||
|
<template> |
||||
|
<div class="main-container"> |
||||
|
<!-- 实时概况 --> |
||||
|
<el-card shadow="never" class="!border-none"> |
||||
|
|
||||
|
<template #header> |
||||
|
<span class="text-lg font-extrabold mr-[10px]">统计概括</span> |
||||
|
<span class="text-sm text-[#a19f98]">查看校区、员工、资源和学员的实时数据</span> |
||||
|
</template> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="6"> |
||||
|
<div class="text-sm text-[#a19f98] leading-8 "> |
||||
|
<el-statistic :value="info.campus_count"> |
||||
|
<template #title> |
||||
|
<div style="display: inline-flex; align-items: center"> |
||||
|
<span class="mr-[5px]">校区数量</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-statistic> |
||||
|
<div class="text-sm text-[#a19f98] leading-8"> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="6"> |
||||
|
<div class="text-sm text-[#a19f98] leading-8 "> |
||||
|
<el-statistic :value="info.personnel_count"> |
||||
|
<template #title> |
||||
|
<div style="display: inline-flex; align-items: center"> |
||||
|
<span class="mr-[5px]">员工数量</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-statistic> |
||||
|
|
||||
|
<div class="text-sm text-[#a19f98] leading-8"> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="6"> |
||||
|
<div class="text-sm text-[#a19f98] leading-8 "> |
||||
|
<el-statistic :value="info.customerResources_count"> |
||||
|
<template #title> |
||||
|
<div style="display: inline-flex; align-items: center"> |
||||
|
<span class="mr-[5px]">资源数量</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-statistic> |
||||
|
|
||||
|
<div class="text-sm text-[#a19f98] leading-8"> |
||||
|
<span>昨日新增</span> |
||||
|
<span>{{info.customerResources_day_count}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="6"> |
||||
|
<div class="text-sm text-[#a19f98] leading-8 "> |
||||
|
<el-statistic :value="info.student_count"> |
||||
|
<template #title> |
||||
|
<div style="display: inline-flex; align-items: center"> |
||||
|
<span class="mr-[5px]">学员数量</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-statistic> |
||||
|
<div class="text-sm text-[#a19f98] leading-8"> |
||||
|
<span>昨日新增</span> |
||||
|
<span>{{info.student_day_count}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
|
||||
|
|
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
</el-card> |
||||
|
<!-- 实时概况 end --> |
||||
|
|
||||
|
|
||||
|
<el-row :gutter="15" class="mt-[15px]"> |
||||
|
<el-col :span="24"> |
||||
|
<el-card shadow="never" class="!border-none"> |
||||
|
<template #header> |
||||
|
<span class="text-lg font-extrabold">资源增长趋势</span> |
||||
|
</template> |
||||
|
<div > |
||||
|
<el-button :type="activeRange === 'week' ? 'primary' : 'default'" size="small" |
||||
|
@click="changeRange('week')">周</el-button> |
||||
|
<el-button :type="activeRange === 'month' ? 'primary' : 'default'" size="small" |
||||
|
@click="changeRange('month')">月</el-button> |
||||
|
<el-button :type="activeRange === 'year' ? 'primary' : 'default'" size="small" |
||||
|
@click="changeRange('year')">年</el-button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div ref="visitStat" :style="{ width: '100%', height: '300px' }"> |
||||
|
|
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { ref, reactive } from 'vue' |
||||
|
import { getHome } from '@/app/api/sys' |
||||
|
import * as echarts from 'echarts' |
||||
|
const visitStat = ref<any>(null) |
||||
|
const activeRange = ref<'week' | 'month' | 'year'>('week') |
||||
|
|
||||
|
const info = reactive({ |
||||
|
campus_count: 0, |
||||
|
personnel_count: 0, |
||||
|
customerResources_count: 0, |
||||
|
customerResources_day_count: 0, |
||||
|
student_count: 0, |
||||
|
student_day_count: 0, |
||||
|
customer: [] |
||||
|
}) |
||||
|
|
||||
|
const changeRange = (range) => { |
||||
|
activeRange.value = range |
||||
|
Init(range) // 加载新数据 |
||||
|
} |
||||
|
|
||||
|
const Init = (range) => { |
||||
|
|
||||
|
getHome({'date':range}) |
||||
|
.then((res) => { |
||||
|
info.campus_count = res.data.campus_count |
||||
|
info.personnel_count = res.data.personnel_count |
||||
|
info.customerResources_count = res.data.customerResources_count |
||||
|
info.customerResources_day_count = res.data.customerResources_day_count |
||||
|
info.student_count = res.data.student_count |
||||
|
info.student_day_count = res.data.student_day_count |
||||
|
info.customer = res.data.customer |
||||
|
drawChart(''); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
Init(); |
||||
|
|
||||
|
|
||||
|
const drawChart = (item : any) => { |
||||
|
let value = info.customer.value |
||||
|
if (item) value = item |
||||
|
if (!visitStat.value) return |
||||
|
|
||||
|
|
||||
|
const visitStatChart = echarts.init(visitStat.value) |
||||
|
const visitStatOption = ref({ |
||||
|
// title: { |
||||
|
// text: '订单量趋势' |
||||
|
// }, |
||||
|
legend: {}, |
||||
|
xAxis: { |
||||
|
data: [] |
||||
|
}, |
||||
|
yAxis: {}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'line', |
||||
|
data: [] |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
visitStatOption.value.xAxis.data = info.customer.time |
||||
|
visitStatOption.value.series[0].data = value |
||||
|
|
||||
|
visitStatChart.setOption(visitStatOption.value) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,41 @@ |
|||||
|
<?php |
||||
|
// +---------------------------------------------------------------------- |
||||
|
// | Niucloud-admin 企业快速开发的多应用管理平台 |
||||
|
// +---------------------------------------------------------------------- |
||||
|
// | 官方网址:https://www.niucloud.com |
||||
|
// +---------------------------------------------------------------------- |
||||
|
// | niucloud团队 版权所有 开源版本可自由商用 |
||||
|
// +---------------------------------------------------------------------- |
||||
|
// | Author: Niucloud Team |
||||
|
// +---------------------------------------------------------------------- |
||||
|
|
||||
|
namespace app\model\personnel; |
||||
|
|
||||
|
use core\base\BaseModel; |
||||
|
use think\model\concern\SoftDelete; |
||||
|
use think\model\relation\HasMany; |
||||
|
use think\model\relation\HasOne; |
||||
|
|
||||
|
/** |
||||
|
* 人力资源-人员模型 |
||||
|
* Class Personnel |
||||
|
* @package app\model\personnel |
||||
|
*/ |
||||
|
class PersonnelSummary extends BaseModel |
||||
|
{ |
||||
|
|
||||
|
/** |
||||
|
* 数据表主键 |
||||
|
* @var string |
||||
|
*/ |
||||
|
protected $pk = 'id'; |
||||
|
|
||||
|
/** |
||||
|
* 模型名称 |
||||
|
* @var string |
||||
|
*/ |
||||
|
protected $name = 'personnel_summary'; |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue