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 || emptyEngineeringName }}
                    </text>
                    <uni-icons type="bottom" size="16" color="#111" v-if="select.engineeringName"></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,
            timer: null,
        }
    },
    computed: {
        emptyEngineeringName() {
            if (this.userInfo.authorities === 'tourist') {
                return '创建工程'
            } else if (this.userInfo.authorities === 'market_user') {
                return '请联系管理员配置工程'
            } else {
                return '创建工程'
            }
        },
    },
    methods: {
        selectEngineering() {
            if (this.select.engineeringName) {
                uni.navigateTo({
                    url: '/pages/home/selectEngineering',
                })
            } else {
                if (this.userInfo.authorities === 'tourist') {
                    return uni.showToast({
                        title: '此功能仅对VIP用户开放',
                        icon: 'none',
                    })
                } else if (this.userInfo.authorities === 'market_user') {
                    return uni.showToast({
                        title: '请联系管理员配置工程',
                        icon: 'none',
                    })
                }
                uni.navigateTo({
                    url: '/pages/engineering/new',
                })
            }
        },
        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.select.engineeringName = ''
                this.select.engineeringId = ''
                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() {
            if (!this.select.engineeringId) return
            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
                uni.setStorage({
                    key: this.$cacheKey.messageCount,
                    data: this.devCount,
                })
                let messagePage =
                    this.devCount.runCount +
                    this.devCount.eventCount +
                    this.devCount.alarmCount +
                    this.devCount.harmonicCount
                let minePage = this.devCount.harmonicCount
                uni.setTabBarBadge({
                    index: 1,
                    text: messagePage ? messagePage + '' : '',
                })
                uni.setTabBarBadge({
                    index: 2,
                    text: minePage ? minePage + '' : '',
                })
            })
        },
    },
    onLoad() {
        if (!uni.getStorageSync(this.$cacheKey.access_token)) {
            uni.reLaunch({
                url: '/pages/user/login',
            })
        }
        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)
        let access_token = uni.getStorageSync(this.$cacheKey.access_token)
        if (!access_token) {
            uni.reLaunch({
                url: `/pages/user/login`,
            })
        } else {
            this.init()
            this.timer = setInterval(this.getDevCount, 10000) // 定时请求
        }
    },
    onHide() {
        clearInterval(this.timer)
    }
}
</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>