372 lines
10 KiB
Vue
372 lines
10 KiB
Vue
<template>
|
||
<div v-loading="userDetailsLoading">
|
||
<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
|
||
>
|
||
</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> -->
|
||
|
||
<div class="time-box">
|
||
<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>
|
||
|
||
<div>{{$t('backendSystem.walletBalance')}}：{{ userData.accountBalance || 0 }}</div>
|
||
</div>
|
||
|
||
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
:span-method="handleSpanMethod"
|
||
: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" :resizable="false" 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="allocationAmount" :label="$t('backendSystem.allocationAmount')" :resizable="false" width="200" show-overflow-tooltip/>
|
||
<el-table-column prop="transferAmount" :label="$t('backendSystem.transferAmount')" :resizable="false" 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')" :resizable="false" show-overflow-tooltip />
|
||
|
||
<el-table-column prop="maxHeight" :label="$t('backendSystem.maxHeight')" :resizable="false" 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>
|
||
|
||
<script>
|
||
import Index from "./index";
|
||
export default {
|
||
mixins: [Index],
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main-title {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
|
||
color: #333;
|
||
margin-bottom: 18px;
|
||
}
|
||
.user-details-box {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
margin-bottom: 20px;
|
||
height: 73vh;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
|
||
// background: palegoldenrod;
|
||
}
|
||
.time-box{
|
||
display: flex;
|
||
// background: palegoldenrod;
|
||
justify-content: space-between;
|
||
// align-items: center;
|
||
// padding: 0 20px;
|
||
margin-bottom: 10px;
|
||
padding-right: 20px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.user-details-form {
|
||
width: 80%;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
margin-bottom: 20px;
|
||
// background: palegoldenrod;
|
||
}
|
||
|
||
.no-data-tip {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
font-size: 16px;
|
||
color: #999;
|
||
text-align: center;
|
||
margin-top: 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);
|
||
/* 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; /* 字间距 */
|
||
/* 你可以根据需要添加更多样式 */
|
||
}
|
||
|
||
.chartBox {
|
||
width: 80vw;
|
||
box-sizing: border-box;
|
||
// background: palegoldenrod;
|
||
|
||
|
||
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;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 18px;
|
||
padding:1% 5%;
|
||
}
|
||
|
||
|
||
|
||
</style>
|
||
|
||
<style>
|
||
.el-date-editor .el-range-separator {
|
||
padding: 0 !important;
|
||
color: #333 !important;
|
||
|
||
}
|
||
|
||
/* 合并单元格样式优化 */
|
||
::v-deep .el-table td {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* 日期列样式 */
|
||
::v-deep .el-table .cell {
|
||
padding: 0 12px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* 合并后的日期单元格突出显示 */
|
||
::v-deep .el-table tbody tr:hover > td {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
/* 表格边框优化 */
|
||
::v-deep .el-table--border td {
|
||
border-right: 1px solid #ebeef5;
|
||
}
|
||
|
||
::v-deep .el-table--border th {
|
||
border-right: 1px solid #ebeef5;
|
||
}
|
||
</style>
|