绑定设备
This commit is contained in:
parent
6c2a5525d8
commit
6c361bc067
@ -60,5 +60,10 @@ export const DeviceApi = {
|
||||
//根据设备ID更新设备状态
|
||||
updateDeviceStatus: async (devicecode: number, devicestatus: number) => {
|
||||
return await request.put({ url: `/system/device/updateDeviceStatus?devicecode=` + devicecode + `&devicestatus=` + devicestatus })
|
||||
}
|
||||
},
|
||||
|
||||
//查询没有绑定过的设备
|
||||
getDeviceNotBind: async (params: any) => {
|
||||
return await request.get({ url: `/system/device/getDeviceNotBind`, params })
|
||||
},
|
||||
}
|
||||
|
||||
@ -53,4 +53,9 @@ export const DeviceuserApi = {
|
||||
getDeviceuserByDeviceId: async (deviceid: number) => {
|
||||
return await request.get({ url: `/system/deviceuser/getDeviceuserByDeviceId?deviceid=` + deviceid })
|
||||
},
|
||||
|
||||
//根据用户ID查询设备人员关联
|
||||
getDeviceuserByUserId: async (userid: number) => {
|
||||
return await request.get({ url: `/system/deviceuser/getDeviceuserByUserId?userid=` + userid })
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,107 +2,211 @@
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="设备绑定"
|
||||
width="80%"
|
||||
width="90%"
|
||||
height="80vh"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="设备编号" prop="devicecode">
|
||||
<el-input
|
||||
v-model="queryParams.devicecode"
|
||||
placeholder="请输入设备编号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="devicetype">
|
||||
<el-select
|
||||
v-model="queryParams.devicetype"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
class="!w-200px"
|
||||
<div class="flex gap-4">
|
||||
<!-- 左侧：已绑定设备列表 -->
|
||||
<div class="w-1/2">
|
||||
<div class="mb-4">
|
||||
<h3 class="text-lg font-medium">已绑定设备</h3>
|
||||
</div>
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="boundQueryParams"
|
||||
ref="boundQueryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
style="height: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
label="设备名称"
|
||||
align="center"
|
||||
prop="devicename"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备编号"
|
||||
align="center"
|
||||
prop="devicecode"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备类型"
|
||||
align="center"
|
||||
prop="devicetype"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备位置"
|
||||
align="center"
|
||||
prop="location"
|
||||
min-width="180"
|
||||
/>
|
||||
<el-table-column label="设备状态" align="center" prop="devicestatus" width="150">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getDeviceStatusType(scope.row.devicestatus)">
|
||||
{{ getDeviceStatusLabel(scope.row.devicestatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="handleBind(scope.row)"
|
||||
<el-form-item label="设备编号" prop="devicecode">
|
||||
<el-input
|
||||
v-model="boundQueryParams.devicecode"
|
||||
placeholder="请输入设备编号"
|
||||
clearable
|
||||
@keyup.enter="handleBoundQuery"
|
||||
class="!w-200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="devicetype">
|
||||
<el-select
|
||||
v-model="boundQueryParams.devicetype"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
class="!w-200px"
|
||||
>
|
||||
<Icon icon="ep:link" />绑定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-option
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleBoundQuery"><Icon icon="ep:search" />搜索</el-button>
|
||||
<el-button @click="resetBoundQuery"><Icon icon="ep:refresh" />重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="mt-4">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<el-table
|
||||
v-loading="boundLoading"
|
||||
:data="boundList"
|
||||
style="height: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
label="设备名称"
|
||||
align="center"
|
||||
prop="devicename"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备编号"
|
||||
align="center"
|
||||
prop="devicecode"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备类型"
|
||||
align="center"
|
||||
prop="devicetype"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备位置"
|
||||
align="center"
|
||||
prop="location"
|
||||
min-width="100"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="设备状态" align="center" prop="devicestatus" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getDeviceStatusType(scope.row.devicestatus)">
|
||||
{{ getDeviceStatusLabel(scope.row.devicestatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="danger"
|
||||
link
|
||||
@click="handleUnbind(scope.row)"
|
||||
>
|
||||
<Icon icon="ep:close" />解绑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：未激活设备列表 -->
|
||||
<div class="w-1/2">
|
||||
<div class="mb-4">
|
||||
<h3 class="text-lg font-medium">可绑定设备</h3>
|
||||
</div>
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="设备编号" prop="devicecode">
|
||||
<el-input
|
||||
v-model="queryParams.devicecode"
|
||||
placeholder="请输入设备编号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="devicetype">
|
||||
<el-select
|
||||
v-model="queryParams.devicetype"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
class="!w-200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
style="height: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
label="设备名称"
|
||||
align="center"
|
||||
prop="devicename"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备编号"
|
||||
align="center"
|
||||
prop="devicecode"
|
||||
width="200"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备类型"
|
||||
align="center"
|
||||
prop="devicetype"
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备位置"
|
||||
align="center"
|
||||
prop="location"
|
||||
min-width="100"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="设备状态" align="center" prop="devicestatus" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getDeviceStatusType(scope.row.devicestatus)">
|
||||
{{ getDeviceStatusLabel(scope.row.devicestatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="100" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="handleBind(scope.row)"
|
||||
>
|
||||
<Icon icon="ep:link" />绑定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</el-dialog>
|
||||
@ -122,30 +226,36 @@ const userProfile = ref()
|
||||
const message = useMessage()
|
||||
const dialogVisible = ref(false)
|
||||
const loading = ref(false)
|
||||
const boundLoading = ref(false)
|
||||
const total = ref(0)
|
||||
const list = ref<DeviceVO[]>([])
|
||||
const boundList = ref<DeviceVO[]>([])
|
||||
const personId = ref<number>()
|
||||
const personName = ref<string>()
|
||||
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
devicename: undefined,
|
||||
devicecode: undefined,
|
||||
devicetype: undefined,
|
||||
devicestatus: 0,
|
||||
orgid: undefined
|
||||
})
|
||||
|
||||
const queryFormRef = ref()
|
||||
|
||||
const boundQueryParams = reactive({
|
||||
devicecode: undefined,
|
||||
devicetype: undefined
|
||||
})
|
||||
|
||||
const boundQueryFormRef = ref()
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
userProfile.value = await getUserProfile()
|
||||
queryParams.orgid = userProfile.value.dept.id
|
||||
const data = await DeviceApi.getDevicePage(queryParams)
|
||||
console.log(queryParams)
|
||||
const data = await DeviceApi.getDeviceNotBind(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
@ -153,6 +263,26 @@ const getList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
/** 查询已绑定设备列表 */
|
||||
const getBoundList = async () => {
|
||||
if (!personId.value) return
|
||||
boundLoading.value = true
|
||||
try {
|
||||
const bindData = await DeviceuserApi.getDeviceuserByUserId(personId.value)
|
||||
// 获取每个设备的详细信息
|
||||
const devicePromises = bindData.map(async (item: DeviceuserVO) => {
|
||||
const deviceInfo = await DeviceApi.getDeviceId(item.deviceid)
|
||||
return {
|
||||
...deviceInfo,
|
||||
devicecode: item.deviceid // 确保devicecode字段存在
|
||||
}
|
||||
})
|
||||
boundList.value = await Promise.all(devicePromises)
|
||||
} finally {
|
||||
boundLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
@ -162,10 +292,25 @@ const handleQuery = () => {
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
queryParams.devicestatus = 0
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 搜索已绑定设备 */
|
||||
const handleBoundQuery = () => {
|
||||
const { devicecode, devicetype } = boundQueryParams
|
||||
boundList.value = boundList.value.filter(item => {
|
||||
const matchCode = !devicecode || item.devicecode.toString().includes(devicecode)
|
||||
const matchType = !devicetype || item.devicetype === devicetype
|
||||
return matchCode && matchType
|
||||
})
|
||||
}
|
||||
|
||||
/** 重置已绑定设备搜索 */
|
||||
const resetBoundQuery = () => {
|
||||
boundQueryFormRef.value?.resetFields()
|
||||
getBoundList()
|
||||
}
|
||||
|
||||
/** 获取设备状态标签 */
|
||||
const getDeviceStatusLabel = (status: number) => {
|
||||
const statusMap = {
|
||||
@ -223,12 +368,38 @@ const handleBind = async (row: DeviceVO) => {
|
||||
}
|
||||
}
|
||||
|
||||
/** 解绑设备 */
|
||||
const handleUnbind = async (row: DeviceVO) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确认要解绑该设备吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
|
||||
const bindData = await DeviceuserApi.getDeviceuserByDeviceId(row.id)
|
||||
const bindRecord = bindData.find((item: DeviceuserVO) => item.userid === personId.value)
|
||||
if (bindRecord) {
|
||||
await DeviceuserApi.deleteDeviceuser(bindRecord.id)
|
||||
await DeviceApi.updateDeviceStatus(row.devicecode, 0)
|
||||
message.success('解绑成功')
|
||||
getBoundList()
|
||||
getList()
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
message.error('解绑失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = (id: number, name: string) => {
|
||||
personId.value = id
|
||||
personName.value = name
|
||||
dialogVisible.value = true
|
||||
getList()
|
||||
getBoundList()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user