完成交易区块,交易广播页面,增加全屏公共方法

src/utils/index.js

@@ -1,4 +1,10 @@
 import { parseTime } from './ruoyi'
+// 全屏公共方法
+export function toggleFullscreenContainer(Dome) {  
+  if (document.querySelector(Dome).requestFullscreen) {  
+    document.querySelector(Dome).requestFullscreen();  
+  } else if (document.querySelector(Dome).mozRequestFullScreen) { /* Firefox */ } else if (document.querySelector(Dome).webkitRequestFullscreen) { /* Chrome, Safari 和 Opera */ } else if (fullscreenContainer.msRequestFullscreen) { /* IE/Edge */ }  
+}  
 export function uuid() {
   var s = [];
   var hexDigits = "0123456789abcdef";

src/utils/request.js

@@ -15,12 +15,13 @@ 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.17:8800/',
   // baseURL: 'http://202.199.90.115:8800/',
-  // baseURL: 'http://qkljr.sztzjy.com:91/',
+  baseURL: 'http://qkljr.sztzjy.com:91/',
   // 超时
   timeout: 60000
 })
+
 // request拦截器
 service.interceptors.request.use(config => {
   // 是否需要设置 token

src/views/individual/consumermall/consumermall.vue

@@ -584,8 +584,8 @@ getRedPacket()
     //   flex-wrap: wrap;
  
         .red_packet_item{
-            display: inline-block;
-            width: 232px;
+             display: inline-block;
+             width: 232px;
              height: 283px;
              border-radius: 10px;
              background: url('../../../assets/images/个人用户-切图/消费商城/消费红包.png') no-repeat;

src/views/visual/components/transaction-block.vue

@@ -1,42 +1,157 @@
+<template>
+  <div class="app-deal-block">
+    <el-row>
+      <el-col :span="24">
+        <el-button type="primary" @click="toggleFullscreen">全屏</el-button>
+      </el-col>
+    </el-row>
+    <div class="deal-block-conter">
+      <div class="block-conter-header">
+        <div class="conter-header">
+          <div class="header-item">
+            <span>111111</span>
+          </div>
+        </div>
+        <div class="conter-header">
+          <span>1</span>
+        </div>
+      </div>
+      <div class="block-conter-content">
+        <el-scrollbar :height="height" always >
+        <div v-for="item in 30" :key="item" class="block-item">
+          <div class="block-item-title">
+            <span>区块链</span>
+          </div>
+          <div class="block-item-content">
+            <p>区块哈希：535bd60b1666b1b…</p>
+            <p>时间戳：535bd60b1666b1b…</p>
+            <p>前一区块哈希：000000000000…</p>
+          </div>
+          <div class="block-item-footer">
+            <span>交易数据：da014f8832082bc6…</span>
+          </div>
+        </div>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+</template>
 <script setup>
+import {toggleFullscreenContainer} from '@/utils/index.js'
+const height = ref(600)
+// 全屏函数
+const toggleFullscreen = () => {
+  height.value =950
+  toggleFullscreenContainer('.deal-block-conter')
+
+}
+// 监测退出全屏
+
+// 如何监听退出全屏
 
 </script>
-<template>
- <div class="app-study">
-   <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>
-       .app-study{
-        // padding: 20px;
-        height: 105vh;
-        // 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;
-       }
-       .el-col-24 {
-      height: 69px;
-      padding: 15px 13px;
+<style lang="scss" scoped>
+.app-deal-block {
+  padding: 20px;
+  .el-button {
+    padding: 0 50px;
+    border: 2px solid #25f4f9;
+    background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
+    box-shadow: 0px 5px 6px 0px rgba(0, 48, 255, 0.77);
+    border-radius: 8px;
+    &:hover {
+      background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
+      border-color: #ffffff;
+      color: #fff;
+    }
+  }
+  .deal-block-conter {
+    margin-top: 20px;
+    background: #091c6d;
+    border-radius: 10px;
+    padding: 20px 40px;
+    .block-conter-header {
       display: flex;
-      align-items: center;
-      span {
-        padding-left: 15px;
-        font-weight: bold;
-        font-size: 14px;
-        color: #ffff;
+      height: 58px;
+      gap: 30px;
+      .conter-header {
+        width: 220px;
+        height: 58px;
+        background: url("../../../assets/images/node1.png") no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+        line-height: 58px;
+        .header-item {
+          padding-left: 66px;
+          height: 58px !important;
+          display: flex;
+          flex-direction: column;
+        }
+      }
+    }
+    .block-conter-content {
+      width: 100%;
+      // display: grid;
+      // grid-template-columns: repeat(4, 1fr);
+      .block-item {
+        display: inline-block;
+        width: 242px;
+        height: 232px;
+        background: linear-gradient(0deg, #0036ff 0%, #082288 100%);
+        border-radius: 26px;
+        margin-top: 40px;
+        margin-right: 60px;
+        margin-bottom: 40px;
+        // div尾部插入图片
+        &::after {
+          content: "";
+          display: block;
+          position: relative;
+          width: 18px;
+          height: 20px;
+          right: -261px;
+          top:-56%;
+          background: url("../../../assets/images/链.png") no-repeat;
+          background-size: 100% 100%;
+        }
+        .block-item-title {
+          margin: 7px 6px;
+          width: 230px;
+          height: 46px;
+          border-image: linear-gradient(0deg, #00fdff, #ffffff) 10 10;
+          background: linear-gradient(0deg, #001eff 0%, #b16bff 100%);
+          box-shadow: 0px 4px 8px 0px #0041fc;
+          border-radius: 23px !important;
+          border: 2px solid;
+          line-height: 46px;
+          text-align: center;
+          font-size: 14px;
+        }
+        .block-item-content {
+          height: 131px;
+          padding: 10px 20px;
+          p {
+            font-size: 12px;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            color: #fefeff;
+          }
+        }
+        .block-item-footer {
+          width: 242px;
+          height: 46px;
+          background: #2c6dff;
+          border-radius: 0px 0px 23px 23px;
+          line-height: 46px;
+          text-align: center;
+          font-size: 12px;
+          font-weight: 600;
+        }
       }
     }
-       } 
+  }
+  :deep(.el-scrollbar__thumb){
+    background-color: #2B89FF !important;
+  }
+}
 </style>

src/views/visual/components/transaction-broadcast.vue

@@ -1,42 +1,57 @@
+<template>
+  <div class="app-deal-broadcast">
+    <el-row>
+      <el-col :span="24">
+        <img src="../../../assets/images/41.png" alt="" />
+        <span>交易广播</span>
+      </el-col>
+    </el-row>
+    <div class="el-tab" style="width: 60%">
+      <el-table :data="IndividualAssetsData" style="width: 100%" stripe>
+        <el-table-column align="center"  prop="username" label="交易编码/信息摘要">
+        </el-table-column>
+        <el-table-column align="center" prop="bankName" label="广播节点 ">
+        </el-table-column>
+        <el-table-column align="center" prop="bankAccount" label="时间戳">
+        </el-table-column>
+        <el-table-column align="center" prop="rmbBalance" label="操作">
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- <pagination
+       v-show="total1>0"
+      :total="total1"
+      v-model:page="params1.index"
+      v-model:limit="params1.size"
+      @pagination="getDigital"
+           /> -->
+  </div>
+</template>
 <script setup>
 
 </script>
-<template>
- <div class="app-study">
-   <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>
-       .app-study{
-        // padding: 20px;
-        height: 105vh;
-        // 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;
-       }
-       .el-col-24 {
-      height: 69px;
-      padding: 15px 13px;
-      display: flex;
-      align-items: center;
-      span {
-        padding-left: 15px;
-        font-weight: bold;
-        font-size: 14px;
-        color: #ffff;
-      }
+<style lang="scss" scoped>
+.app-deal-broadcast {
+  .el-col-24 {
+    height: 69px;
+    padding: 15px 13px;
+    display: flex;
+    align-items: center;
+    span {
+      padding-left: 15px;
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+  .el-tab {
+    border: 1px solid #1854a6;
+    padding: 6px;
+    margin: 20px 10px;
+    :deep(.el-table .el-table__header-wrapper th) {
+      background-color: #238aff !important;
+      color: #ffffff !important;
+      font-weight: 600;
     }
-       } 
+  }
+}
 </style>

src/views/visual/index.vue

@@ -6,119 +6,12 @@ import transactionNode from './components/transaction-node.vue';
 import transactionBlock from './components/transaction-block.vue';
 import transactionBroadcast from './components/transaction-broadcast.vue';
 import merkle from './components/merkle.vue';
-import useUserStore from "@/store/modules/user";
-const userStore = useUserStore();
-// 引入路由进行跳转
-import { useRouter } from 'vue-router';
-const router = useRouter();
-// 验证
-const dialogVisible = ref(false);
-// 解密
-const decodeVisible = ref(false);
-// 表格条数
-const total = ref(0);
-// 验证弹窗数组
-const dialogList = reactive([
-  {
-    name: '兑换行是否有缴存足额的准备金？',
-    value: '1',
-    checked: false
-  },
-  {
-    name: '兑换行公钥和私钥是否一致？',
-    value: '2',
-    checked: false
-  },
-  {
-    name: '兑换行公钥和私钥是否一致？',
-    value: '3',
-    checked: false
-  }
-])
+
 // 投放系统切换
 const isDeployed = ref(1);
 const  go = (idx) => {
     isDeployed.value=idx 
-  
-}
-const verifylParams= reactive({
-  userId:userStore.userId,
-  size:1,
-  index:1
-})
-const verifylList= ref(null)
-// 获取信息验证表格数据
-const getTableData = async () => {
-  try {
-    const res = await centralBank.getTableData(verifylParams)
-    verifylList.value = res.data.list
-    total.value = res.data.total
-  } catch (error) {
-    
-  }
 }
-// 解密params
-const decryptParams = reactive({
-  Abstract:'',
-  detailId:'',
-  publicKey:''
-})
-//解密函数
-const decryptData = (val) => {
-  decodeVisible.value = true
-  decryptParams.Abstract=val.transactionCode
-  decryptParams.detailId=val.detailId
-  console.log(val,"val");
-};
-const submitDecryptedForm = async() => {
-  try {
-    const res = await centralBank.decrypt(decryptParams)
-    if(res.code == 200){
-      decodeVisible.value = false
-      proxy.resetForm('ruleFormRef')
-      getTableData()
-    
-    }
-  } catch (error) {
-    
-  }
-};
-
-const showValidationAlert = (code) => {
-  dialogVisible.value = true
-  decryptParams.detailId=code
-};
-const  showverify = async() => {
-  try {
-    const res = await centralBank.verify(decryptParams.detailId)
-    if(res.code == 200){
-      dialogVisible.value = false
-      // proxy.resetForm('ruleFormRef')
-      getTableData()
-    
-    }
-  } catch (error) {
-    
-  }
-};
-//申请
-const apply = async(code) => {
-  
-  try {
-    decryptParams.detailId=code
-    const res = await centralBank.applygenerate(decryptParams.detailId)
-    if(res.code == 200){
-      getTableData()
-      proxy.$modal.msgSuccess(res.msg);
-      // dialogVisible.value = false
-      // proxy.resetForm('ruleFormRef')
-    }
-  } catch (error) {
-    
-  }
-};
-// 验证选择
-getTableData()
 </script>
 <template>
   <div class="app-central">
@@ -143,6 +36,7 @@ getTableData()
   // background-color: #fff;
   color: #ffffff;
   padding: 20px;
+  
   .central-bank-title {
     margin-bottom: 20px;
     div {
@@ -208,93 +102,10 @@ getTableData()
         color: #ffffff !important;
         font-weight: 600;
       }
-     
     }
   }
 }
 .svg-icon{
     margin-right: 6px;
 }
-:deep(.el-dialog){
-    background: url('../../../assets/images/dialogimg.png') no-repeat  !important ;
-  background-size:100% 100% !important;
-  .el-dialog__header{
-    padding: 0px;
-    display: flex;
-    justify-content: center;
- 
-    .el-dialog__headerbtn{
-      .el-dialog__close{
-      // background-color: pink !important;
-      // 插入照片上去
-      background: url('../../../assets/images/x.png') no-repeat  !important ;
-      background-size:100% 100% !important;
-      width: 28px;
-      height: 28px;
-      margin-right: 15px;
-      cursor: pointer;
-     }
-     }
-    .el-dialog__title{
-      margin-top: -20px;
-      text-align: center;
-      width: 216px;
-      height: 59px;
-      line-height: 59px;
-      background: url('../../../assets/images/中央银行-切图/验证+解密弹窗-切图/弹窗标题.png') no-repeat  !important ;
-      background-size:100% 100% !important;
-     color: #ffffff;
-     
-    
-    }
-  }
-  .el-dialog__body{
-    padding: 30px 60px;
-    .df{
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      color: #ffffff;
-     
-    }
-    .el-form {
-      .el-form-item__label{
-        color: #ffffff;
-        height: 46px;
-    line-height: 46px;
-      }
-      .el-input__wrapper{
-        background-color: transparent;
-        box-shadow: none;
-        caret-color: #ffffff;
-       
-      }
-      .el-input{
-        height: 46px;
-        background: url('../../../assets/images/中央银行-切图/验证+解密弹窗-切图/输入框.png') no-repeat  !important ;
-       background-size:100% 100% !important;
-      
-       .el-input__inner{
-        color: #ffffff;
-       }
-      }
-    }
-  }
-  .el-dialog__footer{
-    text-align: center;
-    .dialog-footer{
-      .el-button{
-        // width: 244px;
-        padding: 0 107px;
-        height: 52px;
-        border: 2px solid #25F4F9;
-        background: linear-gradient(0deg, #0654B5 0%, #003155 50%, #2CD1E4 100%);
-        box-shadow: 0px 5px 6px 0px rgba(0,48,255,0.77);
-        border-radius: 8px;
-  //       background: url('../../../assets/images/中央银行-切图/验证+解密弹窗-切图/确定.png') no-repeat  !important ;
-  // background-size:100% 100% !important;
-      }
-    }
-  }
-}
 </style>