- <template>
- <!-- 数据采集子系统-遥测站数据统计报表 -->
- <div class="publicContainer">
- <!-- 搜索区域 -->
- <el-form ref="queryRef" :inline="true" :model="queryParams">
- <el-form-item label="监测站类型" prop="stType">
- <el-select v-model="stType" @change="changeType">
- <el-option v-for="item in stationTypes" :key="item.id" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="站点名称" prop="stCode">
- <el-select clearable v-model="queryParams.stCode" filterable>
- <el-option v-for="item in stationList" :key="item.id" :label="item.stName" :value="item.stCode" />
- </el-select>
- </el-form-item>
- <el-form-item label="时间维度" prop="dateType">
- <el-select v-model="queryParams.dateType">
- <el-option key="1" label="日" value="1" />
- <el-option key="2" label="月" value="2" />
- <el-option key="3" label="年" value="3" />
- </el-select>
- </el-form-item>
- <el-form-item label="日期选择" prop="date">
- <el-date-picker
- type="date"
- v-model="queryParams.date"
- value-format="YYYY-MM-DD"
- placeholder="请选择日期"
- v-if="queryParams.dateType == '1'"
- >
- </el-date-picker>
- <el-date-picker
- type="month"
- v-model="queryParams.date"
- value-format="YYYY-MM"
- placeholder="请选择日期"
- v-if="queryParams.dateType == '2'"
- ></el-date-picker>
- <el-date-picker
- type="year"
- v-model="queryParams.date"
- value-format="YYYY"
- placeholder="请选择日期"
- v-if="queryParams.dateType == '3'"
- ></el-date-picker>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
- </el-form-item>
- </el-form>
- <!-- 表格 -->
- <el-table v-loading="tableLoading" :data="tableData" max-height="750">
- <el-table-column label="时间" prop="reportTime" />
- <el-table-column label="流速(m/s)" prop="va">
- <template #default="scope">{{ scope.row.va || '--' }} </template>
- </el-table-column>
- <el-table-column label="水位(m)" prop="z">
- <template #default="scope">{{ scope.row.z || '--' }} </template>
- </el-table-column>
- <el-table-column label="SS(mg/L)" prop="turb">
- <template #default="scope">{{ scope.row.turb || '--' }} </template>
- </el-table-column>
- <el-table-column label="小时流量(m³/s)" prop="sbl1">
- <template #default="scope">{{ scope.row.sbl1 || '--' }} </template>
- </el-table-column>
- <el-table-column label="累计流量(m³)" prop="cq1">
- <template #default="scope">{{ scope.row.cq1 || '--' }} </template>
- </el-table-column>
- </el-table>
- </div>
- </template>
-
- <script setup>
- import { getStationList } from '@/api/dataAnalysis/syntherticData';
- import { siteMonitorReport } from '@/api/dataAnalysis/realAlarm';
-
- const { proxy } = getCurrentInstance();
-
- const queryParams = ref({
- stCode: null,
- dateType: '2',
- date: proxy.moment(new Date()).format('YYYY-MM'),
- });
- const stType = ref('total');
- const stationList = ref([]);
- const stationTypes = ref([
- { label: '全部', id: '1', value: 'total' },
- { label: '典型项目', id: '2', value: 'typical_land' },
- { label: '雨量', id: '3', value: 'rainfall' },
- { label: '管网', id: '4', value: 'pipeline' },
- { label: '内涝点', id: '5', value: 'waterlogging' },
- { label: '海绵设施', id: '6', value: 'drain_outlet' },
- { label: '河道', id: '7', value: 'river' },
- ]);
- const tableData = ref([]);
- const tableLoading = ref(false);
-
- /** 获取搜索数据列表 */
- function getDataList() {
- tableLoading.value = true;
- siteMonitorReport(queryParams.value).then(response => {
- tableData.value = response.data;
- tableLoading.value = false;
- });
- }
-
- /** 搜索按钮操作 */
- function handleQuery() {
- getDataList();
- }
- /** 导出按钮操作 */
- function handleExport() {
- proxy.download(
- 'business/siteHistoryMonitor/siteMonitorReportExport',
- {
- ...queryParams.value,
- },
- `遥测站数据统计 ${new Date().getTime()}.xlsx`
- );
- }
- // 筛选监测站类型
- function changeType(val) {
- stType.value = val;
- getStationData();
- }
- //获取站点数据
- const getStationData = async () => {
- let params = {
- monitorTargetType: stType.value == 'total' ? '' : stType.value,
- stCode: '',
- orderBy: 'tt desc',
- };
- let res = await getStationList(params);
- if (res && res.code == 200) {
- let datas = res.data;
- stationList.value = datas || [];
- queryParams.value.stCode = datas[0].stCode;
- getDataList();
- }
- };
-
- onMounted(() => {
- getStationData();
- });
- </script>
-
- <style lang="scss" scoped></style>