bigDataApp/pages/waterandfer/index.vue

<template>
  <view>
    <view class="status_bar"></view>
    <view class="" style="position: relative; top: 44px">
      <view style="position: fixed; z-index: 100">
        <uni-nav-bar
          @clickLeft="clickLeft"
          left-icon="back"
          left-text="返回"
          title="水肥一体化"
          right-icon="search"
          @clickRight="clickRight"
          size="16"
        ></uni-nav-bar>
        <view class="inputs" :style="{ width: width + 'rpx' }">
          <input
            type="text"
            value=""
            placeholder="请输入设备ID或设备名称"
            v-model="imports"
            @input="searchinp"
            class="inputbox"
            :clearable="false"
          />
          <u-icon name="search" size="40" class="icon" @click="search"></u-icon>
        </view>
      </view>
      <image
        :src="'http://www.hnyfwlw.com:8006/bigdata_app/image/waterandfer/1.png'"
        mode=""
        class="image"
      >
      </image>
      <view class="loading" v-if="loadingtf">
        <image
          src="../../static/images/ajax-loader.gif"
          mode=""
          class="img"
        ></image>
      </view>
      <view class="prevents">
        <view
          class="prevents_item"
          v-for="(item, index) in eqlistdata"
          :key="index"
          @click="eqdetails(item)"
        >
          <!-- <image
						:src="item.is_online==1?'http://www.hnyfwlw.com:8006/bigdata_app/image/prevention/6.png':'http://www.hnyfwlw.com:8006/bigdata_app/image/prevention/7.png'"
						mode="" class="prevents_item_img"></image> 在线离线区分-->
          <image
            src="http://www.hnyfwlw.com:8006/bigdata_app/image/prevention/6.png"
            mode=""
            class="prevents_item_img"
          ></image>
          <view class="prevents_item_top">
            <p>
              设备名称：{{ item.device_name == '' ? '无' : item.device_name }}
            </p>
            <!-- <p :class="item.is_online==1?'green':'red'" v-text="item.is_online==1?'在线':'离线'"></p> -->
          </view>
          <view class="prevents_item_bot">
            <p>设备 ID：{{ item.device_id }}</p>
            <p>最新上报时间：{{ item.uptime | timeFormat() }}</p>
            <view
              class=""
              style="display: flex; justify-content: space-between"
              v-if="$QueryPermission(325)"
            >
              <p>
                设备到期情况：<span
                  :class="'prevents_item_bot_sapn' + item.device_expire"
                  >{{ item.device_expiretext }}</span
                >
              </p>
              <p
                style="color: #3c84fe"
                v-if="item.device_expire != 0"
                @click.stop="examine(item)"
              >
                查看详情
              </p>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-modal
      v-model="show"
      :title="title"
      :showConfirmButton="false"
      :title-style="{
        'text-align': 'left',
        'padding-left': '10px',
        'font-weight': 700,
      }"
      :mask-close-able="true"
    >
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>
    <view class="top">
      <view class="backtop" @click="top" v-if="isTop">
        <image src="../../static/images/1.png" mode="" class="img0"></image>
      </view>
      <!-- <view class="more">
				<view class="box" @click="online" v-show="filtrateTF">
					<p>在线</p>
				</view>
				<view class="box" @click="offline" v-show="filtrateTF">
					<p>离线</p>
				</view>
				<view class="box" @click="complete" v-show="filtrateTF">
					<p>全部</p>
				</view>
				<view @click="filtrate">
					<image src="../../static/images/b0bcdb0e3fe8690520f743aa8303bf2.png" mode="" class="img1"></image>
				</view>
			</view> -->
    </view>
  </view>
</template>

<script>
import { Debounce } from '../../util/anitthro.js';
export default {
  data() {
    return {
      page: 1,
      size: 10,
      eqlistdata: [],
      isTop: false,
      filtrateTF: false,
      device_status: '',
      width: 0,
      imports: '', //搜索内容
      loadingtf: false, //loading
      show: false,
      title: '',
      content: '',
    };
  },
  methods: {
    async eqlist() {
      //设备列表
      this.loadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=weather.weather.sf_page',
        data: {
          page: this.page,
          page_size: '10',
          device_id: this.imports,
        },
      });
      this.loadingtf = false;
      this.eqlistdata = this.eqlistdata.concat(res.ids);
      console.log(this.eqlistdata);
    },
    clickLeft() {
      uni.switchTab({
        url: '../index/index',
      });
    },
    clickRight() {
      // uni.navigateTo({
      // 	url: "./search"
      // })
      this.width = 600;
      this.page = 1;
    },
    eqdetails(data) {
      uni.navigateTo({
        url: './datails?shebei=' + JSON.stringify(data),
      });
    },
    filtrate() {
      this.filtrateTF = !this.filtrateTF;
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      });
    },
    online() {
      this.eqlistdata = [];
      this.page = 1;
      this.device_status = 1;
      this.eqlist();
      this.filtrateTF = !this.filtrateTF;
    },
    offline() {
      this.eqlistdata = [];
      this.page = 1;
      this.device_status = 0;
      this.eqlist();
      this.filtrateTF = !this.filtrateTF;
    },
    complete() {
      this.eqlistdata = [];
      this.page = 1;
      this.device_status = '';
      this.eqlist();
      this.filtrateTF = !this.filtrateTF;
    },
    search() {
      //搜索按钮搜索
      // this.eqlistdata = []
      this.searchinp();
    },
    searchinp() {
      //自动搜索
      Debounce(() => {
        this.page = 1;
        this.eqlistdata = [];
        this.eqlist();
      }, 1000)();
    },
    examine(e) {
      // console.log(this)
      this.show = true;
      this.title = e.device_expiretext;
      this.content = `<p style="padding-left:10px;margin:10px 0;font-size:14px;">到期时间  ${this.timezhuan(
        e.device_expire_time
      )}
				</p><p style="font-size:14px;text-align:right;color:#3C84FE;margin-bottom:10px;padding-right:10px">注：请前往PC端进行充值</p>`;
    },
    timezhuan(time) {
      function fun(a) {
        return String(a).length == 1 ? '0' + a : a;
      }
      let date = new Date(time * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let min = date.getMinutes();
      let sec = date.getSeconds();
      return `${y}-${fun(m)}-${fun(d)} ${fun(h)}:${fun(min)}:${fun(sec)}`;
    },
  },
  onLoad() {
    this.eqlist();
  },
  onReachBottom() {
    this.page++;
    this.eqlist();
  },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > 200) {
      //距离大于200时显示
      this.isTop = true;
    } else {
      //距离小于200时隐藏
      this.isTop = false;
    }
  },
};
</script>

<style lang="scss">
.inputs {
  height: 54rpx;
  background-color: #e4e4e4;
  border-radius: 27rpx;
  position: absolute;
  right: 20rpx;
  top: 24rpx;
  transition: width 0.5s;
  overflow: hidden;
  padding-top: 8rpx;
  box-sizing: border-box;

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

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

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

.image {
  position: fixed;
  top: 88px;
  width: 100%;
  height: 160rpx;
  z-index: 555;
}

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

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

.prevents {
  width: 100%;
  position: absolute;
  top: 140px;

  .prevents_item {
    width: 95%;
    margin: 0 auto 30rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 10rpx #bcb9ca;
    padding: 20rpx 40rpx 20rpx 80rpx;
    position: relative;
    box-sizing: border-box;

    .prevents_item_img {
      width: 30rpx;
      height: 50rpx;
      position: absolute;
      top: -4rpx;
      left: 30rpx;
    }

    .prevents_item_top {
      display: flex;
      justify-content: space-between;
      height: 60rpx;
      border-bottom: 2rpx solid #f4f4f4;
      line-height: 60rpx;
      font-size: 26rpx;

      .red {
        color: #ff4747;
      }

      .green {
        color: #00b075;
      }
    }

    .prevents_item_bot {
      margin-top: 20rpx;
      font-size: 26rpx;
      color: #bdbdbd;

      .prevents_item_bot_sapn0 {
        color: #00b075;
      }

      .prevents_item_bot_sapn1 {
        color: #ff4747;
      }

      .prevents_item_bot_sapn2 {
        color: #ffab00;
      }
    }
  }
}

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

  image {
    width: 100rpx;
    height: 100rpx;
  }

  .backtop {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10rpx;
  }

  .more {
    display: flex;
  }

  .box {
    width: 80rpx;
    height: 80rpx;
    background-color: rgba(161, 161, 161, 0.45);
    border-radius: 50%;
    text-align: center;
    line-height: 80rpx;
    box-sizing: border-box;
    margin: 14rpx 10rpx 0 0;
    color: #fff;
  }
}
</style>