nlu_App/pages/cbqxyj/warnset.vue

<template>
  <view style="padding-bottom: 30rpx">
    <view class="basesel">
      <view class="basesel_list">
        <view class="">
          <view class=""> 预警名称 </view>
          <view class="">
            <u-input v-model="title" />
          </view>
        </view>
        <view class="basesel_list_tilte"> 预警设备选择： </view>
        <view class="basesel_list_sel" @click="accServiceShow = true">
          <view class="basesel_list_sel_left" v-show="!selbaselist.length">
            请选择预警
          </view>
          <view class="basesel_list_sel_left" v-show="selbaselist.length">
            <view
              class=""
              style="margin-right: 20rpx"
              v-for="item in selbaselist"
              :key="item"
            >
              {{ item }}
            </view>
          </view>
          <u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
        </view>
      </view>
      <view class="basesel_calculate">
        <view class="" style="line-height: 27px"> 预警计算： </view>
        <u-radio-group v-model="warnjihe">
          <u-radio name="0" icon-size="10" label-size="20"> 逐台预警 </u-radio>
          <u-radio
            name="1"
            icon-size="10"
            label-size="20"
            :disabled="selbaselist.length < 2"
          >
            合并预警
          </u-radio>
        </u-radio-group>
      </view>
    </view>
    <view class="target">
      <view class="target_title">
        <view class="target_title_left">
          <view class="target_title_left_title"> 目标种类预警 </view>
          <view class=""> 每天害虫 种类数量达到此值时，短信预警 </view>
        </view>
        <view class="target_title_right">
          <u-switch v-model="conf.pestCategory" size="40"></u-switch>
        </view>
      </view>
      <view class="">
        <view class=""> 害虫种类预警 </view>
        <view class="">
          <u-input v-model="conf.pestCategoryNum" type="number" />
        </view>
      </view>
    </view>
    <view class="target">
      <view class="target_title">
        <view class="target_title_left">
          <view class="target_title_left_title"> 数量预警 </view>
          <view class=""> 每天害虫 指定害虫数达到此值时，短信预警 </view>
        </view>
        <view class="target_title_right">
          <u-switch v-model="conf.appointPest" size="40"></u-switch>
        </view>
      </view>
      <view class="target_text">
        <view class=""> 指定害虫数量预警 </view>
        <view
          class="target_text_item"
          v-for="(item, index) in confnum"
          :key="index"
        >
          <view
            class="target_text_item_sel"
            @click="
              selwormindex = index;
              wormshow = true;
            "
          >
            <view class="itemtwo_left" v-show="item.appointPestName == ''">
              请选择害虫
            </view>
            <view class="itemtwo_left" v-show="item.appointPestName != ''">
              {{ item.appointPestName }}
            </view>
            <u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
          </view>
          <view class="target_text_item_ipt">
            <u-input v-model="item.appointPestNum" type="number" />
          </view>
          <u-icon
            name="plus-circle"
            class="icon addordel"
            color="#14a478"
            size="45"
            @click="addconfitem"
            v-show="index == 0"
          ></u-icon>
          <u-icon
            name="trash"
            class="icon addordel"
            color="#ff4949"
            size="45"
            @click="delconfitem(index)"
            v-show="index != 0"
          ></u-icon>
        </view>
      </view>
    </view>
    <view class="target">
      <view class="target_title">
        <view class="target_title_left">
          <view class="target_title_left_title"> 总数预警 </view>
          <view class=""> 每天害虫总数数量达到此值时，短信预警 </view>
        </view>
        <view class="target_title_right">
          <u-switch v-model="conf.pestTotal" size="40"></u-switch>
        </view>
      </view>
      <view class="">
        <view class=""> 害虫种类预警 </view>
        <view class="">
          <u-input v-model="conf.pestTotalNum" type="number" />
        </view>
      </view>
    </view>
    <view class="target">
      <view class="target_title">
        <view class="target_title_left">
          <view class="target_title_left_title"> 综合预警 </view>
          <view class=""> 监测每天出现的害虫种类及数量，短信预警 </view>
        </view>
        <view class="target_title_right">
          <u-switch v-model="conf.pestWarn" size="40"></u-switch>
        </view>
      </view>
    </view>
    <view class="usersel">
      <view class="warmissue_itemone">
        <view class="warmissue_itemone_title"> 短信接受人： </view>
        <view class="" style="color: #14a478" @click="tobook">
          预警通讯录编辑
        </view>
      </view>
      <view class="warmissue_itemtwo" @click="accServiceShowphone = 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"
          >
            {{ item }}
          </view>
        </view>
        <u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
      </view>
    </view>
    <view class="sendbox" @click="send"> 保存预警设置 </view>
    <view class="">
      <u-mask
        :show="accServiceShow || accServiceShowphone"
        z-index="998"
      ></u-mask>
      <u-select
        v-model="wormshow"
        :list="wormlist"
        @confirm="selconfirm"
      ></u-select>
      <multiple-select
        v-model="accServiceShow"
        :value="accServiceShow"
        :data="serviceList"
        :default-selected="defaultSelected"
        @confirm="accServiceConfirm"
      ></multiple-select>
      <multiple-select
        v-model="accServiceShowphone"
        :value="accServiceShowphone"
        :data="serviceListphone"
        :default-selected="defaultSelectedphone"
        @confirm="accServiceConfirmphone"
      ></multiple-select>
    </view>
  </view>
</template>

<script>
import multipleSelect from '../../components/multiple-select.vue';
import dict from '../../static/data/cbd_pest_library.js';
export default {
  components: {
    multipleSelect,
  },
  data() {
    return {
      warning_id: '',
      selbaselist: [],
      warnjihe: '0',
      accServiceShow: false,
      serviceList: [],
      defaultSelected: [],
      userphone: [],
      accServiceShowphone: false,
      serviceListphone: [],
      defaultSelectedphone: [],
      title: '', // 预警名称
      //预警配置
      conf: {
        pestCategory: false,
        pestCategoryNum: '',
        appointPest: false,
        pestTotalNum: '',
        pestTotal: false,
        pestWarn: false,
      },
      confnum: [
        {
          appointPestName: '',
          appointPestNum: '',
          appointPestNameid: '',
        },
      ],
      device_ids: [],
      send_user: [],
      wormshow: false,
      wormlist: [],
      selwormindex: 0,
    };
  },
  methods: {
    accServiceConfirm(e) {
      this.selbaselist = [];
      this.device_ids = [];
      for (var i = 0; i < e.length; i++) {
        this.selbaselist.push(e[i].name);
        this.device_ids.push(e[i].value);
      }
      console.log(e);
    },
    accServiceConfirmphone(e) {
      this.userphone = [];
      this.send_user = [];
      for (var i = 0; i < e.length; i++) {
        this.userphone.push(e[i].name);
        this.send_user.push(e[i].value);
      }
    },
    async getpeizhi(id) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_pest_warning_statsu',
        data: {
          warning_id: id,
        },
      });
      console.log(res);
      this.confnum = [];
      this.conf.pestCategory = res.conf.pestCategory == 'on' ? true : false;
      this.conf.appointPest = res.conf.appointPest == 'on' ? true : false;
      this.conf.pestTotal = res.conf.pestTotal == 'on' ? true : false;
      this.conf.pestWarn = res.conf.pestWarn == 'on' ? true : false;

      this.conf.pestCategoryNum = res.conf.pestCategoryNum;
      this.conf.pestTotalNum = res.conf.pestTotalNum;
      this.title = res.warning_name;

      for (var key in res.device_ids) {
        this.selbaselist.push(res.device_ids[key]);
        this.defaultSelected.push(Number(key));
        this.device_ids.push(Number(key));
      }
      console.log(this.defaultSelected);
      for (var key in res.send_user) {
        this.userphone.push(
          res.send_user[key][0] + '/' + res.send_user[key][1]
        );
        this.defaultSelectedphone.push(Number(key));
        this.send_user.push(Number(key));
      }
      var flag = 0;
      for (var key in res.conf) {
        if (key.indexOf('appointPestName') != -1) {
          flag++;
        }
      }
      for (var i = 0; i < flag; i++) {
        // console.log(i)
        if (i == 0) {
          var obj = {
            appointPestName: dict[Number(res.conf['appointPestName'])],
            appointPestNum: res.conf['appointPestNum'],
            appointPestNameid: res.conf['appointPestName'],
          };
        } else {
          var obj = {
            appointPestName: dict[Number(res.conf['appointPestName' + i])],
            appointPestNum: res.conf['appointPestNum' + i],
            appointPestNameid: res.conf['appointPestName' + i],
          };
        }
        this.confnum.push(obj);
      }
    },
    async getbaselist() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_warning_device_list',
        data: {
          device_type_id: '3',
          page: '1',
          page_size: '999999999',
        },
      });
      // console.log(res.data)
      for (var i = 0; i < res.data.length; i++) {
        var obj = {
          value: res.data[i].d_id,
          name: res.data[i].device_id,
        };
        this.serviceList.push(obj);
      }
    },
    async getuseriphonelist() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_warning_liaisons_list',
        data: {
          page: 1,
          page_size: 9999999,
        },
      });
      // console.log(res)
      this.serviceListphone = [];
      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.serviceListphone.push(obj);
      }
    },
    tobook() {
      uni.navigateTo({
        url: './addressbook',
      });
    },
    selconfirm(e) {
      console.log(e, this.selwormindex);
      this.confnum[this.selwormindex].appointPestName = e[0].label;
      this.confnum[this.selwormindex].appointPestNameid = e[0].value;
    },
    addconfitem() {
      for (var i = 0; i < this.confnum.length; i++) {
        if (
          this.confnum[i].appointPestName == '' ||
          this.confnum[i].appointPestNum == ''
        ) {
          uni.showToast({
            title: '请先将信息填写完成后添加',
            icon: 'none',
          });
          return;
        }
      }
      var obj = {
        appointPestName: '',
        appointPestNum: '',
      };
      this.confnum.push(obj);
    },
    delconfitem(index) {
      this.confnum.splice(index, 1);
    },
    yanzheng() {
      for (var i = 0; i < this.confnum.length; i++) {
        if (
          this.confnum[i].appointPestName == '' ||
          this.confnum[i].appointPestNum == ''
        ) {
          return true;
        }
      }
      return false;
    },
    async send() {
      if (this.selbaselist.length == 0) {
        uni.showToast({
          title: '请选择预警设备',
          icon: 'none',
        });
      } else if (
        this.conf.pestCategory == false &&
        this.conf.appointPest == false &&
        this.conf.pestTotal == false &&
        this.conf.pestWarn == false
      ) {
        uni.showToast({
          title: '请开启至少一种预警',
          icon: 'none',
        });
      } else if (this.conf.pestCategory && this.conf.pestCategoryNum == '') {
        uni.showToast({
          title: '请将目标种类预警信息填写完整',
          icon: 'none',
        });
      } else if (this.conf.appointPest && this.yanzheng()) {
        uni.showToast({
          title: '请将数量预警信息填写完整',
          icon: 'none',
        });
      } else if (this.conf.pestTotal && this.conf.pestTotalNum == '') {
        uni.showToast({
          title: '请将总数预警信息填写完整',
          icon: 'none',
        });
      } else if (this.userphone.length == 0) {
        uni.showToast({
          title: '请选择短信接收人',
          icon: 'none',
        });
      } else {
        console.log(this.device_ids);
        console.log(this.send_user);
        if (this.title.length > 32 || this.title == '') {
          uni.showToast({
            title: '标题不能为空且长度不大于32个字符',
            icon: 'none',
          });
          return;
        }
        var obj = {};
        // console.log(this.confnum)
        for (var i = 0; i < this.confnum.length; i++) {
          if (i == 0) {
            obj['appointPestName'] = this.confnum[i].appointPestNameid;
            obj['appointPestNum'] = this.confnum[i].appointPestNum;
          } else {
            obj['appointPestName' + i] = this.confnum[i].appointPestNameid;
            obj['appointPestNum' + i] = this.confnum[i].appointPestNum;
          }
        }
        for (var key in this.conf) {
          if (
            key == 'pestCategory' ||
            key == 'appointPest' ||
            key == 'pestTotal' ||
            key == 'pestWarn'
          ) {
            obj[key] = this.conf[key] ? 'on' : 'off';
          } else {
            obj[key] = this.conf[key];
          }
        }
        console.log(obj);
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=device.device_sms_alert.create_user_pest_warning',
          data: {
            conf: JSON.stringify(obj),
            device_ids: this.device_ids.join(','),
            send_user: this.send_user.join(','),
            warning_id: this.warning_id,
            warning_type: this.warnjihe,
            title: this.title,
          },
        });
        console.log(res);
        if (res) {
          uni.showToast({
            title: '预警配置成功',
            icon: 'none',
            complete: () => {
              uni.navigateBack({
                delta: 1,
              });
            },
          });
        }
      }
    },
  }, 
  onShow(){
	  this.getuseriphonelist();
  },
  onLoad(option) {
    // console.log(dict)
    this.wormlist = [];
    for (var key in dict) {
      var obj = {
        value: key,
        label: dict[key],
      };
      this.wormlist.push(obj);
    }
    this.getbaselist();
    this.getuseriphonelist();
    if (option.id) {
      this.getpeizhi(option.id);
      this.warning_id = option.id;
    }
  },
};
</script>

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

.basesel {
  width: 95%;
  margin: 20rpx auto;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10rpx;

  .basesel_list {
    width: 100%;

    .basesel_list_tilte {
      margin-bottom: 60rpx;
      font-size: 32rpx;
    }

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

      .basesel_list_sel_left {
        width: calc(100% - 40rpx);
        display: flex;
        flex-wrap: wrap;
        color: #999999;
      }

      .icon {
        width: 40rpx;
      }
    }
  }

  .basesel_calculate {
    margin-top: 30rpx;
    display: flex;
  }
}

.usersel {
  width: 95%;
  margin: 20rpx auto;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10rpx;

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

    .warmissue_itemone_title {
      font-size: 32rpx;
    }
  }

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

    .icon {
      width: 40rpx;
    }
  }
}

.target {
  width: 95%;
  margin: 20rpx auto;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10rpx;

  .target_title {
    margin-bottom: 40rpx;
    display: flex;
    justify-content: space-between;

    .target_title_left {
      font-size: 24rpx;
      color: #999999;

      .target_title_left_title {
        font-size: 32rpx;
        color: #2f2f30;
      }
    }
  }

  .target_text {
    width: 100%;

    .target_text_item {
      width: 100%;
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;

      .target_text_item_sel {
        width: 40%;
        display: flex;
        justify-content: space-between;
        line-height: 70rpx;
        height: 70rpx;
        border-bottom: 1px solid #aaaaad;

        .itemtwo_left {
          color: #999999;
        }
      }

      .target_text_item_ipt {
        width: 40%;

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

      .addordel {
        width: 10%;
      }
    }
  }

  ::v-deep .uni-input-input {
    border-bottom: 1px solid #aaaaad;
  }
}

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