This commit is contained in:
xiezhijun
2021-03-23 11:34:29 +08:00
13 changed files with 831 additions and 698 deletions

View File

@ -105,6 +105,24 @@ export default {
open: false,
basicInfo,
healthyInvestigate: [
{
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: [
@ -198,24 +216,7 @@ export default {
{ 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: [

View File

@ -254,21 +254,28 @@ const actions = {
const tarDetail = cur.detail.find(
obj => obj.id === igdData.id
);
if (tarDetail) {
igdArr.push({
id: igdData.id,
name: igdData.name,
carbonRatio: igdData.carbonRatio,
fatRatio: igdData.fatRatio,
proteinRatio: igdData.proteinRatio,
cusUnit: tarDetail.cus_unit,
cusWeight: tarDetail.cus_weight,
weight: parseFloat(tarDetail.weight),
notRec: igdData.notRec,
rec: igdData.rec,
type: igdData.type
});
if (tarDetail && tarDetail.weight === -1) {
return igdArr;
}
igdArr.push({
id: igdData.id,
name: igdData.name,
carbonRatio: igdData.carbonRatio,
fatRatio: igdData.fatRatio,
proteinRatio: igdData.proteinRatio,
cusUnit: tarDetail
? tarDetail.cus_unit
: igdData.cusUnit,
cusWeight: tarDetail
? tarDetail.cus_weight
: igdData.cusWeight,
weight: parseFloat(
tarDetail ? tarDetail.weight : igdData.weight
),
notRec: igdData.notRec,
rec: igdData.rec,
type: igdData.type
});
}
return igdArr;
}, [])
@ -400,17 +407,12 @@ const actions = {
}));
} else if (actionType === "delIgd") {
// 删除某食材
params.detail = mTarDishes.igdList.reduce((arr, igd) => {
if (igd.id !== payload.igdId) {
arr.push({
id: igd.id,
weight: igd.weight,
cus_unit: igd.cusUnit,
cus_weight: igd.cusWeight
});
}
return arr;
}, []);
params.detail = mTarDishes.igdList.map(igd => ({
id: igd.id,
weight: igd.id === payload.igdId ? -1 : igd.weight,
cus_unit: igd.cusUnit,
cus_weight: igd.cusWeight
}));
} else if (actionType === "unit" || actionType === "weight") {
// 修改食材
params.detail = mTarDishes.igdList.map(igd => {
@ -512,13 +514,13 @@ const getters = {
(obj, cur) => {
cur.igdList.forEach(igd => {
obj.pWeight += (igd.weight / 100) * igd.proteinRatio;
obj.pHeat = obj.pWeight * 4;
obj.pCalories = obj.pWeight * 4;
obj.fWeight += (igd.weight / 100) * igd.fatRatio;
obj.fHeat = obj.fWeight * 9;
obj.fCalories = obj.fWeight * 9;
obj.cWeight += (igd.weight / 100) * igd.carbonRatio;
obj.cHeat = obj.cWeight * 4;
obj.totalHeat = obj.pHeat + obj.fHeat + obj.cHeat;
obj[`heat${cur.type}`] +=
obj.cCalories = obj.cWeight * 4;
obj.totalCalories = obj.pCalories + obj.fCalories + obj.cCalories;
obj[`calories${cur.type}`] +=
(igd.weight / 100) * igd.proteinRatio * 4 +
(igd.weight / 100) * igd.fatRatio * 9 +
(igd.weight / 100) * igd.carbonRatio * 4;
@ -532,17 +534,17 @@ const getters = {
pWeight: 0,
fWeight: 0,
cWeight: 0,
pHeat: 0,
fHeat: 0,
cHeat: 0,
pCalories: 0,
fCalories: 0,
cCalories: 0,
//
totalHeat: 0,
heat1: 0,
heat2: 0,
heat3: 0,
heat4: 0,
heat5: 0,
heat6: 0,
totalCalories: 0,
calories1: 0,
calories2: 0,
calories3: 0,
calories4: 0,
calories5: 0,
calories6: 0,
//
totalWeight: 0,
weight1: 0,
@ -554,7 +556,7 @@ const getters = {
}
)
);
console.log(nutriData);
// console.log(nutriData);
return nutriData;
},
verifyNotRecData: state => {

View File

@ -1,180 +0,0 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
import VueScrollTo from "vue-scrollto";
require("@/utils/echarts/myShine");
import resize from "@/views/dashboard/mixins/resize";
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("recipes");
const animationDuration = 6000;
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
data: {
type: Array,
default: [],
},
max: {
type: Number,
default: 0,
},
},
data() {
return {
chart: null,
nameDict: {
pHeat: "蛋白质",
fHeat: "脂肪",
cHeat: "碳水",
},
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
updated() {
// console.log("updated");
},
methods: {
...mapMutations(["setCurrentDay"]),
initChart() {
this.chart = echarts.init(this.$el, "myShine");
this.chart.on("click", this.handleOnClick);
this.updateChart(this.data.length > 0 ? this.data : {});
},
updateChart(source) {
// console.log(this.max);
this.chart.clear();
this.chart.setOption({
title: {
text: "营养统计",
},
tooltip: {
trigger: "axis",
// appendToBody: true,
formatter: (params) => {
// console.log(params);
const [param] = params;
const { name } = param;
let totalHeat = 0;
const tooltips = params.reduce(
(arr, cur) => {
const { value, seriesName } = cur;
const nutriName = this.nameDict[seriesName];
totalHeat += value[seriesName];
const heatVal = value[seriesName].toFixed(1);
const weightVal = value[
`${seriesName.substring(0, 1)}Weight`
].toFixed(1);
arr.push(
`${cur.marker} ${nutriName}${weightVal}克(${heatVal}千卡)`
);
return arr;
},
[name]
);
tooltips[0] += ` - 共${totalHeat.toFixed(1)}千卡`;
return tooltips.join("</br>");
},
},
dataset: {
dimensions: [
"name",
"pWeight",
"pHeat",
"fWeight",
"fHeat",
"cWeight",
"cHeat",
],
source,
},
grid: {
top: 50,
left: 10,
right: 50,
bottom: 10,
containLabel: true,
},
xAxis: {
type: "category",
// axisLabel: {
// rotate: 45,
// },
},
yAxis: {
type: "value",
name: "热量/千卡",
nameTextStyle: {
color: "#262626",
fontSize: 12,
},
},
series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
name: dim,
type: "bar",
barWidth: 24,
stack: "bar",
encode: {
y: dim,
x: 0,
},
markLine: {
data: [{ name: "BMR", yAxis: this.max ? this.max - 400 : 0 }],
symbol: "none",
lineStyle: {
color: "#d96969",
},
},
itemStyle: {
borderWidth: 2,
borderColor: "#fff",
},
})),
});
},
handleOnClick(params) {
// console.log(params);
const { dataIndex } = params;
this.setCurrentDay({ currentDay: dataIndex });
VueScrollTo.scrollTo(`#recipes${dataIndex}`, 500, {
container: "#recipes_content",
});
},
},
watch: {
data(newVal, oldVal) {
if (newVal) {
this.$nextTick(() => {
this.updateChart(newVal);
});
}
},
},
};
</script>

View File

@ -0,0 +1,276 @@
<template>
<div ref="echart" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("@/utils/echarts/myShine");
import resize from "@/views/dashboard/mixins/resize";
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapState } = createNamespacedHelpers("recipes");
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "200px",
},
data: {
type: Array,
default: [],
},
subTitle: {
type: String,
default: "",
},
title: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
},
data() {
return {
chart: null,
};
},
computed: {},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.echart, "myShine");
if (this.data.length > 0) {
this.updateChart(this.data);
}
},
backToAll() {
this.resetCurrentDay({ currentDay: -1 });
},
getTooltipArr(params) {
// console.log(params);
let tooltips;
const { name, marker, percent, value } = params;
switch (this.type) {
case "nutrition":
const weight = value[1] / (name === "脂肪" ? 9 : 4);
tooltips = [
`${marker} ${name}`,
`摄入量:${weight.toFixed(1)}`,
`摄入热量:${value[1].toFixed(1)}千卡`,
`供能比:${percent}%`,
];
break;
case "calories":
tooltips = [
`${marker} ${name}`,
`热量:${value[1].toFixed(1)}千卡`,
`占比:${percent}%`,
];
break;
case "weight":
tooltips = [
`${marker} ${name}`,
`质量:${value[1].toFixed(1)}`,
`占比:${percent}%`,
];
break;
}
return tooltips.join("</br>");
},
updateChart(source) {
// console.log(source);
const total = source.reduce((acc, cur) => acc + cur[1], 0);
this.chart.clear();
const option = {
title: {
text: this.title,
subtext: this.subTitle,
},
legend: {
left: 100,
itemWidth: 8,
itemHeight: 8,
pageIconSize: 10,
textStyle: {
fontSize: 10,
},
},
dataset: {
source,
},
tooltip: {
trigger: "item",
appendToBody: true,
formatter: this.getTooltipArr,
},
graphic: [
{
type: "group",
top: 60,
left: 8,
silent: true,
children: [
{
type: "text",
style: {
text: this.type === "weight" ? "总质量" : "总热量约",
fill: "#606266",
},
},
{
type: "text",
top: 18,
left: 8,
style: {
text: `${total.toFixed(1)}${
this.type === "weight" ? "克" : "千卡"
}`,
font: '14px "Microsoft YaHei", sans-serif',
},
},
],
},
{
type: "group",
top: 36,
right: 0,
silent: true,
children: source.map((item, idx) => {
const data =
this.type == "nutrition"
? item[1] / (idx === 1 ? 9 : 4)
: item[1];
return {
type: "text",
top: idx * 20,
right: 10,
style: {
text: `${item[0]}${data.toFixed(1)}${
this.type === "calories" ? "千卡" : "克"
}${` (${((item[1] / total) * 100).toFixed(1)}%`})`,
fill: "#606266",
},
};
}),
},
],
series: [
{
type: "pie",
radius: [0, 60],
center: ["42%", "55%"],
// labelLine: {
// length: 5,
// length2: 5,
// },
label: {
show: true,
position: "inside",
color: "#fff",
fontSize: 12,
fontWeight: "bold",
},
itemStyle: {
borderWidth: 1,
borderColor: "#fff",
},
},
],
};
// console.log(option);
this.chart.setOption(option);
},
},
watch: {
data(newVal, oldVal) {
if (newVal) {
this.$nextTick(() => {
this.updateChart(newVal);
});
}
},
},
};
</script>
<style lang="scss" scoped>
/deep/ :focus {
outline: 0;
}
.aspect_pie_chart_wrapper {
width: 100%;
display: flex;
position: relative;
& > div:nth-child(1) {
// width: 200px
}
.small_table {
.my_cell {
padding: 2px 0 !important;
}
}
.summary {
padding: 2px;
border-bottom: 1px solid #dfe6ec;
border-left: 1px solid #dfe6ec;
border-right: 1px solid #dfe6ec;
& > div {
padding: 3px;
text-align: center;
}
}
.see_all {
position: absolute;
bottom: 4px;
left: 24px;
padding: 0;
}
.icon_btns {
position: absolute;
right: 0;
em {
display: inline-block;
padding: 4px;
cursor: pointer;
}
.sel_icon {
color: #1890ff;
}
}
.table_zone {
margin-top: 26px;
}
}
</style>

View File

@ -0,0 +1,115 @@
<template>
<div class="daily_analyze_com_wrapper">
<pie-chart
title="营养统计"
:data="nutritionSource"
type="nutrition"
width="364px"
:subTitle="subTitle"
/>
<pie-chart
title="热量统计"
:data="caloriesSource"
type="calories"
width="364px"
:subTitle="subTitle"
/>
<pie-chart
title="质量统计"
:data="weightSource"
type="weight"
width="364px"
:subTitle="subTitle"
/>
<el-button size="mini" type="text" @click="backToAll" class="see_all"
>查看全部</el-button
>
</div>
</template>
<script>
import PieChart from "./PieChart";
import { createNamespacedHelpers } from "vuex";
const { mapGetters, mapMutations } = createNamespacedHelpers("recipes");
export default {
name: "DailyAnalyzeCom",
data() {
return {
subTitle: "",
};
},
components: {
PieChart,
},
methods: {
backToAll() {
this.resetCurrentDay({ currentDay: -1 });
},
...mapMutations(["resetCurrentDay"]),
},
computed: {
nutritionSource() {
const [data] = this.analyseData;
this.subTitle = data.name;
return [
["蛋白质", data.pCalories],
["脂肪", data.fCalories],
["碳水", data.cCalories],
];
},
caloriesSource() {
const [data] = this.analyseData;
const source = [
["早餐", data.calories1],
["午餐", data.calories3],
["晚餐", data.calories5],
];
if (data.calories2) {
source.push(["早加餐", data.calories2]);
}
if (data.calories4) {
source.push(["午加餐", data.calories4]);
}
if (data.calories6) {
source.push(["晚加餐", data.calories6]);
}
return source;
},
weightSource() {
const [data] = this.analyseData;
const source = [
["早餐", data.weight1],
["午餐", data.weight3],
["晚餐", data.weight5],
];
if (data.weight2) {
source.push(["早加餐", data.weight2]);
}
if (data.weight4) {
source.push(["午加餐", data.weight4]);
}
if (data.weight6) {
source.push(["晚加餐", data.weight6]);
}
return source;
},
...mapGetters(["analyseData"]),
},
};
</script>
<style lang="scss" scoped>
.daily_analyze_com_wrapper {
width: 100%;
position: relative;
& > div:not(:nth-child(1)) {
margin-top: 12px;
}
.see_all {
position: absolute;
top: 0;
right: 0;
}
}
</style>

View File

@ -1,421 +0,0 @@
<template>
<div
:class="`aspect_pie_chart_wrapper ${className || ''}`"
:style="{ height: height, width: width }"
>
<div
ref="echart"
:style="{ height: height, width: !view ? '100px' : '100%' }"
/>
<div class="icon_btns">
<el-tooltip effect="dark" content="营养分析" placement="top">
<em
:class="['iconfont', 'icon-03', { sel_icon: view === 0 }]"
@click="handleOnViewChange(0)"
/>
</el-tooltip>
<el-tooltip effect="dark" content="热量分析" placement="top">
<em
:class="['iconfont', 'icon-fenxi', { sel_icon: view === 1 }]"
@click="handleOnViewChange(1)"
/>
</el-tooltip>
<el-tooltip effect="dark" content="质量分析" placement="top">
<em
:class="[
'iconfont',
'icon-canshuiconyouhua-',
{ sel_icon: view === 2 },
]"
@click="handleOnViewChange(2)"
/>
</el-tooltip>
</div>
<div v-if="view === 0" class="table_zone">
<el-table
:data="mData"
size="mini"
border
:cell-style="{ padding: '2px 0' }"
:header-cell-style="{ padding: '4px 0', height: 'unset' }"
class="small_table"
>
<el-table-column label="营养" prop="type" align="center" width="60" />
<el-table-column label="蛋白质" prop="p" align="center" width="65" />
<el-table-column label="脂肪" prop="f" align="center" width="65" />
<el-table-column label="碳水" prop="c" align="center" width="65" />
</el-table>
<div class="summary">
<div style="font-size: 12px; color: #606266">总热量约等于</div>
<div style="color: #515a6e; font-weight: bold">
{{ data[0] ? data[0].totalHeat.toFixed(1) : 0 }}千卡
</div>
</div>
</div>
<el-button size="mini" type="text" @click="backToAll" class="see_all"
>查看全部</el-button
>
</div>
</template>
<script>
import echarts from "echarts";
require("@/utils/echarts/myShine");
import resize from "@/views/dashboard/mixins/resize";
import TextInfo from "@/components/TextInfo";
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapState } = createNamespacedHelpers("recipes");
export default {
mixins: [resize],
components: {
TextInfo,
},
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
data: {
type: Array,
default: [],
},
},
data() {
const nameDict = {
p: "蛋白质",
f: "脂肪",
c: "碳水",
};
const menuDict = {
1: "早餐",
2: "早加餐",
3: "午餐",
4: "午加餐",
5: "晚餐",
6: "晚加餐",
};
return {
chart: null,
nameDict,
menuDict,
typeDict: {
Weight: "摄入量",
Rate: "供能比",
},
view: 0,
};
},
computed: {
mData() {
const [data] = this.data;
if (!data) {
return [];
}
const mData = ["Weight", "Rate"].map((t, idx) => ({
type: this.typeDict[t],
...["p", "f", "c"].reduce((obj, cur) => {
obj[cur] = idx
? data.totalHeat === 0
? 0
: `${((data[`${cur}Heat`] / data.totalHeat) * 100).toFixed(2)}%`
: `${data[`${cur}Weight`].toFixed(1)}`;
return obj;
}, {}),
}));
// console.log(mData);
return mData;
},
curNameDict() {
switch (this.view) {
case 0:
return this.nameDict;
case 1:
return this.menuDict;
case 2:
return this.menuDict;
}
},
curTitle() {
switch (this.view) {
case 0:
return "营养分析";
case 1:
return "热量分析";
case 2:
return "质量分析";
}
},
curTotalText() {
switch (this.view) {
case 1:
return "总热量约";
case 2:
return "总质量";
}
},
curTotalName() {
switch (this.view) {
case 1:
return "totalHeat";
case 2:
return "totalWeight";
}
},
curUnit() {
switch (this.view) {
case 1:
return "千卡";
case 2:
return "克";
}
},
...mapState(["recipesData"]),
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.echart, "myShine");
this.updateChart(this.data[0] || {});
},
backToAll() {
this.resetCurrentDay({ currentDay: -1 });
},
getDataName(dim) {
switch (this.view) {
case 0:
return `${dim}Heat`;
case 1:
return `heat${dim}`;
case 2:
return `weight${dim}`;
}
},
updateChart(data) {
console.log(data);
this.chart.clear();
const option = {
title: {
text: this.curTitle,
subtext: data.name,
},
tooltip: {
position: "right",
trigger: "item",
// appendToBody: true,
formatter: (params) => {
const {
name,
marker,
percent,
data: { value, oriData, dim },
} = params;
return !this.view
? [
`${marker} ${name}`,
`摄入量:${oriData[`${dim}Weight`].toFixed(1)}`,
`摄入热量:${value.toFixed(1)}千卡`,
`供能比:${percent}%`,
].join("</br>")
: this.view === 1
? [
`${marker} ${name}`,
`热量:${data[`heat${dim}`].toFixed(1)}千卡`,
`供能比:${percent}%`,
].join("</br>")
: [
`${marker} ${name}`,
`质量:${data[`weight${dim}`].toFixed(1)}`,
`占比:${percent}%`,
].join("</br>");
},
},
graphic: !this.view
? []
: [
{
type: "group",
top: 60,
left: 10,
silent: true,
children: [
{
type: "text",
style: {
text: this.curTotalText,
fill: "#606266",
},
},
{
type: "text",
top: 18,
left: 8,
style: {
text: `${
data[`${this.curTotalName}`]
? data[`${this.curTotalName}`].toFixed(1)
: 0
} ${this.curUnit}`,
font: '14px "Microsoft YaHei", sans-serif',
},
},
],
},
{
type: "group",
top: 36,
right: 10,
silent: true,
children: Object.keys(this.curNameDict).reduce((arr, cur) => {
const tarData = data[this.getDataName(cur)];
if (tarData) {
arr.push({
type: "text",
top: arr.length * 20,
right: 10,
style: {
text: `${this.curNameDict[cur]}${tarData.toFixed(1)}`,
fill: "#606266",
},
});
}
return arr;
}, []),
},
],
series: [
{
name: data.name,
type: "pie",
radius: [0, !this.view ? 40 : 60],
center: ["50%", "55%"],
data: Object.keys(this.curNameDict).reduce((arr, dim) => {
if (!this.view || data[`heat${dim}`]) {
arr.push({
dim,
value: data[this.getDataName(dim)],
name: this.curNameDict[dim],
oriData: data,
});
}
return arr;
}, []),
// labelLine: {
// length: 5,
// length2: 5,
// },
label: {
show: true,
position: "inside",
color: "#fff",
fontSize: !this.view ? 10 : 12,
fontWeight: "bold",
},
itemStyle: {
borderWidth: 1,
borderColor: "#fff",
},
},
],
};
// console.log(option);
this.chart.setOption(option);
},
handleOnViewChange(view) {
this.view = view;
this.chart.resize({
width: !this.view ? 100 : 364,
});
this.updateChart(this.data[0] || {});
},
...mapMutations(["resetCurrentDay"]),
},
watch: {
data(newVal, oldVal) {
if (newVal) {
this.$nextTick(() => {
this.updateChart(newVal[0]);
});
}
},
},
};
</script>
<style lang="scss" scoped>
/deep/ :focus {
outline: 0;
}
.aspect_pie_chart_wrapper {
width: 100%;
display: flex;
position: relative;
& > div:nth-child(1) {
// width: 200px
}
.small_table {
.my_cell {
padding: 2px 0 !important;
}
}
.summary {
padding: 2px;
border-bottom: 1px solid #dfe6ec;
border-left: 1px solid #dfe6ec;
border-right: 1px solid #dfe6ec;
& > div {
padding: 3px;
text-align: center;
}
}
.see_all {
position: absolute;
bottom: 4px;
left: 24px;
padding: 0;
}
.icon_btns {
position: absolute;
right: 0;
em {
display: inline-block;
padding: 4px;
cursor: pointer;
}
.sel_icon {
color: #1890ff;
}
}
.table_zone {
margin-top: 26px;
}
}
</style>

View File

@ -0,0 +1,221 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("@/utils/echarts/myShine");
import resize from "@/views/dashboard/mixins/resize";
const animationDuration = 6000;
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "180px",
},
data: {
type: Array,
default: [],
},
max: {
type: Number,
default: 0,
},
title: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
},
data() {
return {
chart: null,
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
computed: {},
updated() {
// console.log("updated");
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "myShine");
this.chart.on("click", this.handleOnClick);
if (this.data.length > 0) {
this.updateChart(this.data);
}
},
getTooltipArr(params) {
// console.log(params);
const [param] = params;
const { name } = param;
let tooltips;
let total = 0;
switch (this.type) {
case "nutrition":
tooltips = params.reduce(
(arr, cur) => {
const { value, seriesName, seriesIndex, marker } = cur;
const calories = value[seriesIndex + 1];
total += calories;
const weight = (
calories / (seriesName === "脂肪" ? 9 : 4)
).toFixed(1);
arr.push(
`${marker} ${seriesName}${weight}克(${calories.toFixed(
1
)}千卡)`
);
return arr;
},
[name]
);
tooltips[0] += ` - 约${total.toFixed(1)}千卡`;
break;
case "calories":
tooltips = params.reduce(
(arr, cur) => {
const { value, seriesName, seriesIndex, marker } = cur;
const calories = value[seriesIndex + 1];
total += calories;
if (calories) {
arr.push(`${marker} ${seriesName}${calories.toFixed(1)}千卡`);
}
return arr;
},
[name]
);
tooltips[0] += ` - 约${total.toFixed(1)}千卡`;
break;
case "weight":
tooltips = params.reduce(
(arr, cur) => {
const { value, seriesName, seriesIndex, marker } = cur;
const weight = value[seriesIndex + 1];
total += weight;
if (weight) {
arr.push(`${marker} ${seriesName}${weight.toFixed(1)}`);
}
return arr;
},
[name]
);
tooltips[0] += ` - 共${total.toFixed(1)}`;
break;
}
return tooltips.join("</br>");
},
updateChart(source) {
// console.log(this.max);
// console.log(source);
this.chart.clear();
const option = {
title: {
text: this.title,
},
legend: {
// type: "scroll",
left: 100,
itemWidth: 8,
itemHeight: 8,
pageIconSize: 10,
textStyle: {
fontSize: 10,
},
},
tooltip: {
trigger: "axis",
appendToBody: true,
formatter: this.getTooltipArr,
},
dataset: {
source,
},
grid: {
top: 50,
left: 10,
right: 50,
bottom: 10,
containLabel: true,
},
xAxis: {
type: "category",
// axisLabel: {
// rotate: 45,
// },
},
yAxis: {
type: "value",
name: this.type === "weight" ? "质量/克" : "热量/千卡",
nameTextStyle: {
color: "#262626",
fontSize: 10,
},
},
series: source[0].slice(1).map((name, idx) => ({
name,
type: "bar",
barWidth: 24,
stack: "bar",
encode: {
y: idx + 1,
x: 0,
},
itemStyle: {
borderWidth: 2,
borderColor: "#fff",
},
})),
};
if (this.max) {
option.series[0].markLine = {
data: [{ name: "BMR", yAxis: this.max ? this.max - 400 : 0 }],
symbol: "none",
lineStyle: {
color: "#d96969",
},
};
}
this.chart.setOption(option);
},
handleOnClick(params) {
// console.log(params);
const { dataIndex } = params;
this.$emit("onClick", dataIndex);
},
},
watch: {
data(newVal, oldVal) {
if (newVal) {
this.$nextTick(() => {
this.updateChart(newVal);
});
}
},
},
};
</script>

View File

@ -0,0 +1,114 @@
<template>
<div class="weakly_analyze_com_wrapper">
<bar-chart
:data="nutritionSource"
:max="max"
title="营养统计"
type="nutrition"
width="364px"
@onClick="handleOnClick"
/>
<bar-chart
:data="caloriesSource"
title="热量统计"
type="calories"
width="364px"
@onClick="handleOnClick"
/>
<bar-chart
:data="weightSource"
title="质量统计"
type="weight"
width="364px"
@onClick="handleOnClick"
/>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapGetters, mapMutations } = createNamespacedHelpers(
"recipes"
);
import VueScrollTo from "vue-scrollto";
import BarChart from "./BarChart";
export default {
name: "WeaklyAnalyzeCom",
components: {
BarChart,
},
data() {
return {};
},
props: ["data"],
methods: {
handleOnClick(currentDay) {
this.setCurrentDay({ currentDay });
VueScrollTo.scrollTo(`#recipes${currentDay}`, 500, {
container: "#recipes_content",
});
},
...mapMutations(["setCurrentDay"]),
},
computed: {
nutritionSource() {
return this.analyseData.reduce(
(arr, cur) => {
arr.push([cur.name, cur.pCalories, cur.fCalories, cur.cCalories]);
return arr;
},
[["日期", "蛋白质", "脂肪", "碳水"]]
);
},
caloriesSource() {
return this.analyseData.reduce(
(arr, cur) => {
arr.push([
cur.name,
cur.calories1,
cur.calories2,
cur.calories3,
cur.calories4,
cur.calories5,
cur.calories6,
]);
return arr;
},
[["日期", "早餐", "早加餐", "午餐", "午加餐", "晚餐", "晚加餐"]]
);
},
weightSource() {
return this.analyseData.reduce(
(arr, cur) => {
arr.push([
cur.name,
cur.weight1,
cur.weight2,
cur.weight3,
cur.weight4,
cur.weight5,
cur.weight6,
]);
return arr;
},
[["日期", "早餐", "早加餐", "午餐", "午加餐", "晚餐", "晚加餐"]]
);
},
max() {
const { basicBMR } = this.healthyData || {};
return basicBMR
? parseFloat(basicBMR.substring(0, basicBMR.indexOf("千卡")))
: 0;
},
...mapState(["healthyData"]),
...mapGetters(["analyseData"]),
},
};
</script>
<style lang="scss" scoped>
.weakly_analyze_com_wrapper {
width: 100%;
& > div:not(:nth-child(1)) {
margin-top: 12px;
}
}
</style>

View File

@ -1,50 +1,46 @@
<template>
<div class="recipes_build_info_view_wrapper">
<div class="top" v-if="showChart">
<BarChart
v-if="analyseData.length > 1"
:data="analyseData"
height="160px"
width="100%"
:max="max"
/>
<PieChart
v-if="analyseData.length === 1"
:data="analyseData"
height="160px"
width="100%"
/>
</div>
<div
class="content"
:style="`height: calc(100vh - ${showChart ? 192 : 32}px);`"
>
<TemplateInfoView v-if="!!temId" :data="templateInfo" />
<HealthyView :data="healthyData" v-else-if="healthyDataType === 0" dev />
<BodySignView :data="healthyData" v-else dev />
</div>
<el-tabs v-model="activeName" @tab-click="handleOnTabClick">
<el-tab-pane label="模板信息" name="1" v-if="!!temId">
<div class="content">
<TemplateInfoView :data="templateInfo" />
</div>
</el-tab-pane>
<el-tab-pane label="客户信息" name="2" v-else>
<div class="content">
<HealthyView :data="healthyData" v-if="healthyDataType === 0" dev />
<BodySignView :data="healthyData" v-else dev />
</div>
</el-tab-pane>
<el-tab-pane label="食谱分析" name="0" v-if="showChart">
<div class="content">
<WeaklyAnalyzeCom v-if="analyseData.length > 1" />
<DailyAnalyzeCom v-else />
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapGetters } = createNamespacedHelpers("recipes");
import BarChart from "./BarChart";
import PieChart from "./PieChart";
import TemplateInfoView from "./TemplateInfoView";
import HealthyView from "@/components/HealthyView";
import BodySignView from "@/components/BodySignView";
import WeaklyAnalyzeCom from "./WeaklyAnalyzeCom";
import DailyAnalyzeCom from "./DailyAnalyzeCom";
export default {
name: "InfoView",
data() {
const { temId } = this.$route.query;
return { temId };
return { temId, activeName: !!temId ? "1" : "2" };
},
components: {
BarChart,
PieChart,
HealthyView,
BodySignView,
TemplateInfoView,
WeaklyAnalyzeCom,
DailyAnalyzeCom,
},
computed: {
max() {
@ -64,16 +60,21 @@ export default {
]),
...mapGetters(["analyseData"]),
},
methods: {
handleOnTabClick(tab) {
this.activeName = tab.name;
},
},
};
</script>
<style lang="scss" scoped>
/deep/ :focus {
outline: 0;
}
.recipes_build_info_view_wrapper {
.top {
height: 160px;
}
.content {
overflow: auto;
height: calc(100vh - 88px);
}
}
</style>

View File

@ -337,7 +337,8 @@ export default {
}
lastNameHit =
arr[arr.length - 1].name === cur.name &&
arr[arr.length - 1].type === cur.type;
arr[arr.length - 1].type === cur.type
// arr[arr.length - 1].dishesId === cur.dishesId;
if (lastNameHit) {
let namePos = arr.length - 1;
for (let i = namePos; i >= 0; i--) {

View File

@ -44,6 +44,7 @@
placement="bottom"
trigger="click"
title="修改食谱状态"
v-if="!!recipesId"
style="margin-right: 12px"
>
<div>
@ -70,7 +71,6 @@
<el-button
slot="reference"
size="mini"
v-if="!!recipesId"
:type="getReviewType(reviewStatus)"
>
{{ getReviewStatusName(reviewStatus) }}

View File

@ -15,7 +15,10 @@
</div>
<div v-for="mObj in obj.values" :key="mObj.id">
<div class="dishes_item">
<div v-if="!mObj.methods && !mObj.remark" class="simple_dishes">
<div
v-if="!mObj.methods && !mObj.remark && !mObj.igdList"
class="simple_dishes"
>
<span>{{ mObj.name }}</span>
<span class="weight_style">
<span style="margin-right: 20px">{{ mObj.cusStr }}</span>
@ -87,7 +90,7 @@ export default {
typeName: this.menuTypeDict[type],
values: mData[type],
}));
// console.log(mMenus);
console.log(mMenus);
return mMenus;
},
...mapState(["cusUnitDict", "cusWeightDict", "menuTypeDict"]),

View File

@ -1,6 +1,5 @@
export function getProcessMenuData(menuData) {
// const igdPlanData = {};
// console.log(menuData)
const menuList = menuData.reduce((arr, cur) => {
if (
cur.dishesId > -1 &&
@ -42,5 +41,6 @@ export function getProcessMenuData(menuData) {
}
return arr;
}, []);
// console.log(menuList);
return menuList;
}