chuangte/share-space-vue
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
tx 2025-01-09 18:02:49 +08:00
parent c44abae22d
commit fa9253b078
19 changed files with 1104 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/api/system/device.js
View File

@ -93,45 +93,11 @@ export function allDevice() {
})
}
// 开锁
export function handleUnlocking(data){
return request({
url: '/system/device/admin/unlockingByMac?mac='+data.mac,
method: 'post'
})
}
// 关锁
export function handleLock(data){
return request({
url: '/system/device/admin/lockByMac?mac='+data.mac,
method: 'post'
})
}
// 响铃寻车
export function ring(data){
return request({
url: '/app/device/ringByMac?mac='+data.mac,
method: 'post'
})
}
// 坐垫锁
export function seatCushionLock(data){
return request({
url: '/appVerify/device/seatCushionLockByMac?mac='+data.mac,
method: 'post'
})
}
// 重启设备
export function reboot(data){
return request({
url: '/system/device/device/reboot?mac='+data.mac,
method: 'post'
})
}
// 根据sn查询设备
export function getDeviceBySn(sn){
return request({
@ -147,4 +113,45 @@ export function bindDeviceFacility(data){
method: 'post',
// data: data
})
}
// 设备开关
export function deviceSwitch(data){
return request({
url: '/system/device/'+data.deviceId+'/switch?open='+data.open,
method: 'put',
// data: data
})
}
// 刷新设备
export function refreshIot(deviceId){
return request({
url: '/system/device/'+deviceId+'/refreshIot',
method: 'get'
})
}
// 重启设备
export function rebootDevice(deviceId){
return request({
url: '/system/device/'+deviceId+'/reboot',
method: 'put'
})
}
// 设备下线
export function offlineDevice(deviceId){
return request({
url: '/system/device/'+deviceId+'/offline',
method: 'put'
})
}
// 设备投放
export function placementDevice(data){
return request({
url: '/system/device/placement/',
method: 'post',
data: data
})
}

81
src/components/Charts/MiniLine.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div class="mini-line" ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'MiniLine',
props: {
data: {
type: Array,
required: true
},
color: {
type: String,
default: '#409EFF'
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart)
const option = {
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
xAxis: {
type: 'category',
show: false,
boundaryGap: false
},
yAxis: {
type: 'value',
show: false
},
series: [{
type: 'line',
data: this.data,
smooth: true,
symbol: 'none',
lineStyle: {
color: this.color,
width: 1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: this.color
}, {
offset: 1,
color: '#fff'
}]),
opacity: 0.2
}
}]
}
this.chart.setOption(option)
}
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
}
}
</script>
<style scoped>
.mini-line {
width: 100%;
height: 100%;
}
</style>

212
src/views/index.vue
View File

@ -1,86 +1,158 @@
<template>
<div class="app-container home">
<div class="app-container" v-loading="loading">
<template>
<!-- 统计卡片行 -->
<el-row :gutter="20" class="statistics-cards">
<el-col :span="6" v-for="(stat, index) in statisticsData" :key="index">
<div class="stat-card">
<div class="stat-header">
<span class="stat-title">{{ stat.label }}</span>
<el-tooltip v-if="stat.tip" :content="stat.tip" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
<div class="stat-body">
<div class="stat-value">
<template v-if="stat.isMoney">¥ {{ detail[stat.field] || '0.00' }}</template>
<template v-else>{{ detail[stat.field] || '0' }}</template>
</div>
<div class="stat-trend" v-if="stat.today !== undefined">
今日
<span :class="['trend-value', stat.today > 0 ? 'up' : 'down']">
{{ stat.today }}
<i :class="stat.today > 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
</span>
</div>
</div>
<div class="stat-chart" v-if="stat.chartData">
<mini-line :data="stat.chartData" :color="stat.chartColor" />
</div>
</div>
</el-col>
</el-row>
<!-- 其他内容保持不变 -->
</template>
</div>
</template>
<script>
// ... 其他 import 保持不变 ...
import MiniLine from '@/components/Charts/MiniLine' // 需要创建这个迷你折线图组件
export default {
name: "Index",
components: {
// ... 其他组件保持不变 ...
MiniLine
},
data() {
return {
// 版本号
version: "3.8.8"
};
},
methods: {
goTarget(href) {
window.open(href, "_blank");
// ... 其他 data 保持不变 ...
statisticsData: [
{
label: '设备总数',
field: 'deviceCount',
today: 255,
chartData: [120, 132, 101, 134, 90, 230, 210],
chartColor: '#409EFF',
tip: '系统中的所有设备数量'
},
{
label: '订单总数',
field: 'orderCount',
today: 77,
chartData: [220, 182, 191, 234, 290, 330, 310],
chartColor: '#67C23A',
tip: '系统中的所有订单数量'
},
{
label: '账户余额',
field: 'balance',
isMoney: true,
chartData: [150, 232, 201, 154, 190, 330, 410],
chartColor: '#E6A23C'
},
{
label: '总收入',
field: 'totalIncome',
isMoney: true,
chartData: [320, 332, 301, 334, 390, 330, 320],
chartColor: '#F56C6C'
}
]
}
}
};
// ... 其他方法保持不变 ...
}
</script>
<style scoped lang="scss">
.home {
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
}
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
ul {
list-style-type: none;
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
p {
margin-top: 10px;
b {
font-weight: 700;
<style lang="scss" scoped>
.statistics-cards {
margin-bottom: 20px;
.stat-card {
background: #fff;
border-radius: 4px;
padding: 20px;
height: 180px;
position: relative;
overflow: hidden;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
.stat-header {
display: flex;
align-items: center;
margin-bottom: 16px;
.stat-title {
font-size: 14px;
color: #909399;
}
.el-icon-question {
margin-left: 4px;
color: #909399;
cursor: pointer;
}
}
}
.update-log {
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
.stat-body {
.stat-value {
font-size: 24px;
font-weight: bold;
color: #303133;
margin-bottom: 8px;
}
.stat-trend {
font-size: 12px;
color: #909399;
.trend-value {
margin-left: 4px;
&.up {
color: #f56c6c;
}
&.down {
color: #67c23a;
}
i {
margin-left: 2px;
}
}
}
}
.stat-chart {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
}
}
}
</style>
</style>

6
src/views/system/changeBalance/index.vue
View File

@ -188,6 +188,7 @@ import { listChangeBalance, getChangeBalance, delChangeBalance, addChangeBalance
export default {
name: "ChangeBalance",
dicts: ['rl_change_type', 'rl_business_type','rl_user_type'],
props: ['userId'],
data() {
return {
// 遮罩层
@ -237,6 +238,9 @@ export default {
methods: {
/** 查询余额变动列表 */
getList() {
if (this.userId) {
this.queryParams.userId = this.userId;
}
this.loading = true;
listChangeBalance(this.queryParams).then(response => {
this.changeBalanceList = response.rows;
@ -244,7 +248,7 @@ export default {
this.loading = false;
});
},
// 取消按钮
// 取消按钮
cancel() {
this.open = false;
this.reset();

4
src/views/system/detail/index.vue
View File

@ -123,6 +123,7 @@ import { listDetail, getDetail, delDetail, addDetail, updateDetail } from "@/api
export default {
name: "Detail",
dicts: ['rl_user_type','rl_dividend_status'],
props: ['userId'],
data() {
return {
// 遮罩层
@ -202,6 +203,9 @@ export default {
/** 查询分账明细列表 */
getList() {
this.loading = true;
if (this.userId) {
this.queryParams.userId = this.userId;
}
listDetail(this.queryParams).then(response => {
this.detailList = response.rows;
this.total = response.total;

223
src/views/system/device/device_detail.vue
View File

@ -91,10 +91,10 @@
<div slot="header" class="card-header">
<span>归属信息</span>
<div class="header-buttons">
<el-button type="success" icon="el-icon-connection" plain size="small"
<!-- <el-button type="success" icon="el-icon-connection" plain size="small"
@click="openBindUserDialog">绑定商户</el-button>
<el-button type="success" icon="el-icon-connection" plain size="small"
@click="openBindFacilityDialog">绑定设施</el-button>
@click="openBindFacilityDialog">绑定设施</el-button> -->
</div>
</div>
<el-row :gutter="20">
@ -112,8 +112,8 @@
<el-input v-model="editForm.room.roomName" size="small" class="edit-input" disabled></el-input>
</template>
<router-link v-else :to="'/system/roomDetail/index/' + deviceData.room.roomId" class="link-type">
<span>{{ deviceData.room.roomName || '--' }}</span>
</router-link>
<span>{{ deviceData.room.roomName || '--' }}</span>
</router-link>
</div>
</el-col>
<el-col :span="8">
@ -123,17 +123,18 @@
<el-input v-model="editForm.storeName" size="small" class="edit-input" disabled></el-input>
</template>
<router-link v-else :to="'/system/storeDetail/index/' + deviceData.storeId" class="link-type">
<span>{{ deviceData.storeName || '--' }}</span>
</router-link>
<span>{{ deviceData.storeName || '--' }}</span>
</router-link>
</div>
<div class="info-item">
<span class="label">绑定设施:</span>
<template v-if="isEditing">
<el-input v-model="editForm.equ.name" size="small" class="edit-input" disabled></el-input>
</template>
<router-link v-else :to="'/system/equipmentDetail/index/' + deviceData.equ.equipmentId" class="link-type">
<span>{{ deviceData.equ.name }}</span>
</router-link>
<router-link v-else :to="'/system/equipmentDetail/index/' + deviceData.equ.equipmentId"
class="link-type">
<span>{{ deviceData.equ.name }}</span>
</router-link>
</div>
</el-col>
<el-col :span="8">
@ -143,8 +144,8 @@
<el-input v-model="editForm.userName" size="small" class="edit-input" disabled></el-input>
</template>
<router-link v-else :to="'/user/detail/' + deviceData.userId" class="link-type">
<span>{{ deviceData.userName || '--' }}</span>
</router-link>
<span>{{ deviceData.userName || '--' }}</span>
</router-link>
</div>
<div class="info-item">
<span class="label">备注:</span>
@ -255,16 +256,20 @@
</div>
<div class="operation-buttons">
<!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(deviceData)">修改</el-button> -->
<el-button v-if="deviceData.status != '3'" type="primary" plain icon="el-icon-unlock"
<el-button v-if="deviceData.status != '3'" type="primary" plain icon="el-icon-unlock"
@click="handleUnlocking(deviceData)">打开</el-button>
<el-button type="primary" plain icon="el-icon-lock" @click="handleLock(deviceData)">关闭</el-button>
<el-button v-if="deviceData.status != '0'" icon="el-icon-check" type="primary" plain
<el-button type="primary" plain icon="el-icon-lock" @click="handleLock(deviceData)">关闭</el-button>
<!-- <el-button v-if="deviceData.status != '0'" icon="el-icon-check" type="primary" plain
@click="handleOnline(deviceData)">
{{ deviceData.status === '8' ? '解禁' : '禁用' }}
</el-button>
<el-button type="primary" plain icon="el-icon-refresh" @click="reboot(deviceData)">重启</el-button>
<el-button type="primary" plain icon="el-icon-refresh" @click="refresh(deviceData)">更新</el-button>
<el-button type="primary" plain icon="el-icon-delete" @click="handleDelete(deviceData)">删除</el-button>
{{ deviceData.status === '8' ? '投放' : '下线' }}
</el-button> -->
<el-button type="primary" plain icon="el-icon-refresh" @click="reboot(deviceData)">重启</el-button>
<el-button type="primary" plain icon="el-icon-refresh" @click="refresh(deviceData)">更新</el-button>
<el-button type="primary" icon="el-icon-connection" plain
@click="openBindUserDialog">绑定商户</el-button>
<el-button type="primary" icon="el-icon-connection" plain
@click="openBindFacilityDialog">绑定设施</el-button>
<!-- <el-button type="primary" plain icon="el-icon-delete" @click="handleDelete(deviceData)">删除</el-button> -->
</div>
</el-card>
</el-col>
@ -287,8 +292,8 @@
<el-dialog title="绑定设施" :visible.sync="bindFacilityDialogVisible" width="900px" append-to-body>
<el-table v-loading="facilityTableLoading" :data="facilityList" style="width: 100%" height="500">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="设施id" prop="equipmentId" align="center" />
<el-table-column label="设施名称" prop="name" align="center" />
<!-- <el-table-column label="设施id" prop="equipmentId" align="center" /> -->
<el-table-column label="设施名称" prop="roomName" align="center" />
<el-table-column label="设施图片" align="center">
<template slot-scope="scope">
<image-preview :src="scope.row.picture" :width="50" :height="50" />
@ -373,17 +378,20 @@
import {
getDevice,
updateDevice,
handleLock,
handleUnlocking,
refreshIot,
reboot,
refreshDevice,
delDevice,
bindDeviceFacility,
bindDeviceUser
bindDeviceUser,
deviceSwitch,
rebootDevice,
offlineDevice
} from '@/api/system/device'
import { listUser } from "@/api/user/user"
import { listData } from '@/api/system/dict/data'
import { listEquipment } from "@/api/system/equipment"
import QrCode from '@/components/QrCode/index.vue'
import QRCode from 'qrcode'
import Role from '@/views/system/rule/index.vue'
@ -391,8 +399,8 @@ import Log from '@/views/system/commandLog/index.vue'
export default {
name: "DeviceDetail",
components: {
QrCode,Role,Log
},
QrCode, Role, Log
},
dicts: ['ss_equipment_type', 'ss_equipment_status', 'ss_user_type'],
data() {
return {
@ -483,7 +491,7 @@ export default {
}
},
methods: {
toUserDetail(){
toUserDetail() {
if (this.deviceData.userId) {
this.$router.push(`/user/detail/${this.deviceData.userId}`);
}
@ -536,9 +544,11 @@ export default {
pageSize: this.facilityQueryParams.pageSize,
name: undefined,
type: undefined,
status: undefined
status: undefined,
storeId: this.deviceData.storeId
};
console.log(queryParams, 'queryParams');
listEquipment(queryParams).then(response => {
this.facilityList = response.rows;
this.facilityTotal = response.total;
@ -592,26 +602,48 @@ export default {
},
handleUnlocking(row) {
handleUnlocking(row.deviceId).then(() => {
this.$message.success("设备已解锁")
deviceSwitch({ deviceId: row.deviceId, open: true }).then((response) => {
if (response.code == 200) {
this.fetchDeviceData(row.deviceId)
this.$message.success("设备已打开")
} else {
this.$message.error("设备打开失败")
}
})
},
handleLock(row) {
handleLock(row.deviceId).then(() => {
this.$message.success("设备已锁定")
deviceSwitch({ deviceId: row.deviceId, open: false }).then((response) => {
if (response.code == 200) {
this.fetchDeviceData(row.deviceId)
this.$message.success("设备已关闭")
} else {
this.$message.error("设备关闭失败")
}
})
},
reboot(row) {
reboot(row.deviceId).then(() => {
this.$message.success("设备已重启")
rebootDevice(row.deviceId).then((response) => {
if (response.code == 200) {
this.fetchDeviceData(row.deviceId)
this.$message.success("设备已重启")
} else {
this.$message.error("设备重启失败")
}
})
},
refresh(row) {
refreshDevice(row.deviceId).then(() => {
this.$message.success("设备已更新")
refreshIot(row.deviceId).then((response) => {
if (response.code == 200) {
this.fetchDeviceData(row.deviceId)
this.$message.success("设备已刷新")
} else {
this.$message.error("设备刷新失败")
}
})
},
@ -629,21 +661,19 @@ export default {
this.getFacilityList()
},
getFacilityList() {
this.facilityTableLoading = true
listEquipment(this.facilityQueryParams).then(response => {
this.facilityList = response.rows || []
this.facilityTotal = response.total || 0
this.facilityTableLoading = false
})
},
// getFacilityList() {
// this.facilityTableLoading = true
// listEquipment(this.facilityQueryParams).then(response => {
// this.facilityList = response.rows || []
// this.facilityTotal = response.total || 0
// this.facilityTableLoading = false
// })
// },
handleBindFacility(row) {
this.$modal.confirm('确认要将该设备绑定到设施"' + row.name + '"吗？').then(() => {
return bindDeviceFacility({
deviceId: this.deviceData.deviceId,
equipmentId: row.equipmentId
})
placementDevice({
deviceId: this.deviceData.deviceId,
type: row.type
}).then(() => {
this.$modal.msgSuccess("绑定成功")
this.bindFacilityDialogVisible = false
@ -654,16 +684,18 @@ export default {
handleOnline(row) {
const status = row.status === '8' ? '0' : '8'
const statusText = status === '8' ? '禁用' : '启用'
this.$modal.confirm('确认要' + statusText + '该设备吗？').then(() => {
return updateDevice({
deviceId: row.deviceId,
status: status
if (status == '8') {
offlineDevice(row.deviceId).then((response) => {
if (response.code == 200) {
this.$message.success("设备已下线")
this.fetchDeviceData(row.deviceId)
} else {
this.$message.error("设备下线失败")
}
})
}).then(() => {
this.$modal.msgSuccess(statusText + "成功")
this.fetchDeviceData(row.deviceId)
}).catch(() => { })
} else {
}
},
openBindUserDialog() {
@ -680,35 +712,40 @@ export default {
})
},
// 搜索按钮操作
handleUserQuery() {
this.userQueryParams.pageNum = 1;
this.getUserList();
},
handleUserQuery() {
this.userQueryParams.pageNum = 1;
this.getUserList();
},
// 重置按钮操作
resetUserQuery() {
this.$refs["queryForm"].resetFields();
this.userQueryParams = {
pageNum: 1,
pageSize: 10,
userName: undefined,
phonenumber: undefined,
status: undefined,
userType: '01'
};
// 重置按钮操作
resetUserQuery() {
this.$refs["queryForm"].resetFields();
this.userQueryParams = {
pageNum: 1,
pageSize: 10,
userName: undefined,
phonenumber: undefined,
status: undefined,
userType: '01'
};
this.handleUserQuery();
},
handleBindUser(row) {
this.$modal.confirm('确认要将该设备绑定到商户"' + row.userName + '"吗？').then(() => {
return bindDeviceUser({
deviceId: this.deviceData.deviceId,
userId: row.userId
})
}).then(() => {
this.$modal.msgSuccess("绑定成功")
this.bindUserDialogVisible = false
this.fetchDeviceData(this.deviceData.deviceId)
}).catch(() => { })
}).then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess("绑定成功")
this.bindUserDialogVisible = false
this.fetchDeviceData(this.deviceData.deviceId)
} else {
this.$message.error("绑定失败")
}
}).catch((err) => {
console.log(err, 'err');
this.$message.error("绑定失败", err)
})
}
}
}
@ -718,15 +755,17 @@ export default {
<style lang="scss" scoped>
.device-detail {
padding: 20px;
.link-type {
color: #11A983;
text-decoration: underline;
}
.link-type:hover {
color: #11A98330;
text-decoration: underline;
}
.link-type {
color: #11A983;
text-decoration: underline;
}
.link-type:hover {
color: #11A98330;
text-decoration: underline;
}
.top-section {
display: flex;
align-items: stretch;
@ -820,7 +859,7 @@ export default {
.el-button {
margin: 0;
padding: 20 10px;
padding: 8px 10px;
flex: 1 1 45%;
}
}

7
src/views/system/device/index.vue
View File

@ -366,6 +366,10 @@ export default {
roomId: {
type: Number,
default: 0
},
userId: {
type: Number,
default: 0
},
},
data() {
@ -631,6 +635,9 @@ export default {
if(this.roomId && this.roomId != 0){
this.queryParams.roomId = this.roomId;
}
if(this.userId && this.userId != 0){
this.queryParams.userId = this.userId;
}
listDevice(this.queryParams).then(response => {
this.deviceList = response.rows;
this.total = response.total;

5
src/views/system/equipment/index.vue
View File

@ -163,7 +163,7 @@ export default {
name: "Room",
mixins: [$showColumns],
dicts: ['ss_hall_equ_type', 'ss_room_status', 'ss_room_tags'],
props: ['storeId', 'roomId'],
props: ['storeId', 'roomId','userId'],
data() {
return {
// 字段列表
@ -267,6 +267,9 @@ export default {
this.queryParams.roomId = this.roomId;
this.queryParams.type2 = null;
}
if (this.userId) {
this.queryParams.userId = this.userId;
}
listRoom(this.queryParams).then(response => {
this.roomList = response.rows;
this.total = response.total;

18
src/views/system/order/index.vue
View File

@ -252,7 +252,7 @@ const defaultSort = {
export default {
name: "Order",
mixins: [$showColumns],
props: ['storeId', 'roomId'],
props: ['storeId','roomId','userId','merchantId'],
components: { RefundDialog},
dicts: ['ss_order_status', 'ss_pay_type', 'rl_distribution_mode', 'rl_rental_unit','ss_order_type','et_order_pay_status'],
data() {
@ -405,8 +405,20 @@ export default {
/** 查询订单列表 */
getList() {
this.loading = true;
this.queryParams.storeId = this.storeId;
this.queryParams.roomId = this.roomId;
if (this.storeId) {
this.queryParams.storeId = this.storeId;
}
if (this.roomId) {
this.queryParams.roomId = this.roomId;
}
if (this.userId) {
this.queryParams.userId = this.userId;
}
if (this.merchantId) {
this.queryParams.merchantId = this.merchantId;
}
console.log(this.userId,'this.userId');
console.log(this.merchantId,'this.merchantId');
listOrder(this.queryParams).then(response => {
this.orderList = response.rows;
this.total = response.total;

6
src/views/system/room/index.vue
View File

@ -153,7 +153,7 @@ export default {
name: "Room",
mixins: [$showColumns],
dicts: ['ss_room_type', 'ss_room_status', 'ss_room_tags'],
props: ['storeId'],
props: ['storeId', 'userId'],
data() {
return {
// 字段列表
@ -252,6 +252,10 @@ export default {
getList() {
this.loading = true;
this.queryParams.storeId = this.storeId;
if (this.userId) {
this.queryParams.userId = this.userId;
}
listRoom(this.queryParams).then(response => {
this.roomList = response.rows;
this.total = response.total;

5
src/views/system/rule/index.vue
View File

@ -275,7 +275,7 @@ export default {
};
},
created() {
console.log(this.roomId,'roomId');
if(this.roomId && this.roomId != 0){
this.queryParams.roomId = this.roomId;
this.queryParams.type2 = null;
@ -345,6 +345,9 @@ export default {
/** 查询收费模板列表 */
getList() {
this.loading = true;
if(this.userId && this.userId != 0){
this.queryParams.userId = this.userId;
}
listRule(this.queryParams).then(response => {
this.ruleList = response.rows;
this.total = response.total;

5
src/views/system/store/index.vue
View File

@ -284,6 +284,7 @@ export default {
name: "Store",
mixins: [$showColumns],
dicts: ['ss_store_status', 'ss_store_tags', 'ss_room_type'],
props: ['userId'],
data() {
return {
// 字段列表
@ -400,6 +401,10 @@ export default {
/** 查询店铺列表 */
getList() {
this.loading = true;
if (this.userId) {
this.queryParams.userId = this.userId;
}
listStore(this.queryParams).then(response => {
this.storeList = response.rows;
this.total = response.total;

8
src/views/system/userWithdraw/index.vue
View File

@ -155,7 +155,7 @@
<!-- 添加或修改用户提现渠道对话框 -->
<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="userId">
<el-form-item label="用户" prop="userId" v-if="!userId">
<el-input v-model="form.userId" placeholder="请输入用户" />
</el-form-item>
<el-form-item label="提现渠道ID" prop="channelId">
@ -189,7 +189,7 @@
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
@ -208,6 +208,7 @@ import { listUserWithdraw, getUserWithdraw, delUserWithdraw, addUserWithdraw, up
export default {
name: "UserWithdraw",
dicts: ['rl_handling_charge_type', 'sys_normal_disable'],
props: ['userId'],
data() {
return {
// 遮罩层
@ -270,6 +271,9 @@ export default {
/** 查询用户提现渠道列表 */
getList() {
this.loading = true;
if (this.userId) {
this.queryParams.userId = this.userId;
}
listUserWithdraw(this.queryParams).then(response => {
this.userWithdrawList = response.rows;
this.total = response.total;

4
src/views/system/withdraw/index.vue
View File

@ -171,6 +171,7 @@ import { getUser } from '@/api/system/user'
export default {
name: "Withdraw",
dicts: ['et_call_status', 'et_withdraw_status'],
props: ['userId'],
computed: {
formattedFee() {
console.log("handlingCharge===========",this.handlingCharge)
@ -363,6 +364,9 @@ export default {
/** 查询提现记录列表 */
getList() {
this.loading = true;
if (this.userId) {
this.queryParams.userId = this.userId;
}
listWithdraw(this.queryParams).then(response => {
this.withdrawList = response.rows;
this.total = response.total;

2
src/views/user/user/components/UserConfigDialog.vue
View File

@ -68,7 +68,7 @@ export default {
default: false,
},
userId: {
type: String,
type: Number,
default: null,
},
showCurrent: {

198
src/views/user/user/components/bindList.vue Normal file
View File

@ -0,0 +1,198 @@
<template>
<div class="bind-list">
<!-- 搜索区域 -->
<div class="search-area">
<el-form :inline="true" :model="queryParams" ref="queryForm">
<el-form-item label="设备SN" prop="sn">
<el-input v-model="queryParams.sn" placeholder="请输入设备SN" clearable />
</el-form-item>
<el-form-item label="用户名称" prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
<el-option label="全部" value="" />
<el-option label="绑定" value="bind" />
<el-option label="解绑" value="unbind" />
</el-select>
</el-form-item>
<el-form-item label="用户类型" prop="userType">
<el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
<el-option label="全部" value="" />
<el-option label="商户" value="merchant" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<!-- 表格区域 -->
<el-table
v-loading="loading"
:data="filteredList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="时间" align="center" prop="time" sortable />
<el-table-column label="设备" align="center" prop="deviceSn" sortable />
<el-table-column label="用户" align="center" prop="user" sortable />
<el-table-column label="用户类型" align="center" prop="userType">
<template #default="scope">
<el-tag size="mini" type="info">{{ scope.row.userType }}</el-tag>
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="type">
<template #default="scope">
<el-tag size="mini" :type="scope.row.type === '绑定' ? 'success' : 'danger'">
{{ scope.row.type }}
</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
export default {
name: "BindList",
data() {
return {
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 总条数
total: 0,
// 绑定记录表格数据（模拟数据）
bindList: [
{
id: 1,
time: '2025-01-07 22:01:39',
deviceSn: 'SN6080708',
user: '微信yWKI',
userType: '商户',
type: '绑定'
},
{
id: 2,
time: '2025-01-07 22:01:31',
deviceSn: 'SN6080708',
user: '微信yWKI',
userType: '商户',
type: '解绑'
},
{
id: 3,
time: '2025-01-07 21:58:35',
deviceSn: 'SN6080708',
user: '微信yWKI',
userType: '商户',
type: '绑定'
},
{
id: 4,
time: '2025-01-07 21:58:16',
deviceSn: 'SN6080708',
user: '微信yWKI',
userType: '商户',
type: '解绑'
},
{
id: 5,
time: '2025-01-06 18:51:10',
deviceSn: 'SN6080708',
user: '微信yWKI',
userType: '商户',
type: '绑定'
}
],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
sn: undefined,
userName: undefined,
type: undefined,
userType: undefined
}
};
},
computed: {
filteredList() {
let list = [...this.bindList];
// 根据查询条件筛选
if (this.queryParams.sn) {
list = list.filter(item => item.deviceSn.includes(this.queryParams.sn));
}
if (this.queryParams.userName) {
list = list.filter(item => item.user.includes(this.queryParams.userName));
}
if (this.queryParams.type) {
const type = this.queryParams.type === 'bind' ? '绑定' : '解绑';
list = list.filter(item => item.type === type);
}
if (this.queryParams.userType) {
list = list.filter(item => item.userType === '商户');
}
// 更新总数
this.total = list.length;
// 分页处理
const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
const end = start + this.queryParams.pageSize;
return list.slice(start, end);
}
},
methods: {
/** 查询绑定记录列表 */
getList() {
// 使用计算属性自动处理
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams = {
pageNum: 1,
pageSize: 20,
sn: undefined,
userName: undefined,
type: undefined,
userType: undefined
};
this.getList();
},
/** 多选框选中数据 */
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
}
}
};
</script>
<style scoped>
.bind-list {
padding: 20px;
}
.search-area {
margin-bottom: 20px;
}
</style>

2
src/views/user/user/components/userDevice.vue
View File

@ -46,7 +46,7 @@ export default {
props: {
// 用户id
userId: {
type: String,
type: Number,
default: null,
}
},

605
src/views/user/user/detail.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="app-container" v-loading="loading">
<template>
<!-- 添加操作按钮 -->
<!-- 统计卡片行 -->
<el-row :gutter="20" class="statistics-cards">
<el-col :span="3" v-for="(stat, index) in statisticsData" :key="index">
@ -21,15 +24,17 @@
<el-row :gutter="12" class="detail-row">
<!-- 用户详情卡片 -->
<el-col :lg="10" :md="12" :xs="24" >
<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>
</div>
</el-row>
<el-row type="flex" justify="end" class="mb-2">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="handleUpdate"
v-hasPermi="['system:smUser:edit']">修改</el-button>
<el-button type="primary" icon="el-icon-setting" size="mini" @click="handleUpdateRisk"
v-hasPermi="['system:smUser:edit']">配置</el-button>
</el-row>
</template>
<div class="user-detail">
@ -81,7 +86,7 @@
<!-- 报表卡片 -->
<el-col :lg="14" :md="12" :xs="24">
<el-card class="box-card">
<el-tabs v-model="activeTab" @tab-click="handleTabClick" style="width: 100%">
<el-tabs v-model="reportActiveTab" @tab-click="handleReportTabClick" style="width: 100%">
<!-- 日报表 -->
<el-tab-pane label="日报表" name="daily">
<div class="report-container">
@ -93,7 +98,6 @@
<div class="chart-container">
<div ref="dailyChart" style="width: 100%; height: 300px"></div>
</div>
</div>
</el-tab-pane>
@ -115,36 +119,174 @@
</el-row>
</template>
<!-- 添加修改对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户类型" prop="userType">
<el-select v-model="form.userType" placeholder="请选择用户类型">
<el-option v-for="dict in filteredUserTypes" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{
dict.label
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.userType === '01'">
<el-col :span="12">
<el-form-item label="服务费率" prop="serviceFeeProportion">
<el-input-number v-model="form.serviceFeeProportion" :min="0" :max="100" :precision="2"
controls-position="right">
<template slot="append">%</template>
</el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.userType === '05'">
<el-col :span="12">
<el-form-item label="分红状态" prop="dividendStatus">
<el-switch v-model="form.dividendStatus" active-value="0" inactive-value="1"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分红比例" prop="dividendProportion">
<el-input-number v-model="form.dividendProportion" :min="0" :max="100" :precision="2"
controls-position="right">
<template slot="append">%</template>
</el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 用户配置对话框 -->
<user-config-dialog :show.sync="showConfigDialog" :user-id="detail.userId" @success="getDetail" />
<el-tabs v-model="mainActiveTab" class="detail-tabs" v-if="detail.userId">
<el-tab-pane label="收入订单" name="orders">
<order :userId="detail.userId"></order>
</el-tab-pane>
<el-tab-pane label="充值订单" name="recharge">
<order :merchantId="detail.userId"></order>
</el-tab-pane>
<el-tab-pane label="设备列表" name="devices">
<device :userId="detail.userId"></device>
</el-tab-pane>
<el-tab-pane label="套餐列表" name="rules">
<rule :userId="detail.userId"></rule>
</el-tab-pane>
<el-tab-pane label="设施列表" name="equipments">
<equipment :userId="detail.userId"></equipment>
</el-tab-pane>
<el-tab-pane label="店铺列表" name="stores">
<store :userId="detail.userId"></store>
</el-tab-pane>
<el-tab-pane label="房间列表" name="rooms">
<room :userId="detail.userId"></room>
</el-tab-pane>
<el-tab-pane label="分账明细" name="detail">
<detail :userId="detail.userId"></detail>
</el-tab-pane>
<el-tab-pane label="帐变记录" name="changeBalance">
<changeBalance :userId="detail.userId"></changeBalance>
</el-tab-pane>
<el-tab-pane label="提现记录" name="withdraw">
<withdraw :userId="detail.userId"></withdraw>
</el-tab-pane>
<el-tab-pane label="提现渠道" name="userWithdraw">
<userWithdraw :userId="detail.userId"></userWithdraw>
</el-tab-pane>
<el-tab-pane label="设备绑定" name="bindList">
<bindList :userId="detail.userId"></bindList>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { getUser } from '@/api/system/user'
import UserConfigDialog from './components/UserConfigDialog.vue'
import { $serviceType, $view } from '@/utils/mixins'
import * as echarts from 'echarts'
import { getUser, updateUser } from "@/api/user/user";
import UserConfigDialog from './components/UserConfigDialog.vue';
import { $serviceType, $view } from '@/utils/mixins';
import * as echarts from 'echarts';
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'
import store from '@/views/system/store/index.vue'
import room from '@/views/system/room/index.vue'
import detail from '@/views/system/detail/index.vue'
import changeBalance from '@/views/system/changeBalance/index.vue'
import withdraw from '@/views/system/withdraw/index.vue'
import userWithdraw from '@/views/system/userWithdraw/index.vue'
import bindList from './components/bindList.vue'
export default {
name: 'UserDetail',
name: "UserDetail",
mixins: [$view, $serviceType],
dicts: ['ss_user_type', 'withdraw_service_type'],
dicts: ['sys_normal_disable', 'ss_user_type', 'withdraw_service_type'],
components: {
UserConfigDialog
UserConfigDialog,
order,
device,
rule,
equipment,
store,
room,
detail,
changeBalance,
withdraw,
userWithdraw,
bindList
},
data() {
return {
detail: {},
loading: false,
showConfigDialog: false,
activeTab: 'monthly',
dateRange: [],
selectedMonth: '',
dailyReportData: [],
monthlyReportData: [],
dailyChart: null,
monthlyChart: null,
// 统计卡片数据
open: false,
title: "",
form: {},
reportActiveTab: 'monthly',
mainActiveTab: 'orders',
statisticsData: [
{ label: '店铺数', field: 'storeCount', icon: 'el-icon-office-building', color: 'blue', unit: '家' },
{ label: '房间数', field: 'roomCount', icon: 'el-icon-house', color: 'pink', unit: '间' },
@ -174,10 +316,37 @@ export default {
picker.$emit('pick', [start, end])
}
}]
},
rules: {
userName: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
],
phonenumber: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
],
userType: [
{ required: true, message: "用户类型不能为空", trigger: "change" }
],
serviceFeeProportion: [
{ required: true, message: "服务费率不能为空", trigger: "blur" }
],
dividendProportion: [
{ required: true, message: "分红比例不能为空", trigger: "blur" }
]
}
}
};
},
computed: {
filteredUserTypes() {
return this.dict.type.ss_user_type.filter(item => item.value !== '09');
},
serviceUnit() {
return (type) => {
return type === '2' ? '元' : '%'
@ -185,91 +354,160 @@ export default {
}
},
created() {
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)
this.getDetail();
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()
})
this.initCharts();
});
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
if (this.dailyChart) {
this.dailyChart.dispose();
}
if (this.monthlyChart) {
this.monthlyChart.dispose();
}
},
methods: {
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()
}
})
this.$nextTick(() => {
// 根据当前激活的 tab 初始化对应的图表
if (this.reportActiveTab === 'daily' && this.$refs.dailyChart) {
this.dailyChart = echarts.init(this.$refs.dailyChart);
this.loadDailyReport();
} else if (this.reportActiveTab === 'monthly' && this.$refs.monthlyChart) {
this.monthlyChart = echarts.init(this.$refs.monthlyChart);
this.loadMonthlyReport();
}
// 监听窗口大小变化
window.addEventListener('resize', () => {
if (this.dailyChart && this.activeTab === 'daily') {
this.dailyChart.resize()
// 添加窗口大小变化监听
window.addEventListener('resize', this.handleResize);
});
},
handleResize() {
// 只对当前激活的图表进行 resize
if (this.reportActiveTab === 'daily' && this.dailyChart) {
this.dailyChart.resize();
} else if (this.reportActiveTab === 'monthly' && this.monthlyChart) {
this.monthlyChart.resize();
}
},
handleReportTabClick(tab) {
// 在切换后给图表一个重新渲染的机会
this.$nextTick(() => {
if (tab.name === 'daily') {
// 如果已存在图表实例，先销毁
if (this.dailyChart) {
this.dailyChart.dispose();
}
if (this.monthlyChart && this.activeTab === 'monthly') {
this.monthlyChart.resize()
// 重新初始化图表
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;
});
},
handleUpdate() {
this.form = { ...this.detail };
if (this.form.userType === '01') {
this.form.serviceFeeProportion = this.form.serviceFeeProportion * 100;
}
if (this.form.userType === '05') {
this.form.dividendProportion = this.form.dividendProportion * 100;
}
this.open = true;
this.title = "修改用户";
},
handleUpdateRisk() {
this.showConfigDialog = true;
},
cancel() {
this.open = false;
this.reset();
},
reset() {
this.form = {
userId: undefined,
userName: undefined,
phonenumber: undefined,
status: "0",
userType: undefined,
serviceFeeProportion: 0,
dividendStatus: "1",
dividendProportion: 0,
remark: undefined
};
this.resetForm("form");
},
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
const submitData = { ...this.form };
if (submitData.userType === '01') {
submitData.serviceFeeProportion = submitData.serviceFeeProportion / 100;
}
if (submitData.userType === '05') {
submitData.dividendProportion = submitData.dividendProportion / 100;
}
updateUser(submitData).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getDetail();
});
}
});
},
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}`;
},
loadDailyReport() {
// 模拟日报表数据
this.dailyReportData = Array.from({ length: 7 }, (_, i) => {
const date = new Date()
date.setDate(date.getDate() - 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()
};
}).reverse();
// 更新图表
const option = {
title: {
text: '日报表统计'
@ -327,88 +565,133 @@ export default {
data: this.dailyReportData.map(item => item.orderCount)
}
]
};
if (this.dailyChart) {
this.dailyChart.setOption(option);
}
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'
loadMonthlyReport() {
const [year, month] = this.selectedMonth.split('-');
const daysInMonth = new Date(year, month, 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: 'line'
}
},
legend: {
data: ['充值金额', '消费金额']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false, // 改为 false，让线条从起点开始
data: this.monthlyReportData.map((_, index) => index + 1),
axisLabel: {
formatter: '{value}日'
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}元'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
series: [
{
name: '充值金额',
type: 'line',
symbol: 'circle', // 数据点的形状
symbolSize: 6, // 数据点的大小
itemStyle: {
normal: {
lineStyle: {
width: 2
}
}
},
areaStyle: {
opacity: 0.1
},
data: this.monthlyReportData.map(item => item.rechargeAmount)
},
{
name: '消费金额',
type: 'line',
symbol: 'circle',
symbolSize: 6,
itemStyle: {
normal: {
lineStyle: {
width: 2
}
}
},
areaStyle: {
opacity: 0.1
},
data: this.monthlyReportData.map(item => item.consumeAmount)
}
]
};
if (this.monthlyChart) {
this.monthlyChart.setOption(option);
}
},
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>
<style scoped lang="scss">
.detail-tabs {
margin-top: 20px;
.search-form {
margin-bottom: 20px;
.el-form-item {
margin-bottom: 10px;
}
}
}
/* 保持原有样式不变 */
.detail-row {
display: flex;
margin: 0 -6px; /* 抵消 el-row 的默认间距 */
margin: 0 -6px;
}
.detail-row > .el-col {
.detail-row>.el-col {
display: flex;
padding: 0 6px; /* 保持列间距 */
padding: 0 6px;
}
.detail-card {
@ -431,6 +714,7 @@ export default {
.user-description {
flex: 1;
}
.statistics-cards {
margin-bottom: 20px;
}
@ -510,15 +794,15 @@ export default {
}
.report-container {
padding: 20px;
padding: 15px;
}
.filter-section {
margin-bottom: 20px;
margin-bottom: 15px;
}
.chart-container {
margin-bottom: 20px;
margin-bottom: 0px;
}
.table-container {
@ -562,4 +846,9 @@ export default {
.app-container .box-card:nth-child(n + 1) {
margin-top: 1em;
}
/* 添加新样式 */
.mb-2 {
margin-bottom: 1rem;
}
</style>

5
src/views/user/user/index.vue
View File

@ -134,8 +134,7 @@
type="text"
icon="el-icon-view"
@click="handleView(scope.row)"
v-hasPermi="['system:smUser:detail']"
v-if="scope.row.userType == '01'"
v-hasPermi="['system:smUser:detail']"
>详情</el-button>
<el-button
size="mini"
@ -195,7 +194,7 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户类型" prop="userType">
<el-form-item label="用户类型" prop="userType">
<el-select v-model="form.userType" placeholder="请选择用户类型">
<el-option
v-for="dict in filteredUserTypes"