bigDataApp/pages/environment/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/environment/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="tab-box">
        <view
          v-for="(item, index) in equipArr"
          :key="item.type"
          v-if="item.tf"
          @click="tabClick(index, item.type)"
          :class="['tab-item', active == index ? 'active' : '']"
        >
          <text>{{ item.name }}</text>
          <text class="bottom-line"></text>
        </view>
      </view>
      <view class="prevents">
        <view
          class="prevents_item"
          v-for="(item, index) in eqlistdata"
          :key="index"
          @click="eqdetails(item)"
        >
          <view class="" v-if="side_type == 5">
            <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>
            <view class="prevents_item_top">
              <p>
                设备名称：{{
                  item.equip_name == "" ? "环境监测" : item.equip_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.equip_id || item.device_id }}</p>
              <p>最新上报时间：{{ item.uptime | timeFormat() }}</p>
              <view
                class=""
                style="display: flex; justify-content: space-between"
              >
                <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 class="" v-if="side_type == 15">
            <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>
            </view>
            <view class="prevents_item_bot">
              <p>设备 ID：{{ item.device_id }}</p>
              <p>最新上报时间：{{ item.uptime | timeFormat() }}</p>
            </view>
          </view>
          <view
            class=""
            v-if="side_type == 11 || side_type == 19 || side_type == 20"
          >
            <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>
            </view>
            <view class="prevents_item_bot">
              <p>设备 ID：{{ item.device_id }}</p>
              <p>最新上报时间：{{ item.uptime | timeFormat() }}</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" v-if="side_type == 5">
      <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 {
      diseaseId: 11,
      page: 1,
      size: 10,
      eqlistdata: [],
      isTop: false,
      filtrateTF: false,
      device_status: "",
      width: 0, //顶部搜索栏宽度
      imports: "", //搜索设备id
      loadingtf: false,
      equipArr: [
        {
          name: "环境监测",
          type: 5, //5 环境监测 15 管式墒情
          list: [],
          pageIndex: 1,
          tf: false,
        },
        {
          name: "管式墒情",
          type: 15, //5 环境监测 15 管式墒情
          list: [],
          pageIndex: 1,
          tf: false,
        },
        {
          name: "小麦赤霉病",
          type: 11, //5 环境监测 15 管式墒情 11小麦赤霉病 19玉米大斑病
          list: [],
          pageIndex: 1,
          tf: false,
        },
        {
          name: "玉米大斑病",
          type: 19, //5 环境监测 15 管式墒情 11小麦赤霉病 19玉米大斑病
          list: [],
          pageIndex: 1,
          tf: false,
        },
        {
          name: "小麦条锈病",
          type: 20, //5 环境监测 15 管式墒情 11小麦赤霉病 19玉米大斑病  20小麦条锈病
          list: [],
          pageIndex: 1,
          tf: false,
        },
      ],
      active: 0, //tab选中的下标
      side_type: 5, //当前选中的设备类型
      show: false,
      title: "",
      content: "",
    };
  },
  methods: {
    async eqlist() {
      console.log("搜素字段s", this.imports);
      //设备列表 环境监测
      this.loadingtf = true;
      const res = await this.$myRequest({
        url: "/api/api_gateway?method=weather.weather.qxz_page",
        data: {
          page: this.page,
          device_status: this.device_status,
          page_size: 10,
          device_id: this.imports,
        },
      });
      this.loadingtf = false;
      this.eqlistdata = this.eqlistdata.concat(res.ids);
      for (var i = 0; i < this.eqlistdata.length; i++) {
        if (this.eqlistdata[i].device_expire == 0) {
          this.eqlistdata[i]["device_expiretext"] = "未到期";
        } else if (this.eqlistdata[i].device_expire == 1) {
          this.eqlistdata[i]["device_expiretext"] = "已到期";
        } else if (this.eqlistdata[i].device_expire == 2) {
          this.eqlistdata[i]["device_expiretext"] = "即将到期";
        }
      }
      console.log(res.ids);
    },
    // weather.weather.nd_qxz_page 管式墒情
    async tubulareqlist() {
      //设备列表 环境监测
      this.loadingtf = true;
      const res = await this.$myRequest({
        url: "/api/api_gateway?method=weather.weather.nd_qxz_page",
        data: {
          page: this.page,
          device_status: this.device_status,
          page_size: 10,
          device_id: this.imports,
        },
      });
      this.loadingtf = false;
      this.eqlistdata = this.eqlistdata.concat(res.ids);
    },
    //设备列表 病害
    async getEquipList() {
      this.loadingtf = true;
      const res = await this.$myRequest({
        method: "POST",
        url: "/api/api_gateway?method=wheat.wheat.wheat_list",
        data: {
          device_id: this.imports,
          device_name: "",
          page: this.page,
          device_type: this.diseaseId,
        },
      });
      this.loadingtf = false;
      this.eqlistdata = this.eqlistdata.concat(res.ids);
    },
    clickRight() {
      this.width = 600;
    },
    clickLeft() {
      uni.switchTab({
        url: "../index/index",
      });
    },
    eqdetails(data) {
      console.log(data, this.side_type);
      if (this.side_type == 5) {
        uni.navigateTo({
          url: "./equipment?shebei=" + JSON.stringify(data),
        });
      } else if (this.side_type == 15) {
        uni.navigateTo({
          url: "./gsequipment?shebei=" + JSON.stringify(data),
        });
      } else if (this.side_type == 11) {
        uni.navigateTo({
          url: "../disease/cmb?shebei=" + JSON.stringify(data),
        });
      } else if (this.side_type == 19) {
        uni.navigateTo({
          url: "../disease/cmb?shebei=" + JSON.stringify(data),
        });
      } else if (this.side_type == 20) {
        uni.navigateTo({
          url: "../disease/cmb?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.searchinp();
    },
    searchinp() {
      //自动搜索
      Debounce(() => {
        this.page = 1;
        if (this.side_type == 5) {
          this.eqlistdata = [];
          this.eqlist();
        } else if (this.side_type == 15) {
          this.eqlistdata = [];
          this.tubulareqlist();
        } else if (
          this.side_type == 11 ||
          this.side_type == 19 ||
          this.side_type == 20
        ) {
          this.eqlistdata = [];
          this.getEquipList();
        }
      }, 1000)();
    },
    tabClick(index, type) {
      this.active = index;
      this.side_type = type;
      this.page = 1;
      if (type == 5) {
        this.eqlistdata = [];
        this.eqlist();
      } else if (type == 15) {
        this.eqlistdata = [];
        this.tubulareqlist();
      } else if (type == 11) {
        this.eqlistdata = [];
        this.getEquipList();
      } else if (type == 19) {
        this.diseaseId = type;
        this.eqlistdata = [];
        this.getEquipList();
      } else if (type == 20) {
        this.diseaseId = type;
        this.eqlistdata = [];
        this.getEquipList();
      }
    },
    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();
    uni.getStorage({
      key: "jurisdiction",
      success: (res) => {
        let items = JSON.parse(res.data).filter((item) => {
          return item.purview_name == "环境监测系统";
        });
        var itemarr = items[0].children;
        console.log(itemarr);
        for (var i = 0; i < itemarr.length; i++) {
          switch (itemarr[i].purview_name) {
            case "环境监测":
              this.equipArr[0].tf = true;
              break;
            case "管式墒情":
              this.equipArr[1].tf = true;
              break;
            case "小麦赤霉病":
              this.equipArr[2].tf = true;
              break;
            case "玉米大斑病":
              this.equipArr[3].tf = true;
              break;
            case "小麦条锈病":
              this.equipArr[4].tf = true;
              break;
          }
        }
      },
    });
  },
  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">
page {
  background: $uni-bg-color-grey;
}

.inputs {
  height: 54rpx;
  background-color: #e4e4e4;
  border-radius: 27rpx;
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  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;
  }
}

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

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

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

  .img {
    width: 300rpx;
    height: 40rpx;
  }
}
.tab-box::-webkit-scrollbar {
  display: none;
}
.tab-box {
  position: fixed;
  top: 170px;
  // display: flex;
  // justify-content: space-around;
  font-size: 30rpx;
  line-height: 80rpx;
  background-color: #ffffff;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  overflow-x: scroll;
  white-space: nowrap;

  .tab-item {
    cursor: pointer;
    position: relative;
    width: 25%;
    text-align: center;
    display: inline-block;
  }

  .tab-item.active {
    .bottom-line {
      bottom: 0;
      position: absolute;
      display: inline-block;
      width: 90rpx;
      height: 6rpx;
      left: 0;
      right: 0;
      margin: auto;
      background: $uni-color-success;
    }
  }
}

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

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

    .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: #ff0000;
      }

      .green {
        color: #7dbb91;
      }
    }

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