Vue_New/src/xt_pages/upload/fast/dialysisParams.vue

<template>
    <div class="page_dialysisParams">
        <div class="cell clearfix" style="margin-top:40px;margin-left:70px;">
            <!-- <label class="title">
                <span class="name">治疗日期</span> :
            </label>
            <div class="time">
                <ul class>
                <li
                    :class="item.state == dayType ? 'active' : ''"
                    @click="chooseDay(item.state)"
                    v-for="item in day"
                    :key="item.value"
                >{{ item.label }}</li>
                </ul>
            </div>
            <el-date-picker
                v-model="time"
                prefix-icon="el-icon-date"
                @change="changeTime"
                :editable="false"
                style="width: 150px;"
                type="date"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
            ></el-date-picker> -->
            <label class="title" style="margin-left:10px;">
                <span class="name">患者信息</span> :
            </label>
            <div class="infoBox">
                <span>姓名：{{ patient.name }}</span>&nbsp;|&nbsp;<span>透析编号：{{ patient.dialysis_no }}</span>
            </div>
        </div>
        <div style="margin-left:70px;">
            <el-table :data="monitor_records" style="width: 100%" border :span-method='objectSpanMethod'>
                <el-table-column fixed prop="date" label="时间" width="140">
                    <template slot-scope="scope">
                        <p>{{ scope.row.created_time ? uParseTime(scope.row.created_time, '{y}-{m}-{d} {h}:{i}') : '' }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="uParseTime(scope.row.created_time, '{y}-{m}-{d} {h}:{i}')" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="name" :label="'静脉压\nmmHg'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.venous_pressure }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.venous_pressure" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="province" :label="'动脉压\nmmHg'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.arterial_pressure }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.arterial_pressure" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="city" :label="'电导度\nms/cm'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.conductivity }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.conductivity" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="address" :label="'血流量\nml/min'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.blood_flow_volume }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.blood_flow_volume" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="zip" :label="'透析液流量\nml/min'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.dialysate_flow }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.dialysate_flow" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="zip" :label="'超滤率\nml/h'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.ultrafiltration_rate }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.ultrafiltration_rate" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="zip" :label="'抗凝剂\n单位/h'" width="120">
                </el-table-column>
                <el-table-column prop="zip" :label="'体温\n℃'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.temperature }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.temperature" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="zip" :label="'脉搏\n次/分'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.pulse_frequency }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.pulse_frequency" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="zip" :label="'收缩压\nmmHg'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.systolic_blood_pressure }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.systolic_blood_pressure" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="zip" :label="'舒张压\nmmHg'" width="120">
                    <template slot-scope="scope">
                        <p>{{ scope.row.diastolic_blood_pressure }}</p>
                        <el-button size="mini" type="primary" v-clipboard:copy="scope.row.diastolic_blood_pressure" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="zip" label="症状及处理" width="300">
                    <template slot-scope="scope">
                        <div v-if="scope.$index == 1">
                        <div v-for="item in doctor" :key="item">
                            <p>{{ item }}</p>
                            <el-button size="mini" type="primary" v-clipboard:copy="item" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
                        </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <div class="table">
                <table class="fixedTable" border="1">
                    <tr>
                        <td style="height:60px;line-height:60px;border:none;border-bottom:1px solid #d0d3da;">时间</td>
                        <td class="fixedColumn"></td>
                        <td >静脉压<br />mmHg</td>
                        <td >动脉压<br />mmHg</td>
                        <td >电导度<br />ms/cm</td>
                        <td >血流量<br />ml/min</td>
                        <td >透析液流量<br />ml/min</td>
                        <td >超滤率<br />ml/h</td>
                        <td >抗凝剂<br />单位/h</td>
                        <td >体温<br />℃</td>
                        <td >脉搏<br />次/分</td>
                        <td >收缩压<br />mmHg</td>
                        <td >舒张压<br />mmHg</td>
                        <td :rowspan="monitor_records.length + 1" style="width:300px;height:100%">
                            <div>
                                <div style="height:60px;line-height:60px;border-bottom:1px solid #d0d3da;">症状及处理</div>
                                <div :style="{height: height}">
                                    <div v-for="item in doctor" :key="item">
                                        <p>{{ item }}</p>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr v-for="(item,index) in monitor_records" :key="index">
                        <td style="border:none">{{  uParseTime(item.created_time, '{y}-{m}-{d} {h}:{i}') }}</td>
                        <td class="fixedColumn"></td>
                        <td>{{ item.venous_pressure }}</td>
                        <td>{{ item.arterial_pressure }}</td>
                        <td>{{ item.conductivity }}</td>
                        <td>{{ item.blood_flow_volume }}</td>
                        <td>{{ item.dialysate_flow }}</td>
                        <td>{{ item.ultrafiltration_rate }}</td>
                        <td></td>
                        <td>{{ item.temperature }}</td>
                        <td>{{ item.pulse_frequency }}</td>
                        <td>{{ item.systolic_blood_pressure }}</td>
                        <td>{{ item.diastolic_blood_pressure }}</td>
                    </tr>
                </table>
            </div> -->
        </div>
    </div>
</template>

<script>
import { parseTime } from "@/utils";
export default {
    props:{
        monitor_records:Array,
        patient:Object,
        doctor_advices:Array,
        prescription:Object,
    },
    data(){
      return{
        tableData: [
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          }
        ],
        tableData1: [
            {
            date: "2016-05-03",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            },
            {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            },
            {
            date: "2016-05-04",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            },
            {
            date: "2016-05-01",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            },
            {
            date: "2016-05-08",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            },
            {
            date: "2016-05-06",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            },
            {
            date: "2016-05-07",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            },
            {
            date: "2016-05-08",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            },
            {
            date: "2016-05-06",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            },
            {
            date: "2016-05-07",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
            }
        ],
        day: [
            { value: 0, label: "今天", state: 0 },
            { value: 1, label: "昨天", state: 1 },
            { value: 2, label: "前天", state: 2 },
        ],
        dayType: 0,
        time:'',
        textarea:'',
        modeId:'',
        advices:[],
        height:''
      }
    },
    created(){
       
        if(this.monitor_records.length > 5){
            this.monitor_records = this.monitor_records
        }else{
            let num = 5 - this.monitor_records.length
            for(let i = 0; i<num;i++){
                this.monitor_records.push({id:0})
            }
            console.log(22222222222222222,this.monitor_records)
        }
        
        if(this.prescription.mode_id){
            this.modeId = this.getMode(this.prescription.mode_id)
        }
        if(this.doctor_advices.length > 0){
            let str = ''
            let arr = []
            this.advices = this.doctor_advices
            this.advices.map(item => {
                str = item.advice_name + (item.advice_desc ? ('(' +  item.advice_desc + item.drug_spec_unit + ')') : '' )  + '  ' + item.prescribing_number + item.prescribing_number_unit + '  ' + 
                item.single_dose + item.single_dose_unit + '  ' + item.delivery_way + item.execution_frequency + item.remark
                arr.push(str)
            })
            this.doctor = arr
            
            // this.textarea = ''
            // arr.map(item => {
            //     this.textarea += item + "\n"
            // })
        }else if(this.doctor_advices.length == 0){
            this.textarea = ''
            this.textarea = '1.开始' + this.modeId + '治疗' + '\n' +
                            '2.结束' + this.modeId + '治疗' + '\n' +
                            '3.患者离开血透室'
        }
    },
    methods:{
        chooseDay(day) {
            this.dayType = day;
        },
        uParseTime(time, cFormat) {
            if (time === 0) {
                return ''
            }
            
            if (arguments.length === 0) {
                return null
            }
            const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
            let date
            if (typeof time === 'object') {
                date = time
            } else {
                if (('' + time).length !== 13) time = parseInt(time) * 1000
                date = new Date(time)
            }
            const formatObj = {
                y: date.getFullYear(),
                m: date.getMonth() + 1,
                d: date.getDate(),
                h: date.getHours(),
                i: date.getMinutes(),
                s: date.getSeconds(),
                a: date.getDay()
            }
            const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
                let value = formatObj[key]
                if (key === 'a') {
                return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
                }
                if (result.length > 0 && value < 10) {
                value = '0' + value
                }
                return value || 0
            })
            return time_str
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // console.log('rowIndex',rowIndex)
            // console.log('columnIndex',columnIndex)
            console.log('this.monitor_records.length',this.monitor_records.length)
            if (columnIndex === 12) {
                if (rowIndex > 0) {
                    return {
                    rowspan: this.monitor_records.length - 1 ,
                    colspan: 1
                    };
                }else{
                     return {
                    rowspan: 0 ,
                    colspan: 0
                    };
                }
            }
        },
        getMode(id){
            let name = ''
            this.treatment_mode = Object.values(this.$store.getters.treatment_mode)
            this.treatment_mode.map(item => {
                if(item.id == id){
                    name = item.name
                }
            })
            return name
        },
        onCopy() {
            this.$message.success("复制成功");
        },
        onError() {
            this.$message.success("复制失败,请重试");
        }
    },
    watch:{
        monitor_records:{
            handler:function(val) {
                if(this.monitor_records.length > 5){
                    this.monitor_records = this.monitor_records
                }else{
                    let num = 5 - this.monitor_records.length
                    for(let i =0; i<num;i++){
                        this.monitor_records.push({id:1})
                    }
                    console.log(333333333333,this.monitor_records)
                }
            }
        },
        patient:{
            handler:function(val) {
            }
        },
        doctor_advices:{
            handler:function(val) {
                if(this.doctor_advices.length > 0){
                    let str = ''
                    let arr = []
                    this.advices = this.doctor_advices
                    this.advices.map(item => {
                        str = item.advice_name + (item.advice_desc ? ('(' +  item.advice_desc + item.drug_spec_unit + ')') : '' )  + '  ' + item.prescribing_number + item.prescribing_number_unit + '  ' + 
                        item.single_dose + item.single_dose_unit + '  ' + item.delivery_way + item.execution_frequency + item.remark
                        arr.push(str)
                    })
                    this.textarea = ''
                    arr.map(item => {
                        this.textarea += item + "\n"
                    })
                }else if(this.doctor_advices.length == 0){
                    this.textarea = ''
                    this.textarea = '1.开始' + this.modeId + '治疗' + '\n' +
                                    '2.结束' + this.modeId + '治疗' + '\n' +
                                    '3.患者离开血透室'
                }
            }
        },
        prescription:{
          handler:function(val) {
                if(this.prescription.mode_id){
                    this.modeId = this.getMode(this.prescription.mode_id)
                }
            }  
        },
        deep:true,
    }
}
</script>

<style lang="scss" scoped>
.tableTitle {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    line-height: 40px;
}
.page_dialysisParams{
    // width: 76%;
    padding-right: 10px;
    .infoBox{
        padding: 10px 20px;
        border-radius: 20px;
        border:1px solid #DCDFE6;
        font-size: 14px;
        color: #606266;
        display: flex;
        align-items: center;
    }
    .paramsTable{
        // width: 1600px;
        width:160%;
        border: 1px solid #000;
        border-spacing: 0px;
        border-collapse: collapse;
    }
    .paramsTable td{
        border:1px solid #000;
        padding:5px;
    }
    .paramsTable th{
        border:1px solid #000;
        padding:5px;
    }

    // .paramsTable td:first-child{
    //     position:absolute
    // }
    // .paramsTable th:first-child{
    //     position:absolute
    // }


.table{width:100%;overflow-x: scroll;}

.fixedTable{width:160%;text-align: center;color:#000;font-size:14px; border-collapse:collapse;background: #fff;}

.fixedTable tr{line-height: 30px;border:1px solid #d0d3da;}

// .fixedTable tr:first-child{height:40px;line-height: 40px;}

.fixedTable td:first-child{position:absolute;width:140px;margin:0px 0px 0px 0px;background: #fff;}

.fixedColumn{width:140px;}
}

</style>
<style lang="scss">
.page_dialysisParams{
    .el-table td, .el-table th{
        text-align: center;
    }
    .el-table .cell{
        display: flex;
        align-items: center;
        flex-direction: column;
        white-space: pre-line;
        text-align: center;
    }
    ::-webkit-scrollbar{
        height: 15px !important;
    }
}
html, body {
        width: 100% !important;
        height: 100% !important;
    }

</style>