Newer
Older
KaiFengPC / src / views / gisMapPage / commonLegendDataMain.vue
@鲁yixuan 鲁yixuan on 29 Aug 7 KB updata
  1. <template>
  2. <div class="lengendPage">
  3. <!-- 展开收起 -->
  4. <div :class="['zksqImg', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'goLeft']" title="展开收起" @click="changeZhan"></div>
  5. <!-- 图例框 -->
  6. <div :class="['publicLegend', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
  7. <div v-for="item in legendList" :key="item.layername">
  8. <div class="titleB" @click="changeAllLegend(item)">
  9. {{ item.title }}
  10. <div class="iconImg">
  11. <el-icon v-if="item.isCheck" size="22">
  12. <Check />
  13. </el-icon>
  14. </div>
  15. </div>
  16. <div class="part" v-for="item2 in item.children" @click="changeLegend(item2)" :key="item2.layername">
  17. <img :src="getImageUrl(item2.url, 'newImgs/layerIcon')" class="img" />
  18. <p class="title">{{ item2.name }}</p>
  19. <div class="iconImg">
  20. <el-icon v-if="item2.isCheck" size="22">
  21. <Check />
  22. </el-icon>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="isOpenBuildingTL">
  29. <!-- 天地图、影像图切换 -->
  30. <el-popover placement="right-start" :width="80" trigger="hover">
  31. <template #reference><img src="@/assets/images/gisMap/earthIcon.png" alt="" class="earthIcon" /></template>
  32. <template #default>
  33. <div class="typeMap">
  34. <img src="@/assets/images/gisMap/defMap.png" alt="" :class="mapActive == 1 ? 'activeImg' : ''" @click="changeMapType(1)" />
  35. <img src="@/assets/images/gisMap/ysMap.png" alt="" :class="mapActive == 2 ? 'activeImg' : ''" @click="changeMapType(2)" />
  36. </div>
  37. </template>
  38. </el-popover>
  39. </div>
  40. </template>
  41. <script>
  42. import { getImageUrl } from '@/utils/ruoyi';
  43. import bus from '@/bus';
  44. import mapCommonLegend from './commonLegend.js';
  45. import axios from 'axios';
  46. import flagicon from '@/assets/newImgs/flagicon.png';
  47. import { nextTick, watch } from 'vue';
  48. export default {
  49. components: {},
  50. props: {},
  51. setup(props) {
  52. const allData = reactive({
  53. dataList: {},
  54. legendList: [],
  55. ifExpand: true,
  56. mapPopupShow: false,
  57. pipeData: {},
  58. pipePopupShow: false,
  59. pointData: {},
  60. pointPopupShow: false,
  61. allMapList: [],
  62. isOpenBuilding: false,
  63. buildingModels: null,
  64. mapActive: 1,
  65. });
  66. const filterMapList = ref([]);
  67. // 展开收起
  68. const changeZhan = () => {
  69. allData.ifExpand = !allData.ifExpand;
  70. };
  71. // 天地、影像图切换
  72. function changeMapType(val) {
  73. allData.mapActive = val;
  74. if (val == 2) {
  75. bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: true });
  76. } else {
  77. bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: false });
  78. }
  79. }
  80. // 图例点击
  81. const changeLegend = item => {
  82. item.isCheck = !item.isCheck;
  83. return bus.emit('setLayerVisible', item);
  84. };
  85. //图例一级标题勾选
  86. const changeAllLegend = item => {
  87. if (item.noAllCheck) {
  88. return;
  89. }
  90. item.isCheck = !item.isCheck;
  91. item.children.forEach(element => {
  92. element.isCheck = !item.isCheck;
  93. changeLegend(element);
  94. });
  95. };
  96. //取消弹窗
  97. const closePopup = () => {
  98. if (window.PopupInfo) {
  99. window.PopupInfo.hide();
  100. allData.mapPopupShow = false;
  101. }
  102. allData.pipePopupShow = false;
  103. };
  104. const closePointPopup = () => {
  105. allData.pointPopupShow = false;
  106. };
  107.  
  108. onMounted(() => {
  109. mapCommonLegend.getStationData();
  110. });
  111. onBeforeUnmount(() => {
  112. bus.off('legendDataListDataMain');
  113. bus.off('initeLayer');
  114. });
  115. return {
  116. ...toRefs(allData),
  117. changeZhan,
  118. changeLegend,
  119. changeAllLegend,
  120. closePointPopup,
  121. closePopup,
  122. changeMapType,
  123. };
  124. },
  125. };
  126. </script>
  127. <style lang="scss">
  128. .el-popper {
  129. .typeMap {
  130. img {
  131. width: 100%;
  132. cursor: pointer;
  133. }
  134. .activeImg {
  135. border: 1px solid #00d1ff;
  136. }
  137. }
  138. }
  139. .isOpenBuildingTL {
  140. width: 240px;
  141. position: absolute;
  142. top: 6%;
  143. left: 5px;
  144. z-index: 100;
  145. display: flex;
  146. justify-content: flex-end;
  147. .earthIcon {
  148. cursor: pointer;
  149. width: 35px;
  150. height: 35px;
  151. }
  152. }
  153. .lengendPage {
  154. .zksqImg {
  155. width: 13px;
  156. height: 130px;
  157. background: url('@/assets/newImgs/down.png');
  158. background-size: 100% 100%;
  159. border-radius: 10px 10px 0px 0px;
  160. position: absolute;
  161. top: 40%;
  162. left: 243px;
  163. z-index: 115;
  164. cursor: pointer;
  165. }
  166. .goLeft {
  167. left: 2px;
  168. }
  169. .publicLegend {
  170. background: #00314e;
  171. border: 1px solid #094065;
  172. box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
  173. opacity: 0.7;
  174. border-radius: 10px;
  175. position: absolute;
  176. top: 10%;
  177. left: 5px;
  178. z-index: 110;
  179. height: 750px;
  180. width: 240px;
  181. overflow: auto;
  182. .titleB {
  183. display: flex;
  184. height: 35px;
  185. line-height: 35px;
  186. background: #094065;
  187. font-size: 16px;
  188. padding-left: 10px;
  189. .iconImg {
  190. margin-left: 125px;
  191. margin-top: 5px;
  192. height: 20px;
  193. .el-icon {
  194. font-weight: bold;
  195. &.active {
  196. color: #00ee6f;
  197. }
  198. }
  199. }
  200. }
  201. .part {
  202. display: flex;
  203. height: 40px;
  204. align-items: center;
  205. cursor: pointer;
  206. &:hover {
  207. background: #08596a;
  208. }
  209. .img {
  210. width: 12px;
  211. height: 12px;
  212. margin-left: 15px;
  213. margin-right: 5px;
  214. }
  215. .title {
  216. margin-left: 5px;
  217. font-size: 14px;
  218. height: 30px;
  219. line-height: 30px;
  220. width: 155px;
  221. }
  222. .iconImg {
  223. width: 20px;
  224. height: 20px;
  225. .el-icon {
  226. font-weight: bold;
  227. &.active {
  228. color: #00ee6f;
  229. }
  230. }
  231. }
  232. }
  233. }
  234. }
  235. #mapPopup {
  236. width: 300px;
  237. height: 200px;
  238. background: #00314e;
  239. border: 1px solid #094065;
  240. z-index: 115;
  241. .title {
  242. margin-top: 20px;
  243. display: flex;
  244. align-items: center;
  245. justify-content: space-between;
  246. .titleName {
  247. display: flex;
  248. align-items: center;
  249. height: 22px;
  250. font-size: 16px;
  251. font-family: PingFang SC;
  252. font-weight: 400;
  253. color: #ccf1ff;
  254. line-height: 22px;
  255. &:before {
  256. display: block;
  257. content: '';
  258. width: 3px;
  259. height: 16px;
  260. background: #00d1ff;
  261. margin-right: 10px;
  262. }
  263. }
  264. .closePopup {
  265. margin-right: 20px;
  266. height: 22px;
  267. cursor: pointer;
  268. }
  269. }
  270. .basicContent {
  271. display: flex;
  272. align-items: center;
  273. margin: 20px 80px;
  274. .contentKey {
  275. width: 80px;
  276. margin: 3px;
  277. height: 20px;
  278. font-size: 14px;
  279. font-weight: 400;
  280. line-height: 20px;
  281. color: #00d1ff;
  282. }
  283. .contentValue {
  284. margin: 3px 3px 3px 15px;
  285. width: 200px;
  286. height: 20px;
  287. font-size: 14px;
  288. font-weight: 400;
  289. line-height: 20px;
  290. color: #00d1ff;
  291. }
  292. }
  293. }
  294. #pipeInfo {
  295. width: 350px;
  296. padding: 10px;
  297. background: rgba(0, 49, 78, 0.5);
  298. border: 1px solid #094065;
  299. z-index: 111;
  300. }
  301. #pointInfo {
  302. width: 350px;
  303. padding: 10px;
  304. background: rgba(0, 49, 78, 0.5);
  305. border: 1px solid #094065;
  306. z-index: 111;
  307. }
  308. .title {
  309. display: flex;
  310. .infoTitle {
  311. display: flex;
  312. align-items: center;
  313. height: 22px;
  314. font-size: 14px;
  315. font-family: PingFang SC;
  316. font-weight: 400;
  317. color: #ccf1ff;
  318. line-height: 22px;
  319. margin: 5px;
  320. width: 330px;
  321. &:before {
  322. display: block;
  323. content: '';
  324. width: 3px;
  325. height: 16px;
  326. background: #00d1ff;
  327. margin-right: 10px;
  328. }
  329. }
  330. .closePopup {
  331. margin: 5px;
  332. height: 22px;
  333. cursor: pointer;
  334. }
  335. }
  336.  
  337. .dividerLine {
  338. height: 2px;
  339. border: 1px;
  340. margin: 0px 0 10px 0px;
  341. background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  342. }
  343. </style>