From 336786356cbe59394d041a519dbb1394152b246b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Tue, 18 Jun 2024 17:39:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A4=A7=E5=B1=8F=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=AC=AC=E4=B8=80=E6=AC=A1=E8=B7=B3=E8=BD=AC=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/map/dataScreen/index.vue | 43 +++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/views/map/dataScreen/index.vue b/src/views/map/dataScreen/index.vue
index 406ee142..b5553402 100644
--- a/src/views/map/dataScreen/index.vue
+++ b/src/views/map/dataScreen/index.vue
@@ -64,12 +64,16 @@
         <div class="show-search-title"></div>
         <div class="show-search-content">
           <div class="show-search-item" v-for="(item, index) in searchList" :key="index">
-            <div style="width:100%;color:#D3F1FF">
-              <div style="display:flex;justify-content: space-between;margin-bottom: 8px">
-                <div class="item-name">{{item.name}}</div>
-                <div class="item-person-name">{{item.personName}}</div>
+            <div style="width: 100%; color: #d3f1ff">
+              <div style="display: flex; justify-content: space-between; margin-bottom: 8px">
+                <div class="item-name">{{ item.name }}</div>
+                <div class="item-person-name">{{ item.personName }}</div>
               </div>
-              <div class="item-address"><img :src="'dataScreen/address.svg'" style="margin-right: 10px"/>{{item.address}}</div>
+              <div class="item-address"
+                ><img :src="'dataScreen/address.svg'" style="margin-right: 10px" />{{
+                  item.address
+                }}</div
+              >
             </div>
           </div>
         </div>
@@ -78,11 +82,11 @@
     <div class="show-enterprise-info" :style="`top:${infoPosition.top};left:${infoPosition.left}`">
       <div class="title-div">
         <div class="title-span">隆兴板材厂A</div>
-        <div class="title-close-button"><img :src="'dataScreen/info-close.svg'"/></div>
+        <div class="title-close-button"><img :src="'dataScreen/info-close.svg'" /></div>
       </div>
       <div v-for="(item, index) in enterpriseInfo" :key="index" class="show-info-item">
-        <div class="first-span">{{item.title}}</div>
-        <div class="last-span">{{showEnterpriseInfoData[item.key] }}</div>
+        <div class="first-span">{{ item.title }}</div>
+        <div class="last-span">{{ showEnterpriseInfoData[item.key] }}</div>
       </div>
       <div class="show-image">图片</div>
     </div>
@@ -91,9 +95,10 @@
 
 <script setup lang="ts">
   import * as echarts from 'echarts';
-  import { onMounted, ref, h } from 'vue';
+  import { onMounted, ref, h, onBeforeUnmount } from 'vue';
   import { SearchOutlined } from '@ant-design/icons-vue';
   import { enterpriseInfo } from './util';
+
   const mapClick = (event) => {
     let left = 0;
     let top = 0;
@@ -419,22 +424,34 @@
       },
     ],
   };
+  let enterpriseAreaBarChart = {};
+  let enterpriseIncomeBarChart = {};
+  let landAreaPieChart = {};
+  let realEstateAreaPieChart = {};
   onMounted(() => {
     let enterpriseAreaBarDom = document.getElementsByClassName('enterprise-area-bar')[0];
     let enterpriseIncomeBarDom = document.getElementsByClassName('enterprise-income-bar')[0];
     let landAreaPieDom = document.getElementsByClassName('land-area-pie')[0];
     let realEstateAreaPieDom = document.getElementsByClassName('real-estate-area-pie')[0];
 
-    let enterpriseAreaBarChart = echarts.init(enterpriseAreaBarDom);
-    let enterpriseIncomeBarChart = echarts.init(enterpriseIncomeBarDom);
-    let landAreaPieChart = echarts.init(landAreaPieDom);
-    let realEstateAreaPieChart = echarts.init(realEstateAreaPieDom);
+    enterpriseAreaBarChart = echarts.init(enterpriseAreaBarDom);
+    enterpriseIncomeBarChart = echarts.init(enterpriseIncomeBarDom);
+    landAreaPieChart = echarts.init(landAreaPieDom);
+    realEstateAreaPieChart = echarts.init(realEstateAreaPieDom);
 
     enterpriseAreaBarChart.setOption(enterpriseAreaBarChartOption);
     enterpriseIncomeBarChart.setOption(enterpriseIncomeBarChartOption);
     landAreaPieChart.setOption(landAreaPieChartOption);
     realEstateAreaPieChart.setOption(realEstateAreaPieChartOption);
   });
+  onBeforeUnmount(() => {
+    // 及时销毁
+    enterpriseAreaBarChart.dispose();
+    enterpriseIncomeBarChart.dispose();
+    landAreaPieChart.dispose();
+    realEstateAreaPieChart.dispose();
+    console.log('onBeforeUnmount>>>');
+  });
   const value = ref('');
   const showEnterpriseInfoData = ref({
     legalPerson: '刘明',