神东5.5提交新版本

src/layouts/default/sider/bottomSideder.vue

@@ -2,43 +2,38 @@
   <div v-if="isShowMenu == -1" class="bottom-side" :class="{ 'bottom-size-show': isShowMenu }">
     <div class="menu-container">
       <template v-for="(menu, index) in currentParentRoute.children" :key="index">
-        <FourBorderBg class="four-border-bg" v-if="!menu.hideMenu">
-          <div class="vent-flex-row">
+        <FourBorderBg class="four-border-bg"  v-if="!menu.hideMenu">
+          <div class="vent-flex-row" >
             <div class="parent-menu">
               {{ menu.name }}
             </div>
-            <div class="vent-flex-row-wrap child-menu">
+            <div class="vent-flex-row-wrap child-menu" >
               <template v-for="(childMenu, childIndex) in menu.children" :key="childIndex">
-                <template v-if="!childMenu.hideMenu">
-                  <template v-if="childMenu.path == '/monitorChannel/monitor-window' || childMenu.path === '/monitorChannel/monitor-windrect'">
-                    <div class="child-menu-item" @click="handleMenuClick(childMenu)">
-                      {{ childMenu.name }}
-                    </div>
-                  </template>
-                  <template v-else>
-                    <div class="child-menu-item-disabled" :style="{ backgroundColor: '#314671' }">
-                        {{ childMenu.name }}
-                      </div>
-                  </template>
-                </template>
+                <div v-if="!childMenu.hideMenu" class="child-menu-item" @click="handleMenuClick(childMenu)">
+                  {{ childMenu.name }}
+                </div>
               </template>
             </div>
           </div>
         </FourBorderBg>
       </template>
-
+      
       <div class="vent-flex-row-between menu-button-group">
         <div class="vent-flex-row program-group">
           <template v-for="(programMenu, key) in menuModules" :key="key">
-            <div v-if="!programMenu.title.startsWith('首页')" class="program-menu"
-              :class="{ 'program-menu-active': currentParentRoute == programMenu }" @click="selectMenu(programMenu)">{{
-                programMenu.title }}</div>
+            <div
+              v-if="!programMenu.title.startsWith('首页')"
+              class="program-menu"
+              :class="{ 'program-menu-active': currentParentRoute == programMenu }"
+              @mouseenter="selectMenu(programMenu)"
+              >{{ programMenu.title }}</div
+            >
           </template>
         </div>
         <div class="setting-group">
-          <SvgIcon class="icon-style" size="18" name="home" @click="geHome" />
+          <SvgIcon class="icon-style" size="18" name="home" @click="go('/micro-vent-3dModal/dashboard/analysis')" />
           <SvgIcon class="icon-style" size="18" name="fixed" />
-          <SvgIcon class="icon-style" size="18" name="enter" @click="closeMenu" />
+          <SvgIcon class="icon-style" size="18" name="enter" />
           <!-- <SvgIcon class="icon-style" size="18" name="setting" />  
           <SvgIcon class="icon-style" size="18" name="hidden" /> -->
         </div>
@@ -52,260 +47,222 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, unref } from 'vue';
-import type { Menu } from '/@/router/types';
-import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
-import { SvgIcon } from '/@/components/Icon';
-import { getMenus } from '/@/router/menus';
-import { useGo } from '/@/hooks/web/usePage';
-import { useRouter } from 'vue-router';
-import { PageEnum } from '/@/enums/pageEnum';
-import path from 'path';
-
-export default defineComponent({
-  name: 'BottomSider',
-  components: { FourBorderBg, SvgIcon },
-  setup() {
-    const isShowMenu = ref(0);
-    let menuModules = ref<Menu[]>([]);
-    const router = useRouter();
-
-    const currentParentRoute = ref<Menu>();
-    const { currentRoute } = router;
-    const route = unref(currentRoute);
-    const go = useGo();
-    function selectMenu(programMenu) {
-      currentParentRoute.value = programMenu;
-    }
+  import { defineComponent, onMounted, ref, unref } from 'vue';
+  import type { Menu } from '/@/router/types';
+  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { getMenus } from '/@/router/menus';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useRouter } from 'vue-router';
+
+  export default defineComponent({
+    name: 'BottomSider',
+    components: { FourBorderBg, SvgIcon },
+    setup() {
+      const isShowMenu = ref(0);
+      let menuModules = ref<Menu[]>([]);
+      const router = useRouter();
+
+      const currentParentRoute = ref<Menu>();
+      const { currentRoute } = router;
+      const route = unref(currentRoute);
+      const go = useGo();
+      function selectMenu(programMenu) {
+        currentParentRoute.value = programMenu;
+      }
 
-    function handleMenuClick(path: Menu) {
-      if (route.path.startsWith('/micro-')) {
-        if (route.path.startsWith(PageEnum.BASE_HOME)) {
-          const { href } = router.resolve(path.path)
-          window.open(href, '_blank')
-        } else {
-          history.pushState({}, '', path.path);
-        }
-      } else {
-        if (route.path.startsWith('/subSysmodal/')) {
-          router.replace('/micro-vent-3dModal' + path.path)
+      function handleMenuClick(path: Menu) {
+        if (route.path.startsWith('/micro-')) { 
+          if (route.path.startsWith('/micro-vent-3dModal/dashboard/analysis')){
+            const { href } = router.resolve(path.path)
+            window.open(href, '_blank')
+          }else {
+            history.pushState({}, '', path.path);
+          }
         } else {
-          go(path.path);
+          // micro-vent-3dModal 
+
+          if(route.path.startsWith('/subSysmodal/')) {
+            router.replace('/micro-vent-3dModal' + path.path)
+          }else{
+            go(path.path);
+          }
+          
         }
-
+        isShowMenu.value = 0;
       }
-      isShowMenu.value = 0;
-    }
-    function geHome() {
-      // history.pushState({}, '', `/${PageEnum.BASE_HOME}`);
-      go(`/${PageEnum.BASE_HOME}`)
-      isShowMenu.value = 0;
-    }
 
-    function closeMenu() {
-      isShowMenu.value = 0;
-      // window.removeEventListener('click', closeMenu);
-    };
+      function closeMenu() {
+        isShowMenu.value = 0;
+        window.removeEventListener('click', closeMenu);
+      };
 
-    function openMenu() {
-      isShowMenu.value = -1;
-      // window.addEventListener('click', closeMenu, true);
-    }
+      function openMenu() {
+        isShowMenu.value = -1;
+        window.addEventListener('click', closeMenu, true);
+      }
 
-    onMounted(async () => {
-      menuModules.value = await getMenus();
-      currentParentRoute.value = menuModules.value[1];
-    });
-    return {
-      menuModules,
-      isShowMenu,
-      handleMenuClick,
-      openMenu,
-      closeMenu,
-      selectMenu,
-      go,
-      geHome,
-      currentParentRoute,
-    };
-  },
-});
+      onMounted(async () => {
+        menuModules.value = await getMenus();
+        currentParentRoute.value = menuModules.value[1];
+      });
+      return {
+        menuModules,
+        isShowMenu,
+        handleMenuClick,
+        openMenu,
+        selectMenu,
+        go,
+        currentParentRoute,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
 @keyframes menuShow {
-  0% {
-    width: 0;
-    height: 0;
+    0% {
+      width: 0;
+      height: 0;
+    }
+    100% {
+      width: 480px;
+      height: 100vh;
+    }
   }
-
-  100% {
+  .bottom-side {
     width: 480px;
     height: 100vh;
-  }
-}
-
-.bottom-side {
-  width: 480px;
-  height: 100vh;
-  position: fixed;
-  bottom: 2px;
-  left: 0px;
-  z-index: 9999999;
-  color: #fff;
-
-  .menu-container {
-    width: 480px;
-    position: absolute;
-    bottom: 0;
-    // border: 1px solid #0099e6;
-    // background-color: #06115a;
-    border: 1px solid #0099e6;
-    background-color: #142253;
-    z-index: 999;
-
-    // backdrop-filter: blur(8px);
-    .four-border-bg {
-      margin: 5px;
-      background-color: #ffffff00;
-
-      .main-container {
-        background-color: #ffffff00 !important;
-        // box-shadow: 0 0 3px #ffffff33 inset;
-        backdrop-filter: none !important;
-      }
-
-      .parent-menu {
-        width: 110px;
-      }
+    position: fixed;
+    bottom: 2px;
+    left: 0px;
+    z-index: 9999999;
+    color: #fff;
+    .menu-container {
+      width: 480px;
+      position: absolute;
+      bottom: 0;
+      // border: 1px solid #0099e6;
+      // background-color: #06115a;
+      border: 1px solid #0099e6;
+      background-color: #0c1e2b;
+      z-index: 999;
+      // backdrop-filter: blur(8px);
+      .four-border-bg {
+        margin: 5px;
+        background-color: #ffffff00;
+        .main-container {
+          background-color: #ffffff00 !important;
+          box-shadow: 0 0 3px #ffffff33 inset;
+          backdrop-filter: none !important;
+        }
 
-      .child-menu {
-        width: 330px;
-        font-size: 13px;
+        .parent-menu {
+          width: 110px;
+        }
+        .child-menu {
+          width: 330px;
+          font-size: 13px;
+        }
+        .child-menu-item {
+          width: 100px;
+          padding: 2px 0;
+          // background-color: #086193;
+          background: linear-gradient(#0d435d, #0e729d);
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 5px;
+          cursor: pointer;
+          box-shadow: 0 0 3px #ffffff22 inset;
+          &:hover {
+            background: linear-gradient(#1d89bf, #17aeee);
+          }
+        }
       }
+    }
 
-      .child-menu-item {
-        width: 100px;
-        padding: 2px 0;
-        // background-color: #086193;
-        background: linear-gradient(#0d435d, #0e729d);
+    .menu-button-group {
+      margin: 5px 0;
+      .program-menu {
+        // width: 90px;
+        padding: 1px 15px;
+        background:linear-gradient(#217aa5, #0f4f75);
+        margin-left: 5px;
+        text-align: center;
         border-radius: 2px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 5px;
         cursor: pointer;
-        box-shadow: 0 0 3px #ffffff22 inset;
-
         &:hover {
-          background: linear-gradient(#1d89bf, #17aeee);
+          background: linear-gradient(#42b7ff, #1ca0d4);
         }
       }
-    }
-    .child-menu-item-disabled{
-      width: 100px;
-      padding: 2px 0;
-      border-radius: 2px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 5px;
-      cursor: pointer;
-      box-shadow: 0 0 3px #ffffff22 inset;
-      background: linear-gradient(#7b7b7b, #6b6b6b);
-    }
-  }
-
-  .menu-button-group {
-    margin: 5px 0;
-
-    .program-menu {
-      // width: 90px;
-      padding: 1px 15px;
-      background: linear-gradient(#217aa5, #0f4f75);
-      margin-left: 5px;
-      text-align: center;
-      border-radius: 2px;
-      cursor: pointer;
-
-      &:hover {
-        background: linear-gradient(#42b7ff, #1ca0d4);
+      .program-menu-active {
+        background: linear-gradient(#42adff, #1a8cbb);
       }
-    }
-
-    .program-menu-active {
-      background: linear-gradient(#42adff, #1a8cbb);
-    }
-
-    .icon-style {
-      margin-right: 10px;
-
-      &:last-child {
-        margin-right: 5px;
+      .icon-style {
+        margin-right: 10px;
+        &:last-child {
+          margin-right: 5px;
+        }
       }
     }
   }
-}
-
-.bottom-size-show {
-  animation: menuShow 0.4s;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in;
-  /* Safari and Chrome */
-  -webkit-animation: menuShow 0.4s;
-  -webkit-animation-iteration-count: 1;
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-timing-function: ease-in;
-}
-
-.menu-show-icon {
-  position: fixed;
-  bottom: 5px;
-  left: 5px;
-  z-index: 1000000;
-
-  .icon {
-    width: 60px;
-    height: 60px;
-    position: relative;
-    background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
-    background-position: center;
-
-    &:before {
-      content: '';
-      display: block;
-      width: 60px;
-      height: 60px;
-      position: absolute;
-      background: url('/@/assets/images/vent/bottom-icon/menu-icon-inner.png') no-repeat;
-      background-position: center;
-    }
-
-    &:after {
-      content: '';
-      display: block;
+  .bottom-size-show {
+    animation: menuShow 0.4s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+    /* Safari and Chrome */
+    -webkit-animation: menuShow 0.4s;
+    -webkit-animation-iteration-count: 1;
+    -webkit-animation-fill-mode: forwards;
+    -webkit-animation-timing-function: ease-in;
+  }
+  .menu-show-icon {
+    position: fixed;
+    bottom: 5px;
+    left: 5px;
+    z-index: 1000000;
+    .icon {
       width: 60px;
       height: 60px;
-      position: absolute;
-      background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
+      position: relative;
+      background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
       background-position: center;
-      animation-timing-function: ease-in;
-      animation: fadenum 8s infinite;
-    }
 
-    @keyframes fadenum {
-      0% {
-        transform: rotate(0deg);
+      &:before {
+        content: '';
+        display: block;
+        width: 60px;
+        height: 60px;
+        position: absolute;
+        background: url('/@/assets/images/vent/bottom-icon/menu-icon-inner.png') no-repeat;
+        background-position: center;
       }
-
-      10% {
-        transform: rotate(360deg);
+      &:after {
+        content: '';
+        display: block;
+        width: 60px;
+        height: 60px;
+        position: absolute;
+        background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
+        background-position: center;
+        animation-timing-function: ease-in;
+        animation: fadenum 8s infinite;
       }
 
-      100% {
-        transform: rotate(360deg);
+      @keyframes fadenum {
+        0% {
+          transform: rotate(0deg);
+        }
+        10% {
+          transform: rotate(360deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
       }
     }
   }
-}
 </style>

src/views/vent/home/clique/components/main-monitor.vue

@@ -25,7 +25,6 @@
     </div>
     <div class="main-contents">
       <div class="main" ref="main"></div>
-      <!-- <echartLine ref="main" style="width: 100%; height: 100%"></echartLine> -->
     </div>
   </div>
 </template>
@@ -33,7 +32,6 @@
 <script lang="ts" setup>
   import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
-  // import echartLine from './EchartLineCharacter3.vue'
   import * as echarts from 'echarts';
 
   let props = defineProps({

src/views/vent/home/clique/index.vue

@@ -88,8 +88,8 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import { list } from './clique.api';
   import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue';
-  import { Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  // import { Modal } from 'ant-design-vue';
+  // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import moment from 'moment';
 
   let timer: NodeJS.Timeout | null = null;
@@ -109,29 +109,29 @@
     { name: '有效风量率', isShow: false, val: 0 },
   ]);
 
-  // const loading = ref(false);
+  const loading = ref(false);
   const globSetting = useGlobSetting();
-  // const openQianKun = globSetting.openQianKun;
-  // let actions;
+  const openQianKun = globSetting.openQianKun;
+  let actions;
   const pageType = ref('home');
 
   function goDetail(deviceType) {
-    Modal.confirm({
-      content: () => '暂未连接井下设备！',
-      icon: () => createVNode(ExclamationCircleOutlined),
-      title: '消息提示',
-      onOk() {
-        return new Promise((resolve, reject) => {
-          setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
-        }).catch(() => console.log('Oops errors!'));
-      },
-      cancelText: () => '取消',
-      onCancel() {
-        Modal.destroyAll();
-      },
-    });
-    // pageType.value = deviceType
-    // changeModalBox()
+    // Modal.confirm({
+    //   content: () => '暂未连接井下设备！',
+    //   icon: () => createVNode(ExclamationCircleOutlined),
+    //   title: '消息提示',
+    //   onOk() {
+    //     return new Promise((resolve, reject) => {
+    //       setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+    //     }).catch(() => console.log('Oops errors!'));
+    //   },
+    //   cancelText: () => '取消',
+    //   onCancel() {
+    //     Modal.destroyAll();
+    //   },
+    // });
+    pageType.value = deviceType
+    changeModalBox()
   }
   function goHome() {
     pageType.value = 'home';