Newer
Older
KaiFengPC / src / views / sponeScreen / waterFlood / rainFX / ReportDayDetail.vue
@zhangdeliang zhangdeliang 22 days ago 11 KB update
  1. <template>
  2. <!-- 降雨报告单详情 -->
  3. <!-- <el-button plain type="warning" @click="downloadPdf" style="margin: 10px 0px" :disabled="showLoading">下载</el-button> -->
  4. <div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
  5. <h1>开封市海绵城市雨情分析报告</h1>
  6. <h4>报告时间:{{ rePortTime }}</h4>
  7. <!-- 雨量站数据 -->
  8. <div v-for="item in raindata">
  9. <p class="title">【{{ item.stName }}】</p>
  10. <p class="content">
  11. 降雨时间段:<span>{{ item.rainStartTime }}</span> 开始至<span>{{ item.rainEndTime }}</span> 结束,总历时
  12. <span> {{ item.rainTodate }}; </span>
  13. </p>
  14. <p class="content">
  15. 日累计降雨量:<span>{{ item.rainTotol }} mm;</span>
  16. </p>
  17. <p class="content flex flex-r flex-justcontent-start">
  18. 降雨等级:<span><dict-tag :options="props.rainfallIntensity" :value="item.rainLevel" /></span>;
  19. </p>
  20. <p class="content">
  21. 最大小时降雨量:<span>{{ item.maxRainData }}mm/h</span> <span>({{ item.maxRainTimeStart }}-{{ item.maxRainTimeEnd }})</span>;
  22. </p>
  23. <div :id="`rain_chart_${item.stCode}`" class="chartOneBG rainChart"></div>
  24. </div>
  25. <!-- 所有雨量站数据 -->
  26. <p class="title">【降雨时空分布】</p>
  27. <div id="rain_chart" class="chartOneBG"></div>
  28. </div>
  29. </template>
  30.  
  31. <script setup stName="降雨报告单详情">
  32. import bus from '@/bus';
  33. import { ElMessage } from 'element-plus';
  34. import * as echarts from 'echarts';
  35. import { pageToPDF } from '@/utils/exportPdf.js'; //导出下载PDF
  36. import { querySationdateByDay, queryRainStationCharts } from '@/api/zongHeDD.js';
  37.  
  38. const props = defineProps({
  39. params: {
  40. type: Object,
  41. default: {},
  42. },
  43. rainfallIntensity: {
  44. type: Array,
  45. default: [],
  46. },
  47. });
  48. const { proxy } = getCurrentInstance();
  49. const search = ref({
  50. time: '',
  51. });
  52. const loadingText = ref('正在加载中...');
  53. //降雨等级
  54. const levelData = ref([
  55. {
  56. type: '小雨',
  57. '24Rail': '小于10.0',
  58. '12Rail': '小于5.0',
  59. },
  60. {
  61. type: '中雨',
  62. '24Rail': '10.0~24.9',
  63. '12Rail': '5.0~14.9',
  64. },
  65. {
  66. type: '大雨',
  67. '24Rail': '25.0~49.9',
  68. '12Rail': '25.0~49.9',
  69. },
  70. {
  71. type: '暴雨',
  72. '24Rail': '50.0~99.9',
  73. '12Rail': '30.0~69.9',
  74. },
  75. {
  76. type: '大暴雨',
  77. '24Rail': '100.0~249.0',
  78. '12Rail': '70.0~139.0',
  79. },
  80. {
  81. type: '特大暴雨',
  82. '24Rail': '250.0以上',
  83. '12Rail': '140.0以上',
  84. },
  85. ]);
  86. const revelLabel = {
  87. 1: '小雨',
  88. 2: '中雨',
  89. 3: '大雨',
  90. 4: '暴雨',
  91. 5: '大暴雨',
  92. 6: '特大暴雨',
  93. };
  94. //雨量站数据
  95. const raindatalist = ref([]);
  96. //管网数据
  97. const pipelinedatalist = ref([]);
  98. //易涝点数据
  99. const loggingdatalist = ref([]);
  100. //项目数据
  101. const projectdatalist = ref([]);
  102. const showLoading = ref(true);
  103. const detailData = ref({
  104. startTime: '',
  105. endTime: '',
  106. accumulate: '',
  107. });
  108. const rePortTime = ref('');
  109. //单个雨量站数据
  110. const raindata = ref([]);
  111. //所有雨量站数据
  112. const siteData = ref([]);
  113. //雨量站--降雨量
  114. const initEchartsRain = async datas => {
  115. for (var i = 0; i < datas.length; i++) {
  116. var chart2 = echarts.init(document.getElementById(`rain_chart_${datas[i]['stCode']}`));
  117. let xData = datas[i].rainTimeX.map(item => proxy.moment(item).format('HH:mm'));
  118. let yData = datas[i].rainY;
  119. var rainMaxNum = Math.max(...yData);
  120. var rainMinNum = Math.min(...yData);
  121. let option4 = {
  122. color: '#6881CD',
  123. // 显示暂无数据
  124. graphic: {
  125. type: 'text', // 类型:文本
  126. left: 'center',
  127. top: 'middle',
  128. silent: true, // 不响应事件
  129. invisible: true, // 有数据就隐藏
  130. style: {
  131. fill: '#c6c6c6',
  132. fontWeight: 'bold',
  133. text: '暂无数据',
  134. fontFamily: 'Microsoft YaHei',
  135. fontSize: '18px',
  136. },
  137. },
  138. tooltip: {
  139. trigger: 'axis',
  140. show: true,
  141. },
  142. title: {
  143. left: 'center',
  144. text: '',
  145. textStyle: {
  146. color: '#333', //字体颜色
  147. fontSize: 16, //字体大小
  148. },
  149. },
  150. grid: {
  151. left: '3%',
  152. right: '3%',
  153. top: '15%',
  154. bottom: '3%',
  155. containLabel: true,
  156. },
  157. legend: {
  158. top: '8%',
  159. orient: 'horizontal', //horizontal
  160. left: 'center', //left ,center
  161. textStyle: {
  162. color: '#333',
  163. },
  164. data: [],
  165. },
  166. xAxis: {
  167. type: 'category',
  168. data: xData,
  169. axisLabel: {
  170. color: '#333',
  171. rotate: 90,
  172. },
  173. axisLine: {
  174. lineStyle: {
  175. color: '#066592',
  176. },
  177. },
  178. },
  179. yAxis: [
  180. {
  181. name: '降雨量(mm)',
  182. type: 'value',
  183. nameLocation: 'end', // 坐标轴名称显示位置
  184. nameGap: 10, // 坐标轴名称与轴线之间的距离
  185. nameTextStyle: {
  186. color: '#333', //字体颜色
  187. fontSize: 12, //字体大小
  188. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  189. padding: [0, 0, 0, 0],
  190. },
  191. axisLabel: {
  192. color: '#333',
  193. },
  194. splitLine: {
  195. lineStyle: {
  196. type: 'dashed',
  197. color: '#066592',
  198. },
  199. },
  200. min: (Number(rainMinNum) * 0.8).toFixed(1),
  201. max: (Number(rainMaxNum) * 1.5).toFixed(1),
  202. },
  203. ],
  204. series: [{ name: '降雨量', type: 'bar', barWidth: 2, data: yData }],
  205. };
  206. if (xData.length > 0) {
  207. option4.graphic.invisible = true;
  208. } else {
  209. option4.graphic.invisible = false;
  210. }
  211. chart2.clear();
  212. chart2.setOption(option4);
  213. }
  214. };
  215. //所有雨量站数据
  216. const initEchartsSiteRain = async (timeData, rainList) => {
  217. var chart2 = echarts.init(document.getElementById(`rain_chart`));
  218. let xData = timeData;
  219. let yData = rainList;
  220. var rainMaxNum = Math.max(...yData);
  221. var rainMinNum = Math.min(...yData);
  222. let option4 = {
  223. color: '#6881CD',
  224. // 显示暂无数据
  225. graphic: {
  226. type: 'text', // 类型:文本
  227. left: 'center',
  228. top: 'middle',
  229. silent: true, // 不响应事件
  230. invisible: true, // 有数据就隐藏
  231. style: {
  232. fill: '#c6c6c6',
  233. fontWeight: 'bold',
  234. text: '暂无数据',
  235. fontFamily: 'Microsoft YaHei',
  236. fontSize: '18px',
  237. },
  238. },
  239. tooltip: {
  240. trigger: 'axis',
  241. show: true,
  242. formatter: function (params) {
  243. // params 是一个数组,数组中包含了多个要显示的数据的信息
  244. var result = '<div style="font-size:14px">' + search.value.time + '日' + params[0].axisValueLabel + '</div><div>';
  245. for (var i = 0, l = params.length; i < l; i++) {
  246. let data = siteData.value.filter(item => item.stName == params[i].axisValueLabel);
  247. result += `<div style="padding:6px 0"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:8px;height:8px;background-color:#6881CD"></span>
  248. ${params[i].seriesName} : ${params[i].value}mm</div>
  249. <span style="display:inline-block;margin-right:5px;border-radius:10px;width:8px;height:8px;background-color:#6881CD"></span>
  250. 级别 :<span style="display:inline-block;margin-right:5px;border-radius:3px;width:35px;height:20px;text-align:center;">${
  251. revelLabel[data[0].rainLevle]
  252. }</span> <br/>
  253. `;
  254. }
  255. return result + '</div>';
  256. },
  257. },
  258. title: {
  259. left: 'center',
  260. text: '',
  261. textStyle: {
  262. color: '#333', //字体颜色
  263. fontSize: 16, //字体大小
  264. },
  265. },
  266. grid: {
  267. left: '3%',
  268. right: '3%',
  269. top: '15%',
  270. bottom: '3%',
  271. containLabel: true,
  272. },
  273. legend: {
  274. top: '8%',
  275. orient: 'horizontal', //horizontal
  276. left: 'center', //left ,center
  277. textStyle: {
  278. color: '#333',
  279. },
  280. data: [],
  281. },
  282. xAxis: {
  283. type: 'category',
  284. data: xData,
  285. axisLabel: {
  286. color: '#333',
  287. rotate: 0,
  288. },
  289. axisLine: {
  290. lineStyle: {
  291. color: '#066592',
  292. },
  293. },
  294. },
  295. yAxis: [
  296. {
  297. name: '降雨量(mm)',
  298. type: 'value',
  299. nameLocation: 'end', // 坐标轴名称显示位置
  300. nameGap: 10, // 坐标轴名称与轴线之间的距离
  301. nameTextStyle: {
  302. color: '#333', //字体颜色
  303. fontSize: 12, //字体大小
  304. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  305. padding: [0, 0, 0, 0],
  306. },
  307. axisLabel: {
  308. color: '#333',
  309. },
  310. splitLine: {
  311. lineStyle: {
  312. type: 'dashed',
  313. color: '#066592',
  314. },
  315. },
  316. min: (Number(rainMinNum) * 0.8).toFixed(1),
  317. max: (Number(rainMaxNum) * 1.5).toFixed(1),
  318. },
  319. ],
  320. series: [{ name: '降雨量', type: 'bar', barWidth: 20, data: yData }],
  321. };
  322. if (xData.length > 0) {
  323. option4.graphic.invisible = true;
  324. } else {
  325. option4.graphic.invisible = false;
  326. }
  327. chart2.clear();
  328. chart2.setOption(option4);
  329. };
  330.  
  331. //获取数据
  332. const getDetailData = params => {
  333. showLoading.value = true;
  334. let timeObj = {
  335. ...params,
  336. };
  337. rePortTime.value = params.dateTime;
  338. querySationdateByDay(timeObj).then(res => {
  339. raindata.value = res.data;
  340. setTimeout(() => {
  341. initEchartsRain(raindata.value);
  342. showLoading.value = false;
  343. }, 1000);
  344. });
  345. };
  346.  
  347. //获取所有雨量站的降雨总和对比柱状图
  348. const getRainStationCharts = params => {
  349. let data = {
  350. dateTime: proxy.moment(params.dateTime).format('YYYY-MM-DD'),
  351. };
  352. queryRainStationCharts(data).then(res => {
  353. siteData.value = res.data;
  354. let timeData = res.data && res.data.map(item => item.stName);
  355. let rainList = res.data && res.data.map(item => item.raintotol);
  356. if (timeData.length) {
  357. setTimeout(() => {
  358. initEchartsSiteRain(timeData, rainList);
  359. }, 1000);
  360. }
  361. });
  362. };
  363.  
  364. // 下载降雨报告单
  365. function downloadPdf() {
  366. showLoading.value = true;
  367. loadingText.value = '正在下载中...';
  368. const lableList = document.getElementsByClassName('pdf-details');
  369. pageToPDF(`${proxy.moment(rePortTime.value).format('YYYY年MM月DD日')}降雨结论报告`, document.querySelector('#rainReport'), lableList)
  370. .then(flag => {
  371. if (flag == 1) {
  372. showLoading.value = false;
  373. loadingText.value = '正在加载中...';
  374. ElMessage({ message: '下载成功', type: 'success', duration: 5 * 1000 });
  375. }
  376. })
  377. .catch(() => {
  378. showLoading.value = false;
  379. ElMessage({ message: '下载失败', type: 'error', duration: 5 * 1000 });
  380. });
  381. }
  382.  
  383. onMounted(() => {
  384. getDetailData(props.params);
  385. getRainStationCharts(props.params);
  386. bus.on('searchRainFX', params => {
  387. getDetailData(params);
  388. getRainStationCharts(params);
  389. });
  390. bus.on('downLoadRainFX', () => {
  391. downloadPdf();
  392. });
  393. });
  394. onBeforeUnmount(() => {
  395. bus.off('searchRainFX');
  396. bus.off('downLoadRainFX');
  397. });
  398. </script>
  399. <style lang="scss" scoped>
  400. @import '@/assets/styles/variables.module.scss';
  401. @import '@/assets/styles/rainReportDetail.scss';
  402. </style>