web_dist/src/views/single-page/InpatientBoardV2/Index.vue

<script setup lang="tsx">
import BoardInfo from "./BoardInfo.vue";
import { useFullscreen } from "@vueuse/core";
import {
  InpatientBoardKey,
  useInpatientBoard,
} from "@/views/single-page/InpatientBoardV2/index";
import CallDialog from "@/views/single-page/InpatientBoardV2/CallDialog.vue";
import XcElOption from "@/components/xiao-chan/xc-el-option/XcElOption.vue";

const store = useInpatientBoard();

provide(InpatientBoardKey, store);

const divRef = ref();

const { toggle } = useFullscreen(divRef);
</script>

<template>
  <div class="layout_container inpatient-board">
    <header class="main-header">
      <el-form :inline="true">
        <el-form-item label="当前病房:">
          <el-select
            v-model="store.urlQuery.ward"
            :ref="el => (store.selectRef.value = el)"
            @change="
              code => {
                store.handleWardChange(code);
              }
            "
            filterable
            style="width: 7.5rem"
          >
            <el-option
              v-for="item in store.allWards.value"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="播放速度（秒）：">
          <el-input-number
            :step="1"
            controls-position="right"
            :min="5"
            v-model="store.urlQuery.speedBarDisplay"
            @change="store.changeInterval"
            :max="20"
          />
        </el-form-item>
        <el-form-item label="更新数据（分钟）：">
          <el-input-number
            :step="1"
            controls-position="right"
            :min="15"
            v-model="store.urlQuery.refresh"
            @change="store.changeInterval"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="toggle">全屏</el-button>
        </el-form-item>
      </el-form>
    </header>
    <div class="layout_main layout_container layout-horizontal" ref="divRef">
      <CallDialog />
      <BoardInfo />
    </div>
  </div>
</template>

<style lang="scss">
.inpatient-board {
  font-size: 1.13rem;

  .main-header {
    padding: 0.63rem;
  }

  .layout_main {
    background: #0f1628;
    padding: 0.63rem;
    color: white;
  }
}
</style>