|
@@ -21,6 +21,7 @@
|
|
|
</template>
|
|
|
<a-input-search size="large" placeholder="..." enter-button></a-input-search>
|
|
|
</a-auto-complete>
|
|
|
+ <a-button type="primary" size="large" title="在新标签页中打开地图" @click="openMap"><ShareAltOutlined/></a-button>
|
|
|
</div>
|
|
|
<iframe width="100%" height="100%" tyle="border: 0"
|
|
|
:src="iframeSrc" ref="iframeRef" id="iframeMap"
|
|
@@ -30,7 +31,7 @@
|
|
|
|
|
|
<script lang="ts">
|
|
|
import {defineComponent, computed, ref, watch} from 'vue';
|
|
|
- import {get} from '@/api/common';
|
|
|
+ import { postData} from '@/api/common';
|
|
|
import {getConfig} from "@/utils/config";
|
|
|
|
|
|
export default defineComponent ({
|
|
@@ -56,20 +57,22 @@
|
|
|
|
|
|
let iframeRef = ref<any>(); // 和iframe标签的ref绑定
|
|
|
|
|
|
- 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
|
|
|
- };
|
|
|
- });
|
|
|
- });
|
|
|
+ // 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
|
|
|
+ // };
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+
|
|
|
+ const datas=[];
|
|
|
|
|
|
const isSearch = computed(() => {
|
|
|
return props.isSearch == null || props.isSearch == undefined ? true : props.isSearch
|
|
@@ -86,28 +89,35 @@
|
|
|
// 父项目绑定一个message事件给iframe handleMessage
|
|
|
window.addEventListener("message", this.handleMessage, false);
|
|
|
this.iframeWindow = this.iframeRef.contentWindow;
|
|
|
-
|
|
|
watch(
|
|
|
- () => this.datas,
|
|
|
+ () => this.options,
|
|
|
() => {
|
|
|
this.handleMessage({});
|
|
|
- console.log("datas changes", this.datas);
|
|
|
+ console.log("options changes", this.options);
|
|
|
}, {deep: true}
|
|
|
);
|
|
|
},
|
|
|
methods:{
|
|
|
- getDatas:async function(){
|
|
|
+ getDatas:async function(params: any){
|
|
|
//数据查询逻辑,如果不查询,改此方法返回数据即可
|
|
|
- if(this.datas==null){
|
|
|
+ // if(this.datas==null || this.datas.length == 0){
|
|
|
this.datas = [];
|
|
|
- const result = await get('/wellInfo/getMapList',{ page: 1, rows:10000});
|
|
|
- this.datas = result.list.map((item) => {
|
|
|
- item.value = item.well_common_name;
|
|
|
- return item;
|
|
|
+ const result: any = await postData('/wellInfo/getMapList', {...params, page:1, rows:10000});
|
|
|
+ console.log("result", result);
|
|
|
+ this.datas = result.list.map((item: any) => {
|
|
|
+ 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
|
|
|
+ };
|
|
|
});
|
|
|
- }
|
|
|
- console.log("getDatas", this.datas);
|
|
|
- return this.datas;
|
|
|
+ console.log("getDatas", this.datas);
|
|
|
+ this.options = this.datas;
|
|
|
+ // }
|
|
|
+ // return this.datas;
|
|
|
},
|
|
|
onSearch:async function (searchText){
|
|
|
if(searchText!=null && searchText!=undefined && searchText.length>0){
|
|
@@ -131,12 +141,15 @@
|
|
|
|
|
|
(document.getElementById('iframeMap') as any).contentWindow.postMessage({
|
|
|
action:'setSymbols',
|
|
|
- datas : JSON.stringify(this.datas)
|
|
|
+ datas : JSON.stringify(this.options)
|
|
|
},'*');
|
|
|
- this.options = this.datas;
|
|
|
+ // this.options = this.datas;
|
|
|
} catch (ex){
|
|
|
console.log("handleMessage",ex);
|
|
|
}
|
|
|
+ },
|
|
|
+ openMap: function (){
|
|
|
+ window.open(this.iframeSrc);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
@@ -161,9 +174,10 @@
|
|
|
position: relative;
|
|
|
width: 300px;
|
|
|
height: 50px;
|
|
|
- left: 30px;
|
|
|
- top: 50px;
|
|
|
+ left: 0px;
|
|
|
+ top: 60px;
|
|
|
z-index: 100;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
|
|
|
.chart-map-item{
|