elizebeth/src/xt_pages/user/evaluationtool/Muscleforce.vue

<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-14"></patient-sidebar>
        <div>
            <div class="patient-app-container advice-container app-container">
                <div class="content_top">
                    <!-- 左 -->
                    <div style="width: 58%;">
                        <div style="margin-bottom: 20px;"><el-button type="primary">新增</el-button></div>
                        <div style="font-size: 20px;margin-bottom: 20px;">肌力评估表</div>
                        <div style="width: 100%;">
                            <table class="table" border="1" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th style="width: 150px;">级别</th>
                                        <th>分值</th>
                                    </tr>
                                </thead>
                                <!-- <tbody>
                                    <tr class="bg_color">
                                        <td class="start">0级</td>
                                        <td>
                                            <div class="jiange">
                                                <label style="font-size: 15px;"><input type="checkbox" name="ball" value="volleyball"/>&nbsp; 肌肉完全不收缩</label>
                                            </div>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td class="start">1级</td>
                                        <td>
                                            <div class="jiange">
                                                <label style="font-size: 15px;"><input type="checkbox" name="ball" value="volleyball" />&nbsp; 可见肌肉收缩但无肢体运动</label>
                                            </div>
                                        </td>
                                    </tr>
                                   
                                    <tr class="bg_color">
                                        <td class="start">2级</td>
                                        <td>
                                            <div class="jiange">
                                                <label style="font-size: 15px;"><input type="checkbox" name="ball" value="volleyball"/>
                                                    &nbsp;肢体能在床上移动，但不能抬离床面，即不能对抗地心引力
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                   
                                    <tr >
                                        <td class="start">3级</td>
                                        <td>
                                            <div class="jiange">
                                                <label style="font-size: 15px;"><input type="checkbox" name="ball" value="volleyball" />
                                                    &nbsp;肢体能抬离床面，克服地心引力做随意运动，但不能对抗外加阻力
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                    
                                    <tr class="bg_color">
                                        <td class="start">4级</td>
                                        <td>
                                            <div class="jiange">
                                                <label style="font-size: 15px;"><input type="checkbox" name="ball" value="volleyball" />
                                                    &nbsp;能在一般的外加阻力下作运动，但力量较正常弱
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                   
                                    <tr>
                                        <td class="start">5级</td>
                                        <td>
                                            <div class="jiange">
                                                <label style="font-size: 15px;"><input type="checkbox" name="ball" value="volleyball" />
                                                    &nbsp;正常肌力
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody> -->
                              <tbody>
                                <tr v-for="(item,index) in shuju" :key="index" :style="{'background':(index==0 || index % 2==0) ?'rgb(243, 240, 240)':'white'}">
                                  <td class="start">{{ item.title }}</td>
                                  <td>
                                    <div class="jiange">
                                      <label style="font-size: 15px;"><input type="checkbox" name="ball" :value="item.value" @change="handleCheckedCitiesChange"/>&nbsp;{{ item.value }}</label>
                                    </div>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                        </div>
                        
                        <div style="vertical-align: top;  margin: 10px 0px; position: relative;">
                            <span style="position: relative; top: -55px;">护理措施：</span>
                            <div style="margin-top: 20px;display: inline-block; width: 90%;">
                                <el-input maxlength="200" type = "textarea" :rows="3" v-model="input" placeholder="输入护理措施，200字以内" ></el-input>
                            </div>
                        </div>
                        
                        <div>
                            <div class="bottoms">
                                <span>级别:</span>
                                <el-input v-model="Mus_Totalpoints" 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>
                    <!-- 虚线 -->
                    <div style="height: 100vh; width: 1px; border-left:1px dashed #DCDFE6 ;"></div>
                    <!-- 右 -->
                    <div style="width: 38%;">
                        <div style="font-size: 20px; margin-bottom: 20px;">评估历史记录</div>
                        <div style="width: 100%;">
                            <el-table
                            :data="tableData"
                            stripe
                            border
                            :header-cell-style="{
                                background: '#0077ff9f',color:'white'}"
                            style="width: 100%">
                                <el-table-column
                                prop="date"
                                label="评估日期"
                                width="180">
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="总分"
                                >
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="评估人"
                                >
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
       
    </div>
</template>
<script>
import PatientSidebar from '../components/PatientSidebar.vue'
export default {
    components:{
      PatientSidebar
    },
    data(){
      return{
        patientID:0,
        checkList:'',
        checkList1:'',
        checkList2:'',
        value1:'',
        value:'',
        input:'',
        Mus_Totalpoints:'',
        options:[],
        tableData:[],
        shuju:[
          {title:'0级',value:'肌肉完全不收缩'},
          {title:'1级',value:'可见肌肉收缩但无肢体运动'},
          {title:'2级',value:'肢体能在床上移动，但不能抬离床面，即不能对抗地心引力'},
          {title:'3级',value:'肢体能抬离床面，克服地心引力做随意运动，但不能对抗外加阻力'},
          {title:'4级',value:'能在一般的外加阻力下作运动，但力量较正常弱'},
          {title:'5级',value:' 正常肌力'},
        ]
      }
    },
    methods:{
      handleCheckedCitiesChange(e){
        for(let i=0;i<this.shuju.length;i++){
          if(e.target.value == this.shuju[i].value ){
           const arr= (this.shuju[i].title.split('级')[0])
           if(e.target.checked == true){
            this.Mus_Totalpoints = arr
           }else{
            this.Mus_Totalpoints =0
           }
           console.log('33333',arr);
          }
        }
      }
    }
}
</script>
<style lang="scss" scoped>
    .content_top{
      display: flex;
      justify-content: space-between; 
    }
    .bottoms{
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px;  
    }
    .shuoming p{
      margin-top: 5px;
      color: rgb(167, 165, 165);
    }
    .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: 5px 0px 5px 20px;
            color: black;
        }
        input{
            -webkit-appearance: checkbox;
        }
    }
</style>