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
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        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%"
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
      >
        <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: '--',
      timer: null,
      rightItem: 'board-right-menu-item',
      boardData: [],
      showTime: 120,
      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()
  }, beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer)
    })
  },
  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()

      this.timer = window.setInterval(() => {
        setTimeout(this.getBoards(), 0)
      }, 120000)
    },
    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;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>