优化

assets/css/style.css

@@ -778,13 +778,13 @@ body{
 }
 .c-con .list dl{
 	width: 24%;
-	/* height: 120px; */
+	 height: 120px;
 	background: url(../image/panel_bj.png) no-repeat left center;
 	background-size: 100% 100%;
 	position: relative;
 	margin: 10px 0.5% 0 0.5%;
 	overflow: hidden;
-	padding: 0 0 10px 0;
+	/*padding: 0 0 10px 0;*/
 	float: left;
 }
 .c-con .list dl.online::after{
@@ -1022,7 +1022,7 @@ body{
 		height: 35px;
 	}
 	.c-con .list dl{
-		/* height: 100px; */
+		 height: 100px;
 	}
 	.c-con .list dl dd .list-l em{
 		font-size: 10px;

index.html

@@ -282,6 +282,10 @@
 					</div>
 					<div class="panel">
 						<ul>
+							<li v-for="(item, index) in warnList" :key="index" v-bind:class="item.warn_class">
+								<span>{{ item.named }}</span>
+								{{ item.warn_time }}
+							</li>
 							<li class="xl">
 								<span>01房01床</span>
 								11:06
@@ -352,6 +356,7 @@
 					},
 					bedTimeData: [], // 在床、离床时间数据
 					nowDate: '',
+					warnList: [], // 告警列表
 				},
 				mounted(){
 					const now = new Date().setHours(0, 0, 0, 0)
@@ -443,9 +448,8 @@
 								if (index === -1) {
 									return
 								}
-								// console.log(this.frameList[index].status, this.frameList[index].heart, this.frameList[index].breathe, Date.parse(new Date()))
-								// this.$set(this, 'frameList', this.frameList[index])
-								// this.getValue(msg)
+								this.frameList[index].heart = parseInt(msg.substring(22, 24), 16)
+								this.frameList[index].breathe = parseInt(msg.substring(24, 26), 16)
 								switch (msg.substring(26, 28)) {
 									case "04": // 离床
 										this.frameList[index].status = '离床'
@@ -454,10 +458,7 @@
 									case "03":
 									case "05":
 									case "06":
-										this.frameList[index].heart = parseInt(msg.substring(22, 24), 16)
-										this.frameList[index].breathe = parseInt(msg.substring(24, 26), 16)
 										this.frameList[index].status = '在床'
-										this.frameList[index].boolWarn = true
 										this.setBedTimeData(imei, true)
 										break;
 									default:
@@ -465,11 +466,19 @@
 								}
 								break
 							default: // 报警信息
-								const data =  JSON.parse(res.data)
-								console.log('收到消息为:', data)
-								if (data.sn && this.homeFrom.nowDevice === data.sn) {
-									this.list_alerts.push(data)
+								const data =  JSON.parse(e.data)
+								console.log('收到消息为:', data, data.sn)
+								let i = this.frameList.findIndex(item => item.imei === data.sn)
+									console.log('i===', i)
+								if (i === -1) {
+									return
 								}
+								// this.warnList.push(data)
+								this.$set(this.frameList[i], 'boolWarn', true)
+								setTimeout(() => {
+									this.$set(this.frameList[i], 'boolWarn', false)
+								}, 10000) // 10秒后恢复正常
+								this.setWarnData(data, this.frameList[i].full_name)
 								break
 						}
 					},
@@ -1238,6 +1247,37 @@
 							}
 						}
 					},
+					// 组装报警信息
+					setWarnData(data, named) {
+						const now = new Date(data.warn_time)
+						const time = `${now.getHours()}:${now.getMinutes()}`
+						console.log('time===', time)
+						let warn_class = ''
+						switch (data.warn_type) {
+							case 1:
+							case 2:
+								warn_class = 'xl'
+								break
+							case 3:
+							case 4:
+								warn_class = 'hx'
+								break
+							case 5:
+								warn_class = 'lc'
+								break
+							case 6:
+								warn_class = 'jj'
+								break
+							default:
+								break
+						}
+						console.log('this.warnList===', this.warnList)
+						this.warnList.unshift({
+							warn_time: time,
+							warn_class: warn_class,
+							named: named
+						})
+					},
 					// 根据状态获取离床、在床样式
 					getStatusClass(item) {
 						let str = ''
@@ -1249,7 +1289,7 @@
 								str = 'online'
 								break
 							default:
-								return ''
+								break
 						}
 						str += item.boolWarn ? ' warn' : ''
 						console.log('item.status===', item.status, str)