xt_vue/src/xt_pages/dialysis/bulletinBoard.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
      <el-button size="small" icon="el-icon-menu" @click="fullscreenboard" type="primary">全屏投影</el-button>
    </div>
    <div class="app-container" id="dialysis-board-box" v-loading="loading" element-loading-text="加载中">
        <el-menu  class="el-menu-demo" mode="horizontal" >
            <el-menu-item >{{orgname}}</el-menu-item>
            <el-menu-item :class="rightItem">{{week}}</el-menu-item>
            <el-menu-item :class="rightItem">{{today}}</el-menu-item>
        </el-menu>
        <el-table
            id="board-table-data"
            :data="boardData"
            border
            :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
            style="width: 100%">
            <el-table-column
                align="center"
                prop="date"
                label="姓名"
                width="180">
                <template slot-scope="scope">{{scope.row.patient.name}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="name"
                label="透析号"
                width="180">
                <template slot-scope="scope">{{scope.row.patient.dialysis_no}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="模式">
                <template slot-scope="scope">{{modeName(scope.row.mode_id)}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="分区">
                <template slot-scope="scope">{{scope.row.device_zone?scope.row.device_zone.name:''}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="床位">
                <template slot-scope="scope">{{scope.row.device_number?scope.row.device_number.number:''}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="状态">
                <template slot-scope="scope">{{boradData(scope.row)}}</template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="address"
                label="下次透析时间">
                <template slot-scope="scope">{{nextSchedule(scope.row.next_schedules)}}</template>
            </el-table-column>
        </el-table>
    </div>

    <div id="fullscreenbroad" v-show="dialogTableVisible" >
      <el-row>
          <el-button  @click="openSetting" icon="el-icon-setting" circle id="fullscreenbroad-setting"></el-button>
          <el-button type="primary" icon="el-icon-rank" v-if="showSetting" id="fullscreenbroad-setting" @click="togglefullscreen">切换模式</el-button>
          <el-button type="primary" icon="el-icon-menu"  v-if="showSetting" id="fullscreenbroad-setting"  @click="outfullscreenboard">退出全屏投影</el-button>

      </el-row>
      <el-menu  class="el-menu-demo" mode="horizontal" >
          <el-menu-item >{{orgname}}</el-menu-item>
          <el-menu-item :class="rightItem">{{week}}</el-menu-item>
          <el-menu-item :class="rightItem">{{today}}</el-menu-item>
      </el-menu>
      <el-table :data="boardData" border style="width: 100%" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}">
          <el-table-column
              align="center"
              prop="date"
              label="姓名"
              width="180">
              <template slot-scope="scope">{{scope.row.patient.name}}</template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="name"
              label="透析号"
              width="180">
              <template slot-scope="scope">{{scope.row.patient.dialysis_no}}</template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="address"
              label="模式">
              <template slot-scope="scope">{{modeName(scope.row.mode_id)}}</template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="address"
              label="分区">
              <template slot-scope="scope">{{scope.row.device_zone?scope.row.device_zone.name:''}}</template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="address"
              label="床位">
              <template slot-scope="scope">{{scope.row.device_number?scope.row.device_number.number:''}}</template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="address"
              label="状态">
              <template slot-scope="scope">{{boradData(scope.row)}}</template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="address"
              label="下次透析时间">
              <template slot-scope="scope">{{nextSchedule(scope.row.next_schedules)}}</template>
          </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
  import { getBoards } from '@/api/board'
  import bulletinboard from './components/bulletinboard'
  import { parseTime } from '@/utils'
  import BreadCrumb from '../components/bread-crumb'
  import screenfull from 'screenfull'
  export default {
    components: { BreadCrumb, bulletinboard },
    name: 'bulletinBoard',
    data(){
      return{
        
        dialogTableVisible:false,
        showSetting:false,
        crumbs: [
          { path: false, name: '透析管理' },
          { path: 'dialysis/board', name: '数据看板' },
        ],
        orgname: '',
        today:'今天',
        week:'--',
        rightItem:'board-right-menu-item',
        boardData: [],
        showTime:10,
        currentPage:0,
        loading:true,
        weekDay:['周日','周一','周二','周三','周四','周五','周六',],
        roonOptions:{1:'上午', 2:'下午', 3:'晚上'},
        modeOptions: {},
      }
    },
    created() {
        var xtuser = this.$store.getters.xt_user
        this.orgname = xtuser.org.org_name;
        // this.orgname = "遂溪方济医院";
        this.modeOptions = this.$store.getters.treatment_mode;
        this.initData();
    },
    methods: {
      fullscreenboard: function() {
        this.dialogTableVisible = true;
        // let routeData = this.$router.resolve({ path: '/fullscreenboard' })
        // window.open(routeData.href, '_blank')
      },
      outfullscreenboard:function(){
        this.dialogTableVisible = false;
        this.showSetting = false;
      },
      togglefullscreen:function(){
        if (!screenfull.enabled) {
          this.$message({
            message: '你的浏览器不支持',
            type: 'warning'
          })
          return false
        }
        screenfull.toggle();
        this.showSetting = false;
      },
      openSetting(){
        if(this.showSetting==false) {
          this.showSetting = true;
        }else {
          this.showSetting=false
        }
      },
      initData:function() {
          var _this = this;
          var timeOut = this.showTime * 1000;
          this.currentPage++;
          this.getBoards();
          
          setTimeout(function(){
              _this.initData();
          }, timeOut); 
      },
      getBoards:function(){
          getBoards(this.currentPage).then(response=>{
              this.loading = false;
              var r = response.data;
              if (r.state == 0) {
                  this.$message.error(r.msg);
                  return false;
              } else {
                  if(r.data.boards.length==0) {
                      this.currentPage = 1;
                      this.getBoards();
                  }else {
                      this.today = r.data.today;
                      this.week = (r.data.week in this.weekDay)?this.weekDay[r.data.week]:'--';
                      this.boardData = r.data.boards;
                  }
              }
          })
      },
      modeName:function(mode_id) {
          return (mode_id in this.modeOptions)? this.modeOptions[mode_id].name:'';
      },
      boradData:function(record) {
          if(record.dialysis_order) {
              if(record.dialysis_order.stage == 2) {
                  return '已下机';
              }else {
                  return '透析中';
              }
          }else if(record.sign) {
              return '已签到';
          }else {
              return '未签到';
          }
      },
      nextSchedule:function(nextlist){
          if(nextlist.length==0) {
              return '——';
          }
          var dayTime = parseTime(nextlist[0].schedule_date, '{m}月{d}日');
          var noon = (nextlist[0].schedule_type in this.roonOptions) ? ' ' + this.roonOptions[nextlist[0].schedule_type]:'';
          return dayTime + noon;
      }
    }
  }
</script>


<style lang="scss" scoped>
.board-right-menu-item{
    float: right !important;
}
.el-menu--horizontal>.el-menu-item {
    color: #000 !important;
}
.el-menu--horizontal {
    border-bottom: 0px !important;
}
</style>

<style >
#fullscreenbroad {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background: #fff;
    padding:20px;

        /* width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    height: 100%;
    overflow: auto; */
}

#fullscreenbroad #fullscreenbroad-setting {
  float: right;
}
#fullscreenbroad {
  z-index: 9999 !important;
}

#fullscreenbroad .el-button+.el-button {
  margin-left: 0px; 
}
#fullscreenbroad .el-button:nth-child(1) {
  margin-left: 10px; 
}
#fullscreenbroad .el-button:nth-child(2) {
  margin-left: 10px; 
}

#fullscreenbroad .el-menu-item{
    font-size: 30px !important;
}

#fullscreenbroad .board-right-menu-item{
    font-size: 20px !important;
}
#fullscreenbroad .el-table th>.cell {
    font-size: 20px !important;
}
#fullscreenbroad .el-table .cell{
    font-size: 20px !important;
}

</style>