pipeline-lifetime/templates/home.html

{% extends "base.html" %}

{% set active_page = "home" %}
{% block title %}主页 | 供水管道健康评估系统{% endblock %}

{% block content %}
<div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
  <div>
    <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">管道健康状态与剩余寿命评估</h1>
    <p class="mt-2 max-w-3xl text-sm leading-6 text-textSub">上传标准数据文件，系统将生成管道的剩余寿命分析图、健康等级摘要、剩余寿命判断和电子表格预测报告。</p>
  </div>
  <a href="{{ url_for('main.download_template') }}" class="ui-btn ui-btn-secondary text-primary" data-download-action data-download-pending="下载中...">
    <span class="material-symbols-outlined text-lg">download</span>
    下载数据模板
  </a>
</div>

<div id="mainGrid" class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
  <section id="uploadPanel" class="order-1 flex h-[460px] flex-col rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:col-start-1 lg:row-start-1">
      <div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 class="text-xl font-extrabold">上传分析文件</h2>
          <p class="mt-1 text-sm text-textSub">支持电子表格（.xlsx/.xls）和逗号分隔值文件（.csv），字段名需与模板一致。</p>
        </div>
        <span class="inline-flex w-fit items-center gap-2 rounded-full bg-blueSoft px-3 py-1 text-xs font-bold text-primary">
          <span class="material-symbols-outlined text-base">verified</span>
          标准化输入
        </span>
      </div>

      <form id="predictForm" action="{{ url_for('main.predict') }}" method="post" enctype="multipart/form-data" novalidate class="flex flex-1 flex-col gap-5">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <label id="dropZone" class="flex min-h-0 flex-1 cursor-pointer flex-col justify-center rounded-lg border-2 border-dashed border-outline bg-slate-50 px-5 py-8 text-center transition hover:border-primary hover:bg-blue-50/50">
          <input id="fileInput" name="file" type="file" accept=".csv,.xls,.xlsx" class="absolute h-px w-px opacity-0">
          <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-white text-primary shadow-panel">
            <span class="material-symbols-outlined text-3xl">cloud_upload</span>
          </span>
          <span class="mt-4 block text-lg font-extrabold">拖放文件到此处，或点击选择</span>
          <span class="mt-1 block text-sm text-textSub">单次上传一个数据文件</span>
          <span id="selectedFileName" class="hidden mt-3 text-sm font-bold text-primary"></span>
        </label>

        <div class="flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <p class="text-xs text-textSub">预测结果会在本页生成摘要，并可进入结果页查看完整报告。</p>
          <button id="submitBtn" class="ui-btn ui-btn-primary min-w-[150px]" type="submit">
            <span id="submitText">分析并预测</span>
            <span id="submitIcon" class="material-symbols-outlined text-lg">analytics</span>
          </button>
        </div>
      </form>
  </section>

  <section id="inlineResult" class="order-3 h-[520px] overflow-hidden rounded-lg border border-line bg-white p-5 shadow-panel sm:p-6 lg:col-start-1 lg:row-start-2">
      <div id="resultPlaceholder" class="flex h-full min-h-0 flex-col">
        <div>
          <h2 class="text-xl font-extrabold">最新预测结果</h2>
          <p class="mt-1 text-sm text-textSub">上传并分析文件后，这里会显示预测图表与报告入口。</p>
        </div>
        <div class="mt-5 flex min-h-0 flex-1 flex-col items-center justify-center rounded-md border border-dashed border-outline bg-slate-50 px-5 text-center">
          <span class="material-symbols-outlined text-4xl text-primary">monitoring</span>
          <div class="mt-3 text-sm font-bold text-textMain">暂无预测结果</div>
          <div class="mt-1 text-xs leading-5 text-textSub">完成一次分析后，将生成管道的剩余寿命分析图、摘要和电子表格报告。</div>
        </div>
      </div>

      <div id="resultContent" class="hidden h-full min-h-0 flex-col">
        <div class="mb-5 flex shrink-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div>
            <h2 class="text-xl font-extrabold">最新预测结果</h2>
            <p class="mt-1 text-sm text-textSub">已生成图表与电子表格结果文件。</p>
          </div>
          <div class="flex flex-wrap gap-2">
            <a id="resultPageBtn" href="{{ url_for('main.result_page') }}" class="ui-btn ui-btn-sm ui-btn-secondary">
              <span class="material-symbols-outlined text-lg">monitoring</span>
              查看结果页
            </a>
            <a id="excelBtn" href="#" class="ui-btn ui-btn-sm ui-btn-primary" data-download-action data-download-pending="下载中...">
              <span class="material-symbols-outlined text-lg">download</span>
              下载结果表
            </a>
          </div>
        </div>

        <div class="min-h-0 flex-1 overflow-hidden">
          <div class="flex h-full min-h-0 flex-col rounded-md border border-line bg-slate-50 p-3">
            <div class="mb-2 shrink-0 text-xs font-bold text-textSub">管道的剩余寿命分析图</div>
            <div class="min-h-0 flex-1 overflow-hidden rounded bg-white">
              <img id="resultImage" src="" alt="预测图" class="h-full w-full object-contain">
            </div>
          </div>
        </div>
      </div>
  </section>

  <section id="requirementsPanel" class="order-2 h-[460px] rounded-lg border border-line bg-white p-5 shadow-panel lg:col-start-2 lg:row-start-1">
      <h2 class="flex items-center gap-2 text-lg font-extrabold">
        <span class="material-symbols-outlined text-primary">rule</span>
        数据要求
      </h2>
      <p class="mt-2 text-sm leading-6 text-textSub">为确保准确的生存分析，请确保数据类型严格遵循模板。</p>
      <div class="mt-5 space-y-3 text-sm">
        <div class="rounded-md border border-line bg-slate-50 p-3">
          <div class="text-xs font-bold text-primary">必填基础信息</div>
          <div class="mt-1 font-semibold">管道编号、管龄、管材、管径</div>
        </div>
        <div class="rounded-md border border-line bg-slate-50 p-3">
          <div class="text-xs font-bold text-slate-500">选填历史信息</div>
          <div class="mt-1 font-semibold">流速、压力、温度、降雨量、位置</div>
        </div>
        <div class="rounded-md border border-line bg-slate-50 p-3">
          <div class="text-xs font-bold text-slate-500">选填内壁特征</div>
          <div class="mt-1 font-semibold">结构缺陷、功能缺陷</div>
        </div>
        <div class="rounded-md border border-line bg-slate-50 p-3">
          <div class="text-xs font-bold text-slate-500">字段格式</div>
          <div class="mt-1 font-semibold">字段名需与模板完全一致</div>
        </div>
      </div>
  </section>

  <section class="order-4 h-[520px] rounded-lg border border-line bg-white p-5 shadow-panel lg:col-start-2 lg:row-start-2">
      <h2 class="flex items-center gap-2 text-lg font-extrabold">
        <span class="material-symbols-outlined text-primary">quick_reference</span>
        快速入口
      </h2>
      <div class="mt-4 grid gap-3">
        <a href="{{ url_for('main.result_page') }}" class="ui-action-row">
          <span class="flex items-center gap-2"><span class="material-symbols-outlined text-lg">monitoring</span>结果页</span>
          <span class="material-symbols-outlined text-lg">chevron_right</span>
        </a>
        <a href="{{ url_for('main.history_page') }}" class="ui-action-row">
          <span class="flex items-center gap-2"><span class="material-symbols-outlined text-lg">history</span>预测历史</span>
          <span class="material-symbols-outlined text-lg">chevron_right</span>
        </a>
        <a href="{{ url_for('main.reference_page') }}" class="ui-action-row">
          <span class="flex items-center gap-2"><span class="material-symbols-outlined text-lg">picture_as_pdf</span>技术导则</span>
          <span class="material-symbols-outlined text-lg">chevron_right</span>
        </a>
      </div>
  </section>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/dashboard.js') }}?v=20260706-alert"></script>
{% endblock %}