导航条台账，配置，系统管理放到右侧设置图标内

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

@@ -5,8 +5,10 @@
         <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)">
+        <span v-for="(item, index) in navlist">
+          <!--  -->
+          <div class="nav-list" v-show="index != 0" :class="{ 'nav-active': activeIndex == index }"
+            @click.stop="navClick(item, index)" v-if="item.name != '台账管理' && item.name != '配置管理' && item.name != '系统管理'" >
             <div class="nav-imgtitle">{{ item.name }}</div>
             <div class="nav-sonbox" v-if="item.children != undefined && item.hide == true">
               <div v-for="(items, indexs) in item.children">
@@ -14,20 +16,17 @@
                   {{ items.name }}
                 </div>
               </div>
+            </div>
 
           </div>
-        </div>
+        </span>
+
       </div>
       <div class="nav-right-box">
-        <div class="header-information" @click="alarmInfoClick">
-          <el-badge :value="alarmCount" :max="99" class="item" v-if="alarmCount != 0">
-            <div class="header-informationImg"></div>
-          </el-badge>
-          <div class="header-informationImg" v-else></div>
-        </div>
+
         <div>
-          <el-select v-if="userStore.stationData.length > 1" v-model="userStore.stationId" placeholder="Select" style="width: 160px;margin-right: 15px;"
-            @change="changestation()">
+          <el-select v-if="userStore.stationData.length > 1" v-model="userStore.stationId" placeholder="Select"
+            style="width: 160px;margin-right: 15px;" @change="changestation()">
             <el-option v-for="item in userStore.stationData" :key="item.stationId" :label="item.stationName"
               :value="item.stationId" />
           </el-select>
@@ -39,6 +38,32 @@
           <div class="header-left-time" style="padding: 0;">用户名：{{ userStore.username }}</div>
           <!-- <div class="header-left-time" style="padding-top: 10px;">变电站：{{ userStore.regionName }}</div> -->
         </div>
+        <div class="header-information" @click="alarmInfoClick">
+          <el-badge :value="alarmCount" :max="99" class="item" v-if="alarmCount != 0">
+            <div class="header-informationImg"></div>
+          </el-badge>
+          <div class="header-informationImg" v-else></div>
+        </div>
+        <div class="setting_menu">
+          <img src="@/assets/navigation/u138.svg" style="margin-right: 10px;cursor: pointer" @click.stop="changepei()" />
+          <div class="nav-sonbox" v-if="ispeizhi">
+            <div v-for="(item, index) in navlist">
+              <div class="nav-son-list" v-if="item.name == '台账管理' || item.name == '配置管理' || item.name == '系统管理'"
+                @click.stop="">
+                <span @click.stop="navClick(item, index)" style="display: flex;align-items: center;justify-content: space-between;">
+                  <div  class="oldmenu">{{ item.name }}</div>
+                  <div style="padding:5px ;">
+                    <img v-if="!item.hide" src="@/assets/point/xia.png" alt="">
+                    <img v-else src="@/assets/point/shang.png" alt="">
+                  </div>
+                </span>
+                <div v-if="item.children != undefined && item.hide == true"  v-for="(items, indexs) in item.children">
+                  <div class="smallmenu"  @click.stop="navSonClick(item, index, items)" >{{ items.name }}</div>
+                </div>
+              </div>
+            </div>
+          </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"
@@ -101,7 +126,11 @@ window.addEventListener('keydown', function (e) {
     e.preventDefault()
   }
 })
+const ispeizhi = ref(false)
 const isElicon: any = ref(true)
+function changepei(){
+  ispeizhi.value = !ispeizhi.value
+}
 function dateFormat(row: any) {
   const daterc = row;
   if (daterc != null) {
@@ -118,7 +147,7 @@ function dateFormat(row: any) {
   }
 }
 function changestation() {
-  userStore.stationCode = userStore.stationData.find((item:any) => item.stationId === userStore.stationId)?.stationCode;
+  userStore.stationCode = userStore.stationData.find((item: any) => item.stationId === userStore.stationId)?.stationCode;
   reload()
 }
 function alarmInfoClick() {
@@ -137,6 +166,7 @@ function navSonClick(row: any, index: any, item: any) {
   if (item.opturl != undefined) {
     router.push(item.opturl)
   }
+  ispeizhi.value = false
 
 }
 function mousemoveSonNav(row: any, index: any, item: any, indexs: any) {
@@ -361,6 +391,8 @@ watch(() => props.CloseNav, (newValue, oldValue) => {
   for (let i = 0; i < navlist.value.length; i++) {
     navlist.value[i].hide = false
   }
+  ispeizhi.value = false
+
 }, {
   deep: true
 })
@@ -368,6 +400,59 @@ watch(() => props.CloseNav, (newValue, oldValue) => {
 
 
 <style lang="scss" scoped>
+.setting_menu {
+
+  .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-bottom: 20px;
+    margin-top: 12px;
+    margin-left: -60px;
+    position: absolute;
+    // top: 40px;
+    z-index: 9999;
+    font-family: "Arial Normal", "Arial";
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+
+    .nav-son-list {
+      width: 100%;
+      // height: 32px;
+      // line-height: 32px;
+      color: rgb(255, 255, 255);
+      cursor: pointer;
+      // padding: 0px 10px;
+      .oldmenu{
+        padding: 5px 5px;
+      }
+      .oldmenu:hover{
+        color: #00FFFF;
+      }
+      .smallmenu{
+        width: 100%;
+        text-align: center;
+        padding: 5px 0px;
+        color: #fff;
+      }
+      .smallmenu:hover{
+        color: #00FFFF !important;
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    // .nav-son-list:hover {
+    //   color: #00FFFF;
+    //   // background-color: rgba(255, 255, 255, 0.2);
+    // }
+  }
+
+}
+
 .navbar {
   // padding:0 15px;
   padding-top: 9px;
@@ -649,7 +734,7 @@ watch(() => props.CloseNav, (newValue, oldValue) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 25px;
+    // margin-right: 25px;
     width: 30px;
     height: 30px;
     background: url(@/assets/monitorsystem/top_gj.png);
@@ -991,7 +1076,7 @@ watch(() => props.CloseNav, (newValue, oldValue) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 25px;
+    margin-right: 5px;
     width: 30px;
     height: 30px;
     // background: url(@/assets/monitorsystem/top_gj.png);