diff --git a/components/Cn-htmlToImg/Cn-htmlToImg.vue b/components/Cn-htmlToImg/Cn-htmlToImg.vue
new file mode 100644
index 0000000..048b317
--- /dev/null
+++ b/components/Cn-htmlToImg/Cn-htmlToImg.vue
@@ -0,0 +1,59 @@
+<template>
+    <view>
+        <view class="html2canvas" :prop="domId" :id="domId" :change:prop="canvasImage.generateImage">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'html2canvas',
+    props: {
+        domId: {
+            type: String,
+            required: true
+        }
+    },
+    methods: {
+        htmlToCanvas (option) {
+            let posterImg = option.posterImg;
+            console.log(posterImg);
+            this.$emit('renderFinish', posterImg);
+        }
+    }
+}
+</script>
+<script lang="renderjs" module="canvasImage">
+import html2canvas from 'html2canvas'
+export default {
+  methods: {
+    // 生成图片需要调用的方法
+    generateImage(domId) {
+        console.log(123);
+        // 获取设备dpi
+        setTimeout(() => {
+            console.log(domId);
+            let dom =  document.getElementById(domId);
+            console.log(dom);
+            html2canvas(dom, {
+                scale: 8,
+                useCORS: true,
+
+            }).then((canvas) => {
+                // this.$refs.header.appendChild(canvas);
+                const posterImg = canvas.toDataURL()
+                this.$ownerInstance.callMethod('htmlToCanvas', {	
+                    posterImg: posterImg
+                })
+            }).catch((err) => {
+                console.log(err)
+            })
+        }, 1000);
+    }
+  }
+}
+</script>
+
+
+<style lang="scss"></style>
diff --git a/manifest.json b/manifest.json
index 45ec424..e696e7e 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,5 +1,5 @@
 {
-    "name" : "灿能电力",
+    "name" : "灿能物联",
     "appid" : "__UNI__88BC25B",
     "description" : "",
     "versionName" : "1.0.0",
diff --git a/pages.json b/pages.json
index dee4550..ab04b4d 100644
--- a/pages.json
+++ b/pages.json
@@ -402,8 +402,9 @@
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "灿能电力",
     "navigationBarBackgroundColor": "#ffffff",
-    "backgroundColor": "#f3f4f5",
+    "backgroundColor": "#f3f4f5"
     // #ifdef H5
+    ,
     "navigationStyle": "custom"
     // #endif
   },
diff --git a/pages/device/APF/detail.vue b/pages/device/APF/detail.vue
index 2eee807..c267c5f 100644
--- a/pages/device/APF/detail.vue
+++ b/pages/device/APF/detail.vue
@@ -3,91 +3,93 @@
         <view slot='body'>
             <view class='detail'>
                 <view class="detail-header">
-                    <view class="header" ref="header" @click="htmlToCanvas">
-                        <img src="/static/test2.pic.png" mode="widthFix" style="width: 100%;object-fit:cover" />
-                        <view class="point" :style="{ left: '480rpx', top: '80rpx' }">负载THDI(%)
-                            <view class="grid-card mt10">
-                                <view class="grid-card-content-2">
-                                    <view class="item">L1</view>
-                                    <view class="item">
-                                        558.2
-                                    </view>
-                                    <view class="item">L2</view>
-                                    <view class="item">
-                                        883.7
-                                    </view>
-                                    <view class="item">L3</view>
-                                    <view class="item">
-                                        403.4
+                    <Cn-htmlToImg domId="header" @renderFinish="renderFinish">
+                        <view class="header" ref="header" @click="previewImg">
+                            <img src="https://i.328888.xyz/2023/03/13/vQhGC.jpeg" style="width: 100%;object-fit:cover" />
+                            <view class="point" :style="{ left: '480rpx', top: '80rpx' }">负载THDI(%)
+                                <view class="grid-card mt10">
+                                    <view class="grid-card-content-2">
+                                        <view class="item">L1</view>
+                                        <view class="item">
+                                            558.2
+                                        </view>
+                                        <view class="item">L2</view>
+                                        <view class="item">
+                                            883.7
+                                        </view>
+                                        <view class="item">L3</view>
+                                        <view class="item">
+                                            403.4
+                                        </view>
                                     </view>
                                 </view>
                             </view>
-                        </view>
-                        <view class="point" :style="{ left: '200rpx', top: '80rpx' }">电网THDI(%)
-                            <view class="grid-card mt10">
-                                <view class="grid-card-content-2">
-                                    <view class="item">L1</view>
-                                    <view class="item">
-                                        55.3
-                                    </view>
-                                    <view class="item">L2</view>
-                                    <view class="item">
-                                        61.4
-                                    </view>
-                                    <view class="item">L3</view>
-                                    <view class="item">
-                                        55.2
+                            <view class="point" :style="{ left: '200rpx', top: '80rpx' }">电网THDI(%)
+                                <view class="grid-card mt10">
+                                    <view class="grid-card-content-2">
+                                        <view class="item">L1</view>
+                                        <view class="item">
+                                            55.3
+                                        </view>
+                                        <view class="item">L2</view>
+                                        <view class="item">
+                                            61.4
+                                        </view>
+                                        <view class="item">L3</view>
+                                        <view class="item">
+                                            55.2
+                                        </view>
                                     </view>
                                 </view>
                             </view>
-                        </view>
-                        <view class="module">
-                            <view class="grid-card">
-                                <view class="grid-card-content-2">
-                                    <view class="item">模块一</view>
-                                    <view class="item">
-                                        <view class="status-point-success mr10"></view>
-                                        <view style="width:30rpx">
-                                            15
+                            <view class="module">
+                                <view class="grid-card">
+                                    <view class="grid-card-content-2">
+                                        <view class="item">模块一</view>
+                                        <view class="item">
+                                            <view class="status-point-success mr10"></view>
+                                            <view style="width:30rpx">
+                                                15
+                                            </view>
+                                            <view>
+                                                °C
+                                            </view>
                                         </view>
-                                        <view>
-                                            °C
+                                        <view class="item">模块二</view>
+                                        <view class="item">
+                                            <view class="status-point-error mr10"></view>
+                                            <view style="width:30rpx">
+                                                0
+                                            </view>
+                                            <view>
+                                                °C
+                                            </view>
                                         </view>
-                                    </view>
-                                    <view class="item">模块二</view>
-                                    <view class="item">
-                                        <view class="status-point-error mr10"></view>
-                                        <view style="width:30rpx">
-                                            0
+                                        <view class="item">模块三</view>
+                                        <view class="item">
+                                            <view class="status-point-success mr10"></view>
+                                            <view style="width:30rpx">
+                                                15
+                                            </view>
+                                            <view>
+                                                °C
+                                            </view>
                                         </view>
-                                        <view>
-                                            °C
-                                        </view>
-                                    </view>
-                                    <view class="item">模块三</view>
-                                    <view class="item">
-                                        <view class="status-point-success mr10"></view>
-                                        <view style="width:30rpx">
-                                            15
-                                        </view>
-                                        <view>
-                                            °C
-                                        </view>
-                                    </view>
-                                    <view class="item">模块四</view>
-                                    <view class="item">
-                                        <view class="status-point-success mr10"></view>
-                                        <view style="width:30rpx">
-                                            15
-                                        </view>
-                                        <view>
-                                            °C
+                                        <view class="item">模块四</view>
+                                        <view class="item">
+                                            <view class="status-point-success mr10"></view>
+                                            <view style="width:30rpx">
+                                                15
+                                            </view>
+                                            <view>
+                                                °C
+                                            </view>
                                         </view>
                                     </view>
                                 </view>
                             </view>
                         </view>
-                    </view>
+                    </Cn-htmlToImg>
                     <!-- <view class="des">
                         <text>设备基础信息</text>
                         <text class="ml10">设备状态</text>
@@ -128,7 +130,6 @@ import xieBo from "./comp/xieBo.vue";
 import power from "./comp/power.vue";
 import oscillogram from "./comp/oscillogram.vue";
 import IO from "./comp/IO.vue";
-import html2canvas from 'html2canvas';
 
 
 export default {
@@ -144,6 +145,7 @@ export default {
             loading: false,
             navMenuActive: 0,
             navHeight: 0,
+            img: '',
             navMenuList: [{
                 text: '基本'
             }, {
@@ -267,19 +269,13 @@ export default {
                 }).exec()
             }, 1000);
         },
-        htmlToCanvas () {
-            // 获取设备dpi
-            let dom = this.$refs.header.$el
-            html2canvas(dom, {
-                scale: 8,
-            }).then((canvas) => {
-                // this.$refs.header.appendChild(canvas);
-                console.log(canvas);
-                uni.previewImage({
-                    current: 0,
-                    urls: [canvas.toDataURL('image/png')]
-                })
-            });
+        renderFinish (e) {
+            this.img = e
+        },
+        previewImg () {
+            uni.previewImage({
+                urls: [this.img],
+            })
         }
     },
     onLoad (options) {
@@ -288,6 +284,7 @@ export default {
 
 }
 </script>
+
 <style lang='scss'>
 .detail {
 
diff --git a/pages/device/DVR/detail.vue b/pages/device/DVR/detail.vue
index a2f2415..4dd3770 100644
--- a/pages/device/DVR/detail.vue
+++ b/pages/device/DVR/detail.vue
@@ -4,7 +4,7 @@
             <view class='detail'>
                 <view class="detail-header">
                     <view class="header">
-                        <image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
+                        <image src="../../../static/test2.png" mode="widthFix" style="width: 100%;" />
                     </view>
                     <!-- <view class="des">
                     <text>设备基础信息</text>
diff --git a/static/logo.png b/static/logo.png
index 3c83e4c..8bb7448 100644
Binary files a/static/logo.png and b/static/logo.png differ
diff --git a/static/test2.pic.png b/static/test2.png
similarity index 100%
rename from static/test2.pic.png
rename to static/test2.png