diff --git a/stdiet-custom/src/main/resources/mapper/custom/SysDishesMapper.xml b/stdiet-custom/src/main/resources/mapper/custom/SysDishesMapper.xml
index c8b9371bf..3b13adebe 100644
--- a/stdiet-custom/src/main/resources/mapper/custom/SysDishesMapper.xml
+++ b/stdiet-custom/src/main/resources/mapper/custom/SysDishesMapper.xml
@@ -47,6 +47,8 @@
         <where>
             <if test="name != null  and name != ''"> and name like concat('%', #{name}, '%')</if>
             <if test="type != null  and type != ''"> and FIND_IN_SET(#{type}, type)</if>
+            <if test="bigClass != null"> and big_class = #{bigClass}</if>
+            <if test="smallClass != null"> and small_class = #{smallClass}</if>
             <if test="reviewStatus != null  and type != ''"> and review_status = #{reviewStatus}</if>
             <if test="isMain != null  and type != ''"> and is_main = #{isMain}</if>
         </where>
diff --git a/stdiet-ui/src/store/modules/recipes.js b/stdiet-ui/src/store/modules/recipes.js
index 279722157..19aa4b735 100644
--- a/stdiet-ui/src/store/modules/recipes.js
+++ b/stdiet-ui/src/store/modules/recipes.js
@@ -33,7 +33,9 @@ const oriState = {
   templateInfo: undefined,
   copyData: undefined,
   canCopyMenuTypes: [],
-  fontSize: parseInt(localStorage.getItem("fontSize")) || 12
+  fontSize: parseInt(localStorage.getItem("fontSize")) || 12,
+  dishBigClassOptions:[],
+  dishSmallClassOptions:[],
 };
 
 const mutations = {
@@ -139,6 +141,12 @@ const actions = {
     getDicts("cus_dishes_type").then(response => {
       commit("updateStateData", { typeOptions: response.data });
     });
+    getDicts("dish_class_big").then((response) => {
+      commit("updateStateData", { dishBigClassOptions: response.data });
+    });
+    getDicts("dish_class_small").then((response) => {
+      commit("updateStateData", { dishSmallClassOptions: response.data });
+    });
 
     return new Promise((res, rej) => {
       // 健康数据
@@ -455,6 +463,27 @@ const actions = {
 };
 
 const getters = {
+  dishClassOptions: state => {
+    const dishClass = [];
+    state.dishBigClassOptions.forEach((item, index) => {
+      dishClass.push({
+        'value': parseInt(item.dictValue),
+        'label': item.dictLabel,
+        'children': []
+      });
+      if(index == state.dishBigClassOptions.length - 1){
+        state.dishSmallClassOptions.forEach((smallClass, i) => {
+          if(smallClass.remark){
+            dishClass[parseInt(smallClass.remark-1)].children.push({
+              'value': parseInt(smallClass.dictValue),
+              'label': smallClass.dictLabel
+            });
+          }
+        });
+      }
+    });
+    return dishClass;
+  },
   analyseData: state => {
     if (!state.recipesData.length) {
       return [];
@@ -505,7 +534,18 @@ const getters = {
     state.typeOptions.reduce((obj, cur) => {
       obj[cur.dictValue] = cur.dictLabel;
       return obj;
-    }, {})
+    }, {}),
+  dishBigClassDict: state =>
+    state.dishBigClassOptions.reduce((obj, cur) => {
+      obj[cur.dictValue] = cur.dictLabel;
+      return obj;
+    }, {}),
+  dishSmallClassDict: state =>
+    state.dishSmallClassOptions.reduce((obj, cur) => {
+      obj[cur.dictValue] = cur.dictLabel;
+      return obj;
+  }, {}),
+
 };
 
 export default {
diff --git a/stdiet-ui/src/views/custom/dishes/index.vue b/stdiet-ui/src/views/custom/dishes/index.vue
index 729ab5a80..481200bda 100644
--- a/stdiet-ui/src/views/custom/dishes/index.vue
+++ b/stdiet-ui/src/views/custom/dishes/index.vue
@@ -16,6 +16,17 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="菜品种类" prop="dishClass">
+        <el-cascader
+          v-model="dishClassQueryParam"
+          :options="dishClassOptions"
+          :props="{ expandTrigger: 'hover' }"
+          :show-all-levels="true"
+          filterable
+          clearable
+          placeholder="请选择菜品种类"
+        ></el-cascader>
+      </el-form-item>
       <el-form-item label="菜品类型" prop="type">
         <el-select
           v-model="queryParams.type"
@@ -187,7 +198,7 @@
                   v-model="form.dishClass"
                   :options="dishClassOptions"
                   :props="{ expandTrigger: 'hover' }"
-                  placeholder="请输入菜品种类"
+                  placeholder="请选择菜品种类"
                   ></el-cascader>
               </el-form-item>
             </el-col>
@@ -453,15 +464,6 @@ export default {
       //
       cusWeightOptions: [],
       dishClassOptions: [],
-      /*
-      * {
-        value: 'zhinan',
-        label: '指南',
-        children: [{
-          value: 'shejiyuanze',
-          label: '设计原则'
-        }]
-      }*/
       dishClassBigOptions:[],
       dishClassSmallOptions:[],
       // 查询参数
@@ -470,11 +472,15 @@ export default {
         pageSize: 10,
         name: null,
         type: null,
+        bigClass: null,
+        smallClass: null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {},
+      //菜品种类查询种类
+      dishClassQueryParam:[]
     };
   },
   created() {
@@ -506,6 +512,11 @@ export default {
     /** 查询菜品列表 */
     getList() {
       this.loading = true;
+      if(this.dishClassQueryParam != null && this.dishClassQueryParam.length > 0){
+        this.queryParams.smallClass = this.dishClassQueryParam[1];
+      }else{
+        this.queryParams.smallClass = null;
+      }
       listDishes(this.queryParams).then((response) => {
         this.dishesList = response.rows.map((d) => {
           const recTags = [],
@@ -621,6 +632,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.dishClassQueryParam = [];
       this.handleQuery();
     },
     // 多选框选中数据
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..1e54da651
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div
+    class="recipes_aspect_wrapper"
+    :style="`height: ${collapse ? 30 : 200}px`"
+  >
+    <div class="header" v-loading="loading">
+      <div class="header_btns">
+        <span>
+          <el-button
+            size="mini"
+            v-if="!!recipesId"
+            type="primary"
+            icon="el-icon-document-copy"
+            @click="handleOnTemplateClick"
+          >
+            另存为模板
+          </el-button>
+        </span>
+        <span>
+          <span class="font_size_style">
+            字体大小：
+            <el-select
+              v-model="mFontSize"
+              size="mini"
+              style="width: 80px"
+              @change="handleOnSizeChange"
+            >
+              <el-option
+                v-for="size in fontSizeOpts"
+                :key="size.value"
+                :label="size.label"
+                :value="size.value"
+              />
+            </el-select>
+          </span>
+          <el-button size="mini" v-if="!recipesId" @click="handleOnBack"
+            >返回</el-button
+          >
+          <el-popover
+            placement="bottom"
+            trigger="click"
+            title="修改审核状态"
+            style="margin-right: 12px"
+            v-hasPermi="['recipes:plan:review']"
+          >
+            <div>
+              <el-button
+                size="mini"
+                type="success"
+                @click="hanldeOnReveiwChange(2)"
+                >审核通过</el-button
+              >
+              <el-button
+                size="mini"
+                type="danger"
+                @click="hanldeOnReveiwChange(1)"
+                >未审核通过</el-button
+              >
+            </div>
+            <el-button
+              slot="reference"
+              size="mini"
+              v-if="reviewStatus"
+              :type="reviewStatus === 1 ? 'danger' : 'success'"
+            >
+              {{ reviewStatus === 1 ? "未审核" : "已审核" }}
+            </el-button>
+          </el-popover>
+          <el-button
+            v-if="!recipesId"
+            size="mini"
+            type="primary"
+            @click="handleOnSave"
+            >生成食谱</el-button
+          >
+        </span>
+      </div>
+      <el-button
+        size="mini"
+        type="text"
+        @click="handleCollapseClick"
+        class="collapse_btn"
+      >
+        {{ `${collapse ? "展开" : "收起"}` }}
+        <em
+          class="el-icon-arrow-down arrow_icon"
+          :style="
+            collapse ? 'transform: rotate(-180deg);' : 'transform: unset;'
+          "
+        />
+      </el-button>
+    </div>
+    <div
+      class="content"
+      :style="`visibility: ${collapse ? 'hidden' : 'visible'};`"
+    >
+      <BarChart
+        v-if="data.length > 1"
+        :data="data"
+        height="170px"
+        width="500px"
+        :max="
+          healthyData.basicBMR
+            ? parseFloat(
+                healthyData.basicBMR.substring(
+                  0,
+                  healthyData.basicBMR.indexOf('千卡')
+                )
+              )
+            : 0
+        "
+      />
+      <PieChart
+        v-if="data.length === 1"
+        :data="data"
+        height="170px"
+        width="500px"
+      />
+    </div>
+    <!-- 模板 -->
+    <TemplateDialog ref="templateRef" @onConfirm="handleOnCopy" />
+  </div>
+</template>
+<script>
+import BarChart from "./BarChart";
+import PieChart from "./PieChart";
+import { addRecipesTemplate } from "@/api/custom/recipesTemplate";
+import { createNamespacedHelpers } from "vuex";
+const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
+  "recipes"
+);
+import TemplateDialog from "@/components/TemplateDialog";
+export default {
+  name: "RecipesAspectCom",
+  components: {
+    BarChart,
+    PieChart,
+    TemplateDialog,
+  },
+  data() {
+    return {
+      loading: false,
+      mFontSize: 12,
+      fontSizeOpts: [
+        { value: 8, label: "8" },
+        { value: 10, label: "10" },
+        { value: 12, label: "12" },
+        { value: 14, label: "14" },
+        { value: 16, label: "16" },
+        { value: 18, label: "18" },
+      ],
+    };
+  },
+  mounted() {
+    // this.mFontSize = parseInt(localStorage.getItem("fontSize")) || 12;
+    // this.updateFontSize({fontSize:})
+  },
+  updated() {
+    // console.log(this.data);
+    if (this.fontSize !== this.mFontSize) {
+      this.mFontSize = this.fontSize;
+      // console.log(this.fontSize);
+    }
+  },
+  props: ["collapse", "data"],
+  computed: {
+    ...mapState(["recipesId", "reviewStatus", "healthyData", "fontSize"]),
+  },
+  watch: {
+    // fontSize(val) {
+    //   this.mFontSize = val;
+    // },
+  },
+  methods: {
+    handleOnSizeChange(fontSize) {
+      this.updateFontSize({ fontSize });
+    },
+    handleCollapseClick() {
+      this.$emit("update:collapse", !this.collapse);
+    },
+    handleOnSave() {
+      this.saveRecipes({
+        callback: (query) => {
+          // console.log(query);
+          this.$router.replace({
+            path: "/recipes/build/" + query.name + "/" + query.planId,
+          });
+        },
+      });
+    },
+    hanldeOnReveiwChange(reviewStatus) {
+      this.updateReviewStatus({ reviewStatus });
+    },
+    handleOnBack() {
+      this.updateStateData({ recipesData: [] });
+    },
+    handleOnTemplateClick() {
+      this.$refs.templateRef.showDialog();
+    },
+    handleOnCopy(form) {
+      this.loading = true;
+      addRecipesTemplate(form).then((response) => {
+        if (response.code === 200) {
+          const { planId, id } = response.data;
+          this.saveRecipes({
+            cusId: 0,
+            planId,
+            callback: () => {
+              this.$message.success(`另存为模板「${form.name}」成功`);
+              this.loading = false;
+              // window.open(
+              //   "/recipes/build/" + form.name + "/" + planId + "?temId=" + id,
+              //   "_blank"
+              // );
+            },
+          });
+        }
+      });
+    },
+    ...mapActions(["saveRecipes", "updateReviewStatus"]),
+    ...mapMutations(["updateStateData", "updateFontSize"]),
+  },
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scope>
+.recipes_aspect_wrapper {
+  transition: all 0.3s;
+  padding-bottom: 12px;
+
+  .header {
+    text-align: right;
+    height: 30px;
+    display: flex;
+    align-items: center;
+
+    .header_btns {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex: 1;
+    }
+
+    .collapse_btn {
+      width: 42px;
+    }
+
+    .arrow_icon {
+      transition: all 0.3s;
+      transform-origin: center center;
+    }
+
+    .font_size_style {
+      display: inline-flex;
+      align-items: center;
+      font-size: 12px;
+      margin-right: 12px;
+    }
+  }
+
+  .content {
+  }
+}
+</style>
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
index e23a38880..e2ae176a2 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/SelectDishes.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/SelectDishes.vue
@@ -15,6 +15,17 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+     <el-form-item label="菜品种类" prop="dishClass">
+        <el-cascader
+          filterable
+          clearable
+          v-model="dishClassQueryParam"
+          :options="dishClassOptions"
+          :props="{ expandTrigger: 'hover' }"
+          :show-all-levels="true"
+          placeholder="请选择菜品种类"
+        ></el-cascader>
+      </el-form-item>
       <el-form-item label="菜品类型" prop="type">
         <el-select
           :disabled="lockType"
@@ -54,6 +65,11 @@
       @current-change="handleCurrentChange"
     >
       <el-table-column label="菜品名称" align="center" prop="name" />
+      <el-table-column label="菜品种类" align="center" prop="bigClass">
+        <template slot-scope="scope">
+          <AutoHideMessage :data="dishClassFormat(scope.row)" :maxLength="10"></AutoHideMessage>
+        </template>
+      </el-table-column>
       <el-table-column label="菜品类型" align="center" prop="type">
         <template slot-scope="scope">
           <AutoHideInfo :data="typeFormat(scope.row)" />
@@ -90,9 +106,10 @@
 </template>
 <script>
 import AutoHideInfo from "@/components/AutoHideInfo";
+import AutoHideMessage from "@/components/AutoHideMessage";
 import { listDishes } from "@/api/custom/dishes";
 import { createNamespacedHelpers } from "vuex";
-const { mapState } = createNamespacedHelpers("recipes");
+const { mapState,mapGetters } = createNamespacedHelpers("recipes");
 export default {
   name: "SelectDishes",
   props: [],
@@ -107,15 +124,20 @@ export default {
         pageSize: 10,
         name: null,
         type: null,
+        smallClass: null,
+        bigClass: null,
         reviewStatus: "yes",
       },
+      //菜品种类查询参数
+      dishClassQueryParam:[]
     };
   },
   components: {
-    AutoHideInfo,
+    AutoHideInfo,AutoHideMessage
   },
   computed: {
-    ...mapState(["typeOptions"]),
+    ...mapState(["typeOptions","dishBigClassOptions","dishSmallClassOptions"]),
+    ...mapGetters(["dishClassOptions"]),
   },
   methods: {
     getList({ type }) {
@@ -124,6 +146,11 @@ export default {
         this.lockType = true;
         this.queryParams.type = type;
       }
+      if(this.dishClassQueryParam != null && this.dishClassQueryParam.length > 0){
+        this.queryParams.smallClass = this.dishClassQueryParam[1];
+      }else{
+        this.queryParams.smallClass = null;
+      }
       this.loading = true;
       listDishes(this.queryParams).then((result) => {
         this.dishesList = result.rows.map((d) => {
@@ -175,6 +202,7 @@ export default {
     },
     resetQuery() {
       this.resetForm("queryForm");
+      this.dishClassQueryParam = [];
       this.handleQuery();
     },
     typeFormat(row, column) {
@@ -184,6 +212,15 @@ export default {
             .split(",")
             .map((type) => this.selectDictLabel(this.typeOptions, type));
     },
+    //菜品种类翻译
+    dishClassFormat(row){
+       if(row.bigClass > 0 && row.smallClass > 0){
+         let bigClassName = this.selectDictLabel(this.dishBigClassOptions, row.bigClass);
+         let smallClassName = this.selectDictLabel(this.dishSmallClassOptions, row.smallClass);
+         return bigClassName+"/"+smallClassName;
+       }
+       return "";
+    },
   },
 };
 </script>