kely
2 years ago
7 changed files with 444 additions and 101 deletions
@ -1,14 +1,15 @@ |
|||
export * from "./dashboard/dashboard.component"; |
|||
export * from "./login/login.component"; |
|||
export * from "./meal-setting/meal-setting.component"; |
|||
export * from "./data-vis/data-vis.component"; |
|||
export * from "./food/food.component"; |
|||
export * from "./dish/dish.component"; |
|||
export * from './dashboard/dashboard.component' |
|||
export * from './login/login.component' |
|||
export * from './meal-setting/meal-setting.component' |
|||
export * from './data-vis/data-vis.component' |
|||
export * from './food/food.component' |
|||
export * from './dish/dish.component' |
|||
|
|||
export * from "./system/org-info/org-info.component"; |
|||
export * from "./system/user-manage/user-manage.component"; |
|||
export * from './system/org-info/org-info.component' |
|||
export * from './system/user-manage/user-manage.component' |
|||
|
|||
export * from "./ingredients/ingredient-list/ingredient-list.component"; |
|||
export * from "./ingredients/ingredient-form/ingredient-form.component"; |
|||
export * from "./ingredients/ingredient-preview-page/ingredient-preview-page.component"; |
|||
export * from "./ingredients/ingredient-release/ingredient-release.component"; |
|||
export * from './ingredients/ingredient-list/ingredient-list.component' |
|||
export * from './ingredients/ingredient-form/ingredient-form.component' |
|||
export * from './ingredients/ingredient-preview-page/ingredient-preview-page.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