|
@@ -5,10 +5,10 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 左上角:位置切换 -->
|
|
<!-- 左上角:位置切换 -->
|
|
|
- <div class="location-bar" @click="handleSwitchLocation">
|
|
|
|
|
|
|
+ <div class="location-bar">
|
|
|
<el-icon class="location-bar__icon"><LocationFilled /></el-icon>
|
|
<el-icon class="location-bar__icon"><LocationFilled /></el-icon>
|
|
|
<span class="location-bar__name van-ellipsis">{{ locationName }}</span>
|
|
<span class="location-bar__name van-ellipsis">{{ locationName }}</span>
|
|
|
- <span class="location-bar__action">切换位置</span>
|
|
|
|
|
|
|
+ <span class="location-bar__action" @click="handleSwitchLocation">切换位置</span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 左侧:胁迫图层菜单 -->
|
|
<!-- 左侧:胁迫图层菜单 -->
|
|
@@ -17,8 +17,8 @@
|
|
|
v-for="item in stressMenuItems"
|
|
v-for="item in stressMenuItems"
|
|
|
:key="item.key"
|
|
:key="item.key"
|
|
|
class="side-menu__item"
|
|
class="side-menu__item"
|
|
|
- :class="{ active: activeStressKey === item.key }"
|
|
|
|
|
- @click="activeStressKey = item.key"
|
|
|
|
|
|
|
+ :class="{ active: activeMenuKey === item.key }"
|
|
|
|
|
+ @click="handleSelectMenu(item.key)"
|
|
|
>
|
|
>
|
|
|
<img class="side-menu__icon" :src="item.icon" alt="" />
|
|
<img class="side-menu__icon" :src="item.icon" alt="" />
|
|
|
<div class="side-menu__text">
|
|
<div class="side-menu__text">
|
|
@@ -34,8 +34,8 @@
|
|
|
v-for="item in layerMenuItems"
|
|
v-for="item in layerMenuItems"
|
|
|
:key="item.key"
|
|
:key="item.key"
|
|
|
class="side-menu__item"
|
|
class="side-menu__item"
|
|
|
- :class="{ active: activeLayerKey === item.key }"
|
|
|
|
|
- @click="activeLayerKey = item.key"
|
|
|
|
|
|
|
+ :class="{ active: activeMenuKey === item.key }"
|
|
|
|
|
+ @click="handleSelectMenu(item.key)"
|
|
|
>
|
|
>
|
|
|
<img class="side-menu__icon" :src="item.icon" alt="" />
|
|
<img class="side-menu__icon" :src="item.icon" alt="" />
|
|
|
<div class="side-menu__text">
|
|
<div class="side-menu__text">
|
|
@@ -79,7 +79,6 @@
|
|
|
import { computed, nextTick, onActivated, onMounted, ref } from "vue";
|
|
import { computed, nextTick, onActivated, onMounted, ref } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
import { useRouter } from "vue-router";
|
|
|
import { useStore } from "vuex";
|
|
import { useStore } from "vuex";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
|
|
import { LocationFilled } from "@element-plus/icons-vue";
|
|
import { LocationFilled } from "@element-plus/icons-vue";
|
|
|
import { convertPointToArray } from "@/utils/index";
|
|
import { convertPointToArray } from "@/utils/index";
|
|
|
import GrowthReportMap from "./growthReportMap.js";
|
|
import GrowthReportMap from "./growthReportMap.js";
|
|
@@ -90,6 +89,8 @@ const router = useRouter();
|
|
|
|
|
|
|
|
const DEFAULT_MAP_POINT = "POINT(113.6142086995688 23.585836479509055)";
|
|
const DEFAULT_MAP_POINT = "POINT(113.6142086995688 23.585836479509055)";
|
|
|
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
|
|
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
|
|
|
|
|
+const LOCATION_SESSION_KEY = "GROWTH_REPORT_LOCATION";
|
|
|
|
|
+const MAP_POINT_STORAGE_KEY = "GROWTH_REPORT_MAP_POINT";
|
|
|
|
|
|
|
|
const menuIcon = require("@/assets/img/common/farm-active.png");
|
|
const menuIcon = require("@/assets/img/common/farm-active.png");
|
|
|
|
|
|
|
@@ -105,9 +106,14 @@ const tabBarHeight = computed(() => store.state.home.tabBarHeight);
|
|
|
const mapContainer = ref(null);
|
|
const mapContainer = ref(null);
|
|
|
const growthReportMap = new GrowthReportMap();
|
|
const growthReportMap = new GrowthReportMap();
|
|
|
const locationName = ref("");
|
|
const locationName = ref("");
|
|
|
|
|
+const currentMapPoint = ref(
|
|
|
|
|
+ localStorage.getItem(MAP_POINT_STORAGE_KEY) ||
|
|
|
|
|
+ localStorage.getItem("selectedFarmPoint") ||
|
|
|
|
|
+ store.state.home.miniUserLocationPoint ||
|
|
|
|
|
+ DEFAULT_MAP_POINT
|
|
|
|
|
+);
|
|
|
const currentCropName = ref("水稻");
|
|
const currentCropName = ref("水稻");
|
|
|
-const activeStressKey = ref("hot-drought-2");
|
|
|
|
|
-const activeLayerKey = ref("growth");
|
|
|
|
|
|
|
+const activeMenuKey = ref("hot-drought-2");
|
|
|
const panelHeight = ref(280);
|
|
const panelHeight = ref(280);
|
|
|
const inviteBottom = computed(() => panelHeight.value);
|
|
const inviteBottom = computed(() => panelHeight.value);
|
|
|
|
|
|
|
@@ -123,8 +129,8 @@ const layerMenuItems = [
|
|
|
{ key: "phenology", line1: "物候", line2: "进程", icon: menuIcon },
|
|
{ key: "phenology", line1: "物候", line2: "进程", icon: menuIcon },
|
|
|
];
|
|
];
|
|
|
|
|
|
|
|
-function getLocationName() {
|
|
|
|
|
- const locationPoint = localStorage.getItem("selectedFarmPoint") || store.state.home.miniUserLocationPoint;
|
|
|
|
|
|
|
+function getLocationName(point = currentMapPoint.value) {
|
|
|
|
|
+ const locationPoint = point || localStorage.getItem("selectedFarmPoint") || store.state.home.miniUserLocationPoint;
|
|
|
if (!locationPoint) return;
|
|
if (!locationPoint) return;
|
|
|
const farmLocation = convertPointToArray(locationPoint);
|
|
const farmLocation = convertPointToArray(locationPoint);
|
|
|
if (!farmLocation?.length) return;
|
|
if (!farmLocation?.length) return;
|
|
@@ -139,20 +145,71 @@ function getLocationName() {
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+function saveCurrentMapPoint(point) {
|
|
|
|
|
+ if (!point) return;
|
|
|
|
|
+ currentMapPoint.value = point;
|
|
|
|
|
+ localStorage.setItem(MAP_POINT_STORAGE_KEY, point);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const initMap = async () => {
|
|
const initMap = async () => {
|
|
|
await nextTick();
|
|
await nextTick();
|
|
|
if (!mapContainer.value) return;
|
|
if (!mapContainer.value) return;
|
|
|
if (growthReportMap.kmap) {
|
|
if (growthReportMap.kmap) {
|
|
|
growthReportMap.kmap.map?.updateSize?.();
|
|
growthReportMap.kmap.map?.updateSize?.();
|
|
|
|
|
+ const coordinate = convertPointToArray(currentMapPoint.value)?.map(Number);
|
|
|
|
|
+ if (coordinate?.length === 2) {
|
|
|
|
|
+ growthReportMap.setMapPosition(coordinate);
|
|
|
|
|
+ }
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
- const location = store.state.home.miniUserLocationPoint || DEFAULT_MAP_POINT;
|
|
|
|
|
|
|
+ const location = currentMapPoint.value || store.state.home.miniUserLocationPoint || DEFAULT_MAP_POINT;
|
|
|
|
|
+ currentMapPoint.value = location;
|
|
|
growthReportMap.initMap(location, mapContainer.value);
|
|
growthReportMap.initMap(location, mapContainer.value);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+function applySelectedLocation() {
|
|
|
|
|
+ const raw = sessionStorage.getItem(LOCATION_SESSION_KEY);
|
|
|
|
|
+ if (!raw) return false;
|
|
|
|
|
+ sessionStorage.removeItem(LOCATION_SESSION_KEY);
|
|
|
|
|
+ let saved = null;
|
|
|
|
|
+ try {
|
|
|
|
|
+ saved = JSON.parse(raw);
|
|
|
|
|
+ } catch {
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!saved?.point && !saved?.coordinate) return false;
|
|
|
|
|
+
|
|
|
|
|
+ const point = saved.point || `POINT(${saved.coordinate[0]} ${saved.coordinate[1]})`;
|
|
|
|
|
+ const coordinate = (saved.coordinate || convertPointToArray(point)).map(Number);
|
|
|
|
|
+ saveCurrentMapPoint(point);
|
|
|
|
|
+
|
|
|
|
|
+ if (growthReportMap.kmap && coordinate?.length === 2) {
|
|
|
|
|
+ growthReportMap.setMapPosition(coordinate);
|
|
|
|
|
+ }
|
|
|
|
|
+ getLocationName(point);
|
|
|
|
|
+ return true;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const handleSwitchLocation = () => {
|
|
const handleSwitchLocation = () => {
|
|
|
|
|
+ // 以已确认的 currentMapPoint 为准,避免地图临时中心覆盖已选位置
|
|
|
|
|
+ const mapCenter =
|
|
|
|
|
+ currentMapPoint.value ||
|
|
|
|
|
+ store.state.home.miniUserLocationPoint ||
|
|
|
|
|
+ DEFAULT_MAP_POINT;
|
|
|
|
|
+ router.push({
|
|
|
|
|
+ path: "/entry_select_location",
|
|
|
|
|
+ query: {
|
|
|
|
|
+ mapCenter,
|
|
|
|
|
+ iconType: "current",
|
|
|
|
|
+ from: "growth_report",
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+const handleSelectMenu = (key) => {
|
|
|
|
|
+ if (!key) return;
|
|
|
|
|
+ activeMenuKey.value = key;
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const handleInvite = (item) => {
|
|
const handleInvite = (item) => {
|
|
|
let inviteName = "好友";
|
|
let inviteName = "好友";
|
|
@@ -190,7 +247,6 @@ const handleViewDetail = (item) => {
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handlePatrolTip = () => {
|
|
const handlePatrolTip = () => {
|
|
|
- ElMessage.info("巡园要点功能即将开放");
|
|
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handlePanelHeightChange = (height) => {
|
|
const handlePanelHeightChange = (height) => {
|
|
@@ -202,7 +258,8 @@ onMounted(() => {
|
|
|
initMap();
|
|
initMap();
|
|
|
});
|
|
});
|
|
|
onActivated(() => {
|
|
onActivated(() => {
|
|
|
- getLocationName();
|
|
|
|
|
|
|
+ const applied = applySelectedLocation();
|
|
|
|
|
+ if (!applied) getLocationName();
|
|
|
initMap();
|
|
initMap();
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|