Newer
Older
KaiFengPC / src / views / floodSys / floodYP / historyEvent.vue
@鲁yixuan 鲁yixuan on 19 Aug 5 KB updata
  1. <template>
  2. <!-- 排水防涝子系统 态势研判 典型场次降雨-->
  3. <div class="publicContainer">
  4. <!-- 搜索区域 -->
  5. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  6. <el-form-item label="起止日期" prop="dateRange">
  7. <el-date-picker
  8. type="daterange"
  9. value-format="YYYY-MM-DD"
  10. range-separator="至"
  11. start-placeholder="开始日期"
  12. end-placeholder="结束日期"
  13. v-model="queryParams.dateRange"
  14. :clearable="false"
  15. >
  16. </el-date-picker>
  17. </el-form-item>
  18. <el-form-item label="累计降雨量(mm)" prop="minAccumulate">
  19. <el-input-number
  20. :min="0"
  21. v-model="queryParams.minAccumulate"
  22. placeholder="请输入"
  23. clearable
  24. @keyup.enter="handleQuery"
  25. style="width: 120px; margin-right: 5px"
  26. />
  27. <el-input-number
  28. :min="queryParams.minAccumulate"
  29. v-model="queryParams.maxAccumulate"
  30. placeholder="请输入"
  31. clearable
  32. @keyup.enter="handleQuery"
  33. style="width: 120px; margin-left: 5px"
  34. />
  35. </el-form-item>
  36. <el-form-item label="降雨时长(h)" prop="minDuration">
  37. <el-input-number
  38. :min="0"
  39. v-model="queryParams.minDuration"
  40. placeholder="请输入"
  41. clearable
  42. @keyup.enter="handleQuery"
  43. style="width: 120px; margin-right: 5px"
  44. />
  45. <el-input-number
  46. :min="queryParams.minDuration"
  47. v-model="queryParams.maxDuration"
  48. placeholder="请输入"
  49. clearable
  50. @keyup.enter="handleQuery"
  51. style="width: 120px; margin-left: 5px"
  52. />
  53. </el-form-item>
  54. <el-form-item>
  55. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  56. <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
  57. </el-form-item>
  58. </el-form>
  59. <!-- 按钮区域 -->
  60. <el-row :gutter="10" class="mb8">
  61. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  62. </el-row>
  63. <!-- 表格 -->
  64. <el-table v-loading="tableLoading" :data="tableData" max-height="600">
  65. <el-table-column label="降雨事件编号" prop="rainfallCode" />
  66. <el-table-column label="场次累计降雨量(mm)" prop="accumulate" />
  67. <el-table-column label="降雨开始时间" prop="startTime" />
  68. <el-table-column label="降雨结束时间" prop="endTime" />
  69. <el-table-column label="降雨强度" prop="rainIntensity">
  70. <template #default="scope">
  71. <dict-tag :options="rainfall_intensity" :value="String(scope.row.rainIntensity)" />
  72. </template>
  73. </el-table-column>
  74. <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
  75. <template #default="scope">
  76. <el-button link type="warning" icon="Edit" @click="handleCheck(scope.row)"> 查看报告单 </el-button>
  77. </template>
  78. </el-table-column>
  79. </el-table>
  80. <!-- 分页 -->
  81. <pagination
  82. v-show="total > 0"
  83. :total="total"
  84. v-model:page="queryParams.pageNum"
  85. v-model:limit="queryParams.pageSize"
  86. @pagination="getDataList"
  87. />
  88. <!-- 查看报告单 -->
  89. <el-dialog title="降雨报告单" v-model="dialogShowDetail" width="1100px" append-to-body>
  90. <ReportDetail v-if="dialogShowDetail" :rainId="rainId"></ReportDetail>
  91. </el-dialog>
  92. </div>
  93. </template>
  94.  
  95. <script setup name="典型降雨场次">
  96. import { rainfallPage } from '@/api/floodSys/floodYP';
  97. import ReportDetail from './historyEventDetail.vue';
  98.  
  99. const { proxy } = getCurrentInstance();
  100. const tableData = ref([{ date: '2022-10-09', type: '1', rain: 20 }]);
  101. const tableLoading = ref(true);
  102. const total = ref(0);
  103. const showSearch = ref(true);
  104. const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度 字典数据
  105. const rainId = ref('');
  106. const dialogShowDetail = ref(false);
  107.  
  108. const allData = reactive({
  109. queryParams: {
  110. pageNum: 1,
  111. pageSize: 10,
  112. dateRange: '',
  113. startTime: '',
  114. endTime: '',
  115. minAccumulate: 0,
  116. maxAccumulate: 50,
  117. minDuration: 0,
  118. maxDuration: 24,
  119. },
  120. });
  121. const { queryParams } = toRefs(allData);
  122.  
  123. /** 获取搜索数据列表 */
  124. function getDataList() {
  125. tableLoading.value = true;
  126. if (queryParams.value.dateRange && queryParams.value.dateRange.length) {
  127. let times = queryParams.value.dateRange[0] ? queryParams.value.dateRange[0] + ' 00:00:00' : '';
  128. let timee = queryParams.value.dateRange[1] ? queryParams.value.dateRange[1] + ' 23:59:59' : '';
  129. queryParams.value.startTime = times;
  130. queryParams.value.endTime = timee;
  131. } else {
  132. queryParams.value.startTime = '';
  133. queryParams.value.endTime = '';
  134. }
  135. rainfallPage(queryParams.value).then(response => {
  136. tableData.value = response.data;
  137. total.value = response.total;
  138. tableLoading.value = false;
  139. });
  140. }
  141.  
  142. /** 搜索按钮操作 */
  143. function handleQuery() {
  144. queryParams.value.pageNum = 1;
  145. getDataList();
  146. }
  147. /** 重置按钮操作 */
  148. function resetQuery() {
  149. proxy.resetForm('queryRef');
  150. handleQuery();
  151. }
  152.  
  153. /** 查看按钮操作 */
  154. function handleCheck(row) {
  155. rainId.value = row.id;
  156. dialogShowDetail.value = true;
  157. }
  158.  
  159. onMounted(() => {
  160. getDataList();
  161. });
  162. </script>