设备详情和设备列表
This commit is contained in:
parent
162f23fd3b
commit
7b6ea4badb
|
|
@ -5,8 +5,8 @@ VUE_APP_TITLE = 共享空间
|
||||||
ENV = 'development'
|
ENV = 'development'
|
||||||
|
|
||||||
# 共享空间/开发环境
|
# 共享空间/开发环境
|
||||||
# VUE_APP_BASE_API = '/dev-api'
|
VUE_APP_BASE_API = 'https://testcha.chuangtewl.com/prod-api'
|
||||||
VUE_APP_BASE_API = 'http://localhost:8089'
|
# VUE_APP_BASE_API = 'http://localhost:8089'
|
||||||
|
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||||
|
|
|
||||||
|
|
@ -147,6 +147,20 @@ export const dynamicRoutes = [
|
||||||
meta: { title: '用户列表', activeMenu: '/user/user' }
|
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',
|
path: '/system/device/sn',
|
||||||
|
|
|
||||||
460
src/views/system/device/device_detail.vue
Normal file
460
src/views/system/device/device_detail.vue
Normal 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>
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user