换一种方式

src/store/modules/gis.ts

@@ -1,43 +1,87 @@
+import * as source from "ol/source";
+import * as layer from "ol/layer";
+import * as style from "ol/style";
+import * as ol from "ol";
+import GisDefaultDom from '@/views/gis/map-info/overlay/default/index.vue'
+
 const state = {
   menuRootName: '9cd5fbf9-35fd-4fb2-8c24-1f871afd67be',
   map: null,
   activeQyId: null,
-  gisLayer: null,
-  gisSource: null,
   tempStatistic: {
     total: 0,
     lgszyjkscsb: 0,
     jgzzmgs: 0,
     lgsjkyfl: 0
-  }
+  },
+  gisParams: {
+    default: {
+      layer: null,
+      source: null,
+      overlay: null,
+      feature: null,
+      type: '',
+      info: {}
+    }
+  },
 }
 
 const getters = {
 }
 
 const mutations = {
-  SET_GIS_MAP(state, map) {
-    state.map = map
-  },
   SET_ACTIVE_QY_ID(state, id) {
     state.activeQyId = id
   },
   SET_tempStatistic(state, data) {
     state.tempStatistic = data
     console.log(data)
-  }
+  },
+  SET_GIS_MAP(state, map) {
+    state.map = map
+    state.gisParams.default.source = new source.Vector()
+    state.gisParams.default.layer = new layer.Vector({
+      zIndex: 200,
+      source: state.gisParams.default.source,
+    })
+    state.gisParams.default.layer.set('layerName', 'gisDefault')
+    state.map.addLayer(state.gisParams.default.layer)
+    console.log(GisDefaultDom)
+    // state.qyParams.sbOverlay = new ol.Overlay({
+    //   id: 'gisDefalutDom',
+    //   element: GisDefaultDom,
+    //   autoPan: false,
+    //   offset: [0, -60],
+    //   positioning: 'bottom-center',
+    //   stopEvent: true,
+    //   autoPanAnimation: {
+    //     duration: 250
+    //   }
+    // })
+    // state.map.addOverlay(state.qyParams.sbOverlay)
+  },
+  SET_GIS_PARAMS(state, {key, type}) {
+    if (!state.gisParams[key].layer) {
+
+    }
+  },
 }
 
 const actions = {
-  LOAD_GIS_MAP({ commit }: any, map: any) {
-    commit('SET_GIS_MAP', map)
-  },
   LOAD_ACTIVE_QY_ID({ commit }: any, id: any) {
     commit('SET_ACTIVE_QY_ID', id)
   },
   LOAD_tempStatistic({ commit }: any, data: any) {
     commit('SET_tempStatistic', data)
   },
+  LOAD_GIS_MAP({ commit }: any, map: any) {
+    if (!state.map) {
+      commit('SET_GIS_MAP', map)
+    }
+  },
+  LOAD_GIS_PARAMS({ commit }: any, {key, type}: any) {
+    commit('SET_GIS_PARAMS', {key, type})
+  },
 }
 
 export default {

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

@@ -46,6 +46,8 @@
             link="select"
             label="类型:"
             v-model:param="enterprise.tempForm.type"
+            multiple
+            collapse-tags
             :options="[
               {dictLabel: '零关税自用进口生产设备', dictValue: 'lgszyjkscsb'},
               {dictLabel: '加工增值免关税', dictValue: 'jgzzmgs'},
@@ -183,8 +185,8 @@ export default defineComponent({
       if (state.enterprise.form.name) {
         params.entName = state.enterprise.form.name
       }
-      if (state.enterprise.form.type) {
-        params.entType = store.getters['dictionary/elementTypeMap'].get(state.enterprise.form.type)
+      if (state.enterprise.form.type?.length > 0) {
+        params.entType = state.enterprise.form.type.map(v => store.getters['dictionary/elementTypeMap'].get(v)).join(',')
       }
       that.$api.enterpriseQuery(params).then((res: any) => {
         if (res.resp_code === 0 && res.datas?.length > 0) {

src/views/gis/layout/index.vue

@@ -20,6 +20,7 @@
             :fetch-suggestions="searchHandleMapSearch"
             :popper-append-to-body="false"
             clearable
+            :disabled="true"
             :debounce="800"
             placeholder="请输入关键字进行搜索"
             @select="searchToMapLocation"
@@ -461,6 +462,7 @@ export default defineComponent({
             }
           })
           state.map.addOverlay(state.qyParams.overlay)
+          console.log(ref_sbDom.value)
           //  详情
           state.qyParams.sbOverlay = new ol.Overlay({
             id: v4(),

src/views/gis/map-info/overlay/default/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="gis-overlay-default">
+    <Component :is="comCpt.com"/>
+  </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 SbCom from './sb.vue'
+
+export default defineComponent({
+  name: '',
+  components: {
+    SbCom
+  },
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      comps: [
+        {label: '设备', value: 'sb', com: SbCom}
+      ]
+    })
+    const comCpt = computed(() => {
+      return state.comps.filter(v => v.value === store.state.gis.gisParams.default.type)?.[0]
+    })
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+      comCpt
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/map-info/overlay/default/sb.vue

@@ -0,0 +1,152 @@
+<template>
+  <div ref="ref_sbDom" class="sb-info">
+    <div class="sb-info-head">
+      <SvgIcon class="__hover" name="tips" size="14" color="#8FFFFF"/>设备
+    </div>
+    <div class="sb-info-close __hover" @click="onCloseSb">
+      <img src="@/components/easyMap/images/close.png" alt=""/>
+    </div>
+    <div class="sb-main">
+      <div class="sb-item">
+        <div class="sb-item-label">名称：</div>
+        <div class="sb-item-value">{{qyParams.sbInfo?.name}}</div>
+      </div>
+      <div class="sb-item">
+        <div class="sb-item-label">状态：</div>
+        <div class="sb-item-value">{{qyParams.sbInfo?.online === '0' ? '在线' : '离线'}}</div>
+      </div>
+      <div class="play-button __hover" @click="showVideo = true">视频调阅</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 {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">
+.sb-info {
+  $footH: 10px;
+  width: 220px;
+  background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+  border-radius: 0px 4px 4px 4px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -$footH;
+    border-top: $footH solid #0043C4;
+    border-left: $footH solid transparent;
+    border-right: $footH solid transparent;
+  }
+  .sb-info-head {
+    min-width: 68px;
+    height: 18px;
+    position: absolute;
+    top: -18px;
+    left: 0;
+    font-size: 12px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    line-height: 8px;
+    &:before {
+      z-index: -1;
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+      border-radius: 2px 2px 0 0;/* 设置圆角 */
+      transform: perspective(20px)rotateX(4deg);
+      /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
+      transform-origin: bottom left;
+      /* bottom left = left bottom = 0 100% 中心点偏移量*/
+    }
+    .svg-icon {
+      margin: 0 4px 0 6px;
+    }
+  }
+  .sb-info-close {
+    position: absolute;
+    right: 0;
+    top: -16px;
+  }
+  .sb-main {
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    .sb-item {
+      display: flex;
+      .sb-item-label {
+        width: 42px;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 600;
+        color: #08FFFF;
+        line-height: 20px;
+      }
+      .sb-item-value {
+        flex: 1;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 20px;
+      }
+    }
+    .play-button {
+      width: 76px;
+      height: 24px;
+      background: #1280F1;
+      border-radius: 2px;
+      border: 1px solid #4BA0FF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      margin-left: calc((100% - 76px) / 2);
+      margin-top: 10px;
+    }
+  }
+}
+</style>