首页点击图层后弹窗显示详情

src/views/sys/exception/Converge.vue

@@ -3,6 +3,7 @@
     <Map
       @onload="handlerOnMapLoad"
       @handlerGetDetails="handlerGetDetails"
+      @getDetailByFeature="getDetailByFeature"
       style="
         position: absolute;
         top: 0px;
@@ -90,6 +91,36 @@
       </div>
       <Monitor v-if="showTCLPlayer" :play-url="playUrl"></Monitor>
     </div>
+
+    <div
+      class="attribute"
+      :style="{
+        height: isMinusAttributeWindow ? '540px' : '30px',
+      }"
+      v-if="showAttributeWindow"
+    >
+      <span class="span-title">详细信息</span>
+      <a-tooltip placement="top">
+        <template #title>
+          <span>按下空格快速切换</span>
+        </template>
+        <a-button class="span-button-minus" type="link" @click="minusAttributeWindow">
+          <MinusOutlined v-if="isMinusAttributeWindow" style="color: black" />
+          <ExpandAltOutlined
+            v-if="!isMinusAttributeWindow"
+            :style="{ fontSize: '17px', color: 'black' }"
+          />
+        </a-button>
+      </a-tooltip>
+      <a-button class="span-button-close" type="link" @click="closeAttributeWindow">
+        <CloseOutlined style="color: black" />
+      </a-button>
+      <AttributeWindow
+        v-if="isMinusAttributeWindow"
+        :showAttributeFeature="showAttributeFeature"
+        :initNameList="initNameList"
+      />
+    </div>
   </div>
 </template>
 
@@ -119,11 +150,14 @@
   import { getRedLineCaseInfoById } from '@/api/redlinesupervision/index';
   import { getRepairCaseInfoById } from '@/api/shengtaixiufu/index';
   import { getCaseInfoByIdtotal } from '@/api/keyproblem/keyissuesI/index';
+  import { getDataTableRecord } from '@/api/demo/system';
+  import AttributeWindow from '@/views/demo/system/achievement/Display/AttributeWindow.vue';
 
   const route: any = useRoute();
   const subject = ref(route.params.id);
   const legends: any = ref([]);
   const layerSettings = ref();
+  const initNameList: any = ref([]);
   // details
   const showInfoOpen = ref<Boolean>(false);
   const showInfoData = ref();
@@ -301,7 +335,7 @@
 
   // 视频监控
   import Monitor from './mapComponent/monitor/index.vue';
-  import { CloseOutlined } from '@ant-design/icons-vue';
+  import { CloseOutlined, MinusOutlined, ExpandAltOutlined } from '@ant-design/icons-vue';
   import { is } from '@/utils/is';
 
   const showTCLPlayer = ref(false);
@@ -379,6 +413,30 @@
   const goRouter = () => {
     route.push({ path: '/caseoffence/feifacaikuang' })
   }
+  // 点击矢量图层展示点击块的属性------------------------------------------------------------
+  const showAttributeWindow = ref(false);
+  const isMinusAttributeWindow = ref(true);
+  const showAttributeFeature: any = ref();
+
+  const getDetailByFeature = (feature) => {
+    getDataTableRecord({
+      id: feature.properties.id,
+      dataTable: feature.source,
+    }).then((res) => {
+      showAttributeFeature.value = res;
+      showAttributeWindow.value = true;
+      if (!showAttributeWindow.value) {
+        isMinusAttributeWindow.value = true;
+      }
+    });
+  };
+  const minusAttributeWindow = () => {
+    isMinusAttributeWindow.value = !isMinusAttributeWindow.value;
+  };
+  const closeAttributeWindow = () => {
+    showAttributeWindow.value = false;
+    isMinusAttributeWindow.value = true;
+  };
 </script>
 
 <style lang="less" scoped>

src/views/sys/exception/Converge/index.vue

@@ -56,6 +56,7 @@
     'handlerGetDetails',
     'showMonitor',
     'handlerQueryIntersectTif',
+    'getDetailByFeature',
   ]);
 
   let isZoomVisible: any = false;
@@ -946,6 +947,10 @@
             },
             paint: {},
           });
+          map.on('click', item.id, (e) => {
+            // 显示弹窗
+            emits('getDetailByFeature', e.features[0]);
+          });
           tifLayers.value.push(item.id);
 
           map.moveLayer(item.id, 'historyLayerFill');