项目优化2

src/layout/components/AppMain.vue

@@ -0,0 +1,87 @@
+<template>
+  <section class="app-main">
+    <router-view v-slot="{ Component, route }">
+      <transition v-if="!route.meta.noCache" :enter-active-class="animante" mode="out-in">
+        <keep-alive v-if="!route.meta.noCache" :include="tagsViewStore.cachedViews">
+          <component :is="Component" v-if="!route.meta.link" :key="route.path" />
+        </keep-alive>
+      </transition>
+      <transition v-if="route.meta.noCache" :enter-active-class="animante" mode="out-in">
+        <component :is="Component" v-if="!route.meta.link && route.meta.noCache" :key="route.path" />
+      </transition>
+    </router-view>
+    <iframe-toggle />
+  </section>
+</template>
+
+<script setup name="AppMain" lang="ts">
+import useSettingsStore from '@/store/modules/settings';
+import useTagsViewStore from '@/store/modules/tagsView';
+
+import IframeToggle from './IframeToggle/index.vue';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const tagsViewStore = useTagsViewStore();
+
+// 随机动画集合
+const animante = ref<string>('');
+const animationEnable = ref(useSettingsStore().animationEnable);
+watch(
+  () => useSettingsStore().animationEnable,
+  (val: boolean) => {
+    animationEnable.value = val;
+    if (val) {
+      animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string;
+    } else {
+      animante.value = proxy?.animate.defaultAnimate as string;
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  /* 50= navbar  50  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.fixed-header + .app-main {
+  padding-top: 50px;
+}
+
+.hasTagsView {
+  .app-main {
+    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 84px);
+  }
+
+  .fixed-header + .app-main {
+    padding-top: 84px;
+  }
+}
+</style>
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 6px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c0c0c0;
+  border-radius: 3px;
+}
+</style>

src/layout/components/IframeToggle/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <inner-link
+    v-for="(item, index) in tagsViewStore.iframeViews"
+    v-show="route.path === item.path"
+    :key="item.path"
+    :iframe-id="'iframe' + index"
+    :src="iframeUrl(item.meta ? item.meta.link : '', item.query)"
+  ></inner-link>
+</template>
+
+<script setup lang="ts">
+import InnerLink from '../InnerLink/index.vue';
+
+import useTagsViewStore from '@/store/modules/tagsView';
+
+const route = useRoute();
+const tagsViewStore = useTagsViewStore();
+
+function iframeUrl(url: string | undefined, query: any) {
+  if (Object.keys(query).length > 0) {
+    let params = Object.keys(query)
+      .map((key) => key + '=' + query[key])
+      .join('&');
+    return url + '?' + params;
+  }
+  return url;
+}
+</script>

src/layout/components/InnerLink/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div :style="'height:' + height">
+    <iframe :id="iframeId" style="width: 100%; height: 100%; border: 0" :src="src"></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  src: propTypes.string.def('/'),
+  iframeId: propTypes.string.isRequired
+});
+const height = ref(document.documentElement.clientHeight - 94.5 + 'px');
+</script>

src/layout/components/index.ts

@@ -0,0 +1 @@
+export { default as AppMain } from './AppMain.vue';

src/layout/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="app-wrapper">
+    <div class="drawer-bg" @click="handleClickOutside" />
+    <div class="main-container">
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AppMain } from './components';
+import useAppStore from '@/store/modules/app';
+import { initWebSocket } from '@/utils/websocket2';
+
+onMounted(() => {
+  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
+});
+
+const handleClickOutside = () => {
+  useAppStore().closeSideBar({ withoutAnimation: false });
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/mixin.scss';
+@import '@/assets/styles/variables.module.scss';
+
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+  background: $fixed-header-bg;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+</style>

src/store/modules/permission.ts

@@ -5,7 +5,9 @@ import { getRouters } from '@/api/menu';
 import auth from '@/plugins/auth';
 import { RouteRecordRaw } from 'vue-router';
 
+import Layout from '@/layout/index.vue';
 import ParentView from '@/components/ParentView/index.vue';
+import InnerLink from '@/layout/components/InnerLink/index.vue';
 
 import { createCustomNameComponent } from '@/utils/createCustomNameComponent';
 
@@ -119,8 +121,12 @@ export const usePermissionStore = defineStore('permission', () => {
         route.children = filterChildren(route.children, undefined);
       }
       // Layout ParentView 组件特殊处理
-      if (route.component?.toString() === 'ParentView') {
+      if (route.component?.toString() === 'Layout') {
+        route.component = Layout;
+      } else if (route.component?.toString() === 'ParentView') {
         route.component = ParentView;
+      } else if (route.component?.toString() === 'InnerLink') {
+        route.component = InnerLink;
       } else {
         route.component = loadView(route.component, route.name as string);
       }

src/types/components.d.ts

@@ -20,24 +20,26 @@ declare module 'vue' {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
@@ -73,6 +75,7 @@ declare module 'vue' {
     VideoDialog: typeof import('./../components/HKVideo/video-dialog.vue')['default']
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/routineCommandMap/index2.vue

@@ -3,17 +3,16 @@
     id="dashboard-container"
     ref="containerRef"
     class="dashboard-container"
-
+    :style="{ transform: 'scale(' + scale.scaleX + ', ' + scale.scaleY + ')' }"
   >
-<!--    :style="{ transform: 'scale(' + scale.scaleX + ', ' + scale.scaleY + ')' }"-->
     <div class="bg">
       <HeaderSection />
       <div class="dashboard-content">
-<!--        <LeftSection v-show="showLeftSection" />-->
-<!--        <MiddleSection :flag="true">-->
-<!--          <i :class="showLeftSection ? 'arrow-icon left-icon' : 'arrow-icon right-icon'" @click="handleTelescoping('left')" />-->
-<!--          <i :class="showRightSection ? 'arrow-icon2 right-icon' : 'arrow-icon2 left-icon'" @click="handleTelescoping('right')" />-->
-<!--        </MiddleSection>-->
+        <LeftSection v-show="showLeftSection" />
+        <MiddleSection :flag="true">
+          <i :class="showLeftSection ? 'arrow-icon left-icon' : 'arrow-icon right-icon'" @click="handleTelescoping('left')" />
+          <i :class="showRightSection ? 'arrow-icon2 right-icon' : 'arrow-icon2 left-icon'" @click="handleTelescoping('right')" />
+        </MiddleSection>
         <RightSection v-show="showRightSection" :flag="true" />
       </div>
       <FooterSection style="position: absolute; bottom: 0; left: 0" />