app-govern/pages/device/APF/detail.vue

<template>
    <Cn-page :loading='loading' noPadding>
        <view slot='body'>
            <view class='detail'>
                <view class="detail-header">
                    <Cn-htmlToImg domId="header" @renderFinish="renderFinish">
                        <view class="header" ref="header" @click="previewImg">
                            <img src="https://cdn.xiaoriri.com/md-imgs/test2.png"
                                style="width: 100%;height:475rpx;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">模块一</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-error mr10"></view>
                                            <view style="width:30rpx">
                                                0
                                            </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>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </Cn-htmlToImg>
                    <!-- <view class="des">
                        <text>设备基础信息</text>
                        <text class="ml10">设备状态</text>
                    </view> -->
                    <view class="nav" style="margin-top:-10rpx">
                        <view class="nav-menu" :class="{ 'nav-menu-active': navMenuActive == index }"
                            v-for="(item, index) in navMenuList" :key="index" @click="navMenuClick(index)">{{ item.text }}
                        </view>
                    </view>
                </view>
                <view class="content">
                    <view v-if="navMenuActive == 0">
                        <basic></basic>
                    </view>
                    <view v-else-if="navMenuActive == 1">
                        <xieBo></xieBo>
                    </view>
                    <view v-else-if="navMenuActive == 2">
                        <power></power>
                    </view>
                    <view v-else-if="navMenuActive == 3">
                        <oscillogram></oscillogram>
                    </view>
                    <view v-else-if="navMenuActive == 4">
                        <IO></IO>
                    </view>
                    <view style="height:20rpx"></view>
                </view>
                <uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
                    @trigger="trigger" />
            </view>
        </view>
    </Cn-page>
</template>
<script>
import basic from "./comp/basic.vue";
import xieBo from "./comp/xieBo.vue";
import power from "./comp/power.vue";
import oscillogram from "./comp/oscillogram.vue";
import IO from "./comp/IO.vue";


export default {
    components: {
        basic,
        xieBo,
        power,
        oscillogram,
        IO,
    },
    data () {
        return {
            loading: false,
            navMenuActive: 0,
            navHeight: 0,
            img: '',
            navMenuList: [{
                text: '基本'
            }, {
                text: '谐波'
            }, {
                text: '功率'
            }, {
                text: '波形'
            }, {
                text: 'I/O'
            }],
            content: [{
                iconPath: '/static/report.png',
                text: '告警',
            }, {
                iconPath: '/static/record.png',
                text: '记录',
            }, {
                iconPath: '/static/about.png',
                text: '关于',
            },
            ]
        }
    },
    methods: {
        trigger (e) {
            console.log(e);
            if (e.item.text === '分享') {
                this.$refs.share.open()
            } else if (e.item.text === '删除') {
                uni.showModal({
                    title: '提示',
                    content: '确定删除该设备吗？',
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定')
                        } else if (res.cancel) {
                            console.log('用户点击取消')
                        }
                    }
                });
            } else if (e.item.text === '下载') {
                this.$util.toast('下载成功')
            } else if (e.item.text === '记录') {
                uni.navigateTo({ url: '/pages/device/APF/record' })
            } else if (e.item.text === '告警') {
                uni.navigateTo({ url: '/pages/device/APF/report' })
            } else if (e.item.text === '关于') {
                uni.navigateTo({ url: '/pages/device/APF/about' })
            } else if (e.item.text === '移交') {
                uni.navigateTo({ url: '/pages/device/transfer' })
            } else if (e.item.text === '反馈') {
                uni.navigateTo({ url: '/pages/device/feedback' })
            } else if (e.item.text === '用户') {
                uni.navigateTo({ url: '/pages/device/user' })
            } else if (e.item.text === '报表') {
                this.$util.toast('效果是直接打开报表')
            } else if (e.item.text === '版本') {
                this.$util.toast('功能暂未开放')
            } else if (e.item.text === '模版') {
                this.$util.toast('效果是功能暂未开放直接打开报表')
            }
            this.$refs.fab.close()
        },
        navMenuClick (idx) {
            this.navMenuActive = idx
            uni.pageScrollTo({ scrollTop: 0, duration: 0 })
        },
        init () {
            let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
            console.log(userInfo.role);
            switch (userInfo.role) {
                case 1:
                    this.content.splice(0, 1)
                    this.content.splice(0, 0, {
                        iconPath: '/static/version.png',
                        text: '版本',
                    }, {
                        iconPath: '/static/template.png',
                        text: '模版',
                    })
                    break;
                case 2:
                    this.content.splice(0, 1)
                    break;
                case 3:
                    this.content.splice(0, 0, {
                        iconPath: '/static/transfer.png',
                        text: '移交',
                    })
                    break;
                case 4:
                    this.content.splice(1, 0, {
                        iconPath: '/static/delate.png',
                        text: '报表',
                    }, {
                        iconPath: '/static/table.png',
                        text: '删除',
                    }, {
                        iconPath: '/static/feedback.png',
                        text: '反馈',
                    })
                    break;
                case 5:
                    this.content.splice(2, 0, {
                        iconPath: '/static/table.png',
                        text: '报表',
                    }, {
                        iconPath: '/static/feedback.png',
                        text: '反馈',
                    })
                    break;
                default:
                    break;

            }
            setTimeout(() => {
                // 获取nav高度
                uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
                    this.navHeight = rect.height
                }).exec()
            }, 1000);
        },
        renderFinish (e) {
            this.img = e
        },
        previewImg () {
            if (!this.img) {
                uni.showLoading({
                    title: '图片生成中',
                    mask: false
                })
                setTimeout(() => {
                    this.previewImg()
                }, 500);
            } else {
                uni.hideLoading()
                uni.previewImage({
                    urls: [this.img],
                })
            }

        }
    },
    onLoad (options) {
        this.init()
    },

}
</script>

<style lang='scss'>
.detail {

    // background: $uni-theme-white;
    .header {
        position: relative;

        .point {
            position: absolute;
            color: #111;
            z-index: 2;
            text-align: center;
            color: #111;
            width: 110rpx;
            font-size: 16rpx;

            .grid-card-content-2 {
                font-size: 16rpx;

                .item {
                    min-height: unset;
                }
            }
        }

        .module {
            position: absolute;
            bottom: 0;
            right: 20rpx;
            width: 200rpx;

            .grid-card-content-2 {
                font-size: 16rpx;

                .item {
                    min-height: unset;
                }
            }
        }
    }

    .des {
        padding: 20rpx 20rpx 0;
        font-size: 28rpx;
        color: #999;
    }

    .content {
        box-sizing: border-box;
        padding: 0 20rpx;

    }

    .detail-header {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 2;
        background: #f3f4f5;
    }

}
</style>