Mercurial > gemma
changeset 3592:a0964fd608ae
client: configuration: prepared UI for data quality thresholds configuration
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 04 Jun 2019 14:19:50 +0200 |
parents | 062dc9b54b86 |
children | e7726cc3bc56 |
files | client/src/components/systemconfiguration/DataAccuracy.vue |
diffstat | 1 files changed, 291 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/systemconfiguration/DataAccuracy.vue Tue Jun 04 14:19:50 2019 +0200 @@ -0,0 +1,291 @@ +<template> + <div class="d-flex flex-column mt-4 pt-4 border-top"> + <div class="d-flex flex-row justify-content-between"> + <h5><translate>Data Availability/Accuracy</translate></h5> + </div> + <div class="mt-1"> + <h6 class="font-weight-bold"> + <translate>Currency of Bottleneck Surveys</translate> + </h6> + + <div class="d-flex text-center"> + <div class="card rounded-left"> + <div class="card-header text-white bg-success">OK</div> + <div + class="card-body d-flex align-items-center justify-content-center" + > + Last survey within revisiting time. + </div> + </div> + <div class="card border-left-0 border-right-0 rounded-0"> + <div class="card-header text-white bg-warning rounded-0">Warning</div> + <div + class="card-body d-flex flex-column align-items-center justify-content-center" + > + <div>Last survey within revisiting time</div> + <div> + x + <input + type="number" + step="0.1" + min="1" + class="form-control form-control-sm d-inline" + style="width: 70px" + v-model="bn_revtime_multiplier" + /> + </div> + </div> + </div> + <div class="card rounded-right"> + <div class="card-header text-white bg-danger">Critical</div> + <div + class="card-body d-flex align-items-center justify-content-center" + > + <div> + Last survey older than revisiting time x + <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b> + </div> + </div> + </div> + </div> + + <h6 class="mt-4 font-weight-bold"> + <translate>Availability of Gauge Measurements</translate> + </h6> + + <div class="d-flex text-center"> + <div class="card rounded-left"> + <div class="card-header text-white bg-success">OK</div> + <div + class="card-body d-flex align-items-center justify-content-center" + > + <div> + Latest measurement not older than + <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours and at + least + <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b> + measurements in the last 14 days + </div> + </div> + </div> + <div class="card border-left-0 border-right-0 rounded-0"> + <div class="card-header text-white bg-warning rounded-0">Warning</div> + <div + class="card-body d-flex flex-column align-items-center justify-content-center" + > + <div>Minimum number of measurements in the last 14 days:</div> + <div> + <input + type="number" + step="1" + min="1" + class="form-control form-control-sm d-inline" + style="width: 90px" + v-model="gm_min_values_14d" + /> + </div> + </div> + </div> + <div class="card rounded-right"> + <div class="card-header text-white bg-danger">Critical</div> + + <div + class="card-body d-flex flex-column align-items-center justify-content-center" + > + <div>Latest measurement older than</div> + <div> + <input + type="number" + step="1" + min="1" + class="form-control form-control-sm d-inline" + style="width: 70px" + v-model="gm_latest_hours" + /> + hours + </div> + </div> + </div> + </div> + + <h6 class="mt-4 font-weight-bold"> + <translate>Gauge Forecast Confidence</translate> + </h6> + + <div class="d-flex text-center"> + <div class="card rounded-left"> + <div class="card-header text-white bg-success">OK</div> + <div + class="card-body d-flex align-items-center justify-content-center" + > + <div> + Confidence offset within last 24 hours less than + <b>{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b> + and within last 72 hours less than + <b>{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b> + </div> + </div> + </div> + <div class="card border-left-0 border-right-0 rounded-0"> + <div class="card-header text-white bg-warning rounded-0">Warning</div> + <div + class="card-body d-flex flex-column align-items-center justify-content-center" + > + <div>Confidence offset within last 24 hours greater than:</div> + <div> + <input + type="number" + step="1" + min="1" + class="form-control form-control-sm d-inline" + style="width: 70px" + v-model="gm_forecast_offset_24h" + /> + cm + </div> + </div> + </div> + <div class="card rounded-right"> + <div class="card-header text-white bg-danger">Critical</div> + + <div + class="card-body d-flex flex-column align-items-center justify-content-center" + > + <div>Confidence offset within last 72 hours greater than:</div> + <div> + <input + type="number" + step="1" + min="1" + class="form-control form-control-sm d-inline" + style="width: 70px" + v-model="gm_forecast_offset_72h" + /> + cm + </div> + </div> + </div> + </div> + + <h6 class="mt-4 font-weight-bold"> + <translate>Gauge Forecast vs. Reality</translate> + </h6> + + <div class="d-flex text-center"> + <div class="card rounded-left"> + <div class="card-header text-white bg-success">OK</div> + <div + class="card-body d-flex align-items-center justify-content-center" + > + <div> + Nash-Sutcliffe-Coefficient for last 24 hours greater than + <b>{{ + Number(gm_forecast_vs_reality_nsc_24h).toLocaleString() + }}</b> + and for last 72 hours greater than + <b + >{{ + Number(gm_forecast_vs_reality_nsc_72h).toLocaleString() + }} + cm</b + > + </div> + </div> + </div> + <div class="card border-left-0 border-right-0 rounded-0"> + <div class="card-header text-white bg-warning rounded-0">Warning</div> + <div + class="card-body d-flex flex-column align-items-center justify-content-center" + > + <div>Nash-Sutcliffe-Coefficient for last 24 hours less than:</div> + <div> + <input + type="number" + step="1" + class="form-control form-control-sm d-inline" + style="width: 70px" + v-model="gm_forecast_vs_reality_nsc_24h" + /> + </div> + </div> + </div> + <div class="card rounded-right"> + <div class="card-header text-white bg-danger">Critical</div> + + <div + class="card-body d-flex flex-column align-items-center justify-content-center" + > + <div>Nash-Sutcliffe-Coefficient for last 72 hours less than:</div> + <div> + <input + type="number" + step="1" + class="form-control form-control-sm d-inline" + style="width: 70px" + v-model="gm_forecast_vs_reality_nsc_72h" + /> + </div> + </div> + </div> + </div> + + <div class="mt-4"> + <a @click.prevent="submit" class="btn btn-info text-white"> + <translate>Send</translate> + </a> + </div> + </div> + </div> +</template> + +<style lang="sass" scoped> +.card + width: 33% +.rounded-left, +.rounded-left .card-header + border-top-right-radius: 0 + border-bottom-right-radius: 0 +.rounded-right +.rounded-right .card-header + border-top-left-radius: 0 + border-bottom-left-radius: 0 +.card-header + padding: 0.25rem +.card-body + padding: 0.5rem +</style> + +<script> +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Markus Kottländer <markus@intevation.de> + */ + +export default { + data() { + return { + bn_revtime_multiplier: 1.5, + gm_min_values_14d: 1124, + gm_latest_hours: 24, + gm_forecast_offset_24h: 15, + gm_forecast_offset_72h: 15, + gm_forecast_vs_reality_nsc_24h: -12.5, + gm_forecast_vs_reality_nsc_72h: -12.5 + }; + }, + methods: { + submit() { + console.log(this.bottleneck_surveys_revtime_multiplier); + } + } +}; +</script>