地图插槽

src/components/centerMap.vue

@@ -5,7 +5,18 @@
       <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
     </div>
 
-    <el-dialog v-model="isShow" :title="currentMap.name + dialogTitle" width="360" :before-close="handleClose" custom-class="map-info-dialog">
+    <el-dialog
+      v-model="isShow"
+      :title="currentMap.name + dialogTitle"
+      width="360"
+      :show-close="false"
+      :before-close="handleClose"
+      custom-class="map-info-dialog"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <slot name="header"></slot>
+      </template>
+      <slot name="dialogContent"></slot>
     </el-dialog>
   </div>
 </template>
@@ -163,7 +174,7 @@ let currentMap = reactive({});
 const mapClick = (data) => {
   isShow.value = true;
   currentMap = data;
-  console.info('mapClick', data);
+  emit('mapclick', currentMap);
 };
 const handleClose = () => {
   isShow.value = false;
@@ -171,6 +182,8 @@ const handleClose = () => {
 onMounted(() => {
   console.info('iconUrl', iconUrl);
 });
+
+const emit = defineEmits(['mapclick']);
 </script>
 <style lang="scss" scoped>
 div {
@@ -184,6 +197,7 @@ div {
     overflow-y: auto;
     background-size: 100% 100%;
     padding: 16px;
+    margin-top: 15%;
   }
   .el-dialog__header {
     margin-top: 10px;
@@ -197,6 +211,14 @@ div {
       top: 8px !important;
     }
   }
+  .map-dialog-my-header {
+    margin-top: 4px;
+    display: inline-flex;
+    justify-content: space-between;
+    h4 {
+      font-weight: normal !important;
+    }
+  }
 }
 .map-center-warp {
   width: 100%;

src/views/inputs/components/inputsMap.vue

@@ -0,0 +1,102 @@
+<template>
+  <centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
+    <template #header>
+      <div class="land-map-pop-header">
+        <div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
+      </div>
+    </template>
+    <template #dialogContent>
+      <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>
+    </template>
+  </centerMap>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import centerMap from '@/components/centerMap.vue';
+
+const unit = ref('家');
+const list = reactive([
+  { title: '监管机构', value: '1', color: '#01FEFD', unit: '家' },
+  { title: '监管人员', value: '2', color: '#FEF906', unit: '人' },
+  { title: '村级监管员', value: '5', color: '#02FD94', unit: '人' },
+  { title: '农资经营单位', value: '42', color: '#FE7F03', unit: '家' },
+  { title: '生产主体', value: '2', color: '#41BDFC', unit: '家' },
+  { title: '投入品规模', value: '3000', color: '#FC0003', unit: '万元' },
+]);
+
+let currentRegion = reactive(null);
+const doMapclick = (data) => {
+  currentRegion = data;
+};
+</script>
+
+<style lang="scss" scoped>
+.land-map-pop-header {
+  display: inline-flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 3px;
+  .title,
+  .value {
+    display: inline-block;
+    vertical-align: middle;
+    color: $color-white;
+  }
+  .title {
+    font-size: 18px;
+  }
+  .value {
+    font-size: 14px;
+  }
+}
+.land-map-pop-content {
+  width: 100%;
+  gap: 10px;
+  display: inline-flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  .list-item {
+    width: calc((100% - 10px) / 2);
+    display: inline-flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    .title {
+      display: inline-flex;
+      justify-content: flex-start;
+      .before {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .b-content {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+      .before,
+      .title-val {
+        display: inline-block;
+        vertical-align: middle;
+        padding: 0 5px 0 2px;
+        color: $color-custom-main;
+      }
+    }
+
+    .value {
+      display: inline-block;
+      text-align: right;
+      color: $color-white;
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/views/inputs/index.vue

@@ -24,7 +24,7 @@
       </div>
     </el-col>
     <el-col :span="12">
-      <centerMap></centerMap>
+      <inputsMap></inputsMap>
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
@@ -59,6 +59,7 @@ import monthlyuseCharts from './components/monthlyuseCharts.vue';
 import dealerDistributionCharts from './components/dealerDistributionCharts.vue';
 import casesAlerts from './components/casesAlerts.vue';
 import inputsType from './components/inputsType.vue';
+import inputsMap from './components/inputsMap.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {

src/views/land/components/landMap.vue

@@ -0,0 +1,101 @@
+<template>
+  <centerMap :dialog-title="'土地类型'">
+    <template #header>
+      <div class="land-map-pop-header">
+        <div class="title">土地类型</div>
+        <div class="value">总：88.5{{ unit }}</div>
+      </div>
+    </template>
+    <template #dialogContent>
+      <div class="land-map-pop-content">
+        <div v-for="(n, index) in list" :key="index" class="list-item">
+          <div class="title">
+            <div class="before">
+              <div class="b-content" :style="{ background: n.color }"></div>
+            </div>
+            <span class="title-val"> {{ n.title }}</span>
+          </div>
+          <div class="value">{{ n.value }}{{ unit }}</div>
+        </div>
+      </div>
+    </template>
+  </centerMap>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import centerMap from '@/components/centerMap.vue';
+
+const unit = ref('万亩');
+const list = reactive([
+  { title: '望天田', value: '60.8', color: '#01FEFD' },
+  { title: '菜地', value: '60.8', color: '#FEF906' },
+  { title: '水浇地', value: '60.8', color: '#02FD94' },
+  { title: '果园', value: '60.8', color: '#FE7F03' },
+  { title: '灌溉水田', value: '60.8', color: '#41BDFC' },
+  { title: '旱地', value: '60.8', color: '#FC0003' },
+]);
+</script>
+
+<style lang="scss" scoped>
+.land-map-pop-header {
+  display: inline-flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 3px;
+  .title,
+  .value {
+    display: inline-block;
+    vertical-align: middle;
+    color: $color-white;
+  }
+  .title {
+    font-size: 18px;
+  }
+  .value {
+    font-size: 14px;
+  }
+}
+.land-map-pop-content {
+  width: 100%;
+  gap: 10px;
+  display: inline-flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  .list-item {
+    width: calc((100% - 10px) / 2);
+    display: inline-flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    .title {
+      display: inline-flex;
+      justify-content: flex-start;
+      .before {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .b-content {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+      .before,
+      .title-val {
+        display: inline-block;
+        vertical-align: middle;
+        padding: 0 5px 0 2px;
+        color: $color-white;
+      }
+    }
+
+    .value {
+      display: inline-block;
+      text-align: right;
+      color: $color-white;
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/views/land/index.vue

@@ -44,7 +44,7 @@
       </div>
     </el-col>
     <el-col :span="12">
-      <centerMap :dialog-title="'土地资源'"></centerMap>
+      <landMap></landMap>
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
@@ -81,6 +81,7 @@ import landPlan from './components/landPlan.vue';
 import landPatrol from './components/landPatrol.vue';
 import LandAera from './components/LandAera.vue';
 import cake from './components/cake.vue';
+import landMap from './components/landMap.vue';
 import { nextTick, ref } from 'vue';
 
 const landPatrolRef = ref(null);