Skip to content

F
frontend-h5
Commit 828bc0fc authored by songrui's avatar songrui
Browse files
Options

血压测量组件

parent 4aaaaf86
Show whitespace changes
Inline Side-by-side
Showing with 339 additions and 22 deletions
src/api/base.js
View file @ 828bc0fc
...@@ -51,4 +51,13 @@ export function getTemplateById() { ...@@ -51,4 +51,13 @@ export function getTemplateById() {
return fetchBase({ url: `/tumour-admin/v1/h5-app/dict`, loading: true }) return fetchBase({ url: `/tumour-admin/v1/h5-app/dict`, loading: true })
} }
// 血压计-根据单位ID查询绑定的设备
export function getPressureDevices(unitId) {
return fetchBase({ url: '/chronic-admin/v1/base-info/list-device', body: { unitId } })
}
// 血压计-根据设备编码查询测量过的数据
export function getPressureData(deviceNo) {
return fetchBase({ url: '/chronic-admin/v1/base-info/list-blood', body: { deviceNo } })
}
src/assets/icons/doctor/doc-thermometer.svg 0 → 100644
View file @ 828bc0fc
<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5 0.5C19.2956 0.5 20.0587 0.816071 20.6213 1.37868C21.1839 1.94129 21.5 2.70435 21.5 3.5C21.5 4.955 20.921 7.3295 19.2515 7.883L19.25 14.75C19.2527 16.4783 18.5923 18.1418 17.405 19.3977C16.2176 20.6536 14.5938 21.4063 12.868 21.5005C11.1423 21.5947 9.44612 21.0234 8.12909 19.9042C6.81206 18.7851 5.9745 17.2033 5.789 15.485C2.927 15.3815 0.6785 14.645 0.509 13.7345L0.5075 13.7L0.5 2.75C0.5 1.508 3.185 0.5 6.5 0.5C9.6875 0.5 12.2945 1.4315 12.488 2.609L12.494 2.675L12.4925 2.651L12.497 2.675L12.5 2.75V4.508C13.3773 4.81852 14.1367 5.3933 14.6739 6.15324C15.211 6.91317 15.4994 7.8209 15.4994 8.7515C15.4994 9.6821 15.211 10.5898 14.6739 11.3498C14.1367 12.1097 13.3773 12.6845 12.5 12.995V13.7C12.38 14.6165 10.16 15.365 7.3025 15.4835C7.47951 16.8062 8.15383 18.0117 9.18825 18.8548C10.2227 19.6978 11.5394 20.1151 12.8706 20.0216C14.2018 19.9282 15.4473 19.331 16.3538 18.3517C17.2603 17.3723 17.7595 16.0844 17.75 14.75V7.883C16.0805 7.331 15.5 4.958 15.5 3.5C15.5 2.70435 15.8161 1.94129 16.3787 1.37868C16.9413 0.816071 17.7044 0.5 18.5 0.5ZM11 5.45C10.5666 5.45 10.1375 5.53536 9.73714 5.7012C9.33677 5.86704 8.97298 6.11011 8.66655 6.41655C8.36011 6.72298 8.11704 7.08677 7.9512 7.48714C7.78536 7.88752 7.7 8.31664 7.7 8.75C7.7 9.18336 7.78536 9.61248 7.9512 10.0129C8.11704 10.4132 8.36011 10.777 8.66655 11.0835C8.97298 11.3899 9.33677 11.633 9.73714 11.7988C10.1375 11.9646 10.5666 12.05 11 12.05C11.8752 12.05 12.7146 11.7023 13.3335 11.0835C13.9523 10.4646 14.3 9.62522 14.3 8.75C14.3 7.87479 13.9523 7.03542 13.3335 6.41655C12.7146 5.79768 11.8752 5.45 11 5.45ZM11 6.05C11.0591 6.05 11.1176 6.06164 11.1722 6.08425C11.2268 6.10687 11.2764 6.14002 11.3182 6.1818C11.36 6.22359 11.3931 6.2732 11.4157 6.32779C11.4384 6.38239 11.45 6.44091 11.45 6.5V7.718C11.6867 7.82153 11.8806 8.00339 11.9991 8.23303C12.1175 8.46267 12.1533 8.72608 12.1004 8.979C12.0476 9.23192 11.9092 9.45892 11.7087 9.62187C11.5081 9.78481 11.2576 9.87375 10.9992 9.87375C10.7409 9.87375 10.4904 9.78481 10.2898 9.62187C10.0893 9.45892 9.95095 9.23192 9.89806 8.979C9.84518 8.72608 9.88097 8.46267 9.99942 8.23303C10.1179 8.00339 10.3118 7.82153 10.5485 7.718L10.55 6.5C10.55 6.38065 10.5974 6.26619 10.6818 6.1818C10.7662 6.09741 10.8807 6.05 11 6.05ZM6.5 2C5.057 2 3.722 2.2115 2.7845 2.564L2.6345 2.6225L2.3525 2.75L2.564 2.849L2.7845 2.936C3.722 3.29 5.057 3.5 6.5 3.5C7.943 3.5 9.278 3.2885 10.2155 2.936L10.3655 2.8775L10.646 2.7485L10.436 2.651L10.2155 2.564C9.278 2.21 7.943 2 6.5 2Z"/>
</svg>
src/doctor/Doctor.vue
View file @ 828bc0fc
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
</KeepAlive> </KeepAlive>
</Transition> </Transition>
</router-view> </router-view>
<BloodPressure :pressureObj="pressureObj"/>
</div> </div>
</van-config-provider> </van-config-provider>
</template> </template>
...@@ -17,10 +18,20 @@ import { getDict } from '@/api/base.js' ...@@ -17,10 +18,20 @@ import { getDict } from '@/api/base.js'
import { useStore } from './store/index.js' import { useStore } from './store/index.js'
import { backHome, getQueryVariable } from '@/utils/common' import { backHome, getQueryVariable } from '@/utils/common'
import { getAuthInfo } from '@/api/doctor/generalFU' import { getAuthInfo } from '@/api/doctor/generalFU'
import BloodPressure from '@/doctor/components/bloodPressure/BloodPressure.vue'
export default { export default {
components: {
BloodPressure
},
provide() {
return {
pressureObj: this.pressureObj
}
},
data() { data() {
return { return {
store: useStore(),
visible: false, visible: false,
themeVars: { themeVars: {
primaryColor: '#607FF0', primaryColor: '#607FF0',
...@@ -39,12 +50,10 @@ export default { ...@@ -39,12 +50,10 @@ export default {
cellBorderColor: '#d9d9d9', cellBorderColor: '#d9d9d9',
navBarIconColor: '#262626', navBarIconColor: '#262626',
}
}
}, },
setup() { // 血压测量相关功能
const store = useStore() pressureObj: {}
return { store } }
}, },
created() { created() {
this.init() this.init()
...@@ -67,6 +76,7 @@ export default { ...@@ -67,6 +76,7 @@ export default {
const user = await getAuthInfo() const user = await getAuthInfo()
this.store.$patch({authInfo: user.data || {}}) this.store.$patch({authInfo: user.data || {}})
this.visible = true this.visible = true
this.pressureObj.loadDevice()
} else { } else {
backHome() backHome()
} }
......
src/doctor/components/bloodPressure/BloodPressure.vue 0 → 100644
View file @ 828bc0fc
<template>
<van-popup v-model:show="visible" position="bottom" style="height: 60%">
<div class="pt-4 h-full flex flex-col popup-checkbox">
<div class="flex justify-between shrink-0 pb-2">
<button class="van-picker__cancel van-haptics-feedback" @click="visible = false" >取消</button>
<span class="text-16" >请选择设备（单选）</span>
<button class="van-picker__confirm van-haptics-feedback" @click="onSubmit" >确认</button>
</div>
<div class="bottom-small-line"></div>
<van-radio-group v-model="deviceNo" shape="square"
class="px-4 pb-4 pt-2 grow overflow-y-auto"
v-if="deviceList.length">
<van-radio v-for="item in deviceList" :key="item.deviceNo" :name="item.deviceNo"
label-position="left"
class="justify-between radio-bt">
<div :class="['flex items-denter', {'text-primary': item.deviceNo === deviceNo}]">
<doc-icon type="doc-thermometer" style="font-size: .21rem;"/>
<span class="text-16 ml-2" >{{ item.deviceNo }}</span>
</div>
</van-radio>
</van-radio-group>
<div v-else class="h-full flex items-center text-center"
style="padding: 0 20%;line-height: 1.5;color: #595959;">
本机构尚未绑定设备，请联系管理人员绑定设备
</div>
</div>
</van-popup>
</template>
<script>
import { getPressureDevices, getPressureData } from '@/api/base.js'
import { useStore } from '@/doctor/store/index.js'
import { showToast } from 'vant'
import dayjs from 'dayjs'
export default {
props: {
pressureObj: {
required: true,
default: () => ({})
}
},
data() {
return {
store: useStore(),
visible: false,
// 选中的设备编号
deviceNo: undefined,
// { deviceNo, id }
deviceList: [],
deviceInfo: null,
// 最后一次测量值
lastValue: null,
// 点击测量时的时间
valueTime: null,
// 测量循环次数
loopMark: 0
}
},
computed: {
activeDevice() {
return this.deviceList.find(item => item.deviceNo === this.deviceNo) || {}
},
authInfo() {
return this.store.authInfo
}
},
created() {
this.init()
},
methods: {
init() {
// this.loadDevice()
this.pressureObj.loadDevice = () => {
this.loadDevice()
}
// 获取测量值
this.pressureObj.getValue = (cb) => {
this.valueTime = dayjs()
this.loadValue(cb)
}
// 获取设备信息
this.pressureObj.getDevice = () => {
return this.deviceInfo || {}
}
// 选择设备
this.pressureObj.deviceSelect = (cb) => {
this.visible = true
}
// 是否在测量中
this.pressureObj.getLoadMark = () => {
return this.loopMark > 0
}
},
loadDevice() {
// 372 ||
getPressureDevices(372 || this.authInfo.unitId).then(res => {
console.log('getPressureDevices', res)
this.deviceList = res.data || []
if (!this.deviceList.length) {
this.deviceCheck(1)
} else {
this.deviceCheck(3)
}
})
},
loadValue(cb) {
if (!this.deviceNo) {
showToast('未选择设备')
console.warn('未选择设备')
return
}
if (this.loopMark >= 4) {
this.loopMark = 0
this.deviceCheck(2)
cb && cb(null)
return
}
this.loopMark++
// '06B32312010330' ||
getPressureData(this.deviceNo).then(res => {
const result = res.data || []
if (result.length) {
let val = result[0]
if (dayjs(val.created).isAfter(this.valueTime)) {
this.lastValue = val
this.loopMark = 0
this.deviceCheck(3)
showToast('测量成功')
cb && cb(val)
return
}
}
setTimeout(() => {
this.loadValue(cb)
}, 8000)
})
},
// 设备情况检查
deviceCheck(type) {
if (type == 1) {
this.deviceInfo = {
type: 1,
data: '本机构尚未绑定设备，请联系管理人员绑定设备'
}
} else if (type == 2) {
// this.deviceInfo = {
// type: 2,
// data: '设备异常，请检查设备重新测量'
// }
showToast('设备异常，请检查设备重新测量', )
} else if (type == 3) {
// 选择设备
this.deviceInfo = {
type: 3,
data: this.activeDevice.deviceNo || null
}
}
},
onSubmit() {
const device = this.activeDevice
this.deviceInfo = { data: device.deviceNo, type: 3, }
this.visible = false
}
}
}
</script>
<style lang="less" scoped>
.radio-bt {
border: 1px solid #F0F0F0;
padding: 12px 20px;
border-radius: 40px;
margin-bottom: 12px;
&[aria-checked="true"] {
border-color: var(--van-primary-color);
}
}
</style>
src/doctor/components/bloodPressure/BloodPressureBt.vue 0 → 100644
View file @ 828bc0fc
<template>
<van-button block round
size="small"
color="#F0F3FF"
style="color: var(--van-primary-color);"
:loading="pressureObj.getLoadMark()"
loading-text="测量中..."
@click="getValue">
<slot>测量</slot>
</van-button>
</template>
<script>
export default {
name: 'BloodPressureBt',
props: {
pressureObj: {
required: true,
default: () => ({})
}
},
emits: ['getValue'],
methods: {
getValue() {
this.pressureObj.getValue((val) => {
this.$emit('getValue', val)
})
}
}
}
</script>
<style lang="less" scoped>
</style>
src/doctor/components/bloodPressure/BloodPressurePanel.vue 0 → 100644
View file @ 828bc0fc
<template>
<div class="text-14 text-center flex items-center blood-pressure-panel" @click="onSelect">
<doc-icon type="doc-thermometer" class="text-16"/>
<span v-if="!deviceInfo.data || deviceInfo.type != 3" class="text-center">
<span class="ml-2">选择设备</span>
</span>
<span v-else>
<span class="mx-2">{{ dataHandle(deviceInfo.data) }}</span>
<doc-icon type="doc-left-1" style="transform: rotate(180deg);"/>
</span>
</div>
</template>
<script>
export default {
name: 'BloodPressurePanel',
props: {
pressureObj: {
required: true,
default: () => ({})
}
},
computed: {
deviceInfo() {
return this.pressureObj.getDevice()
}
},
methods: {
onSelect() {
this.pressureObj.deviceSelect()
},
dataHandle(str) {
if (!str) return ''
return str.substring(0, 4) + '...' + str.substring(str.length - 4, str.length)
}
}
}
</script>
<style lang="less" scoped>
.blood-pressure-panel {
background-color: var(--van-primary-color);
color: #fff;
border-radius: 20px;
padding: 6px 12px;
min-width: 114px;
}
</style>
src/doctor/components/bloodPressure/index.js 0 → 100644
View file @ 828bc0fc
import BloodPressurePanel from './BloodPressurePanel.vue'
import BloodPressureBt from './BloodPressureBt.vue'
export { BloodPressurePanel, BloodPressureBt }
src/doctor/screening/first/FormCont.vue
View file @ 828bc0fc
...@@ -138,17 +138,18 @@ ...@@ -138,17 +138,18 @@
</template> </template>
</van-field> </van-field>
<div class='doc-form-label'>现测血压（mmHg）</div> <div class="flex items-center justify-between tip-box">
<table class="w-full"> <div class='doc-form-label shrink-0' >现测血压（mmHg）</div>
<tr> <BloodPressurePanel :pressureObj="pressureObj"/>
<td style="width: 3em"></td> </div>
<div class="sub-text my-3" >第一次</div>
<table class="w-full mb-2">
<tr class="sub-text" >
<td>收缩压(高压)</td> <td>收缩压(高压)</td>
<td style="width: 1em"></td>
<td>舒张压(低压)</td> <td>舒张压(低压)</td>
</tr> </tr>
<tr> <tr>
<td>
第1次<br />测量
</td>
<td class="flex items-center"> <td class="flex items-center">
<van-field v-model="form.pressureOneSbp" <van-field v-model="form.pressureOneSbp"
name="pressureOneSbp" name="pressureOneSbp"
...@@ -161,6 +162,8 @@ ...@@ -161,6 +162,8 @@
input-align="left" input-align="left"
class="table-field" class="table-field"
/> />
</td>
<td class="text-center">
<span class="divide">/</span> <span class="divide">/</span>
</td> </td>
<td> <td>
...@@ -177,11 +180,17 @@ ...@@ -177,11 +180,17 @@
/> />
</td> </td>
</tr> </tr>
</table>
<BloodPressureBt :pressureObj="pressureObj" @getValue="setPressureOne">第一次测量</BloodPressureBt>
<div class="sub-text my-3" >第二次</div>
<table class="w-full mb-2">
<tr class="sub-text" >
<td>收缩压(高压)</td>
<td style="width: 1em"></td>
<td>舒张压(低压)</td>
</tr>
<tr> <tr>
<td class="text-center"> <td>
第2次<br />测量
</td>
<td class="flex items-center">
<van-field v-model="form.pressureTwoSbp" <van-field v-model="form.pressureTwoSbp"
name="pressureTwoSbp" name="pressureTwoSbp"
label="" label=""
...@@ -193,10 +202,12 @@ ...@@ -193,10 +202,12 @@
input-align="left" input-align="left"
class="table-field" class="table-field"
/> />
</td>
<td class="text-center">
<span class="divide">/</span> <span class="divide">/</span>
</td> </td>
<td> <td>
<div class="h-full flex">
<van-field v-model="form.pressureTwoDbp" <van-field v-model="form.pressureTwoDbp"
name="pressureTwoDbp" name="pressureTwoDbp"
label="" label=""
...@@ -208,10 +219,10 @@ ...@@ -208,10 +219,10 @@
input-align="left" input-align="left"
class="table-field" class="table-field"
/> />
</div>
</td> </td>
</tr> </tr>
</table> </table>
<BloodPressureBt :pressureObj="pressureObj" @getValue="setPressureTwo">第二次测量</BloodPressureBt>
<div class='doc-form-label'>空腹血糖</div> <div class='doc-form-label'>空腹血糖</div>
<van-field v-model="form.fastingGlucose" <van-field v-model="form.fastingGlucose"
...@@ -329,6 +340,8 @@ import { useStore } from '@/doctor/store' ...@@ -329,6 +340,8 @@ import { useStore } from '@/doctor/store'
import { checkboxReject, fetchDataHandle } from '@/utils/common.js' import { checkboxReject, fetchDataHandle } from '@/utils/common.js'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import DoctorInfo from './DoctorInfo.vue' import DoctorInfo from './DoctorInfo.vue'
import { BloodPressurePanel, BloodPressureBt } from '@/doctor/components/bloodPressure/index.js'
const defaultForm = (info = {}) => { const defaultForm = (info = {}) => {
const form = { const form = {
id: undefined, id: undefined,
...@@ -384,11 +397,14 @@ const defaultForm = (info = {}) => { ...@@ -384,11 +397,14 @@ const defaultForm = (info = {}) => {
} }
export default { export default {
components: { components: {
DoctorInfo DoctorInfo,
BloodPressurePanel,
BloodPressureBt
}, },
props: { props: {
info: { default: () => ({}) } info: { default: () => ({}) }
}, },
inject: ['pressureObj'],
data() { data() {
return { return {
form: defaultForm(), form: defaultForm(),
...@@ -514,6 +530,16 @@ export default { ...@@ -514,6 +530,16 @@ export default {
}else { }else {
this.form.screenResult = 1 this.form.screenResult = 1
} }
},
setPressureOne(val) {
if (!val) return
this.form.pressureOneSbp = val.systolicPressure
this.form.pressureOneDbp = val.diastolicPressure
},
setPressureTwo(val) {
if (!val) return
this.form.pressureTwoSbp = val.systolicPressure
this.form.pressureTwoDbp = val.diastolicPressure
} }
}, },
watch: { watch: {
...@@ -535,10 +561,10 @@ export default { ...@@ -535,10 +561,10 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
table { table {
text-align: center; text-align: left;
>tr { >tr {
>td { >td {
padding-bottom: 8px; padding-bottom: 4px;
} }
&:last-child { &:last-child {
>td { >td {
...@@ -549,7 +575,10 @@ table { ...@@ -549,7 +575,10 @@ table {
.divide { .divide {
transform: translateY(2px); transform: translateY(2px);
padding: 0 2px; padding: 0 2px;
color: #595959; .sub-text()
} }
} }
.sub-text {
color: #595959;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment