water_affairs/pages/facility/detail.vue

<template>
    <view class="container">
        <cu-custom ref="Dustom" id="custom"
            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
            :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">
                设备详情
            </block>
        </cu-custom>
        <My_listbox ref="List" :pullDown="false" @getlist="loadData">
            <view class="head">
                <view class="name">
                    <text class="status" :style="{ backgroundColor: detail.bgColor }">{{ detail.status
                    }}</text>
                    {{ detail.devicename }}
                </view>
                <view class="row">
                    设备编号：{{ detail.serialnumber || ' --' }}
                </view>
                <view class="row">
                    最近上线时间：{{ detail.lastconnecttime || ' --' }}
                </view>
            </view>
            <view class="image">
                图片预留区域
            </view>
            <view class="ceiling" :style="{ top: tovw(CustomBar) }">
                <horizontal-direction ref="hd" />
            </view>
            <view class="ceiling" :style="{ top: tovw(CustomBar + tabsTop) }">
                <tabs :tabs="tabs" @changeTab="changeTab" />
            </view>
            <control ref="设备控制" :detail="detail" />
            <daily-record ref="设备日志" :w_deviceid="w_deviceid" />
            <preview ref="详情信息" :detail="detail" />

            <view style="height: 30px;" />
        </My_listbox>
    </view>
</template>

<script>
import horizontalDirection from "./modules/horizontalDirection.vue"
import tabs from "./modules/tabs.vue"
import preview from "./modules/preview.vue"
import dailyRecord from "./modules/dailyRecord.vue"
import control from "./modules/control.vue"

let page = {};
export default {
    components: { horizontalDirection, tabs, preview, dailyRecord, control },
    name: "facilityD",
    data() {
        return {
            CustomBar: 0,
            tabsTop: 0,
            w_deviceid: 0,
            detail: {},
            showTab: '设备控制',
            tabs: [{
                name: '设备控制'
            }, {
                name: '设备日志'
            }, {
                name: '详情信息'
            }]
        }
    },
    onLoad(options) {
        this.w_deviceid = options.id;
        this.getDetail(true)
    },
    mounted() {
        this.CustomBar = -10;
        this.$refs.List.setHeight();
    },
    methods: {
        getDetail(init = false) {
            this.$Http.basic({
                "id": 20230615103902,
                "content": {
                    "w_deviceid": this.w_deviceid
                }
            }).then(res => {
                console.log("设备详情", res)
                if (this.cutoff(res.msg)) return;
                switch (res.data.status) {
                    case '在线':
                        res.data.bgColor = "#007aff";
                        break;
                    case '禁用':
                        res.data.bgColor = "#F56C6C";
                        break;
                    default:
                        res.data.bgColor = "#F9AE3D";
                        break;
                }
                this.detail = res.data;
                if (init) {
                    this.$refs.hd.getList(this.w_deviceid).then(num => this.tabsTop = num)
                    setTimeout(() => { this.changeTab({ name: this.showTab }, true) }, 100)
                }
            })
        },
        changeTab({ name }, init = false) {
            this.showTab = name;
            page.show = false;
            page = this.$refs[name];
            this.loadData(init);
        },
        loadData(init) {
            // show t =加载 f=变化 
            if ((page.uninitialized && !page.show) || init) {
                console.log("首次加载", this.showTab)
                page.show = true;
                page.initialize(true)
            } else if (page.show) {
                page.initialize()
            } else {
                page.show = true;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.ceiling {
    position: sticky;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
    z-index: 9;
}

.head {
    width: 355px;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 10px 15px;
    box-sizing: border-box;
    margin: 10px auto 0;

    .name {
        line-height: 20px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-bottom: 10px;

        .status {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            color: #FFFFFF;
            margin-right: 5px;
            font-weight: normal;
            font-size: 14px;
        }
    }

    .row {
        line-height: 17px;
        font-size: 12px;
        color: #666666;
        margin-bottom: 5px;


    }
}

.image {
    width: 355px;
    height: 158px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto 0;
}
</style>