'交''

src/views/visual/components/merkle.vue

@@ -11,7 +11,6 @@
       <div class="umlMain">
         <div ref="umlContainer" id="umlContainer" class="umlContainer"></div>
       </div>
-    
     </el-scrollbar>
   </div>
  </div>
@@ -38,21 +37,64 @@ const getData=async()=>{
     // 在这里操作每个数组
     // 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';
-    // });
+      // 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
+      })
+    }
   }
   graph.value.fromJSON(cell.value)
   graph.value.zoomToFit({ padding: 10, maxScale: 1 })
@@ -61,32 +103,21 @@ const getData=async()=>{
 }
 
 // 全屏函数
-const height=ref(1084)
+const height=ref(790)
 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
+  height.value =1084
 }
   // 处理退出全屏的函数
   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=''
-    // 在这里可以添加你想要执行的操作
+      height.value=790
   }
 }
 const cell=ref([])
@@ -342,7 +373,7 @@ Graph.registerEdge(
       "Top hash",
     ],
     "attributes": [
-      "adasfasd12fa1sd3f13a"
+      ""
     ],
     "methods": [
     ],
@@ -356,7 +387,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -373,7 +404,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -390,7 +421,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -407,7 +438,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -424,7 +455,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "2"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -441,7 +472,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "3"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -458,7 +489,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -475,7 +506,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -492,7 +523,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "2"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -509,7 +540,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "3"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -526,7 +557,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "4"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -543,7 +574,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "5"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -560,7 +591,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "6"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -577,7 +608,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "7"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -611,7 +642,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "0-1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -628,7 +659,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1-0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -645,7 +676,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1-1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -662,7 +693,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "2-0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -679,7 +710,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "2-1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -696,7 +727,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "3-0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -713,7 +744,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "3-1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -730,7 +761,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "4-0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -747,7 +778,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "4-1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -764,7 +795,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "5-0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -781,7 +812,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "5-1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -798,7 +829,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "6-0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -815,7 +846,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "6-1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -832,7 +863,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "7-0"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -849,7 +880,7 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "7-1"
     ],
     "attributes": [
       "hash(adasfasd12fa1sd3f13a)"
@@ -1757,10 +1788,6 @@ 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 {