- <template>
- <!-- 降雨报告 -->
- <div class="rainReportPage">
- <div class="partTitleHM">
- 降雨报告
- <el-button size="small" style="float: right; width: 70px; margin: 10px 60px 0px 0px" @click="dialogShowModal = true">
- 内涝模型
- </el-button>
- </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>
- <Vue3SeamlessScroll :list="dataList" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
- <div class="scrollCont flex" 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>
- </Vue3SeamlessScroll>
- </div>
- </div>
- <!-- 查看报告单 -->
- <el-dialog title="降雨报告单" v-model="dialogShowDetail" width="1150px" append-to-body>
- <ReportDetail v-if="dialogShowDetail" :rainId="rainId"></ReportDetail>
- </el-dialog>
- <!-- 内涝模型 -->
- <el-dialog title="内涝模型" v-model="dialogShowModal" width="1800px" append-to-body>
- <RiskDetail></RiskDetail>
- </el-dialog>
- </div>
- </template>
-
- <script setup>
- import { rainfallSessionInfoList } from '@/api/publicService/index';
-
- import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
- import ReportDetail from '@/views/floodSys/floodYP/historyEventDetail.vue'; //查看报告单
- import RiskDetail from '@/views/floodSys/floodYP/riskAsses.vue'; //内涝模型
-
- const { proxy } = getCurrentInstance();
- const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度 字典数据
- const dialogShowDetail = ref(false);
- const dialogShowModal = ref(false);
- const rainId = ref('');
-
- const dataList = ref([]);
-
- // 获取降雨报告数据
- async function getJYData() {
- let res = await rainfallSessionInfoList();
- if (res && res.code == 200) {
- dataList.value = res.data;
- }
- }
-
- // 查看报告
- function checkReport(item) {
- rainId.value = item.id;
- dialogShowDetail.value = true;
- }
-
- onMounted(() => {
- getJYData();
- });
- </script>
-
- <style lang="scss">
- .rainReportPage {
- width: 100%;
- .scrollMapHM {
- p {
- width: 18%;
- }
- .reports {
- color: #3afff8;
- }
- }
- }
- </style>