lizixuan/m2pool_web_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

1.1需求完成

Browse Source
This commit is contained in:
yaoqin
2025-07-04 13:46:11 +08:00
parent 62260e8483
commit c6f765f858
52 changed files with 1993 additions and 1012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
mining-pool/src/views/userDetails/index.vue
View File

@@ -1,87 +1,216 @@
<template>
<div v-loading="userDetailsLoading">
<div class="main-title">用户详情 <span @click="goBack" style="color: #409EFF;cursor: pointer;font-size: 16px;">返回</span> </div>
<section class="user-details-box">
<section class="user-details-form">
<el-form
:label-position="labelPosition"
:inline="true"
:model="userData"
class="demo-form-inline"
<div class="main-title">
{{$t('backendSystem.userDetails')}}
<span
@click="goBack"
style="color: #409eff; cursor: pointer; font-size: 16px;margin-left: 10px;"
>{{$t('backendSystem.return')}}</span
>
<el-row>
<el-col :span="8">
<el-form-item style="width: 80%;" label="币种:" label-width="100px" prop="coin">
<el-input disabled v-model="userData.coin"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="width: 80%;" label="挖矿账户:" label-width="100px" prop="user">
<el-input disabled v-model="userData.user"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="width: 80%;" label="交易金额:" label-width="100px" prop="amount">
<el-input disabled v-model="userData.amount"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item
label="收益分配日期:"
label-width="100px"
prop="createDate"
style="width: 80%;"
>
<el-input disabled v-model="userData.createDate"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="width: 80%;" label="最大高度:" label-width="100px" prop="maxHeight">
<el-input disabled v-model="userData.maxHeight"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item style="width: 80%;" label="实际转账日期:" label-width="100px" prop="shouldOutDate">
<el-input disabled v-model="userData.shouldOutDate"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item style="width: 55%;" label="转账地址:" label-width="100px" prop="address">
<el-input
disabled v-model="userData.address"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item style="width: 55%; max-height: 300px;overflow-y: auto;" label="历史支付地址:" label-width="100px" prop="address">
<p class="history-balance-item" v-for="item in userData.historyBalance" :key="item.balance">{{item.balance}}</p>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section>
<section class="chartBox">
<div class="lineChartBox">用户挖矿曲线图</div>
<div class="barChartBox">柱状图</div>
</section>
</section>
</div>
<section class="user-details-box">
<!-- <section class="user-details-form">
<el-form
:label-position="labelPosition"
:inline="true"
:model="userData"
class="demo-form-inline"
>
<el-row>
<el-col :span="8">
<el-form-item
style="width: 80%"
:label="$t('backendSystem.coin')"
label-width="100px"
prop="coin"
>
<el-input disabled v-model="userData.coin"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
style="width: 80%"
:label="$t('backendSystem.user')"
label-width="100px"
prop="user"
>
<el-input disabled v-model="userData.user"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
style="width: 80%"
:label="$t('backendSystem.amount')"
label-width="100px"
prop="amount"
>
<el-input disabled v-model="userData.amount"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item
:label="$t('backendSystem.createDate')"
label-width="100px"
prop="createDate"
style="width: 80%"
>
<el-input disabled v-model="userData.createDate"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
style="width: 80%"
:label="$t('backendSystem.maxHeight')"
label-width="100px"
prop="maxHeight"
>
<el-input disabled v-model="userData.maxHeight"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
style="width: 80%"
:label="$t('backendSystem.shouldOutDate')"
label-width="100px"
prop="shouldOutDate"
>
<el-input disabled v-model="userData.shouldOutDate"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
style="width: 55%"
:label="$t('backendSystem.address')"
label-width="100px"
prop="address"
>
<el-input disabled v-model="userData.address"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
style="width: 55%; max-height: 300px; overflow-y: auto"
:label="$t('backendSystem.historyAddress')"
label-width="100px"
prop="address"
>
<p
class="history-balance-item"
v-for="item in userData.historyBalance"
:key="item.balance"
>
{{ item.balance }}
</p>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section> -->
<el-date-picker
v-model="lineChatTimes"
type="daterange"
:range-separator="$t('backendSystem.to')"
:start-placeholder="$t('backendSystem.startDate')"
:end-placeholder="$t('backendSystem.endDate')"
@change="handleLineChatTimesChange"
value-format="yyyy-MM-dd HH:mm:ss"
size="small"
style="margin-bottom: 18px;"
>
</el-date-picker>
<el-table
:data="tableData"
border
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
height="42vh"
>
<el-table-column prop="createDate" :label="$t('backendSystem.createDate')" width="160" >
<template slot-scope="scope">
<span>{{ handelTime(scope.row.createDate ) }}</span>
</template>
</el-table-column>
<el-table-column prop="shouldOutDate" :label="$t('backendSystem.shouldOutDate')" width="180" show-overflow-tooltip >
<template slot-scope="scope">
<span>{{ handelTime(scope.row.shouldOutDate ) }}</span>
</template>
</el-table-column>
<el-table-column prop="coin" :label="$t('backendSystem.coin2')" width="100" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="amount" :label="$t('backendSystem.amount2')" width="200" show-overflow-tooltip/>
<el-table-column prop="user" :label="$t('backendSystem.minerUser2')" width="180" show-overflow-tooltip/>
<el-table-column prop="address" :label="$t('backendSystem.address')" show-overflow-tooltip />
<el-table-column prop="maxHeight" :label="$t('backendSystem.maxHeight')" width="180" show-overflow-tooltip />
</el-table>
<section class="chartBox">
<div class="lineChartBox">
<div class="lineChartBox-header">
<div class="lineChartBox-title">{{$t('backendSystem.chartTitle')}}</div>
<!-- <el-date-picker
v-model="lineChatTimes"
type="daterange"
:range-separator="$t('backendSystem.to')"
:start-placeholder="$t('backendSystem.startDate')"
:end-placeholder="$t('backendSystem.endDate')"
@change="handleLineChatTimesChange"
value-format="yyyy-MM-dd HH:mm:ss"
size="small"
:disabled="!chartShow"
>
</el-date-picker> -->
</div>
<div
class="lineChartBox-content"
style="width: 100%; height: 500px; margin-top: 35px;"
>
<div v-if="!chartShow" style="text-align: center;margin-top: 200px;color: #ccc;">{{$t('backendSystem.noData')}}</div>
<div v-else v-loading="lineChartLoading" id="lineChart" style="width: 100%; height: 100%"></div>
</div>
</div>
</section>
<el-row>
<el-col :span="24">
<div
style="width: 100%; max-height: 300px; overflow-y: auto;"
>
<h3 style="margin-bottom: 20px;">{{$t('backendSystem.historyAddress')}}</h3>
<p
class="history-balance-item"
v-for="item in historyBalance"
:key="item.balance"
>
{{ item.balance }}
</p>
</div>
</el-col>
</el-row>
</section>
</div>
</template>
@@ -100,7 +229,7 @@ export default {
color: #333;
margin-bottom: 18px;
}
.user-details-box{
.user-details-box {
width: 100%;
margin: 0 auto;
box-sizing: border-box;
@@ -124,55 +253,76 @@ export default {
// background: palegoldenrod;
}
.no-data-tip{
.no-data-tip {
width: 80%;
margin: 0 auto;
font-size: 16px;
color: #999;
text-align: center;
margin-top: 20px;
}
.history-balance-item{
margin: 0;
padding: 0;
background:#E7DFF3 ;
padding: 0px 20px;
.history-balance-item {
display: inline-block; /* 让宽度随内容自适应 */
background: #e7dff3;
padding: 8px 20px;
border-radius: 20px;
margin-bottom: 10px;
color: rgba(0,0,0,0.6);
color: rgba(0, 0, 0, 0.6);
/* width: auto; 其实可以省略，inline-block默认就是auto */
/* 防止flex布局下被拉伸 */
flex: none;
align-self: flex-start;
margin-left: 10px;
}
::v-deep .el-form-item__label {
// color: #409EFF; /* 例如设置为 Element UI 主色 */
font-weight: bold; /* 加粗 */
font-size: 16px; /* 字号 */
letter-spacing: 1px; /* 字间距 */
font-weight: bold; /* 加粗 */
font-size: 16px; /* 字号 */
letter-spacing: 1px; /* 字间距 */
/* 你可以根据需要添加更多样式 */
}
.chartBox{
.chartBox {
width: 80vw;
box-sizing: border-box;
// background: palegoldenrod;
height: 800px;
padding: 0;
margin: 30px 0;
}
.lineChartBox {
width: 97%;
height: 80%;
box-sizing: border-box;
box-shadow: 0px 0px 1px 1px #ccc;
padding: 20px;
border-radius: 10px;
}
.lineChartBox-title {
font-size: 16px;
font-weight: bold;
color: rgba(0, 0, 0, 0.6);
margin-bottom: 20px;
}
.lineChartBox-header{
display: flex;
align-content: center;
justify-content: space-around;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
padding:1% 5%;
}
.lineChartBox{
width: 49%;
height: 100%;
background: palegoldenrod;
</style>
<style>
.el-date-editor .el-range-separator {
padding: 0 !important;
color: #333 !important;
}
.barChartBox{
width: 49%;
height: 100%;
background: pink;
}
</style>
</style>