sagacloud-sagacare-ipad/src/views/envmonitor/components/Map/index.vue

<template>
  <div class="map-home">
    <map-box v-if="showMap && floorId" :projectId="projectId" :floorId="floorId"></map-box>
    <space-box
      v-else
      :spaceData="spaceData"
      @changeSpace="changeSpace"
    ></space-box>
  </div>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
} from "vue";
import SpaceBox from "./SpaceBox.vue";
import MapBox from "./MapBox.vue";
import { useRouter } from "vue-router";
import { newNumber, parseImgUrl } from "@/utils";
import { UserActionTypes } from "@/store/modules/user/action-types";
import { useStore } from "@/store";
import { login } from "@/apis/user";
import { Form, Field, CellGroup, Button, Toast } from "vant";
import { setToken } from "@/utils/cookies";
import { getMapInfo } from "@/apis/envmonitor";

export default defineComponent({
  props: {
    spaceData: {
      type: Array,
      default: () => [],
    },
    projectId: {
      type: String,
      default: () => "",
    },
    floorId: {
      type: String,
      default: () => "",
    },
    spaceInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    vanForm: Form,
    vanField: Field,
    CellGroup,
    vanButton: Button,
    SpaceBox,
    MapBox,
  },
  setup(props, contex) {
    let router: any = useRouter();
    const store = useStore();
    const proxyData = reactive({
      spaceData: props.spaceData,
      showMap: false, // 是否展示地图
      changeSpace(item: any) {
        contex.emit("changeSpace", item, 1);
      },
      floorId:props.floorId,
      /**
       * 获取地图信息
       */
      getMapInfo() {
        let params: any = {
          projectId: props.projectId,
          floorId: proxyData.floorId,
        };
        getMapInfo(params)
          .then((res) => {
            let resData: any = res;
            if (resData.result === "success") {
              let data: any = resData?.data ?? null;
              // debugger
              if (data) {
                proxyData.showMap = true;
              } else {
                proxyData.showMap = false;
              }
            } else {
              proxyData.showMap = false;
            }
          })
          .catch(() => {
            proxyData.showMap = false;
          });
      },
    });
    onMounted(() => {
    });
    watch(
      props,
      (newProps: any) => {
        proxyData.spaceData = newProps.spaceData;
        proxyData.floorId = newProps.floorId;
        console.log("proxyData.floorId===")
        console.log(proxyData.floorId)
        proxyData.getMapInfo();
      },
      {
        deep: false,
        immediate: true,
      }
    );
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.map-home {
  width: 100%;
  height: 100%;
  background: $elBg;
}
</style>