bigDataApp/pages/cb/shuifeizs/control.vue

<template>
  <view class="control-container">
    <custom-card>
      <block slot="backText">{{ title }}</block>
    </custom-card>
    <view class="control-content">
      <view class="control-list-left">
        <view
          class="control-list-left-item"
          v-for="(item, index) in leftList"
          :key="index"
          @click="controlClick(index)"
          :class="{ 'control-list-left-item-active': index === activeIndex }"
        >
          <image
            :src="borderRadius"
            class="borderTopRadius"
            v-if="index === activeIndex"
          />
          {{ item.sfDisplayname }}
          <image
            :src="borderRadius"
            class="borderBottomRadius"
            v-if="index === activeIndex"
          />
        </view>
      </view>
      <view class="control-list-right">
        <view
          class="control-list-right-item"
          v-for="(item, index) in deviceList"
          :key="index"
        >
          <view class="control-list-right-item-icon">
            <image
              :src="item.sfType == '3' ? stir : solenoidValve"
              class="solenoid-valve"
            />
          </view>
          <view class="control-list-right-item-title">{{
            item.sfDisplayname || item.sfName
          }}</view>
          <view class="control-list-right-item-action">
            <u-switch
              :value="item.value == 1 ? true : false"
              @change="changeSwitch(item)"
              activeColor="#14A478"
              size="40"
              inactiveColor="rgb(230, 230, 230)"
            ></u-switch>
          </view>
        </view>
        <u-empty v-if="deviceList.length === 0" text="暂无数据"></u-empty>
      </view>
    </view>
  </view>
</template>
<script>
import solenoidValve from './assets/solenoidValve.png';
import stir from './assets/stir.png';
import borderRadius from './assets/borderRadius.png';

export default {
  name: 'control',
  data() {
    return {
      activeIndex: 0,
      value: false,
      solenoidValve,
      stir,
      borderRadius,
      title: '控制面板',
      leftList: [],
      deviceList: [],
      devBid: '',
    };
  },
  methods: {
    getChecked(item) {
      return item.value == 1 ? true : false;
    },
    async changeSwitch(item) {
      item.value = item.value == 1 ? 0 : 1;
      const sfCode = item.sfCode;
      const params = {};
      params[sfCode] = item.value;
      const payload = {
        data: params,
      };
      const data = {
        devBid: this.devBid,
        data: params,
      };
      const res = await this.$myRequest({
        url: '/api/v2/iot/mobile/device/sf/devctl/',
        method: 'post',
        data,
        header: {
          'Content-Type': 'application/json',
        },
      });
      if (res.code === '000000') {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
      }
    },
    controlClick(index) {
      this.activeIndex = index;
      this.deviceList = this.leftList[this.activeIndex]?.childrenList || [];
    },
    /*
      0	水源	泵类	负责水源进入管道的总泵或者阀
      1	肥料	泵类	负责肥料进入管道的总阀或者泵
      2	吸肥	泵类	控制肥料桶出肥的阀或者泵，每个肥料桶一个
      3	搅拌	泵类	肥料桶的搅拌电机或者泵 每个肥料桶一个
      4	肥料桶	泵类	肥料桶，每个施肥机有多个或者没有，不一定真实存在，只是逻辑上的概念
      5	电磁阀	无	管道最末端每个田地里控制出水的阀门
      6	传感器	无	水肥机上的 温度，压力，流速，PH EC等监测类要素
      7	灌区    无	逻辑区域，电磁阀的分组
      */
    async getdeviceSfStatus() {
      const res = await this.$myRequest({
        url: '/api/v2/iot/mobile/device/sf/status/',
        method: 'post',
        data: {
          devBid: this.devBid,
        },
      });
      this.deviceList = [];
      const sfCurrent = [
        {
          sfDisplayname: '水肥机',
          childrenList: [],
        },
      ];
      const irrigatedAreaList = [];
      res?.forEach((item) => {
        if (item.sfType === '0' || item.sfType === '1' || item.sfType === '2') {
          sfCurrent[0].childrenList.push(item);
        } else if (item.sfType === '4') {
          const childrenList = item?.childrenList || [];
          childrenList.forEach((child) => {
            if (
              child.sfType === '3' ||
              child.sfType === '2' ||
              child.sfType === '8'
            ) {
              sfCurrent[0].childrenList.push(child);
            }
          });
        } else if (item.sfType === '7') {
          irrigatedAreaList.push(item);
        }
      });
      this.leftList = [...sfCurrent, ...irrigatedAreaList];
      this.deviceList = this.leftList[this.activeIndex]?.childrenList || [];
    },
  },
  onLoad(options) {
    const { devBid } = options;
    this.devBid = devBid;
    this.getdeviceSfStatus();
  },
};
</script>
<style scoped lang="scss">
uni-page-body {
  position: relative;
  height: 100%;
}
.control-container {
  background: linear-gradient(180deg, #ffffff00 0%, #fff 23.64%, #fff 100%),
    linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%);
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  .control-content {
    display: flex;
    width: 100%;
    height: calc(100% - 102rpx);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 0;
    border-radius: 8px 8px 0 0;
    background: #fff;
    .control-list-left {
      width: 250rpx;
      position: fixed;
      height: calc(100% - 90rpx);
      overflow-x: hidden;
      overflow-y: auto;
      .control-list-left-item {
        width: 240rpx;
        height: 96rpx;
        line-height: 96rpx;
        background: #f5f7fa;
        padding-left: 24rpx;
        color: #364d46;
        font-family: 'Source Han Sans CN VF';
        font-size: 32rpx;
        font-weight: 400;
        position: relative;
      }
      .control-list-left-item-active {
        background: #ffffff;
        border-radius: 0 -16rpx -16rpx 0;
      }
      .borderTopRadius {
        position: absolute;
        width: 30rpx;
        height: 30rpx;
        right: -4rpx;
        top: -20rpx;
        transform: rotate(90deg);
        z-index: 100;
      }
      .borderBottomRadius {
        position: absolute;
        width: 30rpx;
        height: 30rpx;
        right: -4rpx;
        bottom: -20rpx;
        z-index: 100;
      }
    }
    .control-list-right {
      width: calc(100% - 250rpx);
      margin: 0 32rpx;
      margin-left: 280rpx;
      .control-list-right-item {
        height: 96rpx;
        display: flex;
        padding: 0rpx 16rpx;
        align-items: center;
        border-radius: 8rpx;
        background: #f5f7fa;
        margin-bottom: 22rpx;
        position: relative;
        .control-list-right-item-icon {
          .solenoid-valve {
            width: 40rpx;
            height: 40rpx;
          }
        }
        .control-list-right-item-title {
          margin-left: 8rpx;
        }
        .control-list-right-item-action {
          position: absolute;
          right: 16rpx;
        }
      }
    }
  }
}
</style>