diff --git a/stdiet-ui/public/index.html b/stdiet-ui/public/index.html
index 34b70ae6f..40cf9db93 100644
--- a/stdiet-ui/public/index.html
+++ b/stdiet-ui/public/index.html
@@ -1,208 +1,211 @@
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="renderer" content="webkit">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <link rel="stylesheet" href="//at.alicdn.com/t/font_2343184_8rlvxcc41j5.css">
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <meta name="renderer" content="webkit" />
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+ />
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+ <link
+ rel="stylesheet"
+ href="//at.alicdn.com/t/font_2343184_w0runuauamq.css"
+ />
<title><%= webpackConfig.name %></title>
- <style>
- html,
- body,
- #app {
- height: 100%;
- margin: 0px;
- padding: 0px;
- }
- .chromeframe {
- margin: 0.2em 0;
- background: #ccc;
- color: #000;
- padding: 0.2em 0;
- }
-
- #loader-wrapper {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999999;
- }
-
- #loader {
- display: block;
- position: relative;
- left: 50%;
- top: 50%;
- width: 150px;
- height: 150px;
- margin: -75px 0 0 -75px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #FFF;
- -webkit-animation: spin 2s linear infinite;
- -ms-animation: spin 2s linear infinite;
- -moz-animation: spin 2s linear infinite;
- -o-animation: spin 2s linear infinite;
- animation: spin 2s linear infinite;
- z-index: 1001;
- }
-
- #loader:before {
- content: "";
- position: absolute;
- top: 5px;
- left: 5px;
- right: 5px;
- bottom: 5px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #FFF;
- -webkit-animation: spin 3s linear infinite;
- -moz-animation: spin 3s linear infinite;
- -o-animation: spin 3s linear infinite;
- -ms-animation: spin 3s linear infinite;
- animation: spin 3s linear infinite;
- }
-
- #loader:after {
- content: "";
- position: absolute;
- top: 15px;
- left: 15px;
- right: 15px;
- bottom: 15px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #FFF;
- -moz-animation: spin 1.5s linear infinite;
- -o-animation: spin 1.5s linear infinite;
- -ms-animation: spin 1.5s linear infinite;
- -webkit-animation: spin 1.5s linear infinite;
- animation: spin 1.5s linear infinite;
- }
-
-
- @-webkit-keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
+ <style>
+ html,
+ body,
+ #app {
+ height: 100%;
+ margin: 0px;
+ padding: 0px;
}
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
+ .chromeframe {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
}
- }
- @keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
+ #loader-wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 999999;
}
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
+
+ #loader {
+ display: block;
+ position: relative;
+ left: 50%;
+ top: 50%;
+ width: 150px;
+ height: 150px;
+ margin: -75px 0 0 -75px;
+ border-radius: 50%;
+ border: 3px solid transparent;
+ border-top-color: #fff;
+ -webkit-animation: spin 2s linear infinite;
+ -ms-animation: spin 2s linear infinite;
+ -moz-animation: spin 2s linear infinite;
+ -o-animation: spin 2s linear infinite;
+ animation: spin 2s linear infinite;
+ z-index: 1001;
}
- }
+ #loader:before {
+ content: "";
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ right: 5px;
+ bottom: 5px;
+ border-radius: 50%;
+ border: 3px solid transparent;
+ border-top-color: #fff;
+ -webkit-animation: spin 3s linear infinite;
+ -moz-animation: spin 3s linear infinite;
+ -o-animation: spin 3s linear infinite;
+ -ms-animation: spin 3s linear infinite;
+ animation: spin 3s linear infinite;
+ }
- #loader-wrapper .loader-section {
- position: fixed;
- top: 0;
- width: 51%;
- height: 100%;
- background: #7171C6;
- z-index: 1000;
- -webkit-transform: translateX(0);
- -ms-transform: translateX(0);
- transform: translateX(0);
- }
+ #loader:after {
+ content: "";
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ right: 15px;
+ bottom: 15px;
+ border-radius: 50%;
+ border: 3px solid transparent;
+ border-top-color: #fff;
+ -moz-animation: spin 1.5s linear infinite;
+ -o-animation: spin 1.5s linear infinite;
+ -ms-animation: spin 1.5s linear infinite;
+ -webkit-animation: spin 1.5s linear infinite;
+ animation: spin 1.5s linear infinite;
+ }
- #loader-wrapper .loader-section.section-left {
- left: 0;
- }
+ @-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
- #loader-wrapper .loader-section.section-right {
- right: 0;
- }
+ @keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ #loader-wrapper .loader-section {
+ position: fixed;
+ top: 0;
+ width: 51%;
+ height: 100%;
+ background: #7171c6;
+ z-index: 1000;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
- .loaded #loader-wrapper .loader-section.section-left {
- -webkit-transform: translateX(-100%);
- -ms-transform: translateX(-100%);
- transform: translateX(-100%);
- -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- }
+ #loader-wrapper .loader-section.section-left {
+ left: 0;
+ }
- .loaded #loader-wrapper .loader-section.section-right {
- -webkit-transform: translateX(100%);
- -ms-transform: translateX(100%);
- transform: translateX(100%);
- -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- }
+ #loader-wrapper .loader-section.section-right {
+ right: 0;
+ }
- .loaded #loader {
- opacity: 0;
- -webkit-transition: all 0.3s ease-out;
- transition: all 0.3s ease-out;
- }
+ .loaded #loader-wrapper .loader-section.section-left {
+ -webkit-transform: translateX(-100%);
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ }
- .loaded #loader-wrapper {
- visibility: hidden;
- -webkit-transform: translateY(-100%);
- -ms-transform: translateY(-100%);
- transform: translateY(-100%);
- -webkit-transition: all 0.3s 1s ease-out;
- transition: all 0.3s 1s ease-out;
- }
+ .loaded #loader-wrapper .loader-section.section-right {
+ -webkit-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ }
- .no-js #loader-wrapper {
- display: none;
- }
+ .loaded #loader {
+ opacity: 0;
+ -webkit-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
+ }
- .no-js h1 {
- color: #222222;
- }
+ .loaded #loader-wrapper {
+ visibility: hidden;
+ -webkit-transform: translateY(-100%);
+ -ms-transform: translateY(-100%);
+ transform: translateY(-100%);
+ -webkit-transition: all 0.3s 1s ease-out;
+ transition: all 0.3s 1s ease-out;
+ }
- #loader-wrapper .load_title {
- font-family: 'Open Sans';
- color: #FFF;
- font-size: 19px;
- width: 100%;
- text-align: center;
- z-index: 9999999999999;
- position: absolute;
- top: 60%;
- opacity: 1;
- line-height: 30px;
- }
+ .no-js #loader-wrapper {
+ display: none;
+ }
- #loader-wrapper .load_title span {
- font-weight: normal;
- font-style: italic;
- font-size: 13px;
- color: #FFF;
- opacity: 0.5;
- }
- </style>
+ .no-js h1 {
+ color: #222222;
+ }
+
+ #loader-wrapper .load_title {
+ font-family: "Open Sans";
+ color: #fff;
+ font-size: 19px;
+ width: 100%;
+ text-align: center;
+ z-index: 9999999999999;
+ position: absolute;
+ top: 60%;
+ opacity: 1;
+ line-height: 30px;
+ }
+
+ #loader-wrapper .load_title span {
+ font-weight: normal;
+ font-style: italic;
+ font-size: 13px;
+ color: #fff;
+ opacity: 0.5;
+ }
+ </style>
</head>
<body>
<div id="app">
- <div id="loader-wrapper">
- <div id="loader"></div>
- <div class="loader-section section-left"></div>
- <div class="loader-section section-right"></div>
- <div class="load_title">正在加载系统资源，请耐心等待</div>
- </div>
- </div>
+ <div id="loader-wrapper">
+ <div id="loader"></div>
+ <div class="loader-section section-left"></div>
+ <div class="loader-section section-right"></div>
+ <div class="load_title">正在加载系统资源，请耐心等待</div>
+ </div>
+ </div>
</body>
</html>
diff --git a/stdiet-ui/src/store/modules/recipes.js b/stdiet-ui/src/store/modules/recipes.js
index c5dc6652a..3f3d903d7 100644
--- a/stdiet-ui/src/store/modules/recipes.js
+++ b/stdiet-ui/src/store/modules/recipes.js
@@ -522,6 +522,8 @@ const getters = {
(igd.weight / 100) * igd.proteinRatio * 4 +
(igd.weight / 100) * igd.fatRatio * 9 +
(igd.weight / 100) * igd.carbonRatio * 4;
+ obj[`weight${cur.type}`] += igd.weight;
+ obj.totalWeight += igd.weight;
});
return obj;
},
@@ -533,66 +535,96 @@ const getters = {
pHeat: 0,
fHeat: 0,
cHeat: 0,
+ //
totalHeat: 0,
heat1: 0,
heat2: 0,
heat3: 0,
heat4: 0,
heat5: 0,
- heat6: 0
+ heat6: 0,
+ //
+ totalWeight: 0,
+ weight1: 0,
+ weight2: 0,
+ weight3: 0,
+ weight4: 0,
+ weight5: 0,
+ weight6: 0
}
)
);
console.log(nutriData);
return nutriData;
},
- verifyNotRecData: state =>
- state.recipesData.reduce((arr, cur, dayIdx) => {
+ verifyNotRecData: state => {
+ const data = state.recipesData.reduce((arr, cur, dayIdx) => {
cur.dishes.forEach(dObj => {
dObj.igdList.forEach(iObj => {
(iObj.notRec || "").split(",").forEach(nRec => {
if (nRec) {
- let tarObj = arr.find(obj => obj.name === nRec);
+ const tarObj = arr.find(obj => obj.name === nRec);
if (tarObj) {
- tarObj.data.push({
- igdId: iObj.id,
- num: dayIdx,
- dishesId: dObj.dishesId,
- id: dObj.id
- });
+ if (!tarObj.igdIds.includes(iObj.id)) {
+ tarObj.igdIds.push(iObj.id);
+ }
+ const tarIgdObj = tarObj.data.find(obj => obj.id === iObj.id);
+ if (tarIgdObj) {
+ if (!tarIgdObj.data.some(obj => obj.day === cur.numDay)) {
+ tarIgdObj.data.push({ num: dayIdx, day: cur.numDay });
+ }
+ } else {
+ tarObj.data.push({
+ name: iObj.name,
+ id: iObj.id,
+ data: [{ num: dayIdx, day: cur.numDay }]
+ });
+ }
} else {
- tarObj = {
+ arr.push({
name: nRec,
+ igdIds: [iObj.id],
data: [
{
- igdId: iObj.id,
- num: dayIdx,
- dishesId: dObj.dishesId,
- id: dObj.id
+ name: iObj.name,
+ id: iObj.id,
+ data: [{ num: dayIdx, day: cur.numDay }]
}
]
- };
- arr.push(tarObj);
+ });
}
}
});
});
});
return arr;
- }, []),
- igdTypeDetial: state =>
- state.recipesData.reduce((obj, cur) => {
+ }, []);
+ // console.log(data);
+ return data;
+ },
+ igdTypeData: state => {
+ const data = state.recipesData.reduce((arr, cur, idx) => {
cur.dishes.forEach(dObj => {
dObj.igdList.forEach(iObj => {
- if (!obj[iObj.type]) {
- obj[iObj.type] = [{ name: iObj.name, id: iObj.id }];
- } else if (!obj[iObj.type].some(tObj => tObj.id === iObj.id)) {
- obj[iObj.type].push({ name: iObj.name, id: iObj.id });
+ let tarObj = arr.find(obj => obj.id === iObj.id);
+ if (!tarObj) {
+ tarObj = {
+ name: iObj.name,
+ id: iObj.id,
+ data: [{ num: idx, day: cur.numDay }]
+ };
+ arr.push(tarObj);
+ } else if (!tarObj.data.some(obj => obj.day === cur.numDay)) {
+ tarObj.data.push({ num: idx, day: cur.numDay });
}
});
});
- return obj;
- }, {}),
+ return arr;
+ }, []);
+
+ // console.log(data);
+ return data;
+ },
cusUnitDict: state =>
state.cusUnitOptions.reduce((obj, cur) => {
obj[cur.dictValue] = cur.dictLabel;
diff --git a/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue b/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue
index 3e4eda1bc..32c634733 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue
@@ -20,6 +20,16 @@
@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
@@ -80,21 +90,23 @@ export default {
},
},
data() {
+ const nameDict = {
+ p: "蛋白质",
+ f: "脂肪",
+ c: "碳水",
+ };
+ const menuDict = {
+ 1: "早餐",
+ 2: "早加餐",
+ 3: "午餐",
+ 4: "午加餐",
+ 5: "晚餐",
+ 6: "晚加餐",
+ };
return {
chart: null,
- nameDict: {
- p: "蛋白质",
- f: "脂肪",
- c: "碳水",
- },
- menuDict: {
- 1: "早餐",
- 2: "早加餐",
- 3: "午餐",
- 4: "午加餐",
- 5: "晚餐",
- 6: "晚加餐",
- },
+ nameDict,
+ menuDict,
typeDict: {
Weight: "摄入量",
Rate: "供能比",
@@ -122,6 +134,50 @@ export default {
// 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() {
@@ -144,12 +200,22 @@ export default {
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);
+ console.log(data);
this.chart.clear();
const option = {
title: {
- text: !this.view ? "营养分析" : "热量分析",
+ text: this.curTitle,
subtext: data.name,
},
tooltip: {
@@ -170,80 +236,84 @@ export default {
`摄入热量：${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 === 1
- ? [
- {
- type: "group",
- top: 60,
- left: 10,
- silent: true,
- children: [
- {
+ 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: "总热量约",
+ text: `${this.curNameDict[cur]}：${tarData.toFixed(1)}`,
fill: "#606266",
},
- },
- {
- type: "text",
- top: 18,
- left: 8,
- style: {
- text: `${
- data.totalHeat ? data.totalHeat.toFixed(1) : 0
- }千卡`,
- font: '14px "Microsoft YaHei", sans-serif',
- },
- },
- ],
- },
- {
- type: "group",
- top: 36,
- right: 10,
- silent: true,
- children: Object.keys(this.menuDict).reduce((arr, cur) => {
- const tarData = data[`heat${cur}`];
- if (tarData) {
- arr.push({
- type: "text",
- top: arr.length * 20,
- right: 10,
- style: {
- text: `${this.menuDict[cur]}：${tarData.toFixed(1)}`,
- fill: "#606266",
- },
- });
- }
- return arr;
- }, []),
- },
- ]
- : [],
+ });
+ }
+ return arr;
+ }, []),
+ },
+ ],
series: [
{
name: data.name,
type: "pie",
radius: [0, !this.view ? 40 : 60],
center: ["50%", "55%"],
- data: (!this.view
- ? Object.keys(this.nameDict)
- : Object.keys(this.menuDict)
- ).reduce((arr, dim) => {
+ data: Object.keys(this.curNameDict).reduce((arr, dim) => {
if (!this.view || data[`heat${dim}`]) {
arr.push({
dim,
- value: !this.view ? data[`${dim}Heat`] : data[`heat${dim}`],
- name: (!this.view ? this.nameDict : this.menuDict)[dim],
+ value: data[this.getDataName(dim)],
+ name: this.curNameDict[dim],
oriData: data,
});
}
diff --git a/stdiet-ui/src/views/custom/recipesBuild/VerifyView/IngredientSearchCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/IngredientSearchCom/index.vue
new file mode 100644
index 000000000..4308ad74b
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/IngredientSearchCom/index.vue
@@ -0,0 +1,147 @@
+<template>
+ <div class="ingredient_search_com_wrapper">
+ <section class="header">
+ <el-input
+ v-model="keyword"
+ size="mini"
+ class="search"
+ placeholder="请输入食材"
+ clearable
+ @keydown.enter.native="handleOnSearch"
+ />
+ <el-button
+ size="mini"
+ type="primary"
+ class="search_btn"
+ @click="handleOnSearch"
+ >
+ 搜索
+ </el-button>
+ </section>
+ <section class="content">
+ <el-popover
+ v-for="item in searchResults"
+ :key="item.name"
+ :title="item.name"
+ placement="top"
+ trigger="hover"
+ >
+ <el-button
+ type="text"
+ v-for="dData in item.data"
+ :key="dData.day"
+ @click="handleOnDayClick(item, dData.num)"
+ >{{ `第${dData.day}天` }}</el-button
+ >
+ <span
+ slot="reference"
+ :class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `"
+ @click="handleOnIgdClick(item)"
+ >{{ item.name }}
+ </span>
+ </el-popover>
+ </section>
+ </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapGetters } = createNamespacedHelpers("recipes");
+export default {
+ name: "IngredientSearchCom",
+ data() {
+ return {
+ keyword: "",
+ searchResults: [],
+ };
+ },
+ props: ["selectedIgd"],
+ computed: {
+ ...mapGetters(["igdTypeData"]),
+ },
+ methods: {
+ handleOnSearch() {
+ if (!this.keyword) {
+ return;
+ }
+ this.searchResults = this.igdTypeData.reduce((arr, igd) => {
+ if (igd.name.includes(this.keyword)) {
+ arr.push(igd);
+ }
+ return arr;
+ }, []);
+ // console.log(this.searchResults);
+ },
+ handleOnDayClick(data, numDay) {
+ const { name, id } = data;
+ this.$emit("onDayClick", { name, id, numDay });
+ },
+ handleOnIgdClick(data) {
+ const { name, id } = data;
+ this.$emit("onClick", { name, id });
+ },
+ reset() {
+ this.keyword = "";
+ this.searchResults = [];
+ },
+ },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ :focus {
+ outline: 0;
+}
+
+.ingredient_search_com_wrapper {
+ .header {
+ display: flex;
+ align-items: center;
+ padding: 4px;
+
+ .label {
+ width: 38px;
+ }
+ .search {
+ flex: 1;
+ }
+ .search_btn {
+ margin-left: 4px;
+ }
+ }
+
+ .content {
+ margin: 8px 0;
+
+ .title {
+ font-size: 14px;
+ color: #8c8c8c;
+ padding: 4px 0;
+ }
+
+ .item {
+ font-size: 14px;
+ margin: 4px;
+ border-radius: 8px;
+ cursor: pointer;
+ display: inline-block;
+ color: #262626;
+ border: 1px solid #8c8c8c;
+ padding: 3px 8px;
+ word-break: normal;
+ transition: all 0.3s;
+
+ &:hover {
+ color: white;
+ background: #d96969;
+ border-color: #d96969;
+ }
+ }
+
+ .selected_item {
+ color: white;
+ background: #d96969;
+ border-color: #d96969;
+ font-weight: bold;
+ }
+ }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/VerifyView/PhysicalSignCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/PhysicalSignCom/index.vue
new file mode 100644
index 000000000..e0767867c
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/PhysicalSignCom/index.vue
@@ -0,0 +1,132 @@
+<template>
+ <div class="physical_sign_com_wrapper">
+ <section class="content">
+ <span
+ v-for="item in verifyNotRecData"
+ :key="item.name"
+ :class="`item ${
+ selectedNotRecName === item.name ? 'selected_item' : ''
+ } `"
+ @click="handleOnNameClick(item)"
+ >{{ item.name }}
+ </span>
+
+ <div class="divider" v-if="!!igdDatas.length" />
+
+ <el-popover
+ v-for="item in igdDatas"
+ :key="item.name"
+ :title="item.name"
+ placement="top"
+ trigger="hover"
+ >
+ <el-button
+ type="text"
+ v-for="dData in item.data"
+ :key="dData.day"
+ @click="handleOnDayClick(item, dData.num)"
+ >{{ `第${dData.day}天` }}</el-button
+ >
+ <span
+ slot="reference"
+ :class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `"
+ @click="handleOnIgdClick(item)"
+ >{{ item.name }}
+ </span>
+ </el-popover>
+ </section>
+ </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapGetters } = createNamespacedHelpers("recipes");
+export default {
+ name: "PhysicalSignCom",
+ data() {
+ return {
+ selectedNotRecName: "",
+ igdDatas: [],
+ };
+ },
+ props: ["selectedIgd"],
+ computed: {
+ ...mapGetters(["verifyNotRecData"]),
+ },
+ methods: {
+ handleOnNameClick(obj) {
+ const { name, data } = obj;
+ if (this.selectedNotRecName === name) {
+ this.selectedNotRecName = "";
+ this.igdDatas = [];
+ } else {
+ this.selectedNotRecName = name;
+ this.igdDatas = data;
+ }
+ },
+ handleOnDayClick(data, numDay) {
+ const { name, id } = data;
+ this.$emit("onDayClick", { name, id, numDay });
+ },
+ handleOnIgdClick(data) {
+ const { name, id } = data;
+ this.$emit("onClick", { name, id });
+ },
+ reset() {
+ this.selectedNotRecName = "";
+ this.igdDatas = [];
+ },
+ },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ :focus {
+ outline: 0;
+}
+.physical_sign_com_wrapper {
+ .header {
+ display: flex;
+ align-items: center;
+ padding: 4px;
+ }
+ .content {
+ margin: 8px 0;
+
+ .title {
+ font-size: 14px;
+ color: #8c8c8c;
+ padding: 4px 0;
+ }
+
+ .divider {
+ border-bottom: 1px solid #e6ebf5;
+ margin: 12px 0;
+ }
+
+ .item {
+ font-size: 14px;
+ margin: 4px;
+ border-radius: 8px;
+ cursor: pointer;
+ display: inline-block;
+ color: #262626;
+ border: 1px solid #8c8c8c;
+ padding: 3px 8px;
+ word-break: normal;
+ transition: all 0.3s;
+
+ &:hover {
+ color: white;
+ background: #d96969;
+ border-color: #d96969;
+ }
+ }
+
+ .selected_item {
+ color: white;
+ background: #d96969;
+ border-color: #d96969;
+ font-weight: bold;
+ }
+ }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue
index bb423afbc..aab65ef1f 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue
@@ -1,33 +1,29 @@
<template>
<div class="verify_view_wrapper">
- <div>病理忌口</div>
- <div class="content">
- <span
- :class="`item ${
- selectedNotRec.includes(item.name) ? 'selected_item' : ''
- } `"
- v-for="item in verifyNotRecData"
- :key="item.name"
- @click="handleOnClick(item)"
- >{{ item.name }}</span
- >
- </div>
- <div style="margin: 24px 0 8px 0">涉及食材</div>
- <div v-for="key in Object.keys(igdTypeDetial).reverse()" :key="key">
- <div style="font-size: 14px; color: #8c8c8c">{{ igdTypeDict[key] }}</div>
- <div class="content">
- <span
- :class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `"
- v-for="item in igdTypeDetial[key]"
- :key="item.id"
- @click="handleOnIgdClick(item)"
- >{{ item.name }}
- </span>
- </div>
- </div>
+ <el-tabs
+ v-model="activeName"
+ @tab-click="handleOnTabClick"
+ :style="{ 'margin-right': '16px' }"
+ >
+ <el-tab-pane label="病理忌口" name="0">
+ <PhysicalSignCom
+ :selectedIgd.sync="selectedIgd"
+ @onDayClick="handleOnDayClick"
+ @onClick="handleOnClick"
+ />
+ </el-tab-pane>
+ <el-tab-pane label="食材忌口" name="1">
+ <IngredientSearchCom
+ :selectedIgd.sync="selectedIgd"
+ @onDayClick="handleOnDayClick"
+ @onClick="handleOnClick"
+ />
+ </el-tab-pane>
+ </el-tabs>
</div>
</template>
<script>
+import VueScrollTo from "vue-scrollto";
import { createNamespacedHelpers } from "vuex";
const {
mapActions,
@@ -35,63 +31,43 @@ const {
mapGetters,
mapMutations,
} = createNamespacedHelpers("recipes");
+import IngredientSearchCom from "./IngredientSearchCom";
+import PhysicalSignCom from "./PhysicalSignCom";
export default {
name: "VerifyView",
data() {
return {
- selectedNotRec: [],
+ activeName: "0",
selectedIgd: 0,
};
},
+ components: { IngredientSearchCom, PhysicalSignCom },
computed: {
- ...mapGetters(["verifyNotRecData", "igdTypeDict", "igdTypeDetial"]),
+ ...mapGetters(["verifyNotRecData"]),
},
methods: {
- handleOnClick(data) {
- if (this.selectedIgd !== 0) {
- this.selectedIgd = 0;
- this.setNotRecIgds({ data: [] });
- }
- if (this.selectedNotRec.some((str) => data.name === str)) {
- this.selectedNotRec = this.selectedNotRec.filter(
- (str) => str !== data.name
- );
- } else {
- this.selectedNotRec.push(data.name);
- this.selectedNotRec = JSON.parse(JSON.stringify(this.selectedNotRec));
- }
-
- const notRecIgds = this.selectedNotRec.reduce((arr, cur) => {
- const tarData = this.verifyNotRecData.find((obj) => obj.name === cur);
- if (tarData) {
- tarData.data.forEach((obj) => {
- if (!arr.includes(obj.igdId)) {
- arr.push(obj.igdId);
- }
- });
- }
- return arr;
- }, []);
-
- // console.log({
- // data,
- // notRecIgds,
- // verifyNotRecData: this.verifyNotRecData,
- // });
-
- this.setNotRecIgds({ data: notRecIgds });
+ handleOnTabClick(tab) {
+ this.activeName = tab.name;
},
- handleOnIgdClick(data) {
- if (this.selectedNotRec.length > 0) {
- this.selectedNotRec = [];
- this.setNotRecIgds({ data: [] });
+ handleOnDayClick(data) {
+ console.log(data);
+ const { id, numDay } = data;
+ if (this.selectedIgd !== id) {
+ this.selectedIgd = id;
+ this.setNotRecIgds({ data: [this.selectedIgd] });
}
+ this.setCurrentDay({ currentDay: numDay });
+ VueScrollTo.scrollTo(`#recipes${numDay}`, 500, {
+ container: "#recipes_content",
+ });
+ },
+ handleOnClick(data) {
this.selectedIgd = data.id === this.selectedIgd ? 0 : data.id;
-
this.setNotRecIgds({ data: [this.selectedIgd] });
},
- ...mapMutations(["setNotRecIgds"]),
+
+ ...mapMutations(["setNotRecIgds", "setCurrentDay"]),
},
};
</script>
@@ -99,33 +75,5 @@ export default {
.verify_view_wrapper {
height: calc(100vh - 32px);
overflow: auto;
- .content {
- margin: 8px 0;
- .item {
- font-size: 14px;
- margin: 4px;
- border-radius: 8px;
- cursor: pointer;
- display: inline-block;
- color: #262626;
- border: 1px solid #8c8c8c;
- padding: 3px 8px;
- word-break: normal;
- transition: all 0.3s;
-
- &:hover {
- color: white;
- background: #d96969;
- border-color: #d96969;
- }
- }
-
- .selected_item {
- color: white;
- background: #d96969;
- border-color: #d96969;
- font-weight: bold;
- }
- }
}
</style>