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

<template>
    <Cn-page :loading='loading' noPadding>
        <view slot='body'>
            <view class='detail'>
                <view class="header">
                    <image src="/static/test2.pic.jpg" mode="widthFix" style="width: 100%;" />
                </view>
                <view class="des">
                    <text>设备基础信息</text>
                    <text class="ml10">设备状态</text>
                </view>
                <view class="nav">
                    <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 class="content" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
                    <DianWang v-if="navMenuActive == 0"></DianWang>
                    <NiBian v-else-if="navMenuActive == 1"></NiBian>
                    <ShuChu v-else-if="navMenuActive == 2"></ShuChu>
                    <GanJieDian v-else-if="navMenuActive == 3"></GanJieDian>
                    <ZhuangTaiLiang v-else-if="navMenuActive == 4"> </ZhuangTaiLiang>
                    <QiTa  v-else-if="navMenuActive == 5"></QiTa>
                    <view style="height:20rpx"></view>
                </view>
                <uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
                    @trigger="trigger" />
                <uni-popup ref="share" type="share" background-color="#fff">
                    <uni-popup-share title="分享到"></uni-popup-share>
                </uni-popup>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import DianWang from "./comp/dianWang.vue";
import NiBian from "./comp/niBian.vue";
import ShuChu from "./comp/shuChu.vue";
import GanJieDian from "./comp/ganJieDian.vue";
import ZhuangTaiLiang from "./comp/zhuangTaiLiang.vue";
import QiTa from "./comp/qiTa.vue";
export default {
    components: {
        DianWang,
        NiBian,
        ShuChu,
        GanJieDian,
        ZhuangTaiLiang,
        QiTa,
    },
    data () {
        return {
            loading: false,
            navMenuActive: 0,
            navHeight: 0,
            navMenuList: [{
                text: '电网数据'
            }, {
                text: '逆变数据'
            }, {
                text: '输出数据'
            }, {
                text: '干接点'
            }, {
                text: '状态量'
            },{
                text: '其他'
            }],
            content: [{
                iconPath: '/static/record.png',
                text: '记录',
            }, {
                iconPath: '/static/report.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/DVR/record' })
            } else if (e.item.text === '告警') {
                uni.navigateTo({ url: '/pages/device/DVR/report' })
            } else if (e.item.text === '关于') {
                uni.navigateTo({ url: '/pages/device/DVR/about' })
            } else if (e.item.text === '移交') {
                uni.navigateTo({ url: '/pages/device/transfer' })
            } else if (e.item.text === '反馈') {
                uni.navigateTo({ url: '/pages/device/feedback' })
            }
            this.$refs.fab.close()
        },
        navMenuClick (idx) {
            this.navMenuActive = idx
        },
        init () {
            let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
            console.log(userInfo.role);
            switch (userInfo.role) {
                case 3:
                    this.content.splice(0, 0, {
                        iconPath: '/static/transfer.png',
                        text: '移交',
                    })
                    break;
                case 4:
                    this.content.splice(0, 0, {
                        iconPath: '/static/share.png',
                        text: '分享',
                    }, {
                        iconPath: '/static/delate.png',
                        text: '删除',
                    })
                case 5:
                    this.content.splice(0, 0, {
                        iconPath: '/static/feedback.png',
                        text: '反馈',
                    })
                    break;
                default:
                    break;

            }
            setTimeout(() => {
                // 获取nav高度
                uni.createSelectorQuery().select('.nav').boundingClientRect((rect) => {
                    this.navHeight = rect.height
                }).exec()
            }, 1000);
        }
    },
    onLoad (options) {
        this.init()
    },

}
</script>
<style lang='scss'>
.detail {

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

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

    .nav {
        position: sticky;
        top: 0;
        left: 0;
        padding-top: 20rpx;
        display: flex;
        flex-wrap: wrap;
        background: rgb(243, 244, 245);

        .nav-menu {
            padding: 10rpx 20rpx;
            margin-left: 20rpx;
            margin-bottom: 20rpx;
            font-size: 28rpx;
            border-radius: 8rpx;
            background: $uni-theme-white;


            &-active {
                background: $uni-color-primary;
                color: #fff;
            }
        }

    }

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


}
</style>