Skip to content

C
Community-Mining-Client
Commit 77738ecb authored by xhx's avatar xhx
Browse files
Options

feat: 导入

parent 8abfbaf1
Hide whitespace changes
Inline Side-by-side
Showing with 426 additions and 79 deletions
.eslintrc.js
View file @ 77738ecb
......@@ -17,6 +17,7 @@ module.exports = {
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"@typescript-eslint/ban-types": 0,
"@typescript-eslint/no-this-alias": 0
"@typescript-eslint/no-this-alias": 0,
"@typescript-eslint/no-var-requires": 0
}
}
src/components/InputPasswordDialog.vue 0 → 100644
View file @ 77738ecb
<template>
<van-dialog
v-model="show"
title="请输入YUAN_miner设备密码"
show-cancel-button
@cancel="cancelHandler"
:before-close="confirmPasswordHandler"
>
<van-field v-model="password" type="password" placeholder="请输入密码" :error-message="errMsg" />
</van-dialog>
</template>
<script lang='ts'>
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, PropSync } from 'vue-property-decorator';
import { Dialog } from 'vant';
@Component({
components: {
[Dialog.Component.name]: Dialog.Component
}
})
export default class InputPasswordDialog extends Vue {
@PropSync('showPasswordDialog', { type: Boolean }) show!: boolean;
// @PropSync("errMsg",{type:String}) errMsgself!:string
@Prop({
type: String,
required: true
})
errMsg!: string;
password = '';
cancelHandler() {
this.password = '';
this.$emit('reCheckLockStatus');
}
confirmPasswordHandler(action: string, done: any) {
this.$emit('confirmPassword', this.password);
setTimeout(() => {
this.$nextTick(() => {
if (!this.errMsg) {
this.password = ''
done();
} else {
done(false);
}
});
}, 1000);
}
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/LockStatusDialog.vue 0 → 100644
View file @ 77738ecb
<template>
<van-dialog
v-model="show"
:overlay="true"
@open="openHandler"
:show-cancel-button="showCancel"
@confirm="confirmHandler"
:title="`挖矿状态`"
>
<van-radio-group v-model="radio">
<van-cell-group>
<van-cell
class="lockstatus_item"
title="挖矿解锁"
label="不可转账，挖矿需开启"
clickable
@click="radio = '2'"
>
<img slot="icon" src="@/assets/image/mine_unlock@2x.png" alt />
<van-radio name="2" slot="right-icon">
<img
class="radio_icon"
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon "
/>
</van-radio>
</van-cell>
<van-cell
class="lockstatus_item"
title="全解锁"
label="可转账，挖矿需开启"
clickable
@click="radio = '1'"
>
<img slot="icon" class="lefticon" src="@/assets/image/full_unlock@2x.png" alt />
<van-radio name="1" slot="right-icon">
<img
class="radio_icon"
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon "
/>
</van-radio>
</van-cell>
<!-- <van-cell class="lockstatus_item" title="全锁定" label="不可转账，不可挖矿" clickable @click="radio = '3'">
<img slot="icon" src="@/assets/all_lock@2x.png" alt="">
<van-radio name="3" slot="right-icon">
<img class="radio_icon"
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon "/>
</van-radio>
</van-cell>-->
</van-cell-group>
</van-radio-group>
</van-dialog>
</template>
<script lang='ts'>
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dialog } from 'vant';
import { Prop, PropSync } from 'vue-property-decorator';
// import getNodeStatus from '../mixins/getNodeStatus';
let activeIcon = require('@/assets/image/activeIcon@2x.png');
let inactiveIcon = require('@/assets/image/inactiveIcon@2x.png');
@Component({
components: {
[Dialog.Component.name]: Dialog.Component
}
})
export default class LockStatusDialog extends Vue {
@PropSync('showLockStatusDialog', { type: Boolean }) show!: boolean;
@Prop({
type: Object,
required: true
})
currentLockStatus!: any;
radio = '2';
activeIcon = activeIcon;
inactiveIcon = inactiveIcon;
//是否显示取消按钮 -- 钱包全锁定时不显示
get showCancel() {
const {isWalletLock,isTicketLock} = this.currentLockStatus;
return !(isWalletLock && isTicketLock);
}
openHandler() {
const {isWalletLock} = this.currentLockStatus;
this.radio = isWalletLock?'2':'1'
console.log('radio', this.radio);
}
confirmHandler() {
this.show = false;
this.$emit('showPasswordDialog', this.radio);
}
}
</script>
<style scoped>
.van-radio {
height: 0.68rem;
}
</style>
<style lang="scss" scoped>
.lockstatus_item {
align-items: center;
.van-cell__title {
margin-left: 0.24rem;
text-align: left;
}
img {
width: 0.54rem;
height: 0.4rem;
}
img.radio_icon {
width: 0.48rem;
height: auto;
}
}
</style>
\ No newline at end of file
src/components/MinerTips.vue 0 → 100644
View file @ 77738ecb
<template>
<van-popup v-model="show" round :close-on-click-overlay="false" closeable class="tips-component">
<ul class="tips-popup">
<li>
<p>1.什么是委托挖矿？</p>
<p>委托挖矿是地址a委托地址b进行挖矿，地址a持有代币，地址b做为挖矿节点，更加安全。</p>
</li>
<li>
<p>2.开始挖矿后，多久可以挖到矿？</p>
<p>预计每张票六天可出一次矿</p>
</li>
</ul>
</van-popup>
</template>
<script lang="ts">
import Vue from 'vue';
import Component, { mixins } from 'vue-class-component';
import { Prop, PropSync } from 'vue-property-decorator';
@Component({})
export default class InvalidEnv extends Vue {
@PropSync('tipsShow', { type: Boolean }) show!: boolean;
}
</script>
<style lang="scss" scoped>
.tips-component{
ul.tips-popup {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 32px 24px 24px;
color: black;
p {
text-align: left;
}
}
}
</style>
\ No newline at end of file
src/components/WalletStatus.vue
View file @ 77738ecb
<template>
<ul class="wallet-status-component" :class="iconClass">
<li>
<img :src="require(`@/assets/node${isButton}_normal@2x.png`)"/>
<img :src="require(`@/assets/image/node${isButton}_normal@2x.png`)"/>
<div class="desc active">节点状态</div>
</li>
<!-- showLockStatusDialog -->
<li @click="lockStatusHandler">
<div v-if="!walletStatus.isWalletLock">
<img :src="require(`@/assets/full_unlock${isIcon?'_icon':'_button'}@2x.png`)" alt />
<img :src="require(`@/assets/image/full_unlock${isIcon?'_icon':'_button'}@2x.png`)" alt />
<div class="desc active">全解锁</div>
</div>
<div v-else-if="walletStatus.isWalletLock && walletStatus.isTicketLock">
<img :src="require(`@/assets/all_lock${isIcon?'_icon':'_button'}@2x.png`)" alt />
<img :src="require(`@/assets/image/all_lock${isIcon?'_icon':'_button'}@2x.png`)" alt />
<div class="desc">全锁定</div>
</div>
<div v-else>
<img :src="require(`@/assets/mine_unlock${isIcon?'_icon':'_button'}@2x.png`)" alt />
<img :src="require(`@/assets/image/mine_unlock${isIcon?'_icon':'_button'}@2x.png`)" alt />
<div class="desc active" >挖矿解锁</div>
</div>
</li>
<li>
<img :src="require(`@/assets/time${isButton}_normal@2x.png`)" alt />
<img :src="require(`@/assets/image/time${isButton}_normal@2x.png`)" alt />
<div class="desc" :class="[!timeSync?'active':'']">时间同步</div>
</li>
<li @click="showHeightHandler">
<img :src="require(`@/assets/block${isButton}_normal@2x.png`)" v-if="blockSync" alt />
<img :src="require(`@/assets/block${isButton}@2x.png`)" v-else alt />
<img :src="require(`@/assets/image/block${isButton}_normal@2x.png`)" v-if="blockSync" alt />
<img :src="require(`@/assets/image/block${isButton}@2x.png`)" v-else alt />
<div class="desc" :class="[blockSync?'active':'']" >
<!-- blockanmation -->
<div>区块同步</div>
......@@ -37,8 +37,8 @@
</li>
<!-- autoMiningHandler -->
<li @click="autoMiningStatusHandler">
<img :src="require(`@/assets/ticket${isButton}@2x.png`)" v-if="walletStatus && !walletStatus.isAutoMining" alt />
<img :src="require(`@/assets/ticket${isButton}_normal@2x.png`)" v-else alt />
<img :src="require(`@/assets/image/ticket${isButton}@2x.png`)" v-if="walletStatus && !walletStatus.isAutoMining" alt />
<img :src="require(`@/assets/image/ticket${isButton}_normal@2x.png`)" v-else alt />
<div class="desc" :class="[(walletStatus && !walletStatus.isAutoMining)?'':'active']">自动购票</div>
</li>
<div v-if="!isIcon" class="block-height" :class="[blockSync?'active':'']">{{`(${peerHeight})`}}</div>
......@@ -109,7 +109,7 @@ ul.wallet-status-component{
display: grid;
grid-template-columns: repeat(5,1fr);
place-content: space-between;
padding: 0.34rem 0;
padding: 6px 0;
// justify-content: space-between;
.block-height{
grid-column: 3 / span 3;
......@@ -131,11 +131,11 @@ ul.wallet-status-component{
text-align: center;
overflow: hidden;
img{
width: 0.8rem;
width: 14px;
height: auto;
}
div.desc {
font-size: 0.24rem;
font-size: 14px;
&.active {
color: rgba(230, 88, 132, 0.7);
}
......@@ -145,9 +145,9 @@ ul.wallet-status-component{
padding:0;
li{
display: inline-block;
margin-right: 0.2rem;
margin-right: 4px;
img{
width: 0.3rem;
width: 18px;
height: auto;
}
.desc{
......
src/router/index.ts
View file @ 77738ecb
......@@ -36,6 +36,11 @@ const routes: Array<RouteConfig> = [
name: 'nodePage',
component: () => import(/* webpackChunkName: "about" */ '../views/NodePage/List/index.vue')
},
{
path: '/nodeDetail',
name: 'miningDetail',
component: () => import(/* webpackChunkName: "about" */ '../views/NodePage/Details/index.vue')
},
]
const router = new VueRouter({
......
src/views/NodePage/Details/index.vue
View file @ 77738ecb
<template>
</template>
\ No newline at end of file
<div class="w-full min-h-screen text-white">
details
<wallet-status
:walletStatus="walletStatus"
@showLockStatusDialog="lockStatusDialogShow = true"
@showHeightHandler="showAction = !showAction"
:blockSync="blockSync"
:peerHeight="peerHeight"
:allHeight="allHeight"
></wallet-status>
<input-password-dialog
:showPasswordDialog.sync="passwordDialogShow"
@reCheckLockStatus="reCheckLockStatusHandler"
@confirmPassword="confirmPasswordHandler"
:errMsg="errMsg"
></input-password-dialog>
<lock-status-dialog
:showLockStatusDialog.sync="lockStatusDialogShow"
:currentLockStatus="walletStatus"
@showPasswordDialog="showPasswordDialogHandler"
></lock-status-dialog>
<div class="action" v-show="showAction" @click="showAction = !showAction">
当前高度:{{peerHeight}} <br/>
区块高度:{{allHeight}} <br/>
百分比:{{`${Math.floor(peerHeight * 100 /allHeight * 100 )/100}%`}}
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import LockStatusDialog from '@/components/LockStatusDialog.vue';
import InputPasswordDialog from '@/components/InputPasswordDialog.vue';
import MinerTips from '@/components/MinerTips.vue';
import WalletStatus from '@/components/WalletStatus.vue';
export default Vue.extend({
components: {
WalletStatus,
LockStatusDialog,
InputPasswordDialog
},
data() {
return {
walletStatus: {} as any,
blockSync: {} as any,
peerHeight: undefined as undefined|number,
allHeight: undefined as undefined|number,
passwordDialogShow: false,
errMsg: {} as any,
lockStatusDialogShow: false,
showAction: false,
}
},
methods: {
async init() {
const {walletStatus,isSync,ticketCount,peersInfo,accounts} = await this.getNodeStatus({ip:this.ip});
this.walletStatus = walletStatus;
this.isSync = isSync;
this.ticketCount = ticketCount;
this.peersInfo = peersInfo;
this.accounts = accounts;
}
}
})
</script>
\ No newline at end of file
src/views/NodePage/List/DeviceItem.vue
View file @ 77738ecb
......@@ -18,15 +18,15 @@
<img src="@/assets/image/device@2x.png" alt />
设备编号{{deviceSerial}}
</p>
<p class="mining-address">挖矿地址：{{paiWalletAddress | shortAddress}}</p>
<p>挖矿数量（BTY）</p>
<p class="mining-address">挖矿地址：{{shortAddress}}</p>
<p class="mining-address">挖矿数量（BTY）</p>
<p class="miningBTY">{{miningBtyCount}}</p>
</div>
<div class="node-status">
<wallet-status :isIcon="true" :walletStatus="walletStatus" :blockSync="blockSync"></wallet-status>
<p style="text-align:right;">
<span>{{walletLabel}}</span>
<span>{{miningStatusStr}} <img src="@/assets/image/rotate.png" style="width:.4rem;height:.16rem;" :class="{rotate:isMining}" alt=""></span>
<span>{{miningStatusStr}} <img src="@/assets/image/rotate.png" style="width: 16px; height: 6px;" :class="{rotate:isMining}" alt=""></span>
</p>
</div>
</div>
......@@ -38,16 +38,16 @@
<div class="img" @click="link"></div>
</div>
</div>
<div class="feedback" v-if="isfeedback" >
<!-- <div class="feedback" v-if="isfeedback" >
<div class="feedbackBtn" @click.capture="feedback">反馈此设备</div>
</div>
</div> -->
<div class="more" v-if="!err">
<div @click="showMenuHandler" class="caozuo"></div>
<!-- <img src="@/assets/more.png" class="caozuo" alt="更多" @click="showMenuHandler"> -->
<ul class="menu" v-show="showMenu">
<li class="btn" @click.stop.capture="resetWallet" v-if="isBind">重置钱包</li>
<li class="btn" @click.stop.capture="safeClose">安全关闭</li>
<li class="btn" @click.stop.capture="feedback">反馈</li>
<!-- <li class="btn" @click.stop.capture="feedback">反馈</li> -->
</ul>
</div>
......@@ -106,6 +106,52 @@ export default Vue.extend({
} else {
return '未挖矿';
}
},
shortAddress():string {
if (this.paiWalletAddress) {
return this.paiWalletAddress.slice(0, 8) + '...' + this.paiWalletAddress.slice(-8)
} else {
return ''
}
},
miningBtyCount(): number {
return this.deviceInfo.ticketCount * 3000;
},
peerInfo(): any {
return (
(this.peersInfo && this.peersInfo.peers &&
this.peersInfo.peers.find((peer: any) => {
return peer.self;
})) ||
{}
);
},
peerHeight(): number {
return (this.peerInfo.header && this.peerInfo.header.height) || 0;
},
allHeight(): number {
return (
(this.peersInfo.peers &&
this.peersInfo.peers.reduce(
(acc: number, cur: any) => Math.max(acc, cur.header.height),
0
)) ||
0
);
},
blockSync(): boolean {
return this.peerHeight === this.allHeight;
},
paiWalletInfo():any {
return (
this.accounts && this.accounts.wallets &&
this.accounts.wallets.find((wallet: any) => {
return wallet.label === 'YUAN-miner节点'
}) || {}
)
},
walletLabel():string {
return this.paiWalletInfo.label || ''
}
},
methods: {
......@@ -123,10 +169,15 @@ export default Vue.extend({
})
},
feedback() {
console.log({
ip: this.deviceInfo.ip,
mineAddress: this.paiWalletAddress,
deviceSerial: this.deviceSerial,
})
this.$emit('feed-back', {
ip: this.deviceInfo.ip,
mineAddress: this.paiWalletAddress,
deviceSerial:this.deviceSerial,
deviceSerial: this.deviceSerial,
})
},
showMenuHandler(){
......@@ -169,9 +220,9 @@ export default Vue.extend({
<style scoped lang="scss">
.device-item-component {
position: relative;
padding: 0.4rem 0.24rem 0.52rem;
margin-bottom: 0.2rem;
border-radius: 0.2rem;
padding: 12px 11px;
margin-bottom: 12px;
border-radius: 6px;
overflow: hidden;
background: rgba(48, 51, 91, 0.08);
transition: height 1s;
......@@ -187,41 +238,41 @@ export default Vue.extend({
align-items: center;
background: rgba(48, 51, 91, 0.3);
.feedbackBtn{
padding: .3rem;
font-size: .24rem;
border-radius: .3rem;
padding: 5px;
font-size: 4px;
border-radius: 5px;
background: gray;
color:#FFFFFF;
}
}
.more{
position: absolute;
right:0;
top:0;
right: 4px;
top: 8px;
text-align: right;
.caozuo{
box-sizing: content-box;
width:.1rem;
height: .4rem;
padding:.34rem;
padding-left:.6rem;
width: 12px;
height: 12px;
padding: 5px;
padding-left: 10px;
background: url('../../../assets/image/more.png');
background-repeat: no-repeat;
background-size: .1rem auto;
background-position: .6rem .34rem;
background-size: 3px auto;
background-position: 10px 6px;
}
.menu{
position: fixed;
width:1.9rem;
right:.34rem;
margin-right: .34rem;
// width: 32px;
right: 16px;
margin-right: 6px;
background: gray;
color:#FFFFFF;
border-radius: .12rem;
border-radius: 4px;
li.btn{
height:.72rem;
line-height: .72rem;
padding: 0 .34rem;
height: 28px;
line-height: 28px;
padding: 0 6px;
text-align: center;
&:active{
color: gray;
......@@ -238,21 +289,21 @@ export default Vue.extend({
flex-direction: column;
justify-content: space-between;
color: rgba(48, 51, 91, 1);
font-size: 0.36rem;
line-height: 0.44rem;
font-size: 14px;
line-height: 24px;
p:first-child {
font-size: 0.24rem;
line-height: 0.34rem;
margin-bottom: 0.3rem;
font-size: 14px;
line-height: 24px;
margin-bottom: 2px;
color: rgba(48, 51, 91, 0.6);
}
}
div.img {
width: 0.72rem;
height: 0.72rem;
width: 24px;
height: 24px;
background: url("../../../assets/image/link@2x.png");
background-size: contain;
margin-top: .5rem;
margin-top: 24px;
&:active {
background: url("../../../assets/image/linked@2x.png");
background-size: contain;
......@@ -269,34 +320,34 @@ export default Vue.extend({
height: 2.54rem;
}
.device-info {
font-size: 0.24rem;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(48, 51, 91, 0.6);
line-height: 0.34rem;
line-height: 24px;
.device-num {
display: flex;
align-items: center;
font-size: 0.28rem;
font-size: 14px;
font-family: PingFangSC;
font-weight: 600;
color: rgba(48, 51, 91, 1);
line-height: 0.4rem;
img {
width: 0.42rem;
margin-right: 0.16rem;
width: 16px;
margin-right: 6px;
}
}
.mining-address {
margin: 0.24rem 0;
text-align: left;
margin: 3px 0;
}
.miningBTY {
margin: 0.3rem 0 0.6rem 0;
font-size: 0.6rem;
margin: 2px 0;
font-size: 14px;
font-family: DIN;
font-weight: bold;
color: rgba(48, 51, 91, 1);
line-height: 0.72rem;
text-align: left;
}
}
.node-status {
......@@ -306,7 +357,7 @@ export default Vue.extend({
p {
display: flex;
flex-direction: column;
font-size: 0.24rem;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(48, 51, 91, 1);
......
src/views/NodePage/List/index.vue
View file @ 77738ecb
<template>
<div class="w-full min-h-screen">
<div v-if="!pageShow" class="min-h-screen flex items-center justify-center">
<!-- <div v-if="!pageShow" class="min-h-screen flex items-center justify-center">
<div
class="
w-36
......@@ -16,8 +16,8 @@
>
导入
</div>
</div>
<div v-else>
</div> -->
<div>
<div
class="
w-full
......@@ -78,14 +78,13 @@ import { closeNode, resetWallet, escrowPassword } from '@/service/device';
import { passwdInputProxy } from '@/utils/passwdProxy';
import { importSeed } from '@/utils/bridge';
import { createAccount } from '@/utils/account';
import { Toast, Dialog } from 'vant';
export default Vue.extend({
data() {
return {
pageShow: false,
wifiName: '',
devices: [
{isSync: true}
] as Array<any>,
devices: [{}] as Array<any>,
isfeedback: false,
btyAddress: ''
}
......@@ -121,7 +120,7 @@ export default Vue.extend({
return;
}
let toast: any;
this.$dialog
Dialog
.confirm({
title: '重置钱包',
message: '重置钱包将清除设备数据（完成可重新绑定设备）'
......@@ -135,12 +134,13 @@ export default Vue.extend({
const resetWalletResult = await passwdInputProxy(resetWallet)(params.ip);
console.log('resetWalletResult', resetWalletResult);
setTimeout(() => {
this.$router.push({ name: 'index' });
toast.clear();
}, 30000);
// setTimeout(() => {
// this.$router.push({ name: 'index' });
// toast.clear();
// }, 30000);
})
.catch(err => {
console.log('cancel')
toast.clear();
if (err !== 'cancel') {
this.$toast(err);
......@@ -149,14 +149,14 @@ export default Vue.extend({
});
},
safeCloseHandler(params: any){
this.$dialog
Dialog
.confirm({
title: '安全关闭节点',
message: '确认安全关闭节点？'
})
.then(async () => {
await closeNode(params.ip)
this.$dialog
Dialog
.alert({
title: '关闭成功',
// message: '矿机程序已经下载完成，请手动重启YUAN-miner设备',//请等待YUAN-miner程序重启
......@@ -176,7 +176,7 @@ export default Vue.extend({
},
feedBackHandler(params: any){
// if(this.isfeedback){
this.$dialog.confirm({
Dialog.confirm({
title:'反馈',
message:'确定需要反馈此台设备问题？'
}).then(() => {
......@@ -240,6 +240,9 @@ export default Vue.extend({
},
paiList(): any {
getDeviceList('', async(v: any) => {
Toast.loading({
duration: 0,
})
console.log('deviceList', v)
if (typeof v === 'string') {
v = JSON.parse(v)
......@@ -251,6 +254,7 @@ export default Vue.extend({
}
console.log('tempDeviceList', tempDeviceList)
this.devices = tempDeviceList
Toast.clear()
})
},
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment