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

<template>
  <div class="menu-content">
    <div class="gradient-text common-dialog-title2">图层分析</div>
    <div class="scroll-box">
      <div class="box">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          :class="item.checked ? 'box-item box-item-active' : 'box-item'"
          :title="item.name"
          @click="handleClick(item)"
        >
          <div class="text1">{{ item.name }}</div>
          <div class="text2">{{ item.value }}</div>
        </div>
      </div>
      <div class="box2">
        <div class="box2-title">各区县分布统计</div>
        <Chart :option="chartOption1" style="width: 100%; height: 350px" />
      </div>
      <div class="box2">
        <div class="box2-title">类型统计</div>
        <div class="box2-right">
          <Chart :option="chartOption2" style="width: 250px; height: 100%" />
          <div class="legend-box">
            <div v-for="(item, index) in legendData" :key="index" class="legend-item">
              <span class="dot" :style="{ backgroundColor: getColor(index) }"></span>{{ item.name }}：{{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PointType } from '@/api/globalMap/type';
import {
  getBuildingProjectType,
  getChemicalType,
  getChemicalWarehouseType,
  getConstructionSitesType,
  getCountPointInfo,
  getCountPointInfoAreaList,
  getCountPointInfoTypeErtongfulijigou,
  getCountPointInfoTypeMdpUnits,
  getCountPointInfoTypeYangLaoJiGou,
  getDroneType,
  getEmergencyDisasterInfoOfficerType,
  getEmergencyExpertType,
  getEmergencyShelterType,
  getEmergencyTransportResourcesType,
  getGasolineType,
  getHospitalType,
  getMajorHazardSourceType,
  getMidmapDzzhType,
  getMiningOperationsType,
  getMiningType,
  getRainPitsType,
  getRescueMateriaType,
  getSchoolType,
  getShipType,
  getStationInfoType,
  getTouristAttractionType,
  getWaterloggedRoadsType,
  getYardSitesType
} from '@/api/globalMap/layerAnalysis';
import { option4, option5 } from './echartOptions';
import BigNumber from 'bignumber.js';

interface Props {
  pointType: PointType[];
}

const props = withDefaults(defineProps<Props>(), {});
let colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
let dataList = ref([]);
let legendData = ref([]);
let chartOption1 = reactive(option4);
let chartOption2 = reactive(option5);

const getColor = (index) => {
  if (colorList[index]) {
    return colorList[index];
  } else {
    return '#edf2fa';
  }
};

// 得到选中的标签的类型
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, 'component') }).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 = [];
      chartOption1.series[1].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 = [];
        let seriesData2 = [];
        let maxData = [];
        let max = 0;
        mergedArray.forEach((item) => {
          yData.push(item.area);
          seriesData.push(item.num);
          if (item.num === 0) {
            seriesData2.push([item.num, null]);
          } else {
            seriesData2.push([item.num, item.area]);
          }
          if (item.num > max) {
            max = item.num;
          }
        });
        if (max === 0) {
          max = 50;
        } else {
          max = parseInt(new BigNumber(max).multipliedBy(new BigNumber(1.2)).toNumber());
        }
        for (let i = 0; i < seriesData.length; i++) {
          maxData.push(max);
        }

        chartOption1.yAxis.data = yData;
        chartOption1.xAxis.max = max;
        chartOption1.series[0].data = seriesData;
        chartOption1.series[1].data = seriesData2;
        chartOption1.series[2].data = maxData;
      }
    });
    // 类型统计
    if (checkedData.length === 1) {
      let methodList = {
        '1': getEmergencyExpertType,
        '2': getRescueMateriaType,
        '3': getEmergencyShelterType,
        '4': getWaterloggedRoadsType,
        '5': getSchoolType,
        '6': getHospitalType,
        '7': getGasolineType,
        '8': getMiningType,
        '11': getChemicalType,
        '10': getShipType,
        '12': getChemicalType,
        '13': getChemicalType,
        '14': getChemicalType,
        '15': getDroneType,
        '16': getRainPitsType,
        '17': getMidmapDzzhType,
        '18': getMiningOperationsType,
        '20': getCountPointInfoTypeMdpUnits,
        '21': getBuildingProjectType,
        '22': getChemicalWarehouseType,
        '23': getMajorHazardSourceType,
        '24': getStationInfoType,
        '25': getYardSitesType,
        '26': getTouristAttractionType,
        '27': getConstructionSitesType,
        '28': getEmergencyTransportResourcesType,
        '29': getEmergencyDisasterInfoOfficerType,
        '44': getCountPointInfoTypeErtongfulijigou,
        '45': getCountPointInfoTypeYangLaoJiGou
      };
      let method = methodList[dataList.value[0].dataType];
      if (!method) return;
      method().then((res) => {
        legendData.value = res.rows;
        chartOption2.legend = { show: false };
        chartOption2.series[0].data = res.rows;
      });
    } else {
      const tempData = [];
      checkedData.forEach((item) => {
        tempData.push(item);
      });
      legendData.value = tempData;
      chartOption2.legend = { show: false };
      chartOption2.series[0].data = checkedData;
    }
  },
  {
    immediate: true,
    deep: true
  }
);
const handleClick = (item) => {
  item.checked = !item.checked;
};
</script>

<style lang="scss" scoped>
.menu-content {
  width: 573px;
  height: 764px;
  background: url('@/assets/images/map/rightMenu/layerAnalysis/dialog.png') no-repeat;
  background-size: 100% 100%;
  padding: 60px 10px 10px 15px;
  font-size: 14px;
  position: relative;
  color: #fff;
  .scroll-box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: auto;
  }
}
.box {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  .box-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px 0 20px;
    cursor: pointer;
    width: 184px;
    height: 43px;
    background: url('@/assets/images/map/rightMenu/layerAnalysis/tag.png') no-repeat;
    background-size: 100% 100%;
    margin-left: -4px;
    &:hover {
      background: url('@/assets/images/map/rightMenu/layerAnalysis/tagActive.png') no-repeat;
      background-size: 100% 100%;
    }
    .text1 {
      flex: 1;
      font-size: 14px;
      color: #ffffff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-right: 10px;
    }
    .text2 {
      font-family: 'BEBAS-1';
      margin-left: 5px;
      font-size: 14px;
      color: #00e8ff;
    }
  }
  .box-item-active {
    background: url('@/assets/images/map/rightMenu/layerAnalysis/tagActive.png') no-repeat;
    background-size: 100% 100%;
  }
}
.box2 {
  margin-top: 7px;
  .box2-title {
    height: 27px;
    background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat bottom left;
    background-size: 135px 20px;
    padding-left: 28px;
    font-size: 16px;
    color: #f4f7fa;
  }
  .box2-right {
    width: 100%;
    height: 230px;
    display: flex;
    align-items: flex-start;
    .legend-box {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      .legend-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        margin-right: 10px;
      }
      .dot {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 6px;
      }
    }
  }
}
</style>