Skip to content

B
BookingMyHrManagement
Commit c2ed17fe by DESKTOP-E0VCCBD\zedan
Options

update

parent c624d2bc
Showing with 188 additions and 957 deletions
API-Fast/src/models/project_equipment.py
......@@ -26,7 +26,6 @@ class ProjectEquipment(Base):
)
quantity_in_project = Column(Integer, nullable=False, default=0)
low_stock_threshold = Column(Integer, nullable=False, default=5)
# Relationship กลับไปยัง Project และ Equipment
project = relationship("Project", back_populates="project_equipment", lazy="joined")
......
Web-Manage/src/app/DPU/common/home-common/home-common.component.html
......@@ -21,40 +21,6 @@
<label for="endDate" class="whitespace-nowrap">End Date:</label>
<input type="date" [(ngModel)]="endDate" id="endDate" name="endDate" class="border rounded px-2 py-1" />
</div>
<!-- Dropdown Checkbox -->
<div class="relative inline-block" (clickOutside)="isDropdownOpen = false">
<!-- Dropdown button -->
<button (click)="toggleDropdown()" class="border rounded px-4 py-2 bg-white shadow w-48 text-left">
{{ getSelectedLabel() }}
</button>
<!-- Dropdown content -->
<div *ngIf="isDropdownOpen" class="absolute z-10 mt-1 w-48 bg-white border rounded shadow">
<label *ngFor="let project of projectList" class="flex items-center px-4 py-2 hover:bg-gray-100">
<input type="checkbox" [value]="project" [(ngModel)]="projectSelection[project.project_name]"
class="mr-2" />
{{ project.project_name }}
</label>
</div>
</div>
<!-- Dropdown Checkbox -->
<div class="relative inline-block" (clickOutside)="isDropdownOpen1 = false">
<!-- Dropdown button -->
<button (click)="toggleDropdown1()" class="border rounded px-4 py-2 bg-white shadow w-48 text-left">
{{ getSelected() }}
</button>
<!-- Dropdown content -->
<div *ngIf="isDropdownOpen1" class="absolute z-10 mt-1 w-48 bg-white border rounded shadow">
<label *ngFor="let item of equipmentList" class="flex items-center px-4 py-2 hover:bg-gray-100">
<input type="checkbox" [value]="item" [(ngModel)]=" itemSelection [item.equipmentName]" class="mr-2" />
{{ item.equipmentName }}
</label>
</div>
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2"
(click)="getDashbord()" data-hs-overlay="#modal-detail"><i class="font-semibold align-middle"></i>Apply
......
Web-Manage/src/app/DPU/common/home-common/home-common.component.ts
......@@ -365,21 +365,6 @@ export class HomeCommonComponent {
}
getSelectedLabel(): string {
const selectedIds = Object.keys(this.projectSelection).filter(
id => this.projectSelection[id]
);
if (selectedIds.length === 0) return 'เลือกโปรเจค';
if (selectedIds.length === this.projectList.length) return 'โปรเจคทั้งหมด';
// ดึงชื่อจริงจาก projectList
const selectedNames = this.projectList
.filter(project => selectedIds.includes(project.project_name))
.map(project => project.project_name);
return selectedNames.join(', ');
}
getSelected(): string {
const selectedIds = Object.keys(this.itemSelection).filter(
......
Web-Manage/src/app/DPU/company-management/home-installer/home-installer.component.html
......@@ -9,43 +9,29 @@
<div class="box mt-6">
<div class="box-header justify-between">
<div class="box-title">
<span
> กรุณาเลือก</span>
กรุณาเลือก
<span class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle"></span>
</div>
<div class="flex gap-4 flex-wrap">
<!-- Start Date -->
<div class="flex items-center gap-2">
<label for="startDate" class="whitespace-nowrap">Start Date:</label>
<input
type="date"[(ngModel)]="startDate"
id="startDate"
name="startDate"
class="border rounded px-2 py-1"
/>
<input type="date" [(ngModel)]="startDate" id="startDate" name="startDate"
class="border rounded px-2 py-1" />
</div>
<!-- End Date -->
<div class="flex items-center gap-2">
<label for="endDate" class="whitespace-nowrap">End Date:</label>
<input
type="date"[(ngModel)]="endDate"
id="endDate"
name="endDate"
class="border rounded px-2 py-1"
/>
</div>
<input type="date" [(ngModel)]="endDate" id="endDate" name="endDate" class="border rounded px-2 py-1" />
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="applyFilters()"
data-hs-overlay="#modal-detail"><i class="font-semibold align-middle"></i>Apply
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2"
(click)="getDashbord()" data-hs-overlay="#modal-detail"><i class="font-semibold align-middle"></i>Apply
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="xxxl:col-span-6 col-span-12">
......@@ -56,18 +42,11 @@
<div class="flex items-start">
<div class="me-4 gap-0">
<span class="avatar avatar-md p-2 bg-primary">
<svg
class="svg-white"
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<svg class="svg-white" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
/>
d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
</svg>
</span>
</div>
......@@ -78,9 +57,7 @@
</h5>
<div class="text-danger font-semibold"></div>
</div>
<p
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
<p class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold">
จำนวนพนักงานทั้งหมด
</p>
</div>
......@@ -94,20 +71,12 @@
<div class="flex items-start">
<div class="me-4">
<span class="avatar avatar-md p-2 bg-secondary">
<svg
class="svg-white"
xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<svg class="svg-white" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<rect fill="none" height="24" width="24" />
<g>
<path
d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"
/>
d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z" />
</g>
</svg>
</span>
......@@ -119,9 +88,7 @@
</h5>
<div class="text-success font-semibold"></div>
</div>
<p
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
<p class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold">
จำนวนโปรเจคทั้งหมด
</p>
</div>
......@@ -129,24 +96,17 @@
</div>
</div>
</div>
<div class="xxl:col-span-4 md:col-span-6 col-span-12">
<div class="xxl:col-span-4 md:col-span-12 col-span-12">
<div class="box">
<div class="box-body !pb-[0.9rem]">
<div class="flex items-start">
<div class="me-3">
<span class="avatar avatar-md p-2 bg-warning">
<svg
class="svg-white"
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<svg class="svg-white" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M9.5,7h7C16.776123,7,17,6.776123,17,6.5S16.776123,6,16.5,6h-7C9.223877,6,9,6.223877,9,6.5S9.223877,7,9.5,7z M7.5,11h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,10,16.5,10h-9C7.223877,10,7,10.223877,7,10.5S7.223877,11,7.5,11z M20.5,2H3.4993896C3.2234497,2.0001831,2.9998169,2.223999,3,2.5v19c-0.000061,0.1124268,0.0378418,0.2216187,0.1074829,0.3098755c0.1710205,0.2167358,0.4853516,0.2537231,0.7020874,0.0827026l2.8652344-2.2617188l2.3583984,1.7695312c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0L12,19.625l2.3671875,1.7753906c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0l2.3583984-1.7695312l2.8652344,2.2617188C20.2785034,21.9623413,20.3876343,22.0002441,20.5,22h0.0006104C20.7766113,21.9998169,21.0001831,21.7759399,21,21.5V2.4993896C20.9998169,2.2234497,20.776001,1.9998169,20.5,2z M20,20.46875l-2.3574219-1.8613281c-0.0882568-0.069519-0.1972656-0.1072998-0.3095703-0.1074219c-0.1080933-0.000061-0.2132568,0.0349121-0.2998047,0.0996094L14.6669922,20.375l-2.3671875-1.7753906c-0.1777954-0.1328125-0.421814-0.1328125-0.5996094,0L9.3330078,20.375l-2.3662109-1.7753906c-0.1817017-0.1348877-0.4311523-0.1317139-0.609375,0.0078125L4,20.46875V3h16V20.46875z M7.5,15h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,14,16.5,14h-9C7.223877,14,7,14.223877,7,14.5S7.223877,15,7.5,15z"
/>
d="M9.5,7h7C16.776123,7,17,6.776123,17,6.5S16.776123,6,16.5,6h-7C9.223877,6,9,6.223877,9,6.5S9.223877,7,9.5,7z M7.5,11h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,10,16.5,10h-9C7.223877,10,7,10.223877,7,10.5S7.223877,11,7.5,11z M20.5,2H3.4993896C3.2234497,2.0001831,2.9998169,2.223999,3,2.5v19c-0.000061,0.1124268,0.0378418,0.2216187,0.1074829,0.3098755c0.1710205,0.2167358,0.4853516,0.2537231,0.7020874,0.0827026l2.8652344-2.2617188l2.3583984,1.7695312c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0L12,19.625l2.3671875,1.7753906c0.1777954,0.1328125,0.421814,0.1328125,0.5996094,0l2.3583984-1.7695312l2.8652344,2.2617188C20.2785034,21.9623413,20.3876343,22.0002441,20.5,22h0.0006104C20.7766113,21.9998169,21.0001831,21.7759399,21,21.5V2.4993896C20.9998169,2.2234497,20.776001,1.9998169,20.5,2z M20,20.46875l-2.3574219-1.8613281c-0.0882568-0.069519-0.1972656-0.1072998-0.3095703-0.1074219c-0.1080933-0.000061-0.2132568,0.0349121-0.2998047,0.0996094L14.6669922,20.375l-2.3671875-1.7753906c-0.1777954-0.1328125-0.421814-0.1328125-0.5996094,0L9.3330078,20.375l-2.3662109-1.7753906c-0.1817017-0.1348877-0.4311523-0.1317139-0.609375,0.0078125L4,20.46875V3h16V20.46875z M7.5,15h9c0.276123,0,0.5-0.223877,0.5-0.5S16.776123,14,16.5,14h-9C7.223877,14,7,14.223877,7,14.5S7.223877,15,7.5,15z" />
</svg>
</span>
</div>
......@@ -157,9 +117,7 @@
</h5>
<div class="text-success font-semibold"></div>
</div>
<p
class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold"
>
<p class="mb-0 text-[0.625rem] opacity-[0.7] text-[#8c9097] dark:text-white/50 font-semibold">
จำนวนรายการอุปการ์ทั้งหมด
</p>
</div>
......@@ -174,26 +132,17 @@
</div>
<div class="box-body">
<div id="line-chart-datalabels" class="chart-container">
<apx-chart
[series]="chartOptions9.series"
[chart]="chartOptions9.chart"
[xaxis]="chartOptions9.xaxis"
[stroke]="chartOptions9.stroke"
[colors]="chartOptions9.colors"
[dataLabels]="chartOptions9.dataLabels"
[legend]="chartOptions9.legend"
[markers]="chartOptions9.markers"
[grid]="chartOptions9.grid"
[yaxis]="chartOptions9.yaxis"
[title]="chartOptions9.title"
></apx-chart>
<apx-chart [series]="chartOptions9.series" [chart]="chartOptions9.chart" [xaxis]="chartOptions9.xaxis"
[stroke]="chartOptions9.stroke" [colors]="chartOptions9.colors" [dataLabels]="chartOptions9.dataLabels"
[legend]="chartOptions9.legend" [markers]="chartOptions9.markers" [grid]="chartOptions9.grid"
[yaxis]="chartOptions9.yaxis" [title]="chartOptions9.title"></apx-chart>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-12 gap-x-6">
<!-- Candidates (Left Half) -->
<div class="xxl:col-span-6 col-span-12">
......@@ -202,45 +151,24 @@
<div class="box-title">อุปกรณ์ที่ยืม</div>
<div>
<div class="flex gap-4 flex-wrap">
<select>
<option value="">ALL</option>
<option value="">จอบ</option>
<option value="">เสียม</option>
<option value="">ตะปู</option>
<option value="">เครื่องขุด</option>
</select>
</div>
</div>
</div>
<div class="box-body !p-0">
<div class="p-3">
<apx-chart
[series]="optionsCircle1.series"
[chart]="optionsCircle1.chart"
[xaxis]="optionsCircle1.xaxis"
[colors]="optionsCircle1.colors"
[labels]="optionsCircle1.labels"
[legend]="optionsCircle1.legend"
[stroke]="optionsCircle1.stroke"
[tooltip]="optionsCircle1.tooltip"
[plotOptions]="optionsCircle1.plotOptions"
[dataLabels]="optionsCircle1.dataLabels"
></apx-chart>
<apx-chart [series]="optionsCircle1.series" [chart]="optionsCircle1.chart" [xaxis]="optionsCircle1.xaxis"
[colors]="optionsCircle1.colors" [labels]="optionsCircle1.labels" [legend]="optionsCircle1.legend"
[stroke]="optionsCircle1.stroke" [tooltip]="optionsCircle1.tooltip"
[plotOptions]="optionsCircle1.plotOptions" [dataLabels]="optionsCircle1.dataLabels"></apx-chart>
</div>
<div
class="grid grid-cols-2 border-t border-dashed dark:border-defaultborder/10"
>
<div
class="col p-4 border-e border-dashed dark:border-defaultborder/10 text-center"
>
<div class="grid grid-cols-2 border-t border-dashed dark:border-defaultborder/10">
<div class="col p-4 border-e border-dashed dark:border-defaultborder/10 text-center">
<div class="text-[#8c9097] dark:text-white/50 text-[0.75rem] mb-1">
การยืมทั้งหมด
</div>
<div class="flex justify-center items-center">
<span class="me-3 text-[1.625rem] font-semibold">1,234</span>
<span class="text-success font-semibold"
><i class="ri-arrow-up-s-fill me-1"></i>0.23%</span
>
<span class="text-success font-semibold"><i class="ri-arrow-up-s-fill me-1"></i>0.23%</span>
</div>
</div>
<div class="col p-4 text-center">
......@@ -249,9 +177,7 @@
</div>
<div class="flex justify-center items-center">
<span class="me-3 text-[1.625rem] font-semibold">1,754</span>
<span class="text-danger font-semibold"
><i class="ri-arrow-down-s-fill me-1"></i>0.11%</span
>
<span class="text-danger font-semibold"><i class="ri-arrow-down-s-fill me-1"></i>0.11%</span>
</div>
</div>
</div>
......@@ -265,51 +191,18 @@
<div class="box-header justify-between items-center flex-wrap gap-4">
<div class="box-title">จำนวนอุปกรณ์คงเหลือ</div>
<div class="flex gap-4 flex-wrap">
<!-- Select: เดือน -->
<select>
<option value="">ALL</option>
<option value="">มกราคม</option>
<option value="">กุมภาพันธ์</option>
<option value="">มีนาคม</option>
<option value="">เมษายน</option>
</select>
<!-- Select: โปรเจค -->
<select>
<option value="">โปรเจคทั้งหมด</option>
<option value="">DPU001</option>
<option value="">DPU002</option>
<option value="">DPU003</option>
<option value="">DPU004</option>
</select>
<div
class="inline-flex rounded-md shadow-sm"
role="group"
aria-label="Basic example"
>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
<div class="inline-flex rounded-md shadow-sm" role="group" aria-label="Basic example">
<button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
1M
</button>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
<button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
3M
</button>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
<button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
6M
</button>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white"
>
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white">
1Y
</button>
</div>
......@@ -320,20 +213,11 @@
<div class="box">
<div class="box-body">
<div id="audienceReport">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[yaxis]="chartOptions.yaxis"
[xaxis]="chartOptions.xaxis"
[labels]="chartOptions.labels"
[stroke]="chartOptions.stroke"
[plotOptions]="chartOptions.plotOptions"
[markers]="chartOptions.markers"
[fill]="chartOptions.fill"
[tooltip]="chartOptions.tooltip"
[legend]="chartOptions.legend"
[colors]="chartOptions.colors"
></apx-chart>
<apx-chart [series]="chartStockOptions.series" [chart]="chartStockOptions.chart"
[xaxis]="chartStockOptions.xaxis" [plotOptions]="chartStockOptions.plotOptions"
[dataLabels]="chartStockOptions.dataLabels" [stroke]="chartStockOptions.stroke"
[colors]="chartStockOptions.colors" [legend]="chartStockOptions.legend"
[grid]="chartStockOptions.grid"></apx-chart>
</div>
</div>
</div>
......@@ -347,51 +231,19 @@
<div class="box-header justify-between items-center flex-wrap gap-4">
<div class="box-title">จำนวนอุปกรณ์ทั้งหมด</div>
<div class="flex gap-4 flex-wrap">
<!-- Select: เดือน -->
<select>
<option value="">ALL</option>
<option value="">มกราคม</option>
<option value="">กุมภาพันธ์</option>
<option value="">มีนาคม</option>
<option value="">เมษายน</option>
</select>
<!-- Select: โปรเจค -->
<select>
<option value="">โปรเจคทั้งหมด</option>
<option value="">DPU001</option>
<option value="">DPU002</option>
<option value="">DPU003</option>
<option value="">DPU004</option>
</select>
<div
class="inline-flex rounded-md shadow-sm"
role="group"
aria-label="Basic example"
>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
<div class="inline-flex rounded-md shadow-sm" role="group" aria-label="Basic example">
<button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
1M
</button>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
<button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
3M
</button>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary"
>
<button type="button" class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary">
6M
</button>
<button
type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white"
>
<button type="button"
class="ti-btn-group !border-0 !text-xs !py-2 !px-3 ti-btn-primary-full !rounded-s-none !text-white">
1Y
</button>
</div>
......@@ -402,20 +254,11 @@
<div class="box">
<div class="box-body">
<div id="audienceReport">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[yaxis]="chartOptions.yaxis"
[xaxis]="chartOptions.xaxis"
[labels]="chartOptions.labels"
[stroke]="chartOptions.stroke"
[plotOptions]="chartOptions.plotOptions"
[markers]="chartOptions.markers"
[fill]="chartOptions.fill"
[tooltip]="chartOptions.tooltip"
[legend]="chartOptions.legend"
[colors]="chartOptions.colors"
></apx-chart>
<apx-chart [series]="chartEquipmentOptions.series" [chart]="chartEquipmentOptions.chart"
[xaxis]="chartEquipmentOptions.xaxis" [plotOptions]="chartEquipmentOptions.plotOptions"
[dataLabels]="chartEquipmentOptions.dataLabels" [stroke]="chartEquipmentOptions.stroke"
[colors]="chartEquipmentOptions.colors" [legend]="chartEquipmentOptions.legend"
[grid]="chartEquipmentOptions.grid"></apx-chart>
</div>
</div>
</div>
......
Web-Manage/src/app/DPU/company-management/home-installer/home-installer.component.ts
......@@ -80,21 +80,136 @@ export class HomeInstallerComponent {
}
_searchTerm = "";
chartOptions1: any;
chartOptions2: any;
chartOptions3: any
chartOptions: any;
optionsCircle1: any;
chartOptions4: any;
optionsCircle2: any;
optionsCircle3: any
chartOptions5: any;
chartOptions6: any;
chartOptions7: any;
chartOptions8: any;
chartOptions9: any
chartStockOptions: any = {
series: [{
name: 'คงเหลือ',
type: 'column',
data: [] as number[]
}],
chart: {
type: 'bar',
height: 300,
toolbar: { show: false }
},
plotOptions: {
bar: { horizontal: false, columnWidth: '50%', borderRadius: 4 }
},
dataLabels: { enabled: false },
stroke: { show: true, width: 2, colors: ['transparent'] },
colors: ['#23b7e5'],
xaxis: {
categories: [] as string[],
title: { text: 'อุปกรณ์' }
},
yaxis: {
title: { text: 'จำนวนคงเหลือ' }
},
legend: { show: false },
grid: { borderColor: '#e7e7e7', strokeDashArray: 4 }
};
chartOptions1: any = {
series: [],
chart: { toolbar: { show: false }, type: 'line', height: 250 },
grid: { borderColor: '#f1f1f1', strokeDashArray: 3 },
// labels จะเซ็ตด้านนอก
dataLabels: { enabled: false },
stroke: { width: [1, 1.1, 1.1], curve: ['straight', 'smooth', 'smooth'] },
legend: { show: true, position: 'top' },
xaxis: { axisBorder: { color: '#e9e9e9' } },
plotOptions: { bar: { columnWidth: '20%', borderRadius: 2 } },
colors: ["rgba(132, 90, 223, 1)", '#23b7e5', '#00E396'],
labels: [] as string[]
};
chartOptions9: any = {
series: [],
chart: { height: 320, type: 'line', dropShadow: {/*…*/ }, toolbar: { show: false }, events: {/*…*/ } },
colors: ['#845adf', '#23b7e5'],
dataLabels: { enabled: true },
stroke: { curve: 'smooth' },
xaxis: { categories: [], title: { text: 'เดือน' }, labels: {/*…*/ } },
yaxis: { min: 0, max: 100, title: { text: 'จำนวนครั้ง' }, labels: {/*…*/ } },
legend: { position: 'top', horizontalAlign: 'right', floating: true, offsetY: -25, offsetX: -5 },
grid: { borderColor: '#f2f5f7' },
markers: { size: 3 }
};
optionsCircle1: any = {
series: [],
labels: [],
chart: { height: 250, type: 'donut' },
dataLabels: { enabled: false },
legend: { show: false },
stroke: {
show: true,
curve: 'smooth',
lineCap: 'round',
colors: ["#fff"],
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true,
name: { show: true, fontSize: '20px', color: '#495057', offsetY: -4 },
value: { show: true, fontSize: '18px', offsetY: 8 },
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
formatter: (w: any) => w.globals.seriesTotals.reduce((a: any, b: any) => a + b, 0)
}
}
}
}
},
colors: [
"rgba(132, 90, 223, 1)",
"rgba(35, 183, 229, 1)",
"rgba(38, 191, 148, 1)",
"rgba(245, 184, 73, 1)",
]
};
chartEquipmentOptions: any = {
series: [
{
name: 'จำนวนอุปกรณ์',
type: 'column',
data: [] as number[]
}
],
chart: {
type: 'bar',
height: 350,
toolbar: { show: false }
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%',
borderRadius: 4
}
},
dataLabels: { enabled: false },
stroke: { show: true, width: 2, colors: ['transparent'] },
colors: ['#845adf'],
xaxis: {
categories: [] as string[],
title: { text: 'ชนิดอุปกรณ์' }
},
yaxis: {
title: { text: 'จำนวน (ชิ้น)' }
},
legend: { show: false },
grid: { borderColor: '#e7e7e7', strokeDashArray: 4 }
};
chartOptions10: any
chartOptions11: any
chart3options: any
......@@ -160,670 +275,8 @@ export class HomeInstallerComponent {
this.tokenService.saveSelectCompany(result);
// this.router.navigate(["/company"]);
})
this.chartOptions9 = {
series: [
{
name: 'จำนวนการยืม',
data: [40, 55, 60, 80, 70, 65, 90]
},
{
name: 'จำนวนการคืน',
data: [30, 50, 58, 75, 68, 63, 85]
}
],
chart: {
height: 320,
type: 'line',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
},
events: {
mounted: (chart: any) => {
chart.windowResizeHandler();
}
},
},
colors: ['#845adf', '#23b7e5'],
dataLabels: {
enabled: true
},
stroke: {
curve: 'smooth'
},
title: {
text: '',
align: 'left',
style: {
fontSize: '13px',
fontWeight: 'bold',
color: '#8c9097'
},
},
grid: {
borderColor: '#f2f5f7',
},
markers: {
size: 3
},
xaxis: {
categories: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.'],
title: {
text: 'เดือน',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600
}
},
},
yaxis: {
title: {
text: 'จำนวนครั้ง',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600
}
},
min: 0,
max: 100
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
};
this.chartOptions2 = {
series: [
{
name: "High - 2013",
data: [28, 29, 33, 36, 32, 32, 33]
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
],
chart: {
height: 320,
type: 'line',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
},
events: {
mounted: (chart: any) => {
chart.windowResizeHandler();
}
},
},
colors: ['#845adf', '#23b7e5'],
dataLabels: {
enabled: true,
},
stroke: {
curve: 'smooth'
},
title: {
text: 'Average High & Low Temperature',
align: 'left',
style: {
fontSize: '13px',
fontWeight: 'bold',
color: '#8c9097'
},
},
grid: {
borderColor: '#f2f5f7',
},
markers: {
size: 1
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
title: {
text: 'Month',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
show: true,
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600,
cssClass: 'apexcharts-xaxis-label',
},
},
},
yaxis: {
title: {
text: 'Temperature',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
show: true,
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600,
cssClass: 'apexcharts-yaxis-label',
},
},
min: 5,
max: 40
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
}
this.chartOptions1 = {
chart: {
type: 'line',
height: 40,
width: 120,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.1
},
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
},
stroke: {
show: true,
curve: 'straight',
lineCap: 'butt',
width: 1.5,
dashArray: 0,
},
fill: {
gradient: {
enabled: false
}
},
series: [{
name: 'Value',
data: [0, 21, 54, 38, 56, 24, 65]
}],
yaxis: {
min: 0,
show: false
},
xaxis: {
show: false,
axisTicks: {
show: false,
axisBorder: {
show: false
},
},
axisBorder: {
show: false
}
},
colors: ['#23b7e5'],
}
this.chartOptions2 = {
chart: {
type: 'line',
height: 45,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 0,
left: 0,
blur: 1,
color: '#fff',
opacity: 0.05
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 2,
dashArray: 0,
},
fill: {
gradient: {
enabled: false
}
},
series: [{
name: 'Value',
data: [54, 38, 56, 35, 65, 43, 53, 45, 62, 80, 35, 48]
}],
yaxis: {
min: 0,
show: false,
axisBorder: {
show: false
},
},
xaxis: {
axisBorder: {
show: false
},
},
colors: ["rgba(132, 90, 223, 0.1)"],
tooltip: {
enabled: false,
}
}
this.optionsCircle1 = {
series: [1754, 1234, 878, 270],
labels: ["Mobile", "Tablet", "Desktop", "Others"],
chart: {
height: 250,
type: 'donut',
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'round',
colors: ["#fff"],
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '20px',
color: '#495057',
offsetY: -4
},
value: {
show: true,
fontSize: '18px',
offsetY: 8,
formatter: function (val: string) {
return val + "%";
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
}
}
},
},
},
colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",],
};
this.chartOptions = {
series: [
{
name: 'จำนวนการยืม',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 45, 35],
},
],
chart: {
toolbar: {
show: false,
},
type: 'line',
height: 250,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3,
},
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
dataLabels: {
enabled: false,
},
stroke: {
width: [1, 1.1],
curve: ['straight', 'smooth'],
},
legend: {
show: true,
position: 'top',
},
xaxis: {
axisBorder: {
color: '#e9e9e9',
},
},
plotOptions: {
bar: {
columnWidth: '20%',
borderRadius: 2,
},
},
colors: ["rgba(132, 90, 223, 1)", '#23b7e5'],
};
this.chartOptions3 = {
series: [
{
name: 'Session',
data: [24, 23, 20, 25, 27, 26, 24, 23, 23, 25, 23, 23],
type: 'line',
},
{
name: 'Bounce Rate',
data: [20, 23, 26, 22, 20, 26, 28, 26, 22, 27, 25, 26],
type: 'bar',
},
],
chart: {
height: 328,
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false,
},
grid: {
borderColor: '#f1f1f1',
strokeDashArray: 3
},
legend: {
show: true,
position: 'top',
},
plotOptions: {
bar: {
borderRadius: 5,
columnWidth: "40%",
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
colors: ["rgb(132, 90, 223)", "#ededed"],
stroke: {
curve: ['smooth', 'stepline'],
width: [2, 0],
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
color: '#e9e9e9',
},
}
};
this.chartOptions4 = {
series: [
{
name: 'New Users',
data: [32, 15, 63, 51, 36, 62, 99, 42, 78, 76, 32, 120],
},
{
name: 'Sessions',
data: [56, 58, 38, 50, 64, 45, 55, 32, 15, 63, 51, 136],
},
{
name: 'Avg Session Duration',
data: [48, 29, 50, 69, 20, 59, 52, 12, 48, 28, 17, 98],
},
],
chart: {
height: 425,
type: 'line',
toolbar: {
show: false,
},
background: 'none',
fill: '#fff',
},
grid: {
borderColor: '#f2f6f7',
},
colors: ['rgb(132, 90, 223)', '#23b7e5', '#f5b849'],
background: 'transparent',
dataLabels: {
enabled: false,
},
stroke: {
curve: 'straight',
width: 3,
},
legend: {
show: true,
position: 'top',
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
show: false,
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.05)',
offsetX: 0,
offsetY: 0,
},
axisTicks: {
show: false,
borderType: 'solid',
color: 'rgba(119, 119, 142, 0.05)',
width: 6,
offsetX: 0,
offsetY: 0,
},
labels: {
rotate: -90,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm',
},
},
};
this.optionsCircle2 = {
chart: {
height: 120,
width: 100,
type: "radialBar",
},
series: [48],
colors: ["#23b7e5"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "50%",
background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
}
}
}
},
stroke: {
lineCap: "round"
},
labels: ["Followers"]
}
this.optionsCircle3 = {
chart: {
height: 120,
width: 100,
type: "radialBar",
},
series: [65],
colors: ["#ffc107"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "50%",
background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
},
}
}
},
stroke: {
lineCap: "round"
},
labels: ["Views"]
}
this.uploadConfig()
}
uploadConfig() {
......@@ -897,21 +350,6 @@ export class HomeInstallerComponent {
});
}
getSelectedLabel(): string {
const selectedIds = Object.keys(this.projectSelection).filter(
id => this.projectSelection[id]
);
if (selectedIds.length === 0) return 'เลือกโปรเจค';
if (selectedIds.length === this.projectList.length) return 'โปรเจคทั้งหมด';
// ดึงชื่อจริงจาก projectList
const selectedNames = this.projectList
.filter(project => selectedIds.includes(project.project_name))
.map(project => project.project_name);
return selectedNames.join(', ');
}
ngOnInit(): void {
......@@ -926,8 +364,8 @@ export class HomeInstallerComponent {
this.equipmentList = result
})
const today = new Date();
const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
this.startDate = this.formatDateToYYYYMMDD(firstDay);
const firstDay = new Date(today.getFullYear(), today.getMonth(),1); // เดือน 0 = มกราคม
this.startDate = this.formatDateToYYYYMMDD(firstDay);
this.endDate = this.formatDateToYYYYMMDD(today);
this.getDashbord()
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment