961 lines
30 KiB
Vue
961 lines
30 KiB
Vue
<template>
|
||
<div class="device-detail">
|
||
<!-- 上半部分 -->
|
||
<el-row :gutter="20" class="top-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-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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</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" 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">
|
||
<el-col :span="8">
|
||
<div class="info-item">
|
||
<span class="label">设备名称:</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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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>
|
||
</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 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 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>
|
||
</el-row>
|
||
|
||
<!-- 下半部分 -->
|
||
<el-tabs v-model="activeTab" class="detail-tabs">
|
||
<el-tab-pane label="套餐列表" name="packages">
|
||
<!-- 套餐列表搜索表单 -->
|
||
<Role :userId="deviceData.userId"></Role>
|
||
</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>
|
||
|
||
<script>
|
||
import {
|
||
getDevice,
|
||
updateDevice,
|
||
handleLock,
|
||
handleUnlocking,
|
||
reboot,
|
||
refreshDevice,
|
||
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'
|
||
|
||
export default {
|
||
name: "DeviceDetail",
|
||
components: {
|
||
QrCode,
|
||
Role
|
||
},
|
||
dicts: ['ss_equipment_type', 'ss_equipment_status', 'ss_user_type'],
|
||
data() {
|
||
return {
|
||
// 设备数据
|
||
deviceData: {
|
||
modelTags: [] // 初始化为空数组
|
||
},
|
||
loading: false,
|
||
isEditing: false,
|
||
|
||
// 编辑表单数据
|
||
editForm: {
|
||
deviceId: undefined,
|
||
mac: '',
|
||
mac2: '',
|
||
sn: '',
|
||
model: '',
|
||
productId: '',
|
||
deviceName: '',
|
||
roomName: '',
|
||
storeName: '',
|
||
userName: '',
|
||
remark: '',
|
||
modelTags: [],
|
||
serviceRate: undefined
|
||
},
|
||
|
||
// 设施相关数据
|
||
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: 'packages',
|
||
searchForm: {
|
||
userName: '',
|
||
userPhone: '',
|
||
packageName: '',
|
||
chargeMode: '',
|
||
chargeType: ''
|
||
}
|
||
}
|
||
},
|
||
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;
|
||
}) : [];
|
||
},
|
||
facilityTag() {
|
||
return this.deviceData.facilityName || '--'
|
||
}
|
||
},
|
||
created() {
|
||
const deviceId = this.$route.params.deviceId
|
||
|
||
this.fetchFacilityOptions()
|
||
this.fetchModelTagOptions()
|
||
if (deviceId) {
|
||
this.fetchDeviceData(deviceId)
|
||
}
|
||
},
|
||
methods: {
|
||
toUserDetail(){
|
||
if (this.deviceData.userId) {
|
||
this.$router.push(`/user/detail/${this.deviceData.userId}`);
|
||
}
|
||
},
|
||
fetchDeviceData(deviceId) {
|
||
this.loading = true
|
||
getDevice(deviceId).then(response => {
|
||
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
|
||
})
|
||
},
|
||
formatFeeRules(feeRuleVOS) {
|
||
if (!feeRuleVOS || !feeRuleVOS.length) {
|
||
return '-';
|
||
}
|
||
return feeRuleVOS.map(rule => rule.explain).join('，');
|
||
},
|
||
fetchFacilityOptions() {
|
||
listData({ dictType: 'ss_equipment_type' }).then(response => {
|
||
this.facilityOptions = response.rows || []
|
||
}).catch(() => {
|
||
this.$message.error("获取绑定设施数据失败")
|
||
})
|
||
},
|
||
|
||
fetchModelTagOptions() {
|
||
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
|
||
if (!qrText) {
|
||
this.$message.warning("没有可用的设备SN码")
|
||
return
|
||
}
|
||
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 || 'device'}.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) {
|
||
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;
|
||
|
||
.top-section {
|
||
display: flex;
|
||
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 {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
|
||
.el-button {
|
||
margin-left: 0;
|
||
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.value {
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.edit-input {
|
||
width: 200px;
|
||
margin-right: 10px;
|
||
|
||
&.el-select {
|
||
width: 200px;
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
margin-top: 20px;
|
||
|
||
.search-form {
|
||
margin-bottom: 20px;
|
||
|
||
.el-form-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// QR码样式
|
||
.qr-code-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
p {
|
||
margin-top: 10px;
|
||
color: #606266;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
// 编辑状态下的输入框样式
|
||
.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>
|