From 7a38bd6e47b0e926a5e36df1e51b2b2219391e32 Mon Sep 17 00:00:00 2001
From: icanci <qiang1.zhu@ly.com>
Date: Sat, 16 Sep 2023 11:51:20 +0800
Subject: [PATCH 1/5] unit view

---
 .../biz/service/impl/UseCaseServiceImpl.java  |  2 ++
 .../views/bic-config/dialog/bic-edit-form.vue | 33 +++++++++----------
 .../views/bic-config/dialog/node-vue-form.vue |  7 ++--
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
index 8f63099..f02a7a2 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
@@ -5,6 +5,7 @@ import java.util.List;
 import javax.annotation.Resource;
 
 import org.apache.commons.lang3.StringUtils;
+import org.springframework.stereotype.Service;
 
 import com.google.common.collect.Lists;
 
@@ -20,6 +21,7 @@ import cn.icanci.loopstack.bic.dal.mongo.dateobject.UseCaseDO;
  * @author icanci
  * @since 1.0 Created in 2023/09/10 20:10
  */
+@Service
 public class UseCaseServiceImpl implements UseCaseService {
 
     @Resource
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
index 88692bd..a2f9905 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
@@ -15,6 +15,7 @@
       label-width="80px"
       :model="saveData"
       :rules="rules"
+      :inline="true"
       ref="ruleForm"
     >
       <el-form-item label="系统" prop="systemUuid">
@@ -29,10 +30,10 @@
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="用例">
+      <el-form-item label="用例" prop="useCaseUuid">
         <el-select :disabled="saveData.systemUuid === '' ||(saveData.id && saveData.id !=='')"
                    @change="refreshUnitViewOptions"
-                   clearable filterable v-model="save.useCaseUuid" placeholder="请选择用例">
+                   clearable filterable v-model="saveData.useCaseUuid" placeholder="请选择用例">
           <el-option
             v-for="item in useCaseOptions"
             :key="item.value"
@@ -70,10 +71,12 @@ export default {
 
       if (systemUuid === '') {
         callback(new Error("请选择纠察图所属系统"))
+        return;
       }
 
       if (useCaseUuid === '') {
         callback(new Error("请选择纠察图所属用例"))
+        return;
       }
 
       let ret = await remoteValidateUnitViewUnique(systemUuid, useCaseUuid);
@@ -99,7 +102,7 @@ export default {
           {validator: validateName, trigger: 'blur'}
         ],
         useCaseUuid: [
-          {required: true, message: '此项必填', trigger: 'change'}
+          {required: true, message: '此项必填', trigger: 'change'},
           {validator: validateName, trigger: 'blur'}
         ],
       },
@@ -164,21 +167,15 @@ export default {
     },
     async refreshUseCaseOptions() {
       let vm = this
-      if (vm.saveData.systemUuid === '') {
-        vm.useCaseOptions = []
-        vm.nodeOptions = []
-        vm.nodeStyleOptions = []
-        vm.edgeStyleOptions = []
-        vm.saveData.useCaseUuid = ''
-        vm.saveData.nodes = []
-        vm.saveData.edges = []
-      } else {
-        vm.useCaseOptions = await useCaseSelector(vm.saveData.systemUuid)
-        vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
-        vm.nodeVueOptions = await nodeVueSelector(vm.saveData.systemUuid)
-        vm.nodeStyleOptions = await nodeStyleSelector(vm.saveData.systemUuid)
-        vm.edgeStyleOptions = await edgeStyleSelector(vm.saveData.systemUuid)
-      }
+      vm.saveData.useCaseUuid = ''
+      vm.saveData.nodes = []
+      vm.saveData.edges = []
+
+      vm.useCaseOptions = await useCaseSelector(vm.saveData.systemUuid)
+      vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
+      vm.nodeVueOptions = await nodeVueSelector(vm.saveData.systemUuid)
+      vm.nodeStyleOptions = await nodeStyleSelector(vm.saveData.systemUuid)
+      vm.edgeStyleOptions = await edgeStyleSelector(vm.saveData.systemUuid)
     },
     refreshUnitViewOptions() {
       let vm = this
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue
index 19cd6b1..1e2588f 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue
@@ -237,10 +237,9 @@ export default {
     },
     async refreshNodeOptions() {
       let vm = this
-      if (vm.saveData.systemUuid === '') {
-        vm.nodeOptions = []
-        vm.saveData.nodeUuid = ''
-      } else {
+      vm.saveData.nodeUuid = ''
+      vm.nodeOptions = []
+      if (vm.saveData.systemUuid !== '') {
         vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
       }
     }
-- 
Gitee


From 5e44c04c3001283cd3625c99c9b76d8efed31111 Mon Sep 17 00:00:00 2001
From: icanci <qiang1.zhu@ly.com>
Date: Sat, 16 Sep 2023 15:12:49 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E8=A7=86=E5=9B=BE=E7=BB=84=E8=A3=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bic/biz/service/impl/NodeServiceImpl.java |   3 +-
 .../loopstack/bic/views/BicApplication.java   |   2 +
 .../views/bic-config/dialog/bic-edit-form.vue | 160 +++++++++++++++++-
 3 files changed, 158 insertions(+), 7 deletions(-)

diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java
index 4edbff7..f698958 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java
@@ -6,7 +6,6 @@ import javax.annotation.Resource;
 
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
-import org.springframework.transaction.annotation.Transactional;
 
 import com.google.common.collect.Lists;
 
@@ -35,7 +34,7 @@ public class NodeServiceImpl implements NodeService {
     }
 
     @Override
-    @Transactional(rollbackFor = Exception.class)
+//    @Transactional(rollbackFor = Exception.class)
     public void save(NodeVO nodeVO) {
         // TODO 日志记录
         // TODO 事务插入 测试
diff --git a/views/src/main/java/cn/icanci/loopstack/bic/views/BicApplication.java b/views/src/main/java/cn/icanci/loopstack/bic/views/BicApplication.java
index 5119d16..e573133 100644
--- a/views/src/main/java/cn/icanci/loopstack/bic/views/BicApplication.java
+++ b/views/src/main/java/cn/icanci/loopstack/bic/views/BicApplication.java
@@ -3,12 +3,14 @@ package cn.icanci.loopstack.bic.views;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.context.annotation.ComponentScan;
+import org.springframework.transaction.annotation.EnableTransactionManagement;
 
 /**
  * @author icanci
  * @since 1.0 Created in 2023/08/19 09:42
  */
 @ComponentScan(basePackages = { "cn.icanci.loopstack.bic" })
+@EnableTransactionManagement
 @SpringBootApplication
 public class BicApplication {
     public static void main(String[] args) {
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
index a2f9905..8c57b8b 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
@@ -1,13 +1,17 @@
-<style>
+<style scoped>
+
+.el-divider--horizontal {
+  margin: 12px 0;
+}
 
 </style>
 <template>
   <el-dialog
-    title="用例配置"
+    title="单元纠察图配置"
     :visible.sync="dialogVisible"
     :close-on-press-escape="false"
     :close-on-click-modal="false"
-    width="80%"
+    width="90%"
     :before-close="clearForm">
 
     <el-form
@@ -42,8 +46,105 @@
           </el-option>
         </el-select>
       </el-form-item>
-
     </el-form>
+    <el-divider></el-divider>
+    <el-row>
+      <el-col :span="20">
+        <p style="color: #47e1c5"><b>纠察图关联</b></p>
+      </el-col>
+      <el-col :span="4">
+        <p style="color: red"><b>纠察图类树图</b></p>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="20">
+        <el-row v-for="(model,index) in  relationModel">
+          <el-form :inline="true" class="demo-form-inline">
+            <el-form-item prop="sourceNodeUuid">
+              <el-select filterable
+                         @change="sourceNodeUuidChange(model,index)"
+                         style="width: 140px"
+                         v-model="model.sourceNodeUuid"
+                         placeholder="开始节点">
+                <el-option
+                  v-for="item in nodeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="edgeStyleUuid">
+              <el-select filterable
+                         style="width: 140px"
+                         v-model="model.edgeStyleUuid"
+                         placeholder="边样式">
+                <el-option
+                  v-for="item in edgeStyleOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="targetNodeUuid">
+              <el-select filterable
+                         @change="targetNodeUuidChange(model,index)"
+                         style="width: 140px"
+                         v-model="model.targetNodeUuid"
+                         placeholder="目标节点">
+                <el-option
+                  v-for="item in nodeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="nodeDataMode">
+              <el-select filterable
+                         style="width: 140px"
+                         v-model="model.nodeDataMode"
+                         placeholder="节点匹配类型">
+                <el-option
+                  v-for="item in nodeDataModeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="hoverName">
+              <el-input style="width: 140px" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
+            </el-form-item>
+            <el-form-item prop="nodeDataKey">
+              <el-input style="width: 140px" v-model="model.nodeDataKey" placeholder="匹配值"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-tooltip content="删除记录" placement="top">
+                <el-button :disabled="index!==0" type="danger" icon="el-icon-delete" circle size="mini"
+                           @click="deleteOne(index)">
+                </el-button>
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item>
+              <el-tooltip content="增加记录" placement="top">
+                <el-button type="primary" icon="el-icon-circle-plus" circle size="mini"
+                           @click="addNewOne(index)">
+                </el-button>
+              </el-tooltip>
+            </el-form-item>
+          </el-form>
+        </el-row>
+      </el-col>
+      <el-col :span="4">
+        <el-tree v-show="treeData.length>0" :data="treeData"
+                 node-key="nodeId"
+                 :default-expanded-keys="getExpandedKeys()"
+                 :props="defaultProps"></el-tree>
+      </el-col>
+      <p v-show="treeData.length === 0"><b>暂无数据</b></p>
+    </el-row>
     <span slot="footer" class="dialog-footer">
     <el-button @click="clearForm">取 消</el-button>
     <el-button type="primary" @click="save">确 定</el-button>
@@ -96,6 +197,16 @@ export default {
         edges: [],
         nodes: []
       },
+      relationModel: [
+        {
+          sourceNodeUuid: '',
+          targetNodeUuid: '',
+          edgeStyleUuid: '',
+          hoverName: '',
+          nodeDataKey: '',
+          nodeDataMode: ''
+        }
+      ],
       rules: {
         systemUuid: [
           {required: true, message: '此项必填', trigger: 'change'},
@@ -114,7 +225,12 @@ export default {
       edgeStyleOptions: [],
       nodeDataModeOptions: [],
       nodeTypesOptions: [],
-    }
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    };
   },
   async created() {
     this.systemOptions = await systemSelector();
@@ -183,6 +299,40 @@ export default {
         vm.saveData.nodes = []
         vm.saveData.edges = []
       }
+    },
+    getExpandedKeys() {
+      let vm = this
+      let expandedKeys = []
+      for (let i = 0; i < vm.treeData.length; i++) {
+        expandedKeys.push(vm.treeData[i].label)
+        if (vm.treeData[i].children) {
+          vm.loopExpandedKeys(expandedKeys, vm.treeData[i].children)
+        }
+      }
+      return expandedKeys;
+    },
+    loopExpandedKeys(expandedKeys, treeData) {
+      let vm = this
+      if (treeData) {
+        for (let i = 0; i < treeData.length; i++) {
+          expandedKeys.push(treeData[i].label)
+          if (treeData[i].children) {
+            vm.loopExpandedKeys(expandedKeys, treeData[i].children)
+          }
+        }
+      }
+    },
+    sourceNodeUuidChange(model, index) {
+
+    },
+    targetNodeUuidChange(model, index) {
+
+    },
+    deleteOne(index) {
+
+    },
+    addNewOne(index) {
+
     }
   }
 }
-- 
Gitee


From 1adde69bf8dea22eb4dda9099fd2970ef03859b6 Mon Sep 17 00:00:00 2001
From: icanci <qiang1.zhu@ly.com>
Date: Sun, 17 Sep 2023 10:59:15 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E7=BA=A0=E5=AF=9F=E5=9B=BE=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vueboot/src/api/loadSelectorApi.js        |   2 -
 .../bic-config/components/ruleTreeList.vue    | 118 ++++++
 .../bic-config/components/ruleTreeNode.vue    | 223 +++++++++++
 .../bic-config/dialog/bic-edit-form-back.vue  | 347 +++++++++++++++++
 .../views/bic-config/dialog/bic-edit-form.vue | 356 ++++++++++--------
 .../bic-config/dialog/bic-edit-tree-view.vue  | 108 ++++++
 6 files changed, 989 insertions(+), 165 deletions(-)
 create mode 100644 views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue
 create mode 100644 views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
 create mode 100644 views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form-back.vue
 create mode 100644 views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-tree-view.vue

diff --git a/views/src/main/resources/vueboot/src/api/loadSelectorApi.js b/views/src/main/resources/vueboot/src/api/loadSelectorApi.js
index 194cc86..c25e980 100644
--- a/views/src/main/resources/vueboot/src/api/loadSelectorApi.js
+++ b/views/src/main/resources/vueboot/src/api/loadSelectorApi.js
@@ -5,7 +5,6 @@ export async function loadFuncTypes() {
     url: '/bicAdmin/common/funcType',
     method: 'get'
   })
-  console.log(ret)
   if (ret.ok) {
     return ret.data.textValues;
   }
@@ -17,7 +16,6 @@ export async function nodeDataModes() {
     url: '/bicAdmin/common/nodeDataMode',
     method: 'get'
   })
-  console.log(ret)
   if (ret.ok) {
     return ret.data.textValues;
   }
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue
new file mode 100644
index 0000000..a7aa8c8
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue
@@ -0,0 +1,118 @@
+<style scoped>
+.el-divider--horizontal {
+  margin: 12px 0;
+}
+
+.leftButton {
+  position: absolute;
+  top: 51%;
+  transform: translateY(-51%);
+}
+
+.el-button.is-circle {
+  border-radius: 0%;
+}
+
+.el-button--mini.is-circle {
+  padding: 4px;
+}
+
+.rule_tree_root {
+  width: 25px;
+  display: flex;
+  /*margin: 20px 10px;*/
+}
+
+.rule_tree {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  width: 40px;
+  margin-right: 0px;
+}
+
+.rule_tree_top {
+  width: 90%;
+  top: 15px;
+  position: relative;
+  flex-grow: 2;
+
+  margin-left: 11px;
+  margin-bottom: 15px;
+
+  border-radius: 1px;
+  border-left: 1px solid #d3dce6;
+  border-top: 1px solid #d3dce6;
+  border-bottom: 1px solid #d3dce6;
+}
+
+.rule_tree_bottom {
+  width: 100%;
+  bottom: 15px;
+  position: relative;
+  /*flex-grow: 2;*/
+
+  margin-left: 16px;
+  margin-top: 15px;
+
+  border-left: 1px solid #d3dce6;
+  border-radius: 1px;
+  /*border-bottom: 1px solid #d3dce6;*/
+}
+
+</style>
+<template>
+  <div>
+    <div v-if="showSelf">
+      <el-row :class="'rule_tree_root'">
+        <el-col class="rule_tree">
+          <rule-tree-node
+            style="text-align: left;"
+            :relation-model="relationModel"
+            :selectors="selectors"
+            :root="true"
+          >
+          </rule-tree-node>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+
+import ruleTreeNode from "./ruleTreeNode";
+
+export default {
+  name: "ruleTreeList",
+  filters: {},
+  props: [],
+  components: {
+    ruleTreeNode
+  },
+  data() {
+    return {
+      showSelf: false,
+      selectors: {},
+      relationModel: []
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    async load(data) {
+      let vm = this
+      vm.selectors = data.selectors
+      vm.relationModel = data.relationModel
+      vm.showSelf = true
+    },
+    refresh(data) {
+      let vm = this
+      vm.selectors = data.selectors
+      vm.relationModel = data.relationModel
+    }
+  }
+}
+</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
new file mode 100644
index 0000000..17bd920
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
@@ -0,0 +1,223 @@
+<style>
+
+.leftButton {
+  position: absolute;
+  top: 51%;
+  transform: translateY(-51%);
+}
+
+.el-button.is-circle {
+  border-radius: 0%;
+}
+
+.el-button--mini.is-circle {
+  padding: 4px;
+}
+
+.rule_tree_root {
+  width: 25px;
+  display: flex;
+  /*margin: 20px 10px;*/
+}
+
+.rule_tree_item {
+  display: flex;
+  padding: 0 0 0 10px !important;
+}
+
+.rule_tree_left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  width: 20px;
+  margin-right: 12px;
+}
+
+.rule_tree_left_top {
+  width: 95%;
+  top: 15px;
+  position: relative;
+  flex-grow: 2;
+
+  margin-left: 11px;
+  margin-bottom: 15px;
+
+  border-radius: 1px;
+  border-left: 1px solid #d3dce6;
+  border-top: 1px solid #d3dce6;
+  border-bottom: 1px solid #d3dce6;
+}
+
+.rule_tree_left_bottom {
+  width: 100%;
+  bottom: 15px;
+  position: relative;
+  /*flex-grow: 2;*/
+
+  margin-left: 16px;
+  margin-top: 15px;
+
+  border-left: 1px solid #d3dce6;
+  border-radius: 1px;
+  /*border-bottom: 1px solid #d3dce6;*/
+}
+
+.rule_tree_right {
+  width: calc(100% - 55px);
+}
+
+.drawer_from_item {
+  margin-top: 20px;
+}
+
+.drawer_from_item_inner {
+  width: 90%;
+}
+</style>
+<template>
+  <div>
+    <el-row :class="root?'rule_tree_root':'rule_tree_item'">
+      <el-col class="rule_tree_left">
+        <el-row v-for="(model, index) in relationModel" :key="index">
+          <el-row>
+            <el-form
+              style="line-height: 40px;height: 40px;display: flex;" :inline="true" class="demo-form-inline">
+              <el-form-item prop="sourceNodeUuid">
+                <el-select filterable
+                           style="width: 140px"
+                           v-model="model.sourceNodeUuid"
+                           placeholder="开始节点">
+                  <el-option
+                    v-for="item in selectors.nodeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="edgeStyleUuid">
+                <el-select filterable
+                           style="width: 140px"
+                           v-model="model.edgeStyleUuid"
+                           placeholder="边样式">
+                  <el-option
+                    v-for="item in selectors.edgeStyleOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="targetNodeUuid">
+                <el-select filterable
+                           style="width: 140px"
+                           v-model="model.targetNodeUuid"
+                           placeholder="目标节点">
+                  <el-option
+                    v-for="item in selectors.nodeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="nodeDataMode">
+                <el-select filterable
+                           style="width: 140px"
+                           v-model="model.nodeDataMode"
+                           placeholder="节点匹配类型">
+                  <el-option
+                    v-for="item in selectors.nodeDataModeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="hoverName">
+                <el-input style="width: 140px" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
+              </el-form-item>
+              <el-form-item prop="nodeDataKey">
+                <el-input style="width: 140px" v-model="model.nodeDataKey" placeholder="匹配值"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-tooltip content="删除记录" placement="top">
+                  <el-button :disabled="index===0" type="danger" icon="el-icon-delete" circle size="mini"
+                             @click="deleteOne(index)">
+                  </el-button>
+                </el-tooltip>
+              </el-form-item>
+              <el-form-item>
+                <el-tooltip content="增加兄弟" placement="top">
+                  <el-button type="primary" icon="el-icon-circle-plus" circle size="mini"
+                             @click="addBrother(index)">
+                  </el-button>
+                </el-tooltip>
+              </el-form-item>
+              <el-form-item>
+                <el-tooltip content="增加孩子" placement="top">
+                  <el-button type="warning" icon="el-icon-circle-plus" circle size="mini"
+                             @click="addChild(index)">
+                  </el-button>
+                </el-tooltip>
+              </el-form-item>
+            </el-form>
+            <rule-tree-node
+              v-if="model.children && model.children.length>0"
+              :relation-model="model.children"
+              :selectors="selectors"
+              :root="false"
+            >
+            </rule-tree-node>
+          </el-row>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "ruleTreeNode",
+  filters: {},
+  props: ['relationModel', "selectors", "root"],
+  components: {},
+  data() {
+    return {
+      tempRelationModel: {
+        sourceNodeUuid: '',
+        edgeStyleUuid: '',
+        targetNodeUuid: '',
+        nodeDataMode: '',
+        hoverName: '',
+        nodeDataKey: '',
+        children: []
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    deleteOne(index) {
+
+    },
+    addBrother(index) {
+      let vm = this
+      vm.relationModel.push(
+        vm.$cloneObj(vm.tempRelationModel)
+      )
+    },
+    addChild(index) {
+      let vm = this
+      vm.relationModel[index].children = []
+
+      vm.relationModel[index].children.push(
+        vm.$cloneObj(vm.tempRelationModel)
+      )
+    },
+  }
+}
+</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form-back.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form-back.vue
new file mode 100644
index 0000000..c4473a6
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form-back.vue
@@ -0,0 +1,347 @@
+<style scoped>
+
+.el-divider--horizontal {
+  margin: 12px 0;
+}
+
+</style>
+<template>
+  <el-dialog
+    title="单元纠察图配置"
+    :visible.sync="dialogVisible"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    width="90%"
+    :before-close="clearForm">
+
+    <el-form
+      :label-position="labelPosition"
+      label-width="80px"
+      :model="saveData"
+      :rules="rules"
+      :inline="true"
+      ref="ruleForm"
+    >
+      <el-form-item label="系统" prop="systemUuid">
+        <el-select filterable
+                   @change="refreshUseCaseOptions"
+                   :disabled="saveData.id && saveData.id !==''" v-model="saveData.systemUuid" placeholder="请选择系统">
+          <el-option
+            v-for="item in systemOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用例" prop="useCaseUuid">
+        <el-select :disabled="saveData.systemUuid === '' ||(saveData.id && saveData.id !=='')"
+                   @change="refreshUnitViewOptions"
+                   clearable filterable v-model="saveData.useCaseUuid" placeholder="请选择用例">
+          <el-option
+            v-for="item in useCaseOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-divider></el-divider>
+    <el-row>
+      <el-col :span="20">
+        <p style="color: #47e1c5"><b>纠察图关联</b></p>
+      </el-col>
+      <el-col :span="4">
+        <p style="color: red"><b>纠察图类树图</b></p>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="20">
+        <el-row v-for="(model,index) in  relationModel">
+          <el-form :inline="true" class="demo-form-inline">
+            <el-form-item prop="sourceNodeUuid">
+              <el-select filterable
+                         @change="sourceNodeUuidChange(model,index)"
+                         style="width: 140px"
+                         v-model="model.sourceNodeUuid"
+                         placeholder="开始节点">
+                <el-option
+                  v-for="item in nodeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="edgeStyleUuid">
+              <el-select filterable
+                         style="width: 140px"
+                         v-model="model.edgeStyleUuid"
+                         placeholder="边样式">
+                <el-option
+                  v-for="item in edgeStyleOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="targetNodeUuid">
+              <el-select filterable
+                         @change="targetNodeUuidChange(model,index)"
+                         style="width: 140px"
+                         v-model="model.targetNodeUuid"
+                         placeholder="目标节点">
+                <el-option
+                  v-for="item in nodeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="nodeDataMode">
+              <el-select filterable
+                         style="width: 140px"
+                         v-model="model.nodeDataMode"
+                         placeholder="节点匹配类型">
+                <el-option
+                  v-for="item in nodeDataModeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="hoverName">
+              <el-input style="width: 140px" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
+            </el-form-item>
+            <el-form-item prop="nodeDataKey">
+              <el-input style="width: 140px" v-model="model.nodeDataKey" placeholder="匹配值"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-tooltip content="删除记录" placement="top">
+                <el-button :disabled="index===0" type="danger" icon="el-icon-delete" circle size="mini"
+                           @click="deleteOne(index)">
+                </el-button>
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item>
+              <el-tooltip content="增加记录" placement="top">
+                <el-button type="primary" icon="el-icon-circle-plus" circle size="mini"
+                           @click="addNewOne(index)">
+                </el-button>
+              </el-tooltip>
+            </el-form-item>
+          </el-form>
+        </el-row>
+      </el-col>
+      <el-col :span="4">
+        <el-tree v-show="treeData.length>0" :data="treeData"
+                 node-key="nodeId"
+                 :default-expanded-keys="getExpandedKeys()"
+                 :props="defaultProps"></el-tree>
+      </el-col>
+      <p v-show="treeData.length === 0"><b>暂无数据</b></p>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="clearForm">取 消</el-button>
+    <el-button type="primary" @click="save">确 定</el-button>
+  </span>
+  </el-dialog>
+</template>
+<script>
+
+import {remoteValidatesSystemKey, remoteValidateSystemName, systemSave} from "@/api/system";
+import {edgeStyleSelector, nodeDataModes, nodeSelector, nodeStyleSelector, nodeTypes, nodeVueSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
+import {remoteValidatesUseCaseKey, remoteValidateUseCaseName, useCaseSave} from "@/api/useCase";
+import {remoteValidateUnique, remoteValidateUnitViewUnique} from "@/api/unitView";
+
+export default {
+  name: "useCaseForm",
+  filters: {},
+  components: {},
+  data() {
+    const validateName = async (rule, value, callback) => {
+      if (this.saveData.id) {
+        callback()
+      }
+      let systemUuid = this.saveData.systemUuid;
+      let useCaseUuid = this.saveData.useCaseUuid;
+
+      if (systemUuid === '') {
+        callback(new Error("请选择纠察图所属系统"))
+        return;
+      }
+
+      if (useCaseUuid === '') {
+        callback(new Error("请选择纠察图所属用例"))
+        return;
+      }
+
+      let ret = await remoteValidateUnitViewUnique(systemUuid, useCaseUuid);
+      if (ret.data.result) {
+        callback()
+      } else {
+        callback(new Error("当前系统当前用例已经存在纠察图"))
+      }
+    };
+
+    return {
+      labelPosition: 'right',
+      dialogVisible: false,
+      saveData: {
+        systemUuid: '',
+        useCaseUuid: '',
+        edges: [],
+        nodes: []
+      },
+      relationModel: [
+        {
+          sourceNodeUuid: '',
+          targetNodeUuid: '',
+          edgeStyleUuid: '',
+          hoverName: '',
+          nodeDataKey: '',
+          nodeDataMode: ''
+        }
+      ],
+      rules: {
+        systemUuid: [
+          {required: true, message: '此项必填', trigger: 'change'},
+          {validator: validateName, trigger: 'blur'}
+        ],
+        useCaseUuid: [
+          {required: true, message: '此项必填', trigger: 'change'},
+          {validator: validateName, trigger: 'blur'}
+        ],
+      },
+      systemOptions: [],
+      useCaseOptions: [],
+      nodeOptions: [],
+      nodeVueOptions: [],
+      nodeStyleOptions: [],
+      edgeStyleOptions: [],
+      nodeDataModeOptions: [],
+      nodeTypesOptions: [],
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    };
+  },
+  async created() {
+    this.systemOptions = await systemSelector();
+    this.nodeDataModeOptions = await nodeDataModes();
+    this.nodeTypesOptions = await nodeTypes();
+  },
+  mounted() {
+  },
+  methods: {
+    load(data) {
+      let vm = this
+      if (data) {
+        vm.saveData = vm.$cloneObj(data)
+      }
+      vm.dialogVisible = true
+    },
+    save() {
+      let vm = this
+      this.$refs['ruleForm'].validate(async (valid) => {
+        if (valid) {
+          await vm.doSave(this.saveData)
+        }
+      })
+    },
+    async doSave(saveData) {
+      let vm = this
+      let ret = await useCaseSave(saveData);
+      if (ret.ok) {
+        vm.$message({type: 'success', message: '保存成功'});
+      } else {
+        vm.$message({type: 'error', message: '保存失败：' + ret.message});
+      }
+      vm.clearForm()
+      vm.$parent.query()
+    },
+    clearForm() {
+      let vm = this
+      try {
+        vm.saveData = {
+          systemUuid: '',
+          useCaseUuid: '',
+          edges: [],
+          nodes: []
+        }
+        vm.$refs['ruleForm'].resetFields()
+      } catch (e) {
+        console.log(e)
+      }
+      vm.dialogVisible = false
+    },
+    async refreshUseCaseOptions() {
+      let vm = this
+      vm.saveData.useCaseUuid = ''
+      vm.saveData.nodes = []
+      vm.saveData.edges = []
+
+      vm.useCaseOptions = await useCaseSelector(vm.saveData.systemUuid)
+      vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
+      vm.nodeVueOptions = await nodeVueSelector(vm.saveData.systemUuid)
+      vm.nodeStyleOptions = await nodeStyleSelector(vm.saveData.systemUuid)
+      vm.edgeStyleOptions = await edgeStyleSelector(vm.saveData.systemUuid)
+    },
+    refreshUnitViewOptions() {
+      let vm = this
+      if (vm.saveData.useCaseUuid === '') {
+        vm.saveData.nodes = []
+        vm.saveData.edges = []
+      }
+    },
+    getExpandedKeys() {
+      let vm = this
+      let expandedKeys = []
+      for (let i = 0; i < vm.treeData.length; i++) {
+        expandedKeys.push(vm.treeData[i].label)
+        if (vm.treeData[i].children) {
+          vm.loopExpandedKeys(expandedKeys, vm.treeData[i].children)
+        }
+      }
+      return expandedKeys;
+    },
+    loopExpandedKeys(expandedKeys, treeData) {
+      let vm = this
+      if (treeData) {
+        for (let i = 0; i < treeData.length; i++) {
+          expandedKeys.push(treeData[i].label)
+          if (treeData[i].children) {
+            vm.loopExpandedKeys(expandedKeys, treeData[i].children)
+          }
+        }
+      }
+    },
+    sourceNodeUuidChange(model, index) {
+
+    },
+    targetNodeUuidChange(model, index) {
+
+    },
+    deleteOne(index) {
+
+    },
+    addNewOne(index) {
+      let vm = this
+      vm.relationModel.push({
+        sourceNodeUuid: '',
+        targetNodeUuid: '',
+        edgeStyleUuid: '',
+        hoverName: '',
+        nodeDataKey: '',
+        nodeDataMode: ''
+      })
+    }
+  }
+}
+</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
index 8c57b8b..c0ed0da 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
@@ -6,162 +6,91 @@
 
 </style>
 <template>
-  <el-dialog
-    title="单元纠察图配置"
-    :visible.sync="dialogVisible"
-    :close-on-press-escape="false"
-    :close-on-click-modal="false"
-    width="90%"
-    :before-close="clearForm">
+  <div>
+    <el-dialog
+      title="单元纠察图配置"
+      :visible.sync="dialogVisible"
+      :close-on-press-escape="false"
+      :close-on-click-modal="false"
+      width="90%"
+      :before-close="clearForm">
 
-    <el-form
-      :label-position="labelPosition"
-      label-width="80px"
-      :model="saveData"
-      :rules="rules"
-      :inline="true"
-      ref="ruleForm"
-    >
-      <el-form-item label="系统" prop="systemUuid">
-        <el-select filterable
-                   @change="refreshUseCaseOptions"
-                   :disabled="saveData.id && saveData.id !==''" v-model="saveData.systemUuid" placeholder="请选择系统">
-          <el-option
-            v-for="item in systemOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="用例" prop="useCaseUuid">
-        <el-select :disabled="saveData.systemUuid === '' ||(saveData.id && saveData.id !=='')"
-                   @change="refreshUnitViewOptions"
-                   clearable filterable v-model="saveData.useCaseUuid" placeholder="请选择用例">
-          <el-option
-            v-for="item in useCaseOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <el-divider></el-divider>
-    <el-row>
-      <el-col :span="20">
-        <p style="color: #47e1c5"><b>纠察图关联</b></p>
-      </el-col>
-      <el-col :span="4">
-        <p style="color: red"><b>纠察图类树图</b></p>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="20">
-        <el-row v-for="(model,index) in  relationModel">
-          <el-form :inline="true" class="demo-form-inline">
-            <el-form-item prop="sourceNodeUuid">
-              <el-select filterable
-                         @change="sourceNodeUuidChange(model,index)"
-                         style="width: 140px"
-                         v-model="model.sourceNodeUuid"
-                         placeholder="开始节点">
-                <el-option
-                  v-for="item in nodeOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item prop="edgeStyleUuid">
-              <el-select filterable
-                         style="width: 140px"
-                         v-model="model.edgeStyleUuid"
-                         placeholder="边样式">
-                <el-option
-                  v-for="item in edgeStyleOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item prop="targetNodeUuid">
-              <el-select filterable
-                         @change="targetNodeUuidChange(model,index)"
-                         style="width: 140px"
-                         v-model="model.targetNodeUuid"
-                         placeholder="目标节点">
-                <el-option
-                  v-for="item in nodeOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item prop="nodeDataMode">
-              <el-select filterable
-                         style="width: 140px"
-                         v-model="model.nodeDataMode"
-                         placeholder="节点匹配类型">
-                <el-option
-                  v-for="item in nodeDataModeOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item prop="hoverName">
-              <el-input style="width: 140px" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
-            </el-form-item>
-            <el-form-item prop="nodeDataKey">
-              <el-input style="width: 140px" v-model="model.nodeDataKey" placeholder="匹配值"></el-input>
-            </el-form-item>
-            <el-form-item>
-              <el-tooltip content="删除记录" placement="top">
-                <el-button :disabled="index!==0" type="danger" icon="el-icon-delete" circle size="mini"
-                           @click="deleteOne(index)">
-                </el-button>
-              </el-tooltip>
-            </el-form-item>
-            <el-form-item>
-              <el-tooltip content="增加记录" placement="top">
-                <el-button type="primary" icon="el-icon-circle-plus" circle size="mini"
-                           @click="addNewOne(index)">
-                </el-button>
-              </el-tooltip>
-            </el-form-item>
-          </el-form>
-        </el-row>
-      </el-col>
-      <el-col :span="4">
-        <el-tree v-show="treeData.length>0" :data="treeData"
-                 node-key="nodeId"
-                 :default-expanded-keys="getExpandedKeys()"
-                 :props="defaultProps"></el-tree>
-      </el-col>
-      <p v-show="treeData.length === 0"><b>暂无数据</b></p>
-    </el-row>
-    <span slot="footer" class="dialog-footer">
+      <el-form
+        :label-position="labelPosition"
+        label-width="80px"
+        :model="saveData"
+        :rules="rules"
+        :inline="true"
+        ref="ruleForm"
+      >
+        <el-form-item label="系统" prop="systemUuid">
+          <el-select filterable
+                     @change="refreshUseCaseOptions"
+                     :disabled="saveData.id && saveData.id !==''" v-model="saveData.systemUuid" placeholder="请选择系统">
+            <el-option
+              v-for="item in systemOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用例" prop="useCaseUuid">
+          <el-select :disabled="saveData.systemUuid === '' ||(saveData.id && saveData.id !=='')"
+                     @change="refreshUnitViewOptions"
+                     filterable
+                     v-model="saveData.useCaseUuid"
+                     placeholder="请选择用例">
+            <el-option
+              v-for="item in useCaseOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="treeView">纠察图树结构</el-button>
+        </el-form-item>
+      </el-form>
+      <el-divider></el-divider>
+      <el-row>
+        <rule-tree-list ref="ruleTreeList"></rule-tree-list>
+      </el-row>
+
+      <span slot="footer" class="dialog-footer">
     <el-button @click="clearForm">取 消</el-button>
     <el-button type="primary" @click="save">确 定</el-button>
   </span>
-  </el-dialog>
+    </el-dialog>
+
+    <el-drawer
+      title="纠察图树结构"
+      size="40%"
+      :visible.sync="treeViewFlag"
+      :with-header="true">
+      <el-tree
+        :data="treeData"
+        node-key="nodeId"
+        :default-expanded-keys="getExpandedKeys()"
+        :props="defaultProps">
+      </el-tree>
+    </el-drawer>
+  </div>
 </template>
 <script>
 
-import {remoteValidatesSystemKey, remoteValidateSystemName, systemSave} from "@/api/system";
 import {edgeStyleSelector, nodeDataModes, nodeSelector, nodeStyleSelector, nodeTypes, nodeVueSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
-import {remoteValidatesUseCaseKey, remoteValidateUseCaseName, useCaseSave} from "@/api/useCase";
-import {remoteValidateUnique, remoteValidateUnitViewUnique} from "@/api/unitView";
+import {useCaseSave} from "@/api/useCase";
+import {remoteValidateUnitViewUnique} from "@/api/unitView";
+import ruleTreeList from "@/views/bic-config/components/ruleTreeList";
 
 export default {
-  name: "useCaseForm",
+  name: "bicEditForm",
   filters: {},
-  components: {},
+  components: {
+    ruleTreeList
+  },
   data() {
     const validateName = async (rule, value, callback) => {
       if (this.saveData.id) {
@@ -197,7 +126,8 @@ export default {
         edges: [],
         nodes: []
       },
-      relationModel: [
+      relationModel: [],
+      tempRelationModel: [
         {
           sourceNodeUuid: '',
           targetNodeUuid: '',
@@ -225,11 +155,28 @@ export default {
       edgeStyleOptions: [],
       nodeDataModeOptions: [],
       nodeTypesOptions: [],
+      selectors: {
+        nodeDataModeOptions: [],
+        nodeTypesOptions: [],
+        nodeOptions: [],
+        nodeVueOptions: [],
+        nodeStyleOptions: [],
+        edgeStyleOptions: [],
+      },
+      tempSelectors: {
+        nodeDataModeOptions: [],
+        nodeTypesOptions: [],
+        nodeOptions: [],
+        nodeVueOptions: [],
+        nodeStyleOptions: [],
+        edgeStyleOptions: [],
+      },
+      treeViewFlag: false,
       treeData: [],
       defaultProps: {
         children: 'children',
         label: 'label'
-      }
+      },
     };
   },
   async created() {
@@ -246,6 +193,29 @@ export default {
         vm.saveData = vm.$cloneObj(data)
       }
       vm.dialogVisible = true
+
+      if (data) {
+        debugger
+        vm.reloadView()
+      } else {
+        vm.defaultLoad()
+      }
+    },
+    reloadSelectors() {
+
+    },
+    reloadRelationModel() {
+
+    },
+    reloadView() {
+      let vm = this
+      vm.reloadSelectors();
+      vm.reloadRelationModel();
+
+      vm.$nextTick(async () => {
+        // 组件
+        vm.$refs.ruleTreeList.load({relationModel: vm.relationModel, selectors: vm.selectors});
+      })
     },
     save() {
       let vm = this
@@ -257,6 +227,7 @@ export default {
     },
     async doSave(saveData) {
       let vm = this
+      // TODO save 逻辑
       let ret = await useCaseSave(saveData);
       if (ret.ok) {
         vm.$message({type: 'success', message: '保存成功'});
@@ -275,6 +246,7 @@ export default {
           edges: [],
           nodes: []
         }
+        vm.relationModel = []
         vm.$refs['ruleForm'].resetFields()
       } catch (e) {
         console.log(e)
@@ -284,27 +256,63 @@ export default {
     async refreshUseCaseOptions() {
       let vm = this
       vm.saveData.useCaseUuid = ''
-      vm.saveData.nodes = []
-      vm.saveData.edges = []
+      vm.relationModel = vm.getRelationModel()
 
       vm.useCaseOptions = await useCaseSelector(vm.saveData.systemUuid)
       vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
       vm.nodeVueOptions = await nodeVueSelector(vm.saveData.systemUuid)
       vm.nodeStyleOptions = await nodeStyleSelector(vm.saveData.systemUuid)
       vm.edgeStyleOptions = await edgeStyleSelector(vm.saveData.systemUuid)
+
+      vm.selectors = vm.getSelectors()
     },
     refreshUnitViewOptions() {
       let vm = this
-      if (vm.saveData.useCaseUuid === '') {
-        vm.saveData.nodes = []
-        vm.saveData.edges = []
+      vm.relationModel = vm.getRelationModel()
+      vm.selectors = vm.getEmptySelectors()
+      vm.$nextTick(async () => {
+        // 组件
+        vm.$refs.ruleTreeList.load({relationModel: vm.relationModel, selectors: vm.selectors});
+      })
+    },
+    defaultLoad() {
+      let vm = this
+      vm.relationModel = vm.getRelationModel()
+      vm.selectors = vm.getEmptySelectors()
+
+      vm.$nextTick(async () => {
+        // 组件
+        vm.$refs.ruleTreeList.load({relationModel: vm.relationModel, selectors: vm.selectors});
+      })
+    },
+    getRelationModel() {
+      return this.$cloneObj(this.tempRelationModel)
+    },
+    getEmptySelectors() {
+      return this.$cloneObj(this.tempSelectors)
+    },
+    getSelectors() {
+      let vm = this
+      return {
+        nodeDataModeOptions: vm.nodeDataModeOptions,
+        nodeTypesOptions: vm.nodeTypesOptions,
+        nodeOptions: vm.nodeOptions,
+        nodeVueOptions: vm.nodeVueOptions,
+        nodeStyleOptions: vm.nodeStyleOptions,
+        edgeStyleOptions: vm.edgeStyleOptions,
       }
     },
+    treeView() {
+      let vm = this
+      vm.treeData = vm.$cloneObj(vm.getRelationModel())
+      vm.loopFillUuid(vm.treeData)
+      vm.treeViewFlag = true
+    },
     getExpandedKeys() {
       let vm = this
       let expandedKeys = []
       for (let i = 0; i < vm.treeData.length; i++) {
-        expandedKeys.push(vm.treeData[i].label)
+        expandedKeys.push(vm.treeData[i].nodeId)
         if (vm.treeData[i].children) {
           vm.loopExpandedKeys(expandedKeys, vm.treeData[i].children)
         }
@@ -315,24 +323,46 @@ export default {
       let vm = this
       if (treeData) {
         for (let i = 0; i < treeData.length; i++) {
-          expandedKeys.push(treeData[i].label)
+          expandedKeys.push(treeData[i].nodeId)
           if (treeData[i].children) {
             vm.loopExpandedKeys(expandedKeys, treeData[i].children)
           }
         }
       }
     },
-    sourceNodeUuidChange(model, index) {
-
-    },
-    targetNodeUuidChange(model, index) {
-
+    loopFillUuid(obj) {
+      for (let i = 0; i < obj.length; i++) {
+        obj[i].nodeId = this.guid()
+        obj[i].label = this.getLabelName(obj[i])
+        if (obj[i].children) {
+          this.loopFillUuid(obj[i].children)
+        } else {
+          obj[i].children = []
+        }
+      }
     },
-    deleteOne(index) {
-
+    guid() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+      });
     },
-    addNewOne(index) {
-
+    getLabelName(labelV) {
+      let vm = this
+      let sourceNodeUuid = labelV.sourceNodeUuid;
+      let targetNodeUuid = labelV.targetNodeUuid;
+      let sourceName = 'empty-source-name'
+      let targetName = 'empty-target-name'
+      for (let i = 0; i < vm.nodeOptions.length; i++) {
+        let nodeOption = vm.nodeOptions[i];
+        if (nodeOption.value === sourceNodeUuid) {
+          sourceName = nodeOption.label
+        }
+        if (nodeOption.value === targetNodeUuid) {
+          targetName = nodeOption.label
+        }
+      }
+      return sourceName + " => " + targetName
     }
   }
 }
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-tree-view.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-tree-view.vue
new file mode 100644
index 0000000..622a144
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-tree-view.vue
@@ -0,0 +1,108 @@
+<style scoped>
+
+</style>
+<template>
+  <el-dialog
+    title="单元纠察图[树]视图"
+    v-show="show"
+    :visible.sync="show"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    append-to-body
+    width="50%"
+    :before-close="clearForm">
+
+    <el-tree v-show="treeData.length>0" :data="treeData"
+             node-key="nodeId"
+             :default-expanded-keys="getExpandedKeys()"
+             :props="defaultProps"></el-tree>
+
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="clearForm">关 闭</el-button>
+  </span>
+  </el-dialog>
+</template>
+<script>
+
+import {remoteValidatesSystemKey, remoteValidateSystemName, systemSave} from "@/api/system";
+import {edgeStyleSelector, nodeDataModes, nodeSelector, nodeStyleSelector, nodeTypes, nodeVueSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
+import {remoteValidatesUseCaseKey, remoteValidateUseCaseName, useCaseSave} from "@/api/useCase";
+import {remoteValidateUnique, remoteValidateUnitViewUnique} from "@/api/unitView";
+
+export default {
+  name: "useCaseForm",
+  filters: {},
+  components: {},
+  data() {
+    return {
+      labelPosition: 'right',
+      show: false,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      treeData: [],
+    };
+  },
+  created() {
+
+  },
+  mounted() {
+  },
+  methods: {
+    load(data) {
+      let vm = this
+      if (data) {
+        let $cloneObj = vm.$cloneObj(data);
+        vm.loopFillUuid($cloneObj)
+        vm.treeData = $cloneObj
+      }
+      console.log(vm.treeData)
+      vm.show = true
+    },
+    loopFillUuid(obj) {
+      for (let i = 0; i < obj.length; i++) {
+        obj[i].nodeId = this.guid()
+        obj[i].label ='xxxx'
+        if (obj[i].children) {
+          this.loopFillUuid(obj[i].children)
+        } else {
+          obj[i].children = []
+        }
+      }
+    },
+    guid() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+      });
+    },
+    clearForm() {
+      let vm = this
+      vm.show = false
+    },
+    getExpandedKeys() {
+      let vm = this
+      let expandedKeys = []
+      for (let i = 0; i < vm.treeData.length; i++) {
+        expandedKeys.push(vm.treeData[i].label)
+        if (vm.treeData[i].children) {
+          vm.loopExpandedKeys(expandedKeys, vm.treeData[i].children)
+        }
+      }
+      return expandedKeys;
+    },
+    loopExpandedKeys(expandedKeys, treeData) {
+      let vm = this
+      if (treeData) {
+        for (let i = 0; i < treeData.length; i++) {
+          expandedKeys.push(treeData[i].label)
+          if (treeData[i].children) {
+            vm.loopExpandedKeys(expandedKeys, treeData[i].children)
+          }
+        }
+      }
+    },
+  }
+}
+</script>
-- 
Gitee


From 561931654c25a4e7bc584a9d9dc2c985812b0d2e Mon Sep 17 00:00:00 2001
From: icanci <qiang1.zhu@ly.com>
Date: Sun, 17 Sep 2023 14:49:57 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E7=BA=A0=E5=AF=9F=E5=9B=BE=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bic-config/components/ruleTreeList.vue    |  6 +--
 .../bic-config/components/ruleTreeNode.vue    | 37 +++++++++++++++----
 .../views/bic-config/dialog/bic-edit-form.vue | 10 +++--
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue
index a7aa8c8..7e0536f 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue
@@ -108,10 +108,8 @@ export default {
       vm.relationModel = data.relationModel
       vm.showSelf = true
     },
-    refresh(data) {
-      let vm = this
-      vm.selectors = data.selectors
-      vm.relationModel = data.relationModel
+    getRelationModel() {
+      return this.relationModel
     }
   }
 }
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
index 17bd920..364eb29 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
@@ -85,6 +85,7 @@
               style="line-height: 40px;height: 40px;display: flex;" :inline="true" class="demo-form-inline">
               <el-form-item prop="sourceNodeUuid">
                 <el-select filterable
+                           @change="refreshSelf()"
                            style="width: 140px"
                            v-model="model.sourceNodeUuid"
                            placeholder="开始节点">
@@ -99,6 +100,7 @@
               <el-form-item prop="edgeStyleUuid">
                 <el-select filterable
                            style="width: 140px"
+                           @change="refreshSelf()"
                            v-model="model.edgeStyleUuid"
                            placeholder="边样式">
                   <el-option
@@ -112,6 +114,7 @@
               <el-form-item prop="targetNodeUuid">
                 <el-select filterable
                            style="width: 140px"
+                           @change="refreshSelf()"
                            v-model="model.targetNodeUuid"
                            placeholder="目标节点">
                   <el-option
@@ -125,6 +128,7 @@
               <el-form-item prop="nodeDataMode">
                 <el-select filterable
                            style="width: 140px"
+                           @change="refreshSelf()"
                            v-model="model.nodeDataMode"
                            placeholder="节点匹配类型">
                   <el-option
@@ -136,28 +140,37 @@
                 </el-select>
               </el-form-item>
               <el-form-item prop="hoverName">
-                <el-input style="width: 140px" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
+                <el-input style="width: 140px" v-on:input="refreshSelf()" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
               </el-form-item>
               <el-form-item prop="nodeDataKey">
-                <el-input style="width: 140px" v-model="model.nodeDataKey" placeholder="匹配值"></el-input>
+                <el-input style="width: 140px" v-on:input="refreshSelf()" v-model="model.nodeDataKey" placeholder="匹配值"></el-input>
               </el-form-item>
               <el-form-item>
                 <el-tooltip content="删除记录" placement="top">
-                  <el-button :disabled="index===0" type="danger" icon="el-icon-delete" circle size="mini"
-                             @click="deleteOne(index)">
-                  </el-button>
+                  <el-popconfirm
+                    confirm-button-text='删除'
+                    cancel-button-text='我再想想'
+                    confirm-button-type="danger"
+                    icon="el-icon-delete"
+                    icon-color="red"
+                    @onConfirm="deleteOne(index)"
+                    title="确定删除吗？如有子节点会一并删除！">
+                    <el-button
+                      slot="reference" :disabled="root" type="danger" icon="el-icon-delete" circle size="mini">
+                    </el-button>
+                  </el-popconfirm>
                 </el-tooltip>
               </el-form-item>
               <el-form-item>
                 <el-tooltip content="增加兄弟" placement="top">
-                  <el-button type="primary" icon="el-icon-circle-plus" circle size="mini"
+                  <el-button :disabled="root" type="primary" icon="el-icon-circle-plus" circle size="mini"
                              @click="addBrother(index)">
                   </el-button>
                 </el-tooltip>
               </el-form-item>
               <el-form-item>
                 <el-tooltip content="增加孩子" placement="top">
-                  <el-button type="warning" icon="el-icon-circle-plus" circle size="mini"
+                  <el-button type="warning" icon="el-icon-circle-plus-outline" circle size="mini"
                              @click="addChild(index)">
                   </el-button>
                 </el-tooltip>
@@ -202,13 +215,16 @@ export default {
   },
   methods: {
     deleteOne(index) {
-
+      let vm = this
+      vm.relationModel.splice(index, 1)
+      vm.$forceUpdate()
     },
     addBrother(index) {
       let vm = this
       vm.relationModel.push(
         vm.$cloneObj(vm.tempRelationModel)
       )
+      vm.$forceUpdate()
     },
     addChild(index) {
       let vm = this
@@ -217,7 +233,12 @@ export default {
       vm.relationModel[index].children.push(
         vm.$cloneObj(vm.tempRelationModel)
       )
+      vm.$forceUpdate()
     },
+    refreshSelf() {
+      let vm = this
+      vm.$forceUpdate()
+    }
   }
 }
 </script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
index c0ed0da..80262f2 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
@@ -195,7 +195,6 @@ export default {
       vm.dialogVisible = true
 
       if (data) {
-        debugger
         vm.reloadView()
       } else {
         vm.defaultLoad()
@@ -269,11 +268,14 @@ export default {
     refreshUnitViewOptions() {
       let vm = this
       vm.relationModel = vm.getRelationModel()
-      vm.selectors = vm.getEmptySelectors()
+      vm.selectors = vm.getSelectors()
       vm.$nextTick(async () => {
         // 组件
         vm.$refs.ruleTreeList.load({relationModel: vm.relationModel, selectors: vm.selectors});
       })
+    },
+    getSystemSelectors() {
+
     },
     defaultLoad() {
       let vm = this
@@ -304,7 +306,7 @@ export default {
     },
     treeView() {
       let vm = this
-      vm.treeData = vm.$cloneObj(vm.getRelationModel())
+      vm.treeData = vm.$cloneObj(vm.$refs.ruleTreeList.getRelationModel())
       vm.loopFillUuid(vm.treeData)
       vm.treeViewFlag = true
     },
@@ -362,7 +364,7 @@ export default {
           targetName = nodeOption.label
         }
       }
-      return sourceName + " => " + targetName
+      return sourceName
     }
   }
 }
-- 
Gitee


From fa54fa86ca830a99d4ffff4a001a859e3417ad44 Mon Sep 17 00:00:00 2001
From: icanci <qiang1.zhu@ly.com>
Date: Sun, 17 Sep 2023 15:54:24 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E7=BA=A0=E5=AF=9F=E5=9B=BE=E5=9B=BE?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bic/biz/mapper/UnitViewTreeMapper.java    |  17 +
 .../bic/biz/service/UnitViewTreeService.java  |  26 ++
 .../service/impl/UnitViewTreeServiceImpl.java |  59 +++
 .../model/graph/UnitViewTreeRelationVO.java   |  46 +++
 .../common/model/graph/UnitViewTreeVO.java    |  20 +
 .../mongo/daointerface/UnitViewTreeDAO.java   |  23 ++
 .../dal/mongo/dateobject/UnitViewTreeDO.java  |  19 +
 .../dateobject/UnitViewTreeRelationDO.java    |  46 +++
 .../dal/mongo/mongo/MongoUnitViewTreeDAO.java |  75 ++++
 .../resources/vueboot/src/api/unitViewTree.js |  27 ++
 .../resources/vueboot/src/router/index.js     |   6 +-
 .../bic-config/components/ruleTreeNode.vue    | 123 +++++--
 .../bic-config/dialog/bic-edit-form-back.vue  | 347 ------------------
 .../bic-config/dialog/bic-edit-tree-view.vue  | 108 ------
 ...-edit-form.vue => unit-view-tree-form.vue} |  44 +--
 .../{bic-edit.vue => unit-view-tree.vue}      |  16 +-
 .../web/controller/UnitViewController.java    |  90 ++---
 .../controller/UnitViewTreeController.java    |  46 +++
 .../bic/web/form/UnitViewTreeQueryForm.java   |  13 +
 .../bic/web/mapper/UnitViewTreeWebMapper.java |  17 +
 .../loopstack/bic/web/model/UnitViewTree.java |  21 ++
 .../bic/web/model/UnitViewTreeRelation.java   |  45 +++
 22 files changed, 676 insertions(+), 558 deletions(-)
 create mode 100644 biz/src/main/java/cn/icanci/loopstack/bic/biz/mapper/UnitViewTreeMapper.java
 create mode 100644 biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UnitViewTreeService.java
 create mode 100644 biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java
 create mode 100644 common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeRelationVO.java
 create mode 100644 common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeVO.java
 create mode 100644 dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UnitViewTreeDAO.java
 create mode 100644 dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeDO.java
 create mode 100644 dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeRelationDO.java
 create mode 100644 dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUnitViewTreeDAO.java
 create mode 100644 views/src/main/resources/vueboot/src/api/unitViewTree.js
 delete mode 100644 views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form-back.vue
 delete mode 100644 views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-tree-view.vue
 rename views/src/main/resources/vueboot/src/views/bic-config/dialog/{bic-edit-form.vue => unit-view-tree-form.vue} (92%)
 rename views/src/main/resources/vueboot/src/views/bic-config/{bic-edit.vue => unit-view-tree.vue} (93%)
 create mode 100644 web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewTreeController.java
 create mode 100644 web/src/main/java/cn/icanci/loopstack/bic/web/form/UnitViewTreeQueryForm.java
 create mode 100644 web/src/main/java/cn/icanci/loopstack/bic/web/mapper/UnitViewTreeWebMapper.java
 create mode 100644 web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTree.java
 create mode 100644 web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTreeRelation.java

diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/mapper/UnitViewTreeMapper.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/mapper/UnitViewTreeMapper.java
new file mode 100644
index 0000000..0397d3f
--- /dev/null
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/mapper/UnitViewTreeMapper.java
@@ -0,0 +1,17 @@
+package cn.icanci.loopstack.bic.biz.mapper;
+
+import org.mapstruct.Mapper;
+import org.mapstruct.NullValueMappingStrategy;
+
+import cn.icanci.loopstack.bic.biz.mapper.convertor.NodeDataModeEnumConverter;
+import cn.icanci.loopstack.bic.biz.mapper.convertor.NodeTypeEnumConverter;
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.dal.mongo.dateobject.UnitViewTreeDO;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:46
+ */
+@Mapper(componentModel = "spring", uses = { NodeDataModeEnumConverter.class, NodeTypeEnumConverter.class }, nullValueMappingStrategy = NullValueMappingStrategy.RETURN_NULL)
+public interface UnitViewTreeMapper extends BaseMapper<UnitViewTreeDO, UnitViewTreeVO> {
+}
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UnitViewTreeService.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UnitViewTreeService.java
new file mode 100644
index 0000000..565b62a
--- /dev/null
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UnitViewTreeService.java
@@ -0,0 +1,26 @@
+package cn.icanci.loopstack.bic.biz.service;
+
+import java.util.List;
+
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.dal.mongo.common.PageList;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:45
+ */
+public interface UnitViewTreeService extends BaseService<UnitViewTreeVO> {
+    @Override
+    List<UnitViewTreeVO> queryAll();
+
+    @Override
+    void save(UnitViewTreeVO unitViewTreeVO);
+
+    @Override
+    UnitViewTreeVO queryById(String id);
+
+    @Override
+    PageList<UnitViewTreeVO> queryPage(UnitViewTreeVO unitViewTreeVO, int pageNum, int pageSize);
+
+    UnitViewTreeVO queryBySystemUuidAndUseCaseUuid(String systemUuid, String useCaseUuid);
+}
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java
new file mode 100644
index 0000000..22db240
--- /dev/null
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java
@@ -0,0 +1,59 @@
+package cn.icanci.loopstack.bic.biz.service.impl;
+
+import java.util.List;
+
+import javax.annotation.Resource;
+
+import org.springframework.stereotype.Service;
+
+import cn.icanci.loopstack.bic.biz.mapper.UnitViewTreeMapper;
+import cn.icanci.loopstack.bic.biz.service.UnitViewTreeService;
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.dal.mongo.common.PageList;
+import cn.icanci.loopstack.bic.dal.mongo.daointerface.UnitViewTreeDAO;
+import cn.icanci.loopstack.bic.dal.mongo.dateobject.UnitViewTreeDO;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:45
+ */
+@Service
+public class UnitViewTreeServiceImpl implements UnitViewTreeService {
+
+    @Resource
+    private UnitViewTreeDAO    unitViewTreeDAO;
+    @Resource
+    private UnitViewTreeMapper unitViewTreeMapper;
+
+    @Override
+    public List<UnitViewTreeVO> queryAll() {
+        return unitViewTreeMapper.dos2vos(unitViewTreeDAO.queryAll());
+    }
+
+    @Override
+    public void save(UnitViewTreeVO unitViewTreeVO) {
+        // TODO 日志记录
+        if (doInsert(unitViewTreeVO)) {
+            UnitViewTreeDO insert = unitViewTreeMapper.vo2do(unitViewTreeVO);
+            unitViewTreeDAO.insert(insert);
+        } else {
+            unitViewTreeDAO.update(unitViewTreeMapper.vo2do(unitViewTreeVO));
+        }
+    }
+
+    @Override
+    public UnitViewTreeVO queryById(String id) {
+        return unitViewTreeMapper.do2vo(unitViewTreeDAO.queryOneById(id));
+    }
+
+    @Override
+    public PageList<UnitViewTreeVO> queryPage(UnitViewTreeVO unitViewTreeVO, int pageNum, int pageSize) {
+        PageList<UnitViewTreeDO> pageQuery = unitViewTreeDAO.pageQuery(unitViewTreeMapper.vo2do(unitViewTreeVO), pageNum, pageSize);
+        return new PageList<>(unitViewTreeMapper.dos2vos(pageQuery.getData()), pageQuery.getPaginator());
+    }
+
+    @Override
+    public UnitViewTreeVO queryBySystemUuidAndUseCaseUuid(String systemUuid, String useCaseUuid) {
+        return unitViewTreeMapper.do2vo(unitViewTreeDAO.queryBySystemUuidAndUseCaseUuid(systemUuid, useCaseUuid));
+    }
+}
diff --git a/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeRelationVO.java b/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeRelationVO.java
new file mode 100644
index 0000000..81163ae
--- /dev/null
+++ b/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeRelationVO.java
@@ -0,0 +1,46 @@
+package cn.icanci.loopstack.bic.common.model.graph;
+
+import cn.icanci.loopstack.bic.common.enums.NodeDataModeEnum;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:42
+ */
+@Data
+public class UnitViewTreeRelationVO {
+    // ====================== 起始节点配置 ======================
+    /** 起始节点 */
+    private String                       sourceNodeUuid;
+    /** 起始节点样式 */
+    private String                       sourceStyleUuid;
+    /** 起始节点唯一Key */
+    private String                       sourceNodeDataKey;
+    /** 起始节点匹配模式 */
+    private NodeDataModeEnum             sourceNodeDataMode;
+
+    // ====================== 结束节点配置 ======================
+
+    /** 结束节点 */
+    private String                       targetNodeUuid;
+    /** 结束节点样式 */
+    private String                       targetStyleUuid;
+    /** 结束节点唯一Key */
+    private String                       targetNodeDataKey;
+    /** 结束节点匹配模式 */
+    private NodeDataModeEnum             targetNodeDataMode;
+
+    // ====================== 边样式 ======================
+
+    /** 边样式 */
+    private String                       edgeStyleUuid;
+    /** 边HOVER */
+    private String                       hoverName;
+
+    // ====================== 孩子节点 ======================
+
+    /** 孩子节点 */
+    private List<UnitViewTreeRelationVO> children;
+}
diff --git a/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeVO.java b/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeVO.java
new file mode 100644
index 0000000..96e2553
--- /dev/null
+++ b/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeVO.java
@@ -0,0 +1,20 @@
+package cn.icanci.loopstack.bic.common.model.graph;
+
+import cn.icanci.loopstack.bic.common.model.BaseVO;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:41
+ */
+@Data
+public class UnitViewTreeVO extends BaseVO {
+    /** 系统唯一标识  */
+    private String                       systemUuid;
+    /** 用例唯一标识  */
+    private String                       useCaseUuid;
+    /** 图配置数据  */
+    private List<UnitViewTreeRelationVO> relationModel;
+}
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UnitViewTreeDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UnitViewTreeDAO.java
new file mode 100644
index 0000000..f661d4b
--- /dev/null
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UnitViewTreeDAO.java
@@ -0,0 +1,23 @@
+package cn.icanci.loopstack.bic.dal.mongo.daointerface;
+
+import cn.icanci.loopstack.bic.dal.mongo.dateobject.UnitViewTreeDO;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:48
+ */
+public interface UnitViewTreeDAO extends BaseDAO<UnitViewTreeDO> {
+    /** 文档对应的名字  */
+    String                COLLECTION_NAME  = BASE_COLLECTION_NAME + "unit-view-tree";
+    /** 文档对应的Class */
+    Class<UnitViewTreeDO> COLLECTION_CLASS = UnitViewTreeDO.class;
+
+    UnitViewTreeDO queryBySystemUuidAndUseCaseUuid(String systemUuid, String useCaseUuid);
+
+    /** 列 */
+    interface UnitViewTreeColumn extends BaseColumn {
+        String SYSTEM_UUID   = "systemUuid";
+        String USE_CASE_UUID = "useCaseUuid";
+    }
+
+}
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeDO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeDO.java
new file mode 100644
index 0000000..98ca35e
--- /dev/null
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeDO.java
@@ -0,0 +1,19 @@
+package cn.icanci.loopstack.bic.dal.mongo.dateobject;
+
+import java.util.List;
+
+import lombok.Data;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:47
+ */
+@Data
+public class UnitViewTreeDO extends BaseDO {
+    /** 系统唯一标识  */
+    private String                       systemUuid;
+    /** 用例唯一标识  */
+    private String                       useCaseUuid;
+    /** 图配置数据  */
+    private List<UnitViewTreeRelationDO> relationModel;
+}
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeRelationDO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeRelationDO.java
new file mode 100644
index 0000000..38bd043
--- /dev/null
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeRelationDO.java
@@ -0,0 +1,46 @@
+package cn.icanci.loopstack.bic.dal.mongo.dateobject;
+
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeRelationVO;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:47
+ */
+@Data
+public class UnitViewTreeRelationDO {
+    // ====================== 起始节点配置 ======================
+    /** 起始节点 */
+    private String                       sourceNodeUuid;
+    /** 起始节点样式 */
+    private String                       sourceStyleUuid;
+    /** 起始节点唯一Key */
+    private String                       sourceNodeDataKey;
+    /** 起始节点匹配模式 */
+    private String                       sourceNodeDataMode;
+
+    // ====================== 结束节点配置 ======================
+
+    /** 结束节点 */
+    private String                       targetNodeUuid;
+    /** 结束节点样式 */
+    private String                       targetStyleUuid;
+    /** 结束节点唯一Key */
+    private String                       targetNodeDataKey;
+    /** 结束节点匹配模式 */
+    private String                       targetNodeDataMode;
+
+    // ====================== 边样式 ======================
+
+    /** 边样式 */
+    private String                       edgeStyleUuid;
+    /** 边HOVER */
+    private String                       hoverName;
+
+    // ====================== 孩子节点 ======================
+
+    /** 孩子节点 */
+    private List<UnitViewTreeRelationVO> children;
+}
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUnitViewTreeDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUnitViewTreeDAO.java
new file mode 100644
index 0000000..e1529a3
--- /dev/null
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUnitViewTreeDAO.java
@@ -0,0 +1,75 @@
+package cn.icanci.loopstack.bic.dal.mongo.mongo;
+
+import java.util.List;
+
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.data.domain.Sort;
+import org.springframework.data.mongodb.core.query.Criteria;
+import org.springframework.data.mongodb.core.query.Query;
+import org.springframework.stereotype.Service;
+
+import cn.icanci.loopstack.bic.dal.mongo.common.PageList;
+import cn.icanci.loopstack.bic.dal.mongo.daointerface.UnitViewTreeDAO;
+import cn.icanci.loopstack.bic.dal.mongo.dateobject.UnitViewTreeDO;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:49
+ */
+@Service("unitViewDAO")
+public class MongoUnitViewTreeDAO extends AbstractBaseDAO<UnitViewTreeDO> implements UnitViewTreeDAO {
+    @Override
+    public void insert(UnitViewTreeDO unitViewTreeDO) {
+        super.insert(unitViewTreeDO);
+        mongoTemplate.insert(unitViewTreeDO, COLLECTION_NAME);
+    }
+
+    @Override
+    public void update(UnitViewTreeDO unitViewTreeDO) {
+        super.update(unitViewTreeDO);
+        mongoTemplate.save(unitViewTreeDO, COLLECTION_NAME);
+    }
+
+    @Override
+    public List<UnitViewTreeDO> queryAll() {
+        Criteria criteria = Criteria.where(UnitViewTreeColumn.ENV).is(DEFAULT_ENV);
+        Query query = new Query(criteria);
+        return mongoTemplate.find(query, COLLECTION_CLASS, COLLECTION_NAME);
+    }
+
+    @Override
+    public PageList<UnitViewTreeDO> pageQuery(UnitViewTreeDO unitViewTreeDO, int pageNum, int pageSize) {
+        Criteria criteria = Criteria.where(UnitViewTreeColumn.ENV).is(DEFAULT_ENV);
+        if (StringUtils.isNotBlank(unitViewTreeDO.getSystemUuid())) {
+            criteria.and(UnitViewTreeColumn.SYSTEM_UUID).is(unitViewTreeDO.getSystemUuid());
+        }
+        if (StringUtils.isNotBlank(unitViewTreeDO.getUseCaseUuid())) {
+            criteria.and(UnitViewTreeColumn.USE_CASE_UUID).is(unitViewTreeDO.getUseCaseUuid());
+        }
+        Query query = new Query(criteria);
+        query.with(Sort.by(Sort.Direction.DESC, UnitViewTreeColumn.CREATE_TIME));
+        return pageQuery(query, COLLECTION_CLASS, pageSize, pageNum, COLLECTION_NAME);
+    }
+
+    @Override
+    public UnitViewTreeDO queryOneById(String _id) {
+        Criteria criteria = Criteria.where(UnitViewTreeColumn._ID).is(_id);
+        criteria.and(UnitViewTreeColumn.ENV).is(DEFAULT_ENV);
+        Query query = new Query(criteria);
+        return mongoTemplate.findOne(query, COLLECTION_CLASS, COLLECTION_NAME);
+    }
+
+    @Override
+    public Class<? extends BaseColumn> getBaseColumn() {
+        return UnitViewTreeColumn.class;
+    }
+
+    @Override
+    public UnitViewTreeDO queryBySystemUuidAndUseCaseUuid(String systemUuid, String useCaseUuid) {
+        Criteria criteria = Criteria.where(UnitViewTreeColumn.USE_CASE_UUID).is(useCaseUuid);
+        criteria.and(UnitViewTreeColumn.ENV).is(DEFAULT_ENV);
+        criteria.and(UnitViewTreeColumn.SYSTEM_UUID).is(systemUuid);
+        Query query = new Query(criteria);
+        return mongoTemplate.findOne(query, COLLECTION_CLASS, COLLECTION_NAME);
+    }
+}
diff --git a/views/src/main/resources/vueboot/src/api/unitViewTree.js b/views/src/main/resources/vueboot/src/api/unitViewTree.js
new file mode 100644
index 0000000..f921f03
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/api/unitViewTree.js
@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+export async function unitViewTreePageQuery(unitViewTree, paginator) {
+  return await request({
+    url: '/bicAdmin/unitViewTree/query',
+    method: 'post',
+    data: {
+      'unitViewTree': unitViewTree,
+      'paginator': paginator
+    }
+  })
+}
+
+export async function unitViewTreeSave(unitViewTree) {
+  return await request({
+    url: '/bicAdmin/unitViewTree/save',
+    method: 'post',
+    data: unitViewTree
+  })
+}
+
+export async function remoteValidateUnitViewTreeUnique(systemUuid, useCaseUuid) {
+  return await request({
+    url: '/bicAdmin/unitViewTree/validateUnique/' + systemUuid + '/' + useCaseUuid,
+    method: 'get',
+  })
+}
diff --git a/views/src/main/resources/vueboot/src/router/index.js b/views/src/main/resources/vueboot/src/router/index.js
index 2a5ef7f..901ac06 100644
--- a/views/src/main/resources/vueboot/src/router/index.js
+++ b/views/src/main/resources/vueboot/src/router/index.js
@@ -167,9 +167,9 @@ export const constantRoutes = [
       //   meta: {title: '边函数配置'}
       // },
       {
-        path: 'bic-edit',
-        component: () => import('@/views/bic-config/bic-edit'),
-        name: 'bicEdit',
+        path: 'unit-view-tree',
+        component: () => import('@/views/bic-config/unit-view-tree'),
+        name: 'unitViewTree',
         meta: {title: '编辑纠察图'}
       },
     ]
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
index 364eb29..902f499 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
@@ -86,7 +86,7 @@
               <el-form-item prop="sourceNodeUuid">
                 <el-select filterable
                            @change="refreshSelf()"
-                           style="width: 140px"
+                           style="width: 180px"
                            v-model="model.sourceNodeUuid"
                            placeholder="开始节点">
                   <el-option
@@ -99,7 +99,7 @@
               </el-form-item>
               <el-form-item prop="edgeStyleUuid">
                 <el-select filterable
-                           style="width: 140px"
+                           style="width: 180px"
                            @change="refreshSelf()"
                            v-model="model.edgeStyleUuid"
                            placeholder="边样式">
@@ -113,7 +113,7 @@
               </el-form-item>
               <el-form-item prop="targetNodeUuid">
                 <el-select filterable
-                           style="width: 140px"
+                           style="width: 180px"
                            @change="refreshSelf()"
                            v-model="model.targetNodeUuid"
                            placeholder="目标节点">
@@ -125,25 +125,8 @@
                   </el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item prop="nodeDataMode">
-                <el-select filterable
-                           style="width: 140px"
-                           @change="refreshSelf()"
-                           v-model="model.nodeDataMode"
-                           placeholder="节点匹配类型">
-                  <el-option
-                    v-for="item in selectors.nodeDataModeOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-              </el-form-item>
               <el-form-item prop="hoverName">
-                <el-input style="width: 140px" v-on:input="refreshSelf()" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
-              </el-form-item>
-              <el-form-item prop="nodeDataKey">
-                <el-input style="width: 140px" v-on:input="refreshSelf()" v-model="model.nodeDataKey" placeholder="匹配值"></el-input>
+                <el-input style="width: 180px" v-on:input="refreshSelf()" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
               </el-form-item>
               <el-form-item>
                 <el-tooltip content="删除记录" placement="top">
@@ -175,6 +158,13 @@
                   </el-button>
                 </el-tooltip>
               </el-form-item>
+              <el-form-item>
+                <el-tooltip content="详细设计" placement="top">
+                  <el-button type="success" icon="el-icon-right" circle size="mini"
+                             @click="editModelDetail(index)">
+                  </el-button>
+                </el-tooltip>
+              </el-form-item>
             </el-form>
             <rule-tree-node
               v-if="model.children && model.children.length>0"
@@ -187,6 +177,78 @@
         </el-row>
       </el-col>
     </el-row>
+
+    <el-drawer
+      title="单节点详细设计"
+      size="40%"
+      :visible.sync="modelDetailFlag"
+      append-to-body
+      :with-header="true">
+      <el-card style="margin-left: 20px;margin-right: 20px">
+        <el-form
+          label-position="right"
+          ref="relationModelDetailForm" :model="relationModelDetail" label-width="180px">
+          <el-form-item label="开始节点样式" prop="sourceNodeDataMode">
+            <el-select filterable
+                       @change="refreshSelf()"
+                       v-model="relationModelDetail.sourceNodeDataMode"
+                       placeholder="开始节点样式">
+              <el-option
+                v-for="item in selectors.nodeStyleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="开始节点匹配类型" prop="sourceNodeDataMode">
+            <el-select filterable
+                       @change="refreshSelf()"
+                       v-model="relationModelDetail.sourceNodeDataMode"
+                       placeholder="开始节点匹配类型">
+              <el-option
+                v-for="item in selectors.nodeDataModeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="开始节点匹配值" prop="sourceNodeDataKey">
+            <el-input style="width: 200px" v-on:input="refreshSelf()" v-model="relationModelDetail.sourceNodeDataKey" placeholder="开始节点匹配值"></el-input>
+          </el-form-item>
+          <el-form-item label="结束节点样式" prop="targetStyleUuid">
+            <el-select filterable
+                       @change="refreshSelf()"
+                       v-model="relationModelDetail.targetStyleUuid"
+                       placeholder="结束节点样式">
+              <el-option
+                v-for="item in selectors.nodeStyleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="结束节点匹配类型" prop="targetNodeDataMode">
+            <el-select filterable
+                       @change="refreshSelf()"
+                       v-model="relationModelDetail.targetNodeDataMode"
+                       placeholder="结束节点匹配类型">
+              <el-option
+                v-for="item in selectors.nodeDataModeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="结束节点匹配值" prop="targetNodeDataKey">
+            <el-input style="width: 200px" v-on:input="refreshSelf()" v-model="relationModelDetail.targetNodeDataKey" placeholder="结束节点匹配值"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </el-drawer>
   </div>
 </template>
 <script>
@@ -200,13 +262,19 @@ export default {
     return {
       tempRelationModel: {
         sourceNodeUuid: '',
-        edgeStyleUuid: '',
+        sourceStyleUuid: '',
+        sourceNodeDataKey: '',
+        sourceNodeDataMode: '',
         targetNodeUuid: '',
-        nodeDataMode: '',
+        targetStyleUuid: '',
+        targetNodeDataKey: '',
+        targetNodeDataMode: '',
+        edgeStyleUuid: '',
         hoverName: '',
-        nodeDataKey: '',
         children: []
-      }
+      },
+      modelDetailFlag: false,
+      relationModelDetail: {},
     }
   },
   created() {
@@ -235,6 +303,11 @@ export default {
       )
       vm.$forceUpdate()
     },
+    editModelDetail(index) {
+      let vm = this
+      vm.modelDetailFlag = true
+      vm.relationModelDetail = vm.relationModel[index]
+    },
     refreshSelf() {
       let vm = this
       vm.$forceUpdate()
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form-back.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form-back.vue
deleted file mode 100644
index c4473a6..0000000
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form-back.vue
+++ /dev/null
@@ -1,347 +0,0 @@
-<style scoped>
-
-.el-divider--horizontal {
-  margin: 12px 0;
-}
-
-</style>
-<template>
-  <el-dialog
-    title="单元纠察图配置"
-    :visible.sync="dialogVisible"
-    :close-on-press-escape="false"
-    :close-on-click-modal="false"
-    width="90%"
-    :before-close="clearForm">
-
-    <el-form
-      :label-position="labelPosition"
-      label-width="80px"
-      :model="saveData"
-      :rules="rules"
-      :inline="true"
-      ref="ruleForm"
-    >
-      <el-form-item label="系统" prop="systemUuid">
-        <el-select filterable
-                   @change="refreshUseCaseOptions"
-                   :disabled="saveData.id && saveData.id !==''" v-model="saveData.systemUuid" placeholder="请选择系统">
-          <el-option
-            v-for="item in systemOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="用例" prop="useCaseUuid">
-        <el-select :disabled="saveData.systemUuid === '' ||(saveData.id && saveData.id !=='')"
-                   @change="refreshUnitViewOptions"
-                   clearable filterable v-model="saveData.useCaseUuid" placeholder="请选择用例">
-          <el-option
-            v-for="item in useCaseOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <el-divider></el-divider>
-    <el-row>
-      <el-col :span="20">
-        <p style="color: #47e1c5"><b>纠察图关联</b></p>
-      </el-col>
-      <el-col :span="4">
-        <p style="color: red"><b>纠察图类树图</b></p>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="20">
-        <el-row v-for="(model,index) in  relationModel">
-          <el-form :inline="true" class="demo-form-inline">
-            <el-form-item prop="sourceNodeUuid">
-              <el-select filterable
-                         @change="sourceNodeUuidChange(model,index)"
-                         style="width: 140px"
-                         v-model="model.sourceNodeUuid"
-                         placeholder="开始节点">
-                <el-option
-                  v-for="item in nodeOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item prop="edgeStyleUuid">
-              <el-select filterable
-                         style="width: 140px"
-                         v-model="model.edgeStyleUuid"
-                         placeholder="边样式">
-                <el-option
-                  v-for="item in edgeStyleOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item prop="targetNodeUuid">
-              <el-select filterable
-                         @change="targetNodeUuidChange(model,index)"
-                         style="width: 140px"
-                         v-model="model.targetNodeUuid"
-                         placeholder="目标节点">
-                <el-option
-                  v-for="item in nodeOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item prop="nodeDataMode">
-              <el-select filterable
-                         style="width: 140px"
-                         v-model="model.nodeDataMode"
-                         placeholder="节点匹配类型">
-                <el-option
-                  v-for="item in nodeDataModeOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item prop="hoverName">
-              <el-input style="width: 140px" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
-            </el-form-item>
-            <el-form-item prop="nodeDataKey">
-              <el-input style="width: 140px" v-model="model.nodeDataKey" placeholder="匹配值"></el-input>
-            </el-form-item>
-            <el-form-item>
-              <el-tooltip content="删除记录" placement="top">
-                <el-button :disabled="index===0" type="danger" icon="el-icon-delete" circle size="mini"
-                           @click="deleteOne(index)">
-                </el-button>
-              </el-tooltip>
-            </el-form-item>
-            <el-form-item>
-              <el-tooltip content="增加记录" placement="top">
-                <el-button type="primary" icon="el-icon-circle-plus" circle size="mini"
-                           @click="addNewOne(index)">
-                </el-button>
-              </el-tooltip>
-            </el-form-item>
-          </el-form>
-        </el-row>
-      </el-col>
-      <el-col :span="4">
-        <el-tree v-show="treeData.length>0" :data="treeData"
-                 node-key="nodeId"
-                 :default-expanded-keys="getExpandedKeys()"
-                 :props="defaultProps"></el-tree>
-      </el-col>
-      <p v-show="treeData.length === 0"><b>暂无数据</b></p>
-    </el-row>
-    <span slot="footer" class="dialog-footer">
-    <el-button @click="clearForm">取 消</el-button>
-    <el-button type="primary" @click="save">确 定</el-button>
-  </span>
-  </el-dialog>
-</template>
-<script>
-
-import {remoteValidatesSystemKey, remoteValidateSystemName, systemSave} from "@/api/system";
-import {edgeStyleSelector, nodeDataModes, nodeSelector, nodeStyleSelector, nodeTypes, nodeVueSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
-import {remoteValidatesUseCaseKey, remoteValidateUseCaseName, useCaseSave} from "@/api/useCase";
-import {remoteValidateUnique, remoteValidateUnitViewUnique} from "@/api/unitView";
-
-export default {
-  name: "useCaseForm",
-  filters: {},
-  components: {},
-  data() {
-    const validateName = async (rule, value, callback) => {
-      if (this.saveData.id) {
-        callback()
-      }
-      let systemUuid = this.saveData.systemUuid;
-      let useCaseUuid = this.saveData.useCaseUuid;
-
-      if (systemUuid === '') {
-        callback(new Error("请选择纠察图所属系统"))
-        return;
-      }
-
-      if (useCaseUuid === '') {
-        callback(new Error("请选择纠察图所属用例"))
-        return;
-      }
-
-      let ret = await remoteValidateUnitViewUnique(systemUuid, useCaseUuid);
-      if (ret.data.result) {
-        callback()
-      } else {
-        callback(new Error("当前系统当前用例已经存在纠察图"))
-      }
-    };
-
-    return {
-      labelPosition: 'right',
-      dialogVisible: false,
-      saveData: {
-        systemUuid: '',
-        useCaseUuid: '',
-        edges: [],
-        nodes: []
-      },
-      relationModel: [
-        {
-          sourceNodeUuid: '',
-          targetNodeUuid: '',
-          edgeStyleUuid: '',
-          hoverName: '',
-          nodeDataKey: '',
-          nodeDataMode: ''
-        }
-      ],
-      rules: {
-        systemUuid: [
-          {required: true, message: '此项必填', trigger: 'change'},
-          {validator: validateName, trigger: 'blur'}
-        ],
-        useCaseUuid: [
-          {required: true, message: '此项必填', trigger: 'change'},
-          {validator: validateName, trigger: 'blur'}
-        ],
-      },
-      systemOptions: [],
-      useCaseOptions: [],
-      nodeOptions: [],
-      nodeVueOptions: [],
-      nodeStyleOptions: [],
-      edgeStyleOptions: [],
-      nodeDataModeOptions: [],
-      nodeTypesOptions: [],
-      treeData: [],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      }
-    };
-  },
-  async created() {
-    this.systemOptions = await systemSelector();
-    this.nodeDataModeOptions = await nodeDataModes();
-    this.nodeTypesOptions = await nodeTypes();
-  },
-  mounted() {
-  },
-  methods: {
-    load(data) {
-      let vm = this
-      if (data) {
-        vm.saveData = vm.$cloneObj(data)
-      }
-      vm.dialogVisible = true
-    },
-    save() {
-      let vm = this
-      this.$refs['ruleForm'].validate(async (valid) => {
-        if (valid) {
-          await vm.doSave(this.saveData)
-        }
-      })
-    },
-    async doSave(saveData) {
-      let vm = this
-      let ret = await useCaseSave(saveData);
-      if (ret.ok) {
-        vm.$message({type: 'success', message: '保存成功'});
-      } else {
-        vm.$message({type: 'error', message: '保存失败：' + ret.message});
-      }
-      vm.clearForm()
-      vm.$parent.query()
-    },
-    clearForm() {
-      let vm = this
-      try {
-        vm.saveData = {
-          systemUuid: '',
-          useCaseUuid: '',
-          edges: [],
-          nodes: []
-        }
-        vm.$refs['ruleForm'].resetFields()
-      } catch (e) {
-        console.log(e)
-      }
-      vm.dialogVisible = false
-    },
-    async refreshUseCaseOptions() {
-      let vm = this
-      vm.saveData.useCaseUuid = ''
-      vm.saveData.nodes = []
-      vm.saveData.edges = []
-
-      vm.useCaseOptions = await useCaseSelector(vm.saveData.systemUuid)
-      vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
-      vm.nodeVueOptions = await nodeVueSelector(vm.saveData.systemUuid)
-      vm.nodeStyleOptions = await nodeStyleSelector(vm.saveData.systemUuid)
-      vm.edgeStyleOptions = await edgeStyleSelector(vm.saveData.systemUuid)
-    },
-    refreshUnitViewOptions() {
-      let vm = this
-      if (vm.saveData.useCaseUuid === '') {
-        vm.saveData.nodes = []
-        vm.saveData.edges = []
-      }
-    },
-    getExpandedKeys() {
-      let vm = this
-      let expandedKeys = []
-      for (let i = 0; i < vm.treeData.length; i++) {
-        expandedKeys.push(vm.treeData[i].label)
-        if (vm.treeData[i].children) {
-          vm.loopExpandedKeys(expandedKeys, vm.treeData[i].children)
-        }
-      }
-      return expandedKeys;
-    },
-    loopExpandedKeys(expandedKeys, treeData) {
-      let vm = this
-      if (treeData) {
-        for (let i = 0; i < treeData.length; i++) {
-          expandedKeys.push(treeData[i].label)
-          if (treeData[i].children) {
-            vm.loopExpandedKeys(expandedKeys, treeData[i].children)
-          }
-        }
-      }
-    },
-    sourceNodeUuidChange(model, index) {
-
-    },
-    targetNodeUuidChange(model, index) {
-
-    },
-    deleteOne(index) {
-
-    },
-    addNewOne(index) {
-      let vm = this
-      vm.relationModel.push({
-        sourceNodeUuid: '',
-        targetNodeUuid: '',
-        edgeStyleUuid: '',
-        hoverName: '',
-        nodeDataKey: '',
-        nodeDataMode: ''
-      })
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-tree-view.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-tree-view.vue
deleted file mode 100644
index 622a144..0000000
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-tree-view.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<style scoped>
-
-</style>
-<template>
-  <el-dialog
-    title="单元纠察图[树]视图"
-    v-show="show"
-    :visible.sync="show"
-    :close-on-press-escape="false"
-    :close-on-click-modal="false"
-    append-to-body
-    width="50%"
-    :before-close="clearForm">
-
-    <el-tree v-show="treeData.length>0" :data="treeData"
-             node-key="nodeId"
-             :default-expanded-keys="getExpandedKeys()"
-             :props="defaultProps"></el-tree>
-
-    <span slot="footer" class="dialog-footer">
-    <el-button @click="clearForm">关 闭</el-button>
-  </span>
-  </el-dialog>
-</template>
-<script>
-
-import {remoteValidatesSystemKey, remoteValidateSystemName, systemSave} from "@/api/system";
-import {edgeStyleSelector, nodeDataModes, nodeSelector, nodeStyleSelector, nodeTypes, nodeVueSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
-import {remoteValidatesUseCaseKey, remoteValidateUseCaseName, useCaseSave} from "@/api/useCase";
-import {remoteValidateUnique, remoteValidateUnitViewUnique} from "@/api/unitView";
-
-export default {
-  name: "useCaseForm",
-  filters: {},
-  components: {},
-  data() {
-    return {
-      labelPosition: 'right',
-      show: false,
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      treeData: [],
-    };
-  },
-  created() {
-
-  },
-  mounted() {
-  },
-  methods: {
-    load(data) {
-      let vm = this
-      if (data) {
-        let $cloneObj = vm.$cloneObj(data);
-        vm.loopFillUuid($cloneObj)
-        vm.treeData = $cloneObj
-      }
-      console.log(vm.treeData)
-      vm.show = true
-    },
-    loopFillUuid(obj) {
-      for (let i = 0; i < obj.length; i++) {
-        obj[i].nodeId = this.guid()
-        obj[i].label ='xxxx'
-        if (obj[i].children) {
-          this.loopFillUuid(obj[i].children)
-        } else {
-          obj[i].children = []
-        }
-      }
-    },
-    guid() {
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
-        return v.toString(16);
-      });
-    },
-    clearForm() {
-      let vm = this
-      vm.show = false
-    },
-    getExpandedKeys() {
-      let vm = this
-      let expandedKeys = []
-      for (let i = 0; i < vm.treeData.length; i++) {
-        expandedKeys.push(vm.treeData[i].label)
-        if (vm.treeData[i].children) {
-          vm.loopExpandedKeys(expandedKeys, vm.treeData[i].children)
-        }
-      }
-      return expandedKeys;
-    },
-    loopExpandedKeys(expandedKeys, treeData) {
-      let vm = this
-      if (treeData) {
-        for (let i = 0; i < treeData.length; i++) {
-          expandedKeys.push(treeData[i].label)
-          if (treeData[i].children) {
-            vm.loopExpandedKeys(expandedKeys, treeData[i].children)
-          }
-        }
-      }
-    },
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/unit-view-tree-form.vue
similarity index 92%
rename from views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
rename to views/src/main/resources/vueboot/src/views/bic-config/dialog/unit-view-tree-form.vue
index 80262f2..02729e6 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/unit-view-tree-form.vue
@@ -81,9 +81,10 @@
 <script>
 
 import {edgeStyleSelector, nodeDataModes, nodeSelector, nodeStyleSelector, nodeTypes, nodeVueSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
-import {useCaseSave} from "@/api/useCase";
-import {remoteValidateUnitViewUnique} from "@/api/unitView";
+import {remoteValidateUnitViewUnique, unitViewSave} from "@/api/unitView";
 import ruleTreeList from "@/views/bic-config/components/ruleTreeList";
+import unitViewTree from "@/views/bic-config/unit-view-tree.vue";
+import {remoteValidateUnitViewTreeUnique, unitViewTreeSave} from "@/api/unitViewTree";
 
 export default {
   name: "bicEditForm",
@@ -109,7 +110,7 @@ export default {
         return;
       }
 
-      let ret = await remoteValidateUnitViewUnique(systemUuid, useCaseUuid);
+      let ret = await remoteValidateUnitViewTreeUnique(systemUuid, useCaseUuid);
       if (ret.data.result) {
         callback()
       } else {
@@ -130,11 +131,16 @@ export default {
       tempRelationModel: [
         {
           sourceNodeUuid: '',
+          sourceStyleUuid: '',
+          sourceNodeDataKey: '',
+          sourceNodeDataMode: '',
           targetNodeUuid: '',
+          targetStyleUuid: '',
+          targetNodeDataKey: '',
+          targetNodeDataMode: '',
           edgeStyleUuid: '',
           hoverName: '',
-          nodeDataKey: '',
-          nodeDataMode: ''
+          children: []
         }
       ],
       rules: {
@@ -195,21 +201,16 @@ export default {
       vm.dialogVisible = true
 
       if (data) {
-        vm.reloadView()
+        vm.reloadView(data)
       } else {
         vm.defaultLoad()
       }
     },
-    reloadSelectors() {
-
-    },
-    reloadRelationModel() {
-
-    },
-    reloadView() {
+    async reloadView(data) {
       let vm = this
-      vm.reloadSelectors();
-      vm.reloadRelationModel();
+
+      await vm.selectorLoad()
+      vm.relationModel = data.relationModel
 
       vm.$nextTick(async () => {
         // 组件
@@ -218,6 +219,7 @@ export default {
     },
     save() {
       let vm = this
+      // 遍历所有节点
       this.$refs['ruleForm'].validate(async (valid) => {
         if (valid) {
           await vm.doSave(this.saveData)
@@ -226,8 +228,7 @@ export default {
     },
     async doSave(saveData) {
       let vm = this
-      // TODO save 逻辑
-      let ret = await useCaseSave(saveData);
+      let ret = await unitViewTreeSave(saveData);
       if (ret.ok) {
         vm.$message({type: 'success', message: '保存成功'});
       } else {
@@ -256,13 +257,15 @@ export default {
       let vm = this
       vm.saveData.useCaseUuid = ''
       vm.relationModel = vm.getRelationModel()
-
+      await vm.selectorLoad()
+    },
+    async selectorLoad() {
+      let vm = this
       vm.useCaseOptions = await useCaseSelector(vm.saveData.systemUuid)
       vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
       vm.nodeVueOptions = await nodeVueSelector(vm.saveData.systemUuid)
       vm.nodeStyleOptions = await nodeStyleSelector(vm.saveData.systemUuid)
       vm.edgeStyleOptions = await edgeStyleSelector(vm.saveData.systemUuid)
-
       vm.selectors = vm.getSelectors()
     },
     refreshUnitViewOptions() {
@@ -273,9 +276,6 @@ export default {
         // 组件
         vm.$refs.ruleTreeList.load({relationModel: vm.relationModel, selectors: vm.selectors});
       })
-    },
-    getSystemSelectors() {
-
     },
     defaultLoad() {
       let vm = this
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue b/views/src/main/resources/vueboot/src/views/bic-config/unit-view-tree.vue
similarity index 93%
rename from views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue
rename to views/src/main/resources/vueboot/src/views/bic-config/unit-view-tree.vue
index 21e82ca..a6964b3 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/unit-view-tree.vue
@@ -111,21 +111,21 @@
       </el-footer>
     </el-card>
 
-    <bic-edit-form ref="bicEditForm"></bic-edit-form>
+    <unit-view-tree-form ref="unitViewTreeForm"></unit-view-tree-form>
   </div>
 </template>
 
 <script>
 import vuePage from "@/views/common/vue-page.vue";
 import vueLog from "@/views/common/vue-log.vue";
-import bicEditForm from "@/views/bic-config/dialog/bic-edit-form.vue";
+import unitViewTreeForm from "@/views/bic-config/dialog/unit-view-tree-form.vue";
 import {allUseCaseSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
-import {unitViewPageQuery} from "@/api/unitView";
+import {unitViewTreePageQuery} from "@/api/unitViewTree";
 
 export default {
   name: "unit-view-config",
   components: {
-    bicEditForm,
+    unitViewTreeForm,
     vuePage,
     vueLog,
   },
@@ -161,7 +161,7 @@ export default {
     async query() {
 
       let vm = this
-      let ret = await unitViewPageQuery(vm.queryForm, vm.pageResult.paginator)
+      let ret = await unitViewTreePageQuery(vm.queryForm, vm.pageResult.paginator)
       vm.$message({type: 'success', message: '查询成功'});
       if (ret.ok) {
         vm.pageResult = ret.data.queryPage
@@ -170,10 +170,10 @@ export default {
       }
     },
     addNew() {
-      this.$refs.bicEditForm.load();
+      this.$refs.unitViewTreeForm.load();
     },
     toEdit(row) {
-      this.$refs.bicEditForm.load(row);
+      this.$refs.unitViewTreeForm.load(row);
     },
     toDisableOrEnable(row) {
       let vm = this
@@ -184,7 +184,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$refs.bicEditForm.doSave(clone);
+        this.$refs.unitViewTreeForm.doSave(clone);
       }).catch(() => {
         this.$message({
           type: 'info',
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewController.java b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewController.java
index 7885d8b..c56f5b5 100644
--- a/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewController.java
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewController.java
@@ -1,45 +1,45 @@
-package cn.icanci.loopstack.bic.web.controller;
-
-import javax.annotation.Resource;
-
-import org.springframework.web.bind.annotation.*;
-
-import cn.icanci.loopstack.bic.biz.service.UnitViewService;
-import cn.icanci.loopstack.bic.common.model.graph.UnitViewVO;
-import cn.icanci.loopstack.bic.common.result.R;
-import cn.icanci.loopstack.bic.web.form.UnitViewQueryForm;
-import cn.icanci.loopstack.bic.web.mapper.UnitViewWebMapper;
-import cn.icanci.loopstack.bic.web.model.UnitView;
-
-/**
- * @author icanci
- * @since 1.0 Created in 2023/09/16 10:55
- */
-@RestController
-@RequestMapping("/bicAdmin/unitView")
-public class UnitViewController {
-    @Resource
-    private UnitViewWebMapper unitViewWebMapper;
-    @Resource
-    private UnitViewService   unitViewService;
-
-    // ================================ CRUD ================================
-    @PostMapping("query")
-    public R query(@RequestBody UnitViewQueryForm form) {
-        return R.builderOk()
-            .data("queryPage", unitViewService.queryPage(unitViewWebMapper.web2vo(form.getUnitView()), form.getPaginator().getCurrentPage(), form.getPaginator().getPageSize()))
-            .build();
-    }
-
-    @PostMapping("save")
-    public R save(@RequestBody UnitView unitView) {
-        unitViewService.save(unitViewWebMapper.web2vo(unitView));
-        return R.builderOk().build();
-    }
-
-    @GetMapping("validateUnique/{systemUuid}/{useCaseUuid}")
-    public R validateUnique(@PathVariable("systemUuid") String systemUuid, @PathVariable("useCaseUuid") String useCaseUuid) {
-        UnitViewVO unitView = unitViewService.queryBySystemUuidAndUseCaseUuid(systemUuid, useCaseUuid);
-        return R.builderOk().data("result", unitView == null).build();
-    }
-}
+//package cn.icanci.loopstack.bic.web.controller;
+//
+//import javax.annotation.Resource;
+//
+//import org.springframework.web.bind.annotation.*;
+//
+//import cn.icanci.loopstack.bic.biz.service.UnitViewService;
+//import cn.icanci.loopstack.bic.common.model.graph.UnitViewVO;
+//import cn.icanci.loopstack.bic.common.result.R;
+//import cn.icanci.loopstack.bic.web.form.UnitViewQueryForm;
+//import cn.icanci.loopstack.bic.web.mapper.UnitViewWebMapper;
+//import cn.icanci.loopstack.bic.web.model.UnitView;
+//
+///**
+// * @author icanci
+// * @since 1.0 Created in 2023/09/16 10:55
+// */
+//@RestController
+//@RequestMapping("/bicAdmin/unitView")
+//public class UnitViewController {
+//    @Resource
+//    private UnitViewWebMapper unitViewWebMapper;
+//    @Resource
+//    private UnitViewService   unitViewService;
+//
+//    // ================================ CRUD ================================
+//    @PostMapping("query")
+//    public R query(@RequestBody UnitViewQueryForm form) {
+//        return R.builderOk()
+//            .data("queryPage", unitViewService.queryPage(unitViewWebMapper.web2vo(form.getUnitView()), form.getPaginator().getCurrentPage(), form.getPaginator().getPageSize()))
+//            .build();
+//    }
+//
+//    @PostMapping("save")
+//    public R save(@RequestBody UnitView unitView) {
+//        unitViewService.save(unitViewWebMapper.web2vo(unitView));
+//        return R.builderOk().build();
+//    }
+//
+//    @GetMapping("validateUnique/{systemUuid}/{useCaseUuid}")
+//    public R validateUnique(@PathVariable("systemUuid") String systemUuid, @PathVariable("useCaseUuid") String useCaseUuid) {
+//        UnitViewVO unitView = unitViewService.queryBySystemUuidAndUseCaseUuid(systemUuid, useCaseUuid);
+//        return R.builderOk().data("result", unitView == null).build();
+//    }
+//}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewTreeController.java b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewTreeController.java
new file mode 100644
index 0000000..617bb4e
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewTreeController.java
@@ -0,0 +1,46 @@
+package cn.icanci.loopstack.bic.web.controller;
+
+import javax.annotation.Resource;
+
+import org.springframework.web.bind.annotation.*;
+
+import cn.icanci.loopstack.bic.biz.service.UnitViewTreeService;
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.common.result.R;
+import cn.icanci.loopstack.bic.web.form.UnitViewTreeQueryForm;
+import cn.icanci.loopstack.bic.web.mapper.UnitViewTreeWebMapper;
+import cn.icanci.loopstack.bic.web.model.UnitViewTree;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/16 10:55
+ */
+@RestController
+@RequestMapping("/bicAdmin/unitViewTree")
+public class UnitViewTreeController {
+    @Resource
+    private UnitViewTreeWebMapper unitViewTreeWebMapper;
+    @Resource
+    private UnitViewTreeService   unitViewTreeService;
+
+    // ================================ CRUD ================================
+    @PostMapping("query")
+    public R query(@RequestBody UnitViewTreeQueryForm form) {
+        return R.builderOk()
+            .data("queryPage",
+                unitViewTreeService.queryPage(unitViewTreeWebMapper.web2vo(form.getUnitViewTree()), form.getPaginator().getCurrentPage(), form.getPaginator().getPageSize()))
+            .build();
+    }
+
+    @PostMapping("save")
+    public R save(@RequestBody UnitViewTree unitViewTree) {
+        unitViewTreeService.save(unitViewTreeWebMapper.web2vo(unitViewTree));
+        return R.builderOk().build();
+    }
+
+    @GetMapping("validateUnique/{systemUuid}/{useCaseUuid}")
+    public R validateUnique(@PathVariable("systemUuid") String systemUuid, @PathVariable("useCaseUuid") String useCaseUuid) {
+        UnitViewTreeVO unitViewTree = unitViewTreeService.queryBySystemUuidAndUseCaseUuid(systemUuid, useCaseUuid);
+        return R.builderOk().data("result", unitViewTree == null).build();
+    }
+}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/form/UnitViewTreeQueryForm.java b/web/src/main/java/cn/icanci/loopstack/bic/web/form/UnitViewTreeQueryForm.java
new file mode 100644
index 0000000..b4b1fe1
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/form/UnitViewTreeQueryForm.java
@@ -0,0 +1,13 @@
+package cn.icanci.loopstack.bic.web.form;
+
+import cn.icanci.loopstack.bic.web.model.UnitViewTree;
+import lombok.Data;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:44
+ */
+@Data
+public class UnitViewTreeQueryForm extends BaseQueryForm {
+    private UnitViewTree unitViewTree;
+}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/mapper/UnitViewTreeWebMapper.java b/web/src/main/java/cn/icanci/loopstack/bic/web/mapper/UnitViewTreeWebMapper.java
new file mode 100644
index 0000000..75bf41d
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/mapper/UnitViewTreeWebMapper.java
@@ -0,0 +1,17 @@
+package cn.icanci.loopstack.bic.web.mapper;
+
+import org.mapstruct.Mapper;
+import org.mapstruct.NullValueMappingStrategy;
+
+import cn.icanci.loopstack.bic.biz.mapper.convertor.NodeDataModeEnumConverter;
+import cn.icanci.loopstack.bic.biz.mapper.convertor.NodeTypeEnumConverter;
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.web.model.UnitViewTree;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:40
+ */
+@Mapper(componentModel = "spring", uses = { NodeDataModeEnumConverter.class, NodeTypeEnumConverter.class }, nullValueMappingStrategy = NullValueMappingStrategy.RETURN_NULL)
+public interface UnitViewTreeWebMapper extends BaseWebMapper<UnitViewTree, UnitViewTreeVO> {
+}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTree.java b/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTree.java
new file mode 100644
index 0000000..5a0f750
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTree.java
@@ -0,0 +1,21 @@
+package cn.icanci.loopstack.bic.web.model;
+
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * 图结构单元视图
+ * 
+ * @author icanci
+ * @since 1.0 Created in 2023/09/09 21:49
+ */
+@Data
+public class UnitViewTree extends Base {
+    /** 系统唯一标识  */
+    private String                     systemUuid;
+    /** 用例唯一标识  */
+    private String                     useCaseUuid;
+    /** 图配置数据  */
+    private List<UnitViewTreeRelation> relationModel;
+}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTreeRelation.java b/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTreeRelation.java
new file mode 100644
index 0000000..ffc1d0f
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTreeRelation.java
@@ -0,0 +1,45 @@
+package cn.icanci.loopstack.bic.web.model;
+
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:00
+ */
+@Data
+public class UnitViewTreeRelation {
+    // ====================== 起始节点配置 ======================
+    /** 起始节点 */
+    private String              sourceNodeUuid;
+    /** 起始节点样式 */
+    private String              sourceStyleUuid;
+    /** 起始节点唯一Key */
+    private String              sourceNodeDataKey;
+    /** 起始节点匹配模式 */
+    private String              sourceNodeDataMode;
+
+    // ====================== 结束节点配置 ======================
+
+    /** 结束节点 */
+    private String              targetNodeUuid;
+    /** 结束节点样式 */
+    private String              targetStyleUuid;
+    /** 结束节点唯一Key */
+    private String              targetNodeDataKey;
+    /** 结束节点匹配模式 */
+    private String              targetNodeDataMode;
+
+    // ====================== 边样式 ======================
+
+    /** 边样式 */
+    private String              edgeStyleUuid;
+    /** 边HOVER */
+    private String              hoverName;
+
+    // ====================== 孩子节点 ======================
+
+    /** 孩子节点 */
+    private List<UnitViewTreeRelation> children;
+}
-- 
Gitee