App/app-govern
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面切图

Browse Source
This commit is contained in:
仲么了
2023-03-14 09:09:05 +08:00
parent a5b8139b88
commit 46e53cabcd
7 changed files with 145 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/Cn-htmlToImg/Cn-htmlToImg.vue Normal file
View File

@@ -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>

2
manifest.json
View File

@@ -1,5 +1,5 @@
{
"name" : "灿能电力",
"name" : "灿能物联",
"appid" : "__UNI__88BC25B",
"description" : "",
"versionName" : "1.0.0",

3
pages.json
View File

@@ -402,8 +402,9 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText": "灿能电力",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f3f4f5",
"backgroundColor": "#f3f4f5"
// #ifdef H5
,
"navigationStyle": "custom"
// #endif
},

167
pages/device/APF/detail.vue
View File

@@ -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 {

2
pages/device/DVR/detail.vue
View File

@@ -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>

BIN
static/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

0
static/test2.pic.png → static/test2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 218 KiB

After

Width:  |  Height:  |  Size: 218 KiB