diff --git a/src/utils/util.ts b/src/utils/util.ts index 2514b48..270d57a 100644 --- a/src/utils/util.ts +++ b/src/utils/util.ts @@ -310,3 +310,14 @@ export function filterEnum( if (type == "tag") return filterData?.tagType ? filterData.tagType : ""; return filterData ? filterData[label] : "--"; } + +// 向外部iframe框架发送信息 +export function sendIframeMessage(msg: any, type: any, iframeEle: any | undefined) { + if (type === 1) { + // 父 => 子 + iframeEle.contentWindow.postMessage(msg, "*"); + } else if (type === 2) { + // 子 => 父 + window.parent.postMessage(msg, "*"); + } +} diff --git a/src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps.vue b/src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps.vue index 10cffa9..0d007e1 100644 --- a/src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps.vue +++ b/src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps.vue @@ -9,7 +9,7 @@ const AMapRef = ref(); const areas = zhongkai(); const map = shallowRef(); const props = defineProps<{ - projectData: Object; + projectData: Array; }>(); const setProjectData = async () => { console.log("setProjectData"); @@ -296,10 +296,11 @@ const createArea = () => { }; // 地图增加坐标点 const addMarker = () => { - if (!props.projectData.longitude) { + if (!props.projectData.length > 0) { return; } - const createMarkerImage = (state: string) => new URL(`../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href; + console.log(props.projectData, "77777777777-------"); + const createMarkerImage = (state: string) => new URL(`../../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href; // map.value?.clearMap(); // markerList.forEach((item: any) => { // 创建一个 Icon @@ -311,15 +312,17 @@ const addMarker = () => { // 图标所用图片大小 imageSize: new AMapRef.value.Size(52, 52) }); - - // 将 icon 传入 marker - let startMarker = new AMapRef.value.Marker({ - position: new AMapRef.value.LngLat(Number(props.projectData.longitude), Number(props.projectData.latitude)), - // position: new AMapRef.value.LngLat(113, 21), - icon: startIcon, - offset: new AMapRef.value.Pixel(-13, -30) + props.projectData.map(item => { + // 将 icon 传入 marker + let startMarker = new AMapRef.value.Marker({ + position: new AMapRef.value.LngLat(Number(item.longitude), Number(item.latitude)), + // position: new AMapRef.value.LngLat(113, 21), + icon: startIcon, + offset: new AMapRef.value.Pixel(-13, -30) + }); + map.value?.add([startMarker]); }); - map.value?.add([startMarker]); + // map.value?.setFitView(); // }); }; diff --git a/src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps3D.vue b/src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps3D.vue index 5248316..fbc3099 100644 --- a/src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps3D.vue +++ b/src/views/goverment/huizhou/largeScreen/largeScreenOne/components/maps3D.vue @@ -9,7 +9,7 @@ const AMapRef = ref(); const areas = zhongkai(); const map = shallowRef(); const props = defineProps<{ - projectData: Object; + projectData: Array; }>(); const setProjectData = async () => { console.log("setProjectData"); @@ -350,10 +350,10 @@ const createArea = () => { }; // 地图增加坐标点 const addMarker = () => { - if (!props.projectData.longitude) { + if (!props.projectData.length > 0) { return; } - const createMarkerImage = (state: string) => new URL(`../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href; + const createMarkerImage = (state: string) => new URL(`../../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href; // map.value?.clearMap(); // markerList.forEach((item: any) => { // 创建一个 Icon @@ -366,14 +366,16 @@ const addMarker = () => { imageSize: new AMapRef.value.Size(52, 52) }); - // 将 icon 传入 marker - let startMarker = new AMapRef.value.Marker({ - position: new AMapRef.value.LngLat(Number(props.projectData.longitude), Number(props.projectData.latitude)), - // position: new AMapRef.value.LngLat(113, 21), - icon: startIcon, - offset: new AMapRef.value.Pixel(-13, -30) + props.projectData.map(item => { + // 将 icon 传入 marker + let startMarker = new AMapRef.value.Marker({ + position: new AMapRef.value.LngLat(Number(item.longitude), Number(item.latitude)), + // position: new AMapRef.value.LngLat(113, 21), + icon: startIcon, + offset: new AMapRef.value.Pixel(-13, -30) + }); + map.value?.add([startMarker]); }); - map.value?.add([startMarker]); // map.value?.setFitView(); // }); }; diff --git a/src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue b/src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue index 814d045..455bbb1 100644 --- a/src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue +++ b/src/views/goverment/huizhou/largeScreen/largeScreenOne/index.vue @@ -42,38 +42,34 @@ import maps from "./components/maps.vue"; import maps3D from "./components/maps3D.vue"; import largeScreenTwo from "../largeScreenTwo/index.vue"; import { GlobalStore } from "@/stores"; +import { sendIframeMessage } from "@/utils/util"; +import { getproNamelist } from "@/api/modules/goverment"; const route = useRoute(); const router = useRouter(); const globalStore = GlobalStore(); //获取项目信息 -const projectData = ref({ - latitude: "", - longitude: "", - totalDay: "" -}); +const projectData = ref([]); const screenValue = ref(0); const mapValue = ref(0); const changeMap = (val: any) => { mapValue.value = val; }; -const changeScreen = async () => { +const changeScreen = () => { console.log(route); - console.log({ path: globalStore.path, moduleId: globalStore.moduleId }); - await sendMessage({ path: globalStore.path, moduleId: globalStore.moduleId }, 2); - // router.push("/goverment/huizhou/largeScreen/largeScreenTwo/index"); + router.push("/goverment/huizhou/largeScreen/largeScreenTwo/index"); // screenValue.value = screenValue.value == 0 ? 1 : 0; }; -const sendMessage = (msg: any, type: any, iframeEle: any | undefined) => { - console.log(666); - if (type === 1) { - // 父 => 子 - iframeEle.contentWindow.postMessage(msg, "*"); - } else if (type === 2) { - // 子 => 父 - window.parent.postMessage(msg, "*"); +const getProjectList = async () => { + const res = await getproNamelist({}); + if (res && res.result && res.result.length > 0) { + projectData.value = res.result; } - console.log(777); + console.log(res, "66-----"); }; +onMounted(async () => { + await getProjectList(); + await sendIframeMessage({ path: globalStore.path, moduleId: globalStore.moduleId }, 2, undefined); +});