app-govern/pages/index/comp/engineering.vue

<template>
    <view class="index-device">
        <view class="nav" :style="{ top: navTabHeight + 'px' }"> </view>
        <view class="content device project-list" :style="{ minHeight: minHeight }">
            <uni-card v-for="(item, index) in store.data" :key="index">
                <view class="card-header">
                    <view class="project-icon">
                        <uni-icons custom-prefix="iconfont" type="icon-gongcheng" color="#2563eb" size="45"></uni-icons>
                    </view>
                    <view class="project-info">
                        <view class="project-name">{{ item.engineeringName }}</view>
                        <view class="project-stats">
                            <view class="stat-item" @click="jump('nowEngineering', item)">
                                <text class="stat-value blue">{{ item.devTotal }}</text>
                                <text class="stat-label">设备总数</text>
                            </view>
                            <view class="stat-item" @click="jump('currentOnLineDevs', item)">
                                <text class="stat-value green">{{ item.onlineDevTotal }}</text>
                                <text class="stat-label">在线设备</text>
                            </view>
                            <view class="stat-item" @click="jump('currentOffLineDevs', item)">
                                <text class="stat-value red">{{ item.offlineDevTotal }}</text>
                                <text class="stat-label">离线设备</text>
                            </view>
                            <view class="stat-item" @click="jump('event', item)">
                                <text class="stat-value red">{{ item.alarmTotal }}</text>
                                <text class="stat-label">告警数量</text>
                            </view>
                        </view>
                    </view>
                    <view class="star-icon" @click="toggleStar(item)">
                        <uni-icons
                            custom-prefix="custom-icon"
                            :type="item.isTop == 1 ? 'star-filled' : 'star'"
                            :color="item.isTop == 1 ? '#ffcc00' : ''"
                            size="25"
                        ></uni-icons>
                    </view>
                </view>
            </uni-card>
            <uni-load-more
                v-if="store.status == 'loading' || deviceListFilter.length > 0"
                :status="store.status"
            ></uni-load-more>
            <Cn-empty v-else></Cn-empty>
        </view>
    </view>
</template>
<script>
import { engineeringPinToTop } from '@/common/api/device'
export default {
    props: {
        store: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            loading: false,
            minHeight: 0,
            navTabHeight: 0,
            userInfo: {},
        }
    },
    computed: {
        deviceListFilter() {
            let arr = this.store.data

            return arr
        },
    },
    created() {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
    },
    mounted() {
        console.log(12333, this.store)
    },
    methods: {
        toggleStar(item) {
            engineeringPinToTop({
                targetId: item.engineeringId,
                targetType: 2,
                userId: uni.getStorageSync(this.$cacheKey.userInfo).userIndex,
            }).then((res) => {
                if (res.code == 'A0000') {
                    this.$util.toast('操作成功!')
                    this.$emit('refresh')
                } else {
                    this.$util.toast(res.message)
                }
            })
        },
        getDeviceList() {
            this.store.params.pageSize = 50
            this.store.firstCallBack = (res) => {
                uni.createSelectorQuery()
                    .select('.uni-navbar')
                    .boundingClientRect((rect1) => {
                        if (!rect1) return
                        this.navTabHeight = rect1.height
                        uni.createSelectorQuery()
                            .select('.nav')
                            .boundingClientRect((rect2) => {
                                if (!rect2) return
                                // #ifdef H5
                                this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height + 50) + 'px)'
                                // #endif
                                // #ifdef APP-PLUS
                                this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height) + 'px)'
                                console.log(this.minHeight)
                                // #endif
                            })
                            .exec()
                    })
                    .exec()
            }
            this.store.reload()
        },
        async init() {
            console.warn('init')
            this.getDeviceList()
        },

        jump(type, item) {
            if (type == 'event') {
                uni.switchTab({
                    url: '/pages/index/message1',
                })
            } else {
                uni.setStorageSync('engineering', { name: item.engineeringName, id: item.engineeringId })
                uni.navigateTo({
                    url: '/pages/device/list?type=' + type,
                })
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.index-device {
    /* 列表容器 */

    // .project-card {
    //     background-color: #ffffff;
    //     border-radius: 16rpx;
    //     margin-bottom: 16rpx;
    //     padding: 24rpx;
    //     box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    // }

    .card-header {
        display: flex;
        align-items: center;
    }

    .project-icon {
        width: 110rpx;
        height: 110rpx;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
        background-color: #2563eb20;
    }

    .project-info {
        flex: 1;
        line-height: 36rpx;
    }

    .project-name {
        font-size: 15px;
        color: #3a3a3a;
        margin-bottom: 10rpx;
    }

    .project-stats {
        display: flex;
        // justify-content: space-between;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        border-right: 2rpx solid #ccc;
        &:last-child {
            border-right: none;
        }
    }

    .stat-value {
        font-size: 30rpx;
        font-weight: 700;
    }

    .stat-label {
        font-size: 24rpx;
        color: #6a6a6a;
    }

    .blue {
        color: #007aff;
    }

    .green {
        color: #34c759;
    }

    .red {
        color: #ff3b30;
    }

    .icon-star {
        color: #cccccc;
    }
}
/deep/ .uni-card {
    padding: 0 !important;
}
</style>