mz-cloud/ruoyi-ui-gljt/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <!--<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
    <breadcrumb
      id="breadcrumb-container"
      class="breadcrumb-container"
      v-if="!topNav"
    />
    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
    <logo class="logo_style" />
    <div class="right-menu">
      <template v-if="device !== 'mobile'">
        <search id="header-search" class="right-menu-item" />

        <!--<el-tooltip content="源码地址" effect="dark" placement="bottom">-->
        <!--<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
        <!--</el-tooltip>-->

        <!--<el-tooltip content="文档地址" effect="dark" placement="bottom">-->
        <!--<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
        <!--</el-tooltip>-->

        <screenfull id="screenfull" class="right-menu-item hover-effect" />

        <!--<el-tooltip content="布局大小" effect="dark" placement="bottom">-->
        <!--<size-select id="size-select" class="right-menu-item hover-effect" />-->
        <!--</el-tooltip>-->
      </template>
      <el-dropdown
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar" />
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <!--<el-dropdown-item @click.native="setting = true">-->
          <!--<span>布局设置</span>-->
          <!--</el-dropdown-item>-->
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="deptName">
        {{
          user.userData.userType === "00"
            ? user.userData.dept.deptName
            : user.userData.nickName
        }}
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapState} from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import TopNav from "@/components/TopNav";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from "@/components/RuoYi/Doc";
import Logo from "../../layout/components/Sidebar/Logo";
import { decryptData_ECB, decryptRowData_ECB } from "@/api/tool/sm4";
import mqtt from 'mqtt'
import { getUuid } from '@/utils'
export default {
  components: {
    Breadcrumb,
    TopNav,
    Logo,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
    RuoYiDoc,
  },
  data(){
    return{
      client:'',
      options: {
        connectTimeout: 6000, // 超时时间
        clientId: '',
        // endpoint: "/mqtt",
        // host: "jdgl.ccsckj.com",
        // port: 443,
        username: "admin", // 用户名
        password: "sckj@2023", // 密码
        cleanSession: false,
        // clean: false,   // 保留会话（避免重复订阅）
        keepAlive: 60, // 心跳值，心跳值太大可能会连接不成功，这个参考文档
      },
      subscription: {
        topic: "/Radar60FL/#",
        qos: 0,
      },
    }
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    ...mapState(["user"]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
    },
    isCollapse() {
      return !this.sidebar.opened;
    },
  },
  mounted() {
    this.options.clientId="znyl_" + getUuid();
    // console.log(this.user);
    let levelData=0;
    let ancestors=this.user.userData.dept.ancestors;
    if(ancestors)
    {
      levelData=ancestors.split(',').length
    }
    console.log(levelData,'levelData');
    if(levelData===4)
    {
      this.createConnection();
    }

  },
  destroyed() {
    if (this.client.end)
    {
      console.log('中断连接')
      this.client.end();
    }
  },
  methods: {
    createConnection() {
      console.log("正在连接...");
      try {
        this.client = mqtt.connect(
          // "wss://121.36.73.159:8083/mqtt",
          "wss://jdgl.ccsckj.com/mqtt",
          // "ws://121.36.73.159:8083/mqtt",
          this.options
        );
      } catch (error) {
        console.log("mqtt连接失败: ", error);
      }
      this.client.on("connect", (e) => {
        console.log("连接成功");
        this.doSubscribe(); // 订阅主题
      });

      // 接收消息处理
      this.client.on('message', this.message_str)
      // this.client.on("message",(topic, message) => {
      //   //监听消息函数
      //   console.log("收到来自主题:" + topic + "的消息:" + message.toString());
      //   // var messageTextArea = document.getElementById("messageTextArea");					//获取textarea元素
      //   // messageTextArea.value += "收到来自主题:"+topic+"的消息:"+message.toString()+"\n"; 	//将新的文本追加到 value
      //   if (topic.includes("sys/property/post")) {
      //     let msgobj = JSON.parse(message.toString());
      //     this.$store.dispatch('mqtt/getMqttParams',msgobj)
      //   }
      // });
      // 连接错误处理
      this.client.on("error", (error) => {
        if (this.client) {
          this.client.end();
        }
        console.log("连接出错: ", error);
      });
      // 重新连接处理
      // this.client.on('reconnect', () => {
      //   console.log('重新连接...')
      // })
      // 断线重连
      this.client.on("reconnect", (error) => {
        console.log("正在重连：", new Date().getTime(), error);
        console.log(this.options.clientId,'this.options.clientId');
      });
      this.client.on("close", () => {
        console.log("监听断开连接");
      });
    },
    message_str(topic, message) {
      //监听消息函数
      console.log("收到来自主题:" + topic + "的消息:" + message.toString());
      // var messageTextArea = document.getElementById("messageTextArea");					//获取textarea元素
      // messageTextArea.value += "收到来自主题:"+topic+"的消息:"+message.toString()+"\n"; 	//将新的文本追加到 value
      if (topic.includes("sys/property/post")) {
        let msgobj = JSON.parse(message.toString());
        this.$store.dispatch('mqtt/getMqttParams',msgobj)
      }
    },
    // 订阅
    doSubscribe() {
      // console.log(this.currentCode,'区划编码');
      // console.log(this.user.jgId,'this.user');
      this.subscription.topic = "/Radar60FL/" + this.options.clientId + "/#";
      const { topic, qos } = this.subscription;
      let that=this;
      this.client.subscribe(topic, qos, (error) => {
        if (!error) {
          that.$store.dispatch('mqtt/getClientId',that.options.clientId)
          console.log("订阅成功");
        } else {
          console.log("订阅失败");
        }
      });
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            sessionStorage.clear()
            location.href = process.env.NODE_ENV === 'production' ? '/gljt/' : '/index';
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";
$logoWidth: 300px;
.navbar {
  height: $headerMenuHeight;
  overflow: hidden;
  position: relative;
  background: rgb(5, 122, 228);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  padding: 10px 0;
  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .topmenu-container {
    position: absolute;
    left: $logoWidth;
    background: rgb(5, 122, 228);
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    display: flex;
    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #ffffff;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}

.logo_style {
  float: left;
  width: $logoWidth;
}
.deptName {
  margin-right: 10px;
  color: #fff;
}
</style>