fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slicing see all control device

This commit is contained in:
Fuzi_fauzia 2024-07-16 14:24:45 +07:00
parent 60d14b2fce
commit d22eaa50e1
5 changed files with 66 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/content/hemat-app/monitoring/building/building.component.html
View File

@ -1,4 +1,4 @@
<div class="app-content content"> <div class="app-content content" style="background-color: #FBFBFB;">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -53,13 +53,13 @@
class="text-center" class="text-center"
style=" style="
position: absolute; position: absolute;
top: 70%; top: 73%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
" "
> >
<h3 <h3
class="display-4 blue-grey darken-1 custom-total" class="custom-total"
> >
{{ data.total }} KWH {{ data.total }} KWH
</h3> </h3>

41
src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.css
View File

@ -1,14 +1,37 @@
:host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important; /* :host ::ng-deep .ng-select .ng-select-container {
background-color: #252525 !important; color: #242222 !important;
background-color: #FBFBFB !important;
height: 40px !important; height: 40px !important;
border-radius: 12px; border-radius: 12px !important;
} */
:host ::ng-deep .ng-select .ng-select-container {
color: #242222 !important;
background-color: #FBFBFB !important;
height: 40px !important;
border-radius: 12px !important;
box-shadow: 0 2px 4px rgba(36, 34, 34, 0.2) !important; /* Bayangan lebih tipis */
} }
.background-round { .background-round {
background-color: #252525 !important; background-color: #252525 !important;
padding: 8px; padding: 8px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #bef264; border: 2px solid #BEF264;
border-color: #bef264 !important; border-color: #BEF264 !important;
} }
.text-custom-name{
color: #242222 !important;
font-family: "Open Sans", sans-serif !important;
font-size: 16px;
font-weight: 600;
}
.text-custom-category{
color: #242222 !important;
font-family: "Open Sans", sans-serif !important;
font-size: 12px;
}

38
src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html
View File

@ -1,4 +1,4 @@
<div class="app-content content" style="background-color: #000000 !important"> <div class="app-content content" style="background-color: #FBFBFB;">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -7,7 +7,7 @@
<section id="configuration"> <section id="configuration">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #FBFBFB !important; box-shadow: none !important;">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@ -21,6 +21,7 @@
bindValue="id" bindValue="id"
placeholder="Select Building" placeholder="Select Building"
[(ngModel)]="buildingSelected" [(ngModel)]="buildingSelected"
style="width: 100% !important;"
> >
</ng-select> </ng-select>
</div> </div>
@ -35,6 +36,7 @@
bindValue="id" bindValue="id"
placeholder="Select Category" placeholder="Select Category"
[(ngModel)]="categorySelected" [(ngModel)]="categorySelected"
style="width: 100% !important;"
> >
</ng-select> </ng-select>
</div> </div>
@ -49,6 +51,7 @@
bindValue="id" bindValue="id"
placeholder="Select Status" placeholder="Select Status"
[(ngModel)]="statusSelected" [(ngModel)]="statusSelected"
style="width: 100% !important;"
> >
</ng-select> </ng-select>
</div> </div>
@ -60,20 +63,20 @@
class="btn btn-outline-success ml-2" class="btn btn-outline-success ml-2"
(click)="doFilter()" (click)="doFilter()"
style=" style="
background-color: #252525 !important; background-color: #DDE1E6 !important;
border-color: #ffffff !important; border-color: #6B6B6B !important;
border-radius: 12px; border-radius: 12px;
" "
[disabled]="spinnerFilterActive" [disabled]="spinnerFilterActive"
> >
<i <i
class="la la-search" class="la la-search"
style="color: #ffffff !important" style="color: #6B6B6B !important"
*ngIf="!spinnerFilterActive" *ngIf="!spinnerFilterActive"
></i> ></i>
<i <i
class="la la-spinner spinner" class="la la-spinner spinner"
style="color: #ffffff !important" style="color: #6B6B6B !important"
*ngIf="spinnerFilterActive" *ngIf="spinnerFilterActive"
></i> ></i>
</button> </button>
@ -82,9 +85,9 @@
class="btn btn-outline-success ml-2" class="btn btn-outline-success ml-2"
(click)="doFilterCancel()" (click)="doFilterCancel()"
style=" style="
background-color: #252525 !important; background-color: #FBFBFB !important;
border-color: #ffffff !important; border-color: #6B6B6B !important;
color: #ffffff !important; color: #6B6B6B !important;
border-radius: 12px; border-radius: 12px;
" "
>Cancel >Cancel
@ -103,7 +106,7 @@
<div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows"> <div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
<div <div
class="card" class="card"
style="background-color: #252525; position: relative" style="background-color: #DDE1E6; position: relative"
> >
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
@ -111,7 +114,7 @@
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #414F2B; background-color: #37A647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -121,29 +124,28 @@
" "
> >
<i <i
class="ri-lightbulb-flash-fill font-large-1 blue-grey d-block" class="{{item.category_icon}} font-large-1 blue-grey d-block"
style="color: #bef264 !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span <span
class="text-muted" class="text-custom-name"
style="color: #ffffff !important"
>{{ item.name }}</span >{{ item.name }}</span
> >
<br /> <br />
<span <span
class="text-muted" class="text-custom-category"
>{{item.category_name}}</span >{{item.category_name}}</span
> >
</div> </div>
</div> </div>
<div class="ui-switch-container" style="position: absolute; bottom: 10px; right: 10px;"> <div class="ui-switch-container" style="position: absolute; bottom: 10px; right: 10px;">
<ui-switch <ui-switch
style="border-color: #bef264 !important" style="border-color: #ffffff !important"
class="switchery" class="switchery"
switchColor="black" switchColor="black"
color="rgb(190, 242, 100)" color="rgb(55, 166, 71)"
size="small" size="small"
[checked]="item.status_id === 2" [checked]="item.status_id === 2"
(change)="switchChanged($event, item)" (change)="switchChanged($event, item)"

14
src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts
View File

@ -90,7 +90,7 @@ export class ControlDeviceSeemoreComponent {
filterDevices(devices: any[]): any[] { filterDevices(devices: any[]): any[] {
return devices.filter((device) => return devices.filter((device) =>
device.mapping.some( device.mapping.some(
(map) => map.name.startsWith("switch") && map.type === "Boolean" (map) => map.code.startsWith("switch") && map.type === "Boolean"
) )
); );
} }
@ -106,13 +106,17 @@ export class ControlDeviceSeemoreComponent {
this.dataMasterCategori = dataCategory.filter( this.dataMasterCategori = dataCategory.filter(
(item) => item.statusName.toLowerCase() === "aktif" (item) => item.statusName.toLowerCase() === "aktif"
); );
this.dataMasterStatus = dataStatus.filter((item) => item.statusName.toLowerCase() === "aktif"); this.dataMasterStatus = dataStatus.filter((item) => item.statusName.toLowerCase() === "aktif" || item.status === "71");
}); });
} }
dataListBuilding() { dataListBuilding() {
this.monitoringApiService.getBuildingList().subscribe((data) => { this.monitoringApiService.getBuildingList().subscribe((data) => {
this.dataBuildingList = data.data.filter((item) => item.statusName.toLowerCase() === "aktif"); console.log(data);
this.dataBuildingList = data.data.filter((item) => item.statusName.toLowerCase() === "aktif" || item.status_id === 71);
console.log(this.dataBuildingList);
}); });
} }
@ -163,8 +167,8 @@ export class ControlDeviceSeemoreComponent {
switchChanged(ev, data) { switchChanged(ev, data) {
const requestData = { const requestData = {
device_id: data.device_id, id: data.id,
switch: data.mapping[0].switch, code: data.mapping[0].code,
value: ev, value: ev,
command_type: "on_off", command_type: "on_off",
}; };

2
src/app/content/hemat-app/monitoring/monitoring.module.ts
View File

@ -29,6 +29,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
import { ControlDeviceSeemoreComponent } from './control-device-seemore/control-device-seemore.component'; import { ControlDeviceSeemoreComponent } from './control-device-seemore/control-device-seemore.component';
import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-interceptor.service'; import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-interceptor.service';
import { ClipboardModule } from 'ngx-clipboard';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -59,6 +60,7 @@ import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-int
NgxMasonryModule, NgxMasonryModule,
UiSwitchModule, UiSwitchModule,
NgSelectModule, NgSelectModule,
ClipboardModule,
NgxEchartsModule.forRoot({ NgxEchartsModule.forRoot({
echarts: () => import('echarts') echarts: () => import('echarts')
}), }),