调整图表展示

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

@@ -512,13 +512,13 @@ const getters = {
         (obj, cur) => {
           cur.igdList.forEach(igd => {
             obj.pWeight += (igd.weight / 100) * igd.proteinRatio;
-            obj.pHeat = obj.pWeight * 4;
+            obj.pCalories = obj.pWeight * 4;
             obj.fWeight += (igd.weight / 100) * igd.fatRatio;
-            obj.fHeat = obj.fWeight * 9;
+            obj.fCalories = obj.fWeight * 9;
             obj.cWeight += (igd.weight / 100) * igd.carbonRatio;
-            obj.cHeat = obj.cWeight * 4;
+            obj.cCalories = obj.cWeight * 4;
-            obj.totalHeat = obj.pHeat + obj.fHeat + obj.cHeat;
+            obj.totalCalories = obj.pCalories + obj.fCalories + obj.cCalories;
-            obj[`heat${cur.type}`] +=
+            obj[`calories${cur.type}`] +=
               (igd.weight / 100) * igd.proteinRatio * 4 +
               (igd.weight / 100) * igd.fatRatio * 9 +
               (igd.weight / 100) * igd.carbonRatio * 4;
@@ -532,17 +532,17 @@ const getters = {
           pWeight: 0,
           fWeight: 0,
           cWeight: 0,
-          pHeat: 0,
+          pCalories: 0,
-          fHeat: 0,
+          fCalories: 0,
-          cHeat: 0,
+          cCalories: 0,
           //
-          totalHeat: 0,
+          totalCalories: 0,
-          heat1: 0,
+          calories1: 0,
-          heat2: 0,
+          calories2: 0,
-          heat3: 0,
+          calories3: 0,
-          heat4: 0,
+          calories4: 0,
-          heat5: 0,
+          calories5: 0,
-          heat6: 0,
+          calories6: 0,
           //
           totalWeight: 0,
           weight1: 0,
@@ -554,7 +554,7 @@ const getters = {
         }
       )
     );
-    console.log(nutriData);
+    // console.log(nutriData);
     return nutriData;
   },
   verifyNotRecData: state => {

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

@@ -1,180 +0,0 @@
-<template>
-  <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import echarts from "echarts";
-import VueScrollTo from "vue-scrollto";
-require("@/utils/echarts/myShine");
-import resize from "@/views/dashboard/mixins/resize";
-import { createNamespacedHelpers } from "vuex";
-const { mapMutations } = createNamespacedHelpers("recipes");
-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: [],
-    },
-    max: {
-      type: Number,
-      default: 0,
-    },
-  },
-  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: {
-    ...mapMutations(["setCurrentDay"]),
-    initChart() {
-      this.chart = echarts.init(this.$el, "myShine");
-      this.chart.on("click", this.handleOnClick);
-      this.updateChart(this.data.length > 0 ? this.data : {});
-    },
-    updateChart(source) {
-      // console.log(this.max);
-      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}：${weightVal}克（${heatVal}千卡）`
-                );
-                return arr;
-              },
-              [name]
-            );
-            tooltips[0] += ` - 共${totalHeat.toFixed(1)}千卡`;
-            return tooltips.join("</br>");
-          },
-        },
-        dataset: {
-          dimensions: [
-            "name",
-            "pWeight",
-            "pHeat",
-            "fWeight",
-            "fHeat",
-            "cWeight",
-            "cHeat",
-          ],
-          source,
-        },
-        grid: {
-          top: 50,
-          left: 10,
-          right: 50,
-          bottom: 10,
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          // axisLabel: {
-          //   rotate: 45,
-          // },
-        },
-        yAxis: {
-          type: "value",
-          name: "热量/千卡",
-          nameTextStyle: {
-            color: "#262626",
-            fontSize: 12,
-          },
-        },
-        series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
-          name: dim,
-          type: "bar",
-          barWidth: 24,
-          stack: "bar",
-          encode: {
-            y: dim,
-            x: 0,
-          },
-          markLine: {
-            data: [{ name: "BMR", yAxis: this.max ? this.max - 400 : 0 }],
-            symbol: "none",
-            lineStyle: {
-              color: "#d96969",
-            },
-          },
-          itemStyle: {
-            borderWidth: 2,
-            borderColor: "#fff",
-          },
-        })),
-      });
-    },
-    handleOnClick(params) {
-      // console.log(params);
-      const { dataIndex } = params;
-      this.setCurrentDay({ currentDay: dataIndex });
-      VueScrollTo.scrollTo(`#recipes${dataIndex}`, 500, {
-        container: "#recipes_content",
-      });
-    },
-  },
-  watch: {
-    data(newVal, oldVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          this.updateChart(newVal);
-        });
-      }
-    },
-  },
-};
-</script>

stdiet-ui/src/views/custom/recipesBuild/InfoView/DailyAnalyzeCom/PieChart/index.vue

@@ -0,0 +1,276 @@
+<template>
+  <div ref="echart" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+require("@/utils/echarts/myShine");
+import resize from "@/views/dashboard/mixins/resize";
+import { createNamespacedHelpers } from "vuex";
+const { mapMutations, mapState } = createNamespacedHelpers("recipes");
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "200px",
+    },
+    data: {
+      type: Array,
+      default: [],
+    },
+    subTitle: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  computed: {},
+  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");
+      if (this.data.length > 0) {
+        this.updateChart(this.data);
+      }
+    },
+    backToAll() {
+      this.resetCurrentDay({ currentDay: -1 });
+    },
+    getTooltipArr(params) {
+      console.log(params);
+      let tooltips;
+      const { name, marker, percent, value } = params;
+      switch (this.type) {
+        case "nutrition":
+          const weight = value[1] / (name === "脂肪" ? 9 : 4);
+          tooltips = [
+            `${marker} ${name}`,
+            `摄入量：${weight.toFixed(1)}克`,
+            `摄入热量：${value[1].toFixed(1)}千卡`,
+            `供能比：${percent}%`,
+          ];
+          break;
+        case "calories":
+          tooltips = [
+            `${marker} ${name}`,
+            `热量：${value[1].toFixed(1)}千卡`,
+            `占比：${percent}%`,
+          ];
+          break;
+        case "weight":
+          tooltips = [
+            `${marker} ${name}`,
+            `质量：${value[1].toFixed(1)}克`,
+            `占比：${percent}%`,
+          ];
+          break;
+      }
+      return tooltips.join("</br>");
+    },
+    updateChart(source) {
+      console.log(source);
+      const total = source.reduce((acc, cur) => acc + cur[1], 0);
+      this.chart.clear();
+      const option = {
+        title: {
+          text: this.title,
+          subtext: this.subTitle,
+        },
+        legend: {
+          left: 100,
+          itemWidth: 8,
+          itemHeight: 8,
+          pageIconSize: 10,
+          textStyle: {
+            fontSize: 10,
+          },
+        },
+        dataset: {
+          source,
+        },
+        tooltip: {
+          trigger: "item",
+          appendToBody: true,
+          formatter: this.getTooltipArr,
+        },
+        graphic: [
+          {
+            type: "group",
+            top: 60,
+            left: 10,
+            silent: true,
+            children: [
+              {
+                type: "text",
+                style: {
+                  text: this.type === "weight" ? "总质量" : "总热量约",
+                  fill: "#606266",
+                },
+              },
+              {
+                type: "text",
+                top: 18,
+                left: 8,
+                style: {
+                  text: `${total.toFixed(1)}${
+                    this.type === "weight" ? "克" : "千卡"
+                  }`,
+                  font: '14px "Microsoft YaHei", sans-serif',
+                },
+              },
+            ],
+          },
+          {
+            type: "group",
+            top: 36,
+            right: 10,
+            silent: true,
+            children: source.map((item, idx) => {
+              const data =
+                this.type == "nutrition"
+                  ? item[1] / (idx === 1 ? 9 : 4)
+                  : item[1];
+              return {
+                type: "text",
+                top: idx * 20,
+                right: 10,
+                style: {
+                  text: `${item[0]}：${data.toFixed(1)}${
+                    this.type === "calories" ? "千卡" : "克"
+                  }`,
+                  fill: "#606266",
+                },
+              };
+            }),
+          },
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: [0, 60],
+            center: ["50%", "55%"],
+            // labelLine: {
+            //   length: 5,
+            //   length2: 5,
+            // },
+            label: {
+              show: true,
+              position: "inside",
+              color: "#fff",
+              fontSize: 12,
+              fontWeight: "bold",
+            },
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+            },
+          },
+        ],
+      };
+      // console.log(option);
+      this.chart.setOption(option);
+    },
+  },
+  watch: {
+    data(newVal, oldVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.updateChart(newVal);
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ :focus {
+  outline: 0;
+}
+
+.aspect_pie_chart_wrapper {
+  width: 100%;
+  display: flex;
+  position: relative;
+
+  & > div:nth-child(1) {
+    // width: 200px
+  }
+
+  .small_table {
+    .my_cell {
+      padding: 2px 0 !important;
+    }
+  }
+
+  .summary {
+    padding: 2px;
+    border-bottom: 1px solid #dfe6ec;
+    border-left: 1px solid #dfe6ec;
+    border-right: 1px solid #dfe6ec;
+
+    & > div {
+      padding: 3px;
+      text-align: center;
+    }
+  }
+
+  .see_all {
+    position: absolute;
+    bottom: 4px;
+    left: 24px;
+    padding: 0;
+  }
+
+  .icon_btns {
+    position: absolute;
+    right: 0;
+
+    em {
+      display: inline-block;
+      padding: 4px;
+      cursor: pointer;
+    }
+
+    .sel_icon {
+      color: #1890ff;
+    }
+  }
+
+  .table_zone {
+    margin-top: 26px;
+  }
+}
+</style>

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

@@ -0,0 +1,110 @@
+<template>
+  <div class="daily_analyze_com_wrapper">
+    <pie-chart
+      title="营养统计"
+      :data="nutritionSource"
+      type="nutrition"
+      :subTitle="subTitle"
+    />
+    <pie-chart
+      title="热量统计"
+      :data="caloriesSource"
+      type="calories"
+      :subTitle="subTitle"
+    />
+    <pie-chart
+      title="质量统计"
+      :data="weightSource"
+      type="weight"
+      :subTitle="subTitle"
+    />
+    <el-button size="mini" type="text" @click="backToAll" class="see_all"
+      >查看全部</el-button
+    >
+  </div>
+</template>
+<script>
+import PieChart from "./PieChart";
+import { createNamespacedHelpers } from "vuex";
+const { mapGetters, mapMutations } = createNamespacedHelpers("recipes");
+export default {
+  name: "DailyAnalyzeCom",
+  data() {
+    return {
+      subTitle: "",
+    };
+  },
+  components: {
+    PieChart,
+  },
+  methods: {
+    backToAll() {
+      this.resetCurrentDay({ currentDay: -1 });
+    },
+    ...mapMutations(["resetCurrentDay"]),
+  },
+  computed: {
+    nutritionSource() {
+      const [data] = this.analyseData;
+      this.subTitle = data.name;
+      return [
+        ["蛋白质", data.pCalories],
+        ["脂肪", data.fCalories],
+        ["碳水", data.cCalories],
+      ];
+    },
+    caloriesSource() {
+      const [data] = this.analyseData;
+      const source = [
+        ["早餐", data.calories1],
+        ["午餐", data.calories3],
+        ["晚餐", data.calories5],
+      ];
+      if (data.calories2) {
+        source.push(["早加餐", data.calories2]);
+      }
+      if (data.calories4) {
+        source.push(["午加餐", data.calories4]);
+      }
+      if (data.calories6) {
+        source.push(["晚加餐", data.calories6]);
+      }
+      return source;
+    },
+    weightSource() {
+      const [data] = this.analyseData;
+      const source = [
+        ["早餐", data.weight1],
+        ["午餐", data.weight3],
+        ["晚餐", data.weight5],
+      ];
+      if (data.weight2) {
+        source.push(["早加餐", data.weight2]);
+      }
+      if (data.weight4) {
+        source.push(["午加餐", data.weight4]);
+      }
+      if (data.weight6) {
+        source.push(["晚加餐", data.weight6]);
+      }
+      return source;
+    },
+    ...mapGetters(["analyseData"]),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.daily_analyze_com_wrapper {
+  position: relative;
+  & > div:not(:nth-child(1)) {
+    margin-top: 12px;
+  }
+
+  .see_all {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+</style>
+

stdiet-ui/src/views/custom/recipesBuild/InfoView/WeaklyAnalyzeCom/BarChart/index.vue

@@ -0,0 +1,221 @@
+<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: "180px",
+    },
+    data: {
+      type: Array,
+      default: [],
+    },
+    max: {
+      type: Number,
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  computed: {},
+  updated() {
+    // console.log("updated");
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "myShine");
+      this.chart.on("click", this.handleOnClick);
+      if (this.data.length > 0) {
+        this.updateChart(this.data);
+      }
+    },
+    getTooltipArr(params) {
+      // console.log(params);
+      const [param] = params;
+      const { name } = param;
+      let tooltips;
+      let total = 0;
+      switch (this.type) {
+        case "nutrition":
+          tooltips = params.reduce(
+            (arr, cur) => {
+              const { value, seriesName, seriesIndex, marker } = cur;
+              const calories = value[seriesIndex + 1];
+              total += calories;
+              const weight = (
+                calories / (seriesName === "脂肪" ? 9 : 4)
+              ).toFixed(1);
+              arr.push(
+                `${marker} ${seriesName}：${weight}克（${calories.toFixed(
+                  1
+                )}千卡）`
+              );
+              return arr;
+            },
+            [name]
+          );
+          tooltips[0] += ` - 约${total.toFixed(1)}千卡`;
+          break;
+        case "calories":
+          tooltips = params.reduce(
+            (arr, cur) => {
+              const { value, seriesName, seriesIndex, marker } = cur;
+              const calories = value[seriesIndex + 1];
+              total += calories;
+              if (calories) {
+                arr.push(`${marker} ${seriesName}：${calories.toFixed(1)}千卡`);
+              }
+              return arr;
+            },
+            [name]
+          );
+          tooltips[0] += ` - 约${total.toFixed(1)}千卡`;
+          break;
+        case "weight":
+          tooltips = params.reduce(
+            (arr, cur) => {
+              const { value, seriesName, seriesIndex, marker } = cur;
+              const weight = value[seriesIndex + 1];
+              total += weight;
+              if (weight) {
+                arr.push(`${marker} ${seriesName}：${weight.toFixed(1)}克`);
+              }
+              return arr;
+            },
+            [name]
+          );
+          tooltips[0] += ` - 共${total.toFixed(1)}克`;
+          break;
+      }
+      return tooltips.join("</br>");
+    },
+    updateChart(source) {
+      // console.log(this.max);
+      // console.log(source);
+      this.chart.clear();
+      const option = {
+        title: {
+          text: this.title,
+        },
+        legend: {
+          // type: "scroll",
+          left: 100,
+          itemWidth: 8,
+          itemHeight: 8,
+          pageIconSize: 10,
+          textStyle: {
+            fontSize: 10,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          appendToBody: true,
+          formatter: this.getTooltipArr,
+        },
+        dataset: {
+          source,
+        },
+        grid: {
+          top: 50,
+          left: 10,
+          right: 50,
+          bottom: 10,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          // axisLabel: {
+          //   rotate: 45,
+          // },
+        },
+        yAxis: {
+          type: "value",
+          name: this.type === "weight" ? "质量/克" : "热量/千卡",
+          nameTextStyle: {
+            color: "#262626",
+            fontSize: 10,
+          },
+        },
+        series: source[0].slice(1).map((name, idx) => ({
+          name,
+          type: "bar",
+          barWidth: 24,
+          stack: "bar",
+          encode: {
+            y: idx + 1,
+            x: 0,
+          },
+          itemStyle: {
+            borderWidth: 2,
+            borderColor: "#fff",
+          },
+        })),
+      };
+      if (this.max) {
+        option.series[0].markLine = {
+          data: [{ name: "BMR", yAxis: this.max ? this.max - 400 : 0 }],
+          symbol: "none",
+          lineStyle: {
+            color: "#d96969",
+          },
+        };
+      }
+      this.chart.setOption(option);
+    },
+    handleOnClick(params) {
+      // console.log(params);
+      const { dataIndex } = params;
+      this.$emit("onClick", dataIndex);
+    },
+  },
+  watch: {
+    data(newVal, oldVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.updateChart(newVal);
+        });
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,110 @@
+<template>
+  <div class="weakly_analyze_com_wrapper">
+    <bar-chart
+      :data="nutritionSource"
+      :max="max"
+      title="营养统计"
+      type="nutrition"
+      @onClick="handleOnClick"
+    />
+    <bar-chart
+      :data="caloriesSource"
+      title="热量统计"
+      type="calories"
+      @onClick="handleOnClick"
+    />
+    <bar-chart
+      :data="weightSource"
+      title="质量统计"
+      type="weight"
+      @onClick="handleOnClick"
+    />
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapState, mapGetters, mapMutations } = createNamespacedHelpers(
+  "recipes"
+);
+import VueScrollTo from "vue-scrollto";
+import BarChart from "./BarChart";
+export default {
+  name: "WeaklyAnalyzeCom",
+  components: {
+    BarChart,
+  },
+  data() {
+    return {};
+  },
+  props: ["data"],
+  methods: {
+    handleOnClick(currentDay) {
+      this.setCurrentDay({ currentDay });
+      VueScrollTo.scrollTo(`#recipes${currentDay}`, 500, {
+        container: "#recipes_content",
+      });
+    },
+    ...mapMutations(["setCurrentDay"]),
+  },
+  computed: {
+    nutritionSource() {
+      return this.analyseData.reduce(
+        (arr, cur) => {
+          arr.push([cur.name, cur.pCalories, cur.fCalories, cur.cCalories]);
+          return arr;
+        },
+        [["日期", "蛋白质", "脂肪", "碳水"]]
+      );
+    },
+    caloriesSource() {
+      return this.analyseData.reduce(
+        (arr, cur) => {
+          arr.push([
+            cur.name,
+            cur.calories1,
+            cur.calories2,
+            cur.calories3,
+            cur.calories4,
+            cur.calories5,
+            cur.calories6,
+          ]);
+          return arr;
+        },
+        [["日期", "早餐", "早加餐", "午餐", "午加餐", "晚餐", "晚加餐"]]
+      );
+    },
+    weightSource() {
+      return this.analyseData.reduce(
+        (arr, cur) => {
+          arr.push([
+            cur.name,
+            cur.weight1,
+            cur.weight2,
+            cur.weight3,
+            cur.weight4,
+            cur.weight5,
+            cur.weight6,
+          ]);
+          return arr;
+        },
+        [["日期", "早餐", "早加餐", "午餐", "午加餐", "晚餐", "晚加餐"]]
+      );
+    },
+    max() {
+      const { basicBMR } = this.healthyData || {};
+      return basicBMR
+        ? parseFloat(basicBMR.substring(0, basicBMR.indexOf("千卡")))
+        : 0;
+    },
+    ...mapState(["healthyData"]),
+    ...mapGetters(["analyseData"]),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.weakly_analyze_com_wrapper {
+  & > div:not(:nth-child(1)) {
+    margin-top: 12px;
+  }
+}
+</style>

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

@@ -1,50 +1,46 @@
 <template>
   <div class="recipes_build_info_view_wrapper">
-    <div class="top" v-if="showChart">
+    <el-tabs v-model="activeName" @tab-click="handleOnTabClick">
-      <BarChart
+      <el-tab-pane label="食谱分析" name="0" v-if="showChart">
-        v-if="analyseData.length > 1"
+        <div class="content">
-        :data="analyseData"
+          <WeaklyAnalyzeCom v-if="analyseData.length > 1" />
-        height="160px"
+          <DailyAnalyzeCom v-else />
-        width="100%"
+        </div>
-        :max="max"
+      </el-tab-pane>
-      />
+      <el-tab-pane label="模板信息" name="1" v-if="!!temId">
-      <PieChart
+        <div class="content">
-        v-if="analyseData.length === 1"
+          <TemplateInfoView :data="templateInfo" />
-        :data="analyseData"
+        </div>
-        height="160px"
+      </el-tab-pane>
-        width="100%"
+      <el-tab-pane label="客户信息" name="2" v-else>
-      />
+        <div class="content">
-    </div>
+          <HealthyView :data="healthyData" v-if="healthyDataType === 0" dev />
-    <div
+          <BodySignView :data="healthyData" v-else dev />
-      class="content"
+        </div>
-      :style="`height: calc(100vh - ${showChart ? 192 : 32}px);`"
+      </el-tab-pane>
-    >
+    </el-tabs>
-      <TemplateInfoView v-if="!!temId" :data="templateInfo" />
-      <HealthyView :data="healthyData" v-else-if="healthyDataType === 0" dev />
-      <BodySignView :data="healthyData" v-else dev />
-    </div>
   </div>
 </template>
 <script>
 import { createNamespacedHelpers } from "vuex";
 const { mapActions, mapState, mapGetters } = createNamespacedHelpers("recipes");
-import BarChart from "./BarChart";
-import PieChart from "./PieChart";
 import TemplateInfoView from "./TemplateInfoView";
 import HealthyView from "@/components/HealthyView";
 import BodySignView from "@/components/BodySignView";
+import WeaklyAnalyzeCom from "./WeaklyAnalyzeCom";
+import DailyAnalyzeCom from "./DailyAnalyzeCom";
 export default {
   name: "InfoView",
   data() {
     const { temId } = this.$route.query;
-    return { temId };
+    return { temId, activeName: "0" };
   },
   components: {
-    BarChart,
-    PieChart,
     HealthyView,
     BodySignView,
     TemplateInfoView,
+    WeaklyAnalyzeCom,
+    DailyAnalyzeCom,
   },
   computed: {
     max() {
@@ -64,16 +60,18 @@ export default {
     ]),
     ...mapGetters(["analyseData"]),
   },
+  methods: {
+    handleOnTabClick(tab) {
+      this.activeName = tab.name;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 .recipes_build_info_view_wrapper {
-  .top {
-    height: 160px;
-  }
-
   .content {
     overflow: auto;
+    height: calc(100vh - 88px);
   }
 }
 </style>