Merge pull request 'dev_fjb' (#3) from dev_fjb into master

Reviewed-on: #3

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(770)
 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,10 +387,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -373,10 +404,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -390,10 +421,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -407,10 +438,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -424,10 +455,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "2"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -441,10 +472,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "3"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -458,10 +489,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -475,10 +506,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -492,10 +523,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "2"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -509,10 +540,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "3"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -526,10 +557,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "4"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -543,10 +574,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "5"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -560,10 +591,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "6"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -577,10 +608,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "7"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -597,7 +628,7 @@ Graph.registerEdge(
       "0-0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -611,10 +642,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "0-1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -628,10 +659,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1-0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -645,10 +676,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "1-1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -662,10 +693,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "2-0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -679,10 +710,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "2-1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -696,10 +727,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "3-0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -713,10 +744,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "3-1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -730,10 +761,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "4-0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -747,10 +778,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "4-1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -764,10 +795,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "5-0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -781,10 +812,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "5-1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -798,10 +829,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "6-0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -815,10 +846,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "6-1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -832,10 +863,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "7-0"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -849,10 +880,10 @@ Graph.registerEdge(
     "shape": "class",
     "name": [
       "Hash",
-      "0-0"
+      "7-1"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -868,7 +899,7 @@ Graph.registerEdge(
       "Hash1",
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -884,7 +915,7 @@ Graph.registerEdge(
       "Hash2",
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -900,7 +931,7 @@ Graph.registerEdge(
       "Hash3"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -916,7 +947,7 @@ Graph.registerEdge(
       "Hash4"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -932,7 +963,7 @@ Graph.registerEdge(
       "Hash5"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -948,7 +979,7 @@ Graph.registerEdge(
       "Hash6"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -964,7 +995,7 @@ Graph.registerEdge(
       "Hash7"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -980,7 +1011,7 @@ Graph.registerEdge(
       "Hash8"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -996,7 +1027,7 @@ Graph.registerEdge(
       "Hash9"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1012,7 +1043,7 @@ Graph.registerEdge(
       "Hash10",
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1028,7 +1059,7 @@ Graph.registerEdge(
       "Hash11"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1044,7 +1075,7 @@ Graph.registerEdge(
       "Hash12"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1060,7 +1091,7 @@ Graph.registerEdge(
       "Hash13",
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1076,7 +1107,7 @@ Graph.registerEdge(
       "Hash14"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1092,7 +1123,7 @@ Graph.registerEdge(
       "Hash15"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1108,7 +1139,7 @@ Graph.registerEdge(
       "Hash16"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1124,7 +1155,7 @@ Graph.registerEdge(
       "Hash17"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1140,7 +1171,7 @@ Graph.registerEdge(
       "Hash18"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1156,7 +1187,7 @@ Graph.registerEdge(
       "Hash19"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1172,7 +1203,7 @@ Graph.registerEdge(
       "Hash20"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1188,7 +1219,7 @@ Graph.registerEdge(
       "Hash21"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1204,7 +1235,7 @@ Graph.registerEdge(
       "Hash22"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1220,7 +1251,7 @@ Graph.registerEdge(
       "Hash23"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1236,7 +1267,7 @@ Graph.registerEdge(
       "Hash24"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1252,7 +1283,7 @@ Graph.registerEdge(
       "Hash25"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1268,7 +1299,7 @@ Graph.registerEdge(
       "Hash26"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1284,7 +1315,7 @@ Graph.registerEdge(
       "Hash27",
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1300,7 +1331,7 @@ Graph.registerEdge(
       "Hash28"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1316,7 +1347,7 @@ Graph.registerEdge(
       "Hash29"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1332,7 +1363,7 @@ Graph.registerEdge(
       "Hash30"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1348,7 +1379,7 @@ Graph.registerEdge(
       "Hash31"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -1364,7 +1395,7 @@ Graph.registerEdge(
       "Hash32"
     ],
     "attributes": [
-      "hash(adasfasd12fa1sd3f13a)"
+      ""
     ],
     "methods": [
     ],
@@ -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 {