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="
                    'https://s3.hnyfwlw.com/webstaticimg/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, 22].includes(type_id)
              "
              @click.stop="modification(item)"
            >
              编辑
            </view>
            <view
              class="playback-item"
              v-if="
                $QueryPermission(236) &&
                item.camera_playback == 1 &&
                type_id == 6
              "
              @click.stop="handlePlayback(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="
          'https://s3.hnyfwlw.com/webstaticimg/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();
      }
    },
    handlePlayback(item) {
      uni.navigateTo({
        url:
          '/pages/webviewPlayback?device_id=' +
          item.imei +
          '&accessToken=' +
          this.accessToken,
        fail(err) {
          console.log(err, '------------------------- playback');
        },
      });
    },
    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 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 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:
          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.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;
        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;
}

::v-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 {
  ::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 - 84px);
  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: 88rpx;
      color: #42b983;
      // height: 40rpx;
      text-align: center;
      border: 1rpx solid #42b983;
      border-radius: 25rpx;
      font-size: 32rpx;
      line-height: 46rpx;
      position: absolute;
      bottom: 15rpx;
      right: 20rpx;
    }

    .playback-item {
      width: 88rpx;
      color: #42b983;
      // height: 40rpx;
      text-align: center;
      border: 1rpx solid #42b983;
      border-radius: 25rpx;
      font-size: 32rpx;
      line-height: 46rpx;
      position: absolute;
      bottom: 15rpx;
      right: 120rpx;
    }
  }
}

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

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