diff --git a/stdiet-admin/src/main/filters/dev/application.yml b/stdiet-admin/src/main/filters/dev/application.yml
index 6536928b3..91d0fbcdd 100644
--- a/stdiet-admin/src/main/filters/dev/application.yml
+++ b/stdiet-admin/src/main/filters/dev/application.yml
@@ -148,6 +148,7 @@ mybatis:
     mapperLocations: classpath*:mapper/**/*Mapper.xml
     # 加载全局的配置文件
     configLocation: classpath:mybatis/mybatis-config.xml
+    typeHandlersPackage: com.stdiet.**.typehandler
 
 # PageHelper分页插件
 pagehelper: 
diff --git a/stdiet-admin/src/main/filters/local/application.yml b/stdiet-admin/src/main/filters/local/application.yml
index 057dee4c1..d135b20ca 100644
--- a/stdiet-admin/src/main/filters/local/application.yml
+++ b/stdiet-admin/src/main/filters/local/application.yml
@@ -148,6 +148,7 @@ mybatis:
   mapperLocations: classpath*:mapper/**/*Mapper.xml
   # 加载全局的配置文件
   configLocation: classpath:mybatis/mybatis-config.xml
+  typeHandlersPackage: com.stdiet.**.typehandler
 
 # PageHelper分页插件
 pagehelper:
diff --git a/stdiet-admin/src/main/filters/prod/application.yml b/stdiet-admin/src/main/filters/prod/application.yml
index 4044c157a..dab9fc36e 100644
--- a/stdiet-admin/src/main/filters/prod/application.yml
+++ b/stdiet-admin/src/main/filters/prod/application.yml
@@ -148,6 +148,7 @@ mybatis:
   mapperLocations: classpath*:mapper/**/*Mapper.xml
   # 加载全局的配置文件
   configLocation: classpath:mybatis/mybatis-config.xml
+  typeHandlersPackage: com.stdiet.**.typehandler
 
 # PageHelper分页插件
 pagehelper:
diff --git a/stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysRecipesController.java b/stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysRecipesController.java
index 0ba05c017..950b7c1cc 100644
--- a/stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysRecipesController.java
+++ b/stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysRecipesController.java
@@ -1,23 +1,82 @@
 package com.stdiet.web.controller.custom;
 
+import com.stdiet.common.annotation.Log;
 import com.stdiet.common.core.controller.BaseController;
 import com.stdiet.common.core.domain.AjaxResult;
+import com.stdiet.common.enums.BusinessType;
+import com.stdiet.custom.domain.SysRecipes;
+import com.stdiet.custom.domain.SysRecipesDailyDishes;
 import com.stdiet.custom.service.ISysRecipesService;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 
 @RestController
-@RequestMapping("/recipes")
+@RequestMapping("/custom/recipes")
 public class SysRecipesController extends BaseController {
 
     @Autowired
     private ISysRecipesService sysRecipesService;
 
+    /**
+     * 获取食谱详情
+     *
+     * @param resipesId
+     * @return
+     */
     @GetMapping(value = "/{resipesId}")
     public AjaxResult getInfo(@PathVariable("resipesId") Long resipesId) {
         return AjaxResult.success(sysRecipesService.selectSysRecipesByRecipesId(resipesId));
     }
+
+    @Log(title = "食谱", businessType = BusinessType.INSERT)
+    @PostMapping
+    public AjaxResult addRecipes(@RequestBody SysRecipes sysRecipes) {
+        int rows = sysRecipesService.addRecipes(sysRecipes);
+        if (rows > 0) {
+            return AjaxResult.success(sysRecipes.getId());
+        } else {
+            return AjaxResult.error();
+        }
+    }
+
+    /**
+     * 修改食谱菜品
+     *
+     * @param sysRecipesDailyDishes
+     * @return
+     */
+    @Log(title = "食谱菜品", businessType = BusinessType.UPDATE)
+    @PutMapping(value = "/dishes")
+    public AjaxResult edit(@RequestBody SysRecipesDailyDishes sysRecipesDailyDishes) {
+        return toAjax(sysRecipesService.updateDishesDetail(sysRecipesDailyDishes));
+    }
+
+    /**
+     * 添加菜品
+     *
+     * @param sysRecipesDailyDishes
+     * @return
+     */
+    @Log(title = "食谱菜品", businessType = BusinessType.INSERT)
+    @PostMapping(value = "/dishes")
+    public AjaxResult add(@RequestBody SysRecipesDailyDishes sysRecipesDailyDishes) {
+        int rows = sysRecipesService.addDishes(sysRecipesDailyDishes);
+        if (rows > 0) {
+            return AjaxResult.success(sysRecipesDailyDishes.getId());
+        } else {
+            return AjaxResult.error();
+        }
+    }
+
+    /**
+     * 删除菜品
+     *
+     * @param id
+     * @return
+     */
+    @Log(title = "食谱菜品", businessType = BusinessType.DELETE)
+    @DeleteMapping("/dishes/{id}")
+    public AjaxResult delete(@PathVariable Long id) {
+        return toAjax(sysRecipesService.deleteDishes(id));
+    }
 }
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysDishes.java b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysDishes.java
index 61bd86838..6d6f32c9f 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysDishes.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysDishes.java
@@ -1,5 +1,6 @@
 package com.stdiet.custom.domain;
 
+import com.alibaba.fastjson.JSONArray;
 import com.fasterxml.jackson.annotation.JsonFormat;
 import com.stdiet.common.annotation.Excel;
 import lombok.Data;
@@ -74,6 +75,4 @@ public class SysDishes {
 
     private List<SysDishesIngredient> igdList;
 
-    private List<SysDishesIngredient> detail;
-
 }
\ No newline at end of file
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysDishesIngredient.java b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysDishesIngredient.java
index b4fb4200b..092dce023 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysDishesIngredient.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysDishesIngredient.java
@@ -1,8 +1,6 @@
 package com.stdiet.custom.domain;
 
 import lombok.Data;
-import org.apache.commons.lang3.builder.ToStringBuilder;
-import org.apache.commons.lang3.builder.ToStringStyle;
 
 import java.math.BigDecimal;
 
@@ -27,4 +25,11 @@ public class SysDishesIngredient extends SysIngredient {
 
     private String remark;
 
+    private Long id;
+
+    private String cus_unit;
+
+    private String cus_weight;
+
+
 }
\ No newline at end of file
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipes.java b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipes.java
index 9b727297d..40dc33b41 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipes.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipes.java
@@ -1,47 +1,17 @@
 package com.stdiet.custom.domain;
 
-import com.fasterxml.jackson.annotation.JsonFormat;
 import lombok.Data;
 
-import java.util.Date;
 import java.util.List;
 
 @Data
 public class SysRecipes {
-    private static final long serialVersionUID = 1L;
 
     private Long id;
 
-    private Integer numDay;
+    private Long cusId;
 
-    private List<SysDishes> dishes;
+    private Long planId;
 
-    private Integer reviewStatus;
-
-    /**
-     * 创建者
-     */
-    private String createBy;
-
-    /**
-     * 创建时间
-     */
-    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
-    private Date createTime;
-
-    /**
-     * 更新者
-     */
-    private String updateBy;
-
-    /**
-     * 更新时间
-     */
-    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
-    private Date updateTime;
-
-    /**
-     * 备注
-     */
-    private String remark;
+    private List<SysRecipesDaily> menus;
 }
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipesDaily.java b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipesDaily.java
new file mode 100644
index 000000000..057f25b21
--- /dev/null
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipesDaily.java
@@ -0,0 +1,34 @@
+package com.stdiet.custom.domain;
+
+import lombok.Data;
+
+import java.util.Date;
+import java.util.List;
+
+@Data
+public class SysRecipesDaily {
+    private Long id;
+
+    private Integer numDay;
+
+    private Date date;
+
+    private Long recipesId;
+
+    private Long cusId;
+
+    private Integer reviewStatus;
+
+    private Date createTime;
+
+    private String createBy;
+
+    private Date updateTime;
+
+    private String updateBy;
+
+    private String remark;
+
+    private List<SysRecipesDailyDishes> dishes;
+
+}
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipesDailyDishes.java b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipesDailyDishes.java
new file mode 100644
index 000000000..b4e5d5e77
--- /dev/null
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipesDailyDishes.java
@@ -0,0 +1,28 @@
+package com.stdiet.custom.domain;
+
+import com.alibaba.fastjson.JSONArray;
+import lombok.Data;
+
+import java.util.Date;
+import java.util.List;
+
+@Data
+public class SysRecipesDailyDishes {
+    private Long id;
+
+    private Long menuId;
+
+    private String name;
+
+    private Long dishesId;
+
+    private JSONArray detail;
+
+    private String methods;
+
+    private List<SysDishesIngredient> igdList;
+
+    private String type;
+
+    private Integer isMain;
+}
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/mapper/SysRecipesMapper.java b/stdiet-custom/src/main/java/com/stdiet/custom/mapper/SysRecipesMapper.java
index e0bfdcc0a..b97792625 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/mapper/SysRecipesMapper.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/mapper/SysRecipesMapper.java
@@ -1,10 +1,28 @@
 package com.stdiet.custom.mapper;
 
 import com.stdiet.custom.domain.SysRecipes;
+import com.stdiet.custom.domain.SysRecipesDaily;
+import com.stdiet.custom.domain.SysRecipesDailyDishes;
 
 import java.util.List;
 
 public interface SysRecipesMapper {
 
+
+    public int addRecipes(SysRecipes sysRecipes);
+
+    public int bashAddDishes(List<SysRecipesDailyDishes> dishes);
+
+    public int bashAddMenus(List<SysRecipesDaily> menus);
+
+
+    public int getNumDayByCusId(Long id);
+
     public List<SysRecipes> selectSysRecipesByRecipesId(Long id);
+
+    public int updateDishesDetail(SysRecipesDailyDishes sysRecipesDaily);
+
+    public int addDishes(SysRecipesDailyDishes sysRecipesDaily);
+
+    public int deleteDishes(Long id);
 }
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/service/ISysRecipesService.java b/stdiet-custom/src/main/java/com/stdiet/custom/service/ISysRecipesService.java
index 5bf1c4a39..b23c9b81c 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/service/ISysRecipesService.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/service/ISysRecipesService.java
@@ -1,9 +1,20 @@
 package com.stdiet.custom.service;
 
 import com.stdiet.custom.domain.SysRecipes;
+import com.stdiet.custom.domain.SysRecipesDaily;
+import com.stdiet.custom.domain.SysRecipesDailyDishes;
 
 import java.util.List;
 
 public interface ISysRecipesService {
+
+    public int addRecipes(SysRecipes sysRecipes);
+
     public List<SysRecipes> selectSysRecipesByRecipesId(Long id);
+
+    public int updateDishesDetail(SysRecipesDailyDishes sysRecipesDaily);
+
+    public int addDishes(SysRecipesDailyDishes sysRecipesDaily);
+
+    public int deleteDishes(Long id);
 }
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysRecipesServiceImpl.java b/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysRecipesServiceImpl.java
index a899e98c4..3ceaae40d 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysRecipesServiceImpl.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysRecipesServiceImpl.java
@@ -1,12 +1,18 @@
 package com.stdiet.custom.service.impl;
 
 import com.stdiet.custom.domain.SysRecipes;
+import com.stdiet.custom.domain.SysRecipesDaily;
+import com.stdiet.custom.domain.SysRecipesDailyDishes;
+import com.stdiet.custom.domain.SysRecipesPlan;
 import com.stdiet.custom.mapper.SysRecipesMapper;
+import com.stdiet.custom.mapper.SysRecipesPlanMapper;
 import com.stdiet.custom.service.ISysRecipesService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
+import java.util.ArrayList;
+import java.util.Date;
 import java.util.List;
 
 @Service
@@ -16,8 +22,64 @@ public class SysRecipesServiceImpl implements ISysRecipesService {
     @Autowired
     private SysRecipesMapper sysRecipesMapper;
 
+    @Autowired
+    private SysRecipesPlanMapper sysRecipesPlanMapper;
+
+
+    @Override
+    public int addRecipes(SysRecipes sysRecipes) {
+        int rows = sysRecipesMapper.addRecipes(sysRecipes);
+        if (rows > 0) {
+            int count = sysRecipesMapper.getNumDayByCusId(sysRecipes.getCusId());
+            List<SysRecipesDaily> menus = sysRecipes.getMenus();
+            List<SysRecipesDailyDishes> dishes = new ArrayList<>();
+            int size = menus.size();
+            for (int i = 0; i < size; i++) {
+                SysRecipesDaily tarMenu = menus.get(i);
+                // 计算menuId
+                long dailyId = sysRecipes.getId() + new Date().getTime() + i;
+                tarMenu.setId(dailyId);
+                // 插入recipiesId
+                tarMenu.setRecipesId(sysRecipes.getId());
+                // 插入numDay
+                tarMenu.setNumDay(count + i + 1);
+                for (SysRecipesDailyDishes tmpDishes : tarMenu.getDishes()) {
+                    // 让菜品插入menuId
+                    tmpDishes.setMenuId(dailyId);
+                    dishes.add(tmpDishes);
+                }
+            }
+            // 插入每天食谱
+            sysRecipesMapper.bashAddMenus(menus);
+            // 插入每天菜品
+            sysRecipesMapper.bashAddDishes(dishes);
+            // 更新食谱计划
+            SysRecipesPlan sysRecipesPlan = new SysRecipesPlan();
+            sysRecipesPlan.setId(sysRecipes.getPlanId());
+            sysRecipesPlan.setRecipesId(sysRecipes.getId());
+            sysRecipesPlanMapper.updateSysRecipesPlan(sysRecipesPlan);
+        }
+
+        return rows;
+    }
+
     @Override
     public List<SysRecipes> selectSysRecipesByRecipesId(Long id) {
         return sysRecipesMapper.selectSysRecipesByRecipesId(id);
     }
+
+    @Override
+    public int updateDishesDetail(SysRecipesDailyDishes sysRecipesDailyDishes) {
+        return sysRecipesMapper.updateDishesDetail(sysRecipesDailyDishes);
+    }
+
+    @Override
+    public int addDishes(SysRecipesDailyDishes sysRecipesDailyDishes) {
+        return sysRecipesMapper.addDishes(sysRecipesDailyDishes);
+    }
+
+    @Override
+    public int deleteDishes(Long id) {
+        return sysRecipesMapper.deleteDishes(id);
+    }
 }
diff --git a/stdiet-custom/src/main/resources/mapper/custom/SysRecipesMapper.xml b/stdiet-custom/src/main/resources/mapper/custom/SysRecipesMapper.xml
index f8cfc64a0..d29b1f7df 100644
--- a/stdiet-custom/src/main/resources/mapper/custom/SysRecipesMapper.xml
+++ b/stdiet-custom/src/main/resources/mapper/custom/SysRecipesMapper.xml
@@ -4,7 +4,7 @@
         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.stdiet.custom.mapper.SysRecipesMapper">
 
-    <resultMap type="SysRecipes" id="SysRecipesResult">
+    <resultMap type="SysRecipesDaily" id="SysRecipesResult">
         <result property="id" column="id"/>
         <result property="numDay" column="num_day"/>
         <result property="updateBy" column="update_by"/>
@@ -15,14 +15,16 @@
         <association property="dishes" column="id" select="selectDishesByMenuId"/>
     </resultMap>
 
-    <resultMap id="SysDishesResult" type="SysDishes">
-        <result property="id" column="dishes_id"/>
+    <resultMap id="SysDishesResult" type="SysRecipesDailyDishes">
+        <result property="dishesId" column="dishes_id"/>
+        <result property="menuId" column="menu_id"/>
+        <result property="id" column="id" />
         <result property="name" column="name"/>
         <result property="type" column="type"/>
         <result property="methods" column="methods"/>
         <result property="isMain" column="is_main"/>
         <result property="detail" column="detail" typeHandler="com.stdiet.custom.typehandler.ArrayJsonHandler"
-                javaType="com.stdiet.custom.domain.SysDishesIngredientInfo"/>
+                javaType="com.stdiet.custom.domain.SysDishesIngredient"/>
         <association property="igdList" column="dishes_id" select="selectIngredientsByDishesId"/>
     </resultMap>
 
@@ -76,4 +78,67 @@
         ) ing USING(id)
     </select>
 
+    <!-- 更新菜品-->
+    <update id="updateDishesDetail" parameterType="SysRecipesDailyDishes">
+        update sys_customer_menu_dishes
+        <trim prefix="SET" suffixOverrides=",">
+            <if test="detail != null">detail = #{detail, jdbcType=OTHER, typeHandler=com.stdiet.custom.typehandler.ArrayJsonHandler},</if>
+        </trim>
+        where id = #{id}
+    </update>
+
+    <!-- 插入菜品-->
+    <insert id="addDishes" parameterType="SysRecipesDailyDishes" useGeneratedKeys="true" keyProperty="id">
+        insert into sys_customer_menu_dishes
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="menuId != null">menu_id,</if>
+            <if test="dishesId != null">dishes_id,</if>
+            <if test="type != null">type,</if>
+            <if test="detail != null">detail,</if>
+        </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="menuId != null">#{menuId},</if>
+            <if test="dishesId != null">#{dishesId},</if>
+            <if test="type != null">#{type},</if>
+            <if test="detail != null">#{detail, jdbcType=OTHER, typeHandler=com.stdiet.custom.typehandler.ArrayJsonHandler},</if>
+        </trim>
+    </insert>
+
+    <!-- 删除菜品-->
+    <delete id="deleteDishes" parameterType="Long">
+        delete from sys_customer_menu_dishes where id = #{id}
+    </delete>
+
+    <!--    查询已有食谱天数-->
+    <select id="getNumDayByCusId" parameterType="Long" resultType="Integer">
+        select count(*) from sys_customer_daily_menu where cus_id = #{id}
+    </select>
+    
+    <!--  新增食谱  -->
+    <insert id="addRecipes" parameterType="SysRecipes" useGeneratedKeys="true" keyProperty="id">
+        insert into sys_customer_menu
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="cusId != null">cus_id,</if>
+        </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="cusId != null">#{cusId},</if>
+        </trim>
+    </insert>
+
+    <!--  新增每菜单 -->
+    <insert id="bashAddMenus">
+        insert into sys_customer_daily_menu (id, num_day, date, recipes_id, cus_id) values
+        <foreach collection="list" separator="," item="item" index="index">
+            (#{item.id}, #{item.numDay}, #{item.date}, #{item.recipesId}, #{item.cusId})
+        </foreach>
+    </insert>
+
+    <!--    新增菜单对应菜品-->
+    <insert id="bashAddDishes" >
+        insert into sys_customer_menu_dishes (menu_id, type, dishes_id, detail) values
+        <foreach collection="list" separator="," item="item" index="index">
+            (#{item.menuId}, #{item.type}, #{item.dishesId}, #{item.detail, jdbcType=OTHER, typeHandler=com.stdiet.custom.typehandler.ArrayJsonHandler})
+        </foreach>
+    </insert>
+
 </mapper>
\ No newline at end of file
diff --git a/stdiet-custom/src/main/resources/mapper/custom/SysRecipesPlanMapper.xml b/stdiet-custom/src/main/resources/mapper/custom/SysRecipesPlanMapper.xml
index 8f47b8b98..5382f00f9 100644
--- a/stdiet-custom/src/main/resources/mapper/custom/SysRecipesPlanMapper.xml
+++ b/stdiet-custom/src/main/resources/mapper/custom/SysRecipesPlanMapper.xml
@@ -127,7 +127,7 @@
 
     <!-- 食谱计划、订单表联查 -->
     <select id="selectPlanListByCondition" parameterType="SysRecipesPlan" resultMap="SysRecipesPlanResult">
-      SELECT srp.id,srp.order_id,sr.customer,sr.cus_id,sr.phone,su_nutritionist.nick_name nutritionist,su_nutritionist_assis.nick_name AS nutritionist_assis,sr.start_time,sr.server_end_time, srp.start_date,srp.end_date,srp.send_flag,srp.send_time
+      SELECT srp.id,srp.order_id,srp.recipes_id,sr.customer,sr.cus_id,sr.phone,su_nutritionist.nick_name nutritionist,su_nutritionist_assis.nick_name AS nutritionist_assis,sr.start_time,sr.server_end_time, srp.start_date,srp.end_date,srp.send_flag,srp.send_time
       FROM sys_recipes_plan srp
       LEFT JOIN sys_order sr ON sr.order_id = srp.order_id
       LEFT JOIN sys_user su_nutritionist ON su_nutritionist.user_id = sr.nutritionist_id AND su_nutritionist.del_flag = 0
diff --git a/stdiet-ui/jsconfig.json b/stdiet-ui/jsconfig.json
new file mode 100644
index 000000000..f87334d48
--- /dev/null
+++ b/stdiet-ui/jsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/stdiet-ui/package.json b/stdiet-ui/package.json
index 29bdfa9f3..f69302144 100644
--- a/stdiet-ui/package.json
+++ b/stdiet-ui/package.json
@@ -46,13 +46,15 @@
     "clipboard": "^2.0.6",
     "core-js": "3.6.5",
     "dayjs": "^1.9.1",
-    "echarts": "4.2.1",
+    "echarts": "4.7.0",
     "element-ui": "2.13.2",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
+    "immer": "^8.0.1",
     "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "3.0.0-rc.1",
+    "lodash": "^4.17.20",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
diff --git a/stdiet-ui/src/api/custom/recipes.js b/stdiet-ui/src/api/custom/recipes.js
index 0c598a8b3..3ab412055 100644
--- a/stdiet-ui/src/api/custom/recipes.js
+++ b/stdiet-ui/src/api/custom/recipes.js
@@ -1,8 +1,39 @@
 import request from "@/utils/request";
 
-export function getRecipes(id) {
+export function addRecipesApi(data) {
   return request({
-    url: "/recipes/" + id,
+    url: "/custom/recipes/",
+    method: "post",
+    data
+  });
+}
+
+export function getRecipesApi(id) {
+  return request({
+    url: "/custom/recipes/" + id,
     method: "get"
   });
 }
+
+export function updateDishesDetailApi(data) {
+  return request({
+    url: "/custom/recipes/dishes",
+    method: "put",
+    data
+  });
+}
+
+export function addDishesApi(data) {
+  return request({
+    url: "/custom/recipes/dishes",
+    method: "post",
+    data
+  });
+}
+
+export function deleteDishesApi(id) {
+  return request({
+    url: "/custom/recipes/dishes/" + id,
+    method: "delete"
+  });
+}
diff --git a/stdiet-ui/src/components/AutoHideInfo/index.vue b/stdiet-ui/src/components/AutoHideInfo/index.vue
index c583838c6..b2b4aa2af 100644
--- a/stdiet-ui/src/components/AutoHideInfo/index.vue
+++ b/stdiet-ui/src/components/AutoHideInfo/index.vue
@@ -3,9 +3,14 @@
     <div v-for="item in mData" :key="item">
       {{ item }}
     </div>
-    <div v-if="data.length > 3">
-      <div>...</div>
-      <el-popover placement="top-start" width="200" popper-class="autohideinfo_detial" trigger="hover">
+    <div v-if="data.length > line">
+      <div v-if="line > 0">...</div>
+      <el-popover
+        placement="top-start"
+        width="200"
+        popper-class="autohideinfo_detial"
+        trigger="hover"
+      >
         <div v-for="item in data" :key="item">{{ item }}</div>
         <el-button type="text" slot="reference">详情</el-button>
       </el-popover>
@@ -14,37 +19,39 @@
 </template>
 
 <script>
-  export default {
-    name: "AutoHideInfo",
-    data() {
-      return {
-      };
+export default {
+  name: "AutoHideInfo",
+  data() {
+    return {};
+  },
+  props: {
+    data: {
+      type: Array,
+      default: "",
+      // required: true,
     },
-    props: {
-      data: {
-        type: Array,
-        default: '',
-        // required: true,
-      },
+    line: {
+      type: Number,
+      default: 3,
     },
-    computed: {
-      mData: function () {
-        if (this.data instanceof Array) {
-          return this.data.slice(0, 3);
-        }
-        return [];
-      },
+  },
+  computed: {
+    mData: function () {
+      if (this.data instanceof Array) {
+        return this.data.slice(0, this.line);
+      }
+      return [];
     },
-  };
+  },
+};
 </script>
 
-<style>
-  .autohideinfo_wrapper {
+<style scoped>
+.autohideinfo_wrapper {
+}
 
-  }
-
-  .autohideinfo_detial {
-    max-height: 240px;
-    overflow: auto;
-  }
+.autohideinfo_detial {
+  max-height: 240px;
+  overflow: auto;
+}
 </style>
diff --git a/stdiet-ui/src/components/AutoHideMessage/index.vue b/stdiet-ui/src/components/AutoHideMessage/index.vue
index 2ec08bc84..0f70ce300 100644
--- a/stdiet-ui/src/components/AutoHideMessage/index.vue
+++ b/stdiet-ui/src/components/AutoHideMessage/index.vue
@@ -36,7 +36,7 @@
   };
 </script>
 
-<style>
+<style scoped>
   .autohideinfo_wrapper {
 
   }
diff --git a/stdiet-ui/src/components/ContractDrawer/index.vue b/stdiet-ui/src/components/ContractDrawer/index.vue
index 0a5c5e96a..4085e88b2 100644
--- a/stdiet-ui/src/components/ContractDrawer/index.vue
+++ b/stdiet-ui/src/components/ContractDrawer/index.vue
@@ -4,6 +4,7 @@
       :title="title"
       :close-on-press-escape="false"
       :visible.sync="visible"
+      :wrapperClosable="false"
       @closed="handleOnClosed"
       size="40%"
     >
@@ -22,22 +23,48 @@
         </el-row>
 
         <el-table :data="contractList">
-          <el-table-column label="合同编号" align="center" prop="id"  width="150"/>
-          <el-table-column label="合同状态" align="center" prop="status" width="80" >
+          <el-table-column
+            label="合同编号"
+            align="center"
+            prop="id"
+            width="150"
+          />
+          <el-table-column
+            label="合同状态"
+            align="center"
+            prop="status"
+            width="80"
+          >
             <template slot-scope="scope">
               <el-tag
                 :type="scope.row.status === 'yes' ? 'success' : 'danger'"
-                disable-transitions>
-                {{scope.row.status === 'yes' ? '已签订':'未签订'}}
+                disable-transitions
+              >
+                {{ scope.row.status === "yes" ? "已签订" : "未签订" }}
               </el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="客户姓名" align="center" prop="name" width="200"/>
+          <el-table-column
+            label="客户姓名"
+            align="center"
+            prop="name"
+            width="200"
+          />
 
-          <el-table-column label="合同地址" align="center" prop="path" width="80">
+          <el-table-column
+            label="合同地址"
+            align="center"
+            prop="path"
+            width="80"
+          >
             <template slot-scope="scope">
-              <el-button type="text" icon="el-icon-copy-document" @click="handleCopy(scope.row.path)" class="copyBtn"
-                         :data-clipboard-text="copyValue">复制
+              <el-button
+                type="text"
+                icon="el-icon-copy-document"
+                @click="handleCopy(scope.row.path)"
+                class="copyBtn"
+                :data-clipboard-text="copyValue"
+                >复制
               </el-button>
             </template>
           </el-table-column>
@@ -48,15 +75,15 @@
                 type="text"
                 icon="el-icon-view"
                 @click="handleOnDetailClick(scope.row)"
-              >详情
+                >详情
               </el-button>
               <el-button
-                v-if="scope.row.status==='yes'"
+                v-if="scope.row.status === 'yes'"
                 size="mini"
                 type="text"
                 icon="el-icon-view"
                 @click="handleLook(scope.row.path)"
-              >查看
+                >查看
               </el-button>
               <el-button
                 size="mini"
@@ -64,7 +91,7 @@
                 icon="el-icon-delete"
                 @click="handleOnDeleteClick(scope.row)"
                 v-hasPermi="['custom:contract:remove']"
-              >删除
+                >删除
               </el-button>
             </template>
           </el-table-column>
@@ -78,23 +105,23 @@
   </div>
 </template>
 <script>
-  import {delContract, listContract} from "@/api/custom/contract";
-  import ContractDetail from "@/components/ContractDetail";
-  import Clipboard from 'clipboard';
-  import ContractAdd from "@/components/ContractAdd";
+import { delContract, listContract } from "@/api/custom/contract";
+import ContractDetail from "@/components/ContractDetail";
+import Clipboard from "clipboard";
+import ContractAdd from "@/components/ContractAdd";
 
 export default {
   name: "CustomerContractDrawer",
   components: {
-    'contract-detail': ContractDetail,
-    'add-contract':ContractAdd
+    "contract-detail": ContractDetail,
+    "add-contract": ContractAdd,
   },
   data() {
     return {
       visible: false,
       title: "",
       data: undefined,
-      copyValue:"",
+      copyValue: "",
       contractList: [],
     };
   },
@@ -108,7 +135,7 @@ export default {
       this.fetchContractList(data.id);
     },
     fetchContractList(cusId) {
-      listContract({"customerId": cusId }).then((res) => {
+      listContract({ customerId: cusId }).then((res) => {
         this.contractList = res.rows;
         this.visible = true;
       });
@@ -118,7 +145,7 @@ export default {
         {
           customer: this.data.name,
           customerId: this.data.id,
-          nutritionistId: this.data.mainDietitian
+          nutritionistId: this.data.mainDietitian,
         },
         () => {
           this.fetchContractList(this.data.id);
@@ -131,9 +158,7 @@ export default {
     handleOnDetailClick(data) {
       this.$refs.contractDetailRef.showDialog(data.id);
     },
-    handleOnEditClick(data) {
-
-    },
+    handleOnEditClick(data) {},
     handleOnDeleteClick(data) {
       const contractIds = data.id;
       this.$confirm(
@@ -155,18 +180,18 @@ export default {
         .catch(function () {});
     },
     handleCopy(path) {
-      this.copyValue = window.location.origin.replace('manage', 'sign') + path;
-      const btnCopy = new Clipboard('.copyBtn');
+      this.copyValue = window.location.origin.replace("manage", "sign") + path;
+      const btnCopy = new Clipboard(".copyBtn");
       this.$message({
-        message: '拷贝成功',
-        type: 'success'
+        message: "拷贝成功",
+        type: "success",
       });
     },
     handleLook(path) {
-      const url = window.location.origin.replace('manage', 'sign') + path;
+      const url = window.location.origin.replace("manage", "sign") + path;
       // const url = "http://stsign.busyinn.com" + path;
-      window.open(url, '_blank');
-    }
+      window.open(url, "_blank");
+    },
   },
 };
 </script>
diff --git a/stdiet-ui/src/components/Editor/index.vue b/stdiet-ui/src/components/Editor/index.vue
index ad35bbf5d..a1b5d20f4 100644
--- a/stdiet-ui/src/components/Editor/index.vue
+++ b/stdiet-ui/src/components/Editor/index.vue
@@ -113,7 +113,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .editor, .ql-toolbar {
   white-space: pre-wrap!important;
   line-height: normal !important;
@@ -192,4 +192,4 @@ export default {
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体";
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/stdiet-ui/src/components/OrderDrawer/index.vue b/stdiet-ui/src/components/OrderDrawer/index.vue
index 7c01b3d0f..e349bbec2 100644
--- a/stdiet-ui/src/components/OrderDrawer/index.vue
+++ b/stdiet-ui/src/components/OrderDrawer/index.vue
@@ -4,6 +4,7 @@
       :title="title"
       :close-on-press-escape="false"
       :visible.sync="visible"
+      :wrapperClosable="false"
       @closed="handleOnClosed"
       size="40%"
     >
diff --git a/stdiet-ui/src/components/PhysicalSignsDialog/index.vue b/stdiet-ui/src/components/PhysicalSignsDialog/index.vue
index f20b811b1..be164b16f 100644
--- a/stdiet-ui/src/components/PhysicalSignsDialog/index.vue
+++ b/stdiet-ui/src/components/PhysicalSignsDialog/index.vue
@@ -472,7 +472,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
   .margin-top-20{
     margin-top:20px;
   }
diff --git a/stdiet-ui/src/components/PhysicalSignsEdit/index.vue b/stdiet-ui/src/components/PhysicalSignsEdit/index.vue
index e40b9eb73..9750fe118 100644
--- a/stdiet-ui/src/components/PhysicalSignsEdit/index.vue
+++ b/stdiet-ui/src/components/PhysicalSignsEdit/index.vue
@@ -176,7 +176,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
   .margin-top-20{
     margin-top:20px;
   }
diff --git a/stdiet-ui/src/components/PhysicalSignsRemark/index.vue b/stdiet-ui/src/components/PhysicalSignsRemark/index.vue
index 9c1133ced..8c3d57b71 100644
--- a/stdiet-ui/src/components/PhysicalSignsRemark/index.vue
+++ b/stdiet-ui/src/components/PhysicalSignsRemark/index.vue
@@ -76,7 +76,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
   .margin-top-20{
     margin-top:20px;
   }
diff --git a/stdiet-ui/src/components/RecipesCom/index.vue b/stdiet-ui/src/components/RecipesCom/index.vue
deleted file mode 100644
index ca04ce089..000000000
--- a/stdiet-ui/src/components/RecipesCom/index.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <div class="main">
-    <div class="aspect">指标</div>
-    <div class="recipes">
-      <el-table :data="mData" border :span-method="spanMethod" size="mini">
-        <el-table-column :label="`${name}第${num}天`"></el-table-column>
-        <el-table-column label="菜品" prop="name"></el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "RecipesCom",
-  props: {
-    data: {
-      type: Array,
-      default: [],
-      required: true,
-    },
-    name: {
-      type: String,
-      default: "",
-    },
-    num: {
-      type: Number,
-      default: 0,
-    },
-  },
-  components: {},
-  mounted() {
-    // console.log(this.data);
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    mData() {
-      if (!this.data.dishes) {
-        return [];
-      }
-
-      const mData = this.data.dishes.reduce((arr, cur) => {
-        if (cur.id > 0) {
-          cur.igdList.forEach((igd) => {
-            if (igd.id > 0) {
-              const tarDetail = cur.detail.find((det) => det.id == igd.id);
-              arr.push({
-                id: cur.id,
-                name: cur.name,
-                type: cur.type,
-                isMain: cur.isMain,
-                methods: cur.methods,
-                igdId: igd.id,
-                igdName: igd.name,
-                proteinRatio: igd.proteinRatio,
-                fatRatio: igd.fatRatio,
-                carbonRatio: igd.carbonRatio,
-                rec: igd.rec,
-                notRec: igd.notRec,
-                weight: tarDetail ? tarDetail.weight : igd.weight,
-                cusWeight: tarDetail ? tarDetail.cus_weight : igd.cusWeight,
-                cusUnit: tarDetail ? tarDetail.cus_unit : igd.cusUnit,
-              });
-            }
-          });
-        }
-        return arr;
-      }, []);
-      // console.log(mData);
-      return mData;
-    },
-  },
-  methods: {
-    spanMethod({ row, column, rowIndex, columnIndex }) {},
-  },
-};
-</script>
-<style rel="stylesheet/scss" lang="scss">
-.main {
-  .aspect {
-  }
-
-  .recipies {
-  }
-}
-</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/TextInfo.vue b/stdiet-ui/src/components/TextInfo/index.vue
similarity index 84%
rename from stdiet-ui/src/views/custom/recipesBuild/TextInfo.vue
rename to stdiet-ui/src/components/TextInfo/index.vue
index 275b46f6c..09654e7c6 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/TextInfo.vue
+++ b/stdiet-ui/src/components/TextInfo/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div :class="classname">
-    <span class="title">{{ title }}：</span>
+    <span class="info_title">{{ title }}：</span>
     <span v-if="newLine">
       <div v-for="value in mValue" :key="value">{{ value }}</div>
     </span>
-    <span v-else class="value">{{ mValue }}</span>
+    <span v-else class="info_value">{{ mValue }}</span>
   </div>
 </template>
 <script>
@@ -32,19 +32,19 @@ export default {
   props: ["title", "value", "extraclass"],
 };
 </script>
-<style rel="stylesheet/scss" lang="scss">
+<style  lang="scss" >
 .text_info_wrapper {
   display: flex;
   margin-right: 24px;
   min-width: 120px;
   font-size: 14px;
 
-  .title {
+  .info_title {
     color: #8c8c8c;
     width: auto;
   }
 
-  .value {
+  .info_value {
     /* color: #696969; */
     flex: 1 1 0;
   }
diff --git a/stdiet-ui/src/router/index.js b/stdiet-ui/src/router/index.js
index 707ae53ca..723eb3a82 100644
--- a/stdiet-ui/src/router/index.js
+++ b/stdiet-ui/src/router/index.js
@@ -145,7 +145,7 @@ export const constantRoutes = [
     hidden: true,
     children: [
       {
-        path: "build/:cusId/:planId/:recipesId",
+        path: "build",
         component: resolve =>
           require(["@/views/custom/recipesBuild"], resolve),
         name: "RecipiesBuild",
diff --git a/stdiet-ui/src/store/modules/recipes.js b/stdiet-ui/src/store/modules/recipes.js
index be63473b5..cc7729370 100644
--- a/stdiet-ui/src/store/modules/recipes.js
+++ b/stdiet-ui/src/store/modules/recipes.js
@@ -1,22 +1,69 @@
 import { getOrder } from "@/api/custom/order";
 import { getCustomerPhysicalSignsByCusId } from "@/api/custom/customer";
 import { dealHealthy } from "@/utils/healthyData";
-import { getRecipesPlan } from "@/api/custom/recipesPlan";
-import { getRecipes } from "@/api/custom/recipes";
+import {
+  getRecipesApi,
+  updateDishesDetailApi,
+  addDishesApi,
+  deleteDishesApi,
+  addRecipesApi
+} from "@/api/custom/recipes";
+import { getDicts } from "@/api/system/dict/data";
+import dayjs from "dayjs";
 
 const oriState = {
+  cusId: undefined,
+  planId: undefined,
+  recipesId: undefined,
   healthyData: {},
+  healthDataLoading: false,
   healthyDataType: 0,
-  recipesData: []
+  recipesData: [],
+  recipesDataLoading: false,
+  cusUnitOptions: [],
+  cusWeightOptions: [],
+  dishesTypeOptions: [],
+  typeOptions: [],
+  currentDay: -1,
+  startDate: "",
+  endDate: ""
 };
 
 const mutations = {
-  setHealtyData(state, payload) {
-    state.healthyDataType = payload.healthyDataType;
-    state.healthyData = payload.healthyData;
+  updateRecipesDishesDetail(state, payload) {
+    const tarDishes = state.recipesData[payload.num].dishes.find(
+      obj => obj.dishesId === payload.dishesId
+    );
+    if (tarDishes) {
+      const tarIgd = tarDishes.igdList.find(obj => obj.id === payload.igdId);
+      if (tarIgd) {
+        Object.keys(payload).forEach(key => {
+          tarIgd[key] = payload[key];
+        });
+      }
+    }
   },
-  setRecipesData(state, payload) {
-    state.recipesData = payload.recipesData;
+  addRecipesDishes(state, payload) {
+    state.recipesData[payload.num].dishes.push(payload.data);
+  },
+  setCurrentDay(state, payload) {
+    state.currentDay =
+      payload.currentDay === state.currentDay ? -1 : payload.currentDay;
+  },
+  deleteSomeDayDishes(state, payload) {
+    // console.log(payload);
+    state.recipesData[payload.num].dishes = state.recipesData[
+      payload.num
+    ].dishes.filter(obj => obj.id !== payload.dishesId);
+  },
+  updateStateData(state, payload) {
+    Object.keys(payload).forEach(key => {
+      state[key] = payload[key];
+    });
+  },
+  setDate(state, payload) {
+    state.startDate = payload.startDate;
+    state.endDate = payload.endDate;
   },
   clean(state) {
     // console.log("clean");
@@ -27,40 +74,286 @@ const mutations = {
 };
 
 const actions = {
-  async init({ commit }, payload) {
+  async init({ commit, dispatch }, payload) {
     const orderResult = await getOrder(payload.cusId);
     if (!orderResult.data.cusId) {
       throw new Error("未找到用户id");
     }
 
-    // 健康数据
-    const healthyDataResult = await getCustomerPhysicalSignsByCusId(
-      orderResult.data.cusId
-    );
-    if (healthyDataResult.code === 200) {
-      commit("setHealtyData", {
-        healthyDataType: healthyDataResult.data.type,
-        healthyData: dealHealthy(healthyDataResult.data.customerHealthy)
-      });
-    } else {
-      throw new Error(healthyDataResult.msg);
+    commit("updateStateData", {
+      ...payload,
+      cusId: orderResult.data.cusId
+    });
+    //
+    getDicts("cus_cus_unit").then(response => {
+      commit("updateStateData", { cusUnitOptions: response.data });
+    });
+    getDicts("cus_cus_weight").then(response => {
+      commit("updateStateData", { cusWeightOptions: response.data });
+    });
+    getDicts("cus_dishes_type").then(response => {
+      commit("updateStateData", { typeOptions: response.data });
+    });
+    getDicts("cus_dishes_type").then(response => {
+      commit("updateStateData", { dishesTypeOptions: response.data });
+    });
+
+    //
+    if (orderResult.data.cusId) {
+      dispatch("getHealthyData", { cusId: orderResult.data.cusId });
     }
 
     // 食谱数据
     if (payload.recipesId) {
-      const recipesDataResult = await getRecipes(payload.recipesId);
-      if (recipesDataResult.code === 200) {
-        commit("setRecipesData", {
-          recipesData: recipesDataResult.data
-        });
+      dispatch("getRecipesInfo", payload);
+    }
+  },
+  async getHealthyData({ commit }, payload) {
+    commit("updateStateData", { healthDataLoading: true });
+    // 健康数据
+    const healthyDataResult = await getCustomerPhysicalSignsByCusId(
+      payload.cusId
+    );
+    let healthyData = undefined,
+      healthyDataType = 0;
+    if (healthyDataResult.code === 200) {
+      if (!healthyDataResult.data.customerHealthy) {
+        throw new Error("客户还没填写健康评估表");
+      }
+      healthyDataType = healthyDataResult.data.type;
+      healthyData = dealHealthy(healthyDataResult.data.customerHealthy);
+    } else {
+      throw new Error(healthyDataResult.msg);
+    }
+    commit("updateStateData", {
+      healthDataLoading: false,
+      healthyDataType,
+      healthyData
+    });
+  },
+  async getRecipesInfo({ commit }, payload) {
+    commit("updateStateData", {
+      recipesDataLoading: true
+    });
+    const recipesDataResult = await getRecipesApi(payload.recipesId);
+    let recipesData = undefined;
+    if (recipesDataResult.code === 200) {
+      recipesData = recipesDataResult.data.map(dayData => {
+        return {
+          id: dayData.id,
+          numDay: dayData.numDay,
+          dishes: dayData.dishes.reduce((arr, cur) => {
+            if (
+              cur.dishesId > -1 &&
+              cur.name &&
+              cur.igdList.length > 0 &&
+              cur.type !== "0"
+            ) {
+              arr.push({
+                id: cur.id,
+                dishesId: cur.dishesId,
+                name: cur.name,
+                menuId: cur.menuId,
+                methods: cur.methods,
+                type: cur.type,
+                isMain: cur.isMain,
+                igdList: cur.igdList.reduce((igdArr, igdData) => {
+                  if (igdData.id > 0) {
+                    const tarDetail = cur.detail.find(
+                      obj => obj.id === igdData.id
+                    );
+                    igdArr.push({
+                      id: igdData.id,
+                      name: igdData.name,
+                      carbonRatio: igdData.carbonRatio,
+                      fatRatio: igdData.fatRatio,
+                      proteinRatio: igdData.proteinRatio,
+                      cusUnit: tarDetail ? tarDetail.cus_unit : igdData.cusUnit,
+                      cusWeight: tarDetail
+                        ? parseFloat(tarDetail.cus_weight)
+                        : igdData.cusWeight,
+                      weight: tarDetail
+                        ? parseFloat(tarDetail.weight)
+                        : igdData.weight,
+                      notRec: igdData.notRec,
+                      rec: igdData.rec,
+                      type: igdData.type
+                    });
+                  }
+                  return igdArr;
+                }, [])
+              });
+            }
+            return arr;
+          }, [])
+        };
+      });
+    } else {
+      throw new Error(recipesDataResult.msg);
+    }
+    commit("updateStateData", { recipesDataLoading: false, recipesData });
+  },
+  async saveRecipes({ commit, dispatch, state }, payload) {
+    const { recipesData, cusId, planId } = state;
+    const params = {
+      cusId,
+      planId,
+      menus: recipesData.map((menu, idx) => ({
+        date: dayjs(state.startDate)
+          .add(idx, "day")
+          .format("YYYY-MM-DD"),
+        cusId,
+        dishes: menu.dishes.map(dObj => ({
+          dishesId: dObj.dishesId,
+          type: dObj.type,
+          detail: dObj.igdList.map(igd => ({
+            id: igd.id,
+            weight: igd.weight,
+            cus_unit: igd.cusUnit,
+            cus_weight: igd.cusWeight
+          }))
+        }))
+      }))
+    };
+    const result = await addRecipesApi(params);
+    if (result.code === 200) {
+      dispatch("getRecipesInfo", { recipesId: result.data });
+    }
+    // console.log(params);
+  },
+  async addDishes({ commit, state }, payload) {
+    if (state.recipesId) {
+      const tarRecipesObj = state.recipesData[payload.num];
+      if (tarRecipesObj && payload.data) {
+        const { dishesId, type, igdList } = payload.data;
+        const params = {
+          type,
+          dishesId,
+          menuId: tarRecipesObj.id,
+          detail: igdList.map(igd => ({
+            id: igd.id,
+            weight: igd.weight,
+            cus_unit: igd.cusUnit,
+            cus_weight: igd.cusWeight
+          }))
+        };
+        const result = await addDishesApi(params);
+        if (result.code === 200) {
+          payload.menuId = tarRecipesObj.id;
+          // 更新id
+          payload.data.id = result.data;
+          commit("addRecipesDishes", payload);
+        }
       } else {
-        throw new Error(recipesDataResult.msg);
+        commit("addRecipesDishes", payload);
+      }
+      // console.log(result);
+    }
+  },
+  async updateDishes({ commit, state }, payload) {
+    if (state.recipesId) {
+      const tarDishes = state.recipesData[payload.num].dishes.find(
+        obj => obj.dishesId === payload.dishesId
+      );
+      if (tarDishes) {
+        const mTarDishes = JSON.parse(JSON.stringify(tarDishes));
+        const tarIgd = mTarDishes.igdList.find(obj => obj.id === payload.igdId);
+        if (tarIgd) {
+          payload.weight && (tarIgd.weight = payload.weight);
+          payload.cusWeight && (tarIgd.cusWeight = payload.cusWeight);
+          payload.cusUnit && (tarIgd.cusUnit = payload.cusUnit);
+
+          const params = {
+            id: mTarDishes.id,
+            detail: mTarDishes.igdList.map(igd => ({
+              id: igd.id,
+              weight: igd.weight,
+              cus_unit: igd.cusUnit,
+              cus_weight: igd.cusWeight
+            }))
+          };
+          const result = await updateDishesDetailApi(params);
+          if (result.code === 200) {
+            commit("updateRecipesDishesDetail", payload);
+          }
+        }
+      } else {
+        commit("updateRecipesDishesDetail", payload);
       }
     }
-  }
+  },
+  async deleteDishes({ commit, state }, payload) {
+    if (state.recipesId) {
+      const tarDishes = state.recipesData[payload.num].dishes.find(
+        obj => obj.id === payload.id
+      );
+      if (tarDishes) {
+        const result = await deleteDishesApi(tarDishes.id);
+        if (result.code === 200) {
+          commit("deleteSomeDayDishes", payload);
+        }
+        // console.log(params);
+      }
+    } else {
+      commit("deleteSomeDayDishes", payload);
+    }
+  },
+  async deleteMenu({ commit }, payload) {}
 };
 
-const getters = {};
+const getters = {
+  analyseData: state => {
+    if (!state.recipesData.length) {
+      return [];
+    }
+    const datas =
+      state.currentDay > -1
+        ? [state.recipesData[state.currentDay]]
+        : state.recipesData;
+
+    const nutriData = datas.map(data =>
+      data.dishes.reduce(
+        (obj, cur) => {
+          cur.igdList.forEach(igd => {
+            obj.pWeight += (igd.weight / 100) * igd.proteinRatio;
+            obj.pHeat = obj.pWeight * 4;
+            obj.fWeight += (igd.weight / 100) * igd.fatRatio;
+            obj.fHeat = obj.fWeight * 9;
+            obj.cWeight += (igd.weight / 100) * igd.carbonRatio;
+            obj.cHeat = obj.cWeight * 4;
+          });
+          return obj;
+        },
+        {
+          name: `第${data.numDay}天`,
+          pWeight: 0,
+          fWeight: 0,
+          cWeight: 0,
+          pHeat: 0,
+          fHeat: 0,
+          cHeat: 0
+        }
+      )
+    );
+    // console.log(nutriData);
+    return nutriData;
+  },
+  cusUnitDict: state =>
+    state.cusUnitOptions.reduce((obj, cur) => {
+      obj[cur.dictValue] = cur.dictLabel;
+      return obj;
+    }, {}),
+  cusWeightDict: state =>
+    state.cusWeightOptions.reduce((obj, cur) => {
+      obj[cur.dictValue] = cur.dictLabel;
+      return obj;
+    }, {}),
+  typeDict: state =>
+    state.typeOptions.reduce((obj, cur) => {
+      obj[cur.dictValue] = cur.dictLabel;
+      return obj;
+    }, {})
+};
 
 export default {
   namespaced: true,
diff --git a/stdiet-ui/src/utils/echarts/myShine.js b/stdiet-ui/src/utils/echarts/myShine.js
new file mode 100644
index 000000000..01ce1abe6
--- /dev/null
+++ b/stdiet-ui/src/utils/echarts/myShine.js
@@ -0,0 +1,257 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+(function(root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (
+        typeof exports === 'object' &&
+        typeof exports.nodeName !== 'string'
+    ) {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+})(this, function(exports, echarts) {
+    var log = function(msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+
+    var colorPalette = [
+        '#c12e34',
+        '#e6b600',
+        '#0098d9',
+        '#2b821d',
+        '#005eaa',
+        '#339ca8',
+        '#cda819',
+        '#32a487'
+    ];
+
+    var theme = {
+        color: colorPalette,
+
+        title: {
+            textStyle: {
+                fontWeight: 'normal',
+                fontSize: 14
+            }
+        },
+
+        visualMap: {
+            color: ['#1790cf', '#a2d4e6']
+        },
+
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: '#06467c'
+                }
+            }
+        },
+
+        tooltip: {
+            textStyle: {
+              color: '#262626',
+              fontSize: 12
+            },
+            backgroundColor: 'rgba(255,255,255,0.9)',
+            borderWidth: 1,
+            padding: 10,
+            borderColor: '#ccc',
+            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
+        },
+
+        categoryAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#ebebeb',
+            },
+          },
+          axisTick: {
+            show: false,
+            lineStyle: {
+              color: '#ebebeb',
+            },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#262626',
+            },
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: ['#ccc'],
+            },
+          },
+          splitArea: {
+            show: false,
+            areaStyle: {
+              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+          },
+        },
+        valueAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#ebebeb',
+            },
+          },
+          axisTick: {
+            show: false,
+            lineStyle: {
+              color: '#ebebeb',
+            },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#262626',
+            },
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: ['#ccc'],
+            },
+          },
+          splitArea: {
+            show: false,
+            areaStyle: {
+              color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+          },
+        },
+
+        dataZoom: {
+            dataBackgroundColor: '#dedede',
+            fillerColor: 'rgba(154,217,247,0.2)',
+            handleColor: '#005eaa'
+        },
+
+        timeline: {
+            lineStyle: {
+                color: '#005eaa'
+            },
+            controlStyle: {
+                color: '#005eaa',
+                borderColor: '#005eaa'
+            }
+        },
+
+        candlestick: {
+            itemStyle: {
+                color: '#c12e34',
+                color0: '#2b821d'
+            },
+            lineStyle: {
+                width: 1,
+                color: '#c12e34',
+                color0: '#2b821d'
+            },
+            areaStyle: {
+                color: '#e6b600',
+                color0: '#005eaa'
+            }
+        },
+
+        graph: {
+            itemStyle: {
+                color: '#e6b600'
+            },
+            linkStyle: {
+                color: '#005eaa'
+            }
+        },
+
+        map: {
+            itemStyle: {
+                color: '#f2385a',
+                borderColor: '#eee',
+                areaColor: '#ddd'
+            },
+            areaStyle: {
+                color: '#ddd'
+            },
+            label: {
+                color: '#c12e34'
+            }
+        },
+
+        gauge: {
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: [
+                        [0.2, '#2b821d'],
+                        [0.8, '#005eaa'],
+                        [1, '#c12e34']
+                    ],
+                    width: 5
+                }
+            },
+            axisTick: {
+                splitNumber: 10,
+                length: 8,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            axisLabel: {
+                textStyle: {
+                    color: 'auto'
+                }
+            },
+            splitLine: {
+                length: 12,
+                lineStyle: {
+                    color: 'auto'
+                }
+            },
+            pointer: {
+                length: '90%',
+                width: 3,
+                color: 'auto'
+            },
+            title: {
+                textStyle: {
+                    color: '#333'
+                }
+            },
+            detail: {
+                textStyle: {
+                    color: 'auto'
+                }
+            }
+        }
+    };
+    echarts.registerTheme('myShine', theme);
+});
diff --git a/stdiet-ui/src/utils/healthyData.js b/stdiet-ui/src/utils/healthyData.js
index daca800c2..9023a81a1 100644
--- a/stdiet-ui/src/utils/healthyData.js
+++ b/stdiet-ui/src/utils/healthyData.js
@@ -384,7 +384,8 @@ export const yesNoName = [
   "longEatDrugFlag",
   "allergyFlag",
   "smokeFlag",
-  "secondSmoke"
+  "secondSmoke",
+  "sleepDrugFlag"
 ];
 
 export const dictName = [
@@ -550,7 +551,7 @@ export function dealHealthy(customerHealthy) {
     customerHealthy.getupTime += "点";
   }
   if (customerHealthy.hasOwnProperty("signList")) {
-    customerHealthy.signStr = customerHealthy.signList
+    customerHealthy.signStr = (customerHealthy.signList || [])
       .map(obj => obj.name)
       .join("，");
   }
diff --git a/stdiet-ui/src/views/custom/dishes/index.vue b/stdiet-ui/src/views/custom/dishes/index.vue
index ba013d2c2..e7121530b 100644
--- a/stdiet-ui/src/views/custom/dishes/index.vue
+++ b/stdiet-ui/src/views/custom/dishes/index.vue
@@ -162,9 +162,9 @@
     <el-drawer
       :title="title"
       :visible.sync="open"
+      :wrapperClosable="false"
       size="50%"
       :close-on-press-escape="false"
-      :close-on-click-modal="false"
     >
       <div class="drawer_content">
         <el-row class="content_detail">
@@ -675,13 +675,13 @@ export default {
         .catch(function () {});
     },
     handleChange(value, direction, movedKeys) {
-      console.log({
-        oriIgdList: this.oriDataList,
-        selIgdList: this.form.igdList,
-        ingDataList: this.ingDataList,
-        value,
-        ingType: this.ingType,
-      });
+      // console.log({
+      //   oriIgdList: this.oriDataList,
+      //   selIgdList: this.form.igdList,
+      //   ingDataList: this.ingDataList,
+      //   value,
+      //   ingType: this.ingType,
+      // });
       const newTableData = [];
       this.selRec = [];
       this.selNotRec = [];
diff --git a/stdiet-ui/src/views/custom/recipesBuild/BodySignView.vue b/stdiet-ui/src/views/custom/recipesBuild/BodySignView.vue
index 039b409e2..89b1f13bf 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/BodySignView.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/BodySignView.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 <script>
-import TextInfo from "./TextInfo.vue";
+import TextInfo from "@/components/TextInfo";
 
 export default {
   name: "BodySignView",
diff --git a/stdiet-ui/src/views/custom/recipesBuild/HealthyView.vue b/stdiet-ui/src/views/custom/recipesBuild/HealthyView.vue
index 8157b4e57..a6b0135ac 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/HealthyView.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/HealthyView.vue
@@ -31,7 +31,7 @@
   </div>
 </template>
 <script>
-import TextInfo from "./TextInfo.vue";
+import TextInfo from "@/components/TextInfo";
 
 export default {
   name: "HealthyView",
@@ -166,6 +166,7 @@ export default {
             { title: "是否出现过过敏症状", value: "allergyFlag" },
             { title: "过敏症状", value: "allergySituation" },
             { title: "过敏源", value: "allergen" },
+            { title: "忌口过敏食物", value: "dishesIngredient" },
           ],
         },
         {
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView.vue
deleted file mode 100644
index 1f8586852..000000000
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <RecipesCom v-for="item in data" :key="item.id" :data="item" />
-  </div>
-</template>
-<script>
-import RecipesCom from "@/components/RecipesCom";
-export default {
-  name: "RecipesView",
-  components: {
-    RecipesCom,
-  },
-  props: ["data"],
-};
-</script>
-<style rel="stylesheet/scss" lang="scss">
-</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/BarChart.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/BarChart.vue
new file mode 100644
index 000000000..cb9dc7837
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/BarChart.vue
@@ -0,0 +1,148 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+require("@/utils/echarts/myShine");
+import resize from "@/views/dashboard/mixins/resize";
+
+const animationDuration = 6000;
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "300px",
+    },
+    data: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      nameDict: {
+        pHeat: "蛋白质",
+        fHeat: "脂肪",
+        cHeat: "碳水",
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  updated() {
+    // console.log("updated");
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "myShine");
+      this.updateChart(this.data.length > 0 ? this.data : {});
+    },
+    updateChart(source) {
+      this.chart.clear();
+      this.chart.setOption({
+        title: {
+          text: "营养统计",
+        },
+        tooltip: {
+          trigger: "axis",
+          appendToBody: true,
+          formatter: (params) => {
+            // console.log(params);
+            const [param] = params;
+            const { name } = param;
+            let totalHeat = 0;
+            const tooltips = params.reduce(
+              (arr, cur) => {
+                const { value, seriesName } = cur;
+                const nutriName = this.nameDict[seriesName];
+                totalHeat += value[seriesName];
+                const heatVal = value[seriesName].toFixed(1);
+                const weightVal = value[
+                  `${seriesName.substring(0, 1)}Weight`
+                ].toFixed(1);
+                arr.push(
+                  `${cur.marker} ${nutriName}：${heatVal}千卡（${weightVal}克）`
+                );
+                return arr;
+              },
+              [name]
+            );
+            tooltips[0] += ` - 共${totalHeat.toFixed(1)}千卡`;
+            return tooltips.join("</br>");
+          },
+        },
+        dataset: {
+          dimensions: [
+            "name",
+            "pWeight",
+            "pHeat",
+            "fWeight",
+            "fHeat",
+            "cWeight",
+            "cHeat",
+          ],
+          source,
+        },
+        grid: {
+          top: 40,
+          left: 20,
+          right: 20,
+          bottom: 10,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
+          name: dim,
+          type: "bar",
+          barWidth: 26,
+          stack: "bar",
+          encode: {
+            y: dim,
+            x: 0,
+          },
+          itemStyle: {
+            borderWidth: 2,
+            borderColor: "#fff",
+          },
+        })),
+      });
+    },
+  },
+  watch: {
+    data(newVal, oldVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.updateChart(newVal);
+        });
+      }
+    },
+  },
+};
+</script>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/PieChart.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/PieChart.vue
new file mode 100644
index 000000000..a5cd784f7
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/PieChart.vue
@@ -0,0 +1,202 @@
+<template>
+  <div
+    :class="`aspect_pie_chart_wrapper ${className || ''}`"
+    :style="{ height: height, width: width }"
+  >
+    <div ref="echart" :style="{ height: height, width: '200px' }" />
+    <div>
+      <el-table
+        :data="mData"
+        size="mini"
+        border
+        :cell-style="{ padding: '2px 0' }"
+        :header-cell-style="{ padding: '4px 0', height: 'unset' }"
+        class="small_table"
+      >
+        <el-table-column label="营养" prop="type" align="center" width="60" />
+        <el-table-column
+          label="重量(g)"
+          prop="weight"
+          align="center"
+          width="80"
+        />
+        <el-table-column
+          label="热量(Kcal)"
+          prop="heat"
+          align="center"
+          width="90"
+        />
+        <el-table-column
+          label="热量占比"
+          prop="heatRate"
+          align="center"
+          width="80"
+        />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+require("@/utils/echarts/myShine");
+import resize from "@/views/dashboard/mixins/resize";
+import TextInfo from "@/components/TextInfo";
+
+export default {
+  mixins: [resize],
+  components: {
+    TextInfo,
+  },
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "300px",
+    },
+    data: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      nameDict: {
+        p: "蛋白质",
+        f: "脂肪",
+        c: "碳水",
+      },
+    };
+  },
+  computed: {
+    mData() {
+      const [data] = this.data;
+      let totalHeat = 0;
+      return data
+        ? ["p", "f", "c"].map((type) => {
+            if (totalHeat === 0) {
+              totalHeat = ["p", "f", "c"].reduce((heat, cur) => {
+                heat += data[`${cur}Heat`];
+                return heat;
+              }, 0);
+            }
+            return {
+              type: this.nameDict[type],
+              weight: data[`${type}Weight`].toFixed(1),
+              heat: data[`${type}Heat`].toFixed(1),
+              heatRate: `${((data[`${type}Heat`] / totalHeat) * 100).toFixed(
+                2
+              )}%`,
+            };
+          })
+        : [];
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.echart, "myShine");
+      this.updateChart(this.data.length > 0 ? this.data[0] : {});
+    },
+    updateChart(data) {
+      this.chart.clear();
+      this.chart.setOption({
+        title: {
+          text: `${data.name}营养统计`,
+        },
+        tooltip: {
+          trigger: "item",
+          appendToBody: true,
+          formatter: (params) => {
+            const {
+              name,
+              marker,
+              percent,
+              data: { value, oriData, dim },
+            } = params;
+            return [
+              `${marker} ${name}`,
+              `含量：${oriData[`${dim}Weight`].toFixed(1)}克`,
+              `热量：${value.toFixed(1)}千卡`,
+              `热量占比：${percent}%`,
+            ].join("</br>");
+          },
+        },
+        series: [
+          {
+            name: data.name,
+            type: "pie",
+            radius: [0, 50],
+            center: ["50%", "50%"],
+            data: ["p", "f", "c"].map((dim) => ({
+              dim,
+              value: data[`${dim}Heat`],
+              name: this.nameDict[dim],
+              oriData: data,
+            })),
+            labelLine: {
+              length: 5,
+              length2: 5,
+            },
+            // label: {
+            //   show: true,
+            //   position: "inside",
+            //   color: '#fff'
+            // },
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+            },
+          },
+        ],
+      });
+    },
+  },
+  watch: {
+    data(newVal, oldVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.updateChart(newVal[0]);
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.aspect_pie_chart_wrapper {
+  width: 100%;
+  display: flex;
+
+  & > div:nth-child(1) {
+    // width: 200px
+  }
+
+  // & > div:nth-child(2) {
+  .small_table {
+    .my_cell {
+      padding: 2px 0 !important;
+    }
+  }
+  // }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/index.vue
new file mode 100644
index 000000000..14ae7f6b7
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="recipes_aspect_wrapper"
+    :style="`height: ${collapse ? 30 : 200}px`"
+  >
+    <div class="header">
+      <el-button
+        v-if="!recipesId"
+        size="mini"
+        type="primary"
+        @click="handleOnSave"
+        >生成食谱</el-button
+      >
+      <el-button size="mini" type="text" @click="handleCollapseClick">{{
+        `${collapse ? "展开分析" : "收起分析"}`
+      }}</el-button>
+    </div>
+    <div
+      class="content"
+      :style="`visibility: ${collapse ? 'hidden' : 'visible'};`"
+    >
+      <BarChart
+        v-if="data.length > 1"
+        :data="data"
+        height="170px"
+        width="500px"
+      />
+      <PieChart
+        v-if="data.length === 1"
+        :data="data"
+        height="170px"
+        width="500px"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import BarChart from "./BarChart";
+import PieChart from "./PieChart";
+import { createNamespacedHelpers } from "vuex";
+const { mapActions, mapState } = createNamespacedHelpers("recipes");
+export default {
+  name: "RecipesAspectCom",
+  components: {
+    BarChart,
+    PieChart,
+  },
+  data() {
+    return {};
+  },
+  updated() {
+    // console.log(this.data);
+  },
+  props: ["collapse", "data"],
+  computed: {
+    ...mapState(["recipesId"]),
+  },
+  methods: {
+    handleCollapseClick() {
+      this.$emit("update:collapse", !this.collapse);
+    },
+    handleOnSave() {
+      this.saveRecipes();
+    },
+    ...mapActions(["saveRecipes"]),
+  },
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scope>
+.recipes_aspect_wrapper {
+  transition: all 0.3s;
+  padding-bottom: 12px;
+
+  .header {
+    text-align: right;
+    height: 30px;
+  }
+
+  .content {
+  }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/ConfigDishes.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/ConfigDishes.vue
new file mode 100644
index 000000000..c64c2f311
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/ConfigDishes.vue
@@ -0,0 +1,165 @@
+<template>
+  <el-form>
+    <el-form-item label="菜品名">
+      <span style="color: #262626; font-size: 16px; font-weight: bold">{{
+        name
+      }}</span>
+    </el-form-item>
+    <el-form-item label="菜品类型">
+      <el-radio-group v-model="type" @change="handleOnTypeChange">
+        <el-radio
+          v-for="item in typeOptions"
+          :key="item.dictValue"
+          :label="item.dictValue"
+          >{{ item.dictLabel }}</el-radio
+        >
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="食材分量">
+      <el-table
+        :data="igdList"
+        border
+        show-summary
+        size="mini"
+        :summary-method="getSummaries"
+      >
+        <el-table-column prop="name" label="食材" align="center" />
+        <el-table-column label="分量估算" align="center">
+          <template slot-scope="scope">
+            <EditableUnit
+              :weight="scope.row.cusWeight"
+              :unit="scope.row.cusUnit"
+              @onChange="(val) => handleOnCustomUnitChange(scope.row, val)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="weight" label="重量(g)" align="center">
+          <template slot-scope="scope">
+            <EditableText
+              :value="scope.row.weight"
+              @onChange="(val) => handleOnWeightChange(scope.row, val)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="proteinRatio"
+          label="蛋白质/100g"
+          align="center"
+        />
+        <el-table-column prop="fatRatio" label="脂肪/100g" align="center" />
+        <el-table-column prop="carbonRatio" label="碳水/100g" align="center" />
+      </el-table>
+    </el-form-item>
+    <el-form-item label="推荐人群">
+      <el-tag
+        style="margin-right: 4px"
+        v-for="rec in recTags"
+        :key="rec"
+        type="success"
+      >
+        {{ rec }}
+      </el-tag>
+    </el-form-item>
+    <el-form-item label="忌口人群">
+      <el-tag
+        style="margin-right: 4px"
+        v-for="notRec in notRecTags"
+        :key="notRec"
+        type="danger"
+      >
+        {{ notRec }}
+      </el-tag>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import produce from "immer";
+import EditableText from "../EditableText";
+import EditableUnit from "../EditableUnit";
+export default {
+  name: "ConfigDishes",
+  data() {
+    return {
+      nType: this.type,
+    };
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+    igdList: {
+      type: Array,
+      default: [],
+    },
+    typeOptions: {
+      type: Array,
+      default: [],
+    },
+    notRecTags: {
+      type: Array,
+      default: [],
+    },
+    recTags: {
+      type: Array,
+      default: [],
+    },
+  },
+  components: {
+    EditableText,
+    EditableUnit,
+  },
+  computed: {},
+  methods: {
+    handleOnTypeChange(type) {
+      this.$emit("onChane", { type });
+    },
+    handleOnWeightChange(data, val) {
+      // console.log({ data, val });
+      this.$emit("onChane", {
+        igdList: produce(this.igdList, (draftState) => {
+          const tarIgd = draftState.find((obj) => obj.id === data.id);
+          if (tarIgd) {
+            tarIgd.weight = val;
+          }
+        }),
+      });
+    },
+    handleOnCustomUnitChange(data, val) {
+      // console.log({ data, val });
+      this.$emit("onChane", {
+        igdList: produce(this.igdList, (draftState) => {
+          const tarIgd = draftState.find((obj) => obj.id === data.id);
+          if (tarIgd) {
+            tarIgd.cusWeight = val.cusWeight;
+            tarIgd.cusUnit = val.cusUnit;
+          }
+        }),
+      });
+    },
+    getSummaries(param) {
+      const { columns, data } = param;
+      return columns.reduce(
+        (arr, cur, idx) => {
+          if (idx > 1) {
+            arr[idx] = data.reduce((acc, dAcc) => {
+              if (idx === 2) {
+                return acc + parseFloat(dAcc.weight);
+              }
+              return parseFloat(
+                (acc + (dAcc[cur.property] * dAcc.weight) / 100).toFixed(1)
+              );
+            }, 0);
+          }
+          return arr;
+        },
+        ["合计"]
+      );
+    },
+  },
+};
+</script>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/SelectDishes.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/SelectDishes.vue
new file mode 100644
index 000000000..348ae2f45
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/SelectDishes.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="菜品名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入菜品名称"
+          clearable
+          size="mini"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="菜品类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择菜品类型"
+          clearable
+          size="mini"
+        >
+          <el-option
+            v-for="dict in typeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="cyan"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索
+        </el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+      v-loading="loading"
+      size="mini"
+      :data="dishesList"
+      height="600"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column label="菜品名称" align="center" prop="name" />
+      <el-table-column label="菜品类型" align="center" prop="type">
+        <template slot-scope="scope">
+          <AutoHideInfo :data="typeFormat(scope.row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="包含食材" align="center">
+        <template slot-scope="scope">
+          <div v-for="igd in scope.row.igdList" :key="igd.id">
+            {{ igd.name }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="推荐人群" align="center">
+        <template slot-scope="scope">
+          <AutoHideInfo :data="scope.row.recTags" :line="0" />
+        </template>
+      </el-table-column>
+      <el-table-column label="忌口人群" align="center">
+        <template slot-scope="scope">
+          <AutoHideInfo :data="scope.row.notRecTags" :line="0" />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      layout="total, prev, pager, next"
+      @pagination="getList"
+    />
+  </div>
+</template>
+<script>
+import AutoHideInfo from "@/components/AutoHideInfo";
+import { listDishes } from "@/api/custom/dishes";
+import { createNamespacedHelpers } from "vuex";
+const { mapState } = createNamespacedHelpers("recipes");
+export default {
+  name: "SelectDishes",
+  props: [],
+  data() {
+    return {
+      loading: false,
+      total: 0,
+      dishesList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        type: null,
+        reviewStatus: "yes",
+      },
+    };
+  },
+  components: {
+    AutoHideInfo,
+  },
+  computed: {
+    ...mapState(["typeOptions"]),
+  },
+  methods: {
+    getList() {
+      // console.log('getList')
+      this.loading = true;
+      listDishes(this.queryParams).then((result) => {
+        this.dishesList = result.rows.map((d) => {
+          const recTags = [],
+            notRecTags = [];
+          d.igdList.forEach((igd) => {
+            if (igd.rec) {
+              igd.rec.split(",").forEach((rec) => {
+                if (!recTags.includes(rec)) {
+                  recTags.push(rec);
+                }
+              });
+            }
+            if (igd.notRec) {
+              igd.notRec.split(",").forEach((notRec) => {
+                if (!notRecTags.includes(notRec)) {
+                  notRecTags.push(notRec);
+                }
+              });
+            }
+          });
+          return {
+            ...d,
+            recTags,
+            notRecTags,
+          };
+        });
+        this.total = result.total;
+        this.loading = false;
+      });
+    },
+    handleCurrentChange(data) {
+      this.$emit("onChange", data);
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    typeFormat(row, column) {
+      return !row.type
+        ? ""
+        : row.type
+            .split(",")
+            .map((type) => this.selectDictLabel(this.typeOptions, type));
+    },
+  },
+};
+</script>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/index.vue
new file mode 100644
index 000000000..f37f713d8
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/index.vue
@@ -0,0 +1,185 @@
+<template>
+  <el-drawer
+    title="添加菜品"
+    :visible.sync="visible"
+    :close-on-press-escape="false"
+    :before-close="handleOnClosed"
+    :wrapperClosable="false"
+    class="add_dishes_drawer_wrapper"
+    direction="ltr"
+    size="40%"
+  >
+    <div class="content_wrapper">
+      <div class="content_detail">
+        <el-steps :active="active" style="margin-bottom: 20px">
+          <el-step title="选择菜品" />
+          <el-step title="配置菜品" />
+        </el-steps>
+
+        <SelectDishes
+          ref="dishesRef"
+          v-show="active === 0"
+          @onChange="handleCurrentChange"
+        />
+        <ConfigDishes
+          v-show="active === 1"
+          v-bind="selDishes"
+          :typeOptions="typeOptions"
+          @onChange="handleOnConfigChange"
+        />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          size="small"
+          v-show="active === 1"
+          type="info"
+          @click="handleOnLastStepClick"
+          >上一步</el-button
+        >
+        <el-button
+          size="small"
+          v-show="active === 1"
+          type="primary"
+          @click="handleOnConfirmClick"
+          >确 定</el-button
+        >
+        <el-button size="small" @click="handleOnCancelClick">取 消</el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapState } = createNamespacedHelpers("recipes");
+
+import SelectDishes from "./SelectDishes";
+import ConfigDishes from "./ConfigDishes";
+
+export default {
+  name: "AddDishesDrawer",
+  components: {
+    SelectDishes,
+    ConfigDishes,
+  },
+  data() {
+    return {
+      visible: false,
+      active: 0,
+      typeOptions: [],
+      selDishes: {
+        name: "",
+        type: "",
+        igdList: [],
+        recTags: [],
+        notRecTags: [],
+      },
+    };
+  },
+  computed: {
+    ...mapState(["dishesTypeOptions"]),
+  },
+  methods: {
+    showDrawer() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs.dishesRef.getList();
+      });
+    },
+    handleOnClosed(done) {
+      done();
+    },
+    handleCurrentChange(data) {
+      if (!data) {
+        return;
+      }
+      console.log(data);
+      this.selDishes = data;
+      this.active = 1;
+      this.typeOptions = data.type.split(",").reduce((arr, cur, idx) => {
+        if (idx === 0) {
+          this.selDishes.type = cur;
+        }
+        const tarOpt = this.dishesTypeOptions.find(
+          (obj) => obj.dictValue === cur
+        );
+        if (tarOpt) {
+          arr.push(tarOpt);
+        }
+        return arr;
+      }, []);
+    },
+    handleOnConfigChange(val) {
+      Object.keys(val).forEach((key) => {
+        this.selDishes[key] = val[key];
+      });
+    },
+    handleOnCancelClick() {
+      this.visible = false;
+      this.active = 0;
+    },
+    handleOnLastStepClick() {
+      this.active = 0;
+    },
+    handleOnConfirmClick() {
+      this.visible = false;
+      this.active = 0;
+
+      const {
+        id,
+        methods,
+        name,
+        notRecTags,
+        recTags,
+        type,
+        igdList,
+      } = this.selDishes;
+      this.$emit("onConfirm", {
+        id: -1,
+        dishesId: id,
+        methods,
+        name,
+        notRecTags,
+        recTags,
+        type,
+        igdList,
+      });
+      console.log(this.selDishes);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ :focus {
+  outline: 0;
+}
+.add_dishes_drawer_wrapper {
+  .content_wrapper {
+    padding: 16px 20px;
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .content_detail {
+      flex: 1 1 0;
+      padding: 12px;
+      overflow: auto;
+    }
+
+    .dialog-footer {
+      flex: 0 0 45px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0 12px;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.add_dishes_drawer_wrapper {
+  #el-drawer__title {
+    margin-bottom: 0 !important;
+  }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/EditableText/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/EditableText/index.vue
new file mode 100644
index 000000000..48b8b1824
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/EditableText/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="editable_text_wrapper">
+    <div class="value" v-if="!editing" @click="handleOnClick">{{ value }}</div>
+    <input
+      v-else
+      class="input"
+      ref="inputRef"
+      type="number"
+      :step="5"
+      :value="value"
+      @blur="handleOnBlur"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: "EditableText",
+  data() {
+    return {
+      editing: false,
+    };
+  },
+  props: ["value"],
+  methods: {
+    handleOnClick(e) {
+      if (!this.editing) {
+        this.editing = true;
+        this.$nextTick(() => {
+          this.$refs["inputRef"].focus();
+        });
+      }
+    },
+    handleOnBlur(e) {
+      const { value } = e.target;
+      if (value > 0) {
+        this.editing = false;
+        const mValue = parseFloat(value)
+        if (mValue !== parseFloat(this.value)) {
+          this.$emit("onChange", mValue);
+        }
+      } else {
+        this.$message.error("数字必须大于0");
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.editable_text_wrapper {
+  .value {
+    cursor: pointer;
+  }
+
+  .input {
+    width: 96%;
+    text-align: center;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6;
+
+    &:hover {
+      border-color: #409eff;
+    }
+    &:focus {
+      outline: none;
+      border-color: #409eff;
+    }
+  }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/EditableUnit/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/EditableUnit/index.vue
new file mode 100644
index 000000000..4b90c69d8
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/EditableUnit/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="editable_unit_wrapper">
+    <div class="value" v-if="!editing" @click="handleOnClick">
+      <span>{{ unitWeight }}</span>
+    </div>
+    <div v-else class="selector">
+      <select
+        :value="mWeight"
+        @click="handleOnSelectClick"
+        @change="handleOnWeightChange"
+      >
+        <option
+          v-for="item in cusWeightOptions"
+          :key="item.dictValue"
+          :value="item.dictValue"
+        >
+          {{ item.dictLabel }}
+        </option>
+      </select>
+      <select
+        :value="mUnit"
+        @click="handleOnSelectClick"
+        @change="handleOnUnitChange"
+      >
+        <option
+          v-for="item in cusUnitOptions"
+          :key="item.dictValue"
+          :value="item.dictValue"
+        >
+          {{ item.dictLabel }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapState, mapGetters } = createNamespacedHelpers("recipes");
+export default {
+  name: "EditableUnit",
+  props: ["weight", "unit"],
+  mounted() {
+    window.addEventListener("click", this.handleOnWindowClick);
+  },
+  unmounted() {
+    window.removeEventListener("click", this.handleOnWindowClick);
+  },
+  data() {
+    return {
+      editing: false,
+      mWeight: this.weight,
+      mUnit: this.unit,
+    };
+  },
+  methods: {
+    handleOnClick(e) {
+      if (!this.editing) {
+        setTimeout(() => {
+          this.editing = true;
+        }, 0);
+      }
+    },
+    handleOnWindowClick(e) {
+      if (this.editing) {
+        // console.log("handleOnWindowClick");
+        this.editing = false;
+        if (
+          String(this.mWeight) !== String(this.weight) ||
+          String(this.mUnit) !== String(this.unit)
+        ) {
+          // console.log({
+          //   mWeight: this.mWeight,
+          //   mUnit: this.mUnit,
+          //   weight: this.weight,
+          //   unit: this.unit,
+          // });
+          this.$emit("onChange", {
+            cusWeight: this.mWeight,
+            cusUnit: this.mUnit,
+          });
+        }
+      }
+    },
+    handleOnSelectClick(e) {
+      if (this.editing) {
+        e.stopPropagation();
+      }
+    },
+    handleOnWeightChange(e) {
+      const { value } = e.target;
+      this.mWeight = value;
+    },
+    handleOnUnitChange(e) {
+      const { value } = e.target;
+      this.mUnit = value;
+    },
+  },
+  computed: {
+    unitWeight() {
+      return (
+        `${this.cusWeightDict[this.mWeight] || ""}${
+          this.cusUnitDict[this.mUnit] || ""
+        }` || "_"
+      );
+    },
+    ...mapState(["cusUnitOptions", "cusWeightOptions"]),
+    ...mapGetters(["cusUnitDict", "cusWeightDict"]),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.editable_unit_wrapper {
+  .value {
+    cursor: pointer;
+  }
+  .selector {
+    display: flex;
+
+    select:nth-child(1) {
+      margin-right: 2px;
+    }
+
+    select {
+      font-size: 11px;
+      border: solid 1px #dcdfe6;
+      border-radius: 4px;
+      appearance: none;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      padding: 3px 6px;
+
+      &:hover {
+        border-color: #409eff;
+      }
+      &:focus {
+        outline: none;
+        border-color: #409eff;
+      }
+    }
+
+    /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
+    select::-ms-expand {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
new file mode 100644
index 000000000..1e22525a2
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
@@ -0,0 +1,325 @@
+<template>
+  <div class="recipes_com_wrapper">
+    <el-table
+      :data="mData"
+      border
+      :span-method="spanMethod"
+      :cell-style="{ padding: '2px 0' }"
+      :header-cell-style="{ padding: '4px 0', height: 'unset' }"
+      size="mini"
+      :style="`outline: ${
+        currentDay + 1 === num ? '1px solid #d96969' : 'none'
+      }`"
+    >
+      <el-table-column prop="type" :width="100" align="center">
+        <template slot="header">
+          <span class="num_day" @click="handleOnOneDayAnalysis">{{
+            `${name}第${num}天`
+          }}</span>
+        </template>
+        <template slot-scope="scope">
+          <span style="font-weight: bold; font-size: 14px">{{
+            typeFormatter(scope.row)
+          }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="菜品" prop="name" align="center">
+        <template slot="header">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="点击添加菜品"
+            placement="top"
+          >
+            <span class="num_day" @click="handleOnAdd">菜品</span>
+          </el-tooltip>
+        </template>
+        <template slot-scope="scope">
+          <el-popover placement="right" trigger="hover">
+            <div>
+              <el-button
+                type="danger"
+                size="mini"
+                icon="el-icon-delete"
+                class="fun_button"
+                @click="handleOnDelete(scope.row)"
+                >删除</el-button
+              >
+            </div>
+            <span class="num_day" slot="reference">{{ scope.row.name }}</span>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column label="食材" prop="igdName" align="center" />
+      <el-table-column label="分量估算" :width="80" align="center">
+        <template slot-scope="scope">
+          <EditableUnit
+            :weight="scope.row.cusWeight"
+            :unit="scope.row.cusUnit"
+            @onChange="(val) => handleOnCustomUnitChange(scope.row, val)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="重量(g)" prop="weight" :width="80" align="center">
+        <template slot-scope="scope">
+          <EditableText
+            :value="scope.row.weight"
+            @onChange="(val) => handleOnWeightChange(scope.row, val)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="蛋白质/100g"
+        prop="proteinRatio"
+        :width="100"
+        align="center"
+      />
+      <el-table-column
+        label="脂肪/100g"
+        prop="fatRatio"
+        :width="90"
+        align="center"
+      />
+      <el-table-column
+        label="碳水/100g"
+        prop="carbonRatio"
+        :width="90"
+        align="center"
+      />
+      <el-table-column
+        label="蛋白质含量"
+        prop="proteinRatio"
+        :width="90"
+        align="center"
+        :formatter="nutriFormatter"
+      />
+      <el-table-column
+        label="脂肪含量"
+        prop="fatRatio"
+        :width="90"
+        align="center"
+        :formatter="nutriFormatter"
+      />
+      <el-table-column
+        label="碳水含量"
+        prop="carbonRatio"
+        :width="90"
+        align="center"
+        :formatter="nutriFormatter"
+      />
+      <el-table-column label="做法" prop="methods" />
+    </el-table>
+    <AddDishesDrawer ref="drawerRef" @onConfirm="handleOnDishesConfirm" />
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const {
+  mapActions,
+  mapGetters,
+  mapState,
+  mapMutations,
+} = createNamespacedHelpers("recipes");
+
+import EditableText from "./EditableText";
+import EditableUnit from "./EditableUnit";
+import AddDishesDrawer from "./AddDishesDrawer";
+
+export default {
+  name: "RecipesCom",
+  props: {
+    data: {
+      type: Object,
+      default: [],
+      required: true,
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    num: {
+      type: Number,
+      default: 0,
+    },
+  },
+  components: {
+    EditableText,
+    EditableUnit,
+    AddDishesDrawer,
+  },
+  mounted() {
+    // console.log(this.data);
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    mData() {
+      if (!this.data.dishes) {
+        return [];
+      }
+      const mData = this.data.dishes
+        .sort((a, b) => a.type - b.type)
+        .reduce((arr, cur, idx) => {
+          if (cur.dishesId > 0 && cur.type !== "0") {
+            cur.igdList.forEach((igd) => {
+              let lastTypeHit = false,
+                lastNameHit = false;
+              if (arr.length > 0) {
+                // 倒推，找到第一个出现的位置
+                lastTypeHit = arr[arr.length - 1].type === cur.type;
+                if (lastTypeHit) {
+                  let typePos = arr.length - 1;
+                  for (let i = typePos; i >= 0; i--) {
+                    if (arr[i].type !== cur.type) {
+                      break;
+                    }
+                    typePos = i;
+                  }
+                  arr[typePos].typeSpan.rowspan += 1;
+                }
+                lastNameHit = arr[arr.length - 1].name === cur.name;
+                if (lastNameHit) {
+                  let namePos = arr.length - 1;
+                  for (let i = namePos; i >= 0; i--) {
+                    if (arr[i].name !== cur.name) {
+                      break;
+                    }
+                    namePos = i;
+                  }
+                  arr[namePos].nameSpan.rowspan += 1;
+                  arr[namePos].methodsSpan.rowspan += 1;
+                }
+              }
+
+              arr.push({
+                id: cur.id,
+                dishesId: cur.dishesId,
+                menuId: cur.menuId,
+                name: cur.name,
+                type: cur.type,
+                isMain: cur.isMain,
+                methods: cur.methods,
+                igdId: igd.id,
+                igdName: igd.name,
+                proteinRatio: igd.proteinRatio,
+                fatRatio: igd.fatRatio,
+                carbonRatio: igd.carbonRatio,
+                rec: igd.rec,
+                notRec: igd.notRec,
+                weight: igd.weight,
+                cusWeight: igd.cusWeight,
+                cusUnit: igd.cusUnit,
+                typeSpan: lastTypeHit
+                  ? {
+                      rowspan: 0,
+                      colspan: 0,
+                    }
+                  : {
+                      rowspan: 1,
+                      colspan: 1,
+                    },
+                nameSpan: lastNameHit
+                  ? {
+                      rowspan: 0,
+                      colspan: 0,
+                    }
+                  : {
+                      rowspan: 1,
+                      colspan: 1,
+                    },
+                methodsSpan: lastNameHit
+                  ? {
+                      rowspan: 0,
+                      colspan: 0,
+                    }
+                  : {
+                      rowspan: 1,
+                      colspan: 1,
+                    },
+              });
+            });
+          }
+          return arr;
+        }, []);
+      console.log(mData);
+      return mData;
+    },
+    ...mapGetters(["typeDict"]),
+    ...mapState(["currentDay"]),
+  },
+  methods: {
+    spanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        return row.typeSpan;
+      } else if (columnIndex === 1) {
+        return row.nameSpan;
+      } else if (columnIndex === 11) {
+        return row.methodsSpan;
+      }
+    },
+    typeFormatter(row) {
+      return this.typeDict[row.type];
+    },
+    nutriFormatter(row, col) {
+      return ((row.weight / 100) * row[col.property]).toFixed(1);
+    },
+    handleOnOneDayAnalysis(e) {
+      // 校验某天
+      this.setCurrentDay({ currentDay: this.num - 1 });
+    },
+    handleOnAdd() {
+      // console.log(this.num);
+      this.$refs.drawerRef.showDrawer();
+    },
+    handleOnDelete(data) {
+      // console.log(data);
+      this.deleteDishes({ num: this.num - 1, id: data.id });
+    },
+    handleOnWeightChange(data, weight) {
+      console.log({ data, weight });
+      this.updateDishes({
+        num: this.num - 1,
+        dishesId: data.dishesId,
+        igdId: data.igdId,
+        weight,
+      });
+    },
+    handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
+      console.log({ data, cusWeight, cusUnit });
+      this.updateDishes({
+        num: this.num - 1,
+        dishesId: data.dishesId,
+        igdId: data.igdId,
+        cusWeight,
+        cusUnit,
+      });
+    },
+    handleOnDishesConfirm(data) {
+      this.addDishes({
+        num: this.num - 1,
+        data,
+      });
+    },
+    ...mapActions(["updateDishes", "addDishes", "deleteDishes"]),
+    ...mapMutations(["setCurrentDay",]),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.recipes_com_wrapper {
+  margin-bottom: 24px;
+  padding: 1px;
+
+  .num_day {
+    cursor: pointer;
+    outline: none;
+  }
+}
+</style>
+<style lang="scss">
+.fun_button {
+  font-size: 12px;
+  padding: 4px 8px;
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/index.vue
new file mode 100644
index 000000000..bd2ced321
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="recipes_view_wrapper">
+    <RecipesAspectCom :collapse.sync="collapse" :data="analyseData" />
+    <div
+      class="recipes_content"
+      :style="`height: calc(100vh - ${collapse ? 142 : 312}px)`"
+    >
+      <RecipesCom
+        v-for="(item, index) in data"
+        :key="item.id"
+        :data="item"
+        :name="name"
+        :num="index + 1"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import RecipesCom from "./RecipesCom";
+import RecipesAspectCom from "./RecipesAspectCom";
+export default {
+  name: "RecipesView",
+  components: {
+    RecipesCom,
+    RecipesAspectCom,
+  },
+  computed: {
+    mCollapse() {
+      return analyseData.length ? this.collapse : false;
+    },
+  },
+  data() {
+    return {
+      collapse: false,
+    };
+  },
+  props: ["data", "analyseData", "name", "numRange"],
+};
+</script>
+<style lang="scss" scoped >
+.recipes_view_wrapper {
+  // padding-right: 20px;
+
+  .recipes_content {
+    overflow: auto;
+    background: white;
+  }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecommondView.vue b/stdiet-ui/src/views/custom/recipesBuild/RecommondView.vue
new file mode 100644
index 000000000..78b706c81
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecommondView.vue
@@ -0,0 +1,22 @@
+
+<template>
+  <el-button @click="handleOnClick">推荐</el-button>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const {
+  mapActions,
+  mapState,
+  mapMutations,
+  mapGetters,
+} = createNamespacedHelpers("recipes");
+export default {
+  name: "RecommondView",
+  methods: {
+    handleOnClick() {
+      this.getRecipesInfo({ recipesId: 73 });
+    },
+    ...mapActions(["getRecipesInfo"]),
+  },
+};
+</script>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/index.vue b/stdiet-ui/src/views/custom/recipesBuild/index.vue
index 3ebf30274..9f82a033a 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/index.vue
@@ -1,26 +1,33 @@
 <template>
-  <div class="app-container">
-    <div class="content">
-      <div class="left">
-        <RecipesView :data="recipesData" />
-      </div>
-      <div class="right">
-        <HealthyView :data="healthyData" v-if="healthyDataType === 0" />
-        <BodySignView :data="healthyData" v-else />
-      </div>
+  <div class="recipes_build_wrapper">
+    <div class="left" v-loading="recipesDataLoading">
+      <RecipesView
+        v-if="!!recipesData.length"
+        :data="recipesData"
+        :name="healthyData.name"
+        :analyseData="analyseData"
+      />
+      <RecommondView v-else />
+    </div>
+    <div class="right" v-loading="healthDataLoading">
+      <HealthyView :data="healthyData" v-if="healthyDataType === 0" />
+      <BodySignView :data="healthyData" v-else />
     </div>
   </div>
 </template>
 <script>
 import { createNamespacedHelpers } from "vuex";
-
-const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
-  "recipes"
-);
+const {
+  mapActions,
+  mapState,
+  mapMutations,
+  mapGetters,
+} = createNamespacedHelpers("recipes");
 
 import HealthyView from "./HealthyView";
 import BodySignView from "./BodySignView";
-import RecipesView from "./RecipesView";
+import RecipesView from "./RecipesView/index";
+import RecommondView from "./RecommondView";
 
 export default {
   name: "BuildRecipies",
@@ -28,12 +35,15 @@ export default {
     return {};
   },
   mounted() {
-    //
-    // console.log({
-    //   cusId: this.cusId,
-    //   recipesId: this.recipesId,
-    // });
-    this.init({ cusId: this.cusId, recipesId: this.recipesId }).catch((err) => {
+    const { cusId, planId, startDate, endDate, recipesId } = this.$route.query;
+
+    this.init({
+      cusId,
+      planId,
+      startDate,
+      endDate,
+      recipesId,
+    }).catch((err) => {
       this.$message.error(err.message);
     });
   },
@@ -45,14 +55,18 @@ export default {
     HealthyView,
     BodySignView,
     RecipesView,
+    RecommondView,
   },
-  props: ["planId", "cusId", "recipesId"],
+  // props: ["cusId", "planId", "recipesId", "startDate", "endDate"],
   computed: {
-    ...mapState({
-      healthyData: (state) => state.healthyData,
-      healthyDataType: (state) => state.healthyDataType,
-      recipesData: (state) => state.recipesData,
-    }),
+    ...mapState([
+      "healthyData",
+      "healthyDataType",
+      "recipesData",
+      "recipesDataLoading",
+      "healthDataLoading",
+    ]),
+    ...mapGetters(["analyseData"]),
   },
   methods: {
     ...mapActions(["init"]),
@@ -60,15 +74,17 @@ export default {
   },
 };
 </script>
-<style rel="stylesheet/scss" lang="scss">
-.content {
+<style lang="scss" scoped>
+.recipes_build_wrapper {
+  padding: 16px;
   display: flex;
-  height: calc(100vh - 124px);
+  height: calc(100vh - 86px);
   .left {
     flex: 4;
     border-right: 1px solid #e6ebf5;
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
+    padding-right: 20px;
   }
   .right {
     flex: 1;
diff --git a/stdiet-ui/src/views/custom/recipesPlan/index.vue b/stdiet-ui/src/views/custom/recipesPlan/index.vue
index 2e4fb8651..948c8ebe5 100644
--- a/stdiet-ui/src/views/custom/recipesPlan/index.vue
+++ b/stdiet-ui/src/views/custom/recipesPlan/index.vue
@@ -170,14 +170,14 @@
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
+            icon="el-icon-view"
             @click="
               allRecipesPlanQueryParam.orderId = scope.row.orderId;
               getAllPlanByOrderId();
             "
             >查看完整计划
           </el-button>
-          <el-button
+          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
@@ -192,13 +192,15 @@
             @click="getCustomerSign(scope.row)"
             v-hasPermi="['custom:customer:query']"
             >查看体征
-          </el-button>
+          </el-button> -->
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
+            :icon="`${
+              scope.row.recipesId ? 'el-icon-edit' : 'el-icon-edit-outline'
+            }`"
             @click="handleBuild(scope.row)"
-            >{{ `${scope.row.recipes_id ? "编辑" : "制作"}食谱` }}</el-button
+            >{{ `${scope.row.recipesId ? "编辑" : "制作"}食谱` }}</el-button
           >
         </template>
       </el-table-column>
@@ -604,20 +606,26 @@ export default {
       }
     },
     handleBuild(data) {
+      // console.log(data);
+      const { startDate, endDate, id, orderId, recipesId } = data;
+
       // const params = { id: data.id, cusId: data.orderId };
-      let path = `/recipes/build/${data.orderId}/${data.id}`;
-      if (data.recipes_id) {
-        // params.recipesId = data.recipes_id;
-        path += `/${data.recipes_id}`;
-      }
-      // test
-      // params.recipesId = "61";
-       path += '/73';
+      // const path = `/recipes/build/${orderId}/${id}/${recipesId || 0}`;
       // this.$router.push({
       //   name: "build",
       //   params,
       // });
-      this.$router.push(path);
+      const queryParam = {
+        planId: id,
+        cusId: orderId,
+      };
+      if (!recipesId) {
+        queryParam.startDate = startDate;
+        queryParam.endDate = endDate;
+      } else {
+        queryParam.recipesId = recipesId;
+      }
+      this.$router.push({ path: "/recipes/build", query: queryParam });
     },
   },
 };