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> |
|||
<div class="main-container"> |
|||
<div class="main-container" v-loading="loading"> |
|||
<!-- 实时概况 --> |
|||
<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> |
|||
<span class="text-lg font-extrabold mr-[10px]">一、年度业绩情况</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> |
|||
<el-col :span="12"> |
|||
<span class="text-sm">{{list.year}}年年度业绩完成情况</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.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> |
|||
</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> |
|||
<el-col :span="12"> |
|||
<span class="text-sm">{{list.year}}年年度月卡续费完成情况</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.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> |
|||
</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> |
|||
</el-row> |
|||
</el-card> |
|||
|
|||
|
|||
|
|||
<el-card shadow="never" class="!border-none"> |
|||
|
|||
<template #header> |
|||
<span class="text-lg font-extrabold mr-[10px]">二、月度(校区)业绩情况</span> |
|||
</template> |
|||
</el-statistic> |
|||
|
|||
<div class="text-sm text-[#a19f98] leading-8"> |
|||
<span>昨日新增</span> |
|||
<span>{{info.customerResources_day_count}}</span> |
|||
</div> |
|||
|
|||
<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_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> |
|||
|
|||
|
|||
</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> |
|||
<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> |
|||
<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> |
|||
|
|||
|
|||
</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> |
|||
</el-statistic> |
|||
<div class="text-sm text-[#a19f98] leading-8"> |
|||
<span>昨日新增</span> |
|||
<span>{{info.student_day_count}}</span> |
|||
</div> |
|||
|
|||
|
|||
<el-row :gutter="20"> |
|||
<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> |
|||
</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> |
|||
|
|||
|
|||
</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> |
|||
<!-- 实时概况 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> |
|||
<span class="text-lg font-extrabold mr-[10px]">四、资源及到访情况</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> |
|||
|
|||
|
|||
<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 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> |
|||
</el-card> |
|||
</el-col> |
|||
|
|||
|
|||
|
|||
|
|||
</el-row> |
|||
</el-card> |
|||
|
|||
</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) // 加载新数据 |
|||
} |
|||
</template> |
|||
|
|||
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(''); |
|||
<script setup> |
|||
import PerformanceTable from '@/app/views/statistics/components/PerformanceTable.vue' |
|||
import { |
|||
getHome |
|||
} from '@/app/api/sys' |
|||
import { |
|||
ref, |
|||
reactive |
|||
} from 'vue' |
|||
|
|||
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) => { |
|||
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: [] |
|||
} |
|||
] |
|||
}) |
|||
list.wx_summary_list = res.data.wx_summary_list |
|||
list.xf_summary_list = res.data.xf_summary_list |
|||
list.xf_jl_summary_list = res.data.xf_jl_summary_list |
|||
|
|||
|
|||
visitStatOption.value.xAxis.data = info.customer.time |
|||
visitStatOption.value.series[0].data = value |
|||
list.zy_complete_rate = res.data.zy_complete_rate |
|||
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