bigDataApp/pages/cb/shuifeiL/shuifeiL.vue

<template>
  <view>
    <view :class="['info', equipInfo.is_online == 1 ? 'on' : 'off']">
      <view class=""> 设备ID：{{ equipInfo.device_id }} </view>
      <view class="">
        设备名称：{{
          equipInfo.device_name == '' ? '无' : equipInfo.device_name
        }}水肥机
      </view>
      <view class=""> 设备类型：{{ equipInfo.dver_num }} </view>
      <view class=""> 设备地址：{{ equipInfo.city }} </view>
    </view>
    <view class="infoText">设备变量</view>
    <view class="realtime">
      <scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
        <table class="table">
          <tr class="tr">
            <th class="th" v-for="(item, index) in thdata" :key="'a' + index">
              {{ item }}
            </th>
          </tr>
          <tr
            class="tr"
            v-for="(items, indexs) in statusList"
            :key="'b' + indexs"
            v-if="statusList.length > 0"
          >
            <td class="td">{{ items.d_id }}</td>
            <td class="td">{{ items.name }}</td>
            <td class="td">
              <u-button type="success" size="mini" @click="goHistory(items)"
                >历史记录</u-button
              >
            </td>
          </tr>
          <tr class="tr" v-else>
            <td class="td" v-for="item in 4">暂无数据</td>
          </tr>
        </table>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      equipInfo: {},
      statusList: [],
      thdata: ['变量ID', '变量名称', '操作'],
    };
  },
  methods: {
    copy(item) {
      uni.setClipboardData({
        data: item.imei || item.device_id,
        success: function () {
          console.log('success');
        },
      });
    },
    goHistory(items) {
      uni.navigateTo({
        url: `./history?device_id=${items.d_id}&type=${items.types}`,
      });
    },
    async geDetail() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_list',
        data: {
          content: this.equipInfo.device_id,
        },
      });
      if (res.data.length > 0) {
        this.equipInfo = res.data[0];
      }
    },
    async geList() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_data_list',
        data: {
          device_id: this.equipInfo.device_id,
        },
      });
      if (res.length > 0) {
        this.statusList = res;
      }
    },
  },
  onLoad(option) {
    var times = new Date();
    this.date =
      times.getFullYear() +
      1 +
      '-' +
      Number(times.getMonth() + 1) +
      '-' +
      times.getDate();
    this.equipInfo = JSON.parse(option.detail);
    this.geDetail();
    this.geList();
  },
};
</script>

<style lang="less">
page {
  padding: 20rpx;
  box-sizing: border-box;

  .infoText {
    color: #0dc6b6;
  }

  .info {
    padding: 20rpx 40rpx;
    color: #fff;
    line-height: 50rpx;
    font-size: 26rpx;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #0dc6b6;
    background-position: top left;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 20rpx;

    .tishi {
      width: 28rpx;
      height: 28rpx;
      margin: 0rpx 0 0 20rpx;
    }
  }

  .on {
    background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/onBg.png');
  }

  .off {
    background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/offBg.png');
  }

  .caobox {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    line-height: 50rpx;

    image {
      width: 52rpx;
    }

    .caobox_item {
      padding: 20rpx 0;
      box-sizing: border-box;
      flex-basis: 25%;
    }
  }

  .realtime {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-shadow: 0 0 10rpx #bcb9ca;
    margin: 20rpx auto 30rpx;

    .scroll-X {
      width: 95%;
      margin: 20rpx auto;

      .tr {
        display: flex;
        overflow: hidden;

        .th,
        .td {
          display: inline-block;
          padding: 5rpx;
          width: 300rpx;
          text-align: center;
          height: 52rpx;
          line-height: 52rpx;
          border: 2rpx solid #f1f1f1;
        }
      }

      .tr:nth-child(2n-1) {
        background-color: #f5fff8;
      }

      .tr:first-child {
        background-color: #57c878;
        color: #fff;
      }
    }
  }
}

.btn-box {
  text-align: center;
  padding: 20rpx 30rpx;
}

::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-around;

  .u-calendar__action__text {
    line-height: 25px;
  }
}
</style>