webViewMap.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <div class="TsxzMap">
  3. <BigScreenMap
  4. :GZData="gzData"
  5. :fixed="1"
  6. :title="mapTitle"
  7. :defaultExpand="false"
  8. :overlayShow="true"
  9. :imgLayers="mapImgLayers"
  10. ref="arcMapRef"
  11. :visible-layer-ids="visibleLayerIds"
  12. @mapClick="mapClickHandle"
  13. ></BigScreenMap>
  14. </div>
  15. </template>
  16. <script>
  17. import { mapState, mapGetters } from 'vuex';
  18. import BigScreenMap from '@/views/components/BigScreenMap';
  19. export default {
  20. name: 'TsxzMap',
  21. components: { BigScreenMap },
  22. mounted() {
  23. this.$vm.$emit('setGdDetailType', 20);
  24. this.changeXzq();
  25. //监听图层改变事件
  26. this.$vm.$on('setVisibleLayerIdEvent', (visibleLayerId) => {
  27. this.visibleLayerIds[1] = visibleLayerId;
  28. });
  29. //监听图层改变事件
  30. this.$vm.$on('setVisibleMoreLayerIdEvent', (visibleLayerId) => {
  31. visibleLayerId.forEach((i, index) => {
  32. this.visibleLayerIds[index + 1] = i;
  33. });
  34. });
  35. this.$vm.$on('clearMoreLayerIdEvent', () => {
  36. this.visibleLayerIds[1] = '';
  37. if (this.this.visibleLayerIds[2]) {
  38. this.visibleLayerIds[2] = '';
  39. }
  40. });
  41. this.$vm.$emit('switchLayerShow', true);
  42. // this.initMapData()
  43. // this.showLayer('kfq');
  44. },
  45. computed: {
  46. ...mapState({
  47. xzqName: (state) => state.BaseData.xzqState,
  48. }),
  49. ...mapGetters({
  50. xzqdm: 'BaseData/xzqCodeGetter',
  51. }),
  52. },
  53. data() {
  54. return {
  55. gzData: [],
  56. areaType: 'city',
  57. oldGzData: [],
  58. mapTitle: '供地总面积',
  59. visibleLayerIds: ['bj-lsyd', 'syyd', 'bj-gyyd-new', 'bj-zzyd-new', 'bj-jyyd'],
  60. mapImgLayers: [],
  61. xzqdmArr: [],
  62. year: 2021,
  63. jd: '全年',
  64. xzqVal: '330108',
  65. };
  66. },
  67. methods: {
  68. async mapClickHandle (payload1, key) {
  69. this.$emit('mapClick', payload1, key);
  70. if (key == 'bj-dkgl') {
  71. this.$vm.$emit('setGdDetailType', 24);
  72. } else if (key == 'bj-kgdk') {
  73. this.$vm.$emit('setGdDetailType', 101);
  74. }
  75. this.$vm.$emit('getGdDetailData', payload1, key);
  76. },
  77. showLayer (layerId) {
  78. this.$vm.$emit('setVisibleLayerIdEvent', layerId);
  79. this.$vm.$emit('switchLayerShow', true);
  80. this.$vm.$emit('setGdDetailType', 12);
  81. },
  82. returnToUp() {
  83. this.$router.go(-1);
  84. },
  85. changeAreaHandle(val) {
  86. if (val[1] == '330110') {
  87. this.$router.push({
  88. path: 'qyfx',
  89. query: this.$route.query,
  90. });
  91. }
  92. },
  93. initMapData() {
  94. const urlApi = `/api/ybz/getYqXzqfz`;
  95. const params = {};
  96. this.$ajax.get(urlApi, params, this, false).then((result) => {
  97. const data = result['data'] || {};
  98. let mapData = [];
  99. data.forEach((item, index) => {
  100. let obj = {
  101. name: item['xzqmc'],
  102. typeIndex: 0,
  103. param: {
  104. value1: '园区数量',
  105. value2: item.num,
  106. unit1: '',
  107. unit2: '个',
  108. order: index + 1,
  109. },
  110. };
  111. mapData.push(obj);
  112. });
  113. this.gzData = mapData;
  114. });
  115. },
  116. changeXzq() {
  117. const where = `xzqdm = '${this.xzqVal}'`;
  118. this.$vm.$emit('location-mask-self-where', {
  119. layerId: 'xzqh-x-search',
  120. where,
  121. });
  122. // if (this.xzqVal.length > 6) {
  123. // this.$vm.$emit("location-mask-self-where", { layerId: 'xzqh-z-search', where: `xzqdm = '${this.xzqVal}'` });
  124. // } else {
  125. // this.$vm.$emit("location-mask-self-where", { layerId: 'xzqh-x-search', where: `xzqdm = '${this.xzqVal}'` });
  126. // }
  127. },
  128. },
  129. };
  130. </script>
  131. <style scoped lang="scss">
  132. .TsxzMap {
  133. height: 100%;
  134. position: relative;
  135. .btn-close-wrapper {
  136. position: absolute;
  137. top: 7px;
  138. left: 10px;
  139. font-weight: bold;
  140. color: #ffffff;
  141. font-size: 18px;
  142. border: 1px solid #468ec0;
  143. background: linear-gradient(0deg, #102a54 0%, #3d5a93 100%);
  144. border-radius: 4px;
  145. padding: 1px 10px;
  146. z-index: 999;
  147. line-height: 32px;
  148. cursor: pointer;
  149. .close-icon {
  150. width: 20px;
  151. margin-right: 5px;
  152. vertical-align: middle;
  153. }
  154. }
  155. .areaSelectBox {
  156. position: absolute;
  157. top: 2px;
  158. left: 10px;
  159. margin: auto;
  160. width: 160px;
  161. .prefix-icon {
  162. position: absolute;
  163. top: 12px;
  164. left: 6px;
  165. }
  166. ::v-deep {
  167. .el-input__inner {
  168. height: 34px;
  169. font-weight: bold;
  170. color: #fff;
  171. border: 1px solid #468ec0 !important;
  172. background: linear-gradient(0deg, #102a54 0%, #3f5d96 100%) !important;
  173. padding-left: 25px;
  174. }
  175. input::-webkit-input-placeholder {
  176. color: #fff;
  177. }
  178. .el-input__icon {
  179. color: #70d6ff;
  180. font-weight: bold;
  181. }
  182. }
  183. }
  184. .yearSelect {
  185. position: absolute;
  186. left: 180px;
  187. top: 5px;
  188. .prefix-icon {
  189. vertical-align: middle;
  190. margin-left: 5px;
  191. }
  192. ::v-deep {
  193. .el-input {
  194. line-height: 34px;
  195. input {
  196. color: #fff;
  197. font-weight: bold;
  198. width: 110px;
  199. height: 34px;
  200. border: 1px solid #468ec0;
  201. background: linear-gradient(0deg, #102a54 0%, #405f97 100%);
  202. border-radius: 4px;
  203. }
  204. .el-input__suffix {
  205. .el-input__suffix-inner {
  206. i {
  207. line-height: 34px;
  208. color: #70d6ff;
  209. font-weight: bold;
  210. }
  211. }
  212. }
  213. }
  214. }
  215. }
  216. }
  217. </style>