Newer
Older
DH_Apicture / src / components / Map / popup.vue
@zhangqy zhangqy on 8 Dec 5 KB 提交图片
  1. <template>
  2. <div class="cesiumPopup" id="cesiumPopupID" v-show="AllData.popupShow">
  3. <div class="title">
  4. <div class="titleNameIcon"></div>
  5. <div class="titleNamePP">
  6. {{ AllData.dataList.roadName }}
  7. </div>
  8. <!-- <div class="PopupClosed">
  9. <el-icon :size="18" @click="closePopupCES"><Close /></el-icon>
  10. </div> -->
  11. </div>
  12. <div
  13. class="basicInfo"
  14. style="margin-top: 10px"
  15. v-if="AllData.dataList.code == 200"
  16. @click="showStreetLayer()"
  17. >
  18. <img :src="AllData.dataList.data.base64" />
  19. </div>
  20. </div>
  21. </template>
  22.  
  23. <script setup name="popup">
  24. import { ref, reactive, toRefs, onMounted } from "vue";
  25. import bus from "@/bus";
  26.  
  27. const AllData = reactive({
  28. dataList: {},
  29. popupShow: false,
  30. streetPosition: null,
  31. });
  32. //街景弹框点击事件
  33. const showStreetLayer = () => {
  34. AllData.dataList.RefName = "zhoubianjiejing";
  35. AllData.dataList.NoPromise = true;
  36. AllData.dataList.Getmenuarr = [
  37. {
  38. menuName: "周边全景",
  39. moduleName: "zhoubianjiejing",
  40. pointName: "",
  41. pointType: "",
  42. show: true,
  43. },
  44. ];
  45. AllData.dataList.comIDs = ["zhoubianjiejing"];
  46. bus.emit("DynamicBus", AllData.dataList);
  47. };
  48. onMounted(() => {
  49. bus.on("popupcontent", (params) => {
  50. console.log("popup接收地图标注点值---111", params);
  51.  
  52. // 排水弹窗
  53. if (params.popupInfo.type == "paishuiSupervise") {
  54. AllData.popupShow = false;
  55. let data = {
  56. title: "水位计:" + params.popupInfo.name,
  57. comIDs: ["JC_dialog", "JC_oldList"],
  58. SiteNo: params.popupInfo.siteNo,
  59. };
  60. bus.emit("publicDialog", data);
  61. return;
  62. }
  63. AllData.streetPosition = params.point;
  64. AllData.dataList = params.popupInfo;
  65. let pipePopupDiv = document.getElementById("cesiumPopupID");
  66.  
  67. let popupCenter,
  68. center,
  69. offsets = null;
  70. if (AllData.dataList.geometry) {
  71. if (AllData.dataList.geometry.includes("LINESTRING")) {
  72. popupCenter = turf.center(
  73. turf.feature(Terraformer.WKT.parse(AllData.dataList.geometry))
  74. ).geometry.coordinates;
  75. } else {
  76. popupCenter = Terraformer.WKT.parse(AllData.dataList.geometry).coordinates;
  77. }
  78. center = [popupCenter[0], popupCenter[1]];
  79. offsets = [-130, 200];
  80. } else {
  81. center = [params.point[0], params.point[1] + 0.0005];
  82. offsets = [-150, 200];
  83. }
  84. if (AllData.dataList.pumpCode) {
  85. AllData.dataList.rainpump = JSON.parse(AllData.dataList.rainpump);
  86. AllData.dataList.sweagepump = JSON.parse(AllData.dataList.sweagepump);
  87. }
  88. AllData.dataList.geometry = `POINT(${params.point.join(" ")})`;
  89. window.pipePopup = new mapboxL7.Popup({
  90. html: pipePopupDiv,
  91. lngLat: {
  92. lng: popupCenter ? popupCenter[0] : params.point[0],
  93. lat: popupCenter ? popupCenter[1] : params.point[1],
  94. },
  95. anchor: "center",
  96. offsets: offsets ? offsets : [-90, 130],
  97. autoClose: false,
  98. });
  99. newfiberMap.addPopup(pipePopup);
  100. newfiberMap.map.easeTo({
  101. center: center,
  102. zoom: 18,
  103. });
  104. AllData.popupShow = true;
  105. // 建筑社区弹框
  106. if (params.popupInfo.type == "HMJZYSQ") {
  107. AllData.popupShow = false;
  108. let data = {
  109. title: params.popupInfo.name,
  110. comIDs: ["xxinformation"],
  111. };
  112. bus.emit("publicDialog", data);
  113. setTimeout(() => {
  114. bus.emit("xxinformationList", params);
  115. }, 100);
  116. }
  117. if (AllData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
  118. if (AllData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
  119. if (AllData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
  120. });
  121. });
  122. onBeforeUnmount(() => {
  123. bus.off("popupcontent");
  124. });
  125. </script>
  126.  
  127. <style lang="scss">
  128. .l7-popup-close-button {
  129. right: 32px !important;
  130. top: 32px !important;
  131. }
  132. .cesiumPopup {
  133. width: 100%;
  134. height: 100%;
  135. padding: 10px;
  136. background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
  137. border-radius: 6px;
  138. border: 1px solid #6acefe;
  139. box-shadow: inset 0 0 5px 5px #47eef38a;
  140. .title {
  141. background: linear-gradient(
  142. 90deg,
  143. rgba(14, 210, 254, 0.5) 0%,
  144. rgba(31, 221, 255, 0.2) 100%
  145. );
  146. background-size: cover;
  147. display: flex;
  148. align-items: center;
  149.  
  150. .titleNameIcon {
  151. height: 17px;
  152. width: 14px;
  153. background: url("@/assets/images/pictureOnMap/titleIcon.png") no-repeat;
  154. background-size: 100% 100%;
  155. margin-left: 10px;
  156. }
  157. .titleNamePP {
  158. width: 450px;
  159. height: 22px;
  160. font-size: 16px;
  161. font-family: PingFang SC;
  162. font-weight: 400;
  163. color: #b8ecff;
  164. line-height: 22px;
  165. margin: 5px;
  166. overflow: hidden;
  167. text-overflow: ellipsis; /* 超出宽度后显示省略号 */
  168. white-space: nowrap; /* 限制不允许换行 */
  169. &:before {
  170. // display: block;
  171. // content: '';
  172. // width: 3px;
  173. // height: 16px;
  174. // background: #00d1ff;
  175. // margin-right: 10px;
  176. }
  177. }
  178. .PopupClosed {
  179. position: absolute;
  180. top: 20px;
  181. right: 20px;
  182. z-index: 9999;
  183. cursor: pointer;
  184. color: #cee3ecff;
  185. }
  186. }
  187. }
  188. </style>