kely
2 years ago
7 changed files with 444 additions and 101 deletions
@ -1,14 +1,15 @@ |
|||||
export * from "./dashboard/dashboard.component"; |
export * from './dashboard/dashboard.component' |
||||
export * from "./login/login.component"; |
export * from './login/login.component' |
||||
export * from "./meal-setting/meal-setting.component"; |
export * from './meal-setting/meal-setting.component' |
||||
export * from "./data-vis/data-vis.component"; |
export * from './data-vis/data-vis.component' |
||||
export * from "./food/food.component"; |
export * from './food/food.component' |
||||
export * from "./dish/dish.component"; |
export * from './dish/dish.component' |
||||
|
|
||||
export * from "./system/org-info/org-info.component"; |
export * from './system/org-info/org-info.component' |
||||
export * from "./system/user-manage/user-manage.component"; |
export * from './system/user-manage/user-manage.component' |
||||
|
|
||||
export * from "./ingredients/ingredient-list/ingredient-list.component"; |
export * from './ingredients/ingredient-list/ingredient-list.component' |
||||
export * from "./ingredients/ingredient-form/ingredient-form.component"; |
export * from './ingredients/ingredient-form/ingredient-form.component' |
||||
export * from "./ingredients/ingredient-preview-page/ingredient-preview-page.component"; |
export * from './ingredients/ingredient-preview-page/ingredient-preview-page.component' |
||||
export * from "./ingredients/ingredient-release/ingredient-release.component"; |
export * from './ingredients/ingredient-release/ingredient-release.component' |
||||
|
export * from './salt-oil-sugar/salt-oil-sugar.component' |
||||
|
|||||
@ -0,0 +1,147 @@ |
|||||
|
<app-page> |
||||
|
<ng-template #pageExtraTpl> |
||||
|
<nz-space> |
||||
|
<button nz-button *nzSpaceItem (click)="trend()">生成趋势图</button> |
||||
|
<a *nzSpaceItem nz-button nzType="primary" (click)="openModal()"> |
||||
|
<i nz-icon nzType="plus"></i> |
||||
|
新增记录 |
||||
|
</a> |
||||
|
</nz-space> |
||||
|
</ng-template> |
||||
|
<div class="h-full overflow-hidden bg-white rounded-lg"> |
||||
|
<nz-card [nzBordered]="false" nzTitle="糖油盐管理"> |
||||
|
<table-list |
||||
|
[props]="tableList" |
||||
|
[search]="searchTpl" |
||||
|
[action]="pageExtraTpl" |
||||
|
[formGroup]="queryForm" |
||||
|
[renderColumns]="renderColumnsTpl" |
||||
|
> |
||||
|
<ng-template #searchTpl> |
||||
|
<nz-form-item> |
||||
|
<nz-form-control> |
||||
|
<nz-range-picker formControlName="date"></nz-range-picker> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</ng-template> |
||||
|
<ng-template #renderColumnsTpl let-data let-key="key" let-row="row"> |
||||
|
<ng-container [ngSwitch]="key"> |
||||
|
<ng-container *ngSwitchCase="'modify'"> |
||||
|
{{ data | date : 'yyyy-MM-dd HH:mm:ss' }} |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="'vender'"> |
||||
|
{{ tableOrg[data] ? tableOrg[data].name : '-' }} |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container *ngSwitchCase="'meals'"> |
||||
|
<nz-tag *ngFor="let item of data">{{ item }}</nz-tag> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="'day'"> 周{{ data }} </ng-container> |
||||
|
<ng-container *ngSwitchCase="'status'"> |
||||
|
{{ statusTextMap[data] }} |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="'month'"> |
||||
|
<div class="flex flex-wrap"> |
||||
|
<ng-container *ngIf="data.length === 12"> |
||||
|
<nz-tag> 全年 </nz-tag> |
||||
|
</ng-container> |
||||
|
<ng-container *ngIf="data.length !== 12"> |
||||
|
<nz-tag *ngFor="let item of data" class="mb-1"> |
||||
|
{{ item }} |
||||
|
</nz-tag> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchDefault> |
||||
|
{{ data }} |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
</table-list> |
||||
|
</nz-card> |
||||
|
</div> |
||||
|
</app-page> |
||||
|
|
||||
|
<ng-template #formTpl> |
||||
|
<form nz-form [formGroup]="recordForm"> |
||||
|
<nz-form-item class="mt-4"> |
||||
|
<nz-form-label nzSpan="6" [nzRequired]="true"> 选择周 </nz-form-label> |
||||
|
<nz-form-control nzSpan="12" [nzErrorTip]="formControlErrorTpl"> |
||||
|
<nz-week-picker formControlName="week" nzFormat="yyyy-ww周" class="w-full"></nz-week-picker> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item class="mt-4"> |
||||
|
<nz-form-label nzSpan="6" [nzRequired]="true"> 供餐天数 </nz-form-label> |
||||
|
<nz-form-control nzSpan="12" [nzErrorTip]="formControlErrorTpl"> |
||||
|
<nz-select nzPlaceHolder="请选择供餐天数" formControlName="day"> |
||||
|
<nz-option [nzValue]="1" nzLabel="1天"></nz-option> |
||||
|
<nz-option [nzValue]="2" nzLabel="2天"></nz-option> |
||||
|
<nz-option [nzValue]="3" nzLabel="3天"></nz-option> |
||||
|
<nz-option [nzValue]="4" nzLabel="4天"></nz-option> |
||||
|
<nz-option [nzValue]="5" nzLabel="5天"></nz-option> |
||||
|
<nz-option [nzValue]="6" nzLabel="6天"></nz-option> |
||||
|
<nz-option [nzValue]="7" nzLabel="7天"></nz-option> |
||||
|
</nz-select> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item class="mt-4"> |
||||
|
<nz-form-label nzSpan="6"> 糖用量（周） </nz-form-label> |
||||
|
<nz-form-control nzSpan="12"> |
||||
|
<nz-input-group nzAddOnAfter="g"> |
||||
|
<nz-input-number |
||||
|
class="w-full" |
||||
|
[nzMin]="0" |
||||
|
[nzPrecision]="0" |
||||
|
nzPlaceHolder="请输入糖用量" |
||||
|
formControlName="sugar" |
||||
|
></nz-input-number> |
||||
|
</nz-input-group> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item class="mt-4"> |
||||
|
<nz-form-label nzSpan="6"> 油用量（周） </nz-form-label> |
||||
|
<nz-form-control nzSpan="12"> |
||||
|
<nz-input-group nzAddOnAfter="g"> |
||||
|
<nz-input-number |
||||
|
class="w-full" |
||||
|
[nzPrecision]="0" |
||||
|
[nzMin]="0" |
||||
|
nzPlaceHolder="请输入油用量" |
||||
|
formControlName="oil" |
||||
|
></nz-input-number> |
||||
|
</nz-input-group> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
<nz-form-item class="mt-4"> |
||||
|
<nz-form-label nzSpan="6"> 盐用量（周） </nz-form-label> |
||||
|
<nz-form-control nzSpan="12"> |
||||
|
<nz-input-group nzAddOnAfter="g"> |
||||
|
<nz-input-number |
||||
|
class="w-full" |
||||
|
[nzMin]="0" |
||||
|
[nzPrecision]="0" |
||||
|
nzPlaceHolder="请输入盐用量" |
||||
|
formControlName="salt" |
||||
|
></nz-input-number> |
||||
|
<!-- <input nz-input type="number" placeholder="请输入盐用量" formControlName="salt" /> --> |
||||
|
</nz-input-group> |
||||
|
</nz-form-control> |
||||
|
</nz-form-item> |
||||
|
</form> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #formControlErrorTpl let-control> |
||||
|
<form-error-tips [control]="control"></form-error-tips> |
||||
|
</ng-template> |
||||
|
|
||||
|
<ng-template #trendTpl> |
||||
|
<div class="flex items-center justify-between"> |
||||
|
<div class="flex-1"> |
||||
|
<nz-segmented [nzOptions]="['日均用量趋势', '周用量趋势']"></nz-segmented> |
||||
|
</div> |
||||
|
<div> |
||||
|
<button nz-button nzType="link" (click)="saveToImage()">保存为图片</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div #trendElementTpl class="h-80"></div> |
||||
|
</ng-template> |
||||
@ -0,0 +1,163 @@ |
|||||
|
import { Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core' |
||||
|
import { FormControl, FormGroup } from '@angular/forms' |
||||
|
import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer' |
||||
|
import { AnyObject, FormValidators, OrgDTO, TableListOption, Utils } from '@cdk/public-api' |
||||
|
import { ApiService } from '@cdk/services' |
||||
|
import { NzModalService } from 'ng-zorro-antd/modal' |
||||
|
import { lastValueFrom, tap } from 'rxjs' |
||||
|
import { NzMessageService } from 'ng-zorro-antd/message' |
||||
|
import { Router } from '@angular/router' |
||||
|
import { format, getWeek } from 'date-fns' |
||||
|
import { EChartsType, init } from 'echarts' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'app-salt-oil-sugar', |
||||
|
templateUrl: './salt-oil-sugar.component.html', |
||||
|
styleUrls: ['./salt-oil-sugar.component.less'], |
||||
|
}) |
||||
|
export class SaltOilSugarComponent { |
||||
|
constructor(private api: ApiService, private modal: NzModalService, private msg: NzMessageService) {} |
||||
|
|
||||
|
globalEnum = this.api.globalEnum |
||||
|
|
||||
|
statusTextMap: Record<string, string> = {} |
||||
|
|
||||
|
@ViewChild('formTpl') formTpl!: TemplateRef<{}> |
||||
|
|
||||
|
@ViewChild('trendTpl') trendTpl!: TemplateRef<{}> |
||||
|
|
||||
|
@ViewChild('trendElementTpl') trendElementTpl!: ElementRef<HTMLDivElement> |
||||
|
|
||||
|
sugerRef?: EChartsType |
||||
|
|
||||
|
public tableList = new TableListOption(this.fetchData.bind(this), { |
||||
|
frontPagination: false, |
||||
|
}) |
||||
|
|
||||
|
public queryForm = new FormGroup({ |
||||
|
date: new FormControl([]), |
||||
|
}) |
||||
|
|
||||
|
public recordForm = new FormGroup({ |
||||
|
week: new FormControl('', [FormValidators.required('请选择周')]), |
||||
|
day: new FormControl(5, [FormValidators.required('请选择供餐天数')]), |
||||
|
sugar: new FormControl('', []), |
||||
|
oil: new FormControl('', []), |
||||
|
salt: new FormControl('', []), |
||||
|
}) |
||||
|
|
||||
|
startTime: Date | null = null |
||||
|
|
||||
|
tableOrg: { [k: number]: OrgDTO } = {} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.statusTextMap = this.globalEnum.menuStatus.reduce((a, c) => { |
||||
|
return { |
||||
|
...a, |
||||
|
[String(c.label)]: c.value, |
||||
|
} |
||||
|
}, {} as Record<string, string>) |
||||
|
this.initTableList() |
||||
|
} |
||||
|
|
||||
|
initTableList() { |
||||
|
this.tableList.scroll = { x: '900px' } |
||||
|
this.tableList = this.tableList.setColumns([ |
||||
|
{ key: 'name', title: '周' }, |
||||
|
|
||||
|
{ key: 'meals', title: '日期' }, |
||||
|
{ key: 'month', title: '供餐天数' }, |
||||
|
{ key: 'day', title: '糖用量(周)/日均用量' }, |
||||
|
{ key: 'status', title: '油用量(周)/日均用量' }, |
||||
|
{ key: 'modify', title: '盐用量(周)/日均用量' }, |
||||
|
]) |
||||
|
|
||||
|
this.tableList = this.tableList.setOptions([ |
||||
|
{ |
||||
|
title: '编辑', |
||||
|
premissions: [], |
||||
|
onClick: this.openModal.bind(this), |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
title: '删除', |
||||
|
premissions: [], |
||||
|
onClick: this.deleteItem.bind(this), |
||||
|
}, |
||||
|
]) |
||||
|
} |
||||
|
|
||||
|
fetchData(query: AnyObject, pager: AnyObject) { |
||||
|
return this.api.getSaltOilSugarPage(pager, query).pipe() |
||||
|
} |
||||
|
|
||||
|
openModal(record?: any) { |
||||
|
this.modal.create({ |
||||
|
nzTitle: record ? '编辑记录' : '新增记录', |
||||
|
nzContent: this.formTpl, |
||||
|
nzOnOk: async () => { |
||||
|
if (Utils.validateFormGroup(this.recordForm)) { |
||||
|
const res = await lastValueFrom( |
||||
|
this.api.saveSaltOilSugar({ |
||||
|
...this.recordForm.value, |
||||
|
week: format(this.recordForm.value.week as unknown as Date, 'yyyy-ww'), |
||||
|
}), |
||||
|
) |
||||
|
this.msg.success(res.desc) |
||||
|
this.tableList.run() |
||||
|
} |
||||
|
|
||||
|
return false |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
deleteItem({ id }: any) { |
||||
|
this.modal.confirm({ |
||||
|
nzTitle: '警告', |
||||
|
nzContent: `是否要删除该记录？`, |
||||
|
nzOkDanger: true, |
||||
|
nzOnOk: async () => { |
||||
|
const res = await lastValueFrom(this.api.deleteSaltOilSugar(id)) |
||||
|
this.msg.success(res.desc) |
||||
|
this.tableList.run() |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
trend() { |
||||
|
this.modal.create({ |
||||
|
nzTitle: '糖油盐趋势', |
||||
|
nzContent: this.trendTpl, |
||||
|
nzWidth: 800, |
||||
|
nzFooter: null, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
saveToImage() {} |
||||
|
|
||||
|
genEchart() { |
||||
|
// const xAxis: string[] = Object.keys(this.suger['oil']).map((i: any) => weekdayMap[i])
|
||||
|
// const series: any[] = []
|
||||
|
// Object.entries(this.suger).forEach(([k, v]) => {
|
||||
|
// if (k !== 'crow') {
|
||||
|
// series.push({
|
||||
|
// type: 'line',
|
||||
|
// name: sugerMap.get(k),
|
||||
|
// data: Object.values(v as any),
|
||||
|
// })
|
||||
|
// }
|
||||
|
// })
|
||||
|
// const option = {
|
||||
|
// legend: {},
|
||||
|
// tooltip: { trigger: 'axis' },
|
||||
|
// xAxis: { type: 'category', data: xAxis },
|
||||
|
// yAxis: {},
|
||||
|
// series,
|
||||
|
// }
|
||||
|
// if (!this.sugerRef) {
|
||||
|
// this.sugerRef = init(this.trendElementTpl.nativeElement)
|
||||
|
// }
|
||||
|
// this.sugerRef.setOption(option)
|
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue