water_affairs/control/components/prodnum-YK01/modules/controlPanel.vue

<template>
    <view class="control">
        <view class="control-title">
            控制面板
        </view>
        <view class="current">
            <view class="item" v-for="item in preview" :key="item.paramname">
                <view class="label">{{ item.paramname }}</view>
                <view class="value">{{ item.lastvalue || '' }}{{ item.unit || '' }}</view>
            </view>
        </view>
        <view class="show-list">
            <control-item v-for="item in itemList" :key="item.paramName" :item="item" @click.native="onClick(item)" />
        </view>
        <My_input ref="MyInput" />
    </view>
</template>
<script>
let model = null;
export default {
    name: "controlPanel",
    data() {
        return {
            itemList: [],
            preview: []
        }
    },
    methods: {
        onClick(item) {
            if (!model) model = this.$refs.MyInput;
            model.openInput(item)
        }
    }
}
</script>

<style lang="scss" scoped>
.current {
    display: flex;
    justify-content: space-around;
    color: #fff;
    margin-bottom: 10px;
    font-size: 12px;

    .label {
        margin-bottom: 5px;
    }
}

.show-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -5px;
    box-sizing: border-box;
}
</style>