1.1需求完成
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { getUserDetails,getUserLineChart,getUserOnlineStatus } from '../../api/userManagement'
|
||||
|
||||
import * as echarts from "echarts";
|
||||
import { Debounce, throttle } from "../../utils/publicMethods";
|
||||
export default {
|
||||
name: 'UserDetails',
|
||||
data() {
|
||||
@@ -34,30 +35,341 @@ export default {
|
||||
userDetailsParams:{
|
||||
coin: '',
|
||||
minerUser: '',
|
||||
startDate:"",
|
||||
endDate:"",
|
||||
|
||||
},
|
||||
labelPosition: 'top',
|
||||
noDataTip: false,
|
||||
lineChartParams:{
|
||||
user: '',
|
||||
minerUser: '',
|
||||
endDate:"",
|
||||
startDate:"",
|
||||
coin:"",
|
||||
|
||||
},
|
||||
onlineStatusParams:{
|
||||
user: '',
|
||||
coin: '',
|
||||
datePoint:"",
|
||||
}
|
||||
minerUser: '',
|
||||
coin: '',
|
||||
endDate:"",
|
||||
startDate:"",
|
||||
},
|
||||
onlineStatusData:[
|
||||
|
||||
{
|
||||
"date":"2024-11-28T11:00:00",
|
||||
"offlineNum": 148,
|
||||
"onlineNum": 15
|
||||
},
|
||||
{
|
||||
"date":"2025-06-27 17:00:00",
|
||||
"offlineNum": 110,
|
||||
"onlineNum": 156
|
||||
},
|
||||
{
|
||||
"date":"2025-06-27 17:30:00",
|
||||
"offlineNum": 90,
|
||||
"onlineNum": 152
|
||||
},
|
||||
{
|
||||
"date":"2025-06-27 18:00:00",
|
||||
"offlineNum": 70,
|
||||
"onlineNum": 152
|
||||
},
|
||||
{
|
||||
"date":"2025-06-27 18:00:00",
|
||||
"offlineNum": 70,
|
||||
"onlineNum": 152
|
||||
},
|
||||
{
|
||||
"date":"2025-06-27 18:00:00",
|
||||
"offlineNum": 70,
|
||||
"onlineNum": 152
|
||||
},
|
||||
{
|
||||
"date":"2025-06-27 18:00:00",
|
||||
"offlineNum": 70,
|
||||
"onlineNum": 152
|
||||
},
|
||||
],
|
||||
lineChatTimes:[],
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
//解决tooltip显示不全问题1
|
||||
confine: true,
|
||||
|
||||
// formatter: function (params) {
|
||||
// var res
|
||||
// res = params[0].axisValueLabel;
|
||||
|
||||
|
||||
// for (let i = 0; i <= params.length - 1; i++) {
|
||||
|
||||
// if (params[i].seriesName == "Currency Price" || params[i].seriesName == "币价") {
|
||||
// res += `</br>${params[i].marker} ${params[i].seriesName}      <span style="font-weight: bold">${params[i].value} USD</span>`
|
||||
// } else {
|
||||
// res += `</br>${params[i].marker} ${params[i].seriesName}      <span style="font-weight: bold">${params[i].value}</span>`
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// return res;
|
||||
// },
|
||||
|
||||
},
|
||||
legend: {
|
||||
right: "8%",
|
||||
|
||||
},
|
||||
// grid: {//解决Y轴显示不全
|
||||
// left: "10%",//10%
|
||||
// containLabel: true
|
||||
// },
|
||||
grid: {
|
||||
left: "8%",
|
||||
right: "8%",
|
||||
top: "10%",
|
||||
bottom: "15%", // 增加底部空间，为旋转的X轴标签和滑动条留出空间
|
||||
},
|
||||
|
||||
|
||||
xAxis: {
|
||||
// type: "time",
|
||||
boundaryGap: true, // 让柱子不超出X轴
|
||||
axisLabel: {
|
||||
interval: 'auto', // 自动间隔显示标签，避免重叠
|
||||
rotate: 45, // 旋转45度，避免标签重叠
|
||||
formatter: function(value) {
|
||||
// 格式化显示，只显示月-日 时:分
|
||||
if (value.includes(' ')) {
|
||||
const [date, time] = value.split(' ');
|
||||
const [year, month, day] = date.split('-');
|
||||
const [hour, minute] = time.split(':');
|
||||
return `${month}-${day} ${hour}:${minute}`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
},
|
||||
// axisTick: {
|
||||
// //去除刻度
|
||||
// show: false,
|
||||
// },
|
||||
// axisLine: {
|
||||
// //去除轴线
|
||||
// show: false,
|
||||
// },
|
||||
data: []
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
// position: "left",
|
||||
type: "value",
|
||||
name: "GH/s",
|
||||
nameTextStyle: {
|
||||
|
||||
padding: [0, 0, 0, -40],
|
||||
},
|
||||
// min: `dataMin`,
|
||||
// max: `dataMax`,
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
// let data
|
||||
// if (value > 10000000) {
|
||||
// data = `${(value / 10000000)} KW`
|
||||
// } else if (value > 1000000) {
|
||||
// data = `${(value / 1000000)} M`
|
||||
// } else if (value / 10000) {
|
||||
// data = `${(value / 10000)} W`
|
||||
// }
|
||||
return value
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
position: "right",
|
||||
// type: "log",
|
||||
// splitNumber: "5",
|
||||
show: true,
|
||||
// min: 0,
|
||||
// max: this.maxValue,
|
||||
splitLine: {//不显示右侧Y轴横线
|
||||
show: false
|
||||
},
|
||||
// name: "",
|
||||
nameTextStyle: {
|
||||
|
||||
padding: [0, 0, 0, 40],
|
||||
}
|
||||
},
|
||||
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 50, // 默认显示后30%的数据，避免图表过于拥挤
|
||||
end: 100,
|
||||
maxSpan: 100,
|
||||
minSpan: 2, // 最小显示5%的数据
|
||||
animation: false,
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
start: 50,
|
||||
end: 100,
|
||||
height: 20, // 滑动条高度
|
||||
bottom: 0, // 滑动条位置
|
||||
showDetail: false, // 不显示详细数值
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
||||
{//在线数量
|
||||
name: "Number of users online",
|
||||
type: "bar",
|
||||
data: [],
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: '#239342', // 这里设置柱子的主色为绿色
|
||||
|
||||
},
|
||||
barWidth: '40%', // 使用百分比宽度，保持适当的柱子宽度
|
||||
barGap: '10%', // 同类型柱子间的间隔
|
||||
barCategoryGap: '20%', // 类目间的间隔
|
||||
|
||||
},
|
||||
{
|
||||
name: "Number of offline users",
|
||||
type: "bar",
|
||||
// smooth: false, //线条是否圆滑
|
||||
// symbol: "circle",
|
||||
// symbolSize: 5,
|
||||
// showSymbol: false,
|
||||
itemStyle: {
|
||||
color: "#FE2E74",
|
||||
borderColor: "rgba(221,220,107,0.1)",
|
||||
|
||||
},
|
||||
barWidth: '40%', // 使用百分比宽度，保持适当的柱子宽度
|
||||
barGap: '10%', // 同类型柱子间的间隔
|
||||
barCategoryGap: '20%', // 类目间的间隔
|
||||
|
||||
data: [],
|
||||
yAxisIndex: 1,
|
||||
|
||||
},
|
||||
{
|
||||
name: "User computing power",
|
||||
type: "line",
|
||||
smooth: false, //线条是否圆滑
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: "#5721E4",
|
||||
borderColor: "rgba(221,220,107,0.1)",
|
||||
borderWidth: 12,
|
||||
},
|
||||
lineStyle: {
|
||||
//线条样式
|
||||
color: "#5721E4",
|
||||
width: "2",
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: 'rgb(210,195,234)'
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'rgb(255, 255, 255)'
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
zlevel: 1, z: 1,
|
||||
data: [],
|
||||
yAxisIndex: 0,
|
||||
},
|
||||
|
||||
|
||||
|
||||
],
|
||||
},
|
||||
lineChartLoading:false,
|
||||
lineChartData:[
|
||||
|
||||
{
|
||||
"minerUser": "miner",
|
||||
"pv": "8.00080",
|
||||
"date": "2024-11-28T11:00:00",
|
||||
"unit":"GH/s"
|
||||
},
|
||||
{
|
||||
"minerUser": "miner",
|
||||
"pv": "6.00060",
|
||||
"date": "2024-11-28T11:30:00",
|
||||
"unit":"GH/s"
|
||||
},
|
||||
{
|
||||
"minerUser": "miner",
|
||||
"pv": "0.05000",
|
||||
"date": "2024-11-28T12:00:00",
|
||||
"unit":"GH/s"
|
||||
},
|
||||
{
|
||||
"minerUser": "miner",
|
||||
"pv": "2.0000",
|
||||
"date": "2024-11-28T12:30:00",
|
||||
"unit":"GH/s"
|
||||
},
|
||||
{
|
||||
"minerUser": "miner",
|
||||
"pv": "0.3000",
|
||||
"date": "2024-11-28T13:00:00",
|
||||
"unit":"GH/s"
|
||||
},
|
||||
{
|
||||
"minerUser": "miner",
|
||||
"pv": "0.9000",
|
||||
"date": "2024-11-28T13:30:00",
|
||||
"unit":"GH/s"
|
||||
},
|
||||
{
|
||||
"minerUser": "miner",
|
||||
"pv": "15.0000",
|
||||
"date": "2024-11-28T14:00:00",
|
||||
"unit":"GH/s"
|
||||
},
|
||||
|
||||
|
||||
|
||||
],
|
||||
chartShow:true,
|
||||
tableData:[],
|
||||
historyBalance:[],
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log('userDetails mounted', this.$route.path, this.$route.query)
|
||||
let token
|
||||
try{
|
||||
token =JSON.parse(localStorage.getItem('token'))
|
||||
}catch(e){
|
||||
console.log(e);
|
||||
}
|
||||
if (!token) {
|
||||
this.$router.push({ path: `/${lang}/login` });
|
||||
|
||||
}
|
||||
const params= this.$route.query || JSON.parse(localStorage.getItem("userDetailsParams"));
|
||||
this.lineChartParams.user=params.user
|
||||
this.lineChartParams.minerUser=params.minerUser
|
||||
this.lineChartParams.coin=params.coin
|
||||
this.onlineStatusParams.user=params.user
|
||||
this.onlineStatusParams.minerUser=params.minerUser
|
||||
this.onlineStatusParams.coin=params.coin
|
||||
this.userDetailsParams.coin=params.coin
|
||||
this.userDetailsParams.minerUser=params.minerUser
|
||||
@@ -66,42 +378,132 @@ export default {
|
||||
localStorage.setItem("userDetailsParams", JSON.stringify(params));
|
||||
|
||||
this.fetchUserDetails(this.userDetailsParams);
|
||||
this.fetchUserLineChart(this.lineChartParams);
|
||||
this.fetchUserOnlineStatus(this.onlineStatusParams);
|
||||
// 等待两个图表相关接口都完成后再调用inCharts
|
||||
this.fetchChartData();
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
//初始化图表
|
||||
inCharts() {
|
||||
if (this.myChart == null) {
|
||||
this.myChart = echarts.init(document.getElementById("lineChart"));
|
||||
}
|
||||
|
||||
|
||||
this.option.series[0].name = this.$t(`backendSystem.onlineUserNum`)
|
||||
this.option.series[1].name = this.$t(`backendSystem.offlineUserNum`)
|
||||
this.option.series[2].name = this.$t(`backendSystem.userPower`)
|
||||
|
||||
this.myChart.setOption(this.option);
|
||||
// 回调函数，在渲染完成后执行
|
||||
this.myChart.on('finished', () => {
|
||||
// 图表渲染完成
|
||||
console.log('图表渲染完成');
|
||||
});
|
||||
|
||||
window.addEventListener('resize', throttle(() => {
|
||||
if (this.myChart) this.myChart.resize();
|
||||
}, 200));
|
||||
},
|
||||
async fetchUserDetails(params) {
|
||||
this.userDetailsLoading = true
|
||||
// 这里写你的获取详情逻辑
|
||||
this.setLoading('userDetailsLoading', true);
|
||||
// 获取用户详情逻辑
|
||||
const res = await getUserDetails(params)
|
||||
console.log(res)
|
||||
|
||||
if(res && res.code == 200){
|
||||
if (!res.data) {
|
||||
// this.$message.error('未获取到用户信息');
|
||||
this.noDataTip = true
|
||||
this.userData.coin = this.userDetailsParams.coin
|
||||
this.userData.user = this.userDetailsParams.minerUser
|
||||
// this.userData.coin = this.userDetailsParams.coin
|
||||
// this.userData.user = this.userDetailsParams.minerUser
|
||||
}else{
|
||||
this.userData = res.data
|
||||
this.userData.shouldOutDate=`${this.userData.shouldOutDate.split("T")[0]} ${this.userData.shouldOutDate.split("T")[1]}`
|
||||
this.userData.createDate=`${this.userData.createDate.split("T")[0]} ${this.userData.createDate.split("T")[1]}`
|
||||
|
||||
// this.userData.shouldOutDate=`${this.userData.shouldOutDate.split("T")[0]} ${this.userData.shouldOutDate.split("T")[1]}`
|
||||
// this.userData.createDate=`${this.userData.createDate.split("T")[0]} ${this.userData.createDate.split("T")[1]}`
|
||||
this.historyBalance=res.data.historyBalance
|
||||
this.tableData = res.data.walletInInfo.sort((a, b) => new Date(b.createDate) - new Date(a.createDate));
|
||||
this.noDataTip = false
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
this.userDetailsLoading = false
|
||||
this.setLoading('userDetailsLoading', false);
|
||||
},
|
||||
async fetchUserLineChart(params) {
|
||||
const res = await getUserLineChart(params)
|
||||
console.log(res)
|
||||
let xData = []
|
||||
let pvData = []
|
||||
if(res && res.code == 200){
|
||||
|
||||
if (!Array.isArray(res.data) || res.data.length === 0 || !res.data[0].unit) {
|
||||
this.chartShow = false
|
||||
return;
|
||||
}
|
||||
this.chartShow = true
|
||||
this.lineChartData = res.data
|
||||
this.lineChartData.forEach(item => {
|
||||
item.date = item.date.split("T")[0] + " " + item.date.split("T")[1].split(".")[0]
|
||||
xData.push(item.date)
|
||||
pvData.push(Number(item.pv).toFixed(6))
|
||||
})
|
||||
|
||||
this.option.xAxis.data = xData
|
||||
this.option.series[2].data = pvData
|
||||
this.option.yAxis[0].name = this.lineChartData[0].unit
|
||||
// this.inCharts()
|
||||
}
|
||||
},
|
||||
async fetchUserOnlineStatus(params) {
|
||||
const res = await getUserOnlineStatus(params)
|
||||
console.log(res)
|
||||
// let xData = []
|
||||
let offlineNum = []
|
||||
let onlineNum = []
|
||||
if(res && res.code == 200){
|
||||
if (!Array.isArray(res.data) || res.data.length === 0 ) {
|
||||
this.chartShow = false
|
||||
return;
|
||||
}
|
||||
this.chartShow = true
|
||||
this.onlineStatusData = res.data
|
||||
|
||||
this.onlineStatusData.forEach(item => {
|
||||
offlineNum.push(item.offlineNum)
|
||||
onlineNum.push(item.onlineNum)
|
||||
})
|
||||
this.option.series[0].data = onlineNum
|
||||
this.option.series[1].data = offlineNum
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取图表数据 - 等待两个接口都完成后再渲染图表
|
||||
*/
|
||||
async fetchChartData() {
|
||||
try {
|
||||
this.setLoading('lineChartLoading', true);
|
||||
|
||||
// 并行调用两个接口，等待都完成
|
||||
await Promise.all([
|
||||
this.fetchUserLineChart(this.lineChartParams),
|
||||
this.fetchUserOnlineStatus(this.onlineStatusParams)
|
||||
]);
|
||||
|
||||
// 两个接口都完成后，检查是否有数据再渲染图表
|
||||
if (this.chartShow) {
|
||||
this.inCharts();
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取图表数据失败:', error);
|
||||
} finally {
|
||||
this.setLoading('lineChartLoading', false);
|
||||
}
|
||||
},
|
||||
goBack(){
|
||||
const lang = this.$i18n.locale;
|
||||
@@ -109,5 +511,31 @@ export default {
|
||||
path: `/${lang}/userManagement`,
|
||||
})
|
||||
},
|
||||
|
||||
handleLineChatTimesChange(val){
|
||||
console.log(val,'val');
|
||||
if(val){
|
||||
this.lineChartParams.startDate=val[0]
|
||||
this.lineChartParams.endDate=val[1]
|
||||
this.onlineStatusParams.startDate=val[0]
|
||||
this.onlineStatusParams.endDate=val[1]
|
||||
this.userDetailsParams.startDate=val[0]
|
||||
this.userDetailsParams.endDate=val[1]
|
||||
|
||||
}else{
|
||||
this.lineChartParams.startDate=""
|
||||
this.lineChartParams.endDate=""
|
||||
this.onlineStatusParams.startDate=""
|
||||
this.onlineStatusParams.endDate=""
|
||||
this.userDetailsParams.startDate=""
|
||||
this.userDetailsParams.endDate=""
|
||||
}
|
||||
this.fetchUserDetails(this.userDetailsParams);
|
||||
// 等待两个图表相关接口都完成后再调用inCharts
|
||||
this.fetchChartData();
|
||||
},
|
||||
handelTime(time){
|
||||
return time.split("T")[0] + " " + time.split("T")[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user