src/views/visual/components/merkle.vue

@@ -11,6 +11,7 @@
       <div class="umlMain">
         <div ref="umlContainer" id="umlContainer" class="umlContainer"></div>
       </div>
+    
     </el-scrollbar>
   </div>
  </div>
@@ -37,64 +38,21 @@ const getData=async()=>{
     // 在这里操作每个数组
     // console.log(`Array for key ${key}:`, array);
     if(key==='one'){
-      // cell.value[0].attributes[0]=array.slice(0,13)+'...'
-      const truncatedString = computed(() => {
-        return array[0].length > 15
-          ? array[0].substring(0, 15) + '...'
-          : array[0];
-      });
-      cell.value[0].attributes[0]=truncatedString.value
-    }
-    if(key==='two'){
-      array.forEach((item,index)=>{
-          const truncatedString = computed(() => {
-          return item.length > 15
-            ? item.substring(0, 15) + '...'
-            : item;
-        });
-        cell.value[index+1].attributes[0]=truncatedString.value
-      })
-    }
-    if(key==='three'){
-      array.forEach((item,index)=>{
-          const truncatedString = computed(() => {
-          return item.length > 15
-            ? item.substring(0, 15) + '...'
-            : item;
-        });
-        cell.value[index+3].attributes[0]=truncatedString.value
-      })
-    }
-    if(key==='four'){
-      array.forEach((item,index)=>{
-          const truncatedString = computed(() => {
-          return item.length > 15
-            ? item.substring(0, 15) + '...'
-            : item;
-        });
-        cell.value[index+7].attributes[0]=truncatedString.value
-      })
-    }
-    if(key==='five'){
-      array.forEach((item,index)=>{
-          const truncatedString = computed(() => {
-          return item.length > 15
-            ? item.substring(0, 15) + '...'
-            : item;
-        });
-        cell.value[index+15].attributes[0]=truncatedString.value
-      })
-    }
-    if(key==='six'){
-      array.forEach((item,index)=>{
-          const truncatedString = computed(() => {
-          return item.length > 15
-            ? item.substring(0, 15) + '...'
-            : item;
-        });
-        cell.value[index+31].attributes[0]=truncatedString.value
-      })
-    }
+      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 })
@@ -103,21 +61,32 @@ const getData=async()=>{
 }
 
 // 全屏函数
-const height=ref(770)
+const height=ref(1084)
 const toggleFullscreen = () => {
   toggleFullscreenContainer('.merkleTree')
   document.addEventListener('fullscreenchange', exitFullscreenHandler);
   document.addEventListener('webkitfullscreenchange', exitFullscreenHandler);
   document.addEventListener('mozfullscreenchange', exitFullscreenHandler);
   document.addEventListener('MSFullscreenChange', exitFullscreenHandler);
-  height.value =1084
+  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) {
     // 退出全屏后执行的代码
-      height.value=790
+    // 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([])
@@ -373,7 +342,7 @@ Graph.registerEdge(
       "Top hash",
     ],
     "attributes": [
-      ""
+      "adasfasd12fa1sd3f13a"
     ],
     "methods": [
     ],
@@ -387,10 +356,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -404,10 +373,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -421,10 +390,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -438,10 +407,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -455,10 +424,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "2"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -472,10 +441,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "3"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -489,10 +458,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -506,10 +475,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -523,10 +492,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "2"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -540,10 +509,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "3"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -557,10 +526,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "4"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -574,10 +543,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "5"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -591,10 +560,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "6"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -608,10 +577,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "7"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -628,7 +597,7 @@ Graph.registerEdge(
       "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -642,10 +611,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -659,10 +628,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "1-0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -676,10 +645,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "1-1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -693,10 +662,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "2-0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -710,10 +679,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "2-1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -727,10 +696,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "3-0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -744,10 +713,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "3-1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -761,10 +730,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "4-0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -778,10 +747,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "4-1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -795,10 +764,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "5-0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -812,10 +781,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "5-1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -829,10 +798,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "6-0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -846,10 +815,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "6-1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -863,10 +832,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "7-0"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -880,10 +849,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "7-1"
+      "0-0"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -899,7 +868,7 @@ Graph.registerEdge(
       "Hash1",
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -915,7 +884,7 @@ Graph.registerEdge(
       "Hash2",
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -931,7 +900,7 @@ Graph.registerEdge(
       "Hash3"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -947,7 +916,7 @@ Graph.registerEdge(
       "Hash4"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -963,7 +932,7 @@ Graph.registerEdge(
       "Hash5"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -979,7 +948,7 @@ Graph.registerEdge(
       "Hash6"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -995,7 +964,7 @@ Graph.registerEdge(
       "Hash7"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1011,7 +980,7 @@ Graph.registerEdge(
       "Hash8"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1027,7 +996,7 @@ Graph.registerEdge(
       "Hash9"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1043,7 +1012,7 @@ Graph.registerEdge(
       "Hash10",
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1059,7 +1028,7 @@ Graph.registerEdge(
       "Hash11"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1075,7 +1044,7 @@ Graph.registerEdge(
       "Hash12"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1091,7 +1060,7 @@ Graph.registerEdge(
       "Hash13",
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1107,7 +1076,7 @@ Graph.registerEdge(
       "Hash14"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1123,7 +1092,7 @@ Graph.registerEdge(
       "Hash15"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1139,7 +1108,7 @@ Graph.registerEdge(
       "Hash16"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1155,7 +1124,7 @@ Graph.registerEdge(
       "Hash17"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1171,7 +1140,7 @@ Graph.registerEdge(
       "Hash18"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1187,7 +1156,7 @@ Graph.registerEdge(
       "Hash19"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1203,7 +1172,7 @@ Graph.registerEdge(
       "Hash20"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1219,7 +1188,7 @@ Graph.registerEdge(
       "Hash21"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1235,7 +1204,7 @@ Graph.registerEdge(
       "Hash22"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1251,7 +1220,7 @@ Graph.registerEdge(
       "Hash23"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1267,7 +1236,7 @@ Graph.registerEdge(
       "Hash24"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1283,7 +1252,7 @@ Graph.registerEdge(
       "Hash25"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1299,7 +1268,7 @@ Graph.registerEdge(
       "Hash26"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1315,7 +1284,7 @@ Graph.registerEdge(
       "Hash27",
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1331,7 +1300,7 @@ Graph.registerEdge(
       "Hash28"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1347,7 +1316,7 @@ Graph.registerEdge(
       "Hash29"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1363,7 +1332,7 @@ Graph.registerEdge(
       "Hash30"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1379,7 +1348,7 @@ Graph.registerEdge(
       "Hash31"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1395,7 +1364,7 @@ Graph.registerEdge(
       "Hash32"
     ],
     "attributes": [
-      ""
+      "hash(adasfasd12fa1sd3f13a)"
     ],
     "methods": [
     ],
@@ -1788,6 +1757,10 @@ graph.value.zoomToFit({ padding: 10, maxScale: 1 })
     .umlMain{
       width: 3840px;
       height: 1084px;
+      transform: scale(0.44) translateX(0);
+    position: absolute;
+    right: -1085px;
+    top: -135px;
     }
        } 
        #umlContainer {