血压测量组件

828bc0fc · songrui · 4aaaaf86 · 828bc0fc · 828bc0fc · 828bc0fc
Commit 828bc0fc authored Jan 02, 2025 by songrui
8 changed files
--- a/src/api/base.js
+++ b/src/api/base.js
@@ -51,4 +51,13 @@ export function getTemplateById() {
    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 } })
+}

--- a/src/assets/icons/doctor/doc-thermometer.svg
+++ b/src/assets/icons/doctor/doc-thermometer.svg
+<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>
--- a/src/doctor/Doctor.vue
+++ b/src/doctor/Doctor.vue
@@ -8,6 +8,7 @@
                    </KeepAlive>
                </Transition>
            </router-view>
+            <BloodPressure :pressureObj="pressureObj"/>
        </div>
    </van-config-provider>
 </template>
@@ -17,10 +18,20 @@ import { getDict } from '@/api/base.js'
 import { useStore } from './store/index.js'
 import { backHome, getQueryVariable } from '@/utils/common'
 import { getAuthInfo } from '@/api/doctor/generalFU'
+import BloodPressure from '@/doctor/components/bloodPressure/BloodPressure.vue'

 export default {
+    components: {
+        BloodPressure
+    },
+    provide() {
+        return {
+            pressureObj: this.pressureObj
+        }
+    },
    data() {
        return {
+            store: useStore(),
            visible: false,
            themeVars: {
                primaryColor: '#607FF0',
@@ -39,12 +50,10 @@ export default {
                cellBorderColor: '#d9d9d9',
                navBarIconColor: '#262626',

-            }
-        }
            },
-    setup() {
-        const store = useStore()
-        return { store }
+            // 血压测量相关功能
+            pressureObj: {}
+        }
    },
    created() {
        this.init()
@@ -67,6 +76,7 @@ export default {
                const user = await getAuthInfo()
                this.store.$patch({authInfo: user.data || {}})
                this.visible = true
+                this.pressureObj.loadDevice()
            } else {
                backHome()
            }

--- a/src/doctor/components/bloodPressure/BloodPressure.vue
+++ b/src/doctor/components/bloodPressure/BloodPressure.vue
+<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>
--- a/src/doctor/components/bloodPressure/BloodPressureBt.vue
+++ b/src/doctor/components/bloodPressure/BloodPressureBt.vue
+<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>
--- a/src/doctor/components/bloodPressure/BloodPressurePanel.vue
+++ b/src/doctor/components/bloodPressure/BloodPressurePanel.vue
+<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>
--- a/src/doctor/components/bloodPressure/index.js
+++ b/src/doctor/components/bloodPressure/index.js
+import BloodPressurePanel from './BloodPressurePanel.vue'
+import BloodPressureBt from './BloodPressureBt.vue'
+
+export { BloodPressurePanel, BloodPressureBt }
--- a/src/doctor/screening/first/FormCont.vue
+++ b/src/doctor/screening/first/FormCont.vue
@@ -138,17 +138,18 @@
                </template>
            </van-field>

-            <div class='doc-form-label'>现测血压（mmHg）</div>
-            <table class="w-full">
-                <tr>
-                    <td style="width: 3em"></td>
+            <div class="flex items-center justify-between tip-box">
+                <div class='doc-form-label shrink-0' >现测血压（mmHg）</div>
+                <BloodPressurePanel :pressureObj="pressureObj"/>
+            </div>
+            <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>
-                    <td>
-                        第1次<br />测量
-                    </td>
                    <td class="flex items-center">
                        <van-field v-model="form.pressureOneSbp"
                            name="pressureOneSbp" 
@@ -161,6 +162,8 @@
                            input-align="left"
                            class="table-field"
                        />
+                    </td>
+                    <td class="text-center">
                        <span class="divide">/</span>
                    </td>
                    <td>
@@ -177,11 +180,17 @@
                        />
                    </td>
                </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>
-                    <td class="text-center">
-                        第2次<br />测量
-                    </td>
-                    <td class="flex items-center">
+                    <td>
                        <van-field v-model="form.pressureTwoSbp"
                            name="pressureTwoSbp" 
                            label=""
@@ -193,10 +202,12 @@
                            input-align="left"
                            class="table-field"
                        />
+                    </td>
+                    
+                    <td class="text-center">
                        <span class="divide">/</span>
                    </td>
                    <td>
-                        <div class="h-full flex">
                        <van-field v-model="form.pressureTwoDbp"
                            name="pressureTwoDbp" 
                            label=""
@@ -208,10 +219,10 @@
                            input-align="left"
                            class="table-field"
                        />
-                        </div>
                    </td>
                </tr>
            </table>
+            <BloodPressureBt :pressureObj="pressureObj" @getValue="setPressureTwo">第二次测量</BloodPressureBt>

            <div class='doc-form-label'>空腹血糖</div>
            <van-field v-model="form.fastingGlucose"
@@ -329,6 +340,8 @@ import { useStore } from '@/doctor/store'
 import { checkboxReject, fetchDataHandle } from '@/utils/common.js'
 import dayjs from 'dayjs'
 import DoctorInfo from './DoctorInfo.vue'
+import { BloodPressurePanel, BloodPressureBt } from '@/doctor/components/bloodPressure/index.js'
+
 const defaultForm = (info = {}) => {
    const form = {
        id: undefined,
@@ -384,11 +397,14 @@ const defaultForm = (info = {}) => {
 }
 export default {
    components: {
-        DoctorInfo
+        DoctorInfo,
+        BloodPressurePanel,
+        BloodPressureBt
    },
    props: {
        info: { default: () => ({}) }
    },
+    inject: ['pressureObj'],
    data() {
        return {
            form: defaultForm(),
@@ -514,6 +530,16 @@ export default {
            }else {
                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: {
@@ -535,10 +561,10 @@ export default {

 <style lang="less" scoped>
 table {
-    text-align: center;
+    text-align: left;
    >tr {
        >td {
-            padding-bottom: 8px;
+            padding-bottom: 4px;
        }
        &:last-child {
            >td {
@@ -549,7 +575,10 @@ table {
    .divide {
        transform: translateY(2px);
        padding: 0 2px;
-        color: #595959;
+        .sub-text()
    }
 }
+.sub-text {
+    color: #595959;
+}
 </style>