绑定设备

src/api/device/index.ts

@@ -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 })
+  },
 }

src/api/deviceuser/index.ts

@@ -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 })
+  }
 }

src/views/person/devicebind.vue

@@ -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
+      <div class="flex gap-4">
-        class="-mb-15px"
+        <!-- 左侧：已绑定设备列表 -->
-        :model="queryParams"
+        <div class="w-1/2">
-        ref="queryFormRef"
+          <div class="mb-4">
-        :inline="true"
+            <h3 class="text-lg font-medium">已绑定设备</h3>
-        label-width="68px"
+          </div>
-      >
+          <el-form
-        <el-form-item label="设备编号" prop="devicecode">
+            class="-mb-15px"
-          <el-input
+            :model="boundQueryParams"
-            v-model="queryParams.devicecode"
+            ref="boundQueryFormRef"
-            placeholder="请输入设备编号"
+            :inline="true"
-            clearable
+            label-width="68px"
-            @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
+            <el-form-item label="设备编号" prop="devicecode">
-              v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_TYPE)"
+              <el-input
-              :key="dict.value"
+                v-model="boundQueryParams.devicecode"
-              :label="dict.label"
+                placeholder="请输入设备编号"
-              :value="dict.value"
+                clearable
-            />
+                @keyup.enter="handleBoundQuery"
-          </el-select>
+                class="!w-200px"
-        </el-form-item>
+              />
-        <el-form-item>
+            </el-form-item>
-          <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+            <el-form-item label="设备类型" prop="devicetype">
-          <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+              <el-select
-        </el-form-item>
+                v-model="boundQueryParams.devicetype"
-      </el-form>
+                placeholder="请选择设备类型"
-
+                clearable
-      <div class="flex-1 overflow-hidden">
+                class="!w-200px"
-        <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)"
               >
-                <Icon icon="ep:link" />绑定
+                <el-option
-              </el-button>
+                  v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_TYPE)"
-            </template>
+                  :key="dict.value"
-          </el-table-column>
+                  :label="dict.label"
-        </el-table>
+                  :value="dict.value"
-      </div>
+                />
+              </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">
+          <div class="flex-1 overflow-hidden">
-        <Pagination
+            <el-table 
-          :total="total"
+              v-loading="boundLoading" 
-          v-model:page="queryParams.pageNo"
+              :data="boundList"
-          v-model:limit="queryParams.pageSize"
+              style="height: 100%"
-          @pagination="getList"
+            >
-        />
+              <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({