From c4b5f9f0e548fcaabe33e7a208548c28124c8d2b Mon Sep 17 00:00:00 2001
From: zhangyao <zhangyao@wodcloud.com>
Date: Wed, 5 Jul 2023 16:41:56 +0800
Subject: [PATCH] feat:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化逻辑
---
 .../forewarning/rule-set/modules/custom.vue   | 61 ++++++--------
 .../forewarning/rule-set/modules/gateway.vue  | 48 +++++------
 .../forewarning/rule-set/modules/interface.js |  4 +-
 .../forewarning/rule-set/modules/static.vue   | 82 +++++++------------
 4 files changed, 76 insertions(+), 119 deletions(-)

diff --git a/src/page/main/forewarning/rule-set/modules/custom.vue b/src/page/main/forewarning/rule-set/modules/custom.vue
index d054a0b..6e5c9b2 100644
--- a/src/page/main/forewarning/rule-set/modules/custom.vue
+++ b/src/page/main/forewarning/rule-set/modules/custom.vue
@@ -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,
diff --git a/src/page/main/forewarning/rule-set/modules/gateway.vue b/src/page/main/forewarning/rule-set/modules/gateway.vue
index c112efc..4f9c22e 100644
--- a/src/page/main/forewarning/rule-set/modules/gateway.vue
+++ b/src/page/main/forewarning/rule-set/modules/gateway.vue
@@ -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,
diff --git a/src/page/main/forewarning/rule-set/modules/interface.js b/src/page/main/forewarning/rule-set/modules/interface.js
index f69a721..44e349d 100644
--- a/src/page/main/forewarning/rule-set/modules/interface.js
+++ b/src/page/main/forewarning/rule-set/modules/interface.js
@@ -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 ? '编辑' : '新增'}成功`)
diff --git a/src/page/main/forewarning/rule-set/modules/static.vue b/src/page/main/forewarning/rule-set/modules/static.vue
index 12daf9d..b6a65ea 100644
--- a/src/page/main/forewarning/rule-set/modules/static.vue
+++ b/src/page/main/forewarning/rule-set/modules/static.vue
@@ -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,
-- 
2.26.0