井筒快照新标签页中打开列表、地图并携带参数

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

@@ -33,6 +33,7 @@
   import {defineComponent, computed, ref, watch} from 'vue';
   import { postData} from '@/api/common';
   import {getConfig} from "@/utils/config";
+  import router from "@/router";
 
   export  default defineComponent ({
     props:{
@@ -149,7 +150,12 @@
         }
       },
       openMap: function (){
-        window.open(this.iframeSrc);
+        //打开地图
+        // window.open(this.iframeSrc);
+
+        //在新标签页中打开 地图封装组件
+        const fullPath = router.resolve({name: 'WELLINFO_MAP'}).href;
+        window.open(fullPath, '_blank');
       }
     }
   })

vue/src/router/outsideLayout.ts

@@ -22,4 +22,13 @@ export const wellInfoListRoute: RouteRecordRaw = {
   },
 };
 
-export default [LoginRoute, wellInfoListRoute];
+export const wellInfoMapRoute: RouteRecordRaw = {
+  path: '/wellinfo/map',
+  name: 'WELLINFO_MAP',
+  component: () => import('@/views/wellinfo/map.vue'),
+  meta: {
+    title: '华北油田智能检索-井地图',
+  },
+};
+
+export default [LoginRoute, wellInfoListRoute, wellInfoMapRoute];

vue/src/views/wellinfo/index.vue

@@ -409,7 +409,7 @@ export default defineComponent({
     const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {label: "分支井", value: "分支井"}]);
     const wellPurposeList = ref([{label: "探井", value: "探井"}, {label: "开发井", value: "开发井"}, {label: "水井", value: "水井"}]);
     const chartMapRef = ref();
-    const isHideChatMap = ref(false);
+    const isHideChatMap = ref(false);//是否隐藏地图，默认显示
 
     const steps = reactive([
       {
@@ -680,8 +680,14 @@ export default defineComponent({
 
     const loadData = async function () {
       loading.value = true;
-      const result: any = await postData('wellInfo/getList', formState);
 
+      if(!isHideChatMap.value){
+        chartMapRef.value.getDatas(formState);
+        //通过菜单打开才更新缓存
+        debugger;
+        localStorage.setItem("wellInfoFormState", JSON.stringify(formState));
+      }
+      const result: any = await postData('wellInfo/getList', formState);
       data.value = result.list;
       formState.total = result.total;
       loading.value = false;
@@ -716,7 +722,6 @@ export default defineComponent({
     }
     const onQuery = () => {
       loadData();
-      chartMapRef.value.getDatas(formState);
     }
     const treeRef = ref();
     const subjectTrees = ref({
@@ -1009,10 +1014,19 @@ export default defineComponent({
       }
     }
 
+    //在新标签页中打开 地图封装组件
     if(this.route.name=="WELLINFO_LIST"){
       this.isHideChatMap = this.route.query.isHideChatMap=="true";
       const rows: any = this.route.query.pageSize;
-      this.formState.rows = rows;
+      formState.rows = rows;
+
+      const query: any = localStorage.getItem("wellInfoFormState");
+      if(query!=undefined && query!=null){
+        const newData: any = JSON.parse(query);
+        Object.assign(formState, newData);
+      }
+
+      this.loadData();
     }
   },
   beforeMount() {

vue/src/views/wellinfo/map.vue

@@ -0,0 +1,29 @@
+
+<template>
+  <ChartMap ref="chartMapRef" :isSearch="(true)" data-v-step="5"></ChartMap>
+</template>
+
+<script setup lang="ts">
+
+import ChartMap from "@/components/basic/chart/chart-map.vue";
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import {formState} from "@/views/wellinfo/table";
+
+const chartMapRef = ref();
+const route = useRoute();
+
+onMounted(()=>{
+  if(route.name=="WELLINFO_MAP"){
+    const query: any = localStorage.getItem("wellInfoFormState");
+    if(query!=undefined && query!=null){
+      chartMapRef.value.getDatas(JSON.parse(query));
+    }else{
+      chartMapRef.value.getDatas(formState);
+    }
+  }
+})
+</script>
+<style scoped lang="less">
+
+</style>