app-govern/pages/device/APF/about.vue

<template>
    <Cn-page :loading="loading">
        <view slot="body">
            <view class="about">
                <view class="about-title">{{ deviceInfo.name }}</view>
                <view class="about-text">设备类型：{{ deviceInfo.devTypeName }}</view>
                <view class="about-text">设备型号：{{ deviceInfo.devModelName }}</view>
                <view class="about-text"
                    >设备接入方式：{{ deviceInfo.devAccessMethod === 'cloud' ? 'CLD' : 'MQTT' }}</view
                >
                <!-- <view class="about-text">设备注册时间：永久使用</view> -->
                <view class="about-text">程序版本：{{ deviceInfo.programVersionName }}</view>
                <view class="about-text">网络设备ID：{{ deviceInfo.ndid }}</view>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import { queryDeivceById } from '@/common/api/device'
import { queryByCode, queryCsDictTree, queryByid, queryEdDataPage } from '@/common/api/dictionary'
export default {
    data() {
        return {
            loading: true,
            deviceInfo: {},
        }
    },
    methods: {},
    onLoad(options) {
        queryDeivceById(options.id).then((res) => {
            console.log(res)
            this.deviceInfo = res.data[0]
            queryByCode('Device_Type').then((res) => {
                Promise.all([queryCsDictTree(res.data.id), queryByid(res.data.id), queryEdDataPage()]).then((resp) => {
                    console.log(resp)
                    this.deviceInfo.devTypeName = resp[0].data.find((item) => item.id === this.deviceInfo.devType)?.name
                    this.deviceInfo.devModelName = resp[1].data.find(
                        (item) => item.id === this.deviceInfo.devModel,
                    )?.name
                    this.loading = false
                })
            })
        })
    },
}
</script>
<style lang="scss">
.about {
    padding: 34rpx;
    .about-title {
        font-size: 34rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 34rpx;
    }
    .about-text {
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 34rpx;
    }
}
</style>