Newer
Older
KaiFengPC / src / views / floodSys / scada / alertService / components / abilityAnalysis.vue
@鲁yixuan 鲁yixuan on 30 Aug 10 KB 1
  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. >
  13. <el-option v-for="dict in projectList" :key="dict.stationCode" :label="dict.stationName" :value="dict.stationCode"></el-option>
  14. </el-select>
  15. </el-form-item>
  16.  
  17. <el-form-item label="告警类型:" prop="warnType" style="width: 45%">
  18. <el-select v-model="queryParams.warnType" placeholder="请选告警类型" style="width: 100%">
  19. <el-option v-for="dict in searchSiteList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
  20. </el-select>
  21. </el-form-item>
  22.  
  23. <el-form-item label="告警级别:" prop="warnLevel" style="width: 45%">
  24. <el-select v-model="queryParams.warnLevel" placeholder="请选告警级别" style="width: 100%">
  25. <el-option v-for="dict in dataTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
  26. </el-select>
  27. </el-form-item>
  28. <el-form-item label="时间阈值(分钟):" prop="timeThreshold" style="width: 45%">
  29. <el-input type="number" v-model="queryParams.timeThreshold" placeholder="时间阈值"></el-input>
  30. </el-form-item>
  31.  
  32. <el-form-item label="备注:" prop="dateRange" style="width: 100%">
  33. <el-input type="textarea" show-word-limit maxlength="200" :autosize="{ minRows: 4 }" v-model="queryParams.remark"></el-input>
  34. </el-form-item>
  35. </el-form>
  36. <p>告警条件</p>
  37. <br />
  38. <el-table :data="filterTableData" style="width: 100%">
  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="监测项" clearable>
  49. <el-option v-for="item in jcsjList" :key="item.pointKey" :label="item.pointName" :value="item.pointKey"></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="判断" clearable>
  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="判断" clearable>
  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 || '' }}</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 { onMounted } from 'vue';
  93. import { ElMessage } from 'element-plus';
  94. import { plcWarnConfigAdd, plcWarnConfigedit } from '@/api/scada/AlertService';
  95. import { getInfolist } from '@/api/scada/stationInfo';
  96. import { getInfo } from '@/api/scada/plcPointInfo';
  97. const { infoList } = defineProps(['infoList']);
  98. const { proxy } = getCurrentInstance();
  99. const activeName = ref('first');
  100. const showSearch = ref(true);
  101. const emits = defineEmits();
  102. const ids = ref([]);
  103. let jcsjList = ref([]);
  104. const dataTypes = reactive([
  105. { label: '告警', value: 'warn' },
  106. { label: '预警', value: 'early_warn' },
  107. ]);
  108. const projectList = ref([]);
  109. const searchSiteList = ref([
  110. {
  111. dictValue: 'water_level',
  112. dictLabel: '水位',
  113. },
  114. {
  115. dictValue: 'flow',
  116. dictLabel: '流量',
  117. },
  118. {
  119. dictValue: 'rain',
  120. dictLabel: '降雨 ',
  121. },
  122. {
  123. dictValue: 'quality',
  124. dictLabel: '水质 ',
  125. },
  126. {
  127. dictValue: 'other',
  128. dictLabel: '其它 ',
  129. },
  130. ]); //站点搜索列表
  131.  
  132. const TYList = ref([
  133. {
  134. dictValue: '>',
  135. dictLabel: '>',
  136. },
  137. {
  138. dictValue: '>=',
  139. dictLabel: '>=',
  140. },
  141. {
  142. dictValue: '<',
  143. dictLabel: '< ',
  144. },
  145. {
  146. dictValue: '<=',
  147. dictLabel: '<= ',
  148. },
  149. ]);
  150. const ljLIST = ref([
  151. {
  152. dictValue: '&&',
  153. dictLabel: '&&',
  154. },
  155. {
  156. dictValue: '||',
  157. dictLabel: '||',
  158. },
  159. ]);
  160. const data = reactive({
  161. form: {
  162. siteRepairPropertyConfigList: [
  163. {
  164. id: '',
  165. isEnable: 1,
  166. maxValue: '',
  167. minValue: '',
  168. property: '',
  169. propertyName: '',
  170. siteRepairConfigId: '',
  171. st: '',
  172. type: '',
  173. },
  174. ],
  175. warnFactor: {},
  176. ruleId: {},
  177. pdinfo: {},
  178. zhiVlue: {},
  179. warnFormula: '',
  180. },
  181. queryParams: {},
  182. rules: {
  183. stCode: [
  184. {
  185. required: true,
  186. message: '请输入站点编号',
  187. trigger: 'blur',
  188. },
  189. ],
  190. warnLevel: [
  191. {
  192. required: true,
  193. message: '告警级别',
  194. trigger: 'blur',
  195. },
  196. ],
  197. warnType: [
  198. {
  199. required: true,
  200. message: '告警类型',
  201. trigger: 'blur',
  202. },
  203. ],
  204. },
  205. });
  206. const { queryParams, form, rules } = toRefs(data);
  207. const filterTableData = ref([]);
  208.  
  209. //批量添加修复因子
  210. function addCofig() {
  211. filterTableData.value.push([]);
  212. }
  213. let gsList = ref([]);
  214. function submitFill(type) {
  215. let { warnFactor, ruleId, zhiVlue, pdinfo } = form.value;
  216. // console.log(warnFactor, 'form.value1111');
  217. let data = form.value;
  218. if (type == 2) {
  219. proxy.$refs['queryRef'].validate(valid => {
  220. if (valid) {
  221. if (warnFactor) {
  222. let st = Object.keys(warnFactor);
  223. form.value.warnFactor = Object.values(warnFactor).join(',');
  224. st.forEach(i => {
  225. form.value.warnFormula += warnFactor?.[i] + ruleId?.[i] + zhiVlue?.[i] + pdinfo?.[i];
  226. });
  227. }
  228. // form.value.warnFormula = data.warnFormula.substring(0, data.warnFormula.length - 2);
  229. form.value.warnFormula = data.warnFormula.replace(/undefined/, '');
  230. form.value.pcParseAssist = { pdinfo: data.pdinfo, ruleId: data.ruleId, zhiVlue: data.zhiVlue };
  231. delete form.value.pdinfo;
  232. delete form.value.ruleId;
  233. delete form.value.zhiVlue;
  234. if (infoList.type == 1) {
  235. plcWarnConfigAdd({ ...form.value, ...queryParams.value }).then(({ code }) => {
  236. if (code == 200) {
  237. emits('closeEd');
  238. }
  239. });
  240. } else {
  241. plcWarnConfigedit({ ...queryParams.value, ...form.value }).then(({ code }) => {
  242. if (code == 200) {
  243. emits('closeEd');
  244. }
  245. });
  246. }
  247. }
  248. });
  249. } else {
  250. gsList.value = [];
  251. if (warnFactor) {
  252. let arras = [];
  253. let st = Object.keys(warnFactor);
  254. jcsjList.value.forEach(i => {
  255. st.forEach(k => {
  256. if (i.pointKey == warnFactor[k]) {
  257. arras.push({ ...i, ruleId: ruleId?.[k], zhiVlue: zhiVlue?.[k], pdinfo: pdinfo?.[k] });
  258. }
  259. });
  260. });
  261. arras.forEach(k => {
  262. gsList.value.push({ gjgs: (k.pointName || '') + (k.ruleId || '') + (k.zhiVlue || '') + (k.pdinfo || '') });
  263. console.log(gsList.value, 'gsList.value');
  264. });
  265. if (gsList.value.length == 0) {
  266. ElMessage({
  267. message: '请先添加告警因子',
  268. type: 'warning',
  269. });
  270. }
  271. }
  272. }
  273. }
  274. /** 删除按钮操作 */
  275. function handleDelete(row) {
  276. console.log(row, 'row');
  277. const _ids = row.id || ids.value;
  278. proxy.$modal
  279. .confirm('是否确认删除?')
  280. .then(function () {
  281. filterTableData.value.splice(row, 1);
  282. form.value.warnFactor;
  283. delete form.value.warnFactor[`D${row}`];
  284. })
  285. .then(() => {
  286. proxy.$modal.msgSuccess('删除成功');
  287. })
  288. .catch(() => {});
  289. }
  290. //获取站点列表
  291. function getSearchSiteList() {
  292. getInfolist().then(res => {
  293. projectList.value = res.data;
  294. if (infoList.type == 1) queryParams.value.stCode = res.data[0].stCode;
  295. changeStation();
  296. });
  297. }
  298. // 选择站点获取对应监测项
  299. function changeStation() {
  300. // form.value.warnFactor.D0 = '';
  301. rtuSiteMonitorLists(queryParams.value.stCode);
  302. }
  303. const rtuSiteMonitorLists = async code => {
  304. let { data } = await getInfo({ stationCode: code });
  305. jcsjList.value = data;
  306. };
  307.  
  308. function hamduLEdATE() {
  309. let array = infoList.warnFactor;
  310. queryParams.value = infoList;
  311. if (array) {
  312. let data = array.split(',');
  313. filterTableData.value = data;
  314. console.log(filterTableData.value, 'filterTableData.value');
  315. data.forEach((i, index) => {
  316. form.value.warnFactor[`D${index}`] = i;
  317. });
  318. let json = infoList.pcParseAssist;
  319. if (json !== 'null') {
  320. let { pdinfo, zhiVlue, ruleId } = JSON.parse(infoList.pcParseAssist);
  321. // let a = '{"pdinfo":{"D0":"||"},"ruleId":{"D0":">"},"zhiVlue":{"D0":"11"}}';
  322. // let { pdinfo, zhiVlue, ruleId } = JSON.parse(a);
  323. if (Object.values(pdinfo).length > 0) {
  324. Object.values(pdinfo).forEach((i, index) => {
  325. form.value.pdinfo[`D${index}`] = i;
  326. });
  327. }
  328. if (Object.values(zhiVlue).length > 0) {
  329. Object.values(zhiVlue).forEach((i, index) => {
  330. form.value.zhiVlue[`D${index}`] = i;
  331. });
  332. }
  333. if (Object.values(ruleId).length > 0) {
  334. Object.values(ruleId).forEach((i, index) => {
  335. form.value.ruleId[`D${index}`] = i;
  336. });
  337. }
  338. }
  339. }
  340. }
  341. onMounted(() => {
  342. console.log('infoList--', infoList);
  343. hamduLEdATE();
  344. getSearchSiteList();
  345. rtuSiteMonitorLists();
  346. });
  347. </script>
  348. <style lang="scss" scoped>
  349. .pop_btn {
  350. margin: 20px auto;
  351. }
  352.  
  353. .warnContent {
  354. display: inline-block;
  355. width: 100%;
  356. height: 60px;
  357. line-height: 60px;
  358. padding-left: 10px;
  359. }
  360. </style>