添加备注,柱状图标线

This commit is contained in:
huangdeliang
2021-03-03 19:25:03 +08:00
parent b8fad6218f
commit 96a405a314
8 changed files with 271 additions and 98 deletions

View File

@ -1,7 +1,15 @@
<template>
<div>
<div class="body_sign_view_wrapper">
<div>
<h2>{{ this.data.name }}</h2>
<!-- <el-button
v-if="dev"
size="mini"
type="primary"
class="remark_btn"
@click="handleOnRemark"
>修改备注</el-button
> -->
<div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
<text-info
v-for="con in info"
@ -12,76 +20,136 @@
/>
</div>
</div>
<!-- 备注弹窗 -->
<el-dialog title="修改备注" :visible.sync="open" width="480px">
<el-input
type="textarea"
v-model="data.remark"
rows="6"
placeholder="请输入备注信息"
maxlength="300"
show-word-limit
/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit"> </el-button>
<el-button @click="onClosed"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import TextInfo from "@/components/TextInfo";
import { updateHealthy } from "@/api/custom/healthy";
export default {
name: "BodySignView",
props: ["data"],
props: {
data: {
type: Object,
default: {},
},
dev: {
type: Boolean,
default: false,
},
},
components: {
"text-info": TextInfo,
},
data() {
return {
basicInfo: [
[
{ title: "性别", value: "sex" },
{ title: "年龄", value: "age" },
],
[
{ title: "电话", value: "phone" },
{ title: "地域", value: "position" },
],
[
{ title: "身高", value: "tall" },
{ title: "体重", value: "weight" },
],
[
{ title: "工作职业", value: "vocation" },
{ title: "上夜班", value: "night" },
],
[
{ title: "熬夜失眠", value: "staylate" },
{ title: "运动情况", value: "walk" },
],
[
{ title: "浑身乏力", value: "weakness" },
{ title: "经常运动", value: "motion" },
],
[
{ title: "睡觉时间", value: "sleepTime" },
{ title: "起床时间", value: "getupTime" },
],
[
{ title: "饮食方式", value: "makeFoodType" },
{ title: "饮食特点", value: "makeFoodTaste" },
],
[{ title: "便秘", value: "constipation" }],
[{ title: "饮食备注", value: "remarks" }],
[{ title: "减脂反弹", value: "rebound" }],
[{ title: "意识到生活习惯是减脂关键", value: "crux" }],
[{ title: "减脂遇到的困难", value: "difficulty" }],
[{ title: "湿气数据", value: "moistureDate" }],
[{ title: "气血数据", value: "bloodData" }],
[{ title: "病史", value: "signStr" }],
[{ title: "忌口或过敏源", value: "dishesIngredientId" }],
[{ title: "方便沟通时间", value: "connectTime" }],
[{ title: "备注", value: "remark" }],
const basicInfo = [
[
{ title: "性别", value: "sex" },
{ title: "年龄", value: "age" },
],
[
{ title: "电话", value: "phone" },
{ title: "地域", value: "position" },
],
[
{ title: "身高", value: "tall" },
{ title: "体重", value: "weight" },
],
[
{ title: "工作职业", value: "vocation" },
{ title: "上夜班", value: "night" },
],
[
{ title: "熬夜失眠", value: "staylate" },
{ title: "运动情况", value: "walk" },
],
[
{ title: "浑身乏力", value: "weakness" },
{ title: "经常运动", value: "motion" },
],
[
{ title: "睡觉时间", value: "sleepTime" },
{ title: "起床时间", value: "getupTime" },
],
[
{ title: "饮食方式", value: "makeFoodType" },
{ title: "饮食特点", value: "makeFoodTaste" },
],
[{ title: "便秘", value: "constipation" }],
[{ title: "饮食备注", value: "remarks" }],
[{ title: "减脂反弹", value: "rebound" }],
[{ title: "意识到生活习惯是减脂关键", value: "crux" }],
[{ title: "减脂遇到的困难", value: "difficulty" }],
[{ title: "湿气数据", value: "moistureDate" }],
[{ title: "气血数据", value: "bloodData" }],
[{ title: "病史", value: "signStr" }],
[{ title: "忌口或过敏源", value: "dishesIngredientId" }],
[{ title: "方便沟通时间", value: "connectTime" }],
];
if (this.dev) {
basicInfo.splice(3, 0, [{ title: "基础代谢BMR", value: "basicBMR" }]);
basicInfo.splice(4, 0, [
{ title: "不运动总热量", value: "notSportHeat" },
]);
basicInfo.splice(basicInfo.length, 0, [
{ title: "备注", value: "remark" },
]);
}
return {
basicInfo,
open: false,
};
},
methods: {
handleOnRemark() {
this.open = true;
},
onClosed() {
this.open = false;
},
submit() {
const { id, remark } = this.data;
updateHealthy({ id, remark }).then((res) => {
if (res.code === 200) {
this.$message.success("修改成功");
this.open = false;
}
});
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
.msg-info {
display: flex;
margin-bottom: 8px;
<style lang="scss" scoped>
.body_sign_view_wrapper {
.remark_btn {
position: absolute;
top: 36px;
right: 16px;
}
.msg-info {
display: flex;
margin-bottom: 8px;
.text-info-extra {
margin-bottom: 2px;
.text-info-extra {
margin-bottom: 2px;
}
}
}
</style>

View File

@ -1,7 +1,15 @@
<template>
<div>
<div class="health_view_wrapper">
<div>
<h2>{{ this.data.name }}</h2>
<el-button
v-if="dev"
size="mini"
type="primary"
class="remark_btn"
@click="handleOnRemark"
>修改备注</el-button
>
<div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
<text-info
v-for="con in info"
@ -28,35 +36,70 @@
</div>
</el-collapse-item>
</el-collapse>
<!-- 备注弹窗 -->
<el-dialog title="修改备注" :visible.sync="open" width="480px">
<el-input
type="textarea"
v-model="data.remark"
rows="6"
placeholder="请输入备注信息"
maxlength="300"
show-word-limit
/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit"> </el-button>
<el-button @click="onClosed"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import TextInfo from "@/components/TextInfo";
import { updateHealthy } from "@/api/custom/healthy";
export default {
name: "HealthyView",
props: ["data"],
props: {
data: {
type: Object,
default: {},
},
dev: {
type: Boolean,
default: false,
},
},
components: {
"text-info": TextInfo,
},
data() {
return {
basicInfo: [
[
{ title: "调理项目", value: "conditioningProject" },
{ title: "电话", value: "phone" },
],
[
{ title: "性别", value: "sex" },
{ title: "年龄", value: "age" },
],
[
{ title: "身高", value: "tall" },
{ title: "体重", value: "weight" },
],
[{ title: "地域", value: "position" }],
[{ title: "备注", value: "remark" }],
const basicInfo = [
[
{ title: "调理项目", value: "conditioningProject" },
{ title: "电话", value: "phone" },
],
[
{ title: "性别", value: "sex" },
{ title: "年龄", value: "age" },
],
[
{ title: "身高", value: "tall" },
{ title: "体重", value: "weight" },
],
[{ title: "地域", value: "position" }],
];
if (this.dev) {
basicInfo.splice(3, 0, [{ title: "基础代谢BMR", value: "basicBMR" }]);
basicInfo.splice(4, 0, [
{ title: "不运动总热量", value: "notSportHeat" },
]);
basicInfo.splice(6, 0, [{ title: "备注", value: "remark" }]);
}
return {
open: false,
basicInfo,
healthyInvestigate: [
{
title: "减脂经历评估",
@ -180,15 +223,40 @@ export default {
],
};
},
methods: {
handleOnRemark() {
this.open = true;
},
onClosed() {
this.open = false;
},
submit() {
const { id, remark } = this.data;
updateHealthy({ id, remark }).then((res) => {
if (res.code === 200) {
this.$message.success("修改成功");
this.open = false;
}
});
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
.msg-info {
display: flex;
margin-bottom: 8px;
<style lang="scss" scoped>
.health_view_wrapper {
.remark_btn {
position: absolute;
top: 36px;
right: 16px;
}
.text-info-extra {
margin-bottom: 2px;
.msg-info {
display: flex;
margin-bottom: 8px;
.text-info-extra {
margin-bottom: 2px;
}
}
}
</style>

View File

@ -4,7 +4,7 @@
<el-form-item label="" prop="remark" >
<el-input
type="textarea"
:rows="5"
:rows="6"
maxlength="300"
show-word-limit
placeholder="请输入备注"

View File

@ -471,6 +471,16 @@ const moduleObj = {
//健康信息处理,将数组转为字符串
export function dealHealthy(customerHealthy) {
customerHealthy.basicBMR = (
(10 * customerHealthy.weight) / 2 +
6.25 * customerHealthy.tall -
5 * customerHealthy.age -
customerHealthy.sex * 161
).toFixed(1);
customerHealthy.notSportHeat = (customerHealthy.basicBMR * 1.3).toFixed(1);
customerHealthy.basicBMR += "千卡";
customerHealthy.notSportHeat += "千卡";
needAttrName.forEach(name => {
if (customerHealthy.hasOwnProperty(name)) {
customerHealthy[name] = (String(customerHealthy[name]) || "")

View File

@ -279,7 +279,7 @@
controls-position="right"
@change="handleInputChange"
:min="0"
:step="50"
:step="5"
/>
</template>
</el-table-column>
@ -298,13 +298,14 @@
label="碳水/100g"
align="center"
/>
<el-table-column label="热量/100g" align="center">
<el-table-column label="热量" align="center">
<template slot-scope="scope">
{{
`${(
scope.row.proteinRatio * 4 +
scope.row.fatRatio * 9 +
scope.row.carbonRatio * 4
((scope.row.proteinRatio * scope.row.weight) / 100) *
4 +
((scope.row.fatRatio * scope.row.weight) / 100) * 9 +
((scope.row.carbonRatio * scope.row.weight) / 100) * 4
).toFixed(1)} kcal`
}}
</template>
@ -753,21 +754,25 @@ export default {
},
getSummaries(param) {
const { columns, data } = param;
console.log(data);
return columns.reduce(
(arr, cur, idx) => {
if (idx > 1) {
if (idx === 6) {
// 备注
return arr;
arr[6] = arr[3] * 4 + arr[4] * 9 + arr[5] * 4 + ' kcal';
} else {
arr[idx] = data.reduce((acc, dAcc) => {
if (idx === 2) {
return acc + parseFloat(dAcc.weight);
}
return parseFloat(
(
acc +
(dAcc[cur.property] * parseFloat(dAcc.weight)) / 100
).toFixed(1)
);
}, 0);
}
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;
},

View File

@ -30,6 +30,10 @@ export default {
type: Array,
default: [],
},
max: {
type: Number,
default: 0,
},
},
data() {
return {
@ -64,6 +68,7 @@ export default {
this.updateChart(this.data.length > 0 ? this.data : {});
},
updateChart(source) {
console.log(this.max);
this.chart.clear();
this.chart.setOption({
title: {
@ -112,7 +117,7 @@ export default {
grid: {
top: 55,
left: 20,
right: 20,
right: 50,
bottom: 10,
containLabel: true,
},
@ -135,6 +140,13 @@ export default {
y: dim,
x: 0,
},
markLine: {
data: [{ name: "BMR", yAxis: this.max - 400 }],
symbol: "none",
lineStyle: {
color: "red",
},
},
itemStyle: {
borderWidth: 2,
borderColor: "#fff",

View File

@ -58,6 +58,16 @@
:data="data"
height="170px"
width="500px"
:max="
healthyData.basicBMR
? parseFloat(
healthyData.basicBMR.substring(
0,
healthyData.basicBMR.indexOf('千卡')
)
)
: 0
"
/>
<PieChart
v-if="data.length === 1"
@ -89,7 +99,7 @@ export default {
},
props: ["collapse", "data"],
computed: {
...mapState(["recipesId", "reviewStatus"]),
...mapState(["recipesId", "reviewStatus", "healthyData"]),
},
methods: {
handleCollapseClick() {

View File

@ -11,8 +11,8 @@
</div>
<div class="right" v-loading="healthDataLoading">
<TemplateInfoView v-if="!!temId" :data="templateInfo" />
<HealthyView :data="healthyData" v-else-if="healthyDataType === 0" />
<BodySignView :data="healthyData" v-else />
<HealthyView :data="healthyData" v-else-if="healthyDataType === 0" dev />
<BodySignView :data="healthyData" v-else dev />
</div>
</div>
</template>