mfx/tkNewAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大哥建联统计

Browse Source
This commit is contained in:
pengxiaolong
2025-11-12 18:55:21 +08:00
parent 268b138790
commit 2ef64a6254
7 changed files with 322 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/views/Home/Index.vue
View File

@@ -108,13 +108,45 @@
</el-col>
<el-col v-else :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-8px">
<div>当日建联数量</div>
<div>当日建联主播数量</div>
{{ HostsOperationNum }}
</el-card>
</el-col>
</el-row>
</el-skeleton>
</el-card>
<!-- 当日建联大哥数 -->
<el-card shadow="never" class="mt-8px">
<el-skeleton :loading="loading" animated>
<el-row :gutter="20" justify="space-between">
<el-col
v-if="wsCache.get('roleRouters').find(item => item.id === 1)?.children.find(item => item.id === 100)"
:xl="20" :lg="20" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-8px">
<el-select style="width: 200px;" v-model="daysDsec" @change="updataDaysDsec">
<el-option :value="1" label="当日">当日</el-option>
<el-option :value="7" label="近7日">近7日</el-option>
</el-select>
<el-skeleton :loading="loading" animated>
<Echart style="width: 100%;" :options="barOptionsDataDsec" :height="280" />
</el-skeleton>
</el-card>
</el-col>
<el-col v-else :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-8px">
<div>当日建联大哥数量</div>
{{ HostsOperationNumDsec }}
</el-card>
</el-col>
</el-row>
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
<!-- 快捷入口 -->
@@ -177,7 +209,7 @@ import { formatTime } from '@/utils'
import { useUserStore } from '@/store/modules/user'
// import { useWatermark } from '@/hooks/web/useWatermark'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { pieOptions, barOptions } from './echarts-data'
import { pieOptions, barOptions, bigbrotherbarOptions } from './echarts-data'
import { useRouter } from 'vue-router'
import { getComplete, getEmployeeComplete } from '@/api/system/user'
import { useCache } from '@/hooks/web/useCache'
@@ -185,35 +217,61 @@ import { getSimpleUserListPage, getSimpleUserList } from '@/api/system/user'
import { EmployeeHostsApi } from '@/api/server/employeehosts'
import { ref, reactive, onMounted, onActivated } from 'vue'
import WxMusic from '../mp/components/wx-music'
let HostsOperationNum = ref(0)
let HostsOperationNum = ref(0)//当日建联主播数量
let HostsOperationNumDsec = ref(0)//当日建联大哥数量
let days = ref(1)//当日
let daysDsec = ref(1)//当日
//初始
onMounted(async () => {
await getAllApi()
await getAllocationList()
if (wsCache.get('roleRouters').find(item => item.id === 1)?.children.find(item => item.id === 100)) {
await fetchAllHostsCount(1)
await fetchAllHostsCountDesc(1)
} else {
await fetchDailyHostsCount()
await fetchDailyHostsCountDesc()
}
})
let days = ref(1)
// 每次页面“再次显示”时都会触发（前提：该路由组件被 keep-alive 缓存）
onActivated(async () => {
await fetchDailyHostsCount()
await fetchDailyHostsCountDesc()
await fetchAllHostsCount(1)
await fetchAllHostsCountDesc(1)
})
// 天数切换
async function updataDays(val) {
await fetchAllHostsCount(val)
}
//大哥天数切换
async function updataDaysDsec(val: any) {
await fetchAllHostsCountDesc(val)
}
// import { useGlobalWebSocket } from '@/components/useGlobalWebSocket'
// let messageList = useGlobalWebSocket().messageList
// console.log(messageList.value)
const { wsCache } = useCache()
let allocationUser = ref('') //选中的分配用户
let allocationUserList = ref([
{
label: '分配用户1',
@@ -229,14 +287,23 @@ defineOptions({ name: 'Index' })
// console.log(data)
// const { open } = useGlobalWebSocket()
const { t } = useI18n()
const router = useRouter()
const userStore = useUserStore()
// const { setWatermark } = useWatermark()
const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
project: 0,
@@ -244,6 +311,7 @@ let totalSate = reactive<WorkplaceTotal>({
todo: 0
})
const getCount = async () => {
const data = {
project: 40,
@@ -311,6 +379,7 @@ const getProject = async () => {
// 获取通知公告
let notice = reactive<Notice[]>([])
const getNotice = async () => {
const data = [
// {
@@ -383,14 +452,18 @@ const getShortcut = async () => {
color: '#1a73e8'
}
]
shortcut = Object.assign(shortcut, data)
}
// 用户来源
const getUserAccessSource = async (id) => {
const res = id ? await getEmployeeComplete(id) : await getComplete()
const completeData = res ?? { unfinishedNum: 0, finishedNum: 0 }
console.log('completeData', completeData)
const data = [
{ value: completeData.unfinishedNum, name: 'analysis.noAlliance' },
{ value: completeData.finishedNum, name: 'analysis.alreadyJianlian' },
@@ -398,11 +471,13 @@ const getUserAccessSource = async (id) => {
// { value: 135, name: 'analysis.videoAdvertising' },
// { value: 1548, name: 'analysis.searchEngines' }
]
set(
pieOptionsData,
'legend.data',
data.map((v) => t(v.name))
)
pieOptionsData!.series![0].data = data.map((v) => {
return {
name: t(v.name),
@@ -410,21 +485,30 @@ const getUserAccessSource = async (id) => {
}
})
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const barOptionsDataDsec = reactive<EChartsOption>(bigbrotherbarOptions) as EChartsOption
type EmpBarItem = {
userId: number
finishedNum: number | null
totalNum: number | null
unfinishedNum: number | null
}
// 传入希望展示的用户 id 列表 + 后端原始返回，补齐未返回的用户为 0
function mergeZeroUsers(ids: number[], resList: EmpBarItem[]): EmpBarItem[] {
const map = new Map<number, EmpBarItem>(resList.map(it => [it.userId, it]))
return ids.map(id => {
const it = map.get(id)
const finished = it?.finishedNum ?? 0
// 未建联：优先用后端给的 unfinishedNum；若没有且提供了 totalNum，则用 totalNum - finished；否则 0
const total = it?.totalNum ?? 0
const unfinished = it?.unfinishedNum ?? (it?.totalNum != null && it?.finishedNum != null
? Math.max(Number(total) - Number(finished), 0)
: 0)
@@ -437,23 +521,28 @@ function mergeZeroUsers(ids: number[], resList: EmpBarItem[]): EmpBarItem[] {
}
})
}
// 把后端返回的数据渲染到柱状图
function updateEmployeeBarChart(list: EmpBarItem[]) {
// 建立 id -> 昵称 的映射
const id2label = new Map(allocationUserList.value.map(u => [u.value, u.label]))
const labels = list.map(it => id2label.get(it.userId) || String(it.userId))
const finished = list.map(it => it.finishedNum ?? 0)
const unfinished = list.map(it => it.unfinishedNum ?? 0)
// legend
const legendNames = []
set(barOptionsData, 'legend.data', legendNames)
set(barOptionsData, 'xAxis.data', labels)
// 1) 轴标签强制全部显示 + 不自动隐藏
set(barOptionsData, 'xAxis.axisLabel.interval', 0)
set(barOptionsData, 'xAxis.axisLabel.hideOverlap', false)
// 2) 适当旋转，避免重叠（不想旋转可设为 0）
@@ -461,9 +550,10 @@ function updateEmployeeBarChart(list: EmpBarItem[]) {
// 3) 防止被裁剪：让 grid 预留标签空间
set(barOptionsData, 'grid.containLabel', true)
set(barOptionsData, 'grid.bottom', 60) // 视情况调大/调小
set(barOptionsData, 'xAxis.axisTick.alignWithLabel', true)
set(barOptionsData, 'grid.bottom', 60) // 视情况调大/调小
set(barOptionsData, 'xAxis.axisTick.alignWithLabel', true)
set(barOptionsData, 'series', [
{
@@ -478,17 +568,67 @@ function updateEmployeeBarChart(list: EmpBarItem[]) {
// }
])
}
// 周活跃量 大哥图表数据
function updateEmployeeBarChartDesc(lists: EmpBarItem[]) {
// 建立 id -> 昵称 的映射
const id2label = new Map(allocationUserList.value.map(u => [u.value, u.label]))
const labels = lists.map(it => id2label.get(it.userId) || String(it.userId))
const finished = lists.map(it => it.finishedNum ?? 0)
const unfinished = lists.map(it => it.unfinishedNum ?? 0)
// legend
const legendNames = []
set(barOptionsDataDsec, 'legend.data', legendNames)
set(barOptionsDataDsec, 'xAxis.data', labels)
// 1) 轴标签强制全部显示 + 不自动隐藏
set(barOptionsDataDsec, 'xAxis.axisLabel.interval', 0)
set(barOptionsDataDsec, 'xAxis.axisLabel.hideOverlap', false)
// 2) 适当旋转，避免重叠（不想旋转可设为 0）
set(barOptionsDataDsec, 'xAxis.axisLabel.rotate', 30)
// 3) 防止被裁剪：让 grid 预留标签空间
set(barOptionsDataDsec, 'grid.containLabel', true)
set(barOptionsDataDsec, 'grid.bottom', 60) // 视情况调大/调小
set(barOptionsDataDsec, 'xAxis.axisTick.alignWithLabel', true)
set(barOptionsDataDsec, 'series', [
{
name: t('analysis.alreadyJianlian'),
type: 'bar',
data: finished
},
// {
// name: t('analysis.noAlliance'),
// type: 'bar',
// data: unfinished
// }
])
}
// 周活跃量 图表数据
const getWeeklyUserActivity = async () => {
const data = [
{ value: HostsOperationNum.value, name: 'analysis.monday' },
]
set(
barOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(barOptionsData, 'series', [
{
name: t('analysis.activeQuantity'),
@@ -507,6 +647,7 @@ const getAllApi = async () => {
getUserAccessSource(null),
getWeeklyUserActivity()
])
loading.value = false
}
@@ -521,10 +662,14 @@ const handleShortcutClick = (url: string) => {
/** 查询员工 */
const getAllocationList = async () => {
loading.value = true
allocationUserList.value = []
try {
const data = await getSimpleUserList()
console.log('data', data)
data.forEach((item) => {
if (wsCache.get('user').user.id == item.id) {
@@ -534,9 +679,8 @@ const getAllocationList = async () => {
value: item.id
})
}
})
console.log(allocationUserList.value)
} finally {
loading.value = false
@@ -545,6 +689,7 @@ const getAllocationList = async () => {
// 获取当前日期，格式为 YYYY-MM-DD
const getFormattedDate = () => {
const now = new Date()
return now.toISOString().split('T')[0] + ' 00:00:00'
}
@@ -557,16 +702,30 @@ async function fetchDailyHostsCount() {
pageSize: 10,
updateTime: getFormattedDate()
})
HostsOperationNum.value = res.total ?? 0
// 如果柱状图依赖这个值，顺便刷新一次图表数据
}
async function fetchDailyHostsCountDesc() {
const res = await EmployeeHostsApi.getEmployeeHostsPageDsec({
operationStatus: 1,
pageNo: 1,
pageSize: 10,
updateTime: getFormattedDate()
})
HostsOperationNumDsec.value = res.finishedNum ?? 0
// 如果柱状图依赖这个值，顺便刷新一次图表数据
}
// ✅ 抽成函数：每天所有员工数量（用于多人柱状图）
async function fetchAllHostsCount(val) {
// 以“传入的用户 id”为准展示（顺序也按这里来）
const ids = allocationUserList.value.map(item => item.value)
const res = await EmployeeHostsApi.employeeCompleteBarChart(ids, val)
const rawList: EmpBarItem[] = Array.isArray(res) ? res : (res?.data ?? [])
// 补齐后端未返回的用户为 0
@@ -575,4 +734,23 @@ async function fetchAllHostsCount(val) {
// 渲染
updateEmployeeBarChart(list)
}
async function fetchAllHostsCountDesc(val) {
// 以“传入的用户 id”为准展示（顺序也按这里来）
const idss = allocationUserList.value.map(item => item.value)
const ress = await EmployeeHostsApi.employeeCompleteBarChartDsec(idss, val)
console.log('fetchAllHostsCountDesc', ress);
const rawLists: EmpBarItem[] = Array.isArray(ress) ? ress : (ress?.data ?? [])
// 补齐后端未返回的用户为 0
const lists = mergeZeroUsers(idss, rawLists)
// 渲染
updateEmployeeBarChartDesc(lists)
}
</script>