Newer
Older
KaiFengPC / src / views / dataAnalysis / alertServiceAdd.vue
@zhangdeliang zhangdeliang on 23 May 10 KB 初始化项目
  1. <template>
  2. <!-- 新增告警弹窗 -->
  3. <div class="publicContainer">
  4. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" :rules="rules" label-width="auto">
  5. <el-form-item label="站点:" prop="stCode" style="width: 45%">
  6. <el-select
  7. v-model="queryParams.stCode"
  8. placeholder="请选择站点"
  9. style="width: 100%"
  10. @change="changeStation"
  11. :disabled="!!!infoList.type"
  12. filterable
  13. >
  14. <el-option v-for="dict in projectList" :key="dict.stCode" :label="dict.stName" :value="dict.stCode"></el-option>
  15. </el-select>
  16. </el-form-item>
  17.  
  18. <el-form-item label="告警类型:" prop="warnType" style="width: 45%">
  19. <el-select v-model="queryParams.warnType" placeholder="请选告警级别" style="width: 100%" filterable>
  20. <el-option v-for="dict in searchSiteList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
  21. </el-select>
  22. </el-form-item>
  23.  
  24. <el-form-item label="告警级别:" prop="warnLevel" style="width: 45%">
  25. <el-select v-model="queryParams.warnLevel" placeholder="请选告警类型" style="width: 100%">
  26. <el-option v-for="dict in dataTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
  27. </el-select>
  28. </el-form-item>
  29. <el-form-item label="时间阈值(分钟):" prop="timeThreshold" style="width: 45%">
  30. <el-input type="number" v-model="queryParams.timeThreshold" placeholder="时间阈值"></el-input>
  31. </el-form-item>
  32.  
  33. <el-form-item label="备注:" prop="dateRange" style="width: 100%">
  34. <el-input type="textarea" show-word-limit maxlength="200" :autosize="{ minRows: 4 }" v-model="queryParams.remark"></el-input>
  35. </el-form-item>
  36. </el-form>
  37. <p>告警公式</p>
  38. <el-table :data="filterTableData" style="width: 100%" max-height="300">
  39. <el-table-column type="index" width="50">
  40. <template slot="header" #header="scope">
  41. <el-icon @click="addCofig" style="color: skyblue; font-size: 22px">
  42. <CirclePlus />
  43. </el-icon>
  44. </template>
  45. </el-table-column>
  46. <el-table-column label="监测项" prop="warnFactor">
  47. <template #default="scope">
  48. <el-select v-model="form.warnFactor[`D${scope.$index}`]" placeholder="监测项">
  49. <el-option v-for="item in jcsjList" :key="item.monitorCode" :label="item.monitorName" :value="item.monitorCode"></el-option>
  50. </el-select>
  51. </template>
  52. </el-table-column>
  53. <el-table-column label="判断" prop="ruleId">
  54. <template #default="scope">
  55. <el-select v-model="form.ruleId[`D${scope.$index}`]" placeholder="判断">
  56. <el-option v-for="item in TYList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
  57. </el-select>
  58. </template>
  59. </el-table-column>
  60. <el-table-column label="值" prop="name">
  61. <template #default="scope">
  62. <el-input placeholder="值" type="number" v-model="form.zhiVlue[`D${scope.$index}`]"></el-input>
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="连接" prop="pdinfo">
  66. <template #default="scope">
  67. <el-select v-model="form.pdinfo[`D${scope.$index}`]" placeholder="连接">
  68. <el-option v-for="item in ljLIST" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
  69. </el-select>
  70. </template>
  71. </el-table-column>
  72. <el-table-column align="right">
  73. <template #header>
  74. <el-button @click="submitFill(1)" type="primary" size="small"> 获取告警公式 </el-button>
  75. </template>
  76. <template #default="scope">
  77. <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  78. </template>
  79. </el-table-column>
  80. </el-table>
  81. <span class="warnContent" v-if="gsList.length > 0">
  82. 告警公式: <span v-for="i in gsList">{{ i.gjgs ? i.gjgs : '' }}</span>
  83. </span>
  84. <div class="pop_btn" style="text-align: center">
  85. <el-button type="primary" @click="submitFill(2)">确定</el-button>
  86. <el-button @click="emits('closeEd')">取消</el-button>
  87. </div>
  88. </div>
  89. </template>
  90.  
  91. <script setup>
  92. import { rtuWarnConfigAdd, rtuSiteMonitorList, rtuWarnConfigedit, rtuSiteInfoList } from '@/api/dataAnalysis/AlertService';
  93.  
  94. const { infoList } = defineProps(['infoList']);
  95. const { proxy } = getCurrentInstance();
  96. const showSearch = ref(true);
  97. const emits = defineEmits();
  98. const ids = ref([]);
  99. let jcsjList = ref([]);
  100. const dataTypes = reactive([
  101. { label: '告警', value: 'warn' },
  102. { label: '预警', value: 'early_warn' },
  103. ]);
  104. const projectList = ref([]);
  105. const searchSiteList = ref([
  106. {
  107. dictValue: 'water_level',
  108. dictLabel: '水位',
  109. },
  110. {
  111. dictValue: 'flow',
  112. dictLabel: '流量',
  113. },
  114. {
  115. dictValue: 'rain',
  116. dictLabel: '降雨 ',
  117. },
  118. {
  119. dictValue: 'quality',
  120. dictLabel: '水质 ',
  121. },
  122. {
  123. dictValue: 'other',
  124. dictLabel: '其它 ',
  125. },
  126. ]); //站点搜索列表
  127.  
  128. const TYList = ref([
  129. {
  130. dictValue: '>',
  131. dictLabel: '>',
  132. },
  133. {
  134. dictValue: '>=',
  135. dictLabel: '>=',
  136. },
  137. {
  138. dictValue: '<',
  139. dictLabel: '< ',
  140. },
  141. {
  142. dictValue: '<=',
  143. dictLabel: '<= ',
  144. },
  145. ]);
  146. const ljLIST = ref([
  147. {
  148. dictValue: '&&',
  149. dictLabel: '&&',
  150. },
  151. {
  152. dictValue: '||',
  153. dictLabel: '||',
  154. },
  155. ]);
  156. const data = reactive({
  157. form: {
  158. siteRepairPropertyConfigList: [
  159. {
  160. id: '',
  161. isEnable: 1,
  162. maxValue: '',
  163. minValue: '',
  164. property: '',
  165. propertyName: '',
  166. siteRepairConfigId: '',
  167. st: '',
  168. type: '',
  169. },
  170. ],
  171. warnFactor: {},
  172. ruleId: {},
  173. pdinfo: {},
  174. zhiVlue: {},
  175. warnFormula: '',
  176. },
  177. queryParams: {},
  178. rules: {
  179. stCode: [
  180. {
  181. required: true,
  182. message: '请输入站点编号',
  183. trigger: 'blur',
  184. },
  185. ],
  186. warnLevel: [
  187. {
  188. required: true,
  189. message: '告警级别',
  190. trigger: 'blur',
  191. },
  192. ],
  193. warnType: [
  194. {
  195. required: true,
  196. message: '告警类型',
  197. trigger: 'blur',
  198. },
  199. ],
  200. },
  201. });
  202. const { queryParams, form, rules } = toRefs(data);
  203. const filterTableData = ref([]);
  204.  
  205. //批量添加修复因子
  206. function addCofig() {
  207. filterTableData.value.push([]);
  208. }
  209. let gsList = ref([]);
  210. function submitFill(type) {
  211. let { warnFactor, ruleId, zhiVlue, pdinfo } = form.value;
  212. let data = form.value;
  213. if (type == 2) {
  214. proxy.$refs['queryRef'].validate(valid => {
  215. if (valid) {
  216. if (warnFactor) {
  217. let st = Object.keys(warnFactor);
  218. form.value.warnFactor = Object.values(warnFactor).join(',');
  219. st.forEach(i => {
  220. form.value.warnFormula += warnFactor?.[i] + ruleId?.[i] + zhiVlue?.[i] + pdinfo?.[i];
  221. });
  222. }
  223. if (data.warnFormula.includes('undefined')) {
  224. form.value.warnFormula = data.warnFormula.replace('undefined', '');
  225. } else if (Object.keys(warnFactor).length > 1) {
  226. form.value.warnFormula = data.warnFormula.substring(0, data.warnFormula.length - 2);
  227. }
  228.  
  229. form.value.pcParseAssist = { pdinfo: data.pdinfo, ruleId: data.ruleId, zhiVlue: data.zhiVlue };
  230. delete form.value.pdinfo;
  231. delete form.value.ruleId;
  232. delete form.value.zhiVlue;
  233. if (infoList.type == 1) {
  234. rtuWarnConfigAdd({ ...form.value, ...queryParams.value }).then(({ code }) => {
  235. if (code == 200) {
  236. emits('closeEd');
  237. }
  238. });
  239. } else {
  240. rtuWarnConfigedit({ ...queryParams.value, ...form.value }).then(({ code }) => {
  241. if (code == 200) {
  242. emits('closeEd');
  243. }
  244. });
  245. }
  246. }
  247. });
  248. } else {
  249. gsList.value = [];
  250. if (warnFactor) {
  251. let arras = [];
  252. let st = Object.keys(warnFactor);
  253. jcsjList.value.forEach(i => {
  254. st.forEach(k => {
  255. if (i.monitorCode == warnFactor[k]) {
  256. arras.push({ ...i, ruleId: ruleId?.[k], zhiVlue: zhiVlue?.[k], pdinfo: pdinfo?.[k] });
  257. }
  258. });
  259. });
  260. arras.forEach(k => {
  261. gsList.value.push({ gjgs: k.monitorName + k.ruleId + k.zhiVlue + (!!k.pdinfo ? k.pdinfo : '') });
  262. });
  263. if (gsList.value.length == 0) {
  264. proxy.$modal.msgError('请先添加告警因子');
  265. }
  266. }
  267. }
  268. }
  269. /** 删除按钮操作 */
  270. function handleDelete(row) {
  271. const _ids = row.id || ids.value;
  272. proxy.$modal
  273. .confirm('是否确认删除?')
  274. .then(function () {
  275. filterTableData.value.splice(row, 1);
  276. form.value.warnFactor;
  277. delete form.value.warnFactor[`D${row}`];
  278. })
  279. .then(() => {
  280. proxy.$modal.msgSuccess('删除成功');
  281. })
  282. .catch(() => {});
  283. }
  284. //获取站点列表
  285. function getSearchSiteList() {
  286. rtuSiteInfoList().then(res => {
  287. projectList.value = res.data;
  288. queryParams.value.stCode = infoList.stCode;
  289. changeStation();
  290. });
  291. }
  292. // 选择站点获取对应监测项
  293. function changeStation() {
  294. rtuSiteMonitorLists(queryParams.value.stCode);
  295. }
  296. const rtuSiteMonitorLists = async code => {
  297. let { data } = await rtuSiteMonitorList({ stCode: code });
  298. jcsjList.value = data;
  299. };
  300.  
  301. function hamduLEdATE() {
  302. let array = infoList.warnFactor;
  303. queryParams.value = infoList;
  304. if (array) {
  305. let data = array.split(',');
  306. filterTableData.value = data;
  307. data.forEach((i, index) => {
  308. form.value.warnFactor[`D${index}`] = i;
  309. });
  310. let json = infoList.pcParseAssist;
  311. if (json !== 'null') {
  312. let { pdinfo, zhiVlue, ruleId } = JSON.parse(infoList.pcParseAssist);
  313. if (Object.values(pdinfo).length > 0) {
  314. Object.values(pdinfo).forEach((i, index) => {
  315. form.value.pdinfo[`D${index}`] = i;
  316. });
  317. }
  318. if (Object.values(zhiVlue).length > 0) {
  319. Object.values(zhiVlue).forEach((i, index) => {
  320. form.value.zhiVlue[`D${index}`] = i;
  321. });
  322. }
  323. if (Object.values(ruleId).length > 0) {
  324. Object.values(ruleId).forEach((i, index) => {
  325. form.value.ruleId[`D${index}`] = i;
  326. });
  327. }
  328. }
  329. }
  330. }
  331. onMounted(() => {
  332. hamduLEdATE();
  333. getSearchSiteList();
  334. });
  335. </script>
  336. <style lang="scss" scoped>
  337. .pop_btn {
  338. margin: 20px auto;
  339. }
  340. .warnContent {
  341. display: inline-block;
  342. width: 100%;
  343. height: 60px;
  344. line-height: 60px;
  345. padding-left: 10px;
  346. }
  347. </style>