qa-kangzai-vue/src/views/map/components/bottom_utils.vue

<template>
  <div class="bottom_utils">
    <div class="items">
      <div
        v-for="(item, index) in bottomUtilsList"
        :key="index"
        :class="['item', { active: currentActiveName === item.name }]"
        @click="
          router.push({
            name: 'map',
            params: { name: item.name, type: item.type },
          })
        "
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, inject, nextTick } from "vue";
import { useRouter, onBeforeRouteUpdate, useRoute } from "vue-router";
import {
  getEmergencyStoragePage,
  getGeologicalDisasterPage,
  getMountainFloodVillagePage,
  getReservoirBasicPage,
  getTailingsReservoirListPage,
} from "@/request/kangzai.js";
import dayjs from "dayjs";
import { useUserStore } from "@/pinia/user.js";
import { mapMethodsInjectionKey } from "../js/injectionKey.js";
import island from "../json/bridge/island.json";
import mitt from "@/assets/js/mitt.js";
import { changeCoverMaskVisibleMittKey } from "@/views/map/js/mittKey.js";
import { BD09ToWGS84 } from "@/views/map/js/utils.js";

const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const currentActiveName = ref(route.params.name || "降雨量");
const currentActiveType = ref(route.params.type || "rainfall");
const mapMethods = inject(mapMethodsInjectionKey);
const bottomUtilsList = [
  { name: "降雨量", type: "rainfall" },
  { name: "河流", type: "river" },
  { name: "水库", type: "reservoir", dialogWidth: 300, dialogLeft: 200 },
  {
    name: "地质灾害点",
    type: "geological_disaster",
    dialogWidth: 400,
    dialogLeft: 250,
  },
  {
    name: "应急储备库",
    type: "emergency_reserve_warehouse",
    dialogWidth: 350,
    dialogLeft: 200,
  },
  {
    name: "山洪灾害村",
    type: "torrential_flood_village",
    dialogWidth: 400,
    dialogLeft: 250,
  },
  { name: "尾矿库", type: "tailings_pond", dialogWidth: 500, dialogLeft: 300 },
];
onBeforeRouteUpdate((to) => {
  fnMapRemoveElement();
  currentActiveName.value = to.params.name;
  currentActiveType.value = to.params.type;
  fnMapAddElement();
});
onMounted(() => {
  userStore.setToken("ba4cff95a300b9da9f1f8fa001c79082");
  userStore.setTokenTime(dayjs().format("YYYY-MM-DD HH:mm:ss"));
  nextTick(() => {
    fnMapAddElement();
  });
});
onBeforeUnmount(() => {
  userStore.setToken("");
  userStore.setTokenTime("");
});
const fnMapRemoveElement = () => {
  if (currentActiveName.value !== "河流")
    mapMethods.value.removePoint(currentActiveType.value);
  else {
    mapMethods.value.removeRiver();
    mapMethods.value.removeBridge();
    mapMethods.value.removeHalo();
  }
};
const fnMapAddElement = () => {
  if (currentActiveName.value === "河流") fnAddRiver();
  if (currentActiveName.value === "尾矿库")
    fnAddPoint(getTailingsReservoirListPage, "name");
  if (currentActiveName.value === "水库")
    fnAddPoint(getReservoirBasicPage, "reservoirName");
  if (currentActiveName.value === "地质灾害点")
    fnAddPoint(getGeologicalDisasterPage, "disasterName");
  if (currentActiveName.value === "应急储备库")
    fnAddPoint(getEmergencyStoragePage, "storageName");
  if (currentActiveName.value === "山洪灾害村")
    fnAddPoint(getMountainFloodVillagePage, "villageName");
};
const fnAddPoint = async (api, nameKey) => {
  mitt.emit(changeCoverMaskVisibleMittKey, true);
  const {
    page: { list },
  } = await api({ curPage: 1, limit: 1000 });
  list.forEach((item) => {
    item.name = item[nameKey];
    item.dialogWidth = bottomUtilsList.find(
      (item) => item.name === currentActiveName.value
    ).dialogWidth;
    item.dialogLeft = bottomUtilsList.find(
      (item) => item.name === currentActiveName.value
    ).dialogLeft;
    const [longitude, latitude] = BD09ToWGS84(item.longitude, item.latitude);
    item.longitude = longitude;
    item.latitude = latitude;
  });
  await mapMethods.value.addPoint(currentActiveType.value, list);
  mitt.emit(changeCoverMaskVisibleMittKey, false);
};
const fnAddRiver = async () => {
  mitt.emit(changeCoverMaskVisibleMittKey, true);
  const riverModules = import.meta.glob("../json/river/*.json");
  const bridgeModules = import.meta.glob([
    "../json/bridge/*.json",
    "!../json/bridge/island.json",
  ]);
  for (const path in riverModules) {
    const { river } = await riverModules[path]();
    for (let i = 0; i < river.length; i++) {
      await mapMethods.value.addRiver(river[i].position);
    }
  }
  for (const path in bridgeModules) {
    const { bridge } = await bridgeModules[path]();
    for (let i = 0; i < bridge.length; i++) {
      await mapMethods.value.addBridge(bridge[i].position);
    }
  }
  for (let i = 0; i < island.island.length; i++) {
    await mapMethods.value.addBridge(island.island[i].position);
  }
  mitt.emit(changeCoverMaskVisibleMittKey, false);
};
</script>

<style scoped lang="scss">
.bottom_utils {
  position: absolute;
  bottom: 0;
  left: 500px;
  right: 500px;
  background-image: url("/src/assets/images/map/buttombg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 10px 20px 5px 20px;

  .items {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      width: 122px;
      height: 46px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      background-image: url("/src/assets/images/map/listbg1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: bold;
      font-size: 16px;

      &.active {
        background-image: url("/src/assets/images/map/listbg2.png");
      }
    }
  }
}
</style>