bigDataApp/pages/cb/xy2.0/particulars.vue

<template>
  <view>
    <view class="">
      <view :class="['info', equipInfo.is_online == 1 ? 'on' : 'off']">
        <p @click="copy(newState.device_id)">
          设备ID：{{ newState.device_id
          }}<image
            :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'"
            mode=""
            class="tishi"
          ></image>
        </p>
        <p>
          设备名称：{{
            newState.device_name == '' ? '无' : newState.device_name
          }}
        </p>
        <p>最新上报时间：{{ newState.uptime | timeFormat }}</p>
        <p>最新地址：{{ newState.addr }}</p>
        <p class="fillin" @click="addxy">
          添加诱芯：<input
            type="text"
            v-model="newState.decoy"
            disabled
            v-if="newState.decoy"
          /><u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
        </p>
        <p @click="glass_show = true">
          诱芯更换时间：<span style="margin: 0 20rpx">{{ yxchangetime }}</span
          ><u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
        </p>
        <p @click="glass_showtwo = true">
          诱芯到期时间：<span style="margin: 0 20rpx">{{ yxendtime }}</span
          ><u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
        </p>
        <u-calendar
          v-model="glass_show"
          mode="date"
          :max-date="date"
          @change="timeChange"
        ></u-calendar>
        <u-calendar
          v-model="glass_showtwo"
          mode="date"
          :max-date="date"
          @change="timeChangetwo"
        ></u-calendar>
      </view>
      <view class="control">
        <view class="control_item" @click="repairs">
          <image
            :src="
              $imageURL+ '/bigdata_app' +
              '/image/environment/7.png'
            "
            mode=""
          ></image>
          <p>一键报修</p>
        </view>
        <view class="control_item" @click="toggle" v-if="$QueryPermission(176)">
          <image
            :src="$imageURL+ '/bigdata_app' + '/image/cb/2.png'"
            mode=""
          ></image>
          <p>历史数据</p>
        </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>{{ newState.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>{{ newState.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>{{ newState.type }}</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>{{ newState.rain }}</p>
            </view>
          </view>
          <view class="realtime_item">
            <image
              :src="$imageURL+'/bigdata_app/image/cb/xy2.0/fengxiang.png'"
              mode=""
            ></image>
            <view class="text">
              <p>风力风向</p>
              <p>{{ newState.wind }}</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>{{ trapnum }}</p>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="sim" v-if="simTF && $QueryPermission(246)">
				<p class="sim_title">sim卡详情</p>
				<view class="sim_text">
					<p class="p">ICCID：{{simdata.iccid}}</p>
					<p class="p">状态：{{simstate[simdata.account_status]}}</p>
					<view class="sim_plan">
						套餐流量：
						<view class="sim_plan_text">
							<p style="width: 100%;"></p>
						</view>
						{{simdata.data_plan.toFixed(2)}}MB
					</view>
					<view class="sim_plan">
						已用流量：
						<view class="sim_plan_text">
							<p :style="{width:usedBeliel+'%'}"></p>
						</view>
						{{simdata.data_plan - simdata.data_balance.toFixed(2)}}MB
					</view>
					<view class="sim_plan">
						剩余流量：
						<view class="sim_plan_text">
							<p :style="{width:residueBeliel+'%'}"></p>
						</view>
						{{simdata.data_balance.toFixed(2)}}MB
					</view>
					<p class="p">到期时间：{{simdata.expiry_date | timeFormat}}</p>
				</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>
        <view class="btn-box">
          <u-button
            @click="yxSubmit"
            size="mini"
            type="success"
            class="box-item"
            >确定</u-button
          >
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      equipInfo: [],
      newState: {},
      simdata: {},
      simstate: [
        '未知',
        '测试期',
        '沉默期',
        '使用中',
        '停机',
        '停机保号',
        '预销号',
        '销号',
      ],
      usedBeliel: '',
      residueBeliel: '',
      simTF: false,
      expiretext: '',
      yxShow: false,
      xyErr: '',
      decoy: '',
      yxchangetime: 0, //更换诱芯时间
      yxendtime: 0, //诱芯到期时间
      glass_show: false, //更换诱芯时间选择
      glass_showtwo: false, //诱芯到期时间选择
      date: '', //日历可选最大时间
      fieldstyle: {
        //输入框样式
        border: '2rpx solid #f6f6f6',
        'border-radius': '24px',
        'padding-left': '20rpx',
        'background-color': '#f6f6f6',
      },
      trapnum: 0,
    };
  },
  methods: {
    async getState(d_id) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_details',
        data: {
          d_id: d_id,
        },
      });
      this.newState = res[0];
      if (res[0].xy_expire_time == 0) {
        this.yxendtime = '暂无';
      } else {
        var times = new Date(res[0].xy_expire_time * 1000);
        var month = times.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var date =
          times.getDate() < 10 ? '0' + times.getDate() : times.getDate();
        this.yxendtime = times.getFullYear() + '-' + month + '-' + date;
      }
      if (res[0].xy_uptime == 0) {
        this.yxendtime = '暂无';
      } else {
        var times = new Date(res[0].xy_uptime * 1000);
        var month = times.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var date =
          times.getDate() < 10 ? '0' + times.getDate() : times.getDate();
        this.yxchangetime = times.getFullYear() + '-' + month + '-' + date;
      }
      // this.Chistory(this.equipInfo.device_id)
    },
    async getSim(d_id) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_sim',
        data: {
          d_id: d_id,
        },
      });
      console.log(res);
      if (res != null) {
        this.simdata = res.data.card_list[0];
        this.usedBeliel =
          ((this.simdata.data_plan - this.simdata.data_balance) /
            this.simdata.data_plan) *
          100;
        this.residueBeliel =
          (this.simdata.data_balance / this.simdata.data_plan) * 100;
        this.simTF = true;
      } else {
        this.simTF = false;
      }
    },
    async getworm(data, info) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_set_lure',
        data: data,
      });
      console.log(res);
      if (res.code == 200) {
        uni.showToast({
          title: '设置成功',
          icon: 'none',
        });
        if (data.expire_time) {
          this.yxendtime = info;
        } else if (data.pest_name) {
          this.newState.decoy = info;
        } else if (data.addtime) {
          this.yxchangetime = info;
        }
      }
    },
    toggle() {
      uni.navigateTo({
        url:
          './historydatas?device_id=' +
          this.equipInfo.device_id +
          '&d_id=' +
          this.equipInfo.d_id +
          '&device_code=' +
          this.equipInfo.device_code,
      });
    },
    addxy() {
      this.yxShow = true;
      this.decoy = this.newState.decoy;
    },
    yxSubmit() {
      if (this.decoy == '') {
        this.xyErr = '请填写害虫名称';
      } else {
        this.xyErr = '';
        var obj = {
          d_id: this.equipInfo.d_id,
          pest_name: this.decoy,
        };
        this.getworm(obj, this.decoy);
        console.log(this.decoy);
        this.yxShow = false;
      }
    },
    timeChange(e) {
      console.log(e);
      var obj = {
        d_id: this.equipInfo.d_id,
        addtime: +new Date(e.result) / 1000,
      };
      this.getworm(obj, e.result);
    },
    timeChangetwo(e) {
      console.log(e);
      var obj = {
        d_id: this.equipInfo.d_id,
        expire_time: +new Date(e.result) / 1000,
      };
      this.getworm(obj, e.result);
    },
    copy(item) {
      console.log(item);
      uni.setClipboardData({
        data: item,
        success: function () {
          console.log('success');
        },
      });
    },
    repairs() {
      uni.navigateTo({
        url:
          '../../afterSale/addafter?device_id=' +
          this.newState.device_id +
          '&device_type=' +
          10,
      });
    },
    async Chistory(device_id) {
      //历史数据列表折线图
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_line_chart',
        data: {
          device_id: device_id,
          // start_time: Math.floor(+new Date/1000 - 24*60*60),
          // end_time: Math.floor(+new Date/1000),
          status: 'pest',
        },
      });
      if (res.data[0]) {
        //***********************************************************
        // if(this.newState.decoy=="草地贪夜蛾"){
        // 	this.trapnum = 0
        // }else{
        this.trapnum = res.data[0].pest_num;
        // }
      }
    },
  },
  onLoad(option) {
    this.equipInfo = JSON.parse(option.info);
    if (!this.equipInfo.device_id) {
      this.equipInfo.device_id = this.equipInfo.imei;
    }
    console.log(this.equipInfo);
    this.getState(this.equipInfo.d_id);
    if (this.equipInfo.type != 21) {
      // this.getSim(this.equipInfo.d_id)
    }
    var times = new Date();
    this.date =
      times.getFullYear() +
      1 +
      '-' +
      Number(times.getMonth() + 1) +
      '-' +
      times.getDate();
    console.log(this.date);
    // uni.getStorage({ 待开发
    // 	key:"jurisdiction",
    // 	success:(res)=>{
    // 		console.log(JSON.parse(res.data))
    // 		let items = JSON.parse(res.data).filter((item)=>{
    // 			return item.purview_name == "测报系统"
    // 		})
    // 		let items2 = items[0].children.filter((item)=>{
    // 			return item.purview_name == "性诱2.0"
    // 		})
    // 		console.log(items2)
    // 	},
    // })
  },
};
</script>

<style lang="scss">
.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: 95%;
  margin: 0 auto;
  p:first-child {
    font-size: 32rpx;
  }
  .expiretishi {
    font-size: 24rpx;
    color: #ff0000;
  }
  .tishi {
    width: 28rpx;
    height: 28rpx;
    margin: 0rpx 0 0 20rpx;
  }
  .fillin {
    display: flex;
    input {
      width: 200rpx;
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-indent: 1em;
    }
  }
}

.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');
}
.control {
  width: 90%;
  display: flex;
  text-align: center;
  box-sizing: border-box;
  margin: 30rpx auto;
  .control_item {
    width: 120rpx;
    height: 120rpx;
    margin-right: 40rpx;
    image {
      width: 70rpx;
      height: 70rpx;
    }

    p {
      font-size: 24rpx;
    }
  }
}

.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;
      }
    }
  }
}
.sim {
  width: 95%;
  margin: 40rpx auto;
  .sim_title {
    font-size: 32rpx;
    font-weight: 700;
  }
  .sim_text {
    box-shadow: 0 0 10rpx #bcb9ca;
    padding: 30rpx;
    margin-top: 40rpx;
    .p {
      margin-top: 20rpx;
    }
    .sim_plan {
      display: flex;
      margin-top: 20rpx;
      .sim_plan_text {
        width: 60%;
        height: 16rpx;
        background-color: #cccccc;
        border-radius: 8rpx;
        margin: 10rpx 20rpx 0 0;
        p {
          height: 16rpx;
          background-color: #0dc6b6;
          border-radius: 8rpx;
        }
      }
    }
  }
}
.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>