<template>
<el-form :model="queryParams" ref="queryRef" :rules="Formrules" :inline="true" label-width="120px">
<el-form-item label="雨量站" prop="rainData">
<el-select
filterable
v-model="queryParams.rainData"
multiple
:clearable="false"
collapse-tags
placeholder="雨量站"
popper-class="dialogPopperClass"
style="width: 300px"
>
<!-- <template #header>
<el-checkbox v-model="rainCheckAll" :indeterminate="rainIndeterminate" @change="handleRainCheckAll">
<span style="font-size: 16px; color: #ffffff">全选</span>
</el-checkbox>
</template> -->
<!-- <el-checkbox v-model="rainCheckAll" :indeterminate="rainIndeterminate" @change="handleRainCheckAll">全选</el-checkbox> -->
<el-option v-for="item in rainList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
</el-select>
</el-form-item>
<el-form-item label="管网站" prop="pipelineData">
<el-tree-select
v-model="queryParams.pipelineData"
:data="pipelineList"
multiple
collapse-tags
:default-checked-keys="pipelineDefaultKeys"
show-checkbox
popper-class="dialogPopperClass"
node-key="stCode"
:render-after-expand="false"
:props="{ label: 'stName', value: 'stCode' }"
clearable
style="width: 280px"
/>
</el-form-item>
<!-- <el-form-item label="积水点站" prop="waterloggingData">
<el-select
filterable
v-model="queryParams.waterloggingData"
:clearable="false"
multiple
collapse-tags
placeholder="积水点站"
popper-class="dialogPopperClass"
style="width: 400px"
>
<template #header>
<el-checkbox v-model="waterloggingCheckAll" :indeterminate="waterloggingIndeterminate" @change="handleWaterloggingCheckAll">
<span style="font-size: 16px; color: #ffffff">全选</span>
</el-checkbox>
</template>
<el-option v-for="item in waterloggingList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
</el-select>
</el-form-item> -->
<el-form-item label="项目站点" prop="projectData">
<el-tree-select
v-model="queryParams.projectData"
:data="projectList"
multiple
collapse-tags
:default-checked-keys="projectDefaultKeys"
show-checkbox
popper-class="dialogPopperClass"
node-key="stCode"
:render-after-expand="false"
:props="{ label: 'stName', value: 'stCode' }"
clearable
style="width: 400px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
<el-button plain type="warning" icon="Download" @click="downloadPdf" style="margin-left: 10px">下载</el-button>
</el-form-item>
</el-form>
<div class="publicContainer reportDetail" v-loading="showLoading" :element-loading-text="loadingText" id="rainReport">
<h1>开封市海绵城市监测数据分析报告</h1>
<h4>报告时间：{{ timeA }}</h4>
<div class="rain_content">
<!-- 降雨情况说明 -->
<p class="title">1.降雨情况说明</p>
<p class="small_title">1.1.降雨情况综述</p>
<p class="content">
降雨等级: {{ selectDictLabel(rainfall_intensity, rainResult.rainLevel) }}。日累计降雨量在{{ rainResult.minRainfall }}-{{
rainResult.maxRainfall
}}mm/24h之间。{{ rainResult.minRainStation }}日累计降雨量最小：{{ rainResult.minRainfall }}mm/24h；{{
rainResult.maxRainStation
}}日累计降雨量最大：{{ rainResult.maxRainfall }}mm/24h，详见下表：
</p>
<p class="small_tip">各监测站点降雨情况统计表</p>
<el-table :data="rainResult['rainTable']" class="detailDataTable" style="width: 100%; margin: 0 auto">
<el-table-column label="序号" type="index" class="pdf-details" aline="center" width="60px" />
<el-table-column label="雨量站名称" prop="stName" class="pdf-details" aline="center" width="150px" />
<el-table-column label="日累计降雨量（mm/24h ）" prop="rainTotol" class="pdf-details" aline="center" />
<el-table-column label="小时最大降雨量（mm/h）" prop="maxRainData" class="pdf-details" aline="center" />
<el-table-column label="小时最大降雨时段" prop="maxRainStartTime" class="pdf-details" aline="center">
<template #default="{ row }">
<span>{{ row.maxRainStartTime }}-{{ row.maxRainEndTime }}</span>
</template>
</el-table-column>
<el-table-column label="降雨总历时" prop="rainTodate" class="pdf-details" aline="center" width="130px" />
</el-table>
<div class="img_content flex flex-v flex-justcontent-start flex-align-start" v-for="file in rainResult['wholeFiles']">
<img :src="file.url" class="img_box" />
</div>
<p class="small_tip">降雨强度分布图</p>
<!-- 雨量站数据 -->
<p class="small_title">1.2.各站点降雨情况</p>
<!-- 雨量站数据 -->
<div v-for="(item, index) in raindatalist">
<p class="small_title">1.2.{{ Number(index) + 1 }}.{{ item.stName }}</p>
<p class="small_title">1.2.{{ Number(index) + 1 }}.1监测点位置</p>
<div class="img_content" v-for="file in item.stationFiles">
<img :src="file.url" class="img_box" />
<p class="small_tip">{{ item.stName }}监测点位置示意图</p>
</div>
<p class="small_title">1.2.{{ Number(index) + 1 }}.2雨量详情</p>
<p class="content circle">降雨时间段{{ item.rainStartTime }}开始至{{ item.rainEndTime }}结束，总历时{{ item.rainTodate }};</p>
<p class="content circle">日累计降雨量{{ item.rainTotol }}mm/24h;</p>
<p class="content circle">降雨等级: {{ selectDictLabel(rainfall_intensity, item.rainLevel) }};</p>
<p class="content circle">最大小时降雨量：{{ item.maxRainData }}mm/h（{{ item.maxRainTimeStart }}-{{ item.maxRainTimeEnd }}）。</p>
<!-- echarts降雨趋势图 -->
<div :id="`chartOneBG_${item.stCode}`" class="chartOneBG rainChart"></div>
<p class="small_tip">{{ item.stationName }}降雨趋势图</p>
</div>
</div>
<!-- 管网数据 -->
<div class="pipeline_content">
<p class="title">2.排水设施运行状态分析</p>
<div class="img_content flex flex-v flex-justcontent-start flex-align-start">
<img :src="item.url" class="img_box" v-for="item in pipePicCCLFile" />
</div>
<div v-for="(item, index) in pipeResult['totPipeAreasInfoList']">
<p class="small_title">2.{{ Number(index) + 1 }}.{{ item.areasName }}</p>
<p class="small_title">2.1.{{ Number(index) + 1 }}.{{ item.areasName }}排水设施运行状态综述</p>
<p class="small_title">2.1.1.{{ Number(index) + 1 }}.管网部分</p>
<p class="content">外水汇入点位：{{ item.pipebufen.wshrCount }}处，{{ item.pipebufen.wshrStr }}</p>
<p class="content">运行负荷过大点位：{{ item.pipebufen.yxfhdCount }}处，{{ item.pipebufen.yxfhdStr }}</p>
<p class="content">行泄不畅点位：{{ item.pipebufen.xxbcCount }}处，{{ item.pipebufen.xxbcStr }}</p>
<p class="content">流速过缓点位：{{ item.pipebufen.lshmCount }}处，{{ item.pipebufen.lshmStr }}</p>
<p class="small_tip">管网运行状态统计表</p>
<el-table :data="item.pipebufen.pipeTableInfoList" class="detailDataTable" style="width: 100%; margin: 0 auto">
<el-table-column label="序号" type="index" class="pdf-details" aline="center" />
<el-table-column label="监测点位" prop="stName" class="pdf-details" aline="center" />
<el-table-column label="管径" prop="pipeDiameter" class="pdf-details" aline="center" />
<el-table-column label="24h累计排水量（m³）" prop="sblSum24" class="pdf-details" aline="center" />
<el-table-column label="降雨时段累计排水量（m³）" prop="rainSumDistance" class="pdf-details" aline="center" />
<el-table-column label="降雨时段平均排水量（m³）" prop="rainAvgDistance" class="pdf-details" aline="center" />
<el-table-column label="最大水深（m）" prop="maxZ" class="pdf-details" aline="center" />
<el-table-column label="平均流速(m/s)" prop="avgFlow" class="pdf-details" aline="center" />
<el-table-column label="最大流速（m/s）" prop="maxFlow" class="pdf-details" aline="center" />
<el-table-column label="旱天水位占比" prop="clearDayRate" class="pdf-details" aline="center" />
</el-table>
<!-- <p class="small_title">2.1.2.仓程路雨水泵站设备运行日志</p>
<p class="small_tip">表 3-2仓程路雨水泵站设备运行日志</p>
<el-table :data="levelData" class="detailDataTable" style="width:100%;margin:0 auto">
<el-table-column label="序号" type="index" class="pdf-details" aline="center" />
<el-table-column label="1#泵" prop="type" class="pdf-details" aline="center" />
<el-table-column label="2#泵" prop="24Rail" class="pdf-details" aline="center" />
<el-table-column label="3#泵" prop="12Rail" class="pdf-details" aline="center" />
<el-table-column label="4#泵" prop="12Rail" class="pdf-details" aline="center" />
</el-table>
<p class="content">
仓程路问题点共计十处，主要问题是运行负荷过大、行泄不畅等问题，问题分布示意图详见图3-1：
</p>
<img src="@/assets/images/mewOneMap/haiMianJianShe/demo.jpg" class="img_box" />
<p class="small_tip">图 3-1仓程路片区问题分布示意图</p> -->
<p class="small_title">2.2.2.典型问题说明</p>
<div v-for="(child, index1) in item['typicalProblems']['dxwtList']">
<p class="small_title">2.2.2.{{ Number(index1) + 1 }}.{{ child.stName }}问题说明</p>
<!-- echarts 降雨量、流量 -->
<div :id="`JYLLChartOneBG_${item.areasCode}_${child.stCode}`" class="chartOneBG"></div>
<!-- <p class="small_tip">{{ item.pipelineFlowStartTime }}至{{ item.pipelineFlowEndTime }}降雨量-流量变化过程图</p> -->
<p class="small_tip">管网、流量情况分布图</p>
<!-- echarts 水位、流量 -->
<div :id="`SWLLChartOneBG_${item.areasCode}_${child.stCode}`" class="chartOneBG"></div>
<!-- <p class="small_tip">{{ item.pipelineTimeStart }}至{{ item.pipelineTimeEnd }}间水位-流量变化过程图</p> -->
<p class="small_tip">管网流量、水位变化趋势图</p>
<p class="content">24h累计排水量：{{ child.sblSum24 }}m³</p>
<p class="content">降雨时段累计排水量：{{ child.rainSumDistance }}m³</p>
<p class="content">平均流速:{{ child.avgFlow }}m/s</p>
<!-- <p class="content">退水时长：{{ child.diffInHours }}h</p> -->
<p class="content">管网问题：{{ child.questionDesc }}</p>
<!-- <p class="content">此次降雨事件降雨量{{ item.pipelineRain }}mm，属于{{ item.pipelinerainlevel }}事件。从{{
item.pipelineFlowStartTime }}开始，{{ item.pipelineFlowEndTime }}结束。监测期间发生产流。监测时间段内的平均流量
为{{ item.pipelineavgflow }}m³/h，累计排水量为{{ item.pipelinedrainage }}m³。</p> -->
</div>
</div>
</div>
<!-- 项目数据 -->
<div class="project_content">
<p class="title">3.海绵项目及设施达标情况分析</p>
<p class="small_title">3.1.项目</p>
<p class="small_title">3.1.1.项目整体情况</p>
<p class="content">监测项目目前存在管道淤积、雨污分流不彻底、安装点位导致数据不全等问题，具体分析情况如表5-1：</p>
<p class="small_tip">各个监测项目达标情况分析表</p>
<el-table :data="projectJlDtoList" class="detailDataTable" style="width: 100%; margin: 0 auto">
<el-table-column label="序号" type="index" class="pdf-details" aline="center" />
<el-table-column label="项目名称" prop="projectName" class="pdf-details" aline="center" />
<el-table-column label="设计降雨量（mm）" prop="designRain" class="pdf-details" aline="center" />
<el-table-column label="实际控制雨量（mm）" prop="trueRain" class="pdf-details" aline="center">
<template #default="{ row }">
<span v-if="row.trueRain == '异常'">雨前出流</span>
<span v-else>{{ row.trueRain }}mm </span>
</template>
</el-table-column>
<el-table-column label="年径流总量控制率设计值（%）" prop="ghJlzlkzl" class="pdf-details" aline="center" />
<el-table-column label="典型降雨径流总量控制率实际值（%）" prop="jlzlkzl" class="pdf-details" aline="center" />
<el-table-column label="分析结果" prop="conclusion" class="pdf-details" aline="center" />
</el-table>
<p class="small_title">3.1.2.数据异常项目分析</p>
<div v-for="(item, index) in projectdatalist">
<p class="small_title">3.{{ Number(index) + 1 }}.3{{ item.stationName }}</p>
<p class="content">为了解{{ item.stationName }}海绵改造项目建设成效，对{{ item.stationName }}进行监测，监测点位位置如图5-1所示：</p>
<div class="img_content" v-for="file in item.fileList">
<img :src="file.url" class="img_box" />
</div>
<p class="small_tip">{{ item.stationName }}监测站点安装位置示意图</p>
<p class="content">{{ item.stationName }}设计降雨量{{ item.designRain }}mm，降雨期间基本未出流，详见表3-2：</p>
<p class="small_tip">{{ item.stationName }}监测站点安装位置示意图</p>
<div class="table_content_box">
<div class="header">基础信息</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">监测时间段</div>
<div class="basic_val flex flex-1">{{ item.projectRainStartTime }}至{{ item.projectRainEndTime }}</div>
</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">降雨总量（mm）</div>
<div class="basic_val flex flex-1">{{ item.projectRain }}</div>
</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">项目占地面积（㎡）</div>
<div class="basic_val flex flex-1">{{ item.projectArea }}</div>
</div>
<div class="header">水质水量监测</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">项目外排总径流体积（m³）</div>
<div class="basic_val flex flex-1">{{ item.xmwpzjjtj }}</div>
</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">项目外排总SS负荷量（g）</div>
<div class="basic_val flex flex-1">{{ item.xmwpzssfhl }}</div>
</div>
<div class="header">设计指标</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">设计降雨量</div>
<div class="basic_val flex flex-1">{{ item.designRain }}</div>
</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">径流总量控制率（%）</div>
<div class="basic_val flex flex-1">{{ item.ghJlzlkzl }}</div>
</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">径流污染削减率（%）</div>
<div class="basic_val flex flex-1">{{ item.ghJlwrxjl }}</div>
</div>
<div class="header">效果评价</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">实际控制雨量（mm）</div>
<div class="basic_val flex flex-1">{{ item.trueRain }}</div>
</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">径流总量控制率（%）</div>
<div class="basic_val flex flex-1">{{ item.jlzlkzl }}</div>
</div>
<div class="basic_detail flex flex-r">
<div class="basic_label flex flex-1">径流污染削减率（%）</div>
<div class="basic_val flex flex-1">{{ item.jlwrxjl }}</div>
</div>
</div>
<p class="content">详见下图：</p>
<!-- echarts降雨量、流量 -->
<div :id="`projectJYLLLChartOneBG_${item.stationCode}`" class="chartOneBG"></div>
<!-- echarts 流量、悬浮物固体浓度 -->
<div :id="`projectLLXFWChartOneBG_${item.stationCode}`" class="chartOneBG"></div>
<!-- echarts水位、流量 -->
<div :id="`projectSWLLChartOneBG_${item.stationCode}`" class="chartOneBG"></div>
<p class="small_tip">{{ item.stationName }}降雨量/流量、流量/SS、水位/SS变化过程图</p>
<p class="content">现场排查情况见图5-3：</p>
<div class="img_content" v-for="file in item['sceneFileList']">
<img :src="file.url" class="img_box" />
</div>
<p class="small_tip">总出口积水情况现场验证</p>
</div>
</div>
<p class="title">4.总结</p>
<p class="content">
此次降雨，监测到降雨等级为{{ selectDictLabel(rainfall_intensity, summarizeResult['rainLevel']) }}，发现路面积水点共计{{
summarizeResult['pondingNumber'] || '--'
}}处：排水设施问题集中在管网流速过缓（水力坡度问题）、外水汇入、行泄不畅、水力停留时间过长等问题南塬来水在本次降雨情况下，对城区影响不大，海绵项目建设在补齐监测点位的情况下，需要加快海绵项目建设进度，加强海绵项目运维运维。
</p>
</div>
</template>
<script setup>
import bus from '@/bus';
import { ElNotification, ElMessageBox, ElMessage, ElLoading } from 'element-plus';
import chartOption from './riskChart';
import { pageToPDF } from '@/utils/exportPdf.js'; //导出下载PDF
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance();
const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度 字典数据
import { siteReportRelationList, siteDataTree, getStationList, customizedRainReportDataNew } from '@/api/zongHeDD.js';
const rainCheckAll = ref(false);
const rainIndeterminate = ref(false);
const showLoading = ref(false);
const loadingText = ref('正在加载中...');
const rainList = ref([]);
const projectList = ref([]);
const pipelineList = ref([]);
//运行图数据
const pipePicCCLFile = ref([]);
const projectDefaultKeys = ref([]); //默认选中的项目点
const pipelineDefaultKeys = ref([]); //默认选中的管网点
//雨量站数据
const rainResult = ref({});
const raindatalist = ref([]);
//项目数据
const projectResult = ref({});
const projectJlDtoList = ref([]);
const projectdatalist = ref([]);
//管网数据
const pipeResult = ref({});
const pipelinedatalist = ref([]);
//总结
const summarizeResult = ref({});
const queryParams = ref({
pipelineData: [],
waterloggingData: [],
rainData: [],
projectData: [],
});
const Formrules = reactive({
pipelineData: [{ required: true, message: '请至少选择一个管网站', trigger: ['change'] }],
waterloggingData: [{ required: true, message: '请至少选择一个积水点站', trigger: ['change'] }],
rainData: [{ required: true, message: '请至少选择一个雨量站', trigger: ['change'] }],
projectData: [{ required: true, message: '请至少选择一个项目站点', trigger: ['change'] }],
});
//重置
const resetQuery = () => {
queryParams.value = {
pipelineData: pipelineDefaultKeys.value,
// waterloggingData: [waterloggingList.value[0].stCode],
rainData: [rainList.value[0].stCode],
projectData: projectDefaultKeys.value,
};
handleQuery();
};
// 雨量站全选操作
const handleRainCheckAll = val => {
rainIndeterminate.value = false;
if (val) {
queryParams.value.rainData = rainList.value.map(_ => _.stCode);
} else {
queryParams.value.rainData = [];
}
};
const getAllList = async () => {
let arry = ['pipeline', 'facilities'];
//siteDataTree
let requestAll = arry.map(key => siteDataTree({ siteType: key }));
requestAll.push(siteReportRelationList({ siteType: 'waterlogging' }));
requestAll.push(getStationList({ monitorTargetType: 'rainfall' }));
let res = await Promise.all(requestAll);
pipelineList.value = res[0].data;
pipelineDefaultKeys.value =
pipelineList.value && pipelineList.value[0]['children'] && pipelineList.value[0]['children'].map(item => item.stCode);
console.log('pipelineDefaultKeys.value', pipelineDefaultKeys.value);
projectList.value = res[1].data;
projectDefaultKeys.value =
projectList.value && projectList.value[0]['children'] && projectList.value[0]['children'].map(item => item.stCode);
// waterloggingList.value = res[2].data;
rainList.value = res[3].data;
queryParams.value = {
pipelineData: pipelineDefaultKeys.value,
// waterloggingData: [waterloggingList.value[0].stCode],
rainData: [rainList.value[0].stCode],
projectData: projectDefaultKeys.value,
};
console.log(queryParams.value.rainData, 'queryParams.value');
setTimeout(() => {
handleQuery();
}, 200);
};
//搜索pdf
const handleQuery = () => {
showLoading.value = true;
let timeObj = {
startTime: proxy.moment(localStorage.getItem('setRainDateKF')).format('YYYY-MM-DD') + ' 08:00:00',
endTime: proxy.moment(localStorage.getItem('setRainDateKF')).add(1, 'days').format('YYYY-MM-DD') + ' 08:00:00',
...queryParams.value,
// endTime: '2024-11-25 07:55:00',
// pipelineData: ['0913000057'],
// projectData: ['0913000021'],
// rainData: ['0913000001'],
// startTime: '2024-11-24 08:00:00',
// waterloggingData: [],
};
customizedRainReportDataNew(timeObj).then(res => {
// customizedRainReportDataNew({ startTime: '2024-08-25 08:00:00', endTime: '2024-08-26 08:00:00' }).then(res => {
// detailData.value = res.data;
rainResult.value = res.data.rainResult;
raindatalist.value = rainResult.value['rainList'];
pipeResult.value = res.data.pipeResult;
pipePicCCLFile.value = res.data.pipePicCCLFile;
projectJlDtoList.value = res.data.projectJlDtoList;
pipelinedatalist.value = res.data.pipeResult.totPipeAreasInfoList;
// waterLoggingResultDto.value = res.data.waterLoggingResultDto
// loggingdatalist.value = waterLoggingResultDto.value['waterloggingStationList']
projectResult.value = res.data.projectResult;
projectdatalist.value = projectResult.value['projectList'];
console.log(projectdatalist.value, ' projectdatalist.value');
summarizeResult.value = res.data.summarizeResult;
nextTick(() => {
initEchartsZB(raindatalist.value);
initEchartsZB2(pipelinedatalist.value);
initEchartsZB3(pipelinedatalist.value);
// initEchartsZB4(loggingdatalist.value)
intProjectJYLLLChart(projectdatalist.value);
intProjectLLXFWChart(projectdatalist.value);
intProjectSWLLChart(projectdatalist.value);
});
showLoading.value = false;
});
};
//雨量站--降雨量
const initEchartsZB = async datas => {
for (var i = 0; i < datas.length; i++) {
var chart = echarts.init(document.getElementById(`chartOneBG_${datas[i]['stCode']}`));
let xData = datas[i].rainTimeX.map(item => proxy.moment(item).format('HH:mm'));
let yData = datas[i].rainY;
var maxNum = Math.max(...yData);
var minNum = Math.min(...yData);
console.log('minNum', minNum);
chartOption.option4.xAxis.data = xData;
chartOption.option4.yAxis[0].min = (Number(minNum) * 0.8).toFixed(1);
chartOption.option4.yAxis[0].max = (Number(maxNum) * 1.5).toFixed(1);
chartOption.option4.series[0].data = yData;
if (xData.length > 0) {
chartOption.option4.graphic.invisible = true;
} else {
chartOption.option4.graphic.invisible = false;
}
chart.clear();
chart.setOption(chartOption.option4);
}
};
//项目----降雨量、流量
const intProjectJYLLLChart = async datas => {
for (var i = 0; i < datas.length; i++) {
var chart5 = echarts.init(document.getElementById(`projectJYLLLChartOneBG_${datas[i]['stationCode']}`));
let xData = datas[i].projectTimeX.map(item => proxy.moment(item).format('HH:mm'));
let projectRainY = datas[i].projectRainY;
let projectFlowY = datas[i].projectFlowY;
var flowMaxNum = Math.max(...projectFlowY);
var flowMinNum = Math.min(...projectFlowY);
var rainMaxNum = Math.max(...projectRainY);
var rainMinNum = Math.min(...projectRainY);
chartOption.option5.yAxis[0].min = (Number(flowMinNum) * 0.8).toFixed(1);
chartOption.option5.yAxis[0].max = (Number(flowMaxNum) * 1.5).toFixed(1);
chartOption.option5.yAxis[1].min = (Number(rainMinNum) * 0.8).toFixed(1);
chartOption.option5.yAxis[1].max = (Number(rainMaxNum) * 1.5).toFixed(1);
chartOption.option5.xAxis.data = xData;
chartOption.option5.xAxis.data = xData;
chartOption.option5.series[0].data = projectFlowY;
chartOption.option5.series[1].data = projectRainY;
if (xData.length > 0) {
chartOption.option5.graphic.invisible = true;
} else {
chartOption.option5.graphic.invisible = false;
}
chart5.clear();
chart5.setOption(chartOption.option5);
}
};
//项目---流量、悬浮物
const intProjectLLXFWChart = async datas => {
for (var i = 0; i < datas.length; i++) {
var chart6 = echarts.init(document.getElementById(`projectLLXFWChartOneBG_${datas[i]['stationCode']}`));
let xData = datas[i].projectTimeX.map(item => proxy.moment(item).format('HH:mm'));
let projectFlowY = datas[i].projectFlowY;
let projectSSY = datas[i].projectSSY;
var flowMaxNum = Math.max(...projectFlowY);
var flowMinNum = Math.min(...projectFlowY);
var SSYMaxNum = Math.max(...projectSSY);
var SSYMinNum = Math.min(...projectSSY);
chartOption.option8.yAxis[0].min = (Number(flowMinNum) * 0.8).toFixed(1);
chartOption.option8.yAxis[0].max = (Number(flowMaxNum) * 1.5).toFixed(1);
chartOption.option8.yAxis[1].min = (Number(SSYMinNum) * 0.8).toFixed(1);
chartOption.option8.yAxis[1].max = (Number(SSYMaxNum) * 1.5).toFixed(1);
chartOption.option8.xAxis[0].data = xData;
chartOption.option8.series[0].data = projectFlowY;
chartOption.option8.series[1].data = projectSSY;
if (xData.length > 0) {
chartOption.option8.graphic.invisible = true;
} else {
chartOption.option8.graphic.invisible = false;
}
chart6.clear();
chart6.setOption(chartOption.option8);
}
};
//项目---水位、流量
const intProjectSWLLChart = async datas => {
for (var i = 0; i < datas.length; i++) {
var chart7 = echarts.init(document.getElementById(`projectSWLLChartOneBG_${datas[i]['stationCode']}`));
let xData = datas[i].projectTimeX.map(item => proxy.moment(item).format('HH:mm'));
let projectFlowY = datas[i].projectFlowY;
let projectWaterlevelY = datas[i].projectWaterlevelY;
var levelMaxNum = Math.max(...projectWaterlevelY);
var levelMinNum = Math.min(...projectWaterlevelY);
var flowMaxNum = Math.max(...projectFlowY);
var flowMinNum = Math.min(...projectFlowY);
chartOption.option6.yAxis[0].min = (Number(flowMinNum) * 0.8).toFixed(1);
chartOption.option6.yAxis[0].max = (Number(flowMaxNum) * 1.5).toFixed(1);
chartOption.option6.yAxis[1].min = (Number(levelMinNum) * 0.8).toFixed(1);
chartOption.option6.yAxis[1].max = (Number(levelMaxNum) * 1.5).toFixed(1);
chartOption.option6.xAxis[0].data = xData;
chartOption.option6.series[0].data = projectFlowY;
chartOption.option6.series[1].data = projectWaterlevelY;
if (xData.length > 0) {
chartOption.option6.graphic.invisible = true;
} else {
chartOption.option6.graphic.invisible = false;
}
chart7.clear();
chart7.setOption(chartOption.option6);
}
};
//雨量站--降雨量、流量
const initEchartsZB2 = async datas => {
datas.forEach((item, index) => {
if (item.typicalProblems.dxwtList.length) {
let dxwtList = item.typicalProblems.dxwtList;
dxwtList.forEach((child, i) => {
let stCodeStr = `${item.areasCode}_${child.stCode}`;
var chart2 = echarts.init(document.getElementById(`JYLLChartOneBG_${stCodeStr}`));
let xData = child.dataRainX.map(item => proxy.moment(item).format('HH:mm'));
let pipelineRainY = child.dataRainY;
let pipelineFlowY = child.dataSbl1Y;
var rainMaxNum = Math.max(...pipelineRainY);
var rainMinNum = Math.min(...pipelineRainY);
var flowMaxNum = Math.max(...pipelineFlowY);
var flowMinNum = Math.min(...pipelineFlowY);
chartOption.option5.xAxis.data = xData;
chartOption.option5.yAxis[0].min = (Number(flowMinNum) * 0.8).toFixed(1);
chartOption.option5.yAxis[0].max = (Number(flowMaxNum) * 1.5).toFixed(1);
chartOption.option5.yAxis[1].min = (Number(rainMinNum) * 0.8).toFixed(1);
chartOption.option5.yAxis[1].max = (Number(rainMaxNum) * 1.5).toFixed(1);
chartOption.option5.series[0].data = pipelineFlowY;
chartOption.option5.series[1].data = pipelineRainY;
if (xData.length > 0) {
chartOption.option5.graphic.invisible = true;
} else {
chartOption.option5.graphic.invisible = false;
}
chart2.clear();
chart2.setOption(chartOption.option5);
});
}
});
};
//雨量站--水位、流量
const initEchartsZB3 = async datas => {
datas.forEach((item, index) => {
if (item.typicalProblems.dxwtList.length) {
let dxwtList = item.typicalProblems.dxwtList;
dxwtList.forEach((child, i) => {
let stCodeStr = `${item.areasCode}_${child.stCode}`;
var chart3 = echarts.init(document.getElementById(`SWLLChartOneBG_${stCodeStr}`));
let xData = child.dataRainX.map(item => proxy.moment(item).format('HH:mm'));
let pipelineWaterlevelY = child.dataZY;
let pipelineFlowY = child.dataSbl1Y;
var levelMaxNum = Math.max(...pipelineWaterlevelY);
var levelMinNum = Math.min(...pipelineWaterlevelY);
var flowMaxNum = Math.max(...pipelineFlowY);
var flowMinNum = Math.min(...pipelineFlowY);
chartOption.option6.yAxis[0].min = (Number(flowMinNum) * 0.8).toFixed(1);
chartOption.option6.yAxis[0].max = (Number(flowMaxNum) * 1.5).toFixed(1);
chartOption.option6.yAxis[1].min = (Number(levelMinNum) * 0.8).toFixed(1);
chartOption.option6.yAxis[1].max = (Number(levelMaxNum) * 1.5).toFixed(1);
chartOption.option6.xAxis[0].data = xData;
chartOption.option6.series[0].data = pipelineFlowY;
chartOption.option6.series[1].data = pipelineWaterlevelY;
if (xData.length > 0) {
chartOption.option6.graphic.invisible = true;
} else {
chartOption.option6.graphic.invisible = false;
}
chart3.clear();
chart3.setOption(chartOption.option6);
});
}
});
};
//下载pdf
const downloadPdf = () => {
showLoading.value = true;
loadingText.value = '正在下载中...';
const lableList = document.getElementsByClassName('pdf-details');
pageToPDF(`${proxy.moment(timeA.value).format('YYYY年')}降雨结论报告`, 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 });
});
};
watch(
queryParams.value.rainData,
val => {
console.log(val, 'val');
if (val.length === 0) {
rainCheckAll.value = false;
rainIndeterminate.value = false;
} else if (val.length === rainList.value.length) {
rainCheckAll.value = true;
rainIndeterminate.value = false;
} else {
rainIndeterminate.value = true;
}
},
{
// deep: true,
// immediate: true,
}
);
const timeA = ref();
onMounted(() => {
getAllList();
timeA.value = localStorage.getItem('setRainDateKF');
});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
@import '@/assets/styles/rainReportDetail.scss';
</style>
