Skip to content

html / poolin_app

Go to a project
Commit 8491d062 by zhanghui
Options

Merge branch 'gaolei' into 'develop' 

Gaolei



See merge request !11
parents bd0e613f 68085c69
Showing with 1634 additions and 440 deletions
index.html
......@@ -7,7 +7,7 @@
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_538501_5mndck7tpvsoflxr.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_538501_uluquoo98e12a9k9.css" />
<script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<title>poolin_app</title>
......
package.json
......@@ -5,7 +5,7 @@
"author": "xin3w <xin3w@126.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 172.16.4.38",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
......
src/assets/js/store.js
......@@ -24,6 +24,7 @@ const state = {
coin_type: '', //默认币种类型
region_id: '', //默认节点
refresh:'',
tab_bar:0
}
const mutations = {
setEnterPannel(state,v){
......
src/assets/less/style.less
......@@ -74,25 +74,38 @@ html,body {-webkit-tap-highlight-color: rgba(0, 0, 0,0); font-size: 0.28rem; bac
@fontBlue1:#1c5fa9;
@fontBlue2:#6c87b2;
@gray:#727272;
@fontGreen:#2caa32;
@red:#ff4138;
.c-blue1 {color: @fontBlue1;}
.c-blue2 {color: @fontBlue2;}
.c-green {color: @fontGreen;
span {color: @fontGreen;}
}
.c-red {color: @red;}
.bg-blue{background: #ededf2;}
/*样式修正*/
.button-primary {background:@blue;border-color:@blue; box-shadow: 0 0.2rem 0.3rem rgba(16,63,115,0.2);
&.is-disabled { background: #d6dbe5; box-shadow: none; border-color:#d6dbe5;}
}
.page {width:100%;height:100%; overflow: hidden;.pos(a);
.page-header {background:@blue;color:#fff;.pos(f); left:0; top:0; right:0; height:44px;
.page-header {background:@blue;color:#fff;.pos(f); left:0; top:0; right:0; height:44px; z-index: 9999;
.back {width:44px;height:44px; vertical-align: middle;.tc;
i {font-size:30px;.txt-ver(44px);}
}
.title {font-size:0.36rem;.pos(a); left:100px; right:100px; .tc;}
.side {.back;}
.title {font-size:0.36rem;.pos(a); left:100px; right:100px; .tc;.txt-ver(44px);}
.btns {font-size:0.36rem; padding:0 15px;}
.btn-choose-coin{ height: 44px; vertical-align: middle; padding-right: 10px;
span {.d-ib; background-size: 32px 32px; width:44px; height: 44px; background-repeat: no-repeat; background-position: center center;.fl;}
.iconfont {margin-top: 15px;.d-ib; vertical-align: middle}
.ltc {background-image:url(../img/index-tab1-active.png);}
.eth {background-image:url(../img/index-tab2-active.png);}
.dash {background-image:url(../img/index-tab3-active.png);}
.xmr {background-image:url(../img/index-tab4-active.png);}
.btc {background-image:url(../img/index-tab5-active.png);}
.sc {background-image:url(../img/index-tab6-active.png);}
.zcash {background-image:url(../img/index-tab7-active.png);}
.doge {background-image:url(../img/index-tab8-active.png);}
}
}
.page-content {position:absolute;top:44px;width:100%;height:auto;left:0;right:0;bottom:0;overflow-x:hidden;overflow-y:auto;}
}
......@@ -202,14 +215,38 @@ html,body {-webkit-tap-highlight-color: rgba(0, 0, 0,0); font-size: 0.28rem; bac
}
.title {margin-top: 0.1rem;}
}
.c-charts {width:100%;height:220px;}
.main {margin-top: 50px; min-height: 120vh;}
.c-charts {width:100%;height:220px;.pos(r);}
.mobile-android{
.dashboard {
.page-content {bottom:1rem;}
.zIndexAuto{z-index: auto;}
.page-content{
.top {top:44px;}
}
.small-k-v {
.k {color: @gray;font-size: 0.24rem; }
.v { color: #252525;font-size: 0.24rem;}
.c-red {color: @red;}
}
.list {
h3 { padding:0 0 .18rem .18rem; color: @gray; padding-top: 0.4rem;}
.v {font-size: 0.32rem; color: @gray;}
.k {font-size: 0.24rem;color: @gray;}
.mint-cell {.pos(r);
&:after {.line .xb;}
.mint-cell-wrapper{background-image: none;}
}
}
}
.mobile-ios {
.page-header {padding-top: 20px;}
.page-content {top:64px;}
.dashboard {
.page-content{
.top {top:64px;}
}
}
}
src/assets/less/style2.less
@import url('../css/reset.css');
@import url('function.less');
@import url('animate.less');
/*复用颜色*/
@fontBlue:#1c5fa9;
@fontGray: #8e8e8e;
@bgGray:#ededf2;
//线
.line(){.pos(r);
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ccc;content: '';.pos(a);bottom:0;transform: scaleY(0.33) translateY(1px);}
}
/*语言图标*/
/*币种图标*/
.language{
background: @bgGray;
.page-content{
&.top{
padding-top: 0.28rem;
}
.language-content{
background: #fff;
.language-item{
height: 0.87rem;
line-height: 0.87rem;
padding: 0 10px;
.pos(r);
&:after{.line.xb;}
.language-title{
height: 0.87rem;
line-height: 0.87rem;
.language-img{
display:inline-block;vertical-align:middle;padding:0rem;background-size:0.48rem 0.32rem; background-repeat: no-repeat; background-position: 0rem center;
width: 0.48rem;height: 0.32rem;
&.zh-cn {background-image:url(../../assets/img/cn.png);}
&.en {background-image:url(../../assets/img/en.png);}
margin-top: -0.02rem;
}
}
.language-selected{
width: 0.36rem;
height: 0.26rem;
background: url(../../assets/img/selected.png) center center no-repeat;
background-size: 0.36rem 0.26rem;
.pos(a);
top: 50%;
right: 10px;
transform: translateY(-50%);
}
&.active{color:@fontBlue;}
}
}
}
}
.default-coin {
background: @bgGray;
.el-form-item {background: #fff; padding: 0rem 0.3rem;
.el-input {padding:0.1rem 0;}
.el-input__inner {border: 0px; padding:0; font-size: 0.32rem;}
}
label {font-size: 0.28rem;color: @fontGray; padding:0.2rem 0.3rem;.d-b;}
.coin-area {padding: 0.2rem 0rem;
label {padding: 0;}
}
.descript-list {line-height: 1.5; text-align: justify;
li {padding:0.1rem 0; color: @fontGray;}
}
.descript{padding:0 0.3rem; color: @fontGray;}
}
.notice{
.page-content{
.notice-content{
width: 7.5rem;
.notice-notice{
box-sizing: border-box;
padding: 0.2rem 0.3rem;
.pos(r);
.iconfont{
color:#fff;
font-size: 0.5rem;
.pos(r);
.notice-badge{
display: inline-block;
font-size: 0.2rem;
border: 1px solid #fff;
width: 0.35rem;
height: 0.35rem;
line-height: 0.35rem;
text-align: center;
background: #ff0000;
border-radius: 50%;
color: #fff;
.pos(a);
}
&.icon-xiaoxigonggao{
color: #fff;
.d-ib;
width: 0.89rem;
height: 0.89rem;
line-height: 0.89rem;
.tc;
background: #1b82d2;
border-radius: 50%;
}
}
.notice-right{
box-sizing: border-box;
padding: 0 0 0 0.3rem;
span{
font-size: 0.34rem;
color: #252525;
}
s{
font-size: 0.22rem;
color: #727272;
}
.notice-detail{
.ellipsis-basic;
font-size: 0.28rem;
color: #727272;
}
}
&:after{.line.xb;}
}
.notice-alarm{
box-sizing: border-box;
padding: 0.2rem 0.3rem;
.pos(r);
.iconfont{
color:#fff;
font-size: 0.5rem;
.pos(r);
.notice-badge{
display: inline-block;
font-size: 0.2rem;
border: 1px solid #fff;
width: 0.35rem;
height: 0.35rem;
line-height: 0.35rem;
text-align: center;
background: #ff0000;
border-radius: 50%;
color: #fff;
.pos(a);
}
&.icon-tongyongleibaojing{
color: #fff;
.d-ib;
width: 0.89rem;
height: 0.89rem;
line-height: 0.89rem;
.tc;
background: #ff6600;
border-radius: 50%;
}
}
.notice-right{
box-sizing: border-box;
padding: 0 0 0 0.3rem;
span{
font-size: 0.34rem;
color: #252525;
}
s{
font-size: 0.22rem;
color: #727272;
}
.notice-detail{
.ellipsis-basic;
font-size: 0.28rem;
color: #727272;
}
}
&:after{.line.xb;}
}
}
}
}
.list{
.page-header{
.btn-mark{
padding: 0 15px;
font-size: 0.32rem;
color: #f5f5f9;
}
}
.page-content{
.list-content{
.list-item{
.pos(r);
box-sizing: border-box;
&:after{.line.xb;}
&.unread{
p{
font-size: 0.32rem;
color: #252525;
}
span{
font-size: 0.22rem;
color: #727272;
}
}
&.read{
p{
font-size: 0.32rem;
color: #a9b2bf;
}
span{
font-size: 0.22rem;
color: #a9b2bf;
}
}
}
}
}
}
src/assets/less/style3.less
@import url('../css/reset.css');
@import url('function.less');
@import url('animate.less');
//仿原生线
.line(){
&.xt{left: 0; right: 0;height: 1px;width: 100%; background: #ccc;content: '';.pos(a);top:0;transform: scaleY(0.33) translateY(-1px);}
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ccc;content: '';.pos(a);bottom:0;transform: scaleY(0.33) translateY(1px);}
&.yl{top: 0; bottom:0; width: 1px; height: 100%;background: #ccc;content: '';.pos(a);left:0;transform: scaleX(0.33) translateX(-1px);}
&.yr{top: 0; bottom:0; width: 1px; height: 100%;background: #ccc;content: '';.pos(a);right:0;transform: scaleX(0.33) translateX(1px);}
}
// 收益页面
.payments {background-color: #ededf2;
h1,h3,b{font-weight: 400; }
b {text-transform: uppercase;font-size: .20rem;margin-left: .08rem;display: inline-block;}
.pay-list {position: fixed;z-index: 9; left: 0; right: 0; height: 3.15rem; background-color: #103f73; color: #fff; box-sizing: border-box;
h1 {font-size: .90rem;
b {font-size: .48rem; }
}
h3 {font-size: .24rem;color: #c3cfdc;}
p{font-size: .30rem;}
.d2{width: 2.8rem;}
i{font-size: .22rem;color: #dbe2ea;display: inline-block; vertical-align: top;margin-left: .05rem;}
}
.balance-list {margin: 3.35rem 0 .05rem 0;font-size: .34rem;background: #fff;
i{color: #1c5fa9;font-size: .42rem;margin:0 .12rem 0 .05rem;display: inline-block;vertical-align: middle;margin-top: -.02rem;}
}
.ments-list {background: #fff;font-size: .34rem;position: relative;
span{display: block;}
s{color: #727272;font-size: .22rem;}
&:after{.line.xb;}
}
.page-content {
&.bottom{bottom:1rem;}
}
}
//矿机页面
.miners{background: #ededf2;
.miners-fixed{.pos(f);z-index: 9999;left: 0;right: 0;}
.miners-tab{padding: 0 .30rem;box-sizing: border-box;background: #fff;
li{height: 1.6rem;line-height: 1rem;.tc;color: #b3b3b3;font-size: .34rem;.pos(r);border-bottom: 2px solid #fff;margin-top: -2px;
&.active{color: #1c5fa9;border-bottom: 2px solid #1c5fa9;}
&:nth-last-of-type(1){
span:after{
height: 0;
}
}
span{margin:.30rem 0;.pos(r);.d-b;
&:after{.line.yr;}
}
}
b{.d-ib;font-size: .30rem;line-height: .40rem;vertical-align: middle;font-weight: 400;}
}
.miners-sort{height:1rem;box-sizing: border-box;padding: .40rem .30rem 0;color: #2d6baf;font-size: .28rem;background: #ededf2;
i{font-size: .30rem;}
b{font-weight: 400;}
}
.list-row{background: #fff;overflow: hidden;position: relative;
&>div{.fl;.tr;padding-right: .20rem;box-sizing: border-box;
&.s1{width: 22%;.tl;padding-left:.20rem;padding-right: 0;}
&.s2{width: 27%;}
&.s3{width: 27%;}
&.s4{width: 16%;padding-right: 0}
&.s5{width: 8%;.tc;padding-right: 0;}
}
}
.title{
&>div{color: #727272;font-size: .24rem;.txt-ver(.60rem;);background: #Fff;}
&:after{.line.xb;}
}
.miners-content{padding-top: 3.2rem}
.list{color: #252525;
&>div{height: 1rem;box-sizing: border-box;font-size: .28rem;padding-top: .30rem;}
&:after{.line.xb;}
span{font-size: .18rem;}
b{font-weight: 400;text-transform : uppercase}
i{font-size: .50rem;}
.s5{padding-top: 0;line-height: 1rem;color: #818181;}
em{font-size: .18rem;.d-b;font-weight: 400;
&.red{color: #fb2727;}
&.grey{color: #b3b3b3;}
}
&.redBg{background: #fcd7b4;}
&.greyBg{background: #f9f9f9;color: #b3b3b3;}
}
.bottom{padding-bottom:1rem;}
}
//设置页面-子账户选择
.account{background-color: #ededf2;
h2{height: .96rem;padding: .45rem .30rem 0;box-sizing: border-box;}
ul{background-color: #Fff;
li{.txt-ver(1rem);.pos(r);padding: 0 .20rem 0 .30rem;
&:after{.line.xb;}
span:nth-last-of-type(1){width: 2rem;}
i{font-size: .56rem;color: #757575;.fr;}
b{.d-ib;padding-left: .60rem;vertical-align: top;}
&:active{background-color: #e6e6e6;}
}
}
}
//货币icon
.list-coin{
b{background-size:0.5rem 0.5rem; background-repeat: no-repeat; background-position: left center;color: #999;}
.ltc {background-image:url(../img/index-tab1.png);}
.eth {background-image:url(../img/index-tab2.png);}
.dash {background-image:url(../img/index-tab3.png);}
.xmr {background-image:url(../img/index-tab4.png);}
.btc {background-image:url(../img/index-tab5.png);}
.sc {background-image:url(../img/index-tab6.png);}
.zcash {background-image:url(../img/index-tab7.png);}
.doge {background-image:url(../img/index-tab8.png);}
&.active {
.ltc {background-image:url(../img/index-tab1-active.png);}
.eth {background-image:url(../img/index-tab2-active.png);}
.dash {background-image:url(../img/index-tab3-active.png);}
.xmr {background-image:url(../img/index-tab4-active.png);}
.btc {background-image:url(../img/index-tab5-active.png);}
.sc {background-image:url(../img/index-tab6-active.png);}
.zcash {background-image:url(../img/index-tab7-active.png);}
.doge {background-image:url(../img/index-tab8-active.png);}
}
}
//弹窗样式
.show-center,.show-top{width: 100%;}
.my-popup{width: 100%;max-height: 6rem;overflow: auto;
ul{
li{overflow: hidden;position: relative;padding: 0 .30rem;line-height: 1rem;height: 1rem;font-size: .32rem;color: #8e8e8e;
&:after{.line.xb;}
span{float: left;}
i{font-size: .50rem;color: #1c5fa9;float: right;display: none;}
&.active{color: #1c5fa9;
i{display: block;}
}
&:active{background-color: #e6e6e6;}
b{display: inline-block;font-weight: 400;vertical-align:middle;padding-left: .70rem;}
}
}
}
src/components/Common/Tabbar.vue
<template>
<div class="tab-bar">
<ul flex="main:justify box:mean cross:center">
<li @click="goTo(0)" :class="index==0?'active':''">
<li @click="goTo(0)" :class="$store.state.tab_bar==0?'active':''">
<i class="iconfont icon-tubiaozhexiantu"></i>
<p>用户面板</p>
</li>
<li @click="goTo(1)" :class="index==1?'active':''">
<li @click="goTo(1)" :class="$store.state.tab_bar==1?'active':''">
<i class="iconfont icon-cabinet-settings"></i>
<p>矿机</p>
</li>
<li @click="goTo(2)" :class="index==2?'active':''">
<i class="iconfont icon-shouyi"></i>
<li @click="goTo(2)" :class="$store.state.tab_bar==2?'active':''">
<i class="iconfont icon-licaishouyi"></i>
<p>收益</p>
</li>
<li @click="goTo(3)" :class="index==3?'active':''">
<li @click="goTo(3)" :class="$store.state.tab_bar==3?'active':''">
<i class="iconfont icon-unie606"></i>
<p>设置</p>
</li>
......@@ -21,12 +21,11 @@
</div>
</template>
<script>
export default {
export default {
name: 'tabbar',
data() {
return {
msg: '底部选项卡',
index: 0,
}
},
mounted() {
......@@ -34,25 +33,24 @@ export default {
},
methods: {
goTo(n) {
this.index = n;
this.$store.state.tab_bar=n;
switch (n) {
case 0:
this.$router.replace('/my/puid0/coin_type/region_id/payments')
this.$router.replace('/my/7/ltc/shenzhen/dashboard')
break;
case 1:
this.$router.replace('/my/puid1/coin_type/region_id/payments')
this.$router.replace('/my/7/ltc/shenzhen/miners')
break;
case 2:
this.$router.replace('/my/puid2/coin_type/region_id/payments')
this.$router.replace('/my/7/ltc/shenzhen/payments')
break;
default:
this.$router.replace('/my/puid3/coin_type/region_id/payments')
this.$router.replace('/settings')
break;
}
}
}
}
}
</script>
<style lang="less">
.tab-bar {position: fixed; left: 0; right: 0; bottom: 0; background: #fff; height:1rem;padding: .10rem 0;box-shadow: 0 -2px 10px #e5eaf0;box-sizing: border-box;
......
src/components/Dashboard/coin.vue 0 → 100644
<template>
<div class="my-popup">
<ul>
<li class="list-coin" v-for="(cur_coin,index) in $store.state['cur_coins']" :key="cur_coin" @click="coinAcitve(cur_coin,index)" :class="{active:coin==cur_coin}">
<b :class="cur_coin">{{cur_coin|uppercase}}</b>
<i class="iconfont icon-dui"></i>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'coin',
props: ['coin'],
data(){
return {
}
},
methods: {
coinAcitve(info,index){
this.$emit('childCoin',info)
},
}
}
</script>
src/components/Dashboard/dashboardChart.vue 0 → 100644
<template>
<div class="f-pr mt20">
<div class="c-charts">
<IEcharts :option="line"></IEcharts>
</div>
<span style=" position: absolute; right:0.35rem; top:0rem">
<el-button :type="btnIdx==1?'primary':''" size="mini" @click=getHour(1)>{{txt[language].yixiaoshi}}</el-button>
<el-button :type="btnIdx==0?'primary':''" size="mini" @click="getDay(0)">{{txt[language].yitian}}</el-button>
</span>
</div>
</template>
<script>
import { mapState } from "vuex";
import IEcharts from "vue-echarts-v3";
import fn from "@/assets/js/function.js";
export default {
components: {
IEcharts
},
data: () => ({
shareHistory: {},
shareHistoryTime: [], //算力历史时间
shareHistoryYes: [], //算力历史成功
shareHistoryNo: [], //算力历史拒绝
btnIdx: 1,
language: localStorage.getItem("language"),
unit: "",
maxOnOff: false
}),
computed: {
...mapState(["txt", "init_url", "cur_coins"]),
line: function() {
let self = this;
return {
color: ["#18a8ea", "#fb7778"],
title: {
text: ""
},
tooltip: {
trigger: "axis",
// formatter: function(params) {
// return params[0].name + '<br/>' +
// params[0].seriesName + ' : ' + (params[0].value).toFixed(3) + ' ' + self.unit + 'H/s<br/>' +
// params[1].seriesName + ' : ' + params[1].value + '%<br/>';
// }
formatter: function(params) {
return (
params[0].name +
"<br/>" +
params[0].seriesName +
" : " +
params[0].value.toFixed(3) +
" " +
self.unit +
"H/s<br/>"
);
}
},
legend: {},
grid: {
top: "15%",
left: "3%",
right: "5%",
bottom: "5%",
containLabel: true,
show: false
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: this.shareHistoryTime,
axisLabel: {
formatter: function(value, idx) {
return value.slice(value.length - 5, value.length);
}
},
axisLine: {
lineStyle: {
color: "#999",
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 10
}
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
yAxis: [
{
type: "value",
name: "算力(" + this.unit + "H/s)",
axisLine: {
show: true,
lineStyle: {
color: "#999",
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 10
}
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
// , {
// type: 'value',
// name: '拒绝率(%)',
// min: 0,
// max: this.maxOnOff ? 100 : 20,
// axisLine: {
// show: true,
// lineStyle: {
// color: '#999',
// shadowColor: 'rgba(0, 0, 0, 0.3)',
// shadowBlur: 10
// }
// },
// splitLine: {
// show: false
// },
// axisTick: {
// show: false
// },
// }
],
series: [
{
name: "算力",
type: "line",
stack: "",
smooth: true,
areaStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgb(170, 228, 255)" // 100% 处的颜色
},
{
offset: 1,
color: "rgb(239, 250, 255)" // 100% 处的颜色
}
]
}
}
},
data: this.shareHistoryYes
}
// ,
// {
// name: '拒绝率',
// type: 'line',
// stack: '%',
// smooth: true,
// lineStyle: {
// normal: {
// width: 1
// }
// },
// yAxisIndex: 1,
// xAxisIndex: 0,
// areaStyle: {
// normal: {
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0,
// color: 'rgb(255, 172, 172)' // 0% 处的颜色
// }, {
// offset: 1,
// color: 'rgb(255, 225, 225)' // 100% 处的颜色
// }],
// }
// }
// },
// data: this.shareHistoryNo,
// },
]
};
},
refresh() {
return $store.state.refresh;
}
},
created() {
this.pageInit(
72,
"1h",
parseInt((new Date().getTime() - 86400000 * 3) / 1000)
);
},
methods: {
pageInit(count, dimension, start) {
let self = this;
let puid = this.$route.params.puid;
let coin_type = this.$route.params.coin_type;
let region_id = this.$route.params.region_id;
this.language = localStorage.getItem("language");
//获取子帐户算力图表
fn.getApiBaseUrl(region_id, coin_type).then(api => {
if (api == "") {
$router.replace(
"/my/" + puid + "/" + localStorage.getItem("coin_type")
);
} else {
fn
.getWorkerShareHistory(api, puid, count, dimension, start)
.then(res => {
//console.log(res)
if (res.data.err_no == 0) {
//console.log("算力图表数据chartData:", res.data.data)
self.chartData = res.data.data;
self.shareHistory = {};
self.shareHistoryTime = [];
self.shareHistoryYes = [];
self.shareHistoryNo = [];
self.unit = res.data.data.unit;
let hour, day;
_.each(self.chartData.tickers, function(v, i) {
if (self.btnIdx == 0) {
self.shareHistoryTime.push(fn.getYMD(v[0] * 1000));
} else {
self.shareHistoryTime.push(fn.getYMDHM(v[0] * 1000));
}
self.shareHistoryYes.push(v[1]);
self.shareHistoryNo.push((v[2] * 100).toFixed(2));
if ((v[2] * 100).toFixed(2) > 20) {
self.maxOnOff = true;
}
});
} else {
self.$message.error("获取子帐户算力图表错误!");
$router.replace({
name: "my_puid_cointype",
path:
"/my/" +
self.$route.params.puid +
"/" +
self.$route.params.coin_type
});
}
});
}
});
},
getDay: function(idx) {
this.btnIdx = idx;
this.pageInit(
30,
"1d",
parseInt((new Date().getTime() - 86400000 * 30) / 1000)
);
},
getHour: function(idx) {
this.btnIdx = idx;
this.pageInit(
72,
"1h",
parseInt((new Date().getTime() - 86400000 * 3) / 1000)
);
}
},
watch: {
$route(to, from) {
this.btnIdx = 1;
this.pageInit(
72,
"1h",
parseInt((new Date().getTime() - 86400000 * 3) / 1000)
);
},
refresh(v) {
this.btnIdx = 1;
this.pageInit(
72,
"1h",
parseInt((new Date().getTime() - 86400000 * 3) / 1000)
);
}
}
};
</script>
src/components/Dashboard/index.vue
<template>
<div class="">
{{msg}}
<button @click="goMiners">跳转到矿机列表</button>
<div class="page dashboard">
<div class="page-header" :class="hasZIndex==true?'zIndexAuto':''" flex="main:justify cross:center">
<div class="side" @click="getSide"><i class="iconfont icon-mulu"></i></div>
<div class="title" @click="getRegion">YZCF - {{messageRegion}}<i class="iconfont icon-down"></i></div>
<div class="btn-choose-coin" @click="getCoin"><span :class="messageCoin"></span><i class="iconfont icon-down"></i></div>
</div>
<div class="page-content">
<!-- 切换币种 -->
<mt-popup v-model="showCoin" position="top" class='top show-top'>
<coin :coin="messageCoin" v-on:childCoin="fromCoin"></coin>
</mt-popup>
<!-- 切换区域 -->
<mt-popup v-model="showRegion" position="top" class='top show-top'>
<region :region="messageRegion" v-on:childRegion="fromRegion"></region>
</mt-popup>
<!-- 切换子账户 -->
<mt-popup v-model="showSide" position="left" class="left show-left">
<subaccount></subaccount>
</mt-popup>
<div class="block-list">
<div class="cell" flex="box:mean">
<div flex="main:center dir:top box:center cross:center">
<p><span class="v"><animated-num :value="suanli.shares_24h" :fixed=3 :key="1"></animated-num></span><span class="k">TH/s</span></p>
<h3 class="title f24gray">24小时算力</h3>
</div>
<div flex="main:center dir:top box:center cross:center">
<p><span class="v"><animated-num :value="suanli.shares_1h" :fixed=3 :key="2"></animated-num></span><span class="k">TH/s</span></p>
<h3 class="title f24gray">实时算力</h3>
</div>
</div>
<div class="cell" flex="box:mean">
<div flex="main:center dir:top box:center cross:center">
<p><span class="v c-green"><animated-num :value="suanli.workers_active" :fixed=0 :key="2"></animated-num></span></p>
<h3 class="title f24gray">活跃矿机</h3>
<p class="small-k-v mt20"><span class="k">总数：</span><span class="v">{{suanli.workers_total}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="k">不活跃：</span><span class="v c-red">{{suanli.workers_inactive}}</span></p>
</div>
<div flex="main:center dir:top box:center cross:center">
<p>
<span class="v" v-if="$store.state.coin_type=='xmr'"><animated-num :value="(payment_stats.yesterday_amount)/Math.pow(10,12)" :fixed=12></animated-num></span>
<span class="v" v-else><animated-num :value="(payment_stats.yesterday_amount)/Math.pow(10,8)" :fixed=8></animated-num></span>
<span class="k">BTC</span>
</p>
<h3 class="title f24gray">昨日收益</h3>
<p class="small-k-v mt20"><span class="k">今日预估：</span><span class="v">0.00173601 BTC</span></p>
</div>
</div>
</div>
<dashboard-chart></dashboard-chart>
<div class="bg-blue pb40">
<div class="list">
<h3>账户收益</h3>
<mt-cell title="余额"><span class="v">120.95086277</span> <span class="k">BTC</span></mt-cell>
<mt-cell title="已支付"><span class="v">0.00000000</span> <span class="k">BTC</span></mt-cell>
<mt-cell title="上一次支付时间"><span class="v">2017-11-02 8:00</span></mt-cell>
<mt-cell title="待确认支付"><span class="v">119.71423071</span> <span class="k">BTC</span></mt-cell>
</div>
<div class="list">
<h3>网络状态</h3>
<mt-cell title="全网算力"><span class="v">9.74</span> <span class="k">EH/s</span></mt-cell>
<mt-cell title="矿池算力"><span class="v">1.34</span> <span class="k">BTC</span></mt-cell>
<mt-cell title="矿池FPPS模式每T收益"><span class="v">0.0002</span> <span class="k">BTC</span> <span class="v">=¥ 8.38</span></mt-cell>
<mt-cell title="标准PPS模式每T收益"><span class="v">0.0002</span> <span class="k">BTC</span> <span class="v">=¥ 8.38</span></mt-cell>
<mt-cell title="预测下次难度"><span class="v">+7.03% (1.55T)</span></mt-cell>
<mt-cell title="距离调整还剩"><span class="v">8天18小时</span></mt-cell>
</div>
</div>
</div>
<tabbar></tabbar>
</div>
</template>
<script>
export default {
name: 'dashboard',
import fn from "@/assets/js/function.js";
import coin from "@/components/Dashboard/coin";
import region from "@/components/Dashboard/region";
import subaccount from "@/components/Dashboard/subaccount";
import animatedNum from "@/components/Common/AnimatedNum";
import dashboardChart from "@/components/Dashboard/dashboardChart.vue";
import tabbar from "@/components/Common/Tabbar.vue";
export default {
name: "dashboard",
components: {
coin,
region,
subaccount,
animatedNum,
dashboardChart,
tabbar
},
data() {
return {
msg: '子账户面板'
}
hasZIndex: false,
showCoin: false,
showRegion: false,
showSide: false,
suanli: {},
payment_stats: {
yesterday_amount: 0,
today_estimate: 0
},
messageRegion: '北方联通',
messageCoin:'dash'
};
},
mounted() {
this.pageInitInterval();
},
methods: {
goMiners() {
this.$router.push({ name: 'miners' })
pageInitInterval() {
let self = this;
clearInterval(window.dingshiqi)
self.pageInit();
window.dingshiqi = setInterval(function() {
self.pageInit();
}, $store.state.refresh_time)
},
pageInit() {
let self = this;
let puid = this.$route.params.puid;
let coin_type = this.$route.params.coin_type;
let region_id = this.$route.params.region_id;
this.language = localStorage.getItem('language');
//获取stratum_url
fn.getStratumUrl(region_id, coin_type)
.then(res => {
self.stratum_url = res;
})
//获取userName
fn.getSubAccountById(puid)
.then(res => {
if (res.data.err_no == 0) {
this.cur_account = res.data;
} else {
this.$message.error("当前子账户错误，请重新选择!")
$router.replace({
path: '/my'
})
}
});
//获取所有节点
fn.getAllRegions().then(res => {
this.regions = res;
});
//获取当前节点信息
fn.getRegionInfo(region_id).then(res => {
if (self.language == 'zh-cn') {
this.region_name = res['text_zh-cn'];
}
if (self.language == 'en') {
this.region_name = res['text_en'];
}
})
//请求实时算力
fn.getApiBaseUrl(region_id, coin_type)
.then(api => {
if (api == "") {
this.$message.error("当前币种所在的节点不支持！");
$router.replace("/my/" + puid + "/" + localStorage.getItem('coin_type'))
return false;
} else {
fn.getWorkerStats(api, puid)
.then(res => {
if (res.data.err_no == 0) {
self.suanli = res.data.data;
} else {
this.$message.error("请求实时算力错误!")
}
});
}
})
//获取收益
fn.getApiBaseUrl(region_id, coin_type)
.then(api => {
if (api == "") {
return false;
} else {
fn.getPaymentStats(api, puid)
.then(res => {
if (res.data.err_no == 0) {
self.payment_stats = res.data.data
} else {
this.$message.error("请求支付状态错误!")
}
self.loading = false;
});
}
})
},
getSide() {
this.hasZIndex = true;
this.showSide = !this.showSide;
this.showRegion = false;
this.showCoin = false;
},
getCoin() {
this.hasZIndex = false;
this.showCoin = !this.showCoin;
this.showRegion = false;
this.showSide = false;
},
getRegion() {
this.hasZIndex = false;
this.showRegion = !this.showRegion;
this.showCoin = false;
this.showSide = false;
},
fromRegion(msg){
this.messageRegion = msg;
this.showRegion = false;
},
fromCoin(msg){
this.messageCoin = msg;
this.showCoin = false;
}
}
}
};
</script>
<style>
</style>
src/components/Dashboard/region.vue 0 → 100644
<template>
<div class="my-popup">
<ul>
<li v-for="(items, index) in regionDate" :key="items.text" :class="{active:region==items.text}" v-on:click="regionAcitve(items, index)" >
<span>{{items.text}}</span>
<i class="iconfont icon-dui"></i>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'region',
props: ['region'],
data() {
return {
regionDate: [{
text: '南方电信'
}, {
text: '北方联通'
}, {
text: '美国旧金山'
}, {
text: '德国法兰克福'
}],
}
},
methods: {
regionAcitve(items, index) {
this.$emit('childRegion', items.text)
}
}
}
</script>
src/components/Dashboard/subaccount.vue 0 → 100644
<template>
<div class="subaccount">
<div class="subtop">
<div class="logo">
<p>{{infoUser}}<i class="iconfont icon-jiantou"></i></p>
</div>
<h2>选择子账户</h2>
</div>
<div class="list-item">
<div class="list" v-for="(items, index) in subaccountDate" :key="items" @click="subaccountActive(items, index)" :class="index==i?'active':''">
<span>{{items}}</span>
<i v-show="index == i" class="iconfont icon-dui"></i>
</div>
<div class="subAdd" @click="goCreate">
<b class="iconfont icon-jiantou"></b>创建子账户
</div>
</div>
</div>
</template>
<script>
export default {
name: 'subaccount',
data() {
return {
infoUser: 'xuzhiyuan@163.com',
subaccountDate: ['wakuang1', 'wakuang2', 'wakuang3', 'wakuang4'],
i: 0
}
},
methods: {
subaccountActive(items, index) {
this.i = index
console.log(items)
},
goCreate(){
this.$router.replace('/create')
}
}
}
</script>
<style lang="less">
//仿原生线
.line(){
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ccc;content: '';position: absolute;bottom:0;transform: scaleY(0.33) translateY(1px);}
}
.show-left,.subaccount{width:5.9rem;background-color: #fff;}
.show-left{height: 100%;}
.subaccount{height: 100%;
.subtop{position: fixed;margin:auto;top: 0;left: 0;right: 0;height: .88rem;z-index: 999;}
.logo{height: 2rem;padding:1.1rem .30rem 0;line-height: .9rem;background-color: #103f73;color: #Fff;box-sizing: border-box;font-size: .32rem;
i{font-size: .50rem;color: #Fff;float: right;}
}
h2{padding:.20rem .30rem 0;font-size: .28rem;color: #727272;line-height: .68rem;background: #ededf2;}
.list-item{padding-top:2.88rem;box-sizing: border-box;height: 100%;overflow: auto;
.list{line-height: .90rem;height: .90rem;position: relative;padding: 0 .30rem;
&:after{.line.xb;}
i{font-size: .50rem;color: #1c5fa9;float: right;}
&.active{color: #1c5fa9;}
&:active{background-color: #e6e6e6;}
}
}
.subAdd{text-align: center;font-size: .32rem;color:#1c5fa9;line-height: .90rem;height: .90rem;position: relative;
b{font-size: .40rem;font-weight: 400;}
&:after{.line.xb;}
&:active{background-color: #e6e6e6;}
}
}
</style>
src/components/Home.vue
......@@ -10,7 +10,7 @@
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
<indexChart :params_coin=coin></indexChart>
<home-chart :params_coin=coin></home-chart>
<div class="btn-group full mt40 pb40 pl100 pr100">
<el-button type="primary" round @click="login">登录</el-button>
<el-button round @click="reg">注册</el-button>
......@@ -20,14 +20,14 @@
<script>
import fn from '@/assets/js/function.js'
import { mapState } from 'vuex'
import indexChart from "@/components/Charts/IndexChart.vue"
import homeChart from "@/components/homeChart.vue"
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'home',
components: {
swiper,
swiperSlide,
indexChart
homeChart
},
data() {
return {
......
src/components/Jump.vue
......@@ -13,6 +13,9 @@
<router-link to="/welcome">2.跳转到欢迎页，即列表页精简版</router-link>
</li>
<li @click="goDashboard" style="cursor:pointer">3.跳转到子账户面板</li>
<li>
<router-link to="/my/7/ltc/shenzhen/dashboard">4.跳入用户面板页面</router-link>
</li>
</ul>
</div>
</template>
......
src/components/Miners/group.vue 0 → 100644
<template>
<div class="my-popup">
<ul>
<li v-for="(items, index) in sortDate" @click="sortActive(items, index)" :key="items.text" :class="{active:group==items.text}">
<span>{{items.text}}</span>
<i class="iconfont icon-dui"></i>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'group',
props: ['group'],
data(){
return {
sortDate:[{
text:'全部'
},{
text:'默认分组'
},{
text:'北京机房'
},{
text:'四川'
}]
}
},
methods: {
sortActive(items, index){
this.$emit("childGroup",items.text)
}
}
}
</script>
src/components/Miners/index.vue
<template>
<div class="">
{{msg}} <button @click="goMinerShow">跳转到矿机详情页</button>
<div class="page miners">
<div class="page-header" flex="main:justify cross:center">
<div class="edit"><i class="iconfont icon-fanhui"></i></div>
<div class="title" @click="getGroup">{{messageGroup}}</div>
<div class="search"><i class="iconfont icon-fanhui"></i></div>
</div>
<div class="page-content bottom">
<div class="miners-fixed">
<ul class="miners-tab" flex="dir:center box:mean cross:center">
<li v-for="(items,index) in tablist" @click="tabActive(items,index)" :class="index==i?'active':''"><span><b>{{items.text}}<br>{{items.num}}</b></span></li>
</ul>
<div class="miners-sort f-tar"><span @click="getSort"><b><i class="iconfont icon-paixujiang"></i>排序：</b><b>{{messageSort}}<i class="iconfont icon-down"></i></b></span></div>
<!-- 默认分组 -->
<mt-popup v-model="showGroup" position="top" class='top show-center'>
<group :group="messageGroup" v-on:childGroup="formGroup"></group>
</mt-popup>
<!-- 切换排序 -->
<mt-popup v-model="showSort" position="top" class='top show-center'>
<sort :sort="messageSort" v-on:childSort="fromSort"></sort>
</mt-popup>
<div class="title list-row">
<div class="s1">矿机名</div>
<div class="s2">实时算力</div>
<div class="s3">日算力</div>
<div class="s4">拒绝</div>
<div class="s5"></div>
</div>
</div>
<div class="miners-content">
<!-- 添加刷新加载位置 -->
<div class="list list-row" v-for="items in tableData" :class="{'redBg':items.status==1,'greyBg':items.status==2} ">
<div class="s1">{{items.name}}
<em v-if="items.status==1" class="red">不活跃</em>
<em v-else-if="items.status==2" class="grey">失效</em>
</div>
<div class="s2">{{items.realPower}}<span><b>{{items.unit}}h/</b>s</span></div>
<div class="s3">{{items.dayPower}}<span><b>{{items.unit}}h/</b>s</span></div>
<div class="s4">{{items.refuse}}</div>
<div class="s5"><i class="iconfont icon-jiantou"></i></div>
</div>
<!-- 添加刷新加载位置 -->
</div>
</div>
<!-- page-content end -->
<tabbar></tabbar>
</div>
<!-- page end -->
</template>
<script>
import fn from '@/assets/js/function.js';
import sort from "@/components/Miners/sort";
import group from "@/components/Miners/group";
import tabbar from "@/components/Common/Tabbar.vue";
export default {
name: 'dashboard',
name: 'miners',
components: {
sort,
group,
tabbar
},
data() {
return {
msg: '矿机列表页面'
tablist:[{
text:'全部',
num:'1006'
},{
text:'活跃',
num:'1002'
},{
text:'不活跃',
num:'107'
},{
text:'失效',
num:'17'
}],
tableData: [{
name: '1103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
},{
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
},{
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
},{
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
},{
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'T',
status: "1"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'M',
status: "2"
}, {
name: '3103037',
realPower: '205.204',
dayPower: '252.752',
refuse: '19.45%',
unit: 'H',
}],
i: 0, //miners-tab默认第一个选中
hasZIndex: false,
showSort:false,
showGroup:false,
messageSort:'矿机名 倒序',
messageGroup:'全部'
}
},
mounted() {
},
methods: {
goMinerShow(){
goMinerShow() {
// <button @click="goMinerShow">跳转到矿机详情页</button>
this.$router.push('/my/puid/coin_type/region_id/miners/worker_id')
},
//miners-tab点击切换的选中状态
tabActive(items,index) {
this.i = index
console.log(items.text)
},
getSort() {
this.hasZIndex = true;
this.showSort = !this.showSort;
this.showGroup=false;
},
getGroup(){
this.hasZIndex = false;
this.showGroup = !this.showGroup;
this.showSort=false;
},
fromSort(msg){
this.messageSort = msg;
this.showSort=false;
},
formGroup(msg){
this.messageGroup = msg;
this.showGroup=false;
}
}
}
</script>
<style>
</style>
src/components/Miners/sort.vue 0 → 100644
<template>
<div class="my-popup">
<ul>
<li v-for="(items, index) in sortDate" @click="sortActive(items, index)" :key="items.text" :class="{active:sort==items.text}">
<span>{{items.text}}</span>
<i class="iconfont icon-dui"></i>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'sort',
props: ['sort'],
data(){
return {
sortDate:[{
text:'默认排序'
},{
text:'日算力 低到高'
},{
text:'日算力 高到低'
},{
text:'矿机名 倒序'
},{
text:'拒绝率 高到低'
},{
text:'拒绝率 低到高'
},{
text:'最后在线时间'
}],
i:0,
}
},
methods: {
sortActive(items, index){
this.$emit('childSort', items.text)
}
}
}
</script>
src/components/Notice/index.vue
<template>
<div class="">
{{msg}}
<button @click="goNoticeList">跳转到通知列表</button>
<div class="page notice">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">通知中心</div>
</div>
<div class="page-content">
<div class="notice-content">
<div class="notice-notice" flex="dir:left box:first" @click="goNoticeList">
<span class="iconfont icon-xiaoxigonggao">
<b class="notice-badge">{{notice.num}}</b>
</span>
<div class="notice-right" flex="dir:top main:justify">
<div flex="dir:left box:mean cross:center">
<span class="f-tal">
公告
</span>
<s class="f-tar">
{{notice.time}}
</s>
</div>
<div flex-box="0" class="notice-detail">{{notice.title}}</div>
</div>
</div>
<div class="notice-alarm" flex="dir:left box:first" @click="goNoticeList">
<span class="iconfont icon-tongyongleibaojing">
<b class="notice-badge">{{alarm.num}}</b>
</span>
<div class="notice-right" flex="dir:top main:justify">
<div flex="dir:left box:mean cross:center">
<span class="f-tal">
报警
</span>
<s class="f-tar">
{{alarm.time}}
</s>
</div>
<div flex-box="0" class="notice-detail">{{alarm.title}}</div>
</div>
</div>
</div>
<!--<button @click="goNoticeList">跳转到通知列表</button>-->
</div>
</div>
</template>
<script>
......@@ -9,16 +48,31 @@ export default {
name: 'dashboard',
data() {
return {
msg: '通知中心'
notice: {
time: '2017-11-05 11:33',
num: '15',
title:'矿池关于比特币现金版本升级及更名的通知'
},
alarm: {
time: '2017-11-05 11:33',
num: '5',
title:'活跃矿机数下降到1500台'
}
}
},
mounted() {
},
methods: {
goBack() {
this.$router.go(-1);
},
goNoticeList() {
this.$router.push('/noticeList')
}
},
// goAlarmList() {
// this.$router.push('/alarmList')
// }
}
}
......
src/components/Notice/list.vue
<template>
<div class="">
{{msg}}
<button @click="goNoticeShow">跳转到通知详情</button>
<div class="page list">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">通知列表</div>
<div class="btn-mark" @click="markAllList">全标已读</div>
</div>
<div class="page-content">
<ul class="list-content">
<li v-for="(notice,index) in noticeList" :key="notice.id" class="list-item p30" :class="notice.status=='unread'?'unread':'read'" @click="goNoticeShow(index) ">
<p>{{notice.title}}</p>
<span>{{notice.time}}</span>
</li>
</ul>
</div>
<!--{{msg}}-->
<!--<button @click="goNoticeShow">跳转到通知详情</button>-->
</div>
</template>
<script>
......@@ -9,15 +22,38 @@ export default {
name: 'noticeList',
data() {
return {
msg: '通知列表'
noticeList:[{
id: 0,
time: '2017-11-05 11:33',
title:'矿池关于比特币现金版本升级及更名的通知',
status: 'unread'
},{
id: 1,
time: '2017-11-04 11:33',
title:'矿池关于比特币现金版本升级及更名的通知',
status: 'read'
},{
id: 2,
time: '2017-11-04 11:33',
title:'矿池关于比特币现金版本升级及更名的通知',
status: 'read',
isRead: false
}],
}
},
mounted() {
},
methods: {
goNoticeShow() {
this.$router.push('/NoticeShow')
goBack() {
this.$router.go(-1);
},
goNoticeShow(index) {
this.noticeList[index].status='read';
// this.$router.push('/NoticeShow');
},
markAllList() {
}
}
}
......
src/components/Payments/index.vue
......@@ -131,34 +131,4 @@ export default {
}
</script>
<style lang="less">
//仿原生线
.line(){
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ccc;content: '';position: absolute;bottom:0;transform: scaleY(0.33) translateY(1px);}
}
.payments {background-color: #ededf2;
h1,h3,b{font-weight: 400; }
b {text-transform: uppercase;font-size: .20rem;margin-left: .08rem;display: inline-block;}
.pay-list {position: fixed;z-index: 9; left: 0; right: 0; height: 3.15rem; background-color: #103f73; color: #fff; box-sizing: border-box;
h1 {font-size: .90rem;
b {font-size: .48rem; }
}
h3 {font-size: .24rem;color: #c3cfdc;}
p{font-size: .30rem;}
.d2{width: 2.8rem;}
i{font-size: .22rem;color: #dbe2ea;display: inline-block; vertical-align: top;margin-left: .05rem;}
}
.balance-list {margin: 3.35rem 0 .05rem 0;font-size: .34rem;background: #fff;
i{color: #1c5fa9;font-size: .42rem;margin:0 .12rem 0 .05rem;display: inline-block;vertical-align: middle;margin-top: -.02rem;}
}
.ments-list {background: #fff;font-size: .34rem;position: relative;
span{display: block;}
s{color: #727272;font-size: .22rem;}
&:after{.line.xb;}
}
.page-content {
&.bottom{bottom:1rem;}
}
}
</style>
src/components/Settings/Account.vue 0 → 100644
<template>
<div class="page account">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">子账户选择</div>
</div>
<div class="page-content">
<h2>请选择子账户</h2>
<ul class="list-coin active">
<li v-for="cur_coin in $store.state['cur_coins']" :key="cur_coin" flex="dir:left box:last">
<span>kuangchang</span>
<span>
<b :class="cur_coin">{{cur_coin|uppercase}}</b>
<i class="iconfont icon-jiantou"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'account',
data() {
return {
}
},
mounted() {
},
methods: {
goBack() {
this.$router.go(-1)
}
}
}
</script>
<style>
</style>
src/components/Settings/DefaultCoin.vue
<template>
<div class="">
{{msg}}
<button @click="goBack">提交返回</button>
<div class="page default-coin">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">设置默认币种</div>
</div>
<div class="page-content">
<el-form :model="createForm" :rules="createRules" ref="createForm">
<label for="">选择此子账户优先显示的币种</label>
<el-form-item prop="defaultCoin">
<div class="coin-area f-cb">
<label class="btn-coin" :class="createForm.defaultCoin==cur_coin?'active':''" v-for="cur_coin in $store.state['cur_coins']" :key="cur_coin"><b :class="cur_coin">{{cur_coin|uppercase}}</b>
<input type="radio" id="cur_coin" :value="cur_coin" v-model="createForm.defaultCoin">
</label>
</div>
</el-form-item>
<div class="descript">当切换到该子账户时，将默认显示该币种</div>
<div class='btn-group full pl30 pr30 mt50'>
<el-button type="primary" round @click="submitForm('createForm')" :disabled="!showBtn">确定</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
......@@ -9,15 +28,33 @@ export default {
name: 'defaultCoin',
data() {
return {
msg: '设置默认币种'
createForm: {
defaultCoin: ""
},
createRules: {
defaultCoin: [{ required: true, trigger: "blur" }]
}
}
},
mounted() {
computed: {
showBtn: function() {
return this.createForm.defaultCoin;
}
},
mounted() {},
methods: {
goBack() {
this.$router.go(-1)
this.$router.go(-1);
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$messagebox.alert("提交成功！", "温馨提示");
} else {
this.$messagebox.alert("提交错误!", "温馨提示");
return false;
}
});
}
}
}
......
src/components/Settings/Language.vue
<template>
<div class="">
{{msg}}
<button @click="goBack">返回</button>
<div class="page language">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">语言设置</div>
</div>
<div class="page-content top">
<div class="language-content">
<div class="language-item" @click="toggleClass(0)" :class="index==0?'active':''">
<div class="language-title">
自动
</div>
<div :class="index==0?'language-selected':''">
</div>
</div>
<div class="language-item" @click="toggleClass(1)" :class="index==1?'active':''">
<div class="language-title">
中文
<span class="language-img zh-cn">
</span>
</div>
<div :class="index==1?'language-selected':''">
</div>
</div>
<div class="language-item" @click="toggleClass(2)" :class="index==2?'active':''">
<div class="language-title">
英文
<span class="language-img en">
</span>
<!--<img src="../../assets/img/en.png" alt="">-->
</div>
<div :class="index==2?'language-selected':''">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -9,7 +46,7 @@ export default {
name: 'language',
data() {
return {
msg: '语言设置'
index: 0
}
},
mounted() {
......@@ -18,6 +55,9 @@ export default {
methods: {
goBack() {
this.$router.go(-1)
},
toggleClass(n){
this.index = n;
}
}
}
......
src/components/Settings/index.vue
<template>
<div class="page settings">
<div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">{{msg}}</div>
<div class="title">设置页面</div>
</div>
<div class="page-content">
<div class="page-content bottom">
<div class="setting-content">
<div class="settings-group current-subaccount">
<mt-cell title="当前子账户">
<mt-cell title="当前子账户" is-link to="/account">
<span class="fore-link-text">zhiyuan</span>
<img src="../../assets/img/index-tab1-active.png" alt="" class="fore-link-img"/>
<b class="ltc fore-link-img"/>
</mt-cell>
</div>
<div class="mt40 settings-group subaccount-settings">
<div class="settings-title">子账户设置</div>
<mt-cell title="LTC收益地址" is-link></mt-cell>
<mt-cell title="DOGE补贴地址" is-link></mt-cell>
<mt-cell title="默认币种设置" is-link>
<img src="../../assets/img/index-tab1-active.png" alt="" class="fore-link-img"/>
<mt-cell title="默认币种设置" is-link to="/defaultCoin">
<b class="ltc fore-link-img"/>
</mt-cell>
</div>
<div class="mt40 settings-group notice-content">
<div class="settings-title">通知公告</div>
<mt-cell title="通知中心" is-link>
<mt-cell title="通知中心" is-link to="/notice">
<span class="notice-badge">2</span>
</mt-cell>
</div>
......@@ -46,29 +45,34 @@
<mt-cell title="矿机设置" is-link>
<span class="fore-link-text">矿工必看</span>
</mt-cell>
<mt-cell title="语言设置" is-link>
<img src="../../assets/img/cn.png" alt="" class="fore-link-lang"/>
<mt-cell title="语言设置" is-link to="/language">
<span class="language-img zh-cn"></span>
</mt-cell>
</div>
</div>
</div>
<!-- page-content end -->
<tabbar></tabbar>
</div>
<!-- page end -->
</template>
<script>
import tabbar from "@/components/Common/Tabbar.vue";
export default {
name: 'dashboard',
components: {
tabbar
},
data() {
return {
msg: '设置页面'
}
},
mounted() {
},
methods: {
goBack() {
this.$router.go(-1)
}
}
}
......@@ -77,19 +81,17 @@ export default {
.settings{
background: #ededf2;
.page-content{
&.bottom{bottom:1rem;}
.setting-content{
padding-top: 0.28rem;
.current-subaccount{
.fore-link-img{
margin-right: 0.1rem;
}
.fore-link-text{
margin-right: 0.08rem;
}
}
.settings-group{
.line(){
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ededf2;;content: '';position: absolute;bottom:0;transform: scaleY(0.33) translateY(1px);}
&.xb{left: 0; right: 0;height: 1px;width: 100%; background: #ccc;content: '';position: absolute;bottom:0;transform: scaleY(0.33) translateY(1px);}
}
box-sizing: border-box;
width: 7.5rem;
......@@ -111,10 +113,15 @@ export default {
font-size: 0.28rem;
color: #959595;
}
.fore-link-img{
width: 0.41rem;
height: 0.41rem;
}
.fore-link-img {display: block;width: 0.41rem;height: 0.41rem;vertical-align:middle;padding:0 0.3rem 0 0;background-size:0.41rem 0.41rem; background-repeat: no-repeat; background-position: 0.3rem center; color: #999;}
.ltc {background-image:url(../../assets/img/index-tab1-active.png);}
.eth {background-image:url(../../assets/img/index-tab2-active.png);}
.dash {background-image:url(../../assets/img/index-tab3-active.png);}
.xmr {background-image:url(../../assets/img/index-tab4-active.png);}
.btc {background-image:url(../../assets/img/index-tab5-active.png);}
.sc {background-image:url(../../assets/img/index-tab6-active.png);}
.zcash {background-image:url(../../assets/img/index-tab7-active.png);}
.doge {background-image:url(../../assets/img/index-tab8-active.png);}
.notice-badge{
display: inline-block;
width: 0.41rem;
......@@ -129,6 +136,13 @@ export default {
width: 0.48rem;
height: 0.32rem;
}
.language-img{
display:inline-block;vertical-align:middle;padding:0rem;background-size:0.48rem 0.32rem; background-repeat: no-repeat; background-position: 0rem center;
width: 0.48rem;height: 0.32rem;
&.zh-cn {background-image:url(../../assets/img/cn.png);}
&.en {background-image:url(../../assets/img/en.png);}
margin-top: -0.02rem;
}
&:after{.line.xb;}
}
.mint-cell:last-child{
......
src/components/Users/Create.vue
......@@ -14,18 +14,8 @@
<label for="">选择此子账户优先显示的币种</label>
<el-form-item prop="defaultCoin">
<div class="coin-area f-cb">
<el-radio v-model="createForm.defaultCoin" :label="cur_coin|uppercase" border v-for="cur_coin in $store.state['cur_coins']" :key="cur_coin">{{cur_coin|uppercase}}</el-radio>
<label class="btn-coin" :class="createForm.defaultCoin=='ltc'?'active':''"><b class="ltc">LTC</b>
<input type="radio" id="ltc" value="ltc" v-model="createForm.defaultCoin">
</label>
<label class="btn-coin" :class="createForm.defaultCoin=='eth'?'active':''"><b class="eth">ETH</b>
<input type="radio" id="eth" value="eth" v-model="createForm.defaultCoin">
</label>
<label class="btn-coin" :class="createForm.defaultCoin=='dash'?'active':''"><b class="dash">DASH</b>
<input type="radio" id="dash" value="dash" v-model="createForm.defaultCoin">
</label>
<label class="btn-coin" :class="createForm.defaultCoin=='xmr'?'active':''"><b class="xmr">XMR</b>
<input type="radio" id="xmr" value="xmr" v-model="createForm.defaultCoin">
<label class="btn-coin" :class="createForm.defaultCoin==cur_coin?'active':''" v-for="cur_coin in $store.state['cur_coins']" :key="cur_coin"><b :class="cur_coin">{{cur_coin|uppercase}}</b>
<input type="radio" id="cur_coin" :value="cur_coin" v-model="createForm.defaultCoin">
</label>
</div>
</el-form-item>
......@@ -41,7 +31,6 @@
</ul>
</div>
</div>
<!-- {{msg}} <button @click="dashboard">跳转到子账户面板</button> -->
</div>
</template>
<script>
......@@ -66,12 +55,11 @@ export default {
],
defaultCoin: [{ required: true, trigger: "blur" }]
}
// showBtn: false
};
},
computed: {
showBtn: function() {
return !!this.createForm.username && !!this.createForm.defaultCoin;
return this.createForm.username && this.createForm.defaultCoin;
}
},
mounted() {},
......@@ -82,9 +70,9 @@ export default {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
this.$messagebox.alert("提交成功！", "温馨提示");
} else {
console.log("error submit!!");
this.$messagebox.alert("提交错误!", "温馨提示");
return false;
}
});
......
src/components/charts/WorkerShareHistory1.vue deleted 100644 → 0
<template>
<div>
<h2 class="title s4 pl50 pr50 pt30">
<span v-if="language=='zh-cn'">{{init_url.coins[$route.params.coin_type]['text_zh-cn']}}{{txt[language].suanlitubiao}}</span>
<span v-if="language=='en'">{{init_url.coins[$route.params.coin_type]['text_en']}} {{txt[language].suanlitubiao}}</span>
</h2>
<p class="mt30 pl50 pr50 mb20">
<button class="btn sm" :class="btnIdx==1?'active':''" @click=getHour(1)>{{txt[language].yixiaoshi}}</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button class="btn sm" :class="btnIdx==0?'active':''" @click="getDay(0)">{{txt[language].yitian}}</button>
</p>
<div class="c-charts">
<IEcharts :option="line"></IEcharts>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import IEcharts from 'vue-echarts-v3';
import fn from '@/assets/js/function.js'
export default {
components: {
IEcharts,
},
data: () => ({
shareHistory: {},
shareHistoryTime: [], //算力历史时间
shareHistoryYes: [], //算力历史成功
shareHistoryNo: [], //算力历史拒绝
btnIdx: 1,
language: localStorage.getItem('language'),
unit: '',
maxOnOff: false,
}),
computed: {
...mapState(["txt", "init_url", "cur_coins"]),
line: function() {
let self = this;
return {
"color": [
"#18a8ea",
"#fb7778",
],
title: {
text: ''
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
// console.log(params)
return params[0].name + '<br/>' +
params[0].seriesName + ' : ' + (params[0].value).toFixed(3) + ' ' + self.unit + 'H/s<br/>' +
params[1].seriesName + ' : ' + params[1].value + '%<br/>';
}
},
legend: {
// data: ["成功率", "拒绝率"]
},
grid: {
top: '9%',
left: '3%',
right: '5%',
bottom: '5%',
containLabel: true,
show: false
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: this.shareHistoryTime,
axisLabel: {
formatter: function(value, idx) {
return value.slice(value.length - 5, value.length)
}
},
axisLine: {
lineStyle: {
color: '#999',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 10
}
},
splitLine: {
show: false,
},
axisTick: {
show: false
},
}],
yAxis: [{
type: 'value',
name: '算力(' + this.unit + 'H/s)',
axisLine: {
show: true,
lineStyle: {
color: '#999',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 10
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}, {
type: 'value',
name: '拒绝率(%)',
min: 0,
max: this.maxOnOff ? 100 : 20,
axisLine: {
show: true,
lineStyle: {
color: '#999',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 10
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}],
series: [{
name: '算力',
type: 'line',
stack: '',
smooth: true,
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgb(170, 228, 255)' // 100% 处的颜色
// color: 'rgb(24, 168, 234)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgb(239, 250, 255)' // 100% 处的颜色
}],
}
}
},
data: this.shareHistoryYes
},
{
name: '拒绝率',
type: 'line',
stack: '%',
smooth: true,
lineStyle: {
normal: {
width: 1
}
},
yAxisIndex: 1,
xAxisIndex: 0,
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgb(255, 172, 172)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgb(255, 225, 225)' // 100% 处的颜色
}],
}
}
},
data: this.shareHistoryNo,
},
]
}
},
refresh() {
return $store.state.refresh;
}
},
created() {
this.pageInit(72, '1h', parseInt((new Date().getTime() - (86400000 * 3)) / 1000));
},
methods: {
pageInit(count, dimension, start) {
let self = this;
let puid = this.$route.params.puid;
let coin_type = this.$route.params.coin_type;
let region_id = this.$route.params.region_id;
this.language = localStorage.getItem('language');
//获取子帐户算力图表
fn.getApiBaseUrl(region_id, coin_type)
.then(api => {
if (api == "") {
$router.replace("/my/" + puid + "/" + localStorage.getItem('coin_type'))
} else {
fn.getWorkerShareHistory(api, puid, count, dimension, start)
.then(res => {
//console.log(res)
if (res.data.err_no == 0) {
//console.log("算力图表数据chartData:", res.data.data)
self.chartData = res.data.data;
self.shareHistory = {};
self.shareHistoryTime = [];
self.shareHistoryYes = [];
self.shareHistoryNo = [];
self.unit = res.data.data.unit;
let hour, day;
_.each(self.chartData.tickers, function(v, i) {
if (self.btnIdx == 0) {
self.shareHistoryTime.push(fn.getYMD(v[0] * 1000))
} else {
self.shareHistoryTime.push(fn.getYMDHM(v[0] * 1000))
}
self.shareHistoryYes.push(v[1]);
self.shareHistoryNo.push((v[2] * 100).toFixed(2));
if ((v[2] * 100).toFixed(2) > 20) {
self.maxOnOff = true;
}
});
} else {
self.$message.error("获取子帐户算力图表错误!")
$router.replace({
name: 'my_puid_cointype',
path: '/my/' + self.$route.params.puid + '/' + self.$route.params.coin_type
})
}
})
}
})
},
getDay: function(idx) {
this.btnIdx = idx;
this.pageInit(30, '1d', parseInt((new Date().getTime() - (86400000 * 30)) / 1000));
},
getHour: function(idx) {
this.btnIdx = idx;
this.pageInit(72, '1h', parseInt((new Date().getTime() - (86400000 * 3)) / 1000));
},
},
watch: {
'$route' (to, from) {
this.btnIdx = 1;
this.pageInit(72, '1h', parseInt((new Date().getTime() - (86400000 * 3)) / 1000));
},
refresh(v) {
this.btnIdx = 1;
this.pageInit(72, '1h', parseInt((new Date().getTime() - (86400000 * 3)) / 1000));
}
}
}
</script>
<style scoped>
.el-col {
margin-bottom: 16px;
}
.material-icons {
font-size: 80px;
color: #ddd;
}
.cart-string {
height: 100px;
padding-top: 10px;
font-size: 1.1rem;
}
.c-charts {
height: 400px;
width: 100%;
}
</style>
src/components/charts/indexChart.vue → src/components/homeChart.vue
......@@ -189,7 +189,3 @@ export default {
}
</script>
<style scoped>
</style>
src/main.js
......@@ -37,7 +37,7 @@ axios.interceptors.request.use(config => {
function checkToken() {
return new Promise((resolve, reject) => {
resolve("access token");
resolve("eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IlEwTTBNRUl4UVRVME5qazJNa0ZFT0RCRk56WkJNVGc0TmtFd09UWkNOakZGTlRFMFEwVTJOdyJ9.eyJpc3MiOiJodHRwczovL2Jsb2NraW4uYXV0aDAuY29tLyIsInN1YiI6ImF1dGgwfDU5ZjE3OTc5ZDljMGM1MzZiZjRhMzVjMSIsImF1ZCI6WyJodHRwczovL3d3dy5wb29saW4uY29tL2FwaSIsImh0dHBzOi8vYmxvY2tpbi5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNTE2NjcxOTI4LCJleHAiOjE1MTY2NzkxMjgsImF6cCI6IkZhczI5dWJNNW52NElFMlZUQ3ZEWU5iaWtIeTF0bDBkIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSByZWFkIHdyaXRlIn0.UPdJbluTv3Xmcfs_9VI-Wih_SlfQL0QbEh2Rmbu2967lB0_5RXD4sqn3yWTf_VyMYjJqlqTRTkb8yPtUPcsQCA4oXz9fwUqkvmJYhVqCbeRBax-GtZ596um080IZjfc_rsHsemu49UcjCGBtBN4Z1EfyStMnP888_i7XN1Jg3fQxhj87DBn8QLIkj0DIolj0rHvie-cNRCGk14WDd5zP-KAWmvKW4nLwnrEEOLHcmaeH46z0ZCNTpJ7sFr0UHxBQTVVE5fU2zBlym7f0jpofR5M7BCa98UWV7KCJxioeljCkvu-dvCr0IO-oxWsQ0_WwoKkRj1jiDAwp_sgVMq0Yvg");
})
}
window.$axios = Vue.prototype.$axios = axios;
......
src/router/index.js
......@@ -18,6 +18,7 @@ import Payments from '@/components/Payments/'
import Settings from '@/components/Settings/'
import DefaultCoin from '@/components/Settings/DefaultCoin'
import Language from '@/components/Settings/Language'
import Account from '@/components/Settings/Account'
import Create from '@/components/Users/Create'
import Subaccount from '@/components/Users/Subaccount'
......@@ -126,7 +127,14 @@ const router = new Router({
meta: {
title: 'Language.vue'
}
}, {
},{
path: '/account',
name: 'account',
component: Account,
meta: {
title: 'Account.vue'
}
},{
path: '/notice',
name: 'notice',
component: Notice,
......
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 sign in to comment