Commit c4b5f9f0 authored by 张耀's avatar 张耀

feat:

优化逻辑
parent 5715b4e7
......@@ -147,7 +147,7 @@
</template>
<script setup>
import { computed, onBeforeMount, reactive, ref, watch } from "vue";
import { computed, onBeforeMount, reactive, ref } from "vue";
import gapTitle from "@/components/gap-title.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
......@@ -400,43 +400,29 @@ const createRule = (index = -1) => {
const removeRule = (index) => {
state.form.ruleRows.splice(index, 1);
};
watch(
() => props.form,
(f) => {
if (!f) {
createRule();
return;
}
state.form.warn_target = f.warn_target;
state.form.warn_type = f.warn_type;
state.form.warn_indicator = f.warn_indicator;
state.form.indicator_expression = f.indicator_expression;
state.form.rule_type = f.rule_type;
state.form.risk_level = f.risk_level;
state.form.ruleRows =
f?.ruleRows?.map((e) => {
return {
from: e.from,
to: e.to,
risk_level: e.risk_level,
};
}) || [];
if (state.form.ruleRows.length == 0) {
createRule();
}
},
{
deep: true,
immediate: true,
const info = () => {
if (!info) {
createRule();
return;
}
);
// watch(
// () => state.form,
// (n) => {
// console.log(state.form);
// },
// { deep: true }
// );
state.form.warn_target = props.form.warn_target;
state.form.warn_type = props.form.warn_type;
state.form.warn_indicator = props.form.warn_indicator;
state.form.indicator_expression = props.form.indicator_expression;
state.form.rule_type = props.form.rule_type;
state.form.risk_level = props.form.risk_level;
state.form.ruleRows =
props.form?.ruleRows?.map((e) => {
return {
from: e.from,
to: e.to,
risk_level: e.risk_level,
};
}) || [];
if (state.form.ruleRows.length == 0) {
createRule();
}
};
const formatForm = computed(() => {
return {
...state.form,
......@@ -445,6 +431,7 @@ const formatForm = computed(() => {
});
onBeforeMount(() => {
getRuleTypeOptions();
info();
});
defineExpose({
Submit,
......
......@@ -81,7 +81,7 @@
</template>
<script setup>
import { computed, nextTick, reactive, ref, watch } from "vue";
import { computed, nextTick, onBeforeMount, reactive, ref } from "vue";
import gapTitle from "@/components/gap-title.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
......@@ -303,33 +303,29 @@ const changeWarningThresholdTo = (index) => {
const removeRule = (index) => {
state.form.ruleRows.splice(index, 1);
};
watch(
() => props.form,
(n) => {
if (!n || n?.length == 0) {
getRuleTypeOptions();
const info = () => {
if (!props.form || props.form?.length == 0) {
getRuleTypeOptions();
createRule();
return;
}
getRuleTypeOptions(() => {
state.form.ruleRows =
props.form?.map((e) => {
return {
from: e.from,
to: e.to,
risk_level: e.risk_level,
};
}) || [];
if (state.form.ruleRows.length == 0) {
createRule();
return;
}
getRuleTypeOptions(() => {
state.form.ruleRows =
n?.map((e) => {
return {
from: e.from,
to: e.to,
risk_level: e.risk_level,
};
}) || [];
if (state.form.ruleRows.length == 0) {
createRule();
}
});
},
{
deep: true,
immediate: true,
}
);
});
};
onBeforeMount(() => {
info();
});
defineExpose({
Submit,
form: state.form,
......
......@@ -71,7 +71,7 @@ const setParams = (res, { id }) => {
}
}),
// // 预警规则(下拉)
// alert_rule_type: res.module_data.alert_rule_type,
alert_rule_type: res.type_com_ref.alert_rule_type,
}
}
}
......@@ -105,8 +105,6 @@ const setParams = (res, { id }) => {
}
export const Save = (res, p, cb) => {
let params = setParams(res, p);
console.log('params: ', params);
return;
axios[p.id ? 'put' : 'post']('/v1/api/alert_rules', params).then(res => {
if (res.data.code == 200) {
ElMessage.success(`${p.id ? '编辑' : '新增'}成功`)
......
......@@ -33,11 +33,7 @@
<div class="warning-scope-main">
<div class="warn-scpoe-form" v-for="(item, index) in state.form.warning_scpoe_form" :key="index">
<el-form-item :label="item.chinese_name">
<el-select
class="warn-scpoe-select"
v-model="item.select"
style="width: 114px"
@change="changeSelect(index, item)">
<el-select class="warn-scpoe-select" v-model="item.select" style="width: 114px">
<el-option v-for="(value, key) in selectRule" :key="key" :label="value" :value="key" />
</el-select>
</el-form-item>
......@@ -67,8 +63,7 @@
:loading="item.loading"
remote
:disabled="item.select == 'all'"
:remote-method="(query) => remoteMethod(query, index, item)"
multiple>
:remote-method="(query) => remoteMethod(query, index, item)">
<el-option v-for="item in item.options" :key="item" :label="item" :value="item"> </el-option>
</el-select>
</el-form-item>
......@@ -89,20 +84,13 @@
</div>
</div>
</div>
<!-- <component
ref="warn_type_com"
:is="warnTypeCom[formFormat.warn_type]"
:type="formFormat.warn_type"
:form="warn_type_com_form"
v-if="formFormat.warn_type"></component> -->
</el-form>
</div>
</template>
<script setup>
import { computed, nextTick, onMounted, reactive, ref, shallowReactive, watch } from "vue";
import { computed, nextTick, onMounted, reactive, ref, shallowReactive } from "vue";
import gapTitle from "@/components/gap-title.vue";
// import CommonCom from "./common-com.vue";
import Gateway from "./gateway.vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
......@@ -132,12 +120,6 @@ const riskLevelOptions = ref([
name: "低风险",
},
]);
// const warnTypeCom = shallowReactive({
// colony: CommonCom,
// node: CommonCom,
// group: CommonCom,
// gateway: Gateway,
// });
const props = defineProps({
form: {
type: Object,
......@@ -148,13 +130,13 @@ const props = defineProps({
default: false,
},
});
const changeSelect = (index, item) => {
if (showSelect.includes(item.is_linked)) {
state.form.warning_scpoe_form[index].value = [];
} else {
state.form.warning_scpoe_form[index].value = "";
}
};
// const changeSelect = (index, item) => {
// if (showSelect.includes(item.is_linked)) {
// state.form.warning_scpoe_form[index].value = [];
// } else {
// state.form.warning_scpoe_form[index].value = "";
// }
// };
const validateValue = (rule, value, callback, item, index) => {
if (!item.is_required || item.select == "all") return callback();
if (item.value == "") {
......@@ -207,17 +189,12 @@ const chooseWarnIndicator = () => {
});
};
const remoteMethod = (query, index, item) => {
console.log("query, index, item: ", query, index, item);
// if (!query) {
// state.form.warning_scpoe_form[index].options = [];
// return;
// }
state.form.warning_scpoe_form[index].loading = true;
const params = {
// metric_name: item.metric_name,
metric_name: "grpc_client_handled_total",
// metric_label: item.metric_label,
metric_label: "grpc_method",
metric_name: item.metric_name,
// metric_name: "grpc_client_handled_total",
metric_label: item.metric_label,
// metric_label: "grpc_method",
value: query,
};
axios.get(`/v1/api/prometheus/value`, { params }).then((res) => {
......@@ -249,7 +226,7 @@ const formFormat = computed(() => {
warn_target,
warn_type,
isEmpty: isEmpty.value,
// module_data: module_data.value
alert_rule_type: module_data.value,
};
if (!isEmpty.value) {
obj = {
......@@ -262,7 +239,6 @@ const formFormat = computed(() => {
const warningIndexOptions = ref({});
const cascader_ref = ref(null);
const changeWarnStaticType = async () => {
// const { data } = cascader_ref.value.getCheckedNodes()[0];
let class_id = state.form.warn_type[1];
let params = { page: 1, page_size: 10000000000000, class_id };
getWarningIndicator(params);
......@@ -308,22 +284,22 @@ const ruleHeaders = [
},
];
const rule_rows = computed(() => props.form?.ruleRows || []);
watch(
() => props.form,
(n) => {
if (!n) return;
state.form.warn_type = n.warn_target && n.warn_type ? [n.warn_target, n.warn_type] : [];
state.form.warn_indicator = n.warn_indicator;
alert_rule_type.value = n.rule_type || "1";
let params = { page: 1, page_size: 10000000000000, class_id: n.warn_type };
getWarningIndicator(params, () => {
state.form.warning_scpoe_form = n?.warning_scpoe_form || [];
});
},
{ deep: true, immediate: true }
);
const info = () => {
console.log(1);
state.form.warn_type =
props.form.warn_target && props.form.warn_type ? [props.form.warn_target, props.form.warn_type] : [];
state.form.warn_indicator = props.form.warn_indicator;
alert_rule_type.value = props.form.rule_type || "1";
let params = { page: 1, page_size: 10000000000000, class_id: props.form.warn_type };
getWarningIndicator(params, () => {
state.form.warning_scpoe_form = props.form?.warning_scpoe_form || [];
});
};
onMounted(() => {
getStaticTypeOptions();
if (props.form) {
info();
}
});
defineExpose({
Submit,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment