diff --git a/src/views/goverment/dustManagement/index.vue b/src/views/goverment/dustManagement/index.vue index 73cd880..bbb0f55 100644 --- a/src/views/goverment/dustManagement/index.vue +++ b/src/views/goverment/dustManagement/index.vue @@ -180,9 +180,14 @@ const onSearch = async (params: ResAiEngineerPage | ResAiProjectPage) => { active.value === 0 ? item.projectSn === params.projectSn : item.engineeringSn === params.engineeringSn ); monitorList.value = monitorList.value.map(item => (item === curr ? { ...curr, showGif: true } : { ...item, showGif: false })); - params.longitude !== "" && params.longitude !== null - ? map.value?.setCenter([params.longitude, +params.latitude]) - : map.value?.setCenter([116.481181, 39.90923]); + if (params.longitude && params.latitude) { + console.log(111); + map.value?.setCenter([+params.longitude, +params.latitude]); + showInfoPage(curr); + } + // params.longitude !== "" && params.longitude !== null + // ? map.value?.setCenter([params.longitude, +params.latitude]) + // : map.value?.setCenter([116.481181, 39.90923]); }; // 页面的搜索按钮 @@ -231,7 +236,62 @@ const onCurChange = async (params: number) => { // pages.value.total = +res.result.total; }; +// 展示信息窗口 +const showInfoPage = async (obj: any) => { + const createMarkerImage = (state: string) => new URL(`../../../assets/images/AIwaring/${state}`, import.meta.url).href; + // 创建一个 选中的Icon + let selectIcon = getIcon( + "selected", + obj.environAlarmFlag === false ? createMarkerImage("clouding.gif") : createMarkerImage("warnclouding.gif") + ); + + // 将 icon 传入 marker + let startMarker = new AMapRef.value.Marker({ + position: new AMapRef.value.LngLat(Number(obj.longitude) || 113, Number(obj.latitude) || 21), + icon: selectIcon, + offset: new AMapRef.value.Pixel(-13, -30) + }); + map.value?.add([startMarker]); + monitorList.value = monitorList.value.map(val => + val.latitude == obj.latitude && val.longitude == obj.longitude + ? { ...obj, showGif: true } + : { ...val, showGif: false, showInfo: false } + ); + const curr = monitorList.value.find(item => item.showGif); + curr.showInfo = !curr.showInfo; + // addMarker(); + + environAlarmFlag.value = obj.environAlarmFlag; + + // e.target.setIcon(selectIcon); + + if (active.value === 0) { + infoName.value = obj.projectName; + const res = await getproDetail({ projectId: obj.projectId }); + // @ts-expect-error + infoWindowData.value = res.result; + } else { + infoName.value = obj.engineeringName; + const res = await getengDetail({ id: obj.id }); + // @ts-expect-error + infoWindowData.value = res.result; + } + + if (curr.showInfo) { + infoShow.value = true; + const infowindow = new AMapRef.value.InfoWindow({ + isCustom: true, //使用自定义窗体 + content: infoWindowPage.value, + offset: new AMap.Pixel(16, -45) + }); + + infowindow.open(map.value, startMarker.getPosition()); + } else { + infoShow.value = false; + onClose(); + } +}; // 地图增加坐标点 const addMarker = () => { const createMarkerImage = (state: string) => new URL(`../../../assets/images/AIwaring/${state}`, import.meta.url).href; @@ -302,7 +362,7 @@ const addMarker = () => { const mapData = async () => { const AMap = await initAMap(); AMapRef.value = AMap; - map.value = new AMap.Map("map-container", { zoom: 10, center: [116.481181, 39.90923], viewMode: "2D", resizeEnable: true }); + map.value = new AMap.Map("map-container", { zoom: 7, center: [116.481181, 39.90923], viewMode: "2D", resizeEnable: true }); // map.value?.on("click", function (e) { // map.value?.clearInfoWindow(); // }); diff --git a/src/views/login/index-rs.scss b/src/views/login/index-hc.scss similarity index 82% rename from src/views/login/index-rs.scss rename to src/views/login/index-hc.scss index 74e7092..a4dad02 100644 --- a/src/views/login/index-rs.scss +++ b/src/views/login/index-hc.scss @@ -1,29 +1,19 @@ -.flx-center { - display: flex; - flex-direction: column; - align-items: flex-start; -} .login-container { height: 100%; min-height: 550px; - background: url("@/assets/images/login/bglogin_rushan.png") center center no-repeat; - background-size: 100% 65%; - .login-title { - color: #2a314b; - font-weight: 600; - font-size: 22px; - > span { - margin-left: 30px; - } - } + background: url("@/assets/images/login/loginBackground.jpg") center center no-repeat; + background-color: #eeeeee; + background-size: 100% 100%; + background-size: cover; .login-box { position: relative; box-sizing: border-box; display: flex; align-items: center; - justify-content: flex-end; + justify-content: center; width: 96%; - height: 75%; + height: 94%; + padding: 0 50px; // background-color: hsl(0deg 0% 100% / 80%); border-radius: 10px; @@ -56,7 +46,7 @@ height: 377px; padding: 50px 40px 45px; background-color: #ffffff; - margin-right: 120px; + // border-radius: 10px; box-shadow: 2px 3px 7px rgb(0 0 0 / 20%); .login-logo { diff --git a/src/views/login/index-rs.vue b/src/views/login/index-hc.vue similarity index 65% rename from src/views/login/index-rs.vue rename to src/views/login/index-hc.vue index e2b1ade..ddee4e5 100644 --- a/src/views/login/index-rs.vue +++ b/src/views/login/index-hc.vue @@ -1,15 +1,12 @@