基础

src/router/index.ts

@@ -1,17 +1,15 @@
 import {createRouter, createWebHistory} from 'vue-router'
 import LayoutCom from '@/layout/index.vue'
+import GisLayoutCom from '@/views/gis/layout/index.vue'
 import staticRouter from './modules/static'
 import store from '@/store/index'
 import TempCom from '@/views/global/temp.vue'
 import RouterViewCom from "@/layout/router-view.vue";
-// import {stagingRouterMap, stagingRouter} from './modules/staging'
-// import {systemRouterMap, systemRouter} from './modules/system'
+import {gisRouter} from './modules/gis'
 import {ElMessage} from "element-plus";
 import {toLogin} from "@/utils/permissions";
 
 export const RoutersMap: any = new Map([
-    // ...stagingRouterMap,
-    // ...systemRouterMap,
 ])
 
 const routes = [
@@ -23,6 +21,14 @@ const routes = [
         children: [
         ]
     },
+    {
+        path: '/gis',
+        name: store.state.gis.menuRootName, // 菜单根路由name标识
+        component: GisLayoutCom,
+        children: [
+            ...gisRouter
+        ]
+    },
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: TempCom }
 ]
 
@@ -67,6 +73,8 @@ const getInit = (to: any, next: any) => {
                 path: firstRoute.redirect || firstRoute.path
             })
         }
+    } else if (to.path === '/gis') {
+        next({path: '/gis/' + gisRouter[0].path})
     } else {
         const m = to.matched[1]?.children?.map((v: any) => {
             v.expend = v.children?.some((s: any) => s.path === to.path)

src/router/modules/gis.ts

@@ -0,0 +1,32 @@
+export const gisRouter: any = [
+  {
+    name: 'c6b5fb40-4be6-4e7c-af82-6ec98176b0a0',
+    path: 'enterprise',
+    meta: {title: '企业一张图'},
+    component: () => import('@/views/gis/business/enterprise/index.vue'),
+  },
+  {
+    name: '0fec4634-a98e-4ea9-9f53-af91bd2a500b',
+    path: 'clue',
+    meta: {title: '线索一张图'},
+    component: () => import('@/views/gis/business/clue/index.vue'),
+  },
+  {
+    name: 'fa4fc293-b5e1-4c87-86aa-c0423e29c6a1',
+    path: 'situation',
+    meta: {title: '态势一张图'},
+    component: () => import('@/views/gis/business/situation/index.vue'),
+  },
+  {
+    name: '0b46ffa9-f3e0-4a51-bde0-f859addfdb97',
+    path: 'resources',
+    meta: {title: '资源一张图'},
+    component: () => import('@/views/gis/business/resources/index.vue'),
+  },
+  {
+    name: 'ea2c5f20-36cf-4c88-aa31-365f68ecacd1',
+    path: 'power',
+    meta: {title: '处置力量一张图'},
+    component: () => import('@/views/gis/business/power/index.vue'),
+  },
+]

src/router/modules/static.ts

@@ -6,10 +6,5 @@ const staticRouter = [
   //   name: 'fde2b927-2116-43f6-ba5e-94be4abacf39',
   //   component: () => import('@/views/global/login.vue')
   // },
-    {
-      path: '/gis',
-      name: '83c18662-3524-4147-9271-91296fcd7780',
-      component: () => import('@/views/gis/index.vue')
-    },
 ]
 export default staticRouter

src/store/index.ts

@@ -6,6 +6,7 @@ import easyMap from "./modules/easy-map";
 import menu from "./modules/menu";
 import dictionary from "./modules/dictionary";
 import regex from "./modules/regex";
+import gis from "./modules/gis";
 
 export default createStore({
   state: <any>{},
@@ -18,5 +19,6 @@ export default createStore({
     menu,
     dictionary,
     regex,
+    gis,
   },
 });

src/store/modules/gis.ts

@@ -0,0 +1,20 @@
+const state = {
+  menuRootName: '9cd5fbf9-35fd-4fb2-8c24-1f871afd67be'
+}
+
+const getters = {
+}
+
+const mutations = {
+}
+
+const actions = {
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}

src/views/gis/business/clue/index.vue

@@ -0,0 +1,42 @@
+<template>
+  线索一张图
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/business/enterprise/index.vue

@@ -0,0 +1,50 @@
+<template>
+  企业一张图
+  <div class="main">
+
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.main {
+  width: 200px;
+  height: 500px;
+  background-color: red;
+}
+</style>

src/views/gis/business/power/index.vue

@@ -0,0 +1,42 @@
+<template>
+  处置力量一张图
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/business/resources/index.vue

@@ -0,0 +1,42 @@
+<template>
+  资源一张图
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/business/situation/index.vue

@@ -0,0 +1,42 @@
+<template>
+  态势一张图
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="main">
-    <EasyMapComponent
-        class="map"
-        @easyMapLoad="mapLoad"
-    />
+    <iframe style="width: 100%;height: 100%" src="http://localhost:8686/login"/>
+<!--    <EasyMapComponent-->
+<!--        class="map"-->
+<!--        @easyMapLoad="mapLoad"-->
+<!--    />-->
   </div>
 </template>
 

src/views/gis/layout/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="gis-layout">
+    <EasyMapComponent
+        class="map"
+        @easyMapLoad="mapLoad"
+    />
+    <div class="gis-menu">
+      <template v-for="item in menuCpt">
+        <div class="gis-menu-item __hover" :class="{active: $route.name === item.name}" @click="$router.push({name: item.name})">
+          {{item.meta.title}}
+        </div>
+      </template>
+    </div>
+    <div class="gis-content">
+      <RouterViewCom/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+import RouterViewCom from '@/layout/router-view.vue'
+import store from "@/store";
+
+export default defineComponent({
+  name: '',
+  components: {
+    RouterViewCom
+  },
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      map: <any>null,
+      mapFunc: <any>null,
+    })
+    const mapLoad = (map, func) => {
+      state.map = map
+      state.mapFunc = func
+    }
+    const menuCpt = computed(() => {
+      return router.options.routes.filter(v => v.name === store.state.gis.menuRootName)[0].children
+    })
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+      mapLoad,
+      menuCpt
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.gis-layout {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  .map {
+    z-index: 1;
+  }
+  .gis-menu {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    .gis-menu-item {
+      &.active {
+        color: red;
+      }
+    }
+  }
+  .gis-content {
+    position: absolute;
+    z-index: 3;
+    top: 0;
+    left: 0;
+  }
+}
+</style>