v1.2.0需求开发中
This commit is contained in:
@@ -349,12 +349,95 @@ export default {
|
||||
|
||||
],
|
||||
chartShow:true,
|
||||
tableData:[],
|
||||
tableData:[
|
||||
// {
|
||||
// "shouldOutDate":"2025-06-16T00:00:00",
|
||||
// "allocationAmount":"27366620.96662387",
|
||||
// "transferAmount":"27389920.96662387",
|
||||
// "address":"D7tviVPKtTd2qnkzJEVfZWQqzV6NyQqHxw",
|
||||
// "maxHeight":"100000",
|
||||
|
||||
// },
|
||||
// {
|
||||
// "shouldOutDate":"2025-06-16T00:00:00",
|
||||
// "allocationAmount":"",
|
||||
// "transferAmount":"920.96662387",
|
||||
// "address":"D7tviVPKtTd2qnkzJEVfZWQqzV6NyQqHxw",
|
||||
// "maxHeight":"100000",
|
||||
|
||||
// },
|
||||
// {
|
||||
// "shouldOutDate":"2025-06-16T00:00:00",
|
||||
// "allocationAmount":"2720.96662387",
|
||||
// "transferAmount":"920.96662387",
|
||||
// "address":"D7tviVPKtTd2qnkzJEVfZWQqzV6NyQqHxw",
|
||||
// "maxHeight":"100000",
|
||||
|
||||
// },
|
||||
// {
|
||||
// "shouldOutDate":"2025-06-17T00:00:00",
|
||||
// "allocationAmount":"273920.96662387",
|
||||
// "transferAmount":"273920.96662387",
|
||||
// "address":"D7tviVPKtTd2qnkzJEVfZWQqzV6NyQqHxw",
|
||||
// "maxHeight":"100000",
|
||||
|
||||
// },
|
||||
// {
|
||||
// "shouldOutDate":"2025-06-18T00:00:00",
|
||||
// "allocationAmount":"273920.96662387",
|
||||
// "transferAmount":"273920.96662387",
|
||||
// "address":"D7tviVPKtTd2qnkzJEVfZWQqzV6NyQqHxw",
|
||||
// "maxHeight":"100000",
|
||||
|
||||
// },
|
||||
// {
|
||||
// "shouldOutDate":"2025-06-19T00:00:00",
|
||||
// "allocationAmount":"273920.96662387",
|
||||
// "transferAmount":"273920.96662387",
|
||||
// "address":"D7tviVPKtTd2qnkzJEVfZWQqzV6NyQqHxw",
|
||||
// "maxHeight":"100000",
|
||||
|
||||
// },
|
||||
// {
|
||||
// "shouldOutDate":"2025-06-19T00:00:00",
|
||||
// "allocationAmount":"2720.96662387",
|
||||
// "transferAmount":"220.96662387",
|
||||
// "address":"D7tviVPKtTd2qnkzJEVfZWQqzV6NyQqHxw",
|
||||
// "maxHeight":"100000",
|
||||
|
||||
// },
|
||||
// {
|
||||
// "shouldOutDate":"2025-06-20T00:00:00",
|
||||
// "allocationAmount":"273920.96662387",
|
||||
// "transferAmount":"273920.96662387",
|
||||
// "address":"D7tviVPKtTd2qnkzJEVfZWQqzV6NyQqHxw",
|
||||
// "maxHeight":"100000",
|
||||
|
||||
// },
|
||||
// {
|
||||
// "shouldOutDate":"2025-06-21T00:00:00",
|
||||
// "allocationAmount":"273920.96662387",
|
||||
// "transferAmount":"273920.96662387",
|
||||
// "address":"D7tviVPKtTd2qnkzJEVfZWQqzV6NyQqHxw",
|
||||
// "maxHeight":"100000",
|
||||
|
||||
// },
|
||||
|
||||
|
||||
],
|
||||
historyBalance:[],
|
||||
mergeConfig: {}, // 存储合并配置
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
tableData: {
|
||||
handler() {
|
||||
this.calculateMergeConfig()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let token
|
||||
try{
|
||||
@@ -381,11 +464,23 @@ export default {
|
||||
// 等待两个图表相关接口都完成后再调用inCharts
|
||||
this.fetchChartData();
|
||||
}
|
||||
|
||||
|
||||
// this.calculateMergeConfig()
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 提取日期部分（去掉时间）
|
||||
* @param {string} dateTimeString - 完整的日期时间字符串
|
||||
* @returns {string} 日期部分
|
||||
*/
|
||||
extractDate(dateTimeString) {
|
||||
if (!dateTimeString) return ''
|
||||
return dateTimeString.split('T')[0]
|
||||
},
|
||||
|
||||
//初始化图表
|
||||
inCharts() {
|
||||
if (this.myChart == null) {
|
||||
@@ -427,7 +522,10 @@ export default {
|
||||
this.tableData = res.data.walletInInfo.sort((a, b) => new Date(b.createDate) - new Date(a.createDate));
|
||||
this.noDataTip = false
|
||||
}
|
||||
|
||||
// 🔥 在更新数据后重新计算合并配置
|
||||
this.$nextTick(() => {
|
||||
this.calculateMergeConfig()
|
||||
})
|
||||
|
||||
}
|
||||
this.setLoading('userDetailsLoading', false);
|
||||
@@ -534,8 +632,78 @@ export default {
|
||||
// 等待两个图表相关接口都完成后再调用inCharts
|
||||
this.fetchChartData();
|
||||
},
|
||||
handelTime(time){
|
||||
return time.split("T")[0] + " " + time.split("T")[1]
|
||||
|
||||
/**
|
||||
* 计算合并配置
|
||||
* 根据 shouldOutDate 的日期部分进行分组和合并
|
||||
*/
|
||||
calculateMergeConfig() {
|
||||
const dateGroups = {}
|
||||
const mergeConfig = {}
|
||||
|
||||
// 按日期分组
|
||||
this.tableData.forEach((row, index) => {
|
||||
const dateKey = this.extractDate(row.shouldOutDate)
|
||||
if (!dateGroups[dateKey]) {
|
||||
dateGroups[dateKey] = []
|
||||
}
|
||||
dateGroups[dateKey].push(index)
|
||||
})
|
||||
|
||||
// 计算每个日期组的合并信息
|
||||
Object.values(dateGroups).forEach(group => {
|
||||
if (group.length > 1) {
|
||||
// 第一行显示合并的单元格
|
||||
mergeConfig[group[0]] = {
|
||||
shouldOutDate: group.length, // 合并的行数
|
||||
}
|
||||
|
||||
// 其他行的日期列不显示
|
||||
for (let i = 1; i < group.length; i++) {
|
||||
mergeConfig[group[i]] = {
|
||||
shouldOutDate: 0, // 0表示不显示
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.mergeConfig = mergeConfig
|
||||
console.log('合并配置:', this.mergeConfig)
|
||||
},
|
||||
|
||||
/**
|
||||
* Element UI 表格合并单元格方法
|
||||
* @param {Object} param0 - 包含行索引、列索引等信息
|
||||
* @returns {Array} [rowspan, colspan] 合并配置
|
||||
*/
|
||||
handleSpanMethod({ rowIndex, columnIndex }) {
|
||||
// 列索引对应关系：
|
||||
// 0: shouldOutDate (日期列)
|
||||
// 1: allocationAmount
|
||||
// 2: transferAmount
|
||||
// 3: address
|
||||
// 4: maxHeight
|
||||
|
||||
// 只对日期列（索引为0）进行合并
|
||||
if (columnIndex === 0) {
|
||||
const config = this.mergeConfig[rowIndex]
|
||||
if (config && typeof config.shouldOutDate !== 'undefined') {
|
||||
return [config.shouldOutDate, 1] // [rowspan, colspan]
|
||||
}
|
||||
}
|
||||
|
||||
return [1, 1] // 默认不合并
|
||||
},
|
||||
/**
|
||||
* 处理时间显示（如果你还需要这个方法）
|
||||
* @param {string} dateTime - 日期时间字符串
|
||||
* @returns {string} 格式化后的日期
|
||||
*/
|
||||
handelTime(dateTime) {
|
||||
if (!dateTime) return ''
|
||||
return this.extractDate(dateTime)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@@ -136,27 +136,28 @@
|
||||
<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" >
|
||||
<!-- <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> -->
|
||||
<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 prop="coin" :label="$t('backendSystem.coin2')" width="100" show-overflow-tooltip>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="amount" :label="$t('backendSystem.transactionAmount')" width="200" show-overflow-tooltip/>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="allocationAmount" :label="$t('backendSystem.allocationAmount')" width="200" show-overflow-tooltip/>
|
||||
<el-table-column prop="transferAmount" :label="$t('backendSystem.transferAmount')" width="200" show-overflow-tooltip/>
|
||||
|
||||
<el-table-column prop="user" :label="$t('backendSystem.minerUser2')" width="180" 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 />
|
||||
@@ -332,6 +333,8 @@ export default {
|
||||
padding:1% 5%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
@@ -340,4 +343,29 @@ export default {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user