|
|
|
|
@ -33,7 +33,9 @@
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<el-form-item label="操作">
|
|
|
|
|
<el-button type="primary" @click="updateStats">更新统计</el-button>
|
|
|
|
|
<el-button type="primary" @click="updateStats" :loading="loading">
|
|
|
|
|
{{ loading ? '更新中...' : '更新统计' }}
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
@ -49,10 +51,10 @@
|
|
|
|
|
<i class="el-icon-document-add"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-value">156</div>
|
|
|
|
|
<div class="stat-change change-up">
|
|
|
|
|
<i class="el-icon-arrow-up"></i>
|
|
|
|
|
<span>+8.3% 较上期</span>
|
|
|
|
|
<div class="stat-value">{{ chartData.totalCount || 0 }}</div>
|
|
|
|
|
<div class="stat-change" :class="getChangeClass(chartData.publishChange)">
|
|
|
|
|
<i :class="getChangeIcon(chartData.publishChange)"></i>
|
|
|
|
|
<span>{{ formatChange(chartData.publishChange) }} 较上期</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -63,10 +65,10 @@
|
|
|
|
|
<i class="el-icon-message"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-value">1562</div>
|
|
|
|
|
<div class="stat-change change-up">
|
|
|
|
|
<i class="el-icon-arrow-up"></i>
|
|
|
|
|
<span>+15.7% 较上期</span>
|
|
|
|
|
<div class="stat-value">{{ chartData.messageCount || 0 }}</div>
|
|
|
|
|
<div class="stat-change" :class="getChangeClass(chartData.messageChange)">
|
|
|
|
|
<i :class="getChangeIcon(chartData.messageChange)"></i>
|
|
|
|
|
<span>{{ formatChange(chartData.messageChange) }} 较上期</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -77,10 +79,10 @@
|
|
|
|
|
<i class="el-icon-chat-dot-round"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-value">347</div>
|
|
|
|
|
<div class="stat-change change-up">
|
|
|
|
|
<i class="el-icon-arrow-up"></i>
|
|
|
|
|
<span>+12.5% 较上期</span>
|
|
|
|
|
<div class="stat-value">{{ chartData.interactionCount || 0 }}</div>
|
|
|
|
|
<div class="stat-change" :class="getChangeClass(chartData.interactionChange)">
|
|
|
|
|
<i :class="getChangeIcon(chartData.interactionChange)"></i>
|
|
|
|
|
<span>{{ formatChange(chartData.interactionChange) }} 较上期</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -91,19 +93,19 @@
|
|
|
|
|
供需交互明细
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-table">
|
|
|
|
|
<el-table :data="interactionList" style="width: 100%">
|
|
|
|
|
<el-table-column label="供需信息" width="300">
|
|
|
|
|
<el-table :data="interactionList" style="width: 100%" v-loading="tableLoading">
|
|
|
|
|
<el-table-column label="供需信息" min-width="200">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div style="max-width: 250px;">
|
|
|
|
|
<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>
|
|
|
|
|
<el-tag :type="scope.row.type === 'demand' ? 'warning' : 'success'" size="small">
|
|
|
|
|
{{ scope.row.type === 'demand' ? '需求' : '供应' }}
|
|
|
|
|
</el-tag>
|
|
|
|
|
<el-tag :type="scope.row.type === 'demand' ? 'warning' : 'success'" size="small">
|
|
|
|
|
{{ scope.row.type === 'demand' ? '需求' : '供应' }}
|
|
|
|
|
</el-tag>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="发布者" width="200">
|
|
|
|
|
<el-table-column label="发布者" min-width="150">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div class="user-info">
|
|
|
|
|
<div class="user-avatar">{{ scope.row.publisher.charAt(0) }}</div>
|
|
|
|
|
@ -114,14 +116,14 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="发布时间" width="120">
|
|
|
|
|
<el-table-column label="发布时间" min-width="120">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div style="font-size: 12px;">{{ scope.row.publishTime }}</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="交互记录" width="300">
|
|
|
|
|
<el-table-column label="交互记录" min-width="200">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div style="max-width: 280px;">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="interaction-detail">
|
|
|
|
|
<div v-for="(interaction, index) in scope.row.interactions" :key="index" style="margin-bottom: 8px;">
|
|
|
|
|
<span style="font-size: 12px;">{{ interaction.user }}({{ interaction.year }}届) · {{ interaction.time }}</span>
|
|
|
|
|
@ -130,7 +132,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="状态" width="100">
|
|
|
|
|
<el-table-column label="状态" min-width="100">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-tag :type="getStatusType(scope.row.status)" size="small">
|
|
|
|
|
{{ scope.row.statusText }}
|
|
|
|
|
@ -143,7 +145,7 @@
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
<div class="pagination-container">
|
|
|
|
|
<div class="pagination-info">
|
|
|
|
|
<span class="text-muted">显示 1-10 条,共 {{ totalCount }} 条记录</span>
|
|
|
|
|
<span class="text-muted">显示 {{ (currentPage - 1) * pageSize + 1 }}-{{ Math.min(currentPage * pageSize, totalCount) }} 条,共 {{ totalCount }} 条记录</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-pagination
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
@ -159,6 +161,8 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { supplyDemandChart } from '@/api/student'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'InteractionStats',
|
|
|
|
|
data() {
|
|
|
|
|
@ -169,70 +173,120 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
totalCount: 156,
|
|
|
|
|
interactionList: [
|
|
|
|
|
{
|
|
|
|
|
title: '寻找技术合作伙伴',
|
|
|
|
|
description: '互联网科技类企业合作,具备AI开发能力...',
|
|
|
|
|
type: 'demand',
|
|
|
|
|
publisher: '张总',
|
|
|
|
|
publisherInfo: '2010届 · 科技公司',
|
|
|
|
|
publishTime: '2024-01-10\n09:30',
|
|
|
|
|
interactions: [
|
|
|
|
|
{ user: '李经理', year: '2015届', time: '2024-01-12 14:30' },
|
|
|
|
|
{ user: '王顾问', year: '2008届', time: '2024-01-13 16:45' }
|
|
|
|
|
],
|
|
|
|
|
status: 'normal',
|
|
|
|
|
statusText: '正常'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '投融资咨询服务',
|
|
|
|
|
description: '提供企业投融资、财务咨询等专业服务...',
|
|
|
|
|
type: 'supply',
|
|
|
|
|
publisher: '赵总',
|
|
|
|
|
publisherInfo: '2012届 · 投资公司',
|
|
|
|
|
publishTime: '2024-01-08\n14:20',
|
|
|
|
|
interactions: [
|
|
|
|
|
{ user: '陈经理', year: '2018届', time: '2024-01-11 15:30' },
|
|
|
|
|
{ user: '孙总', year: '2005届', time: '2024-01-14 09:15' }
|
|
|
|
|
],
|
|
|
|
|
status: 'normal',
|
|
|
|
|
statusText: '正常'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '企业管理咨询',
|
|
|
|
|
description: '人力资源、组织架构、流程优化等管理咨询...',
|
|
|
|
|
type: 'supply',
|
|
|
|
|
publisher: '孙总',
|
|
|
|
|
publisherInfo: '2005届 · 咨询公司',
|
|
|
|
|
publishTime: '2024-01-05\n11:40',
|
|
|
|
|
interactions: [
|
|
|
|
|
{ user: '陈经理', year: '2018届', time: '2024-01-15 11:20' },
|
|
|
|
|
{ user: '刘总', year: '2013届', time: '2024-01-15 16:30' }
|
|
|
|
|
],
|
|
|
|
|
status: 'closed',
|
|
|
|
|
statusText: '已关闭'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
totalCount: 0,
|
|
|
|
|
loading: false,
|
|
|
|
|
tableLoading: false,
|
|
|
|
|
chartData: {
|
|
|
|
|
totalCount: 0,
|
|
|
|
|
messageCount: 0,
|
|
|
|
|
interactionCount: 0,
|
|
|
|
|
publishChange: 0,
|
|
|
|
|
messageChange: 0,
|
|
|
|
|
interactionChange: 0
|
|
|
|
|
},
|
|
|
|
|
interactionList: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.fetchChartData()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
updateStats() {
|
|
|
|
|
console.log('更新统计数据:', this.filter)
|
|
|
|
|
// 获取图表数据
|
|
|
|
|
async fetchChartData() {
|
|
|
|
|
try {
|
|
|
|
|
this.loading = true
|
|
|
|
|
const params = {
|
|
|
|
|
timeRange: this.filter.timeRange,
|
|
|
|
|
supplyType: this.filter.supplyType || undefined
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const response = await supplyDemandChart(params)
|
|
|
|
|
if (response) {
|
|
|
|
|
this.chartData = {
|
|
|
|
|
totalCount: response.supply_demand_count || 0,
|
|
|
|
|
messageCount: response.message_count || 0,
|
|
|
|
|
interactionCount: response.interaction_count || 0,
|
|
|
|
|
publishChange: response.supply_demand_growth_rate?.rate || 0,
|
|
|
|
|
messageChange: response.message_growth_rate?.rate || 0,
|
|
|
|
|
interactionChange: response.interaction_growth_rate?.rate || 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 更新总数
|
|
|
|
|
this.totalCount = response.supply_demand_count || 0
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取图表数据失败:', error)
|
|
|
|
|
this.$message.error('获取统计数据失败,请重试')
|
|
|
|
|
} finally {
|
|
|
|
|
this.loading = false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 更新统计数据
|
|
|
|
|
async updateStats() {
|
|
|
|
|
await this.fetchChartData()
|
|
|
|
|
this.$message.success('统计数据已更新')
|
|
|
|
|
},
|
|
|
|
|
handleCurrentChange(page) {
|
|
|
|
|
|
|
|
|
|
// 处理分页变化
|
|
|
|
|
async handleCurrentChange(page) {
|
|
|
|
|
this.currentPage = page
|
|
|
|
|
console.log('切换到第', page, '页')
|
|
|
|
|
// 这里调用API获取指定页面的数据
|
|
|
|
|
this.$message.info(`正在加载第 ${page} 页数据...`)
|
|
|
|
|
this.tableLoading = true
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// 这里可以调用分页API获取指定页面的数据
|
|
|
|
|
// 暂时使用现有数据,实际项目中应该调用分页接口
|
|
|
|
|
await this.fetchChartData()
|
|
|
|
|
this.$message.info(`已加载第 ${page} 页数据`)
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('加载分页数据失败:', error)
|
|
|
|
|
this.$message.error('加载数据失败')
|
|
|
|
|
} finally {
|
|
|
|
|
this.tableLoading = false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取状态类型
|
|
|
|
|
getStatusType(status) {
|
|
|
|
|
const statusMap = {
|
|
|
|
|
normal: 'success',
|
|
|
|
|
closed: 'info'
|
|
|
|
|
closed: 'info',
|
|
|
|
|
pending: 'warning',
|
|
|
|
|
rejected: 'danger'
|
|
|
|
|
}
|
|
|
|
|
return statusMap[status] || 'info'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取变化样式类
|
|
|
|
|
getChangeClass(change) {
|
|
|
|
|
if (change > 0) return 'change-up'
|
|
|
|
|
if (change < 0) return 'change-down'
|
|
|
|
|
return 'change-neutral'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取变化图标
|
|
|
|
|
getChangeIcon(change) {
|
|
|
|
|
if (change > 0) return 'el-icon-arrow-up'
|
|
|
|
|
if (change < 0) return 'el-icon-arrow-down'
|
|
|
|
|
return 'el-icon-minus'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 格式化变化数据
|
|
|
|
|
formatChange(change) {
|
|
|
|
|
if (change > 0) return `+${change.toFixed(1)}%`
|
|
|
|
|
if (change < 0) return `${change.toFixed(1)}%`
|
|
|
|
|
return '0.0%'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 监听筛选条件变化
|
|
|
|
|
watch: {
|
|
|
|
|
filter: {
|
|
|
|
|
handler() {
|
|
|
|
|
this.currentPage = 1
|
|
|
|
|
this.fetchChartData()
|
|
|
|
|
},
|
|
|
|
|
deep: true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -397,6 +451,19 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 表格自适应宽度
|
|
|
|
|
::v-deep .el-table {
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
|
|
|
|
|
.el-table__body-wrapper {
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-table__header-wrapper {
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-info {
|
|
|
|
|
|