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", "appid" : "__UNI__88BC25B",
"description" : "", "description" : "",
"versionName" : "1.0.0", "versionName" : "1.0.0",

3
pages.json
View File

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

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

@@ -3,91 +3,93 @@
<view slot='body'> <view slot='body'>
<view class='detail'> <view class='detail'>
<view class="detail-header"> <view class="detail-header">
<view class="header" ref="header" @click="htmlToCanvas"> <Cn-htmlToImg domId="header" @renderFinish="renderFinish">
<img src="/static/test2.pic.png" mode="widthFix" style="width: 100%;object-fit:cover" /> <view class="header" ref="header" @click="previewImg">
<view class="point" :style="{ left: '480rpx', top: '80rpx' }">负载THDI(%) <img src="https://i.328888.xyz/2023/03/13/vQhGC.jpeg" style="width: 100%;object-fit:cover" />
<view class="grid-card mt10"> <view class="point" :style="{ left: '480rpx', top: '80rpx' }">负载THDI(%)
<view class="grid-card-content-2"> <view class="grid-card mt10">
<view class="item">L1</view> <view class="grid-card-content-2">
<view class="item"> <view class="item">L1</view>
558.2 <view class="item">
</view> 558.2
<view class="item">L2</view> </view>
<view class="item"> <view class="item">L2</view>
883.7 <view class="item">
</view> 883.7
<view class="item">L3</view> </view>
<view class="item"> <view class="item">L3</view>
403.4 <view class="item">
403.4
</view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="point" :style="{ left: '200rpx', top: '80rpx' }">电网THDI(%)
<view class="point" :style="{ left: '200rpx', top: '80rpx' }">电网THDI(%) <view class="grid-card mt10">
<view class="grid-card mt10"> <view class="grid-card-content-2">
<view class="grid-card-content-2"> <view class="item">L1</view>
<view class="item">L1</view> <view class="item">
<view class="item"> 55.3
55.3 </view>
</view> <view class="item">L2</view>
<view class="item">L2</view> <view class="item">
<view class="item"> 61.4
61.4 </view>
</view> <view class="item">L3</view>
<view class="item">L3</view> <view class="item">
<view class="item"> 55.2
55.2 </view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="module">
<view class="module"> <view class="grid-card">
<view class="grid-card"> <view class="grid-card-content-2">
<view class="grid-card-content-2"> <view class="item">模块一</view>
<view class="item">模块一</view> <view class="item">
<view class="item"> <view class="status-point-success mr10"></view>
<view class="status-point-success mr10"></view> <view style="width:30rpx">
<view style="width:30rpx"> 15
15 </view>
<view>
°C
</view>
</view> </view>
<view> <view class="item">模块二</view>
°C <view class="item">
<view class="status-point-error mr10"></view>
<view style="width:30rpx">
0
</view>
<view>
°C
</view>
</view> </view>
</view> <view class="item">模块三</view>
<view class="item">模块二</view> <view class="item">
<view class="item"> <view class="status-point-success mr10"></view>
<view class="status-point-error mr10"></view> <view style="width:30rpx">
<view style="width:30rpx"> 15
0 </view>
<view>
°C
</view>
</view> </view>
<view> <view class="item">模块四</view>
°C <view class="item">
</view> <view class="status-point-success mr10"></view>
</view> <view style="width:30rpx">
<view class="item">模块三</view> 15
<view class="item"> </view>
<view class="status-point-success mr10"></view> <view>
<view style="width:30rpx"> °C
15 </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> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </Cn-htmlToImg>
<!-- <view class="des"> <!-- <view class="des">
<text>设备基础信息</text> <text>设备基础信息</text>
<text class="ml10">设备状态</text> <text class="ml10">设备状态</text>
@@ -128,7 +130,6 @@ import xieBo from "./comp/xieBo.vue";
import power from "./comp/power.vue"; import power from "./comp/power.vue";
import oscillogram from "./comp/oscillogram.vue"; import oscillogram from "./comp/oscillogram.vue";
import IO from "./comp/IO.vue"; import IO from "./comp/IO.vue";
import html2canvas from 'html2canvas';
export default { export default {
@@ -144,6 +145,7 @@ export default {
loading: false, loading: false,
navMenuActive: 0, navMenuActive: 0,
navHeight: 0, navHeight: 0,
img: '',
navMenuList: [{ navMenuList: [{
text: '基本' text: '基本'
}, { }, {
@@ -267,19 +269,13 @@ export default {
}).exec() }).exec()
}, 1000); }, 1000);
}, },
htmlToCanvas () { renderFinish (e) {
// 获取设备dpi this.img = e
let dom = this.$refs.header.$el },
html2canvas(dom, { previewImg () {
scale: 8, uni.previewImage({
}).then((canvas) => { urls: [this.img],
// this.$refs.header.appendChild(canvas); })
console.log(canvas);
uni.previewImage({
current: 0,
urls: [canvas.toDataURL('image/png')]
})
});
} }
}, },
onLoad (options) { onLoad (options) {
@@ -288,6 +284,7 @@ export default {
} }
</script> </script>
<style lang='scss'> <style lang='scss'>
.detail { .detail {

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

@@ -4,7 +4,7 @@
<view class='detail'> <view class='detail'>
<view class="detail-header"> <view class="detail-header">
<view class="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>
<!-- <view class="des"> <!-- <view class="des">
<text>设备基础信息</text> <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