bigDataApp/pages/qxzyj/cbwarn.vue

<template>
  <view class="content">
    <view class="cbwtop">
      <image :src="bannersrc" mode="" class="image"> </image>
      <view class="tab-box">
        <view
          v-for="(item, index) in equipArr"
          :key="index"
          @click="tabClick(index)"
          :class="['tab-item', active == index ? 'active' : '']"
        >
          <text>{{ item }}</text>
          <text class="bottom-line"></text>
        </view>
      </view>
      <view class="timeandtype" v-if="active == 0 && wranlistdata.length > 0">
        <view class="timebox">
          <view class="firsttime" @click="timeshow = true">
            {{ start_time == '' ? '请选择开始时间' : start_time }}
          </view>
          <view class="jiange"> - </view>
          <view class="endtime" @click="timeshow = true">
            {{ end_time == '' ? '请选择结束时间' : end_time }}
          </view>
          <view class="jiange" @click="closetime">
            <u-icon name="close-circle" color="#999999"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="" v-show="active == 0">
      <view class="warmlistbox" v-if="wranlistdata.length > 0">
        <view
          class="warmlistbox_item"
          v-for="item in wranlistdata"
          :key="item.id"
          @click="singleread(item)"
        >
          <view
            class="warmlistbox_item_title"
            :style="{
              'border-color': item.status == 1 ? '#14A478' : '#fd4646',
            }"
          >
            <!-- {{recordtypelist[item.warning_type].label}} -->
            {{ device_type == 5 ? '气象' : '墒情' }}预警
          </view>
          <view class="warmlistbox_item_text">
            <view class="item_text_item">
              <view class="item_text_item_f"> 设备编号： </view>
              <view class="item_text_item_e">
                {{ item.device_id }}
              </view>
            </view>
            <view class="item_text_item">
              <view class="item_text_item_f"> 设备位置： </view>
              <view class="item_text_item_e" style="display: flex">
                <u-icon
                  name="map-fill"
                  color="#14A478"
                  @click.stop="tomap(item)"
                ></u-icon>
                <view
                  class=""
                  style="margin-left: 10rpx; color: #14a478"
                  @click.stop="tomap(item)"
                >
                  查看
                </view>
              </view>
            </view>
            <view class="item_text_item">
              <view class="item_text_item_f"> 设备预警： </view>
              <view class="item_text_item_e">
                {{ item.warning_content }}
              </view>
            </view>
            <view class="item_text_sta">
              <view class="" style="color: #959699">
                {{ item.upl_time | timeFormat() }}
              </view>
              <view
                class=""
                :style="{
                  'margin-left': '10rpx',
                  color: item.status == 1 ? '#959699' : '#FD4646',
                }"
              >
                {{ item.status == 1 ? '已读' : '未读' }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="warmlistbox empty" v-else> 暂无数据 </view>
    </view>
    <view class="warmissuebox" v-show="active == 1">
      <view class="warmissue">
        <view class="warmissue_itemone">
          <view class=""> 短信剩余条数： </view>
          <view class="">
            {{ total_sms_counts }}
          </view>
        </view>
        <view class="warmissue_item">
          <view class="warmissue_item_title"> 短信内容： </view>
          <view class="warmissue_item_text">
            <view class="">
              尊敬的用户您好，管理员 提醒您，结合近期设备上报的数据，
            </view>
            <view class="" style="margin: 20rpx 0">
              <u-input
                v-model="wormvalue"
                type="textarea"
                :border="true"
                maxlength="30"
              />
            </view>
            <view class=""> 请注意防范。 </view>
          </view>
        </view>
        <view class="">
          <view class="warmissue_itemone">
            <view class=""> 短信接受人： </view>
            <view class="" style="color: #14a478" @click="tobook">
              预警通讯录编辑
            </view>
          </view>
          <view class="warmissue_itemtwo" @click="accServiceShow = true">
            <view class="itemtwo_left" v-show="!userphone.length">
              请选择短信接收人
            </view>
            <view class="itemtwo_left" v-show="userphone.length">
              <view
                class=""
                style="margin-right: 20rpx"
                v-for="item in userphone"
                :key="item.value"
              >
                {{ item.name }}
              </view>
            </view>
            <u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
          </view>
        </view>
      </view>
      <view class="sendbox" @click="send"> 发送预警 </view>
    </view>
    <view class="wornsetbox" v-show="active == 2">
      <view class="empty" v-if="configlist.length == 0"> 暂无数据 </view>
      <u-swipe-action
        :show="item.show"
        :index="index"
        v-for="(item, index) in configlist"
        :key="item.id"
        @click="delconfig(item.id)"
        :options="options"
        style="margin-bottom: 30rpx"
      >
        <view class="wornsetbox_item" @click="toset(item.id)">
          <view class="">
            {{ item.title }}
          </view>
          <view class="" @click.stop>
            <u-switch
              v-model="item.statustf"
              size="40"
              style="margin-top: 13rpx"
              @change="swichchange($event, item.id)"
            ></u-switch>
          </view>
        </view>
      </u-swipe-action>
    </view>
    <view class="addwarnlist" v-show="active == 2" @click="addwarning_config">
      添 加
    </view>
    <view class="">
      <u-mask :show="accServiceShow" z-index="998"></u-mask>
      <u-calendar
        v-model="timeshow"
        :mode="mode"
        @change="timechange"
      ></u-calendar>
      <multiple-select
        v-model="accServiceShow"
        :value="accServiceShow"
        :data="serviceList"
        :default-selected="defaultSelected"
        @confirm="accServiceConfirm"
      ></multiple-select>
      <u-modal
        v-model="modalshow"
        title="短信预警详情"
        :content="content"
        @confirm="singlereadsure"
      ></u-modal>
      <u-modal
        v-model="addshow"
        title="添加预警"
        :show-cancel-button="true"
        @confirm="addwarning_config"
      >
        <view class="addinfobox">
          <view class="addinfobox_title">
            <span>*</span>
            <span>预警名称</span>
          </view>
          <u-input v-model="addvalue" maxlength="10" />
        </view>
      </u-modal>
    </view>
    <view class="top" v-if="active != 1">
      <view class="backtop" @click="top" v-if="isTop">
        <image :src="src" mode=""></image>
      </view>
      <view class="more" @click="allread" v-show="active == 0">
        <view class=""> 一键 </view>
        <view class=""> 已读 </view>
      </view>
    </view>
  </view>
</template>

<script>
import multipleSelect from '../../components/multiple-select.vue';
export default {
  components: {
    multipleSelect,
  },
  data() {
    return {
      bannersrc:
        this.$imageURL+'/bigdata_app/image/cbyj/banner2.png',
      device_type: '',
      date: '',
      active: 0,
      equipArr: ['预警记录', '预警发布', '预警设置'],
      timeshow: false,
      mode: 'range',
      start_time: '',
      end_time: '',
      wranlistdata: [],
      listpage: 1,
      defaultSelected: [], //默认选中项
      serviceList: [
        {
          value: '1',
          name: '目标种类预警',
        },
        {
          value: '2',
          name: '指定害虫数量预警',
        },
        {
          value: '3',
          name: '害虫数量总和预警',
        },
        {
          value: '4',
          name: '综合预警',
        },
      ], //传递给子组件的数据
      accServiceShow: false,
      wormvalue: '',
      userphone: [],
      total_sms_counts: '',
      isTop: false,
      src: '../../static/images/1.png',
      src1: '../../static/images/b0bcdb0e3fe8690520f743aa8303bf2.png',
      filtrateTF: false,
      modalshow: false,
      content: '',
      warmstatus: {},
      //预警设置
      configlist: [],
      addvalue: '',
      addshow: false,
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d',
          },
        },
      ],
      confpage: 1,
    };
  },
  methods: {
    tabClick(index) {
      this.active = index;
      if (index == 0) {
        this.listpage = 1;
        this.wranlistdata = [];
        this.getwranlistdata();
      } else if (index == 1) {
        this.getmessagescounts();
      } else if (index == 2) {
        this.confpage = 1;
        this.configlist = [];
        this.getconfiglist();
      }
    },
    timechange(e) {
      console.log(e);
      this.start_time = e.startDate;
      this.end_time = e.endDate;
      this.listpage = 1;
      this.wranlistdata = [];
      this.getwranlistdata();
    },
    closetime() {
      this.start_time = '';
      this.end_time = '';
      this.listpage = 1;
      this.wranlistdata = [];
      this.getwranlistdata();
    },
    async getwranlistdata() {
      uni.showLoading({
        title: '加载中',
      });
      var end_time = '';
      var start_time = '';
      if (this.end_time != '') {
        end_time = Math.floor(+new Date(this.end_time) / 1000);
      } else {
        end_time = '';
      }
      if (this.start_time != '') {
        start_time = Math.floor(+new Date(this.start_time) / 1000);
      } else {
        start_time = '';
      }
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_qxz_warning_list',
        data: {
          end_time: end_time,
          page: this.listpage,
          page_size: '10',
          start_time: start_time,
          device_type: this.device_type,
        },
      });
      console.log(res);
      uni.hideLoading();
      this.wranlistdata = this.wranlistdata.concat(res.data);
    },
    tomap(data) {
      uni.navigateTo({
        url: '../cbqxyj/basemap?device_id=' + data.device_id,
      });
    },
    accServiceConfirm(e) {
      console.log(e);
      this.userphone = e;
    },
    async getuseriphonelist() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_warning_liaisons_list',
        data: {
          page: 1,
          device_type: this.device_type,
          page_size: 9999999,
        },
      });
      console.log(res);
      this.serviceList = [];
      for (var i = 0; i < res.data.length; i++) {
        var obj = {
          value: res.data[i].d_id,
          name: res.data[i].liaisons + '/' + res.data[i].phone,
        };
        this.serviceList.push(obj);
      }
    },
    async getmessagescounts() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.remaining_messages_counts',
        data: {
          device_type: this.device_type,
        },
      });
      console.log(res);
      this.total_sms_counts = res.total_sms_counts;
    },
    async send() {
      if (this.wormvalue == '') {
        uni.showToast({
          title: '请填写短信预警信息',
          icon: 'none',
        });
      } else if (this.userphone.length == 0) {
        uni.showToast({
          title: '请选择短信接收人',
          icon: 'none',
        });
      } else {
        var list = [];
        for (var i = 0; i < this.userphone.length; i++) {
          list.push(this.userphone[i].value);
        }
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=device.device_sms_alert.user_pest_warning_release',
          data: {
            send_user: list.join(','),
            content: this.wormvalue,
            device_type_id: this.device_type,
            device_type: this.device_type,
          },
        });
        console.log(res);
        if (res) {
          uni.showToast({
            title: '发送成功',
            icon: 'none',
          });
        } else {
          uni.showToast({
            title: '发送失败',
            icon: 'none',
          });
        }
      }
    },
    tobook() {
      uni.navigateTo({
        url: '../cbqxyj/addressbook',
      });
    },
    async allread() {
      uni.showLoading({
        title: '加载中',
      });
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_qxz_warning_record_read',
        data: {
          req: 'all',
          device_type: this.device_type,
        },
      });
      uni.hideLoading();
      if (res) {
        uni.showToast({
          title: '已完成一键已读',
          icon: 'none',
        });
      }
    },
    singleread(data) {
      console.log(data);
      this.modalshow = true;
      this.content = data.warning_content;
      this.warmstatus = data;
    },
    async singlereadsure() {
      uni.showLoading({
        title: '加载中',
      });
      if (this.warmstatus.status == 0) {
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=device.device_sms_alert.user_qxz_warning_record_read',
          data: {
            id: this.warmstatus.id,
          },
        });
        uni.hideLoading();
        if (res) {
          uni.showToast({
            title: '此条预警已读',
            icon: 'none',
          });
          this.listpage = 1;
          this.wranlistdata = [];
          this.getwranlistdata();
        }
      }
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      });
    },
    async getconfiglist() {
      uni.showLoading({
        title: '加载中',
      });
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_warning_config_list',
        data: {
          device_type_id: this.device_type,
          page: this.confpage,
          device_type: this.device_type,
          page_size: '10',
        },
      });
      uni.hideLoading();
      console.log(res.data);
      this.configlist = [];
      for (var i = 0; i < res.data.length; i++) {
        res.data[i]['statustf'] = res.data[i].status == 1 ? true : false;
      }
      this.configlist = this.configlist.concat(res.data);
      console.log(this.configlist);
    },
    async swichchange(e, id) {
      uni.showLoading({
        title: '加载中',
      });
      // console.log(e, id)
      // console.log(this.configlist)
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.modify_user_warning_config_status',
        data: {
          id: id,
          status: e ? 1 : 0,
        },
      });
      uni.hideLoading();
      if (res) {
        uni.showToast({
          title: '状态修改成功',
          icon: 'none',
        });
      }
      this.confpage = 1;
      this.getconfiglist();
    },
    toset(id) {
      console.log(id);
      uni.navigateTo({
        url: './warnset?id=' + id + '&typeId=' + this.device_type,
      });
    },
    async addwarning_config() {
      uni.navigateTo({
        url: './warnset?type=new' + '&typeId=' + this.device_type,
      });
      // this.addshow = true
      // if (this.addvalue == "") {
      // 	uni.showToast({
      // 		title: "请填写预警名称",
      // 		icon: "none"
      // 	})
      // } else {
      // 	const res = await this.$myRequest({
      // 		url: '/api/api_gateway?method=device.device_sms_alert.create_user_warning_config',
      // 		data: {
      // 			title: this.addvalue,
      // 			device_type: this.device_type,
      // 			device_type_id: this.device_type
      // 		}
      // 	})
      // 	console.log(res)
      // 	if (res) {
      // 		this.addshow = false
      // 		this.configlist = []
      // 		this.confpage = 1
      // 		this.getconfiglist()
      // 	}
      // }
    },
    async delconfig(id) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.del_user_warning_config_status',
        data: {
          id: id,
        },
      });
      console.log(res);
      if (res) {
        this.configlist = [];
        this.confpage = 1;
        this.getconfiglist();
      }
    },
  },
  onLoad(option) {
    console.log(option);
    this.device_type = option.typeId;
    if (option.typeId == 15) {
      uni.setNavigationBarTitle({ title: '墒情预警' });
      this.bannersrc =
        'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/cbyj/banner15.png';
    }
    this.getwranlistdata();
    // this.getmessagescounts()
    // this.getconfiglist()
  },
  onShow() {
    this.getuseriphonelist();
    this.getconfiglist();
  },
  onReachBottom() {
    if (this.active == 0) {
      this.listpage++;
      this.getwranlistdata();
    } else if (this.ctive == 2) {
      this.confpage++;
      this.getconfiglist();
    }
  },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > 200) {
      //距离大于200时显示
      this.isTop = true;
    } else {
      //距离小于200时隐藏
      this.isTop = false;
    }
  },
};
</script>

<style lang="less">
page {
  background-color: #f6f6fb;
}

.cbwtop {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 555;
  background-color: #fff;

  .image {
    width: 100%;
    height: 160rpx;
  }

  .tab-box {
    font-size: 30rpx;
    line-height: 80rpx;
    background-color: #ffffff;
    width: 100%;
    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: #57c878;
      }
    }
  }

  .timeandtype {
    background-color: #f6f6fb;
    padding: 20rpx;
    box-sizing: border-box;

    .timebox {
      display: flex;
      background-color: #fff;
      padding: 10px;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;

      .jiange {
        width: 5%;
        text-align: center;
      }

      .firsttime,
      .endtime {
        width: 45%;
        text-align: center;
      }
    }

    .warntypebox {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 10px;
      border-top: 1px solid #f6f6fb;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
    }
  }
}

.warmlistbox {
  width: 95%;
  margin: 0 auto;
  padding-top: 370rpx;

  .warmlistbox_item {
    padding: 20rpx 0;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    .warmlistbox_item_title {
      border-left: 8rpx solid #14a478;
      padding-left: 30rpx;
    }

    .warmlistbox_item_text {
      width: 90%;
      margin: 0 auto;
      margin-top: 20rpx;
      border-top: 1px solid #f2f2f2;
      padding: 20rpx 0;

      .item_text_item {
        margin-bottom: 7px;
        display: flex;

        .item_text_item_f {
          width: 140rpx;
        }

        .item_text_item_e {
          width: calc(100% - 140rpx);
          display: -webkit-box; //谷歌
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4; //显示几行
          overflow: hidden;
        }
      }

      .item_text_sta {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
}
.warmissuebox {
  width: 95%;
  margin: 0 auto;
  padding-top: 270rpx;

  .warmissue {
    width: 95%;
    margin: 0 auto;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 5px;

    .warmissue_itemone {
      margin-bottom: 60rpx;
      display: flex;
      justify-content: space-between;
    }

    .warmissue_item {
      margin-bottom: 60rpx;
      display: flex;

      .warmissue_item_title {
        width: 160rpx;
      }

      .warmissue_item_text {
        width: calc(100% - 160rpx);
      }
    }

    .warmissue_itemtwo {
      display: flex;

      .itemtwo_left {
        width: calc(100% - 40rpx);
        display: flex;
        flex-wrap: wrap;
      }

      .icon {
        width: 40rpx;
      }
    }
  }

  .sendbox {
    margin: 40rpx auto;
    width: 80%;
    background-color: #14a478;
    padding: 20rpx 0;
    border-radius: 59px;
    text-align: center;
    color: #fff;
  }
}

.wornsetbox {
  width: 95%;
  margin: 0 auto;
  padding-top: 270rpx;

  .wornsetbox_item {
    padding: 30rpx 20rpx;
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    line-height: 64rpx;
    height: 124rpx;
    // margin-bottom: 30rpx;
  }
}

.addwarnlist {
  position: absolute;
  bottom: 20rpx;
  left: 10%;
  margin: 40rpx auto;
  width: 80%;
  background-color: #14a478;
  padding: 20rpx 0;
  border-radius: 59px;
  text-align: center;
  color: #fff;
}

.addinfobox {
  display: flex;
  margin: 30rpx 0;

  .addinfobox_title {
    line-height: 70rpx;
    width: 30%;
    text-align: center;

    span:first-child {
      color: red;
    }
  }

  ::v-deep .u-input__right-icon {
    line-height: 35px;
  }
}

::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-around;

  .u-calendar__action__text {
    line-height: 25px;
  }
}

.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 {
    width: 100rpx;
    height: 100rpx;
    background-color: rgba(161, 161, 161, 0.45);
    border-radius: 50%;
    text-align: center;
    padding-top: 10rpx;
    line-height: 40rpx;
    box-sizing: border-box;
    margin: 14rpx 0 0 0;
    color: #fff;
  }
}
</style>