Newer
Older
KaiFengPC / src / views / dataAnalysis / historyGj.vue
@鲁yixuan 鲁yixuan on 19 Aug 4 KB updata
  1. <template>
  2. <!-- 历史告警 -->
  3. <div class="publicContainer historyGJLS">
  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.stCode" :label="dict.stName" :value="dict.stCode"></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 type="success" 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 type="selection" width="55" />
  22. <el-table-column label="序号" type="index" width="55" />
  23. <el-table-column label="告警站点" prop="stName" show-overflow-tooltip />
  24. <el-table-column label="告警类型" prop="warnType">
  25. <template #default="scope">
  26. <span>{{ getChangeType(scope.row.warnType) }}</span>
  27. </template>
  28. </el-table-column>
  29. <el-table-column label="告警级别" prop="warnLevel">
  30. <template #default="{ row }">
  31. <span>{{ row.warnLevel == 'warn' ? '告警 ' : '预警 ' }}</span>
  32. </template>
  33. </el-table-column>
  34. <el-table-column label="告警因子" prop="warnFactorName" show-overflow-tooltip />
  35. <el-table-column label="告警公式" prop="warnFormulaName"> </el-table-column>
  36. <el-table-column label="监测值" prop="warnFactorValueName" show-overflow-tooltip>
  37. <template #default="{ row }">
  38. <!-- <span>{{ row.warnFactorValueName.substring(1, row.warnFactorValueName.length - 1) }}</span> -->
  39. <span>{{ row.warnFactorValueName }}</span>
  40. </template>
  41. </el-table-column>
  42. <el-table-column label="时间阈值(分钟)" prop="timeThreshold"> </el-table-column>
  43. <el-table-column label="告警时间" prop="warnDatetime" width="180">
  44. <template #default="scope">
  45. <span>{{ scope.row.warnDatetime }}</span>
  46. </template>
  47. </el-table-column>
  48. </el-table>
  49.  
  50. <pagination
  51. v-show="total > 0"
  52. :total="total"
  53. v-model:page="pagParms.pageNum"
  54. v-model:limit="pagParms.pageSize"
  55. @pagination="searchData(pagParms)"
  56. />
  57. </div>
  58. </template>
  59. <script setup name="historyCJ">
  60. import { rtuSiteInfoList } from '@/api/dataAnalysis/AlertService';
  61. import { rtuWarnConfigPage } from '@/api/dataAnalysis/historyGj';
  62. import { reactive } from 'vue';
  63.  
  64. const props = defineProps({
  65. checkedKey: String,
  66. });
  67. const { proxy } = getCurrentInstance();
  68. const showSearch = ref(true);
  69. const tableData = ref([]);
  70. const tableLoading = ref(false);
  71. const total = ref(0);
  72. // 变量声明
  73. const dataTypes = reactive([
  74. { label: '告警 ', value: 'warn ' },
  75. { label: '预警 ', value: 'early_warn' },
  76. ]);
  77. const rtuSiteInfo = ref([]);
  78. const pagParms = ref({ warnType: '', stCode: '', warnLevel: '', pageSize: 10, pageNum: 1 });
  79. // 方法
  80. //获取站点下拉
  81. async function getSiteSelectListM() {
  82. let { data } = await rtuSiteInfoList();
  83. rtuSiteInfo.value = data;
  84. }
  85. //分页搜索告警规则
  86. async function searchData() {
  87. tableLoading.value = true;
  88. let params = { ...pagParms.value };
  89. let { data, total: totas } = await rtuWarnConfigPage(params);
  90. tableLoading.value = false;
  91. tableData.value = data;
  92. total.value = totas;
  93. }
  94. const typeList = [
  95. {
  96. dictValue: 'water_level',
  97. dictLabel: '水位',
  98. },
  99. {
  100. dictValue: 'flow',
  101. dictLabel: '流量',
  102. },
  103. {
  104. dictValue: 'rain',
  105. dictLabel: '降雨 ',
  106. },
  107. {
  108. dictValue: 'quality',
  109. dictLabel: '水质 ',
  110. },
  111. {
  112. dictValue: 'other',
  113. dictLabel: '其它 ',
  114. },
  115. ];
  116. function getChangeType(e) {
  117. for (var i = 0; i < typeList.length; i++) {
  118. if (typeList[i].dictValue == e) {
  119. //dictValue,dictLabel保持和上面定义一致
  120. return typeList[i].dictLabel;
  121. }
  122. }
  123. }
  124.  
  125. /** 搜索按钮操作 */
  126. function handleQuery() {
  127. pagParms.value.pageNum = 1;
  128. searchData();
  129. }
  130. /** 重置按钮操作 */
  131. const resetQuery = () => {
  132. pagParms.value.stCode = '';
  133. pagParms.value.warnLevel = '';
  134. searchData();
  135. };
  136. // 多选框选中数据
  137. function handleSelectionChange(selection) {
  138. ids.value = selection.map(item => item.id);
  139. single.value = selection.length != 1;
  140. multiple.value = !selection.length;
  141. }
  142.  
  143. // 初始化
  144. onMounted(() => {
  145. getSiteSelectListM();
  146. searchData();
  147. });
  148. </script>
  149. <style lang="scss" scoped></style>