若依微服务1.9.4

business：
1、设备信息增加根据网关设备过滤

ruoyi-modules/hw-business/src/main/resources/mapper/business/HwDeviceMapper.xml

@@ -276,6 +276,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="activeStatus != null  and activeStatus != ''"> and hd.active_status = #{activeStatus}</if>
             <if test="deviceStatus != null  and deviceStatus != ''"> and hd.device_status = #{deviceStatus}</if>
             <if test="tenantId != null "> and hd.tenant_id = #{tenantId}</if>
+            <if test="releatedDeviceId != null "> and hd.releated_device_id = #{releatedDeviceId}</if>
             <if test="onlineStatus != null  and onlineStatus != ''"> and hd.online_status = #{onlineStatus}</if>
             <!-- 租户数据范围过滤 -->
             ${params.tenantDataScope}

ruoyi-ui/src/views/business/device/index.vue

@@ -1,6 +1,55 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-row :gutter="20">
+
+      <el-col :span="0.1" :xs="24" v-if="toggleRightDisplay">
+        <div @click="toggleDeviceClick">
+          <img v-if="toggleMenuRightImg" :src="toggleMenuRightImg" class="hamburger"/>
+        </div>
+      </el-col>
+      <!--网关设备数据-->
+      <el-col :span="4" :xs="24" v-if="toggleLeftDisplay">
+        <div @click="toggleDeviceClick" style="display:flex;justify-content: space-between">
+          <h6 class="form-header h6" style="margin: 10px 0 10px 0">网关设备,点击过滤显示子设备</h6>
+          <img v-if="toggleMenuLeftImg" :src="toggleMenuLeftImg" class="hamburger"/>
+        </div>
+        <div class="head-container">
+          <el-input
+            v-model="gatewayDeviceName"
+            placeholder="请输入网关设备名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="gatewayDeviceList"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            node-key="deviceId"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--设备数据-->
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                 label-width="68px">
+          <el-form-item label="网关设备" prop="releatedDeviceId" v-if="false">
+            <el-input
+              v-model="queryParams.releatedDeviceId"
+              placeholder="请输入设备编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
           <el-form-item label="设备编号" prop="deviceCode">
             <el-input
               v-model="queryParams.deviceCode"
@@ -241,6 +290,10 @@
           @pagination="getList"
         />
 
+      </el-col>
+    </el-row>
+
+
     <!-- 添加或修改设备信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -436,6 +489,7 @@
 
     </el-dialog>
 
+
   </div>
 </template>
 
@@ -458,6 +512,8 @@ import {
 import {getToken} from "@/utils/auth";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import toggleMenuLeftImg from '@/assets/images/togglemenu-left.png'
+import toggleMenuRightImg from '@/assets/images/togglemenu-right.png'
 
 export default {
   components: {Treeselect},
@@ -489,6 +545,13 @@ export default {
 
   data() {
     return {
+      toggleMenuLeftImg: toggleMenuLeftImg,
+      toggleMenuRightImg: toggleMenuRightImg,
+      toggleLeftDisplay: true,
+      toggleRightDisplay: false,
+      // 网关设备名称
+      gatewayDeviceName: undefined,
+
       // 遮罩层
       loading: true,
       // 选中数组
@@ -503,6 +566,8 @@ export default {
       total: 0,
       // 设备信息表格数据
       deviceList: [],
+      // 网关设备信息表格数据
+      gatewayDeviceList: [],
       //场景列表
       scenes: [],
       //查询页面监控单元树
@@ -544,6 +609,10 @@ export default {
       // 是否显示弹出层
       open: false,
 
+      defaultProps: {
+        children: "children",
+        label: "deviceName"
+      },
 
       // 用户导入参数
       upload: {
@@ -653,8 +722,15 @@ export default {
       fileList: [],
     };
   },
+  watch: {
+    // 根据名称筛选部门树
+    gatewayDeviceName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
   created() {
     this.getList();
+    this.getGatewayDeviceList();
     getScenes().then(response => {
       this.scenes = response.data;
     });
@@ -690,6 +766,15 @@ export default {
         this.loading = false;
       });
     },
+
+    getGatewayDeviceList() {
+      this.loading = true;
+      listDevice({"deviceType": 1}).then(response => {
+        this.gatewayDeviceList = response.rows;
+        this.loading = false;
+      });
+    },
+
     // 取消按钮
     cancel() {
       this.open = false;
@@ -737,6 +822,8 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.queryParams.deviceType = null;
+      this.queryParams.releatedDeviceId = null;
       this.handleQuery();
     },
     // 多选框选中数据
@@ -1115,7 +1202,7 @@ export default {
     importTemplate() {
       this.$refs["uploadForm"].validate(valid => {
         if (valid) {
-          this.download('business/device/importTemplate', {"sceneId": this.upload.sceneId}, `device_template_`+this.upload.sceneName+`_${new Date().getTime()}.xlsx`)
+          this.download('business/device/importTemplate', {"sceneId": this.upload.sceneId}, `device_template_` + this.upload.sceneName + `_${new Date().getTime()}.xlsx`)
         }
       });
     },
@@ -1138,9 +1225,40 @@ export default {
           this.$refs.upload.submit();
         }
       });
+    },
+
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.deviceName.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deviceType = this.DEVICE_TYPE_GATEWAY_SUB_EQUIPMENT;
+      this.queryParams.releatedDeviceId = data.deviceId;
+      this.handleQuery();
+    },
+
+    toggleDeviceClick() {
+      if (this.toggleLeftDisplay) {
+        this.toggleRightDisplay = true;
+        this.toggleLeftDisplay = false;
+      } else if (this.toggleRightDisplay) {
+        this.toggleRightDisplay = false;
+        this.toggleLeftDisplay = true;
+      }
     }
 
   }
 };
 </script>
-
+<style scoped>
+.hamburger {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  margin: 5px 5px 0 0;
+  cursor: pointer;
+}
+</style>