天天看點

2021-11-20 任務一:健康評估功能的展示1.前期準備2.新增的功能:3.使用者展示頁面

1.前期準備

明确可以檢視什麼

  1. 中醫體質測評裡面的内容
  2. 體檢報告裡面醫生的評估結果:醫生的評估結果會在使用者的備注裡面說明出來

需要重新添加的功能

  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;
    }