app-govern/pages/index/index.vue

<template>
    <Cn-page :loading="loading" noPadding>
        <view slot="body" class="canneng-index">
            <uni-nav-bar
                rightWidth="300rpx"
                leftWidth="300rpx"
                dark
                :fixed="true"
                status-bar
                background-color="#fff"
                color="#111"
                @clickRight="selectEngineering"
            >
                <template slot="left">
                    <text style="font-size: 32rpx; font-weight: 500">灿能物联</text>
                </template>
                <template slot="right">
                    <text class="hide-txt mr5" style="font-size: 28rpx">{{ select.engineeringName }}</text>
                    <uni-icons type="bottom" size="16" color="#111"></uni-icons>
                </template>
            </uni-nav-bar>
            <view class="index">
                <!-- 运维 -->
                <YunWei :devCount="devCount" v-if="userInfo.authorities === 'operation_manager'"/>
                <!-- 专职 -->
                <ZhuanZhi :devCount="devCount" v-if="userInfo.authorities === 'market_user'"/>
                <!-- 工程 -->
                <GongCheng :devCount="devCount" v-if="userInfo.authorities === 'engineering_user'"/>
                <!-- 主用户 -->
                <ZhuYongHu :devCount="devCount" v-if="userInfo.authorities === 'app_vip_user'"/>
                <YouKe :devCount="devCount" v-if="userInfo.authorities === 'tourist'"></YouKe>
                <template v-if="engineeringList.length">
                    <view class="canneng-index-title mt20">设备列表</view>
                    <Device ref="device" :store="store"/>
                </template>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import YunWei from './comp/indexYunWei.vue'
import GongCheng from './comp/indexGongCheng.vue'
import ZhuYongHu from './comp/indexZhuYongHu.vue'
import ZhuanZhi from './comp/indexZhuanZhi.vue'
import YouKe from './comp/indexYouKe.vue'
import Device from './comp/device.vue'
import list from '../../common/js/list'
import {getDevCount} from '../../common/api/device.js'
import {queryEngineering} from '@/common/api/engineering.js'

export default {
    mixins: [list],
    components: {
        YunWei,
        GongCheng,
        ZhuYongHu,
        ZhuanZhi,
        YouKe,
        Device,
    },
    data() {
        return {
            loading: false,
            userInfo: {},
            devCount: {},
            select: {
                engineeringName: '',
                engineeringId: '',
            },
            engineeringList: [],
            navTabHeight: 0
        }
    },
    methods: {
        selectEngineering() {
            uni.navigateTo({
                url: '/pages/home/selectEngineering',
            })
        },
        async init() {
            let engineering = uni.getStorageSync('engineering')
            let res = await queryEngineering()
            this.engineeringList = res.data
            uni.setStorageSync('engineeringList', this.engineeringList)
            if (this.engineeringList.length === 0) {
                console.log('没有工程')
                uni.removeStorageSync(this.$cacheKey.engineering)
                this.projectList = []
            } else {
                if (!engineering) {
                    uni.setStorageSync('engineering', res.data[0])
                    this.select.engineeringName = res.data[0].name
                    this.select.engineeringId = res.data[0].id
                } else {
                    if (this.engineeringList.findIndex((item) => item.id === engineering.id) === -1) {
                        uni.setStorageSync('engineering', res.data[0])
                        this.select.engineeringName = res.data[0].name
                        this.select.engineeringId = res.data[0].id
                    } else {
                        this.select.engineeringName = engineering.name
                        this.select.engineeringId = engineering.id
                    }
                }
                this.store.params.engineerId = this.select.engineeringId
                this.getDevCount()
                console.log(this.$refs.device, 'this.$refs.device')
                this.$nextTick(() => {
                    this.$refs.device && this.$refs.device.init()
                })
            }
        },
        getDevCount() {
            getDevCount(this.select.engineeringId).then((res) => {
                // Object.assign(this.devCount, res.data)
                this.devCount = res.data
                this.devCount.currentOffLineDevs.forEach((item) => {
                    item.runStatus = 1
                })
                this.devCount.offLineDevs.forEach((item) => {
                    item.runStatus = 1
                })
                this.devCount.engineeringListLength = this.engineeringList.length
                console.log(this.devCount);
            })
        },
    },
    onLoad() {
        this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
        // #ifdef APP-PLUS
        setTimeout(() => {
            // 获取nav高度
            uni.createSelectorQuery().select('.uni-navbar').boundingClientRect((rect) => {
                this.navTabHeight = rect.height
                console.log('calc(100vh - ' + this.navTabHeight + ')')
            }).exec()
        }, 1000)
        // #endif
    },
    onShow() {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
        if (
            this.userInfo.authorities === 'app_vip_user' ||
            this.userInfo.authorities == 5 ||
            this.userInfo.authorities === 'tourist'
        ) {
            uni.setTabBarBadge({
                index: 1,
                text: '6',
            })
        }
        this.init()
    },
}
</script>
<style lang="scss">
.popup-content {
    background: #fff;
}

.index {
    padding: 20rpx 0 0;
}

.canneng-index-title {
    padding: 0 20rpx;
    font-size: 28rpx;
    font-weight: 500;
}

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

/deep/ .uni-drawer__content {
    width: 100vw !important;
}
</style>