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

<!-- OH压疮评估 -->
<template>
  <div class="patient-container">
    <patient-sidebar :id="patientID" defaultActive="5-4"></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;">OH压疮评估表</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">自主体位变换</td>
                            <td>
                                <div class="jiange">
                                    <span v-for="item in tiwei" class="rightjiange" @change="handleCheckedCitiesChange">
                                        <label><input type="checkbox" name="ball" :value="item"/>&nbsp;{{ item }}</label>
                                    </span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="start">病理性骨突出</td>
                            <td>
                                <div class="jiange">
                                    <span v-for="item in bingli" class="rightjiange" @change="handleCheckedCitiesChange">
                                        <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                                    </span>
                                </div>
                            </td>
                        </tr>
                        
                        <tr class="bg_color">
                            <td class="start">浮肿</td>
                            <td>
                                <div class="jiange">
                                    <span v-for="item in edema" class="rightjiange" @change="handleCheckedCitiesChange">
                                        <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                                    </span>
                                </div>
                            </td>
                        </tr>
                        
                        <tr>
                            <td class="start">关节痉挛</td>
                              <td>
                                <div class="jiange">
                                    <span v-for="item in guanjie" class="rightjiange" @change="handleCheckedCitiesChange">
                                        <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                                    </span>
                                </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="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> 
            
            <hr style="width: 100%;margin-top: 20px; border: none;height: 1px;background: #DCDFE6;"/>
            <div class="shuoming">
                <p>说明：</p>
                <p>1、本表适用于急症科、血液净化科等非病房科室。</p>
                <p>2、总分：10分，分值越大风险越高 ；1-3分为低危；4-6分为中危；7-10分为高危。</p>
                <p>3、病理性骨突出指骶尾部（或受压部位骨突出处）两侧均高于皮肤
                    <2cm为“无”；两侧均为2cm或一侧<2cm一侧2cm为“轻度/中度”；两侧均>2cm或一侧>2cm一侧2cm为“高度”。
                </p>
                <p>参考：北海道大学名授大浦武彦,堀田由浩. 利用OH 评估法进行压疮预防[M].东京：中央法规出版社,2005：11</p>
            </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,
            Totalpoints:null,
            ball:'',
            input:'',
            tableData:[],
            form:[],
            value:'',
            value1:'',
            options:[],
            tiwei:['能(0分)','不能完全自立(1.5分)','不能(3分)'],
            bingli:['无(0分)','轻度/中度(1.5分)','高度(3分)'],
            edema:['无(0分)','有(3分)'],
            guanjie:['无(0分)','有(1分)'],
            checkList:[],
            checkList1:[],
            checkList2:[],
            checkList3:[],
        }
    },
    methods:{
      handleCheckedCitiesChange(e){
        this.ball = e.target.value
        var jiequ =(this.ball.split('(')[1].split('分')[0]) * 1
        if(e.target.checked==true){
          this.Totalpoints=this.Totalpoints + jiequ
          console.log('22222 .slice(1)',this.ball);
          console.log('3333333333',this.Totalpoints);
          return this.Totalpoints
        }else{
          this.Totalpoints=this.Totalpoints-jiequ
          return this.Totalpoints
        }
        
      }
    }
}
</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-left: 20px;
            color: black;
        }
        .rightjiange{
          margin-right: 40px;
          font-size: 15px;
        }
        input{
            -webkit-appearance: checkbox;
        }
    }
</style>