- <template>
- <!-- 降雨报告单详情 -->
- <!-- <el-button plain type="warning" @click="downloadPdf" style="margin: 10px 0px" :disabled="showLoading">下载</el-button> -->
- <div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
- <h1>开封市海绵城市雨情分析报告</h1>
- <h4>报告时间:{{ rePortTime }}</h4>
- <!-- 雨量站数据 -->
- <div v-for="item in raindata">
- <p class="title">【{{ item.stName }}】</p>
- <p class="content">
- 降雨时间段:<span>{{ item.rainStartTime }}</span> 开始至<span>{{ item.rainEndTime }}</span> 结束,总历时
- <span> {{ item.rainTodate }}; </span>
- </p>
- <p class="content">
- 日累计降雨量:<span>{{ item.rainTotol }} mm;</span>
- </p>
- <p class="content flex flex-r flex-justcontent-start">
- 降雨等级:<span><dict-tag :options="props.rainfallIntensity" :value="item.rainLevel" /></span>;
- </p>
- <p class="content">
- 最大小时降雨量:<span>{{ item.maxRainData }}mm/h</span> <span>({{ item.maxRainTimeStart }}-{{ item.maxRainTimeEnd }})</span>;
- </p>
- <div :id="`rain_chart_${item.stCode}`" class="chartOneBG rainChart"></div>
- </div>
- <!-- 所有雨量站数据 -->
- <p class="title">【降雨时空分布】</p>
- <div id="rain_chart" class="chartOneBG"></div>
- </div>
- </template>
-
- <script setup stName="降雨报告单详情">
- import bus from '@/bus';
- import { ElMessage } from 'element-plus';
- import * as echarts from 'echarts';
- import { pageToPDF } from '@/utils/exportPdf.js'; //导出下载PDF
- import { querySationdateByDay, queryRainStationCharts } from '@/api/zongHeDD.js';
-
- const props = defineProps({
- params: {
- type: Object,
- default: {},
- },
- rainfallIntensity: {
- type: Array,
- default: [],
- },
- });
- const { proxy } = getCurrentInstance();
- const search = ref({
- time: '',
- });
- const loadingText = ref('正在加载中...');
- //降雨等级
- const levelData = ref([
- {
- type: '小雨',
- '24Rail': '小于10.0',
- '12Rail': '小于5.0',
- },
- {
- type: '中雨',
- '24Rail': '10.0~24.9',
- '12Rail': '5.0~14.9',
- },
- {
- type: '大雨',
- '24Rail': '25.0~49.9',
- '12Rail': '25.0~49.9',
- },
- {
- type: '暴雨',
- '24Rail': '50.0~99.9',
- '12Rail': '30.0~69.9',
- },
- {
- type: '大暴雨',
- '24Rail': '100.0~249.0',
- '12Rail': '70.0~139.0',
- },
- {
- type: '特大暴雨',
- '24Rail': '250.0以上',
- '12Rail': '140.0以上',
- },
- ]);
- const revelLabel = {
- 1: '小雨',
- 2: '中雨',
- 3: '大雨',
- 4: '暴雨',
- 5: '大暴雨',
- 6: '特大暴雨',
- };
- //雨量站数据
- const raindatalist = ref([]);
- //管网数据
- const pipelinedatalist = ref([]);
- //易涝点数据
- const loggingdatalist = ref([]);
- //项目数据
- const projectdatalist = ref([]);
- const showLoading = ref(true);
- const detailData = ref({
- startTime: '',
- endTime: '',
- accumulate: '',
- });
- const rePortTime = ref('');
- //单个雨量站数据
- const raindata = ref([]);
- //所有雨量站数据
- const siteData = ref([]);
- //雨量站--降雨量
- const initEchartsRain = async datas => {
- for (var i = 0; i < datas.length; i++) {
- var chart2 = echarts.init(document.getElementById(`rain_chart_${datas[i]['stCode']}`));
- let xData = datas[i].rainTimeX.map(item => proxy.moment(item).format('HH:mm'));
- let yData = datas[i].rainY;
- var rainMaxNum = Math.max(...yData);
- var rainMinNum = Math.min(...yData);
- let option4 = {
- color: '#6881CD',
- // 显示暂无数据
- graphic: {
- type: 'text', // 类型:文本
- left: 'center',
- top: 'middle',
- silent: true, // 不响应事件
- invisible: true, // 有数据就隐藏
- style: {
- fill: '#c6c6c6',
- fontWeight: 'bold',
- text: '暂无数据',
- fontFamily: 'Microsoft YaHei',
- fontSize: '18px',
- },
- },
- tooltip: {
- trigger: 'axis',
- show: true,
- },
- title: {
- left: 'center',
- text: '',
- textStyle: {
- color: '#333', //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: {
- left: '3%',
- right: '3%',
- top: '15%',
- bottom: '3%',
- containLabel: true,
- },
- legend: {
- top: '8%',
- orient: 'horizontal', //horizontal
- left: 'center', //left ,center
- textStyle: {
- color: '#333',
- },
- data: [],
- },
- xAxis: {
- type: 'category',
- data: xData,
- axisLabel: {
- color: '#333',
- rotate: 90,
- },
- axisLine: {
- lineStyle: {
- color: '#066592',
- },
- },
- },
- yAxis: [
- {
- name: '降雨量(mm)',
- type: 'value',
- nameLocation: 'end', // 坐标轴名称显示位置
- nameGap: 10, // 坐标轴名称与轴线之间的距离
- nameTextStyle: {
- color: '#333', //字体颜色
- fontSize: 12, //字体大小
- align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
- padding: [0, 0, 0, 0],
- },
- axisLabel: {
- color: '#333',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- min: (Number(rainMinNum) * 0.8).toFixed(1),
- max: (Number(rainMaxNum) * 1.5).toFixed(1),
- },
- ],
- series: [{ name: '降雨量', type: 'bar', barWidth: 2, data: yData }],
- };
- if (xData.length > 0) {
- option4.graphic.invisible = true;
- } else {
- option4.graphic.invisible = false;
- }
- chart2.clear();
- chart2.setOption(option4);
- }
- };
- //所有雨量站数据
- const initEchartsSiteRain = async (timeData, rainList) => {
- var chart2 = echarts.init(document.getElementById(`rain_chart`));
- let xData = timeData;
- let yData = rainList;
- var rainMaxNum = Math.max(...yData);
- var rainMinNum = Math.min(...yData);
- let option4 = {
- color: '#6881CD',
- // 显示暂无数据
- graphic: {
- type: 'text', // 类型:文本
- left: 'center',
- top: 'middle',
- silent: true, // 不响应事件
- invisible: true, // 有数据就隐藏
- style: {
- fill: '#c6c6c6',
- fontWeight: 'bold',
- text: '暂无数据',
- fontFamily: 'Microsoft YaHei',
- fontSize: '18px',
- },
- },
- tooltip: {
- trigger: 'axis',
- show: true,
- formatter: function (params) {
- // params 是一个数组,数组中包含了多个要显示的数据的信息
- var result = '<div style="font-size:14px">' + search.value.time + '日' + params[0].axisValueLabel + '</div><div>';
- for (var i = 0, l = params.length; i < l; i++) {
- let data = siteData.value.filter(item => item.stName == params[i].axisValueLabel);
- 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>
- ${params[i].seriesName} : ${params[i].value}mm</div>
- <span style="display:inline-block;margin-right:5px;border-radius:10px;width:8px;height:8px;background-color:#6881CD"></span>
- 级别 :<span style="display:inline-block;margin-right:5px;border-radius:3px;width:35px;height:20px;text-align:center;">${
- revelLabel[data[0].rainLevle]
- }</span> <br/>
- `;
- }
- return result + '</div>';
- },
- },
- title: {
- left: 'center',
- text: '',
- textStyle: {
- color: '#333', //字体颜色
- fontSize: 16, //字体大小
- },
- },
- grid: {
- left: '3%',
- right: '3%',
- top: '15%',
- bottom: '3%',
- containLabel: true,
- },
- legend: {
- top: '8%',
- orient: 'horizontal', //horizontal
- left: 'center', //left ,center
- textStyle: {
- color: '#333',
- },
- data: [],
- },
- xAxis: {
- type: 'category',
- data: xData,
- axisLabel: {
- color: '#333',
- rotate: 0,
- },
- axisLine: {
- lineStyle: {
- color: '#066592',
- },
- },
- },
- yAxis: [
- {
- name: '降雨量(mm)',
- type: 'value',
- nameLocation: 'end', // 坐标轴名称显示位置
- nameGap: 10, // 坐标轴名称与轴线之间的距离
- nameTextStyle: {
- color: '#333', //字体颜色
- fontSize: 12, //字体大小
- align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
- padding: [0, 0, 0, 0],
- },
- axisLabel: {
- color: '#333',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- min: (Number(rainMinNum) * 0.8).toFixed(1),
- max: (Number(rainMaxNum) * 1.5).toFixed(1),
- },
- ],
- series: [{ name: '降雨量', type: 'bar', barWidth: 20, data: yData }],
- };
- if (xData.length > 0) {
- option4.graphic.invisible = true;
- } else {
- option4.graphic.invisible = false;
- }
- chart2.clear();
- chart2.setOption(option4);
- };
-
- //获取数据
- const getDetailData = params => {
- showLoading.value = true;
- let timeObj = {
- ...params,
- };
- rePortTime.value = params.dateTime;
- querySationdateByDay(timeObj).then(res => {
- raindata.value = res.data;
- setTimeout(() => {
- initEchartsRain(raindata.value);
- showLoading.value = false;
- }, 1000);
- });
- };
-
- //获取所有雨量站的降雨总和对比柱状图
- const getRainStationCharts = params => {
- let data = {
- dateTime: proxy.moment(params.dateTime).format('YYYY-MM-DD'),
- };
- queryRainStationCharts(data).then(res => {
- siteData.value = res.data;
- let timeData = res.data && res.data.map(item => item.stName);
- let rainList = res.data && res.data.map(item => item.raintotol);
- if (timeData.length) {
- setTimeout(() => {
- initEchartsSiteRain(timeData, rainList);
- }, 1000);
- }
- });
- };
-
- // 下载降雨报告单
- function downloadPdf() {
- showLoading.value = true;
- loadingText.value = '正在下载中...';
- const lableList = document.getElementsByClassName('pdf-details');
- pageToPDF(`${proxy.moment(rePortTime.value).format('YYYY年MM月DD日')}降雨结论报告`, document.querySelector('#rainReport'), lableList)
- .then(flag => {
- if (flag == 1) {
- showLoading.value = false;
- loadingText.value = '正在加载中...';
- ElMessage({ message: '下载成功', type: 'success', duration: 5 * 1000 });
- }
- })
- .catch(() => {
- showLoading.value = false;
- ElMessage({ message: '下载失败', type: 'error', duration: 5 * 1000 });
- });
- }
-
- onMounted(() => {
- getDetailData(props.params);
- getRainStationCharts(props.params);
- bus.on('searchRainFX', params => {
- getDetailData(params);
- getRainStationCharts(params);
- });
- bus.on('downLoadRainFX', () => {
- downloadPdf();
- });
- });
- onBeforeUnmount(() => {
- bus.off('searchRainFX');
- bus.off('downLoadRainFX');
- });
- </script>
- <style lang="scss" scoped>
- @import '@/assets/styles/variables.module.scss';
- @import '@/assets/styles/rainReportDetail.scss';
- </style>