完成交互明细统计接口集成

dev
linyongLynn 4 months ago
parent 825236b76e
commit ba744d3d1d

@ -94,40 +94,43 @@
</div> </div>
<div class="data-table"> <div class="data-table">
<el-table :data="interactionList" style="width: 100%" v-loading="tableLoading"> <el-table :data="interactionList" style="width: 100%" v-loading="tableLoading">
<el-table-column label="供需信息" min-width="200"> <el-table-column label="供需信息" min-width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<div> <div>
<div style="font-weight: 600; font-size: 14px; margin-bottom: 5px;">{{ scope.row.title }}</div> <div style="font-weight: 600; font-size: 14px; margin-bottom: 5px;">{{ scope.row.title || '-' }}</div>
<div style="font-size: 12px; color: #666; margin-bottom: 5px;">{{ scope.row.description }}</div> <div style="font-size: 12px; color: #666; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" :title="scope.row.content || '-'">{{ scope.row.content || '-' }}</div>
<el-tag :type="scope.row.type === 'demand' ? 'warning' : 'success'" size="small"> <el-tag :type="getTypeTagType(scope.row.type)" size="small">
{{ scope.row.type === 'demand' ? '需求' : '供应' }} {{ getTypeDisplayValue(scope.row.type) }}
</el-tag> </el-tag>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="发布者" min-width="150"> <el-table-column label="发布者" min-width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="user-info"> <div class="user-info">
<div class="user-avatar">{{ scope.row.publisher.charAt(0) }}</div> <div class="user-avatar">{{ scope.row.publisher ? scope.row.publisher.charAt(0) : '-' }}</div>
<div> <div>
<div style="font-weight: 600; font-size: 14px;">{{ scope.row.publisher }}</div> <div style="font-weight: 600; font-size: 14px;">{{ scope.row.publisher || '-' }}</div>
<div style="font-size: 12px; color: #666;">{{ scope.row.publisherInfo }}</div> <div style="font-size: 12px; color: #666;">{{ scope.row.publisherInfo || '-' }}</div>
</div> </div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="发布时间" min-width="120"> <el-table-column label="发布时间" min-width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div style="font-size: 12px;">{{ scope.row.publishTime }}</div> <div style="font-size: 12px;">{{ scope.row.created_at || '-' }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="交互记录" min-width="200"> <el-table-column label="交互记录" min-width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<div> <div>
<div class="interaction-detail"> <div class="interaction-detail">
<div v-for="(interaction, index) in scope.row.interactions" :key="index" style="margin-bottom: 8px;"> <div v-if="scope.row.messages && scope.row.messages.length > 0">
<span style="font-size: 12px;">{{ interaction.user }}({{ interaction.year }}) · {{ interaction.time }}</span> <div v-for="(message, index) in scope.row.messages" :key="index" style="margin-bottom: 8px;">
<span style="font-size: 12px;">{{ message.to_user.name || '-' }}({{ message.to_user.year || '-' }}) · {{ formatDateTime(message.created_at) || '-' }}</span>
</div>
</div> </div>
<div v-else style="color: #999; font-size: 12px;">暂无交互记录</div>
</div> </div>
</div> </div>
</template> </template>
@ -135,7 +138,7 @@
<el-table-column label="状态" min-width="100"> <el-table-column label="状态" min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="getStatusType(scope.row.status)" size="small"> <el-tag :type="getStatusType(scope.row.status)" size="small">
{{ scope.row.statusText }} {{ getStatusText(scope.row.status) }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
@ -195,9 +198,22 @@ export default {
async fetchChartData() { async fetchChartData() {
try { try {
this.loading = true this.loading = true
// timeRange
const endDate = new Date()
const startDate = new Date()
startDate.setDate(endDate.getDate() - this.filter.timeRange)
const params = { const params = {
timeRange: this.filter.timeRange, start_date: startDate.toISOString().split('T')[0], // YYYY-MM-DD
supplyType: this.filter.supplyType || undefined end_date: endDate.toISOString().split('T')[0], // YYYY-MM-DD
page_size: this.pageSize,
page: this.currentPage
}
const type = this.getTypeValue(this.filter.supplyType)
if (type !== undefined) {
params.type = type
} }
const response = await supplyDemandChart(params) const response = await supplyDemandChart(params)
@ -211,8 +227,20 @@ export default {
interactionChange: response.interaction_growth_rate?.rate || 0 interactionChange: response.interaction_growth_rate?.rate || 0
} }
// //
this.totalCount = response.supply_demand_count || 0 if (response.list && response.list.data) {
this.interactionList = response.list.data
}
console.log(this.interactionList)
//
if (response.list) {
this.totalCount = response.list.total || 0
this.currentPage = response.list.current_page || 1
this.pageSize = response.list.per_page || 10
} else {
// list使
this.totalCount = response.supply_demand_count || 0
}
} }
} catch (error) { } catch (error) {
console.error('获取图表数据失败:', error) console.error('获取图表数据失败:', error)
@ -249,14 +277,27 @@ export default {
// //
getStatusType(status) { getStatusType(status) {
const statusMap = { const statusMap = {
normal: 'success', 0: 'warning', //
closed: 'info', 1: 'success', //
pending: 'warning', 2: 'danger', //
rejected: 'danger' 3: 'info', // 退
4: 'info' //
} }
return statusMap[status] || 'info' return statusMap[status] || 'info'
}, },
//
getStatusText(status) {
const statusMap = {
0: '待审核',
1: '通过',
2: '拒绝',
3: '退回修改',
4: '永久隐藏'
}
return statusMap[status] || '未知状态'
},
// //
getChangeClass(change) { getChangeClass(change) {
if (change > 0) return 'change-up' if (change > 0) return 'change-up'
@ -276,6 +317,62 @@ export default {
if (change > 0) return `+${change.toFixed(1)}%` if (change > 0) return `+${change.toFixed(1)}%`
if (change < 0) return `${change.toFixed(1)}%` if (change < 0) return `${change.toFixed(1)}%`
return '0.0%' return '0.0%'
},
//
getTypeValue(supplyType) {
if (supplyType === 'supply') return 1
if (supplyType === 'demand') return 2
return undefined // type
},
//
getTypeDisplayValue(type) {
if (type === 'demand' || type === 2) return '需求'
if (type === 'supply' || type === 1) return '供应'
return '未知'
},
//
getTypeTagType(type) {
if (type === 'demand' || type === 2) return 'warning'
if (type === 'supply' || type === 1) return 'success'
return 'info'
},
//
formatDateTime(dateTime) {
if (!dateTime) return '-'
try {
// Date
let date
if (typeof dateTime === 'number') {
date = new Date(dateTime * 1000) //
} else if (typeof dateTime === 'string') {
date = new Date(dateTime)
} else {
date = dateTime
}
//
if (isNaN(date.getTime())) {
console.warn('Invalid date:', dateTime)
return '-'
}
//
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}`
} catch (error) {
console.error('格式化日期时间失败:', error, dateTime)
return '-'
}
} }
}, },

Loading…
Cancel
Save