InnoResCompMS/src/page/edu-industry/matching/index.vue

<template>
  <div class="matching-system-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/edu-industry' }">产教融合</el-breadcrumb-item>
            <el-breadcrumb-item>智能校企资源匹配系统</el-breadcrumb-item>
          </el-breadcrumb>
          <h1 class="page-title">
            <el-icon class="title-icon"><Connection /></el-icon>
            智能校企资源匹配系统
          </h1>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="handleNewMatching">
            <el-icon><Plus /></el-icon>
            新建匹配
          </el-button>
        </div>
      </div>
    </div>

    <!-- 功能导航标签 -->
    <div class="function-tabs">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="动态标签库管理" name="tags">
          <div class="tab-content">
            <!-- 标签库管理 -->
            <div class="tags-management">
              <el-row :gutter="24">
                <!-- 企业标签管理 -->
                <el-col :span="12">
                  <div class="tag-section">
                    <div class="section-header">
                      <h3>企业标签管理</h3>
                      <el-button type="primary" size="small" @click="handleAddEnterpriseTag">
                        <el-icon><Plus /></el-icon>
                        添加标签
                      </el-button>
                    </div>
                    <div class="tag-categories">
                      <div class="category-item">
                        <h4>技术领域</h4>
                        <div class="tag-list">
                          <el-tag
                            v-for="tag in enterpriseTags.technology"
                            :key="tag.id"
                            :type="tag.type"
                            closable
                            @close="handleRemoveTag('enterprise', 'technology', tag.id)"
                          >
                            {{ tag.name }}
                          </el-tag>
                        </div>
                      </div>
                      <div class="category-item">
                        <h4>设备类型</h4>
                        <div class="tag-list">
                          <el-tag
                            v-for="tag in enterpriseTags.equipment"
                            :key="tag.id"
                            type="success"
                            closable
                            @close="handleRemoveTag('enterprise', 'equipment', tag.id)"
                          >
                            {{ tag.name }}
                          </el-tag>
                        </div>
                      </div>
                      <div class="category-item">
                        <h4>合作历史</h4>
                        <div class="tag-list">
                          <el-tag
                            v-for="tag in enterpriseTags.cooperation"
                            :key="tag.id"
                            type="warning"
                            closable
                            @close="handleRemoveTag('enterprise', 'cooperation', tag.id)"
                          >
                            {{ tag.name }}
                          </el-tag>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>

                <!-- 院系标签管理 -->
                <el-col :span="12">
                  <div class="tag-section">
                    <div class="section-header">
                      <h3>院系标签管理</h3>
                      <el-button type="primary" size="small" @click="handleAddDepartmentTag">
                        <el-icon><Plus /></el-icon>
                        添加标签
                      </el-button>
                    </div>
                    <div class="tag-categories">
                      <div class="category-item">
                        <h4>专业方向</h4>
                        <div class="tag-list">
                          <el-tag
                            v-for="tag in departmentTags.major"
                            :key="tag.id"
                            type="info"
                            closable
                            @close="handleRemoveTag('department', 'major', tag.id)"
                          >
                            {{ tag.name }}
                          </el-tag>
                        </div>
                      </div>
                      <div class="category-item">
                        <h4>研究领域</h4>
                        <div class="tag-list">
                          <el-tag
                            v-for="tag in departmentTags.research"
                            :key="tag.id"
                            type="success"
                            closable
                            @close="handleRemoveTag('department', 'research', tag.id)"
                          >
                            {{ tag.name }}
                          </el-tag>
                        </div>
                      </div>
                      <div class="category-item">
                        <h4>师资力量</h4>
                        <div class="tag-list">
                          <el-tag
                            v-for="tag in departmentTags.faculty"
                            :key="tag.id"
                            type="danger"
                            closable
                            @close="handleRemoveTag('department', 'faculty', tag.id)"
                          >
                            {{ tag.name }}
                          </el-tag>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="AI算法推荐引擎" name="ai">
          <div class="tab-content">
            <!-- AI推荐引擎 -->
            <div class="ai-recommendation">
              <el-row :gutter="24">
                <!-- 推荐配置 -->
                <el-col :span="8">
                  <div class="recommendation-config">
                    <h3>推荐配置</h3>
                    <el-form :model="aiConfig" label-width="100px">
                      <el-form-item label="匹配算法">
                        <el-select v-model="aiConfig.algorithm" placeholder="选择算法">
                          <el-option label="余弦相似度" value="cosine" />
                          <el-option label="欧几里得距离" value="euclidean" />
                          <el-option label="皮尔逊相关" value="pearson" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="相似度阈值">
                        <el-slider v-model="aiConfig.threshold" :min="0" :max="1" :step="0.1" />
                      </el-form-item>
                      <el-form-item label="推荐数量">
                        <el-input-number v-model="aiConfig.count" :min="1" :max="20" />
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="handleRunRecommendation">
                          <el-icon><MagicStick /></el-icon>
                          运行推荐
                        </el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>

                <!-- 推荐结果 -->
                <el-col :span="16">
                  <div class="recommendation-results">
                    <h3>推荐结果</h3>
                    <div class="result-list">
                      <div
                        v-for="result in recommendationResults"
                        :key="result.id"
                        class="result-item"
                      >
                        <div class="result-header">
                          <div class="result-info">
                            <h4>{{ result.name }}</h4>
                            <p>{{ result.description }}</p>
                          </div>
                          <div class="result-score">
                            <el-progress
                              type="circle"
                              :percentage="Math.round(result.similarity * 100)"
                              :width="60"
                            />
                          </div>
                        </div>
                        <div class="result-tags">
                          <el-tag
                            v-for="tag in result.matchedTags"
                            :key="tag"
                            size="small"
                            type="success"
                          >
                            {{ tag }}
                          </el-tag>
                        </div>
                        <div class="result-actions">
                          <el-button size="small" @click="handleViewDetail(result)">查看详情</el-button>
                          <el-button size="small" type="primary" @click="handleInitiateCooperation(result)">
                            发起合作
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="热力图看板" name="heatmap">
          <div class="tab-content">
            <!-- 热力图看板 -->
            <div class="heatmap-dashboard">
              <div class="dashboard-controls">
                <el-row :gutter="16">
                  <el-col :span="6">
                    <el-select v-model="heatmapConfig.dimension" placeholder="选择维度">
                      <el-option label="技术领域" value="technology" />
                      <el-option label="地理位置" value="location" />
                      <el-option label="合作规模" value="scale" />
                    </el-select>
                  </el-col>
                  <el-col :span="6">
                    <el-date-picker
                      v-model="heatmapConfig.dateRange"
                      type="daterange"
                      placeholder="选择时间范围"
                    />
                  </el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="handleUpdateHeatmap">更新热力图</el-button>
                  </el-col>
                </el-row>
              </div>

              <div class="heatmap-container">
                <div class="heatmap-chart" ref="heatmapChart">
                  <!-- 这里将集成热力图组件 -->
                  <div class="chart-placeholder">
                    <el-icon class="chart-icon"><DataAnalysis /></el-icon>
                    <p>热力图数据可视化</p>
                    <p class="chart-desc">实时显示供需匹配度分布</p>
                  </div>
                </div>
              </div>

              <div class="heatmap-stats">
                <el-row :gutter="16">
                  <el-col :span="6">
                    <div class="stat-card">
                      <div class="stat-number">{{ heatmapStats.hotSpots }}</div>
                      <div class="stat-label">热点区域</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="stat-card">
                      <div class="stat-number">{{ heatmapStats.avgMatching }}%</div>
                      <div class="stat-label">平均匹配度</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="stat-card">
                      <div class="stat-number">{{ heatmapStats.activeEntities }}</div>
                      <div class="stat-label">活跃实体</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="stat-card">
                      <div class="stat-number">{{ heatmapStats.newConnections }}</div>
                      <div class="stat-label">新增连接</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  Connection,
  Plus,
  MagicStick,
  DataAnalysis
} from '@element-plus/icons-vue'

// 活动标签
const activeTab = ref('tags')

// 企业标签数据
const enterpriseTags = ref({
  technology: [
    { id: 1, name: '人工智能', type: 'primary' },
    { id: 2, name: '大数据', type: 'primary' },
    { id: 3, name: '云计算', type: 'primary' },
    { id: 4, name: '物联网', type: 'primary' }
  ],
  equipment: [
    { id: 1, name: '服务器集群', type: 'success' },
    { id: 2, name: '实验设备', type: 'success' },
    { id: 3, name: '测试平台', type: 'success' }
  ],
  cooperation: [
    { id: 1, name: '长期合作', type: 'warning' },
    { id: 2, name: '项目合作', type: 'warning' },
    { id: 3, name: '技术转让', type: 'warning' }
  ]
})

// 院系标签数据
const departmentTags = ref({
  major: [
    { id: 1, name: '计算机科学', type: 'info' },
    { id: 2, name: '软件工程', type: 'info' },
    { id: 3, name: '数据科学', type: 'info' }
  ],
  research: [
    { id: 1, name: '机器学习', type: 'success' },
    { id: 2, name: '数据挖掘', type: 'success' },
    { id: 3, name: '网络安全', type: 'success' }
  ],
  faculty: [
    { id: 1, name: '教授级', type: 'danger' },
    { id: 2, name: '副教授级', type: 'danger' },
    { id: 3, name: '博士导师', type: 'danger' }
  ]
})

// AI推荐配置
const aiConfig = ref({
  algorithm: 'cosine',
  threshold: 0.7,
  count: 10
})

// 推荐结果
const recommendationResults = ref([
  {
    id: 1,
    name: '华为技术有限公司',
    description: '全球领先的ICT基础设施和智能终端提供商',
    similarity: 0.92,
    matchedTags: ['人工智能', '云计算', '5G技术']
  },
  {
    id: 2,
    name: '阿里巴巴集团',
    description: '以电子商务为核心的数字经济体',
    similarity: 0.87,
    matchedTags: ['大数据', '云计算', '电子商务']
  },
  {
    id: 3,
    name: '腾讯科技',
    description: '中国领先的互联网增值服务提供商',
    similarity: 0.83,
    matchedTags: ['人工智能', '社交网络', '游戏技术']
  }
])

// 热力图配置
const heatmapConfig = ref({
  dimension: 'technology',
  dateRange: []
})

// 热力图统计数据
const heatmapStats = ref({
  hotSpots: 15,
  avgMatching: 78,
  activeEntities: 234,
  newConnections: 42
})

// 方法
const handleTabChange = (tabName: string) => {
  console.log('切换标签:', tabName)
}

const handleNewMatching = () => {
  console.log('新建匹配')
}

const handleAddEnterpriseTag = () => {
  console.log('添加企业标签')
}

const handleAddDepartmentTag = () => {
  console.log('添加院系标签')
}

const handleRemoveTag = (type: string, category: string, id: number) => {
  console.log('删除标签:', type, category, id)
}

const handleRunRecommendation = () => {
  console.log('运行AI推荐')
}

const handleViewDetail = (result: any) => {
  console.log('查看详情:', result)
}

const handleInitiateCooperation = (result: any) => {
  console.log('发起合作:', result)
}

const handleUpdateHeatmap = () => {
  console.log('更新热力图')
}

onMounted(() => {
  console.log('智能校企资源匹配系统已加载')
})
</script>

<style scoped>
.matching-system-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 8px 0 0 0;
}

.title-icon {
  margin-right: 8px;
  color: #667eea;
}

/* 功能标签 */
.function-tabs {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.tab-content {
  padding-top: 20px;
}

/* 标签管理 */
.tag-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  color: #2c3e50;
}

.category-item {
  margin-bottom: 20px;
}

.category-item h4 {
  margin: 0 0 12px 0;
  color: #5a6c7d;
  font-size: 14px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* AI推荐 */
.recommendation-config {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.recommendation-config h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.recommendation-results {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.recommendation-results h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.result-item {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.result-info h4 {
  margin: 0 0 4px 0;
  color: #2c3e50;
}

.result-info p {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.result-tags {
  margin-bottom: 12px;
}

.result-tags .el-tag {
  margin-right: 8px;
}

.result-actions {
  text-align: right;
}

/* 热力图 */
.heatmap-dashboard {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.dashboard-controls {
  margin-bottom: 20px;
}

.heatmap-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  min-height: 400px;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 360px;
  color: #7f8c8d;
}

.chart-icon {
  font-size: 64px;
  margin-bottom: 16px;
  color: #667eea;
}

.chart-desc {
  font-size: 14px;
  margin: 8px 0 0 0;
}

.heatmap-stats {
  display: flex;
  gap: 16px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
}
</style>