gis-one-map-web/src/views/gis/layout/index.vue

<template>
  <div class="gis-layout">
    <EasyMapComponent
        class="map"
        @easyMapLoad="mapLoad"
    />
    <div class="gis-menu">
      <img class="gis-menu-bottom" src="@/assets/images/gis-layout/gis-layout-menu_bottom.png" alt=""/>
      <template v-for="item in menuCpt">
        <div class="gis-menu-item __hover" :class="{active: $route.name === item.name, max: String(item.meta.title).length >5}" @click="$router.push({name: item.name})">
          {{item.meta.title}}
        </div>
      </template>
    </div>
    <div class="gis-tools">
      <div class="gt-search __box-shadow">
        <el-autocomplete
            ref="ref_search"
            v-model="searchInput"
            :fetch-suggestions="searchHandleMapSearch"
            :popper-append-to-body="false"
            clearable
            :debounce="800"
            placeholder="请输入关键字进行搜索"
            @select="searchToMapLocation"
        >
          <template #default="{ item }">
            <div class="search-item __hover">
              <img :src="item.icon"/>
              <div class="name">{{item.name}}</div>
            </div>
          </template>
        </el-autocomplete>
        <div class="search-icon __hover" @click="ref_search.focus()">
          <SvgIcon name="search" color="#ffffff"/>
        </div>
      </div>
      <div class="gt-tools __box-shadow">
        <template v-for="(item, index) in ToolsMapper">
          <div class="tools-line" v-if="index > 0"/>
          <div class="tools-item __hover" :class="{active: toolsType === item.value}" @click="toolsHandleClick(item)">
            {{item.label}}
          </div>
        </template>
      </div>
      <div class="gt-tools-component" v-if="toolsType && toolsType !== 'clear'">
        <Component :is="toolsCom" :map="map" :mapFunc="mapFunc"/>
      </div>
    </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 ElementCom from './tools/element.vue'
import SelectCom from './tools/select.vue'
import AnalysisCom from './tools/analysis.vue'
import ToolCom from './tools/tool.vue'
import PositionCom from './tools/position.vue'
import BaseCom from './tools/base.vue'
import ExampleCom from './tools/example.vue'


export default defineComponent({
  name: '',
  components: {
    RouterViewCom,
    ElementCom,
    SelectCom,
    AnalysisCom,
    ToolCom,
    PositionCom,
    BaseCom,
    ExampleCom,
  },
  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,
      searchInput: '',
      toolsType: '',
      toolsCom: null,
      toolsParams: {

      }
    })
    const ToolsMapper = [
      {label: '图层', value: 'element', com: ElementCom},
      {label: '框选', value: 'select', com: SelectCom},
      {label: '周边分析', value: 'analysis', com: AnalysisCom},
      {label: '清空图层', value: 'clear', com: undefined},
      {label: '工具', value: 'tool', com: ToolCom},
      {label: '定位', value: 'position', com: PositionCom},
      {label: '底图', value: 'base', com: BaseCom},
      {label: '图例', value: 'example', com: ExampleCom},
    ]
    const ref_search = ref()
    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
    })
    const searchHandleMapSearch = (queryString: string, cb: (arg: any) => void) => {
      if (queryString.trim()) {
        const arr = [
          {name: 123},
          {name: 123},
          {name: 123},
          {name: 123},
          {name: 123},
          {name: 123},
        ]
        // if (state.showBayonet) {
        //   state.searchAllList.bayonet.forEach(v => {
        //     if (v.name?.includes(queryString)) {
        //       arr.push(v)
        //     }
        //   })
        // }
        // if (state.showVideo) {
        //   state.searchAllList.video.forEach(v => {
        //     if (v.name?.includes(queryString)) {
        //       arr.push(v)
        //     }
        //   })
        // }
        // if (state.showElement) {
        //   state.searchAllList.element.forEach(v => {
        //     if (v.name?.includes(queryString)) {
        //       arr.push(v)
        //     }
        //   })
        // }
        cb(arr)
      } else {
        cb([])
      }
    }
    const searchToMapLocation = (val) => {
      state.searchInput = val.name
      // if (val.source === 'element') {
      //   state.elementFilter.forEach(l => {
      //     l.list.forEach(v => {
      //       if (v.value === val.elementType) {
      //         v.active = true
      //       }
      //     })
      //   })
      // }
      // positionSwitchGeom(val.geomType, val.coordinates, true, val.source)
    }
    const toolsHandleClick = (item) => {
      if (item.value === 'clear') {

      } else {
        state.toolsCom = item.com
        state.toolsType = (state.toolsType === item.value ? '' : item.value)
      }
    }
    onMounted(() => {
    })
    return {
      ...toRefs(state),
      mapLoad,
      ToolsMapper,
      ref_search,
      menuCpt,
      searchHandleMapSearch,
      searchToMapLocation,
      toolsHandleClick,
    }
  },
})
</script>

<style scoped lang="scss">
.gis-layout {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .map {
    z-index: 1;
  }
  .gis-menu {
    $diff: 14px;
    $menuBottom: 16px;
    position: absolute;
    z-index: 2;
    bottom: $menuBottom;
    display: flex;
    justify-content: center;
    align-items: center;
    &:before, &:after {
      content: '';
      background-image: url("@/assets/images/gis-layout/gis-layout-menu_side.png");
      width: 246px;
      height: 39px;
      position: absolute;
      bottom: -$menuBottom;
    }
    &:before {
      left: calc((#{$diff} + 246px) * -1);
    }
    &:after {
      right: calc((#{$diff} + 246px) * -1);
      transform: rotateY(180deg);
    }
    .gis-menu-bottom {
      position: absolute;
      height: 9px;
      width: calc(100% + 10px + #{$diff} * 2);
      bottom: -$menuBottom;
    }
    .gis-menu-item {
      width: 95px;
      height: 36px;
      background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-min.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #60AEFF;
      &:not(&:last-child) {
        margin-right: 4px;
      }
      &.active {
        color: #FFFFFF;
        background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-min_active.png");
      }
      &.max {
        width: 125px;
        background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-max.png");
        &.active {
          background-image: url("@/assets/images/gis-layout/gis-layout-menu_item-max_active.png");
        }
      }
    }
  }
  .gis-tools {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    width: 404px;
    >div {
      box-sizing: border-box;
    }
    .gt-search {
      height: 38px;
      width: 100%;
      display: flex;
      align-items: center;
      .search-icon {
        width: 54px;
        height: 100%;
        background-color: #3e8ef7;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      :deep(.el-autocomplete) {
        flex: 1;
        height: 100%;
        .el-input {
          width: 100%;
          height: 100%;
          .el-input__wrapper {
            border-radius: 0;
          }
        }
      }
      :deep(.el-autocomplete__popper) {
        opacity: 0.9;
        background-image: linear-gradient(45deg,transparent 10px,#101D69 10px), linear-gradient(-135deg,transparent 10px,#101D69 10px);
        border: none;
        .el-popper__arrow::before {
          background: #101D69;
          border-color: #101D69;
        }
        .el-autocomplete-suggestion {
          .el-scrollbar {
            .el-autocomplete-suggestion__wrap {
              .el-scrollbar__view {
                >li {
                  &:hover {
                    background-color: rgba(59,84,172,0.5);
                  }
                  .search-item {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    >img {
                      margin-right: 6px;
                      width: 16px;
                      height: 16px;
                    }
                    .name {
                      color: #ffffff;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .gt-tools {
      width: 100%;
      height: 38px;
      margin-top: 2px;
      background-color: #FFFFFF;
      border: 1px solid #C7CFDE;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 8px;
      .tools-item {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #AEAEAE;
        &.active {
          color: #1174DB;
          font-weight: bold;
        }
      }
      .tools-line {
        width: 1px;
        height: 16px;
        background: linear-gradient(0deg, rgba(174,174,174,0) 0%, rgba(213,213,213,0.99) 50%, rgba(174,174,174,0) 100%);
      }
    }
    .gt-tools-component {
      width: 100%;
      margin-top: 2px;
    }
  }
  .gis-content {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
  }
}
</style>