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

Merge branch 'refs/heads/tx'

Browse Source 
# Conflicts:
#	src/views/system/order/index.vue
#	src/views/system/room/index.vue
This commit is contained in:
邱贞招 2025-01-07 21:32:23 +08:00
commit c5e6b793b7
12 changed files with 1066 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -5,8 +5,8 @@ VUE_APP_TITLE = 共享空间
ENV = 'development'
# 共享空间/开发环境
VUE_APP_BASE_API = 'https://testcha.chuangtewl.com/prod-api'
# VUE_APP_BASE_API = 'http://localhost:8089'
# VUE_APP_BASE_API = 'https://testcha.chuangtewl.com/prod-api'
VUE_APP_BASE_API = 'http://192.168.2.43:8089'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

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

@ -140,3 +140,11 @@ export function getDeviceBySn(sn){
})
}
// 绑定设备设施
export function bindDeviceFacility(data){
return request({
url: '/system/device/bindDeviceFacility/'+data.equipmentId+'/'+data.deviceId,
method: 'post',
// data: data
})
}

17
src/router/index.js
View File

@ -162,6 +162,20 @@ export const dynamicRoutes = [
}
]
},
{
path: '/system/roomDetail',
component: Layout,
hidden: true,
permissions: ['system:room:list'],
children: [
{
path: 'detail/:roomId(\\d+)',
component: () => import('@/views/system/room/room_detail'),
name: 'RoomDetail',
meta: { title: '房间详情', activeMenu: '/system/room' }
}
]
},
{
path: '/system/device/sn',
component: Layout,
@ -245,7 +259,8 @@ export const dynamicRoutes = [
meta: { title: '用户详情', activeMenu: '/user/user' }
}
]
}
},
]
// 防止连续点击多次路由报错

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

@ -9,7 +9,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="MAC" prop="mac">
<el-form-item label="MAC" prop="mac" v-if="!queryParams.mac">
<el-input
v-model="queryParams.mac"
placeholder="请输入mac"
@ -17,7 +17,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="SN" prop="sn">
<el-form-item label="SN" prop="sn" v-if="!queryParams.mac">
<el-input
v-model="queryParams.sn"
placeholder="请输入sn"
@ -143,6 +143,7 @@ import { listCommandLog, getCommandLog, delCommandLog, addCommandLog, updateComm
export default {
name: "CommandLog",
dicts: ['onenet_call_status'],
props:['mac'],
data() {
return {
// 遮罩层
@ -169,7 +170,7 @@ export default {
pageSize: 10,
url: null,
command: null,
mac: null,
mac: this.mac,
sn: null,
orderNo: null,
result: null

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

@ -8,27 +8,14 @@
<div slot="header" class="card-header">
<span>设备信息</span>
<div class="action-buttons">
<el-button
type="primary"
plain
icon="el-icon-edit"
@click="toggleEdit"
v-if="!isEditing">
<el-button type="primary" plain icon="el-icon-edit" @click="toggleEdit" v-if="!isEditing">
修改
</el-button>
<template v-else>
<el-button
type="success"
plain
icon="el-icon-check"
@click="handleSave">
<el-button type="success" plain icon="el-icon-check" @click="handleSave">
保存
</el-button>
<el-button
type="info"
plain
icon="el-icon-close"
@click="handleCancel">
<el-button type="info" plain icon="el-icon-close" @click="handleCancel">
取消
</el-button>
</template>
@ -37,7 +24,8 @@
<qr-code :text="qrCodeText" :width="150" :height="150" />
<p>扫描二维码进行设备绑定</p>
</div>
<el-button slot="reference" type="primary" plain icon="el-icon-download" @click="downloadQRCode">下载二维码</el-button>
<el-button slot="reference" type="primary" plain icon="el-icon-download"
@click="downloadQRCode">下载二维码</el-button>
</el-popover>
</div>
</div>
@ -86,10 +74,7 @@
<span class="label">型号功能:</span>
<template v-if="isEditing">
<el-select v-model="editForm.modelTags" multiple size="small" class="edit-input" disabled>
<el-option
v-for="tag in modelTagOptions"
:key="tag.dictValue"
:label="tag.dictLabel"
<el-option v-for="tag in modelTagOptions" :key="tag.dictValue" :label="tag.dictLabel"
:value="tag.dictValue">
</el-option>
</el-select>
@ -106,8 +91,10 @@
<div slot="header" class="card-header">
<span>归属信息</span>
<div class="header-buttons">
<el-button type="success" plain size="small">绑定商户</el-button>
<el-button type="success" plain size="small">绑定代理商</el-button>
<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>
</div>
</div>
<el-row :gutter="20">
@ -122,9 +109,11 @@
<div class="info-item">
<span class="label">房间名称:</span>
<template v-if="isEditing">
<el-input v-model="editForm.roomName" size="small" class="edit-input" disabled></el-input>
<el-input v-model="editForm.room.roomName" size="small" class="edit-input" disabled></el-input>
</template>
<span v-else class="value">{{ deviceData.monthFee || '--' }}</span>
<router-link v-else :to="'/system/roomDetail/index/' + deviceData.room.roomId" class="link-type">
<span>{{ deviceData.room.roomName || '--' }}</span>
</router-link>
</div>
</el-col>
<el-col :span="8">
@ -133,23 +122,18 @@
<template v-if="isEditing">
<el-input v-model="editForm.storeName" size="small" class="edit-input" disabled></el-input>
</template>
<span v-else class="value">{{ deviceData.storeName || '--' }}</span>
<router-link v-else :to="'/system/storeDetail/index/' + deviceData.storeId" class="link-type">
<span>{{ deviceData.storeName || '--' }}</span>
</router-link>
</div>
<div class="info-item">
<span class="label">绑定设施:</span>
<template v-if="isEditing">
<el-select v-model="editForm.serviceRate" size="small" class="edit-input" disabled>
<el-option
v-for="option in facilityOptions"
:key="option.dictValue"
:label="option.dictLabel"
:value="option.dictValue">
</el-option>
</el-select>
<el-input v-model="editForm.equ.name" size="small" class="edit-input" disabled></el-input>
</template>
<span v-else class="value">
<el-tag size="small" type="primary">{{ facilityTag }}</el-tag>
</span>
<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">
@ -158,12 +142,14 @@
<template v-if="isEditing">
<el-input v-model="editForm.userName" size="small" class="edit-input" disabled></el-input>
</template>
<span v-else class="value">{{ deviceData.userName || '--' }}</span>
<router-link v-else :to="'/user/detail/' + deviceData.userId" class="link-type">
<span>{{ deviceData.userName || '--' }}</span>
</router-link>
</div>
<div class="info-item">
<span class="label">备注:</span>
<template v-if="isEditing">
<el-input v-model="editForm.remark" size="small" class="edit-input" > </el-input>
<el-input v-model="editForm.remark" size="small" class="edit-input"> </el-input>
</template>
<span v-else class="value">{{ deviceData.remark || '--' }}</span>
</div>
@ -196,21 +182,21 @@
<span class="label">最后在线时间:</span>
<span class="value">{{ deviceData.lastOnlineTime || '--' }}</span>
</div>
<div class="info-item">
<!-- <div class="info-item">
<span class="label">总用电量:</span>
<span class="value">{{ deviceData.totalElectriQuantity || '--' }} 度</span>
</div>
</div> -->
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">版本号:</span>
<span class="value">{{ deviceData.version || '--' }}</span>
</div>
<div class="info-item">
<!-- <div class="info-item">
<span class="label">电量读数:</span>
<span class="value">{{ deviceData.electricity || '--' }} 度</span>
<el-link type="primary" :underline="false">重置</el-link>
</div>
</div> -->
</el-col>
</el-row>
</el-card>
@ -218,7 +204,7 @@
<!-- 右侧信息 -->
<el-col class="right-section">
<el-card class="info-card" shadow="always">
<!-- <el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>分成信息</span>
</div>
@ -230,36 +216,36 @@
<span class="label">分成比例:</span>
<span class="value">{{ deviceData.serviceFeeProportion || '--' }} %</span>
</div>
</el-card>
</el-card> -->
<el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>实时信息</span>
</div>
<div class="info-item">
<!-- <div class="info-item">
<span class="label">时长(数据库):</span>
<span class="value">{{ deviceData.remainTime || '--' }} 秒</span>
</div>
<div class="info-item">
<span class="label">电量(数据库):</span>
<span class="value">{{ deviceData.electricity || '--' }} 度</span>
</div>
</div> -->
<div class="info-item">
<span class="label">电压:</span>
<span class="value">{{ deviceData.voltage || '--' }} V</span>
</div>
<div class="info-item">
<span class="label">电流:</span>
<span class="value">{{ deviceData.realTimePower || '--' }} A</span>
<span class="value">{{ deviceData.electricity || '--' }} A</span>
</div>
<div class="info-item">
<span class="label">功率:</span>
<span class="value">{{ deviceData.realTimePower || '--' }} W</span>
<span class="value">{{ deviceData.realTimePower || '--' }} KW</span>
</div>
<div class="info-item">
<!-- <div class="info-item">
<span class="label">电压系数:</span>
<span class="value">{{ deviceData.placementStatus || '--' }}</span>
</div>
</div> -->
</el-card>
<!-- 操作台 -->
@ -269,16 +255,16 @@
</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'" size="mini" type="text" 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 size="mini" type="text" icon="el-icon-lock" @click="handleLock(deviceData)">关闭</el-button>
<el-button v-if="deviceData.status != '0'" size="mini" type="text" icon="el-icon-check"
<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 size="mini" type="text" icon="el-icon-refresh" @click="reboot(deviceData)">重启</el-button>
<el-button size="mini" type="text" icon="el-icon-refresh" @click="refresh(deviceData)">更新</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(deviceData)">删除</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>
</div>
</el-card>
</el-col>
@ -286,40 +272,100 @@
<!-- 下半部分 -->
<el-tabs v-model="activeTab" class="detail-tabs">
<el-tab-pane label="套餐列表" name="packages">
<!-- <el-tab-pane label="套餐列表" name="packages">
<Role :userId="deviceData.userId"></Role>
</el-tab-pane> -->
<el-tab-pane label="命令日志" name="logs">
<!-- 套餐列表搜索表单 -->
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item label="用户名称">
<el-input v-model="searchForm.userName" placeholder="请输入用户名称"></el-input>
</el-form-item>
<el-form-item label="用户手机">
<el-input v-model="searchForm.userPhone" placeholder="请输入用户手机号"></el-input>
</el-form-item>
<el-form-item label="套餐名称">
<el-input v-model="searchForm.packageName" placeholder="请输入套餐名称"></el-input>
</el-form-item>
<el-form-item label="收费模式">
<el-select v-model="searchForm.chargeMode" placeholder="请选择收费模式">
<el-option label="模式1" value="1"></el-option>
<el-option label="模式2" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="收费类型">
<el-select v-model="searchForm.chargeType" placeholder="请选择收费类型">
<el-option label="类型1" value="1"></el-option>
<el-option label="类型2" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="info" icon="el-icon-refresh">重置</el-button>
</el-form-item>
</el-form>
<Log :mac="deviceData.mac"></Log>
</el-tab-pane>
<el-tab-pane label="订单列表" name="orders">订单列表内容</el-tab-pane>
<el-tab-pane label="命令日志" name="logs">命令日志内容</el-tab-pane>
<!-- <el-tab-pane label="订单列表" name="orders">订单列表内容</el-tab-pane>
<el-tab-pane label="命令日志" name="logs">命令日志内容</el-tab-pane> -->
</el-tabs>
<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="设施图片" align="center">
<template slot-scope="scope">
<image-preview :src="scope.row.picture" :width="50" :height="50" />
</template>
</el-table-column>
<el-table-column label="设施类型" prop="type" align="center">
<template slot-scope="scope">
<dict-tag :options="dict.type.ss_equipment_type" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="套餐" prop="feeRuleVOS" align="center">
<template slot-scope="scope">
{{ formatFeeRules(scope.row.feeRuleVOS) }}
</template>
</el-table-column>
<el-table-column label="店铺名" prop="storeName" align="center" />
<el-table-column label="设施状态" prop="status" align="center">
<template slot-scope="scope">
<dict-tag :options="dict.type.ss_equipment_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="150">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleBindFacility(scope.row)">绑定</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="facilityTotal > 0" :total="facilityTotal" :page.sync="facilityQueryParams.pageNum"
:limit.sync="facilityQueryParams.pageSize" @pagination="getFacilityList" />
</el-dialog>
<!-- 绑定商户对话框 -->
<el-dialog title="绑定商户" :visible.sync="bindUserDialogVisible" width="900px" append-to-body>
<el-form :model="userQueryParams" ref="queryForm" :inline="true" class="search-form">
<el-form-item label="用户名称" prop="userName">
<el-input v-model="userQueryParams.userName" placeholder="请输入用户名称" clearable size="small"
@keyup.enter.native="handleUserQuery" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="userQueryParams.phonenumber" placeholder="请输入手机号码" clearable size="small"
@keyup.enter.native="handleUserQuery" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="userQueryParams.status" placeholder="用户状态" clearable size="small">
<el-option label="正常" value="0" />
<el-option label="停用" value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleUserQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetUserQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="userTableLoading" :data="userList" style="width: 100%" height="500">
<el-table-column label="用户编号" prop="userId" align="center" />
<el-table-column label="用户名称" prop="userName" align="center" />
<el-table-column label="手机号" prop="phonenumber" align="center" />
<el-table-column label="类型" align="center">
<template slot-scope="scope">
<dict-tag :options="dict.type.ss_user_type" :value="scope.row.userType" />
</template>
</el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
{{ scope.row.status === '0' ? '正常' : '停用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="150">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleBindUser(scope.row)">绑定</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="userTotal > 0" :total="userTotal" :page.sync="userQueryParams.pageNum"
:limit.sync="userQueryParams.pageSize" @pagination="getUserList" />
</el-dialog>
</div>
</template>
@ -331,200 +377,356 @@ import {
handleUnlocking,
reboot,
refreshDevice,
delDevice
delDevice,
bindDeviceFacility,
bindDeviceUser
} 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'
import Log from '@/views/system/commandLog/index.vue'
export default {
name: 'DeviceDetail',
components: { QrCode },
name: "DeviceDetail",
components: {
QrCode,Role,Log
},
dicts: ['ss_equipment_type', 'ss_equipment_status', 'ss_user_type'],
data() {
return {
deviceData: {},
isEditing: false, // 是否处于编辑状态
// 设备数据
deviceData: {
modelTags: [] // 初始化为空数组
},
loading: false,
isEditing: false,
// 编辑表单数据
editForm: {
deviceId: '',
deviceName: '',
deviceId: undefined,
mac: '',
mac2: '',
sn: '',
model: '',
productId: '',
modelTags: [],
deviceName: '',
roomName: '',
storeName: '',
serviceRate: '',
userName: '',
remark: '',
roomName: ''
modelTags: [],
serviceRate: undefined
},
activeTab: 'packages',
// 设施相关数据
bindFacilityDialogVisible: false,
facilityTableLoading: false,
facilityList: [],
facilityTotal: 0,
facilityQueryParams: {
pageNum: 1,
pageSize: 10
},
facilityOptions: [],
modelTagOptions: [],
// 用户相关数据
bindUserDialogVisible: false,
userTableLoading: false,
userList: [],
userTotal: 0,
userQueryParams: {
pageNum: 1,
pageSize: 10,
userName: undefined,
phonenumber: undefined,
status: undefined,
userType: '01'
},
// 标签页相关
activeTab: 'logs',
searchForm: {
userName: '',
userPhone: '',
packageName: '',
chargeMode: '',
chargeType: ''
},
queryParams: {
pageNum: 1,
pageSize: 10,
dictType: 'sm_model_tag',
dictLabel: undefined,
status: undefined
},
facilityOptions: [],
modelTagOptions: [],
loading: true
}
}
},
computed: {
qrCodeText() {
return this.deviceData.sn || ''
},
modelTags() {
return this.deviceData.modelTags ? this.deviceData.modelTags.map(tag => {
const modelTag = this.modelTagOptions.find(option => option.dictValue === tag);
return modelTag ? modelTag.dictLabel : tag;
}) : [];
},
serviceModeText() {
switch (this.deviceData.serviceMode) {
case "1": return "直营模式";
case "2": return "代理模式";
default: return "--";
}
},
facilityTag() {
const facility = this.facilityOptions.find(option => option.dictValue === this.deviceData.serviceRate);
return facility ? facility.dictLabel : '--';
},
qrCodeText() {
return this.deviceData.qrText || '无二维码信息';
return this.deviceData.facilityName || '--'
}
},
created() {
const deviceId = this.$route.params.deviceId;
const deviceId = this.$route.params.deviceId
this.fetchFacilityOptions()
this.fetchModelTagOptions()
if (deviceId) {
this.fetchDeviceData(deviceId);
this.fetchDeviceData(deviceId)
}
this.fetchFacilityOptions();
this.fetchModelTagOptions();
},
methods: {
// 切换编辑状态
toggleEdit() {
this.isEditing = true;
// 复制当前数据到编辑表单
this.editForm = {
deviceId: this.deviceData.deviceId,
deviceName: this.deviceData.deviceName,
mac: this.deviceData.mac,
mac2: this.deviceData.mac2,
sn: this.deviceData.sn,
model: this.deviceData.model,
productId: this.deviceData.productId,
modelTags: this.deviceData.modelTags || [],
storeName: this.deviceData.storeName,
serviceRate: this.deviceData.serviceRate,
userName: this.deviceData.userName,
remark: this.deviceData.remark,
roomName: this.deviceData.monthFee
};
toUserDetail(){
if (this.deviceData.userId) {
this.$router.push(`/user/detail/${this.deviceData.userId}`);
}
},
// 保存编辑
handleSave() {
updateDevice(this.editForm).then(() => {
this.$message.success("设备信息已更新");
this.isEditing = false;
// 重新获取设备数据
this.fetchDeviceData(this.editForm.deviceId);
}).catch(() => {
this.$message.error("更新设备信息失败");
});
},
// 取消编辑
handleCancel() {
this.isEditing = false;
this.editForm = {};
},
fetchDeviceData(deviceId) {
this.loading = true
getDevice(deviceId).then(response => {
this.deviceData = response.data;
this.loading = false;
if (response.data) {
// 确保modelTags是数组
this.deviceData = {
...response.data,
modelTags: Array.isArray(response.data.modelTags)
? response.data.modelTags
: (response.data.modelTags ? response.data.modelTags.split(',') : [])
}
}
this.loading = false
}).catch(error => {
this.$message.error("获取设备详情失败");
this.loading = false;
});
this.$message.error("获取设备详情失败")
this.loading = false
})
},
formatFeeRules(feeRuleVOS) {
if (!feeRuleVOS || !feeRuleVOS.length) {
return '-';
}
return feeRuleVOS.map(rule => rule.explain).join('，');
},
fetchFacilityOptions() {
listData({ pageNum: 1, pageSize: 10, dictType: 'ss_equipment_type' }).then(response => {
this.facilityOptions = response.rows;
}).catch(error => {
this.$message.error("获取绑定设施数据失败");
});
listData({ dictType: 'ss_equipment_type' }).then(response => {
this.facilityOptions = response.rows || []
}).catch(() => {
this.$message.error("获取绑定设施数据失败")
})
},
fetchModelTagOptions() {
listData(this.queryParams).then(response => {
this.modelTagOptions = response.rows;
}).catch(error => {
this.$message.error("获取modelTags数据失败");
listData({ dictType: 'sm_model_tag' }).then(response => {
this.modelTagOptions = response.rows || []
console.log(this.modelTagOptions, 'this.modelTagOptions');
}).catch(() => {
this.$message.error("获取型号功能数据失败")
})
},
getFacilityList() {
this.facilityTableLoading = true;
// 修改查询参数
const queryParams = {
pageNum: this.facilityQueryParams.pageNum,
pageSize: this.facilityQueryParams.pageSize,
name: undefined,
type: undefined,
status: undefined
};
listEquipment(queryParams).then(response => {
this.facilityList = response.rows;
this.facilityTotal = response.total;
this.facilityTableLoading = false;
}).catch(() => {
this.$message.error("获取设施列表失败");
this.facilityTableLoading = false;
});
},
toggleEdit() {
this.isEditing = true
this.editForm = {
...this.deviceData,
modelTags: Array.isArray(this.deviceData.modelTags)
? [...this.deviceData.modelTags]
: []
}
},
handleSave() {
updateDevice(this.editForm).then(() => {
this.$message.success("保存成功")
this.isEditing = false
this.fetchDeviceData(this.deviceData.deviceId)
}).catch(() => {
this.$message.error("保存失败")
})
},
handleCancel() {
this.isEditing = false
this.editForm = {}
},
downloadQRCode() {
const qrText = this.qrCodeText;
const qrText = this.qrCodeText
if (!qrText) {
this.$message.warning("没有可用的设备SN码")
return
}
QRCode.toDataURL(qrText, { width: 150, height: 150 }, (err, url) => {
if (err) {
this.$message.error("生成二维码失败");
return;
this.$message.error("生成二维码失败")
return
}
const link = document.createElement('a');
link.href = url;
link.download = `${this.deviceData.sn || 'unknown'}.png`;
link.click();
});
const link = document.createElement('a')
link.href = url
link.download = `${this.deviceData.sn || 'device'}.png`
link.click()
})
},
handleUnlocking(row) {
handleUnlocking(row.deviceId).then(() => {
this.$message.success("设备已解锁");
});
this.$message.success("设备已解锁")
})
},
handleLock(row) {
handleLock(row.deviceId).then(() => {
this.$message.success("设备已锁定");
});
this.$message.success("设备已锁定")
})
},
reboot(row) {
reboot(row.deviceId).then(() => {
this.$message.success("设备已重启");
});
this.$message.success("设备已重启")
})
},
refresh(row) {
refreshDevice(row.deviceId).then(() => {
this.$message.success("设备已更新");
});
this.$message.success("设备已更新")
})
},
handleDelete(row) {
delDevice(row.deviceId).then(() => {
this.$message.success("设备已删除");
});
this.$modal.confirm('是否确认删除该设备？').then(() => {
return delDevice(row.deviceId)
}).then(() => {
this.$message.success("设备已删除")
this.$router.push('/system/device')
}).catch(() => { })
},
openBindFacilityDialog() {
this.bindFacilityDialogVisible = true
this.getFacilityList()
},
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
})
}).then(() => {
this.$modal.msgSuccess("绑定成功")
this.bindFacilityDialogVisible = false
this.fetchDeviceData(this.deviceData.deviceId)
}).catch(() => { })
},
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
})
}).then(() => {
this.$modal.msgSuccess(statusText + "成功")
this.fetchDeviceData(row.deviceId)
}).catch(() => { })
},
openBindUserDialog() {
this.bindUserDialogVisible = true
this.getUserList()
},
getUserList() {
this.userTableLoading = true
listUser(this.userQueryParams).then(response => {
this.userList = response.rows || []
this.userTotal = response.total || 0
this.userTableLoading = false
})
},
// 搜索按钮操作
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'
};
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(() => { })
}
}
}
</script>
<style lang="scss" scoped>
.device-detail {
padding: 20px;
.link-type {
color: #11A983;
text-decoration: underline;
}
.link-type:hover {
color: #11A98330;
text-decoration: underline;
}
.top-section {
display: flex;
align-items: stretch;
@ -618,7 +820,7 @@ export default {
.el-button {
margin: 0;
padding: 0 10px;
padding: 20 10px;
flex: 1 1 45%;
}
}
@ -653,6 +855,7 @@ export default {
// 编辑状态下的输入框样式
.editing {
.info-item {
.el-input,
.el-select {
.el-input__inner {
@ -672,7 +875,9 @@ export default {
// 表格样式优化
.el-table {
th, td {
th,
td {
padding: 8px 0;
}
@ -705,7 +910,7 @@ export default {
// 按钮组样式优化
.action-buttons {
.el-button + .el-button {
.el-button+.el-button {
margin-left: 10px;
}

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

@ -358,6 +358,10 @@ export default {
type: Number,
default: 26.94088
},
storeId: {
type: Number,
default: 0
},
},
data() {
return {
@ -616,6 +620,7 @@ export default {
},
getList() {
this.loading = true;
this.queryParams.storeId = this.storeId;
listDevice(this.queryParams).then(response => {
this.deviceList = response.rows;
this.total = response.total;

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

@ -27,7 +27,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="店铺名" prop="storeName">
<el-form-item label="店铺名" prop="storeName" v-if="!storeId">
<el-input
v-model="queryParams.storeName"
placeholder="请输入店铺名"
@ -328,6 +328,7 @@ export default {
name: "Equipment",
mixins: [$showColumns],
dicts: ['ss_equipment_type', 'ss_unlock_mode', 'ss_unlock_condition', 'ss_equipment_status', 'ss_room_tags'],
props: ['storeId'],
data() {
return {
// 字段列表
@ -417,6 +418,7 @@ export default {
/** 查询设施列表 */
getList() {
this.loading = true;
this.queryParams.storeId = this.storeId;
listEquipment(this.queryParams).then(response => {
this.equipmentList = response.rows
.filter(item => ['2', '3'].includes(item.type))

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

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

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

@ -9,7 +9,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="店铺" prop="storeId">
<el-form-item label="店铺" prop="storeId" v-if="!storeId">
<el-select v-model="queryParams.storeId" clearable filterable placeholder="请选择">
<el-option
v-for="item in storeOptions"
@ -109,6 +109,9 @@
<template v-if="column.key === 'roomId'">
{{d.row[column.key]}}
</template>
<template v-else-if="column.key === 'roomName'">
<router-link :to="`/system/room/detail/${d.row[column.key]}`">{{d.row[column.key]}}</router-link>
</template>
<template v-else-if="column.key === 'type'">
<dict-tag :options="dict.type.ss_room_type" :value="d.row[column.key]"/>
</template>
@ -231,7 +234,8 @@ const defaultSort = {
export default {
name: "Room",
mixins: [$showColumns],
dicts: ['ss_room_type', 'ss_room_type2', 'ss_room_status','ss_room_tags'],
dicts: ['ss_room_type', 'ss_room_status','ss_room_tags'],
props: ['storeId'],
data() {
return {
// 字段列表
@ -329,6 +333,7 @@ export default {
/** 查询房间列表 */
getList() {
this.loading = true;
this.queryParams.storeId = this.storeId;
listRoom(this.queryParams).then(response => {
this.roomList = response.rows;
this.total = response.total;
@ -347,7 +352,6 @@ export default {
roomName: undefined,
storeId: undefined,
type: undefined,
type2: undefined,
picture: undefined,
tags: [],
specification: undefined

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

@ -1,8 +1,8 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="商户" prop="merchantId">
<el-select v-model="queryParams.merchantId" placeholder="请选择商户" clearable @change="handleQuery">
<el-form-item label="商户" prop="merchantId" v-if="!userId">
<el-select v-model="queryParams.merchantId" placeholder="请选择商户" clearable @change="handleMerchantChange">
<el-option
v-for="item in merchantOptions"
:key="item.userId"
@ -142,7 +142,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="merchantId">
<el-select v-model="form.merchantId" placeholder="请选择商户" clearable @change="handleQuery">
<el-select v-model="form.merchantId" placeholder="请选择商户" clearable @change="handleMerchantChangeInForm">
<el-option
v-for="item in merchantOptions"
:key="item.userId"
@ -152,7 +152,7 @@
</el-select>
</el-form-item>
<el-form-item label="房间" prop="roomId">
<el-select v-model="form.roomId" placeholder="请选择房间" clearable @change="handleQuery">
<el-select v-model="form.roomId" placeholder="请选择房间" clearable>
<el-option
v-for="item in roomOptions"
:key="item.roomId"
@ -205,6 +205,7 @@ export default {
name: "Rule",
mixins: [$showColumns],
dicts: ['ss_fee_rule_mode'],
props: ['userId'],
data() {
return {
// 字段列表
@ -258,24 +259,72 @@ export default {
form: {},
// 表单校验
rules: {
merchantId: [
{ required: true, message: "商户不能为空", trigger: "change" }
],
roomId: [
{ required: true, message: "房间不能为空", trigger: "change" }
],
mode: [
{ required: true, message: "收费模式不能为空", trigger: "change" }
],
price: [
{ required: true, message: "售价不能为空", trigger: "blur" }
]
}
};
},
created() {
this.getList();
this.getRoomList();
this.getMerchantList();
},
methods: {
getMerchantList() {
listUser({pageNum:1,pageSize:999 ,userType: '01'}).then(response => {
this.merchantOptions = response.rows;
let params = {
pageNum: 1,
pageSize: 999,
userType: '01'
}
if(this.userId) {
params.userId = this.userId
}
listUser(params).then(response => {
this.merchantOptions = response.rows;
if(this.userId) {
// 在merchantOptions中查找匹配userId的商户
const merchant = this.merchantOptions.find(item => item.userId === this.userId);
if(merchant) {
this.queryParams.merchantId = merchant.userId;
// 获取该商户的房间列表
this.getList();
this.getRoomList(merchant.userId);
}
}
});
},
getRoomList(merchantId) {
const params = {
pageNum: 1,
pageSize: 999
};
if (merchantId) {
params.merchantId = merchantId;
}
listRoom(params).then(response => {
this.roomOptions = response.rows;
});
},
getRoomList() {
listRoom({pageNum:1,pageSize:999 }).then(response => {
this.roomOptions = response.rows;
});
// 商户选择改变时触发(搜索表单)
handleMerchantChange(merchantId) {
this.queryParams.roomId = null; // 清空房间选择
this.getRoomList(merchantId);
this.handleQuery();
},
// 商户选择改变时触发(编辑表单)
handleMerchantChangeInForm(merchantId) {
this.form.roomId = null; // 清空房间选择
this.getRoomList(merchantId);
},
/** 当排序按钮被点击时触发 **/
onSortChange(column) {
@ -326,6 +375,7 @@ export default {
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.roomOptions = []; // 清空房间选项
this.handleQuery();
},
// 多选框选中数据
@ -346,6 +396,8 @@ export default {
const ruleId = row.ruleId || this.ids
getRule(ruleId).then(response => {
this.form = response.data;
// 获取对应商户的房间列表
this.getRoomList(this.form.merchantId);
this.open = true;
this.title = "修改收费模板";
});
@ -388,4 +440,4 @@ export default {
}
}
};
</script>
</script>

740
src/views/system/store/store_detail.vue
View File

@ -1,223 +1,443 @@
<template>
<div class="store-detail">
<!-- 上半部分 -->
<el-row :gutter="20" class="top-section">
<!-- 左侧信息 -->
<el-col :span="24" class="left-section">
<el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>基本信息</span>
<!-- 基本信息卡片 -->
<el-card class="info-card" shadow="hover">
<div slot="header" class="card-header">
<div class="header-left">
<span class="title">店铺详情</span>
<el-tag size="small" :type="getStatusType(storeData.status)" class="status-tag">
<dict-tag :options="dict.type.ss_store_status" :value="storeData.status" />
</el-tag>
</div>
<div class="action-buttons">
<!-- <el-button type="primary" size="small" @click="handleEdit">编辑</el-button> -->
<el-button type="danger" size="small" @click="handleDelete">删除</el-button>
</div>
</div>
<el-row :gutter="20">
<el-col :span="2">
<div class="store-image">
<image-preview :src="storeData.picture" :width="80" :height="80" />
</div>
<el-row :gutter="20">
<el-col :span="2">
<div class="store-image">
<image-preview
:src="storeData.picture"
:width="80"
:height="80"
/>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<span class="label">店铺名称:</span>
<span class="value">{{ storeData.name || '--' }}</span>
</div>
<div class="info-item">
<span class="label">联系人:</span>
<span class="value">{{ storeData.contactName || '--' }}</span>
</div>
<div class="info-item">
<span class="label">联系电话:</span>
<span class="value">{{ storeData.contactMobile || '--' }}</span>
</div>
<div class="info-item">
<span class="label">营业时间:</span>
<span class="value">{{ formatBusinessTime(storeData.businessTimeStart, storeData.businessTimeEnd) }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<span class="label">店长:</span>
<span class="value">{{ storeData.managerName || '--' }}</span>
</div>
<div class="info-item">
<span class="label">客服电话:</span>
<span class="value">{{ storeData.serverPhone || '--' }}</span>
</div>
<div class="info-item">
<span class="label">身份证号:</span>
<span class="value">{{ storeData.idcard || '--' }}</span>
</div>
</el-col>
<el-col :span="6">
<div class="info-item">
<span class="label">状态:</span>
<dict-tag :options="dict.type.ss_store_status" :value="storeData.status"/>
</div>
<div class="info-item">
<span class="label">标签:</span>
<dict-tag :options="dict.type.ss_store_tags" :value="storeData.tags"/>
</div>
<div class="info-item">
<span class="label">类型:</span>
<dict-tag :options="dict.type.ss_room_type" :value="storeData.typeTags"/>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="7">
<div class="info-item">
<span class="label">店铺名称:</span>
<span class="value">{{ storeData.name || '--' }}</span>
</div>
<div class="info-item">
<span class="label">联系人:</span>
<span class="value">{{ storeData.contactName || '--' }}</span>
</div>
<div class="info-item">
<span class="label">联系电话:</span>
<span class="value">{{ storeData.contactMobile || '--' }}</span>
</div>
<div class="info-item">
<span class="label">营业时间:</span>
<span class="value">{{ formatBusinessTime(storeData.businessTimeStart, storeData.businessTimeEnd) }}</span>
</div>
</el-col>
<el-col :span="7">
<div class="info-item">
<span class="label">店长:</span>
<span class="value">{{ storeData.managerName || '--' }}</span>
</div>
<div class="info-item">
<span class="label">客服电话:</span>
<span class="value">{{ storeData.serverPhone || '--' }}</span>
</div>
<div class="info-item">
<span class="label">身份证号:</span>
<span class="value">{{ storeData.idcard || '--' }}</span>
</div>
<div class="info-item">
<span class="label">地址:</span>
<span class="value">{{ storeData.address || '--' }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">标签:</span>
<dict-tag :options="dict.type.ss_store_tags" :value="storeData.tags" />
</div>
<div class="info-item">
<span class="label">类型:</span>
<dict-tag :options="dict.type.ss_room_type" :value="storeData.typeTags" />
</div>
</el-col>
</el-row>
</el-card>
<!-- 顶部统计卡片 -->
<el-row :gutter="20" class="stat-cards">
<!-- 今日收入 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon income">
<i class="el-icon-money"></i>
</div>
<div class="stat-content">
<div class="stat-label">今日收入</div>
<div class="stat-value">¥ {{ stats.todayIncome || '0.00' }}</div>
</div>
</el-card>
</el-col>
<!-- 本月收入 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon income-month">
<i class="el-icon-wallet"></i>
</div>
<div class="stat-content">
<div class="stat-label">本月收入</div>
<div class="stat-value">¥ {{ stats.monthIncome || '0.00' }}</div>
</div>
</el-card>
</el-col>
<!-- 总营收 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon total-income">
<i class="el-icon-bank-card"></i>
</div>
<div class="stat-content">
<div class="stat-label">总营收</div>
<div class="stat-value">¥ {{ stats.totalIncome || '0.00' }}</div>
</div>
</el-card>
</el-col>
<!-- 总提现 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon withdraw">
<i class="el-icon-wallet"></i>
</div>
<div class="stat-content">
<div class="stat-label">总提现</div>
<div class="stat-value">¥ {{ stats.totalWithdraw || '0.00' }}</div>
</div>
</el-card>
</el-col>
<!-- 房间统计 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon room">
<i class="el-icon-office-building"></i>
</div>
<div class="stat-content">
<div class="stat-label">房间使用</div>
<div class="stat-numbers">
<span class="current">{{ stats.usedRooms || 0 }}</span>
<span class="divider">/</span>
<span class="total">{{ stats.totalRooms || 0 }}</span>
</div>
</div>
</el-card>
</el-col>
<!-- 设施统计 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon facility">
<i class="el-icon-set-up"></i>
</div>
<div class="stat-content">
<div class="stat-label">设施使用</div>
<div class="stat-numbers">
<span class="current">{{ stats.usedFacilities || 0 }}</span>
<span class="divider">/</span>
<span class="total">{{ stats.totalFacilities || 0 }}</span>
</div>
<el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>位置信息</span>
</div>
<el-row :gutter="20">
<el-col :span="20">
<div class="info-item">
<span class="label">门店地址:</span>
<el-link
type="primary"
@click="openMap(storeData.lng, storeData.lat)"
v-if="storeData.lng && storeData.lat"
>
{{ storeData.address || '--' }}
</el-link>
<span v-else>{{ storeData.address || '--' }}</span>
</div>
<div class="info-item">
<span class="label">经度:</span>
<span class="value">{{ storeData.lng || '--' }}</span>
</div>
<div class="info-item">
<span class="label">纬度:</span>
<span class="value">{{ storeData.lat || '--' }}</span>
</div>
</el-col>
<el-col :span="4">
<div slot="header" class="card-header">
<span>店铺位置</span>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<!-- 下半部分 - 选项卡 -->
<el-card class="tab-card">
<el-tabs v-model="activeTab">
<el-tab-pane label="房间列表" name="rooms">
<!-- 房间列表内容 -->
</el-tab-pane>
<el-tab-pane label="设施列表" name="equipments">
<!-- 设施列表内容 -->
</el-tab-pane>
<el-tab-pane label="设备列表" name="equipments">
<!-- 设备列表内容 -->
</el-tab-pane>
<el-tab-pane label="员工列表" name="equipments">
<!-- 员工列表内容 -->
</el-tab-pane>
<el-tab-pane label="订单列表" name="orders">
<!-- 订单列表内容 -->
</el-tab-pane>
</el-tabs>
</el-card>
<!-- 图表和地图区域 -->
<el-row :gutter="20" class="chart-section">
<el-col :span="16">
<el-card class="chart-card" shadow="hover">
<div slot="header" class="card-header">
<span class="title">收入趋势</span>
<el-radio-group v-model="chartTimeRange" size="small" @change="handleChartRangeChange">
<el-radio-button label="week">近7天</el-radio-button>
<el-radio-button label="month">近30天</el-radio-button>
</el-radio-group>
</div>
<div class="chart-container" ref="incomeChart"></div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="map-card" shadow="hover">
<div slot="header" class="card-header">
<span class="title">店铺位置</span>
</div>
<div class="map-container" id="mapContainer"></div>
</el-card>
</el-col>
</el-row>
<el-tabs v-model="activeTab" class="detail-tabs">
<el-tab-pane label="订单列表" name="orders">
<order :storeId="storeId"></order>
</el-tab-pane>
<el-tab-pane label="房间列表" name="rooms">
<room :storeId="storeId"></room>
</el-tab-pane>
<el-tab-pane label="设施列表" name="equipments">
<equipment :storeId="storeId"></equipment>
</el-tab-pane>
<el-tab-pane label="设备列表" name="devices">
<device :storeId="storeId"></device>
</el-tab-pane>
<el-tab-pane label="员工列表" name="users">
<user :storeId="storeId"></user>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { getStore, delStore } from "@/api/system/store";
import * as echarts from 'echarts';
import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from '@/utils/config/globalConfig';
import order from '@/views/system/order/index.vue';
import room from '@/views/system/room/index.vue';
import equipment from '@/views/system/equipment/index.vue';
import device from '@/views/system/device/index.vue';
import user from '@/views/user/user/index.vue';
export default {
name: 'StoreDetail',
dicts: ['ss_store_status', 'ss_store_tags', 'ss_room_type'],
directives: {
hasPermi: ['system:store:query']
components: {
order,
room,
equipment,
device,
user
},
data() {
return {
storeId: null,
storeData: {},
activeTab: 'rooms',
map: null,
marker: null
marker: null,
stats: {
todayIncome: 0,
monthIncome: 0,
totalIncome: 0,
totalWithdraw: 0,
totalRooms: 0,
usedRooms: 0,
totalFacilities: 0,
usedFacilities: 0
},
chartTimeRange: 'week',
incomeChart: null,
activeTab: 'orders',
}
},
created() {
const storeId = this.$route.params.storeId;
this.getStoreData(storeId);
this.storeId = this.$route.params.storeId;
this.getStoreData();
this.getStoreStats();
},
mounted() {
// 在组件挂载后初始化地图
this.$nextTick(() => {
this.initMap();
this.initChart();
});
},
beforeDestroy() {
if (this.incomeChart) {
this.incomeChart.dispose();
}
if (this.map) {
this.map.destroy();
}
window.removeEventListener('resize', this.resizeChart);
},
methods: {
getStoreData(storeId) {
getStore(storeId).then(response => {
getStatusType(status) {
const statusMap = {
0: 'info',
1: 'success',
2: 'danger'
};
return statusMap[status] || 'info';
},
initChart() {
if (!this.$refs.incomeChart) return;
this.incomeChart = echarts.init(this.$refs.incomeChart);
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: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLine: {
lineStyle: {
color: '#DCDFE6'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '¥{value}'
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: '#EBEEF5'
}
}
},
series: [{
name: '收入',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330, 1320],
itemStyle: {
color: '#409EFF'
},
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.incomeChart.setOption(option);
window.addEventListener('resize', this.resizeChart);
},
resizeChart() {
if (this.incomeChart) {
this.incomeChart.resize();
}
},
getStoreData() {
getStore(this.storeId).then(response => {
this.storeData = response.data;
// 数据加载完成后更新地图标记
this.$nextTick(() => {
this.updateMapMarker();
});
});
},
getStoreStats() {
// Mock数据，实际项目中替换为API调用
this.stats = {
todayIncome: 1234.56,
monthIncome: 45678.90,
totalDevices: 100,
onlineDevices: 85
};
},
handleChartRangeChange(range) {
// Mock数据，实际项目中替换为API调用
const mockData = {
week: {
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
series: [820, 932, 901, 934, 1290, 1330, 1320]
},
month: {
xAxis: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
series: Array.from({ length: 30 }, () => Math.floor(Math.random() * 2000 + 500))
}
};
const data = mockData[range];
this.incomeChart.setOption({
xAxis: { data: data.xAxis },
series: [{ data: data.series }]
});
},
formatBusinessTime(start, end) {
if (!start && !end) return '--';
return `${start || '--'} - ${end || '--'}`;
},
openMap(lng, lat) {
if (!lng || !lat) return;
window.open(`https://uri.amap.com/marker?position=${lng},${lat}&callnative=1`);
},
handleEdit() {
this.$router.push(`/system/store/index?storeId=${this.storeData.storeId}`);
},
handleDelete() {
this.$modal.confirm('是否确认删除该店铺？').then(() => {
return delStore(this.storeData.storeId);
}).then(() => {
this.$modal.msgSuccess("删除成功");
this.$router.push('/system/store/index');
}).catch(() => {});
},
// 初始化地图
initMap() {
// 创建地图实例
this.map = new AMap.Map('mapContainer', {
zoom: 15,
viewMode: '3D'
});
async initMap() {
try {
await AMapLoader.load({
key: globalConfig.aMap.key,
version: "2.0",
plugins: [
"AMap.ToolBar",
"AMap.Scale",
"AMap.PlaceSearch",
],
});
// 添加地图控件
this.map.addControl(new AMap.ToolBar());
this.map.addControl(new AMap.Scale());
this.map = new AMap.Map('mapContainer', {
zoom: 15,
viewMode: '3D',
// mapStyle: 'amap://styles/fresh'
});
this.map.addControl(new AMap.ToolBar({
position: 'RB'
}));
this.map.addControl(new AMap.Scale());
// 如果已有店铺数据，更新地图标记
if (this.storeData.longitude && this.storeData.latitude) {
this.updateMapMarker();
}
} catch (e) {
console.error('地图初始化失败:', e);
}
},
// 更新地图标记
updateMapMarker() {
const { lng, lat } = this.storeData;
const { longitude: lng, latitude: lat } = this.storeData;
if (!lng || !lat) return;
// 设置地图中心点
this.map.setCenter([lng, lat]);
// 清除旧的标记
if (this.marker) {
this.map.remove(this.marker);
}
// 创建新的标记
this.marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat),
title: this.storeData.name,
animation: 'AMAP_ANIMATION_DROP'
});
// 添加标记到地图
this.map.add(this.marker);
// 创建信息窗体
const infoWindow = new AMap.InfoWindow({
content: `
<div class="info-window">
@ -228,10 +448,20 @@ export default {
offset: new AMap.Pixel(0, -30)
});
// 绑定点击事件
this.marker.on('click', () => {
infoWindow.open(this.map, this.marker.getPosition());
});
},
handleEdit() {
this.$router.push(`/system/store/edit/${this.storeId}`);
},
handleDelete() {
this.$modal.confirm('是否确认删除该店铺？').then(() => {
return delStore(this.storeId);
}).then(() => {
this.$modal.msgSuccess("删除成功");
this.$router.push('/system/store/list');
}).catch(() => { });
}
}
}
@ -241,10 +471,6 @@ export default {
.store-detail {
padding: 20px;
.top-section {
margin-bottom: 20px;
}
.info-card {
margin-bottom: 20px;
@ -252,7 +478,21 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
.header-left {
display: flex;
align-items: center;
.title {
font-size: 16px;
font-weight: bold;
margin-right: 12px;
}
.status-tag {
margin-left: 8px;
}
}
.action-buttons {
.el-button {
@ -262,31 +502,23 @@ export default {
}
.info-item {
margin-bottom: 10px;
margin-bottom: 16px;
display: flex;
align-items: center;
.label {
color: #606266;
margin-right: 10px;
min-width: 100px;
color: #909399;
margin-right: 12px;
min-width: 80px;
font-size: 14px;
}
.value {
color: #333;
color: #303133;
font-size: 14px;
}
}
.map-container {
width: 100%;
height: 300px;
border-radius: 4px;
overflow: hidden;
margin-bottom: 0;
}
.store-image {
width: 100%;
height: 100%;
@ -296,43 +528,163 @@ export default {
padding: 10px 0;
:deep(.el-image) {
border-radius: 4px;
border-radius: 8px;
overflow: hidden;
display: block;
border: 1px solid #EBEEF5;
}
}
}
.tab-card {
.detail-tabs {
margin-top: 20px;
.search-form {
margin-bottom: 20px;
.el-form-item {
margin-bottom: 10px;
}
}
}
.map-card {
.map-container {
width: 100%;
height: 300px;
border-radius: 4px;
overflow: hidden;
.stat-cards {
margin-bottom: 20px;
.stat-card {
height: 120px;
display: flex;
padding: 0 10px;
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 16px;
i {
font-size: 24px;
color: #fff;
}
&.income {
background: linear-gradient(135deg, #36d1dc, #5b86e5);
}
&.income-month {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
&.total-income {
background: linear-gradient(135deg, #a8edea, #fed6e3);
}
&.withdraw {
background: linear-gradient(135deg, #84fab0, #8fd3f4);
}
&.room {
background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}
&.facility {
background: linear-gradient(135deg, #f6d365, #fda085);
}
}
.stat-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.stat-value {
font-size: 22px;
font-weight: bold;
color: #303133;
margin-bottom: 8px;
line-height: 1.2;
}
.stat-numbers {
font-size: 22px;
font-weight: bold;
color: #303133;
margin-bottom: 8px;
line-height: 1.2;
.current {
color: #409EFF;
}
.divider {
margin: 0 4px;
color: #909399;
}
.total {
color: #606266;
}
}
.stat-label {
font-size: 14px;
color: #909399;
}
}
}
}
.chart-section {
margin-bottom: 20px;
.card-header {
.title {
font-size: 16px;
font-weight: bold;
}
}
.chart-card {
.chart-container {
height: 350px;
padding: 10px;
}
}
.map-card {
.map-container {
height: 350px;
}
}
}
}
// 信息窗体样式
:deep(.info-window) {
padding: 8px;
padding: 12px;
h4 {
margin: 0 0 5px;
color: #333;
margin: 0 0 8px;
color: #303133;
font-size: 16px;
}
p {
margin: 0;
color: #666;
color: #606266;
font-size: 14px;
}
}
:deep(.el-tag) {
font-size: 14px;
margin-right: 8px;
}
</style>
</style>

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

@ -351,6 +351,7 @@ export default {
name: "User",
components: {UserConfigDialog },
dicts: ['sys_normal_disable', 'sys_user_sex','et_user_is_authentication','ss_user_type'],
props: ['storeId'],
data() {
return {
showConfigDialog: false,
@ -481,6 +482,7 @@ export default {
},
/** 查询用户列表 */
getList() {
this.queryParams.storeId = this.storeId;
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;