bigDataApp/pages/equipList/search.vue

<template>
  <view>
    <view class="status_bar"></view>
    <view
      style="
        position: fixed;
        top: 44px;
        z-index: 100;
        height: 80rpx;
        background-color: #ffffff;
        padding-top: 10px;
      "
    >
      <uni-nav-bar
        @clickLeft="clickLeft"
        left-icon="back"
        left-text="返回"
      ></uni-nav-bar>
      <view class="search_bot_input">
        <input
          type="text"
          value=""
          placeholder="请输入设备ID"
          v-model="imports"
          @input="searchinput"
        />
        <u-icon name="search" size="40" class="icon" @click="search"></u-icon>
      </view>
    </view>
    <view class="list">
      <view
        class="list_item"
        v-for="(item, index) in eqlistdata"
        :key="index"
        @click="historys(item)"
      >
        <view class="list_item_top">
          <p class="p1">
            <image
              :src="'http://static.yfpyx.com/bigdata_app' + imgpath[0].path"
              mode=""
            ></image>
            {{ item.device_name == '' ? '--' : item.device_name }}
          </p>
          <p :class="[item.is_online ? 'p2' : 'p_out']">
            {{ item.is_online ? '在线' : '离线' }}
          </p>
        </view>
        <view class="list_item_text">
          <p>设备ID：{{ item.imei }}</p>
          <p>
            适配用户：{{ item.device_user == '' ? '无' : item.device_user }}
          </p>
          <p>添加设备时间：{{ item.uptime | timeFormat() }}</p>
          <p>添加设备时间：{{ item.addtime | timeFormat() }}</p>
          <p>设备已运行：{{ item.days }}天</p>
        </view>
        <view
          class="list_item_btn"
          v-if="infoalter"
          @click.stop="modification(item)"
        >
          修改名称
        </view>
      </view>
      <view class="none" v-if="eqlistdatatf"> 暂无数据 </view>
    </view>
  </view>
</template>

<script>
import { Debounce, Throttle } from '../../util/anitthro.js';
export default {
  data() {
    return {
      imports: '',
      eqlistdata: [],
      images: [
        {
          name: '杀虫灯',
          path: '/image/fourMoodBase/3.png', //
          id: 2,
        },
        {
          name: '测报灯',
          path: '/image/fourMoodBase/1.png',
          id: 3,
        },
        {
          name: '性诱测报',
          path: '/image/fourMoodBase/6.png',
          id: 4,
        },
        {
          name: '环境监测',
          path: '/image/fourMoodBase/5.png',
          id: 5,
        },
        {
          name: '监控设备',
          path: '/image/fourMoodBase/2.png',
          id: 6,
        },
        {
          name: '孢子仪',
          path: '/image/fourMoodBase/4.png',
          id: 7,
        },
        {
          name: '性诱2.0',
          path: '/image/fourMoodBase/10.png',
          id: 10,
        },
      ],
      eqlistdatatf: false, //暂无数据
      indexs: 2, //设备id
      page: 1,
      size: 10,
      infoalter: false,
      imgpath: [],
    };
  },
  methods: {
    async eqlist() {
      //设备列表
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
        data: {
          device_type_id: this.indexs,
          device_id: this.imports,
          page: this.page,
          page_size: this.size,
        },
      });
      var newtime = +new Date() / 1000;
      res.data.forEach((item) => {
        let { uptime, addtime } = item;
        item.uptime = addtime;
        item.addtime = uptime;
        var days = (newtime - item.addtime) / 60 / 60 / 24;
        item.days = Math.round(days);
      });
      this.eqlistdata = this.eqlistdata.concat(res.data);
      // for(var i=0;i<this.eqlistdata.length;i++){
      // 	var days = (newtime-this.eqlistdata[i].uptime)/60/60/24
      // 	this.eqlistdata[i].days = Math.round(days)
      // 	let { uptime, addtime } = this.eqlistdata[i];
      // 	this.eqlistdata[i].uptime = addtime;
      // 	this.eqlistdata[i].addtime = uptime;
      // }
      console.log(this.eqlistdata);
      if (this.eqlistdata.length == 0) {
        this.eqlistdatatf = true;
      } else {
        this.eqlistdatatf = false;
      }
    },
    clickLeft() {
      //返回
      uni.switchTab({
        url: './index',
      });
    },
    search() {
      //搜索
      this.eqlistdata = [];
      this.page = 1;
      this.eqlist();
    },
    searchinput() {
      Debounce(() => {
        this.eqlistdata = [];
        this.page = 1;
        this.eqlist();
      }, 1000)();
    },
    modification(item) {
      uni.navigateTo({
        url:
          './modification?data=' + JSON.stringify(item) + '&id=' + this.indexs,
      });
    },
    historys(itemOld) {
      let item = JSON.parse(JSON.stringify(itemOld));
      console.log('item', item);
      switch (this.type_id) {
        // 水肥新设备
        case 22:
          var obj = {};
          obj.d_id = item.d_id;
          obj.device_id = item.imei;
          obj.is_online = item.is_online;
          obj.lat = item.lat;
          obj.lng = item.lng;
          obj.equip_name = item.device_name;
          obj.uptime = item.uptime;
          uni.navigateTo({
            url: '../waterandfernew/details?shebei=' + JSON.stringify(obj),
          });
          break;
        // 病虫害可视监测
        case 14:
          uni.navigateTo({
            url: '../cb/sy/detail?detail=' + JSON.stringify(item),
          });
          break;
        case 2:
          uni.navigateTo({
            url:
              '../prevention/equipmentdetails?shebei=' + JSON.stringify(item),
          });
          break;
        case 5:
          console.log(item);
          var obj = {};
          obj.d_id = item.d_id;
          obj.equip_id = item.imei;
          obj.is_online = item.is_online;
          obj.lat = item.lat;
          obj.lng = item.lng;
          obj.equip_name = item.device_name;
          obj.uptime = item.uptime;
          uni.navigateTo({
            url: '../environment/equipment?shebei=' + JSON.stringify(obj),
          });
          break;
        case 6:
          uni.navigateTo({
            url:
              '/pages/webview?device_id=' +
              item.imei +
              '&accessToken=' +
              this.accessToken,
          });
          break;
        case 3:
          item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
          });
          break;
        case 4:
          item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
          });
          break;
        case 7:
          item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
          });
          break;
        case 8:
          // item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/thxydetail/thxydetail?imei=' + item.imei,
          });
          break;
        case 24:
          // item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/zjxydetail/thxydetail?imei=' + item.imei,
          });
          break;
        case 12:
          console.log(item);
          uni.navigateTo({
            url: '../cb/xctdetail/xctdetail?info=' + JSON.stringify(item),
          });
          break;
        case 13:
          console.log(item);
          var obj = {};
          obj.d_id = item.d_id;
          obj.device_id = item.imei;
          obj.is_online = item.is_online;
          obj.lat = item.lat;
          obj.lng = item.lng;
          obj.equip_name = item.device_name;
          obj.uptime = item.uptime;
          uni.navigateTo({
            url: '../waterandfer/datails?shebei=' + JSON.stringify(obj),
          });
          break;
        case 15:
          console.log(item);
          var obj = {};
          obj.d_id = item.d_id;
          obj.device_id = item.imei;
          obj.is_online = item.is_online;
          obj.lat = item.lat;
          obj.lng = item.lng;
          obj.equip_name = item.device_name;
          obj.uptime = item.uptime;
          uni.navigateTo({
            url: '../environment/gsequipment?shebei=' + JSON.stringify(obj),
          });
          break;
        case 17:
          break;
        case 18:
          var obj = {};
          obj.device_id = item.imei;
          obj.is_online = item.is_online;
          uni.navigateTo({
            url: '../cb/shuifeiL/shuifeiL?detail=' + JSON.stringify(obj),
          });
          break;
        case 11:
          var obj = {};
          obj.d_id = item.d_id;
          obj.device_id = item.imei;
          obj.is_online = item.is_online;
          obj.lat = item.lat;
          obj.lng = item.lng;
          obj.equip_name = item.device_name;
          obj.uptime = item.uptime;
          obj.location = item.address;
          obj.type = 11;
          uni.navigateTo({
            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
          });
          break;
        case 19:
          var obj = {};
          obj.d_id = item.d_id;
          obj.device_id = item.imei;
          obj.is_online = item.is_online;
          obj.lat = item.lat;
          obj.lng = item.lng;
          obj.equip_name = item.device_name;
          obj.uptime = item.uptime;
          obj.location = item.address;
          obj.type = 19;
          uni.navigateTo({
            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
          });
          break;
        case 20:
          var obj = {};
          obj.d_id = item.d_id;
          obj.device_id = item.imei;
          obj.is_online = item.is_online;
          obj.lat = item.lat;
          obj.lng = item.lng;
          obj.equip_name = item.device_name;
          obj.uptime = item.uptime;
          obj.location = item.address;
          obj.type = 20;
          uni.navigateTo({
            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
          });
          break;
        case 21:
          var obj = {};
          obj.d_id = item.d_id;
          obj.device_id = item.imei;
          obj.is_online = item.is_online;
          obj.lat = item.lat;
          obj.lng = item.lng;
          obj.equip_name = item.device_name;
          obj.uptime = item.uptime;
          obj.location = item.address;
          obj.type = 20;
          uni.navigateTo({
            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
          });
          break;
        case 25:
          uni.navigateTo({
            url: '../cb/xylps/detail?detail=' + JSON.stringify(item),
          });
          break;
        case 43:
          uni.navigateTo({
            url: "/pages/fmSys/details?info=" + JSON.stringify(item)
          })
          break;
        case 44:
          uni.navigateTo({
            url: "/pages/webviewdgp?device_id=" + item.device_id + "&accessToken=" + uni
              .getStorageSync('session_key') +
              '&type=dgp'
          })
          break;
        default:
          item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/xy2.0/particulars?info=' + JSON.stringify(item),
          });
          break;
      }
    },
  },
  onLoad(option) {
    this.indexs = option.id;
    this.imgpath = this.images.filter((item) => {
      return item.id == option.id;
    });
    console.log(this.imgpath);
    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 == '设备列表';
        });
        this.infoalter = items2[0].children.some((item) => {
          return (
            item.purview_name == '修改名称' || item.purview_name == '添加位置'
          );
        });
      },
    });
  },
  onReachBottom() {
    this.page++;
    this.eqlist();
  },
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false;
    }
    this.clickLeft();
    return true;
  },
};
</script>
<style lang="scss">
.search_top_input {
  width: 80%;
  height: 54rpx;
  background-color: #e4e4e4;
  border-radius: 27rpx;
  position: absolute;
  top: 18rpx;
  right: 18rpx;
  padding-top: 8rpx;
  box-sizing: border-box;

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

  .icon {
    position: absolute;
    top: 18rpx;
    right: 32rpx;
  }
}

.search_bot_input {
  width: 80%;
  height: 54rpx;
  background-color: #e4e4e4;
  border-radius: 27rpx;
  position: absolute;
  top: 18px;
  right: 18rpx;
  box-sizing: border-box;
  padding-top: 8rpx;

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

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

.list {
  width: 100%;
  background-color: #fdfdfd;
  position: absolute;
  top: 100px;

  .list_item {
    width: 95%;
    margin: 20rpx auto;
    padding: 10rpx 20rpx;
    position: relative;
    background-color: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 0 10rpx #bcb9ca;

    .list_item_top {
      display: flex;
      justify-content: space-between;

      .p1 {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;

        image {
          width: 40rpx;
          height: 40rpx;
          vertical-align: text-top;
          margin-right: 20rpx;
        }
      }

      .p2 {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        color: #42b983;
      }

      .p_out {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        color: red;
      }
    }

    .list_item_text {
      margin-top: 20rpx;

      p {
        font-size: 24rpx;
        color: #636363;
        margin-top: 10rpx;
      }

      p:first-child {
        font-size: 28rpx;
        font-weight: 700;
      }
    }

    .list_item_btn {
      width: 126rpx;
      color: #42b983;
      height: 40rpx;
      text-align: center;
      border: 1rpx solid #42b983;
      border-radius: 25rpx;
      font-size: 24rpx;
      line-height: 35rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 136rpx;
      right: 20rpx;
    }
  }

  .none {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    text-align: center;
  }
}
</style>