Kaynağa Gözat

update report page

dayu 2 yıl önce
ebeveyn
işleme
9afd92b6b0
1 değiştirilmiş dosya ile 348 ekleme ve 283 silme
  1. 348 283
      sleep/pages/report/report.vue

+ 348 - 283
sleep/pages/report/report.vue

@@ -240,18 +240,73 @@
 						</view>
 					</view>
 
-					<view class="flex-row justify-between section_easy">
-						<view class="flex-row items-center">
-							<image
-								class="shrink-0 image_7"
-								src="../../static/report/reportIconEasy.png"
-							/>
-							<text class="font_3">安稳度</text>
-						</view>
-						<view class="flex-row items-center space-x-6">
-							<text class="font_4"><text class="font_7">入睡时长</text>
-                {{ formateSeconds(sleepReportFrom.rs_duration) }}</text>
-						</view>
+					<view class="flex-col justify-start report_breath report-easy">
+					  <view class="flex-col justify-start">
+					    <view class="flex-row items-center group_11 space-x-10 pos_33">
+					      <image
+					        class="image_8"
+							src="../../static/report/reportIconBreath.png"
+					      />
+					      <text class="font_3">安稳度</text>
+					      <image
+					        class="image_11"
+					        src="../../static/report/reportIconWhy.png"
+					      />
+					    </view>
+					  </view>
+					  <view class="flex-col pos_34">
+					      <view class="flex-col group_15">
+					        <view class="flex-row justify-between group_2">
+					          <text class="font_3 text_12">安稳度</text>
+					          <view class="flex-row items-center space-x-30">
+					            <text class="font_10">入睡时长</text>
+					            <view class="flex-row items-baseline shrink-0 space-x-6">
+					              <text class="font_5">{{ formateSeconds(sleepReportFrom.rs_duration) }}</text>
+					            </view>
+					          </view>
+					        </view>
+					      </view>
+					      <view class="list-divider"></view>
+						  
+						  <view class="flex-col group_15">
+						    <view class="flex-row justify-between group_2">
+						      <text class="font_3 text_12">离床次数</text>
+						      <view class="flex-row items-center space-x-30">
+						        
+						        <view class="flex-row items-baseline shrink-0 space-x-6">
+						          <text class="font_5">{{ sleepReportFrom.report_content.outbed_count.value }}</text>
+						          <text class="font_6">次</text>
+						        </view>
+						      </view>
+						    </view>
+							
+							<view class="report_breath_chart">
+								<view class="echarts-wrap">
+								  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="refChart-1" @onInit="onInit1"></mpvue-echarts>
+								</view>
+							</view>
+						  </view>
+						  <view class="list-divider"></view>
+						  
+						  <view class="flex-col group_15">
+						    <view class="flex-row justify-between group_2">
+						      <text class="font_3 text_12">体动次数</text>
+						      <view class="flex-row items-center space-x-30">
+						        <!-- <text class="font_10">平均呼吸率</text> -->
+						        <view class="flex-row items-baseline shrink-0 space-x-6">
+						          <text class="font_5">{{ sleepReportFrom.report_content.move_count.value }}</text>
+						          <text class="font_6">次</text>
+						        </view>
+						      </view>
+						    </view>
+							
+							<view class="report_breath_chart">
+								<view class="echarts-wrap">
+								  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-2" ref="refChart-2" @onInit="onInit1"></mpvue-echarts>
+								</view>
+							</view>
+						  </view>
+					  </view>
 					</view>
 
 				</view>
@@ -260,88 +315,46 @@
 				  <view class="flex-col justify-start flex-auto group">
 				    <view class="flex-col justify-start group_3">
 				      <view class="flex-col group_8 space-y-10">
+						
+						<view class="flex-col justify-start report_breath">
+							<view class="flex-col justify-start">
+							  <view class="flex-row items-center group_11 space-x-10 pos_33">
+							    <image
+							      class="image_8"
+								  src="../../static/report/reportIconBeat.png"
+							    />
+							    <text class="font_3">心脏系统</text>
+							    <image
+							      class="image_11"
+							      src="../../static/report/reportIconWhy.png"
+							    />
+							  </view>
+							</view>
+							
+							<view class="flex-col pos_34 report_heart">
+							    <view class="flex-col group_15">
+							      <view class="flex-row justify-between group_2">
+							        <text class="font_3 text_12">心率</text>
+							        <view class="flex-row items-center space-x-30">
+							          <text class="font_10">平均心率</text>
+							          <view class="flex-row items-baseline shrink-0 space-x-6">
+							            <text class="font_5">{{ sleepReportFrom.report_content.avg_rh.value }}</text>
+							            <text class="font_6">次/分</text>
+							          </view>
+							        </view>
+							      </view>
+							    </view>
+								<view class="report_breath_chart">
+									<view class="echarts-wrap">
+									  <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="refChart-1" @onInit="onInit1"></mpvue-echarts>
+									</view>
+								</view>
+							</view>
+						</view>
+						
 
-				        <view class="flex-col justify-start relative report_leave_bed">
-				          <view class="section_10">
-                    <view class="content">
-                      <view class="echarts-wrap">
-                        <mpvue-echarts class="ec-canvas" canvasId="canvasChart-1" ref="refChart-1" @onInit="onInit1"></mpvue-echarts>
-                      </view>
-                    </view>
-                  </view>
-				          <view class="flex-row justify-between items-center pos_2">
-				            <view class="flex-row items-center space-x-12">
-				              <image
-				                class="shrink-0 image_8"
-								src="../../static/report/reportIconBed.png"
-				              />
-				              <text class="font_3">离床次数</text>
-				            </view>
-				            <view class="flex-row items-baseline space-x-6">
-				              <text class="font_5">{{ sleepReportFrom.report_content.outbed_count.value }}</text>
-				              <text class="font_6">次</text>
-				            </view>
-				          </view>
-
-
-				        </view>
-
-				        <view class="flex-col justify-start relative report_move">
-				          <view class="section_20">
-                    <view class="echarts-wrap">
-                      <mpvue-echarts class="ec-canvas" canvasId="canvasChart-2" ref="refChart-2" @onInit="onInit1"></mpvue-echarts>
-                    </view>
-                  </view>
-				          <view class="flex-row justify-between items-center pos_11">
-				            <view class="flex-row items-center space-x-10">
-				              <image
-				                class="shrink-0 image_8"
-								src="../../static/report/reportIconMove.png"
-				              />
-				              <text class="font_3">体动次数</text>
-				            </view>
-				            <view class="flex-row items-baseline space-x-6">
-				              <text class="font_5">{{ sleepReportFrom.report_content.move_count.value }}</text>
-				              <text class="font_6">次</text>
-				            </view>
-				          </view>
-
-				        </view>
-
-				        <view class="flex-col justify-start relative report_heart">
-				          <view class="section_25 bg-gradual-blue">
-                    <view class="content">
-                      <view class="echarts-wrap">
-                        <mpvue-echarts class="ec-canvas" canvasId="canvasChart-3" ref="refChart-3" @onInit="onInit1"></mpvue-echarts>
-                      </view>
-                    </view>
-                  </view>
-				          <view class="flex-row justify-center items-center group_11 space-x-9 pos_21">
-				            <image
-				              class="image_8"
-							  src="../../static/report/reportIconBeat.png"
-				            />
-				            <text class="font_3">心脏系统</text>
-				            <image
-				              class="image_11"
-							  src="../../static/report/reportIconWhy.png"
-				            />
-				          </view>
-				          <view class="flex-row justify-between group_12 pos_22">
-				            <text class="font_3 text_11">心率</text>
-				            <view class="flex-row items-center space-x-48">
-				              <text class="font_10">平均心率</text>
-				              <view class="flex-row items-baseline shrink-0 space-x-6">
-				                <text class="font_5">{{ sleepReportFrom.report_content.avg_rh.value }}</text>
-				                <text class="font_6">次/分</text>
-				              </view>
-				            </view>
-				          </view>
-				        </view>
-
-				        <view class="flex-col justify-start relative report_breath">
-				          <view class="flex-col justify-start relative">
-				            <view class="section_31"></view>
+				        <view class="flex-col justify-start report_breath">
+				          <view class="flex-col justify-start">
 				            <view class="flex-row justify-center items-center group_11 space-x-10 pos_33">
 				              <image
 				                class="image_8"
@@ -355,22 +368,52 @@
 				            </view>
 				          </view>
 				          <view class="flex-col pos_34">
-				            <!-- <template v-for="(item, i) in list_result"> -->
 				              <view class="flex-col group_15">
 				                <view class="flex-row justify-between group_2">
 				                  <text class="font_3 text_12">呼吸率</text>
 				                  <view class="flex-row items-center space-x-30">
 				                    <text class="font_10">平均呼吸率</text>
 				                    <view class="flex-row items-baseline shrink-0 space-x-6">
-				                      <text class="font_5">{{ sleepReportFrom.report_content.avg_hx.value }}</text>
+				                      <text class="font_5">10</text>
 				                      <text class="font_6">次/分</text>
 				                    </view>
 				                  </view>
 				                </view>
-
+								
+								<view class="report_breath_chart"></view>
 				              </view>
-				              <!-- <view class="list-divider" v-if="i !== 2"></view> -->
-				            <!-- </template> -->
+				              <view class="list-divider"></view>
+							  
+							  <view class="flex-col group_15">
+							    <view class="flex-row justify-between group_2">
+							      <text class="font_3 text_12">打鼾</text>
+							      <view class="flex-row items-center space-x-30">
+							        
+							        <view class="flex-row items-baseline shrink-0 space-x-6">
+							          <text class="font_5">73</text>
+							          <text class="font_6">次</text>
+							        </view>
+							      </view>
+							    </view>
+								
+								<view class="report_breath_chart"></view>
+							  </view>
+							  <view class="list-divider"></view>
+							  
+							  <view class="flex-col group_15">
+							    <view class="flex-row justify-between group_2">
+							      <text class="font_3 text_12">呼吸暂停</text>
+							      <view class="flex-row items-center space-x-30">
+							        <!-- <text class="font_10">平均呼吸率</text> -->
+							        <view class="flex-row items-baseline shrink-0 space-x-6">
+							          <text class="font_5">10</text>
+							          <text class="font_6">次</text>
+							        </view>
+							      </view>
+							    </view>
+								
+								<view class="report_breath_chart"></view>
+							  </view>
 				          </view>
 				        </view>
 
@@ -887,9 +930,211 @@
 </script>
 
 <style lang="scss">
+	.report_heart {
+	  .section_25 {
+	    opacity: 0.8;
+	  //background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
+	    border-radius: 0.5rem;
+	    height: 11.19rem;
+	  }
+	  .space-x-9 {
+	    & > view:not(:first-child),
+	    & > text:not(:first-child),
+	    & > image:not(:first-child) {
+	      margin-left: 0.56rem;
+	    }
+	  }
+	  .pos_21 {
+	    position: absolute;
+	    left: 0.63rem;
+	    top: 0.63rem;
+	  }
+	  .group_12 {
+	    width: 17.88rem;
+	    .text_11 {
+	      color: #6b6b6b;
+	    }
+	    .space-x-48 {
+	      & > view:not(:first-child),
+	      & > text:not(:first-child),
+	      & > image:not(:first-child) {
+	        margin-left: 3rem;
+	      }
+	    }
+	  }
+	  .pos_22 {
+	    position: absolute;
+	    right: 0.59rem;
+	    top: 3.66rem;
+	  }
+	}
+	.report-easy {
+		margin: 1rem 1.25rem 0 1.25rem;
+	}
+	.image_8 {
+	  border-radius: 50%;
+	  width: 2rem;
+	  height: 2rem;
+	}
+	.font_3 {
+	  font-size: 1rem;
+	  font-family: PingFangSC;
+	  line-height: 0.94rem;
+	  color: #ffffff;
+	}
+	.image_11 {
+	  width: 1rem;
+	  height: 1rem;
+	}
+			.report_breath {
+			  padding: 0.63rem;
+			  opacity: 0.8;
+			  background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
+			  border-radius: 0.5rem;
+			  
+			  .report_breath_chart {
+				position: relative;
+				height: 7rem;
+			  }
+	          .pos_33 {
+	            
+	          }
+	          .pos_34 {
+	            
+	            .group_15 {
+	              padding: 1rem 0;
+				  .font_10 {
+					  font-size: 0.88rem;
+					  font-family: PingFangSC;
+					  line-height: 0.81rem;
+					  color: #ffffff;
+				  }
+				  .font_5 {
+					    font-size: 1.13rem;
+					    font-family: PingFangSC;
+					    line-height: 0.81rem;
+						color: #ffffff;
+				  }
+				  .font_6 {
+				    font-size: 0.75rem;
+				    font-family: PingFangSC;
+				    line-height: 0.69rem;
+				    color: #ffffff;
+				  }
+	              .group_2 {
+	                padding-left: 1.25rem;
+	                .text_12 {
+	                  color: #ffffff;
+	                }
+	                .space-x-30 {
+	                  & > view:not(:first-child),
+	                  & > text:not(:first-child),
+	                  & > image:not(:first-child) {
+	                    margin-left: 1.88rem;
+	                  }
+	                }
+	              }
+	              .group_16 {
+	                margin-top: 0.63rem;
+	                .section_32 {
+	                  width: 2.28rem;
+	                  height: 5.53rem;
+	                  border: solid 0.031rem #4a315e;
+	                }
+	                .section_34 {
+	                  width: 2.22rem;
+	                  height: 5.53rem;
+	                  border: solid 0.031rem #4a315e;
+	                }
+	                .view_7 {
+	                  margin-left: 2.13rem;
+	                }
+	                .section_36 {
+	                  margin-left: 2.31rem;
+	                  width: 2.34rem;
+	                  height: 5.53rem;
+	                  border: solid 0.031rem #4a315e;
+	                }
+	                .view_8 {
+	                  margin-left: 2.13rem;
+	                }
+	                .pos_36 {
+	                  position: absolute;
+	                  left: 2.25rem;
+	                  top: 0;
+	                }
+	                .pos_38 {
+	                  position: absolute;
+	                  right: 4.47rem;
+	                  top: 0;
+	                }
+	                .section_35 {
+	                  width: 2.41rem;
+	                  height: 5.53rem;
+	                  border: solid 0.031rem #4a315e;
+	                }
+	                .pos_37 {
+	                  position: absolute;
+	                  left: 6.63rem;
+	                  top: 0;
+	                }
+	                .pos_39 {
+	                  position: absolute;
+	                  right: 0;
+	                  top: 0;
+	                }
+	                .section_33 {
+	                  width: 17.97rem;
+	                  height: 1.41rem;
+	                  border: solid 0.031rem #4a315e;
+	                }
+	                .pos_41 {
+	                  position: absolute;
+	                  left: 0;
+	                  right: 0;
+	                  top: 2.75rem;
+	                }
+	                .pos_40 {
+	                  position: absolute;
+	                  left: 0;
+	                  right: 0;
+	                  top: 1.38rem;
+	                }
+	                .pos_35 {
+	                  position: absolute;
+	                  left: 0;
+	                  right: 0;
+	                  top: 0;
+	                }
+
+	                .pos_43 {
+	                  position: absolute;
+	                  left: 0;
+	                  right: 0;
+	                  top: 2.88rem;
+	                }
+	                .pos_42 {
+	                  position: absolute;
+	                  left: 0;
+	                  right: 0.13rem;
+	                  top: 50%;
+	                  transform: translateY(-50%);
+	                }
+	              }
+	              .group_17 {
+	                padding: 0.38rem 0 1rem 0.5rem;
+	              }
+	            }
+	            .list-divider {
+	              margin: 0 0.63rem;
+	              background-color: #523c65;
+	              height: 0.063rem;
+	            }
+	          }
+	        }
 .echarts-wrap {
   width: 100%;
-  height: 7.41rem;
+  height: 7rem;
   margin-bottom: 0.3rem;
   position: absolute;
   bottom: 0
@@ -1132,17 +1377,7 @@
 	            top: 8.06rem;
 	          }
 	        }
-	        .image_8 {
-	          border-radius: 50%;
-	          width: 2rem;
-	          height: 2rem;
-	        }
-	        .font_3 {
-	          font-size: 1rem;
-	          font-family: PingFangSC;
-	          line-height: 0.94rem;
-	          color: #ffffff;
-	        }
+	        
 	        .space-x-6 {
 	          & > view:not(:first-child),
 	          & > text:not(:first-child),
@@ -1178,44 +1413,7 @@
 	            color: #a5b6ca;
 	          }
 	        }
-	        .report_heart {
-	          .section_25 {
-	            opacity: 0.8;
-              //background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
-	            border-radius: 0.5rem;
-	            height: 11.19rem;
-	          }
-	          .space-x-9 {
-	            & > view:not(:first-child),
-	            & > text:not(:first-child),
-	            & > image:not(:first-child) {
-	              margin-left: 0.56rem;
-	            }
-	          }
-	          .pos_21 {
-	            position: absolute;
-	            left: 0.63rem;
-	            top: 0.63rem;
-	          }
-	          .group_12 {
-	            width: 17.88rem;
-	            .text_11 {
-	              color: #6b6b6b;
-	            }
-	            .space-x-48 {
-	              & > view:not(:first-child),
-	              & > text:not(:first-child),
-	              & > image:not(:first-child) {
-	                margin-left: 3rem;
-	              }
-	            }
-	          }
-	          .pos_22 {
-	            position: absolute;
-	            right: 0.59rem;
-	            top: 3.66rem;
-	          }
-	        }
+	        
 	        .space-x-4 {
 	          & > view:not(:first-child),
 	          & > text:not(:first-child),
@@ -1382,142 +1580,9 @@
 	          height: 1.41rem;
 	          border: solid 0.031rem #4a315e;
 	        }
-	        .report_breath {
-	          .section_31 {
-	            opacity: 0.8;
-	            background-image: linear-gradient(180deg, #341a4b 0%, #167df2 100%);
-	            border-radius: 0.5rem;
-	            height: 34rem;
-	          }
-	          .pos_33 {
-	            position: absolute;
-	            left: 0.63rem;
-	            top: 0.63rem;
-	          }
-	          .pos_34 {
-	            position: absolute;
-	            left: 0;
-	            right: 0;
-	            top: 2.63rem;
-	            .group_15 {
-	              padding: 1rem 0.5rem 0 1.25rem;
-	              .group_2 {
-	                padding-left: 1.25rem;
-	                .text_12 {
-	                  color: #606060;
-	                }
-	                .space-x-30 {
-	                  & > view:not(:first-child),
-	                  & > text:not(:first-child),
-	                  & > image:not(:first-child) {
-	                    margin-left: 1.88rem;
-	                  }
-	                }
-	              }
-	              .group_16 {
-	                margin-top: 0.63rem;
-	                .section_32 {
-	                  width: 2.28rem;
-	                  height: 5.53rem;
-	                  border: solid 0.031rem #4a315e;
-	                }
-	                .section_34 {
-	                  width: 2.22rem;
-	                  height: 5.53rem;
-	                  border: solid 0.031rem #4a315e;
-	                }
-	                .view_7 {
-	                  margin-left: 2.13rem;
-	                }
-	                .section_36 {
-	                  margin-left: 2.31rem;
-	                  width: 2.34rem;
-	                  height: 5.53rem;
-	                  border: solid 0.031rem #4a315e;
-	                }
-	                .view_8 {
-	                  margin-left: 2.13rem;
-	                }
-	                .pos_36 {
-	                  position: absolute;
-	                  left: 2.25rem;
-	                  top: 0;
-	                }
-	                .pos_38 {
-	                  position: absolute;
-	                  right: 4.47rem;
-	                  top: 0;
-	                }
-	                .section_35 {
-	                  width: 2.41rem;
-	                  height: 5.53rem;
-	                  border: solid 0.031rem #4a315e;
-	                }
-	                .pos_37 {
-	                  position: absolute;
-	                  left: 6.63rem;
-	                  top: 0;
-	                }
-	                .pos_39 {
-	                  position: absolute;
-	                  right: 0;
-	                  top: 0;
-	                }
-	                .section_33 {
-	                  width: 17.97rem;
-	                  height: 1.41rem;
-	                  border: solid 0.031rem #4a315e;
-	                }
-	                .pos_41 {
-	                  position: absolute;
-	                  left: 0;
-	                  right: 0;
-	                  top: 2.75rem;
-	                }
-	                .pos_40 {
-	                  position: absolute;
-	                  left: 0;
-	                  right: 0;
-	                  top: 1.38rem;
-	                }
-	                .pos_35 {
-	                  position: absolute;
-	                  left: 0;
-	                  right: 0;
-	                  top: 0;
-	                }
-
-	                .pos_43 {
-	                  position: absolute;
-	                  left: 0;
-	                  right: 0;
-	                  top: 2.88rem;
-	                }
-	                .pos_42 {
-	                  position: absolute;
-	                  left: 0;
-	                  right: 0.13rem;
-	                  top: 50%;
-	                  transform: translateY(-50%);
-	                }
-	              }
-	              .group_17 {
-	                padding: 0.38rem 0 1rem 0.5rem;
-	              }
-	            }
-	            .list-divider {
-	              margin: 0 0.63rem;
-	              background-color: #523c65;
-	              height: 0.063rem;
-	            }
-	          }
-	        }
+	        
 	        .group_11 {
 	          width: 8.25rem;
-	          .image_11 {
-	            width: 1rem;
-	            height: 1rem;
-	          }
 	        }
 	        .space-x-10 {
 	          & > view:not(:first-child),
@@ -1530,7 +1595,7 @@
 	          font-size: 0.88rem;
 	          font-family: PingFangSC;
 	          line-height: 0.81rem;
-	          color: #ffffff99;
+	          color: #ffffff;
 	        }
 	        .group_13 {
 	          width: 0.97rem;