bigDataApp/pages/irrigate/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/irrigate/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 == 18">
            <image
              :src="
                item.device_status == 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.device_name }}</p>
              <view class="" style="display: flex">
                <view
                  class=""
                  :style="{
                    'margin-right': '10rpx',
                    color: item.status2 ? '#00B075' : '#f00',
                  }"
                >
                  {{ item.status2 ? '已启用' : '已禁用' }}
                </view>
                <u-switch
                  v-model="item.status2"
                  v-if="$QueryPermission(256)"
                  size="35"
                  active-color="#00B075"
                  style="margin-top: 10rpx"
                  inactive-color="#f00"
                  @change="switchchange2($event, item.d_id, index)"
                >
                </u-switch>
              </view>
            </view>
            <view class="prevents_item_bot">
              <view class="prevents_item_bot_item">
                <p>设备 ID：{{ item.device_id }}</p>
                <p @click="newdata(item)" v-if="$QueryPermission(205)">
                  数据查看
                </p>
              </view>
              <p style="color: #909696; height: 60rpx; line-height: 60rpx">
                设备状态：{{ item.device_status == 1 ? '在线' : '离线' }}
              </p>
              <p style="color: #909696; height: 60rpx; line-height: 60rpx">
                设备备注：{{ item.device_notes }}
                <u-icon
                  name="edit-pen"
                  size="36"
                  color="#00B075"
                  @click="changeremark(item, index)"
                >
                </u-icon>
              </p>
              <view class="prevents_item_bot_item">
                <p>地址：{{ item.city }}</p>
                <u-icon
                  name="map"
                  size="40"
                  color="#00B075"
                  @click="selectaddress(item.city, item.device_name)"
                ></u-icon>
              </view>
            </view>
          </view>
          <view class="" v-if="side_type == 17">
            <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 }}</p>
              <view class="" style="display: flex">
                <view
                  class=""
                  :style="{
                    'margin-right': '10rpx',
                    color: item.water_pump_switch2 ? '#00B075' : '#f00',
                  }"
                >
                  {{ item.water_pump_switch2 ? '已开泵' : '已关泵' }}
                </view>
                <u-switch
                  v-model="item.water_pump_switch2"
                  v-if="$QueryPermission(254)"
                  size="35"
                  active-color="#00B075"
                  inactive-color="#f00"
                  style="margin-top: 10rpx"
                  @change="switchchange($event, item.device_id, index)"
                >
                </u-switch>
              </view>
            </view>
            <view class="prevents_item_bot">
              <view class="prevents_item_bot_item">
                <p>设备 ID：{{ item.device_id }}</p>
                <p @click="newdata(item)" v-if="item.water_pump_switch2">
                  实时数据
                </p>
              </view>
              <p style="color: #909696; height: 60rpx; line-height: 60rpx">
                设备状态：{{ item.device_status == 1 ? '在线' : '离线' }}
              </p>
              <p style="color: #909696; height: 60rpx; line-height: 60rpx">
                设备备注：{{ item.device_notes }}
                <u-icon
                  name="edit-pen"
                  size="36"
                  color="#00B075"
                  @click="changeremark(item, index)"
                >
                </u-icon>
              </p>
              <view class="prevents_item_bot_item">
                <p>地址：{{ item.city }}</p>
                <u-icon
                  name="map"
                  size="40"
                  color="#00B075"
                  @click="selectaddress(item.city, item.device_name)"
                ></u-icon>
              </view>
            </view>
          </view>
          <view class="" v-if="side_type == 13 || side_type == 'xph'">
            <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 }}</p>
            </view>
            <view class="prevents_item_bot">
              <p>设备 ID：{{ item.equip_id || item.device_id }}</p>
              <p>最新上报时间：{{ item.uptime | timeFormat() }}</p>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-modal
      v-model="show"
      :show-cancel-button="true"
      title="请设置开泵时间"
      @confirm="modalconfirm"
      @cancel="modalcancel"
    >
      <view class="slot-content">
        <u-input v-model="timevalue" type="number" />分钟
      </view>
    </u-modal>
    <u-modal
      v-model="showremark"
      :show-cancel-button="true"
      title="请填写设备备注"
      @confirm="modalconfirmremark"
      @cancel="modalcancelremark"
    >
      <view class="slot-contentremark">
        <u-input v-model="timevalueremark" maxlength="12" />
      </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>
  </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: '', //搜索设备id
      loadingtf: false,
      equipArr: [
        {
          name: '机井水电双控',
          type: 17, //5 环境监测 15 管式墒情
          list: [],
          pageIndex: 1,
          tf: false,
        },
        {
          name: '水肥一体化(L)',
          type: 18, //5 环境监测 15 管式墒情
          list: [],
          pageIndex: 1,
          tf: false,
        },
        {
          name: '水肥一体化(X)',
          type: 13, //5 环境监测 15 管式墒情
          list: [],
          pageIndex: 1,
          tf: false,
        },
        {
          name: '水肥一体化',
          type: 'xph', //5 环境监测 15 管式墒情
          list: [],
          pageIndex: 1,
          tf: false,
        },
      ],
      active: 0, //tab选中的下标
      side_type: 17, //当前选中的设备类型
      show: false,
      timevalue: '',
      selindex: '', //选中的设备index
      selid: '', //选中的设备id
      showremark: false,
      timevalueremark: '',
    };
  },
  methods: {
    async xphlist() {
      this.loadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=xphsp.views.all_devices',
        data: {
          page: this.page,
          page_size: '10',
          device_id: this.imports,
        },
      });
      this.loadingtf = false;
      this.eqlistdata = this.eqlistdata.concat(res.data);
      console.log(this.eqlistdata);
    },
    async eqlist() {
      //设备列表 水肥一体化 L
      this.loadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_list',
        data: {
          page: this.page,
          page_size: 10,
          content: this.imports,
        },
      });
      console.log(res);
      this.loadingtf = false;
      for (var i = 0; i < res.data.length; i++) {
        res.data[i]['status2'] = res.data[i].status == 1 ? true : false;
      }
      this.eqlistdata = this.eqlistdata.concat(res.data);
    },
    async tubulareqlist() {
      //水电双计
      this.loadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.hydropower.hydropower_list',
        data: {
          page: this.page,
          page_size: 10,
          content: this.imports,
        },
      });
      console.log(res);
      this.loadingtf = false;
      for (var i = 0; i < res.data.length; i++) {
        res.data[i]['water_pump_switch2'] =
          res.data[i].water_pump_switch == 1 ? true : false;
      }
      this.eqlistdata = this.eqlistdata.concat(res.data);
      // console.log(res)
    },
    async sfeqlist() {
      //设备列表
      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);
    },
    clickRight() {
      this.width = 600;
    },
    clickLeft() {
      uni.switchTab({
        url: '../index/index',
      });
    },
    eqdetails(data) {
      if (this.side_type == 13) {
        uni.navigateTo({
          url: '../waterandfer/datails?shebei=' + JSON.stringify(data),
        });
      } else if (this.side_type == 'xph') {
        uni.navigateTo({
          url: '../waterandfernew/details?shebei=' + JSON.stringify(data),
        });
      }
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      });
    },
    search() {
      //搜索按钮搜索
      this.searchinp();
    },
    searchinp() {
      //自动搜索
      Debounce(() => {
        this.page = 1;
        this.eqlistdata = [];
        if (this.side_type == 18) {
          this.eqlist();
        } else if (this.side_type == 17) {
          this.tubulareqlist();
        } else if (this.side_type == 13) {
          this.sfeqlist();
        } else if (this.side_type == 'xph') {
          this.xphlist();
        }
      }, 1000)();
    },
    tabClick(index, type) {
      this.active = index;
      this.side_type = type;
      this.page = 1;
      if (type == 18) {
        this.eqlistdata = [];
        this.eqlist();
      } else if (type == 17) {
        this.eqlistdata = [];
        this.tubulareqlist();
      } else if (type == 13) {
        this.eqlistdata = [];
        this.sfeqlist();
      } else if (type == 'xph') {
        this.eqlistdata = [];
        this.xphlist();
      }
    },
    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)}`;
    },
    newdata(item) {
      if (this.side_type == 17) {
        uni.navigateTo({
          url: 'realtimedata?item=' + JSON.stringify(item),
        });
      } else {
        uni.navigateTo({
          url: 'weathdata?item=' + JSON.stringify(item),
        });
      }
    },
    selectaddress(city, name) {
      //获取分布位置
      uni.request({
        type: 'GET',
        url:
          'https://restapi.amap.com/v3/geocode/geo?address=' +
          city +
          '&key=78ce288400f4fc6d9458989875c833c2',
        dataType: 'json',
        complete: (ress) => {
          console.log(ress);
          if (ress.data.status == 1) {
            // ress.data.geocodes[0].location
            uni.navigateTo({
              url:
                './irrmap?lnglat=' +
                ress.data.geocodes[0].location +
                '&basename=' +
                name,
            });
          } else {
            uni.showToast({
              title: '地址编译失败',
              icon: 'none',
            });
          }
        },
      });
    },
    async pumpcontrol(en) {
      //水肥开关
      console.log(en);
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.hydropower.water_pump_control',
        data: {
          times: Math.floor(this.timevalue * 60),
          device_id: this.selid,
          status: en ? 1 : 0,
        },
      });
      console.log(res);
      if (res.code == 200) {
        uni.showToast({
          title: '操作成功',
          icon: 'none',
        });
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
        this.eqlistdata[this.selindex].water_pump_switch2 =
          !this.eqlistdata[this.selindex].water_pump_switch2;
      }
      this.timevalue = '';
    },
    switchchange(e, id, index) {
      //水肥 开关
      console.log(e);
      if (e) {
        this.show = true;
        this.selindex = index;
        this.selid = id;
      } else {
        this.selid = id;
        this.pumpcontrol(false);
      }
    },
    async switchchange2(e, id, index) {
      //水电开关
      console.log(id);
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.waterfertilizer.water_fertilizer_control',
        data: {
          device_ids: id,
          isopen: e ? 1 : 0,
        },
      });
      console.log(res);
      if (res.info == 'ok') {
        uni.showToast({
          title: '操作成功',
          icon: 'none',
        });
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
        this.eqlistdata[index].status2 = !this.eqlistdata[index].status2;
      }
    },
    modalcancel() {
      //水肥开关 确定
      this.eqlistdata[this.selindex].water_pump_switch2 =
        !this.eqlistdata[this.selindex].water_pump_switch2;
      this.timevalue = '';
    },
    modalconfirm() {
      //水肥开关 取消
      this.show = true;
      if (this.timevalue == '') {
        uni.showToast({
          title: '请输入开泵时间',
          icon: 'none',
        });
      } else {
        this.show = false;
        this.pumpcontrol(true);
      }
    },
    changeremark(item, index) {
      //修改备注
      this.timevalueremark = item.device_notes;
      this.showremark = true;
      this.selindex = index;
      this.selid = item.device_id;
    },
    modalcancelremark() {
      //修改备注 取消
    },
    modalconfirmremark() {
      //修改备注 确定
      this.showremark = true;
      if (this.timevalueremark == '') {
        uni.showToast({
          title: '请输入设备备注',
          icon: 'none',
        });
      } else {
        this.showremark = false;
        this.setchangeremark();
      }
    },
    async setchangeremark() {
      //水肥开关
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=irrigation_system.hydropower.water_pump_modify_device_notes',
        data: {
          device_id: this.selid,
          content: this.timevalueremark,
        },
      });
      console.log(res);
      if (res) {
        uni.showToast({
          title: '操作成功',
          icon: 'none',
        });
        this.eqlistdata[this.selindex].device_notes = this.timevalueremark;
      }
    },
  },
  onLoad() {
    // this.tubulareqlist()
    uni.getStorage({
      key: 'jurisdiction',
      success: (res) => {
        let items = JSON.parse(res.data).filter((item) => {
          return item.pur_id == 202;
        });
        var itemarr = items[0].children;
        console.log(itemarr);
        for (var i = 0; i < itemarr.length; i++) {
          switch (itemarr[i].pur_id) {
            case 204:
              this.equipArr[0].tf = true;
              break;
            case 203:
              this.equipArr[1].tf = true;
              break;
            case 195:
              this.equipArr[2].tf = true;
              break;
            case 288:
              this.equipArr[3].tf = true;
              break;
          }
        }
        for (var i = 0; i < this.equipArr.length; i++) {
          if (this.equipArr[i].tf) {
            if (i == 0) {
              this.tubulareqlist();
            } else if (i == 1) {
              this.eqlist();
            } else if (i == 2) {
              this.sfeqlist();
            } else {
              this.xphlist();
            }
            this.active = i;
            this.side_type = this.equipArr[i].type;
            break;
          }
        }
      },
    });
  },
  onReachBottom() {
    this.page++;
    // this.eqlist()
    if (this.side_type == 18) {
      this.eqlist();
    } else if (this.side_type == 17) {
      this.tubulareqlist();
    } else if (this.side_type == 13) {
      this.sfeqlist();
    } else if (this.side_type == 'xph') {
      this.xphlist();
    }
  },
  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;
  }
}

::v-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 {
  position: fixed;
  top: 170px;
  display: flex;
  justify-content: space-around;
  font-size: 24rpx;
  line-height: 80rpx;
  background-color: #ffffff;
  width: 100%;
  z-index: 2;

  .tab-item {
    cursor: pointer;
    position: relative;
  }

  .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_item {
        height: 60rpx;
        line-height: 60rpx;
        display: flex;
        justify-content: space-between;
        color: #909696;

        p:first-child {
          width: 80%;
          overflow: hidden; //溢出隐藏
          white-space: nowrap; //禁止换行
          text-overflow: ellipsis; //...
        }

        p:nth-child(2) {
          height: 45rpx;
          color: #00b075;
          border-bottom: 1px solid #00b075;
        }
      }

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

.slot-content {
  width: 50%;
  margin: 30rpx auto;
  display: flex;
  line-height: 70rpx;
}

.slot-contentremark {
  width: 70%;
  margin: 30rpx auto;
  display: flex;
  line-height: 70rpx;
}
</style>