Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

updated rml dashboard

Browse Source
This commit is contained in:
Luca Haid
2025-01-16 07:11:23 +01:00
parent 75ca540602
commit 92f068503c
2 changed files with 229 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/pages/DashboardNew/DashboardNew.js
+177 -19
View File
@@ -58,7 +58,7 @@ Vue.component('tt-dashboard-display-card', {
props: ['header', 'icon', 'text', 'subHeaders', 'color'],
computed: {
cardHeight() {
return `${96 + 25 * this.subHeaders.length}px`;
return `${96 + 25 * this.subHeaders?.length ?? 0}px`;
}
},
template: `
@@ -188,25 +188,10 @@ Vue.component('tt-timeline-chart', {
});
Vue.component('dashboard-new', {
Vue.component('dashboard-default', {
props: ['dashboardData'],
template: `
<tt-card>
<template v-slot:header>
<h3>Akquise Statistiken</h3>
</template>
<tt-loader v-if="isLoading" style="margin: -5rem -1.5rem -1.5rem;"/>
<div class="dashboard-new">
<dashboard-location-selector
:selectedNetworkOwner="selectedNetworkOwner"
:selectedCampaign="selectedCampaign"
:selectedGemeinde="selectedGemeinde"
@update:selectedNetworkOwner="selectedNetworkOwner = $event"
@update:selectedCampaign="selectedCampaign = $event"
@update:selectedGemeinde="selectedGemeinde = $event"
/>
<hr>
<div>
<h4 class="mt-4">Bestellungen</h4>
<div class="dashboard-cards position-relative">
<tt-dashboard-display-card
@@ -356,12 +341,185 @@ Vue.component('dashboard-new', {
/>
</div>
</div>`
})
Vue.component('dashboard-rml', {
props: ['dashboardData'],
template: `
<div>
<h4 class="mt-4">Bestellungen</h4>
<div class="dashboard-cards position-relative">
<tt-dashboard-display-card
header="Bestellungen gesamt"
icon="fas fa-check"
:text="dashboardData.order_actual_order + ' / ' + dashboardData.order_max_home_addrdb + ' (' + Math.round((dashboardData.order_actual_order / dashboardData.order_max_home_addrdb) * 100) + '%)'"
color="#28a745"
/>
<tt-dashboard-display-card
header="Bestellungen Energie Steiermark"
icon="fas fa-bolt"
:text="dashboardData.order_energie_steiermark + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.order_energie_steiermark / dashboardData.order_actual_order) * 100) + '%)'"
color="#28a745"
/>
<tt-dashboard-display-card
header="Bestellungen Magenta"
icon="fas fa-mobile-alt"
:text="dashboardData.order_magenta + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.order_magenta / dashboardData.order_actual_order) * 100) + '%)'"
color="#E20074"
/>
<tt-dashboard-display-card
header="Bestellungen Salzburg AG"
icon="fas fa-plug"
:text="dashboardData.order_salzburg_ag + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.order_salzburg_ag / dashboardData.order_actual_order) * 100) + '%)'"
color="#0066B3"
/>
</div>
<hr>
<h4 class="mt-4">Baufortschritt</h4>
<div class="dashboard-cards position-relative">
<tt-dashboard-display-card
header="Leerrohr an der Grundstücksgrenze abgelegt"
icon="fas fa-road"
:text="dashboardData.baufortschritt_140 + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.baufortschritt_140 / dashboardData.order_actual_order) * 100) + '%)'"
color="#28a745"
/>
<tt-dashboard-display-card
header="Installationspaket erhalten"
icon="fas fa-box-open"
:text="dashboardData.installationspaket_erhalten + ' / ' + dashboardData.order_efh + ' (' + Math.round((dashboardData.installationspaket_erhalten / dashboardData.order_efh) * 100) + '%)'"
color="#17a2b8"
/>
<tt-dashboard-display-card
header="Leerrohr im Haus"
icon="fas fa-house-user"
:text="dashboardData.lehrrohr_im_haus + ' / ' + dashboardData.order_efh + ' (' + Math.round((dashboardData.lehrrohr_im_haus / dashboardData.order_efh) * 100) + '%)'"
color="#f5b902"
/>
<tt-dashboard-display-card
header="BEP installiert EFH"
icon="fas fa-plug"
:text="dashboardData.inhouse_kabel_verlegt_efh + ' / ' + dashboardData.order_efh + ' (' + Math.round((dashboardData.inhouse_kabel_verlegt_efh / dashboardData.order_efh) * 100) + '%)'"
:sub-headers="[
'Magenta: ' + dashboardData.inhouse_kabel_verlegt_efh_magenta + ' (' + Math.round((dashboardData.inhouse_kabel_verlegt_efh_magenta / dashboardData.order_magenta) * 100) + '%)',
'Salzburg AG: ' + dashboardData.inhouse_kabel_verlegt_efh_salzburg + ' (' + Math.round((dashboardData.inhouse_kabel_verlegt_efh_salzburg / dashboardData.order_salzburg_ag) * 100) + '%)'
]"
color="#007bff"
/>
<tt-dashboard-display-card
header="Inhousekabel verlegt MPH"
icon="fas fa-building-user"
:text="dashboardData.inhouse_kabel_verlegt_mph + ' / ' + dashboardData.order_mph + ' (' + Math.round((dashboardData.inhouse_kabel_verlegt_mph / dashboardData.order_mph) * 100) + '%)'"
color="#0bb36c"
/>
</div>
<hr>
<h4 class="mt-4">Installationsfortschritt Provider</h4>
<div class="dashboard-cards position-relative">
<tt-dashboard-display-card
header="Installationsfortschritt Energie Steiermark"
icon="fas fa-bolt"
:text="dashboardData.status_244_245_energie_steiermark + ' / ' + dashboardData.order_energie_steiermark + ' (' + Math.round((dashboardData.status_244_245_energie_steiermark / dashboardData.order_energie_steiermark) * 100) + '%)'"
:sub-headers="[
'Status 500: ' + dashboardData.status_500_energy_steiermark + ' (' + Math.round((dashboardData.status_500_energy_steiermark / dashboardData.status_244_245_energie_steiermark) * 100) + '%)'
]"
color="#28a745"
/>
<tt-dashboard-display-card
header="Installationsfortschritt Magenta"
icon="fas fa-mobile-alt"
:text="dashboardData.status_244_245_magenta + ' / ' + dashboardData.order_magenta + ' (' + Math.round((dashboardData.status_244_245_magenta / dashboardData.order_magenta) * 100) + '%)'"
:sub-headers="[
'Status 500: ' + dashboardData.status_500_magenta + ' (' + Math.round((dashboardData.status_500_magenta / dashboardData.status_244_245_magenta) * 100) + '%)'
]"
color="#E20074"
/>
<tt-dashboard-display-card
header="Installationsfortschritt Salzburg AG"
icon="fas fa-plug"
:text="dashboardData.status_244_245_salzburg_ag + ' / ' + dashboardData.order_salzburg_ag + ' (' + Math.round((dashboardData.status_244_245_salzburg_ag / dashboardData.order_salzburg_ag) * 100) + '%)'"
:sub-headers="[
'Status 500: ' + dashboardData.status_500_salzburg_ag + ' (' + Math.round((dashboardData.status_500_salzburg_ag / dashboardData.status_244_245_salzburg_ag) * 100) + '%)'
]"
color="#0066B3"
/>
</div>
<hr>
<h4 class="mt-4">Bestellverlauf</h4>
<div class="dashboard-chart">
<tt-timeline-chart
v-if="dashboardData.timeline.length > 0"
:datasets="[
{
label: 'Bestellungen',
data: dashboardData.timeline[0],
color: 'rgb(75, 192, 192)',
fill: true,
yAxisID: 'y',
order: 3
},
{
label: 'Leerrohr',
data: dashboardData.timeline_leerrohr[0],
color: 'rgb(255, 99, 132)',
fill: false,
yAxisID: 'y',
order: 2
},
{
label: 'ONT installiert',
data: dashboardData.timeline_ont_installed[0],
color: 'rgb(54, 162, 235)',
fill: false,
yAxisID: 'y',
order: 1
}
]"
label="KW"
:showGrid="false"
/>
</div>
</div>
`
})
Vue.component('dashboard-new', {
template: `
<tt-card>
<template v-slot:header>
<h3>Akquise Statistiken</h3>
</template>
<tt-loader v-if="isLoading" style="margin: -5rem -1.5rem -1.5rem;"/>
<div class="dashboard-new">
<dashboard-location-selector
:selectedNetworkOwner="selectedNetworkOwner"
:selectedCampaign="selectedCampaign"
:selectedGemeinde="selectedGemeinde"
@update:selectedNetworkOwner="selectedNetworkOwner = $event"
@update:selectedCampaign="selectedCampaign = $event"
@update:selectedGemeinde="selectedGemeinde = $event"
/>
<hr>
<dashboard-default v-if="dashboardData.type === 'default'" :dashboardData="dashboardData"/>
<dashboard-rml v-else-if="dashboardData.type === 'rml'" :dashboardData="dashboardData"/>
</div>
</tt-card>
`,
data() {
return {
dashboardData: {
type: 'unloaded',
order_max_home_addrdb: 0,
order_actual_order: "0",
order_efh: "0",