Newer
Older
KaiFengPC / src / views / sponeScreen / waterFlood / rainReport.vue
@zhangdeliang zhangdeliang on 25 Oct 2 KB update
  1. <template>
  2. <!-- 降雨报告 -->
  3. <div class="rainReportPage">
  4. <div class="partTitleHM">
  5. 降雨报告
  6. <el-button size="small" style="float: right; width: 70px; margin: 10px 60px 0px 0px" @click="dialogShowModal = true">
  7. 内涝模型
  8. </el-button>
  9. </div>
  10. <div class="partContHM">
  11. <div class="scrollMapHM">
  12. <div class="scrollTitle flex">
  13. <p style="width: 108px">开始时间</p>
  14. <p>结束时间</p>
  15. <p>雨强</p>
  16. <p>累计降雨量</p>
  17. <p>操作</p>
  18. </div>
  19. <Vue3SeamlessScroll :list="dataList" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
  20. <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
  21. <p class="ellipsis" :title="item.startTime" style="width: 108px">{{ item.startTime }}</p>
  22. <p class="ellipsis" :title="item.endTime">{{ item.endTime }}</p>
  23. <p class="ellipsis">
  24. <dict-tag :options="rainfall_intensity" :value="String(item.rainIntensity)" />
  25. </p>
  26. <p class="ellipsis">{{ item.accumulate }}mm</p>
  27. <p class="ellipsis reports" @click="checkReport(item)">查看报告</p>
  28. </div>
  29. </Vue3SeamlessScroll>
  30. </div>
  31. </div>
  32. <!-- 查看报告单 -->
  33. <el-dialog title="降雨报告单" v-model="dialogShowDetail" width="1150px" append-to-body>
  34. <ReportDetail v-if="dialogShowDetail" :rainId="rainId"></ReportDetail>
  35. </el-dialog>
  36. <!-- 内涝模型 -->
  37. <el-dialog title="内涝模型" v-model="dialogShowModal" width="1800px" append-to-body>
  38. <RiskDetail></RiskDetail>
  39. </el-dialog>
  40. </div>
  41. </template>
  42.  
  43. <script setup>
  44. import { rainfallSessionInfoList } from '@/api/publicService/index';
  45.  
  46. import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
  47. import ReportDetail from '@/views/floodSys/floodYP/historyEventDetail.vue'; //查看报告单
  48. import RiskDetail from '@/views/floodSys/floodYP/riskAsses.vue'; //内涝模型
  49.  
  50. const { proxy } = getCurrentInstance();
  51. const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度 字典数据
  52. const dialogShowDetail = ref(false);
  53. const dialogShowModal = ref(false);
  54. const rainId = ref('');
  55.  
  56. const dataList = ref([]);
  57.  
  58. // 获取降雨报告数据
  59. async function getJYData() {
  60. let res = await rainfallSessionInfoList();
  61. if (res && res.code == 200) {
  62. dataList.value = res.data;
  63. }
  64. }
  65.  
  66. // 查看报告
  67. function checkReport(item) {
  68. rainId.value = item.id;
  69. dialogShowDetail.value = true;
  70. }
  71.  
  72. onMounted(() => {
  73. getJYData();
  74. });
  75. </script>
  76.  
  77. <style lang="scss">
  78. .rainReportPage {
  79. width: 100%;
  80. .scrollMapHM {
  81. p {
  82. width: 18%;
  83. }
  84. .reports {
  85. color: #3afff8;
  86. }
  87. }
  88. }
  89. </style>