增加房间详情的时间默认值

This commit is contained in:
yziiy
2026-01-14 10:39:44 +08:00
parent 1b65ddcb2a
commit b9bd31bcb6
3 changed files with 184 additions and 122 deletions

View File

@@ -153,9 +153,9 @@ export function useData() {
tableList.value = data.lists.map(ele => {
return {
...ele,
app_earning: parseFloat(ele.app_earning),
room_owner_earning: parseFloat(ele.room_owner_earning),
gift_user_earning: parseFloat(ele.gift_user_earning)
app_earning: ele.app_earning,
room_owner_earning: ele.room_owner_earning,
gift_user_earning: ele.gift_user_earning
};
});

View File

@@ -32,8 +32,15 @@ defineOptions({
<SearchForm class="pb-2" :LabelList="searchLabel" :formData="searchForm" @handleSearch="onSearch" />
<div v-if="totalData" class="content-flex">
<div class="box" v-for="(ele, index) in statisticsList">
<el-statistic group-separator="," :value="totalData[ele.prop]" :suffix="ele.tip || ''"
:title="ele.label"></el-statistic>
<div style="font-weight: bold;color: #606266;">
{{ ele.label }}
</div>
<div style="margin-top: 30px;">{{ totalData[ele.prop] }}</div>
<!-- <el-statistic group-separator="," :value="totalData[ele.prop]" :suffix="ele.tip || ''" :title="ele.label">
<template slot="formatter">
<div>{{ totalData[ele.prop] }}</div>
</template>
</el-statistic> -->
</div>
</div>
<div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">

View File

@@ -2,69 +2,122 @@
import { ref, h, onMounted } from "vue";
import { utils, writeFile } from "xlsx";
import { message } from "@/utils/message";
import singView from './sing.vue';
import singView from "./sing.vue";
import dayjs from "dayjs";
import {
getRoomDetail,
getRoomWaterFlow,
getRoomEnterByUser
} from "@/api/modules/room";
const props = defineProps(["tableData"]);
const dataBytable = ref({ ...props.tableData })
const roomDetail = ref(null)
const activeIndex = ref("1")
const dataBytable = ref({ ...props.tableData });
const roomDetail = ref(null);
const activeIndex = ref("1");
const basicLable = ref([
{ label: 'ID', prop: 'id' },
{ label: '靓号', prop: 'age' },
{ label: '房主', prop: 'owner' },
{ label: '房间公告', prop: 'room_intro' },
{ label: '是否热门', prop: 'is_hot' },
{ label: '是否推荐', prop: 'is_recommend' },
{ label: '是否置顶', prop: 'is_top' },
{ label: '是否有收益', prop: 'is_earnings' },
{ label: '所属工会', prop: 'guild_name' },
{ label: '房间分类', prop: 'room_type_str' },
{ label: "ID", prop: "id" },
{ label: "靓号", prop: "age" },
{ label: "房主", prop: "owner" },
{ label: "房间公告", prop: "room_intro" },
{ label: "是否热门", prop: "is_hot" },
{ label: "是否推荐", prop: "is_recommend" },
{ label: "是否置顶", prop: "is_top" },
{ label: "是否有收益", prop: "is_earnings" },
{ label: "所属工会", prop: "guild_name" },
{ label: "房间分类", prop: "room_type_str" },
// { label: '审核时间', prop: 'system' },
{ label: '房间状态', prop: 'room_status' },
{ label: '是否密码房', prop: 'room_password' },
{ label: '机器人数量', prop: 'robot_num' }
])
{ label: "房间状态", prop: "room_status" },
{ label: "是否密码房", prop: "room_password" },
{ label: "机器人数量", prop: "robot_num" }
]);
const statisticsLable = ref([
{ label: '今日收益', prefix: '¥', precision: 2, prop: 'today_earnings', tipValue: 'growth_percentage', tip: '比昨日相比' },
{ label: '昨日收益', prefix: '¥', precision: 2, prop: 'yesterday_earnings', tipValue: 'yesterday_growth_percentage', tip: '同比增长' },
{ label: '历史访客', prefix: '', prop: 'visitor', tipValue: 'growth_visitor', tip: '同比' },
{ label: '获得补贴', prefix: '', prop: 'fans_num', tipValue: 'growth_week_subsidy', tip: '同比' }
])
{
label: "今日收益",
prefix: "¥",
precision: 2,
prop: "today_earnings",
tipValue: "growth_percentage",
tip: "比昨日相比"
},
{
label: "昨日收益",
prefix: "¥",
precision: 2,
prop: "yesterday_earnings",
tipValue: "yesterday_growth_percentage",
tip: "同比增长"
},
{
label: "历史访客",
prefix: "",
prop: "visitor",
tipValue: "growth_visitor",
tip: "同比"
},
{
label: "获得补贴",
prefix: "",
prop: "fans_num",
tipValue: "growth_week_subsidy",
tip: "同比"
}
]);
const pagination = ref({
total: 0,
pageSize: 10,
currentPage: 1,
background: true
});
const PriceTotal = ref(null)
const PriceTotal = ref(null);
// 获取当月第一天 00:00:00 和当前时间
const getDefaultTimeRange = () => {
const now = dayjs();
const startOfMonth = now.startOf("month").format("YYYY-MM-DD HH:mm:ss");
const currentTime = now.format("YYYY-MM-DD HH:mm:ss");
return [startOfMonth, currentTime];
};
const getAllData = async () => {
const { data, code } = await getRoomDetail({ room_id: dataBytable.value.room_id })
roomDetail.value = code ? {
const { data, code } = await getRoomDetail({
room_id: dataBytable.value.room_id
});
roomDetail.value = code
? {
...data,
is_hot: data.is_hot === 1 ? '否' : '是',
is_top: data.is_top === 1 ? '否' : '是',
is_recommend: data.is_recommend === 1 ? '否' : '是',
room_status: data.room_status === 1 ? '正常' : data.room_status === 2 ? '封禁' : '关闭',
is_earnings: data.is_earnings === 1 ? '是' : '否',
room_password: data.room_password === '' ? '否' : '是'
} : null
is_hot: data.is_hot === 1 ? "否" : "是",
is_top: data.is_top === 1 ? "否" : "是",
is_recommend: data.is_recommend === 1 ? "否" : "是",
room_status:
data.room_status === 1
? "正常"
: data.room_status === 2
? "封禁"
: "关闭",
is_earnings: data.is_earnings === 1 ? "是" : "否",
room_password: data.room_password === "" ? "否" : "是"
}
const getFlowData = async (index) => {
: null;
};
const getFlowData = async index => {
if (index === 1) {
const { data, code } = await getRoomWaterFlow({
room_id: dataBytable.value.room_id,
page: pagination.value.currentPage,
page_limit: pagination.value.pageSize,
type: 1,
stime: dateSearchValue.value ? dateSearchValue.value.length ? dateSearchValue.value[0] : '' : '',
etime: dateSearchValue.value ? dateSearchValue.value.length ? dateSearchValue.value[1] : '' : '',
})
stime: dateSearchValue.value
? dateSearchValue.value.length
? dateSearchValue.value[0]
: ""
: "",
etime: dateSearchValue.value
? dateSearchValue.value.length
? dateSearchValue.value[1]
: ""
: ""
});
if (code) {
PriceTotal.value = data.total
PriceTotal.value = data.total;
flowTableList.value = data.lists;
pagination.value.total = data.count;
pagination.value.currentPage = data.page;
@@ -73,39 +126,38 @@ const getFlowData = async (index) => {
const { data, code } = await getRoomEnterByUser({
room_id: dataBytable.value.room_id,
page: pagination.value.currentPage,
page_limit: pagination.value.pageSize,
})
page_limit: pagination.value.pageSize
});
if (code) {
flowTableList.value = data.lists;
pagination.value.total = data.count;
pagination.value.currentPage = data.page;
}
}
}
const getExportData = async (index) => {
};
const getExportData = async index => {
if (index === 1) {
const { data, code } = await getRoomWaterFlow({
room_id: dataBytable.value.room_id,
page: 1,
page_limit: 10000,
type: tagValue.value
})
});
if (code) {
return data
return data;
}
} else {
const { data, code } = await getRoomEnterByUser({
room_id: dataBytable.value.room_id,
page: 1,
page_limit: 10000,
})
page_limit: 10000
});
if (code) {
return data
return data;
}
}
}
const flowTableList = ref([])
};
const flowTableList = ref([]);
const dynamicflowColumns = ref([
{
label: "时间",
@@ -123,7 +175,7 @@ const dynamicflowColumns = ref([
label: "金额(金币)",
prop: "total_price"
}
])
]);
const dynamicUserColumns = ref([
{
label: "ID",
@@ -141,55 +193,54 @@ const dynamicUserColumns = ref([
label: "进入时间",
prop: "createtime"
}
])
const activeName = ref('1')
const tagValue = ref(1)
const dateSearchValue = ref([])
]);
const activeName = ref("1");
const tagValue = ref(1);
const dateSearchValue = ref(getDefaultTimeRange());
const tagList = ref([
{ value: 1, label: '全部流水' },
{ value: 1, label: "全部流水" }
// { value: 2, label: '日流水' },
// { value: 3, label: '周流水' },
// { value: 4, label: '月流水' }
])
]);
onMounted(() => {
getAllData()
getFlowData(activeIndex.value == '1' ? 1 : 2)
})
const handleClick = (tab) => {
const { name } = tab.props
pagination.value.pageSize = 10
pagination.value.currentPage = 1
flowTableList.value = []
activeIndex.value = name
if (['1', '2'].includes(name)) {
getFlowData(activeIndex.value == '1' ? 1 : 2)
getAllData();
getFlowData(activeIndex.value == "1" ? 1 : 2);
});
const handleClick = tab => {
const { name } = tab.props;
pagination.value.pageSize = 10;
pagination.value.currentPage = 1;
flowTableList.value = [];
activeIndex.value = name;
if (["1", "2"].includes(name)) {
getFlowData(activeIndex.value == "1" ? 1 : 2);
} else {
console.log('点歌记录')
}
console.log("点歌记录");
}
};
const handleSizeChange = (val: number) => {
pagination.value.pageSize = val;
getFlowData(activeIndex.value == '1' ? 1 : 2)
getFlowData(activeIndex.value == "1" ? 1 : 2);
};
const handleCurrentChange = (val: number) => {
pagination.value.currentPage = val;
getFlowData(activeIndex.value == '1' ? 1 : 2)
getFlowData(activeIndex.value == "1" ? 1 : 2);
};
const changeTime = (val) => {
const changeTime = val => {
// console.log(val)
getFlowData(activeIndex.value == '1' ? 1 : 2)
}
const changeType = (val) => {
tagValue.value = val
pagination.value.pageSize = 10
pagination.value.currentPage = 1
flowTableList.value = []
getFlowData(activeIndex.value == '1' ? 1 : 2)
}
getFlowData(activeIndex.value == "1" ? 1 : 2);
};
const changeType = val => {
tagValue.value = val;
pagination.value.pageSize = 10;
pagination.value.currentPage = 1;
flowTableList.value = [];
getFlowData(activeIndex.value == "1" ? 1 : 2);
};
const exportExcal = async () => {
let exportTableList = []
const data = await getExportData(activeIndex.value == '1' ? 1 : 2)
let exportTableList = [];
const data = await getExportData(activeIndex.value == "1" ? 1 : 2);
if (data) {
exportTableList = data.lists;
const res = exportTableList.map(item => {
@@ -216,70 +267,74 @@ const exportExcal = async () => {
type: "error"
});
}
}
};
//
</script>
<template>
<div class="viewPage" v-if="roomDetail">
<div v-if="roomDetail" class="viewPage">
<div class="basicView">
<div class="left-view">
<el-image style="width: 150px; height: 150px" :src="roomDetail.room_cover" fit="cover"></el-image>
<el-image style="width: 150px; height: 150px" :src="roomDetail.room_cover" fit="cover" />
<div>{{ roomDetail.room_name }}</div>
</div>
<div style="width: 70%;">
<div style="width: 70%">
<el-descriptions title="" border :column="3">
<el-descriptions-item :label="item.label" v-for="item in basicLable">{{
roomDetail[item.prop] }}</el-descriptions-item>
<el-descriptions-item v-for="item in basicLable" :label="item.label">{{ roomDetail[item.prop]
}}</el-descriptions-item>
</el-descriptions>
</div>
</div>
<div style="margin-top: 20px;">
<div style="margin-top: 20px">
<h3>统计信息</h3>
<el-row :gutter="20" class="mt-5">
<el-col :span="6" v-for="item in statisticsLable">
<el-col v-for="item in statisticsLable" :span="6">
<el-statistic value-style="text-align: center;" group-separator="," :prefix="item.prefix"
:precision="item.precision || 0" :value="roomDetail[item.prop]" :title="item.label"></el-statistic>
<div class="mt-5">{{ roomDetail[item.tipValue] }}% {{ item.tip }}</div>
:precision="item.precision || 0" :value="roomDetail[item.prop]" :title="item.label" />
<div class="mt-5">
{{ roomDetail[item.tipValue] }}% {{ item.tip }}
</div>
</el-col>
</el-row>
</div>
<div style="margin-top: 20px;">
<div style="margin-top: 20px">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="流水信息" name="1">
<div class="flex align-middle justify-between">
<div>
<el-date-picker size="small" @change="changeTime" v-model="dateSearchValue" type="datetimerange"
format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" range-separator=""
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
<el-date-picker v-model="dateSearchValue" size="small" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss" range-separator="" start-placeholder="开始日期" end-placeholder="结束日期"
@change="changeTime" />
</div>
<div style="display: inline-flex;align-items: center;">
<div class="mr-5"><el-button size="small" type="primary" @click="exportExcal">导出当前数据</el-button></div>
幸运值流水总计<span style="color: red;">{{ PriceTotal.total_lucky_coin }}</span> 流水总计<span
style="color: red;">{{
<div style="display: inline-flex; align-items: center">
<div class="mr-5">
<el-button size="small" type="primary" @click="exportExcal">导出当前数据</el-button>
</div>
幸运值流水总计<span style="color: red">{{
PriceTotal.total_lucky_coin
}}</span>
流水总计<span style="color: red">{{
PriceTotal.total_price
}}</span> 金币
}}</span>
金币
</div>
</div>
<pure-table class="mt-5" ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
<pure-table ref="tableRef" class="mt-5" align-whole="center" showOverflowTooltip table-layout="auto"
default-expand-all row-key="id" :adaptiveConfig="{ offsetBottom: 108 }" :data="flowTableList"
:columns="dynamicflowColumns" :pagination="{ ...pagination }" :header-cell-style="{
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
</pure-table>
}" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange" />
</el-tab-pane>
<el-tab-pane label="用户进入记录" name="2">
<pure-table class="mt-5" ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
<pure-table ref="tableRef" class="mt-5" align-whole="center" showOverflowTooltip table-layout="auto"
default-expand-all row-key="id" :adaptiveConfig="{ offsetBottom: 108 }" :data="flowTableList"
:columns="dynamicUserColumns" :pagination="{ ...pagination }" :header-cell-style="{
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
</pure-table>
}" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange" />
</el-tab-pane>
<el-tab-pane label="点歌记录" name="3">
<singView :id="dataBytable.room_id"></singView>
<singView :id="dataBytable.room_id" />
</el-tab-pane>
</el-tabs>
</div>