<template>
|
<div class="homeclass">
|
<!-- 标头 新ui-->
|
<div style="height: 8%; padding-top: 20px">
|
<el-row>
|
<el-col :span="12">
|
<div
|
style="display: grid; grid-template-columns: minmax(200px, 25%) 1fr"
|
>
|
<div style="margin-top: 5px" @click="guyanbi">
|
<img
|
class="image_1"
|
style="margin-left: 20px; display: inline-block"
|
referrerpolicy="no-referrer"
|
src="@/assets/logo.png"
|
/>
|
</div>
|
<div @click="yanzhengTUpian" class="titlecss">自助签到系统</div>
|
</div>
|
</el-col>
|
<el-col
|
v-if="dialogVisible"
|
:span="12"
|
style="text-align: right; padding-top: 10px"
|
>
|
<el-input
|
v-model="inputCode"
|
ref="inputRef"
|
id="inputCode"
|
@change="inputChabge"
|
style="
|
width: 400px;
|
height: 40px;
|
ime-mode: active;
|
margin-right: 20px;
|
"
|
placeholder="请输入患者卡号或扫描条码"
|
/>
|
</el-col>
|
<el-col v-else :span="12">
|
<div class="dateclas" style="float: right; margin-top: 6px">
|
<div class="dateTimeclas" style="float: right">{{ clockNum }}S</div>
|
{{ datetext }}
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 识别后需要显示的内容 -->
|
|
<div
|
v-if="!dialogVisible"
|
style="height: 86%; padding-left: 20px; margin-bottom: 20px"
|
>
|
<el-row style="height: 100%" :gutter="20">
|
<el-col :span="7">
|
<!-- 患者信息 -->
|
<div
|
style="
|
height: 40%;
|
background: rgba(246, 244, 244, 0.3);
|
border-radius: 12px;
|
opacity: 0.9;
|
"
|
>
|
<!-- 性别 -->
|
<div
|
style="
|
width: 100px;
|
height: 50px;
|
line-height: 50px;
|
font-size: 25px;
|
background: #dfb144;
|
color: #ffffff;
|
font-weight: 500;
|
text-align: center;
|
border-radius: 0px 8px 0px 30px;
|
float: right;
|
"
|
>
|
{{patientInfo.patientGenderText}}
|
</div>
|
<!-- 头像和患者信息 -->
|
<div
|
style="
|
display: grid;
|
grid-template-columns: minmax(180px, 40%) 1fr;
|
height: 100%;
|
"
|
>
|
<!-- 头像 -->
|
<div
|
:style="{
|
backgroundImage: `url(${patientInfo.patientAvatarIcon
|
.replace(/\\/g, '/')
|
.replace(/%EF%BF%BD/g, '')})`,
|
}"
|
style="
|
background-size: 100% 100%;
|
height: 100%;
|
border-radius: 12px;
|
"
|
></div>
|
<!-- 患者信息 -->
|
<div
|
style="
|
font-size: 40px;
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
font-weight: 800;
|
padding-left: 5px;
|
padding-top: 60px;
|
color: #ffffff;
|
height: 100%;
|
"
|
>
|
<div
|
style="
|
text-align: left;
|
width: 100%;
|
font-size: 30px;
|
display: flex;
|
align-items: center;
|
line-height: 1.5;
|
white-space: nowrap;
|
"
|
>
|
{{ timeShidaun }}
|
</div>
|
<div
|
style="
|
font-size: 50px;
|
height: 40%;
|
text-align: left;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
line-height: 1.5;
|
white-space: nowrap;
|
"
|
>
|
{{ patientInfo.name }}
|
</div>
|
<div
|
style="
|
font-size: 24px;
|
font-weight: 400;
|
white-space: nowrap;
|
height: 20%;
|
text-align: left;
|
width: 400px;
|
"
|
>
|
透析号:{{ patientInfo.hemoCode }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 下次透析时间 -->
|
<div style="height: 20%">
|
<div
|
style="
|
border-radius: 12px;
|
margin-top: 10px;
|
background-color: rgba(
|
255,
|
255,
|
255,
|
0.2
|
); /* 白色背景 + 20% 不透明 */
|
width: 100%;
|
height: 100%;
|
"
|
>
|
<div
|
style="
|
width: 150px;
|
height: 50px;
|
line-height: 50px;
|
font-size: 25px;
|
background-color: #2caafd;
|
color: #ffffff;
|
font-weight: 500;
|
text-align: center;
|
border-radius: 0px 8px 0px 30px;
|
opacity: 1;
|
float: right;
|
z-index: 10;
|
"
|
>
|
<template v-if="patientInfo.isAfterMed === 0">
|
签到时间
|
</template>
|
<template v-else>下次透析</template>
|
</div>
|
<div style="display: grid; place-items: center; height: 100%">
|
<div
|
style="
|
font-size: 30px;
|
font-weight: 700;
|
white-space: nowrap;
|
padding-left: 20px;
|
color: #ffffff;
|
"
|
>
|
<template v-if="patientInfo.isAfterMed === 0">
|
{{ date.substring(0, 16) }}
|
</template>
|
<template v-else>
|
<span v-if="patientInfo.nextRecordDate">{{
|
patientInfo.nextRecordDate.substring(0, 11)
|
}}</span>
|
|
<span>
|
<template v-if="patientInfo.下次透析时段 === 0"
|
>上午</template
|
>
|
<template v-else-if="patientInfo.下次透析时段 === 1"
|
>下午</template
|
>
|
<template v-else-if="patientInfo.下次透析时段 === 2"
|
>晚上</template
|
>
|
<template v-else>未安排</template>
|
</span>
|
{{ patientInfo.下次透析方案名称 }}
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
style="
|
height: 37%;
|
margin-top: 20px;
|
border-radius: 12px;
|
width: 100%;
|
"
|
>
|
<el-row
|
style="
|
height: 100%;
|
background: rgba(246, 244, 244, 0.3);
|
border-radius: 12px;
|
opacity: 0.9;
|
width: 100%;
|
"
|
>
|
<div
|
class="textwenben"
|
style="
|
height: 28%;
|
font-size: 35px;
|
font-weight: 500;
|
background-color: #dfb144;
|
width: 100%;
|
border-radius: 12px 12px 0 0;
|
"
|
>
|
<template v-if="configData.deviceType === '体重秤'">
|
<template v-if="patientInfo.isAfterMed === 0">
|
分区/床位号
|
</template>
|
<template v-else>干体重(kg)</template>
|
</template>
|
<template v-else> 分区/床位号 </template>
|
</div>
|
<div
|
class="textwenben"
|
style="
|
height: 72%;
|
font-size: 50px;
|
color: #dfb144;
|
font-weight: 1000;
|
text-align: center;
|
background: #ffffff;
|
opacity: 0.8;
|
border-radius: 0 0 12px 12px;
|
width: 100%;
|
"
|
>
|
<template v-if="configData.deviceType === '体重秤'">
|
<template v-if="patientInfo.isAfterMed === 0">
|
{{ patientInfo.设备分区名称 }}<br />{{
|
patientInfo.deviceNo
|
}}
|
</template>
|
<template v-else> {{ patientInfo.pureWeight }} (kg)</template>
|
</template>
|
<template v-else>
|
{{ patientInfo.设备分区名称 }}<br />{{ patientInfo.deviceNo }}
|
</template>
|
</div>
|
</el-row>
|
</div>
|
</el-col>
|
<el-col :span="17">
|
<el-row style="height: 61%; width: 100%" gutter="20">
|
<el-col :span="16">
|
<div style="height: 100%; width: 100%">
|
<div class="cyc-container">
|
<div class="cyc-label">
|
<template v-if="configData.deviceType === '体重秤'">
|
<template v-if="patientInfo.isAfterMed === 0">
|
透 前 称 重
|
</template>
|
<template v-else>
|
透 后 称 重</template
|
>
|
</template>
|
<template v-else>
|
<template v-if="patientInfo.isAfterMed === 0">
|
透 前 血 压
|
</template>
|
<template v-else
|
>透 后 血 压</template
|
>
|
</template>
|
</div>
|
<div class="cyc-value-container">
|
<template v-if="configData.deviceType === '体重秤'">
|
{{ weightInfoResult }}
|
<span v-if="weightInfoResult">KG</span>
|
</template>
|
<template v-else>
|
{{ Number(gao_ya) }}
|
<br />
|
{{ Number(di_ya) }}
|
</template>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div
|
style="
|
background: rgba(246, 244, 244, 0.3);
|
border-radius: 12px;
|
height: calc(50% - 10px);
|
margin-bottom: 20px;
|
"
|
>
|
<div
|
class="textwenben"
|
style="
|
height: 28%;
|
font-size: 35px;
|
font-weight: 500;
|
background-color: #41b593;
|
width: 100%;
|
border-radius: 12px 12px 0 0;
|
"
|
>
|
<template v-if="configData.deviceType === '体重秤'">
|
<template v-if="patientInfo.isAfterMed === 0">
|
上次透后体重(kg)
|
</template>
|
<template v-else>体重减少(kg)</template>
|
</template>
|
<template v-else>
|
<template v-if="patientInfo.isAfterMed === 0">
|
上次透后血压
|
</template>
|
<template v-else>透前血压</template>
|
</template>
|
</div>
|
<div
|
class="textwenben"
|
style="
|
height: 70%;
|
font-size: 80px;
|
color: #41b593;
|
background-color: #ffffff;
|
font-weight: 1000;
|
text-align: center;
|
width: 100%;
|
border-radius: 0 0 12px 12px;
|
"
|
>
|
<template v-if="configData.deviceType === '体重秤'">
|
<template v-if="patientInfo.isAfterMed === 0">
|
{{ patientInfo.lastTimeAfterWeight }}
|
</template>
|
<template v-else>{{ tzjs }}</template>
|
<!-- 体重减少(kg) -->
|
</template>
|
<template v-else>
|
<template v-if="patientInfo.isAfterMed === 0">
|
<span style="font-size: 60px">{{
|
patientInfo.lastTimeAfterBP
|
}}</span>
|
<!-- 上次透后血压(mmgh) -->
|
</template>
|
<template v-else>
|
<span style="font-size: 60px">{{
|
patientInfo.preBP
|
}}</span>
|
<!-- 透前血压(mmgh) -->
|
</template>
|
</template>
|
</div>
|
</div>
|
<div
|
style="
|
background: rgba(246, 244, 244, 0.3);
|
border-radius: 12px;
|
height: calc(50% - 10px);
|
"
|
>
|
<div
|
class="textwenben"
|
style="
|
height: 28%;
|
font-size: 35px;
|
font-weight: 500;
|
background-color: #65aaf6;
|
width: 100%;
|
border-radius: 12px 12px 0 0;
|
"
|
>
|
<template v-if="configData.deviceType === '体重秤'">
|
<template v-if="patientInfo.isAfterMed === 0">
|
目标脱水量(L)
|
</template>
|
<template v-else>实际超滤量(L)</template>
|
</template>
|
<template v-else>
|
<template v-if="patientInfo.isAfterMed === 0">
|
脉搏(次/分)
|
</template>
|
<template v-else> 脉搏(次/分) </template>
|
</template>
|
</div>
|
<div
|
class="textwenben"
|
style="
|
height: 70%;
|
font-size: 80px;
|
color: #65aaf6;
|
font-weight: 1000;
|
background-color: #ffffff;
|
text-align: center;
|
border-radius: 0 0 12px 12px;
|
width: 100%;
|
"
|
>
|
<template v-if="configData.deviceType === '体重秤'">
|
<template v-if="patientInfo.isAfterMed === 0">
|
<!-- 目标脱水量(L) -->
|
{{ aimTSL }}
|
</template>
|
<template v-else>
|
<span v-if="configData.isHiddenActuallyClliang">/</span>
|
<span v-else>{{ patientInfo.actuallyClliang }}</span>
|
</template>
|
<!-- 实际超滤量(L) -->
|
</template>
|
<template v-else>
|
<template v-if="patientInfo.isAfterMed === 0">
|
<!-- 脉搏(次/分) -->
|
{{ mai_bu }}
|
</template>
|
<template v-else>
|
<!-- 脉搏(次/分) -->
|
{{ mai_bu }}
|
</template>
|
</template>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div
|
style="
|
height: 37%;
|
border-radius: 12px;
|
width: calc(100% - 25px);
|
margin-top: 25px;
|
"
|
>
|
<div
|
v-if="configData.deviceType === '体重秤'"
|
ref="myChartRef1"
|
class="echat"
|
style="height: 100%"
|
></div>
|
<div
|
v-if="configData.deviceType === '血压计'"
|
ref="myChartRef2"
|
class="echat"
|
style="height: 100%"
|
></div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 内容 识别窗口页-->
|
<div style="height: 72%" class="parentBody">
|
<div class="rWrapp" style="width: 800px; height: 500px">
|
<video ref="video" id="myVideo" preload="preload" autoplay loop muted />
|
<canvas ref="canvas" width="{this.width}" height="{this.height}" />
|
</div>
|
</div>
|
<div style="height: 18%">
|
<el-row>
|
<el-col
|
:span="6"
|
style="padding-left: 40px; font-size: 34px; color: #ffffff"
|
>
|
{{ date.substring(11, 16) }}
|
<br />
|
<!-- {{formatDate(new Date(),'YYYY-mm-dd')}} -->
|
{{ date.substring(0, 11) }}
|
</el-col>
|
<el-col
|
:span="12"
|
style="
|
font-size: 40px;
|
color: #ffffff;
|
text-align: center;
|
padding-top: 20px;
|
"
|
>
|
请将脸部对准摄像头
|
</el-col>
|
<el-col
|
:span="6"
|
style="
|
font-size: 24px;
|
color: #ffffff;
|
text-align: right;
|
padding-right: 20px;
|
padding-top: 50px;
|
"
|
>
|
<span @click="updateChengxu"> 版本号：{{ getVersion }} </span>
|
</el-col>
|
</el-row>
|
<div></div>
|
</div>
|
|
<div class="footer" style="text-align: right">
|
<div class="fanhuikey" v-if="!dialogVisible" @click="fuxuan">返回</div>
|
</div>
|
<el-dialog v-model="centerDialogVisible" title="" width="40%" align-center>
|
<span>
|
<div>
|
找到该程序根目录下imgs/1708401593426.png下路径 把图片名改成一致
|
就可以测试了，
|
</div>
|
|
<el-button @click="yanzhengTUpianClick">验证</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import * as echarts from "echarts";
|
import {
|
detectSingleFace,
|
nets,
|
matchDimensions,
|
resizeResults,
|
draw,
|
SsdMobilenetv1Options,
|
Box,
|
} from "face-api.js";
|
import * as faceapi from "face-api.js";
|
import { userInfoStore } from "@/stores/userInfo";
|
import { sockteStore } from "@/stores/sockteInfo";
|
import { ipcRenderer } from "electron";
|
import { patientInfoStore } from "@/stores/patient";
|
import {
|
updatePatient,
|
listWeightHistory,
|
listBPHistory,
|
} from "@/api/user/index";
|
import os from "os";
|
import Speech from "speak-tts";
|
import {
|
reactive,
|
computed,
|
toRefs,
|
onMounted,
|
watch,
|
ref,
|
getCurrentInstance,
|
} from "vue";
|
import { sendPationCodeApi } from "../../samples/httpApi";
|
import { formatDate, jgTime, isworkTime } from "@/utils/formatTime";
|
import { confingInfoStore } from "@/stores/StoresConfing";
|
import { base64toFile, yanzhengimg } from "@/samples/faceApi";
|
import { initPort } from "@/samples/portApi";
|
import { initPort as oumulongHbp9030 } from "@/samples/deviceApi/oumulong-HBP-9030";
|
import { initPort as TM2655VP } from "@/samples/deviceApi/TM2655VP";
|
import { initPort as zhiRongT605 } from "@/samples/deviceApi/zhiRongT605";
|
import { initPort as zhiRongHehui } from "@/samples/deviceApi/zhiRongHehui";
|
import { initPort as zhiRongShantou } from "@/samples/deviceApi/zhiRongShantou";
|
import { initPort as taiHengM523 } from "@/samples/deviceApi/taiHengM523";
|
import { initPort as XK3190A12 } from "@/samples/deviceApi/XK3190A12";
|
import { initPort as mbp7000 } from "@/samples/deviceApi/mbp7000";
|
import { initPort as mbp7000qy } from "@/samples/deviceApi/mbp7000qy";
|
import { initPort as omlhbp9020 } from "@/samples/deviceApi/oml-HBP-9020";
|
|
import { initPort as mbp9020 } from "@/samples/deviceApi/mbp-9020";
|
import { initPort as rbp9000c } from "@/samples/deviceApi/RBP-9000c";
|
import { initPort as yuyueDevice } from "@/samples/deviceApi/yuyue";
|
import { initPort as M503 } from "@/samples/deviceApi/M503";
|
import { initPort as seca102 } from "@/samples/deviceApi/seca102";
|
import { initPort as seca101Banger } from "@/samples/deviceApi/seca101Banger";
|
import { initPort as liangjiang } from "@/samples/deviceApi/liangjiang";
|
import { initPort as xinanguojiTZC } from "@/samples/deviceApi/xinanguojiTZC";
|
|
// 引入模块
|
import config from "../../../package.json";
|
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
|
|
// 读取体重文件
|
import { todatatzs } from "@/samples/deviceApi/seca101";
|
import {
|
ElMessage,
|
ElNotification,
|
UploadFile,
|
UploadInstance,
|
UploadProps,
|
} from "element-plus";
|
const { proxy } = getCurrentInstance() as any;
|
// 人脸检测对象
|
const options = new SsdMobilenetv1Options({
|
// 最小置信阈值
|
// 默认值：0.5
|
minConfidence: 0.5,
|
});
|
const getVersion = ref("ss");
|
const canvas = ref("canvas"); // 图像画布
|
const video = ref("video"); // 视频元素
|
const stream = ref(null); // 当前流
|
const getUserMediaFail = ref(false); // 获取用户媒体失败
|
let lsDateTime: any = new Date();
|
const msg = ref<string>("没识别到人脸...");
|
const datetext = ref(formatDate(new Date(), "YYYY-mm-dd WWW"));
|
/**体重发送时候显示在界面的体重 */
|
const weightInfoResult = ref();
|
let timer: any = new Date();
|
const date = ref("");
|
const timeShidaun = ref("");
|
// 语音播报
|
const speech = ref(null);
|
const sockte = sockteStore();
|
const inputRef = ref();
|
// 临时患者code
|
let patientCodeLs = "";
|
// 临时血压
|
let patientCodeLsXy = "";
|
// 测温是否开启
|
const is_ce_wen = ref();
|
const isUseFaceRecogService = ref(false);
|
const fasongNum = ref(0);
|
const caozuo = ref(0); // 点击10下才能关闭
|
const dialogVisible = ref(true);
|
const inputCode = ref("");
|
const clockNum = ref(60);
|
const timerNum = ref(0); //定时器数
|
const aimTSL = ref(""); // 目标脱水量,
|
const actuallyClliang = ref(""); //实际超滤量
|
const gao_ya = ref(""); //高压
|
const di_ya = ref(""); //低压
|
const mai_bu = ref(""); //脉搏,
|
const centerDialogVisible = ref(false);
|
// 打开图片验证
|
const yanzhengTUpian = () => {
|
centerDialogVisible.value = true;
|
};
|
//验证图片
|
const yanzhengTUpianClick = () => {
|
const path = "./imgs/1708401593426.png";
|
yanzhengimg(path);
|
};
|
const tzjs = computed(() => {
|
if (
|
weightInfo.value.result !== "0" &&
|
weightInfo.value.result !== undefined &&
|
weightInfo.value.result !== null
|
) {
|
return (
|
patientInfo.value.preWeight - Number(weightInfo.value.result)
|
).toFixed(1);
|
} else {
|
return "";
|
}
|
});
|
const configData = computed(() => {
|
return confingInfoStore().confingInfo;
|
});
|
|
// 网络链接
|
const netLink = computed(() => {
|
return sockte.netLink;
|
});
|
watch(netLink, () => {
|
if (netLink.value) {
|
ipcRenderer.invoke("logger", `检查网络状态True`);
|
ElMessage.success("网络已经连接");
|
} else {
|
// ElMessage.warning('网络已经断开')
|
ipcRenderer.invoke("logger", `检查网络状态Fales`);
|
}
|
});
|
|
// 体重
|
const weightInfo = computed(() => {
|
return sockte.weightSockte;
|
});
|
// 人脸
|
const faceInfo = computed(() => {
|
return sockte.faceInfoSockte;
|
});
|
// 血压
|
const xyjInfo = computed(() => {
|
return sockte.xyjSockte;
|
});
|
//读卡器
|
const dkqInfo = computed(() => {
|
return sockte.dkqSockte;
|
});
|
// 患者
|
const patientInfo = computed(() => {
|
return patientInfoStore().patientInfo;
|
});
|
const dangqian_wendu = computed(() => {
|
return sockte.wendu;
|
});
|
// 计数
|
const viewNumber = computed(() => {
|
return patientInfoStore().viewNumber;
|
});
|
const settime = () => {
|
clockNum.value = patientInfoStore().viewNumber;
|
};
|
//发送消除某些状态
|
const fuxuan = () => {
|
console.log("返回---");
|
const datetimeCON = patientInfoStore().patientInfo.datetime;
|
// 获取是否是一台主机连2个设备
|
const islinkDouble = confingInfoStore().confingInfo.islinkDouble;
|
// 如果不是就马上清空
|
if (!islinkDouble) {
|
patientInfoStore().setpatientInfo({
|
id: 0,
|
code: "",
|
name: "",
|
patientNamePyFull: "",
|
patientAvatarIcon: "",
|
deviceCode: "",
|
hemoCode: "",
|
pureWeight: "",
|
datetime: datetimeCON,
|
});
|
sockteStore().setweightSockte({
|
type: "体重秤",
|
deviceName: "",
|
result: "0",
|
resultTime: "",
|
state: 2,
|
});
|
sockteStore().setxyjSockte({
|
type: "血压计",
|
deviceName: "",
|
result: "",
|
resultTime: "",
|
state: 2,
|
});
|
sockteStore().setfaceSockte({
|
type: "人脸识别",
|
deviceName: "",
|
result: "",
|
resultTime: "",
|
state: 2,
|
});
|
clockNum.value = patientInfoStore().viewNumber;
|
aimTSL.value = "";
|
|
gao_ya.value = "";
|
di_ya.value = "";
|
mai_bu.value = "";
|
}
|
if (isUseFaceRecogService.value) {
|
console.log("开启人脸识别");
|
lsDateTime = new Date();
|
dialogVisible.value = true;
|
} else {
|
console.log("关闭人脸识别");
|
dialogVisible.value = false;
|
}
|
};
|
const huatu = (
|
series: { name: string; type: string; stack: string; data: any }[],
|
xAxis: any[],
|
legendData: any[],
|
textTitle: string
|
) => {
|
const myChart = echarts.init(proxy.$refs.myChartRef1);
|
const option = {
|
title: {
|
text: textTitle, //'体重趋势图',
|
borderRadius: 5,
|
backgroundColor: "#409EFF",
|
left: 20,
|
top:20,
|
textStyle: {
|
color: "#ffffff",
|
fontSize: 18,
|
},
|
},
|
tooltip: {
|
trigger: "axis",
|
},
|
legend: {
|
textStyle: {
|
fontSize: 18, // 设置字体大小
|
fontWeight: "normal", // 可选：加粗、正常等
|
color: "#333", // 可选：文字颜色
|
},
|
// 其他 legend 配置
|
data: legendData, //['透前体重', '透后体重', '干体重']
|
right: "20px",
|
top: "4%",
|
},
|
grid: {
|
left: "3%",
|
right: "4%",
|
bottom: "3%",
|
containLabel: true,
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
// restore: {}
|
},
|
},
|
xAxis: {
|
type: "category",
|
boundaryGap: false,
|
data: xAxis,
|
},
|
yAxis: {
|
type: "value",
|
axisLabel: {
|
formatter: "{value} kg",
|
},
|
min: 30,
|
minInterval: 1,
|
},
|
series: series,
|
};
|
myChart.setOption(option);
|
};
|
const huatu2 = (
|
series: { name: string; type: string; stack: string; data: any }[],
|
xAxis: any[],
|
legendData: any[],
|
textTitle: string
|
) => {
|
const myChart = echarts.init(proxy.$refs.myChartRef2);
|
const option = {
|
title: {
|
text: textTitle, //'体重趋势图',
|
borderRadius: 5,
|
backgroundColor: "#409EFF",
|
left: 20,
|
top: 20,
|
textStyle: {
|
color: "#ffffff",
|
fontSize: 18,
|
},
|
},
|
tooltip: {
|
trigger: "axis",
|
},
|
legend: {
|
textStyle: {
|
fontSize: 18, // 设置字体大小
|
fontWeight: "normal", // 可选：加粗、正常等
|
color: "#333", // 可选：文字颜色
|
},
|
// 其他 legend 配置
|
data: legendData, //['透前体重', '透后体重', '干体重']
|
right: "20px",
|
top: "4%",
|
},
|
grid: {
|
left: "3%",
|
right: "4%",
|
bottom: "3%",
|
containLabel: true,
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
// restore: {}
|
},
|
},
|
xAxis: {
|
type: "category",
|
boundaryGap: false,
|
data: xAxis,
|
},
|
yAxis: {
|
type: "value",
|
axisLabel: {
|
formatter: "{value}",
|
},
|
min: 30,
|
minInterval: 1,
|
},
|
series: series,
|
};
|
myChart.setOption(option);
|
};
|
// 体重趋势图
|
const intiTubiao = () => {
|
const xAxisData: any[] = [];
|
const series = [
|
{
|
name: "透前体重",
|
type: "line",
|
color: "#E6A23C",
|
smooth: true,
|
data: [],
|
},
|
{
|
name: "透后体重",
|
color: "#409EFF",
|
type: "line",
|
smooth: true,
|
data: <any>[],
|
},
|
{
|
name: "干体重",
|
type: "line",
|
color: "red",
|
smooth: true,
|
data: [],
|
},
|
];
|
listWeightHistory(`patientCode=${patientInfo.value.code}`).then((res) => {
|
console.log(res.data, "-----------------------");
|
if (res.data.length > 0) {
|
res.data.forEach((e: any) => {
|
xAxisData.push(e.透析日期.substring(5, 10));
|
series[0].data.push(e.透前称重);
|
series[1].data.push(e.透后称重);
|
series[2].data.push(e.干体重);
|
});
|
const legendData = ["透前体重", "透后体重", "干体重"];
|
huatu(series, xAxisData, legendData, "体重趋势图");
|
}
|
});
|
};
|
// 血压趋势图
|
const intiTubiaoXY = () => {
|
const xAxisData: any[] = [];
|
const series = [
|
{
|
name: "透前收缩压",
|
type: "line",
|
color: "#E6A23C",
|
smooth: true,
|
data: [],
|
},
|
{
|
name: "透前舒张压",
|
color: "#409EFF",
|
type: "line",
|
smooth: true,
|
data: <any>[],
|
},
|
{
|
name: "透后收缩压",
|
type: "line",
|
color: "#606266",
|
smooth: true,
|
data: [],
|
},
|
{
|
name: "透后舒张压",
|
type: "line",
|
color: "#F56C6C",
|
smooth: true,
|
data: [],
|
},
|
];
|
console.log("xueyasdsad");
|
listBPHistory(`patientCode=${patientInfo.value.code}`).then((res) => {
|
console.log(res.data, "--------sss---");
|
if (res.data.length > 0) {
|
res.data.forEach((e: any) => {
|
xAxisData.push(e.透析日期.substring(5, 10));
|
series[0].data.push(e.透前伸缩压);
|
series[1].data.push(e.透前舒张压);
|
series[2].data.push(e.透后伸缩压);
|
series[3].data.push(e.透后舒张压);
|
});
|
const legendData = [
|
"透前收缩压",
|
"透前舒张压",
|
"透后收缩压",
|
"透后舒张压",
|
];
|
huatu2(series, xAxisData, legendData, "血压趋势图");
|
}
|
});
|
};
|
// 监控患者信息变化
|
watch(
|
() => patientInfo.value.datetime,
|
() => {
|
weightInfoResult.value = "";
|
patientCodeLs = "";
|
patientCodeLsXy = "";
|
aimTSL.value = "";
|
// 定时数秒器
|
|
if (
|
patientInfo.value.id !== 0 &&
|
patientInfo.value.name !== "" &&
|
patientInfo.value.isScheduled === 1
|
) {
|
settime();
|
// 人脸识别成功后 1查看是否开启测温
|
// console.log(`患者信息识别成功:${patientInfo.value.name}`)
|
ipcRenderer.invoke(
|
"logger",
|
`患者信息识别成功:${patientInfo.value.name}`
|
);
|
let str = `${
|
patientInfo.value.patientNamePyFull
|
? patientInfo.value.patientNamePyFull
|
: patientInfo.value.name
|
}识别成功,分区 ${patientInfo.value.设备分区名称},床号：${
|
patientInfo.value.deviceNo
|
},`;
|
dialogVisible.value = false;
|
speech.value?.speak({ text: str }).then(() => {});
|
if (configData.value.deviceType === "体重秤") {
|
setTimeout(() => {
|
intiTubiao();
|
}, 1000);
|
}
|
if (configData.value.deviceType === "血压计") {
|
setTimeout(() => {
|
intiTubiaoXY();
|
}, 1000);
|
}
|
|
sockteStore().setweightSockte({
|
type: "体重秤",
|
state: 2,
|
deviceName: "",
|
result: "0",
|
resultTime: "",
|
});
|
sockteStore().setxyjSockte({
|
type: "血压计",
|
state: 2,
|
deviceName: "",
|
result: "",
|
resultTime: "",
|
});
|
}
|
// 没有找到患者
|
else if (patientInfo.value.name === "") {
|
timer = new Date();
|
ipcRenderer.invoke("logger", "接收到的患者为空");
|
if (isUseFaceRecogService.value) {
|
dialogVisible.value = true;
|
}
|
return;
|
}
|
// 没有排班
|
else if (patientInfo.value.isScheduled === 0) {
|
setTimeout(() => {
|
intiTubiao();
|
}, 1000);
|
setTimeout(() => {
|
// intiTubiaoXY();
|
}, 1000);
|
settime();
|
ipcRenderer.invoke("logger", `患者没有排班:${patientInfo.value.name}`);
|
// console.log( `患者没有排班:${patientInfo.value.name}`)
|
//关闭人脸弹框
|
dialogVisible.value = false;
|
speech.value
|
?.speak({ text: `${patientInfo.value.name}今日没有排班,不能自助签到` })
|
.then(() => {
|
// console.log("播报完成...")
|
});
|
sockteStore().setweightSockte({
|
type: "体重秤",
|
state: 2,
|
deviceName: "",
|
result: "0",
|
resultTime: "",
|
});
|
sockteStore().setxyjSockte({
|
type: "血压计",
|
state: 2,
|
deviceName: "",
|
result: "",
|
resultTime: "",
|
});
|
return;
|
}
|
}
|
);
|
// 体重发生了变化
|
watch(
|
() => weightInfo.value.resultTime,
|
async () => {
|
const X = jgTime(timer, new Date());
|
console.log(X, "收到体重", configData.value.BobaoJg);
|
// 体重不能0
|
if (weightInfo.value.result !== "0" && patientInfo.value.code !== "") {
|
ipcRenderer.invoke("logger", `体重变化了:${weightInfo.value.result}`);
|
console.log(`体重变化了:${weightInfo.value.result}`);
|
// 发送结果到sockte服务
|
const mode = {
|
patientCode: patientInfo.value.code,
|
weight: weightInfo.value.result,
|
bloodPressure: "",
|
};
|
if (patientCodeLs !== mode.patientCode) {
|
settime();
|
// 定时数秒器
|
const tt = mode.weight.replace(".", "点");
|
speech.value?.speak({ text: `称重完成,${tt}千克` }).then(() => {
|
console.log("播报完成...");
|
});
|
patientCodeLs = mode.patientCode;
|
fasongNum.value = 0;
|
ipcRenderer.invoke(
|
"logger",
|
`开始发送结果到服务器：患者：${patientInfo.value.name},体重结果：${weightInfo.value.result}`
|
);
|
console.log(
|
`开始发送结果到服务器：患者：${patientInfo.value.name},体重结果：${weightInfo.value.result}`
|
);
|
sundModeTz();
|
weightInfoResult.value = weightInfo.value.result;
|
} else {
|
// 临时患者code=当前患者code
|
patientCodeLs = mode.patientCode;
|
}
|
// 计算目标脱水量
|
if (
|
Number(weightInfo.value.result) > 0 &&
|
Number(patientInfo.value.pureWeight) !== 0 &&
|
patientInfo.value.isAfterMed === 0
|
) {
|
aimTSL.value = (
|
Number(weightInfo.value.result) -
|
Number(patientInfo.value.pureWeight) -
|
Number(patientInfo.value.clothesWeight)
|
).toFixed(2);
|
} else if (
|
Number(patientInfo.value.pureWeight) !== 0 &&
|
patientInfo.value.isAfterMed === 1 &&
|
patientInfo.value.preWeight > 10
|
) {
|
aimTSL.value = (
|
Number(patientInfo.value.preWeight) -
|
Number(patientInfo.value.pureWeight) -
|
Number(patientInfo.value.clothesWeight)
|
).toFixed(2);
|
}
|
} // 要过设置的10秒才能重复播报这个消息
|
else if (patientInfo.value.code === "" && weightInfo.value.result !== "0") {
|
//10后才执行
|
if (播报是否完成.value) {
|
播报是否完成.value = false;
|
setTimeout(bobaoyuy, configData.value.BobaoJg * 1000);
|
} else {
|
console.log("上一次播报还没完成，放弃这次播报", 播报是否完成.value);
|
}
|
}
|
}
|
);
|
// 默认播报完成
|
const 播报是否完成 = ref(true);
|
const bobaoyuy = () => {
|
if (patientInfo.value.name === "") {
|
speech.value?.speak({
|
text: "没有识别的患者,请先验证患者",
|
onend: () => {
|
console.log("播报完成");
|
|
播报是否完成.value = true;
|
console.log("播报完成111111", 播报是否完成.value);
|
},
|
});
|
播报是否完成.value = true;
|
}
|
};
|
// 血压发送了变化
|
watch(
|
() => xyjInfo.value.resultTime,
|
async () => {
|
if (xyjInfo.value.result !== "") {
|
ipcRenderer.invoke("logger", `血压发生变化了:${weightInfo.value.result}`);
|
console.log(`血压发生变化了:${weightInfo.value.result}`);
|
const list = xyjInfo.value.result.split(",");
|
if (list.length === 3) {
|
gao_ya.value = Number(list[0]).toString();
|
di_ya.value = Number(list[1]).toString();
|
mai_bu.value = Number(list[2]).toString();
|
}
|
// 患者信息为空
|
if (patientInfo.value.id === 0) {
|
speech.value
|
?.speak({ text: "没有识别的患者,请先验证患者" })
|
.then(() => {
|
// console.log("播报完成...")
|
});
|
// 有患者信息
|
} else {
|
speech.value
|
?.speak({
|
text: `收缩压：${gao_ya.value},舒张压：${di_ya.value},脉搏：${mai_bu.value}`,
|
})
|
.then(() => {
|
// console.log("播报完成...")
|
});
|
const mode = {
|
patientCode: patientInfo.value.code,
|
weight: "",
|
bloodPressure: xyjInfo.value.result,
|
};
|
fasongNum.value = 0;
|
// console.log(`开始发送结果到服务器：患者：${patientInfo.value.name},血压结果：${mode.bloodPressure}`)
|
ipcRenderer.invoke(
|
"logger",
|
`开始发送结果到服务器：患者：${patientInfo.value.name},血压结果：${mode.bloodPressure}`
|
);
|
// 定时数秒器
|
settime();
|
sundModeXyj();
|
}
|
} else {
|
gao_ya.value = "";
|
di_ya.value = "";
|
mai_bu.value = "";
|
}
|
}
|
);
|
const sundModeTz = () => {
|
const mode = {
|
patientCode: patientInfo.value.code,
|
weight: weightInfo.value.result,
|
bloodPressure: "",
|
};
|
if (dangqian_wendu.value > 30) {
|
mode.temperature = dangqian_wendu.value;
|
}
|
fasongNum.value++;
|
ipcRenderer.invoke("logger", `患者结果上传,第${fasongNum.value}次`);
|
ipcRenderer.invoke("logger", "参数：" + JSON.stringify(mode));
|
updatePatient(mode)
|
.then((re) => {
|
ElMessage.success("结果发送成功");
|
ipcRenderer.invoke("logger", "结果上传成功");
|
// 测量结果发送成功后就一定要体重秤归零才行 关闭体重秤归零状态为false
|
// 只增对M503
|
if (
|
configData.value.tzc_type === "M503" ||
|
configData.value.tzc_type === "seca101Banger" ||
|
configData.value.tzc_type === "XK3190-A12"
|
) {
|
console.log("发送清理体重归零");
|
sockteStore().setis测量准备(false);
|
}
|
clockNum.value = Number(configData.value.timeJg / 1000);
|
return false;
|
})
|
.catch((re) => {
|
ElMessage("结果发送失败");
|
console.log("结果发送失败");
|
ipcRenderer.invoke(
|
"logger",
|
`结果发送失败:${patientInfo.value.name}第${fasongNum.value}次，3秒后重新发送`
|
);
|
ipcRenderer.invoke(
|
"logger",
|
`发送失败服务器返回异常：${JSON.stringify(re)}`
|
);
|
if (fasongNum.value < 3) {
|
setTimeout(sundModeTz, 5000);
|
} else {
|
ipcRenderer.invoke("logger", "3次结果上传都失败放弃本次请求");
|
return false;
|
}
|
});
|
};
|
const sundModeXyj = () => {
|
const mode = {
|
patientCode: patientInfo.value.code,
|
weight: "",
|
bloodPressure: xyjInfo.value.result,
|
};
|
if (dangqian_wendu.value > 30) {
|
mode.temperature = dangqian_wendu.value;
|
}
|
fasongNum.value++;
|
ipcRenderer.invoke("logger", `患者结果上传,第${fasongNum.value}次`);
|
ipcRenderer.invoke("logger", "参数：" + JSON.stringify(mode));
|
updatePatient(mode)
|
.then((re) => {
|
ElMessage.success("结果发送成功");
|
ipcRenderer.invoke("logger", "结果上传成功");
|
// 倒计时结果显示
|
clockNum.value = Number(configData.value.timeJg / 1000);
|
|
return false;
|
})
|
.catch((re) => {
|
ElMessage("结果发送失败");
|
console.log("结果发送失败");
|
ipcRenderer.invoke(
|
"logger",
|
`结果发送失败:${patientInfo.value.name}第${fasongNum.value}次，3秒后重新发送`
|
);
|
ipcRenderer.invoke(
|
"logger",
|
`发送失败服务器返回异常：${JSON.stringify(re)}`
|
);
|
if (fasongNum.value < 3) {
|
setTimeout(sundModeXyj, 2000);
|
} else {
|
ipcRenderer.invoke("logger", "2次结果上传都失败放弃本次请求");
|
return false;
|
}
|
});
|
};
|
//读卡器变化
|
watch(
|
() => dkqInfo.value.resultTime,
|
() => {
|
dialogVisible.value = false;
|
console.log(dkqInfo.value, "读卡器");
|
if (dkqInfo.value.result !== "" && dkqInfo.value.result !== undefined) {
|
const code = dkqInfo.value.result.split(",")[0];
|
console.log(`获取读卡器的code=${code},发送到服务请求患者信息`);
|
sendPationCodeApi(code);
|
}
|
}
|
);
|
// 患者code 发生变化 从人脸识别得来
|
watch(
|
() => faceInfo.value.result,
|
() => {
|
if (faceInfo.value.result !== "") {
|
console.log(
|
`获取人脸识别code=${faceInfo.value.result},发送到服务请求患者信息`
|
);
|
sendPationCodeApi(faceInfo.value.result);
|
}
|
}
|
);
|
watch(
|
() => viewNumber,
|
() => {
|
clockNum.value = viewNumber.value;
|
}
|
);
|
// 文本框点击事件
|
const inputChabge = () => {
|
console.log(inputCode.value.substring(0, 4) === "1553");
|
// 更具沅江肾病医院的二维码匹配
|
if (inputCode.value.substring(0, 4) === "1553") {
|
const list = inputCode.value.split(":");
|
console.log(list);
|
sendPationCodeApi(list[1]);
|
setTimeout(function () {
|
inputCode.value = "";
|
}, 5000);
|
} else {
|
sendPationCodeApi(inputCode.value);
|
setTimeout(function () {
|
inputCode.value = "";
|
}, 5000);
|
}
|
};
|
// 点击10下关闭程序
|
const guyanbi = () => {
|
caozuo.value++;
|
if (caozuo.value > 10) {
|
ipcRenderer.send("winClose");
|
}
|
};
|
const updateChengxu = () => {
|
console.log("检查更新");
|
if (configData.value.isLanFace === true || sockteStore().isLink) {
|
console.log("是内网不能检查更新");
|
} else {
|
ipcRenderer.invoke("check-update");
|
}
|
};
|
onMounted(() => {
|
console.log("页面初始化", os.hostname());
|
// 调用
|
getVersion.value = config.version;
|
console.log("获得的版本号", config.version);
|
setTimeout(() => {
|
console.log("8秒后执行");
|
updateChengxu();
|
console.log("打印设置文件");
|
console.log(configData.value);
|
is_ce_wen.value = configData.value.Is_ce_wen;
|
if (is_ce_wen.value) {
|
initPort(configData.value.portPath, configData.value.baudRate);
|
}
|
// 是否开启血压计联机
|
if (configData.value.Is_xyj) {
|
if (configData.value.xyj_type === "TM2655") {
|
TM2655VP(
|
configData.value.xueyanjiPortPath,
|
configData.value.xueyanjiBaudRate
|
);
|
} else if (configData.value.xyj_type === "mbp7000") {
|
mbp7000(
|
configData.value.xueyanjiPortPath,
|
configData.value.xueyanjiBaudRate
|
);
|
} else if (configData.value.xyj_type === "mbp7000qy") {
|
mbp7000qy(
|
configData.value.xueyanjiPortPath,
|
configData.value.xueyanjiBaudRate
|
);
|
} else if (configData.value.xyj_type === "mbp9020") {
|
mbp9020(
|
configData.value.xueyanjiPortPath,
|
configData.value.xueyanjiBaudRate
|
);
|
} else if (configData.value.xyj_type === "RBP-9000c") {
|
rbp9000c(
|
configData.value.xueyanjiPortPath,
|
configData.value.xueyanjiBaudRate
|
);
|
// 鱼跃血压计
|
} else if (configData.value.xyj_type === "yuyue") {
|
yuyueDevice(
|
configData.value.xueyanjiPortPath,
|
configData.value.xueyanjiBaudRate
|
);
|
} else if (configData.value.xyj_type === "oml-HBP-9020") {
|
omlhbp9020(
|
configData.value.xueyanjiPortPath,
|
configData.value.xueyanjiBaudRate
|
);
|
} else {
|
oumulongHbp9030(
|
configData.value.xueyanjiPortPath,
|
configData.value.xueyanjiBaudRate
|
);
|
}
|
}
|
// 是否开启志荣体重秤联机
|
if (configData.value.Is_tzc) {
|
//台衡M523
|
if (configData.value.tzc_type === "taiHengM523") {
|
taiHengM523(configData.value.tzcPortPath, configData.value.tzcBaudRate);
|
} else if (configData.value.tzc_type === "M503") {
|
M503(configData.value.tzcPortPath, configData.value.tzcBaudRate);
|
} else if (configData.value.tzc_type === "seca102") {
|
seca102(configData.value.tzcPortPath, configData.value.tzcBaudRate);
|
}
|
// seca101读取文件
|
else if (configData.value.tzc_type === "seca101Banger") {
|
seca101Banger(
|
configData.value.tzcPortPath,
|
configData.value.tzcBaudRate
|
);
|
} // 耀华XK3190-A12
|
else if (configData.value.tzc_type === "XK3190-A12") {
|
XK3190A12(configData.value.tzcPortPath, configData.value.tzcBaudRate);
|
} else if (configData.value.tzc_type === "zhiRongHehui") {
|
zhiRongHehui(
|
configData.value.tzcPortPath,
|
configData.value.tzcBaudRate
|
);
|
// 福州连江 就是1200 南京圣洁 9600
|
} else if (configData.value.tzc_type === "lianjiang") {
|
liangjiang(configData.value.tzcPortPath, configData.value.tzcBaudRate);
|
} else if (configData.value.tzc_type === "xinanguojiTZC") {
|
xinanguojiTZC(configData.value.tzcPortPath, 9600);
|
}
|
// 志荣粤康 2400
|
else if (configData.value.tzc_type === "zhiRongShantou") {
|
zhiRongShantou(
|
configData.value.tzcPortPath,
|
configData.value.tzcBaudRate
|
);
|
} else {
|
zhiRongT605(configData.value.tzcPortPath, configData.value.tzcBaudRate);
|
}
|
}
|
// 是否开启脸识别
|
isUseFaceRecogService.value = configData.value.isUseFaceRecogService;
|
console.log("人脸识别", isUseFaceRecogService.value);
|
if (isUseFaceRecogService.value) {
|
console.log("开启人脸识别");
|
faceapi.env.monkeyPatch({
|
Canvas: HTMLCanvasElement,
|
Image: HTMLImageElement,
|
ImageData: ImageData,
|
Video: HTMLVideoElement,
|
createCanvasElement: () => document.createElement("canvas"),
|
createImageElement: () => document.createElement("img"),
|
});
|
// 获取用户媒体流
|
getUserMedia(
|
(streams: null) => {
|
console.log("打开视频流");
|
//后续用于停止视频流
|
stream.value = streams;
|
//显示视频
|
if (video.value) {
|
video.value["srcObject"] = streams;
|
}
|
},
|
(error: any) => (getUserMediaFail.value = true)
|
);
|
init();
|
setTimeout(() => {
|
detectFace();
|
}, 2000);
|
dialogVisible.value = true;
|
} else {
|
console.log("关闭人脸识别");
|
dialogVisible.value = false;
|
}
|
clockNum.value = patientInfoStore().viewNumber;
|
setInterval(function () {
|
clockNum.value--;
|
if (clockNum.value === 0) {
|
fuxuan();
|
}
|
datetext.value = formatDate(new Date(), "YYYY-mm-dd WWW");
|
date.value = formatDate(new Date(), "YYYY-mm-dd HH:MM");
|
if (Number(date.value.substring(11, 13)) < 12) {
|
timeShidaun.value = "上午好！";
|
} else if (Number(date.value.substring(11, 13)) < 18) {
|
timeShidaun.value = "下午好！";
|
} else {
|
timeShidaun.value = "晚上好！";
|
}
|
// 验证人脸识别已经通过但是还没有体重数据主动获取数据
|
if (
|
patientInfo.value.name !== "" &&
|
weightInfo.value.result === "0" &&
|
configData.value.Is_tzc &&
|
configData.value.tzc_type === "seca101"
|
) {
|
console.log("主动获取体重");
|
todatatzs(patientInfo.value.datetime);
|
}
|
if (inputRef.value !== null) {
|
inputRef.value.focus();
|
}
|
}, 1000);
|
speech.value = new Speech();
|
speech.value?.setLanguage("zh-CN");
|
speech.value?.init().then(() => {
|
console.log("加载人脸采集模型成功");
|
});
|
}, 8000);
|
});
|
/** @name 人脸检测 */
|
const detectFace: any = async () => {
|
//非常重要：防止卡死
|
await new Promise((resolve) => requestAnimationFrame(resolve));
|
//绘制取景框
|
// drawViewFinder()
|
if (
|
!canvas.value ||
|
!video.value ||
|
!video.value.currentTime ||
|
video.value.paused ||
|
video.value.ended
|
)
|
return detectFace();
|
// 检测图像中具有最高置信度得分的脸部
|
const result = await detectSingleFace(video.value, options);
|
if (!result) return detectFace();
|
// 匹配尺寸
|
const dims = matchDimensions(canvas.value, video.value, true);
|
// 调整检测到的框的大小，以防显示的图像的大小与原始
|
const resizedResult = resizeResults(result, dims);
|
const box = resizedResult.box;
|
// 不要小头像
|
// console.log('000')
|
const h =
|
configData.value.imgHeight === undefined ? 140 : configData.value.imgHeight;
|
// console.log('000',h)
|
if (box._height < h) return detectFace();
|
//检测框是否在取景框内
|
// if (!checkInViewFinder(box)) return detectFace()
|
// drawViewFinder()
|
//将检测结果绘制到画布（此处不用，可以直接用来绘制检测到的人脸盒子）
|
draw.drawDetections(canvas.value, resizedResult.box);
|
drawBox(box, "");
|
// video.value.pause()
|
// //截取人脸图片
|
const image = await cameraShoot(
|
video.value,
|
resizedResult.box.topLeft,
|
resizedResult.box.width,
|
resizedResult.box.height
|
);
|
if (!image) {
|
drawBox(box, "识别失败");
|
// 开启识别
|
// video.value.play()
|
return detectFace();
|
}
|
const X = jgTime(lsDateTime, new Date());
|
//人脸上传到阿里云
|
// 只有是结果归零状态才能进行识别
|
if (
|
dialogVisible.value &&
|
X > configData.value.face_push &&
|
sockteStore().is测量准备
|
) {
|
lsDateTime = new Date();
|
base64toFile(image);
|
}
|
return detectFace();
|
};
|
// 加载算法模型 文件存储在 public 文件夹下models文件夹。// 需要文件的话联系我
|
const init = async () => {
|
await nets.ssdMobilenetv1.loadFromUri("./models");
|
};
|
/** @name 调用摄像头 */
|
const getUserMedia = (
|
success: NavigatorUserMediaSuccessCallback,
|
error: NavigatorUserMediaErrorCallback
|
) => {
|
const constraints = {
|
audio: false,
|
video: {
|
width: 800,
|
height: 500,
|
},
|
};
|
if (navigator.mediaDevices.getUserMedia) {
|
// 最新的标准API
|
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
|
} else if (navigator.webkitGetUserMedia) {
|
// webkit核心浏览器
|
navigator.webkitGetUserMedia(constraints, success, error);
|
} else if (navigator.mozGetUserMedia) {
|
// firfox浏览器
|
navigator.mozGetUserMedia(constraints, success, error);
|
} else if (navigator.getUserMedia) {
|
// 旧版API
|
navigator.getUserMedia(constraints, success, error);
|
}
|
};
|
/** @name 截取快照 */
|
const cameraShoot = (
|
video: HTMLVideoElement,
|
startPoint: { x: number; y: number },
|
width: number,
|
height: number
|
) => {
|
const canvas = document.createElement("canvas");
|
canvas.width = video.videoWidth;
|
canvas.height = video.videoHeight;
|
// 参数：图片，裁剪开始x坐标，裁剪开始y坐标，裁剪宽度，裁剪高度，目标x坐标，目标y坐标，目标宽度，目标高度
|
// context.drawImage(image, 100, 100, 200, 200, 0, 0, 200, 200);
|
canvas
|
.getContext("2d")
|
?.drawImage(
|
video,
|
startPoint.x - 20,
|
startPoint.y - 20,
|
width + 60,
|
height + 60,
|
20,
|
20,
|
width + 60,
|
height + 60
|
);
|
const imgSrc = canvas?.toDataURL("image/png");
|
|
return imgSrc;
|
};
|
// 画盒子
|
const drawBox = (
|
box: Box<any> | faceapi.IBoundingBox | faceapi.IRect,
|
label: string
|
) => {
|
if (!canvas.value) return;
|
const context = canvas.value.getContext("2d");
|
context?.clearRect(box.x, box.y, box.width, box.height);
|
const drawBox = new draw.DrawBox(box, {
|
label: label,
|
boxColor: "#409EFF",
|
});
|
drawBox.draw(canvas.value);
|
};
|
// 停止
|
const handleStopVideo = () => {
|
if (stream.value) {
|
stream.value.getTracks().forEach((track: { stop: () => void }) => {
|
track.stop();
|
});
|
}
|
};
|
</script>
|
<style src="./index.css" />
|
<style lang="less" scoped>
|
.titlecss {
|
border-left: 1px solid #ffffff;
|
padding-left: 20px;
|
// margin-bottom: 20px;
|
font-size: 40px;
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
font-weight: 500;
|
color: #ffffff;
|
line-height: 48px;
|
height: 54px;
|
}
|
.textwenben {
|
display: grid;
|
place-items: center;
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
font-weight: 500;
|
color: #ffffff;
|
}
|
.parentBody {
|
display: grid;
|
place-items: center;
|
}
|
.echat {
|
background-color: #ffffff;
|
border-radius: 12px;
|
}
|
.dateclas {
|
width: 404px;
|
height: 42px;
|
padding-left: 10px;
|
background: #ffffff;
|
color: #345683;
|
font-weight: 400;
|
// // text-align: center;
|
line-height: 42px;
|
box-shadow: 0px 2px 4px 0px rgba(112, 163, 221, 0.5);
|
border-radius: 20px;
|
font-size: 30px;
|
}
|
.dateTimeclas {
|
height: 42px;
|
text-align: center;
|
width: 120px;
|
line-height: 42px;
|
background: #65aaf6;
|
box-shadow: 2px 2px 4px 0px rgba(112, 163, 221, 0.5);
|
border-radius: 16px;
|
font-size: 30px;
|
color: #ffffff;
|
}
|
|
.rWrapp {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
// transform: rotateY(180deg);
|
overflow: hidden;
|
canvas {
|
position: absolute;
|
top: 0;
|
width: 800px;
|
height: 500px;
|
border-radius: 20%;
|
}
|
video {
|
object-fit: fill;
|
width: 800px;
|
height: 500px;
|
border-radius: 20px;
|
}
|
}
|
.footer {
|
height: 120px;
|
width: 120%;
|
line-height: 120px;
|
font-size: 2rem;
|
color: beige;
|
// background-color: #922d2d;
|
position: fixed;
|
bottom: 0px;
|
text-align: right;
|
}
|
.fanhuikey {
|
text-align: center;
|
background: rgba(101, 170, 246, 0.7);
|
height: 120px;
|
line-height: 120px;
|
width: 120px;
|
line-height: 120px;
|
font-size: 2rem;
|
color: beige;
|
border-radius: 60px 60px 60px 60px;
|
position: fixed;
|
right: 0;
|
}
|
::v-deep .el-input__wrapper {
|
background-color: transparent !important;
|
color: #ffffff;
|
}
|
//提示框的字体颜色
|
::v-deep input::-webkit-input-placeholder {
|
color: #fff;
|
}
|
::v-deep input::-moz-input-placeholder {
|
color: #fff;
|
}
|
::v-deep input::-ms-input-placeholder {
|
color: #fff;
|
}
|
.cyc-container {
|
width: 100%;
|
height: 100%;
|
border-radius: 12px;
|
// background-color: #65aaf6;
|
display: grid;
|
grid-template-columns: minmax(80px, 80px) 1fr;
|
text-align: center;
|
// grid-template-columns: minmax(150px, 25%) 1fr;
|
background-color: rgba(255, 255, 255, 0.2); /* 白色背景 + 20% 不透明 */
|
}
|
.cyc-label {
|
height: 100%;
|
border-radius: 12px 0px 0px 12px;
|
writing-mode: vertical-rl;
|
background: #41b593;
|
line-height: 80px;
|
font-size: 40px;
|
width: 80px;
|
font-weight: 500;
|
text-align: center;
|
color: #ffffff;
|
}
|
.cyc-value-container {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 120px;
|
color: #ffffff;
|
font-weight: 800;
|
}
|
</style>
|
