优化地图数据与列表数据同步

vue/src/components/basic/chart/chart-map.vue

@@ -29,19 +29,18 @@
 </template>
 
 <script lang="ts">
-  import {defineComponent, computed, ref} from 'vue';
+  import {defineComponent, computed, ref, watch} from 'vue';
   import {get} from '@/api/common';
   import {getConfig} from "@/utils/config";
 
   export  default defineComponent ({
     props:{
-      wellId: null as any
+      datas: null as any
     },
     name : 'ChartMap',
     data() {
       return{
         loading : false,
-        datas:null as any,
         options:[] as any,
         iframeWindow : null,
         value : null
@@ -49,30 +48,45 @@
     },
     setup(props, context){
       console.log("ChartMap setup" , props, context);
-      let iframeSrc = ref<string>("http://10.73.178.206:8077/a4gis/index.html");
+      let iframeSrc = ref<string>("http://localhost:8077/a4gis/index.html");
       getConfig().then((res: any) => {
         iframeSrc.value = res.huabeiHost+"a4gis/index.html";
       })
 
       let iframeRef = ref<any>();   // 和iframe标签的ref绑定
 
-      const wellId = computed(() => {
-        return props.wellId ? props.wellId : null
+      const datas = computed(() => {
+        let propList = props.datas ? props.datas : [];
+        return propList.map((item) => {
+          item.value = item.well_common_name;
+          return {
+            value : item.well_common_name,
+            geo_description : item.geo_description,
+            well_id : item.well_id,
+            well_common_name : item.well_common_name,
+            x : item.x,
+            y : item.y
+          };
+        });
       });
       return{
-        wellId,
+        datas,
         iframeSrc,
         iframeRef
       }
     },
     mounted(){
-      console.log("mounted chart-map" , this.wellId);
       // 父项目绑定一个message事件给iframe handleMessage
       window.addEventListener("message", this.handleMessage, false);
       this.iframeWindow = this.iframeRef.contentWindow;
-      //加载数据
-      //this.options = this.getDatas();
-      console.log("mounted options", this.options);
+
+      watch(
+        () => this.datas,
+        () => {
+          this.handleMessage({});
+          console.log("datas changes", this.datas);
+        }, {deep: true}
+      );
     },
     methods:{
       getDatas:async function(){
@@ -84,31 +98,18 @@
             item.value = item.well_common_name;
             return item;
           });
-
-          /*
-          for(let i=0;i<10000;i++){
-            this.datas?.push({
-              value:'华李1-26-'+i,
-              geo_description:'内蒙古锡林浩特市阿尔善宝力格达莱因29'+i,
-              well_common_name:'华李1-26-'+i,
-              well_id:'华李1-26-'+i,
-              x : result.list[i % result.list.length].x,
-              y : result.list[i % result.list.length].y
-            });
-          }*/
         }
         console.log("getDatas", this.datas);
         return this.datas;
       },
       onSearch:async function (searchText){
-        let datas = await this.getDatas();
         if(searchText!=null && searchText!=undefined && searchText.length>0){
-          this.options = datas.filter((item) => {
+          this.options = this.datas.filter((item) => {
             return (item.well_common_name && item.well_common_name.indexOf(searchText) >=0)
               || (item.geo_description && item.geo_description.indexOf(searchText)>=0);
           });
         }
-        else this.options = datas;
+        else this.options = this.datas;
       },
       onSelect:function (value, item){
         console.log("onSelect", value, item);
@@ -118,16 +119,17 @@
         },'*');
       },
       handleMessage:async function (event){
-        //(document.getElementById('iframeMap') as any).contentWindow.postMessage({message:'父页面传过来的数据'},'*');
-        //显示坐标点
-        let datas = await this.getDatas();
-        console.log("parent handle Message", event.data, datas);
+        try{
+          console.log("parent handle Message", event.data);
 
-        (document.getElementById('iframeMap') as any).contentWindow.postMessage({
-          action:'setSymbols',
-          datas : JSON.stringify(datas)
-        },'*');
-        this.options = datas;
+          (document.getElementById('iframeMap') as any).contentWindow.postMessage({
+            action:'setSymbols',
+            datas : JSON.stringify(this.datas)
+          },'*');
+          this.options = this.datas;
+        } catch (ex){
+          console.log("handleMessage",ex);
+        }
       }
     }
   })

vue/src/views/wellinfo/index.vue

@@ -236,7 +236,7 @@
                       @showSizeChange="(current,pageSize)=>handleTableChange({ current: current,pageSize: pageSize })"/>
       </a-spin>
       <div style="width:100%;height: 500px;margin-top:15px">
-        <ChartMap></ChartMap>
+        <ChartMap :datas="data"></ChartMap>
       </div>
     </div>
     <a-modal v-model:visible="isShowDoc" title="相关文档" :footer="null" @onCancel="isShowDoc=false">