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

<script setup lang="ts">
import {
  InpatientBoardKey,
  type InpatientBoardType,
} from "@/views/single-page/InpatientBoardV2/index";
import { computed } from "vue";

const store = inject(InpatientBoardKey) as InpatientBoardType;

const listData = computed(() => {
  return [
    ...store.callStore.urgentCallForHelp.values(),
    ...store.callStore.call.values(),
  ];
});

function removeLeadingZerosKeepTrailing(str: string) {
  if (!str) {
    return str; // 处理空字符串
  }

  // 删除前导零
  return str.replace(/^0+/, "");
}
</script>

<template>
  <div class="inpatient_board-call" v-show="listData.length > 0">
    <div class="inpatient_board-main">
      <div class="inpatient_board-item">
        <div>床位呼叫</div>
        <div v-for="value in store.callStore.call.values()">
          {{ removeLeadingZerosKeepTrailing(value.bedNo) }} 床
        </div>
      </div>
      <div class="inpatient_board-item" style="color: red">
        <div>紧急呼叫</div>
        <div v-for="value in store.callStore.urgentCallForHelp.values()">
          {{ removeLeadingZerosKeepTrailing(value.bedNo) }} 床卫生间
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.inpatient_board-call {
  top: 0;
  left: 0;
  z-index: 999;
  position: fixed;
  height: 100vh;
  width: 100vw;
  background: var(--el-overlay-color-lighter);

  .inpatient_board-main {
    margin: 10% 10% 0 10%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    background: white;

    .inpatient_board-item {
      color: black;
      margin: 5px;
      font-size: 50px;
    }
  }
}
</style>