ninglu-frontt/src/pages/forecasting/cbdwarning/warningset.vue

<!--  -->
<template>
  <div class="warningsetbox">
    <div class="warningset_title">
      <div>
        <p class="selbase_title" style="margin-bottom: 10px">预警名称</p>
        <el-input
          v-model="warningsetoption.title"
          placeholder="请输入预警名称"
          maxlength="24"
          show-word-limit
        ></el-input>
      </div>
      <el-button type="success" size="mini" @click="goback">返回</el-button>
    </div>
    <div class="select_gather">
      <div class="warningset_selbase">
        <p class="selbase_title">预警设备选择</p>
        <el-select
          v-model="warningsetoption.device_ids"
          multiple
          filterable
          placeholder="请选择"
          @change="selbasechange"
        >
          <el-option
            v-for="item in device_idslist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="selbase_seltype">
          <div>
            <span style="font-size: 14px">预警计算：</span>
            <el-radio v-model="warningsetoption.warning_type" label="0">逐台预警</el-radio>
            <el-radio
              v-model="warningsetoption.warning_type"
              :disabled="warningsetoption.device_ids.length <= 1"
              label="1"
              >合并预警</el-radio
            >
          </div>
          <div style="font-size: 14px; margin-top: 10px">
            <i class="el-icon-warning"></i>
            <span style="color: #999999"
              >逐台预警：以下预警条件将会适用于每台选择的设备；合并预警：以下预警条件将会适用于所选设备数据的综合</span
            >
          </div>
        </div>
      </div>
      <div class="warningset_setuser" v-if="false">
        <div class="warningset_setuser_top">
          <p class="selbase_title">短信接收人</p>
          <p class="compile" @click="dialogVisible = true">预警通讯录编辑</p>
        </div>
        <el-select v-model="warningsetoption.send_user" multiple filterable placeholder="请选择">
          <el-option
            v-for="item in userlist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="warningset_setinfo">
      <p class="selbase_title">预警信息</p>
      <div class="setinfo_first">
        <div class="setinfo_first_left">
          <div class="setinfo_first_item">
            <div class="first_item_one">
              <p>1</p>
              <p>目标种类预警</p>
            </div>
            <div class="first_item_tow">
              <p>害虫种类预警</p>
              <el-switch
                v-model="warningsetoption.conf.pestCategory"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
            <div class="first_item_three">
              <el-input
                v-model.number="warningsetoption.conf.pestCategoryNum"
                oninput="value=value.replace(/[^\d]+/g,'')"
                size="mini"
              >
                ></el-input
              >
              <p>每天害虫 <span>种类数量</span>达到此值时，短信预警</p>
            </div>
          </div>
          <div class="setinfo_first_item">
            <div class="first_item_one">
              <p>2</p>
              <p>总量预警</p>
            </div>
            <div class="first_item_tow">
              <p>害虫数量总和预警</p>
              <el-switch
                v-model="warningsetoption.conf.pestTotal"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
            <div class="first_item_three">
              <el-input
                v-model.number="warningsetoption.conf.pestTotalNum"
                oninput="value=value.replace(/[^\d]+/g,'')"
                size="mini"
              >
                ></el-input
              >
              <p>每天害虫 <span>总数数量</span>达到此值时，短信预警</p>
            </div>
          </div>
          <div class="setinfo_first_item">
            <div class="first_item_one">
              <p>3</p>
              <p>综合预警</p>
            </div>
            <div class="first_item_tow">
              <p>监测每天出现的害虫种类及数量，短信预警</p>
              <el-switch
                v-model="warningsetoption.conf.pestWarn"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
          </div>
        </div>
        <div class="setinfo_first_item">
          <div class="first_item_one">
            <p>4</p>
            <p>数量预警</p>
          </div>
          <div class="first_item_tow">
            <p>指定害虫数量预警</p>
            <el-switch
              v-model="warningsetoption.conf.appointPest"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
          <div class="first_item_three">
            <div class="first_item_three_left">
              <div class="three_left_item">
                <el-select
                  v-model="warningsetoption.conf.appointPestName"
                  placeholder="请选择"
                  size="mini"
                  filterable
                >
                  <el-option
                    v-for="num in 332"
                    :key="num"
                    :label="cbdPest[num]"
                    :value="num"
                  ></el-option>
                </el-select>
                <el-input
                  v-model.number="warningsetoption.conf.appointPestNum"
                  oninput="value=value.replace(/[^\d]+/g,'')"
                  size="mini"
                >
                  ></el-input
                >
                <p>
                  <i class="el-icon-circle-plus-outline" @click="addelemeent"></i>
                </p>
              </div>
              <div class="three_left_item" v-for="(item, index) in confcopy" :key="index">
                <el-select v-model="item.value" placeholder="请选择" size="mini" filterable>
                  <el-option
                    v-for="num in 332"
                    :key="num"
                    :label="cbdPest[num]"
                    :value="num"
                  ></el-option>
                </el-select>
                <el-input
                  v-model.number="item.num"
                  oninput="value=value.replace(/[^\d]+/g,'')"
                  size="mini"
                >
                  ></el-input
                >
                <p>
                  <i class="el-icon-delete" style="color: #ff4949" @click="delelemeent(index)"></i>
                </p>
              </div>
            </div>
            <p>每天害虫 <span>指定害虫数</span>达到此值时，短信预警</p>
          </div>
        </div>
      </div>
    </div>
    <el-button type="success" style="margin-top: 20px" size="mini" @click="sure_sumbitwarn"
      >保存预警设置</el-button
    >
    <el-dialog
      title="预警通讯录编辑"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="userlistbox" v-loading="loading">
        <div class="userlistbox_caozuo">
          <el-input v-model="username" placeholder="请输入姓名" size="mini"></el-input>
          <el-input v-model="useriphone" placeholder="请输入手机号" size="mini"></el-input>
          <el-button type="success" size="mini" @click="adduser">添加</el-button>
        </div>
        <div class="userlistbox_table">
          <el-table :data="tabledata" stripe height="300" style="width: 100%">
            <el-table-column prop="liaisons" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="phone" label="手机号" width="180"> </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-popconfirm title="确定删除该联系人吗？" @confirm="deluser(scope.row)">
                  <p style="color: #ff4949" slot="reference">删除</p>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import dict from '../../../../static/js/cbd_pest_library.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      warnid: '',
      device_idslist: [],
      warningsetoption: {
        title: '',
        device_ids: [],
        warning_type: '0',
        conf: {
          pestCategoryNum: '', // 害虫种类数量
          appointPestNum: '', // 指定数量
          appointPestName: '', // 指定名称
          pestTotalNum: '', // 害虫数量总数
          pestTotal: false, // 害虫数量总数开关
          pestWarn: false, // 综合开关
          appointPest: false, // 指定数量开关
          pestCategory: false // 害虫种类开关
        },
        send_user: []
      },
      confcopy: [],
      cbdPest: dict,
      dialogVisible: false,
      userlist: [], // 用户列表
      tabledata: [], // 用户列表
      multipleSelection: [],
      username: '',
      useriphone: '',
      loading: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    goback() {
      this.$router.go(-1)
    },
    // 获取预警配置
    getwarnset() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=device.device_sms_alert.user_pest_warning_statsu',
        data: this.qs.stringify({
          warning_id: this.warnid
        })
      }).then((res) => {
        if (res.data.message == '') {
          // console.log(res.data.data);
          var data = res.data.data
          // this.warningsetoption
          this.warningsetoption.title = data.warning_name
          this.warningsetoption.conf.pestCategoryNum = data.conf.pestCategoryNum
          this.warningsetoption.conf.appointPestNum = data.conf.appointPestNum
          this.warningsetoption.conf.appointPestName = Number(data.conf.appointPestName)
          this.warningsetoption.conf.pestTotalNum = data.conf.pestTotalNum

          this.warningsetoption.conf.pestTotal = data.conf.pestTotal == 'on'
          this.warningsetoption.conf.pestWarn = data.conf.pestWarn == 'on'
          this.warningsetoption.conf.appointPest = data.conf.appointPest == 'on'
          this.warningsetoption.conf.pestCategory = data.conf.pestCategory == 'on'
          var flag = 0
          for (var key in data.conf) {
            if (key.indexOf('ppointPestNum') != -1) {
              flag++
            }
          }
          if (flag > 1) {
            for (var i = 1; i < flag; i++) {
              // //console.log(i)
              var obj = {
                value: Number(data.conf['appointPestName' + i]),
                num: data.conf['appointPestNum' + i]
              }
              this.confcopy.push(obj)
            }
          }
          for (var key in data.device_ids) {
            this.warningsetoption.device_ids.push(Number(key))
          }
          // for (var key in data.send_user) {
          //   this.warningsetoption.send_user.push(Number(key))
          // }
          this.warningsetoption.warning_type = data.warning_type.toString()
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning',
            duration: 1500
          })
        }
      })
    },
    // 获取设备列表
    getbaselist() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=device.device_sms_alert.user_warning_device_list',
        data: this.qs.stringify({
          page: '1',
          page_size: 999999999,
          device_type_id: '3'
        })
      }).then((res) => {
        if (res.data.message == '') {
          var data = res.data.data.data
          this.device_idslist = []
          for (var i = 0; i < data.length; i++) {
            var obj = {
              value: data[i].d_id,
              label: data[i].device_id
            }
            this.device_idslist.push(obj)
          }
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning',
            duration: 1500
          })
        }
      })
    },
    // 增加数量预警
    addelemeent() {
      if (
        this.warningsetoption.conf.appointPestNum != '' &&
        this.warningsetoption.conf.appointPestName != ''
      ) {
        if (this.confcopy.length == 0) {
          var obj = {
            value: '',
            num: ''
          }
          this.confcopy.push(obj)
        } else {
          if (
            this.confcopy[this.confcopy.length - 1].value != '' &&
            this.confcopy[this.confcopy.length - 1].num != ''
          ) {
            var obj = {
              value: '',
              num: ''
            }
            this.confcopy.push(obj)
          } else {
            this.$message({
              message: '请将信息填写完成添加',
              type: 'warning',
              duration: 1500
            })
          }
        }
      } else {
        this.$message({
          message: '请将信息填写完成添加',
          type: 'warning',
          duration: 1500
        })
      }
    },
    // 删除数量预警
    delelemeent(index) {
      this.confcopy.splice(index, 1)
    },
    selbasechange() {
      if (this.warningsetoption.device_ids.length <= 1) {
        this.warningsetoption.warning_type = '0'
      }
    },
    yanzheng() {
      if (
        this.warningsetoption.conf.appointPestNum == '' ||
        this.warningsetoption.conf.appointPestName == ''
      ) {
        return true
      } else if (this.confcopy.length) {
        if (
          this.confcopy[this.confcopy.length - 1].value == '' ||
          this.confcopy[this.confcopy.length - 1].num == ''
        ) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    sure_sumbitwarn() {
      if (this.warningsetoption.title == '') {
        this.$message({
          message: '请填写预警名称',
          type: 'warning',
          duration: 1500
        })
      } else if (this.warningsetoption.device_ids.length == 0) {
        this.$message({
          message: '请选择预警设备',
          type: 'warning',
          duration: 1500
        })
      } else if (
        this.warningsetoption.conf.pestTotal == false &&
        this.warningsetoption.conf.pestWarn == false &&
        this.warningsetoption.conf.appointPest == false &&
        this.warningsetoption.conf.pestCategory == false
      ) {
        this.$message({
          message: '请至少开启一项预警信息',
          type: 'warning',
          duration: 1500
        })
      } else if (
        this.warningsetoption.conf.pestCategory &&
        this.warningsetoption.conf.pestCategoryNum == ''
      ) {
        this.$message({
          message: '请将害虫种类预警信息填写完整',
          type: 'warning',
          duration: 1500
        })
      } else if (this.warningsetoption.conf.appointPest && this.yanzheng()) {
        this.$message({
          message: '请将指定害虫数量预警信息填写完整',
          type: 'warning',
          duration: 1500
        })
      } else if (
        this.warningsetoption.conf.pestTotal &&
        this.warningsetoption.conf.pestTotalNum == ''
      ) {
        this.$message({
          message: '请将指定害虫数量总和预警信息填写完整',
          type: 'warning',
          duration: 1500
        })
      } else {
        for (var i = 0; i < this.confcopy.length; i++) {
          this.warningsetoption.conf['appointPestNum' + (i + 1)] = this.confcopy[i].num
          this.warningsetoption.conf['appointPestName' + (i + 1)] = this.confcopy[i].value
        }

        var obj = JSON.parse(JSON.stringify(this.warningsetoption.conf))
        obj.pestTotal = obj.pestTotal ? 'on' : 'off'
        obj.pestWarn = obj.pestWarn ? 'on' : 'off'
        obj.appointPest = obj.appointPest ? 'on' : 'off'
        obj.pestCategory = obj.pestCategory ? 'on' : 'off'
        for (var key in obj) {
          obj[key].toString()
        }
        if (this.warnid == '') {
          // //console.log('创建');
          this.sumbitwarn_found(obj)
        } else {
          // //console.log('修改');
          this.sumbitwarn_amend(obj)
        }
      }
    },
    // 保存预警设置
    sumbitwarn_amend(obj) {
      // //console.log();
      // return;
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=device.device_sms_alert.create_user_pest_warning',
        data: this.qs.stringify({
          title: this.warningsetoption.title,
          device_ids: this.warningsetoption.device_ids.join(','),
          warning_type: this.warningsetoption.warning_type,
          conf: JSON.stringify(obj),
          // send_user: this.warningsetoption.send_user.join(','),
          warning_id: this.warnid
        })
      }).then((res) => {
        this.loading = false
        if (res.data.message == '') {
          // //console.log(res.data)\
          this.$message({
            message: '配置成功',
            type: 'success',
            duration: 1500
          })
          this.goback()
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning',
            duration: 1500
          })
        }
      })
    },
    sumbitwarn_found(obj) {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=device.device_sms_alert.create_user_warning_config',
        data: this.qs.stringify({
          title: this.warningsetoption.title,
          device_type_id: 3,
          device_ids: this.warningsetoption.device_ids.join(','),
          warning_type: this.warningsetoption.warning_type,
          conf: JSON.stringify(obj)
          // send_user: this.warningsetoption.send_user.join(',')
        })
      }).then((res) => {
        if (res.data.message == '') {
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 1500
          })
          this.goback()
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning',
            duration: 1500
          })
        }
      })
    },
    // 获取通讯录
    getuserlistdata() {
      this.loading = true
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=device.device_sms_alert.user_warning_liaisons_list',
        data: this.qs.stringify({
          page: '1',
          page_size: 999999999
        })
      }).then((res) => {
        this.loading = false
        if (res.data.message == '') {
          var data = res.data.data.data
          // //console.log(data)
          this.tabledata = res.data.data.data
          for (var i = 0; i < data.length; i++) {
            var obj = {
              value: data[i].d_id,
              label: data[i].liaisons + '/' + data[i].phone
            }
            this.userlist.push(obj)
          }
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning',
            duration: 1500
          })
        }
      })
    },
    // 添加用户
    adduser() {
      if (this.username == '') {
        this.$message({
          message: '请填写名称',
          type: 'warning',
          duration: 1500
        })
      } else if (this.useriphone == '') {
        this.$message({
          message: '请填写手机号',
          type: 'warning',
          duration: 1500
        })
      } else if (!/^1(1|2|3|4|5|6|7|8|9)\d{9}$/.test(this.useriphone)) {
        this.$message({
          message: '请填写正确手机号',
          type: 'warning',
          duration: 1500
        })
      } else {
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=device.device_sms_alert.create_user_warning_liaisons',
          data: this.qs.stringify({
            user_name: this.username,
            phone: this.useriphone
          })
        }).then((res) => {
          if (res.data.message == '') {
            this.$message({
              message: '添加成功',
              type: 'success',
              duration: 1500
            })
            this.getuserlistdata()
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning',
              duration: 1500
            })
          }
        })
      }
    },
    // 删除用户
    deluser(data) {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=device.device_sms_alert.del_user_warning_liaisons',
        data: this.qs.stringify({
          d_id: data.d_id
        })
      }).then((res) => {
        if (res.data.message == '') {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1500
          })
          this.getuserlistdata()
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning',
            duration: 1500
          })
        }
      })
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getbaselist()
    this.getuserlistdata()
    if (this.$route.query.id) {
      this.warnid = this.$route.query.id
      this.getwarnset()
    } else {
      this.warnid = ''
    }
  },
  beforeMount() {}, // 生命周期 - 挂载之前
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
0
</script>
<style lang="less" scoped>
.warningsetbox {
  width: 100%;
  margin-top: 20px;
  .warningset_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-button {
      height: 30px;
      width: 58px;
    }
    .el-input {
      width: 500px;
    }
  }
  .select_gather {
    width: 100%;
    display: flex;
  }
  .warningset_selbase {
    margin-top: 20px;
    /deep/.el-select {
      width: 645px;
      margin: 10px 0;
    }
    .selbase_seltype {
      width: 80%;
      // display: flex;
      // justify-content: space-between;
    }
  }
  .warningset_setinfo {
    margin-top: 20px;
    width: 100%;
    .setinfo_first {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      .setinfo_first_item {
        margin-top: 10px;
        width: 50%;
        .first_item_one {
          display: flex;
          p {
            font-size: 14px;
            line-height: 24px;
          }
          p:first-child {
            width: 24px;
            height: 24px;
            border-radius: 24px;
            background-color: rgba(20, 164, 120, 0.3);
            color: #14a478;
            text-align: center;
            line-height: 24px;
            margin-right: 10px;
          }
        }
        .first_item_tow {
          display: flex;
          margin: 10px 0;
          p {
            font-size: 14px;
            line-height: 20px;
            margin-right: 10px;
          }
        }
        .first_item_three {
          display: flex;
          margin: 10px 0;
          /deep/.el-input {
            width: 300px;
            margin-right: 10px;
          }
          p:last-child {
            color: #999999;
            font-size: 12px;
            line-height: 28px;
            span {
              font-weight: 700;
              color: #14a478;
            }
          }
          .first_item_three_left {
            .three_left_item {
              display: flex;
              margin-bottom: 10px;
              p {
                font-size: 20px;
                color: #14a478;
                margin-right: 10px;
              }
            }
            /deep/.el-input {
              width: 180px;
              margin-right: 10px;
            }
          }
        }
      }
      .setinfo_first_left {
        width: 43%;
        .setinfo_first_item {
          width: 100%;
          margin-top: 20px;
        }
      }
    }
  }
  .warningset_setuser {
    margin-bottom: 10px;
    margin-top: 20px;
    .warningset_setuser_top {
      width: 645px;
      display: flex;
      justify-content: space-between;
      .compile {
        font-size: 14px;
        color: #14a478;
      }
    }
    /deep/.el-select {
      width: 645px;
      margin: 10px 0;
    }
  }
  .selbase_title {
    font-size: 16px;
    //   font-weight: 700;
    color: #14a478;
  }
}
.userlistbox {
  width: 100%;
  .userlistbox_caozuo {
    /deep/.el-input {
      width: 180px;
      margin-right: 10px;
    }
  }
  .userlistbox_table {
    margin-top: 20px;
  }
}
</style>