yinchuan-community-all/mini-program/smart-city-yinchuan-wx/comps/device-card.vue

<template>
    <view class="">
        <view class="data" v-for="(item, index) in list" :key="index">
            <view class="top">
                <view class="left">
                    <view class="title">
                        <text>IMEI：{{item.imei}}</text>
                        <text @click.stop="copy(item.imei)" style="text-decoration: underline;"
                              class="base-color padding-left-20">复制
                        </text>
                    </view>
                </view>
                <view class="right">
                    <view v-if="item.defenseStatus==1" style="font-size: 24rpx;" class="radius sm cu-btn line-green">
                        已上线
                    </view>
                    <view v-if="item.defenseStatus==2" class="radius sm cu-btn line-red">
                        已下线
                    </view>
                </view>
            </view>
            <view class="item">
                <view class="left">
                    <view style="padding: 0 30rpx;">
                        <view class="contents" style="display: flex; align-items: center;">
                            <u-icon size="36" name="info-circle-fill" color="#fc5f44"></u-icon>
                            <text class="text-bold padding-left-sm">设备类型：</text>
                            <text>{{item.deviceTypeName}}</text>
                        </view>
                        <view class="contents" style="display: flex; align-items: center;">
                            <u-icon size="36" name="bell-fill" color="#81c995"></u-icon>
                            <text class="text-bold padding-left-sm">设备名称：</text>
                            <text>{{item.deviceName}}</text>
                        </view>
                        <view class="contents" style="display: flex; align-items: center;">
                            <view style="display: flex; align-items: center;">
                                <image src="https://szsq.nxzhsq.cn/community/miniofile/xlyq/dianchi.png"
                                       style="width: 36rpx;height: 36rpx;"></image>
                                <text class="text-bold padding-left-sm">电池电量：</text>
                            </view>
                            <view class="striped active cu-progress round " style="width: 60%;">
                                <view :style="[{ width:loading?item.battery+'%':''}]"
                                      style="background-color: #16c60c;color: #FFFFFF;">
                                    {{item.battery?item.battery:0}}%
                                </view>
                            </view>
                        </view>
                        <view class="contents" style="display: flex; align-items: center;">
                            <u-icon size="36" name="map-fill" color="#fd9f8f"></u-icon>
                            <text class="text-bold padding-left-sm">安装位置：</text>
                            <text>{{item.deviceInstallAddress}}</text>
                        </view>
                        <!-- 电表没有这个字段 -->
                        <!-- <view class="content" style="display: flex; align-items: center;" v-if="item.deviceType!=100030">
                            <view style="display: flex; align-items: center;">
                                <u-icon  size="36" name="https://szsq.nxzhsq.cn/community/miniofile/xlyq/wifi.png"></u-icon>
                                <text class="text-bold padding-left-sm">信号强度：</text>
                            </view>
                            <view class="striped active cu-progress round " style="width: 60%;">
                                <view :style="[{ width:loading?item.signalIntensity+'%':''}]" style="background-color: #fc5f44;color: #FFFFFF;">
                                    {{item.signalIntensity?item.signalIntensity:0}}%
                                </view>
                            </view>
                        </view> -->
                        <!-- <view  class="content" style="display: flex; align-items: center;">
                            <u-icon  size="36" name="backspace"></u-icon>
                            <text class="text-bold padding-left-sm">更新时间：</text>
                            <text v-text="item.updateTime?item.updateTime:'未知'"></text>
                        </view> -->
                    </view>
                </view>
            </view>
            <view class="bottom">
                <!-- <view @click.stop="goDetail(item)" style="font-size: 22rpx;font-weight: 800;" class="cu-btn  sm round  base-line" >
                    查看详情
                </view> -->
                <!-- <view @click.stop="goAlarm(item)"  class="cu-btn  sm round base-line" style="margin: 0 20rpx;font-size: 22rpx;font-weight: 800;">
                    <text>告警记录</text>
                </view> -->
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'card',
        props: {
            list: {
                type: Array,
                default: () => {
                    []
                }
            }
        },
        data() {
            return {
                loading: false
            };
        },
        created() {
            let that = this;
            setTimeout(function () {
                that.loading = true
            }, 500)
        },
        methods: {
            copy(data) {
                uni.setClipboardData({
                    data: data
                })
            },
            goAlarm(item) {
                uni.navigateTo({
                    url: "/pages/device/records?imei=" + item.imei
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    .line-green {
        border-color: #16aa5d;
        color: #16aa5d;
    }

    .line-red {
        border-color: #cf0000;
        color: #cf0000;
    }

    .data {
        width: 710 rpx;
        background-color: #ffffff;
        margin: 20 rpx auto;
        border-radius: 6 rpx;
        box-sizing: border-box;
        padding: 20 rpx 10 rpx;
        font-size: 28 rpx;

        .top {
            display: flex;
            justify-content: space-between;
            padding-bottom: 20 rpx;
            border-bottom: 1 rpx solid $dt-border-color-sm;

            .left {
                display: flex;
                align-items: center;

                .title {
                    margin: 0 10 rpx;
                    font-size: 30 rpx;
                }
            }

            .right {
                margin-right: 20 rpx;
            }
        }

        .item {
            margin: 5 rpx 0 20 rpx 0;

            .contents {
                border-bottom: 1 rpx dashed #DDDDDD;
                padding: 30 rpx 0;
            }
        }

        .bottom {
            display: flex;
            margin-top: 30 rpx;
            justify-content: flex-end;
            align-items: center;
        }
    }
</style>