water_affairs/control/components/prodnum-MT01/modules/tabs.vue

<template>
  <view class="tabs">
    <view class="box">
      <u-tabs
        :list="tabList"
        @click="changeTab"
        lineColor="#052E5D"
        :activeStyle="{ color: '#052E5D', fontWeight: 'bold' }"
        :inactiveStyle="{
          color: '#BBBBBB',
        }"
        lineWidth="36"
      />
    </view>
    <view class="content">
      <view class="yblc" v-show="showPage == '报警设置'">
        <control-item
          v-show="showPage == '报警设置'"
          v-for="item in bjszList"
          :key="item.w_functionid"
          :item="item"
          @click.native="onClick(item)"
        />
      </view>
      <view class="gdsz" v-show="showPage == 'PID设置'">
        <view class="plcsz" style="margin-bottom: 4px">
          <view class="label">PID调节</view>
          <view class="value">
            {{ PICTJ || "--" }}
          </view>
        </view>
        <view class="yblc">
          <control-item
            v-show="showPage == 'PID设置'"
            v-for="item in gdszList"
            :key="item.w_functionid"
            :item="item"
            @click.native="onClick(item)"
          />
        </view>
      </view>
      <view class="yblc" v-show="showPage == '仪表量程'">
        <control-item
          v-show="showPage == '仪表量程'"
          v-for="item in yclbList"
          :key="item.w_functionid"
          :item="item"
          @click.native="onClick(item)"
        />
      </view>
      <block v-if="showPage == 'PLC时钟'">
        <view class="plcsz">
          <view class="label"> 年月日时分秒 </view>
          <view class="value" v-if="plc.funcname">
            {{ plc.params.lastvalue || "--" }}
            <view
              class="plcsz-but"
              hover-class="navigator-hover"
              @click="datetimeShow = true"
              >{{ plc.isfeedback ? "待更新" : "更新" }}</view
            >
            <u-datetime-picker
              :show="datetimeShow"
              title="PLC时钟"
              v-model="plclastvalue"
              @cancel="onCancel"
              @confirm="onConfirm"
              mode="datetime"
            />
          </view>
        </view>
        <view class="plcsz">
          <view class="label"> 同步时间 </view>
          <view class="value" v-if="TBSJ.funcname">
            {{ TBSJ.params.options[0].label || "--" }}
            <view
              class="plcsz-but"
              hover-class="navigator-hover"
              @click="changeTBSJ"
              >{{ TBSJ.isfeedback ? "待更新" : "更新" }}</view
            >
          </view>
        </view>
      </block>
    </view>
    <My_input ref="MyInput" />
  </view>
</template>

<script>
import mpattern from "./mpattern";
import { formatTime } from "../../../../utils/getTime";

export default {
  name: "tabs",
  components: { mpattern },
  props: {
    control: Object,
  },
  data() {
    return {
      tabList: [],
      showPage: "报警设置",
      bjszList: [],
      yclbList: [],
      gdszList: [],
      PICTJ: "",
      llcj: {},
      plc: {},
      TBSJ: {},
      datetimeShow: false,
      plclastvalue: "",
    };
  },
  watch: {
    control: function (newVal) {
      if (newVal) {
        this.tabList = [
          {
            name: "报警设置",
          },
          {
            name: "仪表量程",
          },
          {
            name: "PLC时钟",
          },
          {
            name: "PID设置",
          },
        ];
        try {
          this.bjszList = this.__proto__.getControlItem(
            ["失压警告", "失压警告设定", "失压报警", "失压报警设定"],
            newVal
          );
          let s018 = newVal.params.S018;
          this.PICTJ = s018.options.find(
            (v) => v.value == s018.lastvalue
          ).label;
        } catch (error) {
          console.error("报警设置", error);
        }
        try {
          let nameList = ["压力量程高值", "压力量程低值"];
          this.yclbList = this.__proto__.getControlItem(nameList, newVal);
        } catch (error) {
          console.error("仪表量程", error);
        }
        try {
          this.plc = this.__proto__.getControlItem(["PLC时钟"], newVal, {
            Ctrl: "datatime",
          })[0];
          let date = {
            C006: null,
            C007: null,
            C008: null,
            C009: null,
            C010: null,
            C011: null,
          };
          for (const key in date) {
            let lastvalue = newVal.params[key].lastvalue;
            date[key] = lastvalue > 10 ? lastvalue : "0" + (lastvalue - 0);
          }
          this.plclastvalue = `${date.C006}-${date.C007}-${date.C008} ${date.C009}:${date.C010}:${date.C011}`;
          this.plc.params.lastvalue = this.plclastvalue;
          this.TBSJ = this.__proto__.getControlItem(["同步时间"], newVal)[0];
          console.log("TBSJ", this.TBSJ);
        } catch (error) {
          console.error("PLC时钟", error);
        }
        try {
          let nameList = ["P设定", "I设定", "D设定"];
          this.gdszList = this.__proto__.getControlItem(nameList, newVal);
        } catch (error) {
          console.error("PID设置", error);
        }
      }
    },
  },
  methods: {
    changeTBSJ() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定更新数据吗？",
        success: function ({ confirm }) {
          if (confirm)
            that.$refs.MyInput.submit(
              that.TBSJ.w_functionid,
              that.TBSJ.paramName
            );
        },
      });
    },
    changeTab(e) {
      this.showPage = e.name;
    },
    onClick(item) {
      console.log("修改", item);
      this.$refs.MyInput.openInput(item);
    },
    onCancel(e) {
      this.datetimeShow = false;
    },
    async onConfirm(e) {
      let date = formatTime(new Date(e.value)).split(" "),
        plc = this.plc;
      date = date[0].split("-").concat(date[1].split(":"));
      let res = await this.$Http.setControlItem(plc.w_functionid, {
        C006: date[0],
        C007: date[1],
        C008: date[2],
        C009: date[3],
        C010: date[4],
        C011: date[5],
      });
      this.datetimeShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  position: relative;
  box-sizing: border-box;

  .box {
    background: #fff;
    border: 4px;
    border-radius: 4px;
    box-sizing: border-box;
  }

  /deep/ .controlItem {
    width: 160px !important;
  }

  /deep/ .uni-scroll-view,
  /deep/.u-tabs__wrapper__nav__item {
    height: 35px !important;
  }

  /deep/ .u-tabs__wrapper__nav__item__text {
    font-size: 12px !important;
  }

  .content {
    // padding: 0 10px 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    width: 100%;

    .gdsz {
      .llcj {
        display: flex;
        align-items: center;
        font-size: 3.2vw;

        .unit {
          font-size: 3.2vw;
        }
      }
    }

    .yblc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .plcsz {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 10px 10px 0;
      line-height: 25px;
      color: #fff;

      .value {
        display: flex;
        color: #fff;

        .plcsz-but {
          background-color: #004a92;
          font-size: 12px;
          padding: 0 6px !important;
          margin-right: 6px;
          border-radius: 4px;
          box-sizing: border-box;
          margin-left: 20px;
          color: #fff;
          font-size: 10px;
          height: 22px;
          line-height: 22px;
        }
      }
    }
  }
}
</style>