Newer
Older
KaiFengPC / src / views / sponeScreen / waterFlood / futureRisk.vue
@zhangdeliang zhangdeliang on 8 Dec 8 KB update
  1. <template>
  2. <!-- 积水风险预报 -->
  3. <div class="rainFuturePage">
  4. <div class="centerCont flex">
  5. <p class="title">积水风险预报</p>
  6. <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
  7. <el-button style="background: #18b1f3; border: none" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
  8. <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
  9. </div>
  10. <div class="centerCont flex">
  11. <p class="title"></p>
  12. <div class="flex flex-justcontent-spacebetween timeCont">
  13. <p v-for="i in timeContList">{{ i }}</p>
  14. </div>
  15. <el-button type="warning" style="visibility: hidden"></el-button>
  16. </div>
  17. <!-- 颜色块 -->
  18. <div class="flex colorPart" style="height: 30px">
  19. <p><span></span>0.05-0.15</p>
  20. <p><span></span>0.15-0.3</p>
  21. <p><span></span>0.3-0.5</p>
  22. <p><span></span>0.5-1.0</p>
  23. <p><span></span>>1.0</p>
  24. </div>
  25. </div>
  26. </template>
  27.  
  28. <script setup>
  29. import { query24hourRainToYuAn } from '@/api/floodSys/floodYP';
  30. import bus from '@/bus/index';
  31. const { proxy } = getCurrentInstance();
  32. const timeContList = ref([]);
  33. const processVal = ref(0);
  34. const ifStart = ref(true);
  35. const isdisabled = ref(false);
  36. const timer = ref(null);
  37. const riskTimer = ref(null);
  38. const timelineList = ref([]);
  39. const featureStep = ref(0);
  40. const gisJsonData = ref({});
  41. const gisParams = ref({
  42. rainFall: '',
  43. ybTime: '',
  44. category: 'duration',
  45. type: 'depth',
  46. realTime: false,
  47. hours: '24h',
  48. scenario: 'P1',
  49. });
  50. let maxPoint = '114.4022666731237,34.84413283884892,0.0';
  51. let minPoint = '114.29210083997283,34.7401307666175,0.0';
  52. const isMaterialShow = ref(false);
  53.  
  54. //内涝风险评估 地图内涝渲染模拟
  55. const gisModuleData = () => {
  56. query24hourRainToYuAn(gisParams.value).then(res => {
  57. stopImitate();
  58. gisJsonData.value = res.data.result;
  59. let timeContStart = gisJsonData.value[0].createTime.split(' ')[1].split(':').map(Number)[0];
  60. if (timeContStart < 10) {
  61. timeContStart = '0' + timeContStart;
  62. }
  63. timeContList.value.push(timeContStart + ':00');
  64. for (let i = 0; i < 5; i++) {
  65. let index = (i + 1) * 6;
  66. let timeCont = Number(timeContStart) + index;
  67. if (timeCont > 24) {
  68. timeCont = timeCont - 24;
  69. }
  70. timeContList.value.push(timeCont + ':00');
  71. }
  72. timelineList.value = gisJsonData.value.map((i, idx) => ({
  73. id: idx,
  74. name: `${(((idx + 1) * 5) / 60).toFixed(0).padStart(2, 0)}:${((((idx + 1) * 5) % 60) + '').padStart(2, 0)}`,
  75. }));
  76. newfiberMapbox.map.ogcLayers
  77. .filter(i => i.newfiberId == 'newfiber-CanvasLayer')[0]
  78. .setInitializeParams({
  79. images: gisJsonData.value.map(i => i.url).reverse(),
  80. bbox: [...minPoint, ...maxPoint].map(Number).filter(Boolean),
  81. width: 8360,
  82. height: 5000,
  83. });
  84. if (!!gisJsonData.value.length && gisJsonData.value.length > 1) {
  85. isdisabled.value = false;
  86. !!newfiberMapbox.map.getLayer('futureAssesImage') && newfiberMapbox.map.removeLayer('futureAssesImage');
  87. !!newfiberMapbox.map.getSource('futureAssesImage') && newfiberMapbox.map.removeSource('futureAssesImage');
  88. addImageLayer(minPoint.split(',').map(Number), maxPoint.split(',').map(Number));
  89. } else {
  90. isdisabled.value = true;
  91. !!newfiberMapbox.map.getLayer('futureAssesImage') && newfiberMapbox.map.removeLayer('futureAssesImage');
  92. !!newfiberMapbox.map.getSource('futureAssesImage') && newfiberMapbox.map.removeSource('futureAssesImage');
  93. }
  94. });
  95. };
  96. //添加模型图
  97. const addImageLayer = (minPoint, maxPoint) => {
  98. let coordinates;
  99. newfiberMapbox.map.addSource('futureAssesImage', {
  100. type: 'image',
  101. url: gisJsonData.value[gisJsonData.value.length - 1].url,
  102. coordinates: [
  103. [Number(minPoint[0]), Number(maxPoint[1])],
  104. [Number(maxPoint[0]), Number(maxPoint[1])],
  105. [Number(maxPoint[0]), Number(minPoint[1])],
  106. [Number(minPoint[0]), Number(minPoint[1])],
  107. ],
  108. });
  109. newfiberMapbox.map.addLayer({
  110. id: 'futureAssesImage',
  111. type: 'raster',
  112. source: 'futureAssesImage',
  113. layout: {
  114. visibility: 'none',
  115. },
  116. paint: {
  117. 'raster-fade-duration': 0,
  118. },
  119. });
  120. };
  121. // 开始
  122. function startImitate() {
  123. ifStart.value = false;
  124. startTimer(); // 定时器开启
  125. // 清除图层
  126. isMaterialShow.value = true;
  127. materialShow();
  128. }
  129. // 开启定时器
  130. function startTimer() {
  131. if (processVal.value == 100) processVal.value = 0;
  132. if (gisJsonData.value.length < 1) {
  133. return;
  134. }
  135. if (gisJsonData.value.length > 1) {
  136. newfiberMapbox.map.setLayoutProperty('futureAssesImage', 'visibility', 'visible');
  137. let proStept = Math.round(100 / gisJsonData.value.length);
  138. timer.value = setInterval(() => {
  139. console.log('timerfuture------');
  140. featureStep.value += 1;
  141. newfiberMapbox.map
  142. .getSource('futureAssesImage')
  143. .updateImage({ url: gisJsonData.value[gisJsonData.value.length - 1 - featureStep.value].url });
  144.  
  145. processVal.value += proStept;
  146.  
  147. let setp_play = `step${featureStep.value}`;
  148. if (processVal.value > 100) {
  149. processVal.value = 100;
  150. stopImitate();
  151. return;
  152. }
  153. if (featureStep.value == gisJsonData.value.length - 1) {
  154. featureStep.value = 0;
  155. processVal.value = 100;
  156. stopImitate();
  157. }
  158. //changeFeatureColor(setp_play);
  159. }, 1000);
  160. } else {
  161. timer.value = setInterval(() => {
  162. processVal.value += 100;
  163. if (processVal.value > 100) {
  164. processVal.value = 0;
  165. stopImitate();
  166. }
  167. }, 1000);
  168. }
  169. }
  170.  
  171. // 暂停模拟
  172. function stopImitate() {
  173. ifStart.value = true;
  174. stopTimer();
  175. // 显示图层
  176. isMaterialShow.value = false;
  177. materialShow();
  178. }
  179. // 定时器清除
  180. function stopTimer() {
  181. if (timer.value) {
  182. clearInterval(timer.value);
  183. }
  184. }
  185. // 图层清除
  186. let initeLayerList = [
  187. { layername: 'YSBZ', show: false }, //雨水泵站
  188. { layername: 'combineBengZhan', show: false }, //合流泵站
  189. // { layername: 'sewageFactory', show: false }, //污水处理厂
  190. { layername: 'ysLine1', show: false }, //雨水管网
  191. { layername: 'hsLine1', show: false }, //合流管网
  192. { layername: 'pipeline_info_flow', show: false }, //管网流向
  193. { layername: 'waterCourse', show: false }, //河道水位计
  194. { layername: 'pipeMonitor', show: false }, //管网监测点
  195. { layername: 'spongeFacility', show: false }, //海绵设施图层
  196. { layername: 'origine', show: false }, //典型项目图层
  197. ];
  198. const materialShow = () => {
  199. if (isMaterialShow.value) {
  200. initeLayerList.forEach(item => {
  201. item.show = isMaterialShow.value;
  202. });
  203. bus.emit('setIniteLayer', initeLayerList);
  204. } else {
  205. initeLayerList.forEach(item => {
  206. item.show = isMaterialShow.value;
  207. });
  208. bus.emit('setIniteLayer', initeLayerList);
  209. }
  210. };
  211.  
  212. onMounted(() => {
  213. gisModuleData();
  214. });
  215. onBeforeUnmount(() => {
  216. stopTimer();
  217. });
  218. </script>
  219.  
  220. <style lang="scss">
  221. .rainFuturePage {
  222. width: 100%;
  223. padding: 10px 20px;
  224. .centerCont {
  225. justify-content: space-around;
  226. align-items: center;
  227. .title {
  228. font-family: Source Han Sans CN;
  229. font-weight: bold;
  230. font-size: 20px;
  231. color: #3afff8;
  232. width: 180px;
  233. }
  234. .el-progress {
  235. width: 100%;
  236. margin-right: 20px;
  237. .el-progress-bar__outer {
  238. background: rgba(0, 59, 109, 0.8);
  239. }
  240. .el-progress-bar__innerText {
  241. color: #fff;
  242. }
  243. }
  244. .el-progress.is-success .el-progress-bar__inner {
  245. background: #3afff8;
  246. }
  247. .timeCont {
  248. width: 100%;
  249. height: 30px;
  250. margin-right: 50px;
  251. margin-top: -20px;
  252. }
  253. }
  254. .colorPart {
  255. justify-content: center;
  256. align-items: center;
  257. p {
  258. width: 120px;
  259. text-align: center;
  260. span {
  261. width: 23px;
  262. height: 12px;
  263. display: inline-block;
  264. border-radius: 6px;
  265. margin-right: 8px;
  266. }
  267. &:nth-of-type(1) span {
  268. background: #3afff8;
  269. }
  270. &:nth-of-type(2) span {
  271. background: #2bd2ff;
  272. }
  273. &:nth-of-type(3) span {
  274. background: #ffed52;
  275. }
  276. &:nth-of-type(4) span {
  277. background: #ffaa6b;
  278. }
  279. &:nth-of-type(5) span {
  280. background: #ff4545;
  281. }
  282. }
  283. }
  284. }
  285. </style>