123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <template>
- <div class="map-home map-home-pading">
- <!-- <div class="map-title">可调空间</div> -->
- <div class="map-top">
- <span :class="type == 1 ? 'span-active' : ''" @click="checkMapType(1)"
- >列表</span
- >
- <span :class="type == 2 ? 'span-active' : ''" @click="checkMapType(2)"
- >地图</span
- >
- </div>
- <map-box
- v-if="type === 2"
- :mapType="2"
- :spaceData="spaceData"
- :projectId="projectId"
- :floorId="floorId"
- :spaceInfo="spaceInfo"
- :buildingId="buildingId"
- @changeSpace="changeSpace"
- ></map-box>
- <space-box
- v-if="type === 1"
- :spaceData="spaceData"
- :spaceInfo="spaceInfo"
- @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: () => "",
- },
- buildingId: {
- 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();
- let showMap: any = null;
- const store = useStore();
- const proxyData = reactive({
- type: 1,
- spaceData: props.spaceData,
- showMap: showMap, // 是否展示地图
- // 切换空间
- changeSpace(item: any) {
- contex.emit("changeSpace", item, 1);
- },
- buildingId: props.buildingId,
- floorId: props.floorId,
- spaceInfo: props.spaceInfo,
- checkMapType(type: any) {
- proxyData.type = type;
- },
- /**
- * 获取地图信息
- */
- getMapInfo() {
- let params: any = {
- projectId: props.projectId,
- floorId: proxyData.floorId,
- };
- getMapInfo(params)
- .then((res) => {
- // debugger
- let resData: any = res;
- if (resData.result === "success") {
- let data: any = resData?.data ?? null;
- // debugger
- if (data && data.spaceList && data.spaceList.length) {
- proxyData.showMap = true;
- } else {
- proxyData.showMap = false;
- }
- } else {
- proxyData.showMap = false;
- }
- })
- .catch(() => {
- proxyData.showMap = false;
- });
- },
- });
- onMounted(() => {
- proxyData.getMapInfo();
- });
- watch(
- props,
- (newProps: any) => {
- proxyData.spaceData = newProps.spaceData;
- proxyData.buildingId = newProps.buildingId;
- proxyData.floorId = newProps.floorId;
- proxyData.spaceInfo = newProps.spaceInfo;
- // proxyData.getMapInfo();
- },
- {
- deep: false,
- immediate: true,
- }
- );
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- .map-home {
- width: 100%;
- height: 100%;
- background: $elBg;
- .map-title {
- position: fixed;
- padding-top: 5px;
- padding-left: 20px;
- width: 160px;
- left: 0px;
- top: 30%;
- z-index: 333;
- border-radius: 10px;
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 500;
- font-size: 18px;
- line-height: 31px;
- /* identical to box height */
- color: #646C73;
- }
- .map-top {
- position: fixed;
- padding-top: 5px;
- width: 160px;
- right: 0px;
- top: 30%;
- z-index: 333;
- border-radius: 10px;
- span {
- width: 80px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- background: #fff;
- display: inline-block;
- }
- .span-active {
- // border-radius: 5px;
- background: $elCircle;
- color: #fff;
- }
- }
- }
- .map-home-pading {
- padding-top: 30px;
- }
- </style>
-
|