房间详情 设施详情 用户详情
This commit is contained in:
parent
a1baf566b1
commit
c44abae22d
64
src/components/DateRangePicker/index.vue
Normal file
64
src/components/DateRangePicker/index.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions"
|
||||
:clearable="false"
|
||||
v-on="$listeners"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import { getLastDate, getLastMonth } from '@/utils'
|
||||
|
||||
export default {
|
||||
name: "DateRangePicker",
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = getLastDate(0);
|
||||
const start = getLastDate(6);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = getLastDate(0);
|
||||
const start = getLastMonth(1);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = getLastDate(0);
|
||||
const start = getLastMonth(3);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dateRange: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -239,7 +239,7 @@ export const dynamicRoutes = [
|
|||
permissions: ['system:equipment:query'],
|
||||
children: [
|
||||
{
|
||||
path: 'index/:equipmentId(\\d+)',
|
||||
path: 'index/:roomId(\\d+)',
|
||||
component: () => import('@/views/system/equipment/equipment_detail'),
|
||||
name: 'EquipmentDetail',
|
||||
meta: { title: '设施详情', activeMenu: '/system/equipment' }
|
||||
|
|
|
|||
|
|
@ -1,120 +1,575 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 基本信息卡片 -->
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本信息</span>
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<!-- 操作按钮 -->
|
||||
<div class="operation-buttons">
|
||||
<el-button type="primary" icon="el-icon-edit" size="small" @click="handleUpdate"
|
||||
v-hasPermi="['system:room:edit']">修改设施</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 设施基本信息 -->
|
||||
<div class="room-header">
|
||||
<el-row :gutter="40">
|
||||
<el-col :span="8">
|
||||
<div class="image-wrapper">
|
||||
<el-image :src="room.picture" fit="cover" class="room-image">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="room-title">
|
||||
<h2>{{ room.roomName }}</h2>
|
||||
<el-tag :type="room.status === '1' ? 'success' : 'info'" class="status-tag" effect="dark">
|
||||
{{ room.status === '1' ? '正常' : '停用' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="room-info">
|
||||
<el-descriptions :column="2" border size="medium">
|
||||
<el-descriptions-item label="所属门店">
|
||||
<span class="info-text">{{ room.storeName }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="商户ID">
|
||||
<span class="info-text">{{ room.merchantId }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="设施ID">
|
||||
<span class="info-text">{{ room.roomId }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="设施类型">
|
||||
<span class="info-text">{{ getRoomType(room.type) }} / {{ getRoomType2(room.type2) }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="基础价格">
|
||||
<span class="price">￥{{ room.hour }}</span>
|
||||
<span class="unit">/小时</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="销售数量">
|
||||
<span class="info-text">{{ room.soldNum || '暂无数据' }}</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<div class="tags-section">
|
||||
<span class="label">设施标签：</span>
|
||||
<div class="tags-wrapper">
|
||||
<dict-tag v-for="tag in room.tags" :key="tag" :options="dict.type.ss_room_tags" :value="tag"
|
||||
class="tag-item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- WiFi信息 -->
|
||||
<div v-if="room.wifi" class="section-block">
|
||||
<h3>
|
||||
<i class="el-icon-connection"></i>
|
||||
WiFi信息
|
||||
</h3>
|
||||
<el-descriptions :column="2" border size="medium">
|
||||
<el-descriptions-item label="WiFi名称">
|
||||
<span class="info-text">{{ room.wifi }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="WiFi密码">
|
||||
<span class="info-text">{{ room.wifiPassword }}</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 系统信息 -->
|
||||
<div class="section-block">
|
||||
<h3>
|
||||
<i class="el-icon-info"></i>
|
||||
系统信息
|
||||
</h3>
|
||||
<el-descriptions :column="3" border size="medium">
|
||||
<el-descriptions-item label="创建人">
|
||||
<span class="info-text">{{ room.createBy || '暂无' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">
|
||||
<span class="info-text">{{ room.createTime || '暂无' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新人">
|
||||
<span class="info-text">{{ room.updateBy || '暂无' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">
|
||||
<span class="info-text">{{ room.updateTime || '暂无' }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" :span="2">
|
||||
<span class="info-text">{{ room.remark || '暂无' }}</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="label">设施ID：</span>
|
||||
<span>{{ equipmentData.equipmentId }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">设施名称：</span>
|
||||
<span>{{ equipmentData.name }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">设施类型：</span>
|
||||
<dict-tag :options="dict.type.ss_equipment_type" :value="equipmentData.type"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="label">所属店铺：</span>
|
||||
<span>{{ equipmentData.storeName }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">所属房间：</span>
|
||||
<span>{{ equipmentData.roomName }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">状态：</span>
|
||||
<dict-tag :options="dict.type.ss_equipment_status" :value="equipmentData.status"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="label">创建时间：</span>
|
||||
<span>{{ parseTime(equipmentData.createTime) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">更新时间：</span>
|
||||
<span>{{ parseTime(equipmentData.updateTime) }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 设备信息卡片 -->
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>设备信息</span>
|
||||
<!-- 修改设施弹窗 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="设施名" prop="roomName">
|
||||
<el-input v-model="form.roomName" placeholder="请输入设施名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺" prop="storeId">
|
||||
<el-select v-model="form.storeId" clearable filterable placeholder="请选择">
|
||||
<el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择类型">
|
||||
<el-option v-for="dict in dict.type.ss_room_type" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="picture">
|
||||
<image-upload v-model="form.picture" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tags">
|
||||
<el-select v-model="form.tags" placeholder="请选择标签" clearable multiple style="width: auto; min-width: 240px">
|
||||
<el-option v-for="dict in dict.type.ss_room_tags" :key="dict.value" :label="dict.label"
|
||||
:value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="label">设备ID：</span>
|
||||
<span>{{ equipmentData.deviceId }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">MAC地址：</span>
|
||||
<span>{{ equipmentData.device ? equipmentData.device.mac : '-' }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="info-item">
|
||||
<span class="label">SN：</span>
|
||||
<span>{{ equipmentData.device ? equipmentData.device.sn : '-' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">设备状态：</span>
|
||||
<dict-tag :options="dict.type.ss_device_status" :value="equipmentData.device ? equipmentData.device.status : ''"/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
<el-tabs v-model="activeTab" class="detail-tabs">
|
||||
|
||||
<el-tab-pane label="订单列表" name="orders">
|
||||
<order :roomId="room.roomId"></order>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="设备列表" name="devices">
|
||||
<device :roomId="room.roomId"></device>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="套餐列表" name="rules">
|
||||
<rule :roomId="room.roomId"></rule>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设施列表" name="equipments">
|
||||
<equipment :roomId="room.roomId"></equipment>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEquipment } from "@/api/system/equipment";
|
||||
|
||||
import { getRoom, updateRoom } from '@/api/system/room'
|
||||
import { getDicts } from '@/api/system/dict/data'
|
||||
import { listStore } from "@/api/system/store"
|
||||
import order from '@/views/system/order/index.vue'
|
||||
import device from '@/views/system/device/index.vue'
|
||||
import rule from '@/views/system/rule/index.vue'
|
||||
import equipment from '@/views/system/equipment/index.vue'
|
||||
export default {
|
||||
name: "EquipmentDetail",
|
||||
dicts: ['ss_equipment_type', 'ss_equipment_status', 'ss_device_status'],
|
||||
name: 'RoomDetail',
|
||||
dicts: ['ss_room_type', 'ss_room_tags', 'ss_room_status'],
|
||||
components: { order, device, rule, equipment },
|
||||
data() {
|
||||
return {
|
||||
equipmentData: {}
|
||||
};
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
room: {},
|
||||
// 设施类型字典
|
||||
roomTypeOptions: [],
|
||||
// 设施类型2字典
|
||||
roomType2Options: [],
|
||||
// 设施标签字典
|
||||
roomTagOptions: [],
|
||||
// 店铺选项
|
||||
storeOptions: [],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
roomName: [
|
||||
{ required: true, message: "设施名不能为空", trigger: "blur" }
|
||||
],
|
||||
storeId: [
|
||||
{ required: true, message: "店铺不能为空", trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: "类型不能为空", trigger: "blur" }
|
||||
],
|
||||
tags: [
|
||||
{ required: true, message: "标签不能为空", trigger: "change" }
|
||||
],
|
||||
},
|
||||
activeTab: 'orders',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
const equipmentId = this.$route.params.equipmentId;
|
||||
this.getEquipmentData(equipmentId);
|
||||
this.getDetail()
|
||||
this.getDictData()
|
||||
this.getStoreOptions()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getEquipmentData(equipmentId) {
|
||||
getEquipment(equipmentId).then(response => {
|
||||
this.equipmentData = response.data;
|
||||
/** 获取设施详情 */
|
||||
async getDetail() {
|
||||
try {
|
||||
const roomId = this.$route.params.roomId
|
||||
const response = await getRoom(roomId)
|
||||
this.room = response.data
|
||||
} catch (error) {
|
||||
console.error('获取设施详情失败:', error)
|
||||
this.$message.error('获取设施详情失败')
|
||||
}
|
||||
},
|
||||
|
||||
/** 获取字典数据 */
|
||||
async getDictData() {
|
||||
try {
|
||||
const [typeRes, type2Res, tagRes] = await Promise.all([
|
||||
getDicts('room_type'),
|
||||
getDicts('room_type2'),
|
||||
getDicts('room_tag')
|
||||
])
|
||||
this.roomTypeOptions = typeRes.data
|
||||
this.roomType2Options = type2Res.data
|
||||
this.roomTagOptions = tagRes.data
|
||||
} catch (error) {
|
||||
console.error('获取字典数据失败:', error)
|
||||
this.$message.error('获取字典数据失败')
|
||||
}
|
||||
},
|
||||
|
||||
/** 获取店铺选项 */
|
||||
getStoreOptions() {
|
||||
listStore({ pageNum: 1, pageSize: 999 }).then(response => {
|
||||
this.storeOptions = response.rows;
|
||||
});
|
||||
},
|
||||
|
||||
/** 获取设施类型名称 */
|
||||
getRoomType(type) {
|
||||
const found = this.roomTypeOptions.find(item => item.dictValue === type)
|
||||
return found ? found.dictLabel : type
|
||||
},
|
||||
|
||||
/** 获取设施类型2名称 */
|
||||
getRoomType2(type) {
|
||||
const found = this.roomType2Options.find(item => item.dictValue === type)
|
||||
return found ? found.dictLabel : type
|
||||
},
|
||||
|
||||
/** 获取标签名称 */
|
||||
getTagName(tag) {
|
||||
const found = this.roomTagOptions.find(item => item.dictValue === tag)
|
||||
return found ? found.dictLabel : tag
|
||||
},
|
||||
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate() {
|
||||
this.reset();
|
||||
this.form = { ...this.room };
|
||||
this.open = true;
|
||||
this.title = "修改设施";
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
roomId: undefined,
|
||||
roomName: undefined,
|
||||
storeId: undefined,
|
||||
type: undefined,
|
||||
picture: undefined,
|
||||
tags: []
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
updateRoom(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getDetail();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
.box-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.info-item {
|
||||
margin-bottom: 15px;
|
||||
.label {
|
||||
color: #606266;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
.detail-tabs {
|
||||
margin-top: 20px;
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.app-container {
|
||||
padding: 24px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
</style>
|
||||
|
||||
.operation-buttons {
|
||||
// margin-left: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
text-align: right;
|
||||
.el-button {
|
||||
margin: 0;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-card {
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.box-card:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.room-header {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-wrapper:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.room-image {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.room-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.room-title h2 {
|
||||
margin: 0;
|
||||
margin-right: 15px;
|
||||
font-size: 28px;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
margin-left: auto;
|
||||
padding: 0 16px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tags-section {
|
||||
margin-top: 28px;
|
||||
padding: 16px;
|
||||
background: #f9fafc;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #606266;
|
||||
margin-right: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.section-block {
|
||||
margin-top: 48px;
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h3 i {
|
||||
margin-right: 12px;
|
||||
font-size: 24px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.total-rules {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #F56C6C;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
color: #909399;
|
||||
margin-left: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.image-slot i {
|
||||
font-size: 48px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
margin-top: 16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions) {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__label) {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__content) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: #f5f7fa !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-table--border) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__body) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions-item__label) {
|
||||
background-color: #f5f7fa;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 标签选择器样式
|
||||
.el-select {
|
||||
:deep(.el-select__tags) {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.el-tag {
|
||||
margin: 2px;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
height: auto;
|
||||
min-height: 32px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 18px;
|
||||
|
||||
.el-select {
|
||||
width: auto;
|
||||
min-width: 240px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -327,8 +327,17 @@ export default {
|
|||
}
|
||||
|
||||
.operation-buttons {
|
||||
// margin-left: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
text-align: right;
|
||||
.el-button {
|
||||
margin: 0;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-card {
|
||||
|
|
|
|||
|
|
@ -1,64 +1,155 @@
|
|||
<!--<template>-->
|
||||
<!-- <div v-loading="loading" >-->
|
||||
<!-- <date-range-picker :start-date.sync="queryParams.payDateStart" :end-date.sync="queryParams.payDateEnd" @change="getList"/>-->
|
||||
<!-- <single-line-chart :labels="labels" :chart-data="chartData" name="收入(元)" height="268px"/>-->
|
||||
<!-- </div>-->
|
||||
<!--</template>-->
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<date-range-picker :start-date.sync="queryParams.payDateStart" :end-date.sync="queryParams.payDateEnd" @change="getList"/>
|
||||
<!-- 替换为 echarts 容器 -->
|
||||
<div ref="chartRef" style="width: 100%; height: 268px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--<script>-->
|
||||
<!--import SingleLineChart from '@/components/SingleLineChart/index.vue'-->
|
||||
<!--import { BonusArrivalType } from '@/utils/constants'-->
|
||||
<!--import { getLastDateStr } from '@/utils'-->
|
||||
<!--import DateRangePicker from '@/components/DateRangePicker/index.vue'-->
|
||||
<!--import { getBonusDailyAmount } from '@/api/system/dashboard'-->
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { BonusArrivalType } from '@/utils/constants'
|
||||
import { getLastDateStr } from '@/utils'
|
||||
import DateRangePicker from '@/components/DateRangePicker/index.vue'
|
||||
|
||||
<!--export default {-->
|
||||
<!-- name: "UserDailyRechargeReport",-->
|
||||
<!-- components: { DateRangePicker, SingleLineChart },-->
|
||||
<!-- props: {-->
|
||||
<!-- query: {-->
|
||||
<!-- type: Object,-->
|
||||
<!-- default: () => {-->
|
||||
<!-- return {}-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- data() {-->
|
||||
<!-- return {-->
|
||||
<!-- loading: false,-->
|
||||
<!-- list: [],-->
|
||||
<!-- queryParams: {-->
|
||||
<!-- payDateStart: getLastDateStr(30),-->
|
||||
<!-- payDateEnd: getLastDateStr(0),-->
|
||||
<!-- arrivalId: null,-->
|
||||
<!-- arrivalTypes: BonusArrivalType.userList()-->
|
||||
<!-- },-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- computed: {-->
|
||||
<!-- labels() {-->
|
||||
<!-- return this.list.map(item => item.key);-->
|
||||
<!-- },-->
|
||||
<!-- chartData() {-->
|
||||
<!-- return this.list.map(item => item.sum == null ? 0 : item.sum.toFixed(2));-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- created() {-->
|
||||
<!-- this.queryParams = {-->
|
||||
<!-- ...this.queryParams,-->
|
||||
<!-- ...this.query-->
|
||||
<!-- }-->
|
||||
<!-- this.getList();-->
|
||||
<!-- },-->
|
||||
<!-- methods: {-->
|
||||
<!-- getList() {-->
|
||||
<!-- this.loading = true;-->
|
||||
<!-- getBonusDailyAmount(this.queryParams).then(res => {-->
|
||||
<!-- this.list = res.data;-->
|
||||
<!-- }).finally(() => {-->
|
||||
<!-- this.loading = false;-->
|
||||
<!-- })-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
export default {
|
||||
name: "UserDailyRechargeReport",
|
||||
components: { DateRangePicker },
|
||||
props: {
|
||||
query: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
list: [],
|
||||
queryParams: {
|
||||
payDateStart: getLastDateStr(30),
|
||||
payDateEnd: getLastDateStr(0),
|
||||
arrivalId: null,
|
||||
arrivalTypes: BonusArrivalType.userList()
|
||||
},
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labels() {
|
||||
return this.list.map(item => item.key);
|
||||
},
|
||||
chartData() {
|
||||
return this.list.map(item => item.sum == null ? 0 : Number(item.sum.toFixed(2)));
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.queryParams = {
|
||||
...this.queryParams,
|
||||
...this.query
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chartRef);
|
||||
this.updateChartData();
|
||||
},
|
||||
updateChartData() {
|
||||
if (!this.chart) return;
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b}<br/>{a}: {c}元'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.labels
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}元'
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '收入',
|
||||
type: 'line',
|
||||
data: this.chartData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(64,158,255,0.3)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(64,158,255,0.1)'
|
||||
}])
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 模拟API调用
|
||||
setTimeout(() => {
|
||||
// 生成最近30天的模拟数据
|
||||
const mockData = Array.from({length: 30}, (_, i) => {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() - i);
|
||||
return {
|
||||
key: `${date.getMonth() + 1}-${date.getDate()}`,
|
||||
sum: Math.random() * 1000
|
||||
}
|
||||
}).reverse();
|
||||
|
||||
this.list = mockData;
|
||||
this.loading = false;
|
||||
// 更新图表数据
|
||||
this.$nextTick(() => {
|
||||
this.updateChartData();
|
||||
});
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听窗口大小变化，重绘图表
|
||||
'$store.state.app.sidebar.opened': {
|
||||
handler() {
|
||||
if (this.chart) {
|
||||
this.$nextTick(() => {
|
||||
this.chart.resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,180 +1,565 @@
|
|||
<template>
|
||||
<div class="app-container" v-loading="loading">
|
||||
<template>
|
||||
<el-row :gutter="12">
|
||||
<el-col :lg="10" :md="12" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<!-- 统计卡片行 -->
|
||||
<el-row :gutter="20" class="statistics-cards">
|
||||
<el-col :span="3" v-for="(stat, index) in statisticsData" :key="index">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon" :class="stat.color">
|
||||
<i :class="stat.icon"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
<div class="stat-value">
|
||||
<template v-if="stat.isMoney">¥ {{ detail[stat.field] || '0.00' }}</template>
|
||||
<template v-else>{{ detail[stat.field] || '0' }} {{ stat.unit }}</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="12" class="detail-row">
|
||||
<!-- 用户详情卡片 -->
|
||||
<el-col :lg="10" :md="12" :xs="24" >
|
||||
<el-card class="box-card detail-card">
|
||||
<template #header>
|
||||
<el-row type="flex" style="justify-content: space-between">
|
||||
<div>用户详情</div>
|
||||
<div>
|
||||
<el-button type="text" icon="el-icon-setting" size="small" style="padding: 5px 0 0;" @click="showConfigDialog = true">用户配置</el-button>
|
||||
<el-button type="text" icon="el-icon-setting" size="small" style="padding: 5px 0 0;"
|
||||
@click="showConfigDialog = true">用户配置</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<div class="user-detail">
|
||||
<div class="user-header">
|
||||
<el-avatar :size="64" :src="detail.avatar"></el-avatar>
|
||||
<el-row type="flex" class="name-box">
|
||||
<span class="user-name">11</span>
|
||||
<dict-tag :value="detail.type" :options="dict.type.sm_user_type"/>
|
||||
<span class="user-name">{{ detail.userName }}</span>
|
||||
<dict-tag :value="detail.userType" :options="dict.type.ss_user_type" style="margin-top: 4px;" />
|
||||
</el-row>
|
||||
<div class="phone-number">{{detail.phonenumber}}</div>
|
||||
<div class="phone-number">{{ detail.phonenumber }}</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-row type="flex" style="margin-top: 16px;">-->
|
||||
<!-- <el-statistic title="店铺数" :value="detail.storeCount" :precision="0" suffix="家"/>-->
|
||||
<!-- <el-statistic title="设备数" :value="detail.deviceCount" :precision="0" suffix="台"/>-->
|
||||
<!-- <el-statistic title="账户余额" :value="detail.balance" :precision="2" suffix="元"/>-->
|
||||
<!-- <el-statistic title="总收入" :value="detail.totalIncome" :precision="2" suffix="元"/>-->
|
||||
<!-- <el-statistic title="未入账" :value="detail.waitBonusAmount" :precision="2" suffix="元"/>-->
|
||||
<!-- <el-statistic title="总提现" :value="detail.withDrawlAmount" :precision="2" suffix="元"/>-->
|
||||
<!-- <el-statistic title="总消费" :value="detail.rechargeAmount" :precision="2" suffix="元"/>-->
|
||||
<!-- </el-row>-->
|
||||
|
||||
<div class="user-description">
|
||||
<el-descriptions :column="3">
|
||||
<el-descriptions-item label="充值服务费">
|
||||
{{detail.realServiceRate | money | defaultValue}} %
|
||||
{{ detail.serviceFeeProportion | money | defaultValue }} %
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="代理服务费">
|
||||
{{detail.agentServiceRate | money | defaultValue}} %
|
||||
{{ detail.agentServiceRate | money | defaultValue }} %
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="提现服务费">
|
||||
<template v-if="detail.withdrawServiceRate == null || detail.withdrawServiceType == null">跟随渠道</template>
|
||||
<template v-if="detail.withdrawServiceRate == null || detail.withdrawServiceType == null">
|
||||
跟随渠道
|
||||
</template>
|
||||
<template v-else>
|
||||
<dict-tag :options="dict.type.withdraw_service_type" :value="detail.withdrawServiceType" size="mini"/>
|
||||
{{detail.withdrawServiceRate}} {{serviceUnit(detail.withdrawServiceType)}}
|
||||
<dict-tag :options="dict.type.withdraw_service_type" :value="detail.withdrawServiceType"
|
||||
size="mini" />
|
||||
{{ detail.withdrawServiceRate }} {{ serviceUnit(detail.withdrawServiceType) }}
|
||||
</template>
|
||||
</el-descriptions-item>
|
||||
<!-- <el-descriptions-item label="实名认证">-->
|
||||
<!-- <boolean-tag :value="detail.isReal" size="small"/>-->
|
||||
<!-- <el-link-->
|
||||
<!-- v-if="detail.isReal"-->
|
||||
<!-- style="margin-left: 4px;"-->
|
||||
<!-- type="primary"-->
|
||||
<!-- size="small"-->
|
||||
<!-- icon="el-icon-link"-->
|
||||
<!-- @click="handleResetRealName"-->
|
||||
<!-- >解除实名</el-link>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<el-descriptions-item label="姓名">
|
||||
{{detail.realName | dv}}
|
||||
{{ detail.realName | dv }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="身份证">
|
||||
{{detail.realIdCard | dv}}
|
||||
{{ detail.idCard | dv }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="实名手机">
|
||||
{{detail.realPhone | dv}}
|
||||
{{ detail.phonenumber | dv }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" :span="2">
|
||||
{{ detail.remark | dv }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" :span="2">{{detail.remark | dv}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 报表卡片 -->
|
||||
<el-col :lg="14" :md="12" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<el-row type="flex">
|
||||
<el-tabs style="width: 100%">
|
||||
<el-tab-pane label="日报表" lazy>
|
||||
<user-daily-recharge-report v-if="detail.userId != null" :query="{arrivalId: detail.userId}"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="月报表" lazy>
|
||||
<user-recharge-report :mch-id="detail.userId"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-row>
|
||||
<el-tabs v-model="activeTab" @tab-click="handleTabClick" style="width: 100%">
|
||||
<!-- 日报表 -->
|
||||
<el-tab-pane label="日报表" name="daily">
|
||||
<div class="report-container">
|
||||
<div class="filter-section">
|
||||
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd"
|
||||
@change="loadDailyReport" />
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div ref="dailyChart" style="width: 100%; height: 300px"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 月报表 -->
|
||||
<el-tab-pane label="月报表" name="monthly">
|
||||
<div class="report-container">
|
||||
<div class="filter-section">
|
||||
<el-date-picker v-model="selectedMonth" type="month" placeholder="选择月份" value-format="yyyy-MM"
|
||||
@change="loadMonthlyReport" />
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div ref="monthlyChart" style="width: 100%; height: 300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<!-- <el-empty v-else description="用户不存在"/>-->
|
||||
|
||||
<!-- <!–用户设置–>-->
|
||||
<!-- <user-config-dialog :show.sync="showConfigDialog" :user-id="detail.userId" @success="getDetail"/>-->
|
||||
<user-config-dialog :show.sync="showConfigDialog" :user-id="detail.userId" @success="getDetail" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUser } from '@/api/system/user'
|
||||
import Device from '@/views/system/device/index.vue'
|
||||
// import Withdraw from '@/views/system/withdraw/index.vue'
|
||||
// import UserDailyRechargeReport from '@/views/system/smUser/components/UserDailyRechargeReport.vue'
|
||||
// import UserRechargeReport from '@/views/system/smUser/components/userRechargeReport.vue'
|
||||
// import UserConfigDialog from '@/views/system/smUser/components/UserConfigDialog.vue'
|
||||
// import { BonusArrivalType, SmUserType } from '@/utils/constants'
|
||||
import UserConfigDialog from './components/UserConfigDialog.vue'
|
||||
import { $serviceType, $view } from '@/utils/mixins'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'UserDetail',
|
||||
mixins: [$view, $serviceType],
|
||||
dicts: ['sm_user_type', 'service_type', 'withdraw_service_type'],
|
||||
dicts: ['ss_user_type', 'withdraw_service_type'],
|
||||
components: {
|
||||
Device
|
||||
|
||||
UserConfigDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
detail: {},
|
||||
loading: false,
|
||||
showConfigDialog: false,
|
||||
activeTab: 'monthly',
|
||||
dateRange: [],
|
||||
selectedMonth: '',
|
||||
dailyReportData: [],
|
||||
monthlyReportData: [],
|
||||
dailyChart: null,
|
||||
monthlyChart: null,
|
||||
|
||||
// 统计卡片数据
|
||||
statisticsData: [
|
||||
{ label: '店铺数', field: 'storeCount', icon: 'el-icon-office-building', color: 'blue', unit: '家' },
|
||||
{ label: '房间数', field: 'roomCount', icon: 'el-icon-house', color: 'pink', unit: '间' },
|
||||
{ label: '设施数', field: 'facilityCount', icon: 'el-icon-box', color: 'cyan', unit: '个' },
|
||||
{ label: '设备数', field: 'deviceCount', icon: 'el-icon-monitor', color: 'green', unit: '台' },
|
||||
{ label: '账户余额', field: 'balance', icon: 'el-icon-wallet', color: 'purple', isMoney: true },
|
||||
{ label: '总收入', field: 'totalIncome', icon: 'el-icon-money', color: 'orange', isMoney: true },
|
||||
{ label: '总提现', field: 'totalWithdrawAmount', icon: 'el-icon-bank-card', color: 'red', isMoney: true },
|
||||
{ label: '总消费', field: 'totalConsumption', icon: 'el-icon-shopping-cart-full', color: 'brown', isMoney: true }
|
||||
],
|
||||
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
serviceUnit() {
|
||||
return (type) => {
|
||||
return type === '2' ? '元' : '%';
|
||||
return type === '2' ? '元' : '%'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDetail();
|
||||
this.getDetail()
|
||||
// 设置默认日期范围为最近7天
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
this.dateRange = [this.formatDate(start), this.formatDate(end)]
|
||||
// 设置默认月份为当前月
|
||||
this.selectedMonth = this.formatDate(new Date()).substring(0, 7)
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initCharts()
|
||||
this.loadDailyReport()
|
||||
this.loadMonthlyReport()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.loading = true;
|
||||
getUser(this.$route.params.userId).then(response => {
|
||||
this.detail = response.data;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
|
||||
handleTabClick(tab) {
|
||||
this.$nextTick(() => {
|
||||
if (tab.name === 'daily') {
|
||||
if (this.dailyChart) {
|
||||
this.dailyChart.dispose()
|
||||
}
|
||||
this.dailyChart = echarts.init(this.$refs.dailyChart)
|
||||
this.loadDailyReport()
|
||||
} else if (tab.name === 'monthly') {
|
||||
if (this.monthlyChart) {
|
||||
this.monthlyChart.dispose()
|
||||
}
|
||||
this.monthlyChart = echarts.init(this.$refs.monthlyChart)
|
||||
this.loadMonthlyReport()
|
||||
}
|
||||
})
|
||||
},
|
||||
getDetail() {
|
||||
this.loading = true
|
||||
getUser(this.$route.params.userId).then(response => {
|
||||
this.detail = response.data
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
},
|
||||
initCharts() {
|
||||
// 移除原有的初始化逻辑，改为只初始化当前激活的图表
|
||||
this.$nextTick(() => {
|
||||
if (this.activeTab === 'daily') {
|
||||
this.dailyChart = echarts.init(this.$refs.dailyChart)
|
||||
this.loadDailyReport()
|
||||
} else {
|
||||
this.monthlyChart = echarts.init(this.$refs.monthlyChart)
|
||||
this.loadMonthlyReport()
|
||||
}
|
||||
})
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
if (this.dailyChart && this.activeTab === 'daily') {
|
||||
this.dailyChart.resize()
|
||||
}
|
||||
if (this.monthlyChart && this.activeTab === 'monthly') {
|
||||
this.monthlyChart.resize()
|
||||
}
|
||||
})
|
||||
},
|
||||
loadDailyReport() {
|
||||
// 模拟日报表数据
|
||||
this.dailyReportData = Array.from({ length: 7 }, (_, i) => {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() - i)
|
||||
return {
|
||||
date: this.formatDate(date),
|
||||
rechargeAmount: Math.floor(Math.random() * 10000),
|
||||
consumeAmount: Math.floor(Math.random() * 8000),
|
||||
orderCount: Math.floor(Math.random() * 100)
|
||||
}
|
||||
}).reverse()
|
||||
|
||||
// 更新图表
|
||||
const option = {
|
||||
title: {
|
||||
text: '日报表统计'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['充值金额', '消费金额', '订单数']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.dailyReportData.map(item => item.date)
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额',
|
||||
axisLabel: {
|
||||
formatter: '{value} 元'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '订单数',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '充值金额',
|
||||
type: 'bar',
|
||||
data: this.dailyReportData.map(item => item.rechargeAmount)
|
||||
},
|
||||
{
|
||||
name: '消费金额',
|
||||
type: 'bar',
|
||||
data: this.dailyReportData.map(item => item.consumeAmount)
|
||||
},
|
||||
{
|
||||
name: '订单数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: this.dailyReportData.map(item => item.orderCount)
|
||||
}
|
||||
]
|
||||
}
|
||||
this.dailyChart.setOption(option)
|
||||
},
|
||||
loadMonthlyReport() {
|
||||
// 模拟月报表数据 - 获取当月每一天的数据
|
||||
const daysInMonth = new Date(this.selectedMonth.split('-')[0], this.selectedMonth.split('-')[1], 0).getDate();
|
||||
|
||||
this.monthlyReportData = Array.from({length: daysInMonth}, (_, i) => {
|
||||
return {
|
||||
date: `${this.selectedMonth}-${String(i + 1).padStart(2, '0')}`,
|
||||
rechargeAmount: Math.floor(Math.random() * 10000),
|
||||
consumeAmount: Math.floor(Math.random() * 8000)
|
||||
}
|
||||
})
|
||||
|
||||
// 更新图表
|
||||
const option = {
|
||||
title: {
|
||||
text: '月度统计'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['充值金额', '消费金额']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.monthlyReportData.map(item => item.date.split('-')[2]),
|
||||
name: '日期',
|
||||
nameLocation: 'end',
|
||||
nameGap: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value}日'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '金额',
|
||||
axisLabel: {
|
||||
formatter: '{value}元'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '充值金额',
|
||||
type: 'bar',
|
||||
barGap: '30%', // 柱间距离
|
||||
barWidth: '30%', // 柱宽度
|
||||
data: this.monthlyReportData.map(item => item.rechargeAmount)
|
||||
},
|
||||
{
|
||||
name: '消费金额',
|
||||
type: 'bar',
|
||||
barWidth: '30%', // 柱宽度
|
||||
data: this.monthlyReportData.map(item => item.consumeAmount)
|
||||
}
|
||||
]
|
||||
}
|
||||
this.monthlyChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container .box-card:nth-child(n + 1) {
|
||||
margin-top: 1em;
|
||||
.detail-row {
|
||||
display: flex;
|
||||
margin: 0 -6px; /* 抵消 el-row 的默认间距 */
|
||||
}
|
||||
|
||||
.detail-row > .el-col {
|
||||
display: flex;
|
||||
padding: 0 6px; /* 保持列间距 */
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-description {
|
||||
flex: 1;
|
||||
}
|
||||
.statistics-cards {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.stat-icon i {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 图标背景色 */
|
||||
.stat-icon.blue {
|
||||
background: linear-gradient(135deg, #409EFF, #36D1DC);
|
||||
}
|
||||
|
||||
.stat-icon.pink {
|
||||
background: linear-gradient(135deg, #FF9A9E, #FAD0C4);
|
||||
}
|
||||
|
||||
.stat-icon.cyan {
|
||||
background: linear-gradient(135deg, #20B2AA, #90EE90);
|
||||
}
|
||||
|
||||
.stat-icon.green {
|
||||
background: linear-gradient(135deg, #84FAB0, #8FD3F4);
|
||||
}
|
||||
|
||||
.stat-icon.purple {
|
||||
background: linear-gradient(135deg, #E0C3FC, #8EC5FC);
|
||||
}
|
||||
|
||||
.stat-icon.orange {
|
||||
background: linear-gradient(135deg, #FFF1B3, #FFD194);
|
||||
}
|
||||
|
||||
.stat-icon.red {
|
||||
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
|
||||
}
|
||||
|
||||
.stat-icon.brown {
|
||||
background: linear-gradient(135deg, #D4A373, #E6B17E);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.report-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.user-header {
|
||||
text-align: center;
|
||||
margin: 0 2em;
|
||||
}
|
||||
|
||||
.user-header .name-box {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
color: #9B9B9B;
|
||||
}
|
||||
.user-header {
|
||||
text-align: center;
|
||||
margin: 0 2em;
|
||||
}
|
||||
.user-header .name-box {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-detail .user-description {
|
||||
flex: 1;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
.app-container .box-card:nth-child(n + 1) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -135,6 +135,7 @@
|
|||
icon="el-icon-view"
|
||||
@click="handleView(scope.row)"
|
||||
v-hasPermi="['system:smUser:detail']"
|
||||
v-if="scope.row.userType == '01'"
|
||||
>详情</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user