SmartSubstationPlatform/riis-web/src/layout/components/Navbar.vue

<template>
  <div class="navbar" @mouseleave="mouseovernav">
    <div class="header-nav">
      <div class="nav-box">
        <div style="margin-right: 420px;"></div>
        <div title="首页" class="homeImgBox" @mousemove="mousemoveNav(navlist[0], 0)"
          :class="{ 'homeImgActive': activeIndex == 0 }" @click="navClick(navlist[0], 0)">首页</div>
        <div class="nav-list" v-for="(item, index) in navlist" v-show="index != 0"
          :class="{ 'nav-active': activeIndex == index }" @click.stop="navClick(item, index)">
          <div class="nav-imgtitle">{{ item.name }}</div>
          <div class="nav-sonbox" v-if="item.children != undefined && item.hide == true">
            <div class="nav-son-list" v-for="(items, indexs) in item.children"
              @click.stop="navSonClick(item, index, items)">{{ items.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="nav-right-box">
        <div class="nav-right-text" style="margin-right: 20px;">
          <div class="header-left-time" style="padding: 0;">用户名：{{ userStore.username }}</div>
          <!-- <div class="header-left-time" style="padding-top: 10px;">变电站：{{ userStore.regionName }}</div> -->
        </div>
        <img src="@/assets/navigation/qvan1.png" @click="toggle" v-if="!isFullscreen"
          style="margin-right: 10px;cursor: pointer">
        <img src="@/assets/navigation/qvan.png" @click="toggle" v-if="isFullscreen"
          style="margin-right: 10px;cursor: pointer">
        <img src="@/assets/navigation/top_tc.png" style="margin-right: 5px;cursor: pointer" @click="logout">
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { getOneById, downloadConfigFile } from "@/api/versionVersioning";
import Cookies from 'js-cookie';
import { gettableData } from '@/api/dept';
import { encrypt } from '@/utils/sm4';
import { updatePersonalInfo, updateEncryptPassword, updateAvatar } from '@/api/user';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import { useRoute, } from 'vue-router';
import router from '@/router';
import { useTagsViewStore } from '@/store/modules/tagsView';
import { getNotCheckAlarmCount } from '@/api/home';
import { constantRoutes } from '@/router';
import { useFullscreen } from '@vueuse/core';
import { downloadFile } from '@/utils/index';
const props = defineProps({
  CloseNav: {
    required: false,
    type: Number,
    default: 0
  },
});
const tagsViewStore = useTagsViewStore();
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const news = ref()
const dates = ref("")
const times = ref("")
const weeks = ref("")
const navlist: any = ref([])
const titleData: any = ref([])
const activeIndex = ref(0) // 一级导航索引
const activeSonIndex = ref(-1) // 二级导航索引
const activeTempInfo: any = ref({}) // 选中二级菜单焦点
const alarmCount = ref(0)
const {
  isFullscreen,
  toggle
} = useFullscreen();
navlist.value = [{
  name: '站端首页',
  opturl: '/dashboard',
  hide: false,
}]
window.addEventListener('keydown', function (e) {
  e = e || window.event
  if (e.keyCode === 122) {
    useFullscreen().toggle()
    e.preventDefault()
  }
})
const isElicon: any = ref(true)
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
function alarmInfoClick() {
  router.push(`/task/alarmInfo/index`)
  let item = {
    name: "告警核认",
    opturl: "/task/alarmInfo/index"
  }
  activeSonIndex.value = 2
  navSonClick(navlist.value[2], 2, item)
}
function navSonClick(row: any, index: any, item: any) {
  isElicon.value = true
  activeIndex.value = index
  row.hide = false
  if (item.opturl != undefined) {
    router.push(item.opturl)
  }

}
function mousemoveSonNav(row: any, index: any, item: any, indexs: any) {
  activeSonIndex.value = indexs
  isElicon.value = true
  activeIndex.value = index
}
const navOneInfo: any = ref({})
function navClick(row: any, index: any) {
  isElicon.value = true
  if (row.hide == true) {
    row.hide = false
    return
  }
  for (let i = 0; i < navlist.value.length; i++) {
    navlist.value[i].hide = false
  }
  if (row.children == undefined) {
    activeIndex.value = index
    router.push(row.opturl)
  } else {
    row.hide = true
  }
}

function mousemoveNav(row: any, index: any) { //鼠标移入
  activeSonIndex.value = -1
  activeIndex.value = index
  isElicon.value = true
  for (let i = 0; i < navlist.value.length; i++) {
    navlist.value[i].hide = false
  }
  if (row.children == undefined) {
    activeSonIndex.value = -1
  } else {
    row.children.forEach((element: any) => {
      if (element.name == activeTempInfo.value.name) {
        activeSonIndex.value = activeTempInfo.value.index
      }
    });
    row.hide = true
  }


}
function mouseovernav() {
  for (let i = 0; i < navlist.value.length; i++) {
    if (navlist.value[i].opturl == routers.path) {
      activeIndex.value = i
      return
    }
    if (navlist.value[i].children != undefined) {
      for (let j = 0; j < navlist.value[i].children.length; j++) {
        if (navlist.value[i].children[j].opturl == routers.path) {
          activeIndex.value = i
          activeSonIndex.value = j
          activeTempInfo.value = {
            name: navlist.value[i].children[j].name,
            index: j
          }
          return
        }
      }
    }
  }
}
const clearTime: any = ref(null)
function getTimes() {  // 获取当前日期
  let date = new Date()
  let year: any = date.getFullYear() //获取年
  let month: any = date.getMonth() + 1 //获取月
  let day: any = date.getDate() //获取日
  let hours: any = date.getHours() //获取时
  let minutes: any = date.getMinutes() //获取分
  let seconds: any = date.getSeconds() //获取秒
  month = month > 9 ? month : "0" + month
  day = day > 9 ? day : "0" + day
  hours = hours > 9 ? hours : "0" + hours
  minutes = minutes > 9 ? minutes : "0" + minutes
  seconds = seconds > 9 ? seconds : "0" + seconds //数据不大于9时在数据前方拼接一个“0”

  let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
  weeks.value = arr[date.getDay()]
  times.value = hours + ":" + minutes + ":" + seconds
  dates.value = year + " 年 " + month + " 月 " + day + " 日 "
  clearInterval(clearTime.value)
  clearTime.value = setInterval(() => {
    getHmsTimes()
  }, 1000)
}
function getHmsTimes() { // 获取当前时间
  let date = new Date()
  let hours: any = date.getHours() //获取时
  let minutes: any = date.getMinutes() //获取分
  let seconds: any = date.getSeconds() //获取秒
  hours = hours > 9 ? hours : "0" + hours
  minutes = minutes > 9 ? minutes : "0" + minutes
  seconds = seconds > 9 ? seconds : "0" + seconds //数据不大于9时在数据前方拼接一个“0”

  let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
  weeks.value = arr[date.getDay()]
  times.value = hours + ":" + minutes + ":" + seconds

}


const systemInfo: any = ref({
  version: ""
})
function getData() {
  getOneById().then((res: any) => {
    systemInfo.value = res
    // if (info.value.version) {
    //     versionNum.value = info.value.version
    //     versionnum.value.majorVersion = info.value.version.split('.')[0]
    //     versionnum.value.subNumber = info.value.version.split('.')[1]
    //     versionnum.value.stageNumber = info.value.version.split('.')[2]
    //     info.value.version.split('.')[3].split('_')
    //     versionnum.value.dateNumber =  info.value.version.split('.')[3].split('_')[0]
    //     versionnum.value.greekNumber =  info.value.version.split('.')[3].split('_')[1]
    // }

  })
}
const routers = useRoute();
onMounted(() => {
  getData()
  getTimes()
  titleData.value = []
  if (userStore.stationData.length > 1) {
    titleData.value = [{
      type: '1',
      stationName: userStore.regionName,
      stationCode: userStore.regionId,
      stationId: userStore.regionId
    }]
  }
  for (let j = 0; j < userStore.stationData.length; j++) {
    titleData.value.push(userStore.stationData[j])
  }

  if (userStore.stationId != undefined && userStore.stationId != "") {
    getNotCheckAlarmCount({
      stationId: userStore.stationId
    }).then((res: any) => {
      alarmCount.value = res.data.count
      userStore.alarmCount = res.data.count
    })
  }

  navlist.value = navlist.value.concat(userStore.menuArr)

  for (let i = 0; i < navlist.value.length; i++) {
    if (navlist.value[i].opturl == routers.path) {
      activeIndex.value = i
      return
    }
    if (navlist.value[i].children != undefined) {
      for (let j = 0; j < navlist.value[i].children.length; j++) {
        if (navlist.value[i].children[j].opturl == routers.path) {
          activeIndex.value = i
          activeSonIndex.value = j
          activeTempInfo.value = {
            name: navlist.value[i].children[j].name,
            index: j
          }
          return
        }
      }
    }
  }

})
function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logout().then(() => {
      tagsViewStore.delAllViews();
    }).then(() => {
      Cookies.set('stationIds', '');
      router.push(`/login`);
    });
  });
}
function leadingOut() {// 下载系统操作手册
  const params = {
    fileName: systemInfo.value.custom2
  }
  downloadConfigFile(params).then((response: any) => {
    downloadFile(response, '系统操作手册', 'pdf')
  }).catch(() => {
  });
}
watch(() => props.CloseNav, (newValue, oldValue) => {
  // debugger
  for (let i = 0; i < navlist.value.length; i++) {
    navlist.value[i].hide = false
  }
}, {
  deep: true
})
</script>


<style lang="scss" scoped>
.navbar {
  // padding:0 15px;
  padding-top: 9px;
  width: 100%;
  position: relative;
}

.header-box {
  position: relative;
  z-index: 1002;
  height: 90px;
  width: 100%;
  display: flex;
}

.texthover {
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}

.texthover:hover {
  color: #409eff;
  text-decoration: underline;
}

.header-img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 73px;
}

.header-left {
  position: relative;
  display: flex;
  align-items: center;
  width: 630px;
  height: 75px;
  padding-left: 20px;
}

.header-left-title {
  position: relative;
  font-size: 24px;
  // background-image: linear-gradient(#ffffff 20%, rgb(0, 249, 162));
  background: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /*需要文字透明*/
  font-family: "汉仪综艺体简";
  font-weight: bold;
}

.header-left-time {
  padding-top: 5px;
  font-family: "MicrosoftYaHei Regular", MicrosoftYaHei;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #ffffff;
  line-height: 9px;
  font-kerning: normal;
}

.header-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: url(@/assets/navigation/top_bj.png);
  background-size: 100% 100%;
  width: 100%;
  height: 62px;
  z-index:99999 !important;

  .times {
    font-family: '微软雅黑';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
  }

  .dates {
    font-family: '微软雅黑';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    padding-top: 4px;
    // font-family: '微软雅黑';
    // font-weight: 400;
    // font-style: normal;
    // font-size: 12px;
    // color: #FFFFFF;
  }

  .nav-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    // padding-left: 20px;

    .nav-list {
      display: flex;
      /* align-items: center; */
      position: relative;
      height: 31px;
      width: 98px;
      line-height: 40px;
      font-family: "Arial Normal", "Arial";
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #B5D7FF;
      text-align: center;
      margin-right: 18px;
      cursor: pointer;
      background: url(@/assets/navigation/top_cd.png);
      // background: url(@/assets/newimg/nav.png);
    }

    .nav-imgleft {
      width: 9px;
      height: 37px;
      background: url(@/assets/header/cd_zuo.png);
    }

    .nav-imgright {
      width: 26px;
      height: 37px;
      background: url(@/assets/header/cd_yuo.png);
    }

    .nav-sonbox {
      width: 120px;
      background-image: linear-gradient(#001f5a 1%, #001f5b 90%, transparent);
      border: 1px solid red;
      border-image: linear-gradient(to bottom, #0082df 20%, transparent) 1;
      border-bottom: 0;
      padding-top: 10px;
      padding-bottom: 20px;
      // margin-top: 12px;
      margin-left: -12px;
      position: absolute;
      top: 40px;
      z-index:9999;

      .nav-son-list {
        width: 100%;
        height: 32px;
        line-height: 32px;
        color: rgb(255, 255, 255);
        cursor: pointer;
      }

      .nav-son-list:hover {
        color: #00FFFF;
        background-color: rgba(255, 255, 255, 0.2);
      }
    }

    .nav-imgtitle {
      height: 31px;
      width: 98px;
      line-height: 31px;
      cursor: pointer;
    }

    .nav-active .nav-imgleft {
      background: url(@/assets/header/cd_zuo.png);
      background: url(@/assets/header/cd_zuo1.png);
    }

    .nav-active .nav-imgright {
      background: url(@/assets/header/cd_yuo.png);
      background: url(@/assets/header/cd_yuo1.png);

    }

    .nav-active .nav-imgtitle {
      // background: rgba(21, 69, 119, 0.8);\
      

    }

    .nav-list:hover {
      color: rgb(255, 255, 255);
    }

    .nav-active {
      // font-weight: bold;
      color: rgb(255, 255, 255);
      // background: url(@/assets/newimg/navactive.png) !important;
      // background-size: 100% 100%;
      background: url(@/assets/navigation/top_cd1.png);
    }
  }
}

.header2-nav {
  height: 60px;
  display: flex;
  align-items: center;

  .header2-navlist {
    display: flex;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0;
    margin-right: 16px;
    font-family: "Arial Normal", Arial;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    // border-width: 1px;
    // border-style: solid;
    // border-color: rgb(181, 215, 255);
    color: rgb(181, 215, 255);
    text-align: center;
    cursor: pointer;
  }

  .header2-imgleft {
    width: 4px;
    height: 30px;
    background: url(@/assets/header/cd_er_zuo.png);
  }

  .header2-imgright {
    width: 4px;
    height: 30px;
    background: url(@/assets/header/cd_er_you.png);
  }

  .header2-imgtitle {
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    background: rgba(152, 224, 255, 0.2);
    border-top: 1px solid rgba(181, 215, 255, 0.2);
    border-bottom: 1px solid rgb(181, 215, 255, 0.2);
  }

  .nav-active .header2-imgleft {
    background: url(@/assets/header/cd_er_zuo1.png);
  }

  .nav-active .header2-imgright {
    background: url(@/assets/header/cd_er_you1.png);
  }

  .nav-active .header2-imgtitle {
    background: rgba(21, 69, 119, 0.8);
  }

  .nav-active {
    background-color: rgb(21, 69, 119);
    color: #fff;
  }
}

.header-right {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 70px;
  padding-right: 25px;

  .header-information {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    width: 30px;
    height: 30px;
    background: url(@/assets/monitorsystem/top_gj.png);

    .header-informationImg {
      width: 18px;
      height: 18px;
      background: url(@/assets/monitorsystem/top_gj1.png);
    }

    .header-informationDian {
      position: absolute;
      top: 5px;
      left: 15px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: red;

    }
  }

  .header-information1 {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    width: 30px;
    height: 30px;
  }
}

:deep(.el-badge__content.is-fixed) {
  // top: -14px;
  background: red;
  border: 1px solid red;
}

.stationBox {
  position: absolute;
  top: 40px;
  background-color: #0a2420 !important;
  border: 1px solid rgb(12, 65, 52) !important;
  box-shadow: rgb(0 249 162 / 30%) 0px 0px 5px !important;
}

@media (max-width: 1795px) {
  .header-nav .dates {
    display: none;
  }
}

@media (max-width: 1643px) {
  .header-left {
    width: 400px;
  }
}

@media (max-width: 1419px) {
  .header-nav .nav-box {
    padding-left: 0px;
  }
}

@media (max-width: 1370px) {
  .header-nav .nav-box .nav-list {
    margin-right: 10px;
  }
}

.homeactive {
  background-color: rgba(0, 249, 162, 0.2) !important;
}

.versionsonbox {
  display: none;
  position: absolute;
  top: 10px;
  right: -80px;
}

.stationintroducebox {
  position: relative;
  top: 10px;
  width: 430px;
  height: 437px;
  background: url(@/assets/header/banben.png);
  padding: 45px 30px 0;

  .introduceboxtext1 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
    font-size: 24px;
    text-align: left;
    padding-bottom: 10px;
  }

  .introduceboxtext2 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    padding-bottom: 20px;
  }

  .introduceboxline {
    width: 4px;
    height: 10px;
    background: inherit;
    background-color: #409eff;
    border: none;
    border-radius: 0px;
    margin-right: 5px;
  }

  .introduceboxtext3 {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #409eff;
  }

  .introduceboxtext4 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
    margin-bottom: 10px;
  }

  .lineclamp {
    height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
}

.versionbox:hover .versionsonbox {
  display: block;
}

.el-overlay {
  position: fixed;
  z-index: 2023;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;

  .examinationboxline {
    width: 4px;
    height: 10px;
    background: inherit;
    background-color: #409eff;
    border: none;
    border-radius: 0px;
    margin-right: 5px;
  }

  .examinationboxtext {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #409eff;
  }

  .notification {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    // margin: auto;
    /* background: url(/src/assets/monitorsystem/xsri_yltu.png); */
    background-size: 100% 100%;

    .notification-title {
      text-align: center;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      height: 40px;
      line-height: 38px;
    }

    .notification-body {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
    }
  }

  .examination {
    width: 900px;
    height: 590px;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
    background: url(@/assets/monitorsystem/ejectbg/xsri_xz.png);
    background-size: 100% 100%;

    .examination-title {
      text-align: center;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      height: 40px;
      line-height: 38px;
    }

    .examination-body {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
    }
  }
}

.justifycenter {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;

  .justifycentername {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    text-align: right;
    width: 80px;

  }


}

.readonlybox {
  :deep(.el-input__wrapper) {
    background: rgb(12, 65, 50);
    box-shadow: 0 0 0 1px rgb(8 100 70) inset;
  }

  :deep(.is-focus.el-input__wrapper) {
    background: rgb(12, 65, 50);
    box-shadow: 0 0 0 1px rgb(8 100 70) inset !important;
  }
}

.input-box {

  :deep(.el-input__wrapper) {
    background: transparent;
    box-shadow: 0 0 0 1px rgba(8, 100, 70, 1) inset;
    border-radius: 1px;
  }

  :deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px rgba(8, 100, 70, 1) inset;
  }

  :deep(.el-input__wrapper .el-input__icon) {
    color: rgb(7, 168, 114);
  }
}

:deep(.el-form-item__label) {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #FFFFFF;
  text-align: right;
}

:deep(.el-input__inner) {
  color: #fff;
}

.homeImgBox {
  width: 98px;
  height: 31px;
  background: url(@/assets/navigation/top_cd.png);
  background-size: 100% 100%;
  margin-right: 20px;
  cursor: pointer;
  font-family: "Arial Normal", "Arial";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    text-align: center;
    line-height: 31px;
    color: #fff;
}

.homeImgActive {
  background: url(@/assets/navigation/top_cd1.png);
  background-size: 100% 100%;
}

.nav-right-box {
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
  color:#ffffff;
}

.iscursorinitial {
  cursor: initial !important;
}
</style>