centralized-control-center-frontend_v1/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <!-- <div class="left-title">重卡换电智能站控系统</div>
    <div class="stationNo">No.{{ stationNo || '—' }}</div> -->
    <img src="./assets/logo_title.png" class="logo">
    <div class="left-menu">
      <div v-for="(item, index) in PermissionList" :key="index">
        <router-link :to="item.path">
          <span>{{ item.children[0].meta.title }}</span>
        </router-link>
      </div>
    </div>

    <div class="date-time">
      <div class="warn" @mouseover="getWarnList" @mouseout="LostWarn" @click="goToAlarm">
        <div class="is-warn">
          <el-badge :value="warnNum" class="item">
            <img src="./assets/warn.png">
          </el-badge>
        </div>
        <div>当前告警</div>
      </div>
      <div class="link">
        <div class="is-warn">
          <img :src='isLink ? require("./assets/link.png") : require("./assets/close.png")'>
        </div>
        <div>{{ isLink ? '已连接' : '断开' }}</div>
      </div>
      <div class="safedays">安全运营 {{ days }} 天</div>
      <div class="time-value">
        {{ dateTime.hours }}:{{ dateTime.minutes }}:{{ dateTime.seconds }}
      </div>
      <div class="date-value">
        <div class="week-value">{{ dateTime.weeks }}</div>
        <div class="day-value">
          {{ dateTime.year }}-{{ dateTime.month }}-{{ dateTime.day }}
        </div>
      </div>
    </div>
    <!-- <div class="dobusiness">
      <el-dropdown trigger="click" @command="HandleBusiness(isBusiness)">
        <span class="el-dropdown-link">
          {{isBusiness?'营业中':'未营业'}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>{{isBusiness?'未营业':'营业中'}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div> -->
    <!-- <div class="cutApart"></div> -->
    <div class="right-menu">
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <span class="el-dropdown">{{ name }}<i class="el-icon-arrow-down el-icon--right"></i></span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/permission/role" v-if="$store.getters.roles.includes('admin')">
            <el-dropdown-item>账号管理</el-dropdown-item>
          </router-link>
          <router-link to="/permission/updatepwd">
            <el-dropdown-item>修改密码</el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span style="display: block">安全退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="setFile"><router-link to="/control-config/setFile"><img src="./assets/set.png" width="26"
          height="26"></router-link></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getStateList, setBusiness, cloudState, getStationCode } from "@/api/statistics";
export default {
  components: {},
  props: ['warnNum'],
  data() {
    return {
      PermissionList: [],
      dateTime: {
        year: "",
        month: "",
        day: "",
        weeks: "",
        hours: "",
        minutes: "",
        seconds: "",
      },
      days: 0,
      isLink: undefined,
      isBusiness: true,
      stationNo: null,
    };
  },
  computed: {
    ...mapGetters(["name", "permission_routes"]),
  },
  mounted() {
    setInterval(() => {
      this.timer()
    }, 1000);
    setInterval(() => {
      this.getCloudState()
    }, 2000);
    this.menuList()
    this.getSafeDay()
    this.getStationCode()
  },
  methods: {
    goToAlarm() {
      // this.$router.push({path:"/permission/now-alarm"})
    },
    //获取换电站编号
    getStationCode() {
      getStationCode().then(res => {
        this.stationNo = res.data
      })
    },
    //修改营业状态
    HandleBusiness(flag) {
      this.$confirm('确认修改营业状态?', '确认操作', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await setBusiness(flag)
          this.$message({
            type: 'success',
            message: '操作成功！'
          })
          // this.getUserlist()
          console.log(data);
          this.isBusiness = this.isBusiness ? 0 : 1
        })
        .catch(err => { console.error(err) })
    },
    getCloudState() {
      cloudState().then(res => {
        this.isLink = res.data
      })
    },
    //安全运行天数
    getSafeDay() {
      getStateList(1).then(res => {
        this.days = res.data.content
      })
      // getStateList(2).then(res => {
      //   this.isBusiness=res.data.content==1?1:0
      // })
    },
    getWarnList() {
      this.$emit('ShowWarn');
    },
    LostWarn() {
      this.$emit('CloseWarn');
    },
    //菜单路由
    menuList() {

      // this.PermissionList = this.permission_routes.slice(5, 11);
      this.PermissionList = this.permission_routes.slice(5, 11);
      console.log(this.PermissionList, '999999');
    },
    //当前时间
    timer() {
      let vWeek = [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let date = new Date();
      this.dateTime.year = date.getFullYear();
      this.dateTime.month = this.lenFormat(date.getMonth() + 1);
      this.dateTime.day = this.lenFormat(date.getDate());
      this.dateTime.hours = this.lenFormat(date.getHours());
      this.dateTime.minutes = this.lenFormat(date.getMinutes());
      this.dateTime.seconds = this.lenFormat(date.getSeconds());
      this.dateTime.weeks = vWeek[date.getDay()];
      // console.log(date.getMonth() + 1)
    },
    lenFormat(i) {
      let s = "" + i;
      return s.length === 1 ? "0" + s : s;
    },
    //退出登录
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-submenu__icon-arrow {
  right: -18px;
  top: 30%;
  font-size: 16px;
  font-weight: bold;
  transform: rotate(180deg);
}
.navbar {
  height: 54px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  color: white;
  padding-top: 10px;
  // margin-top: 20px;
  justify-content: space-between;
  // border-bottom: 1px solid #2f343e;
  background-color: #1E1F25;
  width: calc(100% - 40px);
  margin-left: 20px;
  padding-left: 15px;
  .logo{
    width: 447px;
    height: 34px;
    margin-right: 80px;
  }
  .stationNo {
    padding: 0px 15px;
    height: 32px;
    background: #1C263A;
    border: 1px solid #26334C;
    font-size: 16px;
    font-weight: 500;
    color: rgba(153, 174, 197, 0.65);
    text-shadow: 0px 0px 4px rgba(39, 69, 201, 0.5);
    line-height: 32px;
    text-align: center;
    margin-right: 32px;
  }

  .left-title {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
    line-height: 30px;
    padding-left: 20px;
    margin-right: 10px;
  }

  .left-menu {
    flex: 1;
    height: 100%;
    line-height: 36px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    color: #757B8C;

    .iconacive {
      display: none;
    }

    div {
      margin-right: 35px;
      height: 39px;
    }

    @media screen and (max-width: 1024px) {
      div {
        margin-right: 22px;
      }

      .date-time .warn {
        font-size: 12px;
      }

      .safedays {
        font-size: 12px;
      }
    }

    .routerlink {
      position: relative;
    }

    .router-link-active {
      color: #fff;
      position: relative;
      // text-shadow: 0px 0px 8px rgba(34, 123, 255, 0.8);

      .iconacive {
        display: inline;
      }

      svg:first-child {
        display: none;
      }

      .el-submenu__icon-arrow {
        right: -20px !important;
        position: absolute;
        transform: rotate(360deg);
        color: #91fdb9;
      }

      .el-icon-arrow-down:before {
        content: "";
      }
    }

    span {
      font-size: 20px;
      font-weight: 600;
      padding-left: 6px;
    }

    .router-link-active::after {
      content: "";
      display: inline-block;
      width: 100%;
      height: 2px;
      background: #246CF9;
      position: absolute;
      bottom: -16px;
      left: 3px;
      z-index: 0;
    }
  }

  .safedays {
    font-size: 18px;
    font-weight: 600;
    line-height: 40px;
    text-align: right;
    padding-right: 15px;
  }

  .date-time {
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;

    .warn {
      width: 92px;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      align-items: center;
      justify-items: center;
      padding-right: 24px;
      box-sizing: content-box;
      line-height: 24px;
      cursor: pointer;
      height: 39px;

      img {
        width: 20px;
        height: 20px;
      }
    }

    .link {
      width: 86px;
      display: flex;
      align-items: center;
      justify-items: center;
      font-size: 16px;
      line-height: 24px;
      height: 39px;
      margin-top: 3px;
      justify-content: flex-start;

      img {
        margin-right: 3px;
        vertical-align: middle;
        width: 20px;
        height: 20px;
      }
    }

    .date-value {
      width: 80px;
      white-space: nowrap;
    }

    .day-value {
      font-size: 14px;
      line-height: 22px;
      font-family: "微软雅黑";
    }

    @media screen and (max-width: 1152px) {
      .date-value {
        width: 112px;
      }

      .warn {
        width: 110px;
      }

      .time-value {
        width: 98px !important;
      }
    }

    @media screen and (max-width: 1440px) {
      .date-value {
        padding-bottom: 8px;
      }
    }

    // @media screen and (min-width: 1281px) and (max-width: 1366px) {
    //   .date-value{
    //     width: 96px;
    //   }
    // }
    // @media screen and (min-width: 1400px) and (max-width: 1600px) {
    //   .date-value{
    //     width: 92px;
    //   }
    // }
    .time-value {
      font-size: 18px;
      width: 82px;
      text-align: left;
      box-sizing: border-box;
      font-weight: bold;
    }

    .week-value {
      font-size: 14px;
    }
  }

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

    .el-dropdown {
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
      text-shadow: 0px 0px 11px rgba(34, 123, 255, 0.8);

      .el-icon-arrow-down:before {
        bottom: -4px;
      }
    }

    &: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);
        }
      }
    }
  }

  .dobusiness {
    margin: 0 5px;

    .el-dropdown {
      font-size: 18px;
      text-shadow: 0px 0px 11px rgba(34, 123, 255, 0.8);
      font-weight: 400;
      color: #9D9FA4;
      line-height: 38px;
      cursor: pointer;
    }
  }

  .setFile {
    padding-right: 20px;
    padding-top: 4px;
    width: 26px;
    height: 26px;
    box-sizing: content-box;

    img {
      width: 26px;
      height: 26px;
    }
  }

  .cutApart {
    width: 1px;
    height: 32px;
    background: #54616D;
    opacity: 1;
    margin: 0 5px;
  }
}</style>