feat: 增加项目详情中网管和设备页面的添加网关和设备的操作

src/theme/fast.scss

@@ -36,8 +36,18 @@
 	}
 }
 
-.el-card.pt-0 .el-card__body {
-	padding-top: 0;
+.el-tabs.h-full {
+	display: flex;
+	flex-flow: column nowrap;
+	.el-tabs__content{
+		flex: 1;
+		overflow-y: auto;
+		padding-right: 15px;
+	}
+}
+
+.el-card.small-padding .el-card__body {
+	padding-top: 8px;
 }
 
 .page-full {

src/views/iot/device/product/component/editPro.vue

@@ -81,7 +81,7 @@
 				<el-form-item label="设备类型" prop="deviceType">
 					<el-radio-group v-model="ruleForm.deviceType">
 						<el-radio label="设备">直连设备</el-radio>
-						<el-radio label="子设备">网关子设备</el-radio>
+						<el-radio label="子设备">子设备</el-radio>
             <el-radio label="网关">网关设备</el-radio>
           </el-radio-group>
 				</el-form-item>

src/views/iot/device/product/index.vue

@@ -9,7 +9,7 @@
           <el-select v-model="tableData.param.deviceType" placeholder="类型" clearable style="width: 240px" @keyup.enter.native="typeList" >
             <el-option label="直连设备" :value="'设备'" />
             <el-option label="网关设备" :value="'网关'" />
-            <el-option label="网关子设备" :value="'子设备'" />
+            <el-option label="子设备" :value="'子设备'" />
           </el-select>
         </el-form-item>
         <el-form-item label="发布状态" prop="status" style="width: 180px;">

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

@@ -1,9 +1,99 @@
 <template>
   <div class="tab-content">
-    网关和设备
+    <div class="subtitle">网关 <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">
+        <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> -->
+        </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-divider></el-divider>
+    <div class="subtitle">设备 <el-button type="primary" size="small">添加设备</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">
+        <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> -->
+        </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-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="设备">
+          <el-select v-model="form.resourcesTypes" 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>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import api from '/@/api/device';
+import { useSearch } from '/@/hooks/useCommon';
+import { useRoute } from 'vue-router';
+const route = useRoute();
+
+const isShowDialog = ref(false)
+const productList = ref<any[]>([])
+const deviceList = ref<any[]>([])
+
+const form = reactive({
+  productKey: '',
+  projectsCode: route.params.id,
+  resourcesKey: '1',
+  resourcesTypes: '',
+})
+
+const { params, tableData, getList, loading } = useSearch<any[]>(api.product.getList, 'data', { pageSize: 5, status: 1 });
+
+getList();
+getProducts();
+
+
+function getProducts() {
+  api.product.getList({ pageSize: 500, status: 1 }).then((res: any) => {
+    productList.value = (res?.product || []).map(item => ({ label: item.name, value: item.key }))
+  })
+}
+
+function addDevice(type: string) {
+  isShowDialog.value = true
+}
+
+function getDivices(productKey: string) {
+  form.resourcesTypes = ''
+  api.device.allList({ productKey }).then((res: any) => {
+    deviceList.value = (res?.device || []).map(item => ({ label: item.name, value: item.key }))
+  })
+}
 
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
-    <el-card shadow="nover" class="pt-0">
-      <el-tabs :model-value="'1'" size="small">
+    <el-card shadow="nover" class="small-padding">
+      <el-tabs :model-value="'4'" size="small" class="h-full">
         <el-tab-pane label="场景概况" name="1">
           <InfoVue></InfoVue>
         </el-tab-pane>
@@ -20,8 +20,27 @@
 </template>
 
 <script lang="ts" setup>
-import InfoVue  from './info.vue'
-import TopoVue  from './topo.vue'
-import VideoVue  from './video.vue'
-import DeviceVue  from './device.vue'
+import InfoVue from './info.vue'
+import TopoVue from './topo.vue'
+import VideoVue from './video.vue'
+import DeviceVue from './device.vue'
+
+// 资源类型 resourcesTypes
+//  设备  1
+//  组态  2
+//  视频  3
+//  场景联动  4
+
 </script>
+<style scoped lang="scss">
+::v-deep{
+  .subtitle{
+    display: flex;
+    justify-content: space-between;
+    height: 24px;
+    align-items: center;
+    font-weight: 500;
+    margin-bottom: 10px
+  }
+}
+</style>