Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / centerSearch.vue
@zhangdeliang zhangdeliang on 23 May 6 KB 初始化项目
  1. <template>
  2. <!-- 排水防涝一张图降雨图 -->
  3. <div class="centerWarnSea" v-show="centerWarnSeaShow">
  4. <img class="warnImg" src="@/assets/images/gisMap/color.png" />
  5. <el-date-picker
  6. type="daterange"
  7. v-model="daterange"
  8. value-format="YYYY-MM-DD"
  9. start-placeholder="开始日期"
  10. end-placeholder="结束日期"
  11. placeholder="请选择日期"
  12. style="width: 320px"
  13. @change="getRainDistribution"
  14. >
  15. </el-date-picker>
  16. <el-select v-model="searchVal" placeholder="倍数" style="width: 80px; margin-left: 10px" @change="changeMul">
  17. <el-option v-for="item in bsType" :key="item.value" :label="item.label" :value="item.value" />
  18. </el-select>
  19. <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true" style="width: 640px"></el-progress>
  20. <el-button type="warning" @click="startImitate" v-if="ifStart">开始</el-button>
  21. <el-button type="danger" @click="stopImitate" v-if="!ifStart">暂停</el-button>
  22. <el-button type="warning" @click="showKring" v-if="ifShowKring">显示</el-button>
  23. <el-button type="danger" @click="unshowKring" v-if="!ifShowKring">隐藏</el-button>
  24. </div>
  25. </template>
  26.  
  27. <script setup name="page">
  28. import bus from '@/bus';
  29. import { rainDistributionMapData } from '@/api/floodSys/floodStation.js';
  30. import { getKrigingByPoints } from '@/utils/gis/rainkriging';
  31. import bjBoundaryJson from '@/assets/geojson/krigingBoundary.json';
  32. import { onBeforeUnmount } from 'vue';
  33. const { proxy } = getCurrentInstance();
  34. const daterange = ref(
  35. [proxy.moment().format('YYYY-MM-DD'), proxy.moment(new Date()).add(7, 'days').format('YYYY-MM-DD')] //未来7天
  36. );
  37. const searchVal = ref(2);
  38. const processVal = ref(0);
  39. const timer = ref(null);
  40. const ifStart = ref(true);
  41. const ifShowKring = ref(true);
  42. const centerWarnSeaShow = ref(false);
  43. const krigingJson = ref([]);
  44. const featureStep = ref(0);
  45. const bsType = ref([
  46. { value: 2, label: '2倍' },
  47. { value: 4, label: '4倍' },
  48. { value: 6, label: '6倍' },
  49. ]);
  50. const searchText = ref('');
  51.  
  52. // 关键字搜索
  53. function changeText(val) {
  54. console.log(val);
  55. }
  56.  
  57. // 开始模拟
  58. function startImitate() {
  59. ifStart.value = false;
  60. if (krigingJson.value.length < 1) {
  61. return;
  62. }
  63. if (krigingJson.value.length > 1) {
  64. let proStept = Math.round(100 / krigingJson.value.length);
  65. timer.value = setInterval(() => {
  66. processVal.value += proStept;
  67. featureStep.value += 1;
  68. let kriging = getKrigingByPoints(krigingJson.value[krigingJson.value.length - featureStep.value], bjBoundaryJson);
  69. newfiberMapbox.map.getSource('kriging_source').setData(kriging);
  70. if (processVal.value > 100) {
  71. processVal.value = 0;
  72. stopImitate();
  73. }
  74. if (featureStep.value == krigingJson.value.length) {
  75. featureStep.value = 0;
  76. //stopImitate();
  77. }
  78. }, 1000 / searchVal.value);
  79. } else {
  80. timer.value = setInterval(() => {
  81. processVal.value += 100;
  82. if (processVal.value > 100) {
  83. processVal.value = 0;
  84. stopImitate();
  85. }
  86. }, 1000);
  87. }
  88. }
  89. // 暂停模拟
  90. function stopImitate() {
  91. ifStart.value = true;
  92. stopTimer();
  93. }
  94. //显示插值图
  95. function showKring() {
  96. ifShowKring.value = false;
  97. !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.setLayoutProperty('kriging_layer', 'visibility', 'none');
  98. }
  99. //隐藏插值图
  100. function unshowKring() {
  101. ifShowKring.value = true;
  102. !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.setLayoutProperty('kriging_layer', 'visibility', 'visible');
  103. }
  104. // 倍数选择
  105. function changeMul(val) {
  106. searchVal.value = val;
  107. }
  108. // 定时器清除
  109. function stopTimer() {
  110. if (timer.value) {
  111. clearInterval(timer.value);
  112. }
  113. }
  114. //获取降雨插值
  115. const getRainDistribution = async () => {
  116. !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
  117. !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
  118. krigingJson.value = [];
  119. let params = {
  120. startTime: daterange.value[0],
  121. endTime: daterange.value[1],
  122. };
  123. let res = await rainDistributionMapData(params);
  124. if (res && res.code == 200) {
  125. let allRainData = res.data;
  126. if (!!!allRainData.length) {
  127. proxy.$modal.msgError('暂无数据');
  128. return;
  129. }
  130. allRainData.forEach(data => {
  131. let rainDataJson = getKrigingJson(data.rainSiteDistributionVOS);
  132. krigingJson.value.push(rainDataJson);
  133. });
  134. addKrigingLayer(krigingJson.value[0]);
  135. }
  136. };
  137. //获取雨量插值json
  138. const getKrigingJson = dataList => {
  139. if (!!!dataList.length) return;
  140. let features = [];
  141. dataList.forEach(element => {
  142. let feature = {
  143. type: 'Feature',
  144. geometry: {
  145. type: 'Point',
  146. coordinates: [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])],
  147. },
  148. properties: { value: element.p24, name: `${element.p24}mm` },
  149. };
  150. features.push(feature);
  151. });
  152. return {
  153. type: 'FeatureCollection',
  154. features: features,
  155. };
  156. };
  157. //地图添加降雨插值图
  158. const addKrigingLayer = geoJson => {
  159. let layerId = `kriging_layer`;
  160. let sourceId = `kriging_source`;
  161. let kriging = getKrigingByPoints(geoJson, bjBoundaryJson);
  162. !newfiberMapbox.map.getSource(sourceId) && newfiberMapbox.map.addSource(sourceId, { type: 'geojson', data: kriging });
  163. !newfiberMapbox.map.getLayer(layerId) &&
  164. newfiberMapbox.map.addLayer({
  165. id: layerId,
  166. type: 'fill',
  167. source: sourceId,
  168. layout: {},
  169. paint: {
  170. 'fill-color': { type: 'identity', property: 'color' },
  171. 'fill-opacity': 0.6,
  172. },
  173. });
  174. };
  175. onMounted(() => {
  176. bus.on('centerSearchShow', value => {
  177. centerWarnSeaShow.value = value;
  178. if (!value) {
  179. !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
  180. !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
  181. }
  182. });
  183. });
  184. onBeforeMount(() => {
  185. stopTimer();
  186. });
  187. onBeforeUnmount(() => {
  188. if (!newfiberMapbox) return;
  189. !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
  190. !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
  191. });
  192. </script>
  193. <style lang="scss">
  194. @import '@/assets/styles/variables.module.scss';
  195. .centerWarnSea {
  196. background: $mainColor1;
  197. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  198. border-radius: 8px;
  199. position: absolute;
  200. top: 10px;
  201. left: 5px;
  202. z-index: 99;
  203. padding: 0px 10px;
  204. display: flex;
  205. align-items: center;
  206. width: 85%;
  207. .warnImg {
  208. width: 324px;
  209. height: 70px;
  210. margin-top: -20px;
  211. }
  212. .el-select {
  213. width: 150px;
  214. }
  215. .el-progress {
  216. width: 700px;
  217. margin: 0px 15px;
  218. .el-progress__text span {
  219. font-size: 12px;
  220. }
  221. }
  222. }
  223. </style>