调整食谱信息顺序
This commit is contained in:
huangdeliang
@@ -70,7 +70,7 @@ export default {
|
|||||||
this.resetCurrentDay({ currentDay: -1 });
|
this.resetCurrentDay({ currentDay: -1 });
|
||||||
},
|
},
|
||||||
getTooltipArr(params) {
|
getTooltipArr(params) {
|
||||||
console.log(params);
|
// console.log(params);
|
||||||
let tooltips;
|
let tooltips;
|
||||||
const { name, marker, percent, value } = params;
|
const { name, marker, percent, value } = params;
|
||||||
switch (this.type) {
|
switch (this.type) {
|
||||||
@@ -101,7 +101,7 @@ export default {
|
|||||||
return tooltips.join("</br>");
|
return tooltips.join("</br>");
|
||||||
},
|
},
|
||||||
updateChart(source) {
|
updateChart(source) {
|
||||||
console.log(source);
|
// console.log(source);
|
||||||
const total = source.reduce((acc, cur) => acc + cur[1], 0);
|
const total = source.reduce((acc, cur) => acc + cur[1], 0);
|
||||||
this.chart.clear();
|
this.chart.clear();
|
||||||
const option = {
|
const option = {
|
||||||
|
|||||||
@@ -95,6 +95,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.daily_analyze_com_wrapper {
|
.daily_analyze_com_wrapper {
|
||||||
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
& > div:not(:nth-child(1)) {
|
& > div:not(:nth-child(1)) {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
|||||||
@@ -1,421 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
:class="`aspect_pie_chart_wrapper ${className || ''}`"
|
|
||||||
:style="{ height: height, width: width }"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
ref="echart"
|
|
||||||
:style="{ height: height, width: !view ? '100px' : '100%' }"
|
|
||||||
/>
|
|
||||||
<div class="icon_btns">
|
|
||||||
<el-tooltip effect="dark" content="营养分析" placement="top">
|
|
||||||
<em
|
|
||||||
:class="['iconfont', 'icon-03', { sel_icon: view === 0 }]"
|
|
||||||
@click="handleOnViewChange(0)"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="dark" content="热量分析" placement="top">
|
|
||||||
<em
|
|
||||||
:class="['iconfont', 'icon-fenxi', { sel_icon: view === 1 }]"
|
|
||||||
@click="handleOnViewChange(1)"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip effect="dark" content="质量分析" placement="top">
|
|
||||||
<em
|
|
||||||
:class="[
|
|
||||||
'iconfont',
|
|
||||||
'icon-canshuiconyouhua-',
|
|
||||||
{ sel_icon: view === 2 },
|
|
||||||
]"
|
|
||||||
@click="handleOnViewChange(2)"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
<div v-if="view === 0" class="table_zone">
|
|
||||||
<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="蛋白质" prop="p" align="center" width="65" />
|
|
||||||
<el-table-column label="脂肪" prop="f" align="center" width="65" />
|
|
||||||
<el-table-column label="碳水" prop="c" align="center" width="65" />
|
|
||||||
</el-table>
|
|
||||||
<div class="summary">
|
|
||||||
<div style="font-size: 12px; color: #606266">总热量约等于</div>
|
|
||||||
<div style="color: #515a6e; font-weight: bold">
|
|
||||||
{{ data[0] ? data[0].totalHeat.toFixed(1) : 0 }}千卡
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-button size="mini" type="text" @click="backToAll" class="see_all"
|
|
||||||
>查看全部</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from "echarts";
|
|
||||||
require("@/utils/echarts/myShine");
|
|
||||||
import resize from "@/views/dashboard/mixins/resize";
|
|
||||||
import TextInfo from "@/components/TextInfo";
|
|
||||||
import { createNamespacedHelpers } from "vuex";
|
|
||||||
const { mapMutations, mapState } = createNamespacedHelpers("recipes");
|
|
||||||
|
|
||||||
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() {
|
|
||||||
const nameDict = {
|
|
||||||
p: "蛋白质",
|
|
||||||
f: "脂肪",
|
|
||||||
c: "碳水",
|
|
||||||
};
|
|
||||||
const menuDict = {
|
|
||||||
1: "早餐",
|
|
||||||
2: "早加餐",
|
|
||||||
3: "午餐",
|
|
||||||
4: "午加餐",
|
|
||||||
5: "晚餐",
|
|
||||||
6: "晚加餐",
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
chart: null,
|
|
||||||
nameDict,
|
|
||||||
menuDict,
|
|
||||||
typeDict: {
|
|
||||||
Weight: "摄入量",
|
|
||||||
Rate: "供能比",
|
|
||||||
},
|
|
||||||
view: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
mData() {
|
|
||||||
const [data] = this.data;
|
|
||||||
if (!data) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
const mData = ["Weight", "Rate"].map((t, idx) => ({
|
|
||||||
type: this.typeDict[t],
|
|
||||||
...["p", "f", "c"].reduce((obj, cur) => {
|
|
||||||
obj[cur] = idx
|
|
||||||
? data.totalHeat === 0
|
|
||||||
? 0
|
|
||||||
: `${((data[`${cur}Heat`] / data.totalHeat) * 100).toFixed(2)}%`
|
|
||||||
: `${data[`${cur}Weight`].toFixed(1)}克`;
|
|
||||||
return obj;
|
|
||||||
}, {}),
|
|
||||||
}));
|
|
||||||
// console.log(mData);
|
|
||||||
return mData;
|
|
||||||
},
|
|
||||||
curNameDict() {
|
|
||||||
switch (this.view) {
|
|
||||||
case 0:
|
|
||||||
return this.nameDict;
|
|
||||||
case 1:
|
|
||||||
return this.menuDict;
|
|
||||||
case 2:
|
|
||||||
return this.menuDict;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
curTitle() {
|
|
||||||
switch (this.view) {
|
|
||||||
case 0:
|
|
||||||
return "营养分析";
|
|
||||||
case 1:
|
|
||||||
return "热量分析";
|
|
||||||
case 2:
|
|
||||||
return "质量分析";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
curTotalText() {
|
|
||||||
switch (this.view) {
|
|
||||||
case 1:
|
|
||||||
return "总热量约";
|
|
||||||
case 2:
|
|
||||||
return "总质量";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
curTotalName() {
|
|
||||||
switch (this.view) {
|
|
||||||
case 1:
|
|
||||||
return "totalHeat";
|
|
||||||
case 2:
|
|
||||||
return "totalWeight";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
curUnit() {
|
|
||||||
switch (this.view) {
|
|
||||||
case 1:
|
|
||||||
return "千卡";
|
|
||||||
case 2:
|
|
||||||
return "克";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
...mapState(["recipesData"]),
|
|
||||||
},
|
|
||||||
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[0] || {});
|
|
||||||
},
|
|
||||||
backToAll() {
|
|
||||||
this.resetCurrentDay({ currentDay: -1 });
|
|
||||||
},
|
|
||||||
getDataName(dim) {
|
|
||||||
switch (this.view) {
|
|
||||||
case 0:
|
|
||||||
return `${dim}Heat`;
|
|
||||||
case 1:
|
|
||||||
return `heat${dim}`;
|
|
||||||
case 2:
|
|
||||||
return `weight${dim}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateChart(data) {
|
|
||||||
console.log(data);
|
|
||||||
this.chart.clear();
|
|
||||||
const option = {
|
|
||||||
title: {
|
|
||||||
text: this.curTitle,
|
|
||||||
subtext: data.name,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
position: "right",
|
|
||||||
trigger: "item",
|
|
||||||
// appendToBody: true,
|
|
||||||
formatter: (params) => {
|
|
||||||
const {
|
|
||||||
name,
|
|
||||||
marker,
|
|
||||||
percent,
|
|
||||||
data: { value, oriData, dim },
|
|
||||||
} = params;
|
|
||||||
return !this.view
|
|
||||||
? [
|
|
||||||
`${marker} ${name}`,
|
|
||||||
`摄入量：${oriData[`${dim}Weight`].toFixed(1)}克`,
|
|
||||||
`摄入热量：${value.toFixed(1)}千卡`,
|
|
||||||
`供能比：${percent}%`,
|
|
||||||
].join("</br>")
|
|
||||||
: this.view === 1
|
|
||||||
? [
|
|
||||||
`${marker} ${name}`,
|
|
||||||
`热量：${data[`heat${dim}`].toFixed(1)}千卡`,
|
|
||||||
`供能比：${percent}%`,
|
|
||||||
].join("</br>")
|
|
||||||
: [
|
|
||||||
`${marker} ${name}`,
|
|
||||||
`质量：${data[`weight${dim}`].toFixed(1)}克`,
|
|
||||||
`占比：${percent}%`,
|
|
||||||
].join("</br>");
|
|
||||||
},
|
|
||||||
},
|
|
||||||
graphic: !this.view
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
{
|
|
||||||
type: "group",
|
|
||||||
top: 60,
|
|
||||||
left: 10,
|
|
||||||
silent: true,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
style: {
|
|
||||||
text: this.curTotalText,
|
|
||||||
fill: "#606266",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
top: 18,
|
|
||||||
left: 8,
|
|
||||||
style: {
|
|
||||||
text: `${
|
|
||||||
data[`${this.curTotalName}`]
|
|
||||||
? data[`${this.curTotalName}`].toFixed(1)
|
|
||||||
: 0
|
|
||||||
} ${this.curUnit}`,
|
|
||||||
font: '14px "Microsoft YaHei", sans-serif',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "group",
|
|
||||||
top: 36,
|
|
||||||
right: 10,
|
|
||||||
silent: true,
|
|
||||||
children: Object.keys(this.curNameDict).reduce((arr, cur) => {
|
|
||||||
const tarData = data[this.getDataName(cur)];
|
|
||||||
if (tarData) {
|
|
||||||
arr.push({
|
|
||||||
type: "text",
|
|
||||||
top: arr.length * 20,
|
|
||||||
right: 10,
|
|
||||||
style: {
|
|
||||||
text: `${this.curNameDict[cur]}：${tarData.toFixed(1)}`,
|
|
||||||
fill: "#606266",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return arr;
|
|
||||||
}, []),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: data.name,
|
|
||||||
type: "pie",
|
|
||||||
radius: [0, !this.view ? 40 : 60],
|
|
||||||
center: ["50%", "55%"],
|
|
||||||
data: Object.keys(this.curNameDict).reduce((arr, dim) => {
|
|
||||||
if (!this.view || data[`heat${dim}`]) {
|
|
||||||
arr.push({
|
|
||||||
dim,
|
|
||||||
value: data[this.getDataName(dim)],
|
|
||||||
name: this.curNameDict[dim],
|
|
||||||
oriData: data,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return arr;
|
|
||||||
}, []),
|
|
||||||
// labelLine: {
|
|
||||||
// length: 5,
|
|
||||||
// length2: 5,
|
|
||||||
// },
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "inside",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: !this.view ? 10 : 12,
|
|
||||||
fontWeight: "bold",
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
// console.log(option);
|
|
||||||
this.chart.setOption(option);
|
|
||||||
},
|
|
||||||
handleOnViewChange(view) {
|
|
||||||
this.view = view;
|
|
||||||
this.chart.resize({
|
|
||||||
width: !this.view ? 100 : 364,
|
|
||||||
});
|
|
||||||
this.updateChart(this.data[0] || {});
|
|
||||||
},
|
|
||||||
...mapMutations(["resetCurrentDay"]),
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
data(newVal, oldVal) {
|
|
||||||
if (newVal) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.updateChart(newVal[0]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</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>
|
|
||||||
@@ -5,18 +5,21 @@
|
|||||||
:max="max"
|
:max="max"
|
||||||
title="营养统计"
|
title="营养统计"
|
||||||
type="nutrition"
|
type="nutrition"
|
||||||
|
width="364px"
|
||||||
@onClick="handleOnClick"
|
@onClick="handleOnClick"
|
||||||
/>
|
/>
|
||||||
<bar-chart
|
<bar-chart
|
||||||
:data="caloriesSource"
|
:data="caloriesSource"
|
||||||
title="热量统计"
|
title="热量统计"
|
||||||
type="calories"
|
type="calories"
|
||||||
|
width="364px"
|
||||||
@onClick="handleOnClick"
|
@onClick="handleOnClick"
|
||||||
/>
|
/>
|
||||||
<bar-chart
|
<bar-chart
|
||||||
:data="weightSource"
|
:data="weightSource"
|
||||||
title="质量统计"
|
title="质量统计"
|
||||||
type="weight"
|
type="weight"
|
||||||
|
width="364px"
|
||||||
@onClick="handleOnClick"
|
@onClick="handleOnClick"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -103,6 +106,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.weakly_analyze_com_wrapper {
|
.weakly_analyze_com_wrapper {
|
||||||
|
width: 100%;
|
||||||
& > div:not(:nth-child(1)) {
|
& > div:not(:nth-child(1)) {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,12 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="recipes_build_info_view_wrapper">
|
<div class="recipes_build_info_view_wrapper">
|
||||||
<el-tabs v-model="activeName" @tab-click="handleOnTabClick">
|
<el-tabs v-model="activeName" @tab-click="handleOnTabClick">
|
||||||
<el-tab-pane label="食谱分析" name="0" v-if="showChart">
|
|
||||||
<div class="content">
|
|
||||||
<WeaklyAnalyzeCom v-if="analyseData.length > 1" />
|
|
||||||
<DailyAnalyzeCom v-else />
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="模板信息" name="1" v-if="!!temId">
|
<el-tab-pane label="模板信息" name="1" v-if="!!temId">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<TemplateInfoView :data="templateInfo" />
|
<TemplateInfoView :data="templateInfo" />
|
||||||
@@ -18,6 +12,12 @@
|
|||||||
<BodySignView :data="healthyData" v-else dev />
|
<BodySignView :data="healthyData" v-else dev />
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="食谱分析" name="0" v-if="showChart">
|
||||||
|
<div class="content">
|
||||||
|
<WeaklyAnalyzeCom v-if="analyseData.length > 1" />
|
||||||
|
<DailyAnalyzeCom v-else />
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -33,7 +33,7 @@ export default {
|
|||||||
name: "InfoView",
|
name: "InfoView",
|
||||||
data() {
|
data() {
|
||||||
const { temId } = this.$route.query;
|
const { temId } = this.$route.query;
|
||||||
return { temId, activeName: "0" };
|
return { temId, activeName: !!temId ? "1" : "2" };
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
HealthyView,
|
HealthyView,
|
||||||
@@ -68,6 +68,9 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
/deep/ :focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
.recipes_build_info_view_wrapper {
|
.recipes_build_info_view_wrapper {
|
||||||
.content {
|
.content {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
export function getProcessMenuData(menuData) {
|
export function getProcessMenuData(menuData) {
|
||||||
// const igdPlanData = {};
|
// console.log(menuData)
|
||||||
|
|
||||||
const menuList = menuData.reduce((arr, cur) => {
|
const menuList = menuData.reduce((arr, cur) => {
|
||||||
if (
|
if (
|
||||||
cur.dishesId > -1 &&
|
cur.dishesId > -1 &&
|
||||||
cur.name &&
|
cur.name &&
|
||||||
cur.igdList.length > 0 &&
|
cur.igdList.length > 0 &&
|
||||||
cur.type !== "0"
|
cur.type !== "0" &&
|
||||||
|
cur.detail.length > 0
|
||||||
) {
|
) {
|
||||||
arr.push({
|
arr.push({
|
||||||
id: cur.id,
|
id: cur.id,
|
||||||
@@ -42,5 +42,6 @@ export function getProcessMenuData(menuData) {
|
|||||||
}
|
}
|
||||||
return arr;
|
return arr;
|
||||||
}, []);
|
}, []);
|
||||||
|
// console.log(menuList);
|
||||||
return menuList;
|
return menuList;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user