<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title >大学生创新创业竞赛年度统计</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="../fetchReq.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="js/echarts.min.js"></script>
</head>

<body>
<div id="app">
  <div class="logo">
    <div style="display: flex;align-items: center">
<!--      <div>-->
<!--        <img style="width: 70px" src="./images/logo_1.png" alt="">-->
<!--      </div>-->
<!--      <div>-->
<!--        <img style="width: 180px;margin-left: 15px" src="./images/logo_2.png" alt="">-->
<!--      </div>-->
<!--      <div style="font-size: 26px;color: #fff;margin-left: 15px">-->
<!--        创新创业学院-->
<!--      </div>-->
    </div>
  </div>
  <!-- 标题区域 -->
  <div class="header">
    <div class="header-particles"></div>
    <div class="title" onclick="goNext()">大学生创新创业竞赛年度统计</div>
  </div>
  <div class="container">

    <!-- 左列上部 -->
    <div class="left-top">
      <div class="title_bg">各级别获奖占比</div>
      <div class="chart-container">
        <div id="trendChart" style="width: 100%; height: 250px;"></div>
      </div>
    </div>

    <!-- 左列下部 -->
    <div class="left-bottom">
      <div class="panel-content2">
        <div class="title_bg">国家与省赛获奖数量</div>
        <div style="margin-top: 40px;height: 90%;display: flex;flex-direction: column">
          <div style="height: 100%">
            <div id="materialChart" class="chart-container2"></div>
          </div>
          <div style="height: 100%">
            <div class="title_bg2">各年级获奖学生数</div>
            <div id="barChart" class="chart-container2"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间列 -->
    <div class="middle">

      <div class="panel-content2">
        <div class="mid_top"></div>
        <div class="total">2024年情况统计</div>
        <div class="data-display" style="display: flex;justify-content: space-around">
          <!-- 左侧事件总数 -->
          <div class="total-events">
            <canvas id="totalEventsParticles"></canvas>
            <div class="total-number">{{statistics.itemNum}}项</div>
            <div class="total-label">参与项目</div>
          </div>
          <div class="total-events">
            <canvas id="totalEventsParticles"></canvas>
            <div class="total-number">{{statistics.awardNum}}项</div>
            <div class="total-label">获奖项目</div>
          </div>
          <div class="total-events">
            <canvas id="totalEventsParticles"></canvas>
            <div class="total-number">{{statistics.compNum}}项</div>
            <div class="total-label">举办竞赛</div>
          </div>
        </div>
        <div class="mid_bottom">
          <div class="title_bg2">国赛、省赛获奖人数</div>
          <div class="chart-container4">
            <div id="reportingChart" style="width: 100%; height:300px;"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右列上部 -->

    <div class="right-top">

      <div class="panel-content">
        <div class="title_bg3">近几年参与学生人数与人次</div>
        <div class="progress-container">
          <div class="progress-item" v-for="(item,index) in matchStudentNun" :key="index">
            <span class="progress-label">{{ item.year }}</span>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: `${item.percent}%` }"></div>
            </div>
            <span class="progress-value">{{ item.studentNum }}人次</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 右列下部 -->
    <div class="right-bottom">
      <div class="panel-content">
        <div class="title_bg">优秀项目展示</div>
        <div class="table-container">
          <table class="status-table">
            <thead>
            <tr>
              <th>项目名称</th>
            </tr>
            </thead>
            <tbody id="statusTableBody">
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>
    <script src="js/app.js"></script>
    <script src="js/main.js"></script>
</body>

</html>
