Merge remote-tracking branch 'origin/dev' into dev

src/api/globalMap/index.ts

@@ -87,3 +87,4 @@ export const getVideoInfo = (params) => {
     data: params
   });
 };
+

src/api/globalMap/layerAnalysis.ts

@@ -0,0 +1,73 @@
+import request from '@/utils/request';
+
+// 全域地图-图层分析-点位信息统计
+export const getCountPointInfo = (params) => {
+  return request({
+    url: '/api/gateway/v1/get_count_point_info',
+    method: 'get',
+    params: params
+  });
+};
+
+// 全域地图-图层分析-点位信息各区县分布统计
+export const getCountPointInfoAreaList = (data) => {
+  return request({
+    url: '/api/gateway/v1/get_count_point_info_area_list',
+    method: 'post',
+    data: data
+  });
+};
+
+// 专家分类统计
+export const getEmergencyExpertType = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_count_point_info_type_emergency_expert',
+    method: 'post',
+    data: data
+  });
+};
+
+// 救援物资分类统计
+export const getRescueMateriaType = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_count_point_info_type_rescue_materia',
+    method: 'post',
+    data: data
+  });
+};
+
+// 避难场所分类统计
+export const getEmergencyShelterType = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_count_point_info_type_emergency_shelter',
+    method: 'post',
+    data: data
+  });
+};
+
+// 避难场所分类统计
+export const getWaterloggedRoadsType = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_count_point_info_type_waterlogged_roads',
+    method: 'post',
+    data: data
+  });
+};
+
+// 学校分类统计
+export const getSchoolType = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_count_point_info_type_school',
+    method: 'post',
+    data: data
+  });
+};
+
+// 医院分类统计
+export const getHospitalType = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_count_point_info_type_hospital',
+    method: 'post',
+    data: data
+  });
+};

src/api/globalMap/type.ts

@@ -10,4 +10,6 @@ export interface MapQuery {
 export interface PointType {
   name: string;
   path: string;
+  checked?: boolean;
+  checked2?: boolean;
 }

src/types/components.d.ts

@@ -45,6 +45,9 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -61,6 +64,8 @@ declare module 'vue' {
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -71,6 +76,7 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
@@ -99,6 +105,7 @@ declare module 'vue' {
     UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/emergencyCommandMap/index.vue

@@ -1,14 +1,12 @@
 <template>
-  <div id="dashboard-container">
-    <div class="dashboard-container">
-      <HeaderSection />
-      <div class="dashboard-content">
-        <LeftSection />
-        <MiddleSection />
-        <RightSection />
-      </div>
-      <FooterSection style="position: absolute; bottom: 0; left: 0" />
+  <div id="dashboard-container" class="dashboard-container">
+    <HeaderSection />
+    <div class="dashboard-content">
+      <LeftSection />
+      <MiddleSection />
+      <RightSection />
     </div>
+    <FooterSection style="position: absolute; bottom: 0; left: 0" />
   </div>
 </template>
 

src/views/globalMap/RightMenu/LayerAnalysis.vue

@@ -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>
 

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/echartOptions.ts

@@ -221,3 +221,53 @@ export const option3 = {
     }
   ]
 };
+
+// 各区县分布统计
+export const option4 = {
+  tooltip: {
+    show: true
+  },
+  xAxis: {
+    type: 'value'
+  },
+  yAxis: {
+    type: 'category',
+    data: []
+  },
+  series: [{
+    data: [],
+    type: 'bar'
+  }]
+}
+
+export const option5 = {
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: '5%',
+    left: 'center'
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+};

src/views/globalMap/RightMenu/index.vue

@@ -15,17 +15,17 @@
       </div>
       <div v-show="menuState.showMenu" class="menu-content">
         <!--图层分析-->
-        <LayerAnalysis v-if="menuState.activeIndex === 0" :pointType="pointType" />
+        <LayerAnalysis v-if="menuState.showMenu && menuState.activeIndex === 0" :pointType="pointType" />
         <!--空间分析-->
-        <SpatialAnalysis v-if="menuState.activeIndex === 1" :analysis-data="analysisData" />
+        <SpatialAnalysis v-if="menuState.showMenu && menuState.activeIndex === 1" :location="location" />
         <!--江湖河库-->
-        <Reservoir v-if="menuState.activeIndex === 2" />
+        <Reservoir v-if="menuState.showMenu && menuState.activeIndex === 2" />
         <!--路网视频-->
-        <RoadNetworkVideo v-if="menuState.activeIndex === 3" />
+        <RoadNetworkVideo v-if="menuState.showMenu && menuState.activeIndex === 3" />
         <!--水库监测-->
-        <ReservoirMonitor v-if="menuState.activeIndex === 4" />
+        <ReservoirMonitor v-if="menuState.showMenu && menuState.activeIndex === 4" />
         <!--河道监测-->
-        <RiverMonitor v-if="menuState.activeIndex === 5" />
+        <RiverMonitor v-if="menuState.showMenu && menuState.activeIndex === 5" />
       </div>
     </div>
   </div>
@@ -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);
@@ -99,6 +97,8 @@ const addMarkers = (item) => {
         return;
       }
     } else {
+      // 右侧图层分析状态
+      item.checked2 = true;
       pointType.value.push(item);
     }
     let path = [];
@@ -108,7 +108,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 +180,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) => {