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