1179 lines
36 KiB
Vue
1179 lines
36 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">{{ ['1', '4'].includes(deviceData.placementType) ? '房间名称:' : '大厅设施:' }}</span>
|
||
<template v-if="isEditing">
|
||
<el-input v-model="editForm.roomName" size="small" class="edit-input" disabled></el-input>
|
||
</template>
|
||
<template v-else>
|
||
<router-link
|
||
v-if="deviceData.room && deviceData.room.roomId"
|
||
:to="'/system/roomDetail/index/' + deviceData.room.roomId"
|
||
class="link-type">
|
||
<span>{{ deviceData.room.roomName }}</span>
|
||
</router-link>
|
||
<span v-else>--</span>
|
||
</template>
|
||
</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>
|
||
<template v-else>
|
||
<router-link
|
||
v-if="deviceData.storeId"
|
||
:to="'/system/storeDetail/index/' + deviceData.storeId"
|
||
class="link-type"
|
||
>
|
||
<span>{{ deviceData.storeName }}</span>
|
||
</router-link>
|
||
<span v-else>--</span>
|
||
</template>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="label">绑定设施:</span>
|
||
<template v-if="isEditing">
|
||
<el-input v-model="editForm.name" size="small" class="edit-input" disabled></el-input>
|
||
</template>
|
||
<template v-else>
|
||
<router-link
|
||
v-if="deviceData.equ && deviceData.equ.equipmentId"
|
||
:to="'/system/equipmentDetail/index/' + deviceData.equ.equipmentId"
|
||
class="link-type"
|
||
>
|
||
<span>{{ deviceData.equ.name }}</span>
|
||
</router-link>
|
||
<span v-else>--</span>
|
||
</template>
|
||
</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>
|
||
<template v-else>
|
||
<router-link
|
||
v-if="deviceData.userId"
|
||
:to="'/user/detail/' + deviceData.userId"
|
||
class="link-type">
|
||
<span>{{ deviceData.userName }}</span>
|
||
</router-link>
|
||
<span v-else>--</span>
|
||
</template>
|
||
</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-col :span="8">
|
||
<div class="info-item">
|
||
<span class="label">投放状态:</span>
|
||
<el-tag
|
||
:type="deviceData.placementStatus === '1' ? 'success' : 'info'"
|
||
size="mini"
|
||
>
|
||
{{ deviceData.placementStatus === '1' ? '已投放' : '未投放' }}
|
||
</el-tag>
|
||
</div>
|
||
</el-col>
|
||
<el-col v-if="deviceData.placementStatus === '1'" :span="8">
|
||
<div class="info-item">
|
||
<span class="label">投放类型:</span>
|
||
<el-tag size="mini">
|
||
{{ getPlacementTypeText(deviceData.placementType) }}
|
||
</el-tag>
|
||
</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.electricity || '--' }} A</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="label">功率:</span>
|
||
<span class="value">{{ deviceData.realTimePower || '--' }} KW</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 v-if="deviceData.status != '3'" type="primary" plain icon="el-icon-unlock"
|
||
@click="handleUnlocking(deviceData)">打开</el-button>
|
||
<el-button type="primary" plain icon="el-icon-lock" @click="handleLock(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
|
||
v-if="!deviceData.userId"
|
||
type="primary"
|
||
icon="el-icon-connection"
|
||
plain
|
||
@click="openBindUserDialog"
|
||
>绑定</el-button>
|
||
<el-button
|
||
v-else
|
||
type="danger"
|
||
icon="el-icon-remove"
|
||
plain
|
||
@click="handleUnbind"
|
||
>解绑</el-button>
|
||
<el-button
|
||
v-if="deviceData.placementStatus === '0'"
|
||
type="primary"
|
||
icon="el-icon-connection"
|
||
plain
|
||
@click="openBindFacilityDialog"
|
||
>投放</el-button>
|
||
<el-button
|
||
v-else-if="deviceData.placementStatus === '1'"
|
||
type="danger"
|
||
icon="el-icon-remove"
|
||
plain
|
||
@click="handleOffline"
|
||
>下架</el-button>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 下半部分 -->
|
||
<el-tabs v-model="activeTab" class="detail-tabs">
|
||
<el-tab-pane label="命令日志" name="logs" :lazy="true">
|
||
<Log
|
||
v-if="deviceData.sn != null"
|
||
:query="{
|
||
sn: deviceData.sn
|
||
}"
|
||
/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="绑定/解绑记录" name="record" :lazy="true">
|
||
<bind-record
|
||
:query="{
|
||
sn: deviceData.sn
|
||
}"
|
||
/>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<el-dialog title="绑定设施" :visible.sync="bindFacilityDialogVisible" width="900px" append-to-body>
|
||
<el-form :model="facilityQueryParams" ref="facilityQueryForm" :inline="true" class="search-form">
|
||
<el-form-item label="店铺" prop="storeId">
|
||
<el-select
|
||
v-model="facilityQueryParams.storeId"
|
||
filterable
|
||
clearable
|
||
placeholder="请选择店铺"
|
||
@change="handleFacilityQuery"
|
||
>
|
||
<el-option
|
||
v-for="item in storeOptions"
|
||
:key="item.storeId"
|
||
:label="item.name"
|
||
:value="item.storeId"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设施名称" prop="equipmentName">
|
||
<el-input v-model="facilityQueryParams.equipmentName" placeholder="请输入设施名称" clearable size="small" @keyup.enter.native="getFacilityList" />
|
||
</el-form-item>
|
||
<el-form-item label="设施类型" prop="type">
|
||
<el-select v-model="facilityQueryParams.type" placeholder="请选择设施类型" clearable size="small">
|
||
<el-option
|
||
v-for="dict in dict.type.ss_equipment_type"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="getFacilityList">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetFacilityQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table v-loading="facilityTableLoading" :data="facilityList" style="width: 100%" height="500">
|
||
<el-table-column label="店铺名" prop="storeName" align="center" />
|
||
<el-table-column label="设施名称" prop="equipmentName" align="center" />
|
||
<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="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="投放状态" prop="placementStatus" align="center">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.ss_placement_status" :value="scope.row.placementStatus" />
|
||
</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,
|
||
refreshIot,
|
||
reboot,
|
||
refreshDevice,
|
||
delDevice,
|
||
deviceSwitch,
|
||
rebootDevice,
|
||
offlineDevice,
|
||
bindMch, unbind, placementDevice, offline
|
||
} from '@/api/system/device'
|
||
import { listUser } from "@/api/user/user"
|
||
import { listData } from '@/api/system/dict/data'
|
||
import {listUnifiedEquipment} from "@/api/system/equipment"
|
||
import BindRecord from "@/views/system/bindRecord/index.vue";
|
||
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'
|
||
import {getDomain} from "@/api/common/common";
|
||
import { listStore } from "@/api/system/store";
|
||
export default {
|
||
name: "DeviceDetail",
|
||
components: {
|
||
QrCode, Role, Log, BindRecord
|
||
},
|
||
dicts: ['ss_equipment_type', 'ss_equipment_status', 'ss_user_type','ss_placement_status'],
|
||
data() {
|
||
return {
|
||
// 设备数据
|
||
deviceData: {
|
||
modelTags: [],
|
||
roomName: null,
|
||
name: null,
|
||
room: null,
|
||
equ: null,
|
||
qrText: null
|
||
},
|
||
domain: null,
|
||
loading: false,
|
||
isEditing: false,
|
||
|
||
// 编辑表单数据
|
||
editForm: {
|
||
deviceId: undefined,
|
||
mac: '',
|
||
mac2: '',
|
||
sn: '',
|
||
model: '',
|
||
productId: '',
|
||
deviceName: '',
|
||
roomName: '',
|
||
name: undefined,
|
||
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: 'logs',
|
||
searchForm: {
|
||
userName: '',
|
||
userPhone: '',
|
||
packageName: '',
|
||
chargeMode: '',
|
||
chargeType: ''
|
||
},
|
||
facilityQuery: {
|
||
name: undefined,
|
||
storeId: undefined
|
||
},
|
||
storeOptions: [],
|
||
}
|
||
},
|
||
computed: {
|
||
qrCodeText() {
|
||
return this.deviceData.qrText ? this.domain + "?sn="+this.deviceData.qrText : '';
|
||
},
|
||
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.getDomain2();
|
||
this.fetchFacilityOptions();
|
||
this.fetchModelTagOptions();
|
||
if (deviceId) {
|
||
this.fetchDeviceData(deviceId)
|
||
}
|
||
},
|
||
methods: {
|
||
getDomain2(){
|
||
getDomain().then(response => {
|
||
if (response.data) {
|
||
this.domain = response.data;
|
||
}
|
||
}).catch(error => {
|
||
this.$message.error("获取全局域名失败")
|
||
})
|
||
},
|
||
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: this.facilityQueryParams.equipmentName,
|
||
type: this.facilityQueryParams.type,
|
||
status: "0",
|
||
storeId: this.facilityQueryParams.storeId,
|
||
merchantId: this.deviceData.userId,
|
||
isBind: false
|
||
};
|
||
|
||
listUnifiedEquipment(queryParams).then(response => {
|
||
this.facilityList = response.rows;
|
||
this.facilityTotal = response.total;
|
||
this.facilityTableLoading = false;
|
||
}).catch(() => {
|
||
this.facilityTableLoading = false;
|
||
});
|
||
},
|
||
toggleEdit() {
|
||
this.isEditing = true
|
||
this.editForm = {
|
||
...this.deviceData,
|
||
modelTags: Array.isArray(this.deviceData.modelTags)
|
||
? [...this.deviceData.modelTags]
|
||
: [],
|
||
name: this.deviceData.name || '' // 确保 name 被正确初始化
|
||
}
|
||
},
|
||
|
||
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) {
|
||
deviceSwitch({ deviceId: row.deviceId, open: true }).then((response) => {
|
||
if (response.code == 200) {
|
||
this.fetchDeviceData(row.deviceId)
|
||
this.$message.success("设备已打开")
|
||
|
||
} else {
|
||
this.$message.error("设备打开失败")
|
||
}
|
||
})
|
||
},
|
||
|
||
handleLock(row) {
|
||
deviceSwitch({ deviceId: row.deviceId, open: false }).then((response) => {
|
||
if (response.code == 200) {
|
||
this.fetchDeviceData(row.deviceId)
|
||
this.$message.success("设备已关闭")
|
||
|
||
} else {
|
||
this.$message.error("设备关闭失败")
|
||
}
|
||
})
|
||
},
|
||
|
||
reboot(row) {
|
||
rebootDevice(row.deviceId).then((response) => {
|
||
if (response.code == 200) {
|
||
this.fetchDeviceData(row.deviceId)
|
||
this.$message.success("设备已重启")
|
||
} else {
|
||
this.$message.error("设备重启失败")
|
||
}
|
||
})
|
||
},
|
||
|
||
refresh(row) {
|
||
refreshIot(row.deviceId).then((response) => {
|
||
if (response.code == 200) {
|
||
this.fetchDeviceData(row.deviceId)
|
||
this.$message.success("设备已刷新")
|
||
} else {
|
||
this.$message.error("设备刷新失败")
|
||
}
|
||
})
|
||
},
|
||
|
||
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.getStoreOptions().then(() => {
|
||
this.getFacilityList();
|
||
});
|
||
},
|
||
|
||
handleBindFacility(row) {
|
||
placementDevice({
|
||
deviceId: this.deviceData.deviceId,
|
||
type: row.type,
|
||
objId: row.objId
|
||
}).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' ? '禁用' : '启用'
|
||
if (status == '8') {
|
||
offlineDevice(row.deviceId).then((response) => {
|
||
if (response.code == 200) {
|
||
this.$message.success("设备已下线")
|
||
this.fetchDeviceData(row.deviceId)
|
||
} else {
|
||
this.$message.error("设备下线失败")
|
||
}
|
||
})
|
||
} else {
|
||
|
||
}
|
||
},
|
||
|
||
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) {
|
||
bindMch(this.deviceData.deviceId,row.userId).then((response) => {
|
||
if (response.code == 200) {
|
||
this.$message.success("绑定成功")
|
||
this.bindUserDialogVisible = false
|
||
this.fetchDeviceData(this.deviceData.deviceId)
|
||
} else {
|
||
this.$message.error("绑定失败")
|
||
}
|
||
})
|
||
},
|
||
handleUnbind() {
|
||
this.$modal.confirm('是否确认解绑该设备？').then(() => {
|
||
return unbind(this.deviceData.deviceId);
|
||
}).then(() => {
|
||
this.$message.success("解绑成功");
|
||
this.fetchDeviceData(this.deviceData.deviceId); // 重新获取设备数据
|
||
}).catch(() => {
|
||
this.$message.error("解绑失败");
|
||
});
|
||
},
|
||
handleOffline() {
|
||
this.$modal.confirm('是否确认下架该设备？').then(() => {
|
||
return offline(this.deviceData.deviceId);
|
||
}).then(() => {
|
||
this.$message.success("下架成功");
|
||
this.fetchDeviceData(this.deviceData.deviceId); // 重新获取设备数据
|
||
}).catch(() => {
|
||
this.$message.error("下架失败");
|
||
});
|
||
},
|
||
resetFacilityQuery() {
|
||
this.$refs["facilityQueryForm"].resetFields();
|
||
this.facilityQueryParams = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
equipmentName: undefined,
|
||
type: undefined,
|
||
storeId: undefined,
|
||
status: "0",
|
||
merchantId: this.deviceData.userId,
|
||
isBind: false
|
||
};
|
||
this.getFacilityList();
|
||
},
|
||
getPlacementTypeText(type) {
|
||
switch (type) {
|
||
case '1':
|
||
return '房间门';
|
||
case '2':
|
||
return '麻将桌';
|
||
case '3':
|
||
return '台球桌';
|
||
case '4':
|
||
return '房间灯';
|
||
case '5':
|
||
return '卫生间门';
|
||
case '6':
|
||
return '大门';
|
||
default:
|
||
return '';
|
||
}
|
||
},
|
||
getStoreOptions() {
|
||
return listStore({ pageSize: 999 ,merchantId: this.deviceData.userId}).then(response => {
|
||
this.storeOptions = response.rows;
|
||
});
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleFacilityQuery() {
|
||
this.facilityQueryParams.pageNum = 1;
|
||
this.getFacilityList();
|
||
},
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
|
||
.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: 8px 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>
|