路由

src/api/modules/ais-test/index.ts

@@ -3,6 +3,6 @@ import { handle } from '../../index'
 const suffix = 'ax-node-api'
 
 export const test = () => handle({
-  url: `/${suffix}/info`,
+  url: `/${suffix}/ais-test/sss`,
   method: 'get',
 })

src/components/easyMap/index.vue

@@ -185,7 +185,6 @@ import * as BaseDraw from './func/base-draw'
 import {ElMessage, ElMessageBox} from "element-plus";
 import './func/dom.scss'
 import * as MarkDraw from './func/mark-draw'
-import * as ol from 'ol'
 
 export default defineComponent({
   name: "EasyMap",

src/router/ais-test.ts

@@ -0,0 +1,22 @@
+import AisTestLayout from '@/views/ais-test/layout/index.vue'
+const aisTestRouter = [
+  {
+    path: '/ais-test',
+    component: () => import('@/views/ais-test/index.vue'),
+  },
+  {
+    path: '/ais-test/manage',
+    component: AisTestLayout,
+    children: [
+      {
+        path: 'source',
+        component: () => import('@/views/ais-test/manage/source.vue'),
+      },
+      {
+        path: 'params',
+        component: () => import('@/views/ais-test/manage/params.vue'),
+      },
+    ]
+  },
+]
+export default aisTestRouter

src/router/index.ts

@@ -1,4 +1,5 @@
 import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
+import aisTestRouter from "./ais-test";
 const routes = [
     {
         path: '/',
@@ -12,10 +13,7 @@ const routes = [
         path: '/track-status',
         component: () => import('@/views/track-status/index.vue'),
     },
-    {
-        path: '/ais-test',
-        component: () => import('@/views/ais-test/index.vue'),
-    },
+    ...aisTestRouter
 ]
 
 const router = createRouter({

src/views/ais-test/business/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="business">
+    <ShipFilterCom class="ship-filter"/>
+    <ShipInfoCom class="ship-info"/>
+  </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 ShipFilterCom from "./ship-filter.vue";
+import ShipInfoCom from "./ship-info.vue";
+
+export default defineComponent({
+  name: '',
+  components: {
+    ShipFilterCom,
+    ShipInfoCom
+  },
+  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">
+.business {
+  .ship-filter {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+  .ship-info {
+    position: fixed;
+    top: 0;
+    right: 0;
+  }
+}
+</style>

src/views/ais-test/business/ship-filter.vue

@@ -0,0 +1,45 @@
+<template>
+  <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";
+
+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/ais-test/business/ship-info.vue

@@ -0,0 +1,44 @@
+<template>
+  <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";
+
+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/ais-test/index.vue

@@ -5,6 +5,10 @@
         layout="info"
         @easyMapLoad="mapLoad"
     />
+    <BusinessCom :map="map" :mapFunc="mapFunc"/>
+    <div class="buttons">
+      <el-button type="primary" @click="$router.push('/ais-test/manage')">配置管理</el-button>
+    </div>
   </div>
 </template>
 
@@ -24,12 +28,12 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
-import axios from "axios";
-import * as style from 'ol/style'
+import BusinessCom from "@/views/ais-test/business/index.vue";
 
 export default defineComponent({
   name: '',
   components: {
+    BusinessCom
   },
   props: {},
   setup(props, {emit}) {
@@ -60,5 +64,11 @@ export default defineComponent({
 .main {
   width: 100%;
   height: 100vh;
+  position: relative;
+  .buttons {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
 }
 </style>

src/views/ais-test/layout/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="layout">
+    <div class="layout-bottom">
+      <div class="layout-sub-menu">
+        <SubMenuCom/>
+      </div>
+      <div class="layout-content">
+        <router-view v-slot="{ Component }" class="router-view">
+          <keep-alive>
+            <component :is="Component" />
+          </keep-alive>
+        </router-view>
+      </div>
+    </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 SubMenuCom from './sub-menu.vue'
+
+export default defineComponent({
+  name: '',
+  components: {
+    SubMenuCom
+  },
+  setup() {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+    })
+    // 测试切换分支
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  $layoutHeadHeight: 0px;
+  background-color: #082e94;
+  .layout-bottom {
+    width: 100%;
+    height: calc(100% - #{$layoutHeadHeight});
+    display: flex;
+    .layout-sub-menu {
+      width: 44px;
+      height: 100%;
+      &.expend {
+        width: 204px;
+      }
+    }
+    .layout-content {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      .content {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>

src/views/ais-test/layout/sub-menu.vue

@@ -0,0 +1,135 @@
+<!--左侧二级菜单树-->
+<template>
+  <div class="sub-menu-main">
+    <template v-for="(item, index) in menus">
+      <div @click="$router.push(item.url)">
+        {{item.name}}
+      </div>
+    </template>
+  </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 {copy} from "@/utils/util";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+  },
+  setup() {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      menus: [
+        {name: 'dasd', url: '/ais-test/manage/source'},
+        {name: '沙发沙发', url: '/ais-test/manage/params'}
+      ]
+    })
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+  .current {
+    background-color: #0062E9;
+  }
+  .sub-menu-main {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    background: linear-gradient(0deg, #021D78 0%, #0F44B6 100%);
+    padding-top: 13px;
+    .smm-parent {
+      .p-item {
+        display: flex;
+        align-items: center;
+        height: 44px;
+        line-height: 1;
+        user-select: none;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+        .menu-logo {
+          margin: 0 13px 0 15px;
+        }
+        .menu-expend {
+          margin: 0 12px 0 auto;
+          transition: 0.2s;
+          &.active {
+            transform: rotate(90deg) !important;
+          }
+        }
+      }
+      .smm-son {
+        .s-item {
+          height: 44px;
+          padding-left: 46px;
+          display: flex;
+          align-items: center;
+          line-height: 1.2;
+          user-select: none;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+      }
+    }
+    .smm-parent-not-expend {
+      height: 44px;
+      display: flex;
+      align-items: center;
+      .menu-logo {
+        margin: 0 13px 0 15px;
+      }
+    }
+    :deep(.smm-parent-son) {
+      background: #0a369f;
+      border: none;
+      padding: 0;
+      width: auto !important;
+      min-width: 0;
+      .el-popper__arrow::before {
+        background: #0a369f;
+        border-color: #0a369f;
+      }
+      .smm-son {
+        .s-item {
+          padding: 0 20px;
+          height: 44px;
+          display: flex;
+          align-items: center;
+          line-height: 1.2;
+          user-select: none;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+</style>

src/views/ais-test/manage/params.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="ss">
+    参数
+  </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">
+</style>

src/views/ais-test/manage/source.vue

@@ -0,0 +1,45 @@
+<template>
+  <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";
+
+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>