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

<script setup lang="ts">
import { SYSTEM_CONFIG } from "@/utils/public";
import { InpatientBoardKey, type InpatientBoardType } from "./index";
import BoardCard from "./BoardCardNew.vue";
import RenderTable from "@/components/nursing-dashboard/RenderTable.vue";
import { magicApi } from "@/utils/database/magic-api-request";

const store = inject(InpatientBoardKey) as InpatientBoardType;

async function handleQuery(business) {
  return await magicApi({
    url: "/public/dashboard/dataSource",
    method: "post",
    data: {
      isSource: false,
      business: business,
      wardCode: store.urlQuery.ward,
    },
  })
    .then(res => {
      return res;
    })
    .catch(() => {
      return {};
    });
}
</script>

<template>
  <div class="layout_container info_main">
    <div class="top-area">
      <div class="top-title">
        <b style="font-size: 2.5rem"
          >{{ SYSTEM_CONFIG.HOSPITAL_NAME }} | {{ store.urlQuery.wardName }}</b
        >
      </div>
      <div class="top-time-area">
        {{ store.time.weekName }}
        <br />
        {{ store.time.now }}
      </div>
    </div>
    <div class="layout_container" style="height: max-content">
      <!-- <div class="layout_main layout_container layout-horizontal">
        <div class="layout_main">
          <b style="font-size: 2.63rem"
            >{{ SYSTEM_CONFIG.HOSPITAL_NAME }} |
            {{ store.urlQuery.wardName }}</b
          >
          <div>
            床位 - {{ store.data.value.length }} 在用 /
            {{ store.bedCount.value }} 全部
          </div>
          <div
            style="height: 2px; background-color: #0a84fd; margin-top: 5px"
          ></div>
        </div>

        <div class="右边宽度">
          <div class="蓝色底框" style="font-size: 1.56rem">
            {{ store.time.weekName }}
            <br />
            {{ store.time.now }}
          </div>
        </div>
      </div> -->
    </div>

    <div
      class="layout_main layout_container layout-horizontal"
      style="padding: 0 0.63rem; height: 70%"
    >
      <div class="left-area">
        <div class="left-title-1">通知公告</div>
        <div class="left-content-1"></div>
        <div class="left-title-2">病区统计</div>
        <div class="table-area">
          <RenderTable
            :ref="
              el => {
                store.renderTableRef.value = el;
              }
            "
            :html-data="store.store.htmlData"
            :ward-code="store.urlQuery.ward"
          />
        </div>
      </div>
      <div class="layout_main" style="padding: 0">
        <BoardCard />
      </div>
    </div>

    <div class="bottom-area">
      <div class="bottom-area-1">
        <div>
          床位使用情况: 总床位 (<span>{{ store.bedCount.value }}</span
          >)
        </div>
        <div>
          已使用 (<span> {{ store.data.value.length }}</span
          >)
        </div>
        <div>
          空床 (<span>{{ store.bedCount.value - store.data.value.length }}</span
          >)
        </div>
      </div>
      <div class="bottom-area-2">
        <div>
          <img src="../../../assets/dashboard/remind.png" alt="" />
          温馨提示：请大家保持安静，请勿大声喧哗！
        </div>
      </div>
      <div class="bottom-area-3">
        <div>
          <img src="../../../assets/dashboard/nursingLevel4.png" alt="" />
          特级护理
        </div>
        <div>
          <img src="../../../assets/dashboard/nursingLevel1.png" alt="" />
          一级护理
        </div>
        <div>
          <img src="../../../assets/dashboard/nursingLevel2.png" alt="" />

          二级护理
        </div>
        <div>
          <img src="../../../assets/dashboard/nursingLevel3.png" alt="" />
          三级护理
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.top-area {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #5373eb;
  margin-top: 0.31rem;
  margin-bottom: 0.5rem;
  .top-time-area {
    position: absolute;
    right: 40px;
    font-size: 1.5rem;
  }
}
.info_main {
  .left-area {
    width: 30%;
    border: 3px solid #a7b6ff;
    color: #1c2641;
    background-color: #ffffff;
    .left-title-1 {
      height: 10%;
      // height: 3.5rem;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      padding: 10px;
      font-weight: bold;
      border-bottom: 2px solid #a7b6ff;
    }

    .left-content-1 {
      height: 15%;
      // height: 8rem;
      border-bottom: 2px solid #a7b6ff;
    }
    .left-title-2 {
      height: 10%;
      // height: 3.5rem;
      font-size: 1.2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      border-bottom: 2px solid #a7b6ff;
      padding: 10px;
    }
    .table-area {
      height: 65%;
      // padding: 10px;
      overflow: auto;
    }
    // padding: 2px;
  }

  .bottom-area {
    width: 100%;
    height: 5%;
    display: flex;
    background-color: #ffffff;
    color: #6f7474;
    box-sizing: border-box;
    padding: 0 10px;

    .bottom-area-1 {
      width: 30%;
      display: flex;
      align-items: center;

      div {
        margin-right: 10px;
      }

      span {
        color: #ff6830;
      }
    }

    .bottom-area-2 {
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
      div {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }

    .bottom-area-3 {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
      }
      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
  }

  .蓝色底框 {
    margin-top: 0.31rem;
    padding-bottom: 0.31rem;
    border-bottom: 0.19rem solid #0a84fd;
  }

  .深度边框 {
    height: 0;
    flex: 1;
    border-radius: 0.63rem;
    padding: 0.31rem;
    background-color: #1c2641;
  }
}
</style>