VehicleMonitor-WEB/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <div class="nav-header">
      <!-- <span class="nav-heander-name">重载铁路线路环境机车远程监视系统</span> -->
      <span class="nav-heander-name">{{ projectName }}</span>
      <img class="titleImg" src="@/assets/表头背景.png" />
      <img class="logo" src="@/assets/机车LOGO.png" />
      <div
        class="right-menu"
        style="display: flex; align-items: center; line-height: 1em"
      >
        <el-popover
          v-model="allMessageShow"
          placement="bottom-end"
          width="500"
          trigger="click"
          ref="popoveraite"
          popper-class="home-el-popover"
          style="cursor: pointer"
        >
          <!-- <img src="../../assets/tishi.png" alt=""> -->
          <div class="msgAlarmMessage">
            <!-- <div
              class="msgAlarmMessage-head"
              :class="{ 'no-home': isHome == false }"
            >
              <div>
                共{{ $store.state.app.warningSocket.list.length }}条消息
              </div>
              <div class="message" @click="toMessageAll">全部消息</div>
            </div> -->
            <div class="msgAlarmMessage-list">
              <div
                class="msgAlarmMessage-head"
                :class="{ 'no-home': isHome == false }"
              >
                <div>
                  共{{ $store.state.app.warningSocket.list.length }}条消息
                </div>
                <div class="message" @click="toMessageAll">更多消息</div>
              </div>
              <div
                v-for="item in $store.state.app.warningSocket.list"
                @click="linkClick(item)"
                class="msgAlarmMessage-item"
              >
                <div class="item-title">
                  <div class="item-text1">【报警】</div>
                  <div class="item-text2">{{ item.railwayName }}</div>
                  <!-- <div class="item-text3">{{ item.releasedTime }}</div> -->
                </div>
                <div class="item-content">
                  <span>{{ item.alarmTime }}</span>
                  <span style="display: inline-block; margin-left: 5px"
                    >,里程位置{{ item.alarmMile }},</span
                  >
                  <span>{{ item.lineDir == 1 ? "上行" : "下行" }},</span>
                  <span style="display: inline-block; margin-left: 5px">{{
                    item.alarmType == 1 ? "泥石流" : ""
                  }}</span>

                  <!-- {{ item.alarmType === 1 ? "泥石流" : "" }} -->
                  <!-- {{ item.lineDirStr }} 里程位置 里程范围
                  {{ item.beginMile }}-{{ item.endMile }} -->
                </div>
              </div>
            </div>
          </div>

          <el-badge
            slot="reference"
            :value="$store.state.app.warningSocket.list.length==0?'':$store.state.app.warningSocket.list.length"
            class="item"
          >
            <img
              :src="
                !isHome
                  ? require('../../assets/xiaoxi-1.png')
                  : require('../../assets/xiaoxi-1.png')
              "
              alt=""
            />
          </el-badge>
        </el-popover>

        <div
          style="
            width: 1px;
            height: 60%;
            background-color: none;
            margin-left: 0px;
            margin-right: 20px;
          "
        />
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            <img
              :src="
                !isHome
                  ? require('../../assets/btn_cards1.png')
                  : require('../../assets/btn_cards1.png')
              "
              class="user-avatar"
            />
            <div :style="{ color: isHome == true ? '#fff' : '#fff' }">
              {{ name }}
            </div>
            <i style="color: #fff" class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <!-- <router-link to="/">
            <el-dropdown-item>
              Home
            </el-dropdown-item>
          </router-link> -->
            <el-dropdown-item divided @click.native="logout">
              <span style="display: block">退出登陆</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span style="display: block" @click="personalCenter()"
                >个人中心</span
              >
            </el-dropdown-item>
            <el-dropdown-item>
              <span style="display: block" @click="updatePwd">修改密码</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <updatePwd
          v-if="updatePwdData.dialogVisible"
          :updatePwdData="updatePwdData"
          @updatePwdBtn="updatePwdBtn"
        >
        </updatePwd>
      </div>
    </div>
    <hamburger
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import Hamburger from "@/components/Hamburger";
import store from "@/store";
import { msgAlarmWebAlarm, readById } from "@/api/alarmList";
import updatePwd from "./updatePwd.vue";
import { updatepwd } from "@/api/sysManage";
import { projectName } from '@/api/user'
export default {
  components: {
    Breadcrumb,
    Hamburger,
    updatePwd,
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "name"]),
    isHome() {
      return this.$route.path == "/dashboard";
    },
  },
  created() {    
    projectName().then(res => {        
      this.projectName = res      
    })   
  },
  data() {
    return {
      updatePwdData: {
        dialogVisible: false,
      },
      allMessageShow: false,
      qrCodeData: {
        dialogVisible: true,
      },
      projectName:'',
    };
  },
  mounted() {
    msgAlarmWebAlarm().then((res) => {
      if(res.code==200){
        let data = res.data.webAlarm;
      if (data.length > 0) {
        data.forEach((element) => {
          this.$store.commit("app/warningSocketAdd", element);
        });
      }
      }else{
      }
      
    });
  },
  methods: {
    updatePwdBtn(payload) {
      updatepwd(payload).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.updatePwdData.dialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    linkClick(item) {
      readById({
        pushId: item.pushId,
      }).then((res) => {
        if (res.code == "200") {
          for (
            var i = 0;
            i < this.$store.state.app.warningSocket.list.length;
            i++
          ) {
            if (item.id === this.$store.state.app.warningSocket.list[i].id) {
              this.$store.state.app.warningSocket.list.splice(i, 1);
            }
          }
        }
      });
      this.$router.push({ path: "/alarmDetail?id=" + item.id });
    },
    updatePwd() {
      this.updatePwdData.dialogVisible = true;
    },
    showQrcode() {
      this.qrCodeData.dialogVisible = true;
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      // await this.$store.dispatch('user/logout')
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      store.dispatch("user/resetToken").then(() => {
        location.reload();
      });
    },
    homeClearScreenClick() {
      this.$store.commit("app/homeClearScreenClick");
    },
    // 去全部消息
    toMessageAll() {
      this.allMessageShow = false;
      this.$router.push("/message/list");
    },
    //跳转个人中心
    personalCenter() {
      this.$router.push("/personalCenter/list");
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-header {
  position: relative;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0px;
  left: 0;
  background-color: #2250c8;
  /* background: linear-gradient(187deg, #0b244f 0%, #05448c 100%); */
  color: #fff;
  line-height: 50px;
  padding-left: 15px;
  .nav-heander-name {
    position: absolute;
    z-index: 60;
    text-indent: 60px;
    font-size: 20px;
    letter-spacing: 4px;
    font-weight: 800;
  }
  .titleImg {
    display: block;
    position: absolute;
    left: -183px;
    top: -24px;
    z-index: 50;
  }
  .logo {
    position: absolute;
    z-index: 50;
  }
}

.nav-headers {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 15px;
  left: 0;
  background-color: #2250c8;
  /* background: linear-gradient(187deg, #0b244f 0%, #05448c 100%); */
  color: #fff;
  line-height: 50px;
  padding-left: 56px;
}

.el-badge__content {
  background-color: #ff0000;
}

.home-el-popover {
  background: transparent !important;
  border: none;
  padding: 0;
  box-shadow: none;
}
</style>
<style lang="scss" scoped>
.navbar {
  height: 0px;
  overflow: hidden;
  position: relative;
  // background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    display: none;
    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;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    .qrCode {
      cursor: pointer;
      margin-left: 10px;
      border-radius: 3px;
      font-size: 16px;
      background: -webkit-linear-gradient(top, #0251af, #00c7fb);
      line-height: 25px;
      height: 25px;
      width: 70px;
      text-align: center;
    }

    &:focus {
      outline: none;
    }

    .cls {
      width: 74px;
      height: 24px;
      // border: 1px solid #000000;
      border-image: linear-gradient(
          151deg,
          rgba(0, 105, 237, 0.6),
          rgba(0, 199, 251, 0.6)
        )
        3 3;
      border-radius: 3px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10px;
      background: -webkit-linear-gradient(top, #0251af, #00c7fb);
      cursor: pointer;
    }

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      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 {
        position: relative;
        display: flex;
        align-items: center;

        .user-avatar {
          cursor: pointer;
          width: 28.5px;
          height: 28.5px;
          border-radius: 50%;
          margin-right: 5px;
        }

        .el-icon-caret-bottom {
          margin-left: 5px;
          cursor: pointer;
          font-size: 12px;
          color: #0556db;
        }
      }
    }
  }
}

.msgAlarmMessage {
  box-shadow: none;
  margin-top: 5px;

  .message {
    cursor: pointer;
    color: #4d85f4;
  }

  // .message:hover {
  //   background: #4d85f4;
  // }

  // .message:active {
  //   background: #144ebf;
  // }

  .msgAlarmMessage-head {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-top: 5px;
    border-bottom: 1px solid #f2f2f2;
    color: #333333;
    font-size: 12px;
    // width: 100%;
    // color: #fff;

    &.no-home {
      color: #000;
    }
  }

  .msgAlarmMessage-list {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    max-height: 412px;
    overflow-y: auto;
    background-color: #fff;
    padding: 24px;
    margin-top: 5px;
    border-radius: 2px;
    // box-shadow: 0px 2px 4px 0px rgba(221, 217, 217, 1);

    .msgAlarmMessage-item {
      padding-bottom: 8px;
      margin-top: 5px;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      cursor: pointer;

      // border: 1px solid rgba(242,242,242,1);
      .item-title {
        display: flex;
        align-items: center;

        .item-text1 {
          flex-shrink: 0;
          color: red;
          // margin-right: 10px;
        }

        .item-text2 {
          flex: 1;
          color: #000000;
          font-size: 14px;
        }

        .item-text3 {
          flex-shrink: 0;
        }
      }

      .item-content {
        // padding: 5px 20px;
        // width: 520px;
        height: 33px;
        line-height: 33px;
        padding-left: 12px;
        background: #f5f5f5;
        margin-top: 5px;
        border-radius: 5px;
        color: #565656;
        font-size: 12px;
      }
    }
  }
}
</style>