zhgdyun/src/components/message.vue

<template>
  <div class="messageBox">
    <!-- <div @click="send" style="line-height: 60px;">发送消息</div> -->
    <el-popover v-if="showQrCode" placement="bottom" class="header-btn" width="200" trigger="click">
      <div id="qrCode" ref="qrCodeDiv"></div>
      <el-button class="btn" slot="reference">
        车辆录入二维码
        <i class="el-icon-arrow-down"></i>
      </el-button>
    </el-popover>
    <p
      class="header-btn"
      @click="goMsgCenter"
      @mouseover="showDialog = true"
      @mouseleave="showDialog = false"
    >
      <i class="el-icon-message-solid"></i> 消息
    </p>
    <i class="redDot" v-show="newsStatus"></i>
    <div
      class="messageList whiteBlock"
      v-show="showDialog && messageList.length > 0"
      @mouseover="showDialog = true"
      @mouseleave="showDialog = false"
    >
      <ul>
        <li v-for="item in messageList" :key="item.id">{{ item.title }}</li>
        <li class="last" @click="goMsgCenter">查看所有 >></li>
      </ul>
    </div>
    <!-- <span @click="sendmes">发送消息</span> -->
    <el-dialog
      :title="dialogTitle"
      :modal-append-to-body="false"
      :visible.sync="messsageCenterDialog"
      width="80%"
      class="dialog-wrap"
    >
      <div style="height: 738px">
        <messageCenter></messageCenter>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getNoticeListApi } from "@/assets/js/api/company/project";
import messageCenter from "./../views/messageV2.vue";
import mqtt from "mqtt";
import mqttX from "xhl-mqttx";
import QRCode from "qrcodejs2";
import axios from "axios";
const options = {
  connectTimeout: 40000,
  clientId:
    "mqttjs_" +
    Math.random()
      .toString(16)
      .substr(2, 8),
  username: "root",
  password: "123456",
  clean: true
};
var client = null;
let i = 0;
// var client = mqtt.connect("mqtt://139.159.226.224:1883", options);
export default {
  components: {
    messageCenter
  },
  data() {
    return {
      showQrCode: false,
      showUrl: "",
      messsageCenterDialog: false,
      dialogTitle: "消息中心",
      messageList: [],
      showDialog: false,
      userId: "",
      topicName: "topic",
      toDayDate: "",
      soundList: [],
      typeList: [
        {
          label: "高空火警",
          value: "8"
        },
        {
          label: "考勤提醒",
          value: "1"
        },
        {
          label: "防疫人员通知",
          value: "2"
        },
        {
          label: "防疫车辆通知",
          value: "3"
        },
        {
          label: "访客通知",
          value: "16"
        },
        {
          label: "混凝土监测",
          value: "4"
        },
        {
          label: "卸料平台",
          value: "5"
        },
        {
          label: "配电箱",
          value: "6"
        },
        {
          label: "扬尘",
          value: "7"
        },
        {
          label: "标养室",
          value: "9"
        },
        {
          label: "安全检查",
          value: "10"
        },
        {
          label: "质量检查",
          value: "11"
        },
        {
          label: "塔吊",
          value: "12"
        },
        {
          label: "升降机",
          value: "13"
        },
        {
          label: "电表",
          value: "14"
        },
        {
          label: "水表",
          value: "15"
        }
      ],
      // 消息状态
      newsStatus: false
    };
  },
  beforeDestroy() {
    // console.log(client)
    if (client) {
      client.unsubscribe(this.topicName + this.userId, options);
      client.end();
    }
    client = null;
    console.log(client);
    // client = null
    //  mqttX.unsubscribe(this.topicName + this.userId);
  },
  mounted() {
    this.selectNowDate();
    if (localStorage.getItem("soundList")) {
      this.soundList = JSON.parse(localStorage.getItem("soundList"));
    }
    if (process.env.NODE_ENV == "development") {
      this.userId = this.$store.state.userInfo.userId;
      this.topicName = this.$store.state.userInfo.scope;
      // // client = mqtt.connect("ws://182.90.224.147:8083/mqtt", options);
      client = mqtt.connect(mqttUrl, options);
      this.getData();
      this.mqttMSG();
    } else if (process.env.NODE_ENV == "debug") {
    } else if (process.env.NODE_ENV == "production") {
      this.userId = this.$store.state.userInfo.userId;
      this.topicName = this.$store.state.userInfo.scope;
      // client = mqtt.connect("ws://182.90.224.147:8083/mqtt", options);
      client = mqtt.connect(mqttUrl, options);
      this.getData();
      this.mqttMSG();
    }
  },
  watch: {
    $route: {
      handler(newVal) {
        if (newVal.path == "/project/quality/makeAnAppointment") {
          this.showQrCode = true;
          this.bindQRCode();
        } else {
          this.showQrCode = false;
        }
      }
    }
  },
  methods: {
    //生成车辆录入二维码
    bindQRCode: function() {
      document.getElementById("qrCode").innerHTML = "";
      let httpUrl = window.location.origin;
      let projectSn = this.$store.state.projectSn;
      let baseUrl = axios.defaults.baseURL;
      let newBaseUrl = baseUrl.slice(0, baseUrl.length - 1);
      setTimeout(() => {
        var qrcode = new QRCode(this.$refs.qrCodeDiv, {
          text:
            httpUrl +
            "/doc/h52/index.html?projectSn=" +
            projectSn +
            "&baseUrl=" +
            newBaseUrl,
          // text:"下午好",
          width: 200,
          height: 200,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
        });
      }, 0);
    },
    // sendmes(){
    //   console.log(1)
    //   this.$emit('sendMsg', {type: 8})
    // },
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
    selectNowDate() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(), //获取当前小时数(0-23)
        minutes = date.getMinutes(), //获取当前分钟数(0-59)
        seconds = date.getSeconds();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
      minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
      seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
      // var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
      var timer = year + "-" + month + "-" + day;
      this.toDayDate = timer;
      console.log(timer);
      // return timer;
    },
    // send(){
    //   this.$emit('sendMsg')
    // },
    goMsgCenter() {
      //   this.$router.push('/msgCenter')
      // let routeUrl = this.$router.resolve({
      //   path: "/msgCenter",
      // });

      // window.open(routeUrl.href, "_blank");
      this.messsageCenterDialog = true;
      this.getData();
    },
    mqttMSG() {
      //
      //     connectTimeout: 40000,
      // clientId:
      //   "mqttjs_" +
      //   Math.random()
      //     .toString(16)
      //     .substr(2, 8),
      // username: "mqttjs_" +
      //   Math.random()
      //     .toString(16)
      //     .substr(2, 8),
      // password: "123456",
      // clean: true
      console.log("mqtt");
      // let _this = this
      //     mqttX.init({
      //         id:"mqttjs_" +
      //         Math.random()
      //           .toString(16)
      //           .substr(2, 8),
      //         ip: '139.159.226.224',
      //         port: 8083,
      //         success:function(){
      //             console.log("mqttx连接成功",_this.topicName + _this.userId);
      //             ;
      //             mqttX.subscribe(_this.topicName + _this.userId,[0]);
      //         },
      //         error:function(){
      //           ;
      //             console.log("mqttx连接失败");
      //         },
      //         connectLost:function(){
      //             console.log("mqttx连接丢失");
      //         },
      //         onMessage:function(message){
      //             console.log("mqttx",message.payloadString);
      //             console.log(message);
      //             // console.log("收到来自", topic, "的消息", message.payloadString.toString());
      //             message = JSON.parse(message.payloadString);
      //             // if(message.content){
      //             //   if(message.content.indexOf("火点检测") > -1 || message.content.indexOf("温度报警") > -1){
      //             //     this.$emit('sendMsg')
      //             //   }
      //             // }
      //             _this.$emit('sendMsg', message)
      //             _this.$notify({
      //               title: message.title,
      //               message: message.content,
      //             });
      //         }
      //     });

      // mqtt连接   +"/#"  +workerId
      client.on("connect", e => {
        console.log('连接成功:', this.topicName + this.userId)
        client.subscribe(this.topicName + this.userId, { qos: 0 }, error => {
          if (!error) {
            // console.log('订阅成功')
          } else {
            console.log("订阅失败");
          }
        });
      });
      // 接收消息处理
      client.on("message", (topic, message) => {
        // console.log(message);
        console.log("收到来自", topic, "的消息", message.toString());
        message = JSON.parse(message);
        // if(message.content){
        //   if(message.content.indexOf("火点检测") > -1 || message.content.indexOf("温度报警") > -1){
        //     this.$emit('sendMsg')
        //   }
        // }
        this.getData()
        setTimeout(() => {
          this.$emit("sendMsg", message);
          this.$notify({
            title: message.title,
            message: message.content,
            position: "bottom-right"
          });
        }, 500);
      });
      // 断开发起重连
      // client.on("reconnect", (error) => {
      //   console.log("正在重连:", error);
      // });
      // 链接异常处理
      client.on("error", error => {
        console.log("连接失败:", error);
      });
    },
    getData() {
      getNoticeListApi({
        accountId: this.userId,
        startTime: this.toDayDate,
        endTime: this.toDayDate,
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        // console.log("res.result.records", res.result.records);
        this.messageList = res.result.records;

        // 判断是否有消息未读
        if (res.result.records.length > 0) {
          this.newsStatus = res.result.records.some(item => item.isRead !== 1);

          // console.log("==========================this.newsStatus=======================", this.newsStatus);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.header-btn {
  line-height: 60px;
  .btn {
    background-color: transparent;
    color: white;
    border: none;
  }
}
.dialog-wrap {
  /deep/.el-dialog {
    height: 90%;
    margin: 0 !important;
    // position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.messageBox {
  position: relative;
  display: flex;
}
.redDot {
  display: block;
  width: 6px;
  height: 6px;
  background-color: #f7b500;
  position: absolute;
  right: 30px;
  top: 15px;
  border-radius: 50%;
  box-shadow: 0px 0px 2px 3px rgba(247, 181, 0, 0.5);
}
.messageList {
  position: absolute;
  top: 60px;
  left: 0;
  width: 200px;
  // height: 200px;
  // border-radius: 3px;
  box-shadow: 0 4px 6px 0px #606e9a;
  z-index: 2;
  background-color: #343d5f;
  ul {
    margin: 8px 15px;
  }
  li {
    font-size: 12px;
    // padding: 3px 0px;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 24px;
    // &:last-child{
    //     border-bottom: none;
    // }
  }
  .last {
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: underline;
    text-align: center;
    &:hover {
      color: @--color-primary;
    }
  }
}
</style>