食谱展示界面开发

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

@@ -87,7 +87,7 @@ export default {
                   `${seriesName.substring(0, 1)}Weight`
                 ].toFixed(1);
                 arr.push(
-                  `${cur.marker} ${nutriName}：${heatVal}千卡（${weightVal}克）`
+                  `${cur.marker} ${nutriName}：${weightVal}克（${heatVal}千卡）`
                 );
                 return arr;
               },
@@ -110,7 +110,7 @@ export default {
           source,
         },
         grid: {
-          top: 40,
+          top: 55,
           left: 20,
           right: 20,
           bottom: 10,
@@ -121,6 +121,10 @@ export default {
         },
         yAxis: {
           type: "value",
+          name: "热量（千卡）",
+          nameTextStyle: {
+            color: "#262626",
+          },
         },
         series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
           name: dim,

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

@@ -14,25 +14,14 @@
         class="small_table"
       >
         <el-table-column label="营养" prop="type" align="center" width="60" />
-        <el-table-column
-          label="重量(g)"
-          prop="weight"
-          align="center"
-          width="80"
-        />
-        <el-table-column
-          label="热量(Kcal)"
-          prop="heat"
-          align="center"
-          width="90"
-        />
-        <el-table-column
-          label="热量占比"
-          prop="heatRate"
-          align="center"
-          width="80"
-        />
+        <el-table-column label="蛋白质" prop="p" align="center" width="80" />
+        <el-table-column label="脂肪" prop="f" align="center" width="80" />
+        <el-table-column label="碳水" prop="c" align="center" width="80" />
       </el-table>
+      <div class="summary">
+        <div style="font-size: 12px; color: #606266;">总热量约等于</div>
+        <div style="color: #515a6e; font-weight: bold">{{ totalHeat.toFixed(1) }}千卡</div>
+      </div>
     </div>
   </div>
 </template>
@@ -69,35 +58,37 @@ export default {
   data() {
     return {
       chart: null,
+      totalHeat: 0,
       nameDict: {
         p: "蛋白质",
         f: "脂肪",
         c: "碳水",
       },
+      typeDict: {
+        Weight: "摄入量",
+        Rate: "供能比",
+      },
     };
   },
   computed: {
     mData() {
       const [data] = this.data;
-      let totalHeat = 0;
-      return data
-        ? ["p", "f", "c"].map((type) => {
-            if (totalHeat === 0) {
-              totalHeat = ["p", "f", "c"].reduce((heat, cur) => {
-                heat += data[`${cur}Heat`];
-                return heat;
-              }, 0);
-            }
-            return {
-              type: this.nameDict[type],
-              weight: data[`${type}Weight`].toFixed(1),
-              heat: data[`${type}Heat`].toFixed(1),
-              heatRate: `${((data[`${type}Heat`] / totalHeat) * 100).toFixed(
-                2
-              )}%`,
-            };
-          })
-        : [];
+      if (!data) {
+        this.totalHeat = 0;
+        return [];
+      }
+      this.totalHeat = data.cHeat + data.fHeat + data.pHeat;
+      const mData = ["Weight", "Rate"].map((t, idx) => ({
+        type: this.typeDict[t],
+        ...["p", "f", "c"].reduce((obj, cur) => {
+          obj[cur] = idx
+            ? `${((data[`${cur}Heat`] / this.totalHeat) * 100).toFixed(2)}%`
+            : `${data[`${cur}Weight`].toFixed(1)}克`;
+          return obj;
+        }, {}),
+      }));
+      console.log(mData);
+      return mData;
     },
   },
   mounted() {
@@ -121,10 +112,10 @@ export default {
       this.chart.clear();
       this.chart.setOption({
         title: {
-          text: `${data.name}营养统计`,
+          text: `${data.name}营养分析`,
         },
         tooltip: {
-          position: 'right',
+          position: "right",
           trigger: "item",
           appendToBody: true,
           formatter: (params) => {
@@ -136,9 +127,9 @@ export default {
             } = params;
             return [
               `${marker} ${name}`,
-              `含量：${oriData[`${dim}Weight`].toFixed(1)}克`,
-              `热量：${value.toFixed(1)}千卡`,
-              `热量占比：${percent}%`,
+              `摄入量：${oriData[`${dim}Weight`].toFixed(1)}克`,
+              `摄入热量：${value.toFixed(1)}千卡`,
+              `供能比：${percent}%`,
             ].join("</br>");
           },
         },
@@ -199,5 +190,17 @@ export default {
     }
   }
   // }
+
+  .summary {
+    padding: 2px;
+    border-bottom: 1px solid #dfe6ec;
+    border-left: 1px solid #dfe6ec;
+    border-right: 1px solid #dfe6ec;
+
+    & > div {
+      padding: 3px;
+      text-align: center;
+    }
+  }
 }
 </style>

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

@@ -24,7 +24,7 @@
         <ConfigDishes
           v-show="active === 1"
           v-bind="selDishes"
-          :typeOptions="typeOptions"
+          :typeOptions="dishesTypeOptions"
           @onChange="handleOnConfigChange"
         />
       </div>
@@ -65,7 +65,7 @@ export default {
     return {
       visible: false,
       active: 0,
-      typeOptions: [],
+      dishesTypeOptions: [],
       selDishes: {
         name: "",
         type: "",
@@ -76,7 +76,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["dishesTypeOptions"]),
+    ...mapState(["typeOptions"]),
   },
   methods: {
     showDrawer() {
@@ -95,11 +95,11 @@ export default {
       // console.log(data);
       this.selDishes = data;
       this.active = 1;
-      this.typeOptions = data.type.split(",").reduce((arr, cur, idx) => {
+      this.dishesTypeOptions = data.type.split(",").reduce((arr, cur, idx) => {
         if (idx === 0) {
           this.selDishes.type = cur;
         }
-        const tarOpt = this.dishesTypeOptions.find(
+        const tarOpt = this.typeOptions.find(
           (obj) => obj.dictValue === cur
         );
         if (tarOpt) {