Mercurial > gemma

comparison client/src/components/systemconfiguration/DataAccuracy.vue @ 3592:a0964fd608ae

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
children d4ff8ea19f2c
comparison
equal deleted inserted replaced
3591:062dc9b54b86 3592:a0964fd608ae
1 <template>
2 <div class="d-flex flex-column mt-4 pt-4 border-top">
3 <div class="d-flex flex-row justify-content-between">
4 <h5><translate>Data Availability/Accuracy</translate></h5>
5 </div>
6 <div class="mt-1">
7 <h6 class="font-weight-bold">
8 <translate>Currency of Bottleneck Surveys</translate>
9 </h6>
10
11 <div class="d-flex text-center">
12 <div class="card rounded-left">
13 <div class="card-header text-white bg-success">OK</div>
14 <div
15 class="card-body d-flex align-items-center justify-content-center"
16 >
17 Last survey within revisiting time.
18 </div>
19 </div>
20 <div class="card border-left-0 border-right-0 rounded-0">
21 <div class="card-header text-white bg-warning rounded-0">Warning</div>
22 <div
23 class="card-body d-flex flex-column align-items-center justify-content-center"
24 >
25 <div>Last survey within revisiting time</div>
26 <div>
27 x
28 <input
29 type="number"
30 step="0.1"
31 min="1"
32 class="form-control form-control-sm d-inline"
33 style="width: 70px"
34 v-model="bn_revtime_multiplier"
35 />
36 </div>
37 </div>
38 </div>
39 <div class="card rounded-right">
40 <div class="card-header text-white bg-danger">Critical</div>
41 <div
42 class="card-body d-flex align-items-center justify-content-center"
43 >
44 <div>
45 Last survey older than revisiting time x
46 <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b>
47 </div>
48 </div>
49 </div>
50 </div>
51
52 <h6 class="mt-4 font-weight-bold">
53 <translate>Availability of Gauge Measurements</translate>
54 </h6>
55
56 <div class="d-flex text-center">
57 <div class="card rounded-left">
58 <div class="card-header text-white bg-success">OK</div>
59 <div
60 class="card-body d-flex align-items-center justify-content-center"
61 >
62 <div>
63 Latest measurement not older than
64 <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours and at
65 least
66 <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b>
67 measurements in the last 14 days
68 </div>
69 </div>
70 </div>
71 <div class="card border-left-0 border-right-0 rounded-0">
72 <div class="card-header text-white bg-warning rounded-0">Warning</div>
73 <div
74 class="card-body d-flex flex-column align-items-center justify-content-center"
75 >
76 <div>Minimum number of measurements in the last 14 days:</div>
77 <div>
78 <input
79 type="number"
80 step="1"
81 min="1"
82 class="form-control form-control-sm d-inline"
83 style="width: 90px"
84 v-model="gm_min_values_14d"
85 />
86 </div>
87 </div>
88 </div>
89 <div class="card rounded-right">
90 <div class="card-header text-white bg-danger">Critical</div>
91
92 <div
93 class="card-body d-flex flex-column align-items-center justify-content-center"
94 >
95 <div>Latest measurement older than</div>
96 <div>
97 <input
98 type="number"
99 step="1"
100 min="1"
101 class="form-control form-control-sm d-inline"
102 style="width: 70px"
103 v-model="gm_latest_hours"
104 />
105 hours
106 </div>
107 </div>
108 </div>
109 </div>
110
111 <h6 class="mt-4 font-weight-bold">
112 <translate>Gauge Forecast Confidence</translate>
113 </h6>
114
115 <div class="d-flex text-center">
116 <div class="card rounded-left">
117 <div class="card-header text-white bg-success">OK</div>
118 <div
119 class="card-body d-flex align-items-center justify-content-center"
120 >
121 <div>
122 Confidence offset within last 24 hours less than
123 <b>{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b>
124 and within last 72 hours less than
125 <b>{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b>
126 </div>
127 </div>
128 </div>
129 <div class="card border-left-0 border-right-0 rounded-0">
130 <div class="card-header text-white bg-warning rounded-0">Warning</div>
131 <div
132 class="card-body d-flex flex-column align-items-center justify-content-center"
133 >
134 <div>Confidence offset within last 24 hours greater than:</div>
135 <div>
136 <input
137 type="number"
138 step="1"
139 min="1"
140 class="form-control form-control-sm d-inline"
141 style="width: 70px"
142 v-model="gm_forecast_offset_24h"
143 />
144 cm
145 </div>
146 </div>
147 </div>
148 <div class="card rounded-right">
149 <div class="card-header text-white bg-danger">Critical</div>
150
151 <div
152 class="card-body d-flex flex-column align-items-center justify-content-center"
153 >
154 <div>Confidence offset within last 72 hours greater than:</div>
155 <div>
156 <input
157 type="number"
158 step="1"
159 min="1"
160 class="form-control form-control-sm d-inline"
161 style="width: 70px"
162 v-model="gm_forecast_offset_72h"
163 />
164 cm
165 </div>
166 </div>
167 </div>
168 </div>
169
170 <h6 class="mt-4 font-weight-bold">
171 <translate>Gauge Forecast vs. Reality</translate>
172 </h6>
173
174 <div class="d-flex text-center">
175 <div class="card rounded-left">
176 <div class="card-header text-white bg-success">OK</div>
177 <div
178 class="card-body d-flex align-items-center justify-content-center"
179 >
180 <div>
181 Nash-Sutcliffe-Coefficient for last 24 hours greater than
182 <b>{{
183 Number(gm_forecast_vs_reality_nsc_24h).toLocaleString()
184 }}</b>
185 and for last 72 hours greater than
186 <b
187 >{{
188 Number(gm_forecast_vs_reality_nsc_72h).toLocaleString()
189 }}
190 cm</b
191 >
192 </div>
193 </div>
194 </div>
195 <div class="card border-left-0 border-right-0 rounded-0">
196 <div class="card-header text-white bg-warning rounded-0">Warning</div>
197 <div
198 class="card-body d-flex flex-column align-items-center justify-content-center"
199 >
200 <div>Nash-Sutcliffe-Coefficient for last 24 hours less than:</div>
201 <div>
202 <input
203 type="number"
204 step="1"
205 class="form-control form-control-sm d-inline"
206 style="width: 70px"
207 v-model="gm_forecast_vs_reality_nsc_24h"
208 />
209 </div>
210 </div>
211 </div>
212 <div class="card rounded-right">
213 <div class="card-header text-white bg-danger">Critical</div>
214
215 <div
216 class="card-body d-flex flex-column align-items-center justify-content-center"
217 >
218 <div>Nash-Sutcliffe-Coefficient for last 72 hours less than:</div>
219 <div>
220 <input
221 type="number"
222 step="1"
223 class="form-control form-control-sm d-inline"
224 style="width: 70px"
225 v-model="gm_forecast_vs_reality_nsc_72h"
226 />
227 </div>
228 </div>
229 </div>
230 </div>
231
232 <div class="mt-4">
233 <a @click.prevent="submit" class="btn btn-info text-white">
234 <translate>Send</translate>
235 </a>
236 </div>
237 </div>
238 </div>
239 </template>
240
241 <style lang="sass" scoped>
242 .card
243 width: 33%
244 .rounded-left,
245 .rounded-left .card-header
246 border-top-right-radius: 0
247 border-bottom-right-radius: 0
248 .rounded-right
249 .rounded-right .card-header
250 border-top-left-radius: 0
251 border-bottom-left-radius: 0
252 .card-header
253 padding: 0.25rem
254 .card-body
255 padding: 0.5rem
256 </style>
257
258 <script>
259 /* This is Free Software under GNU Affero General Public License v >= 3.0
260 * without warranty, see README.md and license for details.
261 *
262 * SPDX-License-Identifier: AGPL-3.0-or-later
263 * License-Filename: LICENSES/AGPL-3.0.txt
264 *
265 * Copyright (C) 2018 by via donau
266 * – Österreichische Wasserstraßen-Gesellschaft mbH
267 * Software engineering by Intevation GmbH
268 *
269 * Author(s):
270 * Markus Kottländer <markus@intevation.de>
271 */
272
273 export default {
274 data() {
275 return {
276 bn_revtime_multiplier: 1.5,
277 gm_min_values_14d: 1124,
278 gm_latest_hours: 24,
279 gm_forecast_offset_24h: 15,
280 gm_forecast_offset_72h: 15,
281 gm_forecast_vs_reality_nsc_24h: -12.5,
282 gm_forecast_vs_reality_nsc_72h: -12.5
283 };
284 },
285 methods: {
286 submit() {
287 console.log(this.bottleneck_surveys_revtime_multiplier);
288 }
289 }
290 };
291 </script>