Merge pull request '合并dev' (#2) from dev_fjb into master

Reviewed-on: #2

package.json

@@ -15,13 +15,14 @@
     "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",
     "axios": "0.27.2",
     "echarts": "5.4.0",
     "element-plus": "2.2.27",
-    "file-saver": "2.0.5", 
+    "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",

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
+  })
 }

src/utils/request.js

@@ -15,8 +15,8 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   // baseURL: import.meta.env.VITE_APP_BASE_API,
   // baseURL: 'http://118.31.7.2:8800/',
-  // baseURL: 'http://192.168.2.17:8800/',
-  baseURL: 'http://192.168.2.4:8800/',
+  baseURL: 'http://192.168.2.15:8800/',
+  // baseURL: 'http://192.168.2.4:8800/',
   // baseURL: 'http://202.199.90.115:8800/',
   // baseURL: 'http://qkljr.sztzjy.com:91/',
   // 超时

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>

src/views/visual/index.vue

@@ -27,7 +27,7 @@ const  go = (idx) => {
      <transaction-node v-show="isDeployed == 2"></transaction-node>
      <transactionBlock v-show="isDeployed == 3"></transactionBlock>
      <transactionBroadcast v-show="isDeployed == 4"></transactionBroadcast>
-     <merkle v-show="isDeployed == 5"></merkle>
+     <merkle v-if="isDeployed == 5"></merkle>
     </div>
   </div>
 </template>