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

src/api/emergencyCommandMap/JointDuty.ts

@@ -37,3 +37,25 @@ export function getCheckinList(eventId: string) {
     }
   });
 }
+
+// 更新事发地点 (用于将表单数据发送到服务器以更新某个事件的位置信息)
+export function updateEventLocation(evevtId: string, address: string, longitude: string, latitude: string) {
+  return request({
+    url: '/api/event_management/event/save_address',
+    method: 'post',
+    params: {
+      eventId: eventId,
+      address: address,
+      longitude: longitude,
+      latitude: latitude
+    }
+  });
+}
+
+export function addEvent(data) {
+  return request({
+    url: '/api/event_management/event/create',
+    method: 'post',
+    data: data
+  });
+}

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/components/Map/company-map.vue

@@ -77,6 +77,7 @@
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { useRouter } from 'vue-router';
+import { updateEventLocation } from '@/api/emergencyCommandMap/JointDuty';
 
 const props = defineProps({
   visible: {
@@ -108,6 +109,7 @@ let searchList = ref([]);
 let searchPop = ref(false);
 let placeSearch;
 let form = reactive({
+  eventId: '',
   address: '',
   longitude: '',
   latitude: ''
@@ -281,11 +283,18 @@ function submit() {
       console.log('提交数据', form);
       router.push({
         path: '/emergencyCommandMap',
-        query: { event_id: '11111111' }
+        query: { event_id: eventId.value }
       });
     }
   });
 }
+// 获取event_id
+updateEventLocation().then((res) => {
+  form.event_id = res.data.event_id;
+  form.address = res.data.address;
+  form.latitude = res.data.latitude;
+  form.longitude = res.data.longitude;
+});
 </script>
 
 <style lang="scss" scoped>

src/views/emergencyCommandMap/MiddleSection.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="middle-section">
+    <div class="search-button">
+      <el-button type="primary" @click="handleQuery1">备战防御</el-button>
+      <el-button type="primary" @click="handleQuery2">指挥调度</el-button>
+    </div>
     <GlobalMap is-component width="3321" height="2140" />
   </div>
 </template>
@@ -15,6 +19,18 @@ import GlobalMap from '@/views/globalMap/index.vue';
   height: 2140px;
   animation: slideAndFade 1.5s;
 }
+.search-button {
+  position: absolute;
+  top: 240px;
+  left: 3700px;
+  z-index: 10;
+}
+.el-button {
+  width: 360px;
+  height: 100px;
+  padding: 20px 40px;
+  font-size: 48px;
+}
 
 @keyframes slideAndFade {
   0% {

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) => {

src/views/routineCommandMap/MiddleSection.vue

@@ -4,7 +4,7 @@
       <el-button type="primary" @click="handleQuery1">备战防御</el-button>
       <el-button type="primary" @click="handleQuery2">指挥调度</el-button>
     </div>
-    <company-map v-model:visible="mapDialogVisible" />
+    <company-map v-model:visible="mapDialogVisible" @change="handleMapChange" />
     <GlobalMap is-component width="3894" height="2140" />
   </div>
 </template>
@@ -16,6 +16,7 @@ import { ref } from 'vue';
 import CompanyMap from './company-map.vue';
 
 const form = ref({
+  eventId: '',
   address: '',
   lon: '',
   lat: ''
@@ -28,11 +29,12 @@ const handleQuery1 = () => {
 const handleQuery2 = () => {
   mapDialogVisible.value = true;
 };
+
 const handleMapChange = (data) => {
-  form.value.drillAddress = data.address;
+  form.value.address = data.address;
   form.value.lon = data.lnglat[0];
-  form.value.lat = data.lnglat[1];
-  mapDialogVisible.value = false;
+  form.value.lat = data.lat[1];
+  mapDialogVisible.value = true;
 };
 </script>
 

src/views/routineCommandMap/company-map.vue

@@ -77,6 +77,7 @@
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { useRouter } from 'vue-router';
+import { updateEventLocation, addEvent } from '@/api/emergencyCommandMap/JointDuty';
 
 const props = defineProps({
   visible: {
@@ -137,7 +138,6 @@ onUnmounted(() => {
   }
   window.removeEventListener('resize', handleResize);
 });
-
 function handleInput(flag) {
   if (!location.value) return;
 
@@ -178,13 +178,11 @@ function handleInput(flag) {
     }
   });
 }
-
 function handleChangePage(newNum) {
   if (!searchPop.value) return;
   pageNum.value = newNum;
   this.handleInput(1);
 }
-
 function closeSearchList() {
   searchPop.value = false;
   location.value = '';
@@ -192,18 +190,17 @@ function closeSearchList() {
   total.value = 0;
   pageNum.value = 1;
 }
-
 // 地图中心的平移至指定点位置
 function handlePanTo(index) {
   let lnglat = searchList.value[index].lnglat;
-  form.longitude = searchList.value[index].name + '(' + searchList.value[index] + ')';
-  form.latitude = lnglat[0];
+  form.address = searchList.value[index].name + '(' + searchList.value[index].address + ')';
+  form.longitude = lnglat[0];
   form.latitude = lnglat[1];
+
   map.panTo(lnglat);
   setMarks(lnglat);
   closeSearchList();
 }
-
 const initMap = async () => {
   let position = [110.93154257997, 21.669064031332];
   const AMap = await AMapLoader.load({
@@ -226,7 +223,6 @@ const initMap = async () => {
   map.on('rightclick', handleRightclick);
   handleResize();
 };
-
 function ContextMenu() {
   contextMenu = new AMap.ContextMenu();
   contextMenu.addItem(
@@ -246,14 +242,12 @@ function ContextMenu() {
     1
   );
 }
-
 // 右键事件
 function handleRightclick(e) {
   let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
   contextMenu.open(map, e.lnglat);
   lnglatPosition.value = lnglat;
 }
-
 function setMarks(lnglat) {
   //添加标记
   if (marker) map.remove(marker);
@@ -269,14 +263,11 @@ function setMarks(lnglat) {
   });
   marker.setMap(map);
 }
-
 function handleClose() {
   emits('update:visible', false);
 }
-
 let queryFormRef = ref();
 let containerRef = ref();
-
 function handleResize() {
   const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
   const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
@@ -286,14 +277,17 @@ function handleResize() {
     map.resize();
   });
 }
-
 function submit() {
   queryFormRef.value.validate((valid) => {
     if (valid) {
       console.log('提交数据', form);
       router.push({
         path: '/emergencyCommandMap',
-        query: { id: '11111111' }
+        query: {
+          address: form.address,
+          longitude: form.longitude,
+          latitude: form.latitude
+        }
       });
     }
   });
@@ -306,12 +300,10 @@ function submit() {
   background: rgba(0, 0, 0, 0.3);
   margin-bottom: 20px;
 }
-
 .map {
   width: 100%;
   height: 100%;
 }
-
 .search {
   width: 50%;
   position: absolute;
@@ -322,7 +314,6 @@ function submit() {
   border-radius: 3px;
   display: flex;
 }
-
 .btn {
   margin-left: 10px;
 }
@@ -337,7 +328,6 @@ function submit() {
   top: 70px;
   padding: 15px;
   border-radius: 3px;
-
   .close {
     position: absolute;
     right: 2%;
@@ -346,7 +336,6 @@ function submit() {
     font-size: 20px;
   }
 }
-
 .scroll {
   width: 100%;
   max-height: 250px;
@@ -388,7 +377,6 @@ function submit() {
     }
   }
 }
-
 ::v-deep {
   .el-scrollbar__wrap {
     overflow-x: hidden !important;
@@ -398,11 +386,9 @@ function submit() {
     display: none;
   }
 }
-
 .empty {
   margin: 20px 0;
 }
-
 .dialog-wrap {
   position: fixed;
   top: 50%;
@@ -413,7 +399,6 @@ function submit() {
   align-items: center;
   justify-content: center;
   font-size: 16px;
-
   .dialog {
     width: 4000px;
     height: 2000px;
@@ -422,29 +407,23 @@ function submit() {
     border-radius: 10px;
   }
 }
-
 .dialog {
   padding: 0 20px;
-
   .dialog-header {
     width: 100%;
     height: 70px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
     .dialog-title {
       font-size: 36px;
     }
-
     .icon-close {
       cursor: pointer;
     }
   }
-
   .dialog-content {
     padding: 10px 0;
-
     .map_box {
       width: calc(4000px - 50px) !important;
       height: calc(2000px - 200px) !important;