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,
      replenish: {
        TimeConOFF: 0,
        TimeConON: 0,
      },
    };
  },
  methods: {
    onClick(item) {
      this.$refs.MyInput.openInput(item, false, this.replenish);
      this.$Http.changeOptions = function (options) {
        let item = options.find((v) => v.key == "ConstantConON");
        if (item) {
          this.replenish.ConstantConOFF = item.value == 0 ? 1 : 0;
        }
      }.bind(this);
    },
  },
};
</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>