Newer
Older
KaiFengPC / src / views / sponeScreen / projectHM / projectFX.vue
@zhangdeliang zhangdeliang on 9 Dec 15 KB update
  1. <template>
  2. <!-- 典型项目分析 -->
  3. <div class="projectFXPage">
  4. <!-- 分析结果建议 -->
  5. <div class="suggest">
  6. <div class="autoCont">
  7. <div class="center">
  8. {{ rainDate }}分析:降雨起止时间
  9. <span v-for="(item, index) in detailDataRain.rainfallPeriods" :key="index">
  10. {{ item.rainStartTime }}-{{ item.rainEndTime }},
  11. </span>
  12. 累计降雨时长:{{ rainTime }},小时最大降雨量是{{ hourMaxRain }}mm, 24小时累计降雨量{{ detailDataRain.rainfallIntensity }}mm,
  13. 降雨等级
  14. <span class="green">
  15. {{
  16. detailDataRain.rainfallIntensity <= 10
  17. ? '小雨'
  18. : detailDataRain.rainfallIntensity > 10 && detailDataRain.rainfallIntensity <= 25
  19. ? '中雨'
  20. : '大雨'
  21. }},
  22. </span>
  23. 总收水量: {{ ((detailDataRain.rainfallIntensity * 68439.85 * 0.68) / 1000).toFixed(2) }}m³
  24. </div>
  25. <div class="cont">
  26. <span class="numBg">1</span>
  27. 项目设计降雨量为19.8mm对应的年径流总量控制率为68%;年径流污染削减率(以SS计)不低于40%;本场降雨径流总量控制率:--
  28. <!-- <span class="green"> 达标 </span> -->
  29.  
  30. ;本场降雨污染削减率(以SS计):--
  31. <!-- <span class="green">达标</span> -->
  32. </div>
  33. <div class="cont">
  34. <span class="numBg">2</span>
  35. 雨水管网产流开始时间{{ detailDataRain.flowStartTime }},结束时间{{ detailDataRain.flowEndTime }},累计出口流量
  36. <span class="green">{{ Number(detailDataRain.totalOutFlow).toFixed(2) }}m³</span>
  37. </div>
  38. <div class="cont">
  39. <span class="numBg">3</span>
  40. 分析建议:
  41. <span
  42. v-if="
  43. nameToData(station1.propertyMonitorList, '水位')[rainIndex] >= 1.1 ||
  44. nameToData(station5.propertyMonitorList, '水位')[rainIndex] >= 1.8
  45. "
  46. >
  47. 目前管网高水位运行,导致排水不畅,建议及时开启泵站,避免发生内涝风险。
  48. </span>
  49. <span v-else>暂无</span>
  50. </div>
  51. </div>
  52. </div>
  53.  
  54. <!-- 降雨效果 -->
  55. <CanvasRainP :width="1600" :height="800"></CanvasRainP>
  56.  
  57. <!-- 水深 -->
  58. <img
  59. src="@/assets/newImgs/pumpGY/water.png"
  60. alt="左"
  61. class="waterFlow"
  62. style="transform: rotateY(180deg)"
  63. :style="{
  64. height: (120 * waterHeight1) / 1.1 + 'px',
  65. left: '73px',
  66. width: '606px',
  67. }"
  68. />
  69. <img
  70. src="@/assets/newImgs/pumpGY/water.png"
  71. alt="右"
  72. class="waterFlow"
  73. :style="{
  74. height: (120 * waterHeight5) / 1.8 + 'px',
  75. right: '75px',
  76. width: '555px',
  77. }"
  78. />
  79.  
  80. <!-- 实时数据 -->
  81. <div class="realData">
  82. <p style="left: 290px; bottom: 175px">最大水深: {{ waterHeight1 || '--' }}米</p>
  83. <p style="right: 260px; bottom: 175px">最大水深: {{ waterHeight5 || '--' }}米</p>
  84. </div>
  85.  
  86. <!-- 监测数据 -->
  87. <div style="left: 120px; top: 345px" class="tipsM">
  88. <span>汴京路与公园路交叉口(出口)</span>
  89. <span :class="[waterHeight1 >= 1.1 ? 'red' : 'green']"> 最大水深: {{ waterHeight1 || '--' }} m </span>
  90. <span>监测时间: {{ station1.propertyMonitorXList[rainIndex] ? station1.propertyMonitorXList[rainIndex].slice(10) : '--' }} </span>
  91. <span>累计流量: {{ leijiLL1 || '--' }} m³</span>
  92. <span>管网管径: 2.4*1.1m</span>
  93. </div>
  94. <div style="left: 530px; top: 345px" class="tipsM">
  95. <span>汴京路与劳动路交叉口(进口)</span>
  96. <span :class="[nameToData(station2.propertyMonitorList, '水位')[rainIndex] >= 1.1 ? 'red' : 'green']">
  97. 最大水深: {{ nameToData(station2.propertyMonitorList, '水位')[rainIndex] || '--' }} m
  98. </span>
  99. <span>监测时间: {{ station2.propertyMonitorXList[rainIndex] ? station2.propertyMonitorXList[rainIndex].slice(10) : '--' }} </span>
  100. <span>累计流量: {{ leijiLL2 || '--' }} m³</span>
  101. <span>管网管径: 2.4*1.1m</span>
  102. </div>
  103.  
  104. <div style="left: 910px; top: 345px" class="tipsM">
  105. <span>由于施工待安装(进口)</span>
  106. <span>最大水深:{{ '--' }} m</span>
  107. <span>监测时间: {{ '--' }}</span>
  108. <span>累计流量:{{ leijiLL4 || '--' }} m³</span>
  109. <span>管网管径: 3*1.8m</span>
  110. </div>
  111. <div style="right: 90px; top: 345px" class="tipsM">
  112. <span>汴京路与工农路交叉口(出口)</span>
  113. <span :class="[waterHeight5 >= 1.8 ? 'red' : 'green']"> 最大水深: {{ waterHeight5 || '--' }} m </span>
  114. <span>监测时间: {{ station5.propertyMonitorXList[rainIndex] ? station5.propertyMonitorXList[rainIndex].slice(10) : '--' }} </span>
  115. <span>累计流量: {{ leijiLL5 || '--' }} m³</span>
  116. <span>管网管径: 3*1.8m</span>
  117. </div>
  118.  
  119. <!-- 海绵设施 -->
  120. <img
  121. src="@/assets/newImgs/pumpGY/hmSS.png"
  122. alt="海绵设施"
  123. style="left: 830px; bottom: 385px; width: 63px; height: 63px; cursor: pointer"
  124. @click="checkHmSS"
  125. class="equipM"
  126. />
  127.  
  128. <!-- 监测设备 -->
  129. <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左1" style="left: 130px; bottom: 75px" class="equipM" />
  130. <img src="@/assets/newImgs/pumpGY/equipL.png" alt="设备左2" style="left: 540px; bottom: 75px" class="equipM" />
  131. <img
  132. src="@/assets/newImgs/pumpGY/equipL.png"
  133. alt="设备右1"
  134. style="right: 490px; bottom: 75px; transform: rotateY(180deg)"
  135. class="equipM"
  136. />
  137. <img
  138. src="@/assets/newImgs/pumpGY/equipL.png"
  139. alt="设备右2"
  140. style="right: 175px; bottom: 75px; transform: rotateY(180deg)"
  141. class="equipM"
  142. />
  143.  
  144. <!-- 汽车 -->
  145. <img src="@/assets/newImgs/pumpGY/car1.png" alt="车1" style="bottom: 525px; width: 148px; height: 70px" class="carFX animate1" />
  146. <img src="@/assets/newImgs/pumpGY/car2.png" alt="车2" style="bottom: 495px; width: 134px; height: 57px" class="carFX animate2" />
  147. <img src="@/assets/newImgs/pumpGY/car4.png" alt="车4" style="bottom: 455px; width: 137px; height: 50px" class="carFX animate3" />
  148. <img src="@/assets/newImgs/pumpGY/car5.png" alt="车5" style="bottom: 425px; width: 142px; height: 51px" class="carFX animate4" />
  149. <img src="@/assets/newImgs/pumpGY/car3.png" alt="车3" style="bottom: 415px; width: 48px; height: 46px" class="carFX animate3" />
  150.  
  151. <!-- 泵站状态 -->
  152. <div style="left: 5px; bottom: 185px; width: 160px" class="tipsM">
  153. <span>泵站状态: {{ hygpumpStatus }} </span>
  154. <span>开机时间: {{ hygpumpTime }}</span>
  155. </div>
  156. <div style="right: 5px; bottom: 185px; width: 160px" class="tipsM">
  157. <span>泵站状态: {{ dgjpumpStatus }} </span>
  158. <span>开机时间: {{ dgjpumpTime }}</span>
  159. </div>
  160. </div>
  161. </template>
  162.  
  163. <script setup>
  164. import CanvasRainP from '@/views/sponeScreen/projectHM/canvasRainP.vue';
  165. import bus from '@/bus';
  166. import { graphicReport, calculateAreaAnnualRunoff } from '@/api/dataAnalysis/syntherticData';
  167. import { sitePropertyRelation } from '@/api/scada/monitor';
  168.  
  169. const { proxy } = getCurrentInstance();
  170. const rainIndex = ref(0);
  171. const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
  172. const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
  173. const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
  174. const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] });
  175. const detailDataRain = ref({ totalOutFlow: 0, totalImportFlow: 0 });
  176. const rainDate = ref('');
  177. const rainDateTwo = ref('');
  178. const rainTime = ref('');
  179. const hourMaxRain = ref(0);
  180. const dgjpumpStatus = ref('');
  181. const dgjpumpTime = ref('');
  182. const hygpumpStatus = ref('');
  183. const hygpumpTime = ref('');
  184. const leijiLL1 = ref('');
  185. const leijiLL2 = ref('');
  186. const leijiLL4 = ref('');
  187. const leijiLL5 = ref('');
  188. const waterHeight1 = ref(0);
  189. const waterHeight5 = ref(0);
  190.  
  191. // 获取实时数据
  192. function getRealData() {
  193. // 从左到右,共5个
  194. let params = {
  195. startTime: rainDate.value + ' 08:00:00',
  196. endTime: rainDateTwo.value + ' 08:00:00',
  197. stCode: '',
  198. };
  199. params.stCode = '0371000037';
  200. graphicReport(params).then(res => {
  201. if (res.data.propertyMonitorList.length > 0) {
  202. station1.value = res.data;
  203. let llData = nameToData(res.data.propertyMonitorList, '累计流量');
  204. leijiLL1.value = Number(llData[llData.length - 1] - llData[0]).toFixed(2);
  205. waterHeight1.value = nameToData(res.data.propertyMonitorList, '水位')[rainIndex.value]; //水深
  206. }
  207. });
  208.  
  209. params.stCode = '0371000038';
  210. graphicReport(params).then(res => {
  211. if (res.data.propertyMonitorList.length > 0) {
  212. station2.value = res.data;
  213. let llData = nameToData(res.data.propertyMonitorList, '累计流量');
  214. leijiLL2.value = Number(llData[llData.length - 1] - llData[0]).toFixed(2);
  215. }
  216. });
  217.  
  218. station4.value = {}; //暂未安装,无数据
  219.  
  220. params.stCode = '0371000044';
  221. graphicReport(params).then(res => {
  222. if (res.data.propertyMonitorList.length > 0) {
  223. station5.value = res.data;
  224. let llData = nameToData(res.data.propertyMonitorList, '累计流量');
  225. leijiLL5.value = Number(llData[llData.length - 1] - llData[0]).toFixed(2);
  226. waterHeight5.value = nameToData(res.data.propertyMonitorList, '水位')[rainIndex.value]; //水深
  227. }
  228. });
  229. }
  230.  
  231. // 公共方法,根据监测名称来匹配对应的数值
  232. function nameToData(data, name) {
  233. let arr = data.filter(item => item.monitorPropertyName == name);
  234. let lists = arr[0] ? arr[0].ylist : [];
  235. return lists;
  236. }
  237.  
  238. // 海绵设施点击
  239. function checkHmSS() {
  240. bus.emit('checkSSFX', {});
  241. }
  242.  
  243. // 降雨场次相关
  244. function getRainDetail() {
  245. // 关联雨量站是皮革厂雨量站,0371000003
  246. let params = {
  247. searchTime: rainDate.value,
  248. rainStCode: '0371000003',
  249. projectNo: 'GW06',
  250. };
  251. calculateAreaAnnualRunoff(params).then(res => {
  252. let datas = res.data;
  253. detailDataRain.value = datas || {};
  254. // 计算降雨总时长
  255. let times = 0;
  256. datas.rainfallPeriods &&
  257. datas.rainfallPeriods.map(item => {
  258. times += (new Date(item.rainEndTime).getTime() - new Date(item.rainStartTime).getTime()) / 1000;
  259. });
  260. let hour = Math.floor(times / 60 / 60);
  261. let minutes = Math.floor((times % 3600) / 60);
  262. rainTime.value = hour + '小时' + minutes + '分钟';
  263. });
  264.  
  265. // 雨量站监测数据
  266. let params2 = {
  267. startTime: rainDate.value + ' 08:00:00',
  268. endTime: rainDateTwo.value + ' 08:00:00',
  269. stCode: '0371000003',
  270. };
  271. graphicReport(params2).then(res => {
  272. let hourData = nameToData(res.data.propertyMonitorList, '1小时时段降水量');
  273. hourMaxRain.value = Math.max(...hourData);
  274. // 最大降雨量对应的index
  275. rainIndex.value = nameToData(res.data.propertyMonitorList, '1小时时段降水量').findIndex(item => {
  276. return item == hourMaxRain.value;
  277. });
  278. });
  279. getRealData(); //获取某一天监测数据
  280. }
  281.  
  282. // 获取泵站开启状态
  283. function getPumpStatus() {
  284. let params = {
  285. startTime: rainDate.value + ' 08:00:00',
  286. endTime: rainDateTwo.value + ' 08:00:00',
  287. stationCode: 'BZKFDJG', //东郊沟泵站
  288. pageSize: 9999,
  289. pageNum: 1,
  290. };
  291. sitePropertyRelation(params).then(res => {
  292. let datas = res.data || [];
  293. for (let item in datas) {
  294. if (
  295. item.includes('QSB-YX') == '1' ||
  296. item.includes('QSB-YX') == '运行' ||
  297. item.includes('WSB-YX') == '1' ||
  298. item.includes('WSB-YX') == '运行'
  299. ) {
  300. dgjpumpStatus.value = '开启';
  301. dgjpumpTime.value = item.tt;
  302. } else {
  303. dgjpumpStatus.value = '未开启';
  304. dgjpumpTime.value = '--';
  305. }
  306. }
  307. });
  308.  
  309. let params2 = {
  310. startTime: rainDate.value + ' 08:00:00',
  311. endTime: rainDateTwo.value + ' 08:00:00',
  312. stationCode: 'BZKFHYG', //海洋馆泵站
  313. pageSize: 9999,
  314. pageNum: 1,
  315. };
  316. sitePropertyRelation(params2).then(res => {
  317. let datas = res.data || [];
  318. for (let item in datas) {
  319. if (
  320. item.includes('QSB-YX') == '1' ||
  321. item.includes('QSB-YX') == '运行' ||
  322. item.includes('WSB-YX') == '1' ||
  323. item.includes('WSB-YX') == '运行'
  324. ) {
  325. hygpumpStatus.value = '开启';
  326. hygpumpTime.value = item.tt;
  327. } else {
  328. hygpumpStatus.value = '未开启';
  329. hygpumpTime.value = '--';
  330. }
  331. }
  332. });
  333. }
  334.  
  335. onMounted(() => {
  336. rainDate.value = localStorage.getItem('setRainDateKF');
  337. // 早八点到第二天早八点逻辑
  338. let dates = new Date(rainDate.value);
  339. //86400000 一天得毫秒 *1,就是当前日期减一天,如果是需要自定义几天,修改就可
  340. rainDateTwo.value = proxy.moment(new Date(dates.getTime() + 86400000 * 1)).format('YYYY-MM-DD');
  341. getRainDetail(); //获取降雨场次
  342. getPumpStatus(); // 获取泵站开启状态
  343. });
  344. onBeforeUnmount(() => {});
  345. </script>
  346.  
  347. <style lang="scss">
  348. // prettier-ignore
  349. .projectFXPage {
  350. width: 1600PX;
  351. height: 800PX;
  352. margin-bottom:20PX;
  353. background: url('@/assets/newImgs/pumpGY/projectBg.jpg') no-repeat;
  354. background-size: 100% 100%;
  355. position:relative;
  356. .equipM{
  357. position: absolute;
  358. z-index: 30;
  359. width:71PX;
  360. height:329PX;
  361. }
  362. .carFX{
  363. position: absolute;
  364. z-index: 10;
  365. }
  366. .animate1{
  367. animation: carAni1 linear 10s infinite;
  368. @keyframes carAni1 {
  369. 0%{right:5%;}
  370. 100%{right:92%}
  371. }
  372. }
  373. .animate2{
  374. animation: carAni2 ease-in-out 8s infinite;
  375. @keyframes carAni2 {
  376. 0%{right:5%;}
  377. 100%{right:90%}
  378. }
  379. }
  380. .animate3{
  381. animation: carAni3 ease-in-out 8s infinite;
  382. @keyframes carAni3 {
  383. 0%{left:5%;}
  384. 100%{left:90%}
  385. }
  386. }
  387. .animate4{
  388. animation: carAni4 linear 10s infinite;
  389. @keyframes carAni4 {
  390. 0%{left:5%;}
  391. 100%{left:90%}
  392. }
  393. }
  394. .animate3{
  395. animation: carAni5 linear 20s infinite;
  396. @keyframes carAni5 {
  397. 0%{left:0%;}
  398. 100%{left:93%}
  399. }
  400. }
  401. .suggest{
  402. position:absolute;
  403. z-index: 20;
  404. right:155PX;
  405. top:-10PX;
  406. width:421PX;
  407. height:251PX;
  408. background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
  409. background-size: 100% 100%;
  410. font-size:14PX;
  411. font-family: Source Han Sans CN;
  412. font-weight: 400;
  413. color: #C1E8FF;
  414. line-height: 24PX;
  415. .autoCont{
  416. width:401PX;
  417. height:231PX;
  418. margin:10PX 0 0 10PX;
  419. padding:10PX;
  420. overflow: auto;
  421. }
  422. .iconSug{
  423. cursor: pointer;
  424. position:absolute;
  425. top:20PX;
  426. right:20PX;
  427. width: 25PX;
  428. height: 25PX;
  429. svg{
  430. width: 25PX;
  431. height: 25PX;
  432. }
  433. }
  434. .center{
  435. // margin:10PX 30px 10PX 0px;
  436. text-align: center;
  437. font-size:15PX;
  438. color:#fff;
  439. }
  440. .cont{
  441. padding-bottom:5PX;
  442. margin-bottom:5PX;
  443. border-bottom: 1px dashed #6A8CAE;
  444. .numBg{
  445. width:24PX;
  446. height: 18PX;
  447. line-height: 18PX;
  448. display: inline-block;
  449. background: url('@/assets/newImgs/pumpGY/numBg.png') no-repeat;
  450. background-size: 100% 100%;
  451. text-align: center;
  452. color: #FFD200;
  453. }
  454. }
  455. span{
  456. font-weight: bold;
  457. }
  458. }
  459. .waterFlow{
  460. position:absolute;
  461. z-index: 10;
  462. bottom:60PX;
  463. }
  464. .tipsM{
  465. position:absolute;
  466. z-index: 120;
  467. background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
  468. background-size: 100% 100%;
  469. padding:10PX;
  470. color:#C1E8FF;
  471. font-size:16PX;
  472. width:230PX;
  473. span{
  474. width:100%;
  475. display: inline-block;
  476. margin-bottom:3px;
  477. &:nth-of-type(1){
  478. font-weight: bold;
  479. }
  480. }
  481. }
  482. .realData{
  483. color:#fff;
  484. p{
  485. position:absolute;
  486. z-index: 10;
  487. width:160PX;
  488. height: 26PX;
  489. line-height: 26PX;
  490. text-align: center;
  491. background: #004DE0;
  492. border-radius: 13PX;
  493. font-size:16PX;
  494. }
  495. }
  496. }
  497. </style>