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-08 13:45:57 +08:00
parent 7494382309
commit 43419da4c7
7 changed files with 734 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,28 +3,86 @@
<view slot='body'>
<view class='detail'>
<view class="detail-header">
<view class="header">
<image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
<view class="point" :style="{ left: '480rpx', top: '130rpx' }">负载THDI:<view></view>1703. 384%</view>
<view class="point" :style="{ left: '200rpx', top: '130rpx' }">电网THDI:<view></view>80. 831%</view>
<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
</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>
</view>
</view>
</view>
<view class="module">
<view class="grid-card">
<view class="grid-card-content-2">
<view class="item">模块一(300A)</view>
<view class="item">模块一</view>
<view class="item">
THDI：4.6% THDU：4.6%
<view class="status-point-success mr10"></view>
<view style="width:30rpx">
15
</view>
<view>
°C
</view>
</view>
<view class="item">模块二(300A)</view>
<view class="item">模块二</view>
<view class="item">
THDI：4.6% THDU：4.6%
<view class="status-point-error mr10"></view>
<view style="width:30rpx">
0
</view>
<view>
°C
</view>
</view>
<view class="item">模块三(300A)</view>
<view class="item">模块三</view>
<view class="item">
THDI：4.6% THDU：4.6%
<view class="status-point-success mr10"></view>
<view style="width:30rpx">
15
</view>
<view>
°C
</view>
</view>
<view class="item">模块四(300A)</view>
<view class="item">模块四</view>
<view class="item">
THDI：4.6% THDU：4.6%
<view class="status-point-success mr10"></view>
<view style="width:30rpx">
15
</view>
<view>
°C
</view>
</view>
</view>
</view>
@@ -70,6 +128,8 @@ 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 {
components: {
@@ -206,6 +266,20 @@ export default {
this.navHeight = rect.height
}).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')]
})
});
}
},
onLoad (options) {
@@ -226,18 +300,27 @@ export default {
color: #111;
z-index: 2;
text-align: center;
font-size: 20rpx;
color: #111;
width: 110rpx;
font-size: 16rpx;
.grid-card-content-2 {
font-size: 16rpx;
.item {
min-height: unset;
}
}
}
.module {
position: absolute;
bottom: 0;
right: 0;
width: 300rpx;
right: 20rpx;
width: 200rpx;
.grid-card-content-2 {
font-size: 14rpx;
font-size: 16rpx;
.item {
min-height: unset;
@@ -265,5 +348,6 @@ export default {
z-index: 2;
background: #f3f4f5;
}
}
</style>