Newer
Older
KaiFengPC / src / views / floodSys / scada / alertService / components / reportService.vue
@zhangdeliang zhangdeliang on 23 May 7 KB 初始化项目
  1. <template>
  2. <div class="publicContainer reportService">
  3. <el-form :model="pagParms" ref="queryRef" :inline="true" v-show="showSearch">
  4. <el-form-item label="站点名称" prop="dataType">
  5. <el-select clearable filterable v-model="pagParms.stCode" placeholder="搜索站点">
  6. <el-option v-for="dict in rtuSiteInfo" :key="dict.stationCode" :label="dict.stationName" :value="dict.stationCode"></el-option>
  7. </el-select>
  8. </el-form-item>
  9. <el-form-item label="告警级别" prop="warnLevel">
  10. <el-select clearable v-model="pagParms.warnLevel" placeholder="告警级别">
  11. <el-option v-for="dict in dataTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item>
  15. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  16. <el-button type="primary" plain icon="Plus" @click="handleAdd(_, 1)">新增</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" border @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="status">
  37. <template #default="scope">
  38. <el-tag effect="dark" class="ml-2" :type="scope.row.status == 1 ? 'success' : 'danger'">
  39. {{ scope.row.status == 1 ? '启用 ' : '停用' }}
  40. </el-tag>
  41. </template>
  42. </el-table-column>
  43. <el-table-column label="创建时间" prop="createTime" width="180">
  44. <template #default="scope">
  45. <span>{{ scope.row.createTime }}</span>
  46. </template>
  47. </el-table-column>
  48.  
  49. <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
  50. <template #default="scope">
  51. <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row, 2)" v-hasPermi="['newfiber-scada-base:rtuSiteInfo:edit']">
  52. 修改
  53. </el-button>
  54. <el-button
  55. link
  56. type="danger"
  57. icon="Delete"
  58. @click="handleDelete(scope.row)"
  59. v-hasPermi="['newfiber-scada-base:rtuSiteInfo:remove']"
  60. >
  61. 删除
  62. </el-button>
  63. </template>
  64. </el-table-column>
  65. </el-table>
  66.  
  67. <pagination
  68. v-show="totals > 0"
  69. :total="totals"
  70. v-model:page="queryParams.pageNum"
  71. v-model:limit="queryParams.pageSize"
  72. @pagination="rtuWarnConfigPageM(queryParams)"
  73. />
  74. <!-- 新增修改弹窗 -->
  75. <el-dialog v-model="dialogShow" :title="dialogTitle" width="800px" append-to-body class="equipmentDialog">
  76. <abilityAnalysis @closeEd="closeEd" :infoList="infoList" :key="keyLit"></abilityAnalysis>
  77. </el-dialog>
  78. </div>
  79. </template>
  80. <script setup name="syntheticData">
  81. import bus from '@/bus';
  82. import { plcWarnConfigPage, plcWarnConfigInfo, plcWarnConfigDelete } from '@/api/scada/AlertService';
  83. import { getInfolist } from '@/api/scada/stationInfo';
  84. import { reactive } from 'vue';
  85. import abilityAnalysis from './abilityAnalysis.vue'; //基本信息查看更多
  86. const { proxy } = getCurrentInstance();
  87. const showSearch = ref(true);
  88. const tableData = ref([]);
  89. const tableLoading = ref(false);
  90. const dialogShow = ref(false);
  91. const dialogTitle = ref('新增告警');
  92. const totals = ref(0);
  93. // 变量声明
  94. const data = reactive({
  95. form: {},
  96. queryParams: {
  97. pageNum: 1,
  98. pageSize: 10,
  99. dataType: '',
  100. dateTime: [],
  101. },
  102. });
  103. const { queryParams, form } = toRefs(data);
  104. const dataTypes = reactive([
  105. { label: '告警 ', value: 'warn' },
  106. { label: '预警 ', value: 'early_warn' },
  107. ]);
  108. const rtuSiteInfo = ref([]);
  109. const pagParms = ref({ pageNum: 1, pageSize: 10 });
  110. // 方法
  111. //获取站点下拉
  112. async function getSiteSelectListM(p) {
  113. const res = await getInfolist();
  114. rtuSiteInfo.value = res.data;
  115. }
  116. //分页查询告警规则
  117. async function rtuWarnConfigPageM(p) {
  118. let { data, total } = await plcWarnConfigPage(p);
  119. tableLoading.value = false;
  120. tableData.value = data;
  121. totals.value = total;
  122. }
  123.  
  124. const typeList = [
  125. {
  126. dictValue: 'water_level',
  127. dictLabel: '水位',
  128. },
  129. {
  130. dictValue: 'flow',
  131. dictLabel: '流量',
  132. },
  133. {
  134. dictValue: 'rain',
  135. dictLabel: '降雨 ',
  136. },
  137. {
  138. dictValue: 'quality',
  139. dictLabel: '水质',
  140. },
  141. {
  142. dictValue: 'other',
  143. dictLabel: '其它 ',
  144. },
  145. ];
  146. function getChangeType(e) {
  147. for (var i = 0; i < typeList.length; i++) {
  148. if (typeList[i].dictValue == e) {
  149. //dictValue,dictLabel保持和上面定义一致
  150. return typeList[i].dictLabel;
  151. }
  152. }
  153. }
  154.  
  155. /** 搜索按钮操作 */
  156. function handleQuery() {
  157. queryParams.value.pageNum = 1;
  158. tableLoading.value = true;
  159. rtuWarnConfigPageM(pagParms.value);
  160. }
  161.  
  162. /** 重置按钮操作 */
  163. function resetQuery() {
  164. tableLoading.value = true;
  165. pagParms.value.stCode = '';
  166. pagParms.value.warnLevel = '';
  167. rtuWarnConfigPageM(pagParms.value);
  168. }
  169.  
  170. // 多选框选中数据
  171. function handleSelectionChange(selection) {
  172. ids.value = selection.map(item => item.id);
  173. single.value = selection.length != 1;
  174. multiple.value = !selection.length;
  175. }
  176. //获取详情接口
  177. const keyLit = ref(0);
  178. const infoList = ref({});
  179. function handleAdd({ id }, t) {
  180. dialogShow.value = true;
  181.  
  182. if (t == 2) {
  183. dialogTitle.value = '修改告警';
  184. plcWarnConfigInfo(id).then(({ data }) => {
  185. infoList.value = data;
  186. keyLit.value++;
  187. });
  188. } else {
  189. dialogTitle.value = '新增告警';
  190. infoList.value = {};
  191. keyLit.value++;
  192. }
  193. infoList.value.type = t;
  194. }
  195. function closeEd() {
  196. dialogShow.value = false;
  197. rtuWarnConfigPageM(pagParms.value);
  198. }
  199. //删除成功
  200. function handleDelete(row) {
  201. console.log(row, 999);
  202. // const _ids = row.id || ids.value;
  203. proxy.$modal
  204. .confirm('是否确认删除?')
  205. .then(function () {
  206. plcWarnConfigDelete(row.id).then(({ code }) => {
  207. if (code == 200) {
  208. rtuWarnConfigPageM(pagParms.value);
  209. }
  210. });
  211. })
  212. .then(() => {
  213. // getList();
  214. proxy.$modal.msgSuccess('删除成功');
  215. })
  216. .catch(() => {});
  217. }
  218. // 初始化
  219. onMounted(() => {
  220. bus.on('mapPointClick3', type => {
  221. tableLoading.value = true;
  222. pagParms.value.warnType = type;
  223. rtuWarnConfigPageM(pagParms.value);
  224. });
  225. getSiteSelectListM();
  226. });
  227. // 页面销毁
  228. onBeforeUnmount(() => {
  229. bus.off('mapPointClick3');
  230. });
  231. </script>
  232. <style lang="scss" scoped></style>