bigDataApp/pages/cb/shuifeizs/detail.vue

<template>
  <view class="facilitystate-page">
    <custom-card>
      <block slot="backText">{{ title }}</block>
    </custom-card>
    <view class="facilitystate-top">
      <view
        class="facilitystate-top__item"
        v-for="(item, index) in deviceList"
        :key="index"
        @click="nativeTo(item)"
      >
        <image class="item-icon" :src="item.icon" />
        <view class="facilitystate-top__item-text">{{ item.title }}</view>
      </view>
    </view>
    <Base :dataList="dataList" />
    <facilitystate
      :ggbCurrent="ggbCurrent"
      :sfbCurrent="sfbCurrent"
      :irrigatedAreaList="irrigatedAreaList"
      :alreadyfertilizerBucketList="alreadyfertilizerBucketList"
    />
  </view>
</template>

<script>
import manualControl from './assets/manualControl.png';
import wheelIrrigation from './assets/wheelIrrigation.png';
import timing from './assets/timing.png';
import masterStop from './assets/masterStop.png';
import fertilizationFormula from './assets/fertilizationFormula.png';
import backwashControl from './assets/backwashControl.png';
import basicSetting from './assets/basicSetting.png';
import operatingRecord from './assets/operatingRecord.png';
import Base from './components/base.vue';
import facilitystate from './components/facilitystate.vue';
export default {
  data() {
    return {
      title: '水肥一体机',
      manualControl,
      devBid: '',
      dataList: [],
      irrigatedAreaList: [],
      alreadyfertilizerBucketList: [],
      deviceList: [
        {
          icon: manualControl,
          title: '手动控制',
          url: '/pages/cb/shuifeizs/control',
        },
        {
          icon: wheelIrrigation,
          title: '轮灌控制',
          url: '',
        },
        {
          icon: timing,
          title: '定时计划',
          url: '',
        },
        {
          icon: masterStop,
          title: '总停',
          url: '',
        },
        {
          icon: fertilizationFormula,
          title: '施肥配方',
          url: '',
        },
        {
          icon: backwashControl,
          title: '反冲洗控制',
          url: '',
        },
        {
          icon: basicSetting,
          title: '基础设置',
          url: '',
        },
        {
          icon: operatingRecord,
          title: '操作记录',
          url: '/pages/cb/shuifeizs/history',
        },
      ],
      ggbCurrent: {},
      sfbCurrent: {},
    };
  },
  components: {
    Base,
    facilitystate,
  },
  onLoad(options) {
    /*
      0	水源	泵类	负责水源进入管道的总泵或者阀
      1	肥料	泵类	负责肥料进入管道的总阀或者泵
      2	吸肥	泵类	控制肥料桶出肥的阀或者泵，每个肥料桶一个
      3	搅拌	泵类	肥料桶的搅拌电机或者泵 每个肥料桶一个
      4	肥料桶	泵类	肥料桶，每个施肥机有多个或者没有，不一定真实存在，只是逻辑上的概念
      5	电磁阀	无	管道最末端每个田地里控制出水的阀门
      6	传感器	无	水肥机上的 温度，压力，流速，PH EC等监测类要素
      7	灌区    无	逻辑区域，电磁阀的分组
      */
    const { devBid } = options;
    this.devBid = devBid;
    this.deviceList[0].url = `/pages/cb/shuifeizs/control?devBid=${options.devBid}`;
    this.deviceList[
      this.deviceList.length - 1
    ].url = `/pages/cb/shuifeizs/history?devBid=${options.devBid}`;
    devBid && this.getdeviceSfStatus();
  },
  methods: {
    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 === '0') {
          this.ggbCurrent = item;
        } else if (item.sfType === '1') {
          this.sfbCurrent = item;
        } else if (item.sfType === '4') {
          this.alreadyfertilizerBucketList.push(item);
        } else if (item.sfType === '6') {
          this.dataList.push(item);
        } else if (item.sfType === '7') {
          this.irrigatedAreaList.push(item);
        }
      });
    },
    nativeTo(item) {
      uni.navigateTo({
        url: item.url,
      });
    },
  },
};
</script>
<style scoped lang="scss">
uni-page-body {
  position: relative;
  height: 100%;
}

.facilitystate-page {
  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: scroll;
  .facilitystate-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    margin-top: 18rpx;
    &__item {
      margin-bottom: 32rpx;
      .item-icon {
        width: 96rpx;
        height: 96rpx;
      }
    }
    &__item-text {
      color: #042118;
      font-family: 'Source Han Sans CN VF';
      font-size: 28rpx;
      font-weight: 400;
      margin-top: 16rpx;
    }
  }
}
</style>