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-06 18:04:21 +08:00
parent 7b6ea4badb
commit 8875fd8bca
1 changed files with 744 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,73 +3,101 @@
<!-- 上半部分 -->
<el-row :gutter="20" class="top-section">
<!-- 左侧信息 -->
<el-col :span="16" class="left-section">
<el-col 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>
<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>
<el-button
type="info"
plain
icon="el-icon-close"
@click="handleCancel">
取消
</el-button>
</template>
<el-popover placement="top" width="180" trigger="hover">
<div class="qr-code-box">
<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-popover>
</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> -->
<template v-if="isEditing">
<el-input v-model="editForm.mac" size="small" class="edit-input" disabled></el-input>
</template>
<span v-else class="value">{{ deviceData.mac || '--' }}</span>
</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>
<template v-if="isEditing">
<el-input v-model="editForm.model" size="small" class="edit-input" disabled></el-input>
</template>
<el-tag v-else size="small" type="primary">{{ deviceData.model || '--' }}</el-tag>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">MAC-2:</span>
<span class="value">{{ deviceData.mac2 || '--' }}</span>
<template v-if="isEditing">
<el-input v-model="editForm.mac2" size="small" class="edit-input" disabled></el-input>
</template>
<span v-else 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>
<template v-if="isEditing">
<el-input v-model="editForm.productId" size="small" class="edit-input" disabled></el-input>
</template>
<span v-else class="value">{{ deviceData.productId || '--' }}</span>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">SN:</span>
<span class="value">{{ deviceData.sn || '--' }}</span>
<template v-if="isEditing">
<el-input v-model="editForm.sn" size="small" class="edit-input"></el-input>
</template>
<span v-else class="value">{{ deviceData.sn || '--' }}</span>
</div>
<div class="info-item">
<span class="label">型号功能:</span>
<span class="value">
<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"
:value="tag.dictValue">
</el-option>
</el-select>
</template>
<span v-else 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>
@ -86,38 +114,64 @@
<el-col :span="8">
<div class="info-item">
<span class="label">设备名称:</span>
<span class="value">{{ deviceData.deviceName || '--' }}</span>
<template v-if="isEditing">
<el-input v-model="editForm.deviceName" size="small" class="edit-input"></el-input>
</template>
<span v-else class="value">{{ deviceData.deviceName || '--' }}</span>
</div>
<div class="info-item">
<span class="label">月费:</span>
<span class="value">{{ deviceData.monthFee || '--' }} 元/月</span>
<span class="label">房间名称:</span>
<template v-if="isEditing">
<el-input v-model="editForm.roomName" size="small" class="edit-input" disabled></el-input>
</template>
<span v-else 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>
<span class="label">所属店铺:</span>
<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>
</div>
<div class="info-item">
<span class="label">平台服务费:</span>
<span class="value">{{ deviceData.serviceRate || '--' }} %</span>
<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>
</template>
<span v-else class="value">
<el-tag size="small" type="primary">{{ facilityTag }}</el-tag>
</span>
</div>
</el-col>
<el-col :span="8">
<div class="info-item">
<span class="label">所属商户:</span>
<span class="value">{{ deviceData.storeName || '--' }}</span>
<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>
</div>
<div class="info-item">
<span class="label">备注:</span>
<span class="value">{{ deviceData.remark || '--' }}</span>
<template v-if="isEditing">
<el-input v-model="editForm.remark" size="small" class="edit-input" > </el-input>
</template>
<span v-else 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>
@ -163,7 +217,7 @@
</el-col>
<!-- 右侧信息 -->
<el-col :span="8" class="right-section">
<el-col class="right-section">
<el-card class="info-card" shadow="always">
<div slot="header" class="card-header">
<span>分成信息</span>
@ -214,14 +268,17 @@
<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>
<!-- <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"
@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"
@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>
</div>
</el-card>
</el-col>
@ -265,90 +322,43 @@
<el-tab-pane label="绑定/解绑记录" name="bindings">绑定/解绑记录内容</el-tab-pane>
</el-tabs>
</div>
</template>
</template>
<script>
export default {
<script>
import {
getDevice,
updateDevice,
handleLock,
handleUnlocking,
reboot,
refreshDevice,
delDevice
} from '@/api/system/device'
import { listData } from '@/api/system/dict/data'
import QrCode from '@/components/QrCode/index.vue'
import QRCode from 'qrcode'
export default {
name: 'DeviceDetail',
components: { QrCode },
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"
deviceData: {},
isEditing: false, // 是否处于编辑状态
editForm: {
deviceId: '',
deviceName: '',
mac: '',
mac2: '',
sn: '',
model: '',
productId: '',
modelTags: [],
storeName: '',
serviceRate: '',
userName: '',
remark: '',
roomName: ''
},
activeTab: 'packages',
searchForm: {
@ -357,20 +367,25 @@
packageName: '',
chargeMode: '',
chargeType: ''
}
},
queryParams: {
pageNum: 1,
pageSize: 10,
dictType: 'sm_model_tag',
dictLabel: undefined,
status: undefined
},
facilityOptions: [],
modelTagOptions: [],
loading: true
}
},
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;
}
});
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) {
@ -378,13 +393,137 @@
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 || '无二维码信息';
}
},
created() {
const deviceId = this.$route.params.deviceId;
if (deviceId) {
this.fetchDeviceData(deviceId);
}
}
</script>
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
};
},
<style lang="scss" scoped>
.device-detail {
// 保存编辑
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) {
getDevice(deviceId).then(response => {
this.deviceData = response.data;
this.loading = false;
}).catch(error => {
this.$message.error("获取设备详情失败");
this.loading = false;
});
},
fetchFacilityOptions() {
listData({ pageNum: 1, pageSize: 10, dictType: 'ss_equipment_type' }).then(response => {
this.facilityOptions = response.rows;
}).catch(error => {
this.$message.error("获取绑定设施数据失败");
});
},
fetchModelTagOptions() {
listData(this.queryParams).then(response => {
this.modelTagOptions = response.rows;
}).catch(error => {
this.$message.error("获取modelTags数据失败");
});
},
downloadQRCode() {
const qrText = this.qrCodeText;
QRCode.toDataURL(qrText, { width: 150, height: 150 }, (err, url) => {
if (err) {
this.$message.error("生成二维码失败");
return;
}
const link = document.createElement('a');
link.href = url;
link.download = `${this.deviceData.sn || 'unknown'}.png`;
link.click();
});
},
handleUnlocking(row) {
handleUnlocking(row.deviceId).then(() => {
this.$message.success("设备已解锁");
});
},
handleLock(row) {
handleLock(row.deviceId).then(() => {
this.$message.success("设备已锁定");
});
},
reboot(row) {
reboot(row.deviceId).then(() => {
this.$message.success("设备已重启");
});
},
refresh(row) {
refreshDevice(row.deviceId).then(() => {
this.$message.success("设备已更新");
});
},
handleDelete(row) {
delDevice(row.deviceId).then(() => {
this.$message.success("设备已删除");
});
}
}
}
</script>
<style lang="scss" scoped>
.device-detail {
padding: 20px;
.top-section {
@ -392,16 +531,43 @@
align-items: stretch;
}
.left-section {
width: 70%;
display: flex;
flex-direction: column;
}
.right-section {
width: 30%;
display: flex;
flex-direction: column;
}
.info-card {
margin-bottom: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
flex: 1;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.action-buttons, .header-buttons {
.action-buttons {
display: flex;
gap: 10px;
align-items: center;
.el-button {
margin-left: 0;
&:first-child {
margin-left: 0;
}
}
}
.header-buttons {
.el-button {
margin-left: 10px;
}
@ -417,10 +583,21 @@
color: #606266;
margin-right: 10px;
min-width: 100px;
font-weight: 500;
}
.value {
color: #333;
flex: 1;
}
.edit-input {
width: 200px;
margin-right: 10px;
&.el-select {
width: 200px;
}
}
.el-tag {
@ -448,6 +625,8 @@
}
.detail-tabs {
margin-top: 20px;
.search-form {
margin-bottom: 20px;
@ -456,5 +635,135 @@
}
}
}
}
// QR码样式
.qr-code-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p {
margin-top: 10px;
color: #606266;
font-size: 12px;
}
</style>
}
// 编辑状态下的输入框样式
.editing {
.info-item {
.el-input,
.el-select {
.el-input__inner {
height: 32px;
line-height: 32px;
}
}
}
}
// 多选标签的样式
.el-select-dropdown__item {
padding: 0 10px;
height: 32px;
line-height: 32px;
}
// 表格样式优化
.el-table {
th, td {
padding: 8px 0;
}
.cell {
line-height: 20px;
}
}
// 标签页样式
.el-tabs__item {
height: 40px;
line-height: 40px;
}
// 卡片内容区域padding调整
.el-card__body {
padding: 20px;
}
// 输入框hover和focus状态
.el-input__inner:hover,
.el-select:hover .el-input__inner {
border-color: #409EFF;
}
.el-input__inner:focus,
.el-select .el-input__inner:focus {
border-color: #409EFF;
}
// 按钮组样式优化
.action-buttons {
.el-button + .el-button {
margin-left: 10px;
}
.el-button {
padding: 7px 15px;
font-size: 12px;
&--mini {
padding: 5px 10px;
}
}
}
// 表单项间距
.el-form-item {
margin-bottom: 18px;
&:last-child {
margin-bottom: 0;
}
}
// 下拉选择器宽度
.el-select {
width: 100%;
}
// 标签样式
.el-tag {
margin-right: 8px;
margin-bottom: 5px;
&:last-child {
margin-right: 0;
}
}
// 弹出框样式
.el-popover {
min-width: 150px;
padding: 12px;
}
// 加载状态
.loading {
position: relative;
min-height: 200px;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.7);
z-index: 1000;
}
}
</style>