空间分析搜索

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -11,62 +11,90 @@
     </div>
     <div class="item">
       <div class="item-label">面积(km²)</div>
-      <div class="item-value">{{ validateNum(analysisData.area) }}</div>
+      <div class="item-value">{{ validateNum(analysisData.areaSize) }}</div>
     </div>
     <div class="item">
       <div class="item-label">常住人口(万)</div>
-      <div class="item-value">{{ validateNum(analysisData.populationNum) }}</div>
+      <div class="item-value">{{ validateNum(analysisData.populationSize) }}</div>
     </div>
     <div class="item">
       <div class="item-label">GDP(万元)</div>
-      <div class="item-value">{{ validateNum(analysisData.gdp) }}</div>
+      <div class="item-value">{{ validateNum(analysisData.GDP) }}</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 class="flex">
+      <div v-for="(item, index) in filteredList" :key="index" class="item2">{{ item.name + '(' + item.list.length + ')' }}</div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup name="AnalyzeDataDialog">
 import { validateNum } from '@/utils/ruoyi';
+import { getSpatialAnalysis } from '@/api/globalMap';
+import { deepClone } from '@/utils';
 
 interface Props {
-  analysisData: {
-    townCount: string;
-    villageCount: string;
-    area: string;
-    populationNum: string;
-    gdp: string;
-  };
+  location: {};
 }
 const props = withDefaults(defineProps<Props>(), {});
 const keyword = ref('');
-// const analysisSpatialData = computed(() => {
-//   const data = props.analysisData;
-//   const data = {
-//     // 镇数量
-//     townCount: 0,
-//     // 村数量
-//     villageCount: 0,
-//     // 面积
-//     area: 0,
-//     // 常住人口
-//     populationNum: 0,
-//     gdp: 0,
-//     // 物资数
-//     emergencyManagementCount: 0,
-//     // 专家数
-//     emergencyExpertCount: 0
-//   };
-//   for (let key in props.analysisData) {
-//     // data.area = new BigNumber(data.area).plus(props.analysisData[key].area);
-//     // data.expert = new BigNumber(data.expert).plus(props.analysisData[key].expert);
-//     // analysisData[key] = '';
-//   }
-//   data.area = new BigNumber(data.area).dividedBy(1000000);
-//   return data;
-// });
+let analysisData = ref({
+  townCount: '',
+  villageCount: '',
+  areaSize: '',
+  populationSize: '',
+  GDP: '',
+  list: []
+});
+const filteredList = computed(() => {
+  const data = deepClone(analysisData.value.list);
+  return data.filter((item) => {
+    if (!!keyword.value) {
+      // 模糊搜索逻辑，这里简单使用 includes 进行包含关系判断
+      let flag = item.name.toLowerCase().includes(keyword.value.toLowerCase());
+      if (flag) {
+        return true;
+      } else {
+        let res = filteredSubItems(item);
+        if (res && res.length > 0) {
+          item.list = res;
+          return true;
+        } else {
+          return false;
+        }
+      }
+    } else {
+      return true;
+    }
+  });
+});
+const filteredSubItems = (parentItem) => {
+  return parentItem.list.filter((subItem) => {
+    return subItem.name.toLowerCase().includes(keyword.value.toLowerCase());
+  });
+};
+watch(
+  () => props.location,
+  () => {
+    getSpatialAnalysis(props.location).then((res) => {
+      if (res.data && res.data.list) {
+        const list = [];
+        res.data.list.forEach((item) => {
+          if (item.num > 0) {
+            list.push(item);
+          }
+        });
+        res.data.list = list;
+      }
+      analysisData.value = res.data;
+    });
+  },
+  {
+    immediate: true
+  }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -87,7 +115,9 @@ const keyword = ref('');
     justify-content: center;
     align-items: center;
     font-size: 36px;
-    &:nth-child(3), &:nth-child(4), &:nth-child(5) {
+    &:nth-child(3),
+    &:nth-child(4),
+    &:nth-child(5) {
       border-bottom: 1px solid #000;
     }
     &:nth-child(5) {
@@ -98,4 +128,10 @@ const keyword = ref('');
     }
   }
 }
+.item2 {
+  background-color: #fff;
+  font-size: 36px;
+  padding: 10px 20px;
+  margin-right: 20px;
+}
 </style>

src/views/globalMap/RightMenu/index.vue

@@ -17,7 +17,7 @@
         <!--图层分析-->
         <LayerAnalysis v-if="menuState.activeIndex === 0" :pointType="pointType" />
         <!--空间分析-->
-        <SpatialAnalysis v-if="menuState.activeIndex === 1" :analysis-data="analysisData" />
+        <SpatialAnalysis v-if="menuState.activeIndex === 1" :location="location" />
         <!--江湖河库-->
         <Reservoir v-if="menuState.activeIndex === 2" />
         <!--路网视频-->
@@ -65,7 +65,7 @@ const activeName = computed(() => {
   }
   return name;
 });
-const analysisData = ref({});
+const location = ref([]);
 
 // 点击收缩展开
 const clickContractMenu = () => {
@@ -88,7 +88,7 @@ const handleMenu = (name) => {
 };
 
 const setAnalysisData = (data) => {
-  analysisData.value = data;
+  location.value = data;
   handleMenu('空间分析');
 };
 

src/views/globalMap/index.vue

@@ -81,7 +81,6 @@ const switchMap = (key) => {
   activeMap.value = key;
 };
 
-let showDialog = ref(false);
 let pointType = ref<PointType[]>([]);
 let markerList = ref([]);
 
@@ -89,7 +88,6 @@ const addMarkers = (item) => {
   const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
   if (dom) {
     if (!item.checked) {
-      showDialog.value = false;
       let index = pointType.value.findIndex((item2) => item.path === item2.path);
       if (index > -1) {
         pointType.value.splice(index, 1);
@@ -108,7 +106,6 @@ const addMarkers = (item) => {
     getPointInfo(path.toString()).then((res) => {
       const data = res.data && res.data.list ? res.data?.list : [];
       markerList.value = data;
-      showDialog.value = true;
       data.forEach((item2) => {
         // 获取图标
         if (iconList[item2.dataType]) {
@@ -181,49 +178,34 @@ const undo = () => {
   const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
   dom.handleUndo();
 };
-interface AnalysisSpatialData {
-  townName: string;
-  area: number | undefined;
-  populationNum: string;
-  gdp: string;
-  easyFloodPoint: string;
-  medicalInstitutionNum: string;
-  expert: string;
-}
 let selectedScope = reactive({});
 // 空间分析数据
-const analysisSpatialData = reactive<AnalysisSpatialData>({
-  townName: '',
-  area: undefined,
-  populationNum: '',
-  gdp: '',
-  easyFloodPoint: '',
-  medicalInstitutionNum: '',
-  expert: ''
-});
-// 空间分析数据
 const analysisSpatial = (data, len?: string) => {
-  showDialog.value = false;
+  debugger
   // 已选中的范围
   if (selectedScope[data.id]) {
     delete selectedScope[data.id];
     if (JSON.stringify(selectedScope) === '{}') {
       rightMenuRef.value.clickContractMenu();
+      return;
     }
-    return;
   }
+  selectedScope[data.id] = data;
   let location = [];
-  if (data.path && data.path.length > 1) {
-    data.path.forEach((item) => {
-      location.push({
-        x: item[0],
-        y: item[1]
+  for (let key in selectedScope) {
+    let itemLocation = [];
+    if (selectedScope[key].path && selectedScope[key].path.length > 1) {
+      selectedScope[key].path.forEach((item) => {
+        itemLocation.push({
+          x: item[0],
+          y: item[1]
+        });
       });
-    });
+      location.push(itemLocation);
+    }
   }
-  getSpatialAnalysis([location]).then((res) => {
-    rightMenuRef.value.setAnalysisData(res.data);
-  });
+  debugger
+  rightMenuRef.value.setAnalysisData(location);
 };
 // 取消显示
 const unSelectGraphics = (data) => {