ID1825-暂存

zhangchen

2025-07-08 4981c1f1ef22523cb2dc027c7c8126dfb924c5af

ID1825-暂存

 src/store/bedsideAuxiliaryScreen.ts

@@ -6,7 +6,17 @@
export const useBedsideAuxiliaryScreenStore = defineStore(
  "bedsideAuxiliaryScreen",
  () => {
    const deviceCode = ref<string>(cache.get("devcieCode") || ""); // 设备编号
    /** 设备编号 */
    const deviceCode = ref<string>(cache.get("devcieCode") || "");

    /** 床旁血压计数据 */
    const bedsideBloodPressureMonitorData = ref({
      date_time: '',
      sbp: '',
      pulseRate: '',
      dbp: '',
      zuihouTime: '',
    });

    /**
     * 设置设备编号
@@ -45,7 +55,22 @@

      source.value.onmessage = (e) => {
        console.log("[SSE] 消息:", e.data);
        message.value = e.data;
        const msg = e.data;
        let dif = msg.indexOf("event:message");
        let beng = msg.indexOf("{");
        let end = msg.length - 1;
        if (beng !== -1 && end !== -1 && dif !== -1) {
          const datax = msg.slice(beng, end + 1);
          const dataBody = JSON.parse(datax);

          // 倒计时提示文本
          if (dataBody.倒计时?.提示文本) {}

          // 床旁血压计
          if (dataBody.推送类型 === '床旁血压计') {}
          // 中央监控大屏信息
          else if (dataBody.推送类型 === '中央监控大屏信息') {}
        }
      };
    };

@@ -67,7 +92,7 @@
      message,
      isConnected,
      connect,
      close
      close,
    };
  }
);

 src/utils/utils.ts

New file
@@ -0,0 +1,11 @@
/**
 * 计算某个类名元素的可用高度（视口高度 - 元素顶部距离）
 * @param className 元素类名（不带.）
 * @returns 可用高度（px），找不到元素则返回 0
 */
export function getAvailableHeightByClass(className: string): number {
  const el = document.querySelector(`.${className}`) as HTMLElement | null
  if (!el) return 0
  const rect = el.getBoundingClientRect()
  return window.innerHeight - rect.top
}

 src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue

@@ -10,7 +10,9 @@
      <img :src="props.icon" class="card-icon" alt="" srcset="" />
      <span class="card-title">{{ props.title }}</span>
    </div>
    <div class="card-main"></div>
    <div class="card-main">
      <slot />
    </div>
  </div>
</template>


 src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue

@@ -1,19 +1,112 @@
<template>
  <div class="unplanned-schedule-container"></div>
  <div
    class="unplanned-schedule-container"
    :style="{ '--height': props.height + 'px' }"
  >
    <div class="row1-container">
      <Card
        title="抗凝剂"
        :icon="tslImg"
        background-color="#FFEDD2"
        class="row1-left"
      >
      <div class=""></div>
      </Card>
      <div class="row1-content">
        <Card
          title="透析模式"
          :icon="tslImg"
          background-color="#E5EEFF"
          class="row1-content-card"
        />
        <Card
          title="一次性血液透析体外循环管路"
          :icon="tslImg"
          background-color="#D9F0E2"
          class="row1-content-card"
        />
        <Card
          title="一次性使用透析护理包"
          :icon="tslImg"
          background-color="#F9DEDE"
          class="row1-content-card"
        />
      </div>
      <Card
        title="一次性使用内瘘穿刺针"
        :icon="tslImg"
        background-color="#EFE5FF"
        class="row1-right"
      />
    </div>
    <div class="row2-container">
      <Card
        title="血液透析器"
        :icon="tslImg"
        background-color="#D9F0E2"
        class="row2-card"
      />
      <Card
        title="血液透析滤过器"
        :icon="tslImg"
        background-color="#D9F0E2"
        class="row2-card"
      />
    </div>
  </div>
</template>

<script lang="ts" setup name="UnplannedSchedule">
// @ts-ignore
import Card from "./Card.vue";
import tslImg from "@/img/tsl.png";

interface Props {
    height: number;
  height: number;
}
const props = defineProps<Props>();

// @ts-ignore
import Card from './Card.vue';
</script>

<style lang="less" scoped>
.unplanned-schedule-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: var(--height);
  .row1-container {
    flex: 1;
    margin-bottom: 4px;
    display: flex;
    width: 100%;
    gap: 4px;

    > .row1-left,
    .row1-right {
      width: 103px;
      flex-shrink: 0;
    }

    .row1-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;

      // 卡片高度平均分（3个）
      > .row1-content-card {
        flex: 1;
      }
    }
  }
  .row2-container {
    flex: 1;
    margin-bottom: 4px;
    display: flex;
    width: 100%;
    gap: 4px;
    > .row2-card {
      flex: 1;
    }
  }
}
</style>

 src/views/mobile/bedsideAuxiliaryScreen/index.vue

@@ -1,27 +1,51 @@
<template>
    <div class="bedside-auxiliary-screen-container">
        <Header :type="0" device-no="03" />
        <div class="bedside-auxiliary-screen-content"></div>
  <div class="bedside-auxiliary-screen-container">
    <Header :type="0" device-no="03" />
    <div class="bedside-auxiliary-screen-content">
        <div class="content-position"></div>
        <UnplannedSchedule v-if="cotentHeight > 0" :height="cotentHeight"  />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { ref, watch, onMounted, defineAsyncComponent } from "vue";
// @ts-ignore
import Header from './components/Header.vue';
import Header from "./components/Header.vue";
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import { getAvailableHeightByClass } from '@/utils/utils';
// 未排班时的组件
const UnplannedSchedule = defineAsyncComponent(() => import('./components/UnplannedSchedule.vue'));

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const cotentHeight = ref(0);
watch(
  () => bedsideAuxiliaryScreenStore.deviceCode,
  (newVal: string) => {}
);

onMounted(() => {
  if (bedsideAuxiliaryScreenStore.deviceCode) {
    bedsideAuxiliaryScreenStore.connect(
      `${import.meta.env.VITE_SSE_BASE_URL}${
        bedsideAuxiliaryScreenStore.deviceCode
      }`
    );
  }
  cotentHeight.value = getAvailableHeightByClass('content-position')
});
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.bedside-auxiliary-screen-container {
    .bedside-auxiliary-screen-content {
        padding: 6px 12px 0;
    }
  .bedside-auxiliary-screen-content {
    padding: 6px 12px 0;
  }
}
</style>