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

<template>
  <div class="gradient-text title">图层分析</div>
  <div class="box">
    <div v-for="(item, index) in dataList" :key="index" :class="item.checked ? 'box-item box-item-active' : 'box-item'" @click="handleClick(item)">
      {{ item.name + '(' + item.value + ')' }}
    </div>
  </div>
  <div>各区县分布统计</div>
  <div style="background-color: #d7d7d7; width: 1200px">
    <Chart :option="chartOption1" style="width: 1200px; height: 500px" />
  </div>
  <div>避难场所</div>
  <div style="background-color: #d7d7d7; width: 1200px">
    <Chart :option="chartOption2" style="width: 1200px; height: 500px" />
  </div>
</template>

<script lang="ts" setup>
import { PointType } from '@/api/globalMap/type';
import {
  getCountPointInfo,
  getCountPointInfoAreaList,
  getEmergencyExpertType,
  getEmergencyShelterType,
  getHospitalType,
  getRescueMateriaType,
  getSchoolType,
  getWaterloggedRoadsType
} from '@/api/globalMap/layerAnalysis';
import { option4, option5 } from './echartOptions';
import BigNumber from 'bignumber.js';

interface Props {
  pointType: PointType[];
}

const props = withDefaults(defineProps<Props>(), {});
let dataList = ref([]);
let chartOption1 = reactive(option4);
let chartOption2 = reactive(option5);

// 得到选中的标签的类型
const getOption = (data, key = 'dataType') => {
  if (!data) {
    return;
  }
  let path = [];
  data.forEach((item) => {
    if (item.checked) {
      path.push(item[key]);
    }
  });
  return path.toString();
};

watch(
  () => props.pointType,
  () => {
    if (!props.pointType || props.pointType.length === 0) {
      return;
    }
    getCountPointInfo({ option: getOption(props.pointType, 'path') }).then((res) => {
      res.data.list.forEach((item) => {
        item.checked = true;
      });
      dataList.value = res.data.list;
    });
  },
  {
    immediate: true,
    deep: true
  }
);
watch(
  dataList,
  () => {
    const checkedData = dataList.value.filter((item) => {
      return item.checked;
    });
    if (!dataList.value || dataList.value.length === 0 || checkedData.length === 0) {
      chartOption1.yAxis.data = [];
      chartOption1.series[0].data = [];
      chartOption2.series[0].data = [];
      return;
    }
    // 各区县
    getCountPointInfoAreaList({ option: getOption(checkedData) }).then((res) => {
      const data = res.data.list;
      if (data.length > 0) {
        // 使用reduce方法合并相同area的num
        const mergedArray = data.reduce((acc, current) => {
          // 检查累加器（acc）中是否已有当前area
          const existing = acc.find((item) => item.area === current.area);
          if (existing) {
            // 如果存在，则累加num
            existing.num = BigNumber(existing.num).plus(current.num).toNumber();
          } else {
            // 如果不存在，则添加到累加器
            acc.push(current);
          }
          return acc;
        }, []);
        let yData = [];
        let seriesData = [];
        mergedArray.forEach((item) => {
          yData.push(item.area);
          seriesData.push(item.num);
        });
        chartOption1.yAxis.data = yData;
        chartOption1.series[0].data = seriesData;
      }
    });
    // 类型统计
    if (checkedData.length === 1) {
      let methodList = {
        '1': getEmergencyExpertType,
        '2': getRescueMateriaType,
        '3': getEmergencyShelterType,
        '4': getWaterloggedRoadsType,
        '5': getSchoolType,
        '6': getHospitalType
      };
      let method = methodList[dataList.value[0].dataType];
      if (!method) return;
      method().then((res) => {
        chartOption2.series[0].data = res.rows;
      });
    } else {
      chartOption2.series[0].data = checkedData;
    }
  },
  {
    immediate: true,
    deep: true
  }
);
const handleClick = (item) => {
  item.checked = !item.checked;
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 60px;
  position: absolute;
  top: 12px;
  left: 210px;
}
.box {
  display: flex;
  flex-wrap: wrap;
  font-size: 38px;
  .box-item {
    background-color: #ffffff;
    color: #000;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 20px;
    &:hover {
      background-color: #00aaff;
      color: #fff;
    }
  }
  .box-item-active {
    background-color: #00aaff;
    color: #fff;
  }
}
</style>