bigDataApp/pages/cb/sy/detail.vue

<template>
  <view>
    <view :class="['info', equipInfo.is_online == 1 ? 'on' : 'off']">
      <view class="" @click="copy(equipInfo)">
        设备ID：{{ equipInfo.imei || equipInfo.device_id }}
        <image
          :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'"
          mode=""
          class="tishi"
        >
        </image>
      </view>
      <view class="">
        设备名称：{{
          equipInfo.device_name == '' ? '无' : equipInfo.device_name
        }}
      </view>
      <view class=""> 设备类型：病虫害可视监测 </view>
      <view class="">
        最新上报时间：{{ equipInfo.addtime || equipInfo.uptime | timeFormat }}
      </view>
      <view class=""> 设备地址：{{ equipInfo.address }} </view>
    </view>
    <view class="caobox">
      <view class="caobox_item" v-if="$QueryPermission(187)" @click="tophoto">
        <image
          :src="$imageURL+'/bigdata_app/image/cb/1.png'"         
		   mode="widthFix"
        ></image>
        <view class=""> 查看图片 </view>
      </view>
      <view class="caobox_item" v-if="$QueryPermission(181)" @click="tohis">
        <image
          :src="$imageURL+'/bigdata_app/image/cb/2.png'"
          mode="widthFix"
        ></image>
        <view class=""> 历史数据 </view>
      </view>
      <view class="caobox_item" v-if="$QueryPermission(244)" @click="simRouter">
        <image
          :src="$imageURL+'/bigdata_app/image/cb/6.png'"
          mode="widthFix"
        ></image>
        <view class=""> SIM卡信息 </view>
      </view>
    </view>
    <view class="realtime">
      <view class="realtime_title">
        <p>实时数据</p>
      </view>
      <view class="realtime_text">
        <view class="realtime_item">
          <image
            :src="$imageURL+'/bigdata_app/image/cb/xy2.0/wendu.png'"
            mode=""
          ></image>
          <view class="text">
            <p>环境温度</p>
            <p>{{ at }}℃</p>
          </view>
        </view>
        <view class="realtime_item">
          <image
            :src="$imageURL+'/bigdata_app/image/cb/xy2.0/shidu.png'"
            mode=""
          ></image>
          <view class="text">
            <p>环境湿度</p>
            <p>{{ ah }}%RH</p>
          </view>
        </view>
        <view class="realtime_item">
          <image
            :src="$imageURL+'/bigdata_app/image/cb/icon02.png'"
            mode=""
          ></image>
          <view class="text">
            <p>开机状态</p>
            <p>{{ status == 1 ? '开机' : '关机' }}</p>
          </view>
        </view>
        <view class="realtime_item">
          <image
            :src="$imageURL+'/bigdata_app/image/cb/xy2.0/yujing.png'"
            mode=""
          ></image>
          <view class="text">
            <p>版本号</p>
            <p>{{ version }}</p>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      equipInfo: {},
      trapnum: 1,
      at: '',
      ah: '',
      status: '',
      version: '',
      xyErr: '',
      xyErrtime: '',
      decoytime: '',
      yxShow: false,
      tiemshow: false,
      date: '',
      fieldstyle: {
        //输入框样式
        border: '2rpx solid #f6f6f6',
        'border-radius': '24px',
        'padding-left': '20rpx',
        'background-color': '#f6f6f6',
      },
      tishitext: '',
    };
  },
  methods: {
    tophoto() {
      uni.navigateTo({
        url:
          './imgList?device_id=' +
          this.equipInfo.imei +
          '&d_id=' +
          this.equipInfo.d_id,
      });
    },
    tohis() {
      uni.navigateTo({
        url:
          './history?device_id=' +
          this.equipInfo.imei +
          '&d_id=' +
          this.equipInfo.d_id,
      });
    },
    simRouter() {
      uni.navigateTo({
        url: '/pages/prevention/sim?id=' + this.equipInfo.d_id,
      });
    },
    copy(item) {
      console.log(item);
      uni.setClipboardData({
        data: item.imei || item.device_id,
        success: function () {
          console.log('success');
        },
      });
    },
    async getatah() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.color_attract_data',
        data: {
          device_id: this.equipInfo.imei,
        },
      });
      console.log(res);
      if (res) {
        this.at = res.at / 10;
        this.ah = res.ah / 10;
        this.status = res.ds;
        this.version = res.dver;
      } else {
        this.at = '暂无';
        this.ah = '暂无';
      }
    },
  },
  onLoad(option) {
    var times = new Date();
    this.date =
      times.getFullYear() +
      1 +
      '-' +
      Number(times.getMonth() + 1) +
      '-' +
      times.getDate();
    this.equipInfo = JSON.parse(option.detail);
    console.log(this.equipInfo);
    this.getatah();
    // console.log(this.equipInfo)
    // this.getbaseinfo()
  },
};
</script>

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

  .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%;

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

  .on {
    background-image: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cb/onBg.png');
  }

  .off {
    background-image: url('https://s3.hnyfwlw.com/webstaticimg/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 {
    width: 95%;
    margin: 0rpx auto;

    .realtime_title {
      font-size: 32rpx;
      display: flex;
      justify-content: space-between;
      font-weight: 700;

      .span {
        color: #6e6c76;
        font-size: 24rpx;
        display: flex;
        justify-content: space-between;
        margin-top: 12rpx;
      }
    }

    .realtime_text {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .realtime_item {
        width: 48%;
        height: 100rpx;
        display: flex;
        box-shadow: 0 0 10rpx #bcb9ca;
        margin-top: 20rpx;
        padding: 20rpx 0;

        image {
          width: 60rpx;
          height: 60rpx;
          margin: 20rpx 20rpx 20rpx 40rpx;
        }

        .text {
          padding: 10rpx 0 10rpx 30rpx;
        }
      }
    }
  }
}

.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>