2021-11-20 任务一：健康评估功能的展示_健康评估功能实现-CSDN博客

本文链接：https://blog.csdn.net/yyuggjggg/article/details/121440286

1.前期准备

明确可以查看什么

中医体质测评里面的内容
体检报告里面医生的评估结果：医生的评估结果会在用户的备注里面说明出来

需要重新添加的功能

健康管理师除了之前给用户设置的风险等级除外，还需要在用户的备注信息里面去添加备注内容，也就是通过查看体检报告和测评结果，二者共同对用户的身体健康与建议写入备注信息中

2.新增的功能：

通过在风险测评里面点击编辑功能，可以对用户的备注信息进行编辑

前台代码

member-risk.html

<a type="primary" size="mini" @click="handleAssess(scope.row)">评估</a>

<!-- 添加评估弹出 -->
                    <div class="add-form">
                        <el-dialog title="新增检查项" :visible.sync="dialogFormVisible">
                            <el-form ref="dataAddForm" :model="formData" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="姓名" prop="name">
                                            {{this.formData.name}}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="评价或建议" prop="name">
                                            <el-input v-model="formData.suggestion" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleEditSuggestion()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>

//套餐评估界面
                handleAssess(row){
                    //弹出编辑窗口
                    this.dialogFormVisible = true;
                    //回显数据，通过发送ajax请求根据id查询当前检查项数据，进行回显
                    axios.get("/assess/findById.do?id="+row.id).then((res)=>{
                        //判断这个controller是否执行成功
                        if (res.data.flag){
                            //进行回显，基于vue的数据绑定实现，可以查看上面的内容可以发现都是双向绑定formData内容的
                            this.formData = res.data.data;
                        }else {
                            //查询失败，弹出提示
                            this.$message.error(res.data.message);
                        }
                    }).catch((r)=>{
                        this.showMessage(r);
                    });
                },
                handleEditSuggestion(){
                    //表单校验通过，可以提交数据
                    axios.post("/member/editRemark.do",this.formData).then((res)=>{
                        if (res.data.flag){
                            //controller操作成功
                            this.$message({
                                type:'success',
                                message:res.data.message
                            });
                        }else {
                            //执行失败
                            this.$message.error(res.data.message);
                        }
                    }).finally(()=>{
                        //finally不管成功还是失败都要调用分页查询方法
                        this.findPage();
                        //隐藏编辑窗口
                        this.dialogFormVisible = false;
                    });
                }

后台代码

MemberController


    //编辑检查项
//    @PreAuthorize("hasAuthority('CHECKITEM_EDIT')")//权限校验
    @RequestMapping("/editRemark")//使其那个被访问到
    public Result editRemark(@RequestBody Assess assess){
        //使用try。。catch。。进行成功还是失败判断
        try{
            memberService.editRemark(assess);//如果调用失败就进入catch，没有失败就
        }catch (Exception e){
            //证明调用失败
            e.printStackTrace();
            return new Result(false, MessageConstant.EVALUATE_FAIL);
        }
        //证明成功
        return new Result(true, MessageConstant.EVALUATE_SUCCESS);
    }

MemberSerive

@Override
    public void editRemark(Assess assess) {
        System.out.println("assess != null:"+assess != null);
        System.out.println(assess);
        if (assess != null){
            if (assess.getSuggestion() != null){
                String suggestion = assess.getSuggestion();
                memberDao.editRemark(assess);
            }
        }
    }

3.用户展示页面

前台代码

health-risk.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../img/asset-favico.ico">
        <title>客户体检信息健康管理系统</title>
        <link rel="stylesheet" href="../css/page-health-index.css" />
        <link rel="stylesheet" href="../css/page-health-login.css" />
        <link rel="stylesheet" href="../plugins/elementui/index.css" />
        <script src="../plugins/jquery/dist/jquery.min.js"></script>
        <script src="../plugins/healthmobile.js"></script>
        <script src="../plugins/vue/vue.js"></script>
        <script src="../plugins/vue/axios-0.18.0.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script>
            var phoneNumber = getUrlParam("phoneNumber");//根据请求URL中的参数名称获取对应的值
        </script>
        <style>
            /* CSS Document */
            .tabtop13 {
                margin-top: 13px;
            }
            .tabtop13 td{
                background-color:#ffffff;
                height:25px;
                line-height:150%;
            }
            .font-center{ text-align:center}
            .btbg{background:#e9faff !important;}
            .btbg1{background:#f2fbfe !important;}
            .btbg2{background:#f3f3f3 !important;}
            .biaoti{
                font-family: 微软雅黑;
                font-size: 26px;
                font-weight: bold;
                border-bottom:1px dashed #CCCCCC;
                color: #255e95;
            }
            .titfont {

                font-family: 微软雅黑;
                font-size: 16px;
                font-weight: bold;
                color: #255e95;
                background-color:#e9faff;
            }
            .tabtxt2 {
                font-family: 微软雅黑;
                font-size: 14px;
                font-weight: bold;
                text-align: right;
                padding-right: 10px;
                color:#327cd1;
            }
            .tabtxt3 {
                font-family: 微软雅黑;
                font-size: 14px;
                padding-left: 15px;
                color: #000;
                margin-top: 10px;
                margin-bottom: 10px;
                line-height: 20px;
            }
        </style>
    </head>
    <body data-spy="scroll" data-target="#myNavbar" data-offset="150">
        <div id="app">
            <!-- 页面头部 -->
            <div class="top-header">
                <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
                <span class="center">客户体检信息健康管理系统</span>
                <span class="f-right"><i class="icon-more"></i></span>
            </div>
            <!-- 页面内容 -->
            <div class="contentBox">
                <div class="list-column2">
                    <h2>姓名：小杨</h2>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                            <td align="center" class="biaoti" height="60">健康评估</td>
                        </tr>
                    </table>
                    <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">

                        <tr>
                            <td width="20%" rowspan="9" class="btbg1 font-center">中医辨识体质分析</td>
                            <td width="10%"  class="btbg2">平和质</td>
                            <td width="15%">{{assessList.calmQuality}}</td>
                            <td width="15%">养生要点</td>
                            <td>
                                1.饮食有节制，不要常吃过冷过热或不干净的食物, 粗细粮食要合理搭配;
                                <br>2.养成良好的作息习惯。
                            </td>
                        </tr>
                        <tr>
                            <td class="btbg2">气虚质</td>
                            <td >{{assessList.qiDeficiencyQuality}}</td>
                            <td width="15%">养生要点</td>
                            <td>
                                1.气功锻炼:重在练气。<br>
                                2.中成药:补中益气丸、香砂六君丸、参苓白术丸、 玉屏风丸、生脉口服液(生脉饮)。 <br>
                                3.药膳调摄:多食补气之品。
                            </td>
                        </tr>
                        <tr>
                            <td class="btbg2">阳虚质</td>
                            <td >{{assessList.yangDeficiencyQuality}}</td>
                            <td width="15%">养生要点</td>
                            <td>
                                1.环境调摄:避寒就温。<br>
                                2.体育锻炼:加强体育锻炼，使动则生阳。<br>
                                3.中成药:金匮肾气丸、桂附地黄丸、附子理中丸、桂附理中 丸、还少丹、苁蓉通便口服液等。<br>
                                4.药膳调摄:选用补阳祛寒、温养肝肾之品。
                            </td>
                        </tr>
                        <tr>
                            <td class="btbg2">阴虚质</td>
                            <td >{{assessList.yinDeficiencyQuality}}</td>
                            <td width="10%">养生要点</td>
                            <td>
                                1.环境调摄:注意秋冬养阴，夏季避暑。<br>
                                2.体育锻炼:不宜过激活动，着重咽津功法。<br>
                                3.中成药:六味地黄丸、杞菊地黄丸、知柏地黄丸、大补阴丸<br>
                                等。
                                4.药膳调摄:服食滋阴清热、滋养肝肾之品，少吃葱、姜、蒜、 韭、薤、椒等辛辣食物。
                            </td>
                        </tr>
                        <tr>
                            <td class="btbg2">痰湿质</td>
                            <td >{{assessList.phlegmDampnessQuality}}</td>
                            <td width="10%">养生要点</td>
                            <td>
                                1.环境调摄:避潮湿。<br>
                                2.体育锻炼:长期坚持体育锻炼。因体形肥胖，易于困倦，
                                故应根据自己的具体情况循序渐进，长期坚持运动锻炼。<br>
                                3.中成药:橘红丸、二陈丸、香砂六君丸、参苓白术丸、藿
                                香正气胶囊等。<br>
                                4.药膳调摄:食宜清淡，调补肺、脾、肾，驱除痰湿，不宜
                                肥甘。
                            </td>
                        </tr>
                        <tr>
                            <td class="btbg2">湿热质</td>
                            <td >{{assessList.dampHeatQuality}}</td>
                            <td width="10%">养生要点</td>
                            <td>
                                1.精神调养:静养，防止发怒冲动。<br>
                                2.体育锻炼:积极锻炼，散发余热。适合中长跑、游泳、爬山、
                                各种球类、武术等运动。<br>
                                3.中成药:一清胶囊、清开灵口服液、鲜竹沥口服液、黄连上
                                清丸、湿毒清、龙胆泻肝丸等。<br>
                                4.药膳调摄:宜清热化湿之品，少食辛辣燥烈与肥甘厚味。
                            </td>
                        </tr>
                        <tr>
                            <td class="btbg2">血瘀质</td>
                            <td >{{assessList.bloodStasisQuality}}</td>
                            <td width="10%">养生要点</td>
                            <td>
                                1.体育锻炼:多做有利于心脏血脉的活动。如各种舞蹈、步
                                行健身法等。<br>
                                2.精神调养:培养乐观情绪。<br>
                                3.中成药:四物合剂、八珍益母丸、血府逐瘀口服液、复方
                                丹参滴丸、银杏叶片等。<br>
                                4.药膳调摄:可食活血、化瘀、养血之品，少食肥肉等滋腻
                                之品。
                            </td>
                        </tr>
                        <tr>
                            <td class="btbg2">气郁质</td>
                            <td >{{assessList.qiStagnationQuality}}</td>
                            <td width="10%">养生要点</td>
                            <td>
                                1.精神调摄:多参加集体活动、文娱活动，培养开朗豁达的
                                性格。<br>
                                2.体育锻炼:多参加体育锻炼及旅游活动。<br>
                                3.中成药:逍遥丸、加味逍遥丸、四磨汤口服液、气滞胃痛
                                颗粒等。<br>
                                4.药膳调摄:少量饮酒以活动血脉，多食行气、疏肝、解郁
                                之中药和食物。
                            </td>
                        </tr>
                        <tr>
                            <td class="btbg2">特禀质</td>
                            <td >{{assessList.specialIntrinsicQuality}}</td>
                            <td width="10%">养生要点</td>
                            <td>
                                暂无
                            </td>
                        </tr>
                    </table>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                            <td align="center" class="biaoti" height="60">健康管理师建议</td>
                        </tr>
                    </table>

                    <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
                        <tr>
                            <td width="20%" rowspan="1" class="btbg1 font-center">存在风险</td>
                            <td class="btbg2">{{assessList.evaluate}}</td>
                        </tr>
                        <tr>
                            <td width="20px" rowspan="3" class="btbg1 font-center">建议</td>
                            <td width="80%">
                            {{assessList.suggestion}}</td>

                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 页面 css js -->
        <script src="../plugins/vue/vue.js"></script>
        <script src="../plugins/vue/axios-0.18.0.js"></script>
        <!--<script src="../js/page-health-order.js"></script>-->
        <script>
            var vue = new Vue({
                el:'#app',
                data:{
                    phoneNumber:this.phoneNumber,
                    // fileNames:null,
                    assessList:{}//模型数据，用于展示
                },
                methods:{
                    handleShow(fileName,orderStatus){
                        if (fileName !=null){
                            window.location.href = 'http://r1mmj5zj3.hn-bkt.clouddn.com/'+fileName;
                        }else {
                            alert("报告未上传");
                        }
                    }
                },
                created (){
                    // alert(this.phoneNumber)
                    //发送ajax请求，获取所有的套餐数据，赋值给setmealList模型数据，用于页面展示
                    axios.get("/massess/getAssessByTelephone.do?phoneNumber="+phoneNumber).then((res) => {
                        if(res.data.flag){
                            //查询成功，给模型数据赋值
                            this.assessList = res.data.data;
                        }else{
                            //查询失败，弹出提示信息
                            this.$message.error(res.data.message);
                        }
                    });
                }
            });
        </script>
    </body>
</html>

后台代码

MAssessController

//查询当前会员的评估信息
    @RequestMapping("/getAssessByTelephone")
    public Result getAssessByTelephone(String phoneNumber){
        try{
            Assess assess = assessService.getAssessByTelephone(phoneNumber);
            return new Result(true, MessageConstant.GET_ASSESS_SUCCESS,assess);
        }catch (Exception e){
            e.printStackTrace();
            return new Result(false, MessageConstant.GET_ASSESS_FAIL);
        }
    }

AssessServiceImpl

 @Override
    public Assess getAssessByTelephone(String phoneNumber) {
        //获取当前号码的会员主键id
        Member member = memberDao.findByTelephone(phoneNumber);
        Assess assess = null;
        if (member != null){
            if (member.getId() != null){
                Integer memberId = member.getId();
                //通过主键id获取t_assess表中的所有数据
                assess = assessDao.findByMemberId(memberId);
            }
            if (member.getRemark() != null){
                assess.setSuggestion(member.getRemark());
            }
        }

        return assess;
    }