From f798d569aebdf79fcf8e759b9a6f14987feae462 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=96=B9=E4=BD=B3=20=E5=8D=9A?= <12742597+fang-jiabo@user.noreply.gitee.com> Date: Wed, 15 Nov 2023 16:29:11 +0800 Subject: [PATCH] =?UTF-8?q?'=E4=BA=A4''?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/visual/components/merkle.vue | 155 +++++++++++++++---------- 1 file changed, 91 insertions(+), 64 deletions(-) diff --git a/src/views/visual/components/merkle.vue b/src/views/visual/components/merkle.vue index 99d23d5..e3e34f4 100644 --- a/src/views/visual/components/merkle.vue +++ b/src/views/visual/components/merkle.vue @@ -11,7 +11,6 @@
- @@ -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 {