You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
303 lines
9.3 KiB
303 lines
9.3 KiB
<template>
|
|
<div class="content">
|
|
<van-nav-bar
|
|
title="算力详情 "
|
|
left-text="返回"
|
|
left-arrow
|
|
@click-left="onClickLeft"
|
|
@click-right="onClickRight"
|
|
/>
|
|
<div class="order-detail-content">
|
|
<div class="order-detail-top">
|
|
<span>{{detail.totalProfit==0?"未挖到区块": '+'+ detail.totalProfit}}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<div class="order-detail-top-item">
|
|
<span>算力:</span> {{detail.enName}} | {{detail.coinPackage.number}}{{detail.coinPackage.packageUnitName}}/S
|
|
</div>
|
|
<div class="order-detail-top-item">
|
|
<span>租用状态:</span>{{getLeaseStatus(detail.leaseStatus)}}
|
|
</div>
|
|
<div class="order-detail-top-item">
|
|
<span>租用时长:</span> {{detail.duration}} min(分钟)
|
|
</div>
|
|
<div class="order-detail-top-item">
|
|
<span>剩余时长:</span> {{getLeaseTime(detail.leaseEndTime)}} min(分钟)
|
|
</div>
|
|
<div class="order-detail-divider"></div>
|
|
</div>
|
|
<!-- 算力监控 /-->
|
|
<div>
|
|
<div class="order-detail-title">
|
|
<span>算力监控</span>
|
|
</div>
|
|
<ve-line :data-empty="dataEmpty" :settings="chartSettings" :data="chartData" :resize-delay="1000"
|
|
:extend="extend" width="100%"
|
|
height="280px"></ve-line>
|
|
</div>
|
|
<!-- 区块记录 /-->
|
|
<div>
|
|
<div class="order-detail-title">
|
|
<span>区块记录</span>
|
|
</div>
|
|
<div class="order-detail-record">
|
|
<div class="order-detail-record-left">
|
|
<span>时间</span>
|
|
</div>
|
|
<div class="order-detail-record-right">
|
|
<span>收益(单位)</span>
|
|
</div>
|
|
</div>
|
|
<div class="order-detail-divider" style="margin-top: 10px"></div>
|
|
<van-list
|
|
style="margin-top: 10px"
|
|
v-model="loading"
|
|
:finished="finished"
|
|
@load="onLoad"
|
|
>
|
|
<div class="order-detail-record-item" v-for="item in detail.blockList" :key="item.id">
|
|
<span>{{timestampToTime(item.created_at)}}</span>
|
|
<span class="order-detail-record-item-right">+{{item.rewards}} {{detail.enName}}</span>
|
|
</div>
|
|
</van-list>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getOrderDetail} from '@/api/order'
|
|
import 'v-charts/lib/style.css'
|
|
|
|
export default {
|
|
name: "OrderDetail",
|
|
data() {
|
|
this.extend = {
|
|
darkMode: "auto",
|
|
color: colorPalette,
|
|
title: {
|
|
show: false,
|
|
padding: 0,
|
|
height: 0,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
padding: 0,
|
|
height: 0,
|
|
},
|
|
series: {
|
|
type: "line",
|
|
smooth: false,
|
|
},
|
|
grid: {
|
|
top: 25,
|
|
bottom: 15,
|
|
show: false,
|
|
},
|
|
xAxis: {},
|
|
};
|
|
let colorPalette = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff', '#91ca8c', '#f49f42'];
|
|
return {
|
|
profit: "+12.3482 BTC",
|
|
detail: {
|
|
coinPackage: {},
|
|
profit: [],
|
|
},
|
|
list: [],
|
|
loading: false,
|
|
finished: false,
|
|
dataEmpty: true,
|
|
chartSettings: {
|
|
area: true,//是否显示为面积图
|
|
xAxisType: "category",
|
|
yAxisType: "value",
|
|
yAxisName: "",
|
|
boundaryGap: false,
|
|
lineStyle: {// 使用深浅的间隔色
|
|
color: ['#B9B8CE'],
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#100C2A',
|
|
color0: '#0CF49B',
|
|
borderColor: '#100C2A',
|
|
borderColor0: '#0CF49B'
|
|
}
|
|
}
|
|
},
|
|
chartData: {
|
|
columns: ["time", "hash"],
|
|
rows: [
|
|
{time: "12:00", hash: 1393},
|
|
{time: "12:30", hash: 3530},
|
|
{time: "12:40", hash: 2923},
|
|
{time: "12:50", hash: 3792},
|
|
{time: "13:00", hash: 4593}
|
|
]
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
// let params = this.$route.query.item
|
|
// window.console.log('submit', params);
|
|
// this.item = JSON.parse(params);
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
onClickLeft() {
|
|
this.$router.go(-1)
|
|
},
|
|
onClickRight() {
|
|
},
|
|
onLogin() {
|
|
this.$router.go(-1)
|
|
},
|
|
getLeaseStatus(status) {
|
|
if (status == "0") {
|
|
return "待进行";
|
|
} else if (status == "1") {
|
|
return "进行中";
|
|
} else if (status == "2") {
|
|
return "已完成";
|
|
}
|
|
return "暂无"
|
|
},
|
|
onLoad() {
|
|
const params = {
|
|
"orderSn": this.$route.query.orderSn
|
|
}
|
|
getOrderDetail(params).then(res => {
|
|
this.detail = res.data;
|
|
this.chartData.rows = res.data.hash
|
|
if (this.detail.hash.length > 0) {
|
|
this.dataEmpty = false;
|
|
}
|
|
})
|
|
this.loading = false;
|
|
this.finished = true;
|
|
},
|
|
timestampToTime(timestamp) {
|
|
var date = new Date(timestamp * 1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
|
|
var Y = date.getFullYear() + '-';
|
|
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
|
var D = date.getDate() + ' ';
|
|
var h = date.getHours() + ':';
|
|
var m = date.getMinutes() + ':';
|
|
var s = date.getSeconds();
|
|
return Y + M + D + h + m + s;
|
|
},
|
|
getLeaseTime(time) {
|
|
let date = new Date(time);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
|
|
let timestamp = date.getTime();
|
|
if (this.detail.leaseStatus == "0") {
|
|
return this.detail.duration;
|
|
} else if (this.detail.leaseStatus == "1") {
|
|
return timestamp - new Date().getTime()/1000;
|
|
}
|
|
return "0";
|
|
}
|
|
}
|
|
,
|
|
setup() {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.order-detail-content {
|
|
margin-right: 15px;
|
|
margin-left: 15px;
|
|
background: white;
|
|
}
|
|
|
|
.order-detail-top {
|
|
margin-top: 35px;
|
|
margin-left: 20px;
|
|
margin-bottom: 20px;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
/*flex 布局*/
|
|
display: flex;
|
|
/*实现垂直居中*/
|
|
align-items: center;
|
|
/*实现水平居中*/
|
|
justify-content: center;
|
|
}
|
|
|
|
.order-detail-top-item {
|
|
height: 30px;
|
|
margin-left: 20px;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.order-detail-title {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
margin-left: 20px;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
.order-detail-divider {
|
|
margin: 10px 20px;
|
|
background-color: #f2f2f2;
|
|
height: 1px;
|
|
clear: both;
|
|
|
|
}
|
|
|
|
|
|
.order-detail-record {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.order-detail-record-left {
|
|
float: left;
|
|
}
|
|
|
|
.order-detail-record-right {
|
|
float: right;
|
|
|
|
}
|
|
|
|
.order-detail-record-item {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
min-height: 30px;
|
|
line-height: 30px;
|
|
/*实现垂直居中*/
|
|
align-items: center;
|
|
}
|
|
|
|
.order-detail-record-item-right {
|
|
right: 0;
|
|
float: right;
|
|
}
|
|
|
|
.order-detail-item-title {
|
|
margin-top: 8px;
|
|
height: 30px;
|
|
text-align: center;
|
|
/*flex 布局*/
|
|
display: flex;
|
|
/*实现垂直居中*/
|
|
align-items: center;
|
|
clear: both;
|
|
|
|
}
|
|
|
|
|
|
.order-detail-item-title span {
|
|
margin-left: 5px;
|
|
margin-left: 20px;
|
|
|
|
font-weight: bold;
|
|
}
|
|
|
|
</style>
|
|
|