fix: 自测修改设备管理

2023-03-10 16:52:05 +08:00 · 2023-03-10 16:52:05 +08:00 · db5514d27f
parent 0589ea17ed
commit db5514d27f
16 changed files with 474 additions and 242 deletions
--- a/src/api/device/instance.ts
+++ b/src/api/device/instance.ts
@ -100,7 +100,7 @@ export const deviceImport = (productId: string, fileUrl: string, autoDeploy: boo
 * @param type 文件类型
 * @returns 
 */
-export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
+export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? `/${productId}` : ''}/export.${type}`

 /**
 * 验证设备ID是否重复
--- a/src/components/NormalUpload/index.vue
+++ b/src/components/NormalUpload/index.vue
@ -5,7 +5,7 @@
            name="file"
            :action="FILE_UPLOAD"
            :headers="{
-                'X-Access-Token': LocalStore.get(TOKEN_KEY)
+                'X-Access-Token': LocalStore.get(TOKEN_KEY),
            }"
            accept=".xlsx,.csv"
            :maxCount="1"
@ -27,18 +27,22 @@
    <div style="margin-top: 20px" v-if="importLoading">
        <a-badge v-if="flag" status="processing" text="进行中" />
        <a-badge v-else status="success" text="已完成" />
-        <span>总数量：{{count}}</span>
-        <p style="color: red">{{errMessage}}</p>
+        <span>总数量：{{ count }}</span>
+        <p style="color: red">{{ errMessage }}</p>
    </div>
 </template>

 <script lang="ts" setup>
-import { FILE_UPLOAD } from '@/api/comm'
-import { TOKEN_KEY  } from '@/utils/variable';
+import { FILE_UPLOAD } from '@/api/comm';
+import { TOKEN_KEY } from '@/utils/variable';
 import { LocalStore } from '@/utils/comm';
 import { downloadFile, downloadFileByUrl } from '@/utils/utils';
-import { deviceImport, deviceTemplateDownload ,templateDownload} from '@/api/device/instance'
-import { EventSourcePolyfill } from 'event-source-polyfill'
+import {
+    deviceImport,
+    deviceTemplateDownload,
+    templateDownload,
+} from '@/api/device/instance';
+import { EventSourcePolyfill } from 'event-source-polyfill';
 import { message } from 'ant-design-vue';

 type Emits = {
@ -50,11 +54,11 @@ const props = defineProps({
    // 组件双向绑定的值
    modelValue: {
        type: Array,
-        default: () => []
+        default: () => [],
    },
    product: {
        type: String,
-        default: ''
+        default: '',
    },
    file: {
        type: Object,
@ -62,67 +66,62 @@ const props = defineProps({
            return {
                fileType: 'xlsx',
                autoDeploy: false,
-            }
-        }
-    }
-})
+            };
+        },
+    },
+});

-const importLoading = ref<boolean>(false)
-const flag = ref<boolean>(false)
-const count = ref<number>(0)
-const errMessage = ref<string>('')
+const importLoading = ref<boolean>(false);
+const flag = ref<boolean>(false);
+const count = ref<number>(0);
+const errMessage = ref<string>('');

-const downFile =async (type: string) => {
+const downFile = async (type: string) => {
    // downloadFile(deviceTemplateDownload(props.product, type));
-    const res:any =await templateDownload(props.product, type)
-    if(res){
+    const res: any = await templateDownload(props.product, type);
+    if (res) {
        const blob = new Blob([res], { type: type });
-            const url = URL.createObjectURL(blob);
-            console.log(url);
-            downloadFileByUrl(
-                url,
-                `设备导入模版`,
-                type,
-            );
+        const url = URL.createObjectURL(blob);
+        downloadFileByUrl(url, `设备导入模版`, type);
    }
-
-}
+};

 const submitData = async (fileUrl: string) => {
    if (!!fileUrl) {
-      count.value = 0
-      errMessage.value = ''
-      flag.value = true
-      const autoDeploy = !!props?.file?.autoDeploy || false;
-      importLoading.value = true
-      let dt = 0;
-      const source = new EventSourcePolyfill(deviceImport(props.product, fileUrl, autoDeploy));
-      source.onmessage = (e: any) => {
-        const res = JSON.parse(e.data);
-        if (res.success) {
-          const temp = res.result.total;
-          dt += temp;
-          count.value = dt
-        } else {
-          errMessage.value = res.message || '失败'
-        }
-      };
-      source.onerror = (e: { status: number; }) => {
-        if (e.status === 403) errMessage.value = '暂无权限，请联系管理员'
-        flag.value = false
-        source.close();
-      };
-      source.onopen = () => {};
+        count.value = 0;
+        errMessage.value = '';
+        flag.value = true;
+        const autoDeploy = !!props?.file?.autoDeploy || false;
+        importLoading.value = true;
+        let dt = 0;
+        const source = new EventSourcePolyfill(
+            deviceImport(props.product, fileUrl, autoDeploy),
+        );
+        source.onmessage = (e: any) => {
+            const res = JSON.parse(e.data);
+            if (res.success) {
+                const temp = res.result.total;
+                dt += temp;
+                count.value = dt;
+            } else {
+                errMessage.value = res.message || '失败';
+            }
+        };
+        source.onerror = (e: { status: number }) => {
+            if (e.status === 403) errMessage.value = '暂无权限，请联系管理员';
+            flag.value = false;
+            source.close();
+        };
+        source.onopen = () => {};
    } else {
-      message.error('请先上传文件')
+        message.error('请先上传文件');
    }
-}
+};

 const uploadChange = async (info: Record<string, any>) => {
    if (info.file.status === 'done') {
        const resp: any = info.file.response || { result: '' };
        await submitData(resp?.result || '');
    }
-}
-
+};
 </script>
--- a/src/views/device/Instance/Detail/Diagnose/Status/index.tsx
+++ b/src/views/device/Instance/Detail/Diagnose/Status/index.tsx
@ -1693,7 +1693,7 @@ const Status = defineComponent({
                />
            )}
            {
-                bindParentVisible && (
+                bindParentVisible.value && (
                    <BindParentDevice
                        data={device.value}
                        onCancel={() => {
--- a/src/views/device/Instance/Detail/Info/index.vue
+++ b/src/views/device/Instance/Detail/Info/index.vue
@ -25,13 +25,13 @@
                instanceStore.current.deviceType?.text
            }}</j-descriptions-item>
            <j-descriptions-item label="固件版本">{{
-                instanceStore.current.firmwareInfo?.version
+                instanceStore.current?.firmwareInfo?.version
            }}</j-descriptions-item>
            <j-descriptions-item label="连接协议">{{
-                instanceStore.current?.protocolName
+                instanceStore.current?.transport
            }}</j-descriptions-item>
            <j-descriptions-item label="消息协议">{{
-                instanceStore.current.transport
+                instanceStore.current.protocolName
            }}</j-descriptions-item>
            <j-descriptions-item label="创建时间">{{
                instanceStore.current.createTime
--- a/src/views/device/Instance/Detail/Running/Property/Indicators.vue
+++ b/src/views/device/Instance/Detail/Running/Property/Indicators.vue
@ -109,7 +109,9 @@ const loading = ref<boolean>(false);
 const instanceStore = useInstanceStore();
 const formRef = ref();

-const modelRef = reactive({
+const modelRef = reactive<{
+    metrics: any[]
+}>({
    metrics: [],
 });

--- a/src/views/device/Instance/Detail/Running/index.vue
+++ b/src/views/device/Instance/Detail/Running/index.vue
@ -23,11 +23,12 @@
                        :tab="i.tab"
                    />
                </j-tabs>
-                <JEmpty v-else style="margin: 250px 0" />
+                <JEmpty v-else style="margin: 180px 0" />
            </div>
            <div class="property-box-right">
                <Event v-if="type === 'event'" :data="data" />
-                <Property v-else :data="properties" />
+                <Property v-else-if="type === 'property'" :data="properties" />
+                <JEmpty v-else style="margin: 220px 0" />
            </div>
        </div>
    </j-card>
@ -97,6 +98,13 @@ const onSearch = () => {
    } else {
        tabList.value = _.cloneDeep(arr)
    }
+    const dt = tabList.value?.[0]
+    if (dt) {
+        data.value = dt
+        type.value = dt.type;
+    } else {
+        type.value = ''
+    }
 };
 const tabChange = (key: string) => {
    const dt = tabList.value.find((i) => i.key === key);
--- a/src/views/device/Instance/Detail/index.vue
+++ b/src/views/device/Instance/Detail/index.vue
@ -9,7 +9,9 @@
            <div>
                <div style="display: flex; align-items: center">
                    <AIcon type="ArrowLeftOutlined" @click="onBack" />
-                    <div style="margin-left: 20px">{{ instanceStore.current.name }}</div>
+                    <div style="margin-left: 20px">
+                        {{ instanceStore.current.name }}
+                    </div>
                    <j-divider type="vertical" />
                    <j-space>
                        <j-badge
@ -116,8 +118,8 @@ import Function from './Function/index.vue';
 import Modbus from './Modbus/index.vue';
 import OPCUA from './OPCUA/index.vue';
 import EdgeMap from './EdgeMap/index.vue';
-import Parsing from './Parsing/index.vue'
-import Log from './Log/index.vue'
+import Parsing from './Parsing/index.vue';
+import Log from './Log/index.vue';
 import { _deploy, _disconnect } from '@/api/device/instance';
 import { message } from 'jetlinks-ui-components';
 import { getImage } from '@/utils/comm';
@ -149,17 +151,13 @@ const list = ref([
        key: 'Metadata',
        tab: '物模型',
    },
-    {
-        key: 'Log',
-        tab: '日志管理',
-    },
    {
        key: 'Function',
        tab: '设备功能',
    },
    {
-        key: 'ChildDevice',
-        tab: '子设备',
+        key: 'Log',
+        tab: '日志管理',
    },
 ]);

@ -174,7 +172,7 @@ const tabs = {
    OPCUA,
    EdgeMap,
    Parsing,
-    Log
+    Log,
 };

 const getStatus = (id: string) => {
@ -255,6 +253,17 @@ watchEffect(() => {
            tab: '设备诊断',
        });
    }
+    if (
+        instanceStore.current.features?.find(
+            (item: any) => item.id === 'transparentCodec',
+        ) &&
+        !keys.includes('Parsing')
+    ) {
+        list.value.push({
+            key: 'Parsing',
+            tab: '数据解析',
+        });
+    }
    if (
        instanceStore.current.protocol === 'modbus-tcp' &&
        !keys.includes('Modbus')
@ -273,6 +282,13 @@ watchEffect(() => {
            tab: 'OPC UA',
        });
    }
+    if (instanceStore.current.deviceType?.value === 'gateway') {
+        // 产品类型为网关的情况下才显示此模块
+        list.value.push({
+            key: 'ChildDevice',
+            tab: '子设备',
+        });
+    }
    if (
        instanceStore.current.accessProvider === 'edge-child-device' &&
        instanceStore.current.parentId &&
@ -283,15 +299,6 @@ watchEffect(() => {
            tab: '边缘端映射',
        });
    }
-    if (
-        instanceStore.current.features?.find((item: any) => item.id === 'transparentCodec') && 
-        !keys.includes('Parsing')
-    ) {
-        list.value.push({
-            key: 'Parsing',
-            tab: '数据解析',
-        });
-    }
 });

 onUnmounted(() => {
--- a/src/views/device/Instance/Export/index.vue
+++ b/src/views/device/Instance/Export/index.vue
@ -51,7 +51,6 @@
 import { queryNoPagingPost } from '@/api/device/product';
 import { downloadFile } from '@/utils/utils';
 import encodeQuery from '@/utils/encodeQuery';
-import { BASE_API_PATH } from '@/utils/variable';
 import { deviceExport } from '@/api/device/instance';

 const emit = defineEmits(['close']);
--- a/src/views/device/Instance/Process/index.vue
+++ b/src/views/device/Instance/Process/index.vue
@ -1,92 +1,106 @@
 <template>
-    <j-modal :maskClosable="false" width="800px" :visible="true" title="当前进度" @ok="handleCancel" @cancel="handleCancel">
+    <j-modal
+        :maskClosable="false"
+        width="800px"
+        :visible="true"
+        title="当前进度"
+        @ok="handleCancel"
+        @cancel="handleCancel"
+    >
        <div>
            <j-badge v-if="flag" status="processing" text="进行中" />
            <j-badge v-else status="success" text="已完成" />
        </div>
-        <p>总数量：{{count}}</p>
-        <a style="color: red">{{errMessage}}</a>
+        <p>总数量：{{ count }}</p>
+        <a style="color: red">{{ errMessage }}</a>
    </j-modal>
 </template>

 <script lang="ts" setup>
-import { EventSourcePolyfill } from 'event-source-polyfill'
+import { EventSourcePolyfill } from 'event-source-polyfill';

-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'save']);
 const props = defineProps({
    api: {
        type: String,
-        default: ''
+        default: '',
    },
    type: {
        type: String,
-        default: ''
-    }
-})
-const eventSource = ref<Record<string, any>>({})
-const count = ref<number>(0)
-const flag = ref<boolean>(false)
-const errMessage = ref<string>('')
-const isSource = ref<boolean>(false)
-const id = ref<string>('')
-const source = ref<Record<string, any>>({})
+        default: '',
+    },
+});
+// const eventSource = ref<Record<string, any>>({})
+const count = ref<number>(0);
+const flag = ref<boolean>(false);
+const errMessage = ref<string>('');
+const isSource = ref<boolean>(false);
+const id = ref<string>('');
+const source = ref<Record<string, any>>({});

 const handleCancel = () => {
-    emit('close')    
-}
+    emit('close');
+    emit('save');
+};
+
+// const handleOk = () => {
+//     emit('close');
+//     emit('save');
+// };

 const getData = (api: string) => {
-    let dt = 0
-    const _source = new EventSourcePolyfill(api)
-    source.value = _source
+    let dt = 0;
+    const _source = new EventSourcePolyfill(api);
+    source.value = _source;
    _source.onmessage = (e: any) => {
-      const res = JSON.parse(e.data);
-      switch (props.type) {
-        case 'active':
-          if (res.success) {
-            dt += res.total;
-            count.value = dt
-          } else {
-            if (res.source) {
-              const msg = `${res.source.name}: ${res.message}`;
-              errMessage.value = msg
-              id.value = res.source.id
-              isSource.value = true
-            } else {
-              errMessage.value = res.message
-            }
-          }
-          break;
-        case 'sync':
-          dt += res;
-          count.value = dt
-          break;
-        case 'import':
-          if (res.success) {
-            const temp = res.result.total;
-            dt += temp;
-            count.value = dt
-          } else {
-            errMessage.value = res.message
-          }
-          break;
-        default:
-          break;
-      }
+        const res = JSON.parse(e.data);
+        switch (props.type) {
+            case 'active':
+                if (res.success) {
+                    dt += res.total;
+                    count.value = dt;
+                } else {
+                    if (res.source) {
+                        const msg = `${res.source.name}: ${res.message}`;
+                        errMessage.value = msg;
+                        id.value = res.source.id;
+                        isSource.value = true;
+                    } else {
+                        errMessage.value = res.message;
+                    }
+                }
+                break;
+            case 'sync':
+                dt += res;
+                count.value = dt;
+                break;
+            case 'import':
+                if (res.success) {
+                    const temp = res.result.total;
+                    dt += temp;
+                    count.value = dt;
+                } else {
+                    errMessage.value = res.message;
+                }
+                break;
+            default:
+                break;
+        }
    };
    _source.onerror = () => {
-      flag.value = false
-      _source.close();
+        flag.value = false;
+        _source.close();
    };
    _source.onopen = () => {};
-}
+};

-watch(() => props.api,
+watch(
+    () => props.api,
    (newValue) => {
-        if(newValue) {
-            getData(newValue)
+        if (newValue) {
+            getData(newValue);
        }
    },
-    {deep: true, immediate: true}
-)
+    { deep: true, immediate: true },
+);
 </script>
--- a/src/views/device/Instance/Save/index.vue
+++ b/src/views/device/Instance/Save/index.vue
@ -9,12 +9,7 @@
        :confirmLoading="loading"
    >
        <div style="margin-top: 10px">
-            <j-form
-                :layout="'vertical'"
-                ref="formRef"
-                :rules="rules"
-                :model="modelRef"
-            >
+            <j-form :layout="'vertical'" ref="formRef" :model="modelRef">
                <j-row type="flex">
                    <j-col flex="180px">
                        <j-form-item name="photoUrl">
@ -22,14 +17,33 @@
                        </j-form-item>
                    </j-col>
                    <j-col flex="auto">
-                        <j-form-item name="id">
+                        <j-form-item
+                            name="id"
+                            :rules="[
+                                {
+                                    pattern: /^[a-zA-Z0-9_\-]+$/,
+                                    message: '请输入英文或者数字或者-或者_',
+                                },
+                                {
+                                    max: 64,
+                                    message: '最多输入64个字符',
+                                },
+                                {
+                                    validator: vailId,
+                                    trigger: 'blur',
+                                },
+                            ]"
+                        >
                            <template #label>
                                <span>
                                    ID
-                                    <j-tooltip title="若不填写，系统将自动生成唯一ID">
+                                    <j-tooltip
+                                        title="若不填写，系统将自动生成唯一ID"
+                                    >
                                        <AIcon
                                            type="QuestionCircleOutlined"
-                                            style="margin-left: 2px;" />
+                                            style="margin-left: 2px"
+                                        />
                                    </j-tooltip>
                                </span>
                            </template>
@ -39,7 +53,20 @@
                                :disabled="!!data?.id"
                            />
                        </j-form-item>
-                        <j-form-item label="名称" name="name">
+                        <j-form-item
+                            label="名称"
+                            name="name"
+                            :rules="[
+                                {
+                                    required: true,
+                                    message: '请输入名称',
+                                },
+                                {
+                                    max: 64,
+                                    message: '最多输入64个字符',
+                                },
+                            ]"
+                        >
                            <j-input
                                v-model:value="modelRef.name"
                                placeholder="请输入名称"
@ -47,13 +74,23 @@
                        </j-form-item>
                    </j-col>
                </j-row>
-                <j-form-item name="productId">
+                <j-form-item
+                    name="productId"
+                    :rules="[
+                        {
+                            required: true,
+                            message: '请选择所属产品',
+                        },
+                    ]"
+                >
                    <template #label>
-                        <span>所属产品
+                        <span
+                            >所属产品
                            <j-tooltip title="只能选择“正常”状态的产品">
                                <AIcon
                                    type="QuestionCircleOutlined"
-                                    style="margin-left: 2px" />
+                                    style="margin-left: 2px"
+                                />
                            </j-tooltip>
                        </span>
                    </template>
@ -68,10 +105,20 @@
                            v-for="item in productList"
                            :key="item.id"
                            :label="item.name"
-                        >{{item.name}}</j-select-option>
+                            >{{ item.name }}</j-select-option
+                        >
                    </j-select>
                </j-form-item>
-                <j-form-item label="说明" name="describe">
+                <j-form-item
+                    label="说明"
+                    name="describe"
+                    :rules="[
+                        {
+                            max: 200,
+                            message: '最多输入200个字符'
+                        },
+                    ]"
+                >
                    <j-textarea
                        v-model:value="modelRef.describe"
                        placeholder="请输入说明"
@ -123,45 +170,6 @@ const vailId = async (_: Record<string, any>, value: string) => {
    }
 };

-const rules = {
-    name: [
-        {
-            required: true,
-            message: '请输入名称',
-        },
-        {
-            max: 64,
-            message: '最多输入64个字符',
-        },
-    ],
-    photoUrl: [
-        {
-            required: true,
-            message: '请上传图标',
-        },
-    ],
-    productId: [
-        {
-            required: true,
-            message: '请选择所属产品',
-        },
-    ],
-    id: [
-        {
-            max: 64,
-            message: '最多输入64个字符',
-        },
-        {
-            pattern: /^[j-zA-Z0-9_\-]+$/,
-            message: '请输入英文或者数字或者-或者_',
-        },
-        {
-            validator: vailId,
-            trigger: 'blur',
-        },
-    ],
-};
-
 watch(
    () => props.data,
    (newValue) => {
@ -199,13 +207,13 @@ const handleSave = () => {
        .validate()
        .then(async (_data: any) => {
            loading.value = true;
-            const obj = {...toRaw(modelRef), ..._data}
-            if(!obj.id){
-                delete obj.id
+            const obj = { ..._data };
+            if (!obj.id) {
+                delete obj.id;
            }
            const resp = await update(obj).finally(() => {
                loading.value = false;
-            })
+            });
            if (resp.status === 200) {
                message.success('操作成功！');
                emit('save');
--- a/src/views/device/Instance/index.vue
+++ b/src/views/device/Instance/index.vue
@ -252,6 +252,7 @@
        @close="operationVisible = false"
        :api="api"
        :type="type"
+        @save="onRefresh"
    />
    <Save
        v-if="visible"
@ -314,6 +315,7 @@ const columns = [
        key: 'id',
        search: {
            type: 'string',
+            defaultTermType: 'eq'
        },
    },
    {
@ -322,6 +324,7 @@ const columns = [
        key: 'name',
        search: {
            type: 'string',
+            first: true
        },
    },
    {
@ -389,6 +392,7 @@ const columns = [
        hideInTable: true,
        search: {
            type: 'select',
+            rename: 'productId$product-info',
            options: () =>
                new Promise((resolve) => {
                    getProviders().then((resp: any) => {
--- a/src/views/rule-engine/Scene/Save/Timer/index.vue
+++ b/src/views/rule-engine/Scene/Save/Timer/index.vue
@ -13,17 +13,16 @@
 import { useSceneStore } from '@/store/scene';
 import Action from '../action/index.vue';
 import { storeToRefs } from 'pinia';
-import { ActionsType } from '@/components/Table';
+import { ActionsType } from '@/views/rule-engine/Scene/typings';

 const sceneStore = useSceneStore();
 const { data } = storeToRefs(sceneStore);

-const onActionAdd = (_data: ActionsType) => {
-  console.log(_data)
-    // if (data?.branches && _data) {
-    //     const newThen = [...data?.branches?.[0].then, data];
-    //     data.branches[0].then = newThen;
-    // }
+const onActionAdd = (_data: any) => {
+    if (data.value?.branches && _data) {
+      data?.value.branches?.[0].then.push(_data)
+      console.log(data?.value.branches?.[0].then)
+    }
 };

 const onActionUpdate = (_data: ActionsType, type: boolean) => {
--- a/src/views/rule-engine/Scene/Save/action/Modal/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/Modal/index.vue
@ -18,13 +18,7 @@
                    },
                ]"
            >
-                <!-- <j-card-select
-                    v-model:value="formModel.type"
-                    :options="options"
-                    type="horizontal"
-                    float="right"
-                /> -->
-                <a-radio-group v-model:value="formModel.type" :options="options" />
+                <CardSelect v-model:value="formModel.type" :options="options"/>
            </a-form-item>
            <ActionTypeComponent
                v-bind="props"
@ -46,6 +40,7 @@ import { PropType } from 'vue';
 import { ActionsType } from '../../../typings';
 import ActionTypeComponent from './ActionTypeComponent.vue';
 import { randomString } from '@/utils/utils';
+import CardSelect from '../../components/CardSelect.vue'

 const props = defineProps({
    branchesName: {
--- a/src/views/rule-engine/Scene/Save/action/Notify/NotifyWay.vue
+++ b/src/views/rule-engine/Scene/Save/action/Notify/NotifyWay.vue
@ -1,11 +1,19 @@
 <template>
    <a-spin :spinning="loading">
-        <!-- <j-card-select
-            v-model:value="notifyType"
-            :options="options"
-            :icon-size="106"
-        /> -->
-        <a-radio-group v-model:value="notifyType" :options="options" @change="onRadioChange" />
+        <div class="notify-type-warp" :class="{ disabled: disabled }">
+            <div
+                :key="item.id"
+                v-for="item in options"
+                class="notify-type-item"
+                :class="{ active: notifyType === item.value }"
+                @click="onSelect(item.value)"
+            >
+                <div class="notify-type-item-image">
+                    <img :width="106" :src="item.iconUrl" />
+                </div>
+                <div class="notify-type-item-title">{{item.label}}</div>
+            </div>
+        </div>
    </a-spin>
 </template>

@ -26,9 +34,13 @@ const props = defineProps({
        type: String,
        default: '',
    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
 });

-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:value']);

 const loading = ref<boolean>(false);
 const notifyType = ref('');
@ -37,17 +49,19 @@ const options = ref<any[]>([]);
 watch(
    () => props.value,
    (newVal) => {
-        notifyType.value = newVal
+        notifyType.value = newVal;
    },
    { deep: true, immediate: true },
 );

-const onRadioChange = (e: any) => {
-    emit('update:value', e.target.value)
-}
+const onSelect = (val: string) => {
+    if (!props.disabled) {
+        emit('update:value', val);
+    }
+};

 onMounted(() => {
-    loading.value = true
+    loading.value = true;
    notice.queryMessageType().then((resp) => {
        if (resp.status === 200) {
            options.value = (resp.result as any[]).map((item) => {
@ -58,11 +72,65 @@ onMounted(() => {
                };
            });
        }
-        loading.value = false
+        loading.value = false;
    });
-    notifyType.value = props.value
+    notifyType.value = props.value;
 });
 </script>

 <style lang="less" scoped>
+.notify-type-warp {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 24px;
+  width: 100%;
+
+  .notify-type-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 172px;
+    border: 1px solid #e0e4e8;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    .notify-type-item-title {
+      margin-bottom: 8px;
+      font-weight: 500;
+      font-size: 14px;
+    }
+
+    .notify-type-item-image {
+      width: 106px;
+      margin: 16px 33px;
+    }
+
+    &:hover {
+      color: @primary-color-hover;
+      opacity: 0.8;
+    }
+
+    &.active {
+      border-color: @primary-color-active;
+      opacity: 1;
+    }
+  }
+
+  &.disabled {
+    .notify-type-item {
+      cursor: not-allowed;
+
+      &:hover {
+        color: initial;
+        opacity: 0.6;
+      }
+
+      &.active {
+        opacity: 1;
+      }
+    }
+  }
+}
+
 </style>
--- a/src/views/rule-engine/Scene/Save/action/index.vue
+++ b/src/views/rule-engine/Scene/Save/action/index.vue
@ -26,7 +26,7 @@
                            :actions="
                                serialArray.length ? serialArray[0].actions : []
                            "
-                            @add="onAdd"
+                            @add="(_item) => onAdd(_item, false)"
                            @delete="onDelete"
                        />
                    </div>
@ -50,7 +50,7 @@
                                    ? parallelArray[0].actions
                                    : []
                            "
-                            @add="onAdd"
+                            @add="(_item) => onAdd(_item, true)"
                            @delete="onDelete"
                        />
                    </div>
@ -98,6 +98,8 @@ watch(
        parallelArray.value = newVal.filter((item) => item.parallel);
        serialArray.value = newVal.filter((item) => !item.parallel);

+        console.log(parallelArray.value, serialArray.value, '123')
+
        const isSerialActions = serialArray.value.some((item) => {
            return !!item.actions.length;
        });
@ -128,7 +130,7 @@ const onDelete = (_key: string) => {
        emit('update', serialArray[0], false);
    }
 };
-const onAdd = (actionItem: any) => {
+const onAdd = (actionItem: any, _parallel: boolean) => {
    const newParallelArray = [...parallelArray.value];
    if (newParallelArray.length) {
        const indexOf = newParallelArray[0].actions?.findIndex(
@ -140,12 +142,11 @@ const onAdd = (actionItem: any) => {
            newParallelArray[0].actions.push(actionItem);
        }
        parallelArray.value = [...newParallelArray];
-        console.log(parallelArray.value);
-        emit('update', newParallelArray[0], true);
+        emit('update', newParallelArray[0], _parallel);
    } else {
        actionItem.key = randomString();
        emit('add', {
-            parallel: true,
+            parallel: _parallel,
            key: randomString(),
            actions: [actionItem],
        });
--- a/src/views/rule-engine/Scene/Save/components/CardSelect.vue
+++ b/src/views/rule-engine/Scene/Save/components/CardSelect.vue
@ -0,0 +1,128 @@
+<template>
+    <div class="scene-trigger-way-warp" :class="{disabled: disabled}">
+        <template v-for="item in options" :key="item.value">
+            <div
+                class="trigger-way-item"
+                :class="{ active: item?.value === value }"
+                :style="{width: `${cardSize}px`}"
+                @click="onSelect(item.value)"
+            >
+                <div class="way-item-title">
+                    <p>{{ item.label }}</p>
+                    <span>{{ item.subLabel }}</span>
+                </div>
+                <div class="way-item-image">
+                    <img :src="item.iconUrl" :width="imageSize" />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+    options: {
+        type: Array as PropType<any[]>,
+        default: () => [],
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    type: {
+        type: String as PropType<'vertical' | 'horizontal'>,
+        default: 'horizontal',
+    },
+    imageSize: {
+        type: Number,
+        default: 48
+    },
+    cardSize: {
+        type: Number,
+        default: 237
+    }
+});
+
+const emit = defineEmits(['update:value'])
+
+const onSelect = (_type: string) => {
+    if (!props.disabled) {
+      emit('update:value', _type)
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.scene-trigger-way-warp {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px 24px;
+    width: 100%;
+
+    .trigger-way-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 16px;
+        border: 1px solid #e0e4e8;
+        border-radius: 2px;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        .way-item-title {
+            p {
+                margin-bottom: 8px;
+                font-weight: bold;
+                font-size: 16px;
+            }
+
+            span {
+                color: rgba(#000, 0.35);
+                font-size: 12px;
+            }
+        }
+
+        .way-item-image {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            margin: 0 !important;
+            opacity: 0.6;
+        }
+
+        &:hover {
+            color: @primary-color-hover;
+            .way-item-image {
+                opacity: 0.8;
+            }
+        }
+
+        &.active {
+            border-color: @primary-color-active;
+            .way-item-image {
+                opacity: 1;
+            }
+        }
+    }
+
+    &.disabled {
+        .trigger-way-item {
+            cursor: not-allowed;
+
+            &:hover {
+                color: initial;
+                opacity: 0.6;
+            }
+
+            &.active {
+                opacity: 1;
+            }
+        }
+    }
+}
+</style>