patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix layout for vedirect live data on small devices

Browse Source
This commit is contained in:
helgeerbe 2023-04-13 11:38:20 +02:00
parent 1dc73f91ee
commit b00ca02aac
3 changed files with 118 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
webapp/src/components/VedirectView.vue
View File

@ -59,47 +59,49 @@
<div class="card" :class="{ 'border-info': true }"> <div class="card" :class="{ 'border-info': true }">
<div class="card-header text-bg-info">{{ $t('vedirecthome.DeviceInfo') }}</div> <div class="card-header text-bg-info">{{ $t('vedirecthome.DeviceInfo') }}</div>
<div class="card-body"> <div class="card-body">
<table class="table table-striped table-hover"> <div class="table-responsive">
<thead> <table class="table table-striped table-hover">
<tr> <thead>
<th scope="col">{{ $t('vedirecthome.Property') }}</th> <tr>
<th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th> <th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th> <th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th>
</tr> <th scope="col">{{ $t('vedirecthome.Unit') }}</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<th scope="row">{{ $t('vedirecthome.LoadOutputState') }}</th> <tr>
<td style="text-align: right">{{vedirectData.LOAD}}</td> <th scope="row">{{ $t('vedirecthome.LoadOutputState') }}</th>
<td></td> <td style="text-align: right">{{vedirectData.LOAD}}</td>
</tr> <td></td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.StateOfOperation') }}</th> <tr>
<td style="text-align: right">{{vedirectData.CS}}</td> <th scope="row">{{ $t('vedirecthome.StateOfOperation') }}</th>
<td></td> <td style="text-align: right">{{vedirectData.CS}}</td>
</tr> <td></td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.TrackerOperationMode') }}</th> <tr>
<td style="text-align: right">{{vedirectData.MPPT}}</td> <th scope="row">{{ $t('vedirecthome.TrackerOperationMode') }}</th>
<td></td> <td style="text-align: right">{{vedirectData.MPPT}}</td>
</tr> <td></td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.OffReason') }}</th> <tr>
<td style="text-align: right">{{vedirectData.OR}}</td> <th scope="row">{{ $t('vedirecthome.OffReason') }}</th>
<td></td> <td style="text-align: right">{{vedirectData.OR}}</td>
</tr> <td></td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.ErrorCode') }}</th> <tr>
<td style="text-align: right">{{vedirectData.ERR}}</td> <th scope="row">{{ $t('vedirecthome.ErrorCode') }}</th>
<td></td> <td style="text-align: right">{{vedirectData.ERR}}</td>
</tr> <td></td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.DaySequenceNumber') }}</th> <tr>
<td style="text-align: right">{{vedirectData.HSDS.v}}</td> <th scope="row">{{ $t('vedirecthome.DaySequenceNumber') }}</th>
<td>{{vedirectData.HSDS.u}}</td> <td style="text-align: right">{{vedirectData.HSDS.v}}</td>
</tr> <td>{{vedirectData.HSDS.u}}</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -107,27 +109,29 @@
<div class="card" :class="{ 'border-info': false }"> <div class="card" :class="{ 'border-info': false }">
<div class="card-header">{{ $t('vedirecthome.Battery') }}</div> <div class="card-header">{{ $t('vedirecthome.Battery') }}</div>
<div class="card-body"> <div class="card-body">
<table class="table table-striped table-hover"> <div class="table-responsive">
<thead> <table class="table table-striped table-hover">
<tr> <thead>
<th scope="col">{{ $t('vedirecthome.Property') }}</th> <tr>
<th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th> <th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th> <th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th>
</tr> <th scope="col">{{ $t('vedirecthome.Unit') }}</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<th scope="row">{{ $t('vedirecthome.BatteryVoltage') }}</th> <tr>
<td style="text-align: right">{{formatNumber(vedirectData.V.v)}}</td> <th scope="row">{{ $t('vedirecthome.BatteryVoltage') }}</th>
<td>{{vedirectData.V.u}}</td> <td style="text-align: right">{{formatNumber(vedirectData.V.v)}}</td>
</tr> <td>{{vedirectData.V.u}}</td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.BatteryCurrent') }}</th> <tr>
<td style="text-align: right">{{formatNumber(vedirectData.I.v)}}</td> <th scope="row">{{ $t('vedirecthome.BatteryCurrent') }}</th>
<td>{{vedirectData.I.u}}</td> <td style="text-align: right">{{formatNumber(vedirectData.I.v)}}</td>
</tr> <td>{{vedirectData.I.u}}</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -135,52 +139,54 @@
<div class="card" :class="{ 'border-info': false }"> <div class="card" :class="{ 'border-info': false }">
<div class="card-header">{{ $t('vedirecthome.Panel') }}</div> <div class="card-header">{{ $t('vedirecthome.Panel') }}</div>
<div class="card-body"> <div class="card-body">
<table class="table table-striped table-hover"> <div class="table-responsive">
<thead> <table class="table table-striped table-hover">
<tr> <thead>
<th scope="col">{{ $t('vedirecthome.Property') }}</th> <tr>
<th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th> <th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th> <th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th>
</tr> <th scope="col">{{ $t('vedirecthome.Unit') }}</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<th scope="row">{{ $t('vedirecthome.PanelVoltage') }}</th> <tr>
<td style="text-align: right">{{formatNumber(vedirectData.VPV.v)}}</td> <th scope="row">{{ $t('vedirecthome.PanelVoltage') }}</th>
<td>{{vedirectData.VPV.u}}</td> <td style="text-align: right">{{formatNumber(vedirectData.VPV.v)}}</td>
</tr> <td>{{vedirectData.VPV.u}}</td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.PanelPower') }}</th> <tr>
<td style="text-align: right">{{formatNumber(vedirectData.PPV.v)}}</td> <th scope="row">{{ $t('vedirecthome.PanelPower') }}</th>
<td>{{vedirectData.PPV.u}}</td> <td style="text-align: right">{{formatNumber(vedirectData.PPV.v)}}</td>
</tr> <td>{{vedirectData.PPV.u}}</td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.YieldTotal') }}</th> <tr>
<td style="text-align: right">{{formatNumber(vedirectData.H19.v)}}</td> <th scope="row">{{ $t('vedirecthome.YieldTotal') }}</th>
<td>{{vedirectData.H19.u}}</td> <td style="text-align: right">{{formatNumber(vedirectData.H19.v)}}</td>
</tr> <td>{{vedirectData.H19.u}}</td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.YieldToday') }}</th> <tr>
<td style="text-align: right">{{formatNumber(vedirectData.H20.v)}}</td> <th scope="row">{{ $t('vedirecthome.YieldToday') }}</th>
<td>{{vedirectData.H20.u}}</td> <td style="text-align: right">{{formatNumber(vedirectData.H20.v)}}</td>
</tr> <td>{{vedirectData.H20.u}}</td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.MaximumPowerToday') }}</th> <tr>
<td style="text-align: right">{{formatNumber(vedirectData.H21.v)}}</td> <th scope="row">{{ $t('vedirecthome.MaximumPowerToday') }}</th>
<td>{{vedirectData.H21.u}}</td> <td style="text-align: right">{{formatNumber(vedirectData.H21.v)}}</td>
</tr> <td>{{vedirectData.H21.u}}</td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.YieldYesterday') }}</th> <tr>
<td style="text-align: right">{{formatNumber(vedirectData.H22.v)}}</td> <th scope="row">{{ $t('vedirecthome.YieldYesterday') }}</th>
<td>{{vedirectData.H22.u}}</td> <td style="text-align: right">{{formatNumber(vedirectData.H22.v)}}</td>
</tr> <td>{{vedirectData.H22.u}}</td>
<tr> </tr>
<th scope="row">{{ $t('vedirecthome.MaximumPowerYesterday') }}</th> <tr>
<td style="text-align: right">{{formatNumber(vedirectData.H23.v)}}</td> <th scope="row">{{ $t('vedirecthome.MaximumPowerYesterday') }}</th>
<td>{{vedirectData.H23.u}}</td> <td style="text-align: right">{{formatNumber(vedirectData.H23.v)}}</td>
</tr> <td>{{vedirectData.H23.u}}</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>

8
webapp/vite.config.ts
View File

@ -52,20 +52,20 @@ export default defineConfig({
server: { server: {
proxy: { proxy: {
'^/api': { '^/api': {
target: 'http://192.168.178.78/' target: 'http://192.168.178.87/'
}, },
'^/livedata': { '^/livedata': {
target: 'ws://192.168.178.78/', target: 'ws://192.168.178.87/',
ws: true, ws: true,
changeOrigin: true changeOrigin: true
}, },
'^/vedirectlivedata': { '^/vedirectlivedata': {
target: 'ws://192.168.178.78/', target: 'ws://192.168.178.87/',
ws: true, ws: true,
changeOrigin: true changeOrigin: true
}, },
'^/console': { '^/console': {
target: 'ws://192.168.20.110/', target: 'ws://192.168.178.87/',
ws: true, ws: true,
changeOrigin: true changeOrigin: true
} }

BIN
webapp_dist/js/app.js.gz
View File

Binary file not shown.