bigDataApp/pages/cb/nlNewXy/nlNewXy.vue

<template>
  <view>
    <view :class="['info', equipInfo.status == 1 ? 'on' : 'off']">
      <view class="" @click="copy(equipInfo)">
        设备ID：{{ showId }}
        <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.uptime || equipInfo.uptime | timeFormat }}
      </view>
      <view class=""> 设备地址：{{ equipInfo.address }} </view>
      <view class="" @click="setdecoy">
        诱芯名称：{{ equipInfo.decoy }}
        <u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
      </view>
      <view class="" @click="setdecoy">
        诱芯到期时间：{{ equipInfo.xy_expire }}
        <u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
      </view>
    </view>
    <u-popup v-model="yxShow" mode="center" width="600rpx">
      <u-field
        label="害虫名称"
        label-width="240"
        required
        :error-message="xyErr"
        v-model="decoy"
        class="field"
        :field-style="fieldstyle"
        placeholder="请填写害虫名称"
      >
      </u-field>
      <u-field
        label="诱芯到期时间"
        label-width="240"
        required
        :error-message="xyErrtime"
        v-model="decoytime"
        @click="settime"
        class="field"
        :field-style="fieldstyle"
        placeholder="请填写到期时间"
      >
      </u-field>
      <view class="" style="text-align: center; color: #fa3534">
        {{ tishitext }}
      </view>
      <view class="btn-box">
        <u-button @click="yxSubmit" size="mini" type="success" class="box-item"
          >确定</u-button
        >
      </view>
    </u-popup>
    <u-calendar
      v-model="tiemshow"
      mode="date"
      :max-date="date"
      @change="tiemchange"
      range-color="#999"
      btn-type="success"
      active-bg-color="#0BBC58"
      range-bg-color="rgba(11,188,88,0.13)"
    ></u-calendar>
    <view class="caobox">
      <view class="caobox_item" v-if="$QueryPermission(358)" @click="toset">
        <image
          :src="$imageURL+'/bigdata_app/image/cb/4.png'"
          mode="widthFix"
        ></image>
        <view class=""> 设备控制 </view>
      </view>
      <view class="caobox_item" v-if="$QueryPermission(359)" @click="tohis">
        <image
          :src="$imageURL+'/bigdata_app/image/cb/2.png'"
          mode="widthFix"
        ></image>
        <view class=""> 历史数据 </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 }}</p>
          </view>
        </view>
        <view class="realtime_item">
          <image
            :src="$imageURL+'/bigdata_app/image/cb/xy2.0/tianqi.png'"
            mode=""
          ></image>
          <view class="text">
            <p>天气</p>
            <p>{{ wea }}</p>
          </view>
        </view>
        <view class="realtime_item">
          <image
            :src="$imageURL+'/bigdata_app/image/cb/xy2.0/xiayu.png'"
            mode=""
          ></image>
          <view class="text">
            <p>是否下雨</p>
            <p>{{ rain }}</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>{{ wormnum }}</p>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showId: '',
      baseimei: '',
      equipInfo: {},
      trapnum: 1,
      at: '',
      ah: '',
      wind: '',
      wea: '',
      rain: '',
      wormnum: '',
      decoy: '',
      xyErr: '',
      xyErrtime: '',
      decoytime: '',
      yxShow: false,
      tiemshow: false,
      date: '',
      fieldstyle: {
        //输入框样式
        border: '2rpx solid #f6f6f6',
        'border-radius': '24px',
        'padding-left': '20rpx',
        'background-color': '#f6f6f6',
      },
      tishitext: '',
    };
  },
  methods: {
    toset() {
      uni.navigateTo({
        url:
          './thxyset?device_id=' +
          this.equipInfo.imei || this.equipInfo.device_id || this.equipInfo.id +
          '&d_id=' +
          this.equipInfo.d_id +
          '&dtype=' +
          this.equipInfo.dtype +
          '&device_name=' +
          this.equipInfo.device_name || this.equipInfo.name,
      });
    },
    tohis() {
      uni.navigateTo({
        url:
          './thxyhisdata?device_id=' +
          this.equipInfo.imei || this.equipInfo.device_id || this.equipInfo.id +
          '&d_id=' +
          this.equipInfo.d_id,
      });
    },
    copy(item) {
      console.log(item);
      uni.setClipboardData({
        data: item.imei || item.device_id || item.id,
        success: function () {
          console.log('success');
        },
      });
    },
    async getbaseinfo() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_list',
        data: {
          device_id: this.baseimei,
          device_type_id: '29',
          page: '1',
          page_size: '10',
        },
      });
      console.log(res.data[0]);
      this.equipInfo = res.data[0];
      this.getweather();
      this.getworm();
    },
    async getweather() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_manage.weathers',
        data: {
          lng: Number(this.equipInfo.lng),
          lat: Number(this.equipInfo.lat),
        },
      });
      console.log(res);
      // this.
      if (res[0]) {
        this.wea = res[0].wea;
        this.rain = res[0].wea.indexOf('雨') == -1 ? '否' : '是';
        this.ah = res[0].ah;
        this.at = res[0].at;
      } else {
        this.wea = '暂无';
        this.rain = '暂无';
      }
    },
    async getworm() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.xycb_pest_chart_new',
        data: {
          d_id: this.equipInfo.d_id,
          start_time: Math.floor(+new Date() / 1000 - 30 * 24 * 60 * 60),
          end_time: Math.floor(+new Date() / 1000),
          device_type_id: '29',
          years: new Date().getFullYear(),
        },
      });
      console.log(res);
      this.wormnum = res.total_num[new Date().getFullYear()];
    },
    setdecoy() {
      this.decoy = this.equipInfo.decoy;
      this.decoytime = this.equipInfo.xy_expire;
      this.yxShow = true;
    },
    settime() {
      console.log(12);
      this.tiemshow = true;
    },
    tiemchange(e) {
      console.log(e);
      this.decoytime = e.result;
    },
    async yxSubmit() {
      var time = Math.floor(+new Date(this.decoytime) / 1000);
      console.log(time);
      if (this.decoy == '') {
        this.tishitext = '请填写诱芯名称';
        return;
      } else if (isNaN(time)) {
        this.tishitext = '请填写诱芯到期时间';
        return;
      }
      this.tishitext = '';
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.set_decopy',
        data: {
          decoy: this.decoy,
          device_id: this.equipInfo.imei || this.equipInfo.device_id || this.equipInfo.id,
          device_type_id: '29',
          expire_time: time,
        },
      });
      console.log(res);
      if (res.status) {
        uni.showToast({
          title: '设置成功',
          icon: 'none',
        });
        this.yxShow = false;
        this.getbaseinfo();
      }
    },
  },
  onLoad(option) {
    var times = new Date();
    this.date =
      times.getFullYear() +
      1 +
      '-' +
      Number(times.getMonth() + 1) +
      '-' +
      times.getDate();
    this.baseimei = option.imei || option.device_id || option.id || '无';
    this.showId = option.showId;
    // 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>