diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredentFile.java b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredentFile.java
index ceab8eccd..88effbaf9 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredentFile.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredentFile.java
@@ -11,17 +11,17 @@ public class SysIngredentFile {
 
     Long igdId;
 
-    String fileUrl;
+    String url;
 
-    String fileName;
+    String name;
 
     Integer delFlag;
 
-    Long createBy;
+    String createBy;
 
     Date createTime;
 
-    Long updateBy;
+    String updateBy;
 
     Date updateTime;
 }
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredient.java b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredient.java
index 4f52f9902..0898611a0 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredient.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredient.java
@@ -6,6 +6,7 @@ import lombok.Data;
 
 import java.math.BigDecimal;
 import java.util.Date;
+import java.util.List;
 
 /**
  * 食材对象 sys_ingredient
@@ -110,4 +111,6 @@ public class SysIngredient {
      */
     private String info;
 
+    private List<SysIngredentFile> imgList;
+
 }
\ No newline at end of file
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/mapper/SysIngredientMapper.java b/stdiet-custom/src/main/java/com/stdiet/custom/mapper/SysIngredientMapper.java
index 8ac25d4aa..e8f7a718e 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/mapper/SysIngredientMapper.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/mapper/SysIngredientMapper.java
@@ -1,87 +1,90 @@
 package com.stdiet.custom.mapper;
 
-import java.util.List;
-
 import com.stdiet.custom.domain.SysIngredentFile;
 import com.stdiet.custom.domain.SysIngredient;
 import com.stdiet.custom.domain.SysIngredientNotRec;
 import com.stdiet.custom.domain.SysIngredientRec;
 import org.apache.ibatis.annotations.Param;
 
+import java.util.List;
+
 /**
  * 食材Mapper接口
- * 
+ *
  * @author wonder
  * @date 2020-12-15
  */
-public interface SysIngredientMapper 
-{
+public interface SysIngredientMapper {
     /**
      * 查询食材
-     * 
+     *
      * @param id 食材ID
      * @return 食材
      */
-    public SysIngredient selectSysIngredientById(Long id);
+    SysIngredient selectSysIngredientById(Long id);
 
     /**
      * 查询食材列表
-     * 
+     *
      * @param sysIngredient 食材
      * @return 食材集合
      */
-    public List<SysIngredient> selectSysIngredientList(SysIngredient sysIngredient);
+    List<SysIngredient> selectSysIngredientList(SysIngredient sysIngredient);
 
     /**
      * 新增食材
-     * 
+     *
      * @param sysIngredient 食材
      * @return 结果
      */
-    public int insertSysIngredient(SysIngredient sysIngredient);
+    int insertSysIngredient(SysIngredient sysIngredient);
 
     /**
      * 修改食材
-     * 
+     *
      * @param sysIngredient 食材
      * @return 结果
      */
-    public int updateSysIngredient(SysIngredient sysIngredient);
+    int updateSysIngredient(SysIngredient sysIngredient);
 
     /**
      * 删除食材
-     * 
+     *
      * @param id 食材ID
      * @return 结果
      */
-    public int deleteSysIngredientById(Long id);
+    int deleteSysIngredientById(Long id);
 
     /**
      * 批量删除食材
-     * 
+     *
      * @param ids 需要删除的数据ID
      * @return 结果
      */
-    public int deleteSysIngredientByIds(Long[] ids);
+    int deleteSysIngredientByIds(Long[] ids);
 
-    public int batchIngredientRec(List<SysIngredientRec> ingredientRecList);
+    int batchIngredientRec(List<SysIngredientRec> ingredientRecList);
 
-    public int batchIngredientNotRec(List<SysIngredientNotRec> ingredientNotRecList);
+    int batchIngredientNotRec(List<SysIngredientNotRec> ingredientNotRecList);
 
-    public int deleteIngredentRecByIngredientId(Long recId);
+    int deleteIngredientRecByIngredientId(Long recId);
 
-    public int deleteIngredentNotRecByIngredientId(Long notRecId);
+    int deleteIngredientNotRecByIngredientId(Long notRecId);
 
-    public int deleteIngredentRecByIngredientIds(Long[] id);
+    int deleteIngredientRecByIngredientIds(Long[] id);
 
-    public int deleteIngredentNotRecByIngredientIds(Long[] id);
+    int deleteIngredientNotRecByIngredientIds(Long[] id);
 
     /**
      * 根据食材名称查询食材信息
+     *
      * @param name
      * @return
      */
-    public SysIngredient selectSysIngredientByName(@Param("name") String name);
+    SysIngredient selectSysIngredientByName(@Param("name") String name);
+
+    int batchInsertIngredientImage(List<SysIngredentFile> list);
+
+    int deleteIngredientImageById(Long id);
 
-    int batchInsertIngredientImage(List<SysIngredentFile> ingredentFiles);
 }
\ No newline at end of file
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysIngredientServiceImpl.java b/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysIngredientServiceImpl.java
index c37cf6f08..e785c9022 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysIngredientServiceImpl.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysIngredientServiceImpl.java
@@ -1,7 +1,10 @@
 package com.stdiet.custom.service.impl;
 
 import com.stdiet.common.utils.DateUtils;
+import com.stdiet.common.utils.SecurityUtils;
 import com.stdiet.common.utils.StringUtils;
+import com.stdiet.common.utils.oss.AliyunOSSUtils;
+import com.stdiet.custom.domain.SysIngredentFile;
 import com.stdiet.custom.domain.SysIngredient;
 import com.stdiet.custom.domain.SysIngredientNotRec;
 import com.stdiet.custom.domain.SysIngredientRec;
@@ -32,7 +35,16 @@ public class SysIngredientServiceImpl implements ISysIngredientService {
      */
     @Override
     public SysIngredient selectSysIngredientById(Long id) {
-        return sysIngredientMapper.selectSysIngredientById(id);
+        SysIngredient ingredient = sysIngredientMapper.selectSysIngredientById(id);
+        if (StringUtils.isNotNull(ingredient)) {
+            List<SysIngredentFile> imgList = ingredient.getImgList();
+            if (StringUtils.isNotEmpty(imgList)) {
+                for (SysIngredentFile file : imgList) {
+                    file.setUrl(AliyunOSSUtils.generatePresignedUrl(file.getUrl()));
+                }
+            }
+        }
+        return ingredient;
     }
 
     /**
@@ -43,7 +55,18 @@ public class SysIngredientServiceImpl implements ISysIngredientService {
      */
     @Override
     public List<SysIngredient> selectSysIngredientList(SysIngredient sysIngredient) {
-        return sysIngredientMapper.selectSysIngredientList(sysIngredient);
+        List<SysIngredient> ingredients = sysIngredientMapper.selectSysIngredientList(sysIngredient);
+        if (StringUtils.isNotEmpty(ingredients)) {
+            for (SysIngredient ingredient : ingredients) {
+                List<SysIngredentFile> imgList = ingredient.getImgList();
+                if (StringUtils.isNotEmpty(imgList)) {
+                    for (SysIngredentFile file : imgList) {
+                        file.setUrl(AliyunOSSUtils.generatePresignedUrl(file.getUrl()));
+                    }
+                }
+            }
+        }
+        return ingredients;
     }
 
     /**
@@ -61,26 +84,26 @@ public class SysIngredientServiceImpl implements ISysIngredientService {
         //
         insertNotRecommand(sysIngredient);
         //
-        
-
+        insertImageFiles(sysIngredient);
         return rows;
     }
 
     /**
      * 新增推荐标签
+     *
      * @param ingredient
      */
     public void insertRecommand(SysIngredient ingredient) {
         Long[] recIds = ingredient.getRecIds();
-        if(StringUtils.isNotNull(recIds)) {
+        if (StringUtils.isNotNull(recIds)) {
             List<SysIngredientRec> list = new ArrayList<SysIngredientRec>();
-            for(Long recId: recIds) {
+            for (Long recId : recIds) {
                 SysIngredientRec rec = new SysIngredientRec();
                 rec.setIngredientId(ingredient.getId());
                 rec.setRecommandId(recId);
                 list.add(rec);
             }
-            if(list.size() > 0) {
+            if (list.size() > 0) {
                 sysIngredientMapper.batchIngredientRec(list);
             }
         }
@@ -88,24 +111,45 @@ public class SysIngredientServiceImpl implements ISysIngredientService {
 
     /**
      * 新增不推荐标签
+     *
      * @param ingredient
      */
     public void insertNotRecommand(SysIngredient ingredient) {
         Long[] notRecIds = ingredient.getNotRecIds();
-        if(StringUtils.isNotNull(notRecIds)) {
+        if (StringUtils.isNotNull(notRecIds)) {
             List<SysIngredientNotRec> list = new ArrayList<SysIngredientNotRec>();
-            for(Long recId: notRecIds) {
+            for (Long recId : notRecIds) {
                 SysIngredientNotRec notRec = new SysIngredientNotRec();
                 notRec.setIngredientId(ingredient.getId());
                 notRec.setRecommandId(recId);
                 list.add(notRec);
             }
-            if(list.size() > 0) {
+            if (list.size() > 0) {
                 sysIngredientMapper.batchIngredientNotRec(list);
             }
         }
     }
 
+    /**
+     * 新增图片
+     *
+     * @param ingredient
+     */
+    public void insertImageFiles(SysIngredient ingredient) {
+        if (StringUtils.isNotNull(ingredient.getImgList())) {
+            List<SysIngredentFile> fileList = ingredient.getImgList();
+            for (SysIngredentFile file : fileList) {
+                file.setIgdId(ingredient.getId());
+                file.setCreateBy(SecurityUtils.getUsername());
+                file.setCreateTime(DateUtils.getNowDate());
+            }
+            if (fileList.size() > 0) {
+                sysIngredientMapper.batchInsertIngredientImage(fileList);
+            }
+        }
+    }
+
+
     /**
      * 修改食材
      *
@@ -116,10 +160,12 @@ public class SysIngredientServiceImpl implements ISysIngredientService {
     public int updateSysIngredient(SysIngredient sysIngredient) {
         sysIngredient.setUpdateTime(DateUtils.getNowDate());
         Long ingredientId = sysIngredient.getId();
-        sysIngredientMapper.deleteIngredentNotRecByIngredientId(ingredientId);
+        sysIngredientMapper.deleteIngredientNotRecByIngredientId(ingredientId);
         insertNotRecommand(sysIngredient);
-        sysIngredientMapper.deleteIngredentRecByIngredientId(ingredientId);
+        sysIngredientMapper.deleteIngredientRecByIngredientId(ingredientId);
         insertRecommand(sysIngredient);
+        sysIngredientMapper.deleteIngredientImageById(ingredientId);
+        insertImageFiles(sysIngredient);
         return sysIngredientMapper.updateSysIngredient(sysIngredient);
     }
 
@@ -131,8 +177,8 @@ public class SysIngredientServiceImpl implements ISysIngredientService {
      */
     @Override
     public int deleteSysIngredientByIds(Long[] ids) {
-        sysIngredientMapper.deleteIngredentRecByIngredientIds(ids);
-        sysIngredientMapper.deleteIngredentNotRecByIngredientIds(ids);
+        sysIngredientMapper.deleteIngredientRecByIngredientIds(ids);
+        sysIngredientMapper.deleteIngredientNotRecByIngredientIds(ids);
         return sysIngredientMapper.deleteSysIngredientByIds(ids);
     }
 
@@ -144,18 +190,19 @@ public class SysIngredientServiceImpl implements ISysIngredientService {
      */
     @Override
     public int deleteSysIngredientById(Long id) {
-        sysIngredientMapper.deleteIngredentRecByIngredientId(id);
-        sysIngredientMapper.deleteIngredentNotRecByIngredientId(id);
+        sysIngredientMapper.deleteIngredientRecByIngredientId(id);
+        sysIngredientMapper.deleteIngredientNotRecByIngredientId(id);
         return sysIngredientMapper.deleteSysIngredientById(id);
     }
 
     /**
      * 根据食材名称查询食材信息
+     *
      * @param name
      * @return
      */
     @Override
-    public SysIngredient selectSysIngredientByName(String name){
+    public SysIngredient selectSysIngredientByName(String name) {
         return sysIngredientMapper.selectSysIngredientByName(name);
     }
 }
\ No newline at end of file
diff --git a/stdiet-custom/src/main/resources/mapper/custom/SysIngredientMapper.xml b/stdiet-custom/src/main/resources/mapper/custom/SysIngredientMapper.xml
index 122e4bf06..e1b867059 100644
--- a/stdiet-custom/src/main/resources/mapper/custom/SysIngredientMapper.xml
+++ b/stdiet-custom/src/main/resources/mapper/custom/SysIngredientMapper.xml
@@ -21,7 +21,7 @@
         <result property="notRec" column="not_rec"/>
         <result property="reviewStatus" column="review_status"/>
         <result property="info" column="info"/>
-        <association property="imgFiles" column="id" select="selectIngredentFileById"/>
+        <association property="imgList" column="id" select="selectIngredentFileById"/>
     </resultMap>
 
     <sql id="selectSysIngredientVo">
@@ -126,6 +126,7 @@
             <if test="updateBy != null">update_by,</if>
             <if test="updateTime != null">update_time,</if>
             <if test="reviewStatus != null">review_status,</if>
+            <if test="info != null">info,</if>
         </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="name != null">#{name},</if>
@@ -140,6 +141,7 @@
             <if test="updateBy != null">#{updateBy},</if>
             <if test="updateTime != null">#{updateTime},</if>
             <if test="reviewStatus != null">#{reviewStatus},</if>
+            <if test="info != null">#{info},</if>
         </trim>
     </insert>
 
@@ -157,22 +159,22 @@
         </foreach>
     </insert>
 
-    <delete id="deleteIngredentRecByIngredientId" parameterType="Long">
+    <delete id="deleteIngredientRecByIngredientId" parameterType="Long">
         delete from sys_ingredient_rec where ingredient_id=#{ingredientId}
     </delete>
 
-    <delete id="deleteIngredentNotRecByIngredientId" parameterType="Long">
+    <delete id="deleteIngredientNotRecByIngredientId" parameterType="Long">
         delete from sys_ingredient_not_rec where ingredient_id=#{ingredientId}
     </delete>
 
-    <delete id="deleteIngredentRecByIngredientIds" parameterType="Long">
+    <delete id="deleteIngredientRecByIngredientIds" parameterType="Long">
         delete from sys_ingredient_rec where ingredient_id in
         <foreach item="id" collection="array" open="(" separator="," close=")">
             #{id}
         </foreach>
     </delete>
 
-    <delete id="deleteIngredentNotRecByIngredientIds" parameterType="String">
+    <delete id="deleteIngredientNotRecByIngredientIds" parameterType="String">
         delete from sys_ingredient_not_rec where ingredient_id in
         <foreach item="id" collection="array" open="(" separator="," close=")">
             #{id}
@@ -194,6 +196,7 @@
             <if test="updateBy != null">update_by = #{updateBy},</if>
             <if test="updateTime != null">update_time = #{updateTime},</if>
             <if test="reviewStatus != null">review_status = #{reviewStatus},</if>
+            <if test="info != null">info = #{info},</if>
         </trim>
         where id = #{id}
     </update>
@@ -217,26 +220,26 @@
 
     <!--    添加食材图片-->
     <insert id="batchInsertIngredientImage">
-        insert into sys_ingredient_file(igd_id, file_url, file_name, create_by, create_time, update_by, update_time )
+        insert into sys_ingredient_file(igd_id, url, name, create_by, create_time, update_by, update_time )
         values
         <foreach collection="list" separator="," item="item" index="index">
-            (#{item.ingredientId},#{item.fileUrl},#{item.fileName},#{item.createBy},#{item.createTime},#{item.updateBy},#{item.updateTime})
+            (#{item.igdId},#{item.url},#{item.name},#{item.createBy},#{item.createTime},#{item.updateBy},#{item.updateTime})
         </foreach>
     </insert>
 
     <resultMap id="SysIngredentFileResult" type="SysIngredentFile">
         <result property="id" column="id"/>
-        <result property="fileName" column="file_name"/>
-        <result property="fileUrl" column="file_url"/>
+        <result property="name" column="name"/>
+        <result property="url" column="url"/>
     </resultMap>
 
     <!--    查找图片-->
     <select id="selectIngredentFileById" parameterType="Long" resultMap="SysIngredentFileResult">
-        select id, file_url, file_name from sys_ingredent_file where igd_id = #{id} and del_flag = 0
+        select id, url, name from sys_ingredient_file where igd_id = #{id} and del_flag = 0
     </select>
 
     <!--    删除图片记录-->
-    <update id="deleteIngredentFileById" parameterType="Long">
-        update sys_ingredent_file set del_flag=1 where id=#{id}
-    </update>
+    <delete id="deleteIngredientImageById" parameterType="Long">
+        delete from sys_ingredient_file where igd_id=#{id}
+    </delete>
 </mapper>
\ No newline at end of file
diff --git a/stdiet-ui/public/index.html b/stdiet-ui/public/index.html
index 6d64bf957..34b70ae6f 100644
--- a/stdiet-ui/public/index.html
+++ b/stdiet-ui/public/index.html
@@ -6,6 +6,7 @@
     <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">
     <title><%= webpackConfig.name %></title>
 	  <style>
     html,
diff --git a/stdiet-ui/src/components/FileUpload/index.vue b/stdiet-ui/src/components/FileUpload/index.vue
new file mode 100644
index 000000000..4fe046dee
--- /dev/null
+++ b/stdiet-ui/src/components/FileUpload/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <el-upload
+      ref="ElUpload"
+      v-bind="$props"
+    >
+      <slot></slot>
+    </el-upload>
+</template>
+<script>
+export default {
+  name: 'formUpload',
+  componentName: 'formUpload',
+  props: [
+    'value', 'action', 'headers', 'multiple', 'data', 'show-file-list', 'name', 'with-credentials', 'drag',
+    'accept', 'on-preview', 'on-remove', 'on-success', 'on-error', 'on-progress', 'on-change',
+    'before-upload', 'before-remove', 'list-type', 'auto-upload', 'file-list', 'http-request',
+    'disabled', 'limit', 'on-exceed',
+  ],
+  data() {
+    return {
+      currentValue: this.value,
+    };
+  },
+  watch: {
+    // eslint-disable-next-line
+    value(val, oldValue) {
+      this.setCurrentValue(val);
+    },
+    // eslint-disable-next-line
+    fileList(val, oldValue) {
+      this.setCurrentValue(val);
+    },
+  },
+  methods: {
+    clearFiles() {
+      this.$refs.ElUpload.clearFiles();
+    },
+    abort(file) {
+      this.$refs.ElUpload.abort(file);
+    },
+    dispatch(componentName, eventName, params) {
+      let parent = this.$parent || this.$root;
+      let name = parent.$options.componentName;
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent;
+        if (parent) {
+          name = parent.$options.componentName;
+        }
+      }
+      if (parent) {
+        parent.$emit(...[eventName].concat(params));
+      }
+    },
+    setCurrentValue(value) {
+      this.currentValue = value;
+      this.dispatch('ElFormItem', 'el.form.change',  [].concat(value));
+    },
+  },
+};
+</script>
diff --git a/stdiet-ui/src/store/modules/recipes.js b/stdiet-ui/src/store/modules/recipes.js
index 03fd59638..3448e1f42 100644
--- a/stdiet-ui/src/store/modules/recipes.js
+++ b/stdiet-ui/src/store/modules/recipes.js
@@ -517,6 +517,10 @@ const getters = {
             obj.fHeat = obj.fWeight * 9;
             obj.cWeight += (igd.weight / 100) * igd.carbonRatio;
             obj.cHeat = obj.cWeight * 4;
+            obj[`heat${cur.type}`] +=
+              (igd.weight / 100) * igd.proteinRatio * 4 +
+              (igd.weight / 100) * igd.fatRatio * 9 +
+              (igd.weight / 100) * igd.carbonRatio * 4;
           });
           return obj;
         },
@@ -527,7 +531,13 @@ const getters = {
           cWeight: 0,
           pHeat: 0,
           fHeat: 0,
-          cHeat: 0
+          cHeat: 0,
+          heat1: 0,
+          heat2: 0,
+          heat3: 0,
+          heat4: 0,
+          heat5: 0,
+          heat6: 0,
         }
       )
     );
diff --git a/stdiet-ui/src/views/custom/ingredient/index.vue b/stdiet-ui/src/views/custom/ingredient/index.vue
index 61fbff02c..8e1b1c590 100644
--- a/stdiet-ui/src/views/custom/ingredient/index.vue
+++ b/stdiet-ui/src/views/custom/ingredient/index.vue
@@ -245,55 +245,17 @@
     />
 
     <!-- 添加或修改食材对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="620px" append-to-body>
-      <el-row :gutter="15">
+    <el-dialog :title="title" :visible.sync="open" width="720px" append-to-body>
+      <el-row :gutter="8" style="height: 620px; overflow: auto">
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-          <el-col :span="12">
+          <el-col :span="8">
             <el-form-item label="食材名称" prop="name" label-width="90px">
-              <el-input v-model="form.name" placeholder="请输入食材名称" />
+              <el-input v-model="form.name" placeholder="请输入名称" />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item
-              label="蛋白质比例"
-              prop="proteinRatio"
-              label-width="90px"
-            >
-              <el-input
-                v-model="form.proteinRatio"
-                placeholder="请输入蛋白质比例"
-                style="width: 150px"
-              />
-              /100g
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="脂肪比例" prop="fatRatio" label-width="90px">
-              <el-input
-                v-model="form.fatRatio"
-                placeholder="请输入脂肪比例"
-                style="width: 150px"
-              />
-              /100g
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item
-              label="碳水比例"
-              prop="carbonRatio"
-              label-width="90px"
-            >
-              <el-input
-                v-model="form.carbonRatio"
-                placeholder="请输入碳水比例"
-                style="width: 150px"
-              />
-              /100g
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="食材类别" prop="type" label-width="90px">
-              <el-select v-model="form.type" placeholder="请选择食材类别">
+          <el-col :span="8">
+            <el-form-item label="食材类别" prop="type" label-width="100px">
+              <el-select v-model="form.type" placeholder="请选择类别">
                 <el-option
                   v-for="dict in typeOptions"
                   :key="dict.dictValue"
@@ -303,8 +265,8 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="地域" prop="area" label-width="90px">
+          <el-col :span="8">
+            <el-form-item label="地域" prop="area" label-width="100px">
               <el-select v-model="form.area" placeholder="请选择地域">
                 <el-option
                   v-for="dict in areaOptions"
@@ -315,8 +277,35 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="8">
+            <el-form-item
+              label="蛋白质/100g"
+              prop="proteinRatio"
+              label-width="100px"
+            >
+              <el-input
+                v-model="form.proteinRatio"
+                placeholder="蛋白质比例"
+                width="80px"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="脂肪/100g" prop="fatRatio" label-width="90px">
+              <el-input v-model="form.fatRatio" placeholder="脂肪比例" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              label="碳水/100g"
+              prop="carbonRatio"
+              label-width="90px"
+            >
+              <el-input v-model="form.carbonRatio" placeholder="碳水比例" />
+            </el-form-item>
+          </el-col>
           <el-col :span="12">
-            <el-form-item label="忌口人群" label-width="90px">
+            <el-form-item label="忌口人群" label-width="76px">
               <el-select
                 v-model="form.notRecIds"
                 multiple
@@ -333,7 +322,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="推荐人群" label-width="90px">
+            <el-form-item label="推荐人群" label-width="76px">
               <el-select
                 v-model="form.recIds"
                 multiple
@@ -349,9 +338,34 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="16">
+            <el-form-item label="食材图片" prop="imgList">
+              <el-upload
+                drag
+                :auto-upload="true"
+                :headers="{ Authorization: 'Bearer ' + token }"
+                :limit="5"
+                :multiple="true"
+                :file-list="form.imgList"
+                :action="actionUrl"
+                accept="image/jpeg,image/png"
+                :on-success="handleOnUploadSuccess"
+                :on-exceed="handleOnUploadExceed"
+                :on-remove="handleOnUploadRemove"
+                list-type="picture"
+              >
+                <em class="el-icon-upload" />
+                <div class="el-upload__text">
+                  将文件拖到此处，或<em>点击上传</em>
+                  <div style="font-size: 12px; color: #8c8c8c">最多可上传5个文件，且每个文件不超过10M</div>
+                </div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="审核状态" prop="reviewStatus">
               <el-select
+                style="position: absolute"
                 v-model="form.reviewStatus"
                 placeholder="请选择审核状态"
                 clearable
@@ -366,8 +380,19 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="备注" prop="remark" label-width="90px">
+            <el-form-item label="介绍" prop="info">
               <el-input
+                :rows="5"
+                v-model="form.info"
+                type="textarea"
+                placeholder="请输入内容"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                :rows="3"
                 v-model="form.remark"
                 type="textarea"
                 placeholder="请输入内容"
@@ -395,6 +420,8 @@ import {
 } from "@/api/custom/ingredient";
 
 import AutoHideInfo from "@/components/AutoHideInfo";
+import FileUpload from "@/components/FileUpload";
+import { getToken } from "@/utils/auth";
 
 import { listPhysicalSigns } from "@/api/custom/physicalSigns";
 
@@ -402,11 +429,14 @@ export default {
   name: "Ingredient",
   components: {
     autohideinfo: AutoHideInfo,
+    FileUpload,
   },
   data() {
     return {
       // 遮罩层
       loading: true,
+      //
+      actionUrl: process.env.VUE_APP_BASE_API + "/custom/fileUpload/ingredient",
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -431,6 +461,8 @@ export default {
       areaOptions: [],
       //
       physicalSignsOptions: [],
+      //
+      token: getToken(),
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -506,6 +538,7 @@ export default {
         createTime: null,
         updateBy: null,
         updateTime: null,
+        imgList: [],
       };
       this.resetForm("form");
     },
@@ -621,6 +654,34 @@ export default {
     string2Arr(str) {
       return str ? str.split(",") : [];
     },
+    handleOnUploadSuccess(res, file, fileList) {
+      this.form.imgList = fileList.map((data) => {
+        const { name, url, response } = data;
+        if (response) {
+          return { url: response.fileUrl, name: response.fileName };
+        }
+        return { url, name };
+      });
+      // console.log({
+      //   res,
+      //   file,
+      //   fileList,
+      //   form: this.form,
+      // });
+    },
+    handleOnUploadRemove(file, fileList) {
+      this.form.imgList = fileList.map(({ url, name }) => ({
+        url,
+        name,
+      }));
+      // console.log({ file, fileList, form: this.form });
+    },
+    handleOnUploadExceed(files, fileList) {
+      this.$message({
+        message: "最多可上传5张图片",
+        type: "warning",
+      });
+    },
   },
 };
 </script>
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 6444d1e80..a9fc668c6 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue
@@ -3,8 +3,25 @@
     :class="`aspect_pie_chart_wrapper ${className || ''}`"
     :style="{ height: height, width: width }"
   >
-    <div ref="echart" :style="{ height: height, width: '100px' }" />
-    <div>
+    <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>
+    </div>
+    <div v-if="view === 0" class="table_zone">
       <el-table
         :data="mData"
         size="mini"
@@ -24,15 +41,10 @@
           {{ totalHeat.toFixed(1) }}千卡
         </div>
       </div>
-      <div
-        style="text-align: right; margin-top: 4px"
-        v-if="recipesData.length > 1"
-      >
-        <el-button size="mini" type="text" @click="backToAll"
-          >查看全部</el-button
-        >
-      </div>
     </div>
+    <el-button size="mini" type="text" @click="backToAll" class="see_all"
+      >查看全部</el-button
+    >
   </div>
 </template>
 
@@ -76,10 +88,19 @@ export default {
         f: "脂肪",
         c: "碳水",
       },
+      menuDict: {
+        1: "早餐",
+        2: "早加餐",
+        3: "午餐",
+        4: "午加餐",
+        5: "晚餐",
+        6: "晚加餐",
+      },
       typeDict: {
         Weight: "摄入量",
         Rate: "供能比",
       },
+      view: 0,
     };
   },
   computed: {
@@ -119,16 +140,17 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(this.$refs.echart, "myShine");
-      this.updateChart(this.data.length > 0 ? this.data[0] : {});
+      this.updateChart(this.data[0] || {});
     },
     backToAll() {
       this.resetCurrentDay({ currentDay: -1 });
     },
     updateChart(data) {
+      // console.log(data);
       this.chart.clear();
-      this.chart.setOption({
+      const option = {
         title: {
-          text: "营养分析",
+          text: !this.view ? "营养分析" : "热量分析",
           subtext: data.name,
         },
         tooltip: {
@@ -142,26 +164,90 @@ export default {
               percent,
               data: { value, oriData, dim },
             } = params;
-            return [
-              `${marker} ${name}`,
-              `摄入量：${oriData[`${dim}Weight`].toFixed(1)}克`,
-              `摄入热量：${value.toFixed(1)}千卡`,
-              `供能比：${percent}%`,
-            ].join("</br>");
+            return !this.view
+              ? [
+                  `${marker} ${name}`,
+                  `摄入量：${oriData[`${dim}Weight`].toFixed(1)}克`,
+                  `摄入热量：${value.toFixed(1)}千卡`,
+                  `供能比：${percent}%`,
+                ].join("</br>")
+              : [
+                  `${marker} ${name}`,
+                  `热量：${data[`heat${dim}`].toFixed(1)}千卡`,
+                  `供能比：${percent}%`,
+                ].join("</br>");
           },
         },
+        graphic:
+          this.view === 1
+            ? [
+                {
+                  type: "group",
+                  top: 60,
+                  left: 10,
+                  silent: true,
+                  children: [
+                    {
+                      type: "text",
+                      style: {
+                        text: "总热量约",
+                        fill: "#606266",
+                      },
+                    },
+                    {
+                      type: "text",
+                      top: 18,
+                      left: 8,
+                      style: {
+                        text: `${this.totalHeat.toFixed(1)}千卡`,
+                        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;
+                  }, []),
+                },
+              ]
+            : [],
         series: [
           {
             name: data.name,
             type: "pie",
-            radius: [0, 40],
+            radius: [0, !this.view ? 40 : 60],
             center: ["50%", "55%"],
-            data: ["p", "f", "c"].map((dim) => ({
-              dim,
-              value: data[`${dim}Heat`],
-              name: this.nameDict[dim],
-              oriData: data,
-            })),
+            data: (!this.view
+              ? Object.keys(this.nameDict)
+              : Object.keys(this.menuDict)
+            ).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],
+                  oriData: data,
+                });
+              }
+              return arr;
+            }, []),
             // labelLine: {
             //   length: 5,
             //   length2: 5,
@@ -170,7 +256,7 @@ export default {
               show: true,
               position: "inside",
               color: "#fff",
-              fontSize: 10,
+              fontSize: !this.view ? 10 : 12,
               fontWeight: "bold",
             },
             itemStyle: {
@@ -179,7 +265,16 @@ export default {
             },
           },
         ],
+      };
+      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"]),
   },
@@ -195,21 +290,24 @@ export default {
 };
 </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
   }
 
-  // & > div:nth-child(2) {
   .small_table {
     .my_cell {
       padding: 2px 0 !important;
     }
   }
-  // }
 
   .summary {
     padding: 2px;
@@ -222,5 +320,31 @@ export default {
       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>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
index bb57c4067..359613a1b 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
@@ -49,14 +49,7 @@
       </el-table-column>
       <el-table-column label="菜品" prop="name" align="center">
         <template slot="header">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="点击添加菜品"
-            placement="top"
-          >
-            <div class="pointer_style" @click="handleOnAdd">菜品</div>
-          </el-tooltip>
+          <div class="pointer_style" @click="handleOnAdd">菜品</div>
         </template>
         <template slot-scope="scope">
           <el-popover placement="right" trigger="hover" :title="scope.row.name">
diff --git a/stdiet-ui/src/views/custom/recipesShow/utils.js b/stdiet-ui/src/views/custom/recipesShow/utils.js
index 7acdc44c5..0d2dc6f37 100644
--- a/stdiet-ui/src/views/custom/recipesShow/utils.js
+++ b/stdiet-ui/src/views/custom/recipesShow/utils.js
@@ -14,6 +14,7 @@ export function getProcessMenuData(menuData) {
         name: cur.name,
         menuId: cur.menuId,
         methods: cur.methods,
+        remark: cur.remark,
         type: cur.type,
         isMain: cur.isMain,
         igdList: cur.igdList.reduce((igdArr, igdData) => {