feat: 增加项目详情中的设备绑定之后的数据获取，解绑，分页，设备详情跳转等

src/api/projects/index.ts

@@ -6,6 +6,7 @@ export default {
   detail: (code: string) => get('/projects/getByCode', { code }),
   del: (ids: number[]) => del('/projects/del', { ids }),
   bindResources: (data: object) => post('/projects/bindResources', data),
+  unbindResources: (data: object) => del('/projects/unbindResources', data),
   add: (data: object) => post('/projects/add', data),
   edit: (data: object) => put('/projects/edit', data),
   editStatus: (data: object) => put('/projects/editStatus', data),

src/views/iot/projects/detail/device.vue

@@ -1,32 +1,41 @@
 <template>
-  <div class="tab-content">
+  <div class="tab-content h-full">
     <div class="subtitle"><span></span> <el-button type="primary" size="small" @click="addDevice()">添加网关</el-button></div>
-    <el-table :data="tableData" style="width: 100%" v-loading="loading">
-      <el-table-column type="index" label="序号" width="60" align="center" />
-      <el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="projectName" label="大屏名称" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="remarks" label="描述" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
-      <el-table-column prop="updatedAt" label="更新时间" min-width="100" align="center"></el-table-column>
-      <el-table-column label="操作" width="200" align="center">
+    <el-table :data="tableData" style="width: 100%" v-loading="loading" max-height="calc(100vh - 280px)">
+      <el-table-column label="标识" prop="key" min-width="150" show-overflow-tooltip v-col="'key'">
+        <template #default="{ row }">
+          <copy :text="row.key"></copy>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备名称" prop="name" min-width="160" show-overflow-tooltip v-col="'name'" />
+      <el-table-column label="设备类型" prop="product.deviceType" min-width="100" align="center" show-overflow-tooltip v-col="'deviceType'" />
+      <el-table-column label="所属产品" prop="productName" min-width="120" align="center" show-overflow-tooltip v-col="'productName'" />
+      <el-table-column prop="status" label="状态" min-width="80" align="center" v-col="'status'">
+        <template #default="scope">
+          <el-tag type="info" size="small" v-if="scope.row.status == 1">离线</el-tag>
+          <el-tag type="success" size="small" v-if="scope.row.status == 2">在线</el-tag>
+          <el-tag type="info" size="small" v-if="scope.row.status == 0">未启用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="lastOnlineTime" label="最后上线时间" align="center" width="160" v-col="'lastOnlineTime'"></el-table-column>
+      <el-table-column prop="desc" label="说明" show-overflow-tooltip v-col="'desc'"></el-table-column>
+      <el-table-column label="操作" width="120" align="center">
         <template #default="scope">
-          <!-- <el-button size="small" text type="primary" @click="preview(scope.row)">预览</el-button>
-          <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
-          <el-button size="small" text type="warning" @click="edit(scope.row)">设计大屏</el-button>
-          <el-button size="small" text type="info" v-auth="'del'" @click="onDel(scope.row)">删除</el-button> -->
+          <el-button size="small" text type="primary" v-auth="'xxx'" @click="$router.push('/iotmanager/device/instance/' + scope.row.key)">设备详情</el-button>
+          <el-button size="small" text type="warning" v-auth="'xxx'" @click="onDel(scope.row)">解绑</el-button>
         </template>
       </el-table-column>
     </el-table>
     <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
     <el-dialog title="添加网关" v-model="isShowDialog" width="400">
-      <el-form>
+      <el-form v-if="isShowDialog">
         <el-form-item label="产品">
           <el-select v-model="form.productKey" @change="getDivices" filterable placeholder="选择产品" :clearable="false" style="width: 100%">
             <el-option v-for="item in productList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="设备" style="margin-bottom: 0;">
-          <el-select v-model="form.resourcesTypes" filterable placeholder="选择设备" :clearable="false" style="width: 100%">
+          <el-select v-model="form.resourcesKey" filterable placeholder="选择设备" :clearable="false" style="width: 100%">
             <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
@@ -47,26 +56,37 @@ import deviceApi from '/@/api/device';
 import api from '/@/api/projects';
 import { useSearch } from '/@/hooks/useCommon';
 import { useRoute } from 'vue-router';
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 const route = useRoute();
 
 const isShowDialog = ref(false)
 const productList = ref<any[]>([])
 const deviceList = ref<any[]>([])
-
+const resourcesTypes = 1
 const projectsCode = route.params.id
 
-const form = reactive({
+const baseForm = {
   productKey: '',
+  resourcesKey: '',
   projectsCode,
-  resourcesKey: '1',
-  resourcesTypes: '',
+  resourcesTypes
+}
+
+const form = reactive({
+  ...baseForm
 })
 
-const { params, tableData, getList, loading } = useSearch<any[]>(api.getProjectResourcesByCode, '', { projectsCode });
+const { params, tableData, getList, loading } = useSearch<any[]>(deviceApi.instance.getList, 'device', { keys: [], status: undefined });
 
-getList();
 getProducts();
+getSourceList();
+
+function getSourceList() {
+  api.getProjectResourcesByCode({ projectsCode }).then((res: any) => {
+    params.keys = (res || []).filter((item: any) => item.resourcesTypes === resourcesTypes).map((item: any) => item.resourcesKey)
+    getList();
+  })
+}
 
 function getProducts() {
   deviceApi.product.getList({ pageSize: 500, status: 1 }).then((res: any) => {
@@ -75,13 +95,15 @@ function getProducts() {
 }
 
 function onCancel() {
+  Object.assign(form, baseForm)
   isShowDialog.value = false
 }
 
 function onSubmit() {
+  if (!form.resourcesKey) return ElMessage('请先选择设备')
   api.bindResources(form).then((res: any) => {
-    getList()
-    isShowDialog.value = false
+    onCancel()
+    getSourceList()
     ElMessage.success('添加成功')
   })
 }
@@ -90,10 +112,27 @@ function addDevice() {
   isShowDialog.value = true
 }
 
+function onDel(row: any) {
+  ElMessageBox.confirm(`确定要删除？`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    api.unbindResources({
+      projectsCode,
+      resourcesTypes,
+      resourcesKey: row.key
+    }).then(() => {
+      getSourceList()
+      ElMessage.success('解绑成功')
+    })
+  });
+}
+
 function getDivices(productKey: string) {
-  form.resourcesTypes = ''
+  form.resourcesKey = ''
   deviceApi.device.allList({ productKey }).then((res: any) => {
-    deviceList.value = (res?.device || []).map((item: any) => ({ label: item.name, value: item.id }))
+    deviceList.value = (res?.device || []).map((item: any) => ({ label: item.name, value: item.key }))
   })
 }
 

src/views/iot/projects/detail/index.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <el-card shadow="nover" class="small-padding">
       <el-tabs :model-value="'4'" size="small" class="h-full">
-        <el-tab-pane label="场景概况" name="1">
+        <el-tab-pane label="场景概况" name="0">
           <InfoVue></InfoVue>
         </el-tab-pane>
         <el-tab-pane label="组态应用" name="2">
@@ -11,7 +11,10 @@
         <el-tab-pane label="视频监控" name="3">
           <VideoVue></VideoVue>
         </el-tab-pane>
-        <el-tab-pane label="网关和设备" name="4">
+        <el-tab-pane label="网关和设备" name="1">
+          <DeviceVue></DeviceVue>
+        </el-tab-pane>
+        <el-tab-pane label="场景联动" name="4">
           <DeviceVue></DeviceVue>
         </el-tab-pane>
       </el-tabs>