diff --git a/src/pages/recording/recording.less b/src/pages/recording/recording.less
index 05b752c..0133dc2 100644
--- a/src/pages/recording/recording.less
+++ b/src/pages/recording/recording.less
@@ -16,7 +16,7 @@ page {
   color: #666;
   padding: 0 32rpx;
   position: sticky;
-  top: 176rpx;
+  top: 174rpx;
   z-index: 9;
 
 }
@@ -176,6 +176,7 @@ page {
   color: #999;
 }
 
+
 // .instrument_item {
 //   margin-top: 20rpx;
 //   background: #ffffff;
@@ -207,10 +208,10 @@ page {
 //   text-align: center;
 // }
 
-// .tag_active {
-//   background: #f8f8f8;
-//   color: #999;
-// }
+.tag_active {
+  background: #f8f8f8;
+  color: #999;
+}
 
 // .report_btn {
 //   font-size: 26rpx;
@@ -527,8 +528,6 @@ page {
     .top-left {
       display: flex;
       .date {
-        width: 131rpx;
-        height: 22rpx;
         font-size: 28rpx;
         font-weight: bold;
         color: #000000;
@@ -574,25 +573,29 @@ page {
       margin-right: 38rpx;
     }
     .bottom-right {
-      padding: 4rpx 0 3rpx;
+      display: flex;
+      flex-flow: column;
+      justify-content: space-between;
+      height: 140rpx;
       .title {
         font-size: 28rpx;
         font-family: PingFang SC;
         font-weight: bold;
         color: #000000;
-        margin-bottom: 10rpx;
       }
       .subtitle-box {
         display: flex;
         flex-flow: column;
         justify-content: space-between;
-        height: 65rpx;
+        // height: 65rpx;
         .subtitle {
           font-size: 24rpx;
           font-family: PingFang SC;
           font-weight: 500;
           color: #999999;
-          margin-top: 11rpx;
+        }
+        .subtitle:last-child{
+          margin-top: 10rpx;
         }
       }
     }
diff --git a/src/pages/recording/recording.tsx b/src/pages/recording/recording.tsx
index 7c5c936..7e10dcb 100644
--- a/src/pages/recording/recording.tsx
+++ b/src/pages/recording/recording.tsx
@@ -3,7 +3,7 @@ import classnames from "classnames";
 import { Component, PropsWithChildren, useEffect, useState } from "react";
 
 import { Block, View, Text, Image, Input, Button, ScrollView, Picker } from "@tarojs/components";
-
+import { go } from "@/utils/traoAPI";
 import { Tab, Tabs } from "@antmjs/vantui";
 
 /** 自定义组件 **/
@@ -11,6 +11,9 @@ import Navbar from "../../components/navbar/navbar";
 import PopupAlert from "../../components/popup/popup-alert";
 /** 自定义组件 **/
 
+import { InstrumentInfo } from '../../utils/Interface'
+import { date, getdates, previewImage } from "../../utils/util";
+
 import "./recording.less";
 
 export default class Recording extends Component<any, any> {
@@ -20,30 +23,125 @@ export default class Recording extends Component<any, any> {
       name: "护理历程",
       current: 0,
       array: [1, 2, 3, 4, 5],
+      recordList: [],
+      bindingInstrumentList: [],
+      curIndex: null,
+      clockStatistics: [],
+      statistics:[],
+      year:new Date().getFullYear(),
+      today: new Date()
     };
   }
 
-  async onLoad() { }
+
+
+
   componentDidMount() { }
 
   componentWillUnmount() { }
 
+  getTime(time) {
+    const hour = time.slice(0, 2);
+    const minute = time.slice(3, 5);
+    const second = time.slice(6, 8);
+
+    if (hour > 0) {
+      return hour + '时' + minute + '分' + second + '秒'
+    } else {
+      return minute + '分' + second + '秒'
+    }
+  }
+
+  async getBindingInstrumentList() {
+    let res = await InstrumentInfo.bindingInstrumentList()
+    if (res.data.code === 200) {
+      this.setState({ bindingInstrumentList: res.data.data })
+    }
+  }
+
+  async getRecord(id) {
+    let data = {}
+    if (id != null) {
+      data['instrumentId'] = id
+    }
+    let res = await InstrumentInfo.nursingLog.getRecord(data)
+    if (res.data.code === 200) {
+      res.data.rows.map(item => {
+        item.nursingTime = this.getTime(item.nursingTime)
+        item.createTime = getdates(item.createTime).replace(/-/g, '.')
+      })
+      this.setState({ recordList: res.data.rows })
+    }
+  }
+
+  /**分页获取用户的打卡记录 page size*/
+  async getClockStatistics(year=this.state.year) {
+    let res = await InstrumentInfo.clock.getClockStatistics({year})
+    if (res.data.code === 200) {
+      res.data.data.reverse()
+      res.data.data.map(item=>{
+        item.isMore = false
+      })
+      this.setState({ clockStatistics: res.data.data })
+    }
+  }
+  // 查询用户护理记录的当月统计信息
+  async getStatistics(id) {
+    let data = {}
+    if (id != null) {
+      data['instrumentId'] = id
+    }
+    let res = await InstrumentInfo.nursingLog.getStatistics(data)
+    // if (res.data.code === 200) {
+      
+    //   this.setState({ statistics: res.data.rows })
+    // }
+  }
+
+  onChangeProduct(id) {
+    this.setState({ curIndex: id })
+    this.getRecord(id)
+  };
+
+  onChangeMore(id){
+    this.state.clockStatistics.map(item=>{
+      if(item.id === id){
+        item.isMore = !item.isMore
+      }
+    })
+    this.setState({ clockStatistics:this.state.clockStatistics})
+  }
+
+  async onLoad() {
+    this.getRecord(null)
+    this.getBindingInstrumentList()
+  }
+
   componentDidShow() { }
 
   componentDidHide() { }
 
   async initData() { }
 
-  onChangeYear() { }
+  onChangeYear(event) {
+    this.setState({ year: event.detail.value})
+    this.getClockStatistics(event.detail.value)
+   }
 
   onTab = async (event) => {
     const { current } = event.currentTarget.dataset;
-    console.log("current", current);
     this.setState({ current });
+    if (current === 1) {
+      this.getClockStatistics()
+    }
   };
 
+  toReport() {
+    go("/pages/face_report/face_report");
+  }
+
   render() {
-    let { current, array, name } = this.state;
+    let { current, array, name, recordList, bindingInstrumentList, curIndex, clockStatistics,statistics,year,today } = this.state;
     return (
       <Block>
         <Navbar isBack titleSlot='护理记录'></Navbar>
@@ -68,16 +166,24 @@ export default class Recording extends Component<any, any> {
           </View>
         </View>
         {current === 0 && <ScrollView className='products_list' scroll-x='true' >
-          <View className="{{!curIndex ? 'all products_item_active' : 'all'}}" data-id='{{0}}' >全部
-          </View>
-          <View className="{{curIndex === item.id ? 'products_item products_item_active' : 'products_item'}}"
-            data-id='{{item.id}}'
-          >
-            <Image className='products_cover'
-              src={require("../../img/test/1706692819894.jpg")} mode='aspectFit'
-            ></Image>
-            <View className='products_title'>画质抗老射频仪</View>
+          <View className={classnames("all", {
+            products_item_active: !curIndex,
+          })} onClick={this.onChangeProduct.bind(this, null)}
+          >全部
           </View>
+          {bindingInstrumentList.map((item: any, index: any) => (
+            <View key={item.id}
+              className={classnames("products_item", {
+                products_item_active: curIndex === item.id,
+              })}
+              onClick={this.onChangeProduct.bind(this, item.id)}
+            >
+              <Image className='products_cover'
+                src={require("../../img/test/1706692819894.jpg")} mode='aspectFit'
+              ></Image>
+              <View className='products_title'>画质抗老射频仪</View>
+            </View>
+          ))}
         </ScrollView>}
 
         {current === 0 &&
@@ -94,7 +200,7 @@ export default class Recording extends Component<any, any> {
             </View>
           )}
         {current === 0 && (
-          <View>
+          <View style='padding-bottom:200px'>
             {/* <View className='instrument_item' >
               <View className='instrument_top flex sb aitems'>
                 <View className='time_box flex aitems'>
@@ -122,38 +228,42 @@ export default class Recording extends Component<any, any> {
             </View> */}
 
 
-
-            {array.map((item: any, index: any) => (
-              <View className='recording-box' key={index}>
-                <View className='box-top'>
-                  <View className='top-left'>
-                    <View className='date'>2024.1.31</View>
-                    <View className='tip'>在线</View>
-                  </View>
-                  <View className='top-right'>
-                    回看报告
-                    <Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
+            <View className='instrument_list '>
+              {recordList.map((item: any, index: any) => (
+                <View className='recording-box' key={item.id}>
+                  <View className='box-top'>
+                    <View className='top-left'>
+                      <View className='date'>{item.createTime}</View>
+                      <View className={classnames("tip", {
+                        tag_active: item.online === 0,
+                      })}
+                      >{item.online ? '在线' : '离线'}</View>
+                    </View>
+                    <View className='top-right' onClick={this.toReport}>
+                      回看报告
+                      <Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
+                    </View>
                   </View>
-                </View>
-                <View className='box-bottom'>
-                  <Image
-                    className='recording_img'
-                    src={require("../../img/test/1706667011027.jpg")}
-                  ></Image>
-                  <View className='bottom-right'>
-                    <View className='title'>小紫单智能射频仪</View>
-                    <View className='subtitle-box'>
-                      <View className='subtitle'>模式：基础场景版</View>
-                      <View className='subtitle'>护理时间：15分00秒</View>
+                  <View className='box-bottom'>
+                    <Image
+                      className='recording_img'
+                      src={item.modeImage}
+                    ></Image>
+                    <View className='bottom-right'>
+                      <View className='title'>{item.instrumentName}</View>
+                      <View className='subtitle-box'>
+                        <View className='subtitle'>模式：{item.modeName}</View>
+                        <View className='subtitle'>护理时间：{item.nursingTime}</View>
+                      </View>
                     </View>
                   </View>
                 </View>
-              </View>
-            ))}
+              ))}
+            </View>
           </View>
         )}
         {current === 1 && (
-          <View >
+          <View style='padding-bottom:200px'>
             {/* <View className='nodata'>
               <Image
                 className='nodata_img'
@@ -165,9 +275,9 @@ export default class Recording extends Component<any, any> {
             <View className='clock_in_statistics m-x-30 flex sb'>
               <View className='flex sb ab'>
                 <View className='clock_in_statistics_title'>年度打卡统计</View>
-                <Picker mode='date' fields='year' onChange={this.onChangeYear} value='2024' end='{{today}}'>
+                <Picker mode='date' fields='year' onChange={this.onChangeYear.bind(this)} value='{{year}}' end='{{today}}'>
                   <View className='clock_in_statistics_date flex aitems'>
-                    <View>2024年</View>
+                    <View>{year}年</View>
                     <Image className='more_icon' src={require('../../img/arrow-down.png')} mode='widthFix'></Image>
                   </View>
                 </Picker>
@@ -182,39 +292,47 @@ export default class Recording extends Component<any, any> {
             </View>
             <View style='padding-bottom: env(safe-area-inset-bottom)' >
               <View className='month_box m-x-30'>
-                <View className='month_statistics'>
-                  <View className='flex aitems sb'>
-                    <View className='time'>2024年1月</View>
-                    <View data-item='{{item}}' data-index='{{index}}' className='more_box flex aitems' >
-                      <View className='more_text'> 展开更多</View>
-                      <Image style='transform: rotate({{ item.isMore ? 180 : 0 }}deg)' className='more_icon'
-                        src={require("../../img/arrow-down.png")} mode='widthFix'
-                      ></Image>
-                    </View>
-                  </View>
-                  <View style='height: 59rpx'></View>
-                  <View className='statistic'>
-                    <View className='statistic_item'>
-                      <View className='statistic_num'>10</View>
-                      <View className='statistic_desc'>本月打卡天数</View>
-                    </View>
-                    <View className='statistic_item'>
-                      <View className='statistic_num'>80%</View>
-                      <View className='statistic_desc'>超越花至用户</View>
+                {clockStatistics.map(item => (
+                    <View className='month_statistics' key={item.id}>
+                      <View className='flex aitems sb'>
+                        <View className='time'>{item.year}年{item.month}月</View>
+                        <View className='more_box flex aitems' onClick={this.onChangeMore.bind(this,item.id)}>
+                          <View className='more_text'> {!item.isMore ? '展开更多' : '收起更多'}</View>
+                          <Image style={{transform: (item.isMore) ?  'rotate(180deg)':'rotate(0deg)'}} className='more_icon'
+                            src={require("../../img/arrow-down.png")} mode='widthFix'
+                          ></Image>
+                        </View>
+                      </View>
+                      <View style='height: 59rpx'></View>
+                      <View className='statistic'>
+                        <View className='statistic_item'>
+                          <View className='statistic_num'>{item.clockNum}</View>
+                          <View className='statistic_desc'>本月打卡天数</View>
+                        </View>
+                        <View className='statistic_item'>
+                          <View className='statistic_num'>{item.percentage*100}%</View>
+                          <View className='statistic_desc'>超越花至用户</View>
+                        </View>
+                        <View className='border'></View>
+                      </View>
+                      { item.isMore&&
+                      <View>
+                      <View style='height: 57rpx' ></View>
+                      <View className='month_item'>
+                        <View className='month_item_date'>2024.5.23</View>
+                        <View className='month_image_box flex sb'>
+                          <Image className='month_item_cover' src={require("../../img/test/1706667011027.jpg")} ></Image>
+                        </View>
+                        <View className='month_item_date'>小紫弹智能射频仪、花至抗老射频仪PRO </View>
+                        <View className='month_item_note'>护理心得：真棒真棒真棒真棒真棒真棒真棒真棒真棒真棒</View>
+                      </View>
+                      </View>
+                      }
                     </View>
-                    <View className='border'></View>
-                  </View>
-                  <View style='height: 57rpx'></View>
-                  <View className='month_item'>
-                    <View className='month_item_date'>2024.5.23</View>
-                    <View className='month_image_box flex sb'>
-                      <Image className='month_item_cover' src={require("../../img/test/1706667011027.jpg")} ></Image>
-                    </View>
-                    <View className='month_item_date'>小紫弹智能射频仪、花至抗老射频仪PRO </View>
-                    <View className='month_item_note'>护理心得：真棒真棒真棒真棒真棒真棒真棒真棒真棒真棒</View>
-                  </View>
-                </View>
+                  ))
+                }
               </View>
+
             </View>
           </View>
         )}