ID1825-暂存

zhangchen

2025-07-09 6c0b8c25d8c523c3f800aaae59362abef7fd1906

ID1825-暂存

 src/store/bedsideAuxiliaryScreen.ts

@@ -2,6 +2,9 @@
import { ref } from "vue";
import cache from "../utils/cache";
import { EventSourcePolyfill } from "event-source-polyfill";
import type { DeviceData } from './type/bedsideAuxiliaryScreen.type';
import { defaultDeviceData, defaultconsumablesCollection } from './type/bedsideAuxiliaryScreen.type';


export const useBedsideAuxiliaryScreenStore = defineStore(
  "bedsideAuxiliaryScreen",
@@ -17,6 +20,9 @@
      dbp: '',
      zuihouTime: '',
    });

    /** s设备信息数据 */
    const deviceData = ref<DeviceData>(defaultDeviceData());

    /**
     * 设置设备编号
@@ -62,14 +68,23 @@
        if (beng !== -1 && end !== -1 && dif !== -1) {
          const datax = msg.slice(beng, end + 1);
          const dataBody = JSON.parse(datax);

          console.log('dataBody: ', dataBody)
          // 倒计时提示文本
          if (dataBody.倒计时?.提示文本) {}

          // 床旁血压计
          if (dataBody.推送类型 === '床旁血压计') {}
          // 中央监控大屏信息
          else if (dataBody.推送类型 === '中央监控大屏信息') {}
          else if (dataBody.推送类型 === '中央监控大屏信息') {
            // 存在透析状态，表示当前设备今天存在排班
            if (dataBody?.透析状态) {} 
            // 不存在就是没有排班
            else {
              deviceData.value.devicdeNo = dataBody.IOT信息?.床号;
              deviceData.value.patientName = '';
              deviceData.value.consumablesCollection = dataBody?.使用耗材字典 || defaultconsumablesCollection();
            }
          }
        }
      };
    };
@@ -87,6 +102,7 @@
    };
    return {
      deviceCode,
      deviceData,
      setDeviceCode,
      source,
      message,

 src/store/type/bedsideAuxiliaryScreen.type.ts

New file
@@ -0,0 +1,35 @@
export interface ConsumablesCollection {
  抗凝剂: string[];
  护理包: string[];
  滤过器: string[];
  穿刺针: string[];
  管路: string[];
  透析器: string[];
  透析模式: string[];
}

export interface DeviceData {
  devicdeNo: string | number;
  patientName: string;
  consumablesCollection: ConsumablesCollection;
}

export const defaultconsumablesCollection = (): ConsumablesCollection => {
  return {
    抗凝剂: [],
    护理包: [],
    滤过器: [],
    穿刺针: [],
    管路: [],
    透析器: [],
    透析模式: [],
  };
};

export const defaultDeviceData = (): DeviceData => {
  return {
    devicdeNo: "",
    patientName: "",
    consumablesCollection: defaultconsumablesCollection(),
  };
};

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

@@ -27,15 +27,19 @@
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.bedside-auxiliary-screen-card {
  display: flex;
  flex-direction: column;
  height: var(--height);
  height: 100%;
  padding: 3px 4px;
  border-radius: 2px;
  background-color: var(--bg-color, #70a3dd);

  .card-header {
    flex: 0 0 6px;
    display: flex;
    align-items: center;
    margin-bottom: 2px;
@@ -62,7 +66,13 @@

  .card-main {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    min-height: 0;
  }
  .card-main > * {
    min-height: 0;
    overflow: hidden;
  }
}
</style>

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

@@ -2,19 +2,19 @@
  <div class="bedside-auxiliary-screen-header">
    <div class="header-left">
      <!-- 设备号 -->
      <span class="info-text">{{ deviceNo }}</span>
      <span class="info-text">{{ bedsideAuxiliaryScreenStore.deviceData.devicdeNo }}</span>
      <!-- 未排班 -->
      <template v-if="type === 0">
      <template v-if="!bedsideAuxiliaryScreenStore.deviceData.patientName">
        <span class="info-text">当前尚未排班</span>
      </template>
      <!-- 有排班 -->
      <template v-else>
        <span class="info-text">{{ name }}</span>
        <!-- <span class="info-text">{{ name }}</span>
        <span class="info-text">{{ age }}岁</span>
        <span class="info-text">{{ gender }}</span>
        <span v-if="formTypeNoText" class="info-text">{{
          formTypeNoText
        }}</span>
        }}</span> -->
      </template>
    </div>
    <div class="header-right">
@@ -41,30 +41,20 @@
import setUpImg from "../../../../img/shezhi.png";
import userImg from "../../../../img/user.png";

type HearderType = 0 | 1; // 0未排班 1其它
type FormType = 0 | 1; // 0门诊 1住院
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";

interface Props {
  type: HearderType; // 类型
  deviceNo: number | string; // 设备号
  name?: string; // 姓名
  age?: number | string; // 年龄
  gender?: string; // 性别
  formType?: FormType; // 患者来源
  formNo?: number | string; // 门诊/住院号
}
const props = defineProps<Props>();
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const settingDeviceDialogRef = ref<any>(null);

const formTypeNoText = computed(() => {
  if (props.formNo) {
    let result = props?.formType === 1 ? "住院号" : "门诊号";
    result += props.formNo;
    return result;
  }
  return "";
});
// const formTypeNoText = computed(() => {
//   if (props.formNo) {
//     let result = props?.formType === 1 ? "住院号" : "门诊号";
//     result += props.formNo;
//     return result;
//   }
//   return "";
// });

const openSettingDeviceDialog = () => {
  settingDeviceDialogRef.value?.openDialog();

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

@@ -10,7 +10,15 @@
        background-color="#FFEDD2"
        class="row1-left"
      >
      <div class=""></div>
        <div class="list-1">
          <div
            v-for="(item, index) in consumablesCollection.抗凝剂"
            :key="index"
            class="list-1-item"
          >
            {{ item }}
          </div>
        </div>
      </Card>
      <div class="row1-content">
        <Card
@@ -18,13 +26,33 @@
          :icon="tslImg"
          background-color="#E5EEFF"
          class="row1-content-card"
        />
        >
          <div class="list-2">
            <div
              v-for="(item, index) in consumablesCollection.透析模式"
              :key="index"
              class="list-2-item"
            >
              {{ item }}
            </div>
          </div>
        </Card>
        <Card
          title="一次性血液透析体外循环管路"
          :icon="tslImg"
          background-color="#D9F0E2"
          class="row1-content-card"
        />
        >
          <div class="list-3">
            <div
              v-for="(item, index) in consumablesCollection.管路"
              :key="index"
              class="list-3-item"
            >
              {{ item }}
            </div>
          </div>
        </Card>
        <Card
          title="一次性使用透析护理包"
          :icon="tslImg"
@@ -37,7 +65,17 @@
        :icon="tslImg"
        background-color="#EFE5FF"
        class="row1-right"
      />
      >
        <div class="list-1">
          <div
            v-for="(item, index) in consumablesCollection.穿刺针"
            :key="index"
            class="list-1-item"
          >
            {{ item }}
          </div>
        </div>
      </Card>
    </div>
    <div class="row2-container">
      <Card
@@ -57,29 +95,41 @@
</template>

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

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

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const consumablesCollection = computed(() => {
  return bedsideAuxiliaryScreenStore.deviceData.consumablesCollection;
});
</script>

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

    min-height: 0; 
    > .row1-left,
    .row1-right {
      width: 103px;
@@ -104,9 +154,50 @@
    display: flex;
    width: 100%;
    gap: 4px;
    min-height: 0; 
    > .row2-card {
      flex: 1;
    }
  }
  .list-1 {
    .list-1-item {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 4px;
      color: #a78718;
      text-align: left;
      font-style: normal;
      &:not(:first-child) {
        margin-top: 2px;
      }
    }
  }
  .list-2 {
    .list-2-item {
      display: inline-block;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 5px;
      color: #3a75b8;
      text-align: left;
      font-style: normal;
      &:not(:first-child) {
        margin-left: 5px;
      }
    }
  }
  .list-3 {
    .list-3-item {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 4px;
      color: #3ab859;
      text-align: left;
      font-style: normal;
      &:not(:first-child) {
        margin-top: 2px;
      }
    }
  }
}
</style>