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

<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-13"></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;">Glasgow昏迷评分量表</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">睁眼反应（E）</td>
                                        <td>
                                            <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                                                <span v-for="item in zhengyan" class="ttbwzz-type-a" @change="handleCheckedCitiesChange">
                                                    <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td class="start">言语反映 （V）</td>
                                        <td>
                                            <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                                                <span v-for="item in yanyu" class="ttbwzz-type-a" @change="handleCheckedCitiesChange">
                                                    <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                   
                                    <tr class="bg_color">
                                        <td class="start">运动反应（M）</td>
                                        <td>
                                            <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                                                <span v-for="item in yundong" class="ttbwzz-type-a" @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="Glasgow_Totalpoints" 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> 
                        
                        <hr style=" background-color: #DCDFE6;margin-top: 20px; height: 1px;border: none;"/>
                        <div class="shuoming">
                            <p>说明：</p>
                            <p>总分15分，其中 14-15分为正常，8-13分为中度意识障碍，≦7分为浅昏迷 ，3分为深昏迷 。</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,
            checkList:'',
            checkList1:'',
            checkList2:'',
            value1:'',
            value:'',
            input:'',
            Glasgow_Totalpoints:0,
            options:[],
            tableData:[],
            zhengyan:['自动睁眼(4分)','互换睁眼(3分)','刺激睁眼(2分)','无反应(1分)'],
            yanyu:['正常(5分)','不准确回答问题(4分)','不恰当词句(3分)','不能理解的言语(2分)','无言语反映(1分)'],
            yundong:['能按指令运动肢体(6分)','对刺痛能定位(5分)','对刺痛能躲避(4分)','刺痛肢体屈曲(3分)','刺痛肢体过伸(2分)','无反应(1分)'],
        }
    },
    methods:{
      handleCheckedCitiesChange(e){
        var ball = e.target.value
        var jiequ =(ball.split('(')[1].split('分')[0]) * 1
        if(e.target.checked==true){
          this.tumble_Totalpoints=this.tumble_Totalpoints + jiequ
          // console.log('22222 .slice(1)',ball);
          // console.log('3333333333',this.tumble_Totalpoints);
          return this.tumble_Totalpoints
        }else{
          this.tumble_Totalpoints=this.tumble_Totalpoints-jiequ
          return this.tumble_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: 5px 0px 5px 20px;
            color: black;
        }
        .rightjiange{
          margin-right: 40px;
          font-size: 15px;
        }
        .ttbwzz-type-a {
          min-width: 80px;
          margin-right: 30px;
          padding: 5px 0px;
          font-size: 15px;
        }
        input{
            -webkit-appearance: checkbox;
        }
    }
</style>