yjdp-web/src/views/globalMap/RightMenu/SpatialAnalysis.vue

<template>
  <div>空间分析</div>
  <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.townName }}</div>
    </div>
    <div class="item">
      <div class="item-label">面积(km²)</div>
      <div class="item-value">{{ analysisSpatialData.area }}</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">GDP(万元)</div>
      <div class="item-value">{{ analysisSpatialData.expert }}</div>
    </div>
    <div class="flex" style="margin: 20px 0; width: 100%">
      <el-input v-model="keyword" size="large" style="flex: 1;" />
      <el-button type="primary" size="large">搜索</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup name="AnalyzeDataDialog">
import BigNumber from 'bignumber.js';

interface AnalysisSpatialData {
  townName: string;
  area: number;
  populationNum: number;
  gdp: number;
  easyFloodPoint: number;
  medicalInstitutionNum: number;
  expert: number;
}
interface Props {
  selectedScope: any;
}
const props = withDefaults(defineProps<Props>(), {});
const keyword = ref('');
const analysisSpatialData = computed(() => {
  const data: AnalysisSpatialData = {
    townName: '',
    area: 0,
    populationNum: '',
    gdp: '',
    easyFloodPoint: '',
    medicalInstitutionNum: '',
    expert: 0
  };
  for (let key in props.selectedScope) {
    data.area = new BigNumber(data.area).plus(props.selectedScope[key].area);
    data.expert = new BigNumber(data.expert).plus(props.selectedScope[key].expert);
    // selectedScope[key] = '';
  }
  return data;
});
</script>

<style lang="scss" scoped>
.analyze-data-container {
  width: 100%;
  font-size: 16px;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: calc(33.333333%);
    height: 100px;
    background-color: #fff;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    &:nth-child(3), &:nth-child(4), &:nth-child(5) {
      border-bottom: 1px solid #000;
    }
    &:nth-child(5) {
      border-right: 1px solid #000;
    }
    .item-label {
      margin-bottom: 18px;
    }
  }
}
</style>