- <template>
- <!-- 新增告警弹窗 -->
- <div class="publicContainer">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" :rules="rules" label-width="auto">
- <el-form-item label="站点:" prop="stCode" style="width: 45%">
- <el-select
- v-model="queryParams.stCode"
- placeholder="请选择站点"
- style="width: 100%"
- @change="changeStation"
- :disabled="!!!infoList.type"
- filterable
- >
- <el-option v-for="dict in projectList" :key="dict.stCode" :label="dict.stName" :value="dict.stCode"></el-option>
- </el-select>
- </el-form-item>
-
- <el-form-item label="告警类型:" prop="warnType" style="width: 45%">
- <el-select v-model="queryParams.warnType" placeholder="请选告警级别" style="width: 100%" filterable>
- <el-option v-for="dict in searchSiteList" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
- </el-select>
- </el-form-item>
-
- <el-form-item label="告警级别:" prop="warnLevel" style="width: 45%">
- <el-select v-model="queryParams.warnLevel" placeholder="请选告警类型" style="width: 100%">
- <el-option v-for="dict in dataTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="时间阈值(分钟):" prop="timeThreshold" style="width: 45%">
- <el-input type="number" v-model="queryParams.timeThreshold" placeholder="时间阈值"></el-input>
- </el-form-item>
-
- <el-form-item label="备注:" prop="dateRange" style="width: 100%">
- <el-input type="textarea" show-word-limit maxlength="200" :autosize="{ minRows: 4 }" v-model="queryParams.remark"></el-input>
- </el-form-item>
- </el-form>
- <p>告警公式</p>
- <el-table :data="filterTableData" style="width: 100%" max-height="300">
- <el-table-column type="index" width="50">
- <template slot="header" #header="scope">
- <el-icon @click="addCofig" style="color: skyblue; font-size: 22px">
- <CirclePlus />
- </el-icon>
- </template>
- </el-table-column>
- <el-table-column label="监测项" prop="warnFactor">
- <template #default="scope">
- <el-select v-model="form.warnFactor[`D${scope.$index}`]" placeholder="监测项">
- <el-option v-for="item in jcsjList" :key="item.monitorCode" :label="item.monitorName" :value="item.monitorCode"></el-option>
- </el-select>
- </template>
- </el-table-column>
- <el-table-column label="判断" prop="ruleId">
- <template #default="scope">
- <el-select v-model="form.ruleId[`D${scope.$index}`]" placeholder="判断">
- <el-option v-for="item in TYList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
- </el-select>
- </template>
- </el-table-column>
- <el-table-column label="值" prop="name">
- <template #default="scope">
- <el-input placeholder="值" type="number" v-model="form.zhiVlue[`D${scope.$index}`]"></el-input>
- </template>
- </el-table-column>
- <el-table-column label="连接" prop="pdinfo">
- <template #default="scope">
- <el-select v-model="form.pdinfo[`D${scope.$index}`]" placeholder="连接">
- <el-option v-for="item in ljLIST" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
- </el-select>
- </template>
- </el-table-column>
- <el-table-column align="right">
- <template #header>
- <el-button @click="submitFill(1)" type="primary" size="small"> 获取告警公式 </el-button>
- </template>
- <template #default="scope">
- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <span class="warnContent" v-if="gsList.length > 0">
- 告警公式: <span v-for="i in gsList">{{ i.gjgs ? i.gjgs : '' }}</span>
- </span>
- <div class="pop_btn" style="text-align: center">
- <el-button type="primary" @click="submitFill(2)">确定</el-button>
- <el-button @click="emits('closeEd')">取消</el-button>
- </div>
- </div>
- </template>
-
- <script setup>
- import { rtuWarnConfigAdd, rtuSiteMonitorList, rtuWarnConfigedit, rtuSiteInfoList } from '@/api/dataAnalysis/AlertService';
-
- const { infoList } = defineProps(['infoList']);
- const { proxy } = getCurrentInstance();
- const showSearch = ref(true);
- const emits = defineEmits();
- const ids = ref([]);
- let jcsjList = ref([]);
- const dataTypes = reactive([
- { label: '告警', value: 'warn' },
- { label: '预警', value: 'early_warn' },
- ]);
- const projectList = ref([]);
- const searchSiteList = ref([
- {
- dictValue: 'water_level',
- dictLabel: '水位',
- },
- {
- dictValue: 'flow',
- dictLabel: '流量',
- },
- {
- dictValue: 'rain',
- dictLabel: '降雨 ',
- },
- {
- dictValue: 'quality',
- dictLabel: '水质 ',
- },
- {
- dictValue: 'other',
- dictLabel: '其它 ',
- },
- ]); //站点搜索列表
-
- const TYList = ref([
- {
- dictValue: '>',
- dictLabel: '>',
- },
- {
- dictValue: '>=',
- dictLabel: '>=',
- },
- {
- dictValue: '<',
- dictLabel: '< ',
- },
- {
- dictValue: '<=',
- dictLabel: '<= ',
- },
- ]);
- const ljLIST = ref([
- {
- dictValue: '&&',
- dictLabel: '&&',
- },
- {
- dictValue: '||',
- dictLabel: '||',
- },
- ]);
- const data = reactive({
- form: {
- siteRepairPropertyConfigList: [
- {
- id: '',
- isEnable: 1,
- maxValue: '',
- minValue: '',
- property: '',
- propertyName: '',
- siteRepairConfigId: '',
- st: '',
- type: '',
- },
- ],
- warnFactor: {},
- ruleId: {},
- pdinfo: {},
- zhiVlue: {},
- warnFormula: '',
- },
- queryParams: {},
- rules: {
- stCode: [
- {
- required: true,
- message: '请输入站点编号',
- trigger: 'blur',
- },
- ],
- warnLevel: [
- {
- required: true,
- message: '告警级别',
- trigger: 'blur',
- },
- ],
- warnType: [
- {
- required: true,
- message: '告警类型',
- trigger: 'blur',
- },
- ],
- },
- });
- const { queryParams, form, rules } = toRefs(data);
- const filterTableData = ref([]);
-
- //批量添加修复因子
- function addCofig() {
- filterTableData.value.push([]);
- }
- let gsList = ref([]);
- function submitFill(type) {
- let { warnFactor, ruleId, zhiVlue, pdinfo } = form.value;
- let data = form.value;
- if (type == 2) {
- proxy.$refs['queryRef'].validate(valid => {
- if (valid) {
- if (warnFactor) {
- let st = Object.keys(warnFactor);
- form.value.warnFactor = Object.values(warnFactor).join(',');
- st.forEach(i => {
- form.value.warnFormula += warnFactor?.[i] + ruleId?.[i] + zhiVlue?.[i] + pdinfo?.[i];
- });
- }
- if (data.warnFormula.includes('undefined')) {
- form.value.warnFormula = data.warnFormula.replace('undefined', '');
- } else if (Object.keys(warnFactor).length > 1) {
- form.value.warnFormula = data.warnFormula.substring(0, data.warnFormula.length - 2);
- }
-
- form.value.pcParseAssist = { pdinfo: data.pdinfo, ruleId: data.ruleId, zhiVlue: data.zhiVlue };
- delete form.value.pdinfo;
- delete form.value.ruleId;
- delete form.value.zhiVlue;
- if (infoList.type == 1) {
- rtuWarnConfigAdd({ ...form.value, ...queryParams.value }).then(({ code }) => {
- if (code == 200) {
- emits('closeEd');
- }
- });
- } else {
- rtuWarnConfigedit({ ...queryParams.value, ...form.value }).then(({ code }) => {
- if (code == 200) {
- emits('closeEd');
- }
- });
- }
- }
- });
- } else {
- gsList.value = [];
- if (warnFactor) {
- let arras = [];
- let st = Object.keys(warnFactor);
- jcsjList.value.forEach(i => {
- st.forEach(k => {
- if (i.monitorCode == warnFactor[k]) {
- arras.push({ ...i, ruleId: ruleId?.[k], zhiVlue: zhiVlue?.[k], pdinfo: pdinfo?.[k] });
- }
- });
- });
- arras.forEach(k => {
- gsList.value.push({ gjgs: k.monitorName + k.ruleId + k.zhiVlue + (!!k.pdinfo ? k.pdinfo : '') });
- });
- if (gsList.value.length == 0) {
- proxy.$modal.msgError('请先添加告警因子');
- }
- }
- }
- }
- /** 删除按钮操作 */
- function handleDelete(row) {
- const _ids = row.id || ids.value;
- proxy.$modal
- .confirm('是否确认删除?')
- .then(function () {
- filterTableData.value.splice(row, 1);
- form.value.warnFactor;
- delete form.value.warnFactor[`D${row}`];
- })
- .then(() => {
- proxy.$modal.msgSuccess('删除成功');
- })
- .catch(() => {});
- }
- //获取站点列表
- function getSearchSiteList() {
- rtuSiteInfoList().then(res => {
- projectList.value = res.data;
- queryParams.value.stCode = infoList.stCode;
- changeStation();
- });
- }
- // 选择站点获取对应监测项
- function changeStation() {
- rtuSiteMonitorLists(queryParams.value.stCode);
- }
- const rtuSiteMonitorLists = async code => {
- let { data } = await rtuSiteMonitorList({ stCode: code });
- jcsjList.value = data;
- };
-
- function hamduLEdATE() {
- let array = infoList.warnFactor;
- queryParams.value = infoList;
- if (array) {
- let data = array.split(',');
- filterTableData.value = data;
- data.forEach((i, index) => {
- form.value.warnFactor[`D${index}`] = i;
- });
- let json = infoList.pcParseAssist;
- if (json !== 'null') {
- let { pdinfo, zhiVlue, ruleId } = JSON.parse(infoList.pcParseAssist);
- if (Object.values(pdinfo).length > 0) {
- Object.values(pdinfo).forEach((i, index) => {
- form.value.pdinfo[`D${index}`] = i;
- });
- }
- if (Object.values(zhiVlue).length > 0) {
- Object.values(zhiVlue).forEach((i, index) => {
- form.value.zhiVlue[`D${index}`] = i;
- });
- }
- if (Object.values(ruleId).length > 0) {
- Object.values(ruleId).forEach((i, index) => {
- form.value.ruleId[`D${index}`] = i;
- });
- }
- }
- }
- }
- onMounted(() => {
- hamduLEdATE();
- getSearchSiteList();
- });
- </script>
- <style lang="scss" scoped>
- .pop_btn {
- margin: 20px auto;
- }
- .warnContent {
- display: inline-block;
- width: 100%;
- height: 60px;
- line-height: 60px;
- padding-left: 10px;
- }
- </style>