bigDataApp/pages/cb/shuifeizs/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">2号灌区</view>
          <view class="rotationflow-time-content"> {{ time }}</view>
          <view class="rotationflow-time-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.label }}</view>
      </view>
    </view>
    <view class="rotationflow-content">
      <view class="rotationflow-content-top">
        <view class="rotationflow-content-top-title">灌溉</view>
        <view class="rotationflow-content-top-desc">已选灌区</view>
      </view>
      <view class="rotationflow-content-list">
        <view class="rotationflow-content-list-wrapper">
          <view class="rotationflow-content-num">
            <view class="rotationflow-content-num-title">轮灌次数：1</view>
            <view class="rotationflow-content-num-title"
              >轮灌间隔：10分钟</view
            > </view
          ><view class="rotationflow-content-num">
            <view class="rotationflow-content-num-title">轮灌次数：1</view>
            <view class="rotationflow-content-num-title"
              >轮灌间隔：10分钟</view
            > </view
          ><view class="rotationflow-content-num">
            <view class="rotationflow-content-num-title">轮灌次数：1</view>
            <view class="rotationflow-content-num-title">轮灌间隔：10分钟</view>
          </view>
        </view>
        <view
          class="rotationflow-content-list-item"
          v-for="(item, index) in 30"
          :class="index === 0 ? 'haveYet' : index === 1 ? 'currentYet' : ''"
          :key="index"
        >
          <view class="rotationflow-content-list-item-title">1号灌区</view>
          <view class="rotationflow-content-list-item-desc">已灌溉</view>
        </view>
      </view>
    </view>
    <view class="rotationflow-footer">
      <view class="rotationflow-footer-item">结束灌溉</view>
    </view>
  </view>
</template>
<script>
import rotate from './assets/rotate.png';
import water from './assets/water.png';
import autoBtn from './assets/autoBtn.png';

export default {
  name: 'rotationflow',
  data() {
    return {
      rotate,
      water,
      autoBtn,
      time: '',
      list: [
        {
          value: '0.00',
          label: 'PH值',
        },
        {
          value: '987 us',
          label: 'EC值',
        },
        {
          value: '20℃',
          label: '水温',
        },
        {
          value: '20 Pa',
          label: '管道压力',
        },
      ],
      timer: null,
      devBid: '',
    };
  },
  components: {},
  methods: {
    setTime() {
      let hours = 6 * 60 * 60 * 1000;
      this.time = '06:00:00';
      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);
    },
    async getRunStatus() {
      const res = await this.$myRequest({
        url: '/api/v2/iot/mobile/device/sf/zsrf/task/run/status/',
        method: 'post',
        data: {
          devBid: this.devBid,
        },
      });
      console.log(res, 'resresresres');
    },
  },
  mounted() {
    this.setTime();
  },
  onLoad(options) {
    const { devBid } = options;
    this.devBid = devBid;
    this.getRunStatus();
  },
  onUnload() {
    clearInterval(this.timer);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</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(100% - 140rpx);
  overflow: hidden;
  overflow-y: scroll;
  margin-bottom: 140rpx;
  .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: 200rpx;
          color: #687a74;
          text-align: center;
          font-family: 'Source Han Sans CN VF';
          font-size: 24rpx;
          font-weight: 400;
        }
      }
    }
  }
  .rotationflow-middle {
    display: flex;
    padding: 0 32rpx;
    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% - 64rpx);
    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-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-top: 8rpx;
        color: #042118;
        text-align: right;
        font-family: 'Source Han Sans CN VF';
        font-size: 28rpx;
        font-weight: 400;
        .rotationflow-content-list-item-desc {
          margin-right: 32rpx;
        }
      }
      .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;
    .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: #14a478;
    }
  }
}
</style>