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

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 {