diff --git a/dist.tar b/dist.tar deleted file mode 100644 index 026dde5..0000000 Binary files a/dist.tar and /dev/null differ diff --git a/src/assets/images/央行可视化监控中心-切图/交易广播/图标.png b/src/assets/images/41.png similarity index 100% rename from src/assets/images/央行可视化监控中心-切图/交易广播/图标.png rename to src/assets/images/41.png diff --git a/src/assets/images/央行可视化监控中心-切图/交易区块/节点数.png b/src/assets/images/node1.png similarity index 100% rename from src/assets/images/央行可视化监控中心-切图/交易区块/节点数.png rename to src/assets/images/node1.png diff --git a/src/assets/images/央行可视化监控中心-切图/交易区块/链高度.png b/src/assets/images/node2.png similarity index 100% rename from src/assets/images/央行可视化监控中心-切图/交易区块/链高度.png rename to src/assets/images/node2.png diff --git a/src/assets/images/央行可视化监控中心-切图/交易区块/链.png b/src/assets/images/链.png similarity index 100% rename from src/assets/images/央行可视化监控中心-切图/交易区块/链.png rename to src/assets/images/链.png diff --git a/src/utils/index.js b/src/utils/index.js index 5ab5da3..f63af59 100644 --- a/src/utils/index.js +++ b/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"; diff --git a/src/utils/request.js b/src/utils/request.js index e403d1e..193f556 100644 --- a/src/utils/request.js +++ b/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 diff --git a/src/views/individual/consumermall/consumermall.vue b/src/views/individual/consumermall/consumermall.vue index aac88b7..766e3f9 100644 --- a/src/views/individual/consumermall/consumermall.vue +++ b/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; diff --git a/src/views/visual/components/transaction-block.vue b/src/views/visual/components/transaction-block.vue index 406a690..2c36208 100644 --- a/src/views/visual/components/transaction-block.vue +++ b/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; + } } } - } -</style> \ No newline at end of file + } + :deep(.el-scrollbar__thumb){ + background-color: #2B89FF !important; + } +} +</style> diff --git a/src/views/visual/components/transaction-broadcast.vue b/src/views/visual/components/transaction-broadcast.vue index 71f68ff..3e6d55d 100644 --- a/src/views/visual/components/transaction-broadcast.vue +++ b/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> \ No newline at end of file + } +} +</style> diff --git a/src/views/visual/index.vue b/src/views/visual/index.vue index 6e1dd42..2adf87a 100644 --- a/src/views/visual/index.vue +++ b/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) { - - } + isDeployed.value=idx } -// 解密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>