bigdata_WX/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 :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>添加设备时间：{{ 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,
	  device_model:0,
      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,
		  device_model: this.device_model
        }
      })
      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)
    },
    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].id == 16
        ) {
          continue;
        }
        var obj = {
          name: res[i].type_name,
          id: res[i].id,
		  device_model: res[i].device_model
        }
        this.list.push(obj)
      }
      if (res.length) {
        console.log(this.list)
        this.type_id = this.list[0].id;
		this.device_model = this.list[0].device_model;
        if (this.list[0].id == 10) {
          this.xyeqlist()
        } else {
          this.eqlist()
        }
      }
    },
    change(index) { //头部导航栏的点击
      this.imports = ""
      this.current = index
      this.currents = index
      this.page = 1
      this.eqlistdata = []
      this.type_id = this.list[index].id;
	  this.device_model = this.list[index].device_model;
      if (this.list[index].id == 10) {
        this.xyeqlist()
      } else {
        this.eqlist()
      }
    },
    clickRight() { //搜索
      this.width = '90%'
    },
    modification(item) {
      uni.navigateTo({
        url: "./seabox/modification?data=" + JSON.stringify(item) + "&id=" + this.type_id,
      })
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500
      })
    },
    historys(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.addtime;
		  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.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 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.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 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;
        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.addtime;
          obj.location = item.address;
          obj.type = 20;
          uni.navigateTo({
            url: "../disease/cmb?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;
        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
    // uni.getStorage({
    //   key: "jurisdiction",
    //   success: (res) => {
    //     console.log(JSON.parse(res.data));
    //     let items = JSON.parse(res.data).filter((item) => {
    //       return item.pur_id == 22 //"设备管理";
    //     });
    //     let items2 = items[0].children.filter((item) => {
    //       return item.pur_id == 23 //"设备列表";
    //     });
    //     console.log(items2[0].children);
    //     this.infoalter = items2[0].children.some((item) => {
    //       return (
    //         item.pur_id == 108 || item.pur_id == 109
    //       );
    //     });
    //     console.log(this.infoalter);
    //   },
    // });
  },
  onTabItemTap (e) {
  	  // console.log(e);
  	this.eqlistdata = [];
  	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%;
  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;
  }

  /deep/.u-input {
    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 - 77px);
  margin-top: 20rpx;

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

    .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>