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="messageList.length"></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: 900px">
        <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'
        }
      ]
    }
  },
  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("tcp://182.90.224.147:1883", 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("tcp://182.90.224.147:1883", 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
    },
    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.$emit('sendMsg', message)
        this.$notify({
          title: message.title,
          message: message.content,
          position: 'bottom-right'
        })
      })
      // 断开发起重连
      // 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 => {
        this.messageList = res.result.records
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header-btn {
  line-height: 60px;
  .btn {
    background-color: transparent;
    color: white;
    border: none;
  }
}
.dialog-wrap {
  /deep/.el-dialog {
    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>