diff --git a/src/api/area-category.js b/src/api/area-category.js
new file mode 100644
index 0000000..fd3d2f3
--- /dev/null
+++ b/src/api/area-category.js
@@ -0,0 +1,33 @@
+/*
+ * @Author: gg
+ * @Date: 2021-12-07 11:39:21
+ * @LastEditTime: 2021-12-07 11:48:22
+ * @LastEditors: Please set LastEditors
+ * @Description:    新增/编辑自动报警分类 自动报警分类查询（分页）
+ * @FilePath: \GpsCardAdmin\src\api\area-category.js
+ */
+import request from '@/utils/request'
+export const APILimits = {
+    AreaCategoryQuery,
+    AddAreaCategory
+};
+export default APILimits;
+
+
+export function AreaCategoryQuery(data) {
+    return request({
+      url: '/api/v1/Fence/AreaCategoryQuery',
+      method: 'post',
+      data
+    })
+  }
+  
+  export function AddAreaCategory(data) {
+    return request({
+      url: '/api/v1/Fence/AddAreaCategory',
+      method: 'post',
+      data
+    })
+  }
+
+   
\ No newline at end of file
diff --git a/src/api/off-limits-type.js b/src/api/off-limits-type.js
new file mode 100644
index 0000000..47406ed
--- /dev/null
+++ b/src/api/off-limits-type.js
@@ -0,0 +1,42 @@
+/*
+ * @Author:gg
+ * @Date: 2021-12-02 18:04:02
+ * @LastEditTime: 2021-12-07 11:47:46
+ * @LastEditors: Please set LastEditors
+ * @Description: 禁入场景类别 新增 更新 删除
+ * @FilePath: \GpsCardAdmin\src\api\off-limits-type.js
+ */
+import request from '@/utils/request'
+
+/* export function addSencens(data) {
+    return request({
+      url: '/Sencens/add',
+      method: 'post',
+      data
+    })
+  } */
+
+  
+  export function addType(data) {
+    return request({
+      url: '/api/v1/Fence/AddAreaCategory',
+      method: 'post',
+      data
+    })
+  }
+
+  export function UpdateType(data) {
+    return request({
+      url: '/LimitsType/Update',
+      method: 'post',
+      data
+    })
+  }
+
+  export function DelType(data) {
+    return request({
+      url: '/LimitsType/Del',
+      method: 'post',
+      data
+    })
+  }
\ No newline at end of file
diff --git a/src/views/off-limits-manage/off-limits-main/off-limits-type/index.vue b/src/views/off-limits-manage/off-limits-main/off-limits-type/index.vue
index af46511..8c1258c 100644
--- a/src/views/off-limits-manage/off-limits-main/off-limits-type/index.vue
+++ b/src/views/off-limits-manage/off-limits-main/off-limits-type/index.vue
@@ -1,332 +1,241 @@
 <!--
- * @Date: 2021-11-30 09:28:55
- * @LastEditors: JinxuChen
- * @LastEditTime: 2021-12-03 15:22:29
- * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\index.vue
- * @description:
+ * @Author: your name
+ * @Date: 2021-12-07 15:14:51
+ * @LastEditTime: 2021-12-08 11:25:34
+ * @LastEditors: Please set LastEditors
+ * @Description:  自动报警分类
+ * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\newIndex.vue
 -->
-<template>
-    <div class="custom-tree-container">
-
-  <div class="block">
-
-    <el-tree
-      :data="data"
-      node-key="id"
-      :default-expand-all="false"
-      :render-after-expand="true"
-      :expand-on-click-node="false">
-      <span class="custom-tree-node" slot-scope="{ node, data }">
-        <span>{{ node.label }} ( {{ data.no }} )</span><span></span>
-
-        <div class="Operation">
-        <span>
-          <el-button v-if=" data.children"
-            type="text"
-            size="mini"
-            @click="() => append(node,data)">
-            增加类别
-          </el-button>
-          <el-button v-if="!data.children"
-            type="text"
-            size="mini"
-            @click="() => modify(node, data)">
-            修改
-          </el-button>
-          <el-button v-if="!data.children"
-            type="text"
-            size="mini"
-            @click="() => remove(node, data)">
-            删除
-          </el-button>
-        </span></div>
-      </span>
-    </el-tree>
-    <el-row>
-
-      <el-col :span="8"><div class="grid-content bg-purple-light add-btn"  >
-        <el-button type="text" @click="dialogVisible = true">  增加场景</el-button>
-        </div></el-col>
-
-
-
-    </el-row>
 
+<template>
+  <div class="app-container">
     <el-dialog
-  title="新增场景"
-  :visible.sync="dialogVisible"
-  width="50%"
-   >
-  <el-form :model="currentAddScenes" ref="currentAddScenes">
-    <el-form-item label="场景"
-      prop="inputNew"
-      :rules="[
-        { required: true, message: '场景不能为空'}
-      ]"
-      >
-      <el-input v-model="currentAddScenes.inputNew" placeholder="请输入场景"></el-input>
-
-    </el-form-item>
-    <el-form-item>
-
-          <el-button type="primary" @click="submitScenesForm('currentAddScenes')">提交</el-button>
-          <el-button @click="resetForm('currentAddScenes')">重置</el-button>
-          <el-button @click="dialogVisible = false">取 消</el-button>
+      :title="titleTypeAddorModify"
+      :visible.sync="dialogVisibleType"
+      width="50%"
+    >
+      <el-form :model="currentAddType" ref="currentAddType">
+        <el-form-item label="类型" prop="kindId">
+          <el-radio v-model="currentAddType.kindId" label="1">关键字</el-radio>
+          <el-radio v-model="currentAddType.kindId" label="2">地点</el-radio>
+        </el-form-item>
+        <el-form-item
+          label="类别"
+          prop="typeLabel"
+          :rules="[{ required: true, message: '类别不能为空' }]"
+        >
+          <el-input
+            v-model="currentAddType.typeLabel"
+            placeholder="请输入类别"
+          ></el-input>
         </el-form-item>
-
-
-  </el-form>
-</el-dialog>
-
- <el-dialog
-  :title="titleTypeAddorModify"
-  :visible.sync="dialogVisibleType"
-  width="50%"
-   >
-   <el-form :model="currentAddType" ref="currentAddType">
-     <el-form-item label="类别"
-      prop="typeLabel"
-      :rules="[
-        { required: true, message: '类别不能为空'}
-      ]"
-      >
-      <el-input v-model="currentAddType.typeLabel"    placeholder="请输入类别"></el-input>
-
-      </el-form-item>
         <el-form-item>
-
-          <el-button type="primary" @click="submitForm('currentAddType')">提交</el-button>
+          <el-button type="primary" @click="submitForm('currentAddType')"
+            >提交</el-button
+          >
           <el-button @click="resetForm('currentAddType')">重置</el-button>
           <el-button @click="dialogVisibleType = false">取 消</el-button>
         </el-form-item>
-
-
-
-   </el-form>
-</el-dialog>
-
-
-  <el-dialog
-    title="修改类别"
-    :visible.sync="dialogVisibleM"
-    width="50%"
-    >
-    <el-input v-model="inputModify" placeholder="请输入类别"></el-input>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisibleM = false">取 消</el-button>
-      <el-button type="primary" @click="() => save()">确 定</el-button>
-    </span>
-  </el-dialog>
-
-  </div>
+      </el-form>
+    </el-dialog>
+
+    <div class="filter-container">
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px"
+        type="primary"
+        icon="el-icon-circle-plus"
+        @click="AddDialog"
+        >添加</el-button
+      >
+      <!-- 搜索 -->
+      <el-input
+        v-model="searchValue"
+        placeholder="请输入类别"
+        style="width: 200px; margin-left: 10px"
+        class="filter-item"
+        @keyup.enter.native="onSearch"
+      />
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px"
+        type="primary"
+        icon="el-icon-search"
+        @click="onSearch"
+        >搜索</el-button
+      >
     </div>
+    <!-- 表格 -->
+    <!-- <el-table
+            :key="tableKey"
+            v-loading="listLoading"
+            :data="list"
+            border
+            fit
+            highlight-current-row
+            style="width: 100%;"
+            @sort-change="sortChange"
+        ></el-table>-->
+    <TTable
+      :tableData="list"
+      :columns="columns"
+      @update="onUpdate"
+      @delete="onDelete"
+    ></TTable>
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="page"
+      :limit.sync="limit"
+      :page-sizes="[5,10,100, 200, 300, 400]"
+      @pagination="getList"
+    />
+  </div>
 </template>
+
 <script>
- let id = 1000;
+import TopMenu from "@/components/TopMenu";
+import TTable from "../../../../components/TTable/TTable";
+import Pagination from "@/components/Pagination";
+import CategoryAPI from "@/api/area-category.js";
+
 export default {
-  name:'',
-  data(){
-    const data = [{
-        id: 1,
-        no:101,
-        label: '场景1',
-        children: [{
-          id: 4,
-          no:101001,
-          label: '类别 1-1'
-        }]
-      }, {
-        id: 2,
-        no:102,
-        label: '场景 2',
-        children: [{
-          id: 5,
-          no:102001,
-          label: '类别 2-1'
-        }, {
-          id: 6,
-          no:102002,
-          label: '类别 2-2'
-        }]
-      }
-      ];
-      return {
-        titleTypeAddorModify:"新增类别",
-        inputNew: '',
-        inputType:'',
-        inputModify: '',
-        parentNode:{},
-        dialogVisible: false,
-        dialogVisibleType:false,
-        dialogVisibleM: false,
-        currentData:{},
-        currentParentData:{},
-        currentAddScenes:{
-          inputNew:"",
+  name: "",
+  components: { TTable, TopMenu, Pagination },
+
+  data() {
+    return {
+      titleTypeAddorModify: "新增类别",
+      dialogVisibleType: false,
+      searchValue: "",
+      list: [],
+      columns: [
+        { prop: "kindIdName", title: "类型" },
+        { prop: "categoryName", title: "类别" },
+        { prop: "createTime", title: "创建时间" },
+        {
+          action: true,
+          title: "操作",
+          actions: [
+            { fnName: "update", title: "修改", type: "primary" },
+            { fnName: "delete", title: "删除", type: "error" },
+          ],
         },
-        currentAddType:{
-          typeLabel:""
-        },
-
-        data: JSON.parse(JSON.stringify(data))
-      }
-  },
-   methods: {
-     submitScenesForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            //alert('submit!');
-            this.addScenes();
-
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      ],
+
+      total: 1,
+      page: 1,
+      limit: 5,
+      currentAddType: {
+        categoryId:"",
+        kindId: "1",
+        typeLabel: "",
       },
-     submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            //alert('submit!');
-            if(this.titleTypeAddorModify=="增加类别")
-            {
-              this.addType();
-            }
-            else
-            {
-              this.save();
-            }
-
+    };
+  },
+  methods: {
+    AddDialog() {
+      this.dialogVisibleType = true;
+      this.titleTypeAddorModify="新增类别";
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          //alert('submit!');
+          if (this.titleTypeAddorModify == "新增类别") {
+            this.addType();
           } else {
-            console.log('error submit!!');
-            return false;
+            this.save();
           }
-        });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-      },
-      append(node,data) {
-        const parent = node;
-        this.currentParentData=parent.data;
-        this.dialogVisibleType=true;
-        this.titleTypeAddorModify="增加类别";
-
-        if(this.$refs['currentAddType']){
-          this.resetForm('currentAddType');
+        } else {
+          console.log("error submit!!");
+          return false;
         }
-
-      },
-
-      addScenes(){
-        this.dialogVisible=false;
-        let no=this.data[this.data.length-1].no+1;
-        let id=this.data[this.data.length-1].id+1;
-
-        this.data.push(  {
-        id: id,
-        no:no,
-        label: this.currentAddScenes.inputNew,
-        children: []
       });
-
-
-      },
-      addType(){
-
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    //新增
+    addType() {
+      var data = {
+        categoryId: "", //分类ID。（不为空：编辑操作；为空：新增操作）
+        categoryName: this.currentAddType.typeLabel, //分类名称
+        //kindId:1, //parseInt(this.currentAddType.kindId),
+        status: true,
+      };
+
+      CategoryAPI.AddAreaCategory(data).then((res) => {
+        this.$message({
+          message: "新增类别成功",
+          type: "success",
+        });
+        this.onSearch();
         this.dialogVisibleType=false;
-
-        //模拟保存
-        this.data.forEach(i=>{
-
-          if(i.id==this.currentParentData.id)
-          {
-
-           let no,id;
-           if(i.children && i.children.length>0){
-            no=i.children[i.children.length-1].no+1;
-            id=i.children[i.children.length-1].id+1;
-           }
-           else{
-              no=i.no+'001';
-              id=i.id+'001';
-           }
-
-
-           i.children.push({
-             id:id,
-             label: this.currentAddType.typeLabel,
-             no:no
-           });
-          }
+      });
+    },
+    save() {
+        var data = {
+        categoryId: this.currentAddType.categoryId, //分类ID。（不为空：编辑操作；为空：新增操作）
+        categoryName: this.currentAddType.typeLabel, //分类名称
+        //kindId:1, //parseInt(this.currentAddType.kindId),
+        status: true,
+      };
+
+      CategoryAPI.AddAreaCategory(data).then((res) => {
+        this.$message({
+          message: "修改类别成功",
+          type: "success",
         });
-
-         //this.inputType
-      },
-      remove(node, data) {
-        const parent = node.parent;
-        const children = parent.data.children || parent.data;
-        const index = children.findIndex(d => d.id === data.id);
-        children.splice(index, 1);
-      },
-      modify(node,data){
-        this.titleTypeAddorModify="修改类别";
-        this.dialogVisibleType=true;
-        this.currentData=data;
-        //this.dialogVisibleM=true;
-        //this.inputModify=data.label;
-        this.currentAddType.typeLabel=data.label;
-      },
-      save(){
-
-        //模拟保存：
-        this.dialogVisibleType = false
-        this.data.forEach(element => {
-          if(element.children)
-          {
-            element.children.forEach(i=>{
-              if(i.id===this.currentData.id)
-              {
-                i.label=this.currentAddType.typeLabel;
-              }
-            });
-
+        this.onSearch();
+        this.dialogVisibleType=false;
+      });
+    },
+    // 搜索
+    onSearch() {
+      this.getList();
+    },
+    // 获取分页数据
+    getList() {
+      let reqBody = {
+        pageNumber: this.page, //页面
+        begNumber: this.limit, //每页条数
+        keyword: this.searchValue, //查询关键词条件，（为空：查全部）
+      };
+
+      CategoryAPI.AreaCategoryQuery(reqBody).then((res) => {
+        console.log("res", res);
+        this.list = res.data;
+        this.total=res.count;
+        this.list.forEach((x) => {
+          if (x.kindId === 2) {
+            x.kindIdName = "关键字";
+          } else {
+            x.kindIdName = "地址";
           }
         });
-
-
-      },
-      renderContent(h, { node, data, store }) {
-        return (
-          <span class="custom-tree-node">
-            <span>{node.label}</span>
-            <span>
-              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
-              <el-button v-if="node.children.len==0" size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
-            </span>
-          </span>);
-      }
-    }
-}
+      });
+    },
+    // 修改
+    onUpdate(row) {
+      console.log("修改", row);
+      this.currentAddType.kindId=row.kindId+'';
+      this.currentAddType.typeLabel=row.categoryName;
+      this.currentAddType.categoryId=row.categoryId;
+      this.dialogVisibleType=true;
+      this.titleTypeAddorModify="修改类别";
+    },
+    // 删除
+    onDelete(row) {
+      console.log("删除", row);
+    },
+  },
+  mounted() {
+    this.getList();
+  },
+};
 </script>
 
-<style>
-  .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 8px;
-  }
-  .custom-tree-container .block{
-    width: 50%;
-    margin-top: 5%;
-    margin-left: 5%;
-  }
-
-  .add-btn {
-    margin-left:10%;
-  }
-
-</style>
\ No newline at end of file
+<style scoped>
+</style>
diff --git a/src/views/off-limits-manage/off-limits-main/off-limits-type/indexOld.vue b/src/views/off-limits-manage/off-limits-main/off-limits-type/indexOld.vue
new file mode 100644
index 0000000..af46511
--- /dev/null
+++ b/src/views/off-limits-manage/off-limits-main/off-limits-type/indexOld.vue
@@ -0,0 +1,332 @@
+<!--
+ * @Date: 2021-11-30 09:28:55
+ * @LastEditors: JinxuChen
+ * @LastEditTime: 2021-12-03 15:22:29
+ * @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\index.vue
+ * @description:
+-->
+<template>
+    <div class="custom-tree-container">
+
+  <div class="block">
+
+    <el-tree
+      :data="data"
+      node-key="id"
+      :default-expand-all="false"
+      :render-after-expand="true"
+      :expand-on-click-node="false">
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }} ( {{ data.no }} )</span><span></span>
+
+        <div class="Operation">
+        <span>
+          <el-button v-if=" data.children"
+            type="text"
+            size="mini"
+            @click="() => append(node,data)">
+            增加类别
+          </el-button>
+          <el-button v-if="!data.children"
+            type="text"
+            size="mini"
+            @click="() => modify(node, data)">
+            修改
+          </el-button>
+          <el-button v-if="!data.children"
+            type="text"
+            size="mini"
+            @click="() => remove(node, data)">
+            删除
+          </el-button>
+        </span></div>
+      </span>
+    </el-tree>
+    <el-row>
+
+      <el-col :span="8"><div class="grid-content bg-purple-light add-btn"  >
+        <el-button type="text" @click="dialogVisible = true">  增加场景</el-button>
+        </div></el-col>
+
+
+
+    </el-row>
+
+    <el-dialog
+  title="新增场景"
+  :visible.sync="dialogVisible"
+  width="50%"
+   >
+  <el-form :model="currentAddScenes" ref="currentAddScenes">
+    <el-form-item label="场景"
+      prop="inputNew"
+      :rules="[
+        { required: true, message: '场景不能为空'}
+      ]"
+      >
+      <el-input v-model="currentAddScenes.inputNew" placeholder="请输入场景"></el-input>
+
+    </el-form-item>
+    <el-form-item>
+
+          <el-button type="primary" @click="submitScenesForm('currentAddScenes')">提交</el-button>
+          <el-button @click="resetForm('currentAddScenes')">重置</el-button>
+          <el-button @click="dialogVisible = false">取 消</el-button>
+        </el-form-item>
+
+
+  </el-form>
+</el-dialog>
+
+ <el-dialog
+  :title="titleTypeAddorModify"
+  :visible.sync="dialogVisibleType"
+  width="50%"
+   >
+   <el-form :model="currentAddType" ref="currentAddType">
+     <el-form-item label="类别"
+      prop="typeLabel"
+      :rules="[
+        { required: true, message: '类别不能为空'}
+      ]"
+      >
+      <el-input v-model="currentAddType.typeLabel"    placeholder="请输入类别"></el-input>
+
+      </el-form-item>
+        <el-form-item>
+
+          <el-button type="primary" @click="submitForm('currentAddType')">提交</el-button>
+          <el-button @click="resetForm('currentAddType')">重置</el-button>
+          <el-button @click="dialogVisibleType = false">取 消</el-button>
+        </el-form-item>
+
+
+
+   </el-form>
+</el-dialog>
+
+
+  <el-dialog
+    title="修改类别"
+    :visible.sync="dialogVisibleM"
+    width="50%"
+    >
+    <el-input v-model="inputModify" placeholder="请输入类别"></el-input>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisibleM = false">取 消</el-button>
+      <el-button type="primary" @click="() => save()">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  </div>
+    </div>
+</template>
+<script>
+ let id = 1000;
+export default {
+  name:'',
+  data(){
+    const data = [{
+        id: 1,
+        no:101,
+        label: '场景1',
+        children: [{
+          id: 4,
+          no:101001,
+          label: '类别 1-1'
+        }]
+      }, {
+        id: 2,
+        no:102,
+        label: '场景 2',
+        children: [{
+          id: 5,
+          no:102001,
+          label: '类别 2-1'
+        }, {
+          id: 6,
+          no:102002,
+          label: '类别 2-2'
+        }]
+      }
+      ];
+      return {
+        titleTypeAddorModify:"新增类别",
+        inputNew: '',
+        inputType:'',
+        inputModify: '',
+        parentNode:{},
+        dialogVisible: false,
+        dialogVisibleType:false,
+        dialogVisibleM: false,
+        currentData:{},
+        currentParentData:{},
+        currentAddScenes:{
+          inputNew:"",
+        },
+        currentAddType:{
+          typeLabel:""
+        },
+
+        data: JSON.parse(JSON.stringify(data))
+      }
+  },
+   methods: {
+     submitScenesForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            //alert('submit!');
+            this.addScenes();
+
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+     submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            //alert('submit!');
+            if(this.titleTypeAddorModify=="增加类别")
+            {
+              this.addType();
+            }
+            else
+            {
+              this.save();
+            }
+
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+      append(node,data) {
+        const parent = node;
+        this.currentParentData=parent.data;
+        this.dialogVisibleType=true;
+        this.titleTypeAddorModify="增加类别";
+
+        if(this.$refs['currentAddType']){
+          this.resetForm('currentAddType');
+        }
+
+      },
+
+      addScenes(){
+        this.dialogVisible=false;
+        let no=this.data[this.data.length-1].no+1;
+        let id=this.data[this.data.length-1].id+1;
+
+        this.data.push(  {
+        id: id,
+        no:no,
+        label: this.currentAddScenes.inputNew,
+        children: []
+      });
+
+
+      },
+      addType(){
+
+        this.dialogVisibleType=false;
+
+        //模拟保存
+        this.data.forEach(i=>{
+
+          if(i.id==this.currentParentData.id)
+          {
+
+           let no,id;
+           if(i.children && i.children.length>0){
+            no=i.children[i.children.length-1].no+1;
+            id=i.children[i.children.length-1].id+1;
+           }
+           else{
+              no=i.no+'001';
+              id=i.id+'001';
+           }
+
+
+           i.children.push({
+             id:id,
+             label: this.currentAddType.typeLabel,
+             no:no
+           });
+          }
+        });
+
+         //this.inputType
+      },
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
+      },
+      modify(node,data){
+        this.titleTypeAddorModify="修改类别";
+        this.dialogVisibleType=true;
+        this.currentData=data;
+        //this.dialogVisibleM=true;
+        //this.inputModify=data.label;
+        this.currentAddType.typeLabel=data.label;
+      },
+      save(){
+
+        //模拟保存：
+        this.dialogVisibleType = false
+        this.data.forEach(element => {
+          if(element.children)
+          {
+            element.children.forEach(i=>{
+              if(i.id===this.currentData.id)
+              {
+                i.label=this.currentAddType.typeLabel;
+              }
+            });
+
+          }
+        });
+
+
+      },
+      renderContent(h, { node, data, store }) {
+        return (
+          <span class="custom-tree-node">
+            <span>{node.label}</span>
+            <span>
+              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
+              <el-button v-if="node.children.len==0" size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
+            </span>
+          </span>);
+      }
+    }
+}
+</script>
+
+<style>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+  .custom-tree-container .block{
+    width: 50%;
+    margin-top: 5%;
+    margin-left: 5%;
+  }
+
+  .add-btn {
+    margin-left:10%;
+  }
+
+</style>
\ No newline at end of file