From dd5596fe1cc5a4356d5891d2fde7c66c949a099b Mon Sep 17 00:00:00 2001
From: liub <itliubiao@qq.com>
Date: Tue, 2 Sep 2025 09:46:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E5=88=86=E7=BB=84=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E6=B7=BB=E5=8A=A0=E9=AB=98=E7=BA=A7=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=EF=BC=8C=E4=B8=8A=E6=96=B9=E6=96=87=E6=9C=AC=E6=A1=86?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E5=90=8E=E7=9A=84=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../equipmentManagement/devicegroup/index.ts  |   98 +-
 src/views/fys-equipment/group/index.vue       | 1679 +++++++++--------
 2 files changed, 917 insertions(+), 860 deletions(-)

diff --git a/src/api/equipmentManagement/devicegroup/index.ts b/src/api/equipmentManagement/devicegroup/index.ts
index a43d70c..42d9216 100644
--- a/src/api/equipmentManagement/devicegroup/index.ts
+++ b/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:{
-  "deviceStatus": 1,
-  "pageNum": para.pageIndex,
-  "pageSize": para.pageSize,
-  "groupId": para.nodeCode,
+      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,32 +379,56 @@ function getNodeDevice(para) {
 }
 
 //从分组中删除设备
-function groupDelDevice(groupid,deviceIds){
-  return new Promise((resolve,reject)=>{
+function groupDelDevice(groupid, deviceIds) {
+  return new Promise((resolve, reject) => {
     request({
-          url: '/api/device/group/groupUnbind/'+deviceIds,
-          method: 'get',
+      url: '/api/device/group/groupUnbind/' + deviceIds,
+      method: 'get',
 
-        }).then((res) => {
-          resolve(res);
-        }).catch((ex) => {
-          reject(ex);
-        });
+    }).then((res) => {
+      resolve(res);
+    }).catch((ex) => {
+      reject(ex);
+    });
   });
 }
 
 //将设备移动至分组
-function deviceMoveGroup(groupid,deviceIds){
-  return new Promise((resolve,reject)=>{
+function deviceMoveGroup(groupid, deviceIds) {
+  return new Promise((resolve, reject) => {
     request({
-          url: '/api/device/group/groupId/'+groupid+'/'+deviceIds,
-          method: 'get',
+      url: '/api/device/group/groupId/' + groupid + '/' + deviceIds,
+      method: 'get',
 
-        }).then((res) => {
-          resolve(res);
-        }).catch((ex) => {
-          reject(ex);
-        });
+    }).then((res) => {
+      resolve(res);
+    }).catch((ex) => {
+      reject(ex);
+    });
+  });
+}
+
+
+//获取设备类型
+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'
   });
 }
 
@@ -416,6 +439,9 @@ export default {
   addTreeNode: addTreeNode,
   delTreeNode: delTreeNode,
   getNodeDevice: getNodeDevice,
-  groupDelDevice:groupDelDevice,
-  deviceMoveGroup:deviceMoveGroup
+  groupDelDevice: groupDelDevice,
+  deviceMoveGroup: deviceMoveGroup,
+  getDeviceTypeAll:getDeviceTypeAll,
+  getNetMode:getNetMode
+
 }
diff --git a/src/views/fys-equipment/group/index.vue b/src/views/fys-equipment/group/index.vue
index 1c78ecb..5ef3f11 100644
--- a/src/views/fys-equipment/group/index.vue
+++ b/src/views/fys-equipment/group/index.vue
@@ -14,9 +14,9 @@
         <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':''">
-              <span :class="data.parentId!=null?'':'treeBold'">{{ node.label }}</span>
-             
+            <div class="custom-tree-node" :class="checkNode.val == data.id ? 'active' : ''">
+              <span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
+
               <div class="iconContent">
 
                 <Edit class="icon" @click.stop="editNode(node)" />
@@ -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-option label="650" value="HBY 650" />
-                <el-option label="670" value="HBY 670" />
+              <el-select v-model="GjSearchForm.deviceType" placeholder="请选择">
+                <el-option v-for="item in deviceTypes" :key="item.value" :label="item.typeName" :value="item.value" />
               </el-select>
             </el-form-item>
 
             <el-form-item label="通信方式">
-              <el-select v-model="GjSearchForm.deviceType" placeholder="请选择设备类型">
-                <el-option label="650" value="蓝牙" />
-                <el-option label="670" value="4G" />
-                <el-option label="670" value="蓝牙&4G" />
+              <el-select v-model="GjSearchForm.netMode" placeholder="请选择">
+                <el-option label="4G" :value="0" />
+                <el-option label="蓝牙" :value="1" />
               </el-select>
             </el-form-item>
             <el-form-item>
 
-              <button class="btnSearch">查询</button>
-              <button class="btnReset">重置</button>
+              <div class="btnSearch" @click="getDeviceList()">查询</div>
+              <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>
 
@@ -187,12 +185,12 @@
       <el-transfer v-model="transfer.value" :data="transfer.data" :filterable="true" />
 
       <div class="center" style="margin-top: 10px;">
-      <el-button type="primary" @click="OKCheckDevice()">
-        确定
-      </el-button>
-      <el-button type="info" @click="hideDevice()">
-        取消
-      </el-button>
+        <el-button type="primary" @click="OKCheckDevice()">
+          确定
+        </el-button>
+        <el-button type="info" @click="hideDevice()">
+          取消
+        </el-button>
       </div>
 
 
@@ -202,950 +200,983 @@
 </template>
 
 <script setup lang="ts">
-  import { status } from 'nprogress';
-  import api from '@/api/equipmentManagement/devicegroup/index';
-  import { stat } from 'fs';
-  import { func } from 'vue-types';
+import { status } from 'nprogress';
+import api from '@/api/equipmentManagement/devicegroup/index';
+import { stat } from 'fs';
+import { func } from 'vue-types';
+import { deviceTypeAll } from '@/api/equipmentManagement/device';
 
-  interface Device {
-    deviceName : string;
-    devicePic : string;
-    typeName : string;
-    bindingStatus : string;
-  }
+interface Device {
+  deviceName: string;
+  devicePic: string;
+  typeName: string;
+  bindingStatus: string;
+}
 
 
-  var searchTxt = ref('');  //左侧树筛选文本
-  var treeDataOrin = ref([]); //树控件的数据源
-  var grid = ref(null);
+var searchTxt = ref('');  //左侧树筛选文本
+var treeDataOrin = ref([]); //树控件的数据源
+var grid = ref(null);
 
-  var cEdit = ref({ val: "", txt: "" });//当前正在编辑的节点数据
+var cEdit = ref({ val: "", txt: "" });//当前正在编辑的节点数据
 
-  var checkNode = { val: '' };//记录被选中的节点
+var checkNode = { val: '' };//记录被选中的节点
 
-  //全局状态控制
-  var Status = reactive({
-    isEditTreeNode: false,//是否编辑节点
-    isGjSearch: false,//是否显示高级筛选
-    loading: false,
-    confirm: {
-      Visible: false,
-      title: '',
-      text: '',
-      cancelCallback: '',
-      OkCallback: '',
-      showCancel: true
+//全局状态控制
+var Status = reactive({
+  isEditTreeNode: false,//是否编辑节点
+  isGjSearch: false,//是否显示高级筛选
+  loading: false,
+  confirm: {
+    Visible: false,
+    title: '',
+    text: '',
+    cancelCallback: '',
+    OkCallback: '',
+    showCancel: true
+  },
+  dialogGroupVisible: false,//是否显示选择分组的弹窗
+  dialogDeviceVisible: false//是否显示选择设备的弹窗
+});
+//页码控件数据
+var pagin = reactive({
+  total: 0,
+});
+//右边的筛选条件
+var GjSearchForm = reactive({
+  deviceName: '',
+  deviceType: "",
+  netMode: "",
+  pageNum: 1,
+  pageSize: 10
+});
+//设备列表
+var deviceList = ref<Device[]>();
+//所有设备类型
+var deviceTypes = reactive([]);
+
+//穿梭框的数据和值
+var transfer = reactive({
+  value: [],
+  data: []
+
+});
+
+window.confirm = function (text, OK, cancel, title) {
+  let Cfg = {
+    Visible: true,
+    title: '提示',
+    text: text ? text : '此操作不可逆，您确定这样做吗？',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (OK) {
+        OK();
+      }
     },
-    dialogGroupVisible: false,//是否显示选择分组的弹窗
-    dialogDeviceVisible: false//是否显示选择设备的弹窗
-  });
-  //页码控件数据
-  var pagin = reactive({
-    total: 0,
-  });
-  //右边的筛选条件
-  var GjSearchForm = reactive({
-    deviceName: '',
-    deviceType: '',
-    netMode: '',
-    pageNum: 1,
-    pageSize: 10
-  });
-
-  var deviceList = ref<Device[]>();
-
-  var transfer = reactive({
-    value: [],
-    data: []
-
-  });
-
-  window.confirm = function (text, OK, cancel, title) {
-    let Cfg = {
-      Visible: true,
-      title: '提示',
-      text: text ? text : '此操作不可逆，您确定这样做吗？',
-      OkCallback: () => {
-        Status.confirm.Visible = false;
-        if (OK) {
-          OK();
-        }
-      },
-      showCancel: true,
-      cancelCallback: () => {
-        Status.confirm.Visible = false;
-        if (cancel) {
-          cancel();
-        }
+    showCancel: true,
+    cancelCallback: () => {
+      Status.confirm.Visible = false;
+      if (cancel) {
+        cancel();
       }
     }
-
-    Status.confirm = Cfg;
   }
 
-  window.alert = function (text, OK, title) {
+  Status.confirm = Cfg;
+}
 
-    let Cfg = {
-      Visible: true,
-      title: title ? title : '提示',
-      text: text ? text : '不符合规则',
-      OkCallback: () => {
-        Status.confirm.Visible = false;
-        if (OK) {
-          OK();
-        }
-      },
-      showCancel: false,
-      cancelCallback: null
-    }
+window.alert = function (text, OK, title) {
 
-    Status.confirm = Cfg;
+  let Cfg = {
+    Visible: true,
+    title: title ? title : '提示',
+    text: text ? text : '不符合规则',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (OK) {
+        OK();
+      }
+    },
+    showCancel: false,
+    cancelCallback: null
   }
 
-  var hideConfirm = function () {
+  Status.confirm = Cfg;
+}
 
-    let Cfg = {
-      Visible: false,
-      title: '提示',
-      text: "",
-      cancelCallback: null,
-      OkCallback: null
-    }
+var hideConfirm = function () {
 
-    Status.confirm = Cfg;
+  let Cfg = {
+    Visible: false,
+    title: '提示',
+    text: "",
+    cancelCallback: null,
+    OkCallback: null
   }
 
-  var showloading = function () {
-    window.loadingIndex = ElLoading.service({ fullscreen: true })
+  Status.confirm = Cfg;
+}
 
+var showloading = function () {
+  window.loadingIndex = ElLoading.service({ fullscreen: true })
+
+}
+
+var closeLoading = function () {
+  if (window.loadingIndex) {
+    window.loadingIndex.close();
+  }
+}
+var hideloading = closeLoading;
+
+function ResetQuery() {
+  GjSearchForm.deviceType = "";
+  GjSearchForm.netMode = "";
+}
+//查询某个节点的设备
+var getDeviceList = () => {
+  if (!checkNode.val) {
+    pagin.total = 0;
+    deviceList.value = [];
+    return;
   }
 
-  var closeLoading = function () {
-    if (window.loadingIndex) {
-      window.loadingIndex.close();
-    }
+  let para = {
+    nodeCode: checkNode.val,
+    pageIndex: GjSearchForm.pageNum,
+    pageSize: GjSearchForm.pageSize,
+    communicationMode: GjSearchForm.netMode,
+    deviceType: GjSearchForm.deviceType,
+    deviceName: GjSearchForm.deviceName
   }
-  var hideloading = closeLoading;
-  //查询某个节点的设备
-  var getDeviceList = () => {
-    if (!checkNode.val) {
-      pagin.total = 0;
-      deviceList.value = [];
-      return;
-    }
-    let para = {
-      nodeCode: checkNode.val,
-      pageIndex: GjSearchForm.pageNum,
-      pageSize: GjSearchForm.pageSize
-    }
-
-    api.getNodeDevice(para).then((res) => {
-      deviceList.value = res.rows;
-      pagin.total = res.total;
-    }).catch((ex) => {
-      console.log("出现了异常", ex);
-    });
-
-
-  }
-  //树控件节点点击事件
-  var handleNodeClick = (node) => {
-    debugger;
-    if (checkNode.val == node.id) {
-      return;
-    }
-    console.log("节点数据：", node.id);
-    checkNode.val = node.id;
-    getDeviceList();
-  }
-
-  //树控件筛选后显示的数据源
-  var treeData = computed(() => {
-    let arr = api.treeNodeSearch(treeDataOrin.value, searchTxt.value, 'groupName', 'children');
-    return arr;
+  showloading();
+  api.getNodeDevice(para).then((res) => {
+    deviceList.value = res.rows;
+    pagin.total = res.total;
+  }).catch((ex) => {
+    console.log("出现了异常", ex);
+  }).finally(() => {
+    hideloading();
   });
 
-  //显示/隐藏高级筛选
-  var ToggleGjSearch = function () {
-    Status.isGjSearch = !Status.isGjSearch;
+
+}
+//树控件节点点击事件
+var handleNodeClick = (node) => {
+  debugger;
+  if (checkNode.val == node.id) {
+    return;
   }
+  console.log("节点数据：", node.id);
+  checkNode.val = node.id;
+  getDeviceList();
+}
 
-  //编辑节点
-  var editNode = (node) => {
+//树控件筛选后显示的数据源
+var treeData = computed(() => {
+  let arr = api.treeNodeSearch(treeDataOrin.value, searchTxt.value, 'groupName', 'children');
+  return arr;
+});
 
-    console.log("编辑节点：", node.data.value);
-    cEdit.value.val = node.data.id;
-    cEdit.value.txt = node.data.groupName;
-    Status.isEditTreeNode = true;
+//显示/隐藏高级筛选
+var ToggleGjSearch = function () {
+  Status.isGjSearch = !Status.isGjSearch;
+}
+
+//编辑节点
+var editNode = (node) => {
+
+  console.log("编辑节点：", node.data.value);
+  cEdit.value.val = node.data.id;
+  cEdit.value.txt = node.data.groupName;
+  Status.isEditTreeNode = true;
 
 
-    ElMessageBox.prompt('请输入名称', '编辑分组', {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      inputValue: node.data.groupName
-    })
-      .then(({ value }) => {
+  ElMessageBox.prompt('请输入名称', '编辑分组', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    inputValue: node.data.groupName
+  })
+    .then(({ value }) => {
 
-        cEdit.value.txt = value;
-        completeEdit(node);
-      });
-    //
+      cEdit.value.txt = value;
+      completeEdit(node);
+    });
+  //
+}
+//完成编辑
+var completeEdit = (node) => {
+
+
+  let now = DateFormat(new Date(), "yyyy-MM-dd HH:mm:ss");
+
+  let newNode =
+  {
+    "createDept": node.data.createDept,//创建部门
+    "createBy": node.data.createBy,//创建者
+    "createTime": now,//创建时间
+    "updateBy": node.data.updateBy,//更新者
+    "updateTime": now,//更新时间
+    "params": {
+      "additionalProp1": "",
+      "additionalProp2": "",
+      "additionalProp3": ""
+    },
+    "id": node.data.id,//主键ID
+    "groupName": cEdit.value.txt,//分组名称
+    "status": 1,//状态：0-禁用，1-正常
+    "parentId": node.data.parentId,//父分组ID
+    "fullPath": node.data.fullPath,//完整分组路径
+    "isDeleted": 0//删除标记：0-未删除，1-已删除
+  };
+
+  showloading();
+  api.updateTreeName(treeDataOrin.value, newNode, cEdit.value.txt).then((res) => {
+    if (res.code == 200) {
+      alert("操作成功");
+      RefreshTree();
+    } else {
+      alert(res.msg);
+    }
+  }).finally(() => {
+    hideloading();
+  });
+  Status.isEditTreeNode = false;
+}
+
+//放弃编辑
+var cancelEdit = (node) => {
+  cEdit.value.val = "";
+  cEdit.value.txt = "";
+  Status.isEditTreeNode = false;
+}
+
+//删除节点
+var delNode = (node) => {
+  debugger;
+  if (node.data.children && node.data.children.length > 0) {
+    alert("节点包含子节点,不允许删除");
+    return;
   }
-  //完成编辑
-  var completeEdit = (node) => {
+  confirm("您确认删除’" + node.data.groupName + "’节点吗", () => {
+    debugger;
+    hideConfirm();
 
-
-    let now = DateFormat(new Date(), "yyyy-MM-dd HH:mm:ss");
-
-    let newNode =
-      {
-        "createDept": node.data.createDept,//创建部门
-        "createBy": node.data.createBy,//创建者
-        "createTime": now,//创建时间
-        "updateBy": node.data.updateBy,//更新者
-        "updateTime": now,//更新时间
-        "params": {
-          "additionalProp1": "",
-          "additionalProp2": "",
-          "additionalProp3": ""
-        },
-        "id": node.data.id,//主键ID
-        "groupName": cEdit.value.txt,//分组名称
-        "status": 1,//状态：0-禁用，1-正常
-        "parentId": node.data.parentId,//父分组ID
-        "fullPath": node.data.fullPath,//完整分组路径
-        "isDeleted": 0//删除标记：0-未删除，1-已删除
-      };
-
-    showloading();
-    api.updateTreeName(treeDataOrin.value, newNode, cEdit.value.txt).then((res) => {
+    api.delTreeNode(treeDataOrin.value, node.data.id).then((res) => {
       if (res.code == 200) {
         alert("操作成功");
         RefreshTree();
       } else {
         alert(res.msg);
       }
-    }).finally(() => {
-      hideloading();
     });
-    Status.isEditTreeNode = false;
+  }, () => {
+    hideConfirm();
+  });
+
+
+
+}
+
+var DateFormat = function (date, format) {
+  if (!date) {
+    date = new Date();
+  }
+  if (!format) {
+    format = 'yyyy-MM-dd HH:mm:ss';
+  }
+  // 处理参数默认值
+  if (typeof date === 'string' || typeof date === 'number') {
+    date = new Date(date);
+  }
+  date = date instanceof Date ? date : new Date();
+  format = format || 'yyyy-MM-dd';
+
+  // 检查日期是否有效
+  if (isNaN(date.getTime())) {
+    return 'Invalid Date';
   }
 
-  //放弃编辑
-  var cancelEdit = (node) => {
-    cEdit.value.val = "";
-    cEdit.value.txt = "";
-    Status.isEditTreeNode = false;
-  }
+  // 定义格式化映射
+  const formatMap = {
+    'yyyy': date.getFullYear(),
+    'MM': String(date.getMonth() + 1).padStart(2, '0'),
+    'dd': String(date.getDate()).padStart(2, '0'),
+    'HH': String(date.getHours()).padStart(2, '0'),
+    'mm': String(date.getMinutes()).padStart(2, '0'),
+    'ss': String(date.getSeconds()).padStart(2, '0'),
+    'SSS': String(date.getMilliseconds()).padStart(3, '0'),
+    'M': date.getMonth() + 1,
+    'd': date.getDate(),
+    'H': date.getHours(),
+    'm': date.getMinutes(),
+    's': date.getSeconds(),
+    'S': date.getMilliseconds()
+  };
 
-  //删除节点
-  var delNode = (node) => {
-    debugger;
-    if (node.data.children && node.data.children.length > 0) {
-      alert("节点包含子节点,不允许删除");
-      return;
-    }
-    confirm("您确认删除’" + node.data.groupName + "’节点吗", () => {
+  // 替换格式字符串中的占位符
+  return format.replace(/(yyyy|MM|dd|HH|mm|ss|SSS|M|d|H|m|s|S)/g, (match) => {
+    return formatMap[match];
+  });
+}
+
+//增加节点
+var addNode = (node) => {
+  let title = '';
+  if (node) {
+    console.log("给节点新增子节点：", node.data.id);
+    title = '添加子节点';
+  }
+  else {
+    console.log("新增初级节点")
+    title = '添加根节点'
+  }
+  let val = new Date().getTime();
+  // let newNode = { value: val, txt: '' };
+  let now = DateFormat(new Date(), "yyyy-MM-dd HH:mm:ss");
+
+
+
+  ElMessageBox.prompt('请输入名称', title, {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消'
+
+  })
+    .then(({ value }) => {
       debugger;
-      hideConfirm();
+      if (!value) {
+        alert("请输入分组名称");
+        return;
+      }
+      let newNode =
+      {
+        "createDept": 0,//创建部门
+        "createBy": 0,//创建者
+        "createTime": now,//创建时间
+        "updateBy": 0,//更新者
+        "updateTime": now,//更新时间
+        "params": {
+          "additionalProp1": "",
+          "additionalProp2": "",
+          "additionalProp3": ""
+        },
+        "id": null,//主键ID
+        "groupName": value,//分组名称
+        "status": 1,//状态：0-禁用，1-正常
+        "parentId": node ? node.data.id : null,//父分组ID
+        "fullPath": val,//完整分组路径
+        "isDeleted": 0,//删除标记：0-未删除，1-已删除
 
-      api.delTreeNode(treeDataOrin.value, node.data.id).then((res) => {
+      };
+      showloading();
+      api.addTreeNode(treeDataOrin.value, newNode, node ? node.data.id : null).then((res) => {
         if (res.code == 200) {
           alert("操作成功");
           RefreshTree();
         } else {
           alert(res.msg);
         }
+      }).catch((ex) => {
+        console.log("ex=", ex);
+
+      }).finally(() => {
+        hideloading();
       });
-    }, () => {
-      hideConfirm();
     });
+}
 
 
 
+
+//树控件的自定义属性
+var defaultProps = {
+  children: 'children',
+  label: 'groupName',
+  parentId: "parentId"
+}
+
+var RowSelectionChange = (tr) => {
+  debugger;
+  console.log("行选中变化", tr);
+  getSelectionRows();
+};
+
+
+
+var getSelectionRows = () => {
+
+  if (grid.value) { // 检查ref是否已正确引用组件实例
+    var selectedRows = grid.value.getSelectionRows(); // 获取选中行数据数组
+    return selectedRows;
+  }
+  return [];
+}
+
+
+var RefreshTree = function () {
+  api.getTreeData(searchTxt.value).then((res) => {
+    treeDataOrin.value = res;
+
+  });
+}
+
+//从分组中删除设备
+var groupDelDevice = (row) => {
+
+  let rows = [];//
+  if (!row) {
+    rows = getSelectionRows();
+  } else {
+    rows = [row];
+  }
+  if (rows.length == 0) {
+    alert("请选择要删除的设备");
+    return;
   }
 
-  var DateFormat = function (date, format) {
-    if (!date) {
-      date = new Date();
-    }
-    if (!format) {
-      format = 'yyyy-MM-dd HH:mm:ss';
-    }
-    // 处理参数默认值
-    if (typeof date === 'string' || typeof date === 'number') {
-      date = new Date(date);
-    }
-    date = date instanceof Date ? date : new Date();
-    format = format || 'yyyy-MM-dd';
 
-    // 检查日期是否有效
-    if (isNaN(date.getTime())) {
-      return 'Invalid Date';
-    }
-
-    // 定义格式化映射
-    const formatMap = {
-      'yyyy': date.getFullYear(),
-      'MM': String(date.getMonth() + 1).padStart(2, '0'),
-      'dd': String(date.getDate()).padStart(2, '0'),
-      'HH': String(date.getHours()).padStart(2, '0'),
-      'mm': String(date.getMinutes()).padStart(2, '0'),
-      'ss': String(date.getSeconds()).padStart(2, '0'),
-      'SSS': String(date.getMilliseconds()).padStart(3, '0'),
-      'M': date.getMonth() + 1,
-      'd': date.getDate(),
-      'H': date.getHours(),
-      'm': date.getMinutes(),
-      's': date.getSeconds(),
-      'S': date.getMilliseconds()
-    };
-
-    // 替换格式字符串中的占位符
-    return format.replace(/(yyyy|MM|dd|HH|mm|ss|SSS|M|d|H|m|s|S)/g, (match) => {
-      return formatMap[match];
+  confirm("此操作不可逆,您确认要进行吗?", () => {
+    showloading();
+    let ids = rows.map(r => r.deviceId).join(",");
+    api.groupDelDevice(checkNode.val, ids).then((res) => {
+      if (res.code == 200) {
+        alert("操作成功");
+        getDeviceList();
+      } else {
+        alert(res.msg);
+      }
+    }).finally(() => {
+      hideloading();
     });
-  }
+  }, null, "警告");
+
+}
+
+var showDevice = () => {
+  Status.dialogDeviceVisible = true;
+  //获取所有
+  let promise1 = api.getNodeDevice({
+    pageIndex: 1,
+    pageSize: 9999,
+    nodeCode: ""
+  });
+  //获取已选中的
+  let promise2 = api.getNodeDevice({
+    pageIndex: 1,
+    pageSize: 9999,
+    nodeCode: checkNode.val
+  });
+
+  cGroupAndDevice.deviceIds = [];
+  transfer.value = [];
+
+  Promise.allSettled([promise1, promise2]).then(res => {
+
+    if (res[0].status == 'fulfilled') {
+      let res1 = res[0].value;
+
+
+      if (res1.code == 200) {
+        let arr = res1.rows.map(item => ({
+          key: item.deviceId,
+          label: item.deviceName,
+          disabled: item.groupId && item.groupId == checkNode.val ? false : item.groupId ? true : false
+        }));
+
+        transfer.data = arr;
+
+      }
 
-  //增加节点
-  var addNode = (node) => {
-    let title = '';
-    if (node) {
-      console.log("给节点新增子节点：", node.data.id);
-      title = '添加子节点';
     }
-    else {
-      console.log("新增初级节点")
-      title = '添加根节点'
-    }
-    let val = new Date().getTime();
-    // let newNode = { value: val, txt: '' };
-    let now = DateFormat(new Date(), "yyyy-MM-dd HH:mm:ss");
 
-
-
-    ElMessageBox.prompt('请输入名称', title, {
-      confirmButtonText: '确认',
-      cancelButtonText: '取消'
-
-    })
-      .then(({ value }) => {
+    if (res[1].status == 'fulfilled') {
+      let res2 = res[1].value;
+      if (res2.code == 200) {
         debugger;
-        if (!value) {
-          alert("请输入分组名称");
-          return;
-        }
-        let newNode =
-          {
-            "createDept": 0,//创建部门
-            "createBy": 0,//创建者
-            "createTime": now,//创建时间
-            "updateBy": 0,//更新者
-            "updateTime": now,//更新时间
-            "params": {
-              "additionalProp1": "",
-              "additionalProp2": "",
-              "additionalProp3": ""
-            },
-            "id": null,//主键ID
-            "groupName": value,//分组名称
-            "status": 1,//状态：0-禁用，1-正常
-            "parentId": node ? node.data.id : null,//父分组ID
-            "fullPath": val,//完整分组路径
-            "isDeleted": 0,//删除标记：0-未删除，1-已删除
+        let vals = res2.rows.map(item => item.deviceId);
 
-          };
-        showloading();
-        api.addTreeNode(treeDataOrin.value, newNode, node ? node.data.id : null).then((res) => {
-          if (res.code == 200) {
-            alert("操作成功");
-            RefreshTree();
-          } else {
-            alert(res.msg);
-          }
-        }).catch((ex) => {
-          console.log("ex=", ex);
+        transfer.value = vals;
 
-        }).finally(() => {
-          hideloading();
-        });
-      });
-  }
+      }
 
 
-
-
-  //树控件的自定义属性
-  var defaultProps = {
-    children: 'children',
-    label: 'groupName',
-    parentId: "parentId"
-  }
-
-  var RowSelectionChange = (tr) => {
-    debugger;
-    console.log("行选中变化", tr);
-    getSelectionRows();
-  };
-
-
-
-  var getSelectionRows = () => {
-
-    if (grid.value) { // 检查ref是否已正确引用组件实例
-      var selectedRows = grid.value.getSelectionRows(); // 获取选中行数据数组
-      return selectedRows;
     }
-    return [];
+  });
+
+
+
+}
+
+//确认选择这些设备
+var OKCheckDevice = () => {
+
+  debugger;
+
+  let arr = transfer.value.map(item => ({
+    deviceId: item
+  }));
+  if (arr.length == 0) {
+    alert("未选择任何设备");
+    return;
+  }
+  hideDevice();
+  cGroupAndDevice.deviceIds = arr;
+  cGroupAndDevice.groupid = checkNode.val;
+  deviceMoveGroup(cGroupAndDevice.groupid, cGroupAndDevice.deviceIds);
+}
+
+//隐藏选择设备
+var hideDevice = () => {
+  Status.dialogDeviceVisible = false;
+
+}
+
+var cGroupAndDevice = {
+  groupid: '',
+  deviceIds: []
+};
+//显示选择分组
+var showCheckGroup = (type, row) => {
+  let rows = [row];
+  if (type == 'check') {
+    rows = getSelectionRows();
   }
 
-
-  var RefreshTree = function () {
-    api.getTreeData(searchTxt.value).then((res) => {
-      treeDataOrin.value = res;
-
-    });
+  if (rows.length == 0) {
+    alert("请选择要移动的设备");
+    return;
   }
+  cGroupAndDevice.deviceIds = rows;
+  Status.dialogGroupVisible = true;
 
-  //从分组中删除设备
-  var groupDelDevice = (row) => {
 
-    let rows = [];//
-    if (!row) {
-      rows = getSelectionRows();
+  cGroupAndDevice.groupid = "";
+}
+//选中了某个分组
+var CheckGroup = (item) => {
+
+  cGroupAndDevice.groupid = item.id;
+}
+
+//确定选中某个分组
+var OkCheckGroup = () => {
+  if (!cGroupAndDevice.groupid) {
+    alert("请先选择分组");
+    return;
+  }
+  CancelCheckGroup();
+  deviceMoveGroup(cGroupAndDevice.groupid, cGroupAndDevice.deviceIds);
+}
+//隐藏选择分组
+var CancelCheckGroup = () => {
+  Status.dialogGroupVisible = false
+}
+//将设备移动至分组
+var deviceMoveGroup = (groupid, row) => {
+  let rows = [];//
+  if (!row) {
+    rows = getSelectionRows();
+  } else {
+    if (Array.isArray(row)) {
+      rows = row;
     } else {
       rows = [row];
     }
-    if (rows.length == 0) {
-      alert("请选择要删除的设备");
-      return;
-    }
-
-
-    confirm("此操作不可逆,您确认要进行吗?", () => {
-      showloading();
-      let ids = rows.map(r => r.deviceId).join(",");
-      api.groupDelDevice(checkNode.val, ids).then((res) => {
-        if (res.code == 200) {
-          alert("操作成功");
-          getDeviceList();
-        } else {
-          alert(res.msg);
-        }
-      }).finally(() => {
-        hideloading();
-      });
-    }, null, "警告");
 
   }
-
-  var showDevice = () => {
-    Status.dialogDeviceVisible = true;
-    //获取所有
-    let promise1 = api.getNodeDevice({
-      pageIndex: 1,
-      pageSize: 9999,
-      nodeCode: ""
-    });
-    //获取已选中的
-    let promise2 = api.getNodeDevice({
-      pageIndex: 1,
-      pageSize: 9999,
-      nodeCode: checkNode.val
-    });
-
-    cGroupAndDevice.deviceIds=[];
-    transfer.value=[];
-
-    Promise.allSettled([promise1, promise2]).then(res => {
-
-      if (res[0].status == 'fulfilled') {
-        let res1 = res[0].value;
-
-
-        if (res1.code == 200) {
-          let arr = res1.rows.map(item => ({
-            key: item.deviceId,
-            label: item.deviceName,
-            disabled:item.groupId && item.groupId==checkNode.val?false:item.groupId ?true:false
-          }));
-
-          transfer.data = arr;
-
-        }
-
-      }
-
-      if (res[1].status == 'fulfilled') {
-        let res2 = res[1].value;
-        if (res2.code == 200) {
-          debugger;
-          let vals = res2.rows.map(item => item.deviceId);
-
-          transfer.value = vals;
-
-        }
-
-
-      }
-    });
-
-
-
+  if (rows.length == 0) {
+    alert("请选择要移动的设备");
+    return;
   }
 
- //确认选择这些设备
-  var OKCheckDevice = () => {
 
-debugger;
-
-    let arr=transfer.value.map(item=>({
-      deviceId:item
-    }));
-    if(arr.length==0){
-      alert("未选择任何设备");
-      return;
-    }
-     hideDevice();
-    cGroupAndDevice.deviceIds=arr;
-    cGroupAndDevice.groupid=checkNode.val;
-    deviceMoveGroup(cGroupAndDevice.groupid,cGroupAndDevice.deviceIds);
-  }
-
-  //隐藏选择设备
-  var hideDevice = () => {
-    Status.dialogDeviceVisible = false;
-
-  }
-
-  var cGroupAndDevice={
-    groupid:'',
-    deviceIds:[]
-  };
-//显示选择分组
-  var showCheckGroup = (type,row) => {
-    let rows = [row];
-    if(type=='check'){
-      rows = getSelectionRows();
-    }
-
-    if (rows.length == 0) {
-      alert("请选择要移动的设备");
-      return;
-    }
-    cGroupAndDevice.deviceIds=rows;
-    Status.dialogGroupVisible = true;
-
-
-    cGroupAndDevice.groupid="";
-  }
-  //选中了某个分组
-  var CheckGroup = (item) => {
-
-    cGroupAndDevice.groupid=item.id;
-  }
-
-  //确定选中某个分组
-  var OkCheckGroup = () => {
-    if (!cGroupAndDevice.groupid) {
-      alert("请先选择分组");
-      return;
-    }
-    CancelCheckGroup();
-    deviceMoveGroup(cGroupAndDevice.groupid,cGroupAndDevice.deviceIds);
-  }
-  //隐藏选择分组
-  var CancelCheckGroup = () => {
-    Status.dialogGroupVisible = false
-  }
-  //将设备移动至分组
-  var deviceMoveGroup = (groupid,row) => {
-    let rows = [];//
-    if (!row) {
-      rows = getSelectionRows();
+  // confirm("此操作不可逆,您确认要进行吗?", () => {
+  showloading();
+  let ids = rows.map(r => r.deviceId).join(",");
+  api.deviceMoveGroup(groupid, ids).then((res) => {
+    if (res.code == 200) {
+      alert("操作成功");
+      getDeviceList();
     } else {
-      if(Array.isArray(row)){
-        rows = row;
-      }else{
-        rows = [row];
-      }
-
-    }
-    if (rows.length == 0) {
-      alert("请选择要移动的设备");
-      return;
+      alert(res.msg);
     }
+  }).finally(() => {
+    hideloading();
+  });
+  // }, null, "警告");
+}
 
 
-    // confirm("此操作不可逆,您确认要进行吗?", () => {
-      showloading();
-      let ids = rows.map(r => r.deviceId).join(",");
-      api.deviceMoveGroup(groupid, ids).then((res) => {
-        if (res.code == 200) {
-          alert("操作成功");
-          getDeviceList();
-        } else {
-          alert(res.msg);
-        }
-      }).finally(() => {
-        hideloading();
-      });
-    // }, null, "警告");
+  let timer;
+  function InputSearch() {
+    clearTimeout(timer);
+    // 等待 500ms 无输入后执行查询
+    timer = setTimeout(() => {
+      getDeviceList();
+    }, 500);
   }
 
-
-  onMounted(() => {
-    RefreshTree();
+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 {
-    width: 76px;
-    height: 32px;
-    border-radius: 4px;
-    background-color: #00000000;
-    color: #027CFB;
-    text-align: center;
-    font-family: Microsoft YaHei;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 32px;
-    letter-spacing: 0px;
-    border: 1px solid rgb(2, 124, 251);
+.main .searchBar .btnReset {
+  width: 76px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: #00000000;
+  color: #027CFB;
+  text-align: center;
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: 0px;
+  border: 1px solid rgb(2, 124, 251);
+  cursor: pointer;
+}
 
-  }
+.main .searchBar .btnSearch {
+  /* 组合 454 */
+  width: 76px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: #027CFB;
+  color: #FFFFFF;
+  text-align: center;
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: 0px;
+  border: none;
+  margin-right: 15px;
+  cursor: pointer;
+}
 
-  .main .searchBar .btnSearch {
-    /* 组合 454 */
-    width: 76px;
-    height: 32px;
-    border-radius: 4px;
-    background-color: #027CFB;
-    color: #FFFFFF;
-    text-align: center;
-    font-family: Microsoft YaHei;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 32px;
-    letter-spacing: 0px;
-    border: none;
-    margin-right: 15px;
-  }
+.main .searchBar {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: center;
+}
 
-  .main .searchBar {
-    width: 100%;
-    height: 50px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: center;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .main .toolBar .rightSearch {
-    width: 295px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: center;
-    justify-content: space-between;
-    align-items: center;
-  }
+.main .toolBar .rightSearch {
+  width: 295px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: center;
+}
 
 
-  .main .toolBar .gjSearch {
-    /* 矩形 155 */
-    width: 85px;
-    height: 32px;
-    box-sizing: border-box;
-    border: 1px solid rgba(2, 124, 251, 1);
-    border-radius: 4px;
-    color: rgba(2, 124, 251, 1);
+.main .toolBar .gjSearch {
+  /* 矩形 155 */
+  width: 85px;
+  height: 32px;
+  box-sizing: border-box;
+  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;
+}
 
-    font-family: Noto Sans SC;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 32px;
-    letter-spacing: 0px;
-    text-align: center;
-  }
+.main .toolBar .searchContent {
+  width: 200px;
+  height: 32px;
+  border: 1px solid rgba(189, 198, 215, 1);
+  border-radius: 4px;
+}
 
-  .main .toolBar .searchContent {
-    width: 200px;
-    height: 32px;
-    border: 1px solid rgba(189, 198, 215, 1);
-    border-radius: 4px;
-  }
+.main .toolBar .serchTxt {
+  border: none;
+  width: 175px;
+  height: 100%;
 
-  .main .toolBar .serchTxt {
-    border: none;
-    width: 175px;
-    height: 100%;
+}
 
-  }
+.main .toolBar .btnAdd {
+  background-color: #027CFB;
+  color: #FFFFFF;
+  width: 105px;
+  height: 32px;
+  text-align: center;
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: 0px;
+  cursor: pointer;
+}
 
-  .main .toolBar .btnAdd {
-    background-color: #027CFB;
-    color: #FFFFFF;
-    width: 105px;
-    height: 32px;
-    text-align: center;
-    font-family: Microsoft YaHei;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 32px;
-    letter-spacing: 0px;
+.main .toolBar {
+  width: 100%;
+  height: 35px;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid rgba(235, 238, 248, 1);
+}
 
-  }
+.nodeInput {
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid rgb(189, 198, 215);
+  border-radius: 4px;
+  box-sizing: border-box;
+}
 
-  .main .toolBar {
-    width: 100%;
-    height: 35px;
-    overflow: hidden;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: center;
-    justify-content: space-between;
-    align-items: flex-start;
-    border-bottom: 1px solid rgba(235, 238, 248, 1);
-  }
+.red {
+  color: #FF0000;
+}
 
-  .nodeInput {
-    height: 30px;
-    line-height: 30px;
-    border: 1px solid rgb(189, 198, 215);
-    border-radius: 4px;
-    box-sizing: border-box;
-  }
+.green {
+  color: #0ed50e;
+}
 
-  .red {
-    color: #FF0000;
-  }
+.custom-tree-node {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
 
-  .green {
-    color: #0ed50e;
-  }
-
-  .custom-tree-node {
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    display: flex;
-    flex-direction: row;
-    align-content: center;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .custom-tree-node.active{
-    background: rgba(228, 234, 240, 0.4) !important;
-  }
+.custom-tree-node.active {
+  background: rgba(228, 234, 240, 0.4) !important;
+}
 
 
-  .custom-tree-node .iconContent {
-    width: 60px;
-    height: 100%;
+.custom-tree-node .iconContent {
+  width: 60px;
+  height: 100%;
 
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: center;
-    justify-content: space-evenly;
-    align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-evenly;
+  align-items: center;
 
-  }
+}
 
-  .custom-tree-node .iconContent .icon {
-    width: 18px;
-    height: 18px;
-    visibility: hidden;
-  }
+.custom-tree-node .iconContent .icon {
+  width: 18px;
+  height: 18px;
+  visibility: hidden;
+}
 
-  .custom-tree-node-Edit .iconContent .icon {
-    visibility: visible !important;
-  }
+.custom-tree-node-Edit .iconContent .icon {
+  visibility: visible !important;
+}
 
-  .custom-tree-node:hover .iconContent .icon {
-    visibility: visible;
-  }
+.custom-tree-node:hover .iconContent .icon {
+  visibility: visible;
+}
 
-  .leftTree .treeBold {
-    font-weight: 700;
-  }
+.leftTree .treeBold {
+  font-weight: 700;
+}
 
-  .leftTree .treeContent::-webkit-scrollbar {
-    display: none;
-  }
+.leftTree .treeContent::-webkit-scrollbar {
+  display: none;
+}
 
-  .leftTree .treeContent {
-    margin-top: 10px;
-    height: calc(100% - 95px);
-    overflow: scroll;
-    box-sizing: border-box;
-  }
+.leftTree .treeContent {
+  margin-top: 10px;
+  height: calc(100% - 95px);
+  overflow: scroll;
+  box-sizing: border-box;
+}
 
-  .leftTree .Search .txt::placeholder {
-    color: rgba(189, 198, 215, 1);
+.leftTree .Search .txt::placeholder {
+  color: rgba(189, 198, 215, 1);
 
-    font-family: Microsoft YaHei;
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: 0px;
-    text-align: left;
-  }
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  text-align: left;
+}
 
-  .leftTree .Search .txt {
-    width: 100%;
-    height: 100%;
-    border: none;
-    background-color: #00000000;
-    text-indent: 5px;
-    line-height: 36px;
-    color: rgb(96, 98, 102);
-  }
+.leftTree .Search .txt {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: #00000000;
+  text-indent: 5px;
+  line-height: 36px;
+  color: rgb(96, 98, 102);
+}
 
-  .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 .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 {
-    color: rgba(2, 124, 251, 1);
-    cursor: pointer;
-    font-family: Microsoft YaHei;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 18px;
-    letter-spacing: 0px;
-    text-align: left;
-  }
+.leftTree .head .nodeEdit {
+  color: rgba(2, 124, 251, 1);
+  cursor: pointer;
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
 
-  .leftTree .head .title {
-    color: rgba(56, 64, 79, 1);
+.leftTree .head .title {
+  color: rgba(56, 64, 79, 1);
 
-    font-family: Microsoft YaHei;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-    letter-spacing: 0px;
-    text-align: left;
-  }
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
 
-  .leftTree .head {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: center;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: 40px;
-    border-bottom: 1px solid rgba(235, 238, 248, 1);
-  }
+.leftTree .head {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  border-bottom: 1px solid rgba(235, 238, 248, 1);
+}
 
-  .fleft {
-    float: left;
-  }
+.fleft {
+  float: left;
+}
 
-  .fright {
-    float: right;
-  }
+.fright {
+  float: right;
+}
 
-  .clear {
-    clear: both;
-  }
+.clear {
+  clear: both;
+}
 
-  .center {
-    display: flex
-;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-  }
+.center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
 
-  .displayNone {
-    display: none !important;
-  }
+.displayNone {
+  display: none !important;
+}
 
-  input:focus {
-    outline: none;
-  }
+input:focus {
+  outline: none;
+}
 
-  .H100 {
-    height: 100%;
-  }
+.H100 {
+  height: 100%;
+}
 
-  .content {
-    width: 100%;
-    min-height: calc(100vh - 84px);
-    height: calc(100vh - 84px);
-    background-color: #FFFFFF;
-    font-size: 16px;
-    box-sizing: border-box;
-    padding: 8px 20px;
-    font-family: 'Microsoft YaHei';
-  }
+.content {
+  width: 100%;
+  min-height: calc(100vh - 84px);
+  height: calc(100vh - 84px);
+  background-color: #FFFFFF;
+  font-size: 16px;
+  box-sizing: border-box;
+  padding: 8px 20px;
+  font-family: 'Microsoft YaHei';
+}
 
-  .leftTree {
-    width: 18%;
-    height: 100%;
-    border-radius: 4px;
-    box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
-    background: rgba(255, 255, 255, 1);
-    margin-right: 15px;
-    box-sizing: border-box;
-    padding: 12px 13px;
-  }
+.leftTree {
+  width: 18%;
+  height: 100%;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+  background: rgba(255, 255, 255, 1);
+  margin-right: 15px;
+  box-sizing: border-box;
+  padding: 12px 13px;
+}
 
-  .main {
-    width: calc(82% - 15px);
-    height: 100%;
-    border-radius: 4px;
-    box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
-    background: rgba(255, 255, 255, 1);
-    box-sizing: border-box;
-    padding: 15px;
-  }
+.main {
+  width: calc(82% - 15px);
+  height: 100%;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  padding: 15px;
+}
 
-  .moveDev {
-    margin-right: 10px;
-    color: rgba(2, 124, 251, 1);
+.moveDev {
+  margin-right: 10px;
+  color: rgba(2, 124, 251, 1);
 
-    font-family: Noto Sans SC;
-    font-size: 12px;
-    font-weight: 400;
-    letter-spacing: 0px;
-  }
+  font-family: Noto Sans SC;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0px;
+}
 
-  .delDev {
-    color: rgba(224, 52, 52, 1);
+.delDev {
+  color: rgba(224, 52, 52, 1);
 
-    font-family: Noto Sans SC;
-    font-size: 12px;
-    font-weight: 400;
+  font-family: Noto Sans SC;
+  font-size: 12px;
+  font-weight: 400;
 
-    letter-spacing: 0px;
+  letter-spacing: 0px;
 
-  }
+}
 
-  .gridTool {
-    padding-bottom: 10px;
-  }
-:deep .el-tree-node__content{
+.gridTool {
+  padding-bottom: 10px;
+}
+
+:deep .el-tree-node__content {
   height: auto !important;
 }
-  
 </style>