新首页页面顶部导航栏

src/views/vent/home/configurable/components/content.vue

@@ -33,8 +33,8 @@
           </div>
           <div
             v-else-if="config.basis == '100%'"
-            style="padding-top: 43%"
-            class="content__module flex flex-justify-around flex-items-center flex-wrap"
+            style="padding-top: 11%"
+            class="content__module content__module1 flex flex-justify-around flex-items-center flex-wrap"
           >
             <MiniBoard
               v-for="item in config.items"
@@ -406,6 +406,13 @@ const layoutConfig = computed(() => {
   width: 100%;
   height: 100%;
 }
+.content__module1 {
+  background: url('@/assets/images/vent/homeNew/databg/4.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 129px;
+  margin-top: 24%;
+}
 // .content__module:first-of-type {
 //   margin-top: 0;
 // }

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -43,10 +43,10 @@
     </template>
     <template v-if="layout === 'new2-top'">
       <slot name="value">
-        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
       </slot>
       <slot name="label">
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
       </slot>
     </template>
     <template v-if="layout === 'new3-top'">
@@ -171,10 +171,12 @@ defineEmits(['click']);
   background-size: 100% 100%;
 }
 .mini-board_New2 {
-  width: 100px;
+  width: 93px;
   height: 60px;
+  margin: 0px;
   background-image: var(--image-areaNew2);
   background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
 .mini-board_New3 {
   margin-bottom: 0;

src/views/vent/home/configurable/components/originalNew/NewNav.vue

@@ -0,0 +1,258 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="New-nav">
+    <div class="main-title">{{ Title }}</div>
+    <!-- menu区域 -->
+    <div class="nav-menu">
+      <div class="nav-menu-left">
+        <div v-for="(item, index) in leftMenus" :key="index">
+          <div :class="activeIndexL == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuLeftClick(index)">
+            <div style="color: #ddd">{{ item.name }}</div>
+
+            <div v-if="activeIndexL == index && isShowMenuItemL" class="nav-menu-item">
+              <div class="nav-menu-content">
+                <div class="nav-menu-List">
+                  <div
+                    :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
+                    v-for="(ite, ind) in item.MenuItemList"
+                    :key="ind"
+                    @click.stop="menuItemLeftClick(ind)"
+                    >{{ ite.name }}</div
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="nav-menu-right">
+        <div v-for="(item, index) in rightMenus" :key="index">
+          <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuRightClick(index)">
+            <div style="color: #ddd">{{ item.name }}</div>
+            <div v-if="activeIndex == index && isShowMenuItemR" class="nav-menu-item">
+              <div class="nav-menu-content">
+                <div class="nav-menu-List">
+                  <div
+                    :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
+                    v-for="(ite, ind) in item.MenuItemList"
+                    :key="ind"
+                    @click.stop="menuItemRightClick(ind)"
+                    >{{ ite.name }}</div
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+
+let props = defineProps({
+  Title: {
+    type: String,
+    default: '',
+  },
+});
+
+let menuList = ref<any[]>([
+  {
+    name: '灾害预警',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+  {
+    name: '智能通风',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+  {
+    name: '火灾监控',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+  {
+    name: '粉尘监控',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+  {
+    name: '瓦斯监控',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+  {
+    index: 5,
+    name: '综合管控',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+  {
+    name: '综合业务管理',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+]); //一级菜单列表
+let activeIndex = ref(0); //当前激活menu索引
+let activeIndexL = ref(0); //当前激活menu索引
+let activeIndexR = ref(null); //当前激活menu索引
+
+let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
+let isShowMenuItemL = ref(false); //是否显示menuItem下拉选项菜单
+let isShowMenuItemR = ref(false); //是否显示menuItem下拉选项菜单
+let menuItemActive = ref(0); //menuItem当前激活选项
+const leftMenus = computed(() => menuList.value.slice(0, 4));
+const rightMenus = computed(() => menuList.value.slice(4));
+//menu选项切换
+function menuLeftClick(index) {
+  activeIndexL.value = index;
+  isShowMenuItemL.value = !isShowMenuItemL.value;
+}
+//menuItem选项切换
+function menuItemLeftClick(index) {
+  menuItemActive.value = index;
+  isShowMenuItemL.value = false;
+}
+function menuRightClick(index) {
+  activeIndexR.value = index;
+  isShowMenuItemR.value = !isShowMenuItemR.value;
+}
+function menuItemRightClick(index) {
+  menuItemActive.value = index;
+  isShowMenuItemL.value = false;
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
+
+.New-nav {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .main-title {
+    width: 518px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    font-family: 'douyuFont';
+    font-size: 25px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    padding: 0;
+  }
+
+  .nav-menu {
+    position: absolute;
+    top: 0;
+    left: 675px;
+    height: 100%;
+    display: flex;
+    position: static; // 移除绝对定位
+    display: flex;
+    width: auto;
+    .nav-menu-left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      float: left;
+    }
+    .nav-menu-right {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      float: left;
+      margin-left: 40%;
+    }
+    .nav-menu-active {
+      position: relative;
+      cursor: pointer;
+      width: 120px;
+      height: 60px;
+      margin-top: 20px;
+      line-height: 45px;
+      text-align: center;
+      font-size: 16px;
+      letter-spacing: 2px;
+      background: url('@/assets/images/vent/homeNew/select-btn.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .nav-menu-unactive {
+      position: relative;
+      width: 120px;
+      height: 60px;
+      line-height: 65px;
+      text-align: center;
+      margin: 0px 10px;
+      font-size: 16px;
+      letter-spacing: 2px;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+
+    .nav-menu-item {
+      position: absolute;
+      top: 23px;
+      width: 130px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      box-sizing: border-box;
+
+      .nav-menu-content {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        margin-top: 25%;
+        .nav-menu-List {
+          background: url('@/assets/images/vent/homeNew/menuList.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        .menu-item-active {
+          color: #ddd;
+          z-index: 999;
+          width: 100%;
+          height: 36px;
+          line-height: 36px;
+          font-size: 14px;
+          background: url('@/assets/images/vent/homeNew/selectActive.png') no-repeat;
+          background-size: 100% 100%;
+        }
+
+        .menu-item-unactive {
+          color: #ddd;
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;
+        }
+      }
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    /* 定义淡出动画 */
+    @keyframes fadeOut {
+      from {
+        opacity: 1;
+      }
+
+      to {
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>

src/views/vent/home/configurable/components/originalNew/moduleTop.vue

@@ -58,7 +58,6 @@ const emit = defineEmits(['close', 'click']);
   height: 30px;
   cursor: pointer;
   position: absolute;
-  z-index: 1;
   background: url('@/assets/images/vent/homeNew/Top-left.png') no-repeat;
   background-size: 100% 100%;
 }
@@ -70,7 +69,6 @@ const emit = defineEmits(['close', 'click']);
   height: 30px;
   cursor: pointer;
   position: absolute;
-  z-index: 1;
   background: url('@/assets/images/vent/homeNew/Top-right.png') no-repeat;
   background-size: 100% 100%;
 }

src/views/vent/home/configurable/vent-Green.vue

@@ -14,25 +14,37 @@
         <div class="left-area">
           <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
           <template v-if="isOriginal">
-            <ModuleOriginal v-for="cfg in configsLeft" :key="cfg.deviceType" :show-style="cfg.showStyle"
-              :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-              :visible="true" />
+            <ModuleOriginal
+              v-for="cfg in configsLeft"
+              :key="cfg.deviceType"
+              :show-style="cfg.showStyle"
+              :module-data="cfg.moduleData"
+              :module-name="cfg.moduleName"
+              :device-type="cfg.deviceType"
+              :data="data"
+              :visible="true"
+            />
           </template>
         </div>
         <div class="bottom-area">
           <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
           <template v-if="isOriginal">
-            <ModuleOriginal v-for="cfg in configsBottom" :key="cfg.deviceType" :show-style="cfg.showStyle"
-              :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-              :visible="true" />
+            <ModuleOriginal
+              v-for="cfg in configsBottom"
+              :key="cfg.deviceType"
+              :show-style="cfg.showStyle"
+              :module-data="cfg.moduleData"
+              :module-name="cfg.moduleName"
+              :device-type="cfg.deviceType"
+              :data="data"
+              :visible="true"
+            />
           </template>
         </div>
         <div class="right-area">
           <greenRightTag></greenRightTag>
         </div>
 
-
-
         <!-- <div
         v-if="sysDataType === 'all'"
         :class="{ 'realtime-mode': isDataRealTime }"
@@ -42,7 +54,6 @@
       ></div> -->
         <div class="switch-button icon-goto right-475px" @click="goMicroApp()"></div>
       </div>
-
     </template>
   </div>
 </template>
@@ -52,8 +63,8 @@ import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
 // import MonitorBar from './components/MonitorBar.vue';
 import { useInitConfigs, useInitPage } from './hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
-import greenNav from './components/green-nav.vue'
-import greenRightTag from './components/green-right-tag.vue'
+import greenNav from './components/green-nav.vue';
+import greenRightTag from './components/green-right-tag.vue';
 // import { useRoute } from 'vue-router';
 import VentModal from '/@/components/vent/micro/ventModal.vue';
 import { list } from './configurable.api';
@@ -70,17 +81,17 @@ const router = useRouter();
 const isDataRealTime = ref(sysDataType === 'monitor');
 // const showBar = ref(true);
 let interval: number | undefined;
-let configs = ref<any[]>([])
+let configs = ref<any[]>([]);
 // function switchDataMode() {
 //   isDataRealTime.value = !isDataRealTime.value;
 //   refresh();
 // }
 let configsLeft = computed(() => {
-  return configs.value.filter(v => v.showStyle.position.includes('top'))
-})
+  return configs.value.filter((v) => v.showStyle.position.includes('top'));
+});
 let configsBottom = computed(() => {
-  return configs.value.filter(v => v.showStyle.position.includes('bottom'))
-})
+  return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
+});
 function refresh() {
   fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
     configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
@@ -219,7 +230,7 @@ onUnmounted(() => {
       background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
       background-size: 100% 100%;
       box-sizing: border-box;
-      overflow-y: auto
+      overflow-y: auto;
     }
 
     .bottom-area {
@@ -233,12 +244,12 @@ onUnmounted(() => {
       background-size: 100% 100%;
       box-sizing: border-box;
     }
-    .right-area{
-      position:absolute;
-      right:0px;
-      top:0px;
-      width:120px;
-      height:calc(100% - 305px);
+    .right-area {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: 120px;
+      height: calc(100% - 305px);
     }
   }
 

src/views/vent/home/configurable/ventNew.vue

@@ -6,7 +6,8 @@
     </div>
     <div class="top-bg">
       <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
-      <div class="main-title">{{ mainTitle }}</div>
+      <!-- <div class="main-title">{{ mainTitle }}</div> -->
+      <NewNav :Title="mainTitle" />
     </div>
     <div class="left-t"> </div>
     <div class="right-t"> </div>
@@ -28,6 +29,7 @@
 import { onMounted, onUnmounted } from 'vue';
 // import { CaretDownOutlined } from '@ant-design/icons-vue';
 // import MonitorCenter from './components/MonitorCenter.vue';
+import NewNav from './components/originalNew/NewNav.vue';
 import { useInitConfigs, useInitPage } from './hooks/useInit';
 import ModuleNew from './components/ModuleNew.vue';
 // import { useRoute } from 'vue-router';
@@ -94,6 +96,14 @@ onUnmounted(() => {
       justify-content: center;
       align-items: center;
     }
+    .top-nav {
+      position: absolute;
+      top: 0;
+      width: 880px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+    }
   }
   .left-t {
     position: absolute;