<template> <!-- 降雨报告 --> <div class="rainReportPage"> <div class="partTitleHM"> 降雨报告 <el-select filterable clearable v-model="timeIndex" placeholder="请选择日期" @change="checkTime" @clear="getJYData" size="small" style="margin: 10px 10px 0px 0px; width: 160px; float: right" > <el-option v-for="item in allList" :key="item.id" :label="item.startTime" :value="item.id" /> </el-select> </div> <div class="partContHM"> <div class="scrollMapHM"> <div class="scrollTitle flex"> <p style="width: 108px">开始时间</p> <p>结束时间</p> <p>雨强</p> <p>累计降雨量</p> <p>操作</p> </div> <div class="scrollContent"> <div class="scrollCont flex flex-justcontent-spacebetween" v-for="item in dataList" :key="item.id"> <p class="ellipsis" :title="item.startTime" style="width: 108px">{{ item.startTime }}</p> <p class="ellipsis" :title="item.endTime">{{ item.endTime }}</p> <p class="ellipsis"> <dict-tag :options="rainfall_intensity" :value="String(item.rainIntensity)" /> </p> <p class="ellipsis">{{ item.accumulate }}mm</p> <p class="ellipsis reports" @click="checkReport(item)">查看报告</p> </div> </div> </div> </div> <!-- 查看报告单 --> <el-dialog title="降雨报告单" v-model="dialogShowDetail" width="1150px" append-to-body> <ReportDetail v-if="dialogShowDetail" :rainId="rainId"></ReportDetail> </el-dialog> </div> </template> <script setup> import { rainfallSessionInfoList } from '@/api/publicService/index'; import ReportDetail from '@/views/floodSys/floodYP/historyEventDetail.vue'; //查看报告单 const { proxy } = getCurrentInstance(); const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度 字典数据 const dialogShowDetail = ref(false); const rainId = ref(''); const dataList = ref([]); const allList = ref([]); const timeIndex = ref(''); // 获取降雨报告数据 async function getJYData() { let res = await rainfallSessionInfoList(); if (res && res.code == 200) { allList.value = res.data; dataList.value = allList.value; } } // 查看报告 function checkReport(item) { rainId.value = item.id; dialogShowDetail.value = true; } // 点击日期选择 async function checkTime() { dataList.value = allList.value.filter(item => item.id == timeIndex.value); } onMounted(() => { getJYData(); }); </script> <style lang="scss"> .rainReportPage { width: 100%; .scrollMapHM { height: calc(100vh - 500px); .scrollContent { height: 90%; overflow: auto; } p { width: 18%; } .reports { color: #3afff8; } } } </style>