<template> <div> <el-card shadow="never"> <el-skeleton :loading="loading" animated> <el-row :gutter="20" justify="space-between"> <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <div class="flex items-center"> <img :src="avatar" alt="" class="w-40px h-40px rounded-[50%] mr-20px" /> <div class="text-20px text-700"> {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }} </div> </div> </el-col> <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <div class="flex h-40px items-center justify-end <sm:mt-10px"> <div class="px-8px text-right"> <div class="text-14px text-gray-400 mb-20px">今日待跟进</div> <CountTo class="text-20px number-font" :start-val="0" :end-val="clueInfo.todayFollowingNum" :duration="2600" /> </div> <el-divider direction="vertical" border-style="dashed" /> <div class="px-8px text-right"> <div class="text-14px text-gray-400 mb-20px">今日已跟进</div> <CountTo class="text-20px number-font" :start-val="0" :end-val="clueInfo.todayFollowedNum" :duration="2600" /> </div> <el-divider direction="vertical" border-style="dashed" /> <div class="px-8px text-right"> <div class="text-14px text-gray-400 mb-20px">今日已成交</div> <CountTo class="text-20px number-font" :start-val="0" :end-val="clueInfo.todaySignedNum" :duration="2600" /> </div> <el-divider direction="vertical" border-style="dashed" /> <div class="px-8px text-right"> <div class="text-14px text-gray-400 mb-20px">剩余过期数</div> <CountTo class="text-20px number-font" :start-val="0" :end-val="clueInfo.outFollowNum" :duration="2600" /> </div> <el-divider direction="vertical" border-style="dashed" /> <div class="px-8px text-right"> <div class="text-14px text-red-600 mb-20px">未知意向数</div> <CountTo class="text-20px number-font" :start-val="0" :end-val="clueInfo.unknownNum" :duration="2600" /> </div> </div> </el-col> </el-row> </el-skeleton> </el-card> <div class="mt-10px flex" style="flex-wrap: wrap"> <el-card shadow="never" :class="mobile ? 'w-full mb-10px' : 'flex-1'"> <template #header> <div class="flex justify-between"> <span>成交率</span> </div> </template> <el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated> <Echart :options="lineOptionsData" :height="280" /> </el-skeleton> </el-skeleton> </el-card> <el-card shadow="never" :class="mobile ? 'flex-1' : 'ml-10px'"> <template #header> <div class="flex justify-between items-center"> <span>跟进榜Top10</span> <el-radio-group v-model="followDate" size="small" @change="getFollowList"> <el-radio :label="1">本日</el-radio> <el-radio :label="2">本月</el-radio> </el-radio-group> </div> </template> <el-skeleton :loading="loading" animated> <ul class="follow-wrap"> <!-- <TransitionGroup name="flip"> --> <li class="follow-item number-font mb-18px text-14px" v-for="(item, index) in followList" :key="index" > <span class="mr-10px">NO.{{ index + 1 }}</span> <span class="mr-10px">{{ item.username }}</span> <span>已跟进{{ item.followNum }}条线索</span> </li> <!-- <br /> --> <!-- </TransitionGroup> --> </ul> </el-skeleton> </el-card> <el-card shadow="never" :class="mobile ? 'flex-1 ml-10px' : 'ml-10px'"> <template #header> <div class="flex justify-between"> 本月成交榜Top10 </div> </template> <el-skeleton :loading="loading" animated> <el-table :data="signList" size="small"> <el-table-column type="index" width="40" /> <el-table-column prop="username" label="姓名" width="80" /> <el-table-column prop="followNum" label="成交数量" width="90" sortable /> <el-table-column prop="signPrice" label="成交额" min-width="90" sortable /> <el-table-column prop="deptName" label="所属组织" width="150" /> </el-table> </el-skeleton> </el-card> </div> <!-- <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" class="mb-10px"> <el-card shadow="never"> <template #header> <div class="flex justify-between "> <span>本月成交来源</span> </div> </template> <el-skeleton :loading="loading" animated> <Echart :options="pieOptionsData" :height="280" /> </el-skeleton> </el-card> </el-col> --> </div> </template> <script setup lang="ts" name="Home"> import { set } from 'lodash-es' import { EChartsOption } from 'echarts' import { useUserStore } from '@/store/modules/user' import avatarImg from '@/assets/imgs/avatar.gif' import { lineOptions } from './echarts-data' import * as HomeApi from '@/api/home/index' import { useAppStore } from '@/store/modules/app' const { t } = useI18n() const userStore = useUserStore() const appStore = useAppStore() const loading = ref(false) const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg const username = userStore.getUser.nickname const mobile = appStore.getMobile const followDate = ref(1) // 成交线索来源 // const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption // const getSaleClueSource = async () => { // const data = [ // { value: 335, name: '宝典' }, // { value: 310, name: '一点通' }, // { value: 234, name: '抖音' }, // { value: 135, name: '小红书' }, // { value: 1548, name: '转介绍' } // ] // set( // pieOptionsData, // 'legend.data', // data.map((v) => t(v.name)) // ) // pieOptionsData!.series![0].data = data.map((v) => { // return { // name: t(v.name), // value: v.value // } // }) // } // 成交率 const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption const getMonthlySaleRate = async () => { const data = await HomeApi.getClueSignSignRate() set( lineOptionsData, 'xAxis.data', data.map((v) => t(v.month)) ) set(lineOptionsData, 'series', [ { name: '个人成交率', smooth: true, type: 'line', data: data.map((v) => v.personalRate), animationDuration: 2800, animationEasing: 'cubicInOut' }, { name: '平均成交率', smooth: true, type: 'line', itemStyle: {}, data: data.map((v) => v.avgRate), animationDuration: 2800, animationEasing: 'quadraticOut' } ]) } const followList = ref<any>([]) const clueInfo = ref({ todayFollowingNum: 0, todayFollowedNum: 0, todaySignedNum: 0, outFollowNum: 0, unknownNum: 0 }) function getClueInfo() { HomeApi.getUserClueCount().then((data) => { clueInfo.value = data }) } function getFollowList() { HomeApi.getClueFollowRank({ type: followDate.value }).then((data) => { followList.value = data }) } const signList = ref([]) function getSignList() { HomeApi.getClueSignSignRank().then((data) => { signList.value = data }) } const getAllApi = async () => { await Promise.all([getClueInfo(), getSignList(), getMonthlySaleRate(), getFollowList()]) loading.value = false } onMounted(() => { getAllApi() }) </script> <style lang="scss" scoped> @font-face { font-family: numberFont; src: url('@/assets/fonts/DISPLAY FREE TFB.ttf'); } .number-font { font-family: numberFont !important; } :deep(.el-card__header) { padding: 10px; } </style>