Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / monitorCalender.vue
@鲁yixuan 鲁yixuan on 27 Aug 13 KB updata
  1. <template>
  2. <!-- 监测监视--降雨日历统计 -->
  3. <div class="monitorCalender">
  4. <div :class="isCaleisnder">
  5. <div class="selectTitleHM">
  6. <div class="name">降雨日历统计</div>
  7. <el-date-picker
  8. :clearable="false"
  9. format="YYYY-MM"
  10. v-model="datevalue"
  11. type="month"
  12. placeholder="选择月"
  13. style="width: 150px"
  14. size="small"
  15. @change="timeChange()"
  16. />
  17. </div>
  18.  
  19. <el-calendar v-model="datevalue">
  20. <template #date-cell="{ data }">
  21. <div style="height: 100%" @click="changepeople(data.day)">
  22. <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
  23. <div
  24. class="data"
  25. v-for="(item, index) in allData.scheduleData"
  26. :key="item"
  27. v-show="moment(item.rainTime).format('YYYY-MM-DD') == moment(data.day).format('YYYY-MM-DD')"
  28. >
  29. <div class="data-body" v-if="item.rainTime == moment(data.day).format('YYYY-MM-DD')">
  30. <div class="datadiv" style="color: #ffeb3b">
  31. {{ item.rainCumulative == 0.0 ? '' : item.rainCumulative ? item.rainCumulative + 'mm' : '' }}
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. </el-calendar>
  38. <div class="supervisePopupPK" id="supervisePopupPK" v-show="allData.popupShow">
  39. <div class="titleTop">
  40. <div class="titleName">{{ dialogTitle }}</div>
  41. <div class="closePopup">
  42. <el-icon :size="18" @click="closePopup"><Close /></el-icon>
  43. </div>
  44. </div>
  45. <div class="allContent">
  46. <div id="waterChar" class="chartHeight"></div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </template>
  52.  
  53. <script setup>
  54. import optionChart from './chartOption.js';
  55. import { rainTimeDay } from '@/api/newPageline/riverCapacity.js';
  56. import { graphicReport } from '@/api/dataAnalysis/syntherticData';
  57. import { rainDistributionMapData } from '@/api/floodSys/floodStation.js';
  58. import { getKrigingByPoints } from '@/utils/gis/rainkriging';
  59. import bjBoundaryJson from '@/assets/geojson/krigingBoundary.json';
  60. import moment from 'moment';
  61. import { nextTick, onBeforeUnmount } from 'vue';
  62. const datevalue = ref(new Date());
  63. const dialogTitle = ref('');
  64. const { proxy } = getCurrentInstance();
  65. const waterEchart = shallowRef(null);
  66. const fromTime = ref('');
  67. const toTime = ref('');
  68. const krigingJson = ref([]);
  69. const Chartvalue = ref({
  70. xlist: [],
  71. ylist: [],
  72. });
  73.  
  74. const props = defineProps({
  75. isCaleisnder: {
  76. type: String,
  77. default: '',
  78. },
  79. });
  80. const allData = reactive({
  81. popupShow: false,
  82. clickitem: '',
  83. scheduleData: [],
  84. });
  85. const closePopup = () => {
  86. allData.popupShow = false;
  87. };
  88.  
  89. // 畅通道echart
  90. function waterBarChartHM(rainList) {
  91. let stCode = '';
  92. let startTime = '';
  93. let endTime = '';
  94. stCode = rainList.stCode;
  95. startTime = rainList.rainTime + ' 08:00:00';
  96. endTime = moment(rainList.rainTime).add(1, 'days').format('YYYY-MM-DD 08:00:00');
  97. console.log(endTime, 'stCode');
  98. let prams = {
  99. stCode: stCode,
  100. startTime: startTime,
  101. endTime: endTime,
  102. };
  103. graphicReport(prams).then(res => {
  104. // console.log('res.data', res, res.data.propertyMonitorXList);
  105. Chartvalue.value.xlist = res.data.propertyMonitorXList;
  106. if (res.data.propertyMonitorXList.length == 0) return;
  107. res.data.propertyMonitorList.map(item => {
  108. console.log(item, 'item');
  109. if (item.monitorPropertyName == '5分钟时段降水量') {
  110. Chartvalue.value.ylist = item.ylist;
  111. }
  112. });
  113. intChart();
  114. });
  115. }
  116. //获取降雨插值
  117. const getRainDistribution = async time => {
  118. if (newfiberMapbox.map.getLayer('kriging_layer')) {
  119. newfiberMapbox.map.removeLayer('kriging_layer');
  120. newfiberMapbox.map.removeLayer('krigingSymbol_layer');
  121. newfiberMapbox.map.removeSource('kriging_source');
  122. newfiberMapbox.map.removeSource('krigingSymbol_source');
  123. }
  124. !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
  125. !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
  126. krigingJson.value = [];
  127. let params = {
  128. startTime: time,
  129. endTime: time,
  130. };
  131. let res = await rainDistributionMapData(params);
  132. if (res && res.code == 200) {
  133. let allRainData = res.data;
  134. if (!!!allRainData.length) {
  135. proxy.$modal.msgError('暂无数据');
  136. return;
  137. }
  138. allRainData.forEach(data => {
  139. // data.rainSiteDistributionVOS.push(
  140. // {
  141. // lonLat: '113.973921,30.951959',
  142. // p24: '19.1',
  143. // stCode: '2109600001',
  144. // stName: '市政府雨量站',
  145. // },
  146. // {
  147. // lonLat: '113.953921,30.901959',
  148. // p24: '10.1',
  149. // stCode: '2109600001',
  150. // stName: '市政府雨量站',
  151. // }
  152. // );
  153. let rainDataJson = getKrigingJson(data.rainSiteDistributionVOS);
  154. krigingJson.value.push(rainDataJson);
  155. });
  156. addKrigingLayer(krigingJson.value[0]);
  157. }
  158. };
  159. //获取雨量插值json
  160. const getKrigingJson = dataList => {
  161. if (!!!dataList.length) return;
  162. let features = [];
  163. dataList.forEach(element => {
  164. let feature = {
  165. type: 'Feature',
  166. geometry: {
  167. type: 'Point',
  168. coordinates: [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])],
  169. },
  170. // properties: { value: element.p24, name: `${element.p24}mm`, label: element.p24 + `${element.p24}mm` },
  171. properties: { value: element.p24, name: `${element.p24}mm`, label: `${element.p24}mm` },
  172. };
  173. features.push(feature);
  174. });
  175. return {
  176. type: 'FeatureCollection',
  177. features: features,
  178. };
  179. };
  180. //地图添加降雨插值图
  181. const addKrigingLayer = geoJson => {
  182. let layerId = `kriging_layer`;
  183. let sourceId = `kriging_source`;
  184. let layerSymbolId = `krigingSymbol_layer`;
  185. let sourceSymbolId = `krigingSymbol_source`;
  186. let kriging = getKrigingByPoints(geoJson, bjBoundaryJson);
  187. !newfiberMapbox.map.getSource(sourceSymbolId) && newfiberMapbox.map.addSource(sourceSymbolId, { type: 'geojson', data: geoJson });
  188. !newfiberMapbox.map.getLayer(layerSymbolId) &&
  189. newfiberMapbox.map.addLayer({
  190. id: layerSymbolId,
  191. type: 'symbol',
  192. source: sourceSymbolId,
  193. layout: {
  194. 'text-field': '{label}',
  195. 'text-font': ['KlokanTech Noto Sans Regular'],
  196. 'text-size': 16,
  197. 'text-line-height': 3,
  198. 'text-anchor': 'bottom',
  199. 'text-max-width': 50,
  200. 'text-offset': [-2, 1],
  201. },
  202. paint: {
  203. 'text-color': '#ffffff',
  204. },
  205. });
  206. !newfiberMapbox.map.getSource(sourceId) && newfiberMapbox.map.addSource(sourceId, { type: 'geojson', data: kriging });
  207. !newfiberMapbox.map.getLayer(layerId) &&
  208. newfiberMapbox.map.addLayer({
  209. id: layerId,
  210. type: 'fill',
  211. source: sourceId,
  212. layout: {},
  213. paint: {
  214. 'fill-color': { type: 'identity', property: 'color' },
  215. 'fill-opacity': 0.6,
  216. },
  217. });
  218. };
  219. const intChart = () => {
  220. let waterBar = JSON.parse(JSON.stringify(optionChart.option2));
  221. waterEchart.value = proxy.echarts.init(document.getElementById('waterChar'));
  222. waterBar.graphic.invisible = true; // 暂无数据
  223. waterBar.series = [
  224. {
  225. name: '',
  226. type: 'bar',
  227. barWidth: '40%',
  228. data: Chartvalue.value.ylist,
  229. },
  230. ];
  231. waterBar.tooltip = {
  232. trigger: 'item',
  233. formatter: function (params, index) {
  234. // console.log('echarts', params, 'index', index);
  235. return '时间:' + params.name + '</br>' + '降雨量:' + params.data + 'mm';
  236. },
  237. };
  238. waterBar.xAxis = {
  239. type: 'category',
  240. data: Chartvalue.value.xlist,
  241. axisLabel: {
  242. color: '#c6c6c6',
  243. },
  244. axisLine: {
  245. lineStyle: {
  246. color: '#066592',
  247. },
  248. },
  249. };
  250. waterBar.dataZoom = [{ type: 'inside', startValue: Chartvalue.value.xlist[Chartvalue.value.xlist.length / 2] }];
  251. waterBar.yAxis.name = '单位: mm';
  252. waterEchart.value.clear();
  253. waterEchart.value.setOption(waterBar);
  254. };
  255.  
  256. function timeChange() {
  257. let startDate = moment(datevalue.value).startOf('month').format('YYYY-MM-DD');
  258. let endDate = moment(datevalue.value).endOf('month').format('YYYY-MM-DD');
  259. let prams = {
  260. fromTime: startDate,
  261. toTime: endDate,
  262. };
  263. rainTimeDay(prams).then(res => {
  264. let datas = res.data;
  265. allData.scheduleData = datas;
  266. });
  267. }
  268.  
  269. // 降雨日历点击事件
  270. const changepeople = time => {
  271. fromTime.value = time;
  272. let rainList = '';
  273. allData.scheduleData.map(element => {
  274. if (element.rainTime == time) {
  275. rainList = element;
  276. }
  277. });
  278. console.log(rainList.rainCumulative, 'rainCumulative', time);
  279. getRainDistribution(time);
  280. if (!rainList.rainCumulative || rainList.rainCumulative <= 0.0) {
  281. proxy.$modal.msgError('当日暂无降雨');
  282. } else {
  283. if (props.isCaleisnder !== 'calender2') {
  284. return;
  285. } else {
  286. allData.popupShow = true;
  287. dialogTitle.value = time + '降雨量';
  288. nextTick(() => {
  289. waterBarChartHM(rainList);
  290. }, 0);
  291. }
  292. }
  293. };
  294. function resizeTheChart() {
  295. waterEchart.value.resize();
  296. }
  297. onMounted(() => {
  298. timeChange();
  299. window.addEventListener('resize', resizeTheChart);
  300. });
  301. onBeforeUnmount(() => {
  302. if (newfiberMapbox.map.getLayer('kriging_layer')) {
  303. newfiberMapbox.map.removeLayer('kriging_layer');
  304. newfiberMapbox.map.removeLayer('krigingSymbol_layer');
  305. newfiberMapbox.map.removeSource('kriging_source');
  306. newfiberMapbox.map.removeSource('krigingSymbol_source');
  307. }
  308. });
  309. </script>
  310.  
  311. <style lang="scss">
  312. @import '@/assets/styles/variables.module.scss';
  313. .monitorCalender {
  314. position: relative;
  315. .el-calendar {
  316. // height: 100%;
  317. border: none !important;
  318. background-color: rgba(1, 20, 49, 0.8);
  319. }
  320. .el-calendar-day {
  321. height: 25px !important;
  322. border: none;
  323. text-align: center;
  324. padding: 0px !important;
  325. background: #021532;
  326. font-size: 12px;
  327. }
  328. .el-calendar__header {
  329. padding: 5px 5px;
  330. }
  331. .el-calendar__body {
  332. height: 200px;
  333. padding: 0px !important;
  334. background: #021532;
  335. }
  336.  
  337. .calender {
  338. .selectTitleHM {
  339. display: flex;
  340. align-items: center;
  341. justify-content: space-between;
  342. height: 45px;
  343. background: url('@/assets/images/setting/titleBg.png') no-repeat;
  344. background-size: 100% 100%;
  345. .name {
  346. font-family: YouSheBiaoTiHei;
  347. font-size: 22px;
  348. font-style: normal;
  349. font-weight: bold;
  350. line-height: normal;
  351. letter-spacing: 2px;
  352. color: #21adda;
  353. margin-left: 70px;
  354. background: linear-gradient(180deg, #fff 26.56%, #21adda 100%);
  355. background-clip: text;
  356. -webkit-background-clip: text;
  357. -webkit-text-fill-color: transparent;
  358. }
  359. }
  360. .el-calendar {
  361. height: 180px;
  362. border: none !important;
  363. background-color: #00314e;
  364. }
  365. .el-calendar-day {
  366. height: 40px !important;
  367. border: none;
  368. text-align: center;
  369. padding: 0px !important;
  370. background: #00314e;
  371. font-size: 12px;
  372. }
  373. .el-calendar__body {
  374. height: 200px;
  375. padding: 0px !important;
  376. background: #00314e;
  377. }
  378. /* 日历单元格鼠标经过背景色 */
  379. .el-calendar-table .el-calendar-day:hover {
  380. background-color: #003f62 !important;
  381. }
  382. // #supervisePopupPK {
  383. // position: fixed;
  384. // left: 52%;
  385. // top: 70%;
  386. // transform: translate(-50%, -50%);
  387. // width: 420px;
  388. // height: 250px;
  389. // background: #004065;
  390. // border: 1px solid #114f89;
  391. // z-index: 2000;
  392. // }
  393. }
  394.  
  395. .calender2 {
  396. .el-calendar {
  397. // height: 100%;
  398. border: none !important;
  399. background-color: rgba(1, 20, 49, 0.8);
  400. }
  401. .el-calendar-day {
  402. height: 25px !important;
  403. border: none;
  404. text-align: center;
  405. padding: 0px !important;
  406. background: #021532;
  407. font-size: 12px;
  408. }
  409. /* 日历单元格鼠标经过背景色 */
  410. .el-calendar-table .el-calendar-day:hover {
  411. background-color: #052351 !important;
  412. }
  413. }
  414. .el-calendar-table tr:first-child td,
  415. .el-calendar-table td,
  416. .el-calendar-table tr td:first-child {
  417. border: none;
  418. }
  419. .el-calendar-table {
  420. padding: 2px;
  421. }
  422. .is-selected {
  423. color: #1989fa;
  424. }
  425. //取消日历选中背景颜色
  426. .el-calendar-table td.is-selected {
  427. background-color: inherit;
  428. }
  429. /* 日历单元格鼠标经过背景色 */
  430. .el-calendar-table .el-calendar-day:hover {
  431. background-color: #052351 !important;
  432. }
  433. .datadiv {
  434. font-size: 10px;
  435. }
  436. .yellow {
  437. color: #ffeb3b;
  438. }
  439. .blue {
  440. color: #2196f3;
  441. }
  442. .dialogClass {
  443. position: fixed;
  444. top: 250px;
  445. width: 100vw;
  446. height: 500px;
  447. left: 0;
  448. }
  449. .el-calendar__header {
  450. display: none;
  451. }
  452. #supervisePopupPK {
  453. position: fixed;
  454. left: 52%;
  455. top: 19%;
  456. transform: translate(-50%, -50%);
  457. width: 360px;
  458. height: 210px;
  459. background: #021534;
  460. border: 1px solid #114f89;
  461. z-index: 2000;
  462. .titleTop {
  463. position: relative;
  464. height: 30px;
  465. padding-top: 8px;
  466. margin-left: 20px;
  467. }
  468. .closePopup {
  469. cursor: pointer;
  470. position: absolute;
  471. right: 12px;
  472. top: 50%;
  473. transform: translateY(-50%);
  474. color: #1096db;
  475. }
  476.  
  477. .allContent {
  478. width: 360px;
  479. height: 180px;
  480. }
  481. .chartHeight {
  482. width: 360px;
  483. height: 180px;
  484. }
  485. }
  486. }
  487. </style>