Quellcode durchsuchen

修复外链跳转bug,增加全局page样式,兼容基础文本的暗黑模式,增加分布图中地图的显示

yanglzh vor 3 Jahren
Ursprung
Commit
af44f52987

+ 6 - 6
src/layout/component/main.vue

@@ -1,7 +1,7 @@
 <template>
   <el-main class="layout-main">
-    <el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef" :style="{ padding: currentRoutemeta?.isLink && currentRouteMeta.isIframe ? 0 : '', transition: 'padding 0.3s ease-in-out' }">
-      <LayoutParentView :style="{ minHeight: `calc(100vh - ${headerHeight})` }" />
+    <el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef" :style="{ padding: currentRouteMeta?.isLink && currentRouteMeta.isIframe ? 0 : '', transition: 'padding 0.3s ease-in-out' }">
+      <LayoutParentView :style="{ height: `calc(100vh - ${headerHeight})` }" />
       <Footer v-if="getThemeConfig.isFooter" />
     </el-scrollbar>
   </el-main>
@@ -24,7 +24,7 @@ export default defineComponent({
 	name: 'layoutMain',
 	components: { LayoutParentView, Footer },
 	setup() {
-		const { proxy } = <any>getCurrentInstance();
+		const { proxy } = getCurrentInstance() as any;
 		const route = useRoute();
 		const store = useStore();
 		const state = reactive<MainState>({
@@ -37,7 +37,7 @@ export default defineComponent({
 		});
 		// 设置 main 的高度
 		const initHeaderHeight = () => {
-			const bool = state.currentRoutemeta?.isLink && state.currentRouteMeta.isIframe;
+			const bool = state.currentRouteMeta?.isLink && state.currentRouteMeta.isIframe;
 			let { isTagsview } = store.state.themeConfig.themeConfig;
 			if (isTagsview) return (state.headerHeight = bool ? `85px` : `114px`);
 			else return (state.headerHeight = `51px`);
@@ -56,7 +56,7 @@ export default defineComponent({
 			() => route.path,
 			() => {
 				state.currentRouteMeta = route.meta;
-				const bool = state.currentRoutemeta?.isLink && state.currentRouteMeta.isIframe;
+				const bool = state.currentRouteMeta?.isLink && state.currentRouteMeta.isIframe;
 				state.headerHeight = bool ? `85px` : `114px`;
 				proxy.$refs.layoutScrollbarRef.update();
 			}
@@ -64,7 +64,7 @@ export default defineComponent({
 		// 监听 themeConfig 配置文件的变化,更新菜单 el-scrollbar 的高度
 		watch(store.state.themeConfig.themeConfig, (val) => {
 			state.currentRouteMeta = route.meta;
-			const bool = state.currentRoutemeta?.isLink && state.currentRouteMeta.isIframe;
+			const bool = state.currentRouteMeta?.isLink && state.currentRouteMeta.isIframe;
 			state.headerHeight = val.isTagsview ? (bool ? `85px` : `114px`) : '51px';
 			if (val.isFixedHeaderChange !== val.isFixedHeader) {
 				if (!proxy.$refs.layoutScrollbarRef) return false;

+ 9 - 9
src/layout/routerView/parent.vue

@@ -1,13 +1,13 @@
 <template>
-	<div class="h100">
-		<router-view v-slot="{ Component }">
-			<transition :name="setTransitionName" mode="out-in">
-				<keep-alive :include="keepAliveNameList">
-					<component :is="Component" :key="refreshRouterViewKey" class="w100" :style="{ minHeight }" />
-				</keep-alive>
-			</transition>
-		</router-view>
-	</div>
+  <div class="height:100%" style="overflow-y:auto">
+    <router-view v-slot="{ Component }">
+      <transition :name="setTransitionName" mode="out-in">
+        <keep-alive :include="keepAliveNameList">
+          <component :is="Component" :key="refreshRouterViewKey" class="w100" :style="{ minHeight }" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </div>
 </template>
 
 <script lang="ts">

+ 1 - 1
src/router/backEnd.ts

@@ -89,7 +89,7 @@ export function backEndComponent(routes: any) {
 			isHide: item.isHide,
 			isIframe: item.isIframe,
 			isKeepAlive: item.isKeepAlive,
-			isLink: item.linkUrl || item.isLink,
+			isLink: item.isLink,
 			linkUrl: item.linkUrl,
 			title: item.title,
 			buttons: (item.button || []).map((item: any) => item.types),

+ 16 - 1
src/theme/fast.scss

@@ -1,5 +1,20 @@
+// 全局页面,适配双色
+.page {
+  height    : 100%;
+  overflow-y: auto;
+  background: var(--el-color-white);
+  color     : var(--el-text-color-primary);
+  border    : 1px solid var(--next-border-color-light);
+  padding   : 20px;
+
+  &:hover {
+    box-shadow: 0 2px 12px var(--next-color-dark-hover);
+    transition: all ease 0.3s;
+  }
+}
+
 .page-full {
-  height   : 100vh;
+  height   : 100%;
   display  : flex;
   flex-flow: column nowrap;
 }

+ 2 - 0
src/theme/index.scss

@@ -7,3 +7,5 @@
 @import './waves.scss';
 @import './dark.scss';
 @import './fast.scss';
+
+

+ 25 - 3
src/views/monitor/map.vue

@@ -1,11 +1,33 @@
 <template>
-  <div class="monitor">
-    分布图
+  <div class="page page-full">
+    <div class="map flex1 mt-2" ref="mapRef"></div>
   </div>
 </template>
 
+
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+const mapRef = ref();
+
+let BMapGL = (window as any).BMapGL;
+let map: any = null;
 
+onMounted(() => {
+	map = new BMapGL.Map(mapRef.value, {
+		backgroundColor: '#ff9900',
+	});
+	const testPt = new BMapGL.Point(104.5, 38);
+	map.centerAndZoom(testPt, 5);
+	map.enableScrollWheelZoom();
+	setTimeout(() => {
+		document.querySelectorAll('.anchorBL')[1].remove();
+		document.querySelectorAll('.anchorBL')[0].remove();
+	}, 100);
+});
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.page {
+}
+</style>