央行可视化完成

package.json

@@ -30,7 +30,8 @@
     "pinia": "2.0.22",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "vue3-count-to": "^1.1.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",

src/api/user.js

@@ -167,4 +167,48 @@ export const getBalance = (query) => {
         method: 'get',
         params:query
       })
+}
+
+
+
+
+
+
+
+
+
+
+
+// ---------------------------------------------------------------------央行可视化
+// 交易总览
+export const getTransactionOverview = (query) => {
+    return request({
+        url: 'api/stu/centralBank/getTransactionOverview',
+        method: 'get',
+        params:query
+      })
+}
+// 获取交易区块
+export const getTransactionBlock = (query) => {
+    return request({
+        url: 'api/stu/centralBank/getTransactionBlockList',
+        method: 'get',
+        params:query
+      })
+}
+// 获取交易广播
+export const getTransactionBroadcast = (query) => {
+    return request({
+        url: 'api/stu/centralBank/getTransactionBroadcastList',
+        method: 'get',
+        params:query
+      })
+}
+//查看广播详情
+export const getBroadcastDetails = (query) => {
+    return request({
+        url: 'api/stu/centralBank/getTransactionBroadcastList',
+        method: 'get',
+        params:query
+      })
 }

src/main.js

@@ -42,7 +42,7 @@ import ImagePreview from "@/components/ImagePreview"
 import TreeSelect from '@/components/TreeSelect'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
-
+import countTo from 'vue3-count-to';
 const app = createApp(App)
 
 // 全局方法挂载
@@ -66,6 +66,7 @@ app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 
 app.use(router)
+app.use(countTo)
 app.use(store)
 app.use(plugins)
 app.use(elementIcons)

src/utils/auth.js

@@ -31,7 +31,6 @@ export function getToken() {
 export function setToken(token) {
   return Cookies.set(TokenKey, token)
 }
-
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }

src/utils/request.js

@@ -22,7 +22,6 @@ const service = axios.create({
   // 超时
   timeout: 60000
 })
-
 // request拦截器
 service.interceptors.request.use(config => {
   // 是否需要设置 token

src/views/enterprise/deal/deal.vue

@@ -2,6 +2,7 @@
 import * as  enterpriseUser from '@/api/enterpriseUser';
 import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
+import {getSchoolId} from "@/utils/auth.js"
 // 验证
 const dialogVisible = ref(false);
 // 解密
@@ -45,6 +46,7 @@ const transactionParams=reactive({
 // 上链广播parasm
 const broadcastParams=reactive({
   userId:userStore.userId,
+  schoolId:getSchoolId(),
   index:1,
   size:5
 })
@@ -139,15 +141,15 @@ getTransaction()
             </template>
           </el-table-column>
         </el-table>
-        <pagination
+      
+      </div>
+      <pagination
        v-show="broadcastTotal>0"
       :total="broadcastTotal"
       v-model:page="broadcastParams.index"
       v-model:limit="broadcastParams.size"
       @pagination="getBroadcast"
            />
-      </div>
-   
       <el-dialog
     v-model="dialogVisible"
     title="查看数字货币"
@@ -187,7 +189,6 @@ getTransaction()
   </el-form>
     <template #footer>
       <span class="dialog-footer">
-       
         <el-button type="primary" @click="decodeVisible = false">数字签名 生成数字货币</el-button>
       </span>
     </template>

src/views/enterprise/index.vue

@@ -15,10 +15,34 @@ const  go = (idx) => {
 <template>
   <div class="app-central">
     <div class="central-bank-title">
-      <div @click.native="go(1)"><span>钱包管理</span></div>
-      <div @click.native="go(2)"><span>交易数据</span></div>
-      <div @click.native="go(3)"><span>公司经营</span></div>
-      <div @click.native="go(4)"><span>智能合约模拟</span></div>
+      <div @click.native="go(1)">
+        <span class="line"></span>
+        <span class="line"></span>
+        <span class="line"></span>
+        <span class="line"></span> 
+        <span class="content">钱包管理</span>
+      </div>
+      <div @click.native="go(2)">
+        <span class="lines"></span>
+        <span class="lines"></span>
+        <span class="lines"></span>
+        <span class="lines"></span> 
+        <span class="content">交易数据</span>
+      </div>
+      <div @click.native="go(3)">
+        <span class="line1"></span>
+        <span class="line1"></span>
+        <span class="line1"></span>
+        <span class="line1"></span> 
+        <span class="content">公司经营</span>
+      </div>
+      <div @click.native="go(4)">
+        <span class="line2"></span>
+        <span class="line2"></span>
+        <span class="line2"></span>
+        <span class="line2"></span> 
+        <span class="content">智能合约模拟</span>
+      </div>
     </div>
     <div class="central-ban-information">
        <wallet v-if="tabsid == 1"></wallet>
@@ -45,16 +69,404 @@ const  go = (idx) => {
       background: url("../../assets/images/企业用户-切图/钱包管理/导航1-1.png") no-repeat;
       background-size: 100% 100%;
       margin-right: 20px;
-      text-align: center;
-      line-height: 51px;
+      // text-align: center;
+      // line-height: 51px;
       font-size: 14px;
       cursor: pointer;
       user-select: none;
-      span{
+      position: relative;
+            /* 超出隐藏需要加上 */
+      overflow: hidden;
+      // span{
+      //   display: inline-block;
+      //   width: 100%;
+      // }
+      // 点击效果
+      .line{
+        position: absolute;
+      }
+      .content{
         display: inline-block;
-        width: 100%;
+        width: 233px;
+        height: 51px;
+        text-align: center;
+        line-height: 51px;
       }
-      // 点击效果
+      .line:nth-child(1) {
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            /* 加上渐变效果，方可形成拖尾效果 */
+            background: linear-gradient(90deg, transparent, #3694ef);
+            animation: animate1 8s linear infinite;
+        }
+
+        /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
+        @keyframes animate1 {
+            0% {
+                left: -100%;
+            }
+
+            50%,
+            100% {
+                left: 100%;
+            }
+        }
+
+        .line:nth-child(2) {
+            top: -100%;
+            right: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent,#3694ef);
+            animation: animate2 8s linear infinite;
+            /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
+            animation-delay: 2s;
+        }
+
+        @keyframes animate2 {
+            0% {
+                top: -100%;
+            }
+
+            50%,
+            100% {
+                top: 100%;
+            }
+        }
+
+        .line:nth-child(3) {
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            background: linear-gradient(270deg, transparent, #3694ef);
+            animation: animate3 8s linear infinite;
+            animation-delay: 4s;
+        }
+
+        @keyframes animate3 {
+            0% {
+                right: -100%;
+                height: 3px;
+            }
+
+            50%,
+            100% {
+                height: 2px;
+                right: 100%;
+            }
+        }
+
+        .line:nth-child(4) {
+            bottom: -100%;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(360deg, transparent, #3a86ff);
+            animation: animate4 8s linear infinite;
+            animation-delay: 6s;
+        }
+
+        @keyframes animate4 {
+            0% {
+                bottom: -100%;
+            }
+
+            50%,
+            100% {
+                bottom: 100%;
+            }
+        }
+
+        .lines{
+        position: absolute;
+      }
+      .content{
+        display: inline-block;
+        width: 233px;
+        height: 51px;
+        text-align: center;
+        line-height: 51px;
+      }
+      .lines:nth-child(1) {
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            /* 加上渐变效果，方可形成拖尾效果 */
+            background: linear-gradient(90deg, transparent, #f4d048);
+            animation: animate1 8s linear infinite;
+        }
+
+        /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
+        @keyframes animate1 {
+            0% {
+                left: -100%;
+            }
+
+            50%,
+            100% {
+                left: 100%;
+            }
+        }
+
+        .lines:nth-child(2) {
+            top: -100%;
+            right: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent,#f4d048);
+            animation: animate2 8s linear infinite;
+            /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
+            animation-delay: 2s;
+        }
+
+        @keyframes animate2 {
+            0% {
+                top: -100%;
+            }
+
+            50%,
+            100% {
+                top: 100%;
+            }
+        }
+
+        .lines:nth-child(3) {
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            background: linear-gradient(270deg, transparent, #f4d048);
+            animation: animate3 8s linear infinite;
+            animation-delay: 4s;
+        }
+
+        @keyframes animate3 {
+            0% {
+                right: -100%;
+                height: 3px;
+            }
+
+            50%,
+            100% {
+                height: 2px;
+                right: 100%;
+            }
+        }
+
+        .lines:nth-child(4) {
+            bottom: -100%;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(360deg, transparent, #f4d048);
+            animation: animate4 8s linear infinite;
+            animation-delay: 6s;
+        }
+
+        @keyframes animate4 {
+            0% {
+                bottom: -100%;
+            }
+
+            50%,
+            100% {
+                bottom: 100%;
+            }
+        }
+        .line1{
+        position: absolute;
+      }
+      .content{
+        display: inline-block;
+        width: 233px;
+        height: 51px;
+        text-align: center;
+        line-height: 51px;
+      }
+      .line1:nth-child(1) {
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            /* 加上渐变效果，方可形成拖尾效果 */
+            background: linear-gradient(90deg, transparent, #9475e3);
+            animation: animate1 8s linear infinite;
+        }
+
+        /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
+        @keyframes animate1 {
+            0% {
+                left: -100%;
+            }
+
+            50%,
+            100% {
+                left: 100%;
+            }
+        }
+
+        .line1:nth-child(2) {
+            top: -100%;
+            right: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent,#9475e3);
+            animation: animate2 8s linear infinite;
+            /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
+            animation-delay: 2s;
+        }
+
+        @keyframes animate2 {
+            0% {
+                top: -100%;
+            }
+
+            50%,
+            100% {
+                top: 100%;
+            }
+        }
+
+        .line1:nth-child(3) {
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            background: linear-gradient(270deg, transparent, #9475e3);
+            animation: animate3 8s linear infinite;
+            animation-delay: 4s;
+        }
+
+        @keyframes animate3 {
+            0% {
+                right: -100%;
+                height: 3px;
+            }
+
+            50%,
+            100% {
+                height: 2px;
+                right: 100%;
+            }
+        }
+
+        .line1:nth-child(4) {
+            bottom: -100%;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(360deg, transparent, #9475e3);
+            animation: animate4 8s linear infinite;
+            animation-delay: 6s;
+        }
+
+        @keyframes animate4 {
+            0% {
+                bottom: -100%;
+            }
+
+            50%,
+            100% {
+                bottom: 100%;
+            }
+        }
+        .line2{
+        position: absolute;
+      }
+      .content{
+        display: inline-block;
+        width: 233px;
+        height: 51px;
+        text-align: center;
+        line-height: 51px;
+      }
+      .line2:nth-child(1) {
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            /* 加上渐变效果，方可形成拖尾效果 */
+            background: linear-gradient(90deg, transparent, #7ac2a2);
+            animation: animate1 8s linear infinite;
+        }
+
+        /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
+        @keyframes animate1 {
+            0% {
+                left: -100%;
+            }
+
+            50%,
+            100% {
+                left: 100%;
+            }
+        }
+
+        .line2:nth-child(2) {
+            top: -100%;
+            right: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent,#7ac2a2);
+            animation: animate2 8s linear infinite;
+            /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
+            animation-delay: 2s;
+        }
+
+        @keyframes animate2 {
+            0% {
+                top: -100%;
+            }
+
+            50%,
+            100% {
+                top: 100%;
+            }
+        }
+
+        .line2:nth-child(3) {
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            background: linear-gradient(270deg, transparent, #7ac2a2);
+            animation: animate3 8s linear infinite;
+            animation-delay: 4s;
+        }
+
+        @keyframes animate3 {
+            0% {
+                right: -100%;
+                height: 3px;
+            }
+
+            50%,
+            100% {
+                height: 2px;
+                right: 100%;
+            }
+        }
+
+        .line2:nth-child(4) {
+            bottom: -100%;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(360deg, transparent, #7ac2a2);
+            animation: animate4 8s linear infinite;
+            animation-delay: 6s;
+        }
+
+        @keyframes animate4 {
+            0% {
+                bottom: -100%;
+            }
+
+            50%,
+            100% {
+                bottom: 100%;
+            }
+        }
       &:hover{
             transform: scale(1.01);
             transition: transform 0.3s, opacity 0.3s; 
@@ -62,9 +474,7 @@ const  go = (idx) => {
     }
     div:nth-child(2) {
         background: url("../../assets/images/企业用户-切图/钱包管理/导航2-1.png") no-repeat;
-    span{
-        padding-left: 25px;
-    }
+   
     }
     div:nth-child(3) {
         background: url("../../assets/images/企业用户-切图/钱包管理/导航3-1.png") no-repeat;

src/views/index.vue

@@ -69,7 +69,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   width: 100%;
   height: calc(100vh - 50px);
@@ -95,6 +95,13 @@ img {
     top: 8px;
     width: 900px;
     height: 423px;
+    /*动画效果 */
+    animation: rotate 2s linear infinite;
+    //hover
+    &:hover{
+            transform: scale(1);
+            animation: none;
+        }
 }
 
 .sy {
@@ -104,8 +111,13 @@ img {
     top: 8px;
     width: 482px;
     height: 373px;
+    animation: rotate 2s linear infinite;
+      //hover
+      &:hover{
+            transform: scale(1);
+            animation: none;
+        }
 }
-
 .qy {
   /* left: 192px;
   top: 585px; */
@@ -113,8 +125,13 @@ img {
     top: 485px;
     width: 500px;
     height: 370px;
+    animation: rotate 2s linear infinite;
+//hover
+    &:hover{
+            transform: scale(1);
+            animation: none;
+        }
 }
-
 .gr {
   /* left: 1217px;
   top: 578px; */
@@ -122,6 +139,12 @@ img {
     top: 468px;
     width: 538px;
     height: 405px;
+    animation: rotate 2s linear infinite;
+      //hover
+      &:hover{
+            transform: scale(1);
+            animation: none;
+        }
 }
 
 .jt1 {
@@ -340,4 +363,15 @@ img {
   left: 1534px;
     top: 745px;
 }
+@keyframes rotate{
+  0%{
+    transform: scale(1);
+  }
+  50%{
+    transform: scale(0.9);
+  }
+  100%{
+    transform: scale(1.01);
+  }
+}
 </style>

src/views/individual/consumermall/consumermall.vue

@@ -547,7 +547,6 @@ getRedPacket()
         <el-input  class="text-input"  v-model="buyCommodityParams.redPacket" @input="handleInput" :disabled="true"/>
         <el-button link  type="warning" @click="selectRedPacket">选择</el-button>
         </div>
-  
     </el-form-item>
     <el-form-item label="选择金额合计">
       <span style="color: #ffff !important;display: block;">{{ sum1 }}</span>
@@ -584,7 +583,7 @@ getRedPacket()
     //   flex-wrap: wrap;
  
         .red_packet_item{
-             display: inline-block;
+            display: inline-block;
              width: 232px;
              height: 283px;
              border-radius: 10px;

src/views/individual/detail/detail.vue

@@ -2,6 +2,7 @@
 import * as  enterpriseUser from '@/api/enterpriseUser';
 import * as user from '@/api/user'
 import useUserStore from "@/store/modules/user";
+import {getSchoolId} from "@/utils/auth.js"
 const userStore = useUserStore();
 // 验证
 const dialogVisible = ref(false);
@@ -45,6 +46,7 @@ const IndividualParams=reactive({
 })
 const broadcastParams=reactive({
   userId:userStore.userId,
+  schoolId:getSchoolId(),
   index:1,
   size:5
 })
@@ -140,14 +142,14 @@ getIndividual()
             </template>
           </el-table-column> -->
         </el-table>
-        <pagination
+      </div>
+      <pagination
        v-show="broadcastTotal>0"
       :total="broadcastTotal"
       v-model:page="broadcastParams.index"
       v-model:limit="broadcastParams.size"
       @pagination="getBroadcast"
            />
-      </div>
       <el-dialog
     v-model="dialogVisible"
     title="查看数字货币"

src/views/study/index.vue

@@ -120,7 +120,8 @@
 </template>
 
 <script setup>
-import {getToken} from "@/utils/auth.js"
+
+import {getToken ,getSchoolId} from "@/utils/auth.js"
 import useUserStore from "@/store/modules/user";
 const userStore = useUserStore();
 import * as controller from "@/api/controller.js"
@@ -460,7 +461,7 @@ const checkComment=(test)=>{
 }
 // 获取操作记录和成绩
 const getRecord=()=>{
-  controller.getScore({schoolId:userStore.schoolid,userId:userStore.userId}).then((res) => {
+  controller.getScore({schoolId:getSchoolId(),userId:userStore.userId}).then((res) => {
     // 中央银行
     tabaData[0].actual=res.data.totalDigitalCurrencyExchangeAmount
     tabaData[1].actual=res.data.centralBankDigitalCurrencyDeliveryCount

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

@@ -9,62 +9,91 @@
       <div class="block-conter-header">
         <div class="conter-header">
           <div class="header-item">
-            <span>111111</span>
+             <span>节点数</span><br>
+             <span style="color: #FFDE00;">{{ nodeNumber }}</span>
           </div>
         </div>
         <div class="conter-header">
-          <span>1</span>
+          <div class="header-item">
+             <span>链高度</span><br>
+             <span style="color: #FFDE00;">{{ chainHeight }}</span>
+          </div>
         </div>
       </div>
       <div class="block-conter-content">
         <el-scrollbar :height="height" always >
-        <div v-for="item in 30" :key="item" class="block-item">
+        <div v-for="item in transactionBlockData" :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>
+            <p>区块哈希：{{ item.blockHash }}</p>
+            <p>时间戳：{{ item.timestamp }}</p>
+            <p>前一区块哈希：{{ item.previousBlock }}</p>
           </div>
           <div class="block-item-footer">
-            <span>交易数据：da014f8832082bc6…</span>
+            <span>交易数据：{{ item.transactionCode }}</span>
           </div>
         </div>
         </el-scrollbar>
-      </div>
+     </div>
     </div>
   </div>
 </template>
 <script setup>
+import {getTransactionBlock} from '@/api/user.js'
 import {toggleFullscreenContainer} from '@/utils/index.js'
-const height = ref(600)
+import { getSchoolId } from '../../../utils/auth';
+const height = ref(600) 
+// 节点数
+const nodeNumber = ref(0)
+// 链高度
+const chainHeight = ref(0)
 // 全屏函数
 const toggleFullscreen = () => {
   height.value =950
   toggleFullscreenContainer('.deal-block-conter')
-
 }
-// 监测退出全屏
-
-// 如何监听退出全屏
-
+// 获取交易区块
+// 存储交易区块数据
+const transactionBlockData = ref(null)
+const getTransactionBlockData =  () => {
+  getTransactionBlock({schoolId:getSchoolId(),index:1,size:100}).then(res => {
+    transactionBlockData.value=res.data.list
+    nodeNumber.value=res.data.size
+    chainHeight.value=res.data.pageNum
+  })
+}
+// 十秒发一次请求
+ const time =setInterval(() => {
+  getTransactionBlockData()
+}, 10000);
+onMounted(() => {
+  getTransactionBlockData()
+})
+// 离开页面销毁
+onUnmounted(() => {
+  clearInterval(time)
+})
 </script>
 <style lang="scss" scoped>
 .app-deal-block {
   padding: 20px;
+  .el-col-24{
   .el-button {
-    padding: 0 50px;
-    border: 2px solid #25f4f9;
+  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%);
-    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;
-    }
+    border-color: #ffffff;
+    color: #fff;
   }
+}
+}
+
   .deal-block-conter {
     margin-top: 20px;
     background: #091c6d;
@@ -80,19 +109,21 @@ const toggleFullscreen = () => {
         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;
+          padding: 9px 0 9px 130px;
+          text-align: left;
+          span{
+            font-size: 12px;
+          }
         }
       }
+      .conter-header:nth-child(2) {
+        background: url("../../../assets/images/node2.png") no-repeat;
+      }
     }
     .block-conter-content {
       width: 100%;
-      // display: grid;
-      // grid-template-columns: repeat(4, 1fr);
       .block-item {
         display: inline-block;
         width: 242px;

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

@@ -8,27 +8,107 @@
     </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
+          align="center"
+          prop="transactionCode"
+          label="交易编码/信息摘要"
+          width="300"
+        >
         </el-table-column>
-        <el-table-column align="center" prop="bankName" label="广播节点 ">
+        <el-table-column
+          align="center"
+          prop="broadcastNode"
+          label="广播节点 "
+          width="300"
+        >
         </el-table-column>
-        <el-table-column align="center" prop="bankAccount" label="时间戳">
+        <el-table-column align="center" prop="timestamp" label="时间戳">
+          <template #default="scope">
+            <span>{{
+              parseTime(scope.row.timestamp, "{y}-{m}-{d} {h}:{i}:{s}")
+            }}</span>
+          </template>
         </el-table-column>
         <el-table-column align="center" prop="rmbBalance" label="操作">
+          <template #default="scope">
+            <el-button type="primary" link @click="checkDetails(scope.row)"
+              >哈希值详情</el-button
+            >
+          </template>
         </el-table-column>
       </el-table>
     </div>
-    <!-- <pagination
+    <pagination
        v-show="total1>0"
       :total="total1"
       v-model:page="params1.index"
       v-model:limit="params1.size"
-      @pagination="getDigital"
-           /> -->
+      @pagination="getIndividualAssets"
+           />
+    <el-dialog v-model="QuotaVisible" title="区块哈希" width="34%" draggable>
+      <div class="overview">
+        <div class="overview-title">
+          <span>区块总览</span>
+        </div>
+        <div class="overview-content" >
+          <p>区块类型：{{ detailsData.blockType }}</p>
+          <p>区块哈希：{{ truncate(detailsData.blockHash ,55) }}</p>
+          <p>打包人：{{  detailsData.packager}}</p>
+          <p>交易数量：{{ detailsData.transactionAmount }}</p>
+          <p>时间戳：{{  detailsData.timestamp}}</p>
+          <p>上一区块：{{ detailsData.previousBlock }}</p>
+        </div>
+      </div>
+      <div class="overview" style="margin:30px 0px;">
+        <div class="overview-title">
+          <span>交易总览</span>
+        </div>
+        <div class="overview-content">
+          <p>交易哈希：{{truncate(detailsData.blockHash ,55) }}</p>
+          <p>交易结果：{{ detailsData.transactionResult=="true" ? '成功' :'失败' }}</p>
+          <p>时间：{{   parseTime(detailsData.timestamp, "{y}-{m}-{d} {h}:{i}:{s}") }}</p>
+          <p>发送方：{{ detailsData.sender }}</p>
+          <p>接收方：{{ detailsData.receiver }}</p>
+      
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script setup>
-
+import { getSchoolId } from "../../../utils/auth";
+import { getTransactionBroadcast,getBroadcastDetails } from "@/api/user.js";
+import {truncate} from '@/utils/index.js'
+const QuotaVisible = ref(false);
+//获取交易广播params
+const params1 = reactive({
+  index: 1,
+  size: 100,
+  schoolId: getSchoolId(),
+});
+const total1=ref(0)
+const IndividualAssetsData = ref(null);
+// 存储详情
+const detailsData = ref({});
+const getIndividualAssets = () => {
+  getTransactionBroadcast(params1).then((res) => {
+    IndividualAssetsData.value = res.data.list;
+    total1.value=res.data.total
+  });
+};
+// 查看详情
+const checkDetails = (id) => {
+  QuotaVisible.value = true;
+  getBroadcastDetails({
+    schoolId: id.schoolId,
+    index: 1,
+    size: 100,
+  }).then(res => {
+  //取出数组中的对象
+  detailsData.value = res.data.list[0]
+  })
+};
+getIndividualAssets();
 </script>
 <style lang="scss" scoped>
 .app-deal-broadcast {
@@ -54,4 +134,67 @@
     }
   }
 }
+:deep(.el-dialog) {
+  margin-top: 10% !important;
+  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;
+    .overview {
+      width: 100%;
+    
+      background: #305897;
+      .overview-title {
+        height: 40px;
+        background: #13b7da;
+        padding: 0px 20px;
+        line-height: 40px;
+        span {
+          font-size: 15px;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          color: #ffffff;
+        }
+      }
+      .overview-content{
+        padding: 0px 20px;
+        overflow: hidden;
+        p{
+          color: #ffffff;
+          // font-size: 15px;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/visual/index.vue

@@ -23,10 +23,10 @@ const  go = (idx) => {
       <div @click.native="go(5)">Merkle</div>
     </div>
     <div class="central-ban-information">
-     <transaction v-show="isDeployed == 1"></transaction>
-     <transaction-node v-show="isDeployed == 2"></transaction-node>
-     <transactionBlock v-show="isDeployed == 3"></transactionBlock>
-     <transactionBroadcast v-show="isDeployed == 4"></transactionBroadcast>
+     <transaction v-if="isDeployed == 1"></transaction>
+     <transaction-node v-if="isDeployed == 2"></transaction-node>
+     <transactionBlock v-if="isDeployed == 3"></transactionBlock>
+     <transactionBroadcast v-if="isDeployed == 4"></transactionBroadcast>
      <merkle v-if="isDeployed == 5"></merkle>
     </div>
   </div>