bigDataApp/pages/qxzyj/warnset.vue

<template>
  <view>
    <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="baseshow = true">
          <view class="basesel_list_sel_left" v-show="selbaselist == ''">
            请选择预警
          </view>
          <view class="basesel_list_sel_left" v-show="selbaselist != ''">
            {{ selbaselist }}
          </view>
          <u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
        </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="tongdao" v-for="(item, index) in tongdaolist" :key="index">
      <view class="tongdao_title">
        <view class="">
          {{ item.key }}
        </view>
        <view class="">
          <u-switch
            v-model="item.type"
            size="40"
            style="margin-top: 13rpx"
          ></u-switch>
        </view>
      </view>
      <view class="tongdao_item">
        <view class=""> 通道名称 </view>
        <view class="">
          {{ item.name }}
        </view>
      </view>
      <view class="tongdao_item">
        <view class=""> 运算符 </view>
        <view
          class="target_text_item_sel"
          @click="
            selindex = index;
            operationshow = true;
          "
        >
          <view class="itemtwo_left" v-show="item.value == ''">
            请选择运算符
          </view>
          <view class="itemtwo_left" v-show="item.value != ''">
            {{ item.value }}
          </view>
          <u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
        </view>
      </view>
      <view class="tongdao_item">
        <view class=""> 阈值 </view>
        <view class="" style="display: flex">
          <u-input
            v-model="item.num[0]"
            type="number"
            @blur="numyanzheng(index)"
          />
          <view
            class=""
            style="width: 60rpx; text-align: center"
            v-show="item.valuenum == 2"
          >
            -
          </view>
          <u-input
            v-model="item.num[1]"
            type="number"
            v-show="item.valuenum == 2"
            @blur="numyanzheng(index)"
          />
        </view>
      </view>
    </view>
    <view class="sendbox" @click="send"> 保存预警设置 </view>
    <view class="">
      <u-mask :show="accServiceShowphone" z-index="998"></u-mask>
      <u-select
        v-model="baseshow"
        :list="baselist"
        @confirm="selconfirm"
      ></u-select>
      <u-select
        v-model="operationshow"
        :list="operationlist"
        @confirm="operationconfirm"
      ></u-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';
export default {
  components: {
    multipleSelect,
  },
  data() {
    return {
      title: '',
      device_type: '',
      fanxianid: '',
      fanxianconf: '',
      warning_id: '',
      accServiceShowphone: false,
      userphone: [],
      send_user: [],
      defaultSelectedphone: [],
      serviceListphone: [],
      selbaselist: [],
      baselist: [],
      baseshow: false,
      statustf: false,
      operationshow: false,
      operationlist: [
        {
          value: 0,
          label: '小于',
        },
        {
          value: 1,
          label: '大于',
        },
        {
          value: 2,
          label: '介于',
        },
      ],
      tongdaolist: [],
      selindex: 0,
    };
  },
  methods: {
    tobook() {
      uni.navigateTo({
        url: '../cbqxyj/addressbook',
      });
    },
    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 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,
          device_type: this.device_type,
        },
      });
      // 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);
      }
    },
    async getbaselist() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_warning_device_list',
        data: {
          device_type_id: this.device_type,
          device_type: this.device_type,
          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,
          label: res.data[i].device_id,
        };
        this.baselist.push(obj);
      }
    },
    selconfirm(e) {
      console.log(e);
      this.selbaselist = e[0].label;
      this.getbasetongdao(e[0].label);
    },
    operationconfirm(e) {
      console.log(e);
      console.log(this.selindex);
      this.tongdaolist[this.selindex].value = e[0].label;
      this.tongdaolist[this.selindex].valuenum = e[0].value;
    },
    async getbasetongdao(device_id) {
      uni.showLoading({
        title: '加载中',
      });
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=weather.weather.qxz_early_warning',
        data: {
          device_id: device_id,
          device_type: this.device_type,
          status: 'see',
        },
      });
      uni.hideLoading();
      console.log(res.conf);
      this.tongdaolist = [];
      for (var key in res.conf) {
        var obj = {
          key: key,
          name: res.conf[key],
          type: false,
          value: '',
          valuenum: '',
          num: [],
        };
        if (this.fanxianid == device_id) {
          console.log(this.fanxianconf);
          for (var i = 0; i < this.fanxianconf.length; i++) {
            if (Object.keys(this.fanxianconf[i]) == key) {
              obj.type = true;
              var arr = this.fanxianconf[i][key].split('|')[0].split('#');
              if (arr[1].indexOf('&')) {
                arr[1] = arr[1].split('&');
                obj.num[1] = arr[1][1];
                obj.num[0] = arr[1][0];
              }
              obj.value = this.operationlist[arr[0]].label;
              obj.valuenum = arr[0];
            }
          }
        }
        this.tongdaolist.push(obj);
      }
      // console.log(this.tongdaolist)
    },
    yanzheng() {
      for (var i = 0; i < this.tongdaolist.length; i++) {
        if (this.tongdaolist[i].type) {
          return false;
        }
      }
      return true;
    },
    yanzheng2() {
      for (var i = 0; i < this.tongdaolist.length; i++) {
        if (this.tongdaolist[i].type) {
          if (!this.tongdaolist[i].value || !this.tongdaolist[i].num[0]) {
            return true;
          } else if (
            this.tongdaolist[i].value == '介于' &&
            !this.tongdaolist[i].num[1]
          ) {
            return true;
          }
        }
      }
      return false;
    },
    numyanzheng(index) {
      if (this.tongdaolist[index].num[1]) {
        // console.log(Number(this.tongdaolist[index].num[0]) > Number(this.tongdaolist[index].num[1]))
        if (
          Number(this.tongdaolist[index].num[0]) >=
          Number(this.tongdaolist[index].num[1])
        ) {
          this.tongdaolist[index].num = [this.tongdaolist[index].num[0], ''];
        }
      }
    },
    async send() {
      console.log(this.selbaselist);
      if (this.selbaselist == '') {
        uni.showToast({
          title: '请选择预警设备',
          icon: 'none',
        });
      } else if (this.userphone.length == 0) {
        uni.showToast({
          title: '请选择预警短信接收人',
          icon: 'none',
        });
      } else if (this.yanzheng()) {
        // console.log(this.tongdaolist)
        uni.showToast({
          title: '请开启至少一个通道预警',
          icon: 'none',
        });
      } else if (this.yanzheng2()) {
        uni.showToast({
          title: '请将开启的通道信息填写完成',
          icon: 'none',
        });
      } else {
        if (this.title.length > 32 || this.title == '') {
          uni.showToast({
            title: '标题不能为空且长度不大于32个字符',
            icon: 'none',
          });
          return;
        }
        var conf = [];
        for (var i = 0; i < this.tongdaolist.length; i++) {
          if (this.tongdaolist[i].type) {
            var obj = {};
            obj[this.tongdaolist[i].key] =
              this.tongdaolist[i].valuenum +
              '#' +
              this.tongdaolist[i].num.join('&') +
              '|' +
              this.tongdaolist[i].name;
            conf.push(obj);
          }
        }
        // console.log(conf)
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=device.device_sms_alert.create_qxz_warning_config',
          data: {
            conf: JSON.stringify(conf),
            device_id: this.selbaselist,
            send_user_id: this.send_user.join(','),
            warning_id: this.warning_id,
            device_type: this.device_type,
            title: this.title,
          },
        });
        if (res) {
          uni.showToast({
            title: '预警配置成功',
            icon: 'none',
            complete: () => {
              uni.navigateBack({
                delta: 1,
              });
            },
          });
        }
        // console.log(res)
      }
    },
    //返现
    async getstatsu() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_qxz_warning_statsu',
        data: {
          warning_id: this.warning_id,
        },
      });
      console.log(res);
      this.selbaselist = res.device_ids;
      this.fanxianid = res.device_ids;
      this.defaultSelectedphone = [];
      this.userphone = [];
      this.send_user = [];
      this.fanxianconf = res.conf;
      this.title = res.warning_name;
      for (var key in res.send_user) {
        this.defaultSelectedphone.push(Number(key));
        this.userphone.push(
          res.send_user[key][0] + '/' + res.send_user[key][1]
        );
        this.send_user.push(Number(key));
      }
      this.getbasetongdao(res.device_ids);
    },
  },
  onLoad(option) {
    this.device_type = option.typeId;
    this.getbaselist();
    this.getuseriphonelist();
    if (option.id) {
      this.warning_id = option.id;
      this.getstatsu();
    }
  },
};
</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;
      }
    }
  }
}

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

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

  .tongdao_title {
    padding: 0 20rpx;
    display: flex;
    line-height: 60rpx;
    justify-content: space-between;
    height: 60rpx;
    border-left: 8rpx solid #14a478;
  }

  .tongdao_item {
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    line-height: 70rpx;

    .target_text_item_sel {
      display: flex;
      border-bottom: 1px solid #aaaaad;
      height: 70rpx;
      line-height: 70rpx;

      .itemtwo_left {
        color: #999999;
      }
    }

    ::v-deep .uni-input-input {
      border-bottom: 1px solid #aaaaad;
      text-align: right;
      width: 200rpx;
    }

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

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