app-govern/components/Cn-device-card/Cn-device-card.vue

<template>
    <uni-card
        :title="device.equipmentName"
        :sub-title="device.mac"
        :extra="device.isPrimaryUser == 1 ? '主设备' : '分享设备'"
        padding="0"
        @click="jump(device)"
        :thumbnail="deviceIcon(device.runStatus)"
    >
        <template v-slot:title>
            <!-- 卡片标题 -->
            <view class="uni-card__header" @click="jump(device)">
                <view class="uni-card__header-box">
                    <view class="uni-card__header-avatar">
                        <view class="event-icon">
                            <!-- 动态图标：根据类型切换 -->
                            <uni-icons
                                custom-prefix="iconfont"
                                :type="device.devType == 'Direct_Connected_Device' ? 'icon-shebei2' : 'icon-shebei1'"
                                :color="device.runStatus == 1 ? '#ff3b30' : '#67c23a'"
                                size="45"
                            ></uni-icons>
                        </view>
                    </view>
                    <view class="uni-card__header-content">
                        <text class="uni-card__header-content-title uni-ellipsis">
                            {{ device.equipmentName }}
                        </text>
                        <text class="uni-card__header-content-subtitle uni-ellipsis">
                            {{ device.mac }}
                        </text>
                        <view class="tagBox">
                            <text class="event-tag" :class="device.runStatus == 1 ? 'lx-tag' : 'zx-tag'">{{
                                device.runStatus == 1 ? '离线' : '在线'
                            }}</text>
                            <text
                                class="event-tag"
                                :class="device.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'"
                            >
                                {{ device.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}
                            </text>
                            <text class="event-tag" :class="device.isPrimaryUser == 1 ? 'z-tag' : 'fx-tag'">{{
                                device.isPrimaryUser == 1 ? '主设备' : '分享设备'
                            }}</text></view
                        >
                    </view>
                </view>
                <view class="uni-card__header-extra" style="position: relative" @click.stop>
                    <text class="uni-card__header-extra-text"></text>
                    <slot name="title"></slot>
                </view>
            </view>
            <!-- <slot name="title"></slot> -->
        </template>
        <view class="device-body">
            <view class="device-body-item">
                <text>工程名称</text>
                <text>{{ device.engineeringName }}</text>
            </view>
            <view class="device-body-item mt6">
                <text>项目名称</text>
                <text>{{ device.projectName }}</text>
            </view>
            <view class="device-body-item mt6" v-if="device.process == 2 || device.process == 3">
                <text>调试阶段</text>
                <text>{{ device.process == 2 ? '功能调试' : '出厂调试' }}</text>
            </view>
        </view>
    </uni-card>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: {
        device: {
            type: Object,
            default: () => {},
        },
    },
    methods: {
        deviceIcon(e) {
            let str = ''
            switch (e) {
                case 1:
                    str = '/static/device_bad.png'
                    break
                case 2:
                    str = '/static/device_success.png'
                    break
                default:
                    str = '/static/device_success.png'
                    break
            }
            return str
        },
        jump() {
            if (this.device.devType == 'Direct_Connected_Device') {
                uni.navigateTo({
                    url:
                        '/pages/device/APF/detail?id=' +
                        this.device.equipmentId +
                        '&isPrimaryUser=' +
                        this.device.isPrimaryUser +
                        '&process=' +
                        this.device.process +
                        '&ndid=' +
                        this.device.ndid,
                })
            } else {
                if (this.device.lineList.length == 0) {
                    return this.$util.toast('暂无监测点！')
                }
                uni.navigateTo({
                    url:
                        '/pages/device/realTime/index?id=' +
                        this.device.equipmentId +
                        '&isPrimaryUser=' +
                        this.device.isPrimaryUser +
                        '&process=' +
                        this.device.process +
                        '&ndid=' +
                        this.device.ndid +
                        '&lineList=' +
                        JSON.stringify(this.device.lineList) +
                        '&engineeringName=' +
                        this.device.engineeringName +
                        '&equipmentName=' +
                        this.device.equipmentName +
                        '&runStatus=' +
                        this.device.runStatus,
                })
            }
        },
    },
}
</script>
<style lang="scss">
.device-body {
    padding: 20rpx;

    .device-body-item {
        display: flex;
        justify-content: space-between;
    }
}
.uni-card {
    /deep/ .uni-card__header-box {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        overflow: hidden;
    }
    /deep/ .uni-card__header {
        display: flex;
        border-bottom: 2rpx #ebeef5 solid;
        flex-direction: row;
        align-items: center;
        padding: 20rpx;
        overflow: hidden;
    }
}
.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
    font-size: 15px;
    color: #3a3a3a;
}
.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-subtitle {
    font-size: 12px;
    // margin-top: 5px;
    color: #909399;
}
.uni-card .uni-card__header .uni-card__header-avatar .uni-card__header-avatar-image {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 10px;
}
.uni-card .uni-card__header .uni-card__header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
}
.tagBox {
    display: flex;
    gap: 15rpx;
}
.event-icon {
    position: relative;
    // width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
}
.event-tag {
    font-size: 20rpx;
    padding: 2rpx 10rpx;
    border-radius: 8rpx;
    margin-top: 5rpx;
    // height: 38rpx;
}

// 在线
.zx-tag {
    background-color: #67c23a20;
    color: #67c23a;
}
.lx-tag {
    background-color: #ff3b3020;
    color: #ff3b30;
}
.z-tag {
    background-color: #2563eb20;
    color: #2563eb;
}
.fx-tag {
    background-color: #90939920;
    color: #909399;
}
.zl-tag {
    background-color: #007aff20;
    color: #007aff;
}
.jc-tag {
    background-color: #36cfc920;
    color: #36cfc9;
}
</style>