大风监测、雨情监测调整

src/views/globalMap/RightMenu/RainMonitor/index.vue

@@ -1,187 +1,189 @@
 <template>
   <div class="menu-content">
     <div class="gradient-text common-dialog-title2">雨情监测</div>
-    <div class="card-header">
-      <div class="title-box">水利站点降雨分布统计</div>
-      <el-select
-        v-model="timeOption"
-        class="custom-select"
-        popper-class="custom-select-popper"
-        :teleported="false"
-        style="width: 236px"
-        @change="handleTimeChange"
-      >
-        <el-option v-for="item in timeOptions" :key="item.value" :label="item.name" :value="item.value" />
-      </el-select>
-    </div>
-    <Chart :option="chartOption1" style="width: 100%; height: 150px" />
-    <div class="card-header">
-      <div class="title-box">
-        <div>降雨量排行</div>
-        <div class="line"></div>
-        <div class="gradient-text text2">区县排行</div>
-        <div class="text3">（过去{{ timeOption }}小时）</div>
+    <div class="scroll">
+      <div class="card-header">
+        <div class="title-box">水利站点降雨分布统计</div>
+        <el-select
+          v-model="timeOption"
+          class="custom-select"
+          popper-class="custom-select-popper"
+          :teleported="false"
+          style="width: 236px"
+          @change="handleTimeChange"
+        >
+          <el-option v-for="item in timeOptions" :key="item.value" :label="item.name" :value="item.value" />
+        </el-select>
       </div>
-      <div class="btn-box">
-        <div class="btn" @click="handleShowMore">
-          <i class="more-icon"></i>
-          <div class="btn-text">更多</div>
+      <Chart :option="chartOption1" style="width: 100%; height: 150px" />
+      <div class="card-header">
+        <div class="title-box">
+          <div>降雨量排行</div>
+          <div class="line"></div>
+          <div class="gradient-text text2">区县排行</div>
+          <div class="text3">（过去{{ timeOption }}小时）</div>
         </div>
-        <div class="btn" @click="exportData">
-          <i class="export-icon"></i>
-          <div class="btn-text">导出</div>
+        <div class="btn-box">
+          <div class="btn" @click="handleShowMore">
+            <i class="more-icon"></i>
+            <div class="btn-text">更多</div>
+          </div>
+          <div class="btn" @click="exportData">
+            <i class="export-icon"></i>
+            <div class="btn-text">导出</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="table">
-      <div class="table-header">
-        <div class="td">序号</div>
-        <div class="td">
-          <el-select
-            v-model="queryParams.area"
-            placeholder="县区"
-            size="large"
-            class="custom-select2"
-            popper-class="custom-select-popper2"
-            :teleported="false"
-          >
-            <el-option label="县区" value="" />
-            <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.value" />
-          </el-select>
-        </div>
-        <div class="td">
-          <el-select
-            v-model="queryParams.township"
-            placeholder="街镇"
-            size="large"
-            class="custom-select2"
-            popper-class="custom-select-popper2"
-            :teleported="false"
-            @change="handleGetRainfallRange"
-          >
-            <el-option label="街镇" value="" />
-            <el-option v-for="item in townshipList" :key="item.area_code" :label="item.area_name" :value="item.area_name" />
-          </el-select>
+      <div class="table">
+        <div class="table-header">
+          <div class="td">序号</div>
+          <div class="td">
+            <el-select
+              v-model="queryParams.area"
+              placeholder="县区"
+              size="large"
+              class="custom-select2"
+              popper-class="custom-select-popper2"
+              :teleported="false"
+            >
+              <el-option label="县区" value="" />
+              <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+          <div class="td">
+            <el-select
+              v-model="queryParams.township"
+              placeholder="街镇"
+              size="large"
+              class="custom-select2"
+              popper-class="custom-select-popper2"
+              :teleported="false"
+              @change="handleGetRainfallRange"
+            >
+              <el-option label="街镇" value="" />
+              <el-option v-for="item in townshipList" :key="item.area_code" :label="item.area_name" :value="item.area_name" />
+            </el-select>
+          </div>
+          <div class="td">站址</div>
+          <div class="td td-cursor">
+            <span>雨量(mm)</span>
+            <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
+          </div>
         </div>
-        <div class="td">站址</div>
-        <div class="td td-cursor">
-          <span>雨量(mm)</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
+        <div v-for="(item, index) in rangeData" :key="index" class="tr">
+          <div class="td">
+            <div :class="getRankClass(item.rn)">{{ item.rn }}</div>
+          </div>
+          <div class="td">{{ item.area }}</div>
+          <div class="td">{{ item.township }}</div>
+          <div class="td">{{ item.address }}</div>
+          <div class="gradient-text2 td">{{ item.rainfall }}</div>
         </div>
       </div>
-      <div v-for="(item, index) in rangeData" :key="index" class="tr">
-        <div class="td">
-          <div :class="getRankClass(item.rn)">{{ item.rn }}</div>
+      <div class="card-header">
+        <div class="title-box">
+          <div>影响分析</div>
         </div>
-        <div class="td">{{ item.area }}</div>
-        <div class="td">{{ item.township }}</div>
-        <div class="td">{{ item.address }}</div>
-        <div class="gradient-text2 td">{{ item.rainfall }}</div>
-      </div>
-    </div>
-    <div class="card-header">
-      <div class="title-box">
-        <div>影响分析</div>
-      </div>
-      <div class="btn-box">
-        <div class="btn" @click="exportData2">
-          <i class="export-icon"></i>
-          <div class="btn-text">导出</div>
+        <div class="btn-box">
+          <div class="btn" @click="exportData2">
+            <i class="export-icon"></i>
+            <div class="btn-text">导出</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="data-box">
-      <div>
-        <div class="line1">
-          <div class="line-item">小雨</div>
-          <div class="line-item">中雨</div>
-          <div class="line-item">大雨</div>
-          <div class="line-item">暴雨</div>
-          <div class="line-item">大暴雨</div>
-          <div class="line-item">特大暴雨</div>
-        </div>
-        <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div
-            class="dot"
-            :style="{ left: startLeft + 'px' }"
-            @mousedown="
+      <div class="data-box">
+        <div>
+          <div class="line1">
+            <div class="line-item">小雨</div>
+            <div class="line-item">中雨</div>
+            <div class="line-item">大雨</div>
+            <div class="line-item">暴雨</div>
+            <div class="line-item">大暴雨</div>
+            <div class="line-item">特大暴雨</div>
+          </div>
+          <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div
+              class="dot"
+              :style="{ left: startLeft + 'px' }"
+              @mousedown="
               (e) => {
                 handleMouseDown(e, 'start');
               }
             "
-          ></div>
-          <div
-            class="dot"
-            :style="{ left: endLeft + 'px' }"
-            @mousedown="
+            ></div>
+            <div
+              class="dot"
+              :style="{ left: endLeft + 'px' }"
+              @mousedown="
               (e) => {
                 handleMouseDown(e, 'end');
               }
             "
-          ></div>
-        </div>
-        <div class="line3">
-          <div class="line-item">1</div>
-          <div class="line-item">10</div>
-          <div class="line-item">25</div>
-          <div class="line-item">50</div>
-          <div class="line-item">100</div>
-          <div class="line-item">
-            <div>250</div>
-            <div>(mm)</div>
+            ></div>
+          </div>
+          <div class="line3">
+            <div class="line-item">1</div>
+            <div class="line-item">10</div>
+            <div class="line-item">25</div>
+            <div class="line-item">50</div>
+            <div class="line-item">100</div>
+            <div class="line-item">
+              <div>250</div>
+              <div>(mm)</div>
+            </div>
           </div>
         </div>
+        <div class="box">
+          <div class="text1">雨量范围</div>
+          <div class="text2">{{ rainRange[0] }}-{{ rainRange[1] }}</div>
+        </div>
       </div>
-      <div class="box">
-        <div class="text1">雨量范围</div>
-        <div class="text2">{{ rainRange[0] }}-{{ rainRange[1] }}</div>
-      </div>
-    </div>
-    <div class="data-box2">
-      <div class="data-item">
-        <div class="icon1"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">行政镇</div>
-            <div class="text2">(个)</div>
+      <div class="data-box2">
+        <div class="data-item">
+          <div class="icon1"></div>
+          <div class="item-right">
+            <div class="text-box">
+              <div class="text1">行政镇</div>
+              <div class="text2">(个)</div>
+            </div>
+            <div class="text3">{{ analyzeData.town_num }}</div>
           </div>
-          <div class="text3">{{ analyzeData.town_num }}</div>
         </div>
-      </div>
-      <div class="data-item">
-        <div class="icon2"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">人口</div>
-            <div class="text2">(万)</div>
+        <div class="data-item">
+          <div class="icon2"></div>
+          <div class="item-right">
+            <div class="text-box">
+              <div class="text1">人口</div>
+              <div class="text2">(万)</div>
+            </div>
+            <div class="text4">{{ analyzeData.populationSize }}</div>
           </div>
-          <div class="text4">{{ analyzeData.populationSize }}</div>
         </div>
-      </div>
-      <div class="data-item">
-        <div class="icon3"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">面积</div>
-            <div class="text2">(km²)</div>
+        <div class="data-item">
+          <div class="icon3"></div>
+          <div class="item-right">
+            <div class="text-box">
+              <div class="text1">面积</div>
+              <div class="text2">(km²)</div>
+            </div>
+            <div class="text5">{{ analyzeData.areaSize }}</div>
           </div>
-          <div class="text5">{{ analyzeData.areaSize }}</div>
         </div>
-      </div>
-      <div class="data-item">
-        <div class="icon4"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">GDP</div>
-            <div class="text2">(亿)</div>
+        <div class="data-item">
+          <div class="icon4"></div>
+          <div class="item-right">
+            <div class="text-box">
+              <div class="text1">GDP</div>
+              <div class="text2">(亿)</div>
+            </div>
+            <div class="text6">{{ analyzeData.GDP }}</div>
           </div>
-          <div class="text6">{{ analyzeData.GDP }}</div>
         </div>
       </div>
     </div>
@@ -346,8 +348,8 @@ const analyzeData = ref({
   town_num: 0
 });
 const lineRef = ref();
-const startLeft = ref(384);
-const endLeft = ref(576);
+const startLeft = ref(142);
+const endLeft = ref(213);
 const mouseStatus = reactive({
   move: false,
   type: '',
@@ -380,7 +382,7 @@ const handleMouseMove = (event) => {
   if (mouseStatus.type === 'start') {
     startLeft.value = value >= 0 ? value : 0;
   } else {
-    endLeft.value = value <= 1152 ? value : 1152;
+    endLeft.value = value <= 426 ? value : 426;
   }
 };
 const handleMouseUp = (event) => {
@@ -415,23 +417,23 @@ watch(endLeft, () => {
   getRainRange();
 });
 const getNewRange = (index, value) => {
-  if (value >= 0 && value < 192) {
-    const data = new BigNumber(value).dividedBy(new BigNumber(19.2)).toFixed(0);
+  if (value >= 0 && value < 71) {
+    const data = new BigNumber(value).dividedBy(new BigNumber(7.8)).plus(new BigNumber(1)).toFixed(0);
     rainRange[index] = data;
-  } else if (value >= 192 && value < 384) {
-    const data = new BigNumber(value).minus(new BigNumber(192)).dividedBy(new BigNumber(12.8)).plus(new BigNumber(10)).toFixed(0);
+  } else if (value >= 71 && value < 142) {
+    const data = new BigNumber(value).minus(new BigNumber(71)).dividedBy(new BigNumber(4.7)).plus(new BigNumber(10)).toFixed(0);
     rainRange[index] = data;
-  } else if (value >= 384 && value < 576) {
-    const data = new BigNumber(value).minus(new BigNumber(384)).dividedBy(new BigNumber(7.68)).plus(new BigNumber(25)).toFixed(0);
+  } else if (value >= 142 && value < 213) {
+    const data = new BigNumber(value).minus(new BigNumber(142)).dividedBy(new BigNumber(2.84)).plus(new BigNumber(25)).toFixed(0);
     rainRange[index] = data;
-  } else if (value >= 576 && value < 768) {
-    const data = new BigNumber(value).minus(new BigNumber(576)).dividedBy(new BigNumber(3.84)).plus(new BigNumber(50)).toFixed(0);
+  } else if (value >= 213 && value < 284) {
+    const data = new BigNumber(value).minus(new BigNumber(213)).dividedBy(new BigNumber(1.42)).plus(new BigNumber(50)).toFixed(0);
     rainRange[index] = data;
-  } else if (value >= 768 && value < 960) {
-    const data = new BigNumber(value).minus(new BigNumber(768)).dividedBy(new BigNumber(1.28)).plus(new BigNumber(100)).toFixed(0);
+  } else if (value >= 284 && value < 355) {
+    const data = new BigNumber(value).minus(new BigNumber(284)).dividedBy(new BigNumber(0.47)).plus(new BigNumber(100)).toFixed(0);
     rainRange[index] = data;
-  } else if (value >= 960 && value < 1152) {
-    const data = new BigNumber(value).minus(new BigNumber(960)).dividedBy(new BigNumber(1.28)).plus(new BigNumber(250)).toFixed(0);
+  } else if (value >= 355 && value < 426) {
+    const data = new BigNumber(value).minus(new BigNumber(355)).dividedBy(new BigNumber(0.47)).plus(new BigNumber(250)).toFixed(0);
     rainRange[index] = data;
   }
 };
@@ -511,6 +513,10 @@ initData();
   padding: 60px 10px 10px 15px;
   font-size: 14px;
   position: relative;
+  .scroll {
+    height: 680px;
+    overflow: auto;
+  }
   .card-header {
     display: flex;
     justify-content: space-between;
@@ -585,6 +591,7 @@ initData();
     background-size: 100% 100%;
     display: flex;
     align-items: center;
+    padding: 2px 19px;
     .td {
       color: #edfaff !important;
     }

src/views/globalMap/RightMenu/WindMonitor/index.vue

@@ -6,7 +6,7 @@
         09月08日 14：00-09月09日 14：00
       </div>
 
-      <div style="height: 1400px; overflow: auto">
+      <div style="height: 660px; overflow: auto">
         <div style="margin-left: 10px; color: #ffffff">
           <span>风流场</span>
           <img :src="switchStatus ? switchOn : switchOff" style="margin-left: 10px; cursor: pointer" @click="switchControl" />
@@ -91,9 +91,9 @@
             <div class="gradient-text">空间分析</div>
           </div>
           <div class="btn-box">
-            <div class="btn" @click="handleShowMore">
+            <div class="btn" @click="handleToShowDrawTools">
               <i class="more-icon"></i>
-              <div class="btn-text">开启圈选</div>
+              <div class="btn-text">{{ !openSelect ? '开启圈选' : '结束圈选' }}</div>
             </div>
             <div class="btn" @click="exportData">
               <i class="export-icon"></i>
@@ -153,64 +153,67 @@
             </div>
           </div>
         </div>
-        <div class="data-box2" style="margin-top: -10px">
-          <div class="data-item">
-            <div class="icon1"></div>
-            <div class="item-right">
-              <div class="text-box">
-                <div class="text1">行政镇</div>
-                <div class="text2">(个)</div>
-              </div>
-              <div class="text3">{{ analyzeData.town_num }}</div>
-            </div>
+        <div class="analyze-data-container">
+          <div class="item" @click="handleShowDetail">
+            <div class="item-label">行政镇(个)</div>
+            <div class="item-value">{{ validateNum(analysisData.townCount) }}</div>
           </div>
-          <div class="data-item">
-            <div class="icon2"></div>
-            <div class="item-right">
-              <div class="text-box">
-                <div class="text1">人口</div>
-                <div class="text2">(万)</div>
-              </div>
-              <div class="text4">{{ analyzeData.populationSize }}</div>
-            </div>
+          <div class="item" @click="handleShowDetail">
+            <div class="item-label">行政村(个)</div>
+            <div class="item-value">{{ validateNum(analysisData.villageCount) }}</div>
           </div>
-          <div class="data-item">
-            <div class="icon3"></div>
-            <div class="item-right">
-              <div class="text-box">
-                <div class="text1">面积</div>
-                <div class="text2">(km²)</div>
-              </div>
-              <div class="text5">{{ analyzeData.areaSize }}</div>
-            </div>
+          <div class="item" @click="handleShowDetail">
+            <div class="item-label">面积(km²)</div>
+            <div class="item-value">{{ validateNum(analysisData.areaSize) }}</div>
           </div>
-          <div class="data-item">
-            <div class="icon4"></div>
-            <div class="item-right">
-              <div class="text-box">
-                <div class="text1">GDP</div>
-                <div class="text2">(亿)</div>
-              </div>
-              <div class="text6">{{ analyzeData.GDP }}</div>
-            </div>
+          <div class="item" @click="handleShowDetail">
+            <div class="item-label">常住人口(万)</div>
+            <div class="item-value">{{ validateNum(analysisData.populationSize) }}</div>
+          </div>
+          <div class="item" @click="handleShowDetail">
+            <div class="item-label">GDP(万元)</div>
+            <div class="item-value">{{ validateNum(analysisData.GDP) }}</div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <WindSpeedRank v-if="showMore" v-model="showMore" />
+  <Dialog v-model="showDetail" title="空间分析" hide-footer>
+    <div class="common-table">
+      <div class="table-header">
+        <div class="td">序号</div>
+        <div class="td">行政镇</div>
+        <div class="td">行政村</div>
+        <div class="td">常住人口(万)</div>
+        <div class="td">面积(km2)</div>
+        <div class="td">GDP(亿元)</div>
+      </div>
+      <div v-for="(item, index) in analysisData.townData" :key="index" class="tr">
+        <div class="td">{{ index + 1 }}</div>
+        <div class="td">{{ item.townName }}</div>
+        <div class="td">{{ item.villageName ? item.villageName : '-' }}</div>
+        <div class="td">{{ item.populationSize }}</div>
+        <div class="td">{{ item.areaSize }}</div>
+        <div class="td">{{ item.GDP }}</div>
+      </div>
+    </div>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
 import { getHelicopterList } from '@/api/globalMap/Helicopter';
 import switchOff from '@/assets/images/map/rightMenu/windMonitor/switch-off.png';
 import switchOn from '@/assets/images/map/rightMenu/windMonitor/switch-on.png';
 import WindSpeedRank from '@/views/globalMap/RightMenu/WindMonitor/windSpeedRank.vue';
 import { getRainfallTownNumCount } from '@/api/globalMap/rainMonitor';
-import { useDebounce } from '@vueuse/core';
 import BigNumber from 'bignumber.js';
-import { debounce } from '@/utils';
+import { debounce, deepClone } from '@/utils';
+import useMapStore from '@/store/modules/map';
+import { nanoid } from 'nanoid';
+import { getSpatialAnalysis } from '@/api/globalMap';
+import { validateNum } from '@/utils/ruoyi';
+import * as turf from '@turf/turf';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { wind_time } = toRefs<any>(proxy?.useDict('wind_time'));
@@ -224,7 +227,7 @@ const analyzeData = ref({
   town_num: 0
 });
 const startLeft = ref(0);
-const endLeft = ref(1351);
+const endLeft = ref(497);
 const lineRef = ref();
 const containerScale = inject('containerScale');
 let showMore = ref(false);
@@ -313,7 +316,7 @@ const handleMouseMove = (event) => {
   if (mouseStatus.type === 'start') {
     startLeft.value = value >= 0 ? value : 0;
   } else {
-    endLeft.value = value <= 1351 ? value : 1351;
+    endLeft.value = value <= 497 ? value : 497;
   }
 };
 
@@ -349,26 +352,26 @@ watch(endLeft, () => {
   getRainRange();
 });
 const getNewRange = (index, value) => {
-  if (value >= 0 && value < 193) {
-    const data = new BigNumber(value).dividedBy(new BigNumber(49.4)).toFixed(1.6);
+  if (value >= 0 && value < 71) {
+    const data = new BigNumber(value).dividedBy(new BigNumber(18.2)).toFixed(1.6);
     rainRange[index] = data;
-  } else if (value >= 193 && value < 386) {
-    const data = new BigNumber(value).minus(new BigNumber(193)).dividedBy(new BigNumber(36.4)).plus(new BigNumber(5.5)).toFixed(1);
+  } else if (value >= 71 && value < 142) {
+    const data = new BigNumber(value).minus(new BigNumber(71)).dividedBy(new BigNumber(13.3)).plus(new BigNumber(5.5)).toFixed(1);
     rainRange[index] = data;
-  } else if (value >= 386 && value < 579) {
-    const data = new BigNumber(value).minus(new BigNumber(386)).dividedBy(new BigNumber(25.3)).plus(new BigNumber(10.8)).toFixed(1);
+  } else if (value >= 142 && value < 213) {
+    const data = new BigNumber(value).minus(new BigNumber(142)).dividedBy(new BigNumber(11)).plus(new BigNumber(10.8)).toFixed(1);
     rainRange[index] = data;
-  } else if (value >= 579 && value < 772) {
-    const data = new BigNumber(value).minus(new BigNumber(579)).dividedBy(new BigNumber(26.4)).plus(new BigNumber(17.2)).toFixed(1);
+  } else if (value >= 213 && value < 284) {
+    const data = new BigNumber(value).minus(new BigNumber(213)).dividedBy(new BigNumber(9.7)).plus(new BigNumber(17.2)).toFixed(1);
     rainRange[index] = data;
-  } else if (value >= 772 && value < 965) {
-    const data = new BigNumber(value).minus(new BigNumber(772)).dividedBy(new BigNumber(23.5)).plus(new BigNumber(24.5)).toFixed(1);
+  } else if (value >= 284 && value < 355) {
+    const data = new BigNumber(value).minus(new BigNumber(284)).dividedBy(new BigNumber(8.2)).plus(new BigNumber(24.5)).toFixed(1);
     rainRange[index] = data;
-  } else if (value >= 965 && value < 1158) {
-    const data = new BigNumber(value).minus(new BigNumber(965)).dividedBy(new BigNumber(21.9)).plus(new BigNumber(32.7)).toFixed(1);
+  } else if (value >= 355 && value < 426) {
+    const data = new BigNumber(value).minus(new BigNumber(355)).dividedBy(new BigNumber(8.6)).plus(new BigNumber(32.7)).toFixed(1);
     rainRange[index] = data;
-  } else if (value >= 1158 && value < 1351) {
-    const data = new BigNumber(value).minus(new BigNumber(1158)).dividedBy(new BigNumber(22.7)).plus(new BigNumber(41.5)).toFixed(1);
+  } else if (value >= 426 && value < 497) {
+    const data = new BigNumber(value).minus(new BigNumber(426)).dividedBy(new BigNumber(8.3)).plus(new BigNumber(41.5)).toFixed(1);
     rainRange[index] = data;
   }
 };
@@ -399,11 +402,186 @@ const initData = () => {
   //   total.value = res.total;
   // });
 };
-
+const getDrawTool = inject('getDrawTool');
+const getMap = inject('getMap');
+const getMapUtils = inject('getMapUtils');
+const mapStore = useMapStore();
+let map, mapUtils, overlay;
+let showDetail = ref(false);
+const handleShowDetail = () => {
+  showDetail.value = true;
+};
+watch(
+  () => mapStore.mapLoaded,
+  (loaded) => {
+    if (loaded) {
+      map = getMap();
+      mapUtils = getMapUtils();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+let openSelect = ref(false);
+const drawOptions = {
+  color: '#f80102',
+  drawType: '1',
+  graphicsType: 'circle'
+};
+let analysisData = ref({
+  townCount: '',
+  villageCount: '',
+  areaSize: '',
+  populationSize: '',
+  GDP: '',
+  townData: [],
+  list: []
+});
+let locationData = ref([]);
+// 开始圈选
+const handleToShowDrawTools = () => {
+  openSelect.value = !openSelect.value;
+  const drawTool = getDrawTool();
+  if (openSelect.value) {
+    removeOverlays();
+    analysisData.value = {
+      townCount: '',
+      villageCount: '',
+      areaSize: '',
+      populationSize: '',
+      GDP: '',
+      townData: [],
+      list: []
+    };
+    drawTool.drawGraphics2(drawOptions);
+    if (mapStore.isAMap) {
+      drawTool.getMouseTool().on('draw', onDraw);
+    } else {
+      drawTool.getMouseTool().on('drawend', onDraw2);
+    }
+  } else {
+    drawTool.closeDraw();
+  }
+};
+// 高德地图绘制结束
+const onDraw = (event) => {
+  const obj = event.obj;
+  const id = nanoid();
+  obj._opts.extData = {
+    id: id
+  };
+  const data: any = {
+    id: id,
+    type: drawOptions.graphicsType,
+    color: obj._opts.strokeColor,
+    drawType: obj._opts.fillOpacity === 0 ? '1' : '2'
+  };
+  if (data.type === 'circle') {
+    data.center = [obj.getCenter().lng, obj.getCenter().lat];
+    data.radius = obj.getRadius();
+  }
+  const path = obj.getPath();
+  // 将AMap.LngLat对象数组转换为经纬度数组
+  const pathArr = path.map((lngLat) => {
+    // 返回经度和纬度的数组
+    return [lngLat.lng, lngLat.lat];
+  });
+  data.path = pathArr;
+  overlay = obj;
+  analysisSpatial(data);
+};
+// 粤政图绘制结束
+const onDraw2 = (event) => {
+  const feature = event.feature;
+  const geometry = feature.getGeometry();
+  const geometryType = geometry.getType();
+  const id = nanoid();
+  feature.set('id', id);
+  feature.set('dotType', 'analysisSpatial');
+  const data: any = {
+    id: id,
+    type: drawOptions.graphicsType,
+    color: drawOptions.color,
+    drawType: drawOptions.drawType
+  };
+  feature.set('extraData', data);
+  if (geometryType === 'Circle') {
+    data.center = geometry.getCenter();
+    data.radius = geometry.getRadius();
+    const data2 = turf.sector(data.center, data.radius, 0, 360);
+    const pathArr = data2.geometry.coordinates[0];
+    data.path = pathArr;
+  } else if (geometryType === 'Polygon') {
+    const coordinates = geometry.getCoordinates();
+    data.path = coordinates[0];
+  }
+  overlay = feature;
+  analysisSpatial(data);
+};
+// 空间分析数据
+const analysisSpatial = (data) => {
+  openSelect.value = false;
+  let location = [];
+  let itemLocation = [];
+  data.path.forEach((item) => {
+    itemLocation.push({
+      x: item[0],
+      y: item[1]
+    });
+  });
+  itemLocation.push(itemLocation[0]);
+  location.push(itemLocation);
+  locationData.value = location;
+  getSpatialAnalysis(locationData.value).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;
+    }
+    if (res.data && res.data.townData) {
+      const data = [];
+      res.data.townData.forEach((item) => {
+        data.push(item);
+        item.children.forEach((item2) => {
+          const obj = deepClone(item2);
+          obj.townName = item.townName;
+          data.push(obj);
+        });
+        delete item.children;
+      });
+      res.data.townData = data;
+    }
+    analysisData.value = res.data;
+  });
+};
+const removeOverlays = () => {
+  if (!overlay) return;
+  if (mapStore.isAMap) {
+    overlay.setMap(null);
+  } else {
+    mapUtils.getDrawVector().getSource().removeFeature(overlay);
+  }
+  overlay = null;
+};
 //调用函数
 onMounted(() => {
   initData();
 });
+onBeforeUnmount(() => {
+  removeOverlays();
+  const drawTool = getDrawTool();
+  if (mapStore.isAMap) {
+    drawTool.getMouseTool().off('draw', onDraw);
+  } else {
+    drawTool.getMouseTool().un('drawend', onDraw2);
+  }
+  drawTool.closeDraw();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -518,11 +696,11 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
     .more-icon {
-      width: 24px;
-      height: 23px;
+      width: 21px;
+      height: 20px;
       background: url('@/assets/images/map/rightMenu/rainMonitor/more.png') no-repeat;
       background-size: 100% 100%;
-      margin-right: 5px;
+      margin-right: 3px;
     }
     .export-icon {
       width: 22px;
@@ -888,4 +1066,34 @@ onMounted(() => {
     }
   }
 }
+.analyze-data-container {
+  width: 100%;
+  font-size: 16px;
+  padding: 10px 0;
+  display: flex;
+  flex-wrap: wrap;
+  .item {
+    width: 130px;
+    height: 60px;
+    background: url('@/assets/images/map/rightMenu/ironTower/boxBg.png') no-repeat;
+    background-size: 100% 100%;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    margin-right: 9px;
+    cursor: pointer;
+    &:nth-child(4) {
+      margin-right: 0;
+    }
+    &:nth-child(5) {
+      margin-top: 10px;
+    }
+    .item-label {
+      margin-bottom: 5px;
+    }
+  }
+}
 </style>