jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/WarningNotify.vue

<template>
  <div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "WarningNotify",
  props: {
   
  },
  provide() {
    return {
    }
  },
  data() {
    return {
      notifications: [],
      notifyIndex: 0,
    }
  },
  computed: {
    
  },
  watch: {
    
  },
  methods: {
    //点击事件回调
    closeNotify(para) {
      // let type = para.type;
      this.notifications[para.index].close();
    },
    showNotify(para){
      let _this = this;
      let eventType = ["trafficAccident", "vehicleBroken", "trafficControl", "trafficJam", "illegalVehicle", "barrierClear", "construction", "serviceAreaAbnormal", "equipmentTrouble", "abnormalWeather", "otherEvent"];
      let time = para.subEvent == "0" ? para.content.event.occurrenceTime : para.content.event.warningTime;
      let obj = {
        content: para.content.content,
        time,
        // moment().format("yyyy-MM-DD hh:mm"),
        type: para.subEvent == '1' ? "signal" : eventType[para.content.event.eventType*1-1],
        level: ["danger", "info"][para.subEvent*1],
        duration: para.subEvent == "0" ? 0 : 4000
      }
      this.speak(time + '' + para.content.content);
      _this.notifications[_this.notifyIndex] = _this.$notify({
        title: '',
        dangerouslyUseHTMLString: true,
        duration: obj.duration,
        customClass: 'notify_whole',
        offset: 50,
        showClose: false,
        message: _this.$createElement(
          "div",
          { class: "notify_box " + obj.level },
          [
            _this.$createElement(
              "div",
              { class: 'nofify_head' },
              [
                _this.$createElement(
                  "p",
                  { class: "title" },
                  [
                    _this.$createElement(
                      "i",
                      { class: 'icon el-icon-warning' }
                    ), _this.$createElement(
                      "span",
                      { class: 'text' },
                      "告警"
                    )
                  ]
                )
                , _this.$createElement(
                  "button",
                  {
                    class: 'btn_close el-icon-close',
                    on: {
                      click: _this.closeNotify.bind(_this, { type: obj.type, index: _this.notifyIndex }),
                    },
                  }
                )
              ]
            ),
            _this.$createElement(
              "div",
              { class: 'nofify_content' },
              [
                _this.$createElement(
                  "span",
                  { class: 'type_icon' },
                  [
                    _this.$createElement(
                      "i",
                      { class: 'iconfont icon-' + obj.type }
                    )
                  ]
                ),

                _this.$createElement(
                  "div",
                  { class: 'info' },
                  [
                    _this.$createElement(
                      "p",
                      { class: 'content' },
                      obj.content
                    )
                    ,
                    _this.$createElement(
                      "p",
                      { class: 'time' },
                      obj.time
                    )
                  ]
                ),

              ]
            ),

          ]
        ),
      });
      _this.notifyIndex++;
    },
    speak(text){
      // 创建SpeechSynthesisUtterance实例  
      const utterance = new SpeechSynthesisUtterance(text);

      // 设置语音的语言  
      utterance.lang = 'zh-CN'; // 中文简体  

      // 设置语音的音量（0到1之间）  
      utterance.volume = 10;

      // 设置语音的语速（1是正常语速）  
      utterance.rate = 1;

      // 设置语音的音调（可以是"default", "female", "male"）  
      utterance.pitch = 1;

      // 使用SpeechSynthesis接口播放语音  
      window.speechSynthesis.speak(utterance);  
    }
  },
  mounted() {
  },
};
</script>

<style lang="scss">
.notify_whole {
  padding: 0;
  width: 420px !important;
  // height: 120px !important;
  margin-top: 40px !important;
  background: none;
  border: none;
  border-radius: 0;
}

.el-notification__group {
  width: 100%;
  height: 100%;
  margin: 0;
}

.el-notification__content {
  width: 100%;
  height: 100%;
  margin: 0;
}

.notify_box {
  width: 100%;
  height: 100%;
  border: 1px solid;

  .nofify_head {
    display: flex;
    justify-content: space-between;
    height: 44px;
    align-items: center;
    margin: 0 12px;

    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .icon {
        font-size: 24px;
      }

      .text {
        font-size: 17px;
        margin-left: 4px;
        font-weight: bold;
      }
    }

    .btn_close {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 20px;
      text-align: center;
    }
  }

  .nofify_content {
    display: flex;
    align-items: center;
    padding: 20px 20px 16px 0;

    .type_icon {
      width: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 48px;
        &.icon-illegalVehicle{ font-size: 30px;}
      }
    }

    .info {
      flex: 1;

      .content {
        color: #FFF;
        font-size: 16px;
        word-wrap: break-word;
        white-space: wrap;
      }

      .time {
        color: #FFF;
        font-size: 14px;
        opacity: 0.5;
        text-align: right;
        margin-top: 8px;
      }
    }
  }
}

$infoColor: #3DE8FF;
$dangerColor: #FF5F5F;

.notify_box.info {
  background-image: linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%);
  border-image: linear-gradient(180deg, rgba(78, 174, 204, 1), rgba(78, 174, 204, 0)) 2 2;

  .nofify_head {
    border-bottom: 1px solid #FFFFFF33;

    .title {
      .icon {
        color: $infoColor;
      }

      .text {
        color: $infoColor;
      }
    }

    .btn_close {
      color: $infoColor;
    }
  }

  .nofify_content {
    .type_icon {
      .iconfont {
        color: $infoColor;
      }
    }

    .info {
      .content {}

      .time {}
    }
  }
}

.notify_box.danger {
  background-image: linear-gradient(180deg, rgba(30, 0, 0, 0.9) 0%, rgba(111, 0, 0, 0.9) 100%);
  border-image: linear-gradient(180deg, rgba(237, 147, 128, 1), rgba(239, 146, 157, 0)) 2 2;

  .nofify_head {
    border-bottom: 1px solid #FFFFFF33;

    .title {
      .icon {
        color: $dangerColor;
      }

      .text {
        color: $dangerColor;
      }
    }

    .btn_close {
      color: $dangerColor;
    }
  }

  .nofify_content {
    .type_icon {
      .iconfont {
        color: $dangerColor;
      }
    }

    .info {
      .content {}

      .time {}
    }
  }
}
</style>