water_affairs/pages/facility/modules/horizontalDirection.vue

<template>
    <scroll-view class="scroll" v-if="list.length" :scroll-x="true">
        <view class="box">
            <view class="item" v-for="item in list" :key="item.w_dataparamid">
                <view class="label">
                    {{ item.paramname }}
                    <text v-if="item.unit">
                        ({{ item.unit }})
                    </text>
                </view>
                <view class="value">
                    {{ item.lastvalue || '--' }}
                </view>
            </view>
        </view>
    </scroll-view>
</template>
<script>
export default {
    props: {},
    name: "horizontalDirection",
    data() {
        return {
            list: []
        }
    },
    methods: {
        getList(w_deviceid, prodnum) {
            return new Promise((resolve, reject) => {
                let special = ["FW01", '01'].includes(prodnum)
                console.log("special", special)
                this.$Http.basic({
                    "id": special ? 20230628084901 : 20230711165702,
                    "content": {
                        w_deviceid
                    }
                }).then(res => {
                    console.log("设备实时数据查询", res)
                    if (this.cutoff(res.msg)) return resolve(0)
                    if (special) {
                        if (["FW01", '01'].includes(prodnum)) {
                            const params = res.data.params,
                                list = [];
                            params.OpenDeg && list.push(params.OpenDeg)
                            params.Voltage && list.push(params.Voltage)
                            params.Longitude && list.push(params.Longitude)
                            params.Latitude && list.push(params.Latitude)
                            this.list = list;
                        }
                    } else {
                        this.list = res.data;
                    }
                    resolve(this.list.length ? 49 : 0)
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.scroll {
    width: 355px;
    background: #FFFFFF;
    border-radius: 4px;
    margin: 15px auto 0;
    height: 62px;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;

    .box {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding: 12px;
        box-sizing: border-box;

        .item {
            flex-shrink: 0;
            padding-right: 15px;

            .label {
                line-height: 14px;
                font-size: 10px;
                color: #666666;
            }

            .value {
                margin-top: 5px;
                line-height: 20px;
                font-size: 14px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #333333;
            }
        }
    }
}
</style>