Newer
Older
urbanLifeline_YanAn / src / views / oneMap / components / ZHHM_JCFX.vue
@鲁yixuan 鲁yixuan on 15 Oct 18 KB updata
  1. <template>
  2. <!-- 海绵监测分析 -->
  3. <div id="ZHHM_JCFX">
  4. <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
  5. <div class="ComBox">
  6. <!-- 降雨日历统计 -->
  7. <div class="Box_header">降雨日历统计</div>
  8. <div class="rainCal">
  9. <monitorCalender :hasClose="false" @change="getChangeDate" />
  10. </div>
  11.  
  12. <!-- 内涝积水分析 -->
  13. <div class="Box_header" @click="showWaterloging">内涝积水分析</div>
  14. <div class="titSmall flex flex-align-center">
  15. <div class="flex">
  16. <span></span>
  17. <div class="name">内涝风险点</div>
  18. </div>
  19. <el-select
  20. clearable
  21. filterable
  22. v-model="waterlogingPoint"
  23. placeholder="请选择内涝风险点"
  24. size="small"
  25. class="picker"
  26. @change="selectWaterloggingPoint"
  27. >
  28. <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
  29. </el-select>
  30. </div>
  31. <div class="chartHeight">
  32. <chartLogging :data="chartData1" :refresh="chartData1.refresh"></chartLogging>
  33. </div>
  34. <div class="flex flexLeg">
  35. <div class="legPart"><span class="yellow"></span>轻微内涝警戒线</div>
  36. <div class="legPart"><span class="red"></span>严重内涝警戒线</div>
  37. </div>
  38.  
  39. <!-- 内涝分析成因分析 -->
  40. <div class="titSmall flex flex-align-center">
  41. <div class="flex">
  42. <span></span>
  43. <div class="name">内涝分析成因分析</div>
  44. </div>
  45. </div>
  46. <table class="tableFX">
  47. <tr>
  48. <td class="title">当前状况</td>
  49. <td>未出现内涝积水情况</td>
  50. </tr>
  51. <tr>
  52. <td class="title">数据分析</td>
  53. <td>初雨出流较慢但持续一段时间正常</td>
  54. </tr>
  55. <tr>
  56. <td class="title">历史成因</td>
  57. <td>区域局部地理位置较低,收水范围过大</td>
  58. </tr>
  59. </table>
  60. </div>
  61. </div>
  62. <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
  63. <div class="ComBox">
  64. <!-- 典型项目分析 -->
  65. <div class="Box_header" @click="projectionShow">典型项目分析</div>
  66. <div class="flex flex-justcontent-end">
  67. <el-select
  68. clearable
  69. filterable
  70. v-model="projectionStation"
  71. placeholder="请选择典型项目"
  72. size="small"
  73. class="picker"
  74. style="margin: 10px 0px"
  75. @change="selectProjectionPoint"
  76. >
  77. <el-option v-for="dict in projectionList" :key="dict.value" :label="dict.label" :value="dict.value" />
  78. </el-select>
  79. </div>
  80. <div style="height: 220px">
  81. <projectDX :data="chartData2" :refresh="chartData2.refresh"></projectDX>
  82. </div>
  83.  
  84. <!-- 关键管网分析 -->
  85. <div class="Box_header" @click="pipeSupervisePoint">关键管网分析</div>
  86. <div class="flex flex-justcontent-spacearound">
  87. <el-select
  88. clearable
  89. filterable
  90. v-model="riskStation"
  91. placeholder="请选择分区"
  92. size="small"
  93. class="picker"
  94. style="margin: 10px 0px"
  95. >
  96. <el-option label="延河南岸分区" value="1" />
  97. </el-select>
  98. <el-select
  99. clearable
  100. filterable
  101. v-model="supervisePoint"
  102. placeholder="请选择管网监测点"
  103. size="small"
  104. class="picker"
  105. style="margin: 10px 0px"
  106. @change="selectSupervisePoint"
  107. >
  108. <el-option v-for="dict in supervisePointList" :key="dict.value" :label="dict.label" :value="dict.value" />
  109. </el-select>
  110. </div>
  111. <div class="chartHeightR">
  112. <pipeFX :data="chartData3" :refresh="chartData3.refresh"></pipeFX>
  113. </div>
  114. <div class="flex flexLeg">
  115. <div class="legPart"><span class="yellow"></span>轻微风险警戒线</div>
  116. <div class="legPart"><span class="red"></span>溢流风险警戒线</div>
  117. </div>
  118.  
  119. <!-- 风险成因分析 -->
  120. <div class="titSmall flex flex-align-center">
  121. <div class="flex">
  122. <span></span>
  123. <div class="name">风险成因分析</div>
  124. </div>
  125. </div>
  126. <table class="tableFX">
  127. <tr>
  128. <td class="title">当前状况</td>
  129. <td>未出现风险运行</td>
  130. </tr>
  131. <tr>
  132. <td class="title" rowspan="2">数据分析</td>
  133. <td>出流时间与降雨峰值有时间偏差</td>
  134. </tr>
  135. <tr>
  136. <td>降雨过后1小时后管网有积水</td>
  137. </tr>
  138. <tr>
  139. <td class="title">管网管径</td>
  140. <td>DN300</td>
  141. </tr>
  142. <tr>
  143. <td class="title" rowspan="2">风险分析</td>
  144. <td>管网普查报告中该段管网存在缺陷</td>
  145. </tr>
  146. <tr>
  147. <td>溢流风险运行35分钟</td>
  148. </tr>
  149. </table>
  150. </div>
  151. </div>
  152. <!-- 中部建议 -->
  153. <div :class="['centerSuggest', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
  154. <div class="flex">
  155. <div class="part">
  156. <div class="flex flex-align-center">
  157. <div class="left">
  158. <div>管网监测</div>
  159. <div style="font-weight: bold">(10/24)</div>
  160. </div>
  161. <div class="right">
  162. <div class="flex flex-justcontent-spacearound">今日预警站点(个):<span>10</span></div>
  163. <div class="flex flex-justcontent-spacearound">今日持续时长(分钟):<span>70</span></div>
  164. </div>
  165. </div>
  166. </div>
  167. <div class="part">
  168. <div class="flex flex-align-center">
  169. <div class="left">
  170. <div>排口监测</div>
  171. <div style="font-weight: bold">(20/29)</div>
  172. </div>
  173. <div class="right">
  174. <div class="flex flex-justcontent-spacearound">今日预警站点(个):<span>10</span></div>
  175. <div class="flex flex-justcontent-spacearound">今日持续时长(分钟):<span>70</span></div>
  176. </div>
  177. </div>
  178. </div>
  179. <div class="part">
  180. <div class="flex flex-align-center">
  181. <div class="left">
  182. <div>海绵地块</div>
  183. <div style="font-weight: bold">(10/12)</div>
  184. </div>
  185. <div class="right">
  186. <div class="flex flex-justcontent-spacearound">今日预警站点(个):<span>10</span></div>
  187. <div class="flex flex-justcontent-spacearound">今日持续时长(分钟):<span>70</span></div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </template>
  195.  
  196. <script setup name="ZHHM_JCFX">
  197. import { ref, reactive, toRefs, onMounted, defineProps, defineEmits, onBeforeUnmount } from 'vue';
  198. import { selectWaterlogging, selectExponent, selectPipenetwork } from '@/api/haimian/jcfxHM.js';
  199. import monitorCalender from './monitorCalender.vue';
  200. import chartLogging from './chartLogging'; //内涝积水点
  201. import projectDX from './projectDX'; //典型项目分析
  202. import pipeFX from './pipeFX'; //管网分析
  203. import bus from '@/bus';
  204. import yanAnProjection from '@/assets/yanAnProjection.json';
  205.  
  206. const showPanel = ref(true); //面板展开收起
  207. const chartData1 = ref({
  208. xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
  209. inverse: true,
  210. yAxis: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
  211. yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流量
  212. refresh: 1,
  213. });
  214. const chartData2 = ref({
  215. xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
  216. yAxis1: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //水深
  217. yAxis2: [50, 55, 80, 50, 46, 65, 70, 50, 78, 52, 69, 90], //ss
  218. yAxisName1: '水深(cm)',
  219. yAxisName2: 'ss(mg/L)',
  220. refresh: 1,
  221. });
  222. const chartData3 = ref({
  223. xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
  224. inverse: true,
  225. yAxis1: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
  226. yAxis2: [20, 20.2, 21.3, 20.2, 22.1, 19.4, 20, 21, 23.6, 20.1, 21.2, 29], //水深
  227. yAxis3: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流速
  228. refresh: 1,
  229. });
  230. const riskStation = ref('1');
  231. const supervisePoint = ref('1');
  232. const waterlogingPoint = ref('1');
  233. const projectionStation = ref('1');
  234. const riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口', lonlat: '109.46877497809032,36.60720875935824' }]);
  235. const supervisePointList = ref([{ value: '1', label: '延河南岸监测点1', lonlat: '109.49243789462459,36.601059437268574' }]);
  236. const projectionList = ref([
  237. { value: '1', label: '长青路纺织花园侧风险点整治工程', lonlat: '109.50939984901683,36.614801063495705' },
  238. { value: '2', label: '王家坪纪念馆改造工程', lonlat: '109.47138061324954,36.60901773821534' },
  239. { value: '3', label: '边区银行及大礼堂旧址综合改造工程', lonlat: '109.47633416787454,36.58271490658465' },
  240. ]);
  241. // 面板内容展开收起控制
  242. const props = defineProps({
  243. showPanel: {
  244. type: Boolean,
  245. },
  246. });
  247. //内涝积水分析交互
  248. const showWaterloging = () => {
  249. newfiberMapbox.map.easeTo({
  250. center: [109.488, 36.596],
  251. zoom: 12,
  252. pitch: 55,
  253. });
  254. // 先清空
  255. bus.emit('clearAllLayer');
  256. let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  257. removedLayer.forEach(layer => {
  258. bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  259. });
  260. bus.emit('SetLayerShow', ['内涝易涝点', '内涝风险点']);
  261. };
  262. //关键管网分析交互
  263. const pipeSupervisePoint = () => {
  264. newfiberMapbox.map.easeTo({
  265. center: [109.488, 36.596],
  266. zoom: 12,
  267. pitch: 55,
  268. });
  269. // 先清空
  270. bus.emit('clearAllLayer');
  271. let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  272. removedLayer.forEach(layer => {
  273. bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  274. });
  275. bus.emit('SetLayerShow', ['排水管网监测']);
  276. };
  277. //典型项目分析交互
  278. const projectionShow = () => {
  279. newfiberMapbox.map.easeTo({
  280. center: [109.488, 36.596],
  281. zoom: 12,
  282. pitch: 55,
  283. });
  284. // 先清空
  285. bus.emit('clearAllLayer');
  286. let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  287. removedLayer.forEach(layer => {
  288. bus.emit('setLayerVisible', { layername: layer, isCheck: true });
  289. });
  290. };
  291. watch(
  292. () => props.showPanel,
  293. () => {
  294. showPanel.value = props.showPanel;
  295. },
  296. { immediate: true }
  297. );
  298. //内涝点change事件
  299. const selectWaterloggingPoint = () => {
  300. if (waterlogingPoint.value) {
  301. let selectedPoint = riskList.value.filter(item => item.value == waterlogingPoint.value)[0];
  302. newfiberMapbox.map.easeTo({
  303. center: selectedPoint.lonlat.split(',').map(Number),
  304. zoom: 15.5,
  305. });
  306. }
  307. };
  308. //典型项目change事件
  309. const selectProjectionPoint = () => {
  310. if (projectionStation.value) {
  311. let selectedPoint = projectionList.value.filter(item => item.value == projectionStation.value)[0];
  312. newfiberMapbox.map.easeTo({
  313. center: selectedPoint.lonlat.split(',').map(Number),
  314. zoom: 15.5,
  315. });
  316. }
  317. };
  318. //管网监测change事件
  319. const selectSupervisePoint = () => {
  320. if (supervisePoint.value) {
  321. let selectedPoint = supervisePointList.value.filter(item => item.value == supervisePoint.value)[0];
  322. newfiberMapbox.map.easeTo({
  323. center: selectedPoint.lonlat.split(',').map(Number),
  324. zoom: 15.5,
  325. });
  326. }
  327. };
  328. const DataList = ref('');
  329. // 日历点击获取相应日期
  330. const getChangeDate = date => {
  331. console.log(date);
  332. // 模拟假数据,演示用
  333. if (date == '2024-08-07') {
  334. // 大雨
  335. DataList.value = '2024-08-07';
  336. getDataFX('1');
  337. } else {
  338. // 中雨
  339. DataList.value = '2024-08-03';
  340. getDataFX('0');
  341. }
  342. };
  343. // 内涝积水分析、项目分析、关键管网分析数据获取
  344. function getDataFX(val) {
  345. // 内涝积水分析
  346. console.log(val, 'valvalval');
  347. selectWaterlogging({ value: val, date: DataList.value }).then(res => {
  348. let datas = res.data;
  349. chartData1.value.xAxis = datas.time;
  350. chartData1.value.yAxis = datas.jiangyuliang; //降雨量
  351. chartData1.value.yAxis2 = datas.jishuishen; //积水深
  352. chartData1.value.refresh = Math.random();
  353. });
  354.  
  355. // 项目分析
  356. selectExponent({ value: val, date: DataList.value }).then(res => {
  357. let datas = res.data;
  358. chartData2.value.xAxis = datas.time;
  359. chartData2.value.yAxis1 = datas.jishuishen; //水深
  360. chartData2.value.yAxis2 = datas.ss; //SS
  361. chartData2.value.refresh = Math.random();
  362. });
  363.  
  364. // 关键管网分析
  365. selectPipenetwork({ value: val, date: DataList.value }).then(res => {
  366. let datas = res.data;
  367. chartData3.value.xAxis = datas.time;
  368. chartData3.value.yAxis1 = datas.jyl; //降雨量
  369. chartData3.value.yAxis2 = datas.jishuishen; //水深
  370. chartData3.value.yAxis3 = datas.ls; //流速
  371. chartData3.value.refresh = Math.random();
  372. });
  373. }
  374. //添加海绵项目
  375. const addProjectionLayer = () => {
  376. let projectionList = [
  377. {
  378. layername: 'HMJZYSQ',
  379. data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('建筑'))),
  380. },
  381. {
  382. layername: 'HMXGYLD',
  383. data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('公园'))),
  384. },
  385. {
  386. layername: 'HMXDLGC',
  387. data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('道路'))),
  388. },
  389. {
  390. layername: 'HMXSX',
  391. data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('水系'))),
  392. },
  393. {
  394. layername: 'GWPCYXF',
  395. data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('管网'))),
  396. },
  397. // 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'
  398. ];
  399. console.log('projectionList---', projectionList);
  400. projectionList.forEach(item => {
  401. bus.emit('setGeoJSON', { json: item.data, key: item.layername });
  402. });
  403. //bus.emit('setLegendData', projectionList);
  404. };
  405. onMounted(() => {
  406. newfiberMapbox.map.easeTo({
  407. center: [109.488, 36.596],
  408. zoom: 13,
  409. });
  410. addProjectionLayer();
  411. });
  412. onBeforeUnmount(() => {
  413. bus.emit('clearAllLayer');
  414. bus.emit('SetLayerShow', ['蓝色地图']);
  415. let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  416. removedLayer.forEach(layer => {
  417. bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  418. });
  419. });
  420. </script>
  421.  
  422. <style lang="scss" scoped>
  423. #ZHHM_JCFX {
  424. width: 100%;
  425. height: 100%;
  426. .centerSuggest {
  427. position: absolute;
  428. left: 480px;
  429. top: 110px;
  430. z-index: 90;
  431. background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
  432. border-radius: 6px;
  433. border: 1px solid #15d2fd;
  434. padding: 15px;
  435. width: calc(100vw - 1000px);
  436. box-shadow: inset 0 0 10px 10px #47eef38a;
  437. .part {
  438. font-family: Source Han Sans CN;
  439. font-weight: 400;
  440. font-size: 14px;
  441. color: #ffffff;
  442. width: 31.8%;
  443. margin-left: 10px;
  444. text-align: center;
  445. background: linear-gradient(0deg, rgba(0, 252, 255, 0.8) 0%, rgba(0, 43, 67, 0.2) 100%);
  446. border-radius: 2px;
  447. border: 1px solid #74dde1;
  448. box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  449. padding: 6px 0px;
  450. line-height: 24px;
  451. .left {
  452. border-right: 1px solid #74dde1;
  453. width: 30%;
  454. }
  455. .right {
  456. flex: 1;
  457. span {
  458. font-family: Source Han Sans CN;
  459. font-weight: bold;
  460. font-size: 16px;
  461. color: #00f2ff;
  462. cursor: pointer;
  463. }
  464. }
  465. }
  466. }
  467. .chartHeight {
  468. width: 100%;
  469. height: calc(100vh - 720px);
  470. margin: 5px auto;
  471. }
  472. .chartHeightR {
  473. width: 100%;
  474. height: calc(100vh - 780px);
  475. margin: 5px auto;
  476. }
  477. .tableFX {
  478. border-collapse: collapse;
  479. width: 95%;
  480. margin: 10px 2%;
  481. td {
  482. border: 1px solid #1cf5fc;
  483. text-align: center;
  484. font-family: Source Han Sans CN;
  485. font-weight: 400;
  486. font-size: 14px;
  487. padding: 5px 0px;
  488. color: #a5d2ff;
  489. background: #075680;
  490. }
  491. .title {
  492. color: #00f2ff;
  493. }
  494. }
  495. .LeftBox {
  496. width: 450px;
  497. height: calc(100% - 98px);
  498. position: absolute;
  499. left: 10px;
  500. top: 70px;
  501. background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
  502. border-radius: 6px;
  503. border: 1px solid #47eef3;
  504. box-sizing: border-box;
  505. padding: 10px;
  506. box-shadow: inset 0 0 5px 5px #47eef38a;
  507. }
  508. .RightBox {
  509. width: 450px;
  510. height: calc(100% - 98px);
  511. position: absolute;
  512. right: 10px;
  513. top: 70px;
  514. background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
  515. border-radius: 6px;
  516. border: 1px solid #47eef3;
  517. box-sizing: border-box;
  518. padding: 10px;
  519. box-shadow: inset 0 0 5px 5px #47eef38a;
  520. }
  521. .ComBox {
  522. width: 100%;
  523. box-sizing: border-box;
  524.  
  525. .Box_header {
  526. width: 100%;
  527. height: 43px;
  528. background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
  529. background-size: cover;
  530. font-family: PangMenZhengDao;
  531. font-weight: 400;
  532. font-size: 23px;
  533. color: #ebfeff;
  534. line-height: 43px;
  535. box-sizing: border-box;
  536. padding-left: 35px;
  537. cursor: pointer;
  538. }
  539. .titSmall {
  540. justify-content: space-between;
  541. padding: 0px 15px;
  542. margin-top: 10px;
  543. .flex {
  544. font-family: Source Han Sans CN;
  545. font-weight: bold;
  546. font-size: 14px;
  547. color: #ebfeff;
  548. align-items: center;
  549. span {
  550. width: 10px;
  551. height: 10px;
  552. display: inline-block;
  553. margin-right: 6px;
  554. background: #fff;
  555. transform: rotate(45deg);
  556. }
  557. .name {
  558. background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
  559. padding: 0px 3px;
  560. height: 10px;
  561. line-height: 0px;
  562. margin-top: 6px;
  563. }
  564. }
  565. }
  566. .flexLeg {
  567. justify-content: center;
  568. margin-bottom: 20px;
  569. .legPart {
  570. font-family: Source Han Sans CN;
  571. font-weight: bold;
  572. font-size: 14px;
  573. color: #ebfeff;
  574. text-align: center;
  575. margin-right: 20px;
  576. span {
  577. width: 10px;
  578. height: 10px;
  579. display: inline-block;
  580. margin-right: 6px;
  581. }
  582. .yellow {
  583. background: #ffff80;
  584. }
  585. .red {
  586. background: #e20f36;
  587. }
  588. }
  589. }
  590. }
  591. }
  592. </style>