feat: 水肥接口对接

pages.json

@@ -825,6 +825,22 @@
       }
     },
     {
+      "path": "pages/cb/shuifeizs/automation",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/cb/shuifeizs/rotationflow",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/cb/shuifeizs/history",
       "style": {
         "navigationBarTitleText": "",

pages/cb/shuifeizs/automation.vue

@@ -0,0 +1,393 @@
+<template>
+  <view class="automation">
+    <custom-card>
+      <block slot="backText">自动控制</block>
+    </custom-card>
+    <view
+      class="automation-content"
+      :class="{ 'automation-content-rever': activeIndex === 1 }"
+    >
+      <view class="automation-header">
+        <view
+          class="automation-header-item"
+          :class="{ 'automation-header-item-active': activeIndex === 0 }"
+          @click="clickHeaderItem(0)"
+          >灌溉
+          <view
+            :class="
+              activeIndex == '0'
+                ? 'automation-header-item-icon'
+                : 'automation-header-item-icon-bottom'
+            "
+          ></view>
+        </view>
+        <view
+          class="automation-header-item"
+          @click="clickHeaderItem(1)"
+          :class="{ 'automation-header-item-active': activeIndex === 1 }"
+          >水肥
+          <view
+            :class="
+              activeIndex == '1'
+                ? 'automation-header-item-icon'
+                : 'automation-header-item-icon-bottom'
+            "
+          ></view>
+        </view>
+      </view>
+      <view class="automation-body">
+        <rotation-items :formData="formData" :tktype="tktype" />
+        <view class="automation-body-title">灌区选择</view>
+        <rotation-bottom
+          :irrigatedAreaList="irrigatedAreaList"
+          :alreadyList="alreadyList"
+          :tktype="tktype"
+        />
+      </view>
+    </view>
+    <view class="automation-footer">
+      <view class="automation-footer-left">
+        已选<text class="automation-footer-left-num">{{ selectNum }}</text
+        >个灌区
+      </view>
+      <view class="automation-footer-right" @click="immediateExecution"
+        >立即执行</view
+      >
+    </view>
+  </view>
+</template>
+<script>
+import rotationItems from './components/rotationItems.vue';
+import rotationBottom from './components/rotationBottom.vue';
+export default {
+  name: 'automation',
+  data() {
+    return {
+      activeIndex: 0,
+      devBid: '',
+      irrigatedAreaList: [],
+      alreadyList: [],
+      formData: {
+        lgjg: '',
+        fqcx: '',
+        fhcx: '',
+        lgcs: 1,
+      },
+      tktype: 1,
+      selectNum: 0,
+    };
+  },
+  components: {
+    rotationBottom,
+    rotationItems,
+  },
+  watch: {
+    alreadyList: {
+      handler(val) {
+        this.selectNum = 0;
+        val.forEach((item) => {
+          if (item.isChecked) {
+            this.selectNum++;
+          }
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  onLoad(options) {
+    this.devBid = options.devBid;
+    this.getdeviceSfStatus();
+    this.getAlreadyList();
+  },
+  methods: {
+    async getAlreadyList() {
+      const res = await this.$myRequest({
+        url: '/api/v2/iot/mobile/device/sf/group/already/list/',
+        method: 'post',
+        data: {
+          devBid: this.devBid,
+        },
+      });
+      res.forEach((item) => {
+        item.isChecked = false;
+      });
+      this.alreadyList = res;
+    },
+    async getdeviceSfStatus() {
+      const res = await this.$myRequest({
+        url: '/api/v2/iot/mobile/device/sf/status/',
+        method: 'post',
+        data: {
+          devBid: this.devBid,
+        },
+      });
+      this.dataList = [];
+      this.irrigatedAreaList = [];
+      this.alreadyfertilizerBucketList = [];
+      res.forEach((item) => {
+        if (item.sfType === '7') {
+          this.irrigatedAreaList.push(item);
+        }
+      });
+    },
+    clickHeaderItem(index) {
+      this.activeIndex = index;
+      this.tktype = index == 0 ? 1 : 2;
+    },
+    // 获取运行状态
+    async getRunStatus() {
+      const res = await this.$myRequest({
+        url: '/api/v2/iot/mobile/device/sf/zsrf/run/status/',
+        method: 'post',
+        data: {
+          devBid: this.devBid,
+        },
+      });
+      if (res.code === '000000') {
+      }
+    },
+    // iot/mobile/device/sf/zsrf/task/ctl/
+    async postTaskCtl(payload) {
+      // loading
+      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/shuifeizs/rotationflow?devBid=${this.devBid}`,
+          });
+        }, 1000);
+      } else {
+        //
+        uni.showToast({
+          icon: 'none',
+          title: res.msg,
+        });
+      }
+    },
+    immediateExecution() {
+      if (!this.formData['lgjg']) {
+        uni.showToast({
+          title: '请输入轮灌间隔时间',
+          icon: 'none',
+        });
+        return;
+      }
+      if (this.tktype == 2 && !this.formData['fqcx']) {
+        uni.showToast({
+          title: '请输入肥前水时间',
+          icon: 'none',
+        });
+        return;
+      }
+      if (this.tktype == 2 && !this.formData['fhcx']) {
+        uni.showToast({
+          title: '请输入肥后水时间',
+          icon: 'none',
+        });
+        return;
+      }
+      if (this.tktype == 2 && !this.formData['sfmode']) {
+        uni.showToast({
+          title: '请选择模式',
+          icon: 'none',
+        });
+        return;
+      }
+      if (this.selectNum === 0) {
+        uni.showToast({
+          title: '请选择灌区',
+          icon: 'none',
+        });
+        return;
+      }
+      const fqList = [];
+      for (let i = 0; i < this.alreadyList.length; i++) {
+        const item = this.alreadyList[i];
+        if (item.isChecked && !item.ti) {
+          uni.showToast({
+            title: `请输入${item.sfDisplayname || item.sfName}的时长`,
+            icon: 'none',
+          });
+          return;
+        } else if (item.isChecked && this.tktype == 2 && !item.pfCode) {
+          uni.showToast({
+            title: `请输入${item.sfDisplayname || item.sfName}的配方`,
+            icon: 'none',
+          });
+          return;
+        }
+        if (item.isChecked) {
+          fqList.push({
+            fqCode: item.sfCode,
+            ti: item.ti || '',
+            pfCode: item.pfCode || '',
+          });
+        }
+      }
+      const payload = {
+        devBid: this.devBid,
+        tktype: this.tktype,
+        tkid: 0,
+        status: 1,
+        ...this.formData,
+        fqList,
+        sfmode: this.tktype !== 1 ? this.formData.sfmode || 1 : '',
+      };
+      console.log(payload, 'payloadpayload');
+      this.postTaskCtl(payload);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+uni-page-body,
+uni-page-wrapper {
+  position: relative;
+  height: 100%;
+}
+.automation {
+  background: linear-gradient(180deg, #ffffff00 0%, #fff 23.64%, #fff 100%),
+    linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%);
+  width: 100%;
+  height: calc(100% - 100rpx);
+  overflow: hidden;
+  .automation-content {
+    border-bottom: none;
+    border-radius: 16rpx 16rpx 0 0;
+    position: relative;
+    overflow: hidden;
+    &::before {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: url('./assets/controlbg.png') no-repeat center center;
+      background-size: cover;
+    }
+  }
+  .automation-content-rever {
+    border-bottom: none;
+    border-radius: 16rpx 16rpx 0 0;
+    position: relative;
+    &::before {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: url('./assets/controlbg.png') no-repeat center center;
+      background-size: cover;
+      transform: rotateY(180deg);
+      transform-origin: center center;
+    }
+  }
+  .automation-header {
+    width: 100%;
+    display: flex;
+    .automation-header-item {
+      width: 50%;
+      height: 80rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 36rpx;
+      color: #687a74;
+      text-align: center;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 32rpx;
+      font-weight: 400;
+      position: relative;
+    }
+    .automation-header-item-active {
+      color: #042118;
+      text-align: center;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 32rpx;
+      font-weight: 500;
+      position: relative;
+    }
+    .automation-header-item-icon {
+      width: 28rpx;
+      height: 4rpx;
+      border-radius: 4rpx;
+      background-color: #14a478;
+      position: absolute;
+      bottom: 0;
+    }
+    .automation-header-item-icon-bottom {
+      background-color: transparent;
+    }
+  }
+  .automation-body {
+    height: calc(100vh - 250rpx);
+    overflow: hidden;
+    .automation-body-title {
+      position: relative;
+      color: #042118;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 28rpx;
+      font-weight: 500;
+      margin: 48rpx 32rpx 16rpx 32rpx;
+    }
+  }
+  .automation-footer {
+    position: fixed;
+    width: 100%;
+    padding: 16rpx 0;
+    background: #fff;
+    box-shadow: 0 -4rpx 8rpx 0 #0000001a;
+    bottom: 0;
+    height: 80rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .automation-footer-left {
+      width: 50%;
+      margin-left: 32rpx;
+      color: #9ba6a3;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 28rpx;
+      font-weight: 400;
+      .automation-footer-left-num {
+        color: #14a478;
+        text-align: center;
+        font-family: 'Source Han Sans CN VF';
+        font-size: 28rpx;
+        font-style: normal;
+        font-weight: 700;
+        margin: 0 8rpx;
+      }
+    }
+    .automation-footer-right {
+      width: 224rpx;
+      border-radius: 16rpx;
+      background-color: #14a478;
+      color: #ffffff;
+      text-align: center;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 32rpx;
+      font-weight: 400;
+      padding: 16rpx 0;
+      margin-right: 32rpx;
+    }
+  }
+}
+</style>

pages/cb/shuifeizs/components/facilitystate.vue

@@ -11,6 +11,10 @@
     <view class="facilitystate-list">
       <image :src="ggbCurrent.value == 1?bucketOpenTop:bucketCloseTop" class="bucketOpenTop" />
       <image :src="sfbCurrent.value == 1?bucketOpenTop:bucketCloseTop" class="bucketOpenTop2"/>
+      <view class="facilitystate-list__left-label">
+        <view class="facilitystate-item__left-label-text" style="margin-bottom: 2rpx;">瞬时 L/min ：</view>
+        <view class="facilitystate-item__left-label-text">累计L：</view>
+      </view>
       <view class="facilitystate-list__left">
         <view
           class="facilitystate-item"
@@ -92,8 +96,8 @@ export default {
       let current = {}
       list?.forEach(item =>{
         if(item.sfType === '6'){
-          const name = item.sfCode;
-          if(name.indexOf('lsb') != -1){
+          const name = item.sfDisplayname || item.sfName;
+          if(name.indexOf('瞬时') != -1){
             current = item
           }
         }
@@ -104,8 +108,8 @@ export default {
       let current = {}
       list?.forEach(item =>{
         if(item.sfType === '6'){
-          const name = item.sfCode;
-         if(name.indexOf('llb') != -1){
+          const name = item.sfDisplayname || item.sfName;
+         if(name.indexOf('累计') != -1){
             current = item
           }
         }
@@ -207,22 +211,34 @@ export default {
     background: url('../assets/beijing.png') no-repeat;
     background-size: 100%;
     height: 376rpx;
-    width: 100%;
+    width: 690rpx;
     display: flex;
     margin-bottom: 16rpx;
+    position: relative;
+    &__left-label{
+      align-self: stretch;
+      color: #687a74;
+      text-align: right;
+      font-family: "Source Han Sans CN VF";
+      font-size: 24rpx;
+      font-weight: 400;
+      position: absolute;
+      left: 30rpx;
+      top: 120rpx;
+    }
     .bucketOpenTop{
       width: 20rpx;
       height: 20rpx;
       position: absolute;
-      left: 140rpx;
-      top: 344rpx;
+      left: 120rpx;
+      top: 328rpx;
     }
     .bucketOpenTop2{
       width: 20rpx;
       height: 20rpx;
       position: absolute;
-      left: 230rpx;
-      top: 85rpx;
+      left: 200rpx;
+      top: 72rpx;
     }
     &__left{
       height: 100%;
@@ -280,11 +296,11 @@ export default {
       }
       &__bg{
         width: 100rpx;
-        height: 154rpx;
+        height: 155rpx;
       }
       &__bg2{
         width: 56rpx;
-        height: 155rpx;
+        height: 157rpx;
         margin-top:-3rpx;
         margin-left: -2rpx;
       }

pages/cb/shuifeizs/components/rotationBottom.vue

@@ -0,0 +1,114 @@
+<template>
+  <view
+    class="rotation-wraper"
+    :style="{
+      height:
+        tktype == 1
+          ? `calc(100% - 256rpx - 168rpx)`
+          : `calc(100% - 256rpx - 440rpx)`,
+    }"
+  >
+    <view class="rotation-wraper-left">
+      <view
+        class="rotation-wraper-left__item"
+        v-for="(item, index) in alreadyList"
+        :key="item.sfBid"
+        @click="clickHandler(item, index)"
+        :class="{ active: index === currentIndex }"
+        >{{ item.sfDisplayname || item.sfName }}</view
+      >
+    </view>
+    <view class="rotation-wraper-right">
+      <rotationCard
+        v-for="item in alreadyList"
+        :item="item"
+        :tktype="tktype"
+        :key="item.sfBid"
+        :id="item.sfBid"
+      />
+    </view>
+  </view>
+</template>
+<script>
+import rotationCard from './rotationCard.vue';
+export default {
+  name: 'rotationBottom',
+  props: {
+    alreadyList: {
+      type: Array,
+      default: () => [],
+    },
+    tktype: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      currentItem: {},
+    };
+  },
+  components: {
+    rotationCard,
+  },
+  methods: {
+    clickHandler(item, index) {
+      let that = this;
+      this.currentItem = item;
+      this.currentIndex = index;
+      // 锚点跳转
+      uni
+        .createSelectorQuery()
+        .select('#' + item.sfBid)
+        .boundingClientRect(function (res) {
+          uni.pageScrollTo({
+            scrollTop: res.top,
+            duration: 300,
+          });
+        })
+        .exec();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.rotation-wraper {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  height: calc(100% - 256rpx - 168rpx);
+  padding-bottom: 128rpx;
+  overflow-y: hidden;
+  .rotation-wraper-left {
+    width: 240rpx;
+    border-radius: 16rpx;
+    background-color: #ffffff;
+    height: 100%;
+    background: #ffffff;
+    overflow-y: auto;
+    padding-top: 12rpx;
+    &__item {
+      height: 96rpx;
+      line-height: 96rpx;
+      padding: 0 32rpx;
+      color: #364d46;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+  }
+  .active {
+    background: #f5f6fa;
+    color: #14a478;
+    font-family: 'Source Han Sans CN VF';
+    font-size: 28rpx;
+    font-weight: 700;
+  }
+  .rotation-wraper-right {
+    width: calc(100% - 240rpx - 64rpx);
+    margin-right: 32rpx;
+    overflow-y: scroll;
+  }
+}
+</style>

pages/cb/shuifeizs/components/rotationCard.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="rotation-card" @tap="actionChecked">
+    <view class="rotation-card__header">
+      {{ item.sfDisplayname || item.sfName }}
+      <u-icon
+        name="checkmark-circle-fill"
+        :color="item.isChecked ? '#14A478' : '#C9CDD4'"
+        size="30rpx"
+      ></u-icon>
+    </view>
+    <view class="rotation-card__content" v-if="tktype === 2">
+      <view class="rotation-card__content-left">配方</view>
+      <view class="rotation-card__content-right">
+        <u-input
+          maxlength="36"
+          v-model="item.pfCode"
+          placeholder="请输入配方"
+          :border="false"
+          input-align="right"
+        />
+      </view>
+    </view>
+    <view class="rotation-card__footer">
+      <view class="rotation-card__footer-left">时长(分钟)</view>
+      <view class="rotation-card__footer-right">
+        <u-input
+          type="number"
+          maxlength="5"
+          v-model="item.ti"
+          placeholder="请输入时长"
+          :border="false"
+          input-align="right"
+        /> </view
+    ></view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+    tktype: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      value: '',
+      action: true,
+    };
+  },
+  methods: {
+    actionChecked() {
+      this.item.isChecked = !this.item.isChecked;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.rotation-card {
+  border-radius: 16rpx;
+  background-color: #fff;
+  margin-bottom: 22rpx;
+  &__header {
+    height: 64rpx;
+    line-height: 64rpx;
+    border-bottom: 2rpx solid #e4e7ed;
+    color: #333333;
+    font-family: 'Source Han Sans CN VF';
+    font-size: 28rpx;
+    font-weight: 500;
+    padding-left: 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 32rpx;
+  }
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    padding: 20rpx 30rpx;
+    height: 40rpx;
+  }
+  &__content-left {
+    width: 250rpx;
+    font-size: 28rpx;
+  }
+  &__content-right {
+  }
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20rpx 30rpx;
+    height: 40rpx;
+  }
+  &__footer-left {
+    width: 250rpx;
+    font-size: 28rpx;
+  }
+  &__footer-right {
+  }
+}
+</style>

pages/cb/shuifeizs/components/rotationItems.vue

@@ -0,0 +1,199 @@
+<template>
+  <view
+    class="rotation-wrapper"
+    :style="{ height: tktype === 1 ? '176rpx' : '450rpx' }"
+  >
+    <view class="rotation-item" v-for="(item, index) in list" :key="index">
+      <view class="rotation-item__label">{{ item.label }}</view>
+      <view class="rotation-item__value">
+        <u-number-box
+          v-model="item.value"
+          :min="1"
+          @change="() => valChange(item)"
+          v-if="item.isNumber"
+        ></u-number-box>
+        <view class="rotation-item__value__input">
+          <u-input
+            v-model="item.value"
+            type="number"
+            input-align="right"
+            @blur="valChange(item)"
+            v-if="!item.isNumber && !item.isSelect"
+          />
+          <text
+            style="margin-left: 16rpx"
+            v-if="!item.isNumber && !item.isSelect"
+            >分钟</text
+          >
+        </view>
+        <view
+          v-if="!item.isNumber && item.isSelect"
+          class="rotation-item__value__select"
+          @click="show = true"
+        >
+          <text
+            style="color: #9ba6a3; margin-right: 16rpx"
+            :style="{ color: formData.sfmode ? '#666' : '#9ba6a3' }"
+            >{{ selectText }}</text
+          >
+          <u-icon name="arrow-right" color="#4E5969" size="24rpx"></u-icon>
+        </view>
+      </view>
+    </view>
+    <u-action-sheet
+      :list="actionSheetList"
+      v-model="show"
+      @click="actionSheetCallback"
+    ></u-action-sheet>
+  </view>
+</template>
+<script>
+export default {
+  name: 'rotationItem',
+  props: {
+    formData: {
+      type: Object,
+      default: () => {},
+    },
+    tktype: {
+      type: Number,
+      default: 1,
+    },
+  },
+  watch: {
+    tktype: {
+      handler(val) {
+        if (val !== 1) {
+          this.list = [
+            {
+              label: '轮灌次数',
+              isNumber: true,
+              value: this.formData['lgcs'] || 1,
+              key: 'lgcs',
+            },
+            {
+              label: '轮灌间隔',
+              isNumber: false,
+              value: this.formData['lgjg'] || '',
+              key: 'lgjg',
+            },
+            {
+              label: '肥前水',
+              isNumber: false,
+              value: this.formData['fqcx'] || '',
+              key: 'fqcx',
+            },
+            {
+              label: '肥后水',
+              isNumber: false,
+              value: this.formData['fhcx'] || '',
+              key: 'fhcx',
+            },
+            {
+              label: '模式选择',
+              isNumber: false,
+              value: this.formData['sfmode'] || '',
+              key: 'sfmode',
+              isSelect: true,
+            },
+          ];
+        } else {
+          this.list = [
+            {
+              label: '轮灌次数',
+              isNumber: true,
+              value: this.formData['lgcs'] || 1,
+              key: 'lgcs',
+            },
+            {
+              label: '轮灌间隔',
+              isNumber: false,
+              value: this.formData['lgjg'] || '',
+              key: 'lgjg',
+            },
+          ];
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    formData: {
+      handler(val) {},
+      deep: true,
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      list: [],
+      selectText: '请选择',
+      show: false,
+      actionSheetList: [
+        {
+          text: '定时',
+          id: 1,
+        },
+        {
+          text: '定量',
+          id: 2,
+        },
+        {
+          text: 'EC调配',
+          id: 3,
+        },
+        {
+          text: '混肥比例',
+          id: 4,
+        },
+      ],
+    };
+  },
+  methods: {
+    valChange(item) {
+      console.log(item, 'itemitemitemitem');
+      this.formData[item.key] = item.value;
+    },
+    actionSheetCallback(index) {
+      this.formData['sfmode'] = this.actionSheetList[index].id;
+      this.selectText = this.actionSheetList[index].text;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.rotation-wrapper {
+  height: 450rpx;
+  border-radius: 16rpx;
+  background-color: #ffffff;
+  position: relative;
+  width: calc(100% - 64rpx);
+  margin: 0 32rpx;
+  margin-top: 32rpx;
+  .rotation-item {
+    height: 88rpx;
+    width: calc(100% - 32rpx);
+    margin: 0 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 4rpx solid #f0f0f0;
+    .rotation-item__label {
+      width: 50%;
+      text-align: left;
+      color: #042118;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+    .rotation-item__value {
+      width: 50%;
+      text-align: right;
+      padding-right: 16rpx;
+      .rotation-item__value__input {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

pages/cb/shuifeizs/detail.vue

@@ -108,12 +108,24 @@ export default {
     const { devBid } = options;
     this.devBid = devBid;
     this.deviceList[0].url = `/pages/cb/shuifeizs/control?devBid=${options.devBid}`;
+    this.deviceList[1].url = `/pages/cb/shuifeizs/automation?devBid=${options.devBid}`;
     this.deviceList[
       this.deviceList.length - 1
     ].url = `/pages/cb/shuifeizs/history?devBid=${options.devBid}`;
     devBid && this.getdeviceSfStatus();
+    devBid && this.getpeifangRefresh();
   },
   methods: {
+    // iot/mobile/device/sf/peifang/refresh/
+    async getpeifangRefresh() {
+      const res = await this.$myRequest({
+        url: '/api/v2/iot/mobile/device/sf/peifang/refresh/',
+        method: 'post',
+        data: {
+          devBid: this.devBid,
+        },
+      });
+    },
     async getdeviceSfStatus() {
       const res = await this.$myRequest({
         url: '/api/v2/iot/mobile/device/sf/status/',

pages/cb/shuifeizs/rotationflow.vue

@@ -0,0 +1,392 @@
+<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>