index.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template>
  2. <div class="map-home map-home-pading">
  3. <!-- <div class="map-title">可调空间</div> -->
  4. <div class="map-top">
  5. <span :class="type == 1 ? 'span-active' : ''" @click="checkMapType(1)"
  6. >列表</span
  7. >
  8. <span :class="type == 2 ? 'span-active' : ''" @click="checkMapType(2)"
  9. >地图</span
  10. >
  11. </div>
  12. <map-box
  13. v-if="type === 2"
  14. :mapType="2"
  15. :spaceData="spaceData"
  16. :projectId="projectId"
  17. :floorId="floorId"
  18. :spaceInfo="spaceInfo"
  19. :buildingId="buildingId"
  20. @changeSpace="changeSpace"
  21. ></map-box>
  22. <space-box
  23. v-if="type === 1"
  24. :spaceData="spaceData"
  25. :spaceInfo="spaceInfo"
  26. @changeSpace="changeSpace"
  27. ></space-box>
  28. </div>
  29. </template>
  30. <script lang="ts">
  31. import {
  32. defineComponent,
  33. reactive,
  34. toRefs,
  35. onBeforeMount,
  36. onMounted,
  37. ref,
  38. watch,
  39. } from "vue";
  40. import SpaceBox from "./SpaceBox.vue";
  41. import MapBox from "./MapBox.vue";
  42. import { useRouter } from "vue-router";
  43. import { newNumber, parseImgUrl } from "@/utils";
  44. import { UserActionTypes } from "@/store/modules/user/action-types";
  45. import { useStore } from "@/store";
  46. import { login } from "@/apis/user";
  47. import { Form, Field, CellGroup, Button, Toast } from "vant";
  48. import { setToken } from "@/utils/cookies";
  49. import { getMapInfo } from "@/apis/envmonitor";
  50. export default defineComponent({
  51. props: {
  52. spaceData: {
  53. type: Array,
  54. default: () => [],
  55. },
  56. projectId: {
  57. type: String,
  58. default: () => "",
  59. },
  60. buildingId: {
  61. type: String,
  62. default: () => "",
  63. },
  64. floorId: {
  65. type: String,
  66. default: () => "",
  67. },
  68. spaceInfo: {
  69. type: Object,
  70. default: () => {},
  71. },
  72. },
  73. components: {
  74. vanForm: Form,
  75. vanField: Field,
  76. CellGroup,
  77. vanButton: Button,
  78. SpaceBox,
  79. MapBox,
  80. },
  81. setup(props, contex) {
  82. let router: any = useRouter();
  83. let showMap: any = null;
  84. const store = useStore();
  85. const proxyData = reactive({
  86. type: 1,
  87. spaceData: props.spaceData,
  88. showMap: showMap, // 是否展示地图
  89. // 切换空间
  90. changeSpace(item: any) {
  91. contex.emit("changeSpace", item, 1);
  92. },
  93. buildingId: props.buildingId,
  94. floorId: props.floorId,
  95. spaceInfo: props.spaceInfo,
  96. checkMapType(type: any) {
  97. proxyData.type = type;
  98. },
  99. /**
  100. * 获取地图信息
  101. */
  102. getMapInfo() {
  103. let params: any = {
  104. projectId: props.projectId,
  105. floorId: proxyData.floorId,
  106. };
  107. getMapInfo(params)
  108. .then((res) => {
  109. // debugger
  110. let resData: any = res;
  111. if (resData.result === "success") {
  112. let data: any = resData?.data ?? null;
  113. // debugger
  114. if (data && data.spaceList && data.spaceList.length) {
  115. proxyData.showMap = true;
  116. } else {
  117. proxyData.showMap = false;
  118. }
  119. } else {
  120. proxyData.showMap = false;
  121. }
  122. })
  123. .catch(() => {
  124. proxyData.showMap = false;
  125. });
  126. },
  127. });
  128. onMounted(() => {
  129. proxyData.getMapInfo();
  130. });
  131. watch(
  132. props,
  133. (newProps: any) => {
  134. proxyData.spaceData = newProps.spaceData;
  135. proxyData.buildingId = newProps.buildingId;
  136. proxyData.floorId = newProps.floorId;
  137. proxyData.spaceInfo = newProps.spaceInfo;
  138. // proxyData.getMapInfo();
  139. },
  140. {
  141. deep: false,
  142. immediate: true,
  143. }
  144. );
  145. return {
  146. ...toRefs(proxyData),
  147. };
  148. },
  149. });
  150. </script>
  151. <style lang="scss" scoped>
  152. .map-home {
  153. width: 100%;
  154. height: 100%;
  155. background: $elBg;
  156. .map-title {
  157. position: fixed;
  158. padding-top: 5px;
  159. padding-left: 20px;
  160. width: 160px;
  161. left: 0px;
  162. top: 30%;
  163. z-index: 333;
  164. border-radius: 10px;
  165. font-family: "PingFang SC";
  166. font-style: normal;
  167. font-weight: 500;
  168. font-size: 18px;
  169. line-height: 31px;
  170. /* identical to box height */
  171. color: #646C73;
  172. }
  173. .map-top {
  174. position: fixed;
  175. padding-top: 5px;
  176. width: 160px;
  177. right: 0px;
  178. top: 30%;
  179. z-index: 333;
  180. border-radius: 10px;
  181. span {
  182. width: 80px;
  183. height: 30px;
  184. line-height: 30px;
  185. text-align: center;
  186. background: #fff;
  187. display: inline-block;
  188. }
  189. .span-active {
  190. // border-radius: 5px;
  191. background: $elCircle;
  192. color: #fff;
  193. }
  194. }
  195. }
  196. .map-home-pading {
  197. padding-top: 30px;
  198. }
  199. </style>