Skip to content

html / poolin_app

Go to a project
Commit 90786ed4 by gaolei
Options

gaolei

parents 793b5355 c0a2f909
Showing with 828 additions and 387 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>
......
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;}
}
src/assets/less/style3.less
......@@ -80,3 +80,4 @@
.bggrey{background: #f9f9f9;color: #b3b3b3;}
}
}
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,13 +21,11 @@
</div>
</template>
<script>
var indexNum = 0
export default {
export default {
name: 'tabbar',
data() {
return {
msg: '底部选项卡',
index: indexNum,
}
},
mounted() {
......@@ -35,28 +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')
indexNum=0
this.$router.replace('/my/7/ltc/shenzhen/dashboard')
break;
case 1:
this.$router.replace('/my/puid/coin_type/region_id/miners')
indexNum=1
this.$router.replace('/my/7/ltc/shenzhen/miners')
break;
case 2:
this.$router.replace('/my/puid0/coin_type/region_id/payments')
indexNum=2
this.$router.replace('/my/7/ltc/shenzhen/payments')
break;
default:
this.$router.replace('/settings')
indexNum=3
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>
<ul>
<li>coin</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
</ul>
</div>
</template>
<script>
export default {
name:'coin',
data(){
return {
}
}
}
</script>
<style>
</style>
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 - 南方电信<i class="iconfont icon-down"></i></div>
<div class="btn-choose-coin" @click="getCoin"><span class="dash"></span><i class="iconfont icon-down"></i></div>
</div>
<div class="page-content">
<!-- 切换币种 -->
<mt-popup v-model="showCoin" position="top" class='top'>
<coin></coin>
</mt-popup>
<!-- 切换区域 -->
<mt-popup v-model="showRegion" position="top" class='top'>
<region></region>
</mt-popup>
<!-- 切换子账户 -->
<mt-popup v-model="showSide" position="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
},
};
},
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;
}
}
}
};
</script>
<style>
</style>
src/components/Dashboard/region.vue 0 → 100644
<template>
<div>
<ul>
<li>region</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
</ul>
</div>
</template>
<script>
export default {
name:'region',
data(){
return {
}
}
}
</script>
<style>
</style>
src/components/Dashboard/subaccount.vue 0 → 100644
<template>
<div>
<ul>
<li>subaccount</li>
<li>12312312</li>
<li>12312312</li>
<li>12312312</li>
</ul>
</div>
</template>
<script>
export default {
name:'subaccount',
data(){
return {
}
}
}
</script>
<style>
</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/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">{{msg}}</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,34 @@ export default {
name: 'defaultCoin',
data() {
return {
msg: '设置默认币种'
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">{{msg}}</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,8 @@ export default {
name: 'language',
data() {
return {
msg: '语言设置'
msg: '语言设置',
index: 0
}
},
mounted() {
......@@ -18,6 +56,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>
<div class="page-content">
<div class="page-content bottom">
<div class="setting-content">
<div class="settings-group current-subaccount">
<mt-cell title="当前子账户">
<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">
......@@ -46,17 +45,24 @@
<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: '设置页面'
......@@ -66,9 +72,7 @@ export default {
},
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.eyJpc3MiOiJodHRwczovL2Jsb2NraW4uYXV0aDAuY29tLyIsInN1YiI6ImF1dGgwfDU5ZjE3OTc5ZDljMGM1MzZiZjRhMzVjMSIsImF1ZCI6WyJodHRwczovL3d3dy5wb29saW4uY29tL2FwaSIsImh0dHBzOi8vYmxvY2tpbi5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNTE2MTc0NDM5LCJleHAiOjE1MTYxODE2MzksImF6cCI6IkZhczI5dWJNNW52NElFMlZUQ3ZEWU5iaWtIeTF0bDBkIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSByZWFkIHdyaXRlIn0.fRvVcMrLru4kN271PESF8wPH3XS4CIbucQiDw3a2TmXkapf4OaxzgBKv7GaE-iuM02_iWJl3n6ipqjxHls_hw4_nfjT70dtLNXTZQ6aiiij94NZ3-9M3lkZtr1kxy8wBt3vFT4AiC8qxdpu3GJpcMFcrSzN7TWi1Czf9MUvUuwBF3GXQbmCJqMvCrPZrT-ZUoPKwiNS3t_K-uzmzcGoNcdZCUB1XIAS8C4ZRUrcG0umfCpnL9DH1MwFCZGV7oaUhBzH7rRkNoeUCUUdgfklUnV0OwGpmrM4Hvlgo5IVKY7dHtpQ3FKoGGdY4KSPp-8JY4vvsD505PBJ_mpDP8zBOHA");
})
}
window.$axios = Vue.prototype.$axios = axios;
......
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