设备分组功能，添加高级筛选，上方文本框输入后的筛选

src/api/equipmentManagement/devicegroup/index.ts

@@ -3,7 +3,7 @@ import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 
 //左侧节点的数据源
-function getTreeData(para : any) {
+function getTreeData(para: any) {
 
 
 
@@ -39,7 +39,7 @@ function getTreeData(para : any) {
   });
 
   return new Promise((resolve, reject) => {
-    Promise.allSettled([ promise2]).then(res => {
+    Promise.allSettled([promise2]).then(res => {
       debugger;
       if (res[0].status == 'fulfilled') {
         let json = res[0].value;
@@ -205,7 +205,7 @@ function treeNodeSearch(treeData, search = '', filed = 'groupName', childField =
 
 //更新节点名称
 function updateTreeName(nodes, targetValue, newTxt, filed = 'groupName', childField = "children", valueFiled = "id") {
-  let updateTree=function(){
+  let updateTree = function () {
     for (let node of nodes) {
       // 检查当前节点是否匹配value
       if (node[valueFiled] === targetValue) {
@@ -224,7 +224,7 @@ function updateTreeName(nodes, targetValue, newTxt, filed = 'groupName', childFi
     return false; // 未找到匹配的节点
   }
 
-  let requestUpdate=function(){
+  let requestUpdate = function () {
     let promise2 = new Promise((resolve, reject) => {
       request({
         url: '/api/device/group',
@@ -323,10 +323,10 @@ function delTreeNode(nodes, targetValue, childField = "children", valueFiled = "
     return false; // 未找到匹配的节点
   }
 
-  let requestDel=function(){
+  let requestDel = function () {
     let promise2 = new Promise((resolve, reject) => {
       request({
-        url: '/api/device/group/'+targetValue,
+        url: '/api/device/group/' + targetValue,
         method: 'delete',
 
       }).then((res) => {
@@ -345,21 +345,20 @@ function delTreeNode(nodes, targetValue, childField = "children", valueFiled = "
 
 //获取某个节点的设备数据
 function getNodeDevice(para) {
-
-
-
-
   let promise2 = new Promise((resolve, reject) => {
     request({
       url: '/api/device',
       method: 'get',
-      params:{
+      params: {
         "deviceStatus": 1,
         "pageNum": para.pageIndex,
         "pageSize": para.pageSize,
         "groupId": para.nodeCode,
+        "communicationMode": para.communicationMode,//通讯方式 0:4G;1:蓝牙
+        "deviceType": para.deviceType,//设备类型
+        "deviceName": para.deviceName
 
-}
+      }
     }).then((res) => {
       resolve(res);
     }).catch((ex) => {
@@ -380,10 +379,10 @@ function getNodeDevice(para) {
 }
 
 //从分组中删除设备
-function groupDelDevice(groupid,deviceIds){
+function groupDelDevice(groupid, deviceIds) {
-  return new Promise((resolve,reject)=>{
+  return new Promise((resolve, reject) => {
     request({
-          url: '/api/device/group/groupUnbind/'+deviceIds,
+      url: '/api/device/group/groupUnbind/' + deviceIds,
       method: 'get',
 
     }).then((res) => {
@@ -395,10 +394,10 @@ function groupDelDevice(groupid,deviceIds){
 }
 
 //将设备移动至分组
-function deviceMoveGroup(groupid,deviceIds){
+function deviceMoveGroup(groupid, deviceIds) {
-  return new Promise((resolve,reject)=>{
+  return new Promise((resolve, reject) => {
     request({
-          url: '/api/device/group/groupId/'+groupid+'/'+deviceIds,
+      url: '/api/device/group/groupId/' + groupid + '/' + deviceIds,
       method: 'get',
 
     }).then((res) => {
@@ -409,6 +408,30 @@ function deviceMoveGroup(groupid,deviceIds){
   });
 }
 
+
+//获取设备类型
+function getDeviceTypeAll(){
+    return new Promise((resolve, reject) => {
+    request({
+      url: '/api/deviceType/all' ,
+      method: 'get',
+
+    }).then((res) => {
+      resolve(res);
+    }).catch((ex) => {
+      reject(ex);
+    });
+  });
+}
+
+//获取通讯方式
+function getNetMode ()  {
+  return request({
+    url: '/api/deviceType/communicationMode',
+    method: 'get'
+  });
+}
+
 export default {
   getTreeData: getTreeData,
   treeNodeSearch: treeNodeSearch,
@@ -416,6 +439,9 @@ export default {
   addTreeNode: addTreeNode,
   delTreeNode: delTreeNode,
   getNodeDevice: getNodeDevice,
-  groupDelDevice:groupDelDevice,
+  groupDelDevice: groupDelDevice,
-  deviceMoveGroup:deviceMoveGroup
+  deviceMoveGroup: deviceMoveGroup,
+  getDeviceTypeAll:getDeviceTypeAll,
+  getNetMode:getNetMode
+
 }

src/views/fys-equipment/group/index.vue

@@ -14,8 +14,8 @@
         <el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick">
           <template #default="{ node, data }">
 
-            <div class="custom-tree-node" :class="checkNode.val==data.id?'active':''">
+            <div class="custom-tree-node" :class="checkNode.val == data.id ? 'active' : ''">
-              <span :class="data.parentId!=null?'':'treeBold'">{{ node.label }}</span>
+              <span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
 
               <div class="iconContent">
 
@@ -43,7 +43,7 @@
         <div class="rightSearch">
           <div class="searchContent">
             <div class="center H100">
-              <input type="text" class="serchTxt" v-model="GjSearchForm.deviceName" />
+              <input type="text" class="serchTxt" v-model="GjSearchForm.deviceName" @input="InputSearch()" />
               <Search class="icon" style="width: 16px;height:16px;" />
             </div>
           </div>
@@ -52,29 +52,27 @@
         </div>
       </div>
 
-      <div class="searchBar" :class="Status.isGjSearch?'':'displayNone'">
+      <div class="searchBar" :class="Status.isGjSearch ? '' : 'displayNone'">
         <div style="margin-top:20px;">
           <el-form class="demo-form-inline" :inline="true" :model="GjSearchForm" label-width="auto"
             style="width: 100%;">
 
             <el-form-item label="设备类型">
-              <el-select v-model="GjSearchForm.deviceType" placeholder="请选择设备类型">
+              <el-select v-model="GjSearchForm.deviceType" placeholder="请选择">
-                <el-option label="650" value="HBY 650" />
+                <el-option v-for="item in deviceTypes" :key="item.value" :label="item.typeName" :value="item.value" />
-                <el-option label="670" value="HBY 670" />
               </el-select>
             </el-form-item>
 
             <el-form-item label="通信方式">
-              <el-select v-model="GjSearchForm.deviceType" placeholder="请选择设备类型">
+              <el-select v-model="GjSearchForm.netMode" placeholder="请选择">
-                <el-option label="650" value="蓝牙" />
+                <el-option label="4G" :value="0" />
-                <el-option label="670" value="4G" />
+                <el-option label="蓝牙" :value="1" />
-                <el-option label="670" value="蓝牙&4G" />
               </el-select>
             </el-form-item>
             <el-form-item>
 
-              <button class="btnSearch">查询</button>
+              <div class="btnSearch" @click="getDeviceList()">查询</div>
-              <button class="btnReset">重置</button>
+              <div class="btnReset" @click="ResetQuery()">重置</div>
             </el-form-item>
 
           </el-form>
@@ -128,7 +126,7 @@
             <el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
               <template #default="scope">
                 <div class="center">
-                  <div class="moveDev" @click="showCheckGroup('item',scope.row)">移动</div>
+                  <div class="moveDev" @click="showCheckGroup('item', scope.row)">移动</div>
                   <div class="delDev" @click="groupDelDevice(scope.row)">删除</div>
                 </div>
 
@@ -148,7 +146,7 @@
     <!-- 提示框 -->
     <el-dialog :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500" center>
       <span>
-        {{Status.confirm.text}}
+        {{ Status.confirm.text }}
       </span>
       <template #footer>
         <div class="dialog-footer">
@@ -167,7 +165,7 @@
         <template #default="{ node, data }">
 
           <div class="custom-tree-node" @click.stop="CheckGroup(data)">
-            <span :class="data.parentId!=null?'':'treeBold'">{{ node.label }}</span>
+            <span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
             <span>选择</span>
           </div>
 
@@ -202,29 +200,30 @@
 </template>
 
 <script setup lang="ts">
-  import { status } from 'nprogress';
+import { status } from 'nprogress';
-  import api from '@/api/equipmentManagement/devicegroup/index';
+import api from '@/api/equipmentManagement/devicegroup/index';
-  import { stat } from 'fs';
+import { stat } from 'fs';
-  import { func } from 'vue-types';
+import { func } from 'vue-types';
+import { deviceTypeAll } from '@/api/equipmentManagement/device';
 
-  interface Device {
+interface Device {
-    deviceName : string;
+  deviceName: string;
-    devicePic : string;
+  devicePic: string;
-    typeName : string;
+  typeName: string;
-    bindingStatus : string;
+  bindingStatus: string;
-  }
+}
 
 
-  var searchTxt = ref('');  //左侧树筛选文本
+var searchTxt = ref('');  //左侧树筛选文本
-  var treeDataOrin = ref([]); //树控件的数据源
+var treeDataOrin = ref([]); //树控件的数据源
-  var grid = ref(null);
+var grid = ref(null);
 
-  var cEdit = ref({ val: "", txt: "" });//当前正在编辑的节点数据
+var cEdit = ref({ val: "", txt: "" });//当前正在编辑的节点数据
 
-  var checkNode = { val: '' };//记录被选中的节点
+var checkNode = { val: '' };//记录被选中的节点
 
-  //全局状态控制
+//全局状态控制
-  var Status = reactive({
+var Status = reactive({
   isEditTreeNode: false,//是否编辑节点
   isGjSearch: false,//是否显示高级筛选
   loading: false,
@@ -238,29 +237,32 @@
   },
   dialogGroupVisible: false,//是否显示选择分组的弹窗
   dialogDeviceVisible: false//是否显示选择设备的弹窗
-  });
+});
-  //页码控件数据
+//页码控件数据
-  var pagin = reactive({
+var pagin = reactive({
   total: 0,
-  });
+});
-  //右边的筛选条件
+//右边的筛选条件
-  var GjSearchForm = reactive({
+var GjSearchForm = reactive({
   deviceName: '',
-    deviceType: '',
+  deviceType: "",
-    netMode: '',
+  netMode: "",
   pageNum: 1,
   pageSize: 10
-  });
+});
+//设备列表
+var deviceList = ref<Device[]>();
+//所有设备类型
+var deviceTypes = reactive([]);
 
-  var deviceList = ref<Device[]>();
+//穿梭框的数据和值
-
+var transfer = reactive({
-  var transfer = reactive({
   value: [],
   data: []
 
-  });
+});
 
-  window.confirm = function (text, OK, cancel, title) {
+window.confirm = function (text, OK, cancel, title) {
   let Cfg = {
     Visible: true,
     title: '提示',
@@ -281,9 +283,9 @@
   }
 
   Status.confirm = Cfg;
-  }
+}
 
-  window.alert = function (text, OK, title) {
+window.alert = function (text, OK, title) {
 
   let Cfg = {
     Visible: true,
@@ -300,9 +302,9 @@
   }
 
   Status.confirm = Cfg;
-  }
+}
 
-  var hideConfirm = function () {
+var hideConfirm = function () {
 
   let Cfg = {
     Visible: false,
@@ -313,43 +315,54 @@
   }
 
   Status.confirm = Cfg;
-  }
+}
 
-  var showloading = function () {
+var showloading = function () {
   window.loadingIndex = ElLoading.service({ fullscreen: true })
 
-  }
+}
 
-  var closeLoading = function () {
+var closeLoading = function () {
   if (window.loadingIndex) {
     window.loadingIndex.close();
   }
-  }
+}
-  var hideloading = closeLoading;
+var hideloading = closeLoading;
-  //查询某个节点的设备
+
-  var getDeviceList = () => {
+function ResetQuery() {
+  GjSearchForm.deviceType = "";
+  GjSearchForm.netMode = "";
+}
+//查询某个节点的设备
+var getDeviceList = () => {
   if (!checkNode.val) {
     pagin.total = 0;
     deviceList.value = [];
     return;
   }
+
   let para = {
     nodeCode: checkNode.val,
     pageIndex: GjSearchForm.pageNum,
-      pageSize: GjSearchForm.pageSize
+    pageSize: GjSearchForm.pageSize,
+    communicationMode: GjSearchForm.netMode,
+    deviceType: GjSearchForm.deviceType,
+    deviceName: GjSearchForm.deviceName
   }
-
+  showloading();
   api.getNodeDevice(para).then((res) => {
     deviceList.value = res.rows;
     pagin.total = res.total;
   }).catch((ex) => {
     console.log("出现了异常", ex);
+  }).finally(() => {
+    hideloading();
   });
 
 
-  }
+}
-  //树控件节点点击事件
+//树控件节点点击事件
-  var handleNodeClick = (node) => {
+var handleNodeClick = (node) => {
   debugger;
   if (checkNode.val == node.id) {
     return;
@@ -357,21 +370,21 @@
   console.log("节点数据：", node.id);
   checkNode.val = node.id;
   getDeviceList();
-  }
+}
 
-  //树控件筛选后显示的数据源
+//树控件筛选后显示的数据源
-  var treeData = computed(() => {
+var treeData = computed(() => {
   let arr = api.treeNodeSearch(treeDataOrin.value, searchTxt.value, 'groupName', 'children');
   return arr;
-  });
+});
 
-  //显示/隐藏高级筛选
+//显示/隐藏高级筛选
-  var ToggleGjSearch = function () {
+var ToggleGjSearch = function () {
   Status.isGjSearch = !Status.isGjSearch;
-  }
+}
 
-  //编辑节点
+//编辑节点
-  var editNode = (node) => {
+var editNode = (node) => {
 
   console.log("编辑节点：", node.data.value);
   cEdit.value.val = node.data.id;
@@ -390,9 +403,9 @@
       completeEdit(node);
     });
   //
-  }
+}
-  //完成编辑
+//完成编辑
-  var completeEdit = (node) => {
+var completeEdit = (node) => {
 
 
   let now = DateFormat(new Date(), "yyyy-MM-dd HH:mm:ss");
@@ -429,17 +442,17 @@
     hideloading();
   });
   Status.isEditTreeNode = false;
-  }
+}
 
-  //放弃编辑
+//放弃编辑
-  var cancelEdit = (node) => {
+var cancelEdit = (node) => {
   cEdit.value.val = "";
   cEdit.value.txt = "";
   Status.isEditTreeNode = false;
-  }
+}
 
-  //删除节点
+//删除节点
-  var delNode = (node) => {
+var delNode = (node) => {
   debugger;
   if (node.data.children && node.data.children.length > 0) {
     alert("节点包含子节点,不允许删除");
@@ -463,9 +476,9 @@
 
 
 
-  }
+}
 
-  var DateFormat = function (date, format) {
+var DateFormat = function (date, format) {
   if (!date) {
     date = new Date();
   }
@@ -505,10 +518,10 @@
   return format.replace(/(yyyy|MM|dd|HH|mm|ss|SSS|M|d|H|m|s|S)/g, (match) => {
     return formatMap[match];
   });
-  }
+}
 
-  //增加节点
+//增加节点
-  var addNode = (node) => {
+var addNode = (node) => {
   let title = '';
   if (node) {
     console.log("给节点新增子节点：", node.data.id);
@@ -570,45 +583,45 @@
         hideloading();
       });
     });
-  }
+}
 
 
 
 
-  //树控件的自定义属性
+//树控件的自定义属性
-  var defaultProps = {
+var defaultProps = {
   children: 'children',
   label: 'groupName',
   parentId: "parentId"
-  }
+}
 
-  var RowSelectionChange = (tr) => {
+var RowSelectionChange = (tr) => {
   debugger;
   console.log("行选中变化", tr);
   getSelectionRows();
-  };
+};
 
 
 
-  var getSelectionRows = () => {
+var getSelectionRows = () => {
 
   if (grid.value) { // 检查ref是否已正确引用组件实例
     var selectedRows = grid.value.getSelectionRows(); // 获取选中行数据数组
     return selectedRows;
   }
   return [];
-  }
+}
 
 
-  var RefreshTree = function () {
+var RefreshTree = function () {
   api.getTreeData(searchTxt.value).then((res) => {
     treeDataOrin.value = res;
 
   });
-  }
+}
 
-  //从分组中删除设备
+//从分组中删除设备
-  var groupDelDevice = (row) => {
+var groupDelDevice = (row) => {
 
   let rows = [];//
   if (!row) {
@@ -637,9 +650,9 @@
     });
   }, null, "警告");
 
-  }
+}
 
-  var showDevice = () => {
+var showDevice = () => {
   Status.dialogDeviceVisible = true;
   //获取所有
   let promise1 = api.getNodeDevice({
@@ -654,8 +667,8 @@
     nodeCode: checkNode.val
   });
 
-    cGroupAndDevice.deviceIds=[];
+  cGroupAndDevice.deviceIds = [];
-    transfer.value=[];
+  transfer.value = [];
 
   Promise.allSettled([promise1, promise2]).then(res => {
 
@@ -667,7 +680,7 @@
         let arr = res1.rows.map(item => ({
           key: item.deviceId,
           label: item.deviceName,
-            disabled:item.groupId && item.groupId==checkNode.val?false:item.groupId ?true:false
+          disabled: item.groupId && item.groupId == checkNode.val ? false : item.groupId ? true : false
         }));
 
         transfer.data = arr;
@@ -692,40 +705,40 @@
 
 
 
-  }
+}
 
- //确认选择这些设备
+//确认选择这些设备
-  var OKCheckDevice = () => {
+var OKCheckDevice = () => {
 
-debugger;
+  debugger;
 
-    let arr=transfer.value.map(item=>({
+  let arr = transfer.value.map(item => ({
-      deviceId:item
+    deviceId: item
   }));
-    if(arr.length==0){
+  if (arr.length == 0) {
     alert("未选择任何设备");
     return;
   }
   hideDevice();
-    cGroupAndDevice.deviceIds=arr;
+  cGroupAndDevice.deviceIds = arr;
-    cGroupAndDevice.groupid=checkNode.val;
+  cGroupAndDevice.groupid = checkNode.val;
-    deviceMoveGroup(cGroupAndDevice.groupid,cGroupAndDevice.deviceIds);
+  deviceMoveGroup(cGroupAndDevice.groupid, cGroupAndDevice.deviceIds);
-  }
+}
 
-  //隐藏选择设备
+//隐藏选择设备
-  var hideDevice = () => {
+var hideDevice = () => {
   Status.dialogDeviceVisible = false;
 
-  }
+}
 
-  var cGroupAndDevice={
+var cGroupAndDevice = {
-    groupid:'',
+  groupid: '',
-    deviceIds:[]
+  deviceIds: []
-  };
+};
 //显示选择分组
-  var showCheckGroup = (type,row) => {
+var showCheckGroup = (type, row) => {
   let rows = [row];
-    if(type=='check'){
+  if (type == 'check') {
     rows = getSelectionRows();
   }
 
@@ -733,40 +746,40 @@ debugger;
     alert("请选择要移动的设备");
     return;
   }
-    cGroupAndDevice.deviceIds=rows;
+  cGroupAndDevice.deviceIds = rows;
   Status.dialogGroupVisible = true;
 
 
-    cGroupAndDevice.groupid="";
+  cGroupAndDevice.groupid = "";
-  }
+}
-  //选中了某个分组
+//选中了某个分组
-  var CheckGroup = (item) => {
+var CheckGroup = (item) => {
 
-    cGroupAndDevice.groupid=item.id;
+  cGroupAndDevice.groupid = item.id;
-  }
+}
 
-  //确定选中某个分组
+//确定选中某个分组
-  var OkCheckGroup = () => {
+var OkCheckGroup = () => {
   if (!cGroupAndDevice.groupid) {
     alert("请先选择分组");
     return;
   }
   CancelCheckGroup();
-    deviceMoveGroup(cGroupAndDevice.groupid,cGroupAndDevice.deviceIds);
+  deviceMoveGroup(cGroupAndDevice.groupid, cGroupAndDevice.deviceIds);
-  }
+}
-  //隐藏选择分组
+//隐藏选择分组
-  var CancelCheckGroup = () => {
+var CancelCheckGroup = () => {
   Status.dialogGroupVisible = false
-  }
+}
-  //将设备移动至分组
+//将设备移动至分组
-  var deviceMoveGroup = (groupid,row) => {
+var deviceMoveGroup = (groupid, row) => {
   let rows = [];//
   if (!row) {
     rows = getSelectionRows();
   } else {
-      if(Array.isArray(row)){
+    if (Array.isArray(row)) {
       rows = row;
-      }else{
+    } else {
       rows = [row];
     }
 
@@ -791,17 +804,35 @@ debugger;
     hideloading();
   });
   // }, null, "警告");
+}
+
+
+  let timer;
+  function InputSearch() {
+    clearTimeout(timer);
+    // 等待 500ms 无输入后执行查询
+    timer = setTimeout(() => {
+      getDeviceList();
+    }, 500);
   }
 
-
+onMounted(() => {
-  onMounted(() => {
   RefreshTree();
+  api.getDeviceTypeAll().then((res) => {
+    if (res.code == 200) {
+      deviceTypes = res.data.map(item => ({
+        value: item.deviceTypeId,
+        typeName: item.typeName
+      }))
+    }
   });
+
+});
 </script>
 
 
 <style lang="scss" scoped>
-  .main .searchBar .btnReset {
+.main .searchBar .btnReset {
   width: 76px;
   height: 32px;
   border-radius: 4px;
@@ -814,10 +845,10 @@ debugger;
   line-height: 32px;
   letter-spacing: 0px;
   border: 1px solid rgb(2, 124, 251);
+  cursor: pointer;
+}
 
-  }
+.main .searchBar .btnSearch {
-
-  .main .searchBar .btnSearch {
   /* 组合 454 */
   width: 76px;
   height: 32px;
@@ -832,9 +863,10 @@ debugger;
   letter-spacing: 0px;
   border: none;
   margin-right: 15px;
-  }
+  cursor: pointer;
+}
 
-  .main .searchBar {
+.main .searchBar {
   width: 100%;
   height: 50px;
   display: flex;
@@ -843,9 +875,9 @@ debugger;
   align-content: center;
   justify-content: space-between;
   align-items: center;
-  }
+}
 
-  .main .toolBar .rightSearch {
+.main .toolBar .rightSearch {
   width: 295px;
   display: flex;
   flex-direction: row;
@@ -853,10 +885,10 @@ debugger;
   align-content: center;
   justify-content: space-between;
   align-items: center;
-  }
+}
 
 
-  .main .toolBar .gjSearch {
+.main .toolBar .gjSearch {
   /* 矩形 155 */
   width: 85px;
   height: 32px;
@@ -864,30 +896,30 @@ debugger;
   border: 1px solid rgba(2, 124, 251, 1);
   border-radius: 4px;
   color: rgba(2, 124, 251, 1);
-
+  cursor: pointer;
   font-family: Noto Sans SC;
   font-size: 14px;
   font-weight: 400;
   line-height: 32px;
   letter-spacing: 0px;
   text-align: center;
-  }
+}
 
-  .main .toolBar .searchContent {
+.main .toolBar .searchContent {
   width: 200px;
   height: 32px;
   border: 1px solid rgba(189, 198, 215, 1);
   border-radius: 4px;
-  }
+}
 
-  .main .toolBar .serchTxt {
+.main .toolBar .serchTxt {
   border: none;
   width: 175px;
   height: 100%;
 
-  }
+}
 
-  .main .toolBar .btnAdd {
+.main .toolBar .btnAdd {
   background-color: #027CFB;
   color: #FFFFFF;
   width: 105px;
@@ -898,10 +930,10 @@ debugger;
   font-weight: 400;
   line-height: 32px;
   letter-spacing: 0px;
+  cursor: pointer;
+}
 
-  }
+.main .toolBar {
-
-  .main .toolBar {
   width: 100%;
   height: 35px;
   overflow: hidden;
@@ -913,25 +945,25 @@ debugger;
   justify-content: space-between;
   align-items: flex-start;
   border-bottom: 1px solid rgba(235, 238, 248, 1);
-  }
+}
 
-  .nodeInput {
+.nodeInput {
   height: 30px;
   line-height: 30px;
   border: 1px solid rgb(189, 198, 215);
   border-radius: 4px;
   box-sizing: border-box;
-  }
+}
 
-  .red {
+.red {
   color: #FF0000;
-  }
+}
 
-  .green {
+.green {
   color: #0ed50e;
-  }
+}
 
-  .custom-tree-node {
+.custom-tree-node {
   width: 100%;
   height: 40px;
   line-height: 40px;
@@ -941,14 +973,14 @@ debugger;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  }
+}
 
-  .custom-tree-node.active{
+.custom-tree-node.active {
   background: rgba(228, 234, 240, 0.4) !important;
-  }
+}
 
 
-  .custom-tree-node .iconContent {
+.custom-tree-node .iconContent {
   width: 60px;
   height: 100%;
 
@@ -960,38 +992,38 @@ debugger;
   justify-content: space-evenly;
   align-items: center;
 
-  }
+}
 
-  .custom-tree-node .iconContent .icon {
+.custom-tree-node .iconContent .icon {
   width: 18px;
   height: 18px;
   visibility: hidden;
-  }
+}
 
-  .custom-tree-node-Edit .iconContent .icon {
+.custom-tree-node-Edit .iconContent .icon {
   visibility: visible !important;
-  }
+}
 
-  .custom-tree-node:hover .iconContent .icon {
+.custom-tree-node:hover .iconContent .icon {
   visibility: visible;
-  }
+}
 
-  .leftTree .treeBold {
+.leftTree .treeBold {
   font-weight: 700;
-  }
+}
 
-  .leftTree .treeContent::-webkit-scrollbar {
+.leftTree .treeContent::-webkit-scrollbar {
   display: none;
-  }
+}
 
-  .leftTree .treeContent {
+.leftTree .treeContent {
   margin-top: 10px;
   height: calc(100% - 95px);
   overflow: scroll;
   box-sizing: border-box;
-  }
+}
 
-  .leftTree .Search .txt::placeholder {
+.leftTree .Search .txt::placeholder {
   color: rgba(189, 198, 215, 1);
 
   font-family: Microsoft YaHei;
@@ -999,9 +1031,9 @@ debugger;
   font-weight: 400;
   letter-spacing: 0px;
   text-align: left;
-  }
+}
 
-  .leftTree .Search .txt {
+.leftTree .Search .txt {
   width: 100%;
   height: 100%;
   border: none;
@@ -1009,18 +1041,18 @@ debugger;
   text-indent: 5px;
   line-height: 36px;
   color: rgb(96, 98, 102);
-  }
+}
 
-  .leftTree .Search {
+.leftTree .Search {
   width: 100%;
   margin-top: 10px;
   height: 36px;
   border: 1px solid rgba(189, 198, 215, 1);
   border-radius: 4px;
   box-sizing: border-box;
-  }
+}
 
-  .leftTree .head .nodeEdit {
+.leftTree .head .nodeEdit {
   color: rgba(2, 124, 251, 1);
   cursor: pointer;
   font-family: Microsoft YaHei;
@@ -1029,9 +1061,9 @@ debugger;
   line-height: 18px;
   letter-spacing: 0px;
   text-align: left;
-  }
+}
 
-  .leftTree .head .title {
+.leftTree .head .title {
   color: rgba(56, 64, 79, 1);
 
   font-family: Microsoft YaHei;
@@ -1040,9 +1072,9 @@ debugger;
   line-height: 18px;
   letter-spacing: 0px;
   text-align: left;
-  }
+}
 
-  .leftTree .head {
+.leftTree .head {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -1052,43 +1084,42 @@ debugger;
   width: 100%;
   height: 40px;
   border-bottom: 1px solid rgba(235, 238, 248, 1);
-  }
+}
 
-  .fleft {
+.fleft {
   float: left;
-  }
+}
 
-  .fright {
+.fright {
   float: right;
-  }
+}
 
-  .clear {
+.clear {
   clear: both;
-  }
+}
 
-  .center {
+.center {
-    display: flex
+  display: flex;
-;
   flex-direction: row;
   flex-wrap: nowrap;
   align-content: center;
   align-items: center;
   justify-content: center;
-  }
+}
 
-  .displayNone {
+.displayNone {
   display: none !important;
-  }
+}
 
-  input:focus {
+input:focus {
   outline: none;
-  }
+}
 
-  .H100 {
+.H100 {
   height: 100%;
-  }
+}
 
-  .content {
+.content {
   width: 100%;
   min-height: calc(100vh - 84px);
   height: calc(100vh - 84px);
@@ -1097,9 +1128,9 @@ debugger;
   box-sizing: border-box;
   padding: 8px 20px;
   font-family: 'Microsoft YaHei';
-  }
+}
 
-  .leftTree {
+.leftTree {
   width: 18%;
   height: 100%;
   border-radius: 4px;
@@ -1108,9 +1139,9 @@ debugger;
   margin-right: 15px;
   box-sizing: border-box;
   padding: 12px 13px;
-  }
+}
 
-  .main {
+.main {
   width: calc(82% - 15px);
   height: 100%;
   border-radius: 4px;
@@ -1118,9 +1149,9 @@ debugger;
   background: rgba(255, 255, 255, 1);
   box-sizing: border-box;
   padding: 15px;
-  }
+}
 
-  .moveDev {
+.moveDev {
   margin-right: 10px;
   color: rgba(2, 124, 251, 1);
 
@@ -1128,9 +1159,9 @@ debugger;
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0px;
-  }
+}
 
-  .delDev {
+.delDev {
   color: rgba(224, 52, 52, 1);
 
   font-family: Noto Sans SC;
@@ -1139,13 +1170,13 @@ debugger;
 
   letter-spacing: 0px;
 
-  }
-
-  .gridTool {
-    padding-bottom: 10px;
-  }
-:deep .el-tree-node__content{
-  height: auto !important;
 }
 
+.gridTool {
+  padding-bottom: 10px;
+}
+
+:deep .el-tree-node__content {
+  height: auto !important;
+}
 </style>