ID1825-暂存

zhangchen

2025-07-08 fcf82308bc9478fd88b7e64160cf47dc9bb00b68

ID1825-暂存

 src/img/user.png

 src/router/index.ts

@@ -1,8 +1,8 @@
// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue'; // 假设这是你的主页组件
import deviceWindows from '../views/deviceWindows.vue'
import deviceWindows2 from '../views/deviceWindoes2.vue'
// import Home from '../views/Home.vue'; // 假设这是你的主页组件
// import deviceWindows from '../views/deviceWindows.vue'
// import deviceWindows2 from '../views/deviceWindoes2.vue'
import test from '../views/test.vue'; // 搜索结果页，接收查询参数
import registerForNutrition from '../views/register/index.vue'
import registerSuu from '../views/registerSuu/index.vue'

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

New file
@@ -0,0 +1,17 @@
<template>
  <div class="bedside-auxiliary-screen-card"></div>
</template>

<script lang="ts" setup name="Card">
interface Props {
    backgrondColor: string; // 背景颜色
    title: string; // 标题
    
}
</script>

<style lang="less" scoped>
.bedside-auxiliary-screen-card {

}
</style>

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

@@ -1,11 +1,102 @@
<template>
    <div class="">1111111111</div>
  <div class="bedside-auxiliary-screen-header">
    <div class="header-left">
      <!-- 设备号 -->
      <span class="info-text">{{ deviceNo }}</span>
      <!-- 未排班 -->
      <template v-if="type === 0">
        <span class="info-text">当前尚未排班</span>
      </template>
      <!-- 有排班 -->
      <template v-else>
        <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>
      </template>
    </div>
    <div class="header-right">
      <img :src="atRegularTimeImg" class="btn-img" alt="" />
      <img :src="setUpImg" class="btn-img" alt="" />
      <img :src="userImg" class="btn-img" alt="" />
    </div>
  </div>
</template>

<script lang="ts" setup name="Header">
import { computed } from "vue";
import atRegularTimeImg from "../../../../img/dingshi.png";
import setUpImg from "../../../../img/shezhi.png";
import userImg from "../../../../img/user.png";

type HearderType = 0 | 1; // 0未排班 1其它
type FormType = 0 | 1; // 0门诊 1住院

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

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

<style>
<style lang="less" scoped>
.bedside-auxiliary-screen-header {
  width: 100%;
  height: 25px;
  padding: 0 15px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #70a3dd;
  border-radius: 1px 0px 5px 5px;
  .header-left {
    display: flex;
    align-items: center;
    .info-text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 11px;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      &:not(:first-child) {
        margin-left: 6px;
      }
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    .btn-img {
      height: 10px;
      object-fit: contain;
      cursor: pointer;
      &:not(:first-child) {
        margin-left: 9px;
      }
      &:active {
        opacity: 0.6;
        transform: scale(0.95);
      }

      transition: all 0.2s;
    }
  }
}
</style>

 src/views/mobile/bedsideAuxiliaryScreen/index.vue

@@ -1,11 +1,12 @@
<template>
    <div class="bedside-auxiliary-screen-container">
        张三
        <Header />
        <Header :type="0" device-no="03" />
        <div class="bedside-auxiliary-screen-content"></div>
    </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import Header from './components/Header.vue';
</script>

@@ -16,6 +17,8 @@
    box-sizing: border-box;
}
.bedside-auxiliary-screen-container {
    font-size: 48px;
    .bedside-auxiliary-screen-content {
        padding: 6px 12px 0;
    }
}
</style>