完成菜品修改
This commit is contained in:
huangdeliang
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TextInfo from "./TextInfo.vue";
|
||||
import TextInfo from "@/components/TextInfo";
|
||||
|
||||
export default {
|
||||
name: "BodySignView",
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TextInfo from "./TextInfo.vue";
|
||||
import TextInfo from "@/components/TextInfo";
|
||||
|
||||
export default {
|
||||
name: "HealthyView",
|
||||
@ -166,6 +166,7 @@ export default {
|
||||
{ title: "是否出现过过敏症状", value: "allergyFlag" },
|
||||
{ title: "过敏症状", value: "allergySituation" },
|
||||
{ title: "过敏源", value: "allergen" },
|
||||
{ title: "忌口过敏食物", value: "dishesIngredient" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<RecipesCom v-for="item in data" :key="item.id" :data="item" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RecipesCom from "@/components/RecipesCom";
|
||||
export default {
|
||||
name: "RecipesView",
|
||||
components: {
|
||||
RecipesCom,
|
||||
},
|
||||
props: ["data"],
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
</style>
|
||||
@ -0,0 +1,146 @@
|
||||
<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: "300px",
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
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: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, "myShine");
|
||||
this.updateChart(this.data.length > 0 ? this.data : {});
|
||||
},
|
||||
updateChart(source) {
|
||||
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}：${heatVal}千卡（${weightVal}克）`
|
||||
);
|
||||
return arr;
|
||||
},
|
||||
[name]
|
||||
);
|
||||
tooltips[0] += ` - 共${totalHeat.toFixed(1)}千卡`;
|
||||
return tooltips.join("</br>");
|
||||
},
|
||||
},
|
||||
dataset: {
|
||||
dimensions: [
|
||||
"name",
|
||||
"pWeight",
|
||||
"pHeat",
|
||||
"fWeight",
|
||||
"fHeat",
|
||||
"cWeight",
|
||||
"cHeat",
|
||||
],
|
||||
source,
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 10,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
|
||||
name: dim,
|
||||
type: "bar",
|
||||
barWidth: 26,
|
||||
stack: "bar",
|
||||
encode: {
|
||||
y: dim,
|
||||
x: 0,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: "#fff",
|
||||
},
|
||||
})),
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.updateChart(newVal);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div
|
||||
:class="`aspect_pie_chart_wrapper ${className || ''}`"
|
||||
:style="{ height: height, width: width }"
|
||||
>
|
||||
<div ref="echart" :style="{ height: height, width: '200px' }" />
|
||||
<div>
|
||||
<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="重量(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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
require("@/utils/echarts/myShine");
|
||||
import resize from "@/views/dashboard/mixins/resize";
|
||||
import TextInfo from "@/components/TextInfo";
|
||||
|
||||
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() {
|
||||
return {
|
||||
chart: null,
|
||||
nameDict: {
|
||||
p: "蛋白质",
|
||||
f: "脂肪",
|
||||
c: "碳水",
|
||||
},
|
||||
};
|
||||
},
|
||||
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
|
||||
)}%`,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
},
|
||||
},
|
||||
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.length > 0 ? this.data[0] : {});
|
||||
},
|
||||
updateChart(data) {
|
||||
this.chart.clear();
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: `${data.name}营养统计`,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
appendToBody: true,
|
||||
formatter: (params) => {
|
||||
const {
|
||||
name,
|
||||
marker,
|
||||
percent,
|
||||
data: { value, oriData, dim },
|
||||
} = params;
|
||||
return [
|
||||
`${marker} ${name}`,
|
||||
`含量：${oriData[`${dim}Weight`].toFixed(1)}克`,
|
||||
`热量：${value.toFixed(1)}千卡`,
|
||||
`热量占比：${percent}%`,
|
||||
].join("</br>");
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: data.name,
|
||||
type: "pie",
|
||||
radius: [0, 50],
|
||||
center: ["50%", "50%"],
|
||||
data: ["p", "f", "c"].map((dim) => ({
|
||||
dim,
|
||||
value: data[`${dim}Heat`],
|
||||
name: this.nameDict[dim],
|
||||
oriData: data,
|
||||
})),
|
||||
labelLine: {
|
||||
length: 5,
|
||||
length2: 5,
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "inside",
|
||||
// color: '#fff'
|
||||
// },
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.updateChart(newVal[0]);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.aspect_pie_chart_wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
& > div:nth-child(1) {
|
||||
// width: 200px
|
||||
}
|
||||
|
||||
// & > div:nth-child(2) {
|
||||
.small_table {
|
||||
.my_cell {
|
||||
padding: 2px 0 !important;
|
||||
}
|
||||
}
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div
|
||||
class="recipes_aspect_wrapper"
|
||||
:style="`height: ${collapse ? 30 : 200}px`"
|
||||
>
|
||||
<div class="header">
|
||||
<el-button size="mini" type="text" @click="handleCollapseClick">{{
|
||||
`${collapse ? "展开分析" : "收起分析"}`
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
:style="`visibility: ${collapse ? 'hidden' : 'visible'};`"
|
||||
>
|
||||
<BarChart
|
||||
v-if="data.length > 1"
|
||||
:data="data"
|
||||
height="170px"
|
||||
width="500px"
|
||||
/>
|
||||
<PieChart v-else :data="data" height="170px" width="500px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BarChart from "./BarChart";
|
||||
import PieChart from "./PieChart";
|
||||
export default {
|
||||
name: "RecipesAspectCom",
|
||||
components: {
|
||||
BarChart,
|
||||
PieChart,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
updated() {
|
||||
// console.log(this.data);
|
||||
},
|
||||
props: ["collapse", "data"],
|
||||
computed: {},
|
||||
methods: {
|
||||
handleCollapseClick() {
|
||||
this.$emit("update:collapse", !this.collapse);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scope>
|
||||
.recipes_aspect_wrapper {
|
||||
transition: all 0.3s;
|
||||
padding-bottom: 12px;
|
||||
|
||||
.header {
|
||||
text-align: right;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.content {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="editable_text_wrapper">
|
||||
<div class="value" v-if="!editing" @click="handleOnClick">{{ value }}</div>
|
||||
<input
|
||||
v-else
|
||||
class="input"
|
||||
ref="inputRef"
|
||||
type="number"
|
||||
:step="5"
|
||||
:value="value"
|
||||
@blur="handleOnBlur"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "EditableText",
|
||||
data() {
|
||||
return {
|
||||
editing: false,
|
||||
};
|
||||
},
|
||||
props: ["value"],
|
||||
methods: {
|
||||
handleOnClick(e) {
|
||||
if (!this.editing) {
|
||||
this.editing = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs["inputRef"].focus();
|
||||
});
|
||||
}
|
||||
},
|
||||
handleOnBlur(e) {
|
||||
const { value } = e.target;
|
||||
if (value > 0) {
|
||||
this.editing = false;
|
||||
const mValue = parseFloat(value)
|
||||
if (mValue !== parseFloat(this.value)) {
|
||||
this.$emit("onChange", mValue);
|
||||
}
|
||||
} else {
|
||||
this.$message.error("数字必须大于0");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.editable_text_wrapper {
|
||||
.value {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 96%;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="editable_unit_wrapper">
|
||||
<div class="value" v-if="!editing" @click="handleOnClick">
|
||||
<span>{{ unitWeight }}</span>
|
||||
</div>
|
||||
<div v-else class="selector">
|
||||
<select
|
||||
:value="mWeight"
|
||||
@click="handleOnSelectClick"
|
||||
@change="handleOnWeightChange"
|
||||
>
|
||||
<option
|
||||
v-for="item in cusWeightOptions"
|
||||
:key="item.dictValue"
|
||||
:value="item.dictValue"
|
||||
>
|
||||
{{ item.dictLabel }}
|
||||
</option>
|
||||
</select>
|
||||
<select
|
||||
:value="mUnit"
|
||||
@click="handleOnSelectClick"
|
||||
@change="handleOnUnitChange"
|
||||
>
|
||||
<option
|
||||
v-for="item in cusUnitOptions"
|
||||
:key="item.dictValue"
|
||||
:value="item.dictValue"
|
||||
>
|
||||
{{ item.dictLabel }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
const { mapState, mapGetters } = createNamespacedHelpers("recipes");
|
||||
export default {
|
||||
name: "EditableUnit",
|
||||
props: ["weight", "unit"],
|
||||
mounted() {
|
||||
window.addEventListener("click", this.handleOnWindowClick);
|
||||
},
|
||||
unmounted() {
|
||||
window.removeEventListener("click", this.handleOnWindowClick);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editing: false,
|
||||
mWeight: this.weight,
|
||||
mUnit: this.unit,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOnClick(e) {
|
||||
if (!this.editing) {
|
||||
setTimeout(() => {
|
||||
this.editing = true;
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
handleOnWindowClick(e) {
|
||||
if (this.editing) {
|
||||
// console.log("handleOnWindowClick");
|
||||
this.editing = false;
|
||||
if (
|
||||
String(this.mWeight) !== String(this.weight) ||
|
||||
String(this.mUnit) !== String(this.unit)
|
||||
) {
|
||||
// console.log({
|
||||
// mWeight: this.mWeight,
|
||||
// mUnit: this.mUnit,
|
||||
// weight: this.weight,
|
||||
// unit: this.unit,
|
||||
// });
|
||||
this.$emit("onChange", {
|
||||
cusWeight: this.mWeight,
|
||||
cusUnit: this.mUnit,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
handleOnSelectClick(e) {
|
||||
if (this.editing) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
},
|
||||
handleOnWeightChange(e) {
|
||||
const { value } = e.target;
|
||||
this.mWeight = value;
|
||||
},
|
||||
handleOnUnitChange(e) {
|
||||
const { value } = e.target;
|
||||
this.mUnit = value;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
unitWeight() {
|
||||
return (
|
||||
`${this.cusWeightDict[this.mWeight] || ""}${
|
||||
this.cusUnitDict[this.mUnit] || ""
|
||||
}` || "_"
|
||||
);
|
||||
},
|
||||
...mapState(["cusUnitOptions", "cusWeightOptions"]),
|
||||
...mapGetters(["cusUnitDict", "cusWeightDict"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.editable_unit_wrapper {
|
||||
.value {
|
||||
cursor: pointer;
|
||||
}
|
||||
.selector {
|
||||
display: flex;
|
||||
|
||||
select:nth-child(1) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: 11px;
|
||||
border: solid 1px #dcdfe6;
|
||||
border-radius: 4px;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
padding: 3px 6px;
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="recipes_com_wrapper">
|
||||
<el-table
|
||||
:data="mData"
|
||||
border
|
||||
:span-method="spanMethod"
|
||||
:cell-style="{ padding: '2px 0' }"
|
||||
:header-cell-style="{ padding: '4px 0', height: 'unset' }"
|
||||
size="mini"
|
||||
:style="`outline: ${
|
||||
currentDay + 1 === num ? '1px solid #d96969' : 'none'
|
||||
}`"
|
||||
>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
:formatter="typeFormatter"
|
||||
:width="100"
|
||||
align="center"
|
||||
>
|
||||
<template slot="header">
|
||||
<span class="num_day" @click="handleOnOneDayAnalysis">{{
|
||||
`${name}第${num}天`
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜品" prop="name" align="center">
|
||||
<template slot="header">
|
||||
<el-popover placement="top" trigger="hover">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
class="fun_button"
|
||||
@click="handleOnAdd"
|
||||
>添加</el-button
|
||||
>
|
||||
<span class="num_day" slot="reference">菜品</span>
|
||||
</el-popover>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-popover placement="right" trigger="hover">
|
||||
<div>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
class="fun_button"
|
||||
@click="handleOnDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
<span class="num_day" slot="reference">{{ scope.row.name }}</span>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="食材" prop="igdName" align="center" />
|
||||
<el-table-column label="分量估算" :width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<EditableUnit
|
||||
:weight="scope.row.cusWeight"
|
||||
:unit="scope.row.cusUnit"
|
||||
@onChange="(val) => handleOnCustomUnitChange(scope.row, val)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="质量(g)" prop="weight" :width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<EditableText
|
||||
:value="scope.row.weight"
|
||||
@onChange="(val) => handleOnWeightChange(scope.row, val)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="蛋白质/100g"
|
||||
prop="proteinRatio"
|
||||
:width="100"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="脂肪/100g"
|
||||
prop="fatRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="碳水/100g"
|
||||
prop="carbonRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="蛋白质含量"
|
||||
prop="proteinRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
:formatter="nutriFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="脂肪含量"
|
||||
prop="fatRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
:formatter="nutriFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="碳水含量"
|
||||
prop="carbonRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
:formatter="nutriFormatter"
|
||||
/>
|
||||
<el-table-column label="做法" prop="methods" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
const {
|
||||
mapActions,
|
||||
mapGetters,
|
||||
mapState,
|
||||
mapMutations,
|
||||
} = createNamespacedHelpers("recipes");
|
||||
|
||||
import EditableText from "./EditableText";
|
||||
import EditableUnit from "./EditableUnit";
|
||||
|
||||
export default {
|
||||
name: "RecipesCom",
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: [],
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
num: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
EditableText,
|
||||
EditableUnit,
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.data);
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
mData() {
|
||||
if (!this.data.dishes) {
|
||||
return [];
|
||||
}
|
||||
const mData = this.data.dishes
|
||||
.sort((a, b) => a.type - b.type)
|
||||
.reduce((arr, cur, idx) => {
|
||||
if (cur.id > 0 && cur.type !== "0") {
|
||||
cur.igdList.forEach((igd) => {
|
||||
let lastTypeHit = false,
|
||||
lastNameHit = false;
|
||||
if (arr.length > 0) {
|
||||
// 倒推，找到第一个出现的位置
|
||||
lastTypeHit = arr[arr.length - 1].type === cur.type;
|
||||
if (lastTypeHit) {
|
||||
let typePos = arr.length - 1;
|
||||
for (let i = typePos; i >= 0; i--) {
|
||||
if (arr[i].type !== cur.type) {
|
||||
break;
|
||||
}
|
||||
typePos = i;
|
||||
}
|
||||
arr[typePos].typeSpan.rowspan += 1;
|
||||
}
|
||||
lastNameHit = arr[arr.length - 1].name === cur.name;
|
||||
if (lastNameHit) {
|
||||
let namePos = arr.length - 1;
|
||||
for (let i = namePos; i >= 0; i--) {
|
||||
if (arr[i].name !== cur.name) {
|
||||
break;
|
||||
}
|
||||
namePos = i;
|
||||
}
|
||||
arr[namePos].nameSpan.rowspan += 1;
|
||||
arr[namePos].methodsSpan.rowspan += 1;
|
||||
}
|
||||
}
|
||||
|
||||
arr.push({
|
||||
id: cur.id,
|
||||
name: cur.name,
|
||||
type: cur.type,
|
||||
isMain: cur.isMain,
|
||||
methods: cur.methods,
|
||||
igdId: igd.id,
|
||||
igdName: igd.name,
|
||||
proteinRatio: igd.proteinRatio,
|
||||
fatRatio: igd.fatRatio,
|
||||
carbonRatio: igd.carbonRatio,
|
||||
rec: igd.rec,
|
||||
notRec: igd.notRec,
|
||||
weight: igd.weight,
|
||||
cusWeight: igd.cusWeight,
|
||||
cusUnit: igd.cusUnit,
|
||||
typeSpan: lastTypeHit
|
||||
? {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
: {
|
||||
rowspan: 1,
|
||||
colspan: 1,
|
||||
},
|
||||
nameSpan: lastNameHit
|
||||
? {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
: {
|
||||
rowspan: 1,
|
||||
colspan: 1,
|
||||
},
|
||||
methodsSpan: lastNameHit
|
||||
? {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
: {
|
||||
rowspan: 1,
|
||||
colspan: 1,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
return arr;
|
||||
}, []);
|
||||
// console.log(mData);
|
||||
return mData;
|
||||
},
|
||||
...mapGetters(["typeDict"]),
|
||||
...mapState(["currentDay"]),
|
||||
},
|
||||
methods: {
|
||||
spanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex === 0) {
|
||||
return row.typeSpan;
|
||||
} else if (columnIndex === 1) {
|
||||
return row.nameSpan;
|
||||
} else if (columnIndex === 11) {
|
||||
return row.methodsSpan;
|
||||
}
|
||||
},
|
||||
typeFormatter(row) {
|
||||
return this.typeDict[row.type];
|
||||
},
|
||||
nutriFormatter(row, col) {
|
||||
return ((row.weight / 100) * row[col.property]).toFixed(1);
|
||||
},
|
||||
handleOnOneDayAnalysis(e) {
|
||||
// 校验某天
|
||||
this.setCurrentDay({ currentDay: this.num - 1 });
|
||||
},
|
||||
handleOnAdd() {
|
||||
console.log(this.num);
|
||||
},
|
||||
handleOnEdit(data) {
|
||||
console.log(data);
|
||||
},
|
||||
handleOnDelete(data) {
|
||||
// console.log(data);
|
||||
this.deleteSomeDayDishes({ num: this.num - 1, dishesId: data.id });
|
||||
},
|
||||
handleOnWeightChange(data, weight) {
|
||||
// console.log({ data, weight });
|
||||
this.updateRecipesDishesWeight({
|
||||
num: this.num - 1,
|
||||
dishesId: data.id,
|
||||
igdId: data.igdId,
|
||||
weight,
|
||||
});
|
||||
},
|
||||
handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
|
||||
this.updateRecipesDishesCustomWeight({
|
||||
num: this.num - 1,
|
||||
dishesId: data.id,
|
||||
igdId: data.igdId,
|
||||
cusWeight,
|
||||
cusUnit,
|
||||
});
|
||||
},
|
||||
...mapMutations([
|
||||
"setCurrentDay",
|
||||
"deleteSomeDayDishes",
|
||||
"updateRecipesDishesWeight",
|
||||
"updateRecipesDishesCustomWeight",
|
||||
]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.recipes_com_wrapper {
|
||||
margin-bottom: 24px;
|
||||
padding: 1px;
|
||||
|
||||
.num_day {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.fun_button {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="recipes_view_wrapper">
|
||||
<RecipesAspectCom :collapse.sync="collapse" :data="analyseData" />
|
||||
<div
|
||||
class="recipes_content"
|
||||
:style="`height: calc(100vh - ${collapse ? 142 : 312}px)`"
|
||||
>
|
||||
<RecipesCom
|
||||
v-for="(item, index) in data"
|
||||
:key="item.id"
|
||||
:data="item"
|
||||
:name="name"
|
||||
:num="index + 1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RecipesCom from "./RecipesCom";
|
||||
import RecipesAspectCom from "./RecipesAspectCom";
|
||||
export default {
|
||||
name: "RecipesView",
|
||||
components: {
|
||||
RecipesCom,
|
||||
RecipesAspectCom,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
collapse: false,
|
||||
};
|
||||
},
|
||||
props: ["data", "analyseData", "name", "numRange"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped >
|
||||
.recipes_view_wrapper {
|
||||
// padding-right: 20px;
|
||||
|
||||
.recipes_content {
|
||||
overflow: auto;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div :class="classname">
|
||||
<span class="title">{{ title }}：</span>
|
||||
<span v-if="newLine">
|
||||
<div v-for="value in mValue" :key="value">{{ value }}</div>
|
||||
</span>
|
||||
<span v-else class="value">{{ mValue }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "TextInfo",
|
||||
data() {
|
||||
return {
|
||||
classname: `text_info_wrapper ${this.extraclass || ""}`,
|
||||
newLine: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
mValue: function () {
|
||||
if (
|
||||
this.value &&
|
||||
typeof this.value === "string" &&
|
||||
this.value.includes("</br>")
|
||||
) {
|
||||
this.newLine = true;
|
||||
return this.value.split("</br>");
|
||||
}
|
||||
return this.value;
|
||||
},
|
||||
},
|
||||
props: ["title", "value", "extraclass"],
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.text_info_wrapper {
|
||||
display: flex;
|
||||
margin-right: 24px;
|
||||
min-width: 120px;
|
||||
font-size: 14px;
|
||||
|
||||
.title {
|
||||
color: #8c8c8c;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.value {
|
||||
/* color: #696969; */
|
||||
flex: 1 1 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,26 +1,30 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<RecipesView :data="recipesData" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<HealthyView :data="healthyData" v-if="healthyDataType === 0" />
|
||||
<BodySignView :data="healthyData" v-else />
|
||||
</div>
|
||||
<div class="recipes_build_wrapper">
|
||||
<div class="left">
|
||||
<RecipesView
|
||||
:data="recipesData"
|
||||
:name="healthyData.name"
|
||||
:analyseData="analyseData"
|
||||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<HealthyView :data="healthyData" v-if="healthyDataType === 0" />
|
||||
<BodySignView :data="healthyData" v-else />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
|
||||
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
|
||||
"recipes"
|
||||
);
|
||||
const {
|
||||
mapActions,
|
||||
mapState,
|
||||
mapMutations,
|
||||
mapGetters,
|
||||
} = createNamespacedHelpers("recipes");
|
||||
|
||||
import HealthyView from "./HealthyView";
|
||||
import BodySignView from "./BodySignView";
|
||||
import RecipesView from "./RecipesView";
|
||||
import RecipesView from "./RecipesView/index";
|
||||
|
||||
export default {
|
||||
name: "BuildRecipies",
|
||||
@ -48,11 +52,8 @@ export default {
|
||||
},
|
||||
props: ["planId", "cusId", "recipesId"],
|
||||
computed: {
|
||||
...mapState({
|
||||
healthyData: (state) => state.healthyData,
|
||||
healthyDataType: (state) => state.healthyDataType,
|
||||
recipesData: (state) => state.recipesData,
|
||||
}),
|
||||
...mapState(["healthyData", "healthyDataType", "recipesData"]),
|
||||
...mapGetters(["analyseData"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["init"]),
|
||||
@ -60,15 +61,17 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.content {
|
||||
<style lang="scss" scoped>
|
||||
.recipes_build_wrapper {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
height: calc(100vh - 124px);
|
||||
height: calc(100vh - 86px);
|
||||
.left {
|
||||
flex: 4;
|
||||
border-right: 1px solid #e6ebf5;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
Reference in New Issue
Block a user