diff --git a/package.json b/package.json
index 044356a..480e527 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@antv/x6": "^2.15.6",
     "@element-plus/icons-vue": "2.0.10",
     "@vueup/vue-quill": "1.1.0",
     "@vueuse/core": "9.5.0",
diff --git a/src/api/menu.js b/src/api/menu.js
index 6e52e6e..3e65afb 100644
--- a/src/api/menu.js
+++ b/src/api/menu.js
@@ -6,4 +6,13 @@ export const getRouters = () => {
     url: '/getRouters',
     method: 'get'
   })
+}
+
+//获取Melker树
+export const getMelkerTree = (data) => {
+  return request({
+    url: 'api/stu/centralBank/getMerkle',
+    method: 'get',
+    params:data
+  })
 }
\ No newline at end of file
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/1-1箭头.png b/src/assets/images/央行可视化监控中心-切图/交易节点/1-1箭头.png
new file mode 100644
index 0000000..fdd429b
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/1-1箭头.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/1-2箭头.png b/src/assets/images/央行可视化监控中心-切图/交易节点/1-2箭头.png
new file mode 100644
index 0000000..4ae8829
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/1-2箭头.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/1-3箭头.png b/src/assets/images/央行可视化监控中心-切图/交易节点/1-3箭头.png
new file mode 100644
index 0000000..05f9286
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/1-3箭头.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/2-1箭头.png b/src/assets/images/央行可视化监控中心-切图/交易节点/2-1箭头.png
new file mode 100644
index 0000000..0631985
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/2-1箭头.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/2-2箭头.png b/src/assets/images/央行可视化监控中心-切图/交易节点/2-2箭头.png
new file mode 100644
index 0000000..c6fd4ba
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/2-2箭头.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/2-3箭头.png b/src/assets/images/央行可视化监控中心-切图/交易节点/2-3箭头.png
new file mode 100644
index 0000000..f15e88d
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/2-3箭头.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/3-1箭头.png b/src/assets/images/央行可视化监控中心-切图/交易节点/3-1箭头.png
new file mode 100644
index 0000000..7f827b0
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/3-1箭头.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/3-2箭头.png b/src/assets/images/央行可视化监控中心-切图/交易节点/3-2箭头.png
new file mode 100644
index 0000000..be40300
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/3-2箭头.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/3-3箭头.png b/src/assets/images/央行可视化监控中心-切图/交易节点/3-3箭头.png
new file mode 100644
index 0000000..17c44d1
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/3-3箭头.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/一层.png b/src/assets/images/央行可视化监控中心-切图/交易节点/一层.png
new file mode 100644
index 0000000..d7cb7b5
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/一层.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/三层.png b/src/assets/images/央行可视化监控中心-切图/交易节点/三层.png
new file mode 100644
index 0000000..e4ebae0
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/三层.png differ
diff --git a/src/assets/images/央行可视化监控中心-切图/交易节点/二层.png b/src/assets/images/央行可视化监控中心-切图/交易节点/二层.png
new file mode 100644
index 0000000..6d521c9
Binary files /dev/null and b/src/assets/images/央行可视化监控中心-切图/交易节点/二层.png differ
diff --git a/src/views/visual/components/merkle.vue b/src/views/visual/components/merkle.vue
index a4436da..99d23d5 100644
--- a/src/views/visual/components/merkle.vue
+++ b/src/views/visual/components/merkle.vue
@@ -1,29 +1,1745 @@
+<template>
+  <div class="app-study">
+   
+    <el-row>
+      <el-col :span="24">
+        <el-button type="primary" @click="toggleFullscreen">全屏</el-button>
+      </el-col>
+    </el-row>
+    <div class="merkleTree">
+    <el-scrollbar :height="height" always >
+      <div class="umlMain">
+        <div ref="umlContainer" id="umlContainer" class="umlContainer"></div>
+      </div>
+    
+    </el-scrollbar>
+  </div>
+ </div>
+ </template>
 <script setup>
+import { ref, onMounted } from 'vue';
+import { Graph, ObjectExt, Cell } from '@antv/x6'
+import {toggleFullscreenContainer} from '@/utils/index.js'
+import { getMelkerTree } from '@/api/menu.js'
+import { getSchoolId } from '@/utils/auth.js'
+//获取数据
+const data = {
+  schoolId:getSchoolId()
+}
+const getData=async()=>{
+  try{
+    const res = await getMelkerTree(data)
+    // console.log(res)
+    const data1=res.data
+    for (const key in data1) {
+  if (Object.hasOwnProperty.call(data1, key)) {
+    const array = data1[key];
+
+    // 在这里操作每个数组
+    // console.log(`Array for key ${key}:`, array);
+    if(key==='one'){
+      cell.value[0].attributes[0]=array
+      console.log(cell.value[0].attributes[0]);
+      console.log(array);
+    }
+    // 例如，你可以对每个数组进行进一步的操作
+    // array.forEach(item => {
+    //   // 对每个数组元素进行操作
+    //   console.log(item);
+    // });
+
+    // 或者你可以修改原始数组
+    // data[key] = array.map(item => {
+    //   // 修改每个数组元素
+    //   return item + '_modified';
+    // });
+  }
+  graph.value.fromJSON(cell.value)
+  graph.value.zoomToFit({ padding: 10, maxScale: 1 })
+}
+  }catch{}
+}
+
+// 全屏函数
+const height=ref(1084)
+const toggleFullscreen = () => {
+  toggleFullscreenContainer('.merkleTree')
+  document.addEventListener('fullscreenchange', exitFullscreenHandler);
+  document.addEventListener('webkitfullscreenchange', exitFullscreenHandler);
+  document.addEventListener('mozfullscreenchange', exitFullscreenHandler);
+  document.addEventListener('MSFullscreenChange', exitFullscreenHandler);
+  const element = document.querySelector('.umlMain');
+  element.style.position='relative'
+  element.style.transform='scale(1)'
+  element.style.top='0'
+  element.style.right='0'
+  // height.value =950
+}
+  // 处理退出全屏的函数
+  function exitFullscreenHandler() {
+  if (!document.fullscreenElement && !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement && !document.msFullscreenElement) {
+    // 退出全屏后执行的代码
+    // console.log('已退出全屏');
+    const element = document.querySelector('.umlMain');
+  element.style.position='absolute'
+  element.style.transform='scale(0.44)'
+  element.style.top=''
+  element.style.right=''
+    // 在这里可以添加你想要执行的操作
+  }
+}
+const cell=ref([])
+const graph=ref([])
+const umlContainer=ref(null)
+onMounted(() => {
+   graph.value = new Graph({
+  container:  umlContainer.value,
+  width: `100%`,
+  height: `100%`,
+  background: {
+    color: '#F2F7FA00',
+  },
+})
+// #region 注册基础图形
+Graph.registerNode(
+  'class',
+  {
+    inherit: 'rect',
+    markup: [
+      {
+        tagName: 'rect',
+        selector: 'body',
+      },
+      {
+        tagName: 'rect',
+        selector: 'name-rect',
+      },
+      {
+        tagName: 'rect',
+        selector: 'attrs-rect',
+      },
+      {
+        tagName: 'rect',
+        selector: 'methods-rect',
+      },
+      {
+        tagName: 'text',
+        selector: 'name-text',
+      },
+      {
+        tagName: 'text',
+        selector: 'attrs-text',
+      },
+      {
+        tagName: 'text',
+        selector: 'methods-text',
+      },
+    ],
+    attrs: {
+      rect: {
+        width: 100,
+      },
+      body: {
+        stroke: '#fff',
+      },
+      'name-rect': {
+        fill: '#5f95ff',
+        stroke: '#fff',
+        strokeWidth: 0.5,
+      },
+      'attrs-rect': {
+        fill: '#eff4ff',
+        stroke: '#fff',
+        strokeWidth: 0.5,
+      },
+      'methods-rect': {
+        fill: '#eff4ff',
+        stroke: '#fff',
+        strokeWidth: 0.5,
+      },
+      'name-text': {
+        ref: 'name-rect',
+        refY: 0.5,
+        refX: 0.5,
+        textAnchor: 'middle',
+        fontWeight: 'bold',
+        fill: '#fff',
+        fontSize: 12,
+      },
+      'attrs-text': {
+        ref: 'attrs-rect',
+        refY: 0.5,
+        refX: 5,
+        textAnchor: 'left',
+        fill: 'black',
+        fontSize: 10,
+      },
+      'methods-text': {
+        ref: 'methods-rect',
+        refY: 0.5,
+        refX: 5,
+        textAnchor: 'left',
+        fill: 'black',
+        fontSize: 10,
+      },
+    },
+    propHooks(meta) {
+      const { name, attributes, methods, ...others } = meta
+
+      if (!(name && attributes && methods)) {
+        return meta
+      }
+
+      const rects = [
+        { type: 'name', text: name },
+        { type: 'attrs', text: attributes },
+        { type: 'methods', text: methods },
+      ]
+
+      let offsetY = 0
+      rects.forEach((rect) => {
+        const height = rect.text.length * 12 + 16
+        ObjectExt.setByPath(
+          others,
+          `attrs/${rect.type}-text/text`,
+          rect.text.join('\n'),
+        )
+        ObjectExt.setByPath(others, `attrs/${rect.type}-rect/height`, height)
+        ObjectExt.setByPath(
+          others,
+          `attrs/${rect.type}-rect/transform`,
+          'translate(0,' + offsetY + ')',
+        )
+        offsetY += height
+      })
+
+      others.size = { width: 100, height: offsetY }
+
+      return others
+    },
+  },
+  true,
+)
+
+// 继承
+Graph.registerEdge(
+  'extends',
+  {
+    inherit: 'edge',
+    attrs: {
+      line: {
+        strokeWidth: 4,
+        targetMarker: {
+          name: 'path',
+          d: 'M 20 0 L 0 10 L 20 20 z',
+          fill: 'white',
+          stroke: 'white',
+          offsetX: -10,
+        },
+      },
+    },
+  },
+  true,
+)
+
+// 实现
+Graph.registerEdge(
+  'implement',
+  {
+    inherit: 'edge',
+    attrs: {
+      line: {
+        strokeWidth: 1,
+        strokeDasharray: '3,3',
+        targetMarker: {
+          name: 'path',
+          d: 'M 20 0 L 0 10 L 20 20 z',
+          fill: 'white',
+          offsetX: -10,
+        },
+      },
+    },
+  },
+  true,
+)
+
+// 组合
+Graph.registerEdge(
+  'composition',
+  {
+    inherit: 'edge',
+    attrs: {
+      line: {
+        strokeWidth: 1,
+        sourceMarker: {
+          name: 'path',
+          d: 'M 30 10 L 20 16 L 10 10 L 20 4 z',
+          fill: 'black',
+          offsetX: -10,
+        },
+        targetMarker: {
+          name: 'path',
+          d: 'M 6 10 L 18 4 C 14.3333 6 10.6667 8 7 10 L 18 16 z',
+          fill: 'black',
+          offsetX: -5,
+        },
+      },
+    },
+  },
+  true,
+)
+
+// 聚合
+Graph.registerEdge(
+  'aggregation',
+  {
+    inherit: 'edge',
+    attrs: {
+      line: {
+        strokeWidth: 1,
+        sourceMarker: {
+          name: 'path',
+          d: 'M 30 10 L 20 16 L 10 10 L 20 4 z',
+          fill: 'white',
+          offsetX: -10,
+        },
+        targetMarker: {
+          name: 'path',
+          d: 'M 6 10 L 18 4 C 14.3333 6 10.6667 8 7 10 L 18 16 z',
+          fill: 'black',
+          offsetX: -5,
+        },
+      },
+    },
+  },
+  true,
+)
+
+// 关联
+Graph.registerEdge(
+  'association',
+  {
+    inherit: 'edge',
+    attrs: {
+      line: {
+        strokeWidth: 1,
+        targetMarker: {
+          name: 'path',
+          d: 'M 6 10 L 18 4 C 14.3333 6 10.6667 8 7 10 L 18 16 z',
+          fill: 'black',
+          offsetX: -5,
+        },
+      },
+    },
+  },
+  true,
+)
+ cell.value=[{
+    "id": "1",
+    "shape": "class",
+    "name": [
+      "Top hash",
+    ],
+    "attributes": [
+      "adasfasd12fa1sd3f13a"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1920,
+      "y": 20
+    }
+  },
+  {
+    "id": "2",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 940,
+      "y": 130
+    }
+  },
+  {
+    "id": "3",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2880,
+      "y": 130
+    }
+  },
+  {
+    "id": "4",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 440,
+      "y": 270
+    }
+  },
+  {
+    "id": "5",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1430,
+      "y": 270
+    }
+  },
+  {
+    "id": "6",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2330,
+      "y": 270
+    }
+  },
+  {
+    "id": "7",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3300,
+      "y": 270
+    }
+  },
+  {
+    "id": "8",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 220,
+      "y": 410
+    }
+  },
+  {
+    "id": "9",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 670,
+      "y": 410
+    }
+  },
+  {
+    "id": "10",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1160,
+      "y": 410
+    }
+  },
+  {
+    "id": "11",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1630,
+      "y": 410
+    }
+  },
+  {
+    "id": "12",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2110,
+      "y": 410
+    }
+  },
+  {
+    "id": "13",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2580,
+      "y": 410
+    }
+  },
+  {
+    "id": "14",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3070,
+      "y": 410
+    }
+  },
+  {
+    "id": "15",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3530,
+      "y": 410
+    }
+  },
+  {
+    "id": "16",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 110,
+      "y": 550
+    }
+  },
+  {
+    "id": "17",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 330,
+      "y": 550
+    }
+  },
+  {
+    "id": "18",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 560,
+      "y": 550
+    }
+  },
+  {
+    "id": "19",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 780,
+      "y": 550
+    }
+  },
+  {
+    "id": "20",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1050,
+      "y": 550
+    }
+  },
+  {
+    "id": "21",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1280,
+      "y": 550
+    }
+  },
+  {
+    "id": "22",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1520,
+      "y": 550
+    }
+  },
+  {
+    "id": "23",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1740,
+      "y": 550
+    }
+  },
+  {
+    "id": "24",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2000,
+      "y": 550
+    }
+  },
+  {
+    "id": "25",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2230,
+      "y": 550
+    }
+  },
+  {
+    "id": "26",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2460,
+      "y": 550
+    }
+  },
+  {
+    "id": "27",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2690,
+      "y": 550
+    }
+  },
+  {
+    "id": "28",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2960,
+      "y": 550
+    }
+  },
+  {
+    "id": "29",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3190,
+      "y": 550
+    }
+  },
+  {
+    "id": "30",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3420,
+      "y": 550
+    }
+  },
+  {
+    "id": "31",
+    "shape": "class",
+    "name": [
+      "Hash",
+      "0-0"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3640,
+      "y": 550
+    }
+  },
+  {
+    "id": "32",
+    "shape": "class",
+    "name": [
+      "Hash1",
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 40,
+      "y": 700
+    }
+  },
+  {
+    "id": "33",
+    "shape": "class",
+    "name": [
+      "Hash2",
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 150,
+      "y": 700
+    }
+  },
+  {
+    "id": "34",
+    "shape": "class",
+    "name": [
+      "Hash3"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 270,
+      "y": 700
+    }
+  },
+  {
+    "id": "35",
+    "shape": "class",
+    "name": [
+      "Hash4"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 380,
+      "y": 700
+    }
+  },
+  {
+    "id": "36",
+    "shape": "class",
+    "name": [
+      "Hash5"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 500,
+      "y": 700
+    }
+  },
+  {
+    "id": "37",
+    "shape": "class",
+    "name": [
+      "Hash6"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 610,
+      "y": 700
+    }
+  },
+  {
+    "id": "38",
+    "shape": "class",
+    "name": [
+      "Hash7"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 730,
+      "y": 700
+    }
+  },
+  {
+    "id": "39",
+    "shape": "class",
+    "name": [
+      "Hash8"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 840,
+      "y": 700
+    }
+  },
+  {
+    "id": "40",
+    "shape": "class",
+    "name": [
+      "Hash9"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1000,
+      "y": 700
+    }
+  },
+  {
+    "id": "41",
+    "shape": "class",
+    "name": [
+      "Hash10",
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1110,
+      "y": 700
+    }
+  },
+  {
+    "id": "42",
+    "shape": "class",
+    "name": [
+      "Hash11"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1230,
+      "y": 700
+    }
+  },
+  {
+    "id": "43",
+    "shape": "class",
+    "name": [
+      "Hash12"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1340,
+      "y": 700
+    }
+  },
+  {
+    "id": "44",
+    "shape": "class",
+    "name": [
+      "Hash13",
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1460,
+      "y": 700
+    }
+  },
+  {
+    "id": "45",
+    "shape": "class",
+    "name": [
+      "Hash14"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1570,
+      "y": 700
+    }
+  },
+  {
+    "id": "46",
+    "shape": "class",
+    "name": [
+      "Hash15"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1690,
+      "y": 700
+    }
+  },
+  {
+    "id": "47",
+    "shape": "class",
+    "name": [
+      "Hash16"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1800,
+      "y": 700
+    }
+  },
+  {
+    "id": "48",
+    "shape": "class",
+    "name": [
+      "Hash17"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 1940,
+      "y": 700
+    }
+  },
+  {
+    "id": "49",
+    "shape": "class",
+    "name": [
+      "Hash18"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2050,
+      "y": 700
+    }
+  },
+  {
+    "id": "50",
+    "shape": "class",
+    "name": [
+      "Hash19"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2170,
+      "y": 700
+    }
+  },
+  {
+    "id": "51",
+    "shape": "class",
+    "name": [
+      "Hash20"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2280,
+      "y": 700
+    }
+  },
+  {
+    "id": "52",
+    "shape": "class",
+    "name": [
+      "Hash21"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2410,
+      "y": 700
+    }
+  },
+  {
+    "id": "53",
+    "shape": "class",
+    "name": [
+      "Hash22"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2520,
+      "y": 700
+    }
+  },
+  {
+    "id": "54",
+    "shape": "class",
+    "name": [
+      "Hash23"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2640,
+      "y": 700
+    }
+  },
+  {
+    "id": "55",
+    "shape": "class",
+    "name": [
+      "Hash24"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2750,
+      "y": 700
+    }
+  },
+  {
+    "id": "56",
+    "shape": "class",
+    "name": [
+      "Hash25"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 2900,
+      "y": 700
+    }
+  },
+  {
+    "id": "57",
+    "shape": "class",
+    "name": [
+      "Hash26"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3010,
+      "y": 700
+    }
+  },
+  {
+    "id": "58",
+    "shape": "class",
+    "name": [
+      "Hash27",
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3130,
+      "y": 700
+    }
+  },
+  {
+    "id": "59",
+    "shape": "class",
+    "name": [
+      "Hash28"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3240,
+      "y": 700
+    }
+  },
+  {
+    "id": "60",
+    "shape": "class",
+    "name": [
+      "Hash29"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3370,
+      "y": 700
+    }
+  },
+  {
+    "id": "61",
+    "shape": "class",
+    "name": [
+      "Hash30"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3480,
+      "y": 700
+    }
+  },
+  {
+    "id": "62",
+    "shape": "class",
+    "name": [
+      "Hash31"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3600,
+      "y": 700
+    }
+  },
+  {
+    "id": "63",
+    "shape": "class",
+    "name": [
+      "Hash32"
+    ],
+    "attributes": [
+      "hash(adasfasd12fa1sd3f13a)"
+    ],
+    "methods": [
+    ],
+    "position": {
+      "x": 3710,
+      "y": 700
+    }
+  },
+  {
+    "id": "64",
+    "shape": "extends",
+    "source": "2",
+    "target": "1"
+  },
+  {
+    "id": "66",
+    "shape": "extends",
+    "source": "3",
+    "target": "1"
+  },
+  {
+    "id": "67",
+    "shape": "extends",
+    "source": "4",
+    "target": "2"
+  },
+  {
+    "id": "68",
+    "shape": "extends",
+    "source": "5",
+    "target": "2"
+  },
+  {
+    "id": "69",
+    "shape": "extends",
+    "source": "6",
+    "target": "3"
+  },
+  {
+    "id": "70",
+    "shape": "extends",
+    "source": "7",
+    "target": "3"
+  },
+  {
+    "id": "71",
+    "shape": "extends",
+    "source": "8",
+    "target": "4"
+  },
+  {
+    "id": "72",
+    "shape": "extends",
+    "source": "9",
+    "target": "4"
+  },
+  {
+    "id": "73",
+    "shape": "extends",
+    "source": "10",
+    "target": "5"
+  },
+  {
+    "id": "74",
+    "shape": "extends",
+    "source": "11",
+    "target": "5"
+  },
+  {
+    "id": "75",
+    "shape": "extends",
+    "source": "12",
+    "target": "6"
+  },
+  {
+    "id": "76",
+    "shape": "extends",
+    "source": "13",
+    "target": "6"
+  },
+  {
+    "id": "77",
+    "shape": "extends",
+    "source": "14",
+    "target": "7"
+  },
+  {
+    "id": "78",
+    "shape": "extends",
+    "source": "15",
+    "target": "7"
+  },
+  {
+    "id": "79",
+    "shape": "extends",
+    "source": "16",
+    "target": "8"
+  },
+  {
+    "id": "80",
+    "shape": "extends",
+    "source": "17",
+    "target": "8"
+  },
+  {
+    "id": "81",
+    "shape": "extends",
+    "source": "18",
+    "target": "9"
+  },
+  {
+    "id": "82",
+    "shape": "extends",
+    "source": "19",
+    "target": "9"
+  },
+  {
+    "id": "83",
+    "shape": "extends",
+    "source": "20",
+    "target": "10"
+  },
+  {
+    "id": "84",
+    "shape": "extends",
+    "source": "21",
+    "target": "10"
+  },
+  {
+    "id": "85",
+    "shape": "extends",
+    "source": "22",
+    "target": "11"
+  },
+  {
+    "id": "86",
+    "shape": "extends",
+    "source": "23",
+    "target": "11"
+  },
+  {
+    "id": "87",
+    "shape": "extends",
+    "source": "24",
+    "target": "12"
+  }, {
+    "id": "88",
+    "shape": "extends",
+    "source": "25",
+    "target": "12"
+  }, {
+    "id": "89",
+    "shape": "extends",
+    "source": "26",
+    "target": "13"
+  }, {
+    "id": "90",
+    "shape": "extends",
+    "source": "27",
+    "target": "13"
+  }, {
+    "id": "91",
+    "shape": "extends",
+    "source": "28",
+    "target": "14"
+  }, {
+    "id": "92",
+    "shape": "extends",
+    "source": "29",
+    "target": "14"
+  }, {
+    "id": "93",
+    "shape": "extends",
+    "source": "30",
+    "target": "15"
+  }, {
+    "id": "94",
+    "shape": "extends",
+    "source": "31",
+    "target": "15"
+  }, {
+    "id": "95",
+    "shape": "extends",
+    "source": "32",
+    "target": "16"
+  }, {
+    "id": "96",
+    "shape": "extends",
+    "source": "33",
+    "target": "16"
+  }, {
+    "id": "97",
+    "shape": "extends",
+    "source": "34",
+    "target": "17"
+  }, {
+    "id": "98",
+    "shape": "extends",
+    "source": "35",
+    "target": "17"
+  }, {
+    "id": "99",
+    "shape": "extends",
+    "source": "36",
+    "target": "18"
+  }, {
+    "id": "100",
+    "shape": "extends",
+    "source": "37",
+    "target": "18"
+  }, {
+    "id": "101",
+    "shape": "extends",
+    "source": "38",
+    "target": "19"
+  }, {
+    "id": "102",
+    "shape": "extends",
+    "source": "39",
+    "target": "19"
+  }, {
+    "id": "103",
+    "shape": "extends",
+    "source": "40",
+    "target": "20"
+  }, {
+    "id": "104",
+    "shape": "extends",
+    "source": "41",
+    "target": "20"
+  }, {
+    "id": "105",
+    "shape": "extends",
+    "source": "42",
+    "target": "21"
+  }, {
+    "id": "106",
+    "shape": "extends",
+    "source": "43",
+    "target": "21"
+  }, {
+    "id": "107",
+    "shape": "extends",
+    "source": "44",
+    "target": "22"
+  }, {
+    "id": "108",
+    "shape": "extends",
+    "source": "45",
+    "target": "22"
+  }, {
+    "id": "109",
+    "shape": "extends",
+    "source": "46",
+    "target": "23"
+  }, {
+    "id": "110",
+    "shape": "extends",
+    "source": "47",
+    "target": "23"
+  }, {
+    "id": "111",
+    "shape": "extends",
+    "source": "48",
+    "target": "24"
+  }, {
+    "id": "112",
+    "shape": "extends",
+    "source": "49",
+    "target": "24"
+  }, {
+    "id": "113",
+    "shape": "extends",
+    "source": "50",
+    "target": "25"
+  }, {
+    "id": "114",
+    "shape": "extends",
+    "source": "51",
+    "target": "25"
+  }, {
+    "id": "115",
+    "shape": "extends",
+    "source": "52",
+    "target": "26"
+  }, {
+    "id": "116",
+    "shape": "extends",
+    "source": "53",
+    "target": "26"
+  }, {
+    "id": "117",
+    "shape": "extends",
+    "source": "54",
+    "target": "27"
+  }, {
+    "id": "118",
+    "shape": "extends",
+    "source": "55",
+    "target": "27"
+  }, {
+    "id": "119",
+    "shape": "extends",
+    "source": "56",
+    "target": "28"
+  }, {
+    "id": "120",
+    "shape": "extends",
+    "source": "57",
+    "target": "28"
+  }, {
+    "id": "121",
+    "shape": "extends",
+    "source": "58",
+    "target": "29"
+  }, {
+    "id": "122",
+    "shape": "extends",
+    "source": "59",
+    "target": "29"
+  }, {
+    "id": "123",
+    "shape": "extends",
+    "source": "60",
+    "target": "30"
+  }, {
+    "id": "124",
+    "shape": "extends",
+    "source": "61",
+    "target": "30"
+  }, {
+    "id": "125",
+    "shape": "extends",
+    "source": "62",
+    "target": "31"
+  }, {
+    "id": "126",
+    "shape": "extends",
+    "source": "63",
+    "target": "31"
+  }
+  ]
+  getData()
+graph.value.fromJSON(cell.value)
+graph.value.zoomToFit({ padding: 10, maxScale: 1 })
+})
 
 </script>
-<template>
- <div class="app-study">
-   <div>
-</div>
-    <!--<el-row>
-        <el-col :span="24">
-          <img src="../../assets/images/32.png" alt="" />
-          <span>操作记录和成绩</span>
-        </el-col>
-      </el-row> --> 
- </div>
-</template>
 <style lang='scss'  scoped>
        .app-study{
-        // padding: 20px;
-        height: 105vh;
+        height: 83vh;
+        .el-button {
+    padding: 0 50px;
+    border: 2px solid #25f4f9;
+    background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
+    box-shadow: 0px 5px 6px 0px rgba(0, 48, 255, 0.77);
+    border-radius: 8px;
+    &:hover {
+      background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
+      border-color: #ffffff;
+      color: #fff;
+    }
+  }
+  .el-row{
+    height: 0;
+    position: absolute;
+    z-index: 999;
+  }
         // border: 1px solid #238AFF;
       //  border-radius: 5px;
        div{
-        margin-top: -90px;
-        margin-left: -130px;
-        height: 995px;
-        background: url('../../../assets/images/Merkle根.png' ) no-repeat !important;
+        // margin-top: -90px;
+        // margin-left: -130px;
+        // height: 1500px !important;
+        // background: url('../../../assets/images/Merkle根.png' ) no-repeat !important;
         background-size: 102% 100% !important;
        }
        .el-col-24 {
@@ -37,6 +1753,26 @@
         font-size: 14px;
         color: #ffff;
       }
+    }
+    .umlMain{
+      width: 3840px;
+      height: 1084px;
+      transform: scale(0.44) translateX(0);
+    position: absolute;
+    right: -1085px;
+    top: -135px;
     }
        } 
+       #umlContainer {
+    width: 100%;
+    height: 100%;
+    // border: 1px solid #ccc;
+  }
+  .merkleTree{
+    width: 100%;
+  }
+  .el-scrollbar {
+  --el-scrollbar-opacity: 0.7;
+  --el-scrollbar-bg-color: #1d95fd;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/visual/components/transaction-node.vue b/src/views/visual/components/transaction-node.vue
index b5c8c32..a73ab2f 100644
--- a/src/views/visual/components/transaction-node.vue
+++ b/src/views/visual/components/transaction-node.vue
@@ -1,16 +1,34 @@
 <script setup>
-
+import {toggleFullscreenContainer} from '@/utils/index.js'
+const fullScreen=()=>{
+  toggleFullscreenContainer('.nodeBody')
+  }
 </script>
 <template>
  <div class="app-study">
-   <div>
+  <img src="../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png" @click="fullScreen">
+   <div class="nodeBody">
+    <div class="nodeBody1">
+      <div class="nodeTop">
+        <!-- <img src="../../../assets/images/央行可视化监控中心-切图/交易节点/1-1箭头.png"> -->
+        <div class="imgAnimation1"></div>
+        <div class="imgAnimation2"></div>
+        <div class="imgAnimation3"></div>
+        <!-- <img src="../../../assets/images/央行可视化监控中心-切图/交易节点/1-2箭头.png">
+        <img src="../../../assets/images/央行可视化监控中心-切图/交易节点/1-3箭头.png"> -->
+      </div>
+      <div class="nodeMiddle">
+        <div class="imgAnimation1"></div>
+        <div class="imgAnimation2"></div>
+        <div class="imgAnimation3"></div>
+      </div>
+      <div class="nodeFoot">
+        <div class="imgAnimation1"></div>
+        <div class="imgAnimation2"></div>
+        <div class="imgAnimation3"></div>
+      </div>
+  </div>
 </div>
-    <!--<el-row>
-        <el-col :span="24">
-          <img src="../../assets/images/32.png" alt="" />
-          <span>操作记录和成绩</span>
-        </el-col>
-      </el-row> --> 
  </div>
 </template>
 <style lang='scss'  scoped>
@@ -20,11 +38,9 @@
         // border: 1px solid #238AFF;
       //  border-radius: 5px;
        div{
-        margin-top: -90px;
-        margin-left: -130px;
         height: 995px;
-        background: url('../../../assets/images/交易节点.png' ) no-repeat !important;
-        background-size: 102% 100% !important;
+        // background: url('../../../assets/images/交易节点.png' ) no-repeat !important;
+        // background-size: 102% 100% !important;
        }
        .el-col-24 {
       height: 69px;
@@ -38,5 +54,121 @@
         color: #ffff;
       }
     }
+    .nodeBody{
+      .nodeBody1{
+        position: relative;
+        width: 946px;
+      height: 1200px;
+      margin: auto;
+      }
+      position: relative;
+      width: 946px;
+      height: 1200px;
+      margin: auto;
+      margin-top: 30px;
+      .nodeTop{
+        position: relative;
+        height: 442px;
+        background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/一层.png') no-repeat;
+        background-position: center;
+        // background-size: 100% 100%;
+        .imgAnimation1{
+          width:100px;
+          height: 107px;
+          position: absolute;
+          left: 277px;
+          top: 105px;
+          background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/1-1箭头.png') no-repeat;
+          // animation: gif 5s infinite;
+        }
+        // @keyframes gif {
+        //   0% {
+        //     background-image: url('../../../assets/images/央行可视化监控中心-切图/交易节点/1-1箭头.png');
+        //   }
+        //   50% {
+        //     background-image: url('../../../assets/images/央行可视化监控中心-切图/交易节点/2-1箭头.png');
+        //   }
+        //   100% {
+        //     background-image: url('../../../assets/images/央行可视化监控中心-切图/交易节点/3-1箭头.png');
+        //   }
+        // }
+        .imgAnimation2 {
+          width: 16px;
+          height: 65px;
+          position: absolute;
+          background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/1-2箭头.png') no-repeat;
+          left: 466px;
+          top: 186px;
+        }
+        .imgAnimation3 {
+          width: 98px;
+          height: 108px;
+          background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/1-3箭头.png') no-repeat;
+          position: absolute;
+          left: 572px;
+          top: 103px;
+        }
+        }
+        .nodeMiddle{
+          height: 277px;
+          background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/二层.png') no-repeat;
+          background-position: center;
+          .imgAnimation1{
+            width: 79px;
+            height: 90px;
+            background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/2-1箭头.png') no-repeat;
+            position: absolute;
+            left: 204px;
+            top: 343px;
+        }
+        .imgAnimation2 {
+          width: 16px;
+          height: 102px;
+          background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/2-2箭头.png') no-repeat;
+          position: absolute;
+          left: 466px;
+          top: 390px;
+        }
+        .imgAnimation3 {
+          width: 79px;
+          height: 90px;
+          background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/2-3箭头.png') no-repeat;
+          position: absolute;
+          left: 665px;
+          top: 344px;
+        }
+        }
+        .nodeFoot{
+          height: 250px;
+          margin-top: -96px;
+          background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/三层.png') no-repeat;
+          background-position: center;
+          .imgAnimation1 {
+            width: 115px;
+            height: 235px;
+            background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/3-1箭头.png') no-repeat;
+          position: absolute;
+          left: 43px;
+          top: 454px;
+        }
+        .imgAnimation2  {
+          width: 16px;
+          height: 102px;
+          position: absolute;
+          left: 466px;
+          top: 625px;
+          background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/3-2箭头.png') no-repeat;
+        }
+        .imgAnimation3  {
+          width: 115px;
+            height: 235px;
+          position: absolute;
+          left: 789px;
+          background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/3-3箭头.png') no-repeat;
+          top: 454px;
+        }
+        }
+      }
+     
        } 
 </style>
\ No newline at end of file