经营主体地图弹窗

src/components/centerMap.vue

@@ -8,7 +8,8 @@
     <el-dialog
       v-model="isShow"
       :title="currentMap.name + dialogTitle"
-      width="360"
+      :width="dialogWidth"
+      :style="{ 'background-image': 'url(' + getAssetsFile(bgImageVal) + ')' }"
       :show-close="false"
       :before-close="handleClose"
       custom-class="map-info-dialog"
@@ -22,7 +23,7 @@
 </template>
 <script setup>
 import { isEmpty, getAssetsFile } from '@/utils';
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
 const route = useRoute();
@@ -37,9 +38,19 @@ const props = defineProps({
       return [];
     },
   },
+  bgImage: {
+    type: String,
+    default: 'images/vsualized/mapopup.png',
+  },
+  dialogWidth: {
+    type: Number,
+    default: 360,
+  },
 });
 var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
-
+let bgImageVal = computed(() => {
+  return props.bgImage;
+});
 const isShow = ref(false);
 let geoData = geoJsonData;
 let mapName = ref('ZJ' + route.name);
@@ -183,16 +194,21 @@ const chartsData = reactive({
 let currentMap = reactive({});
 
 const mapClick = (data) => {
-  isShow.value = true;
-  currentMap = data;
-  emit('mapclick', currentMap);
+  if (props.markerData.length && props.markerData.length > 0) {
+    if (data.seriesType == 'effectScatter') {
+      isShow.value = true;
+      currentMap = data;
+      emit('mapclick', currentMap);
+    }
+  } else {
+    isShow.value = true;
+    currentMap = data;
+    emit('mapclick', currentMap);
+  }
 };
 const handleClose = () => {
   isShow.value = false;
 };
-onMounted(() => {
-  console.info('iconUrl', iconUrl);
-});
 
 const emit = defineEmits(['mapclick']);
 </script>
@@ -203,7 +219,10 @@ div {
 
 ::v-deep() {
   .el-dialog {
-    background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top;
+    background: url(iconUrl) no-repeat left top;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: 8px !important;
     min-height: 200px;
     max-height: 500px;
     overflow-y: auto;

src/views/business/components/businessMap.vue

@@ -1,19 +1,25 @@
 <template>
-  <centerMap :dialog-title="'投入品'" :marker-data="markerData" @mapclick="doMapclick">
+  <centerMap
+    :dialog-title="'经营主体'"
+    :marker-data="markerData"
+    :bg-image="'images/vsualized/mapopup1.png'"
+    :dialog-width="240"
+    @mapclick="doMapclick"
+  >
     <template #header>
       <div class="land-map-pop-header">
-        <div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
+        <div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '经营主体' }}</div>
       </div>
     </template>
     <template #dialogContent>
-      <!-- <div class="land-map-pop-content">
+      <div class="land-map-pop-content">
         <div v-for="(n, index) in list" :key="index" class="list-item">
           <div class="title">
             <span class="title-val"> {{ n.title }}</span>
           </div>
           <div class="value">{{ n.value }}{{ n.unit }}</div>
         </div>
-      </div> -->
+      </div>
     </template>
   </centerMap>
 </template>
@@ -33,25 +39,23 @@ const doMapclick = (data) => {
 };
 
 let markerData = reactive([
-  [
-    // 示例数据点，实际应用中应替换为真实的数据
-    {
-      name: '永星食品加工厂',
-      value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值
-      symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
-      itemStyle: {
-        color: '#4bffb4', //
-      },
+  // 示例数据点，实际应用中应替换为真实的数据
+  {
+    name: '永星食品加工厂',
+    value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值
+    symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
+    itemStyle: {
+      color: '#4bffb4', //
     },
-    {
-      name: '耿马镇',
-      value: [99.402267, 23.538889, 150], // 经度, 纬度, 数值
-      symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
-      itemStyle: {
-        color: '#4bffb4', // 勐永镇的颜色
-      },
+  },
+  {
+    name: '欣欣种源企业',
+    value: [99.402267, 23.538889, 150], // 经度, 纬度, 数值
+    symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
+    itemStyle: {
+      color: '#4bffb4', // 勐永镇的颜色
     },
-  ],
+  },
 ]);
 </script>