bigdata_WX/pages/cb/shuifeizsFirst/rotationflow.vue

<template>
  <view class="rotationflow">
    <custom-card>
      <block slot="backText">自动控制</block>
    </custom-card>
    <view class="rotationflow-top">
      <view class="rotationflow-top-list">
        <image :src="autoBtn" class="rotate-autoBtn" />
        <image :src="rotate" class="rotate-rotate" />
        <image :src="water" class="rotate-water" />
        <view class="rotationflow-time">
          <view class="rotationflow-time-title" style="font-size: 28px">{{
            currentFq.name || '--'
          }}</view>
          <!-- <view class="rotationflow-time-content"> {{ time }}</view> -->
          <view class="rotationflow-time-label">{{ label }}</view>
        </view>
      </view>
    </view>
    <view class="rotationflow-middle">
      <view
        class="rotationflow-middle-item"
        v-for="item in list"
        :key="item.label"
      >
        <view class="rotationflow-middle-item-value">{{ item.value }}</view>
        <view class="rotationflow-middle-item-title">{{
          item.sfDisplayname || item.sfName
        }}</view>
      </view>
    </view>
    <view class="rotationflow-content">
      <view class="rotationflow-content-top">
        <view
          :class="
            tktype == '1'
              ? 'rotationflow-content-top-title'
              : 'rotationflow-content-top-title-rever'
          "
        >
          {{ tktype == '1' ? '灌溉' : '水肥' }}
        </view>
        <view class="rotationflow-content-top-desc">已选灌区</view>
      </view>
      <view class="rotationflow-content-list">
        <view class="rotationflow-content-list-wrapper" v-if="tktype == 1">
          <view class="rotationflow-content-num">
            <view class="rotationflow-content-num-title"
              >轮灌次数：{{ currentFq.lgcs || 0 }}</view
            >
            <view class="rotationflow-content-num-title"
              >轮灌间隔：{{ currentFq.lgjg || 0 }} 分钟</view
            >
          </view>
        </view>
        <view class="rotationflow-content-list-wrapper" v-else>
          <view class="rotationflow-content-num">
            <view class="rotationflow-content-num-title"
              >轮灌次数：{{ currentFq.lgcs || 0 }}</view
            >
            <view class="rotationflow-content-num-title"
              >肥前水：{{ currentFq.fqcx || 0 }} 分钟</view
            > </view
          ><view class="rotationflow-content-num">
            <view class="rotationflow-content-num-title"
              >轮灌间隔：{{ currentFq.lgjg || 0 }} 分钟</view
            >
            <view class="rotationflow-content-num-title"
              >肥后水：{{ currentFq.fhcx || 0 }} 分钟</view
            > </view
          ><view class="rotationflow-content-num">
            <view class="rotationflow-content-num-title"
              >模式选择：{{ getsfmode(currentFq.sfmode) }}</view
            >
            <view class="rotationflow-content-num-title"></view>
          </view>
        </view>
        <view
          class="rotationflow-content-list-item"
          v-for="(item, index) in fqList"
          :class="item.value === '2' ? 'haveYet' : ''"
          :key="index"
        >
          <view
            class="rotationflow-content-list-item-title"
            :class="
              item.value === '1' ? 'rotationflow-content-list-item-current' : ''
            "
            >{{ item.name }}</view
          >
          <view
            class="rotationflow-content-list-item-desc"
            :class="
              item.value === '1' ? 'rotationflow-content-list-item-current' : ''
            "
            >{{ item.value == '2' ? '已灌溉' : item.ggsj + '分钟' }}</view
          >
        </view>
      </view>
    </view>
    <view class="rotationflow-footer">
      <view class="rotationflow-footer-item" @click="rotationflowEnd"
        >结束灌溉</view
      >
    </view>
  </view>
</template>
<script>
import rotate from './assets/rotate.png';
import water from './assets/water.png';
import autoBtn from './assets/autoBtn.png';
import json from './test.js';

export default {
  name: 'rotationflow',
  data() {
    return {
      rotate,
      water,
      autoBtn,
      time: '-',
      list: [],
      timer: null,
      devBid: '',
      tktype: 1,
      lgcs: 0,
      lgjg: 0,
      fqList: [],
      currentFq: {},
      label: '灌溉中.',
      devName: '',
      devStatus: '',
    };
  },
  components: {},
  methods: {
    formartTime(time) {
      if (!time) {
        return '-';
      }
      let hours = time * 60 * 1000;
      let h = Math.floor(hours / (60 * 60 * 1000));
      let m = Math.floor((hours % (60 * 60 * 1000)) / (60 * 1000));
      let s = Math.floor(((hours % (60 * 60 * 1000)) % (60 * 1000)) / 1000);
      this.time = `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${
        s < 10 ? '0' + s : s
      }`;
    },
    setTime(time) {
      if (!time) {
        return '-';
      }
      let hours = time * 60 * 1000;
      this.timer = setInterval(() => {
        if (hours <= 0) {
          clearInterval(this.timer);
          return;
        }
        hours -= 1000;
        let h = Math.floor(hours / (60 * 60 * 1000));
        let m = Math.floor((hours % (60 * 60 * 1000)) / (60 * 1000));
        let s = Math.floor(((hours % (60 * 60 * 1000)) % (60 * 1000)) / 1000);
        this.time = `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${
          s < 10 ? '0' + s : s
        }`;
      }, 1000);
    },
    getsfmode(m) {
      const mode = String(m);
      switch (mode) {
        case '1':
          return '定时';
        case '2':
          return '定量';
        case '3':
          return 'EC调配';
        case '4':
          return '混肥比例';
        default:
          return '-';
      }
    },
    async getRunStatus() {
      const res = await this.$myRequest({
        url: '/api/v2/iot/mobile/device/sf/zsrf/task/run/status/',
        method: 'post',
        data: {
          devBid: this.devBid,
        },
      });

      const data = res || {};
      if (data.status === undefined || data.status / 1 !== 1) {
        clearInterval(this.timer);
        clearInterval(this.labelTimer);
        clearInterval(this.taskTimer);
        uni.showLoading({
          title: '灌溉任务已结束',
        });

        setTimeout(() => {
          uni.hideLoading();
          uni.redirectTo({
            url: `/pages/cb/shuifeizsFirst/shuifeizs?devBid=${this.devBid}&devName=${this.devName}&devStatus=${this.devStatus}`,
          });
        }, 1000);
        return;
      }

      this.list = data?.sensorList || [];

      this.tktype = data?.tktype;
      this.lgjg = data?.lgjg || 0;
      this.lgcs = data?.lgcs || 0;
      this.fqList = data?.fqList || [];
      // value 0 未灌溉 1 灌溉中 2 灌溉完成
      this.fqList.forEach((item) => {
        if (item.value === '1') {
          this.currentFq = item;
        }
      });
      this.formartTime(this.currentFq.lgjg);
      // this.setTime(this.currentFq.lgjg);
    },
    rotationflowEnd() {
      const payload = {
        devBid: this.devBid,
        tkid: 0,
        status: 0,
        tktype: this.tktype,
      };
      this.postTaskCtl(payload);
    },
    async postTaskCtl(payload) {
      uni.showLoading({
        title: '正在执行',
      });
      const res = await this.$myRequest({
        url: '/api/v2/iot/mobile/device/sf/zsrf/task/ctl/',
        method: 'post',
        data: payload,
        header: {
          'Content-Type': 'application/json',
        },
      });
      uni.hideLoading();
      if (res.code === '000000') {
        uni.showToast({
          title: '操作成功',
        });
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/cb/shuifeizsFirst/shuifeizs?devBid=${this.devBid}&devName=${this.devName}&devStatus=${this.devStatus}`,
          });
        }, 1000);
      } else {
        uni.showToast({
          icon: 'none',
          title: res.msg,
        });
      }
    },
  },
  onLoad(options) {
    const { devBid, devName, devStatus } = options;
    this.devBid = devBid;
    this.devName = devName;
    this.devStatus = devStatus;
    this.getRunStatus();
    this.labelTimer = setInterval(() => {
      if (this.label === '灌溉中.') {
        this.label = '灌溉中..';
      } else if (this.label === '灌溉中..') {
        this.label = '灌溉中...';
      } else {
        this.label = '灌溉中.';
      }
    }, 500);

    this.taskTimer = setInterval(() => {
      this.getRunStatus();
    }, 30000);
  },
  onUnload() {
    clearInterval(this.timer);
    clearInterval(this.labelTimer);
    clearInterval(this.taskTimer);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }

    if (this.taskTimer) {
      clearInterval(this.taskTimer);
    }

    if (this.labelTimer) {
      clearInterval(this.labelTimer);
    }
  },
};
</script>
<style scoped lang="scss">
uni-page-body,
uni-page-wrapper {
  position: relative;
  height: 100%;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rotationflow {
  background: linear-gradient(
      180deg,
      #f5f6fa00 0%,
      #f5f6fa 23.64%,
      #f5f6fa 100%
    ),
    linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%);
  width: 100%;
  height: calc(100vh - 100rpx);
  overflow: hidden;
  overflow-y: scroll;
  margin-bottom: 140rpx;
  position: relative;
  .rotationflow-top {
    height: 500rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .rotationflow-top-list {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      .rotate-autoBtn {
        position: absolute;
        width: 360rpx;
        height: 360rpx;
        z-index: 1;
      }
      .rotate-rotate {
        position: absolute;
        width: 320rpx;
        height: 320rpx;
        left: 215rpx;
        top: 92rpx;
        z-index: 2;
        // 循环滚动
        animation: rotate 20s linear infinite;
      }
      .rotate-water {
        position: absolute;
        width: 550rpx;
        height: 600rpx;
        margin-left: 220rpx;
        margin-top: 100rpx;
      }
      .rotationflow-time {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 3;
        top: -5rpx;
        .rotationflow-time-title {
          width: 200rpx;
          color: #042118;
          text-align: center;
          font-family: 'Source Han Sans CN VF';
          font-size: 32rpx;
          font-weight: 500;
        }
        .rotationflow-time-content {
          width: 200rpx;
          color: #042118;
          font-family: 'Source Han Sans CN VF';
          font-size: 40rpx;
          font-weight: 700;
          margin: 8rpx 0;
          text-align: center;
        }
        .rotationflow-time-label {
          width: 140rpx;
          color: #687a74;
          text-align: left;
          font-family: 'Source Han Sans CN VF';
          font-size: 32rpx;
          font-weight: 400;
        }
      }
    }
  }
  .rotationflow-middle {
    display: flex;
    padding: 0 48rpx;
    margin: 32rpx 0;
    .rotationflow-middle-item {
      width: 25%;
      text-align: center;
      .rotationflow-middle-item-value {
        color: #042118;
        font-family: 'Source Han Sans CN VF';
        font-size: 32rpx;
        font-weight: 500;
      }
      .rotationflow-middle-item-title {
        color: #687a74;
        font-family: 'Source Han Sans CN VF';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        // 超出隐藏
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .rotationflow-content {
    border-bottom: none;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    width: calc(100% - 128rpx);
    margin-left: 32rpx;
    margin-bottom: 140rpx;
    &::before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
    }
    .rotationflow-content-top {
      display: flex;
      .rotationflow-content-top-title {
        border-radius: 8rpx;
        background: #1890ff1a;
        color: #1890ff;
        font-family: 'Source Han Sans CN VF';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 4rpx 16rpx;
      }
      .rotationflow-content-top-title-rever {
        border-radius: 8rpx;
        background: #f3a72f1a;
        color: #f3a72f;
        font-family: 'Source Han Sans CN VF';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 4rpx 16rpx;
      }
      .rotationflow-content-top-desc {
        color: #333333;
        font-family: 'Source Han Sans CN VF';
        font-size: 28rpx;
        font-weight: 700;
        margin-left: 16rpx;
      }
    }
    .rotationflow-content-list {
      width: 100%;
      .rotationflow-content-list-wrapper {
        width: 100%;
        border-radius: 8rpx;
        background: #f5f6fa;
        padding: 8rpx 0;
        margin-top: 16rpx;
      }
      .rotationflow-content-num {
        display: flex;
        padding: 8rpx 16rpx;
        .rotationflow-content-num-title {
          width: 50%;
          color: #687a74;
          font-family: 'Source Han Sans CN VF';
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
          margin: 0 8rpx;
        }
      }
      .rotationflow-content-list-item {
        display: flex;
        justify-content: space-between;
        margin: 16rpx 0;
        color: #042118;
        text-align: right;
        font-family: 'Source Han Sans CN VF';
        font-size: 28rpx;
        font-weight: 400;
        .rotationflow-content-list-item-desc {
        }
        .rotationflow-content-list-item-current {
          color: #14a478;
        }
      }
      .haveYet {
        color: #9ba6a3;
        text-align: right;
        font-family: 'Source Han Sans CN VF';
        font-size: 28rpx;
        font-weight: 400;
      }
      .currentYet {
        color: #14a478;
        text-align: right;
        font-family: 'Source Han Sans CN VF';
        font-size: 28rpx;
        font-weight: 400;
      }
    }
  }
  .rotationflow-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    height: 128rpx;
    align-items: center;
    background: #fff;
    box-shadow: 0 -4rpx 8rpx 0 #00000026;
    z-index: 9999;
    .rotationflow-footer-item {
      width: calc(100% - 64rpx);
      margin: 0 32rpx;
      text-align: center;
      font-size: 32rpx;
      height: 80rpx;
      line-height: 80rpx;
      color: #ffffff;
      font-family: 'PingFang SC';
      font-size: 32rpx;
      font-weight: 500;
      border-radius: 16rpx;
      background: #ff3546;
    }
  }
}
</style>