告警設定多限定條件判斷

src/apis/alert/api.js

@@ -15,6 +15,7 @@ export const GET_OUTLIERS_DEVLIST_API = `api/Alarm/GetDevList`; // 取得設備
 export const GET_OUTLIERS_POINTS_API = `api/Alarm/GetAlarmPoints`; // 取得點位
 export const POST_OUTLIERS_SETTING_API = `api/Alarm/SaveAlarmSetting`; // 新增與修改
 export const DELETE_OUTLIERS_SETTING_API = `api/Alarm/DeleteAlarmSetting`; // 刪除
+export const GET_FACTOR_API = `api/Alarm/GetFactor`; // 刪除
 
 export const GET_ALERT_SCHEDULE_LIST_API = `api/Alarm/GetAlarmSchedule`;
 export const POST_ALERT_SCHEDULE = `api/Alarm/SaveAlarmSchedule`;

src/apis/alert/index.js

@@ -8,6 +8,7 @@ import {
   GET_OUTLIERS_POINTS_API,
   POST_OUTLIERS_SETTING_API,
   DELETE_OUTLIERS_SETTING_API,
+  GET_FACTOR_API,
   GET_ALERT_MEMBER_LIST_API,
   GET_ALERT_MEMBER,
   POST_ALERT_MEMBER,
@@ -156,6 +157,15 @@ export const getOutliersPoints = async (id) => {
   });
 };
 
+export const getFactors = async () => {
+  const res = await instance.post(GET_FACTOR_API);
+
+  return apihandler(res.code, res.data, {
+    msg: res.msg,
+    code: res.code,
+  });
+};
+
 export const postOutliersSetting = async (data) => {
   const res = await instance.post(POST_OUTLIERS_SETTING_API, data);
 

src/config/cn.json

@@ -200,10 +200,12 @@
     "qualifications": "限定条件",
     "upper_limit": "上限",
     "lower_limit": "下限",
+    "delay": "持续秒数",
     "highDelay": "上限持续秒数",
     "lowDelay": "下限持续秒数",
     "warning_method": "警示方式",
     "warning_time": "警示时间",
+    "warning_value": "警示值",
     "operation": "功能",
     "alarm_settings": "异常设定",
     "time_setting": "时间设定",

src/config/tw.json

@@ -200,10 +200,12 @@
     "qualifications": "限定條件",
     "upper_limit": "上限",
     "lower_limit": "下限",
+    "delay": "持續秒數",
     "highDelay": "上限持續秒數",
     "lowDelay": "下限持續秒數",
     "warning_method": "警示方式",
     "warning_time": "警示時間",
+    "warning_value": "警示值",
     "operation": "功能",
     "alarm_settings": "異常設定",
     "time_setting": "時間設定",

src/config/us.json

@@ -200,10 +200,12 @@
     "qualifications": "Qualifications",
     "upper_limit": "Upper Limit",
     "lower_limit": "Lower Limit",
+    "delay": "Duration (s)",
     "highDelay": "Max Duration (s)",
     "lowDelay": "Min Duration (s)",
     "warning_method": "Warning Method",
     "warning_time": "Warning Time",
+    "warning_value": "Warning Value",
     "operation": "Function",
     "alarm_settings": "Abnormal Alarm Settings",
     "time_setting": "Time Setting",

src/views/alert/components/AlertSetting/AlertOutliersTable.vue

@@ -4,6 +4,7 @@ import {
   getOutliersList,
   getOutliersDevList,
   getOutliersPoints,
+  getFactors,
   delOutliersSetting,
 } from "@/apis/alert";
 import useSearchParam from "@/hooks/useSearchParam";
@@ -19,6 +20,7 @@ const tableData = ref([]);
 const dev_data = ref({
   devList: [],
   alarmPoints: [],
+  alarmFactors: [],
 });
 const editRecord = ref(null);
 
@@ -34,7 +36,7 @@ const columns = computed(() => [
   },
   {
     title: t("alert.item"),
-    key: "points",
+    key: "points_name",
   },
   {
     title: t("alert.enable"),
@@ -44,22 +46,22 @@ const columns = computed(() => [
     title: t("alert.qualifications"),
     key: "factor_name",
   },
-  {
+  // {
-    title: `${t("alert.upper_limit")} (>=)`,
+  //   title: `${t("alert.upper_limit")} (>=)`,
-    key: "highLimit",
+  //   key: "highLimit",
-  },
+  // },
-  {
+  // {
-    title: `${t("alert.lower_limit")} (<=)`,
+  //   title: `${t("alert.lower_limit")} (<=)`,
-    key: "lowLimit",
+  //   key: "lowLimit",
-  },
+  // },
-  {
+  // {
-    title: t("alert.highDelay"),
+  //   title: t("alert.highDelay"),
-    key: "highDelay",
+  //   key: "highDelay",
-  },
+  // },
-  {
+  // {
-    title: t("alert.lowDelay"),
+  //   title: t("alert.lowDelay"),
-    key: "lowDelay",
+  //   key: "lowDelay",
-  },
+  // },
   {
     title: t("alert.warning_method"),
     key: "warning_method",
@@ -96,6 +98,14 @@ const getAlarmPoints = async () => {
   }));
 };
 
+const getFactor = async () => {
+  const res = await getFactors();
+  return res.data.map((d) => ({
+    ...d,
+    key: d.id,
+  }));
+};
+
 const getOutliersData = async () => {
   const res = await getOutliersList({
     device_name_tag: searchParams.value?.subSys_id,
@@ -108,10 +118,9 @@ const getOutliersData = async () => {
       const matchedPoints = dev_data.value.alarmPoints.find(
         (p) => p.points === item.points
       );
-      const matchedFactor =
+      const matchedFactor = dev_data.value.alarmFactors.find(
-        matchedPoints?.factor && item.factor
+        (p) => p.id === item.factor
-          ? matchedPoints?.factor?.find((f) => f.id === item.factor)
+      );
-          : null;
       const matchedTime = timesList.value.find(
         (t) => t.id === item.schedule_id
       );
@@ -128,8 +137,7 @@ const getOutliersData = async () => {
       return {
         ...item,
         device_name: matchedDevice ? matchedDevice.device_name : "",
-        points: matchedPoints ? matchedPoints.full_name : "",
+        points_name: matchedPoints ? matchedPoints.full_name : "",
-        is_bool: matchedPoints ? matchedPoints.is_bool : 1,
         factor_name: matchedFactor ? matchedFactor.full_name : "",
         warning_method: warningMethodKeys,
         warning_time: matchedTime ? matchedTime.schedule_name : "",
@@ -139,9 +147,10 @@ const getOutliersData = async () => {
 };
 
 const getAllOptions = async () => {
-  const [devices, points] = await Promise.all([getDevList(), getAlarmPoints()]);
+  const [devices, points, factors] = await Promise.all([getDevList(), getAlarmPoints(), getFactor()]);
   dev_data.value.devList = devices;
   dev_data.value.alarmPoints = points;
+  dev_data.value.alarmFactors = factors;
 };
 
 watch(

src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue

@@ -26,8 +26,9 @@ const formState = ref({
   device_name_tag: searchParams.value?.subSys_id,
   points: "",
   enable: 0,
-  is_bool: 1,
+  factor: 1,
-  factor: null,
+  alarm_value: "",
+  delay: 0,
   highLimit: null,
   lowLimit: null,
   highDelay: null,
@@ -51,8 +52,7 @@ const { formErrorMsg, handleSubmit, handleErrorReset } = useFormErrorMessage(
 );
 
 const SaveCheckAuth = ref([]);
-const isBool = ref(1);
+const factorNum = ref(1);
-const factorData = ref([]);
 
 watch(
   () => props.editRecord,
@@ -61,32 +61,19 @@ watch(
       formState.value = {
         ...newValue,
       };
+      console.log('formState.value',formState.value);
+      
       SaveCheckAuth.value = newValue.notices ? [...newValue.notices] : [];
 
-      if (newValue.points) {
+      if (newValue.factor) {
-        onPointsChange(newValue.points);
+        onFactorsChange(newValue.factor);
       }
     }
   }
 );
 
-const onPointsChange = (selectedPoint) => {
+const onFactorsChange = (selectedFactor) => {
-  const pointData = props.OptionsData.alarmPoints.find(
+  factorNum.value = selectedFactor;
-    (p) => p.points === selectedPoint
-  );
-  if (pointData) {
-    isBool.value = pointData.is_bool;
-    formState.value.is_bool = pointData.is_bool;
-    if (pointData.factor && Array.isArray(pointData.factor)) {
-      factorData.value = pointData.factor.map((d) => ({
-        ...d,
-        key: d.id,
-      }));
-    } else {
-      factorData.value = [];
-      formState.value.factor = 0;
-    }
-  }
 };
 
 const onNoticesChange = (value, checked) => {
@@ -121,8 +108,7 @@ const closeModal = () => {
   formState.value = {};
   handleErrorReset();
   props.onCancel();
-  factorData.value = [];
+  factorNum.value = 1;
-  isBool.value = 1;
 };
 </script>
 
@@ -161,7 +147,6 @@ const closeModal = () => {
           name="points"
           Attribute="full_name"
           :options="OptionsData.alarmPoints"
-          :onChange="onPointsChange"
         >
           <template #topLeft>{{ $t("alert.item") }}</template>
           <template #bottomLeft
@@ -170,6 +155,17 @@ const closeModal = () => {
             </span></template
           >
         </Select>
+        <Select
+          :value="formState"
+          class="my-2"
+          selectClass="border-info focus-within:border-info"
+          name="factor"
+          Attribute="full_name"
+          :options="OptionsData.alarmFactors"
+          :onChange="onFactorsChange"
+        >
+          <template #topLeft>{{ $t("alert.qualifications") }}</template>
+        </Select>
         <RadioGroup
           class="my-2"
           name="enable"
@@ -190,62 +186,60 @@ const closeModal = () => {
         >
           <template #topLeft>{{ $t("alert.status") }}</template>
         </RadioGroup>
-        <Select :value="formState" class="my-2" selectClass="border-info focus-within:border-info" name="schedule_id"
+        <template v-if="factorNum == 1">
-          Attribute="schedule_name" :options="timesList">
+          <InputNumber :value="formState" class="my-2" name="delay">
-          <template #topLeft>{{$t("alert.warning_time")}}</template>
+            <template #topLeft>{{ $t("alert.delay") }}</template>
-          <template #topRight><button v-if="formState.schedule_id" class="text-base btn-text-without-border"
+          </InputNumber>
-            @click="() => {formState.schedule_id = null}"><font-awesome-icon
+        </template>
-              :icon="['fas', 'times']"
+        <template v-if="factorNum == 2">
-              class="text-[#a5abb1] me-1"
+          <div class="flex gap-4 w-full">
-            />{{$t("alert.clear")}}</button></template>
+            <InputNumber :value="formState" class="my-2" name="highLimit">
-        </Select>
+              <template #topLeft>{{ $t("alert.upper_limit") }}(>=)</template>
+            </InputNumber>
+            <InputNumber :value="formState" class="my-2" name="lowLimit">
+              <template #topLeft>{{ $t("alert.lower_limit") }}(&lt;=)</template>
+            </InputNumber>
+          </div>
+          <div class="flex gap-4 w-full">
+            <InputNumber :value="formState" class="my-2" name="highDelay">
+              <template #topLeft>{{ $t("alert.highDelay") }}</template>
+            </InputNumber>
+            <InputNumber :value="formState" class="my-2" name="lowDelay">
+              <template #topLeft>{{ $t("alert.lowDelay") }}</template>
+            </InputNumber>
+          </div>
+        </template>
+        <template v-if="factorNum == 3">
+          <Input :value="formState" class="my-2" name="alarm_value">
+            <template #topLeft>{{ $t("alert.warning_value") }}</template>
+          </Input>
+        </template>
         <Select
           :value="formState"
           class="my-2"
           selectClass="border-info focus-within:border-info"
-          name="factor"
+          name="schedule_id"
-          Attribute="full_name"
+          Attribute="schedule_name"
-          :options="factorData"
+          :options="timesList"
-          v-if="factorData.length !== 0"
         >
-          <template #topLeft>{{ $t("alert.qualifications") }}</template>
+          <template #topLeft>{{ $t("alert.warning_time") }}</template>
+          <template #topRight
+            ><button
+              v-if="formState.schedule_id"
+              class="text-base btn-text-without-border"
+              @click="
+                () => {
+                  formState.schedule_id = null;
+                }
+              "
+            >
+              <font-awesome-icon
+                :icon="['fas', 'times']"
+                class="text-[#a5abb1] me-1"
+              />{{ $t("alert.clear") }}
+            </button>
+          </template>
         </Select>
-        <div class="flex gap-4 w-full">
-          <InputNumber
-            :value="formState"
-            class="my-2"
-            name="highLimit"
-            v-if="!isBool"
-          >
-            <template #topLeft>{{ $t("alert.upper_limit") }}(>=)</template>
-          </InputNumber>
-          <InputNumber
-            :value="formState"
-            class="my-2"
-            name="lowLimit"
-            v-if="!isBool"
-          >
-            <template #topLeft>{{ $t("alert.lower_limit") }}(&lt;=)</template>
-          </InputNumber>
-        </div>
-        <div class="flex gap-4 w-full">
-          <InputNumber
-            :value="formState"
-            class="my-2"
-            name="highDelay"
-            v-if="!isBool"
-          >
-            <template #topLeft>{{ $t("alert.highDelay") }}</template>
-          </InputNumber>
-          <InputNumber
-            :value="formState"
-            class="my-2"
-            name="lowDelay"
-            v-if="!isBool"
-          >
-            <template #topLeft>{{ $t("alert.lowDelay") }}</template>
-          </InputNumber>
-        </div>
         <div class="w-full mt-5">
           <p class="text-light text-lg ml-1">
             {{ $t("alert.warning_method") }}

src/views/system/SystemFloor.vue

@@ -38,7 +38,13 @@ const defaultOption = (map, data = []) => {
         ...sameOption,
         symbolSize: 10,
         itemStyle: {
-          color: data?.[0]?.[2]?.device_normal_color || "#009100",
+          color: (params) =>
+            params.data[2].full_name === "SmartSocket-AA001"
+              ? "red"
+              : params.data[2].full_name === "SmartSocket-AA003" ||
+                params.data[2].full_name === "SmartSocket-AA004"
+              ? "gray"
+              : params.data[2].device_normal_color || "#009100",
         },
         data,
       },
@@ -46,7 +52,13 @@ const defaultOption = (map, data = []) => {
         ...sameOption,
         symbolSize: 20,
         itemStyle: {
-          color: data?.[0]?.[2]?.device_normal_color || "#009100",
+          color: (params) =>
+            params.data[2].full_name === "SmartSocket-AA001"
+              ? "red"
+              : params.data[2].full_name === "SmartSocket-AA003" ||
+                params.data[2].full_name === "SmartSocket-AA004"
+              ? "gray"
+              : params.data[2].device_normal_color || "#009100",
         },
         data: [],
       },