新增呼吸率图表

src/pages/home/home.vue

@@ -86,7 +86,7 @@
             <image src="../../static/linkService.png" mode="" />
             <button open-type="contact">联系客服</button>
         </view>
-        <view class="bot_version"> v3.0.5 </view>
+        <view class="bot_version"> v3.0.6 </view>
 
         <view
             class="shareInfo"

src/pagesA/deviceDetail/deviceDetail.vue

@@ -212,7 +212,7 @@
                 >
             </view>
         </view>
-        <view class="box">
+        <view class="box" v-if="!breathShow">
             <view class="handle-btn">
                 <view class="btn1" @click="shareDevice">分享</view>
                 <view class="btn1" @click="gotoSetting">设置</view>
@@ -220,6 +220,15 @@
             </view>
         </view>
 
+        <view class="box" v-else>
+            <view class="handle-btn">
+                <view class="closeBreath" @click="breathShow = false"
+                    >关闭呼吸率曲线图</view
+                >
+                <view class="btn2" @click="saveBreath"> 保存呼吸率曲线图 </view>
+            </view>
+        </view>
+
         <!-- 遮罩层 -->
         <view class="mask" v-if="shareModel" @click="shareModel = false"></view>
         <!-- 弹窗内容 -->
@@ -313,6 +322,8 @@
             ></image>
 
             <l-echart
+                id="chart-canvas"
+                canvas-id="chart-canvas"
                 ref="chartRef"
                 @finished="initChart"
                 v-if="breathShow"
@@ -330,11 +341,6 @@
 </template>
 <script>
 import * as echarts from "../../uni_modules/lime-echart/static/echarts.min";
-const totalSeconds = 60; // 显示1分钟的数据
-const step = 1; // 每秒一个点
-const maxPoints = totalSeconds / step + 1;
-const xAxisData = Array.from({ length: maxPoints }, (_, i) => i * step);
-const lineData = []; // 初始基准数据
 
 export default {
     data() {
@@ -865,12 +871,49 @@ export default {
             const option = this.getOption(this.breathRpmList);
             this.chartInstance.setOption(option, { notMerge: true });
         },
+        saveBreath() {
+            const chart = this.$refs.chartRef;
+            if (!chart) {
+                uni.showToast({ title: "图表未渲染", icon: "none" });
+                return;
+            }
+            chart.canvasToTempFilePath({
+                success: (res) => {
+                    uni.saveImageToPhotosAlbum({
+                        filePath: res.tempFilePath,
+                        success: () => {
+                            uni.showToast({
+                                title: "保存成功",
+                                icon: "success",
+                            });
+                        },
+                        fail: (err) => {
+                            console.error("保存失败：", err);
+                            uni.showToast({
+                                title: "保存失败",
+                                icon: "none",
+                            });
+                        },
+                    });
+                },
+                fail: (err) => {
+                    console.error("导出失败：", err);
+                    uni.showToast({
+                        title: "导出失败",
+                        icon: "none",
+                    });
+                },
+            });
+        },
     },
 
     onShow() {
         this.clientIdProp = uni.getStorageSync("clientIDetail");
         this.isInitAlarm = true;
         this.getToday();
+        // setInterval(() => {
+        //     this.setEcharts(Math.floor(Math.random() * 30));
+        // }, 100);
     },
     onLoad(options) {
         const devItem = this.parseDeviceItem(options.devItem);
@@ -1134,6 +1177,19 @@ export default {
                 color: #ffffff;
                 font-size: 32rpx;
             }
+            .closeBreath {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 328rpx;
+                height: 94rpx;
+                background: #ffebe4;
+                border-radius: 28rpx;
+                font-weight: 500;
+                color: #111111;
+                font-size: 32rpx;
+                text-align: center;
+            }
         }
     }