bigDataApp/pages/equipList/index.vue

<template>
  <view>
    <!-- <view class="status_bar"></view>
		<view style="position: fixed;top:44px;z-index: 100;width: 100%;">
			<uni-nav-bar right-icon="search" title="设备列表" @clickRight="clickRight"></uni-nav-bar>
			
		</view> -->
    <view class="textbox">
      <view class="inputs">
        <!-- <u-input v-model="imports" type="text" :border="true" /> -->
        <u-search placeholder="请输入设备ID" v-model="imports" placeholder-color="#909696" :show-action="false"
          search-icon-color="#909696" @input="searchinput">
        </u-search>
        <!-- <input type="text" value="" placeholder="请输入设备ID或设备名称" v-model="imports" @input="searchinput"
					class="inputbox" :clearable="false" />
				<u-icon name="search" size="40" class="icon" @click="search"></u-icon> -->
      </view>
      <view class="listbox">
        <view class="listbox_left">
          <view :class="currents == index
              ? 'listbox_left_item_act listbox_left_item'
              : 'listbox_left_item'
            " v-for="(item, index) in list" :key="index" @click="change(index)">
            {{ item.name }}
          </view>
        </view>
        <!-- <view class="list" @scroll='showOut' ref="sollo" id="list"> -->
        <scroll-view :scroll-top="0" :scroll-y="true" class="list scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
          @scroll="scroll">
          <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://www.hnyfwlw.com:8006/bigdata_app/image/fourMoodBase/' +
                  type_id +
                  '.png'
                  " mode=""></image>
                <view>{{ item.device_name == "" ? "--" : item.device_name }}</view>
              </p>
              <p v-if="![11, 19, 20].includes(type_id)" :class="[item.is_online ? 'p2' : 'p_out']">
                {{ item.is_online ? "在线" : "离线" }}
              </p>
            </view>
            <view class="list_item_text">
              <p>设备ID：{{ item.imei || item.device_id }}</p>
              <p>
                适配用户：{{ item.real_name == "" ? "无" : item.real_name }}
              </p>
              <p>最新上报时间：{{ item.addtime | timeFormat() }}</p>
              <p v-if="item.uptime === 0">添加设备时间：- -</p>
              <p v-else>添加设备时间：{{ item.uptime | timeFormat() }}</p>
              <p>设备已运行：{{ item.days }}天</p>
            </view>
            <view class="list_item_btn" v-if="$QueryPermission(108) && ![13, 17, 18, 11, 19, 20, 14].includes(type_id)"
              @click.stop="modification(item)">
              信息修改
            </view>
          </view>
        </scroll-view>

        <!-- </view> -->
      </view>
    </view>

    <!-- <view class="utabs_box">
			<view class="utabs">
				<u-tabs :list="list" :is-scroll="true" :current="currents" @change="change" item-width="140"
					font-size="24" gutter="20" bar-width="60" active-color="#42b983" v-if="list.length"></u-tabs>
			</view>
		</view> -->
    <view class="loading" v-if="loadingtf">
      <image src="../../static/images/ajax-loader.gif" mode="" class="img"></image>
    </view>
    <view class="top" v-if="isTop" @click="top">
      <image :src="'http://www.hnyfwlw.com:8006/bigdata_app' +
        '/image/6209a98f0cb3b5086f2ca36152c9269.png'
        " mode=""></image>
    </view>
  </view>
</template>

<script>
import { Debounce, Throttle } from "../../util/anitthro.js";
export default {
  data() {
    return {
      list: [],
      current: 0,
      currents: 0,
      page: 1,
      size: 10,
      eqlistdata: [],
      isTop: false,
      infoalter: false, // 权限设置,
      type_id: 0, //设备类型,
      imgpath: [],
      loadingtf: false,
      width: 0, //顶部搜索栏宽度
      imports: "", //搜索设备ID
    };
  },
  methods: {
    async eqlist(tf) {
      //设备列表
      this.loadingtf = true;
      const res = await this.$myRequest({
        url: "/api/api_gateway?method=forecast.worm_lamp.lamp_list",
        data: {
          device_type_id: this.type_id,
          page: this.page,
          page_size: this.size,
          device_id: this.imports,
        },
      });
      this.loadingtf = false;
      if ([11, 19, 20].includes(Number(this.type_id))) {
        var newtime = +new Date() / 1000;
      } else {
        var newtime = +new Date() / 1000;
      }
      if (tf) {
        this.eqlistdata = this.eqlistdata.concat(res.data);
      } else {
        this.eqlistdata = res.data;
      }
      console.log(this.eqlistdata);
      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);
      }
    },
    async xyeqlist(tf) {
      //设备列表
      this.loadingtf = true;
      const res = await this.$myRequest({
        url: "/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list",
        data: {
          device_type_id: this.type_id,
          page: this.page,
          page_size: this.size,
          device_id: this.imports,
        },
      });
      this.loadingtf = false;
      var newtime = +new Date() / 1000;
      if (tf) {
        this.eqlistdata = this.eqlistdata.concat(res.data);
      } else {
        this.eqlistdata = 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);
      }
      console.log(res);
    },
    //camera.camera_manage.list_camera
    async camera() {
      //监控
      const res = await this.$myRequest({
        url: "/api/api_gateway?method=camera.camera_manage.list_camera",
        data: {
          page_size: 1,
        },
      });
      this.accessToken = res.accessToken;
    },
    // homes.user_device_type
    async usertype() {
      //设备列表
      const res = await this.$myRequest({
        url: "/api/api_gateway?method=home.homes.user_device_type",
      });
      console.log(res);
      for (var i = 0; i < res.length; i++) {
        if (
          res[i].type_name == "温室大棚"
        ) {
          continue;
        }
        var obj = {
          name: res[i].type_name,
          id: res[i].id,
        };
        this.list.push(obj);
      }
      console.log("设备列表11111111111111", this.list);
      if (res.length) {
        this.type_id = this.list[0].id;
        if (this.list[0].id == 10) {
          this.xyeqlist();
        } else {
          this.eqlist();
        }
      }
    },
    change(index) {
      console.log(index);
      //头部导航栏的点击
      this.imports = "";
      this.current = index;
      this.currents = index;
      this.page = 1;
      this.eqlistdata = [];
      this.type_id = this.list[index].id;
      console.log(this.type_id);
      if (this.list[index].id == 10) {
        this.xyeqlist();
      } else {
        this.eqlist();
      }
    },
    clickRight() {
      //搜索
      this.width = "90%";
    },
    modification(item) {
      uni.navigateTo({
        url:
          "./modification?data=" + JSON.stringify(item) + "&id=" + this.type_id,
      });
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      });
    },
    historys(item) {
      console.log("item", item);
      switch (this.type_id) {
        // 病虫害可视监测
        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.addtime;
          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 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.addtime;
          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.addtime;
          uni.navigateTo({
            url: "../environment/gsequipment?shebei=" + JSON.stringify(obj),
          });
          break;
        case 17:
          break;
        case 18:
          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.addtime;
          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.addtime;
          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.addtime;
          obj.location = item.address;
          obj.type = 20;
          uni.navigateTo({
            url: "../disease/cmb?shebei=" + JSON.stringify(obj),
          });
          break;
        default:
          item.type = this.type_id;
          uni.navigateTo({
            url: "../cb/xy2.0/particulars?info=" + JSON.stringify(item),
          });
          break;
      }
    },
    search() {
      //搜索
      this.eqlistdata = [];
      this.page = 1;
      if (this.list[this.currents].id == 10) {
        this.xyeqlist();
      } else {
        this.eqlist();
      }
    },
    searchinput() {
      Debounce(() => {
        this.eqlistdata = [];
        this.page = 1;
        if (this.list[this.currents].id == 10) {
          this.xyeqlist();
        } else {
          this.eqlist();
        }
      }, 1000)();
    },
    scrollTop(e) {
      console.log(e);
    },
    upper() { },
    lower() {
      console.log(11);
      this.page++;
      if (this.type_id == 10) {
        this.xyeqlist(true);
      } else {
        this.eqlist(true);
      }
    },
    scroll() { },
  },
  onLoad() {
    this.list = [];
    this.camera();
    this.current = 0;
    this.currents = 0;
    this.page = 1;
    this.usertype();
    this.width = 0;
  },
  onReachBottom() {
    this.page++;
    if (this.type_id == 10) {
      this.xyeqlist(true);
    } else {
      this.eqlist(true);
    }
  },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > 200) {
      //距离大于200时显示
      this.isTop = true;
    } else {
      //距离小于200时隐藏
      this.isTop = false;
    }
  },
};
</script>
<style lang="scss">
page {
  background-color: #00b075;
}

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

.textbox {
  width: 100%;
  height: 100vh;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  border-top-left-radius: 80rpx;
  border-top-right-radius: 80rpx;
  margin-top: 30rpx;
  background-color: #f9f9f9;
}

.inputs {
  /deep/.u-content {
    background-color: #fff !important;
  }

  /deep/.uni-input-wrapper {
    background-color: #fff !important;
  }
}

.utabs_box {
  width: 100%;
  position: fixed;
  top: 88px;
  background-color: #ffffff;
  z-index: 100;

  .utabs {
    width: 95%;
    margin: 0 auto;
  }
}

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

  .img {
    width: 300rpx;
    height: 40rpx;
  }
}

.listbox {
  display: flex;
  justify-content: space-around;
  height: calc(100vh - 84px);
  margin-top: 20rpx;

  .listbox_left {
    background-color: #fff;
    padding: 20rpx;
    width: 140rpx;

    .listbox_left_item {
      height: 50rpx;
      width: 100%;
      margin-bottom: 20rpx;
      text-align: center;
      border-radius: 10rpx;
      line-height: 50rpx;
      overflow: hidden; //溢出隐藏
      white-space: nowrap; //禁止换行
      text-overflow: ellipsis; //...
    }

    .listbox_left_item_act {
      background-color: rgba(0, 176, 117, 0.2);
      color: #00b075;
    }
  }
}

.list {
  width: 70%;
  background-color: #fdfdfd;
  // margin-bottom: 100rpx;
  overflow-y: auto;

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

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

      .p1 {
        width: 87%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        overflow: hidden;

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

        view {
          width: calc(100% - 40rpx);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .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;
      position: absolute;
      bottom: 15rpx;
      right: 20rpx;
    }
  }
}

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

  image {
    width: 100rpx;
    height: 100rpx;
  }
}
</style>