Merge branch 'ft-dev' into 'main'

设备配置待完善报警规则处理

See merge request huang/yun-teng-iot-front!39

@@ -76,7 +76,6 @@ export function createPermissionGuard(router: Router) {
       to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
     ) {
       // Jump to the 404 page after processing the login
-      console.log(router);
       getMenuList().then((res) => {
         if (res) {
           console.log(res);

@@ -22,11 +22,6 @@ export const columns: BasicColumn[] = [
     width: 180,
   },
   {
-    title: '绑定规则链',
-    dataIndex: 'defaultRuleChainId',
-    width: 180,
-  },
-  {
     title: '描述',
     dataIndex: 'description',
     width: 180,

@@ -42,7 +42,7 @@
                     class="cursor-pointer ml-4"
                     style="font-size: 20px"
                 /></p>
-                <p class="mt-4 ml-4">dashboard:</p>
+                <BasicForm @register="dashboardForm" />
               </div>
             </div>
             <div class="w-1/4 flex justify-center">
@@ -60,9 +60,47 @@
           ><PlusCircleOutlined />添加创建条件</a-button
         >
         <p>清除报警规则</p>
-        <BasicForm @register="registerFormClearAlarm">
-          <template #formHeader> </template>
-        </BasicForm>
+        <template v-for="(childItem, createIndex) in item.alarms" :key="childItem.id">
+          <div class="aic mb-4" style="border: 1px solid #bfbfbf">
+            <div class="w-3/4">
+              <div>
+                <p style="color: #f5594e" class="mt-4 ml-4"
+                  >请添加报警规则条件
+                  <PlusOutlined
+                    @click="handleOpenAlaramRuleConditions"
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >启用规则：始终启用
+                  <EditOutlined
+                    @click="handleOpenEnableRule"
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >详情模板：<EditOutlined
+                    @click="handleOpenDetailTemplate"
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
+                /></p>
+                <BasicForm @register="dashboardForm" />
+              </div>
+            </div>
+            <div class="w-1/4 flex justify-center">
+              <Tooltip title="移除">
+                <MinusCircleOutlined
+                  style="font-size: 25px; color: #305680"
+                  class="cursor-pointer"
+                  @click="deleteCondition(index, createIndex)"
+                />
+              </Tooltip>
+            </div>
+          </div>
+        </template>
+        <a-button class="mt-5" @click="addCreateRole(index)"
+          ><PlusCircleOutlined />添加清除条件</a-button
+        >
       </CollapseContainer>
     </template>
   </div>
@@ -94,11 +132,17 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, unref, getCurrentInstance } from 'vue';
+  import { defineComponent, ref, unref, getCurrentInstance, watch, onMounted } from 'vue';
   import type { alarmListItem } from '../types/index';
   import { CollapseContainer } from '/@/components/Container/index';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { step3Schemas, step3HighSetting, step3CreateAlarm, step3ClearAlarm } from './data';
+  import {
+    step3Schemas,
+    step3HighSetting,
+    step3CreateAlarm,
+    dashboardFormScheme,
+    isWhereType,
+  } from './data';
   import {
     DeleteOutlined,
     MinusCircleOutlined,
@@ -130,7 +174,6 @@
     emits: ['prev', 'next'],
     setup(_, { emit }) {
       const { proxy } = getCurrentInstance();
-      // const isDetailTemplateEnableRuleAlarmRuleConditions = ref(true);
       const getChildData1 = ref(null);
       const getChildData2 = ref(null);
       const getChildData3 = ref(null);
@@ -138,6 +181,11 @@
       const getAllFormData: any = ref({});
       const alarmss: any = ref([]);
       const emptyObj: any = ref({});
+      const detailObj: any = ref({});
+      const ruleObj: any = ref({});
+      const enableObj: any = ref({});
+      const additionalObj: any = ref({});
+      const isWhereTypeValue = ref(null);
       //告警列表
       let profileData = ref<alarmListItem[]>([]);
       const log = (e) => {
@@ -153,25 +201,11 @@
       };
       const addAlarmRule = () => {
         unref(profileData).push({
-          // id: Date.now(),
-          // messageMode: '',
-          // propagate: false,
-          // propagateRelationTypes: [''],
           configuration: {},
           transportConfiguration: {},
           provisionConfiguration: {
             provisionDeviceSecret: '',
           },
-          // alarms: [
-          //   {
-          //     id: Date.now() + Math.random(),
-          //     alarmVisible: false,
-          //     addKeyFilterVisible: false,
-          //     detailVisible: false,
-          //     detail: '',
-          //   },
-          // ],
-          // clearRule: [],
           alarms: [
             {
               id: Date.now() + Math.random(),
@@ -184,7 +218,13 @@
           ],
         });
       };
-
+      //Mobile dashboard:
+      const [dashboardForm] = useForm({
+        labelWidth: 120,
+        schemas: dashboardFormScheme,
+        showResetButton: false,
+        showSubmitButton: false,
+      });
       // 表单部分 报警类型
       const [registerForm, { validate: validateRegisterForm }] = useForm({
         labelWidth: 120,
@@ -215,17 +255,6 @@
         },
       });
 
-      // 清除条件表单
-      const [registerFormClearAlarm, { validate: validateRegisterFormClearAlarm }] = useForm({
-        labelWidth: 120,
-        schemas: step3ClearAlarm,
-        showResetButton: false,
-        showSubmitButton: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-
       // 添加‘创建条件’
       const addCreateRole = (index: number) => {
         unref(profileData)[index].alarms.push({
@@ -241,49 +270,92 @@
       const deleteCondition = (index: number, createIndex: number) => {
         profileData.value[index].alarms.splice(createIndex, 1);
       };
+      watch(isWhereType, (nV) => {
+        isWhereTypeValue.value = nV;
+      });
       const getAllFieldsFunc = (v) => {
-        console.log(v);
+        detailObj.value = v;
       };
       const getAllFieldsEnabFunc = (v) => {
-        console.log(v);
+        enableObj.value = v;
+        console.log(enableObj.value);
       };
       const getAllFieldsRuleFunc = (v) => {
-        console.log(v);
-      };
+        ruleObj.value = v;
+        const value = {
+          value: ruleObj.value?.value,
+        };
+        const predicate = {
+          predicate: ruleObj.value?.predicate,
+        };
+        const getCondition = {
+          condition: [
+            {
+              key: {
+                type: ruleObj.value?.type,
+                key: ruleObj.value?.type,
+              },
+              valueType: ruleObj.value?.valueType,
+              value,
+              predicate,
+            },
+          ],
+        };
+
+        const spec = {
+          spec: ruleObj.value?.spec,
+        };
 
+        const getValueConditon = {
+          spec,
+          condition: getCondition,
+        };
+        Object.assign(additionalObj.value, getValueConditon);
+      };
       const handleFormStep3toStep4Next = async () => {
         try {
-          // const values = 1;
+          const scheduleValue = {
+            type: enableObj.value.schedule,
+            daysOfWeek: enableObj.value.daysOfWeek,
+            endsOn: enableObj.value.endsOn,
+            startsOn: enableObj.value.startOn,
+            timezone: enableObj.value.timezone,
+          };
+          const getSchedule = {
+            schedule: scheduleValue,
+          };
+          const getAdditionalProp = Object.assign({}, detailObj.value, getSchedule);
+          const getScheduleAndAlarmDetails = Object.assign(
+            {},
+            getAdditionalProp,
+            additionalObj.value
+          );
+          const getIsWhereTypeValue: any = isWhereTypeValue.value;
+          const getAdditionalPropObj = {
+            [getIsWhereTypeValue]: getScheduleAndAlarmDetails,
+          };
+          const getCreateRulesAllObj = {
+            createRules: getAdditionalPropObj,
+          };
           const valueRegisterForm = await validateRegisterForm();
           const valueRegisterFormHighSetting = await validateRegisterFormHighSetting();
           const valueRegisterFormCreateAlarm = await validateRegisterFormCreateAlarm();
-          const valueRegisterFormClearAlarm = await validateRegisterFormClearAlarm();
           const getValueRegisterFormHighSetting = {
             propagate: valueRegisterFormHighSetting?.propagate,
             propagateRelationTypes: [valueRegisterFormHighSetting?.propagateRelationTypes],
           };
-          // console.log(proxy.$refs.getChildData1);
-          // console.log(proxy.$refs.getChildData2);
-          // console.log(proxy.$refs.getChildData3);
-          // let getChildValues1 = proxy.$refs.getChildData1.getAllFields();
-          // console.log('详情模板', getChildValues1);
-          // let getChildValues2 = proxy.$refs.getChildData2.getAllFieldsEnab();
-          // console.log('启用规则', getChildValues2);
-          // let getChildValues3 = proxy.$refs.getChildData3.getAllFieldsRule();
-          // console.log('报警规则条件', getChildValues3);
 
-          Object.assign(emptyObj.value, valueRegisterForm, getValueRegisterFormHighSetting);
+          Object.assign(
+            emptyObj.value,
+            valueRegisterForm,
+            getValueRegisterFormHighSetting,
+            getCreateRulesAllObj
+          );
           alarmss.value.push(emptyObj.value);
           const getAlarms = {
             alarms: alarmss.value,
           };
-          Object.assign(
-            getAllFormData.value,
-            getAlarms
-            // valueRegisterFormCreateAlarm,
-            // valueRegisterFormClearAlarm
-            // profileData.value
-          );
+          Object.assign(getAllFormData.value, getAlarms);
           console.log('第三步的数据', getAllFormData.value);
           emit('next', getAllFormData.value);
         } catch (error) {}
@@ -295,18 +367,25 @@
 
       const handleOpenDetailTemplate = () => {
         isRuleAlarmRuleConditions.value = 1;
-        openModal1(true);
+        setTimeout(() => {
+          openModal1(true);
+        }, 10);
       };
       const handleOpenEnableRule = () => {
         isRuleAlarmRuleConditions.value = 2;
-        openModal2(true);
+        setTimeout(() => {
+          openModal2(true);
+        }, 10);
       };
       const handleOpenAlaramRuleConditions = () => {
         isRuleAlarmRuleConditions.value = 3;
-        openModal3(true);
+        setTimeout(() => {
+          openModal3(true);
+        }, 10);
       };
 
       return {
+        dashboardForm,
         getAllFieldsRuleFunc,
         getAllFieldsEnabFunc,
         getAllFieldsFunc,
@@ -331,7 +410,6 @@
         registerFormCreateAlarm,
         addCreateRole,
         deleteCondition,
-        registerFormClearAlarm,
       };
     },
   });

 <template>
   <div>
-    <span>请选择告警通知联系人：</span>
-    <Tag v-for="(item, index) in 15" closable :key="index"> 冯涛+{{ item }}</Tag>
+    <!-- <span>请选择告警通知联系人：</span> -->
+    <!-- <Tag v-for="(item, index) in 15" closable :key="index"> 冯涛+{{ item }}</Tag> -->
     <BasicForm :showSubmitButton="false" @register="register" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
-  import { Tag } from 'ant-design-vue';
+  // import { Tag } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { alertContactsSchemas } from '../cpns/config';
 
   export default defineComponent({
     components: {
-      Tag,
       BasicForm,
     },
     emits: ['prev'],

@@ -41,6 +41,10 @@
       {
         "id": "highTemperatureAlarmID",
         "alarmType": "High Temperature Alarm",
+        "propagate": true,
+        "propagateRelationTypes": [
+          "string"
+        ],
         "createRules": {
           "additionalProp1": {
             "condition": {
@@ -138,11 +142,7 @@
             "id": "784f394c-42b6-435a-983c-b7beff2784f9",
             "entityType": "DASHBOARD"
           }
-        },
-        "propagate": true,
-        "propagateRelationTypes": [
-          "string"
-        ]
+        }
       }
     ]
   },

 {
-  "name": "hhhhh",
+  "name": "设备配置1",
+  "description": "设备配置1",
   "transportType": "COAP",
   "profileData": {
     "alarms": [
       {
-        "alarmType": "1",
+        "alarmType": "设备配置1",
         "propagate": true,
         "propagateRelationTypes": [
-          "1"
-        ]
+          "设备配置1"
+        ],
+        "createRules": {
+          "WARNING": {
+            "alarmDetails": "设备配置1",
+            "schedule": {
+              "type": "SPECIFIC_TIME"
+            },
+            "spec": {
+              "spec": "HOURS"
+            },
+            "condition": {
+              "condition": [
+                {
+                  "key": {
+                    "type": "TIME_SERIES",
+                    "key": "TIME_SERIES"
+                  },
+                  "valueType": "CURRENT_DEVICE",
+                  "value": {
+                    "value": "设备配置1"
+                  },
+                  "predicate": {
+                    "predicate": "设备配置1"
+                  }
+                }
+              ]
+            }
+          }
+        }
       }
     ]
   },
   "alarmProfile": {
     "alarmContactId": "ce350734-9504-48c2-82d2-277e3fe5583f",
-    "messageMode": "DING_TALK_MESSAGE"
+    "messageMode": "PHONE_MESSAGE"
   }
 }

+{
+  "name": "设备配置",
+  "description": "设备配置",
+  "transportType": "COAP",
+  "profileData": {
+    "alarms": [
+      {
+        "alarmType": "设备配置",
+        "propagate": true,
+        "propagateRelationTypes": [
+          "设备配置"
+        ],
+        "createRules": {
+          "MINOR": {
+            "schedule": {
+              "type": "SPECIFIC_TIME"
+            }
+          }
+        }
+      }
+    ]
+  },
+  "alarmProfile": {
+    "alarmContactId": "ce350734-9504-48c2-82d2-277e3fe5583f",
+    "messageMode": "DING_TALK_MESSAGE"
+  }
+}

-import { FormSchema } from '/@/components/Table';
+import { FormSchema, BasicColumn } from '/@/components/Table';
 
 /**
  * 所使用的枚举值
  */
 
 export enum TriggerEnum {
-  IS_DEVICE_ACT = 'DEVICE_ACT',
-  IS_TIME_ACT = 'TIME_ACT',
-  IS_SCENE_ACT = 'SCENE_ACT',
+  IS_DEVICE_ACT = '',
+  IS_TIME_ACT = 'TIME_SERIES',
+  IS_SCENE_ACT = 'CONSTANT',
 }
 
 export const isShiDu = (type: string) => {
@@ -21,101 +21,114 @@ export const isTimeAll = (type: string) => {
   return type === TriggerEnum.IS_SCENE_ACT;
 };
 
+export const columns: BasicColumn[] = [
+  {
+    title: '键名',
+    dataIndex: 'key',
+    width: 200,
+  },
+  {
+    title: '键类型',
+    dataIndex: 'value',
+    width: 200,
+  },
+];
+
 export const formSchema: FormSchema[] = [
   {
-    field: 'detail',
+    field: 'type',
     label: '条件类型',
     colProps: { span: 24 },
     component: 'Select',
     componentProps: {
       placeholder: '请选择报警日程表',
       options: [
-        { label: '简单', value: 'DEVICE_ACT' },
-        { label: '持续时间', value: 'TIME_ACT' },
-        { label: '重复', value: 'SCENE_ACT' },
+        { label: '简单', value: '' },
+        { label: '持续时间', value: 'TIME_SERIES' },
+        { label: '重复', value: 'CONSTANT' },
       ],
     },
   },
   {
-    field: 'type1',
+    field: 'valueType',
     label: '动态源类型',
     colProps: { span: 24 },
     component: 'Select',
     componentProps: {
       placeholder: '请选择动态源类型',
       options: [
-        { label: '无动态值', value: 'second' },
-        { label: '当前租户', value: 'minute' },
-        { label: '当前客户', value: 'hour' },
-        { label: '当前设备', value: 'day' },
+        { label: '无动态值', value: '' },
+        { label: '当前租户', value: 'CURRENT_CUSTOMER' },
+        { label: '当前客户', value: 'CURRENT_CUSTOMER' },
+        { label: '当前设备', value: 'CURRENT_DEVICE' },
       ],
     },
-    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'type')),
   },
   {
-    field: 'time1',
+    field: 'value',
     label: '源属性',
     colProps: { span: 24 },
     component: 'Input',
     componentProps: {
       placeholder: '源属性',
     },
-    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'type')),
   },
   {
-    field: 'type1',
+    field: 'valueType',
     label: '动态源类型',
     colProps: { span: 24 },
     component: 'Select',
     componentProps: {
       placeholder: '请选择动态源类型',
       options: [
-        { label: '无动态值', value: 'second' },
-        { label: '当前租户', value: 'minute' },
-        { label: '当前客户', value: 'hour' },
-        { label: '当前设备', value: 'day' },
+        { label: '无动态值', value: '' },
+        { label: '当前租户', value: 'CURRENT_TENANT' },
+        { label: '当前客户', value: 'CURRENT_CUSTOMER' },
+        { label: '当前设备', value: 'CURRENT_DEVICE' },
       ],
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'type')),
   },
   {
-    field: 'time1',
+    field: 'value',
     label: '源属性',
     colProps: { span: 24 },
     component: 'Input',
     componentProps: {
       placeholder: '源属性',
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'type')),
   },
   {
-    field: 'time',
+    field: 'predicate',
     label: '持续时间值',
     colProps: { span: 24 },
     component: 'Input',
     componentProps: {
       placeholder: '请输入持续时间值',
     },
-    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'type')),
   },
   {
-    field: 'r',
+    field: 'spec',
     label: '时间单位',
     colProps: { span: 24 },
     component: 'Select',
     componentProps: {
       placeholder: '请选择报警日程表',
       options: [
-        { label: '秒', value: 'second' },
-        { label: '分钟', value: 'minute' },
-        { label: '小时', value: 'hour' },
-        { label: '天', value: 'day' },
+        { label: '秒', value: 'SECONDS' },
+        { label: '分钟', value: 'MINUTES' },
+        { label: '小时', value: 'HOURS' },
+        { label: '天', value: 'DAYS' },
       ],
     },
-    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'type')),
   },
   {
-    field: 'time',
+    field: '',
     label: '事件计数值必填',
     colProps: { span: 24 },
     component: 'Input',
@@ -123,6 +136,6 @@ export const formSchema: FormSchema[] = [
       placeholder: '请输入事件计数值必填',
     },
     rules: [{ message: '事件计数应在1到2147483637之间', trigger: 'blur' }],
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'type')),
   },
 ];

+import { FormSchema } from '/@/components/Table';
+
+/**
+ * 所使用的枚举值
+ */
+
+export enum TriggerEnum {
+  IS_DEVICE_ACT = '1',
+  IS_TIME_ACT = '2',
+  IS_SCENE_ACT = '3',
+}
+
+export const isShiDu = (type: string) => {
+  return type === TriggerEnum.IS_DEVICE_ACT;
+};
+export const isWenDu = (type: string) => {
+  return type === TriggerEnum.IS_TIME_ACT;
+};
+
+export const isTimeAll = (type: string) => {
+  return type === TriggerEnum.IS_SCENE_ACT;
+};
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'default',
+    label: '键类型',
+    colProps: { span: 24 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择键类型',
+      options: [
+        { label: '属性', value: '1' },
+        { label: 'Timeseries', value: '2' },
+        { label: '常量', value: '3' },
+      ],
+    },
+  },
+  {
+    field: '2',
+    label: '键名',
+    colProps: { span: 24 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择键名',
+      options: [
+        { label: 'active', value: '' },
+        { label: 'inactivityAlarmTime', value: '' },
+        { label: 'lastActivityTime', value: '' },
+        { label: 'lastConnectTime', value: '' },
+        { label: 'lastDisconnectTime', value: '' },
+      ],
+    },
+    ifShow: ({ values }) => isShiDu(Reflect.get(values, 'default')),
+  },
+  {
+    field: '21',
+    label: '键名',
+    colProps: { span: 24 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择键名',
+      options: [
+        { label: 'CO2', value: '' },
+        { label: 'temp', value: '' },
+        { label: 'temp', value: '' },
+      ],
+    },
+    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'default')),
+  },
+  {
+    field: '22',
+    label: '键名',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入键名',
+    },
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'default')),
+  },
+  {
+    field: '3',
+    label: '值类型',
+    colProps: { span: 24 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择值类型',
+      options: [
+        { label: '字符串', value: '' },
+        { label: '数字', value: '' },
+        { label: '布尔值', value: '' },
+        { label: '日期时间', value: '' },
+      ],
+    },
+  },
+];

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    width="55rem"
+    @register="register"
+    :title="getTitle"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config';
+  // import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default defineComponent({
+    name: 'index',
+    components: { BasicModal, BasicForm },
+    emits: ['success', 'register'],
+    setup() {
+      // const { createMessage } = useMessage();
+      const isUpdate = ref(true);
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增键名筛选器' : '编辑键名筛选器'));
+      const [register] = useModalInner((data) => {
+        isUpdate.value = !!data?.isUpdate;
+      });
+      const [registerForm] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+      });
+      const handleSubmit = () => {
+        console.log(1);
+      };
+      const handleCancel = () => {
+        console.log(1);
+      };
+      return {
+        registerForm,
+        handleCancel,
+        handleSubmit,
+        register,
+        getTitle,
+      };
+    },
+  });
+</script>

@@ -6,50 +6,107 @@
     :title="getTitle"
     @ok="handleSubmit"
   >
+    <CollapseContainer title="键名筛选器" class="border mb-8">
+      <BasicTable @register="registerTable">
+        <template #toolbar>
+          <a-button type="primary" @click="handleAddKey"> 新增键名筛选器 </a-button>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '编辑',
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </CollapseContainer>
+    <CollapseContainer title="筛选器预览" class="border mb-8"><div>1</div> </CollapseContainer>
     <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" />
   </BasicModal>
+  <KeyValueModal @register="registerModal" />
 </template>
 <script lang="ts">
   import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './config';
+  import { formSchema, columns } from './config';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import KeyValueModal from './cpns/index.vue';
 
   export default defineComponent({
     name: 'DetailTemplate',
     components: {
+      KeyValueModal,
       BasicModal,
       BasicForm,
+      CollapseContainer,
+      BasicTable,
     },
     emits: ['success', 'register', 'getAllFieldsRule'],
     setup(_, { emit }) {
-      // const getValueData: any = ref({});
-
       const isUpdate = ref(true);
       const [registerForm, { getFieldsValue }] = useForm({
         labelWidth: 120,
         schemas: formSchema,
       });
+      const [registerModal, { openModal }] = useModal();
+
       const getTitle = computed(() => (!unref(isUpdate) ? '添加报警规则条件' : '编辑报警规则条件'));
       const [register, { closeModal }] = useModalInner((data) => {
         isUpdate.value = !!data?.isUpdate;
       });
+      const [registerTable] = useTable({
+        title: '键名筛选器',
+        // api: deviceConfigGetQuery,
+        columns,
+        bordered: true,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 180,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
       const handleSubmit = () => {
         const values = getFieldsValue();
         emit('getAllFieldsRule', values);
-        // console.log(1);
-        // let getV = {};
-        // getAllFieldsRule(getV);
         closeModal();
       };
-      // function getAllFieldsRule(getV) {
-      //   const values = getFieldsValue();
-      //   getValueData.value = values;
-      //   getV = getValueData.value;
-      //   return getV;
-      // }
+      const handleAddKey = () => {
+        openModal(true, {
+          isUpdate: false,
+        });
+      };
+      const handleEdit = () => {
+        openModal(true, {
+          isUpdate: true,
+        });
+      };
+      const handleDelete = () => {
+        console.log(1);
+      };
       return {
-        // getAllFieldsRule,
+        handleEdit,
+        handleDelete,
+        registerModal,
+        registerTable,
+        handleAddKey,
         registerForm,
         handleSubmit,
         register,

@@ -2,7 +2,7 @@ import { FormSchema } from '/@/components/Table';
 
 export const formSchema: FormSchema[] = [
   {
-    field: 'detail',
+    field: 'alarmDetails',
     label: '报警详细信息',
     colProps: { span: 24 },
     required: true,

@@ -5,9 +5,9 @@ import { FormSchema } from '/@/components/Table';
  */
 
 export enum TriggerEnum {
-  IS_DEVICE_ACT = 'DEVICE_ACT',
-  IS_TIME_ACT = 'TIME_ACT',
-  IS_SCENE_ACT = 'SCENE_ACT',
+  IS_DEVICE_ACT = 'ANY_TIME',
+  IS_TIME_ACT = 'SPECIFIC_TIME',
+  IS_SCENE_ACT = 'CUSTOM',
 }
 
 export const isShiDu = (type: string) => {
@@ -23,7 +23,7 @@ export const isTimeAll = (type: string) => {
 
 export const formSchema: FormSchema[] = [
   {
-    field: 'detail',
+    field: 'schedule',
     label: '报警日程表',
     colProps: { span: 24 },
     required: true,
@@ -31,225 +31,231 @@ export const formSchema: FormSchema[] = [
     componentProps: {
       placeholder: '请选择报警日程表',
       options: [
-        { label: '始终启用', value: 'DEVICE_ACT' },
-        { label: '定时启用', value: 'TIME_ACT' },
-        { label: '自定义启用', value: 'SCENE_ACT' },
+        { label: '始终启用', value: 'ANY_TIME' },
+        { label: '定时启用', value: 'SPECIFIC_TIME' },
+        { label: '自定义启用', value: 'CUSTOM' },
       ],
     },
   },
   {
-    field: 'time',
+    field: 'timezone',
     label: '时区',
     colProps: { span: 24 },
     required: true,
-    component: 'Input',
+    component: 'Select',
     componentProps: {
-      placeholder: 'Asia/Shanghai (UTC+08:00)',
+      placeholder: '请选择时区',
+      options: [
+        { label: 'Africa/Abidjan (UTC+00:00)', value: 'Africa/Abidjan (UTC+00:00)' },
+        { label: 'Africa/Accra (UTC+00:00)', value: 'Africa/Accra (UTC+00:00)' },
+        { label: 'Africa/Addis Ababa (UTC+03:00)', value: 'Africa/Addis Ababa (UTC+03:00)' },
+        { label: 'Africa/Asmara (UTC+03:00)', value: 'Africa/Asmara (UTC+03:00)' },
+      ],
     },
     ifShow: ({ values }) =>
-      isWenDu(Reflect.get(values, 'detail')) || isTimeAll(Reflect.get(values, 'detail')),
+      isWenDu(Reflect.get(values, 'schedule')) || isTimeAll(Reflect.get(values, 'schedule')),
   },
 
   {
-    field: 'data1',
+    field: 'daysOfWeek',
     component: 'Checkbox',
     label: '星期一',
     colProps: {
       span: 8,
     },
     renderComponentContent: '',
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time1',
+    field: 'startsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time2',
+    field: 'endsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
 
   {
-    field: 'data2',
+    field: 'daysOfWeek',
     component: 'Checkbox',
     label: '星期二',
     colProps: {
       span: 8,
     },
     renderComponentContent: '',
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time3',
+    field: 'startsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time4',
+    field: 'endsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'data3',
+    field: 'daysOfWeek',
     component: 'Checkbox',
     label: '星期三',
     colProps: {
       span: 8,
     },
     renderComponentContent: '',
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time5',
+    field: 'startsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time6',
+    field: 'endsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'data4',
+    field: 'daysOfWeek',
     component: 'Checkbox',
     label: '星期四',
     colProps: {
       span: 8,
     },
     renderComponentContent: '',
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time7',
+    field: 'startsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time8',
+    field: 'endsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'data5',
+    field: 'daysOfWeek',
     component: 'Checkbox',
     label: '星期五',
     colProps: {
       span: 8,
     },
     renderComponentContent: '',
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time9',
+    field: 'startsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time33',
+    field: 'endsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'data6',
+    field: 'daysOfWeek',
     component: 'Checkbox',
     label: '星期六',
     colProps: {
       span: 8,
     },
     renderComponentContent: '',
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time333',
+    field: 'startsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time131',
+    field: 'endsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'data7',
+    field: 'daysOfWeek',
     component: 'Checkbox',
     label: '星期七',
     colProps: {
       span: 8,
     },
     renderComponentContent: '',
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time3423',
+    field: 'startsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'time3431',
+    field: 'endsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'schedule')),
   },
 
   {
-    field: 'weekday',
+    field: 'daysOfWeek',
     component: 'CheckboxGroup',
     label: '天',
     colProps: {
@@ -293,24 +299,24 @@ export const formSchema: FormSchema[] = [
         },
       ],
     },
-    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'timerrw',
+    field: 'startsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'schedule')),
   },
   {
-    field: 'timewwq',
+    field: 'endsOn',
     component: 'TimePicker',
     label: '时间选择',
     colProps: {
       span: 8,
     },
-    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'detail')),
+    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'schedule')),
   },
 ];

@@ -3,6 +3,7 @@ import { findDictItemByCode } from '/@/api/system/dict';
 // import { getOrganizationList } from '/@/api/system/system';
 // import { copyTransFun } from '/@/utils/fnUtils';
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
+import { ref } from 'vue';
 
 export const step1Schemas: FormSchema[] = [
   {
@@ -108,35 +109,40 @@ export const step3HighSetting: FormSchema[] = [
   },
 ];
 
+export const isWhereType = ref(null);
+
 export const step3CreateAlarm: FormSchema[] = [
   {
-    field: 'alarmType',
+    field: '',
     component: 'Select',
     label: '严重程度',
     componentProps: {
       placeholder: '请选择严重程度',
       options: [
         {
-          value: '1',
+          value: 'CRITICAL',
           label: '危险',
         },
         {
-          value: '2',
+          value: 'MAJOR',
           label: '重要',
         },
         {
-          value: '3',
+          value: 'MINOR',
           label: '次要',
         },
         {
-          value: '4',
+          value: 'WARNING',
           label: '警告',
         },
         {
-          value: '5',
+          value: 'INDETERMINATE',
           label: '不确定',
         },
       ],
+      onChange: (v) => {
+        isWhereType.value = v ? v : 'INDETERMINATE';
+      },
     },
   },
 ];
@@ -151,3 +157,19 @@ export const step3ClearAlarm: FormSchema[] = [
   //   },
   // },
 ];
+
+export const dashboardFormScheme: FormSchema[] = [
+  {
+    field: 'dashboardId',
+    component: 'Select',
+    label: 'Mobile dashboard:',
+    componentProps: {
+      placeholder: '请选择Mobile dashboard',
+      options: [
+        { label: 'DASHBOARD', value: 'DASHBOARD' },
+        { label: 'DASHBOARD1', value: 'DASHBOARD' },
+        { label: 'DASHBOARD2', value: 'DASHBOARD' },
+      ],
+    },
+  },
+];