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="#376cf3"
                color="#fff"
                @clickRight="openDrawer"
            >
                <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="#fff"></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>
                <view class="canneng-index-title mt20">设备列表</view>
                <Device ref="device" :store="store" />
            </view>
            <uni-drawer ref="showRight" mode="right" :mask-click="false">
                <uni-nav-bar :fixed="true" status-bar title="选择工程" color="#111"> </uni-nav-bar>
                <view style="height: 200px"></view>
                <view>
                    <uni-indexed-list
                        :options="engineeringListFilter"
                        :showSelect="false"
                        @click="closeDrawer"
                    ></uni-indexed-list>
                </view>
            </uni-drawer>
        </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'
import { pinyin } from 'pinyin-pro'

export default {
    mixins: [list],
    components: {
        YunWei,
        GongCheng,
        ZhuYongHu,
        ZhuanZhi,
        YouKe,
        Device,
    },
    data() {
        return {
            loading: false,
            userInfo: {},
            devCount: {},
            select: {
                engineeringName: '',
                engineeringId: '',
            },
            engineeringList: [],
        }
    },
    computed: {
        engineeringListFilter() {
            let result = []
            this.engineeringList.forEach((item) => {
                let arr = pinyin(item.name[0], { toneType: 'none', type: 'array' })
                let letter = arr[0][0].toUpperCase()
                console.log(letter)
                let index = result.findIndex((item) => item.letter === letter)
                if (index === -1) {
                    result.push({
                        letter,
                        data: [item.name],
                    })
                } else {
                    result[index].data.push(item.name)
                }
            })
            return result
        },
    },
    methods: {
        async init() {
            let engineering = uni.getStorageSync('engineering')
            let res = await queryEngineering()
            this.engineeringList = res.data
            if (this.engineeringList.length === 0) {
                return
            }
            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
            getDevCount(this.select.engineeringId).then((res) => {
                this.devCount = res.data
            })
            this.$refs.device && this.$refs.device.init()
        },
        closeDrawer(e) {
            console.log(e)
            this.engineeringList.forEach((item) => {
                if (item.name === e.item.name) {
                    uni.setStorageSync('engineering', item)
                    this.select.engineeringName = item.name
                    this.select.engineeringId = item.id
                    this.store.params.engineerId = item.id
                }
            })
            this.$refs.device.select.projectName = ''
            this.$refs.device.select.projectNameIndex = 0
            this.$refs.device.init()
            this.$refs.showRight.close()
        },
        send() {
            uni.createPushMessage({
                title: '灿能',
                content: '灿能推送',
                success: function (res) {
                    console.log('推送成功')
                },
                fail: function (res) {
                    console.log('推送失败')
                },
            })
        },
        loadingChange(e) {
            this.loading = e
        },
        openDrawer(item) {
            if (this.engineeringList.length === 0) {
                uni.showToast({
                    title: '暂无工程',
                    icon: 'none',
                })
                return
            } else if (this.engineeringList.length === 1) {
                uni.showToast({
                    title: '暂无其他工程',
                    icon: 'none',
                })
                return
            }
            this.$refs.showRight.open()
        },
    },
    onLoad() {
        this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
    },
    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">
.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>