Merge branch 'main' of git.yuntengiot.com:huang/yun-teng-iot-front

-<template>
-  <BasicDrawer
-    v-bind="$attrs"
-    @register="registerDrawer"
-    showFooter
-    :title="getTitle"
-    width="500px"
-    @ok="handleSubmit"
-  >
-    <BasicForm @register="registerForm"/>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './device.profile.data';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { saveOrEditMessageConfig } from "/@/api/message/config";
-  import { useMessage } from "/@/hooks/web/useMessage";
-
-  export default defineComponent({
-    name: 'DeviceProfileDrawer',
-    components: { BasicDrawer, BasicForm },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const isUpdate = ref(true);
-
-      const [registerForm, {  validate,setFieldsValue,resetFields }] = useForm({
-        labelWidth: 120,
-        schemas: formSchema,
-        showActionButtonGroup: false,
-      });
-
-      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-        await resetFields();
-        setDrawerProps({ confirmLoading: false });
-        isUpdate.value = !!data?.isUpdate;
-        if (unref(isUpdate)) {
-          const config = data.record.config;
-          for (const key in config){
-            Reflect.set(data.record, key+'', config[key]);
-          }
-          await setFieldsValue({
-            ...data.record,
-          });
-        }
-      });
-
-      const getTitle = computed(() => (!unref(isUpdate) ? '新增消息配置' : '编辑消息配置'));
-
-      async function handleSubmit() {
-        try {
-          const values = await validate();
-          const { createMessage } = useMessage();
-          setDrawerProps({ confirmLoading: true });
-          let config={};
-          if(values.messageType === 'PHONE_MESSAGE'){
-            config ={
-              "accessKeyId":values.accessKeyId,
-              "accessKeySecret":values.accessKeySecret,
-            }
-          }else if(values.messageType === 'EMAIL_MESSAGE'){
-            config ={
-              "host":values.host,
-              "port":values.port,
-              "username":values.username,
-              "password":values.password,
-            }
-          }
-          Reflect.set(values, 'config', config);
-          let saveMessage = "添加成功";
-          let updateMessage = "修改成功";
-          await saveOrEditMessageConfig(values, unref(isUpdate));
-          closeDrawer();
-          emit('success');
-          createMessage.success(unref(isUpdate)?updateMessage:saveMessage);
-        } finally {
-          setDrawerProps({ confirmLoading: false });
-        }
-      }
-
-      return {
-        registerDrawer,
-        registerForm,
-        getTitle,
-        handleSubmit,
-      };
-    },
-  });
-</script>

 <template>
-  <BasicModal
-    v-bind="$attrs"
-    width="55rem"
-    @register="register"
-    :title=getTitle
-    @visible-change="handleVisibleChange"
-  >
+  <BasicModal v-bind="$attrs" width="55rem" @register="register" :title="getTitle">
     <div class="step-form-form">
       <a-steps :current="current">
         <a-step title="设备配置" />
@@ -15,78 +9,38 @@
     </div>
     <div class="mt-5">
       <DeviceProfileStep1 @next="handleStep1Next" v-show="current === 0" />
-      <DeviceProfileStep2
-        @prev="handleStepPrev"
-        @next="handleStep2Next"
-        v-show="current === 1"
-        v-if="initStep2"
-      />
-      <DeviceProfileStep3 v-show="current === 2" @redo="handleRedo" v-if="initStep3" />
+      <DeviceProfileStep2 @prev="handleStepPrev" @next="handleStep2Next" v-show="current === 1" />
+      <DeviceProfileStep3 @prev="handleStepPrev" @redo="handleRedo" v-show="current === 2" />
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, nextTick, computed, unref, reactive, toRefs} from 'vue';
+  import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
-  import DeviceProfileStep1 from "/@/views/device/profile/step/DeviceProfileStep1.vue";
-  import DeviceProfileStep2 from "/@/views/device/profile/step/DeviceProfileStep2.vue";
-  import DeviceProfileStep3 from "/@/views/device/profile/step/DeviceProfileStep3.vue";
-  import { Steps } from "ant-design-vue";
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 24,
-      },
-      defaultValue: '111',
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 24,
-      },
-    },
-  ];
+  import DeviceProfileStep1 from '/@/views/device/profile/step/DeviceProfileStep1.vue';
+  import DeviceProfileStep2 from '/@/views/device/profile/step/DeviceProfileStep2.vue';
+  import DeviceProfileStep3 from '/@/views/device/profile/step/DeviceProfileStep3.vue';
+  import { Steps } from 'ant-design-vue';
   export default defineComponent({
-    name:'DeviceModal',
-    components: { BasicModal, BasicForm, DeviceProfileStep1, DeviceProfileStep2, DeviceProfileStep3,
+    name: 'DeviceModal',
+    components: {
+      BasicModal,
+      DeviceProfileStep1,
+      DeviceProfileStep2,
+      DeviceProfileStep3,
       [Steps.name]: Steps,
-      [Steps.Step.name]: Steps.Step, },
+      [Steps.Step.name]: Steps.Step,
+    },
     props: {
       userData: { type: Object },
     },
-    setup(props) {
-      const state = reactive({
-        initStep2: false,
-        initStep3: false,
-      });
-      const current = ref(0);
+    setup(_) {
+      const current = ref(2);
       const isUpdate = ref(true);
-      const modelRef = ref({});
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备配置' : '编辑设备配置'));
-      const [
-        registerForm,
-        {
-          // setFieldsValue,
-          // setProps
-        },
-      ] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
 
       const [register] = useModalInner((data) => {
         isUpdate.value = !!data?.isUpdate;
-        data && onDataReceive(data);
       });
 
       function handleStepPrev() {
@@ -94,43 +48,25 @@
       }
       function handleStep1Next(step1Values: any) {
         current.value++;
-        state.initStep2 = true;
         console.log(step1Values);
       }
       function handleStep2Next(step2Values: any) {
         current.value++;
-        state.initStep3 = true;
         console.log(step2Values);
       }
       function handleRedo() {
         current.value = 0;
-        state.initStep2 = false;
-        state.initStep3 = false;
-      }
-
-
-      function onDataReceive(data) {
-        console.log('Data Received', data);
-        // 方式1;
-        // setFieldsValue({
-        //   field2: data.data,
-        //   field1: data.info,
-        // });
-
-        // // 方式2
-        modelRef.value = { field2: data.data, field1: data.info };
-
-        // setProps({
-        //   model:{ field2: data.data, field1: data.info }
-        // })
-      }
-
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
       }
 
-      return { register, schemas, registerForm, model: modelRef, getTitle,handleVisibleChange,
-        current, ...toRefs(state), handleStepPrev, handleStep1Next, handleStep2Next, handleRedo};
+      return {
+        register,
+        getTitle,
+        current,
+        handleStepPrev,
+        handleStep1Next,
+        handleStep2Next,
+        handleRedo,
+      };
     },
   });
 </script>

@@ -8,39 +8,39 @@
         <TableAction
           :actions="[
             {
-              label:'编辑',
+              label: '编辑',
               icon: 'clarity:note-edit-line',
               onClick: handleEdit.bind(null, record),
             },
             {
-              label:'删除',
+              label: '删除',
               icon: 'ant-design:delete-outlined',
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
                 confirm: handleDelete.bind(null, record),
-              }
+              },
             },
           ]"
         />
       </template>
     </BasicTable>
-    <DeviceProfileModal @register="registerModal" @success="handleSuccess"/>
+    <DeviceProfileModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { columns, searchFormSchema } from './device.profile.data';
-  import { useMessage } from "/@/hooks/web/useMessage";
-  import { deviceProfilePage, deleteDeviceProfile } from "/@/api/device/deviceManager";
-  import { useModal } from "/@/components/Modal";
-  import DeviceProfileModal from "/@/views/device/profile/DeviceProfileModal.vue";
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { deviceProfilePage, deleteDeviceProfile } from '/@/api/device/deviceManager';
+  import { useModal } from '/@/components/Modal';
+  import DeviceProfileModal from '/@/views/device/profile/DeviceProfileModal.vue';
   export default defineComponent({
     name: 'DeviceProfileManagement',
-    components: { BasicTable, DeviceProfileModal, TableAction},
+    components: { BasicTable, DeviceProfileModal, TableAction },
     setup() {
-      const {createMessage} = useMessage();
+      const { createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
       const [registerTable, { reload }] = useTable({
         title: '设备配置列表',
@@ -77,9 +77,9 @@
 
       function handleDelete(record: Recordable) {
         let ids = [record.id];
-        deleteDeviceProfile(ids).then(()=>{
-          createMessage.success("删除设备配置成功")
-          handleSuccess()
+        deleteDeviceProfile(ids).then(() => {
+          createMessage.success('删除设备配置成功');
+          handleSuccess();
         });
       }
 

 <template>
   <div class="step1">
     <div class="step1-form">
-      <BasicForm @register="register"> </BasicForm>
+      <BasicForm @register="register" />
     </div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from './data';
   import { Select, Input, Divider } from 'ant-design-vue';
@@ -14,14 +14,12 @@
     components: {
       BasicForm,
       [Select.name]: Select,
-      ASelectOption: Select.Option,
       [Input.name]: Input,
       [Input.Group.name]: Input.Group,
       [Divider.name]: Divider,
     },
     emits: ['next'],
     setup(_, { emit }) {
-      const devicePic = ref('');
       const [register, { validate }] = useForm({
         labelWidth: 100,
         schemas: step1Schemas,
@@ -41,14 +39,14 @@
           emit('next', values);
         } catch (error) {}
       }
-      return { register, devicePic };
+      return { register };
     },
   });
 </script>
 <style lang="less" scoped>
   .step1 {
     &-form {
-      width: 450px;
+      width: 500px;
       margin: 0 auto;
     }
 

@@ -19,7 +19,7 @@
     },
     emits: ['next', 'prev'],
     setup(_, { emit }) {
-      const [register, { validate}] = useForm({
+      const [register, { validate }] = useForm({
         labelWidth: 80,
         schemas: step2Schemas,
         actionColOptions: {
@@ -52,7 +52,7 @@
 </script>
 <style lang="less" scoped>
   .step2 {
-    width: 450px;
+    width: 500px;
     margin: 0 auto;
   }
 </style>

 <template>
-  <div class="step2">
-    <BasicForm @register="register" />
+  <div class="step3">
+    <h1 v-if="alarmList.length === 0" style="font-size: 24px" class="text-center"
+      >未配置报警规则</h1
+    >
+
+    <template v-else v-for="(item, index) in alarmList" :key="item">
+      <CollapseContainer :title="item.alarmType" style="border: 1px solid #bfbfbf" class="mb-6">
+        <template #action>
+          <div @click="handleDeleteAlarm(index)" class="cursor-pointer">
+            <DeleteOutlined style="font-size: 20px" class="mr-2" />
+          </div>
+        </template>
+        <a-form :wrapper-col="wrapperCol" labelAlign="left" :model="item" :rules="rules">
+          <a-form-item label="报警类型" :labelCol="{ style: { width: '80px' } }" name="alarmType">
+            <a-input v-model:value="item.alarmType" />
+          </a-form-item>
+        </a-form>
+
+        <CollapseContainer>
+          <template #action> 高级设置 </template>
+          <div class="flex" style="align-items: center">
+            <input type="checkbox" v-model="item.isPass" /> <div class="ml-2">传递警报</div>
+          </div>
+
+          <a-form :wrapper-col="wrapperCol" labelAlign="left" v-if="item.isPass">
+            <a-form-item label="要传递的关联类型" :labelCol="{ style: { width: '120px' } }">
+              <a-input />
+            </a-form-item>
+          </a-form>
+        </CollapseContainer>
+        <p style="color: #3c3c3c">创建报警规则</p>
+        <template v-for="(item1, index1) in item.alarmRule" :key="item1">
+          <div class="alarm-rule mb-4">
+            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
+              <div style="width: 30%; height: 100%; border-right: 1px solid #e0e0e0">
+                <span style="color: #305680; margin-left: 10px">严重程度</span>
+                <a-select :options="options" style="width: 100px; margin-left: 10px" />
+              </div>
+              <div style="width: 70%; height: 100%">
+                <p style="color: #f5594e" class="mt-4 ml-4"
+                  >请添加报警规则条件
+                  <PlusOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >启用规则：始终启用
+                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >详情：1 <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4">dashboard: <a-select style="width: 180px" /></p>
+              </div>
+            </div>
+            <div style="width: 10%" class="alarm-remove">
+              <a-tooltip title="移除">
+                <MinusCircleOutlined
+                  style="font-size: 25px color:#305680"
+                  class="cursor-pointer"
+                  @click="handleDeleteCondition(index, index1)"
+                />
+              </a-tooltip>
+            </div>
+          </div>
+        </template>
+        <a-button class="mt-5" @click="addCreateRole(index)"
+          ><PlusCircleOutlined />添加创建条件</a-button
+        >
+
+        <p style="color: #3c3c3c">清除报警规则</p>
+        <template v-for="(item2, index2) in item.removeRule" :key="item2">
+          <div class="alarm-rule mb-4">
+            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
+              <div style="width: 70%; height: 100%">
+                <p style="color: #f5594e" class="mt-4 ml-4"
+                  >请添加报警规则条件
+                  <PlusOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >启用规则：始终启用
+                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >详情：1 <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4">Mobile dashboard: <a-select style="width: 150px" /></p>
+              </div>
+            </div>
+            <div style="width: 10%" class="alarm-remove">
+              <a-tooltip title="移除">
+                <MinusCircleOutlined
+                  style="font-size: 25px color:#305680"
+                  class="cursor-pointer"
+                  @click="handleDeleteRemoveCondition(index, index2)"
+                />
+              </a-tooltip>
+            </div>
+          </div>
+        </template>
+        <a-button class="mt-5" @click="addRemoveRule(index)"
+          ><PlusCircleOutlined />添加创建条件</a-button
+        >
+      </CollapseContainer>
+    </template>
+    <div class="flex justify-start">
+      <a-button class="mr-5" @click="prevStep">上一步</a-button>
+      <a-button type="primary" @click="addAlarmRule">添加报警规则</a-button>
+    </div>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { BasicForm, useForm } from '/@/components/Form';
-import { step3Schemas } from './data';
-import { Alert, Divider, Descriptions } from 'ant-design-vue';
-
-export default defineComponent({
-  components: {
-    BasicForm,
-    [Alert.name]: Alert,
-    [Divider.name]: Divider,
-    [Descriptions.name]: Descriptions,
-    [Descriptions.Item.name]: Descriptions.Item,
-  },
-  emits: ['next', 'prev'],
-  setup(_, { emit }) {
-    const [register, { validate, setProps }] = useForm({
-      labelWidth: 80,
-      schemas: step3Schemas,
-      actionColOptions: {
-        span: 14,
-      },
-      resetButtonOptions: {
-        text: '上一步',
-      },
-      submitButtonOptions: {
-        text: '提交',
-      },
-      resetFunc: customResetFunc,
-      submitFunc: customSubmitFunc,
-    });
+  import { defineComponent, ref } from 'vue';
+  import {
+    Alert,
+    Divider,
+    Descriptions,
+    Input,
+    Form,
+    Button,
+    Select,
+    Tooltip,
+  } from 'ant-design-vue';
+  import {
+    DeleteOutlined,
+    MinusCircleOutlined,
+    PlusCircleOutlined,
+    PlusOutlined,
+    EditOutlined,
+  } from '@ant-design/icons-vue';
 
-    async function customResetFunc() {
-      emit('prev');
-    }
+  import { CollapseContainer } from '/@/components/Container/index';
+  interface alarmListItem {
+    alarmType: string;
+    isPass: boolean;
+    alarmRule: [];
+    removeRule: [];
+  }
+  export default defineComponent({
+    components: {
+      DeleteOutlined,
+      MinusCircleOutlined,
+      PlusCircleOutlined,
+      CollapseContainer,
+      EditOutlined,
+      PlusOutlined,
+      [Tooltip.name]: Tooltip,
+      [Button.name]: Button,
+      [Input.name]: Input,
+      [Select.name]: Select,
+      [Form.name]: Form,
+      [Form.Item.name]: Form.Item,
+      [Alert.name]: Alert,
+      [Divider.name]: Divider,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+    },
+    emits: ['prev'],
+    setup(_, { emit }) {
+      const alarmList = ref<alarmListItem[]>([]);
+      const options = ref([
+        {
+          value: '1',
+          label: '危险',
+        },
 
-    async function customSubmitFunc() {
-      try {
-        const values = await validate();
-        setProps({
-          submitButtonOptions: {
-            loading: true,
+        {
+          value: '2',
+          label: '重要',
+        },
+        {
+          value: '3',
+          label: '次要',
+        },
+        {
+          value: '4',
+          label: '警告',
+        },
+        {
+          value: '5',
+          label: '不确定',
+        },
+      ]);
+      const rules = {
+        alarmType: [
+          {
+            required: true,
+            message: '报警类型必填',
+            trigger: 'blur',
           },
+        ],
+      };
+
+      const prevStep = () => {
+        emit('prev');
+      };
+      // 添加报警规则
+      const addAlarmRule = () => {
+        alarmList.value.push({
+          alarmType: '',
+          isPass: false,
+          alarmRule: [],
+          removeRule: [],
         });
-        setTimeout(() => {
-          setProps({
-            submitButtonOptions: {
-              loading: false,
-            },
-          });
-          emit('next', values);
-        }, 1500);
-      } catch (error) {}
-    }
+      };
+      const handleDeleteAlarm = (index) => {
+        alarmList.value.splice(index, 1);
+      };
+      // 添加创建条件
+      const addCreateRole = (index) => {
+        alarmList.value[index].alarmRule.push('1');
+      };
+      const handleDeleteCondition = (index, index1) => {
+        alarmList.value[index].alarmRule.splice(index1, 1);
+      };
 
-    return { register };
-  },
-});
+      // 清除报警规则
+      const addRemoveRule = (index) => {
+        alarmList.value[index].removeRule.push('1');
+      };
+      const handleDeleteRemoveCondition = (index, index1) => {
+        alarmList.value[index].removeRule.splice(index1, 1);
+      };
+
+      return {
+        rules,
+        alarmList,
+        options,
+        prevStep,
+        addAlarmRule,
+        addCreateRole,
+        handleDeleteAlarm,
+        handleDeleteCondition,
+        addRemoveRule,
+        handleDeleteRemoveCondition,
+        labelCol: { style: { width: '150px' } },
+        wrapperCol: { span: 18 },
+      };
+    },
+  });
 </script>
 <style lang="less" scoped>
-.step2 {
-  width: 450px;
-  margin: 0 auto;
-}
+  .step3 {
+    width: 500px;
+    margin: 0 auto;
+  }
+  .alarm-rule {
+    height: 200px;
+    display: flex;
+    .alarm-remove {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
 </style>

 import { FormSchema } from '/@/components/Form';
-import {findDictItemByCode} from "/@/api/system/dict";
+import { findDictItemByCode } from '/@/api/system/dict';
 
 export const step1Schemas: FormSchema[] = [
   {
     field: 'name',
     label: '配置名称',
     required: true,
-    component:'Input',
-    componentProps:{
-      maxLength:30
-    }
+    component: 'Input',
+    componentProps: {
+      maxLength: 30,
+    },
   },
   {
     field: 'deviceType',
     label: '队列优先级',
     component: 'ApiSelect',
     componentProps: {
-      api:findDictItemByCode,
-      params:{
-        dictCode:"queen_execute_sequence"
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'queen_execute_sequence',
       },
-      labelField:'itemText',
-      valueField:'itemValue',
+      labelField: 'itemText',
+      valueField: 'itemValue',
     },
   },
   {
     label: '备注',
     field: 'remark',
     component: 'InputTextArea',
-  }
+  },
 ];
 
 export const step2Schemas: FormSchema[] = [
@@ -37,11 +37,9 @@ export const step2Schemas: FormSchema[] = [
     component: 'Select',
     label: '传输方式',
     defaultValue: 'DEFAULT',
-    componentProps:{
-      options: [
-        {label: '默认', value: "DEFAULT"},
-      ],
-    }
+    componentProps: {
+      options: [{ label: '默认', value: 'DEFAULT' }],
+    },
   },
 ];
 
@@ -51,10 +49,8 @@ export const step3Schemas: FormSchema[] = [
     component: 'Select',
     label: '报警规则',
     defaultValue: 'DEFAULT',
-    componentProps:{
-      options: [
-        {label: '默认', value: "DEFAULT"},
-      ],
-    }
+    componentProps: {
+      options: [{ label: '默认', value: 'DEFAULT' }],
+    },
   },
 ];