Gugongyu/vue-tickets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改数据统计页面无数据bug

Browse Source
This commit is contained in:
GiveMePast
2026-05-14 17:41:10 +08:00
parent ef8123ba10
commit b550737c8e
1 changed files with 35 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/StatsView.vue
View File

@@ -17,8 +17,8 @@
<template #title>
<div class="collapse-title" @mousedown.prevent>
<div class="staff-info">
<el-avatar :size="28">{{ staff.name.slice(0, 1) }}</el-avatar>
<span class="staff-name">{{ staff.name }}</span>
<el-avatar :size="28">{{ staff.username.slice(0, 1) }}</el-avatar>
<span class="staff-name">{{ staff.username }}</span>
</div>
<el-tag type="success" effect="dark" round>
已锁定 {{ staff.lockedTickets.length }} 个站点
@@ -28,23 +28,22 @@
<el-table :data="staff.lockedTickets" stripe border size="small" class="inner-table">
<el-table-column prop="id" label="工单ID" width="80" align="center" />
<el-table-column prop="website" label="站点名称" min-width="200" show-overflow-tooltip />
<el-table-column prop="operator" label="运营" width="120" align="center" />
<el-table-column prop="operator_name" label="运营" width="120" align="center" />
<el-table-column prop="datanum" label="数据量" width="100" align="center">
<template #default="{ row }">
<span>{{
row.datanum && row.datanum !== "0" ? row.datanum : "-"
}}</span>
<span>{{ row.datanum && row.datanum !== "0" ? row.datanum : "-" }}</span>
</template>
</el-table-column>
<el-table-column label="锁定日期" width="150" align="center">
<template #default="{ row }">
{{ row.lock_time ? row.lock_time.slice(0, 10) : "-" }}
{{ formatDate(row.lock_time) }}
</template>
</el-table-column>
<el-table-column prop="is_complete" label="状态" width="100" align="center">
<el-table-column label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="row.is_complete === '已完成' ? 'success' : 'info'" size="small">{{ row.is_complete
}}</el-tag>
<el-tag :type="Number(row.status) === 2 ? 'success' : 'info'" size="small">
{{ statusLabel(row.status) }}
</el-tag>
</template>
</el-table-column>
</el-table>
@@ -59,23 +58,27 @@
import { ref, onMounted, computed } from "vue";
import { ticketApi } from "@/api/ticket";
import { ElMessage } from "element-plus";
import { formatDate } from "@/utils/format";
const loading = ref(true);
const staffList = ref([]);
const staffUserList = ref([]);
const allTickets = ref([]);
const activeCollapse = ref("");
const showOnlyThisMonth = ref(false);
const statusMap = { 0: "未分配", 1: "进行中", 2: "已完成", 3: "已完结" };
const statusLabel = (status) => statusMap[Number(status)] || "未知";
onMounted(async () => {
loading.value = true;
try {
const [staffRes, ticketsRes] = await Promise.all([
ticketApi.getStaffs(),
ticketApi.getTickets({ page: 1, limit: 9999 }), // 获取所有工单
ticketApi.getUserStaffs(),
ticketApi.getTickets({ page: 1, limit: 9999 }),
]);
if (staffRes.code) {
staffList.value = staffRes.data;
if (staffRes.code === 200) {
staffUserList.value = staffRes.data;
} else {
ElMessage.error("获取员工列表失败");
}
@@ -94,54 +97,47 @@ onMounted(async () => {
});
const staffWithLockedTickets = computed(() => {
if (!staffList.value.length || !allTickets.value.length) return [];
if (!staffUserList.value.length || !allTickets.value.length) return [];
// 筛选出所有已锁定（已完成/已完结）且具有有效锁定时间的工单
// 筛选已锁定工单（状态为已完成或已完结，且有 lock_time）
let lockedTickets = allTickets.value.filter((ticket) => {
const isLockedStatus = ["已完成", "已完结"].includes(ticket.is_complete);
// lock_time 是 "YYYY-MM-DD HH:mm" 格式的字符串，只需判断其是否存在
return isLockedStatus && ticket.staff_id && ticket.lock_time;
const status = Number(ticket.status);
const isLockedStatus = status === 2 || status === 3;
return isLockedStatus && ticket.lock_time && ticket.username;
});
// 如果开启了“只看本月”，则进一步筛选
if (showOnlyThisMonth.value) {
const now = new Date();
const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
lockedTickets = lockedTickets.filter((ticket) => {
// 直接用日期字符串创建 Date 对象进行比较
const lockDate = new Date(ticket.lock_time);
return (
!isNaN(lockDate.getTime()) && lockDate >= startOfMonth && lockDate <= endOfMonth
);
return !isNaN(lockDate.getTime()) && lockDate >= startOfMonth && lockDate <= endOfMonth;
});
}
// 创建一个员工的Map，方便快速查找
// 按员工分配工单：后端返回 username 字符串，通过 name 匹配员工
const staffMap = new Map(
staffList.value.map((staff) => [String(staff.id), { ...staff, lockedTickets: [] }])
staffUserList.value.map((s) => [s.username, { ...s, lockedTickets: [] }])
);
// 将锁定的工单分配到对应的员工下
lockedTickets.forEach((ticket) => {
const staffId = String(ticket.staff_id);
if (staffMap.has(staffId)) {
staffMap.get(staffId).lockedTickets.push(ticket);
const staff = staffMap.get(ticket.username);
if (staff) {
staff.lockedTickets.push(ticket);
}
});
// 对每个员工的工单按锁定时间倒序排序
// 每个员工内按锁定时间倒序
staffMap.forEach((staff) => {
staff.lockedTickets.sort((a, b) => {
// 使用 new Date().getTime() 来比较日期字符串
return new Date(b.lock_time).getTime() - new Date(a.lock_time).getTime();
});
staff.lockedTickets.sort((a, b) =>
new Date(b.lock_time).getTime() - new Date(a.lock_time).getTime()
);
});
// 返回一个数组，只包含有锁定工单的员工，并按工单数量排序
return Array.from(staffMap.values())
.filter((staff) => staff.lockedTickets.length > 0)
.filter((s) => s.lockedTickets.length > 0)
.sort((a, b) => b.lockedTickets.length - a.lockedTickets.length);
});
</script>