elizebeth/src/xt_pages/device/objectTableDisinfectTwo.vue

<template>
    <div id="main-contain">
      <div class="position">
        <bread-crumb :crumbs='crumbs'></bread-crumb>
      </div>
      <div class="app-container">
          <div style="float: left; margin-bottom: 10px;">
            <el-date-picker
              v-model="startvalue"
              type="date"
              placeholder="选择日期"
              style="width: 150px;">
            </el-date-picker>
            <span>-</span>
            <el-date-picker
              v-model="endvalue"
              type="date"
              placeholder="选择日期"
              style="width: 150px;">
            </el-date-picker>
            <el-button type="primary" style="margin-left: 10px;">搜索</el-button>
          </div>
          <div style="float:right;margin-bottom:10px;">
            <el-button type="primary" @click="printCard">打印</el-button>
            <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>

          </div>
          <div class="tab_air">
            <el-table  :data="tableData" :fit="true" stripe>
                <el-table-column prop="year" label="名称" width="150" align="center">
                    <el-table-column prop="year" label="消毒时间" align="center" width="150">
                        <el-table-column prop="year" label="日期" align="center" width="150">
                            <template slot-scope="scope">
                                {{getTimes(scope.row.record_date) }}
                            </template>
                          
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="fenopda" :label="'湿化瓶'+'\n'+'500mg/l含氯制剂'" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{scope.row.first_total_time?scope.row.first_total_time:""}}
                    </template>
                </el-table-column>
                <el-table-column prop="dwaiod" label="责任人" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{getName(scope.row.first_creator)}}
                    </template>
                </el-table-column>

                <el-table-column prop="date" :label="'止血带'+'\n'+'500mg/l含氯制剂'" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{scope.row.sencond_total_time?scope.row.sencond_total_time:""}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="责任人" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{getName(scope.row.sencond_creator)}}
                    </template>
                </el-table-column>

                <el-table-column prop="province" :label="'医疗垃圾桶'+'\n'+'1000mg/l含氯制剂'" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{scope.row.third_total_time?scope.row.third_total_time:""}}
                    </template>
                </el-table-column>
                <el-table-column prop="city" label="负责人" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{getName(scope.row.third_creator)}}
                    </template>
                </el-table-column>

                <el-table-column prop="name" :label="'体温计'+'\n'+'75%酒精擦拭'" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{scope.row.fourth_total_time?scope.row.fourth_total_time:""}}
                    </template>
                </el-table-column>
                <el-table-column prop="province" label="负责人" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{getName(scope.row.fourth_creator)}}
                    </template>
                </el-table-column>

                <el-table-column prop="city" :label="'体温枪'+'\n'+'75%酒精擦拭'" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{scope.row.fourth_total_time?scope.row.fourth_total_time:""}}
                    </template>
                </el-table-column>
                <el-table-column prop="province" label="负责人" align="center" min-width="60">
                    <template slot-scope="scope">
                        {{getName(scope.row.last_creator)}}
                    </template>
                </el-table-column>
                <el-table-column prop="city" label="操作" align="center" min-width="100">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              background
              style="margin-top:20px;float: right"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          >
          <!-- @size-change="handleSizeChange"
              @current-change="handleCurrentChange" -->
          </el-pagination>
         </div>

            <!-- 新增 -->
          <el-dialog
          class="centerDialog"
          width="1000px"
          title="新增物表消毒表"
          :visible.sync="dialogFormVisible">
              <el-form :model="form" ref="form" class="airForm" :rules="airRules">
                  <div style="width: 100%;">
                    <el-form-item label="创建日期" label-width="110px" required prop="record_date">
                        <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="form.record_date"
                        type="date"
                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="form_title"><span >湿化瓶</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.first_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.first_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.first_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间" label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.first_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.first_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.first_total_time"  ></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px">
                      <div>
                          <el-radio v-model="form.first_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.first_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px" >
                      <el-select v-model="form.first_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px">
                      <el-select v-model="form.first_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>

                  <div class="form_title"><span >止血带</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.sencond_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.sencond_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.sencond_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.sencond_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item> 
                  <el-form-item label="结束时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.sencond_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.sencond_total_time"></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px">
                      <div>
                          <el-radio v-model="form.sencond_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.sencond_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px">
                      <el-select v-model="form.sencond_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px" >
                      <el-select v-model="form.sencond_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>

                  <div class="form_title"><span >医疗垃圾桶</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.third_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.third_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.third_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.third_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间" label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.third_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.third_total_time"  ></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px" >
                      <div>
                          <el-radio v-model="form.third_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.third_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px">
                      <el-select v-model="form.third_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px">
                      <el-select v-model="form.third_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>

                  <div class="form_title"><span >体温计</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.fourth_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.fourth_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.fourth_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.fourth_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.fourth_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.fourth_total_time"  ></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px">
                      <div>
                          <el-radio v-model="form.fourth_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.fourth_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px">
                      <el-select v-model="form.fourth_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px">
                      <el-select v-model="form.fourth_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>

                  <div class="form_title"><span >体温枪</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.last_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.last_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.last_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.last_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.last_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.last_total_time"  ></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px">
                      <div>
                          <el-radio v-model="form.last_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.last_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px">
                      <el-select v-model="form.last_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px">
                      <el-select v-model="form.last_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="saveObjectTableDisinfect('form')">保 存</el-button>
              </div>
          </el-dialog>

          <!-- 编辑 -->
          <el-dialog
          class="centerDialog"
          width="1000px"
          title="编辑物表消毒表"
          :visible.sync="editDialogFormVisible">
              <el-form :model="form" ref="form" class="airForm" :rules="airRules">
                  <div style="width: 100%;">
                    <el-form-item label="创建日期" label-width="110px" required prop="record_date">
                        <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="form.record_date"
                        type="date"
                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="form_title"><span >湿化瓶</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.first_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.first_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.first_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间" label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.first_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.first_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.first_total_time"  ></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px">
                      <div>
                          <el-radio v-model="form.first_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.first_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px" >
                      <el-select v-model="form.first_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px">
                      <el-select v-model="form.first_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>

                  <div class="form_title"><span >止血带</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.sencond_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.sencond_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.sencond_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.sencond_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item> 
                  <el-form-item label="结束时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.sencond_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.sencond_total_time"></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px">
                      <div>
                          <el-radio v-model="form.sencond_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.sencond_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px">
                      <el-select v-model="form.sencond_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px" >
                      <el-select v-model="form.sencond_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>

                  <div class="form_title"><span >医疗垃圾桶</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.third_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.third_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.third_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.third_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间" label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.third_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.third_total_time"  ></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px" >
                      <div>
                          <el-radio v-model="form.third_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.third_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px">
                      <el-select v-model="form.third_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px">
                      <el-select v-model="form.third_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>

                  <div class="form_title"><span >体温计</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.fourth_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.fourth_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.fourth_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.fourth_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.fourth_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.fourth_total_time"  ></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px">
                      <div>
                          <el-radio v-model="form.fourth_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.fourth_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px">
                      <el-select v-model="form.fourth_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px">
                      <el-select v-model="form.fourth_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>

                  <div class="form_title"><span >体温枪</span></div>
                  <el-form-item label="消毒方式" label-width="110px">
                      <el-input v-model="form.last_disinfection_methods"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒液" label-width="110px">
                      <el-input v-model="form.last_disinfection_water"></el-input>
                  </el-form-item>
                  <el-form-item label="消毒时间(h)" label-width="110px">
                      <el-input v-model="form.last_disinfection_time " ></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.last_start_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间"  label-width="110px">
                    <el-date-picker
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间"
                        v-model="form.last_end_time"
                        style="width:100%;"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="累计时间(h)" label-width="110px">
                      <el-input v-model= "form.last_total_time"  ></el-input>
                  </el-form-item>
                  <el-form-item label="检测合格" label-width="110px">
                      <div>
                          <el-radio v-model="form.last_is_check" label="1">是</el-radio>
                          <el-radio v-model="form.last_is_check" label="2">否</el-radio>
                      </div>
                  </el-form-item>
                  <el-form-item label="修改标志" label-width="110px">
                      <el-select v-model="form.last_modifications" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in options"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="责任人" label-width="110px">
                      <el-select v-model="form.last_creator" placeholder="请选择">
                          <el-option
                          v-for="(item,index) in docList"
                          :key="index"
                          :label="item.user_name"
                          :value="item.admin_user_id">
                          </el-option>
                      </el-select>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="editDialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateObjectTableDisinfect('form')">保 存</el-button>
              </div>
          </el-dialog>
         

          <div hidden="hidden">
            <div id="print-card-info" v-show="hiddenShow">
                <div>
                    <h1 style="text-align: center;">物表消毒登记</h1>
                    <div>
                        <table border="1" style="text-align: center;margin: auto;border-collapse: collapse;">
                            <tr>
                                <td style="position: relative;box-sizing: border-box;width: 107px;
                                height: 80px;">
                                    <span style="position: absolute; right: 10px; top: 10px; font-size: 12px;">名称</span>

                                    <span style="position: absolute; display: block; top: 0; left: 46px; width: 100px;
                                    border-bottom:1px solid black ;transform: rotate(52deg); 
                                    transform-origin: top left;"></span>

                                    <span style="position: absolute; right: 45px; top: 23px;font-size: 12px;">消毒 <br/>时间</span>
                                    <span style="position: absolute; display: block; top: 46px; left: 0; width: 113px;
                                     border-bottom:1px solid black ;transform: rotate(17deg); 
                                    transform-origin: top left;"></span>
                                    <span style="position: absolute; left: 6px; bottom: 6px;font-size: 12px;">日期</span>
                                </td>
                                <td>湿化瓶<br/>500mg/l含氯制剂</td>
                                <td>负责人</td>
                                <td>止血带<br/>500mg/l含氯制剂</td>
                                <td>负责人</td>
                                <td>医疗垃圾桶<br/>1000mg/l含氯制剂</td>
                                <td>负责人</td>
                                <td>体温计<br/>75%酒精<br/>擦拭</td>
                                <td>负责人</td>
                                <td>体温枪<br/>75%酒精<br/>擦拭</td>
                                <td>负责人</td>
                               
                            </tr>

                            <tr v-for="(item,index) in tableData" :key="index">
                                <td>{{getTimes(item.record_date) }}</td>
                                <td>{{item.first_total_time}}</td>
                                <td>{{getName(item.first_creator)}}</td>
                                <td>{{item.sencond_total_time}}</td>
                                <td>{{getName(item.sencond_creator)}}</td>
                                <td>{{getTimes(item.third_total_time) }}</td>
                                <td>{{getName(item.third_creator) }}</td>
                                <td>{{ getTimes(item.fourth_total_time) }}</td>
                                <td>{{getName(item.fourth_creator) }}</td>
                                <td>{{ getTimes(item.last_total_time) }}</td>
                                <td>{{ getName(item.last_creator) }}</td>
                              
                            </tr>
                         </table>   

                    </div>
                </div>
            </div>
         </div>
        
      </div>
    </div>
  </template>

  <script>
    import print from "print-js";
    import BreadCrumb from '@/xt_pages/components/bread-crumb'
    import { getAllDoctorList,
        saveObjectTableDisinfect,
        getObjectTableDisInfectList,
        getObjectTableDisInfectByIdList,
        updateObjectTableDisinfect, 
        deleteObjectTableDisinfect
    } from "@/api/device"
    import { uParseTime } from '@/utils/tools'
    const moment = require('moment')
    export default {
      name: 'airDisinfect',
      components: {
        BreadCrumb
      },
      data() {
        return {
          crumbs: [
            { path: false, name: '院感管理' },
            { path: false, name: '透析室空气消毒记录表' }
          ],

          dialogFormVisible:false,
          editDialogFormVisible:false,
          startvalue:'',
          endvalue:'',
          form: {
            id:0,
            record_date:moment(new Date()).add('year',0).format("YYYY-MM-DD"), //创建日期
            first_disinfection_water:"",// 消毒液
            first_disinfection_methods:"",//消毒方式
            first_disinfection_time:"",//消毒时长
            first_start_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//开始时间
            first_end_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//结束时间
            first_total_time:"",//累计时间
            first_is_check:"1",//检验合格
            first_modifications:"",//修改标志
            first_creator:this.$store.getters.xt_user.user.id,//第一责任人

            sencond_disinfection_water:"",// 消毒液
            sencond_disinfection_methods:"",//消毒方式
            sencond_disinfection_time:"",//消毒时长
            sencond_start_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//开始时间
            sencond_end_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//结束时间
            sencond_total_time:"",//累计时间
            sencond_is_check:"1",//检验合格
            sencond_modifications:"",//修改标志
            sencond_creator:this.$store.getters.xt_user.user.id,//第一责任人

            third_disinfection_water:"",// 消毒液
            third_disinfection_methods:"",//消毒方式
            third_disinfection_time:"",//消毒时长
            third_start_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//开始时间
            third_end_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//结束时间
            third_total_time:"",//累计时间
            third_is_check:"1",//检验合格
            third_modifications:"",//修改标志
            third_creator:this.$store.getters.xt_user.user.id,//第一责任人

            fourth_disinfection_water:"",// 消毒液
            fourth_disinfection_methods:"",//消毒方式
            fourth_disinfection_time:"",//消毒时长
            fourth_start_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//开始时间
            fourth_end_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//结束时间
            fourth_total_time:"",//累计时间
            fourth_is_check:"1",//检验合格
            fourth_modifications:"",//修改标志
            fourth_creator:this.$store.getters.xt_user.user.id,//第一责任人

            last_disinfection_water:"",// 消毒液
            last_disinfection_methods:"",//消毒方式
            last_disinfection_time:"",//消毒时长
            last_start_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//开始时间
            last_end_time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//结束时间
            last_total_time:"",//累计时间
            last_is_check:"1",//检验合格
            last_modifications:"",//修改标志
            last_creator:this.$store.getters.xt_user.user.id,//第一责任人
          
          },
        //   value1:'',
          docList:[],
          options:[
            {id:1,name:"正常"},
            {id:2,name:"撤销"}
          ],
         airRules: {
          created_time:[{required:true,message:"请选择创建时间",trigger:"blur"}],
          start_time:[{required:true,message:"请选择开始时间",trigger:"blur"}],
          end_time:[{required:true,message:"请选择结束时间",trigger:"blur"}]
         },
         limit:20,
         page:1,
         total:0,
         tableData: [],
         hiddenShow:false,
        }
      },
      created(){
        this.getAllDoctorList()
        this.getObjectTableDisInfectList()
      },
      methods:{
    
      printCard() {
        this.hiddenShow = true;
        var ptime = Math.round(new Date().getTime() / 1000);
        this.print_time = uParseTime(ptime, "{y}年{m}月{d}日");

        const style =
            "@media print { .print_main_content { background-color: white; width:960px; margin:0 auto; padding: 0 0 20px 0;font-size:15px } .print_main_content .order_title { text-align: center; font-size: 15px; line-height: 50px;} .print_main_content table { width: 100%; border: 1px solid; border-collapse: collapse; padding: 2px;font-size:15px } .print_main_content table tbody tr td { border: 1px solid; text-align: center; padding: 10px 8px;font-size:15px } .td_proj_title { font-size: 15px; line-height: 25px;} .td_proj_content { font-size: 15px; line-height: 25px; } .td_align_left { text-align: left; } .print_footnote_panel { font-size: 15px; line-height: 40px; } .print_footnote_panel .proj { display: inline-block; width: 49%; } .print_footnote_panel .proj}";

        setTimeout(() => {
            printJS({
            printable: "print-card-info",
            type: "html",
            style: style,
            scanStyles: false
            });
        }, 1);
       },
       getTimes(time) {
         return uParseTime(time, '{y}-{m}-{d}')
       },
       getTimeTwo(time) {
         return uParseTime(time, '{h}:{i}')
       },
       getTimeThree(time) {
         return uParseTime(time, '{y}-{m}-{d} {h}:{i}')
       },
       getName(creator){
         var name = ""
         for(let i=0;i<this.docList.length;i++){
          if(creator == this.docList[i].admin_user_id){
             name = this.docList[i].user_name
          }
         }
         return name
       },
        getAllDoctorList(){
          getAllDoctorList().then(response=>{
            if(response.data.state == 1){
               var list = response.data.data.list
               console.log("list222222",list)
               this.docList = list
            }
          })  
        },
        saveObjectTableDisinfect(formName){
          this.$refs[formName].validate((valid=>{
            if(valid){
                if(this.form.first_is_check!=""){
                  this.form.first_is_check = parseInt(this.form.first_is_check) 
                }else{
                    this.form.first_is_check=0
                }

                if(this.form.sencond_is_check!=""){
                  this.form.sencond_is_check = parseInt(this.form.sencond_is_check) 
                }else{
                    this.form.sencond_is_check=0  
                }

                if(this.form.third_is_check!=""){
                  this.form.third_is_check = parseInt(this.form.third_is_check)
                }else{
                    this.form.third_is_check = 0
                }
                
                if(this.form.fourth_is_check!=""){
                  this.form.fourth_is_check = parseInt(this.form.fourth_is_check)
                }else{
                    this.form.fourth_is_check =0  
                }

                if(this.form.last_is_check!=""){
                    this.form.last_is_check = parseInt(this.form.last_is_check)
                }else{
                    this.form.last_is_check = 0
                }


                if(this.form.first_modifications!=""){
                  this.form.first_modifications = parseInt(this.form.first_modifications) 
                }else{
                    this.form.first_modifications=0
                }

                if(this.form.sencond_modifications!=""){
                  this.form.sencond_modifications = parseInt(this.form.sencond_modifications) 
                }else{
                    this.form.sencond_modifications=0  
                }

                if(this.form.third_modifications!=""){
                  this.form.third_modifications = parseInt(this.form.third_modifications)
                }else{
                    this.form.third_modifications = 0
                }
                
                if(this.form.fourth_modifications!=""){
                  this.form.fourth_modifications = parseInt(this.form.fourth_modifications)
                }else{
                    this.form.fourth_modifications =0  
                }

                if(this.form.last_modifications!=""){
                    this.form.last_modifications = parseInt(this.form.last_modifications)
                }else{
                    this.form.last_modifications = 0
                }
              
              
               
              saveObjectTableDisinfect(this.form).then(response=>{
                 if(response.data.state == 1){
                   var objectDisinfect =  response.data.data.objectDisinfect
                   this.$message.success("保存成功!")
                   this.dialogFormVisible = false
                   this.getObjectTableDisInfectList()
                 }
              })
            }
          }))
        },
        getObjectTableDisInfectList(){
             var params = {
                start_time:this.startvalue,
                end_time:this.endvalue,
                limit:this.limit,
                page:this.page,
             }
            getObjectTableDisInfectList(params).then(response=>{
              if(response.data.state == 1){
                var list = response.data.data.list
                this.tableData = list
                this.total = response.data.data.total
              }
            })  
        },
        handleEdit(id){
          getObjectTableDisInfectByIdList(id).then(response=>{
            if(response.data.state == 1){
              var list = response.data.data.list
              console.log("list",list)
              this.form.id = list.id
              this.form.record_date = this.getTimes(list.record_date)
              this.form.first_disinfection_water = list.first_disinfection_water? list.first_disinfection_water:""
              this.form.first_disinfection_methods = list.first_disinfection_methods? list.first_disinfection_methods:""
              this.form.first_disinfection_time = list.first_disinfection_time?list.first_disinfection_time:""
              this.form.first_start_time = this.getTimeThree(list.first_start_time)
              this.form.first_end_time = this.getTimeThree(list.first_end_time)
              this.form.first_total_time = list.first_total_time?list.first_total_time:""
              this.form.first_is_check = list.first_is_check.toString()
              this.form.first_modifications = list.first_modifications?list.first_modifications:""
              this.form.first_creator = list.first_creator
              this.form.sencond_disinfection_water = list.sencond_disinfection_water?list.sencond_disinfection_water:""
              this.form.sencond_disinfection_methods = list.sencond_disinfection_methods?list.sencond_disinfection_methods:""
              this.form.sencond_disinfection_time = list.sencond_disinfection_time?list.sencond_disinfection_time:""
              this.form.sencond_start_time = this.getTimeThree(list.sencond_start_time)
              this.form.sencond_end_time = this.getTimeThree(list.sencond_end_time)
              this.form.sencond_total_time = list.sencond_total_time?list.sencond_total_time:""
              this.form.sencond_is_check = list.sencond_is_check.toString()
              this.form.sencond_modifications = list.sencond_modifications?list.sencond_modifications:""
              this.form.sencond_creator = list.sencond_creator
              this.form.third_disinfection_water = list.third_disinfection_water?list.third_disinfection_water:""
              this.form.third_disinfection_methods = list.third_disinfection_methods?list.third_disinfection_methods:""
              this.form.third_disinfection_time = list.third_disinfection_time?list.third_disinfection_time:""
              this.form.third_start_time  =this.getTimeThree(list.third_start_time)
              this.form.third_end_time = this.getTimeThree(list.third_end_time)
              this.form.third_total_time = list.third_total_time?list.third_total_time:""
              this.form.third_is_check = list.third_is_check.toString()
              this.form.third_modifications = list.third_modifications?list.third_modifications:""
              this.form.third_creator = list.third_creator

              this.form.fourth_disinfection_water = list.third_disinfection_water?list.third_disinfection_water:""
              this.form.fourth_disinfection_methods = list.third_disinfection_methods?list.third_disinfection_methods:""
              this.form.fourth_disinfection_time = list.third_disinfection_time?list.third_disinfection_time:""
              this.form.fourth_start_time  =this.getTimeThree(list.third_start_time)
              this.form.fourth_end_time = this.getTimeThree(list.third_end_time)
              this.form.fourth_total_time = list.third_total_time? list.third_total_time:""
              this.form.fourth_is_check = list.third_is_check.toString()
              this.form.fourth_modifications = list.third_modifications?list.third_modifications:""
              this.form.fourth_creator = list.third_creator

              this.form.last_start_time = this.getTimeThree(list.last_start_time)
              this.form.last_end_time = this.getTimeThree(list.last_end_time)
              this.form.last_total_time = list.last_total_time?list.last_total_time:""
              this.form.last_is_check = list.last_is_check.toString()
              this.form.last_modifications = list.last_modifications?list.last_modifications:""
              this.form.last_creator = list.last_creator
              this.form.last_disinfection_water = list.last_disinfection_water?list.last_disinfection_water:""
              this.form.last_disinfection_methods = list.last_disinfection_methods?list.last_disinfection_methods:""
              this.form.last_disinfection_time = list.last_disinfection_time?list.last_disinfection_time:""
              this.editDialogFormVisible = true
            }
          })
        },
        updateObjectTableDisinfect(formName){
          this.$refs[formName].validate((valid=>{
            if(valid){
                if(this.form.first_is_check!=""){
                  this.form.first_is_check = parseInt(this.form.first_is_check) 
                }else{
                    this.form.first_is_check=0
                }

                if(this.form.sencond_is_check!=""){
                  this.form.sencond_is_check = parseInt(this.form.sencond_is_check) 
                }else{
                    this.form.sencond_is_check=0  
                }

                if(this.form.third_is_check!=""){
                  this.form.third_is_check = parseInt(this.form.third_is_check)
                }else{
                    this.form.third_is_check = 0
                }
                
                if(this.form.fourth_is_check!=""){
                  this.form.fourth_is_check = parseInt(this.form.fourth_is_check)
                }else{
                    this.form.fourth_is_check =0  
                }

                if(this.form.last_is_check!=""){
                    this.form.last_is_check = parseInt(this.form.last_is_check)
                }else{
                    this.form.last_is_check = 0
                }


                if(this.form.first_modifications!=""){
                  this.form.first_modifications = parseInt(this.form.first_modifications) 
                }else{
                    this.form.first_modifications=0
                }

                if(this.form.sencond_modifications!=""){
                  this.form.sencond_modifications = parseInt(this.form.sencond_modifications) 
                }else{
                    this.form.sencond_modifications=0  
                }

                if(this.form.third_modifications!=""){
                  this.form.third_modifications = parseInt(this.form.third_modifications)
                }else{
                    this.form.third_modifications = 0
                }
                
                if(this.form.fourth_modifications!=""){
                  this.form.fourth_modifications = parseInt(this.form.fourth_modifications)
                }else{
                    this.form.fourth_modifications =0  
                }

                if(this.form.last_modifications!=""){
                    this.form.last_modifications = parseInt(this.form.last_modifications)
                }else{
                    this.form.last_modifications = 0
                }
                console.log("hhahdhfhahdf",this.form)
                updateObjectTableDisinfect(this.form).then(response=>{
                 if(response.data.state == 1){
                   var objectDisinfect =  response.data.data.objectDisinfect
                   this.$message.success("保存成功!")
                   this.editDialogFormVisible = false
                   this.getObjectTableDisInfectList()
                 }
              })
            }
          }))
        },
        handleDelete(id){
          deleteObjectTableDisinfect(id).then(response=>{
            if(response.data.state ==1){
              var msg = response.data.data.msg
              this.$message.success("删除成功!")
              this.getObjectTableDisInfectList()
            }
          })
        },
       
        
      }
    }
  </script>

  <style lang="scss" scoped>
  .airForm{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .el-form-item{
          width:33%;
      }
      .el-date-editor.el-input, .el-date-editor.el-input__inner{
          width: 200px;
      }
      .el-input{
          width: 200px;
      }
      .el-select{
          width: 200px;
      }
      .form_title{
        width: 100%;
        margin-bottom: 10px;
        span{
            font-size: 20px;
            font-weight: bold;
        }
      }
  }
  </style>

  <style lang="scss">
   #main-contain{
    .app-container{
        // display: flex;
        // justify-content: space-between;
        // flex-wrap: wrap;
        .tab_air{
        // 斜杠表格
        .el-table{
            th{
                padding: 0px !important;
            }
            tr:first-of-type th:first-of-type div.cell {
                text-align: right;/*上边文字靠右*/
            }
            tr:last-of-type th:first-of-type div.cell {
                text-align: left;/*下边文字靠左*/
            }
            tr:first-of-type th:first-of-type:before {
                content: "";
                position: absolute;
                width: 1px;
                height: 100px;/*斜线的长度*/
                top: 0;
                left: 75px;
                background-color: rgb(172, 171, 171);
                opacity: 1.2;
                display: block;
                transform: rotate(-47deg);/*调整斜线的角度*/
                -webkit-transform-origin: top;
                transform-origin: top;
            }
            tr:nth-of-type(2) th:nth-of-type(1):before{
                content: "";
                position: absolute;
                width: 1px;
                height: 80px;/*斜线的长度*/
                top: 0;
                left: 100px;
                background-color: rgb(172, 171, 171);
                opacity: 1.2;
                display: block;
                transform: rotate(-47deg);/*调整斜线的角度*/
                -webkit-transform-origin: top;
                transform-origin: top;
            }
            tr:last-of-type th:first-of-type:before {
                content: "";
                position: absolute;
                width: 1px;
                height: 80px;/*斜线的长度*/
                top: 0;
                left: 125px;
                background-color: rgb(172, 171, 171);
                opacity: 1.2;
                display: block;
                transform: rotate(-48deg);/*调整斜线的角度*/
                -webkit-transform-origin: top;
                transform-origin: top;
            }
            tr:nth-of-type(2) th:nth-of-type(1):after{
                content: "";
                position: absolute;
                width: 1px;
                height: 80px;/*斜线的长度*/
                top: 8px;
                left: 0px;
                background-color: rgb(172, 171, 171);
                opacity: 1.2;
                display: block;
                transform: rotate(-76deg);/*调整斜线的角度*/
                -webkit-transform-origin: top;
                transform-origin: top;
            }
            tr:last-of-type th:first-of-type:after {
                content: "";
                position: absolute;
                width: 1px;
                height: 92px;/*斜线的长度*/
                top: 0;
                left: 59px;
                background-color: rgb(172, 171, 171);
                opacity: 1.2;
                display: block;
                transform: rotate(-76deg);/*调整斜线的角度*/
                -webkit-transform-origin: top;
                transform-origin: top;
            }
        }
        .el-table--border th, .el-table__fixed-right-patch {
            border-bottom: none !important;
        }
        .el-table td .cell, .el-table th .cell {
            padding: 0 5px !important;
        }
        .el-table .cell {
            white-space: pre-line;
        }
     }
    }


   }
  ::-webkit-scrollbar{
    height: 15px;
  }

  </style>