Newer
Older
KaiFengPC / src / views / dataAnalysis / monitorCount.vue
@zhangdeliang zhangdeliang on 25 Nov 4 KB update
  1. <template>
  2. <!-- 数据采集子系统-遥测站数据统计报表 -->
  3. <div class="publicContainer">
  4. <!-- 搜索区域 -->
  5. <el-form ref="queryRef" :inline="true" :model="queryParams">
  6. <el-form-item label="监测站类型" prop="stType">
  7. <el-select v-model="stType" @change="changeType">
  8. <el-option v-for="item in stationTypes" :key="item.id" :label="item.label" :value="item.value" />
  9. </el-select>
  10. </el-form-item>
  11. <el-form-item label="站点名称" prop="stCode">
  12. <el-select clearable v-model="queryParams.stCode" filterable>
  13. <el-option v-for="item in stationList" :key="item.id" :label="item.stName" :value="item.stCode" />
  14. </el-select>
  15. </el-form-item>
  16. <el-form-item label="时间维度" prop="dateType">
  17. <el-select v-model="queryParams.dateType">
  18. <el-option key="1" label="日" value="1" />
  19. <el-option key="2" label="月" value="2" />
  20. <el-option key="3" label="年" value="3" />
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item label="日期选择" prop="date">
  24. <el-date-picker
  25. type="date"
  26. v-model="queryParams.date"
  27. value-format="YYYY-MM-DD"
  28. placeholder="请选择日期"
  29. v-if="queryParams.dateType == '1'"
  30. >
  31. </el-date-picker>
  32. <el-date-picker
  33. type="month"
  34. v-model="queryParams.date"
  35. value-format="YYYY-MM"
  36. placeholder="请选择日期"
  37. v-if="queryParams.dateType == '2'"
  38. ></el-date-picker>
  39. <el-date-picker
  40. type="year"
  41. v-model="queryParams.date"
  42. value-format="YYYY"
  43. placeholder="请选择日期"
  44. v-if="queryParams.dateType == '3'"
  45. ></el-date-picker>
  46. </el-form-item>
  47. <el-form-item>
  48. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  49. <el-button type="warning" icon="Download" @click="handleExport">导出</el-button>
  50. </el-form-item>
  51. </el-form>
  52. <!-- 表格 -->
  53. <el-table v-loading="tableLoading" :data="tableData" max-height="750">
  54. <el-table-column label="时间" prop="reportTime" />
  55. <el-table-column label="流速(m/s)" prop="va">
  56. <template #default="scope">{{ scope.row.va || '--' }} </template>
  57. </el-table-column>
  58. <el-table-column label="水位(m)" prop="z">
  59. <template #default="scope">{{ scope.row.z || '--' }} </template>
  60. </el-table-column>
  61. <el-table-column label="SS(mg/L)" prop="turb">
  62. <template #default="scope">{{ scope.row.turb || '--' }} </template>
  63. </el-table-column>
  64. <el-table-column label="小时流量(m³/s)" prop="sbl1">
  65. <template #default="scope">{{ scope.row.sbl1 || '--' }} </template>
  66. </el-table-column>
  67. <el-table-column label="累计流量(m³)" prop="cq1">
  68. <template #default="scope">{{ scope.row.cq1 || '--' }} </template>
  69. </el-table-column>
  70. </el-table>
  71. </div>
  72. </template>
  73.  
  74. <script setup>
  75. import { getStationList } from '@/api/dataAnalysis/syntherticData';
  76. import { siteMonitorReport } from '@/api/dataAnalysis/realAlarm';
  77.  
  78. const { proxy } = getCurrentInstance();
  79.  
  80. const queryParams = ref({
  81. stCode: null,
  82. dateType: '2',
  83. date: proxy.moment(new Date()).format('YYYY-MM'),
  84. });
  85. const stType = ref('total');
  86. const stationList = ref([]);
  87. const stationTypes = ref([
  88. { label: '全部', id: '1', value: 'total' },
  89. { label: '典型项目', id: '2', value: 'typical_land' },
  90. { label: '雨量', id: '3', value: 'rainfall' },
  91. { label: '管网', id: '4', value: 'pipeline' },
  92. { label: '内涝点', id: '5', value: 'waterlogging' },
  93. { label: '海绵设施', id: '6', value: 'drain_outlet' },
  94. { label: '河道', id: '7', value: 'river' },
  95. ]);
  96. const tableData = ref([]);
  97. const tableLoading = ref(false);
  98.  
  99. /** 获取搜索数据列表 */
  100. function getDataList() {
  101. tableLoading.value = true;
  102. siteMonitorReport(queryParams.value).then(response => {
  103. tableData.value = response.data;
  104. tableLoading.value = false;
  105. });
  106. }
  107.  
  108. /** 搜索按钮操作 */
  109. function handleQuery() {
  110. getDataList();
  111. }
  112. /** 导出按钮操作 */
  113. function handleExport() {
  114. proxy.download(
  115. 'business/siteHistoryMonitor/siteMonitorReportExport',
  116. {
  117. ...queryParams.value,
  118. },
  119. `遥测站数据统计 ${new Date().getTime()}.xlsx`
  120. );
  121. }
  122. // 筛选监测站类型
  123. function changeType(val) {
  124. stType.value = val;
  125. getStationData();
  126. }
  127. //获取站点数据
  128. const getStationData = async () => {
  129. let params = {
  130. monitorTargetType: stType.value == 'total' ? '' : stType.value,
  131. stCode: '',
  132. orderBy: 'tt desc',
  133. };
  134. let res = await getStationList(params);
  135. if (res && res.code == 200) {
  136. let datas = res.data;
  137. stationList.value = datas || [];
  138. queryParams.value.stCode = datas[0].stCode;
  139. getDataList();
  140. }
  141. };
  142.  
  143. onMounted(() => {
  144. getStationData();
  145. });
  146. </script>
  147.  
  148. <style lang="scss" scoped></style>