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

<template>
    <Cn-page :loading='loading' noPadding>
        <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>
                    <!-- <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>
                <view class="content">
                    <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" />
              
            </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/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/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' })
            } else if (e.item.text === '用户') {
                uni.navigateTo({ url: '/pages/device/user' })
            }
            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 3:
                    this.content.splice(1, 0, {
                        iconPath: '/static/transfer.png',
                        text: '移交',
                    })
                    break;
                case 4:
                    this.content.splice(0, 0,{
                        iconPath: '/static/subordinate.png',
                        text: '用户',
                    }, {
                        iconPath: '/static/delate.png',
                        text: '删除',
                    })
                    break;
                case 5:
                    this.content.push({
                        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-theme-blue;
    //             color: #fff;
    //         }
    //     }

    // }

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

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


}
</style>