挂载二级菜单蓝泰图片

src/layout/components/Navbar.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
-import {jumpPage} from '@/utils'
-import {useRoute, useRouter} from 'vue-router'
-import {formatd} from '@/utils/ruoyi'
-import {Setting} from "@/utils/tdInstruction";
-import {getWeather} from "@/api/weather";
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { jumpPage } from '@/utils'
+import { useRoute, useRouter } from 'vue-router'
+import { formatd } from '@/utils/ruoyi'
+import { Setting } from '@/utils/tdInstruction'
+import { getWeather } from '@/api/weather'
+import { ArrowDown } from '@element-plus/icons-vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -14,19 +15,54 @@ let navbarTitleImage = ref(new URL('@/assets/images/layout/header-title3.png', i
 let menuLeftImage = ref(new URL('@/assets/images/layout/menu-left.png', import.meta.url).href)
 let menuRightImage = ref(new URL('@/assets/images/layout/menu-right.png', import.meta.url).href)
 const navbarBackgroundStyle = computed(() => {
-  return {'background-image': `url(${navbarBackgroundImage})`}
+  return { 'background-image': `url(${navbarBackgroundImage})` }
 })
 const showMenu = computed(() => route.path !== '/index')
 const leftMenu = computed(() => {
   return [
-    {name: '总&nbsp;&nbsp;览', path: '/index', type: 'left', style: {}},
-    {name: '态势感知', path: '/situational/' + route.params.stcd, type: 'left', style: {}}
+    { name: '总&nbsp;&nbsp;览', path: '/index', type: 'left', style: {} },
+    { name: '态势感知', path: '/situational/' + route.params.stcd, type: 'left', style: {} }
   ]
 })
 const rightMenu = computed(() => {
   return [
-    {name: '智慧运维', path: '/intelloper/' + route.params.stcd, type: 'right', style: {}},
-    {name: '业务管理', path: '/index', type: 'right', style: {}}
+    { name: '智慧运维', type: 'right', style: {},secMenu:[
+      {
+      name:"智慧运维",path:'/intelloper/' + route.params.stcd
+      },{
+      name:"设备清单",path:'/sw/' + route.params.stcd+"/shebei"
+      },
+        {
+      name:"备品备件",path:'/sw/' + route.params.stcd+"/shebei"
+      },{
+      name:"维护任务",path:'/sw/' + route.params.stcd+"/shebei"
+      },
+        {
+      name:"运维记录",path:'/sw/' + route.params.stcd+"/jilu"
+      },{
+      name:"故障报警",path:'/sw/' + route.params.stcd+"/bj"
+      },{
+      name:"告警记录",path:'/sw/' + route.params.stcd+"/gj"
+      }] },
+    { name: '业务管理', path: '/index', type: 'right', style: {} ,secMenu:[{
+        name:"实时水位",path:'/sw/' + route.params.stcd+"/sw"
+      },{
+        name:"实时流量",path:'/sw/' + route.params.stcd+"/flow"
+      },{
+        name:"实时雨量",path:'/sw/' + route.params.stcd+"/flow"
+      },{
+        name:"实时水质",path:'/sw/' + route.params.stcd+"/flow"
+      },{
+        name:"多站水情对比分析",path:'/sw/' + route.params.stcd+"/dzll"
+      },{
+        name:"多站雨情对比分析",path:'/sw/' + route.params.stcd+"/dzll"
+      },{
+        name:"多站流量对比分析",path:'/sw/' + route.params.stcd+"/dzll"
+      },{
+        name:"多站水质对比分析",path:'/sw/' + route.params.stcd+"/dzll"
+      },{
+        name:"站点管理",path:""
+      }] }
   ]
 })
 
@@ -54,7 +90,7 @@ function getDateTime() {
   if (tm !== time.value.substring(0, 5)) {
     tm = time.value.substring(0, 5)
     // Setting.setTime(tm)
-    Setting.setTime("10:00")
+    Setting.setTime('10:00')
   }
 
 }
@@ -91,7 +127,7 @@ onUnmounted(() => {
 
 <template>
   <div :style="navbarBackgroundStyle" class="navbar">
-    <img :src="navbarTitleImage" alt="" @click="jumpPage('/')"/>
+    <img :src="navbarTitleImage" alt="" @click="jumpPage('/')" />
     <div v-if="showMenu" class="menu-list">
       <div class="left-menu-list">
         <div v-for="item in  leftMenu" :key="item.name"
@@ -102,8 +138,21 @@ onUnmounted(() => {
       <div class="right-menu-list">
         <div v-for="item in  rightMenu" :key="item.name"
              :style="{ 'background-image': `url(${item.type === 'left' ? menuLeftImage: menuRightImage})` }"
-             class="menu-item"
-             @click="jumpPage(item.path)" v-html="item.name"></div>
+             class="menu-item">
+          <el-dropdown>
+            <span class="el-dropdown-link">
+              {{ item.name }}
+               <el-icon class="el-icon--right">
+                 <arrow-down />
+               </el-icon>
+            </span>
+           <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="i in item.secMenu" @click="jumpPage(i.path)">{{i.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+           </template>
+          </el-dropdown>
+        </div>
       </div>
     </div>
     <div class="weather-and-time">
@@ -156,7 +205,13 @@ onUnmounted(() => {
     .right-menu-list {
       margin-left: 16%;
     }
-
+    .right-menu-list .el-dropdown-link {
+      color: #fff;
+      font-size: 1.2rem;
+    }
+    :deep(.el-tooltip__trigger:focus-visible) {
+      outline: unset;
+    }
     .menu-item {
       width: 15rem;
       height: 3rem;

src/layout/index.vue

@@ -80,6 +80,9 @@ onMounted(() => {
     <!--                                                                               style="width: 100%;height: 100%;"></div>-->
     <!--    <div v-show="appStore.floorType === 'sthouse'" class="floor-container"><img :src="sthouseSrc"-->
     <!--                                                                               style="width: 100%;height: 100%;"></div>-->
+    <div v-show="appStore.floorType === 'ss_sw'" class="floor-container">
+<!--      <img :src="swSrc" style="width: 100%;height: 100%;">-->
+    </div>
     <antv-map v-show="appStore.floorType === 'map'" class="floor-container"></antv-map>
     <ue-player v-show="appStore.floorType === 'ue'" class="floor-container"></ue-player>
 

src/router/index.ts

@@ -43,7 +43,7 @@ const router = createRouter({
           name: 'device',
           component: () => import('@/views/Device.vue'),
         }, {
-          path: 'sw/:stcd',
+          path: 'sw/:stcd/:type',
           name: 'sw',
           component: () => import('@/views/Sw.vue'),
         },

src/stores/app.ts

@@ -16,14 +16,14 @@ export const useAppStore = defineStore('app', () => {
 
   function changeFloorTypeByPath(path: string) {
     if (path === '/index') {
-      floorType.value = 'map'
-      // floorType.value = 'img'
+      floorType.value='map'
+      // floorType.value='img'
       // } else if (path.indexOf('/detail') > -1 || path.indexOf('/device') > -1) {
-      //   floorType.value = 'detail'
-      // } else if (path.indexOf('/sthouse') > -1) {
-      //   floorType.value = 'sthouse'
+      //   floorType.value='detail'
+    } else if (path.indexOf('/sw') > -1) {
+      floorType.value='ss_sw'
     } else {
-      floorType.value = 'ue'
+      floorType.value='ue'
     }
   }
 

src/views/Situational.vue

@@ -425,16 +425,16 @@ function jumpTo(value) {
   debugger
   switch (value) {
     case 'flow':
-      jumpPage(`/flow/${route.params.stcd}`)
+      jumpPage(`/sw/${route.params.stcd}/flow`)
       break
     case 'sw':
-      jumpPage(`/sw/${route.params.stcd}`)
+      jumpPage(`/sw/${route.params.stcd}/sw`)
       break
     case 'yl':
-      jumpPage(`/yl/${route.params.stcd}`)
+      jumpPage(`/sw/${route.params.stcd}/flow`)
       break
     case 'sz':
-      jumpPage(`/sz/${route.params.stcd}`)
+      jumpPage(`/sw/${route.params.stcd}/flow`)
       break
   }
 }

src/views/Sw.vue

@@ -1,8 +1,53 @@
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const imgSrc = ref(null)
+const route = useRoute()
+
+onMounted(() => {
+  debugger
+  var srcType = route.params.type
+  switch (srcType) {
+    case 'sw':
+      imgSrc.value = new URL('@/assets/images/lantai/ss_sw.jpg', import.meta.url).href
+      break
+    case 'flow':
+      imgSrc.value =new URL('@/assets/images/lantai/flow.jpg', import.meta.url).href
+      break
+    case 'bj':
+      imgSrc.value =new URL('@/assets/images/lantai/bj.png', import.meta.url).href
+      break
+    case 'gj':
+      imgSrc.value =new URL('@/assets/images/lantai/gj.png', import.meta.url).href
+      break
+    case 'jilu':
+      imgSrc.value =new URL('@/assets/images/lantai/jilu.png', import.meta.url).href
+      break
+    case 'shebei':
+      imgSrc.value =new URL('@/assets/images/lantai/shebei.png', import.meta.url).href
+      break
+    case 'weihu':
+      imgSrc.value =new URL('@/assets/images/lantai/weihu.png', import.meta.url).href
+      break
+    case 'dzll':
+      imgSrc.value =new URL('@/assets/images/lantai/dzll.png', import.meta.url).href
+      break
+  }
+})
 </script>
 
 <template>
+  <div class="right-frame">
+    <img :src="imgSrc"
+         style="width: 100%;height: 100%;">
+  </div>
 </template>
 <style lang="scss" scoped>
-
+.right-frame {
+  position: relative;
+  height: 100%;
+  padding: 0 0.7rem 0.7rem 0.7rem;
+  overflow: hidden;
+}
 </style>