water_affairs/pages/facility/modules/preview.vue

<template>
    <view class="container" v-show="show">
        <view class="label">
            <view>
                基本信息
            </view>
            <view class="right">
                仅显示已填写的信息
                <view style="width: 10px;" />
                <!-- <u-switch v-model="reverlAll" size="22" /> -->
                <switch color="#0078FB" @change="reverlAll = !reverlAll" />
            </view>
        </view>
        <view class="box">
            <view class="row" v-if="!reverlAll || detail.devicename">
                <view class="row-label">设备名称</view>
                <view class="row-value">{{ detail.devicename || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.serialnumber">
                <view class="row-label">设备编号</view>
                <view class="row-value">{{ detail.serialnumber || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.prodtype">
                <view class="row-label">设备类型</view>
                <view class="row-value">{{ detail.prodtype || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.status">
                <view class="row-label">设备状态</view>
                <view class="row-value" :style="{ color: detail.bgColor }">{{ detail.status || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.areaname">
                <view class="row-label">区域</view>
                <view class="row-value">{{ detail.areaname || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.county">
                <view class="row-label">省市县</view>
                <view class="row-value">{{ detail.county ? detail.province + ',' + detail.city + ',' + detail.county : ' --'
                }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.address">
                <view class="row-label">详细地址</view>
                <view class="row-value">{{ detail.address || ' --' }}</view>
            </view>

            <view class="row" v-if="!reverlAll || detail.prodname">
                <view class="row-label">所属产品</view>
                <view class="row-value">{{ detail.prodname || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.lastconnecttime">
                <view class="row-label">最近上线时间</view>
                <view class="row-value">{{ detail.lastconnecttime || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.remarks">
                <view class="row-label">描述</view>
                <view class="row-value">{{ detail.remarks || ' --' }}</view>
            </view>
        </view>
        <view class="label">
            <view>
                系统信息
            </view>
        </view>
        <view class="box">
            <view class="row" v-if="!reverlAll || detail.createdate">
                <view class="row-label">创建时间</view>
                <view class="row-value">{{ detail.createdate || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.createby">
                <view class="row-label">创建人</view>
                <view class="row-value">{{ detail.createby || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.changedate">
                <view class="row-label">最近编辑时间</view>
                <view class="row-value">{{ detail.changedate || ' --' }}</view>
            </view>
            <view class="row" v-if="!reverlAll || detail.changeby">
                <view class="row-label">最近编辑人</view>
                <view class="row-value">{{ detail.changeby || ' --' }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "Preview",
    props: {
        detail: Object
    },
    data() {
        return {
            show: false,
            uninitialized: true,
            reverlAll: false
        }
    },
    methods: {
        initialize(init) {
            this.uninitialized = false;
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    width: 355px;
    margin: 0 auto;

    .label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 45px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        box-sizing: border-box;
        padding: 0 10px;
        .right {
            display: flex;
            align-items: center;
        }
    }

    .box {
        background: #fff;
        border-radius: 4px;
        overflow: hidden;

        .row {
            display: flex;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;

            &-label {
                width: 130px;
                margin-right: 10px;
                font-size: 14px;
                color: #666666;
            }

            &-value {
                flex: 1;
                font-size: 14px;
                color: #333333;
            }
        }
    }
}
</style>