Newer
Older
KaiFengPC / src / views / floodSys / scada / realAlarm / reportService.vue
@zhangdeliang zhangdeliang on 10 Sep 4 KB update
  1. <template>
  2. <!-- 告警服务 实时告警 -->
  3. <div class="publicContainer realAlarmSS">
  4. <el-form :model="pagParms" ref="queryRef" :inline="true" v-show="showSearch">
  5. <el-form-item label="站点名称" prop="dataType">
  6. <el-select clearable filterable v-model="pagParms.stCode" placeholder="搜索站点">
  7. <el-option v-for="dict in rtuSiteInfo" :key="dict.stationCode" :label="dict.stationName" :value="dict.stationCode"></el-option>
  8. </el-select>
  9. </el-form-item>
  10. <el-form-item label="告警级别" prop="warnLevel">
  11. <el-select clearable v-model="pagParms.warnLevel" placeholder="告警级别">
  12. <el-option v-for="dict in dataTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item>
  16. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  17. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  18. </el-form-item>
  19. </el-form>
  20. <el-table v-loading="tableLoading" :data="tableData" @selection-change="handleSelectionChange" max-height="620">
  21. <el-table-column label="序号" type="index" width="55" />
  22. <el-table-column label="告警类型" prop="warnType">
  23. <template #default="scope">
  24. <span>{{ getChangeType(scope.row.warnType) }}</span>
  25. </template>
  26. </el-table-column>
  27. <el-table-column label="告警级别" prop="warnLevel">
  28. <template #default="{ row }">
  29. <span>{{ row.warnLevel == 'warn' ? '告警' : '预警' }}</span>
  30. </template>
  31. </el-table-column>
  32. <el-table-column label="告警站点" prop="stName" width="200" show-overflow-tooltip />
  33. <el-table-column label="告警因子" prop="warnFactorName" show-overflow-tooltip />
  34. <el-table-column label="告警公式" prop="warnFormulaName" width="200" show-overflow-tooltip></el-table-column>
  35. <el-table-column label="时间阈值(分钟)" prop="timeThreshold"></el-table-column>
  36. <el-table-column label="告警时间" prop="warnDatetime" width="180"></el-table-column>
  37. </el-table>
  38. <pagination
  39. v-show="total > 0"
  40. :total="total"
  41. v-model:page="pagParms.pageNum"
  42. v-model:limit="pagParms.pageSize"
  43. @pagination="searchData"
  44. />
  45. </div>
  46. </template>
  47. <script setup name="realAlarm">
  48. import { plcWarnRecordRealtimePage } from '@/api/scada/realAlarm';
  49. import { getInfolist } from '@/api/scada/stationInfo';
  50. import { reactive } from 'vue';
  51. const props = defineProps({
  52. checkedKey: String,
  53. });
  54. const { proxy } = getCurrentInstance();
  55. const showSearch = ref(true);
  56. const tableData = ref([]);
  57. const tableLoading = ref(false);
  58. const total = ref(0);
  59. const dataTypes = reactive([
  60. { label: '告警 ', value: 'warn ' },
  61. { label: '预警 ', value: 'early_warn' },
  62. ]);
  63. const rtuSiteInfo = ref([]);
  64. const pagParms = ref({ warnType: '', stCode: '', warnLevel: '', pageSize: 10, pageNum: 1 });
  65. // 获取站点
  66. async function getSiteSelectListM() {
  67. let { data } = await getInfolist();
  68. rtuSiteInfo.value = data;
  69. }
  70. //分页搜索
  71. async function searchData() {
  72. tableLoading.value = true;
  73. let params = { ...pagParms.value };
  74. let { data, total: totals } = await plcWarnRecordRealtimePage(params);
  75. tableLoading.value = false;
  76. tableData.value = data;
  77. total.value = totals;
  78. }
  79.  
  80. const typeList = [
  81. {
  82. dictValue: 'water_level',
  83. dictLabel: '水位',
  84. },
  85. {
  86. dictValue: 'flow',
  87. dictLabel: '流量',
  88. },
  89. {
  90. dictValue: 'rain',
  91. dictLabel: '降雨 ',
  92. },
  93. {
  94. dictValue: 'quality',
  95. dictLabel: '水质 ',
  96. },
  97. {
  98. dictValue: 'other',
  99. dictLabel: '其它 ',
  100. },
  101. ];
  102. function getChangeType(e) {
  103. for (var i = 0; i < typeList.length; i++) {
  104. if (typeList[i].dictValue == e) {
  105. //dictValue,dictLabel保持和上面定义一致
  106. return typeList[i].dictLabel;
  107. }
  108. }
  109. }
  110.  
  111. /** 搜索按钮操作 */
  112. function handleQuery() {
  113. pagParms.value.pageNum = 1;
  114. searchData();
  115. }
  116.  
  117. /** 重置按钮操作 */
  118. function resetQuery() {
  119. pagParms.value.stCode = '';
  120. pagParms.value.warnLevel = '';
  121. searchData();
  122. }
  123.  
  124. // 多选框选中数据
  125. function handleSelectionChange(selection) {
  126. ids.value = selection.map(item => item.id);
  127. single.value = selection.length != 1;
  128. multiple.value = !selection.length;
  129. }
  130. watch(
  131. () => props.checkedKey,
  132. val => {
  133. pagParms.value.warnType = val;
  134. searchData();
  135. }
  136. );
  137. // 初始化
  138. onMounted(() => {
  139. getSiteSelectListM();
  140. searchData();
  141. });
  142. </script>
  143. <style lang="scss" scoped></style>