Newer
Older
KaiFengPC / src / views / dataAnalysis / syntheticData / alarmAnaly.vue
@zhangdeliang zhangdeliang on 23 May 2 KB 初始化项目
  1. <template>
  2. <!-- 报警分析统计 -->
  3. <div class="alarmAnaly">
  4. <!-- 表格 -->
  5. <div class="tableBox animate__animated animate__zoomIn" v-if="tableData.length > 0">
  6. <el-table v-loading="tableLoading" :data="tableData">
  7. <el-table-column label="站点编号" prop="stCode" />
  8. <el-table-column label="监测指标" prop="warnFactorName" />
  9. <el-table-column label="监测值" prop="warnFactorValueName">
  10. <template #default="{ row }">
  11. <span>{{ row.warnFactorValueName }}</span>
  12. <!-- <span>{{ row.warnFactorValueName.substring(1, row.warnFactorValueName.length - 1) }}</span> -->
  13. </template>
  14. </el-table-column>
  15. <el-table-column label="警情类别" prop="warnLevel">
  16. <template #default="scope">
  17. <span>{{ scope.row.warnLevel == 'warn' ? '告警' : scope.row.warnLevel == 'early_warn' ? '预警' : '--' }}</span>
  18. </template>
  19. </el-table-column>
  20. <el-table-column label="警情阀值" prop="warnFormulaName" />
  21. <el-table-column label="预警/报警数" prop="warnCount" />
  22. <el-table-column label="累计预警时长(H)" prop="continueMinute" />
  23. <!-- <el-table-column label="警情状态" prop="jobId" /> -->
  24. <el-table-column label="通讯时间" prop="warnDatetime" />
  25. </el-table>
  26. <Pagination
  27. v-show="total > 0"
  28. :total="total"
  29. v-model:page="queryParams.pageNo"
  30. v-model:limit="queryParams.pageSize"
  31. @pagination="getList"
  32. />
  33. </div>
  34. <!-- 暂无数据 -->
  35. <el-empty v-loading="tableLoading" :image-size="200" v-if="tableData.length == 0" />
  36. </div>
  37. </template>
  38. <script setup>
  39. import { getAlarmAnalysis } from '@/api/dataAnalysis/syntherticData';
  40.  
  41. const props = defineProps({
  42. searchDate: Array,
  43. stationCode: String,
  44. });
  45. const { proxy } = getCurrentInstance();
  46.  
  47. const queryParams = reactive({
  48. pageNo: 1,
  49. pageSize: 10,
  50. start: props.searchDate ? props.searchDate[0] : '',
  51. end: props.searchDate ? props.searchDate[1] : '',
  52. });
  53. const total = ref(0);
  54. const tableData = ref([]);
  55. const tableLoading = ref(false);
  56.  
  57. // 获取列表数据
  58. function getList(code) {
  59. // console.log('报警分析---', props.stationCode);
  60. tableLoading.value = true;
  61. let params = {
  62. startTime: props.searchDate ? props.searchDate[0] : '',
  63. endTime: props.searchDate ? props.searchDate[1] : '',
  64. stCode: code,
  65. };
  66. getAlarmAnalysis(params).then(res => {
  67. tableData.value = res.data;
  68. total.value = res.total;
  69. tableLoading.value = false;
  70. });
  71. }
  72.  
  73. // 初始化
  74. onMounted(() => {
  75. getList(props.stationCode);
  76. });
  77. defineExpose({
  78. getList,
  79. });
  80. onBeforeUnmount(() => {});
  81. </script>
  82. <style lang="scss">
  83. .alarmAnaly {
  84. width: 100%;
  85. .tableBox {
  86. .el-pagination {
  87. right: 25%;
  88. }
  89. .el-scrollbar {
  90. height: calc(100vh - 650px);
  91. }
  92. }
  93. }
  94. </style>