<!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="styles.css">
  <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> -->
  <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="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
  </div>

  <div class="dashboard">
    <!-- Header -->
    <header class="header">
      <div class="header-left">
      </div>
      <h1 class="header-title" onclick="goNext()">大学生创新创业训练计划项目</h1>
      <div class="header-right">
      </div>
      <h2 class="header-center">2024年大创数据统计</h2>
    </header>

    <!-- Left Column -->
    <div class="left-column">
      <!-- 事件类型统计 -->
      <div class="widget">
        <div class="widget-titles">成果数据</div>
        <div class="data-grid">
          <div class="data-row">
            <div class="data-item">
              <img src="images/icon1.png" alt="国家级" class="data-icon">
              <div class="data-content">
                <div class="data-title">国家级</div>
                <div class="data-value"><span class="number">{{ appData.project.nationalLevel }}</span><span>项</span>
                </div>
              </div>

            </div>
            <div class="data-item">
              <img src="images/icon2.png" alt="网格内办线" class="data-icon">
              <div class="data-content">
                <div class="data-title">省级</div>
                <div class="data-value"><span class="number">{{ appData.project.provincialLevel }}</span><span>项</span></div>
              </div>
            </div>

          </div>
          <div class="data-row">
            <div class="data-item">
              <img src="images/icon3.png" alt="社区办结" class="data-icon">
              <div class="data-content">
                <div class="data-title">校级</div>
                <div class="data-value"><span class="number">{{ appData.project.schoolLevel }}</span><span>项</span></div>
              </div>
            </div>
            <div class="data-item">
              <img src="images/icon4.png" alt="街道办结" class="data-icon">
              <div class="data-content">
                <div class="data-title">创新训练</div>
                <div class="data-value"><span class="number">{{ appData.project.typeOne }}</span><span>项</span></div>
              </div>
            </div>

          </div>
          <div class="data-row">
            <div class="data-item">
              <img src="images/icon5.png" alt="区级办结" class="data-icon">
              <div class="data-content">
                <div class="data-title">创业训练</div>
                <div class="data-value"><span class="number">{{ appData.project.typeTwo }}</span><span>项</span></div>
              </div>
            </div>
            <div class="data-item">
              <img src="images/icon6.png" alt="领导批示" class="data-icon">
              <div class="data-content">
                <div class="data-title">创业实践</div>
                <div class="data-value"><span class="number">{{ appData.project.typeThree }}</span><span>项</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 事件紧急程度 -->
      <div class="widget">
        <div class="widget-titles">各级别项目占比</div>
        <div id="urgencyChart" style="width: 100%; height: 230px;"></div>
      </div>

      <!-- 评价情况 -->

    </div>

    <!-- Center Column -->
    <div class="center-column">
      <!-- 数据展示-->
      <div class="mid-widget">
        <div class="data-display" style="display: flex;justify-content: space-around">
          <!-- 左侧事件总数 -->
          <div class="total-events">
            <canvas id="totalEventsParticles"></canvas>
            <div class="total-number">{{ appData.project.projectTotal }}</div>
            <div class="total-label">项目总数</div>
          </div>
          <div class="total-events">
            <canvas id="totalEventsParticles"></canvas>
            <div class="total-number">{{ appData.project.studentTotal }}</div>
            <div class="total-label">参与学生总人数</div>
          </div>

        </div>
      </div>

      <!-- 最近七日上报趋势 -->
      <div class="mid-widget2">
        <div class="widget-title">近几年大创项目报名数量</div>
        <div class="chart-container">
          <div id="reportingCharts" style="width: 100%; height: 250px;"></div>
        </div>
      </div>

      <!-- 事件上报情况 -->
      <div class="mid-widget2">
        <div class="widget-title">24年大创各学院参与人数</div>
        <div class="chart-container">
          <div id="reportingChart" style="width: 100%; height:300px;"></div>
        </div>
      </div>


    </div>

    <!-- Right Column -->
    <div class="right-column">
      <!-- 日志得分 -->

      <!-- 事件得分 -->
      <div class="widget">
        <div class="widget-titles">获奖数据</div>

        <div id="trendChart" style="width: 100%; height: 250px;"></div>
      </div>

      <div class="widget">
        <div class="widget-titles">24年优秀大创项目</div>

        <div class="table-container">
          <table class="status-table">
            <tbody id="statusTableBody">
            </tbody>
          </table>
        </div>
      </div>

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



