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

设备详情和设备列表

Browse Source
This commit is contained in:
tx 2025-01-04 15:46:49 +08:00
parent 162f23fd3b
commit 7b6ea4badb
4 changed files with 745 additions and 436 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 = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8089'
VUE_APP_BASE_API = 'https://testcha.chuangtewl.com/prod-api'
# VUE_APP_BASE_API = 'http://localhost:8089'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

14
src/router/index.js
View File

@ -147,6 +147,20 @@ export const dynamicRoutes = [
meta: { title: '用户列表', activeMenu: '/user/user' }
}
]
},
{
path: '/system/deviceDetail',
component: Layout,
hidden: true,
permissions: ['system:dept:list'],
children: [
{
path: 'index/:deviceId(\\d+)?', // 将参数设置为可选
component: () => import('@/views/system/device/device_detail'),
name: 'Data',
meta: { title: '设备详情', activeMenu: '/system/device' }
}
]
},
{
path: '/system/device/sn',

460
src/views/system/device/device_detail.vue Normal file
View File

@ -0,0 +1,460 @@
<template>
<div class="device-detail">
<!-- 上半部分 -->
<el-row :gutter="20" class="top-section">
<!-- 左侧信息 -->
<el-col :span="16" class="left-section">
<el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>设备信息</span>
<div class="action-buttons">
<el-button type="primary" plain icon="el-icon-plus">增加时长</el-button>
<el-button type="info" plain icon="el-icon-refresh">刷新白名单</el-button>
<el-button type="warning" plain icon="el-icon-unlock">强制开启</el-button>
<el-button type="info" plain icon="el-icon-message">别的设备信息</el-button>
<el-button type="primary" plain icon="el-icon-upload2">设置二维码</el-button>
</div>
</div>
<el-row :gutter="20">
<el-col :span="8">
<div class="info-item">
<span class="label">MAC-1:</span>
<span class="value">{{ deviceData.mac || '--' }}</span>
<!-- <el-tag size="small" :type="deviceData.onlineStatus === '1' ? 'success' : 'danger'">
{{ deviceData.onlineStatus === '1' ? '在线' : '离线' }}
</el-tag> -->
</div>
<div class="info-item">
<span class="label">型号:</span>
<span class="value">{{ deviceData.model || '--' }}</span>
</div>
<div class="info-item">
<span class="label">限制充值时间:</span>
<span class="value">{{ deviceData.limitRechargeTime || '--' }}</span>
</div>
<div class="info-item">
<span class="label">用户手动操作类型:</span>
<span class="value">{{ deviceData.outageWay || '--' }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">MAC-2:</span>
<span class="value">{{ deviceData.mac2 || '--' }}</span>
</div>
<div class="info-item">
<span class="label">产品ID:</span>
<span class="value">{{ deviceData.productId || '--' }}</span>
</div>
<div class="info-item">
<span class="label">限制充值原因:</span>
<span class="value">{{ deviceData.limitRechargeReason || '--' }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">SN:</span>
<span class="value">{{ deviceData.sn || '--' }}</span>
</div>
<div class="info-item">
<span class="label">型号功能:</span>
<span class="value">
<el-tag v-for="tag in modelTags" :key="tag" size="small" type="primary">{{ tag }}</el-tag>
</span>
</div>
<div class="info-item">
<span class="label">用户手动操作时间:</span>
<span class="value">{{ deviceData.lastRecoverTime || '--' }}</span>
</div>
<div class="info-item">
<span class="label">用户手动操作传量:</span>
<span class="value">{{ deviceData.surplusEle || '--' }} 度</span>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="info-card" shadow="always">
<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>
</div>
</div>
<el-row :gutter="20">
<el-col :span="8">
<div class="info-item">
<span class="label">设备名称:</span>
<span class="value">{{ deviceData.deviceName || '--' }}</span>
</div>
<div class="info-item">
<span class="label">月费:</span>
<span class="value">{{ deviceData.monthFee || '--' }} 元/月</span>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">服务模式:</span>
<span class="value">
<el-tag size="small" type="primary">{{ serviceModeText }}</el-tag>
</span>
</div>
<div class="info-item">
<span class="label">平台服务费:</span>
<span class="value">{{ deviceData.serviceRate || '--' }} %</span>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">所属商户:</span>
<span class="value">{{ deviceData.storeName || '--' }}</span>
</div>
<div class="info-item">
<span class="label">备注:</span>
<span class="value">{{ deviceData.remark || '--' }}</span>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>物联网信息</span>
</div>
<el-row :gutter="20">
<el-col :span="8">
<div class="info-item">
<span class="label">在线状态:</span>
<el-tag size="small" :type="deviceData.onlineStatus === '1' ? 'success' : 'danger'">
{{ deviceData.onlineStatus === '1' ? '在线' : '离线' }}
</el-tag>
</div>
<div class="info-item">
<span class="label">开关状态:</span>
<el-tag size="small" :type="deviceData.powerStatus === '1' ? 'success' : 'danger'">
{{ deviceData.powerStatus === '1' ? '已开启' : '已关闭' }}
</el-tag>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">最后在线时间:</span>
<span class="value">{{ deviceData.lastOnlineTime || '--' }}</span>
</div>
<div class="info-item">
<span class="label">总用电量:</span>
<span class="value">{{ deviceData.totalElectriQuantity || '--' }} 度</span>
</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">
<span class="label">电量读数:</span>
<span class="value">{{ deviceData.electricity || '--' }} 度</span>
<el-link type="primary" :underline="false">重置</el-link>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<!-- 右侧信息 -->
<el-col :span="8" class="right-section">
<el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>分成信息</span>
</div>
<div class="info-item">
<span class="label">平台:</span>
<span class="value">{{ deviceData.agentName || '--' }}</span>
</div>
<div class="info-item">
<span class="label">分成比例:</span>
<span class="value">{{ deviceData.serviceFeeProportion || '--' }} %</span>
</div>
</el-card>
<el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>实时信息</span>
</div>
<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 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>
</div>
<div class="info-item">
<span class="label">功率:</span>
<span class="value">{{ deviceData.realTimePower || '--' }} W</span>
</div>
<div class="info-item">
<span class="label">电压系数:</span>
<span class="value">{{ deviceData.placementStatus || '--' }}</span>
</div>
</el-card>
<!-- 操作台 -->
<el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>操作台</span>
</div>
<div class="operation-buttons">
<el-button type="text" icon="el-icon-view">详情</el-button>
<el-button type="text" icon="el-icon-edit">修改</el-button>
<el-button type="text" icon="el-icon-unlock">打开</el-button>
<el-button type="text" icon="el-icon-lock">关闭</el-button>
<el-button type="text" icon="el-icon-check">禁用</el-button>
<el-button type="text" icon="el-icon-refresh">重启</el-button>
<el-button type="text" icon="el-icon-refresh">更新</el-button>
<el-button type="text" icon="el-icon-delete">删除</el-button>
</div>
</el-card>
</el-col>
</el-row>
<!-- 下半部分 -->
<el-tabs v-model="activeTab" class="detail-tabs">
<el-tab-pane label="套餐列表" name="packages">
<!-- 套餐列表搜索表单 -->
<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>
</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="readings">抄表记录内容</el-tab-pane>
<el-tab-pane label="绑定/解绑记录" name="bindings">绑定/解绑记录内容</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: 'DeviceDetail',
data() {
return {
deviceData: {
createBy: "",
createTime: "2024-12-18 18:00:48",
updateBy: "",
updateTime: "2024-12-27 10:38:08",
remark: null,
deviceId: 3052,
sn: "102",
storeId: null,
deviceName: "未命名",
modelId: 37,
mac: "1D57887A4EE0",
mac2: null,
activationTime: "2025-01-02 16:09:15",
totalElectriQuantity: 0.00,
onlineStatus: "0",
onlineStatus1: "0",
onlineStatus2: "0",
status: "1",
realTimePower: null,
electricity: 0.00,
voltage: 0.00,
nickName: null,
outageWay: "1",
wifi: null,
lastPullTime: null,
initReading: 0.00,
powerStatus: "0",
expireTime: null,
customPicture: null,
serviceRate: null,
serviceType: "1",
remainTime: 0.00,
userId: 29,
startTime: null,
startUnit: null,
startPrice: null,
overTime: null,
overUnit: null,
overPrice: null,
rentTime: null,
lockUserId: null,
surplusEle: 0.00,
limitRechargeTime: null,
limitRechargeReason: null,
lastOnlineTime: "2025-01-03 10:00:00",
lastRecoverTime: null,
agentServiceRate: null,
agentId: null,
serviceMode: "1",
monthFee: null,
version: "V1.0.0",
isDefault: null,
storeName: null,
model: "4G语音30A",
userName: "18650502300",
userMobile: "18650502300",
picture: "https://api.ccttiot.com/Fk7zMpDW8MHmNZVm4mG3Hhun7ppH",
modelTags: ["1", "3", "5", "6"],
qrText: "102",
storeBusinessTimeStart: null,
storeBusinessTimeEnd: null,
orderCount: null,
orderAmount: null,
storeContactName: null,
storeContactMobile: null,
modelProductId: "lXZ62zkHzZ",
serviceFeeProportion: 0.005400,
realServiceRate: null,
agentUserServiceRate: null,
agentName: null,
agentMobile: null,
usingBillCount: null,
agentAllowMchSwitch: null,
allowSwitch: null,
placementStatus: "2",
productId: "lXZ62zkHzZ"
},
activeTab: 'packages',
searchForm: {
userName: '',
userPhone: '',
packageName: '',
chargeMode: '',
chargeType: ''
}
}
},
computed: {
modelTags() {
return this.deviceData.modelTags.map(tag => {
switch (tag) {
case "1": return "蓝牙";
case "3": return "WIFI";
case "5": return "4G";
case "6": return "语音";
default: return tag;
}
});
},
serviceModeText() {
switch (this.deviceData.serviceMode) {
case "1": return "直营模式";
case "2": return "代理模式";
default: return "--";
}
}
}
}
</script>
<style lang="scss" scoped>
.device-detail {
padding: 20px;
.top-section {
display: flex;
align-items: stretch;
}
.info-card {
margin-bottom: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.action-buttons, .header-buttons {
.el-button {
margin-left: 10px;
}
}
}
.info-item {
margin-bottom: 15px;
display: flex;
align-items: center;
.label {
color: #606266;
margin-right: 10px;
min-width: 100px;
}
.value {
color: #333;
}
.el-tag {
margin-right: 5px;
}
.el-link {
margin-left: 10px;
}
}
}
.operation-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
margin-top: 10px;
.el-button {
margin: 0;
padding: 0 10px;
flex: 1 1 45%;
}
}
.detail-tabs {
.search-form {
margin-bottom: 20px;
.el-form-item {
margin-bottom: 10px;
}
}
}
}
</style>

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

File diff suppressed because it is too large Load Diff