单应用项目,可以创建很多独立工具类页面 ,不用登录 初始化的页面
zhangchen
2025-09-17 74ad066b13429169b3990a507a978a9d4e3fc0cf
src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue
@@ -251,7 +251,8 @@
              <tr>
                <td>体重增长</td>
                <td class="flex-td">
                  <span class="sub-text">(透前-干体重)</span><span class="text-right">{{ weightGain2 }}kg</span>
                  <span class="sub-text">(透前-干体重)</span
                  ><span class="text-right">{{ weightGain2 }}kg</span>
                </td>
              </tr>
              <!-- <tr>
@@ -294,14 +295,15 @@
        @click="() => onScheduledTasksClick()"
        class="btn"
      />
      <BlockBotttom
      <!-- <BlockBotttom
        :icon="jiaoHaoImg"
        text="叫号"
        backgroundColor="#20C6B6"
        @click="() => onCallBumberClick()"
        class="btn"
      />
      /> -->
      <BlockBotttom
        v-if="isShowStartBtn"
        :icon="kaiShiImg"
        text="开始"
        backgroundColor="#409EFF"
@@ -311,6 +313,8 @@
    </div>
    <!-- 定时任务 -->
    <ScheduledTaskDialog ref="scheduledTaskDialogRef" />
    <!-- 开始透析组件 -->
    <StartDialysis ref="startDialysisRef" />
  </div>
</template>
<script lang="ts" setup name="SignedIn">
@@ -345,9 +349,11 @@
// @ts-ignore
import BlockBotttom from "../components/BlockBotttom.vue";
import { ElMessage } from "element-plus";
import { EMedStatus } from '@/store/type/bedsideAuxiliaryScreen.type';
const ScheduledTaskDialog = defineAsyncComponent(
  () => import("../components/ScheduledTask.vue")
);
const StartDialysis = defineAsyncComponent(() => import('../components/StartDialysis/index.vue'));
interface Props {
  height: number;
@@ -358,7 +364,7 @@
const bloodPressureRectangularChart = ref<HTMLElement | null>(null);
const scheduledTaskDialogRef = ref<any>(null);
const startDialysisRef = ref<any>(null);
const pageData = computed(() => {
  return Object.assign(bedsideAuxiliaryScreenStore.deviceData.signedIn, {
@@ -416,12 +422,19 @@
  return formattedValue;
});
/**
 * 是否显示开始透析按钮
 */
const isShowStartBtn = computed(() => {
  return +bedsideAuxiliaryScreenStore.deviceData.treatmentStatus === EMedStatus.SIGNED_IN;
})
watch(
  () => pageData.value.四点血压图数据,
  (newVal) => {
    genderBloodPressureRectangularChart(newVal);
});
  }
);
/** 点击定时任务 */
const onScheduledTasksClick = () => {
@@ -441,20 +454,27 @@
};
const onStartClick = () => {
  ElMessage({
    message: "功能开发中,敬请期待!",
    type: "warning",
  });
  if (
    !bedsideAuxiliaryScreenStore.deviceCode ||
    !bedsideAuxiliaryScreenStore.deviceData.deviceCode
  )
    return ElMessage.warning("未初始化或正在进行初始化操作中");
  if (!bedsideAuxiliaryScreenStore.userInfo?.token)
    return ElMessage.warning("请登录");
  startDialysisRef.value?.openDialog();
};
const genderBloodPressureRectangularChart = (datas: 四点血压图数据[] | null) => {
const genderBloodPressureRectangularChart = (
  datas: 四点血压图数据[] | null
) => {
  if (!bloodPressureRectangularChart.value) return;
  const benchmarkData = { width: 386, height: 280 };
  // 获取容器宽高(90% 缩放)
  const containerWidth = bloodPressureRectangularChart.value.offsetWidth * 0.9;
  const containerHeight = bloodPressureRectangularChart.value.offsetHeight * 0.9;
  const containerHeight =
    bloodPressureRectangularChart.value.offsetHeight * 0.9;
  // 获取设备像素比
  const dpr = window.devicePixelRatio || 1;
@@ -515,10 +535,22 @@
  // ========== 血压数据 ==========
  const measurements = [
    { systolic: datas?.[0]?.血压1_透前收缩压 ?? 0, diastolic: datas?.[0]?.血压1_透前舒张压 ?? 0 },
    { systolic: datas?.[0]?.血压2_前半程最低收缩压 ?? 0, diastolic: datas?.[0]?.血压2_前半程最低舒张压 ?? 0 },
    { systolic: datas?.[0]?.血压3_后半程最低收缩压 ?? 0, diastolic: datas?.[0]?.血压3_后半程最低舒张压 ?? 0 },
    { systolic: datas?.[0]?.血压4_透后收缩压 ?? 0, diastolic: datas?.[0]?.血压4_透后舒张压 ?? 0 },
    {
      systolic: datas?.[0]?.血压1_透前收缩压 ?? 0,
      diastolic: datas?.[0]?.血压1_透前舒张压 ?? 0,
    },
    {
      systolic: datas?.[0]?.血压2_前半程最低收缩压 ?? 0,
      diastolic: datas?.[0]?.血压2_前半程最低舒张压 ?? 0,
    },
    {
      systolic: datas?.[0]?.血压3_后半程最低收缩压 ?? 0,
      diastolic: datas?.[0]?.血压3_后半程最低舒张压 ?? 0,
    },
    {
      systolic: datas?.[0]?.血压4_透后收缩压 ?? 0,
      diastolic: datas?.[0]?.血压4_透后舒张压 ?? 0,
    },
  ];
  const measurementWidth = chartWidth / (measurements.length + 1);
@@ -580,10 +612,7 @@
  const cylinderHeight = 计算脱水量刻度 * (datas?.[0]?.超滤总量 || 0);
  const 体重增长_透前减干体重 = weightGain2.value;
  const 透前减干体重减超滤总量差值 =
  Math.round(
    (体重增长_透前减干体重 - (datas?.[0]?.超滤总量 || 0)) * 10
  ) / 10;
    Math.round((体重增长_透前减干体重 - (datas?.[0]?.超滤总量 || 0)) * 10) / 10;
  drawCylinder(
    ctx,
@@ -597,13 +626,11 @@
    datas?.[0]?.脱水百分比 ?? 0,
    datas?.[0]?.透后体重减干体重的差值 ?? 0,
    体重增长_透前减干体重,
    透前减干体重减超滤总量差值,
    透前减干体重减超滤总量差值
  );
  ctx.restore(); // 恢复
};
const drawCylinder = (
  ctx: CanvasRenderingContext2D,
@@ -617,7 +644,7 @@
  脱水百分比: number, // 脱水百分比
  透后体重减干体重的差值: number, // 透后体重减干体重的差值
  体重增长_透前减干体重: number, // 体重增长_透前减干体重
  透前减干体重减超滤总量差值: number, // 透前减干体重减超滤总量差值
  透前减干体重减超滤总量差值: number // 透前减干体重减超滤总量差值
) => {
  ctx.beginPath();
  ctx.arc(x, y + height, radius, 0, Math.PI * 2);
@@ -652,24 +679,26 @@
  // 如果超滤总量 与 体重增长_透前减干体重 相等,则显示 "/超滤总量"
  if (Number(超滤总量) && 体重增长_透前减干体重 === Number(超滤总量)) {
      ctx.font = `${baseFontSize * scale}px Arial`;
      ctx.textAlign = "center";
      ctx.fillStyle = "#07c160";
      ctx.fillText('/' + 超滤总量, textX, canvasHeight - height + height * 0.3 + 10);
    ctx.font = `${baseFontSize * scale}px Arial`;
    ctx.textAlign = "center";
    ctx.fillStyle = "#07c160";
    ctx.fillText(
      "/" + 超滤总量,
      textX,
      canvasHeight - height + height * 0.3 + 10
    );
  } else {
    // 透析前-干体重
    ctx.font = `${baseFontSize * scale}px Arial`;
    ctx.textAlign = "center";
    ctx.fillStyle = "#409EFF";
    ctx.fillText(体重增长_透前减干体重 + '', textX, canvasHeight - height + 10);
    ctx.fillText(体重增长_透前减干体重 + "", textX, canvasHeight - height + 10);
    // 超滤总量
    ctx.font = `${baseFontSize * scale}px Arial`;
    ctx.textAlign = "center";
    ctx.fillStyle = "#07c160";
    ctx.fillText(超滤总量, textX, canvasHeight - height + height * 0.3 + 10);
  }
  if (透前减干体重减超滤总量差值 > 0) {
    ctx.font = `${baseFontSize * scale}px Arial`;
@@ -1095,7 +1124,7 @@
        font-size: 3px;
        color: #666;
        margin-right: 1.2px;
         white-space: nowrap;
        white-space: nowrap;
      }
      // .text-right {
      //   position: absolute;