bigDataApp/pages/prevention/index.vue

<template>
  <view>
    <view class="status_bar"></view>
    <view class="" style="position: relative; top: 44px">
      <view style="position: fixed; z-index: 100">
        <uni-nav-bar
          @clickLeft="clickLeft"
          left-icon="back"
          left-text="返回"
          title="防治系统"
          right-icon="search"
          @clickRight="clickRight"
          size="16"
        ></uni-nav-bar>
        <view class="inputs" :style="{ width: width + 'rpx' }">
          <input
            type="text"
            value=""
            placeholder="请输入设备ID或设备名称"
            v-model="imports"
            @input="searchinp"
            class="inputbox"
            :clearable="false"
          />
          <u-icon name="search" size="40" class="icon" @click="search"></u-icon>
        </view>
      </view>
      <image
        :src="
          $imageURL+ '/bigdata_app' + '/image/prevention/1.png'
        "
        mode=""
        class="image"
      >
      </image>
      <view class="loading" v-if="loadingtf">
        <image
          src="../../static/images/ajax-loader.gif"
          mode=""
          class="img"
        ></image>
      </view>
      <view class="tab-box">
        <view
          v-for="(item, index) in equipArr"
          :key="index"
          @click="tabClick(index, item)"
          :class="['tab-item', active == index ? 'active' : '']"
        >
          <text>{{ item.type_name }}</text>
          <text class="bottom-line"></text>
        </view>
      </view>
      <view class="prevents">
        <view
          class="prevents_item"
          v-for="(item, index) in eqlistdata"
          :key="index"
          @click="eqdetails(item)"
        >
          <image
            :src="
              item.is_online == 1
                ? $imageURL+'/bigdata_app/image/prevention/6.png'
                : $imageURL+'/bigdata_app/image/prevention/7.png'
            "
            mode=""
            class="prevents_item_img"
          ></image>
          <view class="prevents_item_top">
            <p>
              设备名称：{{ item.device_name == '' ? '无' : item.device_name }}
            </p>
            <p
              :class="item.is_online == 1 ? 'green' : 'red'"
              v-text="item.is_online == 1 ? '在线' : '离线'"
            ></p>
          </view>
          <view class="prevents_item_bot">
            <p>设备 ID：{{ item.imei }}</p>
            <p>最新上报时间：{{ item.addtime | timeFormat() }}</p>
            <view
              class=""
              style="display: flex; justify-content: space-between"
              v-if="showLastTime"
            >
              <p>
                设备到期情况：<span
                  :class="'prevents_item_bot_sapn' + item.device_expire"
                  >{{ item.device_expiretext }}</span
                >
              </p>
              <p
                style="color: #3c84fe"
                v-if="item.device_expire != 0"
                @click.stop="examine(item)"
              >
                查看详情
              </p>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-modal
      v-model="show"
      :title="title"
      :showConfirmButton="false"
      :title-style="{
        'text-align': 'left',
        'padding-left': '10px',
        'font-weight': 700,
      }"
      :mask-close-able="true"
    >
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>
    <view class="top">
      <view class="backtop" @click="top" v-if="isTop">
        <image src="../../static/images/1.png" mode="" class="img0"></image>
      </view>
      <view class="more">
        <view
          class="box"
          @click="allwormdel"
          v-show="allqingchong && filtrateTF"
        >
          <p>清虫</p>
        </view>
        <view class="box" @click="online" v-show="filtrateTF">
          <p>在线</p>
        </view>
        <view class="box" @click="offline" v-show="filtrateTF">
          <p>离线</p>
        </view>
        <view class="box" @click="complete" v-show="filtrateTF">
          <p>全部</p>
        </view>
        <view @click="filtrate">
          <image
            src="../../static/images/b0bcdb0e3fe8690520f743aa8303bf2.png"
            mode=""
            class="img1"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { Debounce } from '../../util/anitthro.js';
export default {
  data() {
    return {
      page: 1,
      size: 10,
      eqlistdata: [],
      isTop: false,
      filtrateTF: false,
      device_status: '',
      width: 0,
      imports: '', //搜索内容
      loadingtf: false, //loading
      show: false,
      title: '',
      content: '',
      allqingchong: false,
      showLastTime: false,
      active: 0,
      equipArr: [
        { type_name: '杀虫灯', id: 2, device_model: 0 },
        { type_name: '风吸式杀虫灯', id: 2, device_model: 101 },
      ],
    };
  },
  methods: {
    testId(id, list) {
      for (var i = 0; i < list.length; i++) {
        if (list[i].children) {
          var data = list[i].children;
          for (var j = 0; j < data.length; j++) {
            if (data[j].children) {
              var item = data[j].children;
              for (var k = 0; k < item.length; k++) {
                if (item[k].pur_id == id) {
                  return true;
                }
              }
            }
          }
        }
      }
    },
    async usertype() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=home.homes.user_device_type',
        data: {
          model: '防治',
        },
      });
      console.log('防治设备列表', res);
      this.equipArr = res;
      this.eqlist();
    },
    tabClick(index, item) {
      this.active = index;
      this.page = 1;
      this.eqlistdata = [];
      this.eqlist();
    },
    async eqlist() {
      //设备列表
      this.loadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
        data: {
          device_type_id: 2,
          page: this.page,
          page_size: '10',
          device_status: this.device_status,
          device_id: this.imports,
          device_model:this.equipArr[this.active].device_model>0?this.equipArr[this.active].device_model: ""
        },
      });
      this.loadingtf = false;
      this.eqlistdata = this.eqlistdata.concat(res.data);
      for (var i = 0; i < this.eqlistdata.length; i++) {
        if (this.eqlistdata[i].device_expire == 0) {
          this.eqlistdata[i]['device_expiretext'] = '未到期';
        } else if (this.eqlistdata[i].device_expire == 1) {
          this.eqlistdata[i]['device_expiretext'] = '已到期';
        } else if (this.eqlistdata[i].device_expire == 2) {
          this.eqlistdata[i]['device_expiretext'] = '即将到期';
        }
      }
      console.log(this.eqlistdata);
    },
    clickLeft() {
      uni.switchTab({
        url: '../index/index',
      });
    },
    clickRight() {
      // uni.navigateTo({
      // 	url: "./search"
      // })
      this.width = 600;
    },
    eqdetails(data) {
      uni.navigateTo({
        url: './equipmentdetails?shebei=' + JSON.stringify(data),
      });
    },
    filtrate() {
      this.filtrateTF = !this.filtrateTF;
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      });
    },
    online() {
      this.eqlistdata = [];
      this.page = 1;
      this.device_status = 1;
      this.eqlist();
      this.filtrateTF = !this.filtrateTF;
    },
    offline() {
      this.eqlistdata = [];
      this.page = 1;
      this.device_status = 0;
      this.eqlist();
      this.filtrateTF = !this.filtrateTF;
    },
    complete() {
      this.eqlistdata = [];
      this.page = 1;
      this.device_status = '';
      this.eqlist();
      this.filtrateTF = !this.filtrateTF;
    },
    search() {
      //搜索按钮搜索
      // this.eqlistdata = []
      this.searchinp();
    },
    searchinp() {
      //自动搜索
      Debounce(() => {
        this.page = 1;
        this.eqlistdata = [];
        this.eqlist();
      }, 1000)();
    },
    examine(e) {
      // console.log(this)
      this.show = true;
      this.title = e.device_expiretext;
      this.content = `<p style="padding-left:10px;margin:10px 0;font-size:14px;">到期时间  ${this.timezhuan(
        e.device_expire_time
      )}
				</p><p style="font-size:14px;text-align:right;color:#3C84FE;margin-bottom:10px;padding-right:10px">注：请前往PC端进行充值</p>`;
    },
    timezhuan(time) {
      function fun(a) {
        return String(a).length == 1 ? '0' + a : a;
      }
      let date = new Date(time * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let min = date.getMinutes();
      let sec = date.getSeconds();
      return `${y}-${fun(m)}-${fun(d)} ${fun(h)}:${fun(min)}:${fun(sec)}`;
    },
    async getworm() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.clear_insects_permission',
        data: {},
      });
      console.log(res);
      this.allqingchong = res[1] == 1 ? true : false;
    },
    async allwormdel() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.clear_insects',
        data: {},
      });
      console.log(res);
      uni.showToast({
        title: res ? '指令下发成功' : '指令下发失败',
        icon: 'none',
      });
    },
  },
  onLoad() {
    this.getworm();
    this.usertype();
    uni.getStorage({
      key: 'jurisdiction',
      success: (res) => {
        this.showLastTime = this.testId(325, JSON.parse(res.data));
      },
    });
  },
  onReachBottom() {
    this.page++;
    this.eqlist();
  },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > 200) {
      //距离大于200时显示
      this.isTop = true;
    } else {
      //距离小于200时隐藏
      this.isTop = false;
    }
  },
};
</script>

<style lang="scss">
.inputs {
  height: 54rpx;
  background-color: #e4e4e4;
  border-radius: 27rpx;
  position: absolute;
  right: 20rpx;
  top: 24rpx;
  transition: width 0.5s;
  overflow: hidden;
  padding-top: 8rpx;
  box-sizing: border-box;

  .inputbox {
    width: 85%;
    text-indent: 1rem;
    font-size: 26rpx;
  }

  .icon {
    position: absolute;
    top: 8rpx;
    right: 26rpx;
  }
}

::v-deep .uni-icons {
  font-size: 40rpx !important;
}

.image {
  position: fixed;
  top: 88px;
  width: 100%;
  height: 160rpx;
  z-index: 555;
}

.loading {
  position: fixed;
  top: 440px;
  width: 95%;
  left: 2.5%;
  text-align: center;

  .img {
    width: 300rpx;
    height: 40rpx;
  }
}
.tab-box {
  position: fixed;
  top: 170px;
  font-size: 30rpx;
  line-height: 80rpx;
  background-color: #ffffff;
  width: 100vw;
  z-index: 2;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  margin-top: -10rpx;
  .tab-item {
    cursor: pointer;
    position: relative;
    padding: 10rpx 20rpx;
    text-align: center;
    display: inline-block;
    span {
      display: inline-block;
    }
  }

  .tab-item.active {
    .bottom-line {
      bottom: 0;
      position: absolute;
      display: inline-block;
      width: 90rpx;
      height: 6rpx;
      left: 0;
      right: 0;
      margin: auto;
      background: $uni-color-success;
    }
  }
}
.prevents {
  width: 100%;
  position: absolute;
  top: 180px;

  .prevents_item {
    width: 95%;
    margin: 0 auto 30rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 10rpx #bcb9ca;
    padding: 20rpx 40rpx 20rpx 80rpx;
    position: relative;
    box-sizing: border-box;

    .prevents_item_img {
      width: 30rpx;
      height: 50rpx;
      position: absolute;
      top: -4rpx;
      left: 30rpx;
    }

    .prevents_item_top {
      display: flex;
      justify-content: space-between;
      height: 60rpx;
      border-bottom: 2rpx solid #f4f4f4;
      line-height: 60rpx;
      font-size: 26rpx;

      .red {
        color: #ff4747;
      }

      .green {
        color: #00b075;
      }
    }

    .prevents_item_bot {
      margin-top: 20rpx;
      font-size: 26rpx;
      color: #bdbdbd;

      .prevents_item_bot_sapn0 {
        color: #00b075;
      }

      .prevents_item_bot_sapn1 {
        color: #ff4747;
      }

      .prevents_item_bot_sapn2 {
        color: #ffab00;
      }
    }
  }
}

.top {
  position: fixed;
  right: 10px;
  bottom: 40px;
  z-index: 100;

  image {
    width: 100rpx;
    height: 100rpx;
  }

  .backtop {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10rpx;
  }

  .more {
    display: flex;
  }

  .box {
    width: 80rpx;
    height: 80rpx;
    background-color: rgba(161, 161, 161, 0.45);
    border-radius: 50%;
    text-align: center;
    line-height: 80rpx;
    box-sizing: border-box;
    margin: 14rpx 10rpx 0 0;
    color: #fff;
  }
}
</style>