Newer
Older
KaiFengPC / src / views / floodSys / floodYP / riskAsses.vue
@jimengfei jimengfei on 8 Dec 13 KB updata
  1. <template>
  2. <!-- 排水防涝 态势研判 内涝风险评估 -->
  3. <div class="publicContainer riskEstimate">
  4. <!-- gis 地图 -->
  5. <RiskGisMap @loadCallback="mapInit"></RiskGisMap>
  6. <!-- 左侧分析方案 -->
  7. <div class="riskLeft animate__animated animate__bounceInLeft">
  8. <div class="mapTitle">模拟工况</div>
  9. <el-form label-width="90px">
  10. <el-form-item label="降雨重现期" prop="scenario">
  11. <el-select v-model="queryParams.scenario" placeholder="请选择" clearable @change="getZSList">
  12. <el-option v-for="item in drains_scenario" :key="item.value" :label="item.label" :value="item.value" />
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item label="降雨时长" prop="duration">
  16. <el-select v-model="queryParams.duration" placeholder="请选择" clearable @change="getZSList">
  17. <el-option v-for="item in drains_rainfall_duration" :key="item.value" :label="item.label" :value="item.value" />
  18. </el-select>
  19. </el-form-item>
  20. </el-form>
  21. <!-- 方案名称 -->
  22. <div class="progranme">
  23. <el-radio-group v-model="caseId" @change="changeCase" style="justify-content: center">
  24. <div class="part" v-for="item in schemeData" :key="item.fid">
  25. <el-radio :label="item.fid">
  26. <div class="cont">
  27. <div>设计降雨量:{{ item.rainfall }}mm</div>
  28. <div class="ellipsis mt-5">{{ item.schemeName }}</div>
  29. </div>
  30. </el-radio>
  31. </div>
  32. </el-radio-group>
  33. </div>
  34. </div>
  35. <!-- 中间操作 -->
  36. <div class="centerWarnRK flex">
  37. <el-select v-model="moduleTypeEnum" placeholder="请选择模拟对象" @change="changeObject">
  38. <el-option v-for="item in caseType" :key="item.value" :label="item.label" :value="item.value" />
  39. </el-select>
  40. <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
  41. <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
  42. <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
  43. </div>
  44. <!-- 右侧具体数据展示 -->
  45. <div :class="['zksqImg', ifExpand ? 'leftZk' : 'leftSq']" @click="ifExpand = !ifExpand" title="展开收起"></div>
  46. <div :class="['riskRight', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
  47. <RiskRCont :paramsCase="paramsCase"></RiskRCont>
  48. </div>
  49. <!-- 图例颜色,不同模型不同图例内容 -->
  50. <div
  51. :class="['mapLegendColor', ifExpand ? 'leftZk2' : 'leftSq']"
  52. v-if="moduleTypeEnum == 'duration-depth' || moduleTypeEnum == 'max-depth'"
  53. >
  54. <p class="title">最大积水深度(米)</p>
  55. <p><span class="info"></span> 0.05-0.15</p>
  56. <p><span class="primary"></span> 0.15-0.3</p>
  57. <p><span class="yellow"></span> 0.3-0.5</p>
  58. <p><span class="pink"></span> 0.5-1.0</p>
  59. <p><span class="red"></span> 大于1.0</p>
  60. </div>
  61. <div :class="['mapLegendColor', ifExpand ? 'leftZk2' : 'leftSq']" v-if="moduleTypeEnum == 'max-filling'">
  62. <!-- <p class="title" v-if="moduleTypeEnum == 'max-depth'">积水时长(小时)</p> -->
  63. <p class="title" v-if="moduleTypeEnum == 'max-filling'">满管时长(小时)</p>
  64. <p><span class="info"></span>0-4</p>
  65. <p><span class="primary"></span>4-8</p>
  66. <p><span class="yellow"></span>8-12</p>
  67. <p><span class="pink"></span>12-16</p>
  68. <p><span class="red"></span>16-20</p>
  69. <p><span class="reds"></span> >20</p>
  70. </div>
  71. <div :class="['mapLegendColor', ifExpand ? 'leftZk2' : 'leftSq']" v-if="moduleTypeEnum == 'duration-filling'">
  72. <p class="title">管网充满度</p>
  73. <p><span class="green"></span>未充满</p>
  74. <p><span class="red"></span>满管</p>
  75. </div>
  76. </div>
  77. </template>
  78.  
  79. <script setup name="riskEstimate">
  80. import RiskGisMap from './riskGisMap.vue';
  81. import { schemeList, moduleGeometryData } from '@/api/floodSys/floodYP';
  82. import RiskRCont from './riskAssesRight.vue';
  83.  
  84. const { proxy } = getCurrentInstance();
  85. const ifExpand = ref(true);
  86. const allData = reactive({
  87. queryParams: {
  88. scenario: '',
  89. duration: '',
  90. },
  91. });
  92. const { queryParams } = toRefs(allData);
  93. const moduleTypeEnum = ref('duration-depth');
  94. const schemeData = ref([]);
  95. const caseId = ref(1);
  96. const paramsCase = ref({}); //右侧传递参数
  97. const { drains_scenario, drains_rainfall_duration } = proxy.useDict('drains_scenario', 'drains_rainfall_duration'); //获取接口返回字典数据
  98. const timelineList = ref([]);
  99. const caseType = ref([
  100. { value: 'duration-depth', label: '积水动态预演' },
  101. { value: 'max-depth', label: '最大积水范围' },
  102. { value: 'duration-filling', label: '充满度动态预演' },
  103. { value: 'max-filling', label: '最大满管风险' },
  104. ]);
  105.  
  106. const searchValSpeed = ref('1');
  107. const features = ref([]);
  108. const featureStep = ref(0);
  109. //内涝风险评估 地图内涝
  110. const gisJsonData = ref({});
  111. const gisParams = ref({
  112. rainFall: '',
  113. ybTime: '',
  114. category: 'duration',
  115. type: 'depth',
  116. realTime: false,
  117. });
  118. const isdisabled = ref(false);
  119.  
  120. //内涝风险评估 地图内涝渲染模拟
  121. const gisModuleData = () => {
  122. moduleGeometryData(gisParams.value).then(res => {
  123. stopImitate();
  124. gisJsonData.value = res.data.result;
  125. let maxPoint = res.data.maxPoint.split(',');
  126. let minPoint = res.data.minPoint.split(',');
  127. timelineList.value = gisJsonData.value.map((i, idx) => ({
  128. id: idx,
  129. name: `${(((idx + 1) * 5) / 60).toFixed(0).padStart(2, 0)}:${((((idx + 1) * 5) % 60) + '').padStart(2, 0)}`,
  130. }));
  131. newfiberMap_risk.map.ogcLayers
  132. .filter(i => i.newfiberId == 'newfiber-CanvasLayer')[0]
  133. .setInitializeParams({
  134. images: gisJsonData.value.map(i => i.url).reverse(),
  135. bbox: [...minPoint, ...maxPoint].map(Number).filter(Boolean),
  136. width: 8360,
  137. height: 5000,
  138. });
  139. if (!!gisJsonData.value.length && gisJsonData.value.length > 1) {
  140. isdisabled.value = false;
  141. !!newfiberMap_risk.map.getLayer('riskAssesImage') && newfiberMap_risk.map.removeLayer('riskAssesImage');
  142. !!newfiberMap_risk.map.getSource('riskAssesImage') && newfiberMap_risk.map.removeSource('riskAssesImage');
  143. addImageLayer(minPoint, maxPoint);
  144. } else {
  145. isdisabled.value = true;
  146. !!newfiberMap_risk.map.getLayer('riskAssesImage') && newfiberMap_risk.map.removeLayer('riskAssesImage');
  147. !!newfiberMap_risk.map.getSource('riskAssesImage') && newfiberMap_risk.map.removeSource('riskAssesImage');
  148. }
  149. });
  150. };
  151. //添加模型图
  152. const addImageLayer = (minPoint, maxPoint) => {
  153. let coordinates;
  154.  
  155. newfiberMap_risk.map.addSource('riskAssesImage', {
  156. type: 'image',
  157. url: gisJsonData.value[gisJsonData.value.length - 1].url,
  158. coordinates: [
  159. [Number(minPoint[0]), Number(maxPoint[1])],
  160. [Number(maxPoint[0]), Number(maxPoint[1])],
  161. [Number(maxPoint[0]), Number(minPoint[1])],
  162. [Number(minPoint[0]), Number(minPoint[1])],
  163. ],
  164. });
  165. newfiberMap_risk.map.addLayer({
  166. id: 'riskAssesImage',
  167. type: 'raster',
  168. source: 'riskAssesImage',
  169. paint: {
  170. 'raster-fade-duration': 0,
  171. },
  172. });
  173. };
  174. // 获取积水方案列表
  175. function getZSList() {
  176. schemeList(queryParams.value).then(res => {
  177. let datas = res.data;
  178. schemeData.value = datas;
  179. caseId.value = datas[0].fid;
  180. changeCase(caseId.value); //默认选中第一个
  181. paramsCase.value.depthArea = datas[0].depthArea;
  182. paramsCase.value.fillingLength = datas[0].fillingLength;
  183. paramsCase.value.rainfall = datas[0].rainfall;
  184. paramsCase.value.pipelineFillingLength = datas[0].pipelineFillingLength;
  185. });
  186. }
  187. // 方案列表点击
  188. function changeCase(val) {
  189. caseId.value = val;
  190. let arr = schemeData.value.filter(item => item.fid == val);
  191. paramsCase.value.hours = arr[0].duration;
  192. paramsCase.value.scenario = arr[0].scenario;
  193. paramsCase.value.depthArea = arr[0].depthArea;
  194. paramsCase.value.fillingLength = arr[0].fillingLength;
  195. paramsCase.value.rainfall = arr[0].rainfall;
  196. paramsCase.value.pipelineFillingLength = arr[0].pipelineFillingLength;
  197. paramsCase.value.fid = caseId.value;
  198. paramsCase.value.moduleTypeEnum = moduleTypeEnum.value; //模型类型
  199. gisParams.value.scenario = paramsCase.value.scenario;
  200. gisParams.value.hours = paramsCase.value.hours;
  201. gisModuleData(); // 模型数据加载
  202. stopTimer();
  203. processVal.value = 0;
  204. featureStep.value = 0;
  205. }
  206. // 不同模拟方案选择
  207. function changeObject(val) {
  208. // !!newfiberMap_risk.map.getLayer('riskAssesImage') && newfiberMap_risk.map.removeLayer('riskAssesImage');
  209. // !!newfiberMap_risk.map.getSource('riskAssesImage') && newfiberMap_risk.map.removeSource('riskAssesImage');
  210. // //停止播放
  211. // stopImitate();
  212. allData.queryParams.scenario = '';
  213. allData.queryParams.duration = '';
  214. if (val == 'duration-depth') {
  215. gisParams.value.category = 'duration';
  216. gisParams.value.type = 'depth';
  217. gisParams.value.realTime = false;
  218. } else if (val == 'max-depth') {
  219. gisParams.value.category = 'duration';
  220. gisParams.value.type = 'depth';
  221. gisParams.value.realTime = false;
  222. } else if (val == 'duration-filling') {
  223. gisParams.value.category = 'duration';
  224. gisParams.value.type = 'filling';
  225. gisParams.value.realTime = false;
  226. } else {
  227. gisParams.value.category = 'duration';
  228. gisParams.value.type = 'filling';
  229. gisParams.value.realTime = false;
  230. }
  231. moduleTypeEnum.value = val;
  232. paramsCase.value.moduleTypeEnum = val;
  233. // 模型数据加载
  234. processVal.value = 0;
  235. stopImitate();
  236. gisModuleData();
  237. }
  238. const timer = ref(null);
  239. const ifStart = ref(true);
  240. const processVal = ref(0);
  241.  
  242. // 开始模拟
  243. function startImitate() {
  244. ifStart.value = false;
  245. startTimer(); // 定时器开启
  246. }
  247. // 开启定时器
  248. function startTimer() {
  249. if (processVal.value == 100) processVal.value = 0;
  250. if (gisJsonData.value.length < 1) {
  251. return;
  252. }
  253. if (gisJsonData.value.length > 1) {
  254. let proStept = Math.round(100 / gisJsonData.value.length);
  255. timer.value = setInterval(() => {
  256. console.log('timer------');
  257. featureStep.value += 1;
  258. newfiberMap_risk.map
  259. .getSource('riskAssesImage')
  260. .updateImage({ url: gisJsonData.value[gisJsonData.value.length - 1 - featureStep.value].url });
  261.  
  262. processVal.value += proStept;
  263. // 子组件echarts动画添加
  264. paramsCase.value.featureStep = featureStep.value;
  265.  
  266. let setp_play = `step${featureStep.value}`;
  267. if (processVal.value > 100) {
  268. processVal.value = 100;
  269. stopImitate();
  270. return;
  271. }
  272. if (featureStep.value == gisJsonData.value.length - 1) {
  273. featureStep.value = 0;
  274. processVal.value = 100;
  275. stopImitate();
  276. }
  277. //changeFeatureColor(setp_play);
  278. }, 1000 / searchValSpeed.value);
  279. } else {
  280. timer.value = setInterval(() => {
  281. processVal.value += 100;
  282. if (processVal.value > 100) {
  283. processVal.value = 0;
  284. stopImitate();
  285. }
  286. }, 1000);
  287. }
  288. }
  289. const mapInit = () => {
  290. getZSList();
  291. };
  292. // 暂停模拟
  293. function stopImitate() {
  294. ifStart.value = true;
  295. stopTimer();
  296. }
  297. // 定时器清除
  298. function stopTimer() {
  299. if (timer.value) {
  300. clearInterval(timer.value);
  301. timer.value = null;
  302. }
  303. }
  304.  
  305. onMounted(() => {});
  306. onBeforeUnmount(() => {
  307. if (newfiberMap_risk.map.getLayer('buildingLayer')) {
  308. newfiberMap_risk.map.removeLayer('buildingLayer');
  309. }
  310. stopTimer();
  311. });
  312. </script>
  313. <style lang="scss">
  314. @import '@/assets/styles/variables.module.scss';
  315. .riskEstimate {
  316. width: 100%;
  317. position: relative;
  318. .riskLeft {
  319. width: 280px;
  320. height: calc(100% - 60px);
  321. background: $mainColor1;
  322. position: absolute;
  323. top: 30px;
  324. left: 10px;
  325. padding: 10px;
  326. z-index: 90;
  327. .mapTitle {
  328. margin: 20px auto;
  329. }
  330. .progranme {
  331. border-top: 1px solid #5b9cd8;
  332. height: calc(100% - 180px);
  333. overflow: auto;
  334. padding-top: 20px;
  335. .part {
  336. color: #5b9cd8;
  337. cursor: pointer;
  338. width: 95%;
  339. margin-bottom: 15px;
  340. border-bottom: 1px dashed #c6c6c6;
  341. .el-radio {
  342. margin-bottom: 15px;
  343. }
  344. }
  345. }
  346. }
  347. .centerWarnRK {
  348. background: $mainColor1;
  349. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  350. border-radius: 8px;
  351. position: absolute;
  352. top: 30px;
  353. left: 25%;
  354. z-index: 99;
  355. padding: 10px;
  356. display: flex;
  357. align-items: center;
  358. .el-select {
  359. width: 150px;
  360. }
  361. .el-progress {
  362. width: 500px;
  363. margin: 0px 15px;
  364. .el-progress__text span {
  365. font-size: 12px;
  366. }
  367. }
  368. }
  369. .riskRight {
  370. width: 400px;
  371. height: calc(100vh - 130px);
  372. background: $mainColor1;
  373. position: absolute;
  374. top: 30px;
  375. right: 30px;
  376. padding: 10px;
  377. z-index: 90;
  378. }
  379. .leftZk {
  380. right: 430px;
  381. }
  382. .leftZk2 {
  383. right: 435px;
  384. }
  385. .leftSq {
  386. right: 20px;
  387. }
  388. .zksqImg {
  389. width: 16px;
  390. height: 147px;
  391. background: url('@/assets/newImgs/down.png');
  392. background-size: 100% 100%;
  393. transform: rotate(180deg);
  394. position: absolute;
  395. top: 340px;
  396. z-index: 99;
  397. cursor: pointer;
  398. transition: 0.5s ease-in-out;
  399. }
  400. }
  401. </style>