root
/
diet-web-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

流程 & 打印顺序

main
kkerwin 1 year ago
parent
03588acf6f
commit
08a55e9dcd
8 changed files with 258 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      projects/admin/src/app/pages/dish/dish.component.html
  2. 55
      projects/cdk/src/services/api.service.ts
  3. 7
      projects/cdk/src/types/index.ts
  4. 197
      projects/client/src/app/pages/dashboard/dashboard.component.html
  5. 67
      projects/client/src/app/pages/dashboard/dashboard.component.less
  6. 9
      projects/client/src/app/pages/data-vis/data-vis.component.ts
  7. 2
      projects/client/src/app/pages/dish/dish.component.html
  8. 25
      projects/client/src/app/pages/system/org-info/org-info.component.ts

2
projects/admin/src/app/pages/dish/dish.component.html
View File

@ -115,7 +115,7 @@
</th>
</tr>
<tr>
<th>
<th class="text-left">
名称
</th>
<th class="text-center">

55
projects/cdk/src/services/api.service.ts
View File

@ -14,6 +14,7 @@ import {
AdminAccountDTO,
OrgConfigDTO,
CategoryDTO,
NutrientDTO,
} from "@cdk/public-api";
export const PROJECT_NAME = new InjectionToken<string>("projectName");
@ -34,6 +35,24 @@ export class ApiService {
globalEnum!: GlobalEnum;
// 能量、蛋白质、脂肪、碳水化合物、糖、钠/食盐、钙、铁、锌、维生素A、维生素B1、维生素B2、维生素C、膳食纤维
nutrientSort = new Map([
["energy", { sort: 0 }],
["protein", { sort: 1 }],
["fat", { sort: 2 }],
["carbs", { sort: 3 }],
["sugar", { sort: 4 }],
["sodium", { sort: 5 }],
["calcium", { sort: 6 }],
["iron", { sort: 7 }],
["zinc", { sort: 8 }],
["va", { sort: 9 }],
["vb1", { sort: 10 }],
["vb2", { sort: 11 }],
["vc", { sort: 12 }],
["fiber", { sort: 13 }],
]);
initAccount() {
try {
const stragedAccount = localStorage.getItem(this.accountKey);
@ -57,6 +76,12 @@ export class ApiService {
return v.map((i) => ({ label: i.key, value: i.value }));
}
private _sortNutrient(n: NutrientDTO[]) {
return n.map((i) => {
return { ...i, ...this.nutrientSort.get(i.key) };
});
}
getAllEnum(force?: boolean): Observable<GlobalEnum> {
if (this.globalEnum && !force) {
return of(this.globalEnum);
@ -67,6 +92,7 @@ export class ApiService {
...res.body,
mealType: this._formatEnum(res.body.mealType),
menuStatus: this._formatEnum(res.body.menuStatus),
nutrient: this._sortNutrient(res.body.nutrient),
};
}),
tap((r) => {
@ -96,6 +122,14 @@ export class ApiService {
);
}
getOrgInfo() {
return this.http.get<ResponseType>("/api/vender/info").pipe(
tap((res) => {
this.account["vender"] = res.body;
})
);
}
getOrgConfig() {
return this.http.get<ResponseType<OrgConfigDTO>>("/api/vender/config");
}
@ -347,7 +381,26 @@ export class ApiService {
getDishLabel(ids: (string | number)[]) {
const query = Utils.objectStringify({ ids });
return this.http.get<ResponseType<any[]>>(`/api/dish/label?${query}`);
return this.http.get<ResponseType<any[]>>(`/api/dish/label?${query}`).pipe(
map((res) => {
return {
...res,
body: res.body.map((i) => {
return {
...i,
component: (i.component as AnyObject[])
.map((c) => {
return {
...c,
...this.nutrientSort.get(c["key"]),
};
})
.sort((a, b) => a["sort"]! - b["sort"]!),
};
}),
};
})
);
}
saveDish(v: AnyObject) {

7
projects/cdk/src/types/index.ts
View File

@ -6,6 +6,13 @@ export type DecText = number | string;
export type Augmented<O extends object> = O & AnyObject;
export type NutrientInterface = {
key: string;
measurement: string;
nrv: number;
value: string;
};
export type OptionItemInterface = Augmented<{
label: string;
value: string;

197
projects/client/src/app/pages/dashboard/dashboard.component.html
View File

@ -1,74 +1,159 @@
<app-page [pageTitle]="'使用流程'">
<nz-card>
<div class="flow">
<div class="ellipse item">
开始
<nz-card class="mb-4">
<div class="flex items-center">
<div class="flow-title">
基础设计及菜品管理
</div>
<div class="item">
进入【配餐设置】，修改三餐摄入能量、营养比例
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
</div>
<div class="item">
进入【菜品管理】，新增/编辑菜品，并打印营养标签
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
<div nz-row [nzGutter]="12" class="flex-1">
<div nz-col nzSpan="8">
<div class="card flex items-center">
<div class="icon">1</div>
<div class="flex-1">
进入【配餐设置】，修改三餐摄入能量、营养比例
</div>
</div>
</div>
<div nz-col nzSpan="8">
<div class="card flex items-center">
<div class="icon">2</div>
<div class="flex-1">
进入[菜品管理]，新增/编辑菜品并保存
</div>
</div>
</div>
<div nz-col nzSpan="8">
<div class="card flex items-center">
<div class="icon">3</div>
<div class="flex-1">
菜品管理列表找到所需菜品,下载[营养标签]
</div>
</div>
</div>
</div>
<div class="item">
进入【食谱管理-食谱库】，创建食谱
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
</div>
</nz-card>
<nz-card class="mb-4" nzTitle="">
<div class="flex items-center">
<div class="flow-title">
创建食谱
</div>
<div class="item">
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
<div>
1、填写食谱名称
<div nz-row [nzGutter]="[12,12]">
<div nz-col nzSpan="8">
<div class="card flex min-h-[186px]">
<div class="icon">4</div>
<div class="flex-1">
进入[食谱管理-食谱库]，创建食谱
</div>
</div>
</div>
<div>
2、选择营养标准
<div nz-col nzSpan="8">
<div class="card flex ">
<div class="icon">5</div>
<div class="flex-1">
<p>
配置食谱基础信息:
</p>
<ul class="ul">
<li>
填写食谱名称
</li>
<li>
选择营养标准
</li>
<li>
选择适用月份
</li>
<li>
选择配餐天数
</li>
<li>
选择配餐餐次
</li>
</ul>
</div>
</div>
</div>
<div>
3、选择适用月份
<div nz-col nzSpan="8">
<div class="card flex min-h-[186px]">
<div class="icon">6</div>
<div class="flex-1">
<p>按实际情况设置菜品:</p>
<ul class="ul">
<li>
设置每餐菜品及重量
</li>
<li>
根据营养分析实时调整菜品
</li>
</ul>
</div>
</div>
</div>
<div>
4、选择配餐天数
<div nz-col nzSpan="8">
<div class="card flex">
<div class="icon">7</div>
<div class="flex-1">
<p>
完成食谱配置后进行食谱分析并确认食谱:
</p>
<ul class="ul">
<li>
点击右上角[食谐预览]完成查看食谱全貌
</li>
<li>
确认食谱应用分析结果
</li>
</ul>
</div>
</div>
</div>
<div>
5、选择配餐餐次
<div nz-col nzSpan="8">
<div class="card flex min-h-[120px]">
<div class="icon">8</div>
<div class="flex-1">
保存食谱
</div>
</div>
</div>
</div>
<div class="item">
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
<div>
1、按餐次添加菜品及重量
</div>
<div>
2、根据营养分析实时调整菜品
</div>
</div>
</nz-card>
<nz-card class="mb-4">
<div class="flex items-center">
<div class="flow-title">
食谱审核及发布
</div>
<div class="item">
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
<div>
1、点击右上角【食谱预览】完成查看食谱全貌
<div nz-row [nzGutter]="[12,12]">
<div nz-col nzSpan="8">
<div class="card flex items-center">
<div class="icon">9</div>
<div class="flex-1">
在食谱列表中找到食谱，发起审核
</div>
</div>
</div>
<div>
2、确认食谱应用分析结果
<div nz-col nzSpan="8">
<div class="card flex items-center">
<div class="icon">10</div>
<div class="flex-1">
等待审核通过后返回食谱列表查看进行发布
</div>
</div>
</div>
<div nz-col nzSpan="8">
<div class="card flex items-center">
<div class="icon">11</div>
<div class="flex-1">
填写发布时间等信息确认发布
</div>
</div>
</div>
</div>
<div class="item">
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
保存食谱
</div>
<div class="item">
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
在食谱库列表中发起审核
</div>
<div class="item">
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
等待审核通过后发布食谱
</div>
<div class="item ellipse">
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span>
结束
</div>
</div>
</nz-card>
</app-page>

67
projects/client/src/app/pages/dashboard/dashboard.component.less
View File

@ -1,39 +1,42 @@
.flow {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.card {
padding: 24px;
border-radius: 6px;
background-color: #e9f1fe;
.item {
width: 256px;
margin-bottom: 48px;
padding: 24px;
position: relative;
border-radius: 4px;
border: 1px solid #333;
text-align: center;
.icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #2e7ef8;
color: #fff;
font-size: 26px;
font-weight: bold;
margin-right: 12px;
}
&:not(:last-child):after {
content: '';
width: 1px;
height: 48px;
position: absolute;
bottom: -48px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
}
p {
margin-bottom: 6px;
}
&.ellipse {
width: 180px;
border-radius: 50%;
}
.ul {
padding-left: 20px;
.arrow {
position: absolute;
left: 50%;
top: -12px;
transform: translateX(-50%);
li {
list-style: disc !important;
}
}
}
.flow-title {
width: 100px;
margin-right: 12px;
font-size: 18px;
font-weight: bold;
&+div {
flex: 1;
}
}

9
projects/client/src/app/pages/data-vis/data-vis.component.ts
View File

@ -42,9 +42,12 @@ export class DataVisComponent implements AfterViewInit {
logo = "";
ngOnInit(): void {
const account = this.api.account;
this.orgName = account?.vender?.name ?? "";
this.logo = account?.vender?.icon ?? "";
this.api.getOrgInfo().subscribe((res) => {
const account = this.api.account;
this.orgName = account?.vender?.name ?? "";
this.logo = account?.vender?.icon ?? "";
});
interval(1000)
.pipe(takeUntil(this.destroy$))

2
projects/client/src/app/pages/dish/dish.component.html
View File

@ -122,7 +122,7 @@
</th>
</tr>
<tr>
<th>
<th class="text-left">
名称
</th>
<th class="text-center">

25
projects/client/src/app/pages/system/org-info/org-info.component.ts
View File

@ -56,18 +56,19 @@ export class OrgInfoComponent implements OnInit {
if (Utils.validateFormGroup(e.formGroup)) {
const res = await lastValueFrom(this.api.saveOrg({ ...e.formGroup.value, venderId: this.account.vender.id }));
this.msg.success(res.desc);
localStorage.setItem(
this.api.accountKey,
JSON.stringify({
...this.account,
vender: {
...this.account.vender,
...e.formGroup.value,
venderId: this.account.vender.id,
},
})
);
window.location.reload();
// localStorage.setItem(
// this.api.accountKey,
// JSON.stringify({
// ...this.account,
// vender: {
// ...this.account.vender,
// ...e.formGroup.value,
// venderId: this.account.vender.id,
// },
// })
// );
// window.location.reload();
this.api.getOrgInfo().subscribe(() => {});
return true;
}
return false;

Write Preview
Loading…
Cancel
Save