water_affairs/control/components/prodnum-MT02/modules/basics.vue

<template>
    <view class="control">
        <view class="update-line">
            <view class="label">
                {{ ctrlModel.funcname }}
            </view>
            <view class="content">
                {{ ctrlModel.showValue }}
                <view class="control-updata-but" hover-class="navigator-hover" @click="onClick(ctrlModel)">{{
                    ctrlModel.isfeedback ? '待更新' : '更新' }}</view>
            </view>
        </view>

        <view v-if="subcontrol" class="update-line">
            <view class="label">
                {{ subcontrol.funcname }}
            </view>
            <view class="content">
                {{ subcontrol.showValue || subcontrol.params.lastvalue }}
                <view class="control-updata-but" hover-class="navigator-hover" @click="onClick(subcontrol)">{{
                    subcontrol.isfeedback ? '待更新' : '更新' }}</view>
            </view>
        </view>

        <view class="list-box">
            <view class="item" v-for="item in list" :key="item.param">
                <view class="label">
                    {{ item.paramname }}
                </view>
                <view class="value">
                    {{ item.lastvalue }}
                    <text class="">
                        {{ item.unit }}
                    </text>
                </view>
            </view>
        </view>
        <My_input ref="MyInput" />
    </view>
</template>
<script>
export default {
    name: "basics",
    data() {
        return {
            ctrlModel: {},
            list: [],
            subcontrol: null
        }
    },
    methods: {
        onClick(item) {
            this.$refs.MyInput.openInput(item)
        }
    }
}
</script>

<style lang="scss" scoped>
.list-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 4px;
    padding: 6px;
    box-sizing: border-box;
    padding-bottom: 0;

    .item {
        width: 50%;

        .label {
            margin-bottom: 6px;
        }

        .value {
            margin-bottom: 6px;
            font-weight: bold;
            padding-left: 2px;
        }
    }

}
</style>