yjdp-web/src/views/globalMap/AnalyzeDataDialog.vue

<template>
  <div class="analyze-data-container">
    <div class="item">
      <div class="item-label">行政镇</div>
      <div class="item-value">{{ analysisSpatialData.townName }}个</div>
    </div>
    <div class="item">
      <div class="item-label">人口</div>
      <div class="item-value">{{ analysisSpatialData.populationNum }}个</div>
    </div>
    <div class="item">
      <div class="item-label">面积</div>
      <div class="item-value">{{ analysisSpatialData.area }}平方米</div>
    </div>
    <div class="item">
      <div class="item-label">最近一年GDP</div>
      <div class="item-value">{{ analysisSpatialData.gdp }}元</div>
    </div>
    <div class="item">
      <div class="item-label">易涝点</div>
      <div class="item-value">{{ analysisSpatialData.easyFloodPoint }}个</div>
    </div>
    <div class="item">
      <div class="item-label">医院</div>
      <div class="item-value">{{ analysisSpatialData.medicalInstitutionNum }}个</div>
    </div>
  </div>
</template>

<script lang="ts" setup name="AnalyzeDataDialog">
interface AnalysisSpatialData {
  townName: string;
  area: string;
  populationNum: string;
  gdp: string;
  easyFloodPoint: string;
  medicalInstitutionNum: string;
}
interface Props {
  analysisSpatialData: AnalysisSpatialData;
}
const props = withDefaults(defineProps<Props>(), {});
</script>

<style lang="scss" scoped>
.analyze-data-container {
  width: 280px;
  height: 400px;
  position: absolute;
  top: 30px;
  right: 30px;
  background-color: #041d55;
  color: #fff;
  font-size: 16px;
  padding: 15px;
  .item {
    display: flex;
    justify-content: space-between;
    .item-label {
      margin-right: 8px;
    }
  }
}
</style>