106 lines
3.5 KiB
HTML
106 lines
3.5 KiB
HTML
<div
|
|
class="screen"
|
|
[class.alert-on]="alertLevel === 'orange'"
|
|
[class.alert-red]="alertLevel === 'red'"
|
|
>
|
|
<div class="left">
|
|
<div class="chart-container" id="chartContainer">
|
|
<div id="stationInfoTitle" class="station-info-title">{{ selectedTitle }}</div>
|
|
<div class="chart-wrapper">
|
|
<chart-panel [history]="history" [forecast]="forecast" [legendMode]="legendMode"></chart-panel>
|
|
</div>
|
|
</div>
|
|
<div class="map-container" id="mapContainer">
|
|
<div id="map"></div>
|
|
<div
|
|
id="tileValueTooltip"
|
|
class="map-tooltip"
|
|
style="position:absolute;pointer-events:none;z-index:1003;display:none;background:rgba(0,0,0,0.65);color:#fff;font-size:12px;padding:4px 6px;border-radius:4px;"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="controls">
|
|
<label for="stationInput">站点:</label>
|
|
<input
|
|
id="stationInput"
|
|
type="text"
|
|
placeholder=""
|
|
[(ngModel)]="hexId"
|
|
style="width:7.5rem;"
|
|
/>
|
|
|
|
<label for="interval">粒度:</label>
|
|
<select id="interval" [(ngModel)]="interval">
|
|
<option value="raw">原始(16s)</option>
|
|
<option value="10min">10分钟</option>
|
|
<option value="30min">30分钟</option>
|
|
<option value="1hour">1小时</option>
|
|
</select>
|
|
|
|
<label for="forecastProvider">预报源:</label>
|
|
<select id="forecastProvider" [(ngModel)]="provider">
|
|
<option value="">不显示预报</option>
|
|
<option value="imdroid_mix">V4</option>
|
|
<option value="open-meteo">V3</option>
|
|
<option value="caiyun">V2</option>
|
|
<option value="imdroid">V1</option>
|
|
</select>
|
|
|
|
<label for="startDate">开始:</label>
|
|
<input type="datetime-local" id="startDate" [(ngModel)]="start" />
|
|
|
|
<label for="endDate">结束:</label>
|
|
<input type="datetime-local" id="endDate" [(ngModel)]="end" />
|
|
|
|
<button type="button" (click)="query()">查询</button>
|
|
|
|
<label for="tileProduct">叠加:</label>
|
|
<select id="tileProduct" [(ngModel)]="tileProduct" (change)="onProductChange()">
|
|
<option value="none">不显示</option>
|
|
<option value="rain">1h 实际降雨</option>
|
|
<option value="radar">水汽含量</option>
|
|
</select>
|
|
|
|
<button type="button" (click)="prevTile()">上一时次</button>
|
|
<span id="tileCountInfo">{{ tileCountInfo }}</span>
|
|
<button type="button" (click)="nextTile()">下一时次</button>
|
|
|
|
<label for="tileTimeSelect">时间:</label>
|
|
<select
|
|
id="tileTimeSelect"
|
|
style="min-width:12rem"
|
|
[(ngModel)]="tileDt"
|
|
(ngModelChange)="renderTilesAt($event)"
|
|
>
|
|
<option [ngValue]="''">请选择时间</option>
|
|
<option *ngFor="let t of tileTimes" [ngValue]="t">{{ t }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div
|
|
id="summaryPanel"
|
|
class="summary-panel"
|
|
[class.alert-on]="alertLevel === 'orange'"
|
|
[class.alert-red]="alertLevel === 'red'"
|
|
>
|
|
<div id="futureRainSummary" class="summary-title">{{ futureRainText }}</div>
|
|
<div id="pastAccuracySummary" class="summary-sub">{{ pastAccuracyText }}</div>
|
|
</div>
|
|
|
|
<div class="table-container" id="tableContainer">
|
|
<div class="table-scroll">
|
|
<table-panel
|
|
[history]="history"
|
|
[forecast]="forecast"
|
|
[showPastForecast]="false"
|
|
[endDate]="end"></table-panel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loading-overlay" *ngIf="isLoading">
|
|
<div class="spinner"></div>
|
|
</div>
|