!118 调整食谱制作页面

Merge pull request !118 from 德仔/develop

stdiet-ui/src/components/BodySignView/index.vue

@@ -138,9 +138,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 .body_sign_view_wrapper {
+  position: relative;
+
   .remark_btn {
     position: absolute;
-    top: 36px;
+    top: 0;
     right: 16px;
   }
   .msg-info {

stdiet-ui/src/components/HealthyView/index.vue

@@ -244,9 +244,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .health_view_wrapper {
+  position: relative;
   .remark_btn {
     position: absolute;
-    top: 36px;
+    top: 0;
     right: 16px;
   }
 

stdiet-ui/src/store/modules/recipes.js

@@ -61,6 +61,7 @@ const mutations = {
           payload.cusWeight && (tarIgd.cusWeight = payload.cusWeight);
           payload.cusUnit && (tarIgd.cusUnit = payload.cusUnit);
         }
+        console.log(JSON.parse(JSON.stringify(state.recipesData)));
       } else if (actionType === "delIgd") {
         tarDishes.igdList = tarDishes.igdList.filter(
           igd => igd.id !== payload.igdId

stdiet-ui/src/views/custom/recipesBuild/BarChart.vue

@@ -76,7 +76,7 @@ export default {
         },
         tooltip: {
           trigger: "axis",
-          appendToBody: true,
+          // appendToBody: true,
           formatter: (params) => {
             // console.log(params);
             const [param] = params;
@@ -115,26 +115,30 @@ export default {
           source,
         },
         grid: {
-          top: 55,
+          top: 50,
-          left: 20,
+          left: 10,
           right: 50,
           bottom: 10,
           containLabel: true,
         },
         xAxis: {
           type: "category",
+          // axisLabel: {
+          //   rotate: 45,
+          // },
         },
         yAxis: {
           type: "value",
-          name: "热量（千卡）",
+          name: "热量/千卡",
           nameTextStyle: {
             color: "#262626",
+            fontSize: 12,
           },
         },
         series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
           name: dim,
           type: "bar",
-          barWidth: 26,
+          barWidth: 24,
           stack: "bar",
           encode: {
             y: dim,

stdiet-ui/src/views/custom/recipesBuild/PieChart.vue

@@ -3,7 +3,7 @@
     :class="`aspect_pie_chart_wrapper ${className || ''}`"
     :style="{ height: height, width: width }"
   >
-    <div ref="echart" :style="{ height: height, width: '200px' }" />
+    <div ref="echart" :style="{ height: height, width: '100px' }" />
     <div>
       <el-table
         :data="mData"
@@ -14,13 +14,20 @@
         class="small_table"
       >
         <el-table-column label="营养" prop="type" align="center" width="60" />
-        <el-table-column label="蛋白质" prop="p" align="center" width="80" />
+        <el-table-column label="蛋白质" prop="p" align="center" width="65" />
-        <el-table-column label="脂肪" prop="f" align="center" width="80" />
+        <el-table-column label="脂肪" prop="f" align="center" width="65" />
-        <el-table-column label="碳水" prop="c" align="center" width="80" />
+        <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="font-size: 12px; color: #606266">总热量约等于</div>
-        <div style="color: #515a6e; font-weight: bold">{{ totalHeat.toFixed(1) }}千卡</div>
+        <div style="color: #515a6e; font-weight: bold">
+          {{ totalHeat.toFixed(1) }}千卡
+        </div>
+      </div>
+      <div style="text-align: right; margin-top: 4px">
+        <el-button size="mini" type="text" @click="backToAll"
+          >查看全部</el-button
+        >
       </div>
     </div>
   </div>
@@ -31,6 +38,8 @@ 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 } = createNamespacedHelpers("recipes");
 
 export default {
   mixins: [resize],
@@ -108,16 +117,20 @@ export default {
       this.chart = echarts.init(this.$refs.echart, "myShine");
       this.updateChart(this.data.length > 0 ? this.data[0] : {});
     },
+    backToAll() {
+      this.resetCurrentDay({ currentDay: -1 });
+    },
     updateChart(data) {
       this.chart.clear();
       this.chart.setOption({
         title: {
-          text: `${data.name}营养分析`,
+          text: "营养分析",
+          subtext: data.name,
         },
         tooltip: {
           position: "right",
           trigger: "item",
-          appendToBody: true,
+          // appendToBody: true,
           formatter: (params) => {
             const {
               name,
@@ -137,23 +150,25 @@ export default {
           {
             name: data.name,
             type: "pie",
-            radius: [0, 50],
+            radius: [0, 40],
-            center: ["50%", "50%"],
+            center: ["50%", "55%"],
             data: ["p", "f", "c"].map((dim) => ({
               dim,
               value: data[`${dim}Heat`],
               name: this.nameDict[dim],
               oriData: data,
             })),
-            labelLine: {
+            // labelLine: {
-              length: 5,
+            //   length: 5,
-              length2: 5,
+            //   length2: 5,
-            },
-            // label: {
-            //   show: true,
-            //   position: "inside",
-            //   color: '#fff'
             // },
+            label: {
+              show: true,
+              position: "inside",
+              color: "#fff",
+              fontSize: 10,
+              fontWeight: "bold",
+            },
             itemStyle: {
               borderWidth: 1,
               borderColor: "#fff",
@@ -162,6 +177,7 @@ export default {
         ],
       });
     },
+    ...mapMutations(["resetCurrentDay"]),
   },
   watch: {
     data(newVal, oldVal) {

stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/index.vue

@@ -1,263 +0,0 @@
-<template>
-  <div
-    class="recipes_aspect_wrapper"
-    :style="`height: ${collapse ? 30 : 200}px`"
-  >
-    <div class="header" v-loading="loading">
-      <div class="header_btns">
-        <span>
-          <el-button
-            size="mini"
-            v-if="!!recipesId"
-            type="primary"
-            icon="el-icon-document-copy"
-            @click="handleOnTemplateClick"
-          >
-            另存为模板
-          </el-button>
-        </span>
-        <span>
-          <span class="font_size_style">
-            字体大小：
-            <el-select
-              v-model="mFontSize"
-              size="mini"
-              style="width: 80px"
-              @change="handleOnSizeChange"
-            >
-              <el-option
-                v-for="size in fontSizeOpts"
-                :key="size.value"
-                :label="size.label"
-                :value="size.value"
-              />
-            </el-select>
-          </span>
-          <el-button size="mini" v-if="!recipesId" @click="handleOnBack"
-            >返回</el-button
-          >
-          <el-popover
-            placement="bottom"
-            trigger="click"
-            title="修改审核状态"
-            style="margin-right: 12px"
-            v-hasPermi="['recipes:plan:review']"
-          >
-            <div>
-              <el-button
-                size="mini"
-                type="success"
-                @click="hanldeOnReveiwChange(2)"
-                >审核通过</el-button
-              >
-              <el-button
-                size="mini"
-                type="danger"
-                @click="hanldeOnReveiwChange(1)"
-                >未审核通过</el-button
-              >
-            </div>
-            <el-button
-              slot="reference"
-              size="mini"
-              v-if="reviewStatus"
-              :type="reviewStatus === 1 ? 'danger' : 'success'"
-            >
-              {{ reviewStatus === 1 ? "未审核" : "已审核" }}
-            </el-button>
-          </el-popover>
-          <el-button
-            v-if="!recipesId"
-            size="mini"
-            type="primary"
-            @click="handleOnSave"
-            >生成食谱</el-button
-          >
-        </span>
-      </div>
-      <el-button
-        size="mini"
-        type="text"
-        @click="handleCollapseClick"
-        class="collapse_btn"
-      >
-        {{ `${collapse ? "展开" : "收起"}` }}
-        <em
-          class="el-icon-arrow-down arrow_icon"
-          :style="
-            collapse ? 'transform: rotate(-180deg);' : 'transform: unset;'
-          "
-        />
-      </el-button>
-    </div>
-    <div
-      class="content"
-      :style="`visibility: ${collapse ? 'hidden' : 'visible'};`"
-    >
-      <BarChart
-        v-if="data.length > 1"
-        :data="data"
-        height="170px"
-        width="500px"
-        :max="
-          healthyData.basicBMR
-            ? parseFloat(
-                healthyData.basicBMR.substring(
-                  0,
-                  healthyData.basicBMR.indexOf('千卡')
-                )
-              )
-            : 0
-        "
-      />
-      <PieChart
-        v-if="data.length === 1"
-        :data="data"
-        height="170px"
-        width="500px"
-      />
-    </div>
-    <!-- 模板 -->
-    <TemplateDialog ref="templateRef" @onConfirm="handleOnCopy" />
-  </div>
-</template>
-<script>
-import BarChart from "./BarChart";
-import PieChart from "./PieChart";
-import { addRecipesTemplate } from "@/api/custom/recipesTemplate";
-import { createNamespacedHelpers } from "vuex";
-const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
-  "recipes"
-);
-import TemplateDialog from "@/components/TemplateDialog";
-export default {
-  name: "RecipesAspectCom",
-  components: {
-    BarChart,
-    PieChart,
-    TemplateDialog,
-  },
-  data() {
-    return {
-      loading: false,
-      mFontSize: 12,
-      fontSizeOpts: [
-        { value: 8, label: "8" },
-        { value: 10, label: "10" },
-        { value: 12, label: "12" },
-        { value: 14, label: "14" },
-        { value: 16, label: "16" },
-        { value: 18, label: "18" },
-      ],
-    };
-  },
-  mounted() {
-    // this.mFontSize = parseInt(localStorage.getItem("fontSize")) || 12;
-    // this.updateFontSize({fontSize:})
-  },
-  updated() {
-    // console.log(this.data);
-    if (this.fontSize !== this.mFontSize) {
-      this.mFontSize = this.fontSize;
-      // console.log(this.fontSize);
-    }
-  },
-  props: ["collapse", "data"],
-  computed: {
-    ...mapState(["recipesId", "reviewStatus", "healthyData", "fontSize"]),
-  },
-  watch: {
-    // fontSize(val) {
-    //   this.mFontSize = val;
-    // },
-  },
-  methods: {
-    handleOnSizeChange(fontSize) {
-      this.updateFontSize({ fontSize });
-    },
-    handleCollapseClick() {
-      this.$emit("update:collapse", !this.collapse);
-    },
-    handleOnSave() {
-      this.saveRecipes({
-        callback: (query) => {
-          // console.log(query);
-          this.$router.replace({
-            path: "/recipes/build/" + query.name + "/" + query.planId,
-          });
-        },
-      });
-    },
-    hanldeOnReveiwChange(reviewStatus) {
-      this.updateReviewStatus({ reviewStatus });
-    },
-    handleOnBack() {
-      this.updateStateData({ recipesData: [] });
-    },
-    handleOnTemplateClick() {
-      this.$refs.templateRef.showDialog();
-    },
-    handleOnCopy(form) {
-      this.loading = true;
-      addRecipesTemplate(form).then((response) => {
-        if (response.code === 200) {
-          const { planId, id } = response.data;
-          this.saveRecipes({
-            cusId: 0,
-            planId,
-            callback: () => {
-              this.$message.success(`另存为模板「${form.name}」成功`);
-              this.loading = false;
-              // window.open(
-              //   "/recipes/build/" + form.name + "/" + planId + "?temId=" + id,
-              //   "_blank"
-              // );
-            },
-          });
-        }
-      });
-    },
-    ...mapActions(["saveRecipes", "updateReviewStatus"]),
-    ...mapMutations(["updateStateData", "updateFontSize"]),
-  },
-};
-</script>
-<style rel="stylesheet/scss" lang="scss" scope>
-.recipes_aspect_wrapper {
-  transition: all 0.3s;
-  padding-bottom: 12px;
-
-  .header {
-    text-align: right;
-    height: 30px;
-    display: flex;
-    align-items: center;
-
-    .header_btns {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex: 1;
-    }
-
-    .collapse_btn {
-      width: 42px;
-    }
-
-    .arrow_icon {
-      transition: all 0.3s;
-      transform-origin: center center;
-    }
-
-    .font_size_style {
-      display: inline-flex;
-      align-items: center;
-      font-size: 12px;
-      margin-right: 12px;
-    }
-  }
-
-  .content {
-  }
-}
-</style>

stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue

@@ -11,7 +11,7 @@
       :cell-class-name="cellClassName"
       :style="`outline: ${currentDay === num ? '1px solid #d53950' : 'none'}`"
     >
-      <el-table-column prop="type" :width="100" align="center">
+      <el-table-column prop="type" :width="80" align="center">
         <template slot="header">
           <div class="pointer_style" @click="handleOnResetCurrentDay">
             {{ `第${numDay}天` }}
@@ -477,7 +477,7 @@ export default {
       // console.log(this.copyData);
       if (this.copyData) {
         const data = {
-          ...this.copyData,
+          ...JSON.parse(JSON.stringify(this.copyData)),
           type,
         };
         if (!this.recipesId) {
@@ -619,6 +619,10 @@ export default {
   }
 }
 
+.el-table .cell {
+  line-height: 18px;
+}
+
 .recipes_header {
   & > th {
     background: #d53950 !important;

stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="recipes_header_com_wrapper">
+    <div class="header_btns" v-loading="loading">
+      <section>
+        <el-button
+          size="mini"
+          v-if="!!recipesId"
+          type="primary"
+          icon="el-icon-document-copy"
+          @click="handleOnTemplateClick"
+        >
+          另存为模板
+        </el-button>
+      </section>
+      <section>
+        <span class="font_size_style">
+          字体大小：
+          <el-select
+            v-model="fontSize"
+            size="mini"
+            style="width: 80px"
+            @change="handleOnSizeChange"
+          >
+            <el-option
+              v-for="size in fontSizeOpts"
+              :key="size.value"
+              :label="size.label"
+              :value="size.value"
+            />
+          </el-select>
+        </span>
+        <el-button size="mini" v-if="!recipesId" @click="handleOnBack"
+          >返回</el-button
+        >
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          title="修改审核状态"
+          style="margin-right: 12px"
+          v-hasPermi="['recipes:plan:review']"
+        >
+          <div>
+            <el-button
+              size="mini"
+              type="success"
+              @click="hanldeOnReveiwChange(2)"
+              >审核通过</el-button
+            >
+            <el-button
+              size="mini"
+              type="danger"
+              @click="hanldeOnReveiwChange(1)"
+              >未审核通过</el-button
+            >
+          </div>
+          <el-button
+            slot="reference"
+            size="mini"
+            v-if="reviewStatus"
+            :type="reviewStatus === 1 ? 'danger' : 'success'"
+          >
+            {{ reviewStatus === 1 ? "未审核" : "已审核" }}
+          </el-button>
+        </el-popover>
+        <el-button
+          v-if="!recipesId"
+          size="mini"
+          type="primary"
+          @click="handleOnSave"
+          >生成食谱</el-button
+        >
+      </section>
+    </div>
+    <!-- 模板 -->
+    <TemplateDialog ref="templateRef" @onConfirm="handleOnCopy" />
+  </div>
+</template>
+<script>
+import { addRecipesTemplate } from "@/api/custom/recipesTemplate";
+import { createNamespacedHelpers } from "vuex";
+const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
+  "recipes"
+);
+import TemplateDialog from "@/components/TemplateDialog";
+export default {
+  name: "RecipesHeaderCom",
+  components: {
+    // BarChart,
+    // PieChart,
+    TemplateDialog,
+  },
+  data() {
+    return {
+      loading: false,
+      nFontSize: 0,
+      fontSizeOpts: [
+        { value: 8, label: "8" },
+        { value: 10, label: "10" },
+        { value: 12, label: "12" },
+        { value: 14, label: "14" },
+        { value: 16, label: "16" },
+        { value: 18, label: "18" },
+      ],
+    };
+  },
+  updated() {
+  },
+  computed: {
+    ...mapState(["recipesId", "reviewStatus", "fontSize"]),
+  },
+  watch: {
+  },
+  methods: {
+    handleOnSizeChange(fontSize) {
+      this.updateFontSize({ fontSize });
+    },
+    handleOnSave() {
+      this.saveRecipes({
+        callback: (query) => {
+          // console.log(query);
+          this.$router.replace({
+            path: "/recipes/build/" + query.name + "/" + query.planId,
+          });
+        },
+      });
+    },
+    hanldeOnReveiwChange(reviewStatus) {
+      this.updateReviewStatus({ reviewStatus });
+    },
+    handleOnBack() {
+      this.updateStateData({ recipesData: [] });
+    },
+    handleOnTemplateClick() {
+      this.$refs.templateRef.showDialog();
+    },
+    handleOnCopy(form) {
+      this.loading = true;
+      addRecipesTemplate(form).then((response) => {
+        if (response.code === 200) {
+          const { planId, id } = response.data;
+          this.saveRecipes({
+            cusId: 0,
+            planId,
+            callback: () => {
+              this.$message.success(`另存为模板「${form.name}」成功`);
+              this.loading = false;
+              // window.open(
+              //   "/recipes/build/" + form.name + "/" + planId + "?temId=" + id,
+              //   "_blank"
+              // );
+            },
+          });
+        }
+      });
+    },
+    ...mapActions(["saveRecipes", "updateReviewStatus"]),
+    ...mapMutations(["updateStateData", "updateFontSize"]),
+  },
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scope>
+.recipes_header_com_wrapper {
+  .header_btns {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 8px;
+  }
+
+  .font_size_style {
+    display: inline-flex;
+    align-items: center;
+    font-size: 12px;
+    margin-right: 12px;
+  }
+}
+</style>

stdiet-ui/src/views/custom/recipesBuild/RecipesView/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="recipes_view_wrapper">
-    <RecipesAspectCom :collapse.sync="collapse" :data="analyseData" />
+    <RecipesHeaderCom />
-    <div
+    <div id="recipes_content" class="recipes_content">
-      id="recipes_content"
-      class="recipes_content"
-      :style="`height: calc(100vh - ${collapse ? 62 : 232}px)`"
-    >
       <RecipesCom
         v-for="(item, index) in data"
         :id="`recipes${index}`"
@@ -20,22 +16,16 @@
 </template>
 <script>
 import RecipesCom from "./RecipesCom";
-import RecipesAspectCom from "./RecipesAspectCom";
+import RecipesHeaderCom from "./RecipesHeaderCom";
 export default {
   name: "RecipesView",
   components: {
     RecipesCom,
-    RecipesAspectCom,
+    RecipesHeaderCom,
-  },
-  computed: {
-    mCollapse() {
-      return analyseData.length ? this.collapse : false;
-    },
   },
+  computed: {},
   data() {
-    return {
+    return {};
-      collapse: false,
-    };
   },
   props: ["data", "analyseData", "name", "numRange"],
 };
@@ -46,6 +36,7 @@ export default {
 
   .recipes_content {
     overflow: auto;
+    height: calc(100vh - 48px);
     background: white;
   }
 }

stdiet-ui/src/views/custom/recipesBuild/index.vue

@@ -10,11 +10,41 @@
       <RecommendView v-else />
     </div>
     <div class="right" v-loading="healthDataLoading">
+      <div class="top" v-if="!!recipesData.length">
+        <BarChart
+          v-if="analyseData.length > 1"
+          :data="analyseData"
+          height="160px"
+          width="100%"
+          :max="
+            healthyData.basicBMR
+              ? parseFloat(
+                  healthyData.basicBMR.substring(
+                    0,
+                    healthyData.basicBMR.indexOf('千卡')
+                  )
+                )
+              : 0
+          "
+        />
+        <PieChart
+          v-if="analyseData.length === 1"
+          :data="analyseData"
+          height="160px"
+          width="100%"
+        />
+      </div>
+      <div class="content">
         <TemplateInfoView v-if="!!temId" :data="templateInfo" />
-      <HealthyView :data="healthyData" v-else-if="healthyDataType === 0" dev />
+        <HealthyView
+          :data="healthyData"
+          v-else-if="healthyDataType === 0"
+          dev
+        />
         <BodySignView :data="healthyData" v-else dev />
       </div>
     </div>
+  </div>
 </template>
 <script>
 import { createNamespacedHelpers } from "vuex";
@@ -30,6 +60,8 @@ import BodySignView from "@/components/BodySignView";
 import RecipesView from "./RecipesView/index";
 import RecommendView from "./RecommendView";
 import TemplateInfoView from "./TemplateInfoView";
+import BarChart from "./BarChart";
+import PieChart from "./PieChart";
 
 export default {
   name: "BuildRecipies",
@@ -55,6 +87,8 @@ export default {
   },
   created() {},
   components: {
+    BarChart,
+    PieChart,
     HealthyView,
     BodySignView,
     RecipesView,
@@ -95,7 +129,15 @@ export default {
     flex: 1;
     height: 100%;
     padding-left: 20px;
+
+    .top {
+      height: 160px;
+    }
+
+    .content {
       overflow: auto;
+      height: calc(100% - 160px);
+    }
   }
 }
 </style>

stdiet-ui/src/views/custom/recipesShow/MenuDetail/index.vue

@@ -56,6 +56,7 @@ export default {
       menuTypeTimeDict: {
         2: "10:00 - 10:30",
         4: "15:00 - 15:30",
+        6: "21:00 - 22:00",
       },
     };
   },