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.only_for_show || item.device_id }}</p>
              <p>
                适配用户：{{ item.real_name == '' ? '无' : item.real_name }}
              </p>
              <p v-if="type_id == 40">最新上报时间：{{ item.uptime }}</p>
              <p v-else>最新上报时间：{{ item.uptime | timeFormat() }}</p>
              <p v-if="type_id == 40">添加设备时间：{{ item.addtime }}</p>
              <span v-else>
                <p v-if="item.addtime === 0">添加设备时间：- -</p>
                <p v-else>添加设备时间：{{ item.addtime | timeFormat() }}</p>
              </span>
              <p>设备已运行：{{ item.days }}天</p>
            </view>
            <view
              class="list_item_btn"
              v-if="
                $QueryPermission(108) &&
                ![13, 17, 18, 11, 19, 20, 14, 22, 25].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,
      device_model: 0,
      infoalter: false, // 权限设置,
      type_id: 0, //设备类型,
      imgpath: [],
      loadingtf: false,
      width: 0, //顶部搜索栏宽度
      imports: '', //搜索设备ID
    };
  },
  methods: {
    async getDeviceList(tf) {
      const res = await this.$myRequest({
        url: '/api/v2/iot/mobile/device/sf/zsrf/list/',
        method: 'post',
        data: {
          pageSize: this.size,
          pageNum: this.page,
        },
      });
      this.loadingtf = false;
      const eqlistdata = res || [];
      eqlistdata.forEach((item) => {
        const newtime = +new Date() / 1000;
        const days = (newtime - item.addtime) / 60 / 60 / 24;
        item.days = Math.round(days);
        item.device_id = item.devCode;
        item.uptime = item.devUpdateddate;
        item.addtime = item.devCreateddate;
        item.device_name = item.devName;
        item.real_name = item.realName;
        item.is_online = item.devStatus == 1 ? true : false;
      });
      this.eqlistdata = eqlistdata;
    },
    async eqlist(tf) {
      //设备列表
      this.loadingtf = true;
      if (this.type_id == 40) {
        this.getDeviceList(tf);
        return;
      }
      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;
      if ([11, 19, 20].includes(Number(this.type_id))) {
        var newtime = +new Date() / 1000;
      } else {
        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);
      });
      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].addtime) / 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].addtime) / 60 / 60 / 24;
        this.eqlistdata[i].days = Math.round(days);
      }
    },
    //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,
          device_model: res[i].device_model,
          pur_id: res[i].pur_id,
        };
        this.list.push(obj);
      }
      console.log('设备列表11111111111111', this.list);
      if (res.length) {
        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) {
      console.log(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;
      console.log(this.type_id);
      if (this.list[index].id == 10) {
        this.xyeqlist();
      } else {
        this.eqlist();
      }
    },
    clickRight() {
      //搜索
      this.width = '90%';
    },
    modification(item) {
      console.log(item, 'itemimteitmetie');
      uni.navigateTo({
        url:
          './modification?data=' + JSON.stringify(item) + '&id=' + this.type_id,
      });
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      });
    },
    historys(itemOld) {
      let item = JSON.parse(JSON.stringify(itemOld));
      console.log('item', item, this.type_id);
      item.pur_id = this.list[this.current].pur_id;
      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:
          item.addtime = item.uptime;
          uni.navigateTo({
            url: '../cb/sy/detail?detail=' + JSON.stringify(item),
          });
          break;
        case 2:
          item.addtime = item.uptime;
          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.addtime = item.uptime;
          item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
          });
          break;
        case 28:
          item.addtime = item.uptime;
          item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/smallPest/smallPest?info=' + JSON.stringify(item),
          });
          break;
        case 4:
          item.addtime = item.uptime;
          item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
          });
          break;
        case 32:
        case 33:
        case 34:
        case 35:
          item.addtime = item.uptime;
          item.type = this.type_id;
          uni.navigateTo({
            url:
              '../cb/equip-detail/equip-detail-new?info=' +
              JSON.stringify(item),
          });
          break;
        case 7:
          item.addtime = item.uptime;
          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 29:
          // item.type = this.type_id;
          uni.navigateTo({
            url: `../cb/nlNewXy/nlNewXy?imei=${item.imei}&showId=${item.only_for_show}`,
          });
          break;
        case 24:
          // item.type = this.type_id;
          uni.navigateTo({
            url: '../cb/zjxydetail/thxydetail?imei=' + item.imei,
          });
          break;
        case 12:
          console.log(item);
          item.addtime = item.uptime;
          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 = 21;
          uni.navigateTo({
            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
          });
          break;
        case 26:
          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 = 26;
          uni.navigateTo({
            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
          });
          break;
        case 27:
          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 = 26;
          uni.navigateTo({
            url: '../disease/mls/mls?shebei=' + JSON.stringify(obj),
          });
          break;
        case 25:
          item.addtime = item.uptime;
          uni.navigateTo({
            url: '../cb/xylps/detail?detail=' + JSON.stringify(item),
          });
          break;
        case 40:
          item.addtime = item.uptime;
          uni.navigateTo({
            url: `../cb/shuifeizs/detail?devBid=${item.devBid}`,
          });
          break;
        default:
          item.addtime = item.uptime;
          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() {
      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;
  },
  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;
}

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

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

.inputs {
  width: 95%;
  margin: 0 auto;
  ::v-deep .u-content {
    background-color: #fff !important;
  }

  ::v-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 - 150rpx);
  margin-top: 20rpx;

  .listbox_left {
    background-color: #fff;
    padding: 20rpx 10rpx 20rpx 0;
    width: 240rpx;
    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: calc(100vw - 300rpx);
  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: 86%;
        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;
        word-break: break-all;
      }

      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>