食谱展示界面开发
This commit is contained in:
huangdeliang
@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<h2>{{ this.data.name }}</h2>
|
||||
<div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
|
||||
<text-info
|
||||
v-for="con in info"
|
||||
:title="con.title"
|
||||
:key="con.title"
|
||||
:value="data[con.value]"
|
||||
extraclass="text-info-extra"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TextInfo from "@/components/TextInfo";
|
||||
|
||||
export default {
|
||||
name: "BodySignView",
|
||||
props: ["data"],
|
||||
components: {
|
||||
"text-info": TextInfo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
basicInfo: [
|
||||
[
|
||||
{ title: "性别", value: "sex" },
|
||||
{ title: "年龄", value: "age" },
|
||||
],
|
||||
[
|
||||
{ title: "电话", value: "phone" },
|
||||
{ title: "地域", value: "position" },
|
||||
],
|
||||
[
|
||||
{ title: "身高", value: "tall" },
|
||||
{ title: "体重", value: "weight" },
|
||||
],
|
||||
[
|
||||
{ title: "工作职业", value: "vocation" },
|
||||
{ title: "上夜班", value: "night" },
|
||||
],
|
||||
[
|
||||
{ title: "熬夜失眠", value: "staylate" },
|
||||
{ title: "运动情况", value: "walk" },
|
||||
],
|
||||
|
||||
[
|
||||
{ title: "浑身乏力", value: "weakness" },
|
||||
{ title: "经常运动", value: "motion" },
|
||||
],
|
||||
[
|
||||
{ title: "睡觉时间", value: "sleepTime" },
|
||||
{ title: "起床时间", value: "getupTime" },
|
||||
],
|
||||
[
|
||||
{ title: "饮食方式", value: "makeFoodType" },
|
||||
{ title: "饮食特点", value: "makeFoodTaste" },
|
||||
],
|
||||
[{ title: "便秘", value: "constipation" }],
|
||||
[{ title: "饮食备注", value: "remarks" }],
|
||||
[{ title: "减脂反弹", value: "rebound" }],
|
||||
[{ title: "意识到生活习惯是减脂关键", value: "crux" }],
|
||||
[{ title: "减脂遇到的困难", value: "difficulty" }],
|
||||
[{ title: "湿气数据", value: "moistureDate" }],
|
||||
[{ title: "气血数据", value: "bloodData" }],
|
||||
[{ title: "病史", value: "signStr" }],
|
||||
[{ title: "忌口或过敏源", value: "dishesIngredientId" }],
|
||||
[{ title: "方便沟通时间", value: "connectTime" }],
|
||||
[{ title: "备注", value: "remark" }],
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.msg-info {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.text-info-extra {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<h2>{{ this.data.name }}</h2>
|
||||
<div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
|
||||
<text-info
|
||||
v-for="con in info"
|
||||
:title="con.title"
|
||||
:key="con.title"
|
||||
:value="data[con.value]"
|
||||
extraclass="text-info-extra"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-collapse>
|
||||
<el-collapse-item
|
||||
v-for="item in healthyInvestigate"
|
||||
:key="item.title"
|
||||
:title="item.title"
|
||||
:name="item.title"
|
||||
>
|
||||
<div v-for="con in item.content" :key="con.value">
|
||||
<text-info
|
||||
:title="con.title"
|
||||
:value="data[con.value]"
|
||||
extraclass="text-info-extra"
|
||||
/>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TextInfo from "@/components/TextInfo";
|
||||
|
||||
export default {
|
||||
name: "HealthyView",
|
||||
props: ["data"],
|
||||
components: {
|
||||
"text-info": TextInfo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
basicInfo: [
|
||||
[
|
||||
{ title: "调理项目", value: "conditioningProject" },
|
||||
{ title: "电话", value: "phone" },
|
||||
],
|
||||
[
|
||||
{ title: "性别", value: "sex" },
|
||||
{ title: "年龄", value: "age" },
|
||||
],
|
||||
[
|
||||
{ title: "身高", value: "tall" },
|
||||
{ title: "体重", value: "weight" },
|
||||
],
|
||||
[{ title: "地域", value: "position" }],
|
||||
[{ title: "备注", value: "remark" }],
|
||||
],
|
||||
healthyInvestigate: [
|
||||
{
|
||||
title: "减脂经历评估",
|
||||
content: [
|
||||
{ title: "减脂经历", value: "experience" },
|
||||
{ title: "减肥遇到的困难", value: "difficulty" },
|
||||
{ title: "减脂是否反弹", value: "rebound" },
|
||||
{ title: "是否意识到生活习惯是减脂关键", value: "crux" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "食品安全评估",
|
||||
content: [
|
||||
{ title: "调味品种", value: "condiment" },
|
||||
{ title: "烹调方式", value: "cookingStyle" },
|
||||
{ title: "烹调频次", value: "cookingStyleRate" },
|
||||
{ title: "洗菜方式", value: "washVegetablesStyle" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "饮食结构评估",
|
||||
content: [
|
||||
{ title: "早餐习惯", value: "breakfastType" },
|
||||
{ title: "早餐吃的食物", value: "breakfastFood" },
|
||||
{ title: "午餐习惯", value: "lunchType" },
|
||||
{ title: "晚餐习惯", value: "dinner" },
|
||||
{ title: "正餐中素菜占比", value: "vegetableRate" },
|
||||
{ title: "最常吃的肉类", value: "commonMeat" },
|
||||
{ title: "晚餐时间", value: "dinnerTime" },
|
||||
{ title: "每周吃夜宵次数", value: "supperNum" },
|
||||
{ title: "夜宵通常吃的食物", value: "supperFood" },
|
||||
{ title: "食物的冷热偏好", value: "dietHotAndCold" },
|
||||
{ title: "食物的口味偏好", value: "dietFlavor" },
|
||||
{ title: "平均每周吃生蔬菜几次", value: "vegetablesNum" },
|
||||
{ title: "每周吃生蔬菜的频次类型", value: "vegetablesRateType" },
|
||||
{ title: "平均每天吃水果次数", value: "fruitsNum" },
|
||||
{ title: "吃水果的时间段", value: "fruitsTime" },
|
||||
{ title: "平时吃水果的频次", value: "fruitsRate" },
|
||||
{ title: "一餐吃几碗饭", value: "riceNum" },
|
||||
{ title: "吃几成饱", value: "riceFull" },
|
||||
{ title: "吃饭速度", value: "eatingSpeed" },
|
||||
{ title: "饮食特点", value: "makeFoodType" },
|
||||
{ title: "常吃的零食", value: "snacks" },
|
||||
{ title: "有无服用营养保健品", value: "healthProductsFlag" },
|
||||
{ title: "营养保健品品牌名", value: "healthProductsBrand" },
|
||||
{ title: "营养保健品产品名", value: "healthProductsName" },
|
||||
{ title: "服用营养保健品频次", value: "healthProductsWeekRate" },
|
||||
{ title: "忌口过敏食物", value: "dishesIngredient" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "生活习惯评估",
|
||||
content: [
|
||||
{ title: "每天的饮水量", value: "waterNum" },
|
||||
{ title: "喜欢喝什么水", value: "waterType" },
|
||||
{ title: "喝水习惯", value: "waterHabit" },
|
||||
{ title: "常喝的饮品的每周频次", value: "drinksNum" },
|
||||
{ title: "是否喝酒", value: "drinkWineFlag" },
|
||||
{ title: "喝酒种类", value: "drinkWineClassify" },
|
||||
{ title: "对应酒的量", value: "drinkWineAmount" },
|
||||
{ title: "是否抽烟", value: "smokeFlag" },
|
||||
{ title: "抽烟频次和烟龄", value: "smokeRate" },
|
||||
{ title: "是否经常抽二手烟", value: "secondSmoke" },
|
||||
{ title: "工作行业", value: "workIndustry" },
|
||||
{ title: "工作性质", value: "workType" },
|
||||
{ title: "排便次数", value: "defecationNum" },
|
||||
{ title: "排便时间段", value: "defecationTime" },
|
||||
{ title: "排便的形状", value: "defecationShape" },
|
||||
{ title: "排便的气味", value: "defecationSmell" },
|
||||
{ title: "排便的速度", value: "defecationSpeed" },
|
||||
{ title: "排便的颜色", value: "defecationColor" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "运动习惯评估",
|
||||
content: [
|
||||
{ title: "每周运动次数", value: "motionNum" },
|
||||
{ title: "每次运动的时长", value: "motionDuration" },
|
||||
{ title: "每天运动的时间", value: "motionTime" },
|
||||
{ title: "运动", value: "motion" },
|
||||
{ title: "运动场地", value: "motionField" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "睡眠质量评估",
|
||||
content: [
|
||||
{ title: "睡觉时间", value: "sleepTime" },
|
||||
{ title: "睡眠质量", value: "sleepQuality" },
|
||||
{ title: "是否有辅助入睡药物", value: "sleepDrugFlag" },
|
||||
{ title: "辅助睡眠类药物名称", value: "sleepDrug" },
|
||||
{ title: "是否经常熬夜", value: "stayupLateFlag" },
|
||||
{ title: "熬夜频次", value: "stayupLateWeekNum" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "既往病史/用药史评估",
|
||||
content: [
|
||||
{ title: "病史体征", value: "physicalSigns" },
|
||||
{ title: "湿气数据", value: "moistureDate" },
|
||||
{ title: "气血数据", value: "bloodData" },
|
||||
{ title: "家族疾病史", value: "familyIllnessHistory" },
|
||||
{ title: "手术史", value: "operationHistory" },
|
||||
{ title: "近期是否做过手术", value: "nearOperationFlag" },
|
||||
{ title: "手术恢复情况", value: "recoveryeSituation" },
|
||||
{ title: "是否长期服用药物", value: "longEatDrugFlag" },
|
||||
{ title: "长期服用的药物", value: "longEatDrugClassify" },
|
||||
{ title: "是否出现过过敏症状", value: "allergyFlag" },
|
||||
{ title: "过敏症状", value: "allergySituation" },
|
||||
{ title: "过敏源", value: "allergen" },
|
||||
{ title: "忌口过敏食物", value: "dishesIngredient" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "体检报告",
|
||||
content: [
|
||||
{ title: "体检报告（1）", value: "medicalReport_one" },
|
||||
{ title: "体检报告（2）", value: "medicalReport_two" },
|
||||
{ title: "体检报告（3）", value: "medicalReport_three" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.msg-info {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.text-info-extra {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -87,7 +87,7 @@ export default {
|
||||
`${seriesName.substring(0, 1)}Weight`
|
||||
].toFixed(1);
|
||||
arr.push(
|
||||
`${cur.marker} ${nutriName}：${heatVal}千卡（${weightVal}克）`
|
||||
`${cur.marker} ${nutriName}：${weightVal}克（${heatVal}千卡）`
|
||||
);
|
||||
return arr;
|
||||
},
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
source,
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
top: 55,
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 10,
|
||||
@ -121,6 +121,10 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "热量（千卡）",
|
||||
nameTextStyle: {
|
||||
color: "#262626",
|
||||
},
|
||||
},
|
||||
series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
|
||||
name: dim,
|
||||
|
||||
@ -14,25 +14,14 @@
|
||||
class="small_table"
|
||||
>
|
||||
<el-table-column label="营养" prop="type" align="center" width="60" />
|
||||
<el-table-column
|
||||
label="重量(g)"
|
||||
prop="weight"
|
||||
align="center"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
label="热量(Kcal)"
|
||||
prop="heat"
|
||||
align="center"
|
||||
width="90"
|
||||
/>
|
||||
<el-table-column
|
||||
label="热量占比"
|
||||
prop="heatRate"
|
||||
align="center"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column label="蛋白质" prop="p" align="center" width="80" />
|
||||
<el-table-column label="脂肪" prop="f" align="center" width="80" />
|
||||
<el-table-column label="碳水" prop="c" align="center" width="80" />
|
||||
</el-table>
|
||||
<div class="summary">
|
||||
<div style="font-size: 12px; color: #606266;">总热量约等于</div>
|
||||
<div style="color: #515a6e; font-weight: bold">{{ totalHeat.toFixed(1) }}千卡</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -69,35 +58,37 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
totalHeat: 0,
|
||||
nameDict: {
|
||||
p: "蛋白质",
|
||||
f: "脂肪",
|
||||
c: "碳水",
|
||||
},
|
||||
typeDict: {
|
||||
Weight: "摄入量",
|
||||
Rate: "供能比",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
mData() {
|
||||
const [data] = this.data;
|
||||
let totalHeat = 0;
|
||||
return data
|
||||
? ["p", "f", "c"].map((type) => {
|
||||
if (totalHeat === 0) {
|
||||
totalHeat = ["p", "f", "c"].reduce((heat, cur) => {
|
||||
heat += data[`${cur}Heat`];
|
||||
return heat;
|
||||
}, 0);
|
||||
}
|
||||
return {
|
||||
type: this.nameDict[type],
|
||||
weight: data[`${type}Weight`].toFixed(1),
|
||||
heat: data[`${type}Heat`].toFixed(1),
|
||||
heatRate: `${((data[`${type}Heat`] / totalHeat) * 100).toFixed(
|
||||
2
|
||||
)}%`,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
if (!data) {
|
||||
this.totalHeat = 0;
|
||||
return [];
|
||||
}
|
||||
this.totalHeat = data.cHeat + data.fHeat + data.pHeat;
|
||||
const mData = ["Weight", "Rate"].map((t, idx) => ({
|
||||
type: this.typeDict[t],
|
||||
...["p", "f", "c"].reduce((obj, cur) => {
|
||||
obj[cur] = idx
|
||||
? `${((data[`${cur}Heat`] / this.totalHeat) * 100).toFixed(2)}%`
|
||||
: `${data[`${cur}Weight`].toFixed(1)}克`;
|
||||
return obj;
|
||||
}, {}),
|
||||
}));
|
||||
console.log(mData);
|
||||
return mData;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
@ -121,10 +112,10 @@ export default {
|
||||
this.chart.clear();
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: `${data.name}营养统计`,
|
||||
text: `${data.name}营养分析`,
|
||||
},
|
||||
tooltip: {
|
||||
position: 'right',
|
||||
position: "right",
|
||||
trigger: "item",
|
||||
appendToBody: true,
|
||||
formatter: (params) => {
|
||||
@ -136,9 +127,9 @@ export default {
|
||||
} = params;
|
||||
return [
|
||||
`${marker} ${name}`,
|
||||
`含量：${oriData[`${dim}Weight`].toFixed(1)}克`,
|
||||
`热量：${value.toFixed(1)}千卡`,
|
||||
`热量占比：${percent}%`,
|
||||
`摄入量：${oriData[`${dim}Weight`].toFixed(1)}克`,
|
||||
`摄入热量：${value.toFixed(1)}千卡`,
|
||||
`供能比：${percent}%`,
|
||||
].join("</br>");
|
||||
},
|
||||
},
|
||||
@ -199,5 +190,17 @@ export default {
|
||||
}
|
||||
}
|
||||
// }
|
||||
|
||||
.summary {
|
||||
padding: 2px;
|
||||
border-bottom: 1px solid #dfe6ec;
|
||||
border-left: 1px solid #dfe6ec;
|
||||
border-right: 1px solid #dfe6ec;
|
||||
|
||||
& > div {
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
<ConfigDishes
|
||||
v-show="active === 1"
|
||||
v-bind="selDishes"
|
||||
:typeOptions="typeOptions"
|
||||
:typeOptions="dishesTypeOptions"
|
||||
@onChange="handleOnConfigChange"
|
||||
/>
|
||||
</div>
|
||||
@ -65,7 +65,7 @@ export default {
|
||||
return {
|
||||
visible: false,
|
||||
active: 0,
|
||||
typeOptions: [],
|
||||
dishesTypeOptions: [],
|
||||
selDishes: {
|
||||
name: "",
|
||||
type: "",
|
||||
@ -76,7 +76,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["dishesTypeOptions"]),
|
||||
...mapState(["typeOptions"]),
|
||||
},
|
||||
methods: {
|
||||
showDrawer() {
|
||||
@ -95,11 +95,11 @@ export default {
|
||||
// console.log(data);
|
||||
this.selDishes = data;
|
||||
this.active = 1;
|
||||
this.typeOptions = data.type.split(",").reduce((arr, cur, idx) => {
|
||||
this.dishesTypeOptions = data.type.split(",").reduce((arr, cur, idx) => {
|
||||
if (idx === 0) {
|
||||
this.selDishes.type = cur;
|
||||
}
|
||||
const tarOpt = this.dishesTypeOptions.find(
|
||||
const tarOpt = this.typeOptions.find(
|
||||
(obj) => obj.dictValue === cur
|
||||
);
|
||||
if (tarOpt) {
|
||||
|
||||
@ -24,8 +24,8 @@ const {
|
||||
mapGetters,
|
||||
} = createNamespacedHelpers("recipes");
|
||||
|
||||
import HealthyView from "./HealthyView";
|
||||
import BodySignView from "./BodySignView";
|
||||
import HealthyView from "@/components/HealthyView";
|
||||
import BodySignView from "@/components/BodySignView";
|
||||
import RecipesView from "./RecipesView/index";
|
||||
import RecommondView from "./RecommondView";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user