- <template>
- <!-- 排水防涝子系统 态势研判 典型场次降雨-->
- <div class="publicContainer">
- <!-- 搜索区域 -->
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
- <el-form-item label="起止日期" prop="dateRange">
- <el-date-picker
- type="daterange"
- value-format="YYYY-MM-DD"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- v-model="queryParams.dateRange"
- :clearable="false"
- >
- </el-date-picker>
- </el-form-item>
- <el-form-item label="累计降雨量(mm)" prop="minAccumulate">
- <el-input-number
- :min="0"
- v-model="queryParams.minAccumulate"
- placeholder="请输入"
- clearable
- @keyup.enter="handleQuery"
- style="width: 120px; margin-right: 5px"
- />
- 至
- <el-input-number
- :min="queryParams.minAccumulate"
- v-model="queryParams.maxAccumulate"
- placeholder="请输入"
- clearable
- @keyup.enter="handleQuery"
- style="width: 120px; margin-left: 5px"
- />
- </el-form-item>
- <el-form-item label="降雨时长(h)" prop="minDuration">
- <el-input-number
- :min="0"
- v-model="queryParams.minDuration"
- placeholder="请输入"
- clearable
- @keyup.enter="handleQuery"
- style="width: 120px; margin-right: 5px"
- />
- 至
- <el-input-number
- :min="queryParams.minDuration"
- v-model="queryParams.maxDuration"
- placeholder="请输入"
- clearable
- @keyup.enter="handleQuery"
- style="width: 120px; margin-left: 5px"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
- <!-- 按钮区域 -->
- <el-row :gutter="10" class="mb8">
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
- </el-row>
- <!-- 表格 -->
- <el-table v-loading="tableLoading" :data="tableData" max-height="600">
- <el-table-column label="降雨事件编号" prop="rainfallCode" />
- <el-table-column label="场次累计降雨量(mm)" prop="accumulate" />
- <el-table-column label="降雨开始时间" prop="startTime" />
- <el-table-column label="降雨结束时间" prop="endTime" />
- <el-table-column label="降雨强度" prop="rainIntensity">
- <template #default="scope">
- <dict-tag :options="rainfall_intensity" :value="String(scope.row.rainIntensity)" />
- </template>
- </el-table-column>
- <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button link type="warning" icon="Edit" @click="handleCheck(scope.row)"> 查看报告单 </el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 分页 -->
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getDataList"
- />
- <!-- 查看报告单 -->
- <el-dialog title="降雨报告单" v-model="dialogShowDetail" width="1100px" append-to-body>
- <ReportDetail v-if="dialogShowDetail" :rainId="rainId"></ReportDetail>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="典型降雨场次">
- import { rainfallPage } from '@/api/floodSys/floodYP';
- import ReportDetail from './historyEventDetail.vue';
-
- const { proxy } = getCurrentInstance();
- const tableData = ref([{ date: '2022-10-09', type: '1', rain: 20 }]);
- const tableLoading = ref(true);
- const total = ref(0);
- const showSearch = ref(true);
- const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度 字典数据
- const rainId = ref('');
- const dialogShowDetail = ref(false);
-
- const allData = reactive({
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- dateRange: '',
- startTime: '',
- endTime: '',
- minAccumulate: 0,
- maxAccumulate: 50,
- minDuration: 0,
- maxDuration: 24,
- },
- });
- const { queryParams } = toRefs(allData);
-
- /** 获取搜索数据列表 */
- function getDataList() {
- tableLoading.value = true;
- if (queryParams.value.dateRange && queryParams.value.dateRange.length) {
- let times = queryParams.value.dateRange[0] ? queryParams.value.dateRange[0] + ' 00:00:00' : '';
- let timee = queryParams.value.dateRange[1] ? queryParams.value.dateRange[1] + ' 23:59:59' : '';
- queryParams.value.startTime = times;
- queryParams.value.endTime = timee;
- } else {
- queryParams.value.startTime = '';
- queryParams.value.endTime = '';
- }
- rainfallPage(queryParams.value).then(response => {
- tableData.value = response.data;
- total.value = response.total;
- tableLoading.value = false;
- });
- }
-
- /** 搜索按钮操作 */
- function handleQuery() {
- queryParams.value.pageNum = 1;
- getDataList();
- }
- /** 重置按钮操作 */
- function resetQuery() {
- proxy.resetForm('queryRef');
- handleQuery();
- }
-
- /** 查看按钮操作 */
- function handleCheck(row) {
- rainId.value = row.id;
- dialogShowDetail.value = true;
- }
-
- onMounted(() => {
- getDataList();
- });
- </script>