修复

src/static-data/core.ts

@@ -91,7 +91,8 @@ export const getFormTypes = () => {
   ]
   return types
 }
-export const getDataAlarmState = (value: number, key: string) => {
+export const getDataAlarmState = (value: number | undefined, key: string) => {
+  if (value === undefined) return
   const alarms: any = {
     BIS: { min: 40, max: 60 },
     HR: { min: 50, max: 80 },
@@ -108,3 +109,20 @@ export const getDataAlarmState = (value: number, key: string) => {
   }
   return res
 }
+
+export const setRemoteLog = (obj: any, callback: (title: string, size: string) => void) => {
+  const alarms = {
+    BIS: getDataAlarmState(obj.BIS, 'BIS'),
+    SBP: getDataAlarmState(obj.SBP, 'SBP'),
+    SPO2: getDataAlarmState(obj.SPO2, 'SPO2'),
+    DBP: getDataAlarmState(obj.DBP, 'DBP'),
+    HR: getDataAlarmState(obj.HR, 'HR'),
+    TEMP: getDataAlarmState(obj.TEMP, 'TEMP')
+  }
+  if (alarms.BIS) callback('脑电双频指数', alarms.BIS)
+  if (alarms.SBP) callback('收缩率', alarms.SBP)
+  if (alarms.SPO2) callback('氧饱和度', alarms.SPO2)
+  if (alarms.DBP) callback('舒张压', alarms.DBP)
+  if (alarms.HR) callback('心率', alarms.HR)
+  if (alarms.TEMP) callback('体温', alarms.TEMP)
+}

src/stores/remote-info-store.ts

@@ -25,6 +25,11 @@ export const useRemoteStore = defineStore('remote', {
         this.remoteTasks[index].log.push(obj)
       }
     },
+    setRemoteDataAlarm(bol: boolean, index: number) {
+      if(this.remoteTasks[index]) {
+        this.remoteTasks[index].dataAlarm = bol
+      }
+    },
     getCurrentRemote() {
       return this.currentRemote
     },

src/views/remote-manage/part/message-item-part.vue

@@ -40,10 +40,12 @@ remoteTasks.value = useRemoteStore().remoteTasks
 // })
 
 function scrollToBottom() {
+  setTimeout(() => {
     listRef.value.scrollTo({
       top: listRef.value.scrollHeight,
       behavior: 'smooth'
-	});
+    })
+  }, 0)
 }
 </script>
 

src/views/remote-manage/part/message-part.vue

@@ -3,9 +3,9 @@
     <div class="title">
       <span>消息通知</span>
     </div>
-    <div class="content">
+    <div ref="listRef" class="content">
       <el-timeline>
-        <el-timeline-item v-for="(item, index) in currentRemote.log || []" :key="index"
+        <el-timeline-item v-for="(item, index) in remoteStore.currentRemote.log || []" :key="index"
           :timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
           :class="{ 'alarm': item.state === '连接失败' || item.state === '异常' }">
           {{ item.title + ' ' + item.state }}
@@ -24,17 +24,25 @@ import { dateFormater } from '@/utils/date-util'
 
 defineExpose({
   setData,
+  scrollToBottom
 })
 
 const remoteStore = useRemoteStore()
-const currentRemote = ref({} as RemoteItem)
-currentRemote.value = useRemoteStore().currentRemote
+const listRef = ref()
 
 function setData(e: RemoteLogItem, index: number) {
   remoteStore.setRemoteLog(e, index)
-  remoteStore.setCurrentRemoteLog(e)
   remoteStore.$patch({currentRemote: remoteStore.remoteTasks[index]})
 }
+
+function scrollToBottom() {
+  setTimeout(() => {
+    listRef.value.scrollTo({
+      top: listRef.value.scrollHeight,
+      behavior: 'smooth'
+    })
+  }, 0)
+}
 </script>
 
 <style lang='scss' scoped>

src/views/remote-manage/part/remote-part.vue

@@ -117,15 +117,17 @@ import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
 import { dateFormater } from '@/utils/date-util'
 import { useRemoteStore } from '@/stores/remote-info-store';
 import type { RemoteItem, PatientInfoItem } from '@/utils/public-interface'
+import { setRemoteLog } from '@/static-data/core'
 
-const emit = defineEmits(['breakRemote'])
+const emit = defineEmits(['addLogAfter', 'breakRemote'])
 
+const remoteStore = useRemoteStore()
 let timer = 0
 const mediaMini800 = ref(false)
 const remoteItem = ref<RemoteItem>({} as RemoteItem)
 const patientInfo = ref({} as PatientInfoItem)
 
-initData(useRemoteStore().getCurrentRemote())
+initData(remoteStore.currentRemote)
 
 defineExpose({
     initData
@@ -133,7 +135,6 @@ defineExpose({
 
 onBeforeUnmount(() => {
   // 页面卸载后清楚定时器
-  console.log('~~~~~~~~~~~~~~~')
   clearInterval(timer)
 })
 
@@ -141,26 +142,43 @@ window.addEventListener('resize', () => {
     mediaMini800.value = Boolean(window.innerWidth < 801)
 });
 
-function initData(e?: any) {
-    if(e) remoteItem.value = e
-    const obj = e || {}
+function initData(e?: RemoteItem) {
+    const obj = e || {} as RemoteItem
+    remoteItem.value = obj
     patientInfo.value.state = obj.dataAlarm
     patientInfo.value.name = obj.patientName || ''
     patientInfo.value.code = 'XXXXXX'
     clearInterval(timer)
+    if(!patientInfo.value.name) return
     timer = setInterval(() => {
       getData()
     }, 2000)
 }
 
 function getData() {
+  remoteItem.value.dataAlarm = false
+  const obj = {
+    BIS: Math.ceil(Math.random() * 100), 
+    SBP: Math.ceil(Math.random() * 100), 
+    SPO2: Math.ceil(Math.random() * 100), 
+    DBP: Math.ceil(Math.random() * 100), 
+    HR: Math.ceil(Math.random() * 100), 
+    TEMP: Math.ceil(Math.random() * 100),
+  } as PatientInfoItem
   patientInfo.value.time = new Date()
-  patientInfo.value.BIS = Math.ceil(Math.random() * 100)
-  patientInfo.value.SBP = Math.ceil(Math.random() * 100)
-  patientInfo.value.SPO2 = Math.ceil(Math.random() * 100)
-  patientInfo.value.DBP = Math.ceil(Math.random() * 100)
-  patientInfo.value.HR = Math.ceil(Math.random() * 100)
-  patientInfo.value.TEMP = Math.ceil(Math.random() * 100)
+  setRemoteLog(obj, (title: string, size: string) => {
+    obj.state = true
+    remoteItem.value.dataAlarm = true
+    remoteStore.setRemoteLog({
+      time: new Date(),
+      title,
+      state: '异常'
+    }, remoteItem.value.index)
+  })
+  remoteStore.setRemoteDataAlarm(remoteItem.value.dataAlarm, remoteItem.value.index)
+  remoteStore.$patch({currentRemote: remoteStore.remoteTasks[remoteItem.value.index]})
+  Object.assign(patientInfo.value, obj)
+  emit('addLogAfter')
 }
 
 const breakRemote = () => {

src/views/remote-manage/remote-manage.vue

@@ -2,7 +2,9 @@
   <div class="remote-manage-page">
     <div class="header-box">
       <div class="thumbnail" @click="viewThumbnail">
-              <el-icon><Menu /></el-icon>
+        <el-icon>
+          <Menu />
+        </el-icon>
         <span>缩略图</span>
       </div>
       <div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
@@ -13,7 +15,7 @@
     </div>
     <div class="content-box">
       <div class="remote-box">
-                <RemotePart ref="remotePartRef" @breakRemote="breakRemote" />
+        <RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote" />
       </div>
       <div class="message-box">
         <MessagePart ref="messagePartRef" />
@@ -42,7 +44,7 @@ const remoteTask = ref([] as Array<RemoteItem>)
 initRemoteTask()
 
 function resetRemoteTaskItem(e: RemoteItem) {
-    remoteTask.value[e.index] = {
+  Object.assign(remoteTask.value[e.index], {
     isRemote: false,
     dataAlarm: false,
     title: '',
@@ -50,8 +52,7 @@ function resetRemoteTaskItem(e: RemoteItem) {
     patientName: '',
     patientCode: '',
     index: e.index,
-        log: []
-    }
+  })
 }
 function initRemoteTask() {
   remoteTask.value = useRemoteStore().remoteTasks
@@ -136,6 +137,9 @@ const breakRemote = (e: RemoteItem) => {
     state: '断开连接'
   }, e.index)
 }
+const addLogAfter = () => {
+  messagePartRef.value.scrollToBottom()
+}
 </script>
 
 <style lang='scss' scoped>
@@ -145,6 +149,7 @@ const breakRemote = (e: RemoteItem) => {
   padding-top: 15px;
   overflow-y: auto;
   overflow-x: hidden;
+
   .header-box {
     position: relative;
     width: 100%;
@@ -153,6 +158,7 @@ const breakRemote = (e: RemoteItem) => {
     padding: 0 30px;
     display: flex;
     flex-wrap: wrap;
+
     .thumbnail {
       cursor: pointer;
       position: absolute;
@@ -170,23 +176,28 @@ const breakRemote = (e: RemoteItem) => {
       font-size: 20px;
       color: white;
       transition: all .1s;
+
       .el-icon {
         font-size: 1.4em;
       }
+
       &>span {
         display: none;
         margin-left: 5px;
         line-height: 1;
         white-space: nowrap;
       }
+
       &:hover {
         width: 160px;
         transition: all .3s;
+
         &>span {
           display: block;
         }
       }
     }
+
     .task-btn-item {
       cursor: pointer;
       flex-grow: 1;
@@ -251,5 +262,4 @@ const breakRemote = (e: RemoteItem) => {
       margin-left: 20px;
     }
   }
-}
-</style>
+}</style>