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

35
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;
background-color: #252525 !important;
/* :host ::ng-deep .ng-select .ng-select-container {
color: #242222 !important;
background-color: #FBFBFB !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-color: #252525 !important;
padding: 8px;
border-radius: 50%;
border: 2px solid #bef264;
border-color: #bef264 !important;
border: 2px solid #BEF264;
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-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -7,7 +7,7 @@
<section id="configuration">
<div class="row">
<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-body">
<div class="row">
@ -21,6 +21,7 @@
bindValue="id"
placeholder="Select Building"
[(ngModel)]="buildingSelected"
style="width: 100% !important;"
>
</ng-select>
</div>
@ -35,6 +36,7 @@
bindValue="id"
placeholder="Select Category"
[(ngModel)]="categorySelected"
style="width: 100% !important;"
>
</ng-select>
</div>
@ -49,6 +51,7 @@
bindValue="id"
placeholder="Select Status"
[(ngModel)]="statusSelected"
style="width: 100% !important;"
>
</ng-select>
</div>
@ -60,20 +63,20 @@
class="btn btn-outline-success ml-2"
(click)="doFilter()"
style="
background-color: #252525 !important;
border-color: #ffffff !important;
background-color: #DDE1E6 !important;
border-color: #6B6B6B !important;
border-radius: 12px;
"
[disabled]="spinnerFilterActive"
>
<i
class="la la-search"
style="color: #ffffff !important"
style="color: #6B6B6B !important"
*ngIf="!spinnerFilterActive"
></i>
<i
class="la la-spinner spinner"
style="color: #ffffff !important"
style="color: #6B6B6B !important"
*ngIf="spinnerFilterActive"
></i>
</button>
@ -82,9 +85,9 @@
class="btn btn-outline-success ml-2"
(click)="doFilterCancel()"
style="
background-color: #252525 !important;
border-color: #ffffff !important;
color: #ffffff !important;
background-color: #FBFBFB !important;
border-color: #6B6B6B !important;
color: #6B6B6B !important;
border-radius: 12px;
"
>Cancel
@ -103,7 +106,7 @@
<div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
<div
class="card"
style="background-color: #252525; position: relative"
style="background-color: #DDE1E6; position: relative"
>
<div class="card-content">
<div class="card-body">
@ -111,7 +114,7 @@
<div class="align-self-center">
<div
style="
background-color: #414F2B;
background-color: #37A647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -121,29 +124,28 @@
"
>
<i
class="ri-lightbulb-flash-fill font-large-1 blue-grey d-block"
style="color: #bef264 !important"
class="{{item.category_icon}} font-large-1 blue-grey d-block"
style="color: #ffffff !important"
></i>
</div>
<div style="margin-top: 10px">
<span
class="text-muted"
style="color: #ffffff !important"
class="text-custom-name"
>{{ item.name }}</span
>
<br />
<span
class="text-muted"
class="text-custom-category"
>{{item.category_name}}</span
>
</div>
</div>
<div class="ui-switch-container" style="position: absolute; bottom: 10px; right: 10px;">
<ui-switch
style="border-color: #bef264 !important"
style="border-color: #ffffff !important"
class="switchery"
switchColor="black"
color="rgb(190, 242, 100)"
color="rgb(55, 166, 71)"
size="small"
[checked]="item.status_id === 2"
(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[] {
return devices.filter((device) =>
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(
(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() {
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) {
const requestData = {
device_id: data.device_id,
switch: data.mapping[0].switch,
id: data.id,
code: data.mapping[0].code,
value: ev,
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 { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-interceptor.service';
import { ClipboardModule } from 'ngx-clipboard';
@NgModule({
declarations: [
@ -59,6 +60,7 @@ import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-int
NgxMasonryModule,
UiSwitchModule,
NgSelectModule,
ClipboardModule,
NgxEchartsModule.forRoot({
echarts: () => import('echarts')
}),