备份
This commit is contained in:
240
src/components/LiveRecordDialog.vue
Normal file
240
src/components/LiveRecordDialog.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<!-- LiveRecordDialog.vue -->
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="直播记录" width="86vw" top="6vh" :close-on-click-modal="false" destroy-on-close>
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="toolbar">
|
||||
<div class="left">
|
||||
<el-input v-model="kw" placeholder="搜索：hostsId / userId / tenantId / id" clearable
|
||||
style="width: 320px" />
|
||||
<el-select v-model="sortKey" style="width: 170px" placeholder="排序字段">
|
||||
<el-option label="开始时间" value="startTimeFormatted" />
|
||||
<el-option label="结束时间" value="endTimeFormatted" />
|
||||
<el-option label="点赞数" value="likeCount" />
|
||||
<el-option label="粉丝团" value="fansClubCount" />
|
||||
</el-select>
|
||||
<el-select v-model="sortOrder" style="width: 140px" placeholder="排序方式">
|
||||
<el-option label="降序" value="desc" />
|
||||
<el-option label="升序" value="asc" />
|
||||
</el-select>
|
||||
|
||||
<el-checkbox v-model="onlyAbnormal">只看异常</el-checkbox>
|
||||
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-tag type="info">总条数：{{ filteredRows.length }}</el-tag>
|
||||
<el-tag type="success">点赞合计：{{ totalLikes }}</el-tag>
|
||||
<el-tag type="warning">like=0：{{ zeroLikeCount }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="pagedRows" border height="62vh" style="width: 100%"
|
||||
:default-sort="{ prop: 'startTimeFormatted', order: 'descending' }">
|
||||
<el-table-column prop="id" label="ID" width="90" />
|
||||
<el-table-column prop="userId" label="userId" width="90" />
|
||||
<el-table-column prop="hostsId" label="hostsId" width="130" />
|
||||
<el-table-column prop="tenantId" label="tenantId" width="100" />
|
||||
|
||||
<el-table-column prop="fansClubCount" label="粉丝团" width="90" />
|
||||
<el-table-column prop="lightedVsTotalGifts" label="点亮/礼物" width="110" />
|
||||
|
||||
<el-table-column prop="startTimeFormatted" label="开始时间" width="170" />
|
||||
<el-table-column prop="endTimeFormatted" label="结束时间" width="170" />
|
||||
<el-table-column prop="durationFormatted" label="时长" width="120" />
|
||||
|
||||
<el-table-column prop="likeCount" label="点赞" width="110" sortable>
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.likeCount === 0" type="danger">0</el-tag>
|
||||
<span v-else>{{ row.likeCount }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="createTime" label="入库时间" width="170" />
|
||||
|
||||
<el-table-column label="操作" fixed="right" width="160">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="copyRow(row)">复制</el-button>
|
||||
<el-button size="small" type="primary" @click="emitSelect(row)">选中</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="footer">
|
||||
<el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="filteredRows.length" />
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
type Row = {
|
||||
id: number;
|
||||
userId: number;
|
||||
hostsId: string;
|
||||
tenantId: number;
|
||||
fansClubCount: number;
|
||||
lightedVsTotalGifts: string;
|
||||
startTimeFormatted: string;
|
||||
endTimeFormatted: string;
|
||||
likeCount: number;
|
||||
durationFormatted: string;
|
||||
createTime: string;
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
rows: Row[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:modelValue", v: boolean): void;
|
||||
(e: "select", row: Row): void;
|
||||
}>();
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit("update:modelValue", v),
|
||||
});
|
||||
|
||||
const kw = ref("");
|
||||
const sortKey = ref<keyof Row>("startTimeFormatted");
|
||||
const sortOrder = ref<"asc" | "desc">("desc");
|
||||
const onlyAbnormal = ref(false);
|
||||
|
||||
const page = ref(1);
|
||||
const pageSize = ref(20);
|
||||
|
||||
watch([kw, sortKey, sortOrder, onlyAbnormal], () => {
|
||||
page.value = 1;
|
||||
});
|
||||
|
||||
function parseTime(s?: string) {
|
||||
// "2025-12-18 13:12:11" -> Date
|
||||
if (!s) return 0;
|
||||
return new Date(s.replace(" ", "T")).getTime() || 0;
|
||||
}
|
||||
|
||||
function durationSeconds(durationFormatted?: string) {
|
||||
// 例："2小时49分钟55秒" / "18分钟31秒" / "25秒"
|
||||
if (!durationFormatted) return 0;
|
||||
const h = Number((durationFormatted.match(/(\d+)\s*小时/) || [])[1] || 0);
|
||||
const m = Number((durationFormatted.match(/(\d+)\s*分钟/) || [])[1] || 0);
|
||||
const s = Number((durationFormatted.match(/(\d+)\s*秒/) || [])[1] || 0);
|
||||
return h * 3600 + m * 60 + s;
|
||||
}
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
const k = kw.value.trim().toLowerCase();
|
||||
|
||||
let arr = (props.rows || []).filter((r) => {
|
||||
if (!k) return true;
|
||||
const hay = `${r.id} ${r.userId} ${r.hostsId} ${r.tenantId}`.toLowerCase();
|
||||
return hay.includes(k);
|
||||
});
|
||||
|
||||
if (onlyAbnormal.value) {
|
||||
arr = arr.filter((r) => r.likeCount === 0 || durationSeconds(r.durationFormatted) < 60);
|
||||
}
|
||||
|
||||
// 排序
|
||||
const key = sortKey.value;
|
||||
const order = sortOrder.value;
|
||||
|
||||
arr = [...arr].sort((a, b) => {
|
||||
const av = a[key] as any;
|
||||
const bv = b[key] as any;
|
||||
|
||||
// 时间字段特殊处理
|
||||
if (key === "startTimeFormatted" || key === "endTimeFormatted" || key === "createTime") {
|
||||
const aa = parseTime(String(av));
|
||||
const bb = parseTime(String(bv));
|
||||
return order === "desc" ? bb - aa : aa - bb;
|
||||
}
|
||||
|
||||
// 数字
|
||||
if (typeof av === "number" && typeof bv === "number") {
|
||||
return order === "desc" ? bv - av : av - bv;
|
||||
}
|
||||
|
||||
// 字符串
|
||||
return order === "desc"
|
||||
? String(bv).localeCompare(String(av))
|
||||
: String(av).localeCompare(String(bv));
|
||||
});
|
||||
|
||||
return arr;
|
||||
});
|
||||
|
||||
const pagedRows = computed(() => {
|
||||
const start = (page.value - 1) * pageSize.value;
|
||||
return filteredRows.value.slice(start, start + pageSize.value);
|
||||
});
|
||||
|
||||
const totalLikes = computed(() =>
|
||||
filteredRows.value.reduce((sum, r) => sum + (Number(r.likeCount) || 0), 0)
|
||||
);
|
||||
|
||||
const zeroLikeCount = computed(() => filteredRows.value.filter((r) => r.likeCount === 0).length);
|
||||
|
||||
function reset() {
|
||||
kw.value = "";
|
||||
sortKey.value = "startTimeFormatted";
|
||||
sortOrder.value = "desc";
|
||||
onlyAbnormal.value = false;
|
||||
page.value = 1;
|
||||
pageSize.value = 20;
|
||||
}
|
||||
|
||||
async function copyRow(row: Row) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(JSON.stringify(row, null, 2));
|
||||
ElMessage.success("已复制该行 JSON");
|
||||
} catch {
|
||||
ElMessage.warning("复制失败：浏览器不支持或无权限");
|
||||
}
|
||||
}
|
||||
|
||||
function emitSelect(row: Row) {
|
||||
emit("select", row);
|
||||
ElMessage.success(`已选中：ID ${row.id}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbar .left {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbar .right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user