|
|
@@ -1,22 +1,139 @@
|
|
|
<template>
|
|
|
<div class="gradient-text title">图层分析</div>
|
|
|
<div class="box">
|
|
|
- <div v-for="(item, index) in pointType" :key="index" class="box-item" @click="handleClick(item.path)">{{ item.name }}</div>
|
|
|
+ <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 handleClick = (path: string) => {
|
|
|
- console.log(path);
|
|
|
+// 得到选中的标签的类型
|
|
|
+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,
|
|
|
+ () => {
|
|
|
+ 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>
|
|
|
|
