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)"
        class="boxClick"
        :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-zaixianjianceshebei'
                                        : 'icon-shebei1'
                                "
                                :color="device.runStatus == 1 ? '#ff3b30' : '#10B981'"
                                :size="device.devType == 'Direct_Connected_Device' ? '35' : '40'"
                            ></uni-icons> -->
                            <Cn-icon-device
                                :devType="device.devType"
                                :runStatus="device.runStatus"
                                :alarmStatus="device.isAlarm ? 1 : 0"
                            ></Cn-icon-device>
                        </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>
        <view class="pinToTop" v-if="device.isTop == 1"> 置顶 </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 +
                        '&device=' +
                        JSON.stringify(this.device),
                })
            } else {
                if (this.device.lineList.length == 0) {
                    return this.$util.toast('暂无监测点！')
                }
                uni.navigateTo({
                    url: '/pages/device/realTime/index?device=' + JSON.stringify(this.device),
                })
            }
        },
        getColor(status, type) {
            if (status == 1) {
                return '#ff3b3020'
            } else {
                return '#10b98120' //type == 'Direct_Connected_Device' ? '#10b98120' : ''
            }
        },
    },
}
</script>
<style lang="scss">
.device-body {
    padding: 10rpx 20rpx 20rpx;

    .device-body-item {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        color: #666666;
        line-height: 1.2;
    }
}
.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 20rpx 10rpx 0;
        overflow: hidden;
    }
}
.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
    font-size: 28rpx;
    color: #3a3a3a;
    font-weight: 700;
}
.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-subtitle {
    font-size: 12px;
    // margin-top: 5px;
    color: #666666;
}
.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: 100rpx;
    height: 100rpx;
    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: #10b98120;
    color: #10b981;
}
.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;
    background-color: #007aff20;
    color: #007aff;
}
.jc-tag {
    background-color: #007aff20;
    color: #007aff;
}
.pinToTop {
    background-color: $uni-theme-color;
    width: 100rpx;
    height: 60rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    font-size: 20rpx;
    position: absolute;
    top: 0rpx;
    right: 0rpx;
    position: absolute;
    top: 0;
    right: 0;

    /* 核心：旋转成斜三角效果 */
    transform: rotate(45deg) translate(50rpx, -10rpx);
    transform-origin: top right;
}
</style>