Vue_New/src/xt_pages/user/evaluationtool/nourishmentAssessment.vue

<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-8"></patient-sidebar>
        <div>
            <div class="patient-app-container advice-container app-container">
                <div class='content_top' style="width: 100%;margin-bottom: 20px;">
                    <div style="font-size: 20px;text-align: center;">NRS-2002</div>
                    <div>
                        <el-button>历史评分</el-button>
                    </div>
                </div>

                <div>
                    <table class="table" border="1" style="width: 100%;margin-bottom: 20px;">
                        <thead>
                            <tr>
                                <th colspan="2" style="text-align: left;padding-left: 5px;">疾病相关评分</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr class="bg_color">
                            <td class="start yingyang">0级</td>
                             
                            <td class="saoyang wenzi_color">营养需要量无增加</td>
                        </tr>
                        <tr>
                            <td class="start">1级</td>
                           
                            <td class="saoyang wenzi_color">
                                营养需要量轻度增加：
                                <div >
                                    <span v-for="item in qingdu" class="rightjiange">
                                        <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;{{ item }}</label>
                                    </span>
                                    <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                        <el-input v-model="input" placeholder="" style="width: 120px;"></el-input>
                                    </label>
                                </div>
                            </td>                          
                        </tr>
                        <tr class="bg_color">
                            <td class="start">2级</td>
                           
                            <td class="saoyang wenzi_color">
                                营养需要量中度增加：
                                <div >
                                    <span v-for="item in zhdu" class="rightjiange">
                                        <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;{{ item }}</label>
                                    </span>
                                    <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                        <el-input v-model="input" placeholder="" style="width: 120px;"></el-input>
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="start">3级</td>
                            <td class="saoyang wenzi_color">
                                营养需要量重度增加：
                                <div >
                                    <span v-for="item in zhongsdu" class="rightjiange">
                                        <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;{{ item }}</label>
                                    </span>
                                    <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                        <el-input v-model="input" placeholder="" style="width: 120px;"></el-input>
                                    </label>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <table class="table" border="1" style="width: 100%;margin-bottom: 20px;">
                        <thead>
                            <tr>
                                <th colspan="2" style="text-align: left;padding-left: 5px;">营养受损评分</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr class="bg_color">
                            <td class="start yingyang">0级</td>
                            
                            <td class="saoyang wenzi_color" >无营养受损</td>
                        </tr>
                        <tr>
                            <td class="start">1级</td>
                           
                            <td class="saoyang">
                                <div >
                                    <span class="rightjiange">
                                        <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                            3个月内体重下降>5%
                                        </label>
                                        <label style="margin-left: 40px;"><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                            一周内进食量较从前减少25%-50%
                                        </label>
                                    </span>
                                    
                                </div>                             
                            </td>                          
                        </tr>
                        <tr class="bg_color">
                            <td class="start">2级</td>
                            
                            <td class="saoyang">
                                <div >
                                    <span class="rightjiange">
                                        <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                            2个月内体重下降>5%
                                        </label>
                                        <label style="margin-left: 40px;"><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                            一周内进食量较从前减少50%-75%
                                        </label>
                                    </span>
                                    
                                </div>  
                            </td>
                        </tr>
                        <tr>
                            <td class="start">3级</td>
                            <td class="saoyang"> 
                                <div >
                                    <span class="rightjiange">
                                        <label><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                            1个月内体重下降>5%
                                        </label>
                                        <label style="margin-left: 40px;"><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                            一周内进食量较从前减少75%-100%
                                        </label>
                                        <label style="margin-left: 40px;"><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                            体重指数（BMI）<18.5
                                        </label>
                                        <label style="margin-left: 40px;"><input type="checkbox" name="ball" value="volleyball" />&nbsp;
                                            血蛋白<30g/L（得不到准确的BNI值时用白蛋白替代）
                                        </label>
                                    </span>
                                    
                                </div>                          
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <table class="table" border="1" style="width: 100%;">
                        <thead>
                            <tr>
                                <th colspan="2" style="text-align: left;padding-left: 5px;">年龄评分</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="bg_color ">
                                <td class="start yingyang">0级</td>
                                <td class="saoyang" style="font-size: 15px;">≤70岁</td>
                            </tr>
                            <tr>
                                <td class="start yingyang">1级</td>
                                <td class="saoyang" style="font-size: 15px;">＞70岁</td>                          
                            </tr>
                       
                        </tbody>
                    </table>
                </div>
                <div class="content_top" style="margin: 20px 0px;">
                    <div>
                        <div class="bottoms">
                            <span>营养风险总评分:</span>
                            <el-input v-model="input" placeholder="请输入内容" style="width: 100px;"></el-input>分 (疾病相关评分+营养受损评分+年龄评分)
                        </div>

                        <div class="bottoms">
                            <span>评估日期:</span>
                            <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期"
                                :clearable="false"
                                style="width: 150px;">
                            </el-date-picker>
                        </div>

                        <div class="bottoms">
                            <span>评估人:</span>
                            <el-select v-model="value" placeholder="请选择" >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                style="width:150px;">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div>
                        <el-button type="primary">确定</el-button>
                    </div>
                </div> 
                <p>说明：总分 ≥3分   通知医生</p>


            </div>
        </div>
        
    </div>
</template>
<script>
import PatientSidebar from '../components/PatientSidebar.vue'
export default {
    components:{
      PatientSidebar
    },
    data(){
        return{
            patientID:0,
            checkList:[],
            options:[],
            value:'',
            value1:'',
            input:'',
            qingdu:['骸骨折','慢性疾病急性发作或有','COPD','血液透析','肝硬化','一般恶性肿瘤患者','糖尿病'],
            zhdu:['腹部大手术','脑卒中','重度肺炎','血液恶性肿瘤'],
            zhongsdu:['颅脑损伤','骨髓移植','大于APACHE分的ICU患者']
        }
    }
}
</script>
<style lang="scss" scoped>
    .content_top{
      display: flex;
      justify-content: space-between; 
    }
    .table{
        border: 1px solid #DCDFE6;
        border-collapse:collapse;
        border-spacing: 0;
        thead th{
            background: #0077ff9f;
            color: white;
            text-align: center;
            height: 40px;
        }
        tbody td{
           height: 40px;
        }
        .start{
            text-align: center;
        }
        .bing{
            width: 150px;
            text-align: center;
        }
        .bg_color{
            background: rgb(243, 240, 240);
        }
        .jiange{
            margin-left: 20px;
            color: black;
        }
        .rightjiange{
          margin-right: 40px;
          font-size: 15px;
        }
        input{
            -webkit-appearance: checkbox;
        }
        .saoyang{
             padding: 5px;
        }
        .yingyang{
            width: 8%;
        }
    }
    .bottoms{
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px; 
    }
</style>