Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

src/api/device/category.ts

@@ -0,0 +1,25 @@
+// 产品分类
+import server from '@/utils/request'
+import { CategoryItem } from '@/views/device/Category/typings'
+/**
+ * 查询产品分类树形数据
+ */
+ 
+export const queryTree = (params?: Record<string, any>) => server.post<CategoryItem>('/device/category/_tree', params)
+
+/**
+ * 保存树形数据
+ */
+ export const saveTree = (data: any) =>server.post('/device/category', data)
+ 
+
+ /**
+  * 根据Id修改
+  */
+ export const updateTree = (data: any, id:string) => server.put(`/device/category/${id}`, data)
+
+ /**
+  * 根据Id删除数据
+  */
+  
+ export const deleteTree = (id:string) => server.remove(`/device/category/${id}`)

src/api/home.js

@@ -1,8 +0,0 @@
-import server from '@/utils/request';
-
-// 设备数量
-export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
-// 产品数量
-export const getProductCount_api = (data) => server.post(`/device-product/_count`, data);
-// 查询产品列表
-export const getProductList_api = (data) => server.get(`/device/product/_query/no-paging?paging=false`, data);

src/api/home.ts

@@ -0,0 +1,17 @@
+import server from '@/utils/request';
+
+// 当前登录用户权限信息
+export const getMe_api = () => server.get(`/authorize/me`);
+// 设置登录用户选择的页面
+export const setView_api = (data:object) => server.patch(`/user/settings/view/user`, data);
+// 当前登录用户选择的页面
+export const getView_api = () => server.get(`/user/settings/view/user`);
+
+// 设备数量
+export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
+// 产品数量
+export const getProductCount_api = (data:object) => server.post(`/device-product/_count`, data);
+// 查询产品列表
+export const getProductList_api = (data:object={}) => server.get(`/device/product/_query/no-paging?paging=false`, data);
+// 查询设备列表
+export const getDeviceList_api = (data:object) => server.post(`/device-instance/_query/`, data);

src/api/iot-card/cardManagement.ts

@@ -0,0 +1,67 @@
+import server from '@/utils/request'
+
+/**
+ * 不分页查询平台对接
+ * @param data
+ */
+export const queryPlatformNoPage = (data: any) => server.post(`/network/card/platform/_query/no-paging`, data)
+
+/**
+ * 分页查询物联卡管理列表
+ * @param data
+ */
+export const query = (data: any) => server.post(`/network/card/_query`, data)
+
+/**
+ * 激活待激活物联卡
+ * @param cardId
+ */
+export const changeDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_activation`);
+
+/**
+ * 停用已激活物联卡
+ * @param cardId
+ */
+export const unDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_deactivate`);
+
+/**
+ * 复机已停机物联卡
+ * @param cardId 
+ */
+export const resumption = (cardId: string) => server.get(`/network/card/${cardId}/_resumption`);
+
+/**
+ * 删除物联卡
+ * @param id 
+ */
+export const del = (id: string) => server.remove(`/network/card/${id}`);
+
+
+/**
+ * 激活待激活物联卡(批量)
+ * @param data
+ */
+export const changeDeployBatch = (data: any) => server.get(`/network/card/_activation/_bitch`, data);
+
+/**
+ * 停用已激活物联卡(批量)
+ * @param data
+ */
+export const unDeployBatch = (data: any) => server.get(`/network/card/_deactivate/_bitch`, data);
+
+/**
+ * 复机已停机物联卡(批量)
+ * @param data
+ */
+export const resumptionBatch = (data: any) => server.get(`/network/card/_resumption/_bitch`, data);
+
+/**
+ * 同步物联卡状态
+ */
+export const sync = () => server.get(`/network/card/state/_sync`);
+
+/**
+ * 批量删除物联卡
+ * @param data
+ */
+export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);

src/api/login.js

@@ -1,17 +0,0 @@
-import server from '@/utils/request'
-
-export const config = () => server.get(`/authorize/captcha/config`)
-
-export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
-
-export const authLogin = (data) => server.post(`/authorize/login`, data)
-
-export const getInitSet = () => server.get(`/user/settings/init`)
-
-export const postInitSet = (data) => server.post(`/user/settings/init`, data)
-
-export const systemVersion = () => server.get(`/system/version`)
-
-export const bindInfo = () => server.get(`/application/sso/_all`)
-
-export const settingDetail = (scopes) => server.get(`/system/config/${scopes}`)

src/api/login.ts

@@ -0,0 +1,49 @@
+import server from '@/utils/request'
+
+/**
+ * 获取验证码配置
+ * @returns 
+ */
+export const config = () => server.get(`/authorize/captcha/config`)
+
+/**
+ * 获取验证码图片
+ * @returns 
+ */
+export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
+
+/**
+ * 登录
+ * @returns 
+ */
+export const authLogin = (data: any) => server.post(`/authorize/login`, data)
+
+/**
+ * 查询初始化配置信息
+ * @returns 
+ */
+export const getInitSet = () => server.get(`/user/settings/init`)
+
+/**
+ * 创建初始化配置信息
+ * @returns 
+ */
+export const postInitSet = (data: any) => server.post(`/user/settings/init`, data)
+
+/**
+ * 查询系统版本信息
+ * @returns 
+ */
+export const systemVersion = () => server.get(`/system/version`)
+
+/**
+ * 获取支持的SSO的应用
+ * @returns 
+ */
+export const bindInfo = () => server.get(`/application/sso/_all`)
+
+/**
+ * 查询配置信息
+ * @returns 
+ */
+export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)

src/api/notice/config.ts

@@ -1,4 +1,5 @@
-import { patch, post, get } from '@/utils/request'
+import { patch, post, get, remove } from '@/utils/request'
+import { TemplateFormData } from '@/views/notice/Template/types'
 
 export default {
     // 列表
@@ -8,5 +9,30 @@ export default {
     // 新增
     save: (data: any) => post(`/notifier/config`, data),
     // 修改
-    update: (data: any) => patch(`/notifier/config`, data)
+    update: (data: any) => patch(`/notifier/config`, data),
+    del: (id: string) => remove(`/notifier/config/${id}`),
+    getTemplate: (data: any, id: string) => post<TemplateFormData[]>(`/notifier/template/${id}/_query`, data),
+    getTemplateDetail: (id: string) => get<TemplateFormData>(`/notifier/template/${id}/detail`),
+    debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
+    getHistory: (data: any, id: string) => post(`/notify/history/config/${id}/_query`, data),
+    // 获取所有平台用户
+    getPlatformUsers: () => post(`/user/_query/no-paging`, { paging: false }),
+    // 钉钉部门
+    dingTalkDept: (id: string) => get(`/notifier/dingtalk/corp/${id}/departments/tree`),
+    // 钉钉部门人员
+    getDingTalkUsers: (configId: string, deptId: string) => get(`/notifier/dingtalk/corp/${configId}/${deptId}/users`),
+    // 钉钉已经绑定的人员
+    getDingTalkBindUsers: (id: string) => get(`/user/third-party/dingTalk_dingTalkMessage/${id}`),
+    // 钉钉绑定用户
+    dingTalkBindUser: (data: any, id: string) => patch(`/user/third-party/dingTalk_dingTalkMessage/${id}`, data),
+    // 微信部门
+    weChatDept: (id: string) => get(`/notifier/wechat/corp/${id}/departments`),
+    // 微信部门人员
+    getWeChatUsers: (configId: string, deptId: string) => get(`/notifier/wechat/corp/${configId}/${deptId}/users`),
+    // 微信已经绑定的人员
+    getWeChatBindUsers: (id: string) => get(`/user/third-party/weixin_corpMessage/${id}`),
+    // 微信绑定用户
+    weChatBindUser: (data: any, id: string) => patch(`/user/third-party/weixin_corpMessage/${id}`, data),
+    // 解绑
+    unBindUser: (data: any, id: string) => post(`/user/third-party/${id}/_unbind`, data)
 }

src/api/notice/template.ts

@@ -1,4 +1,5 @@
-import { patch, post, get } from '@/utils/request'
+import { patch, post, get, remove } from '@/utils/request'
+import { BindConfig } from '@/views/notice/Template/types'
 
 export default {
     // 列表
@@ -8,5 +9,19 @@ export default {
     // 新增
     save: (data: any) => post(`/notifier/template`, data),
     // 修改
-    update: (data: any) => patch(`/notifier/template`, data)
+    update: (data: any) => patch(`/notifier/template`, data),
+    del: (id: any) => remove(`/notifier/template/${id}`),
+    getConfig: (data: any) => post<BindConfig>(`/notifier/config/_query/no-paging?paging=false`, data),
+    getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
+    debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
+    getHistory: (data: any, id: string) => post(`/notify/history/template/${id}/_query`, data),
+    // 钉钉/微信, 根据配置获取部门和用户
+    getDept: (type: string, id: string) => get<any>(`/notifier/${type}/corp/${id}/departments`),
+    getUser: (type: string, id: string) => get<any>(`/notifier/${type}/corp/${id}/users`),
+    // 微信获取标签推送
+    getTags: (id: string) => get<any>(`/notifier/wechat/corp/${id}/tags`),
+    // 语音/短信获取阿里云模板
+    getAliTemplate: (id: any) => get(`/notifier/sms/aliyun/${id}/templates`),
+    // 短信获取签名
+    getSigns: (id: any) => get(`/notifier/sms/aliyun/${id}/signs`)
 }

src/api/system/permission.ts

@@ -0,0 +1,15 @@
+import server from '@/utils/request';
+
+// 获取权限列表
+export const getPermission_api = (data: object) => server.post(`/permission/_query/`, data);
+// 新增时校验标识id是否可用
+export const checkId_api = (data: object) => server.get(`/permission/id/_validate`, data);
+// 修改权限 | 导入文件内容
+export const editPermission_api = (data: object) => server.patch(`/permission`, data);
+// 添加权限
+export const addPermission_api = (data: object) => server.post(`/permission`, data);
+// 删除权限
+export const delPermission_api = (id: string) => server.remove(`/permission/${id}`);
+
+// 导出权限数据
+export const exportPermission_api = (data: object) => server.post(`/permission/_query/no-paging`, data);

src/components/AIcon/index.tsx

@@ -26,7 +26,18 @@ const iconKeys = [
     'ExportOutlined',
     'SyncOutlined',
     'ExclamationCircleOutlined',
-    'UploadOutlined'
+    'UploadOutlined',
+    'PlusCircleOutlined',
+    'QuestionCircleOutlined',
+    'DisconnectOutlined',
+    'LinkOutlined',
+    'PoweroffOutlined',
+    'SwapOutlined',
+    'BugOutlined',
+    'BarsOutlined',
+    'ArrowDownOutlined',
+    'SmallDashOutlined',
+    'TeamOutlined',
 ]
 
 const Icon = (props: {type: string}) => {

src/components/RadioCard/index.vue

@@ -25,6 +25,7 @@ interface IOption {
 
 type Emits = {
     (e: 'update:modelValue', data: string): void;
+    (e: 'change') :void
 };
 const emit = defineEmits<Emits>();
 
@@ -41,7 +42,10 @@ const props = defineProps({
 
 const myValue = computed({
     get: () => props.modelValue,
-    set: (val) => emit('update:modelValue', val),
+    set: (val) => {
+        emit('update:modelValue', val)
+        emit('change')
+    },
 });
 </script>
 

src/components/ValueItem/index.vue

@@ -109,7 +109,7 @@ const props = defineProps({
     // 组件类型
     itemType: {
         type: String,
-        default: () => 'geoPoint',
+        default: () => 'string',
     },
     // 下拉选择框下拉数据
     options: {

src/router/menu.ts

@@ -109,6 +109,10 @@ export default [
         path:'/system/Role/detail/:id',
         component: ()=>import('@/views/system/Role/Detail/index.vue')
     },
+    {
+        path:'/system/Permission',
+        component: ()=>import('@/views/system/Permission/index.vue')
+    },
     // 初始化
     {
       path: '/init-home',
@@ -116,9 +120,17 @@ export default [
     },
     // 物联卡 iot-card
     {
-      path: '/iot-card/home',
+      path: '/iot-card/Home',
       component: () => import('@/views/iot-card/Home/index.vue')
     },
+    {
+      path: '/iot-card/Dashboard',
+      component: () => import('@/views/iot-card/Dashboard/index.vue')
+    },
+    {
+      path: '/iot-card/CardManagement',
+      component: () => import('@/views/iot-card/CardManagement/index.vue')
+    },
     // 北向输出
     {
         path: '/northbound/DuerOS',
@@ -128,4 +140,10 @@ export default [
         path: '/northbound/AliCloud',
         component: () => import('@/views/northbound/AliCloud/index.vue')
     },
+
+    // 产品分类 
+    {
+      path: '/iot/device/Category',
+        component: () => import('@/views/device/Category/index.vue')
+    }
 ]

src/utils/comm.ts

@@ -6,7 +6,7 @@ import { Terms } from 'components/Search/types'
  * @param path {String} 路径
  */
 export const getImage = (path: string) => {
-    return new URL('/images'+path, import.meta.url).href
+    return new URL('/images' + path, import.meta.url).href
 }
 
 export const LocalStore = {
@@ -57,3 +57,30 @@ export const filterTreeSelectNode = (value: string, treeNode: any, key: string =
 export const filterSelectNode = (value: string, option: any, key: string = 'label'): boolean => {
     return option[key]?.includes(value)
 }
+
+/**
+ * 时间转换为'2022-01-02 14:03:05'
+ * @param date 时间对象
+ * @returns 
+ */
+export const dateFormat = (dateSouce:any):string|Error => {
+    let date = null
+    try {
+        date = new Date(dateSouce)
+    } catch (error) {
+        return new Error('请传入日期格式数据')
+    }
+    let year = date.getFullYear();
+    let month: number | string = date.getMonth() + 1;
+    let day: number | string = date.getDate();
+    let hour: number | string = date.getHours();
+    let minutes: number | string = date.getMinutes();
+    let seconds: number | string = date.getSeconds();
+    month = (month < 10) ? '0' + month : month;
+    day = (day < 10) ? '0' + day : day;
+    hour = (hour < 10) ? '0' + hour : hour;
+    minutes = (minutes < 10) ? '0' + minutes : minutes;
+    seconds = (seconds < 10) ? '0' + seconds : seconds;
+    return year + "-" + month + "-" + day
+        + " " + hour + ":" + minutes + ":" + seconds;
+}

src/utils/utils.ts

@@ -1,6 +1,7 @@
 import moment from "moment";
 import { LocalStore } from "./comm";
 import { TOKEN_KEY } from "./variable";
+import {SystemConst} from './consts';
 
 /**
  * 把数据下载成JSON
@@ -52,4 +53,23 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
   document.body.appendChild(formElement);
   formElement.submit();
   document.body.removeChild(formElement);
-};
+};
+// 是否不是community版本
+export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
+
+
+/**
+ * 生成随机数
+ * @param length 
+ * @returns 
+ */
+export const randomString = (length?: number) => {
+  const tempLength = length || 32;
+  const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
+  const maxPos = chars.length;
+  let pwd = '';
+  for (let i = 0; i < tempLength; i += 1) {
+    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return pwd;
+};

src/views/device/Category/components/modifyModal/index.vue

@@ -0,0 +1,203 @@
+<!-- 新增编辑弹窗 -->
+<template>
+    <a-modal
+        :title="props.title"
+        :maskClosable="false"
+        destroy-on-close
+        v-model:visible="visible"
+        @ok="submitData"
+        @cancel="close"
+        okText="确定"
+        cancelText="取消"
+        v-bind="layout"
+    >
+        <a-form
+            layout="vertical"
+            v-model="formModel"
+            :rules="rules"
+            ref="formRef"
+        >
+            <a-form-item label="名称" name="name" v-bind="validateInfos.name">
+                <a-input v-model:value="formModel.name" :maxlength="64" />
+            </a-form-item>
+            <a-form-item
+                label="排序"
+                name="sortIndex"
+                v-bind="validateInfos.sortIndex"
+            >
+                <a-input-number
+                    style="width: 100%"
+                    id="inputNumber"
+                    v-model:value="formModel.sortIndex"
+                    :min="1"
+                />
+            </a-form-item>
+            <a-form-item label="说明">
+                <a-textarea
+                    v-model:value="formModel.description"
+                    show-count
+                    :maxlength="200"
+                />
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+<script setup lang="ts" name="modifyModal">
+import { PropType } from 'vue';
+import { Form } from 'ant-design-vue';
+import { queryTree } from '@/api/device/category';
+import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+import { list } from '@/api/iot-card/home';
+const emits = defineEmits(['refresh']);
+const formRef = ref();
+const useForm = Form.useForm;
+const props = defineProps({
+    formData: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => {},
+    },
+    title: {
+        type: String,
+        defult: '',
+    },
+    isAdd: {
+        type: Number,
+        default: 0,
+    },
+    isChild: {
+        type: Boolean,
+        default: false,
+    },
+});
+interface formState {
+    name: string;
+    sortIndex: number;
+    description: string;
+}
+const listData = ref([]);
+/**
+ * 表单数据
+ */
+const formModel = ref<formState>({
+    name: '',
+    sortIndex: 1,
+    description: '',
+});
+const rules = ref({
+    name: [{ required: true, message: '请输入名称' }],
+    sortIndex: [{ required: true, message: '请输入排序' }],
+});
+const visible = ref(false);
+const { resetFields, validate, validateInfos } = useForm(
+    formModel.value,
+    rules.value,
+);
+/**
+ * 提交数据
+ */
+const submitData = async () => {
+    validate()
+        .then(async () => {})
+        .catch((error: ValidateErrorEntity<formState>) => {});
+};
+/**
+ * 显示弹窗
+ */
+const show = (row: any) => {
+    if (props.isAdd === 0) {
+        //新增
+        if (props.isChild) {
+            //存在子类
+            if (row.children && row.children.length > 0) {
+                let childArr = [];
+                childArr = row.children.sort(compare('sortIndex'));
+                formModel.value = {
+                    name: '',
+                    sortIndex: childArr[childArr.length - 1].sortIndex + 1,
+                    description: '',
+                };
+            } else {
+                formModel.value = {
+                    name: '',
+                    sortIndex: 1,
+                    description: '',
+                };
+            }
+        } else {
+            let arr = [];
+            arr = listData.value.sort(compare('sortIndex'));
+            if (arr.length > 0) {
+                formModel.value = {
+                    name: '',
+                    sortIndex: arr[arr.length - 1].sortIndex + 1,
+                    description: '',
+                };
+            } else {
+                formModel.value = {
+                    name: '',
+                    sortIndex: 1,
+                    description: '',
+                };
+            }
+        }
+
+        visible.value = true;
+    } else if (props.isAdd === 2) {
+        // 编辑
+        formModel.value = {
+            name: row.name,
+            sortIndex: row.sortIndex,
+            description: row.description,
+        };
+        visible.value = true;
+    }
+};
+/**
+ * 判断是新增还是编辑
+ */
+const judgeIsAdd = () => {};
+/**
+ * 排序
+ */
+const compare = (property: any) => {
+        return function (obj1: any, obj2: any) {
+            var value1 = obj1[property];
+            var value2 = obj2[property];
+            return value1 - value2; // 升序
+        };
+    },
+    /**
+     * 获取列表数据
+     */
+    getTableData = async () => {
+        const params = {
+            paging: false,
+            sorts: [
+                { name: 'sortIndex', order: 'asc' },
+                {
+                    name: 'createTime',
+                    order: 'desc',
+                },
+            ],
+        };
+        const res = await queryTree(params);
+        if (res.status === 200) {
+            listData.value = res.result;
+            console.log(listData.value, 'listData.value');
+        }
+    };
+/**
+ * 关闭弹窗
+ */
+const close = () => {
+    visible.value = false;
+    resetFields();
+};
+getTableData();
+//监听项目ID
+watch([() => props.isAdd], () => {}, { immediate: false, deep: true });
+defineExpose({
+    show: show,
+});
+</script>
+<style></style>

src/views/device/Category/index.vue

@@ -0,0 +1,221 @@
+<!--产品分类 -->
+<template>
+    <a-card class="product-category">
+        <Search :columns="query.columns" target="category" />
+        <JTable
+            ref="tableRef"
+            :columns="table.columns"
+            :request="queryTree"
+            model="TABLE"
+            :params="query.params"
+        >
+            <template #headerTitle>
+                <a-button type="primary" @click="add"
+                    ><plus-outlined />新增</a-button
+                >
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps, 'table')"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm
+                            v-if="i.popConfirm"
+                            v-bind="i.popConfirm"
+                            :disabled="i.disabled"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+        <!-- 新增和编辑弹窗 -->
+        <ModifyModal
+            ref="modifyRef"
+            :formData="currentForm"
+            :title="title"
+            :isAdd="isAdd"
+            :isChild="isChild"
+            @refresh="() => modifyRef.value?.reload()"
+        />
+    </a-card>
+</template>
+<script lang="ts" name="Category" setup>
+import { queryTree, deleteTree } from '@/api/device/category';
+import type { ActionsType } from '@/components/Table/index.vue';
+import ModifyModal from './components/modifyModal/index.vue';
+import type { TableColumnType, TableProps } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
+const tableRef = ref<Record<string, any>>({});
+const modifyRef = ref();
+const dataSource = ref([]);
+const currentForm = ref({});
+const title = ref('');
+const isAdd = ref(0);
+const isChild = ref(false);
+// 筛选
+const query = reactive({
+    columns: [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            ellipsis: true,
+        },
+        {
+            title: '排序',
+            dataIndex: 'sortIndex',
+            valueType: 'digit',
+            sorter: true,
+        },
+        {
+            title: '描述',
+            key: 'description',
+            ellipsis: true,
+            dataIndex: 'description',
+            filters: true,
+            onFilter: true,
+        },
+        {
+            title: '操作',
+            valueType: 'option',
+            width: 200,
+            fixed: 'right',
+        },
+    ],
+    params: {
+        paging: false,
+        sorts: [
+            { name: 'sortIndex', order: 'asc' },
+            {
+                name: 'createTime',
+                order: 'desc',
+            },
+        ],
+    },
+});
+
+/**
+ * 操作栏按钮
+ */
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'table',
+): ActionsType[] => {
+    if (!data) return [];
+    const actions = [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: async () => {
+                title.value = '编辑分类';
+                isAdd.value = 2;
+                currentForm.value = data;
+                nextTick(() => {
+                    modifyRef.value.show(data);
+                });
+            },
+        },
+        {
+            key: 'add',
+            text: '添加子分类',
+            tooltip: {
+                title: '添加子分类',
+            },
+            icon: 'PlusCircleOutlined',
+            onClick: () => {
+                title.value = '新增子分类';
+                isAdd.value = 0;
+                isChild.value = true;
+                currentForm.value = {};
+                nextTick(() => {
+                    modifyRef.value.show(data);
+                });
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                okText: ' 确定',
+                cancelText: '取消',
+                onConfirm: async () => {
+                    const resp = await deleteTree(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        tableRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+    return actions;
+};
+
+const table = reactive({
+    columns: [
+        { title: '名称', dataIndex: 'name', key: 'name' },
+        {
+            title: '排序',
+            dataIndex: 'sortIndex',
+            key: 'sortIndex',
+        },
+        {
+            title: '说明',
+            dataIndex: 'describe',
+            key: 'describe',
+        },
+        {
+            title: '操作',
+            key: 'action',
+            fixed: 'right',
+            width: 250,
+            scopedSlots: true,
+        },
+    ],
+    /**
+     * 添加产品分类
+     */
+    add: async () => {
+        title.value = '新增分类';
+        isAdd.value = 0;
+        isChild.value = false;
+        nextTick(() => {
+            modifyRef.value.show(currentForm.value);
+        });
+    },
+});
+const { add, columns } = toRefs(table);
+/**
+ * 初始化
+ */
+</script>
+<style scoped lang="less"></style>

src/views/device/Category/typings.d.ts

@@ -0,0 +1,10 @@
+export type CategoryItem = {
+  id: string;
+  name: string;
+  level: number;
+  key: string;
+  parentId: string;
+  path: string;
+  sortIndex: number;
+  children?: Category[];
+};

src/views/home/components/InitHome/index.vue

@@ -7,37 +7,47 @@
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '1' }"
+                    :class="{ selected: selectValue === 'device' }"
-                    @click="selectId = '1'"
+                    @click="selectValue = 'device'"
                 >
                     <img src="/images/home/device.png" alt="" />
                 </a-col>
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '2' }"
+                    :class="{ selected: selectValue === 'ops' }"
-                    @click="selectId = '2'"
+                    @click="selectValue = 'ops'"
                 >
                     <img src="/images/home/ops.png" alt="" />
                 </a-col>
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '3' }"
+                    :class="{ selected: selectValue === 'comprehensive' }"
-                    @click="selectId = '3'"
+                    @click="selectValue = 'comprehensive'"
                 >
                     <img src="/images/home/comprehensive.png" alt="" />
                 </a-col>
             </a-row>
-            <a-button type="primary" class="btn" @click="confirm">确定</a-button>
+            <a-button type="primary" class="btn" @click="confirm"
+                >确定</a-button
+            >
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-const selectId = ref('1');
+import { setView_api } from '@/api/home';
 
-const confirm = ()=>{}
+const emits = defineEmits(['refresh']);
+const selectValue = ref('device');
+
+const confirm = () => {
+    setView_api({
+        name: 'view',
+        content: selectValue.value,
+    }).then(() => emits('refresh'));
+};
 </script>
 
 <style lang="less" scoped>

src/views/home/components/StatusLabel.vue

@@ -0,0 +1,38 @@
+<template>
+    <span class="status-label-container">
+        <i class="circle" :style="{ background: bjColor }"></i>
+        <span>{{ props.statusLabel }}</span>
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    statusValue: string;
+    statusLabel: string;
+}>();
+
+const bjColor = computed(() => {
+    switch (props.statusValue) {
+        case 'online':
+            return '#52c41a';
+        case 'offline':
+            return '#ff4d4f';
+        case 'notActive':
+            return '#1890ff';
+    }
+});
+</script>
+
+<style lang="less" scoped>
+.status-label-container {
+    display: flex;
+    align-items: center;
+    .circle {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+}
+</style>

src/views/home/components/StepCard.vue

@@ -21,11 +21,11 @@
         </div>
 
         <div class="dialogs">
-            <AccessMethodDialog
+            <ProductChooseDialog
                 :open-number="openAccess"
                 @confirm="againJumpPage"
             />
-            <FuncTestDialog
+            <DeviceChooseDialog
                 :open-number="openFunc"
                 @confirm="againJumpPage"
             />
@@ -38,8 +38,8 @@ import { PropType } from 'vue';
 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 
-import AccessMethodDialog from './dialogs/AccessMethodDialog.vue';
+import ProductChooseDialog from './dialogs/ProductChooseDialog.vue';
-import FuncTestDialog from './dialogs/FuncTestDialog.vue';
+import DeviceChooseDialog from './dialogs/DeviceChooseDialog.vue';
 
 import { recommendList } from '../index';
 
@@ -73,9 +73,8 @@ const jumpPage = (row: recommendList) => {
     }
 };
 // 弹窗返回后的二次跳转
-const againJumpPage = (paramsSource: object) => {
+const againJumpPage = (params: string) => {
-    const params = { ...(selectRow.params || {}), ...paramsSource };
+    router.push(`${selectRow.linkUrl}/${params}`);
-    router.push(`${selectRow.linkUrl}${objToParams(params || {})}`);
 };
 
 const objToParams = (source: object): string => {

src/views/home/components/dialogs/DeviceChooseDialog.vue

@@ -0,0 +1,181 @@
+<template>
+    <div ref="modal" class="func-test-dialog-container"></div>
+    <a-modal
+        v-model:visible="visible"
+        title="选择产品"
+        style="width: 1000px"
+        @ok="handleOk"
+        :getContainer="getContainer"
+        :maskClosable="false"
+    >
+        <Search type="simple" :columns="query.columns" @search="query.search" />
+        <JTable
+            model="TABLE"
+            :request="getDeviceList_api"
+            :columns="table.columns"
+            :params="query.params"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
+            :rowSelection="{
+                selectedRowKeys: table.selectedKeys,
+                onChange: table.onSelect,
+                type: 'radio',
+            }"
+        >
+            <template #modifyTime="slotProps">
+                <span>{{ dateFormat(slotProps.modifyTime) }}</span>
+            </template>
+            <template #state="slotProps">
+                <StatusLabel
+                    :status-value="slotProps.state.value"
+                    :status-label="slotProps.state.text"
+                />
+            </template>
+        </JTable>
+
+        <template #footer>
+            <a-button key="back" @click="visible = false">取消</a-button>
+            <a-button key="submit" type="primary" @click="handleOk"
+                >确认</a-button
+            >
+        </template>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import StatusLabel from '../StatusLabel.vue';
+
+import { ComponentInternalInstance } from 'vue';
+import { getDeviceList_api } from '@/api/home';
+import { dateFormat } from '@/utils/comm';
+import { message } from 'ant-design-vue';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emits = defineEmits(['confirm']);
+const props = defineProps({
+    openNumber: Number,
+});
+
+// 弹窗控制
+const visible = ref<boolean>(false);
+const getContainer = () => proxy?.$refs.modal as HTMLElement;
+const handleOk = () => {
+    if (table.selectedKeys.length < 1) return message.warn('请选择设备');
+    emits('confirm', table.selectedKeys[0]);
+    visible.value = false;
+};
+watch(
+    () => props.openNumber,
+    () => {
+        visible.value = true;
+    },
+);
+
+const query = reactive({
+    params: {},
+    columns: [
+        {
+            title: '设备ID',
+            dataIndex: 'id',
+            key: 'id',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '设备名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '产品名称',
+            dataIndex: 'productName',
+            key: 'productName',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '注册时间',
+            dataIndex: 'modifyTime',
+            key: 'modifyTime',
+            ellipsis: true,
+            search: {
+                type: 'date',
+            },
+        },
+        {
+            title: '状态',
+            dataIndex: 'state',
+            key: 'state',
+            ellipsis: true,
+            search: {
+                rename: 'state',
+                type: 'select',
+                options: [
+                    {
+                        label: '在线',
+                        value: 'online',
+                    },
+                    {
+                        label: '离线',
+                        value: 'offline',
+                    },
+                ],
+            },
+        },
+    ],
+    search: (params: object) => {
+        query.params = params;
+    },
+});
+
+const table = reactive({
+    columns: [
+        {
+            title: '设备Id',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '设备名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '产品名称',
+            dataIndex: 'productName',
+            key: 'productName',
+        },
+        {
+            title: '注册时间',
+            dataIndex: 'modifyTime',
+            key: 'modifyTime',
+            scopedSlots: true,
+        },
+        {
+            title: '状态',
+            dataIndex: 'state',
+            key: 'state',
+            scopedSlots: true,
+        },
+    ],
+    selectedKeys: [] as string[],
+    onSelect: (keys: string[]) => {
+        table.selectedKeys = [...keys];
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.func-test-dialog-container {
+    .search {
+        display: flex;
+    }
+}
+</style>

src/views/home/components/dialogs/FuncTestDialog.vue

@@ -1,98 +0,0 @@
-<template>
-    <div ref="modal" class="func-test-dialog-container"></div>
-    <a-modal
-        v-model:visible="visible"
-        title="选择产品"
-        style="width: 1000px"
-        @ok="handleOk"
-        :getContainer="getContainer"
-        :maskClosable="false"
-    >
-        <Search />
-        <JTable :columns="columns" model="TABLE"> </JTable>
-
-        <template #footer>
-            <a-button key="back" @click="visible = false">取消</a-button>
-            <a-button key="submit" type="primary" @click="handleOk"
-                >确认</a-button
-            >
-        </template>
-    </a-modal>
-</template>
-
-<script setup lang="ts">
-import { ComponentInternalInstance } from 'vue';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emits = defineEmits(['confirm']);
-const props = defineProps({
-    openNumber: Number,
-});
-
-// 弹窗控制
-const visible = ref<boolean>(false);
-const getContainer = () => proxy?.$refs.modal as HTMLElement;
-const handleOk = () => {
-    emits('confirm', form.value);
-    visible.value = false;
-};
-watch(
-    () => props.openNumber,
-    () => {
-        visible.value = true;
-        clickReset();
-        clickSearch();
-    },
-);
-
-// 搜索部分
-const form = ref({
-    key: '',
-    relation: '',
-    keyValue: '',
-});
-
-const clickSearch = () => {};
-const clickReset = () => {
-    Object.entries(form.value).forEach(([prop]) => {
-        form.value[prop] = '';
-    });
-};
-
-// 表格部分
-const columns = [
-    {
-        title: '设备Id',
-        dataIndex: 'deviceId',
-        key: 'deviceId',
-    },
-    {
-        title: '设备名称',
-        dataIndex: 'deviceName',
-        key: 'deviceName',
-    },
-    {
-        title: '产品名称',
-        dataIndex: 'productName',
-        key: 'productName',
-    },
-    {
-        title: '注册时间',
-        dataIndex: 'createTime',
-        key: 'createTime',
-    },
-    {
-        title: '状态',
-        dataIndex: 'status',
-        key: 'status',
-    },
-];
-</script>
-
-<style lang="less" scoped>
-.func-test-dialog-container {
-    .search {
-        display: flex;
-    }
-}
-</style>

src/views/home/components/dialogs/ProductChooseDialog.vue

@@ -53,7 +53,7 @@ const productList = ref<[productItem] | []>([]);
 
 const getContainer = () => proxy?.$refs.modal as HTMLElement;
 const getOptions = () => {
-    getProductList_api().then((resp) => {
+    getProductList_api().then((resp:any) => {
         productList.value = resp.result
             .filter((i: any) => !i?.accessId)
             .map((item: { name: any; id: any }) => ({
@@ -63,7 +63,7 @@ const getOptions = () => {
     });
 };
 const handleOk = () => {
-    emits('confirm', form.value);
+    emits('confirm', form.value.productId);
     visible.value = false;
 };
 const filterOption = (input: string, option: any) => {

src/views/home/index.d.ts

@@ -8,7 +8,11 @@ export interface recommendList {
     auth: boolean;
     dialogTag?: 'accessMethod' | 'funcTest';
 }
-
+// 产品列表里的每项
+export interface productItem {
+    label: string;
+    value: string
+}
 export interface deviceInfo {
     deviceId: string,
     deviceName: string,

src/views/home/index.vue

@@ -2,11 +2,11 @@
     <div class="container">
         <div class="header"></div>
         <div class="left"></div>
-        <div class="content iot-home-container">
+        <div class="content iot-home-container" v-loading="loading">
-            <!-- <InitHome /> -->
+            <InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
-            <!-- <DeviceHome /> -->
+            <DeviceHome v-else-if="currentView === 'device'" />
-            <!-- <DevOpsHome /> -->
+            <DevOpsHome v-else-if="currentView === 'ops'" />
-            <ComprehensiveHome />
+            <ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
         </div>
     </div>
 </template>
@@ -17,6 +17,39 @@ import DeviceHome from './components/DeviceHome/index.vue';
 import DevOpsHome from './components/DevOpsHome/index.vue';
 import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
 
+import { isNoCommunity } from '@/utils/utils';
+import { getMe_api, getView_api } from '@/api/home';
+
+const router = useRouter();
+
+const currentView = ref<string>('');
+const loading = ref<boolean>(true);
+
+// 获取选择的视图
+const setCurrentView = () => {
+    getView_api().then((resp: any) => {
+        if (resp.status === 200) {
+            if (resp.result) currentView.value = resp.result?.content;
+            else if (resp.result.username === 'admin') {
+                currentView.value = 'comprehensive';
+            } else currentView.value = 'init';
+        }
+    });
+};
+
+if (isNoCommunity) {
+    // 判断是否是api用户   是则跳转  否则获取选中的视图
+    getMe_api().then((resp: any) => {
+        if (resp && resp.status === 200) {
+            const isApiUser = resp.result.dimensions.find(
+                (item: any) =>
+                    item.type === 'api-client' || item.type.id === 'api-client',
+            );
+
+            isApiUser ? router.push('/system/api') : setCurrentView();
+        }
+    });
+}else setCurrentView()
 </script>
 
 <style lang="less" scoped>

src/views/home/modules/config.ts

@@ -1,9 +1,10 @@
 // import {getImage} from '@/utils/comm'
+import { useMenuStore } from "@/store/menu";
 import { usePermissionStore } from "@/store/permission";
 import { recommendList, bootConfig } from "../index";
 
 
-// 权限控制
+// 按钮权限控制
 const hasPermission = usePermissionStore().hasPermission;
 const productPermission = (action: string) =>
     hasPermission(`device/Product:${action}`);
@@ -11,6 +12,8 @@ const devicePermission = (action: string) =>
     hasPermission(`device/Instance:${action}`);
 const rulePermission = (action: string) =>
     hasPermission(`rule-engine/Instance:${action}`);
+// 页面权限控制
+const menuPermission = useMenuStore().hasPermission
 
 
 // 物联网引导-数据
@@ -18,7 +21,7 @@ export const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '创建产品',
-        link: '/a',
+        link: '/iot/device/Product',
         auth: productPermission('add'),
         params: {
             save: true,
@@ -27,7 +30,7 @@ export const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP2',
         label: '创建设备',
-        link: '/b',
+        link: '/iot/device/Instance',
         auth: devicePermission('add'),
         params: {
             save: true,
@@ -36,7 +39,7 @@ export const deviceBootConfig: bootConfig[] = [
     {
         english: 'STEP3',
         label: '规则引擎',
-        link: '/c',
+        link: '/iot/rule-engine/Instance',
         auth: rulePermission('add'),
         params: {
             save: true,
@@ -50,7 +53,7 @@ export const deviceStepDetails: recommendList[] = [
         details:
             '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
         iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Product',
         auth: productPermission('add'),
         params: {
             save: true,
@@ -61,7 +64,7 @@ export const deviceStepDetails: recommendList[] = [
         details:
             '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
         iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Product/detail',
         auth: productPermission('update'),
         dialogTag: 'accessMethod',
     },
@@ -69,7 +72,7 @@ export const deviceStepDetails: recommendList[] = [
         title: '添加测试设备',
         details: '添加单个设备，用于验证产品模型是否配置正确。',
         iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Instance',
         auth: devicePermission('add'),
         params: {
             save: true,
@@ -80,15 +83,16 @@ export const deviceStepDetails: recommendList[] = [
         details:
             '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
         iconUrl: '/images/home/bottom-2.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Instance/detail',
-        auth: devicePermission('update'),
+        // auth: devicePermission('update'),
+        auth: true,
         dialogTag: 'funcTest',
     },
     {
         title: '批量添加设备',
         details: '批量添加同一产品下的设备',
         iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/device/Instance',
         auth: devicePermission('import'),
         params: {
             import: true,
@@ -102,14 +106,14 @@ export const opsBootConfig: bootConfig[] = [
     {
         english: 'STEP1',
         label: '设备接入配置',
-        link: '/a',
+        link: '/iot/link/accessConfig',
-        auth: true,
+        auth: menuPermission('link/accessConfig'),
     },
     {
         english: 'STEP2',
         label: '日志排查',
-        link: '/b',
+        link: '/iot/link/Log',
-        auth: true,
+        auth: menuPermission('link/Log'),
         params: {
             key: 'system',
         },
@@ -117,8 +121,8 @@ export const opsBootConfig: bootConfig[] = [
     {
         english: 'STEP3',
         label: '实时监控',
-        link: '/c',
+        link: '/iot/link/dashboard',
-        auth: false,
+        auth: menuPermission('link/dashboard'),
         params: {
             save: true,
         },
@@ -131,44 +135,38 @@ export const opsStepDetails: recommendList[] = [
         details:
             '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
         iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/protocol',
-        auth: true,
+        auth: menuPermission('link/Protocol'),
-        params: {
+        
-            a: 1,
-            save: true,
-        },
     },
     {
         title: '证书管理',
         details: '统一维护平台内的证书，用于数据通信加密。',
         iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/Certificate',
-        auth: true,
+        auth: menuPermission('link/Certificate'),
-        params: {
+        
-            a: 1,
-            save: false,
-        },
     },
     {
         title: '网络组件',
         details: '根据不同的传输类型配置平台底层网络组件相关参数。',
         iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/type',
-        auth: true,
+        auth: menuPermission('link/Type'),
     },
     {
         title: '设备接入网关',
         details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
         iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/accessConfig',
-        auth: true,
+        auth: menuPermission('link/AccessConfig'),
     },
     {
         title: '日志管理',
         details: '监控系统日志，及时处理系统异常。',
         iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/a',
+        linkUrl: '/iot/link/Log',
-        auth: false,
+        auth: menuPermission('Log'),
         params: {
             key: 'system',
         }

src/views/init-home/index.vue

@@ -117,7 +117,7 @@
                                                                 <a-upload
                                                                     name="file"
                                                                     :action="
-                                                                        action
+                                                                        FILE_UPLOAD
                                                                     "
                                                                     :headers="
                                                                         headers
@@ -259,7 +259,7 @@
                                                                 <a-upload
                                                                     name="file"
                                                                     :action="
-                                                                        action
+                                                                        FILE_UPLOAD
                                                                     "
                                                                     :headers="
                                                                         headers
@@ -354,7 +354,9 @@
                                                     >
                                                         <a-upload
                                                             name="file"
-                                                            :action="action"
+                                                            :action="
+                                                                FILE_UPLOAD
+                                                            "
                                                             :headers="headers"
                                                             :beforeUpload="
                                                                 beforeBackUpload
@@ -773,6 +775,7 @@ import {
     saveInit,
 } from '@/api/initHome';
 import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
+import { FILE_UPLOAD } from '@/api/comm';
 import { LocalStore } from '@/utils/comm';
 import { message } from 'ant-design-vue';
 import { Form } from 'ant-design-vue';
@@ -899,7 +902,7 @@ const activeKey = ref<string>('1');
 const spinning = ref<boolean>(false);
 const visible = ref<boolean>(false);
 const flag = ref<boolean>(false);
-const action = ref<string>(`${BASE_API_PATH}/file/static`);
+// const action = ref<string>(`${BASE_API_PATH}/file/static`);
 const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
 /**
  * 角色勾选数据

src/views/iot-card/CardManagement/index.vue

@@ -0,0 +1,571 @@
+<!-- 物联卡管理 -->
+<template>
+    <div class="page-container">
+        <Search
+            :columns="columns"
+            target="iot-card-management-search"
+            @search="handleSearch"
+        />
+        <JTable
+            ref="cardManageRef"
+            :columns="columns"
+            :request="query"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
+            :rowSelection="{
+                selectedRowKeys: _selectedRowKeys,
+                onChange: onSelectChange,
+            }"
+            @cancelSelect="cancelSelect"
+            :params="params"
+        >
+            <template #headerTitle>
+                <a-space>
+                    <a-button type="primary" @click="handleAdd">
+                        <AIcon type="PlusOutlined" />新增
+                    </a-button>
+                    <a-dropdown>
+                        <a-button>
+                            批量操作
+                            <AIcon type="DownOutlined" />
+                        </a-button>
+                        <template #overlay>
+                            <a-menu>
+                                <a-menu-item>
+                                    <a-button @click="exportVisible = true">
+                                        <AIcon type="ExportOutlined" />
+                                        批量导出
+                                    </a-button>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-button @click="importVisible = true"
+                                        ><AIcon
+                                            type="ImportOutlined"
+                                        />批量导入</a-button
+                                    >
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleActive"
+                                        title="确认激活吗？"
+                                    >
+                                        <a-button>
+                                            <AIcon type="CheckCircleOutlined" />
+                                            批量激活
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleStop"
+                                        title="确认停用吗？"
+                                    >
+                                        <a-button type="primary" ghost>
+                                            <AIcon type="StopOutlined" />
+                                            批量停用
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleResumption"
+                                        title="确认复机吗？"
+                                    >
+                                        <a-button type="primary" ghost>
+                                            <AIcon type="PoweroffOutlined" />
+                                            批量复机
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleSync"
+                                        title="确认同步状态吗？"
+                                    >
+                                        <a-button type="primary" ghost>
+                                            <AIcon type="SwapOutlined" />
+                                            同步状态
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item v-if="_selectedRowKeys.length > 0">
+                                    <a-popconfirm
+                                        @confirm="handelRemove"
+                                        title="确认删除吗？"
+                                    >
+                                        <a-button>
+                                            <AIcon type="DeleteOutlined" />
+                                            批量删除
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                </a-space>
+            </template>
+            <template #totalFlow="slotProps">
+                <div>
+                    {{
+                        slotProps.totalFlow
+                            ? slotProps.totalFlow.toFixed(2) + ' M'
+                            : ''
+                    }}
+                </div>
+            </template>
+            <template #usedFlow="slotProps">
+                <div>
+                    {{
+                        slotProps.usedFlow
+                            ? slotProps.usedFlow.toFixed(2) + ' M'
+                            : ''
+                    }}
+                </div>
+            </template>
+            <template #residualFlow="slotProps">
+                <div>
+                    {{
+                        slotProps.residualFlow
+                            ? slotProps.residualFlow.toFixed(2) + ' M'
+                            : ''
+                    }}
+                </div>
+            </template>
+            <template #cardType="slotProps">
+                {{ slotProps.cardType.text }}
+            </template>
+            <template #cardStateType="slotProps">
+                {{ slotProps.cardStateType.text }}
+            </template>
+            <template #activationDate="slotProps">
+                {{
+                    slotProps.activationDate
+                        ? moment(slotProps.activationDate).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #updateTime="slotProps">
+                {{
+                    slotProps.updateTime
+                        ? moment(slotProps.updateTime).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ActionsType } from '@/components/Table';
+import moment from 'moment';
+import {
+    query,
+    queryPlatformNoPage,
+    changeDeploy,
+    unDeploy,
+    resumption,
+    del,
+    changeDeployBatch,
+    unDeployBatch,
+    resumptionBatch,
+    sync,
+    removeCards,
+} from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+
+const cardManageRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const _selectedRow = ref<any[]>([]);
+const visible = ref<boolean>(false);
+const exportVisible = ref<boolean>(false);
+const importVisible = ref<boolean>(false);
+
+const columns = [
+    {
+        title: '卡号',
+        dataIndex: 'id',
+        key: 'id',
+        width: 300,
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: 'ICCID',
+        dataIndex: 'iccId',
+        key: 'iccId',
+        ellipsis: true,
+        width: 200,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '绑定设备',
+        dataIndex: 'deviceName',
+        key: 'deviceName',
+        ellipsis: true,
+        width: 200,
+    },
+    {
+        title: '平台对接',
+        dataIndex: 'platformConfigName',
+        key: 'platformConfigName',
+        width: 200,
+        search: {
+            rename: 'platformConfigId',
+            type: 'select',
+            options: async () => {
+                return new Promise((resolve) => {
+                    queryPlatformNoPage({
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                        terms: [{ column: 'state', value: 'enabled' }],
+                    }).then((resp: any) => {
+                        const list = resp.result.map((item: any) => ({
+                            label: item.name,
+                            value: item.id,
+                        }));
+                        resolve(list);
+                    });
+                });
+            },
+        },
+    },
+    {
+        title: '运营商',
+        dataIndex: 'operatorName',
+        key: 'operatorName',
+        width: 120,
+        search: {
+            type: 'select',
+            options: [
+                { label: '移动', value: '移动' },
+                { label: '电信', value: '电信' },
+                { label: '联通', value: '联通' },
+            ],
+        },
+    },
+    {
+        title: '类型',
+        dataIndex: 'cardType',
+        key: 'cardType',
+        scopedSlots: true,
+        width: 120,
+        search: {
+            type: 'select',
+            options: [
+                { label: '年卡', value: 'year' },
+                { label: '季卡', value: 'season' },
+                { label: '月卡', value: 'month' },
+                { label: '其他', value: 'other' },
+            ],
+        },
+    },
+    {
+        title: '总流量',
+        dataIndex: 'totalFlow',
+        width: 120,
+        scopedSlots: true,
+    },
+    {
+        title: '使用流量',
+        dataIndex: 'usedFlow',
+        width: 120,
+        scopedSlots: true,
+    },
+    {
+        title: '剩余流量',
+        dataIndex: 'residualFlow',
+        width: 120,
+        scopedSlots: true,
+    },
+    {
+        title: '激活日期',
+        dataIndex: 'activationDate',
+        key: 'activationDate',
+        scopedSlots: true,
+        width: 200,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '更新时间',
+        dataIndex: 'updateTime',
+        key: 'updateTime',
+        scopedSlots: true,
+        width: 200,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'cardStateType',
+        key: 'cardStateType',
+        width: 180,
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '正常', value: 'using' },
+                { label: '未激活', value: 'toBeActivated' },
+                { label: '停机', value: 'deactivate' },
+            ],
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) return [];
+    return [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+        },
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+        },
+        {
+            key: 'bindDevice',
+            text: data.deviceId ? '解绑设备' : '绑定设备',
+            tooltip: {
+                title: data.deviceId ? '解绑设备' : '绑定设备',
+            },
+            icon: data.deviceId ? 'DisconnectOutlined' : 'LinkOutlined',
+        },
+        {
+            key: 'activation',
+            text:
+                data.cardStateType?.value === 'toBeActivated'
+                    ? '激活'
+                    : data.cardStateType?.value === 'deactivate'
+                    ? '复机'
+                    : '停用',
+            tooltip: {
+                title:
+                    data.cardStateType?.value === 'toBeActivated'
+                        ? '激活'
+                        : data.cardStateType?.value === 'deactivate'
+                        ? '复机'
+                        : '停用',
+            },
+            icon:
+                data.cardStateType?.value === 'toBeActivated'
+                    ? 'CheckCircleOutlined'
+                    : data.cardStateType?.value === 'deactivate'
+                    ? 'PoweroffOutlined'
+                    : 'StopOutlined',
+            popConfirm: {
+                title:
+                    data.cardStateType?.value === 'toBeActivated'
+                        ? '确认激活？'
+                        : data.cardStateType?.value === 'deactivate'
+                        ? '确认复机？'
+                        : '确认停用?',
+                onConfirm: async () => {
+                    if (data.cardStateType?.value === 'toBeActivated') {
+                        changeDeploy(data.id).then((resp) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    } else if (data.cardStateType?.value === 'deactivate') {
+                        resumption(data.id).then((resp) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    } else {
+                        unDeploy(data.id).then((resp) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    }
+                },
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            tooltip: {
+                title: '删除',
+            },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp: any = await del(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        cardManageRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+};
+
+const handleSearch = (params: any) => {
+    console.log(params);
+    params.value = params;
+};
+
+const onSelectChange = (keys: string[], rows: []) => {
+    _selectedRowKeys.value = [...keys];
+    _selectedRow.value = [...rows];
+};
+
+const cancelSelect = () => {
+    _selectedRowKeys.value = [];
+};
+
+/**
+ * 新增
+ */
+const handleAdd = () => {};
+
+/**
+ * 批量激活
+ */
+const handleActive = () => {
+    if (
+        _selectedRowKeys.value.length >= 10 &&
+        _selectedRowKeys.value.length <= 100
+    ) {
+        changeDeployBatch(_selectedRowKeys.value).then((res: any) => {
+            if (res.status === 200) {
+                message.success('操作成功');
+            }
+        });
+    } else {
+        message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
+    }
+};
+
+/**
+ * 批量停用
+ */
+const handleStop = () => {
+    if (
+        _selectedRowKeys.value.length >= 10 &&
+        _selectedRowKeys.value.length <= 100
+    ) {
+        unDeployBatch(_selectedRowKeys.value).then((res: any) => {
+            if (res.status === 200) {
+                message.success('操作成功');
+            }
+        });
+    } else {
+        message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
+    }
+};
+
+/**
+ * 批量复机
+ */
+const handleResumption = () => {
+    if (
+        _selectedRowKeys.value.length >= 10 &&
+        _selectedRowKeys.value.length <= 100
+    ) {
+        resumptionBatch(_selectedRowKeys.value).then((res: any) => {
+            if (res.status === 200) {
+                message.success('操作成功');
+            }
+        });
+    } else {
+        message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
+    }
+};
+
+/**
+ * 同步状态
+ */
+const handleSync = () => {
+    sync().then((res: any) => {
+        if (res.status === 200) {
+            cardManageRef.value?.reload();
+            message.success('同步状态成功');
+        }
+    });
+};
+
+/**
+ * 批量删除
+ */
+const handelRemove = async () => {
+    const resp = await removeCards(_selectedRow.value);
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        _selectedRowKeys.value = [];
+        _selectedRow.value = [];
+        cardManageRef.value?.reload();
+    }
+};
+</script>
+
+<style scoped lang="less">
+.search {
+    width: calc(100% - 330px);
+}
+</style>

src/views/iot-card/Dashboard/index.vue

@@ -0,0 +1,323 @@
+<!-- 物联卡-仪表盘 -->
+<template>
+    <div class="page-container">
+        <a-card>
+            <a-row :gutter="20" :style="{ marginBottom: '20px' }">
+                <a-col :span="24"><Guide title="数据统计" /></a-col>
+                <a-col :span="8">
+                    <div class="data-statistics-item">
+                        <div class="info" style="width: 100%">
+                            <div class="label">昨日流量消耗</div>
+                            <a-tooltip placement="bottomLeft">
+                                <template #title>
+                                    <span>{{ dayTotal }} M</span>
+                                </template>
+                                <div class="value">
+                                    {{ dayTotal }}
+                                    <span class="unit">M</span>
+                                </div>
+                            </a-tooltip>
+                        </div>
+                        <LineChart color="#FBA500" :chartData="dayOptions" />
+                    </div>
+                </a-col>
+                <a-col :span="8">
+                    <div class="data-statistics-item">
+                        <div class="info" style="width: 100%">
+                            <div class="label">当月流量消耗</div>
+                            <a-tooltip placement="bottomLeft">
+                                <template #title>
+                                    <span>{{ monthTotal }} M</span>
+                                </template>
+                                <div class="value">
+                                    {{ monthTotal }}
+                                    <span class="unit">M</span>
+                                </div>
+                            </a-tooltip>
+                        </div>
+                        <LineChart :chartData="monthOptions" />
+                    </div>
+                </a-col>
+                <a-col :span="8">
+                    <div class="data-statistics-item">
+                        <div class="info" style="width: 100%">
+                            <div class="label">本年流量消耗</div>
+                            <a-tooltip placement="bottomLeft">
+                                <template #title>
+                                    <span>{{ yearTotal }} M</span>
+                                </template>
+                                <div class="value">
+                                    {{ yearTotal }}
+                                    <span class="unit">M</span>
+                                </div>
+                            </a-tooltip>
+                        </div>
+                        <LineChart color="#58E1D3" :chartData="yearOptions" />
+                    </div>
+                </a-col>
+            </a-row>
+            <a-row :gutter="20">
+                <a-col :span="16">
+                    <Guide title="流量统计">
+                        <template #extra></template>
+                    </Guide>
+                    <LineChart
+                        :showX="true"
+                        :showY="true"
+                        style="min-height: 450px"
+                        :chartData="yearOptions"
+                    />
+                </a-col>
+                <a-col :span="8">
+                    <Guide title="流量使用TOP10">
+                        <template #extra></template>
+                    </Guide>
+                    <div class="rankingList" style="height: 400px">
+                        <div
+                            v-for="(item, index) in topList"
+                            :key="item.cardNum"
+                            class="rankItem"
+                        >
+                            <div
+                                class="number"
+                                :class="`number-item-${index + 1}`"
+                            >
+                                {{ index + 1 }}
+                            </div>
+                            <div class="cardNum">{{ item.cardNum }}</div>
+                            <div class="progress">
+                                <a-progress
+                                    :strokeColor="'#ADC6FF'"
+                                    :trailColor="'#E0E4E8'"
+                                    :strokeLinecap="'butt'"
+                                    :showInfo="false"
+                                    :percent="
+                                        Math.ceil((item.value / topTotal) * 100)
+                                    "
+                                ></a-progress>
+                            </div>
+                            <div class="total">
+                                {{ item?.value?.toFixed(2) }} M
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </a-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Guide from '../components/Guide.vue';
+import LineChart from '../components/LineChart.vue';
+import moment from 'moment';
+import { queryFlow } from '@/api/iot-card/home';
+
+const dayTotal = ref(0);
+const monthTotal = ref(0);
+const yearTotal = ref(0);
+const dayOptions = ref<any[]>([]);
+const monthOptions = ref<any[]>([]);
+const yearOptions = ref<any[]>([]);
+
+const flowData = ref<any[]>([]);
+const topList = ref<any[]>([]);
+const topTotal = ref(0);
+
+const getData = (
+    start: number,
+    end: number,
+): Promise<{ sortArray: any[]; data: any[] }> => {
+    return new Promise((resolve) => {
+        queryFlow(start, end, {
+            orderBy: 'date',
+        }).then((resp: any) => {
+            if (resp.status === 200) {
+                const sortArray = resp.result.sort(
+                    (a: any, b: any) =>
+                        new Date(a.date).getTime() - new Date(b.date).getTime(),
+                );
+                resolve({
+                    sortArray,
+                    data: sortArray.map(
+                        (item: any) => item.value && item.value.toFixed(2),
+                    ),
+                });
+            }
+        });
+    });
+};
+
+/**
+ * 查询今日、当月、本年数据
+ */
+const getDataTotal = () => {
+    const dTime = [
+        moment(new Date()).startOf('day').valueOf(),
+        moment(new Date()).endOf('day').valueOf(),
+    ];
+    const mTime = [
+        moment().startOf('month').valueOf(),
+        moment().endOf('month').valueOf(),
+    ];
+    const yTime = [
+        moment().startOf('year').valueOf(),
+        moment().endOf('year').valueOf(),
+    ];
+    getData(dTime[0], dTime[1]).then((resp) => {
+        dayTotal.value = resp.data
+            .reduce((r, n) => r + Number(n), 0)
+            .toFixed(2);
+        dayOptions.value = resp.sortArray;
+    });
+    getData(mTime[0], mTime[1]).then((resp) => {
+        monthTotal.value = resp.data
+            .reduce((r, n) => r + Number(n), 0)
+            .toFixed(2);
+        monthOptions.value = resp.sortArray;
+    });
+    getData(yTime[0], yTime[1]).then((resp) => {
+        yearTotal.value = resp.data
+            .reduce((r, n) => r + Number(n), 0)
+            .toFixed(2);
+        yearOptions.value = resp.sortArray;
+    });
+};
+
+/**
+ * 流量统计
+ * @param data
+ */
+const getEcharts = (data: any) => {
+    console.log(data);
+    let startTime = data.time.start;
+    let endTime = data.time.end;
+    if (data.time.type === 'week' || data.time.type === 'month') {
+        startTime = moment(data.time.start).startOf('days').valueOf();
+        endTime = moment(data.time.end).startOf('days').valueOf();
+    }
+    getData(startTime, endTime).then((resp) => {
+        flowData.value = resp.sortArray;
+    });
+};
+
+/**
+ * 流量使用TOP10
+ * @param star 开始时间
+ * @param end 结束时间
+ */
+const getTopRang = (star: number, end: number) => {
+    queryFlow(star, end, { orderBy: 'usage' }).then((resp: any) => {
+        if (resp.status === 200) {
+            const arr = resp.result
+                .slice(0, 10)
+                .sort((a: any, b: any) => b.value - a.value);
+            topTotal.value = arr.length ? arr[0].value : 0;
+            topList.value = arr;
+        }
+    });
+};
+
+getDataTotal();
+
+// getEcharts(data);
+
+const dTime = [
+    moment().subtract(6, 'days').startOf('day').valueOf(),
+    moment().endOf('day').valueOf(),
+];
+getTopRang(dTime[0], dTime[1]);
+</script>
+<style scoped lang="less">
+.page-container {
+    .data-statistics-item {
+        height: 140px;
+        background: #fcfcfc;
+        border: 1px solid #e0e4e8;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+
+        .info {
+            // width: 180px;
+            width: 28%;
+            .label {
+                font-size: 14px;
+                color: rgba(0, 0, 0, 0.64);
+            }
+            .value {
+                font-size: 32px;
+                font-weight: bold;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                .unit {
+                    font-size: 20px;
+                    font-weight: normal;
+                }
+            }
+        }
+    }
+
+    .rankingList {
+        padding: 0;
+        overflow-y: auto;
+        list-style: none;
+
+        .rankItem {
+            display: flex;
+            justify-content: space-between;
+            min-width: 0;
+            padding: 12px 0;
+        }
+        .number {
+            flex: 0 0 24px;
+            height: 24px;
+            color: #fff;
+            font-weight: bold;
+            line-height: 24px;
+            text-align: center;
+            background-color: #d1d1d1;
+        }
+
+        .number-item-1 {
+            color: #e50012;
+            background-color: rgba(#e50012, 0.1);
+        }
+
+        .number-item-2 {
+            color: #fba500;
+            background-color: rgba(#fba500, 0.1);
+        }
+
+        .number-item-3 {
+            color: #597ef7;
+            background-color: rgba(#597ef7, 0.1);
+        }
+
+        .cardNum {
+            flex: 0 0 100px;
+            margin-left: 16px;
+        }
+
+        .progress {
+            flex: 1 1 auto;
+            margin: 0 8px;
+
+            :deep(.ant-progress-inner) {
+                border-radius: 0px;
+            }
+            :deep(.ant-progress-bg) {
+                border-radius: 0px;
+            }
+        }
+
+        .total {
+            flex: 0 0 80px;
+            color: #999;
+            text-align: right;
+        }
+    }
+}
+</style>

src/views/iot-card/components/LineChart.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="chart" ref="chart"></div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+
+const { proxy } = <any>getCurrentInstance();
+
+const props = defineProps({
+    // 图表颜色
+    color: {
+        type: String,
+        default: '#498BEF',
+    },
+    // 是否展示x轴
+    showX: {
+        type: Boolean,
+        default: false,
+    },
+    // 是否展示y轴
+    showY: {
+        type: Boolean,
+        default: false,
+    },
+    // 图表数据
+    chartData: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+/**
+ * 绘制图表
+ */
+const createChart = () => {
+    nextTick(() => {
+        const myChart = echarts.init(proxy.$refs.chart);
+
+        const options = {
+            grid: {
+                left: '7%',
+                right: '5%',
+                top: '5%',
+                bottom: '5%',
+            },
+            tooltip: {
+                trigger: 'axis',
+                // 		formatter: '{a}<br>{b}: {c}',
+                axisPointer: {
+                    type: 'shadow',
+                },
+            },
+            xAxis: [
+                {
+                    show: props.showX,
+                    boundaryGap: false,
+                    data: props.chartData.map((m: any) => m.date),
+                },
+            ],
+            yAxis: [
+                {
+                    show: props.showY,
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            type: 'dotted',
+                        },
+                    },
+                },
+            ],
+            series: [
+                {
+                    name: '流量消耗',
+                    type: 'line',
+                    symbol: 'circle',
+                    showSymbol: false,
+                    smooth: true,
+                    itemStyle: {
+                        normal: {
+                            color: props.color,
+                            lineStyle: {
+                                color: props.color,
+                                width: 1,
+                            },
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    1,
+                                    0,
+                                    0,
+                                    [
+                                        {
+                                            offset: 0.1,
+                                            color: '#fff',
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: props.color,
+                                        },
+                                    ],
+                                ),
+                            },
+                        },
+                    },
+                    data: props.chartData.map(
+                        (m: any) => m.value && m.value.toFixed(2),
+                    ),
+                },
+            ],
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    });
+};
+
+watch(
+    () => props.chartData,
+    () => createChart(),
+    { immediate: true, deep: true },
+);
+</script>
+
+<style scoped lang="less">
+.chart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/link/AccessConfig/Detail/index.vue

@@ -16,6 +16,12 @@
                 />
                 <Media v-if="showType === 'media'" :provider="provider" />
                 <Channel v-if="showType === 'channel'" :provider="provider" />
+                <Edge v-if="showType === 'edge'" :provider="provider" />
+                <Cloud
+                    v-if="showType === 'cloud'"
+                    :provider="provider"
+                    :data="data"
+                />
             </div>
         </a-card>
     </a-spin>
@@ -28,6 +34,8 @@ import Provider from '../components/Provider/index.vue';
 import { getProviders, detail } from '@/api/link/accessConfig';
 import Media from '../components/Media/index.vue';
 import Channel from '../components/Channel/index.vue';
+import Edge from '../components/Edge/index.vue';
+import Cloud from '../components/Cloud/index.vue';
 
 // const router = useRouter();
 const route = useRoute();

src/views/link/AccessConfig/components/Channel/index.vue

@@ -82,10 +82,11 @@
     </div>
 </template>
 
-<script lang="ts" setup name="AccessMedia">
+<script lang="ts" setup name="AccessChannel">
 import { message, Form } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
 import { update, save } from '@/api/link/accessConfig';
+import { ProtocolMapping } from '../../Detail/data';
 
 interface FormState {
     name: string;
@@ -113,7 +114,7 @@ const onFinish = async (values: any) => {
         ...values,
         provider: providerId,
         protocol: providerId,
-        transport: providerId === 'modbus-tcp' ? 'MODBUS_TCP' : 'OPC_UA',
+        transport: ProtocolMapping.get(providerId),
         channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
     };
     const resp = !!id ? await update({ ...params, id }) : await save(params);
@@ -145,8 +146,8 @@ const onFinish = async (values: any) => {
 }
 .config-right {
     padding: 20px;
-    color: rgba(0, 0, 0, 0.8);
+    // color: rgba(0, 0, 0, 0.8);
-    background: rgba(0, 0, 0, 0.04);
+    // background: rgba(0, 0, 0, 0.04);
 
     .config-right-item {
         margin-bottom: 10px;

src/views/link/AccessConfig/components/Cloud/Ctwing.vue

@@ -0,0 +1,624 @@
+<template>
+    <div class="container">
+        <a-steps class="steps-steps" :current="stepCurrent">
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <info-circle-outlined />
+                    通过CTWing平台的HTTP推送服务进行数据接入
+                </div>
+                <div style="margin-top: 15px">
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="16">
+                            <a-form
+                                :model="formState"
+                                ref="formRef1"
+                                name="basic"
+                                autocomplete="off"
+                                layout="vertical"
+                            >
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            label="接口地址"
+                                            name="apiAddress"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                disabled
+                                                v-model:value="
+                                                    formState.apiAddress
+                                                "
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            label="appKey"
+                                            name="appKey"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入appKey',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                v-model:value="formState.appKey"
+                                                placeholder="请输入appKey"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            label="appSecret"
+                                            name="appSecret"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入appSecret',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                v-model:value="
+                                                    formState.appSecret
+                                                "
+                                                placeholder="请输入appSecret"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                    <a-col :span="12"> </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            label="说明"
+                                            name="description"
+                                        >
+                                            <a-textarea
+                                                placeholder="请输入说明"
+                                                :rows="4"
+                                                v-model:value="
+                                                    formState.description
+                                                "
+                                                show-count
+                                                :maxlength="200"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row> </a-form
+                        ></a-col>
+                        <a-col :span="8">
+                            <div class="doc">
+                                <h1>操作指引：</h1>
+                                <div>
+                                    1、CTWing端创建产品、设备，以及一个第三方应用
+                                </div>
+                                <div>
+                                    2、CTWing端配置产品/设备/分组级订阅，订阅方URL地址请填写:
+                                    <div style="word-wrap: break-word">
+                                        {{
+                                            `${origin}/api/ctwing/${randomString()}/notify`
+                                        }}
+                                    </div>
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img1" />
+                                </div>
+                                <div>
+                                    3、IOT端创建类型为CTWing的设备接入网关
+                                </div>
+                                <div>
+                                    4、IOT端创建产品，选中接入方式为CTWing,填写CTWing平台中的产品ID、Master-APIkey。
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img2" />
+                                </div>
+                                <div>
+                                    5、IOT端添加设备，为每一台设备设置唯一的IMEI（需与CTWing平台中填写的值一致）
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img3" />
+                                </div>
+                                <h1>设备接入网关配置说明</h1>
+                                <div>
+                                    1.请将CTWing的AEP平台-应用管理中的App
+                                    Key和App Secret复制到当前页面
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img4" />
+                                </div>
+                                <h1>其他说明</h1>
+                                <div>
+                                    1.在IOT端启用设备时，若CTWing平台没有与之对应的设备，则将在CTWing端自动创建新设备
+                                </div>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </div>
+            </div>
+        </div>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 1">
+                <div class="alert">
+                    <info-circle-outlined />
+                    只能选择HTTP通信方式的协议
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="procotolSearch"
+                    />
+                    <a-button type="primary" @click="addProcotol"
+                        >新增</a-button
+                    >
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in procotolList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="procotolChange"
+                                :checked="procotolCurrent"
+                                :data="item"
+                            >
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+        </div>
+        <div v-if="current === 2" class="card-last">
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12">
+                    <title-component data="基本信息" />
+                    <div>
+                        <a-form
+                            :model="form"
+                            name="basic"
+                            autocomplete="off"
+                            layout="vertical"
+                            ref="formRef2"
+                        >
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                        trigger: 'blur',
+                                    },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="form.name"
+                                />
+                            </a-form-item>
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    placeholder="请输入说明"
+                                    :rows="4"
+                                    v-model:value="form.description"
+                                    show-count
+                                    :maxlength="200"
+                                />
+                            </a-form-item>
+                        </a-form>
+                    </div>
+                </a-col>
+                <a-col :span="12">
+                    <div class="config-right">
+                        <div class="config-right-item">
+                            <title-component data="配置概览" />
+                            <div class="config-right-item-context">
+                                接入方式：{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                {{ provider.description }}
+                            </div>
+                            <div class="config-right-item-context">
+                                消息协议：{{ procotolCurrent }}
+                            </div>
+                        </div>
+                        <div class="config-right-item">
+                            <title-component data="设备接入指引" />
+                            <div class="config-right-item-context">
+                                1、创建类型为{{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing'
+                                }}的设备接入网关
+                            </div>
+                            <div class="config-right-item-context">
+                                2、创建产品，并选中接入方式为
+                                {{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
+                                }}
+                            </div>
+                            <div class="config-right-item-context">
+                                3、添加设备，为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中填写的值一致，若OneNet平台没有对应的设备，将会通过OneNet平台提供的LWM2M协议自动创建）
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+        <div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
+            <a-button
+                v-if="[0, 1].includes(current)"
+                type="primary"
+                @click="next"
+            >
+                下一步
+            </a-button>
+            <a-button v-if="current === 2" type="primary" @click="saveData">
+                保存
+            </a-button>
+            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessCloudCtwing">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { update, save, getNetworkList } from '@/api/link/accessConfig';
+import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
+import AccessCard from '../AccessCard/index.vue';
+import { randomString } from '@/utils/utils';
+import { getImage } from '@/utils/comm';
+
+const origin = window.location.origin;
+const img1 = getImage('/network/01.png');
+const img2 = getImage('/network/02.jpg');
+const img3 = getImage('/network/03.png');
+const img4 = getImage('/network/04.jpg');
+
+//测试数据1{
+const resultList1 = [
+    {
+        id: '1612354213444087808',
+        name: '大华烟感协议',
+    },
+    {
+        id: '1610475299002855424',
+        name: '宇视摄像头协议',
+    },
+    {
+        id: '1610466717670780928',
+        name: '官方协议',
+    },
+    {
+        id: '1610205217785524224',
+        name: 'demo协议',
+    },
+    {
+        id: '1610204985806958592',
+        name: '水压协议',
+    },
+    {
+        id: '1605459961693745152',
+        name: '测试设备诊断日志显示',
+    },
+    {
+        id: '1582302200020783104',
+        name: 'demo',
+    },
+    {
+        id: '1581839391887794176',
+        name: '海康闸机协议',
+    },
+    {
+        id: '1567062365030637568',
+        name: '协议20220906160914',
+    },
+    {
+        id: '1561650927208628224',
+        name: 'local',
+    },
+    {
+        id: '1552881998413754368',
+        name: '官方协议V3-支持固件升级3',
+    },
+    {
+        id: '2b283b28a16d61e5fc2bdf39ceff34f8',
+        name: 'JetLinks官方协议',
+        description: 'JetLinks官方协议包',
+    },
+    {
+        id: '1551510679466844160',
+        name: '官方协议3.1',
+    },
+    {
+        id: '1551509716811161600',
+        name: '官方协议3.0',
+    },
+];
+
+interface FormState {
+    apiAddress: string;
+    appKey: string;
+    appSecret: string;
+    description: string;
+}
+interface Form {
+    name: string;
+    description: string;
+}
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = ref(props.provider.channel);
+const formRef1 = ref<FormInstance>();
+const formRef2 = ref<FormInstance>();
+
+const formState = reactive<FormState>({
+    apiAddress: 'https://ag-api.ctwing.cn/',
+    appKey: '',
+    appSecret: '',
+    description: '',
+});
+const form = reactive<Form>({
+    name: '',
+    description: '',
+});
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['接入配置', '消息协议', '完成']);
+const procotolList = ref([]);
+const allProcotolList = ref([]);
+const procotolCurrent = ref('');
+
+const procotolChange = (id: string) => {
+    if (!props.data?.id) {
+        procotolCurrent.value = id;
+    }
+};
+
+const procotolSearch = (value: string) => {
+    if (value) {
+        const list = allProcotolList.value.filter((i) => {
+            return (
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+            );
+        });
+        procotolList.value = list;
+    } else {
+        procotolList.value = allProcotolList.value;
+    }
+};
+
+const saveData = async () => {
+    const data: any = await formRef2.value?.validate();
+    const params = {
+        ...data,
+        configuration: {
+            ...formState,
+            protocol: procotolCurrent.value,
+        },
+        protocol: procotolCurrent.value,
+        provider: props.provider.id,
+        transport: 'HTTP_SERVER',
+    };
+    const resp =
+        props.data && props.data.id
+            ? await update({
+                  ...props.data,
+                  ...params,
+              })
+            : await save(params);
+
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        // 回到列表页面
+        // if (window.onTabSaveSuccess) {
+        //     window.onTabSaveSuccess(resp);
+        //     setTimeout(() => window.close(), 300);
+        // } else {
+        //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
+        // }
+        history.back();
+    }
+    // onFinish(data);
+};
+
+const queryProcotolList = async (id: string, params = {}) => {
+    // const resp = await getProtocolList(ProtocolMapping.get(id), {
+    //     ...params,
+    //     'sorts[0].name': 'createTime',
+    //     'sorts[0].order': 'desc',
+    // });
+    // if (resp.status === 200) {
+    //     procotolList.value = resp.result;
+    //     allProcotolList.value = resp.result;
+    // }
+
+    //使用测试数据1
+    procotolList.value = resultList1;
+    allProcotolList.value = resultList1;
+};
+
+const addProcotol = () => {
+    // const url = this.$store.state.permission.routes['Link/Protocol']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?save=true`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            procotolCurrent.value = value.result?.id;
+            queryProcotolList(props.provider?.id);
+        }
+    };
+};
+
+const next = async () => {
+    if (current.value === 0) {
+        let data1: any = await formRef1.value?.validate();
+        queryProcotolList(props.provider.id);
+        current.value = current.value + 1;
+    } else if (current.value === 1) {
+        if (!procotolCurrent.value) {
+            message.error('请选择消息协议！');
+        } else {
+            current.value = current.value + 1;
+        }
+    }
+};
+const prev = () => {
+    current.value = current.value - 1;
+};
+
+watch(
+    current,
+    (v) => {
+        stepCurrent.value = v;
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+</script>
+
+<style lang="less" scoped>
+.container {
+    margin: 20px;
+}
+
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.steps-action-save {
+    margin-left: 0;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.card-last {
+    padding-right: 5px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.config-right {
+    padding: 20px;
+    // color: rgba(0, 0, 0, 0.8);
+    // background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+
+.doc {
+    height: 550px;
+    padding: 24px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: rgba(#000, 0.8);
+    font-size: 14px;
+    background-color: #fafafa;
+
+    h1 {
+        margin: 16px 0;
+        color: rgba(#000, 0.85);
+        font-weight: bold;
+        font-size: 14px;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    .image {
+        margin: 16px 0;
+    }
+}
+</style>

src/views/link/AccessConfig/components/Cloud/OneNet.vue

@@ -0,0 +1,736 @@
+<template>
+    <div class="container">
+        <a-steps class="steps-steps" :current="stepCurrent">
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <info-circle-outlined />
+                    通过OneNet平台的HTTP推送服务进行数据接入
+                </div>
+                <div style="margin-top: 15px">
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="16">
+                            <a-form
+                                :model="formState"
+                                ref="formRef1"
+                                name="basic"
+                                autocomplete="off"
+                                layout="vertical"
+                            >
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            name="apiAddress"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                },
+                                            ]"
+                                        >
+                                            <div class="form-label">
+                                                接口地址
+                                                <span
+                                                    class="form-label-required"
+                                                    >*</span
+                                                >
+                                                <a-tooltip>
+                                                    <template #title>
+                                                        <p>
+                                                            同步物联网平台设备数据到OneNet
+                                                        </p>
+                                                    </template>
+                                                    <question-circle-outlined />
+                                                </a-tooltip>
+                                            </div>
+                                            <a-input
+                                                disabled
+                                                v-model:value="
+                                                    formState.apiAddress
+                                                "
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            label="apiKey"
+                                            name="apiKey"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入apiKey',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                v-model:value="formState.apiKey"
+                                                placeholder="请输入apiKey"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            name="validateToken"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入通知Token',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <div class="form-label">
+                                                通知Token
+                                                <span
+                                                    class="form-label-required"
+                                                    >*</span
+                                                >
+                                                <a-tooltip>
+                                                    <template #title>
+                                                        <p>
+                                                            接收OneNet推送的Token地址
+                                                        </p>
+                                                    </template>
+                                                    <question-circle-outlined />
+                                                </a-tooltip>
+                                            </div>
+                                            <a-input
+                                                v-model:value="
+                                                    formState.validateToken
+                                                "
+                                                placeholder="请输入通知Token"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            name="aesKey"
+                                            :rules="[
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <div class="form-label">
+                                                aesKey
+                                                <a-tooltip>
+                                                    <template #title>
+                                                        <p>
+                                                            OneNet
+                                                            端生成的消息加密key
+                                                        </p>
+                                                    </template>
+                                                    <question-circle-outlined />
+                                                </a-tooltip>
+                                            </div>
+                                            <a-input
+                                                v-model:value="formState.aesKey"
+                                                placeholder="请输入aesKey"
+                                            /> </a-form-item
+                                    ></a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            label="说明"
+                                            name="description"
+                                        >
+                                            <a-textarea
+                                                placeholder="请输入说明"
+                                                :rows="4"
+                                                v-model:value="
+                                                    formState.description
+                                                "
+                                                show-count
+                                                :maxlength="200"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row> </a-form
+                        ></a-col>
+                        <a-col :span="8">
+                            <div class="doc">
+                                <h1>操作指引：</h1>
+                                <div>
+                                    1、OneNet端创建产品、设备，并配置HTTP推送
+                                </div>
+                                <div>
+                                    2、IOT端创建类型为OneNet的设备接入网关
+                                </div>
+                                <div>
+                                    3、IOT端创建产品，选中接入方式为OneNet类型的设备接入网关，填写Master-APIkey（OneNet端的产品Key）
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img5" />
+                                </div>
+                                <div>
+                                    4、IOT端添加设备，在设备实例页面为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中的值一致）
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img6" />
+                                </div>
+                                <h1>HTTP推送配置说明</h1>
+                                <div class="image">
+                                    <a-image width="100%" :src="img" />
+                                </div>
+                                <div>
+                                    HTTP推送配置路径：应用开发&gt;数据推送
+                                </div>
+                                <a-descriptions
+                                    bordered
+                                    size="small"
+                                    :column="1"
+                                    :labelStyle="{ width: '100px' }"
+                                >
+                                    <a-descriptions-item label="参数"
+                                        >说明</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="实例名称"
+                                        >推送实例的名称</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="推送地址">
+                                        用于接收OneNet推送设备数据的地址物联网平台地址:
+                                        <div style="word-wrap: break-word">
+                                            {{
+                                                `${origin}/api/one-net/${randomString()}/notify`
+                                            }}
+                                        </div>
+                                    </a-descriptions-item>
+                                    <a-descriptions-item label="Token">
+                                        自定义token,可用于验证请求是否来自OneNet
+                                    </a-descriptions-item>
+                                    <a-descriptions-item label="消息加密">
+                                        采用AES加密算法对推送的数据进行数据加密，AesKey为加密秘钥
+                                    </a-descriptions-item>
+                                </a-descriptions>
+
+                                <h1>设备接入网关配置说明</h1>
+                                <a-descriptions
+                                    bordered
+                                    size="small"
+                                    :column="1"
+                                    :labelStyle="{ width: '100px' }"
+                                >
+                                    <a-descriptions-item label="参数"
+                                        >说明</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="apiKey"
+                                        >OneNet平台中具体产品的Key</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="通知Token">
+                                        填写OneNet数据推送配置中设置的Token
+                                    </a-descriptions-item>
+                                    <a-descriptions-item label="aesKey">
+                                        若OneNet数据推送配置了消息加密，此处填写OneNet端数据推送配置中设置的aesKey
+                                    </a-descriptions-item>
+                                </a-descriptions>
+                                <h1>其他说明</h1>
+                                <div>
+                                    1.在IOT端启用设备时，若OneNet平台没有与之对应的设备，则将在OneNet端自动创建新设备
+                                </div>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </div>
+            </div>
+        </div>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 1">
+                <div class="alert">
+                    <info-circle-outlined />
+                    只能选择HTTP通信方式的协议
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="procotolSearch"
+                    />
+                    <a-button type="primary" @click="addProcotol"
+                        >新增</a-button
+                    >
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in procotolList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="procotolChange"
+                                :checked="procotolCurrent"
+                                :data="item"
+                            >
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+        </div>
+        <div v-if="current === 2" class="card-last">
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12">
+                    <title-component data="基本信息" />
+                    <div>
+                        <a-form
+                            :model="form"
+                            name="basic"
+                            autocomplete="off"
+                            layout="vertical"
+                            ref="formRef2"
+                        >
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                        trigger: 'blur',
+                                    },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="form.name"
+                                />
+                            </a-form-item>
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    placeholder="请输入说明"
+                                    :rows="4"
+                                    v-model:value="form.description"
+                                    show-count
+                                    :maxlength="200"
+                                />
+                            </a-form-item>
+                            <!-- <a-form-item>
+                                <a-button
+                                    v-if="current !== 1"
+                                    type="primary"
+                                    html-type="submit"
+                                    >保存</a-button
+                                >
+                            </a-form-item> -->
+                        </a-form>
+                    </div>
+                </a-col>
+                <a-col :span="12">
+                    <div class="config-right">
+                        <div class="config-right-item">
+                            <title-component data="配置概览" />
+                            <div class="config-right-item-context">
+                                接入方式：{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                {{ provider.description }}
+                            </div>
+                            <div class="config-right-item-context">
+                                消息协议：{{ procotolCurrent }}
+                            </div>
+                        </div>
+                        <div class="config-right-item">
+                            <title-component data="设备接入指引" />
+                            <div class="config-right-item-context">
+                                1、创建类型为{{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing'
+                                }}的设备接入网关
+                            </div>
+                            <div class="config-right-item-context">
+                                2、创建产品，并选中接入方式为
+                                {{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
+                                }}
+                            </div>
+                            <div class="config-right-item-context">
+                                3、添加设备，为每一台设备设置唯一的IMEI、SN、IMSI、PSK码（需与CTWingt平台中填写的值一致，若CTWing平台没有对应的设备，将会通过CTWing平台提供的LWM2M协议自动创建）
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+        <div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
+            <a-button
+                v-if="[0, 1].includes(current)"
+                type="primary"
+                @click="next"
+            >
+                下一步
+            </a-button>
+            <a-button v-if="current === 2" type="primary" @click="saveData">
+                保存
+            </a-button>
+            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessCloudOneNet">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { update, save, getNetworkList } from '@/api/link/accessConfig';
+import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
+import {
+    InfoCircleOutlined,
+    QuestionCircleOutlined,
+} from '@ant-design/icons-vue';
+import AccessCard from '../AccessCard/index.vue';
+import { randomString } from '@/utils/utils';
+import { getImage } from '@/utils/comm';
+
+const origin = window.location.origin;
+const img5 = getImage('/network/05.jpg');
+const img6 = getImage('/network/06.jpg');
+const img = getImage('/network/OneNet.jpg');
+
+//测试数据1{
+const resultList1 = [
+    {
+        id: '1612354213444087808',
+        name: '大华烟感协议',
+    },
+    {
+        id: '1610475299002855424',
+        name: '宇视摄像头协议',
+    },
+    {
+        id: '1610466717670780928',
+        name: '官方协议',
+    },
+    {
+        id: '1610205217785524224',
+        name: 'demo协议',
+    },
+    {
+        id: '1610204985806958592',
+        name: '水压协议',
+    },
+    {
+        id: '1605459961693745152',
+        name: '测试设备诊断日志显示',
+    },
+    {
+        id: '1582302200020783104',
+        name: 'demo',
+    },
+    {
+        id: '1581839391887794176',
+        name: '海康闸机协议',
+    },
+    {
+        id: '1567062365030637568',
+        name: '协议20220906160914',
+    },
+    {
+        id: '1561650927208628224',
+        name: 'local',
+    },
+    {
+        id: '1552881998413754368',
+        name: '官方协议V3-支持固件升级3',
+    },
+    {
+        id: '2b283b28a16d61e5fc2bdf39ceff34f8',
+        name: 'JetLinks官方协议',
+        description: 'JetLinks官方协议包',
+    },
+    {
+        id: '1551510679466844160',
+        name: '官方协议3.1',
+    },
+    {
+        id: '1551509716811161600',
+        name: '官方协议3.0',
+    },
+];
+
+interface FormState {
+    apiAddress: string;
+    apiKey: string;
+    validateToken: string;
+    aesKey: string;
+    description: string;
+}
+interface Form {
+    name: string;
+    description: string;
+}
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = ref(props.provider.channel);
+const formRef1 = ref<FormInstance>();
+const formRef2 = ref<FormInstance>();
+
+const formState = reactive<FormState>({
+    apiAddress: 'https://api.heclouds.com/',
+    apiKey: '',
+    validateToken: '',
+    aesKey: '',
+    description: '',
+});
+const form = reactive<Form>({
+    name: '',
+    description: '',
+});
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['接入配置', '消息协议', '完成']);
+const procotolList = ref([]);
+const allProcotolList = ref([]);
+const procotolCurrent = ref('');
+
+const procotolChange = (id: string) => {
+    if (!props.data?.id) {
+        procotolCurrent.value = id;
+    }
+};
+
+const procotolSearch = (value: string) => {
+    if (value) {
+        const list = allProcotolList.value.filter((i) => {
+            return (
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+            );
+        });
+        procotolList.value = list;
+    } else {
+        procotolList.value = allProcotolList.value;
+    }
+};
+
+const saveData = async () => {
+    const data: any = await formRef2.value?.validate();
+    const params = {
+        ...data,
+        configuration: {
+            ...formState,
+            protocol: procotolCurrent.value,
+        },
+        protocol: procotolCurrent.value,
+        provider: props.provider.id,
+        transport: 'HTTP_SERVER',
+    };
+    const resp =
+        props.data && props.data.id
+            ? await update({
+                  ...props.data,
+                  ...params,
+              })
+            : await save(params);
+
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        // 回到列表页面
+        // if (window.onTabSaveSuccess) {
+        //     window.onTabSaveSuccess(resp);
+        //     setTimeout(() => window.close(), 300);
+        // } else {
+        //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
+        // }
+        history.back();
+    }
+};
+
+const queryProcotolList = async (id: string, params = {}) => {
+    // const resp = await getProtocolList(ProtocolMapping.get(id), {
+    //     ...params,
+    //     'sorts[0].name': 'createTime',
+    //     'sorts[0].order': 'desc',
+    // });
+    // if (resp.status === 200) {
+    //     procotolList.value = resp.result;
+    //     allProcotolList.value = resp.result;
+    // }
+
+    //使用测试数据1
+    procotolList.value = resultList1;
+    allProcotolList.value = resultList1;
+};
+
+const addProcotol = () => {
+    // const url = this.$store.state.permission.routes['Link/Protocol']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?save=true`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            procotolCurrent.value = value.result?.id;
+            queryProcotolList(props.provider?.id);
+        }
+    };
+};
+
+const next = async () => {
+    if (current.value === 0) {
+        let data1: any = await formRef1.value?.validate();
+        queryProcotolList(props.provider.id);
+        current.value = current.value + 1;
+    } else if (current.value === 1) {
+        if (!procotolCurrent.value) {
+            message.error('请选择消息协议！');
+        } else {
+            current.value = current.value + 1;
+        }
+    }
+};
+const prev = () => {
+    current.value = current.value - 1;
+};
+
+watch(
+    current,
+    (v) => {
+        stepCurrent.value = v;
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+</script>
+
+<style lang="less" scoped>
+.container {
+    margin: 20px;
+}
+
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.steps-action-save {
+    margin-left: 0;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.card-last {
+    padding-right: 5px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.config-right {
+    padding: 20px;
+    // color: rgba(0, 0, 0, 0.8);
+    // background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+
+.doc {
+    height: 550px;
+    padding: 24px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: rgba(#000, 0.8);
+    font-size: 14px;
+    background-color: #fafafa;
+
+    h1 {
+        margin: 16px 0;
+        color: rgba(#000, 0.85);
+        font-weight: bold;
+        font-size: 14px;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    .image {
+        margin: 16px 0;
+    }
+}
+.form-label {
+    height: 30px;
+    padding-bottom: 8px;
+    .form-label-required {
+        color: red;
+        margin: 0 4px 0 -2px;
+    }
+}
+</style>

src/views/link/AccessConfig/components/Cloud/index.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <Ctwing
+            v-if="channel === 'Ctwing'"
+            :provider="props.provider"
+            :data="props.data"
+        />
+        <OneNet
+            v-if="channel === 'OneNet'"
+            :provider="props.provider"
+            :data="props.data"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessCloud">
+import Ctwing from './Ctwing.vue';
+import OneNet from './OneNet.vue';
+
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = props.provider.channel;
+</script>
+
+<style lang="less" scoped></style>

src/views/link/AccessConfig/components/Edge/index.vue

@@ -0,0 +1,492 @@
+<template>
+    <div v-if="type === 'edge'" class="container">
+        <a-steps
+            v-if="channel !== 'edge-child-device'"
+            class="steps-steps"
+            :current="stepCurrent"
+        >
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div v-if="channel !== 'edge-child-device'" class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <question-circle-outlined />
+                    选择与设备通信的网络组件
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="networkSearch"
+                    />
+                    <a-button type="primary" @click="addNetwork">新增</a-button>
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="networkList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in networkList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="checkedChange"
+                                :checked="networkCurrent"
+                                :data="{
+                                    ...item,
+                                    description: item.description
+                                        ? item.description
+                                        : descriptionList[provider.id],
+                                }"
+                            >
+                                <template #other>
+                                    <div class="other">
+                                        <a-tooltip placement="topLeft">
+                                            <div
+                                                v-if="
+                                                    (item.addresses || [])
+                                                        .length > 1
+                                                "
+                                            >
+                                                <div
+                                                    v-for="i in item.addresses ||
+                                                    []"
+                                                    :key="i.address"
+                                                    class="item"
+                                                >
+                                                    <a-badge
+                                                        :color="
+                                                            i.health === -1
+                                                                ? 'red'
+                                                                : 'green'
+                                                        "
+                                                    />{{ i.address }}
+                                                </div>
+                                            </div>
+                                            <div
+                                                v-for="i in (
+                                                    item.addresses || []
+                                                ).slice(0, 1)"
+                                                :key="i.address"
+                                                class="item"
+                                            >
+                                                <a-badge
+                                                    :color="
+                                                        i.health === -1
+                                                            ? 'red'
+                                                            : 'green'
+                                                    "
+                                                    :text="i.address"
+                                                />
+                                                <span
+                                                    v-if="
+                                                        (item.addresses || [])
+                                                            .length > 1
+                                                    "
+                                                    >...</span
+                                                >
+                                            </div>
+                                        </a-tooltip>
+                                    </div>
+                                </template>
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+        </div>
+        <div
+            v-if="channel === 'edge-child-device' || current === 1"
+            class="card-last"
+        >
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12">
+                    <title-component data="基本信息" />
+                    <div>
+                        <a-form
+                            :model="formState"
+                            name="basic"
+                            autocomplete="off"
+                            layout="vertical"
+                            @finish="onFinish"
+                            ref="formRef"
+                        >
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                        trigger: 'blur',
+                                    },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="formState.name"
+                                />
+                            </a-form-item>
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    placeholder="请输入说明"
+                                    :rows="4"
+                                    v-model:value="formState.description"
+                                    show-count
+                                    :maxlength="200"
+                                />
+                            </a-form-item>
+                            <a-form-item>
+                                <a-button
+                                    v-if="current !== 1"
+                                    type="primary"
+                                    html-type="submit"
+                                    >保存</a-button
+                                >
+                            </a-form-item>
+                        </a-form>
+                    </div>
+                </a-col>
+                <a-col :span="12">
+                    <div class="config-right">
+                        <div class="config-right-item">
+                            <title-component data="配置概览" />
+                            <div class="config-right-item-context">
+                                接入方式：{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                {{ provider.description }}
+                            </div>
+                            <div class="config-right-item-context">
+                                消息协议：{{ provider.id }}
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+        <div
+            v-if="channel !== 'edge-child-device'"
+            :class="current !== 1 ? 'steps-action' : 'steps-action-save'"
+        >
+            <a-button v-if="[0].includes(current)" @click="next">
+                下一步
+            </a-button>
+            <a-button v-if="current === 1" type="primary" @click="saveData">
+                保存
+            </a-button>
+            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessEdge">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { update, save, getNetworkList } from '@/api/link/accessConfig';
+import {
+    descriptionList,
+    ProtocolMapping,
+    NetworkTypeMapping,
+} from '../../Detail/data';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import AccessCard from '../AccessCard/index.vue';
+
+//测试数据1
+const networkListTest = {
+    message: 'success',
+    result: [
+        {
+            id: '1585192878304051200',
+            name: 'MQTT网络组件',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8101',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1583268266806009856',
+            name: '我的第一个MQTT服务组件',
+            description: '',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8100',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1570335308902912000',
+            name: '0915MQTT网络组件_勿动',
+            description: '测试，勿动！',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8083',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1567062350140858368',
+            name: '网络组件20220906160907',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8083',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1556563257890742272',
+            name: 'MQTT网络组件',
+            addresses: [
+                {
+                    address: 'mqtt://0.0.0.0:8104',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1534774770408108032',
+            name: 'MQTT',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8088',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+    ],
+    status: 200,
+    timestamp: 1674960624150,
+};
+
+interface FormState {
+    name: string;
+    description: string;
+}
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const type = ref(props.provider.type);
+const channel = ref(props.provider.channel);
+
+const formState = reactive<FormState>({
+    name: '',
+    description: '',
+});
+
+const formRef = ref<FormInstance>();
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['网络组件', '完成']);
+const networkCurrent = ref('');
+const networkList = ref([]);
+
+const onFinish = async (values: any) => {
+    const providerId = props.provider.id;
+    const params = {
+        ...values,
+        protocol: 'official-edge-protocol',
+        provider: providerId,
+        transport: ProtocolMapping.get(providerId),
+    };
+    if (networkCurrent.value) params.channelId = networkCurrent.value;
+    console.log(1112, networkCurrent.value, params);
+
+    const resp = !!id ? await update({ ...params, id }) : await save(params);
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        // if (params.get('save')) {
+        // if ((window as any).onTabSaveSuccess) {
+        //   if (resp.result) {
+        //     (window as any).onTabSaveSuccess(resp.result);
+        //     setTimeout(() => window.close(), 300);
+        //   }
+        // }
+        //   } else {
+        history.back();
+        //   }
+    }
+};
+
+const checkedChange = (id: string) => {
+    networkCurrent.value = id;
+};
+
+const queryNetworkList = async (id: string, include: string, data = {}) => {
+    // const resp = await getNetworkList(
+    //     NetworkTypeMapping.get(id),
+    //     include,
+    //     data,
+    // );
+    // if (resp.status === 200) {
+    //     networkList.value = resp.result;
+    // }
+
+    //使用测试数据1
+    networkList.value = networkListTest.result;
+};
+
+const networkSearch = (value: string) => {
+    queryNetworkList(props.provider.id, networkCurrent.value || '', {
+        terms: [
+            {
+                column: 'name$LIKE',
+                value: `%${value}%`,
+            },
+        ],
+    });
+};
+
+const saveData = async () => {
+    const data: any = await formRef.value?.validate();
+    onFinish(data);
+};
+
+const addNetwork = () => {
+    // const url = this.$store.state.permission.routes['Link/Type/Detail']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?type=${
+            NetworkTypeMapping.get(props.provider?.id) || ''
+        }`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            networkCurrent.value = value.result.id;
+            queryNetworkList(props.provider?.id, networkCurrent.value || '');
+        }
+    };
+};
+
+const next = async () => {
+    if (!networkCurrent.value) {
+        message.error('请选择网络组件！');
+    } else {
+        current.value = current.value + 1;
+    }
+};
+const prev = () => {
+    current.value = current.value - 1;
+};
+
+onMounted(() => {
+    if (props.provider.id === 'official-edge-gateway') {
+        queryNetworkList(props.provider.id, '');
+    }
+}),
+    watch(
+        current,
+        (v) => {
+            stepCurrent.value = v;
+        },
+        {
+            deep: true,
+            immediate: true,
+        },
+    );
+</script>
+
+<style lang="less" scoped>
+.container {
+    margin: 20px;
+}
+
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.steps-action-save {
+    margin-left: 0;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.card-last {
+    padding-right: 5px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.config-right {
+    padding: 20px;
+    // color: rgba(0, 0, 0, 0.8);
+    // background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+</style>

src/views/link/AccessConfig/components/Media/GB28181.vue

@@ -6,7 +6,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <info-circle-outlined />
                     配置设备信令参数
                 </div>
                 <div>
@@ -511,7 +511,12 @@
 import { message, Form } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
 import { getResourcesCurrent, getClusters } from '@/api/link/accessConfig';
-import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import {
+    DeleteOutlined,
+    PlusOutlined,
+    QuestionCircleOutlined,
+    InfoCircleOutlined,
+} from '@ant-design/icons-vue';
 import { update, save } from '@/api/link/accessConfig';
 
 interface Form2 {

src/views/link/AccessConfig/components/Network.vue

@@ -6,7 +6,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <info-circle-outlined />
                     选择与设备通信的网络组件
                 </div>
                 <div class="search">
@@ -93,7 +93,7 @@
             </div>
             <div class="steps-box" v-else-if="current === 1">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <info-circle-outlined />
                     使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
                 </div>
                 <div class="search">
@@ -326,7 +326,7 @@ import AccessCard from './AccessCard/index.vue';
 import { message, Form } from 'ant-design-vue';
 import type { FormInstance, TableColumnType } from 'ant-design-vue';
 import Markdown from 'vue3-markdown-it';
-import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
 //测试数据1
 const resultList1 = [
     {

src/views/notice/Config/Debug/index.vue

@@ -0,0 +1,201 @@
+<template>
+    <a-modal
+        v-model:visible="_vis"
+        title="调试"
+        cancelText="取消"
+        okText="确定"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <a-form layout="vertical">
+            <a-form-item label="通知模版" v-bind="validateInfos.templateId">
+                <a-select
+                    v-model:value="formData.templateId"
+                    placeholder="请选择通知模版"
+                    @change="getTemplateDetail"
+                >
+                    <a-select-option
+                        v-for="(item, index) in templateList"
+                        :key="index"
+                        :value="item.id"
+                    >
+                        {{ item.name }}
+                    </a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item
+                label="变量"
+                v-bind="validateInfos.variableDefinitions"
+                v-if="templateDetailTable && templateDetailTable.length"
+            >
+                <a-table
+                    ref="myTable"
+                    class="debug-table"
+                    :columns="columns"
+                    :data-source="templateDetailTable"
+                    :pagination="false"
+                    :rowKey="
+                        (record, index) => {
+                            return record.id;
+                        }
+                    "
+                >
+                    <template #bodyCell="{ column, text, record }">
+                        <template
+                            v-if="['id', 'name'].includes(column.dataIndex)"
+                        >
+                            <span>{{ record[column.dataIndex] }}</span>
+                        </template>
+                        <template v-else>
+                            <ValueItem
+                                v-model:modelValue="record.value"
+                                :itemType="record.type"
+                            />
+                        </template>
+                    </template>
+                </a-table>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Form } from 'ant-design-vue';
+import { PropType } from 'vue';
+import ConfigApi from '@/api/notice/config';
+import {
+    TemplateFormData,
+    IVariableDefinitions,
+} from '@/views/notice/Template/types';
+import { message } from 'ant-design-vue';
+
+const useForm = Form.useForm;
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+/**
+ * 获取通知模板
+ */
+const templateList = ref<TemplateFormData[]>([]);
+const getTemplateList = async () => {
+    const params = {
+        terms: [
+            { column: 'type', value: props.data.type },
+            { column: 'provider', value: props.data.provider },
+        ],
+    };
+    const { result } = await ConfigApi.getTemplate(params, props.data.id);
+    templateList.value = result;
+};
+
+watch(
+    () => _vis.value,
+    (val) => {
+        if (val) getTemplateList();
+    },
+);
+
+/**
+ * 获取模板详情
+ */
+const templateDetailTable = ref<IVariableDefinitions[]>();
+const getTemplateDetail = async () => {
+    const { result } = await ConfigApi.getTemplateDetail(
+        formData.value.templateId,
+    );
+    templateDetailTable.value = result.variableDefinitions.map((m: any) => ({
+        ...m,
+        value: undefined,
+    }));
+};
+
+const columns = [
+    {
+        title: '变量',
+        dataIndex: 'id',
+        scopedSlots: { customRender: 'id' },
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        scopedSlots: { customRender: 'name' },
+    },
+    {
+        title: '值',
+        dataIndex: 'type',
+        width: 160,
+        scopedSlots: { customRender: 'type' },
+    },
+];
+
+// 表单数据
+const formData = ref({
+    templateId: '',
+    variableDefinitions: '',
+});
+
+// 验证规则
+const formRules = ref({
+    templateId: [{ required: true, message: '请选择通知模板' }],
+    variableDefinitions: [{ required: false, message: '该字段是必填字段' }],
+});
+
+const { resetFields, validate, validateInfos, clearValidate } = useForm(
+    formData.value,
+    formRules.value,
+);
+
+/**
+ * 提交
+ */
+const btnLoading = ref(false);
+const handleOk = () => {
+    validate()
+        .then(async () => {
+            const params = {};
+            templateDetailTable.value?.forEach((item) => {
+                params[item.id] = item.value;
+            });
+            // console.log('params: ', params);
+            btnLoading.value = true;
+            ConfigApi.debug(params, props.data.id, formData.value.templateId)
+                .then((res) => {
+                    if (res.success) {
+                        message.success('操作成功');
+                        handleCancel();
+                    }
+                })
+                .finally(() => {
+                    btnLoading.value = false;
+                });
+        })
+        .catch((err) => {
+            console.log('err: ', err);
+        });
+};
+
+const handleCancel = () => {
+    _vis.value = false;
+    templateDetailTable.value = [];
+    resetFields();
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Config/Log/index.vue

@@ -0,0 +1,156 @@
+<template>
+    <a-modal v-model:visible="_vis" title="通知记录" :footer="null" width="70%">
+        <Search
+            type="simple"
+            :columns="columns"
+            target="product"
+            @search="handleSearch"
+        />
+
+        <JTable
+            ref="instanceRef"
+            :columns="columns"
+            :request="(e:any) => configApi.getHistory(e, data.id)"
+            :defaultParams="{
+                sorts: [{ name: 'notifyTime', order: 'desc' }],
+                terms: [{ column: 'notifyType$IN', value: data.type }],
+            }"
+            :params="params"
+            model="table"
+        >
+            <template #notifyTime="slotProps">
+                {{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
+            </template>
+            <template #state="slotProps">
+                <a-space>
+                    <a-badge
+                        :status="slotProps.state.value"
+                        :text="slotProps.state.text"
+                    ></a-badge>
+                    <AIcon
+                        v-if="slotProps.state.value === 'error'"
+                        type="ExclamationCircleOutlined"
+                        style="color: #1d39c4; cursor: pointer"
+                        @click="handleError(slotProps.errorStack)"
+                    />
+                </a-space>
+            </template>
+            <template #action="slotProps">
+                <AIcon
+                    type="ExclamationCircleOutlined"
+                    style="color: #1d39c4; cursor: pointer"
+                    @click="handleDetail(slotProps.context)"
+                />
+            </template>
+        </JTable>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import configApi from '@/api/notice/config';
+import { PropType } from 'vue';
+import moment from 'moment';
+import { Modal } from 'ant-design-vue';
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+watch(
+    () => _vis.value,
+    (val) => {
+        if (val) handleSearch({ terms: [] });
+    },
+);
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '发送时间',
+        dataIndex: 'notifyTime',
+        key: 'notifyTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '成功', value: 'success' },
+                { label: '失败', value: 'error' },
+            ],
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        scopedSlots: true,
+    },
+];
+
+const params = ref<Record<string, any>>({});
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    // console.log('handleSearch e:', e);
+    params.value = e;
+    // console.log('params.value: ', params.value);
+};
+
+/**
+ * 查看错误信息
+ */
+const handleError = (e: any) => {
+    Modal.info({
+        title: '错误信息',
+        content: JSON.stringify(e),
+    });
+};
+/**
+ * 查看详情
+ */
+const handleDetail = (e: any) => {
+    Modal.info({
+        title: '详情信息',
+        content: JSON.stringify(e),
+    });
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Config/SyncUser/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="page-container">
+        
+    </div>
+</template>
+
+<script setup lang="ts">
+
+
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/notice/Config/index.vue

@@ -1,22 +1,374 @@
-<!-- 通知配置 -->
 <template>
-    <div class="page-container">通知配置</div>
+    <div class="page-container">
+        <a-card style="margin-bottom: 20px">
+            <Search
+                :columns="columns"
+                target="notice-config"
+                @search="handleSearch"
+            />
+        </a-card>
+        <a-card>
+            <JTable
+                ref="instanceRef"
+                :columns="columns"
+                :request="configApi.list"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <a-space>
+                        <a-button type="primary" @click="handleAdd">
+                            新增
+                        </a-button>
+                        <a-upload
+                            name="file"
+                            accept="json"
+                            :showUploadList="false"
+                            :before-upload="beforeUpload"
+                        >
+                            <a-button>导入</a-button>
+                        </a-upload>
+                        <a-button @click="handleExport">导出</a-button>
+                    </a-space>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :showStatus="false"
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        v-bind="slotProps"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img
+                                    :src="
+                                        getLogo(
+                                            slotProps.type,
+                                            slotProps.provider,
+                                        )
+                                    "
+                                />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <h3 class="card-item-content-title">
+                                {{ slotProps.name }}
+                            </h3>
+                            <a-row>
+                                <a-col :span="12">
+                                    <div class="card-item-content-text">
+                                        通知方式
+                                    </div>
+                                    <div>
+                                        {{ getMethodTxt(slotProps.type) }}
+                                    </div>
+                                </a-col>
+                                <a-col :span="12">
+                                    <div class="card-item-content-text">
+                                        说明
+                                    </div>
+                                    <div>{{ slotProps.description }}</div>
+                                </a-col>
+                            </a-row>
+                        </template>
+                        <template #actions="item">
+                            <a-tooltip
+                                v-bind="item.tooltip"
+                                :title="item.disabled && item.tooltip.title"
+                            >
+                                <a-popconfirm
+                                    v-if="item.popConfirm"
+                                    v-bind="item.popConfirm"
+                                    :disabled="item.disabled"
+                                >
+                                    <a-button :disabled="item.disabled">
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </a-popconfirm>
+                                <template v-else>
+                                    <a-button
+                                        :disabled="item.disabled"
+                                        @click="item.onClick"
+                                    >
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </template>
+                            </a-tooltip>
+                        </template>
+                    </CardBox>
+                </template>
+                <template #action="slotProps">
+                    <a-space :size="16">
+                        <a-tooltip
+                            v-for="i in getActions(slotProps, 'table')"
+                            :key="i.key"
+                            v-bind="i.tooltip"
+                        >
+                            <a-popconfirm
+                                v-if="i.popConfirm"
+                                v-bind="i.popConfirm"
+                                :disabled="i.disabled"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-popconfirm>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                v-else
+                                @click="i.onClick && i.onClick(slotProps)"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-button>
+                        </a-tooltip>
+                    </a-space>
+                </template>
+            </JTable>
+        </a-card>
+
+        <Debug v-model:visible="debugVis" :data="currentConfig" />
+        <Log v-model:visible="logVis" :data="currentConfig" />
+        <SyncUser v-model:visible="syncVis" :data="currentConfig" />
+    </div>
 </template>
 
 <script setup lang="ts">
 import configApi from '@/api/notice/config';
+import type { ActionsType } from '@/components/Table/index.vue';
+import { getImage, LocalStore } from '@/utils/comm';
+import { message } from 'ant-design-vue';
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 
-const getList = async () => {
+import { NOTICE_METHOD, MSG_TYPE } from '@/views/notice/const';
-    const res = await configApi.list({
+import SyncUser from './SyncUser/index.vue'
-        current: 1,
+import Debug from './Debug/index.vue'
-        pageIndex: 0,
+import Log from './Log/index.vue'
-        pageSize: 12,
+
-        sorts: [{ name: 'createTime', order: 'desc' }],
+let providerList: any = [];
-        terms: [],
+Object.keys(MSG_TYPE).forEach((key) => {
-    });
+    providerList = [...providerList, ...MSG_TYPE[key]];
-    console.log('res: ', res);
+});
+
+const router = useRouter();
+
+const instanceRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+
+const columns = [
+    {
+        title: '配置名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '通知方式',
+        dataIndex: 'type',
+        key: 'type',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: NOTICE_METHOD,
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '类型',
+        dataIndex: 'provider',
+        key: 'provider',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: providerList,
+            handleValue: (v: any) => {
+                return '123';
+            },
+        },
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true,
+    },
+];
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    console.log('handleSearch:', e);
+    params.value = e;
+    console.log('params.value: ', params.value);
 };
-getList();
-</script>
 
-<style lang="less" scoped></style>
+/**
+ * 根据通知方式展示对应logo
+ */
+const getLogo = (type: string, provider: string) => {
+    return MSG_TYPE[type].find((f: any) => f.value === provider)?.logo;
+};
+/**
+ * 通知方式字段展示对应文字
+ */
+const getMethodTxt = (type: string) => {
+    return NOTICE_METHOD.find((f) => f.value === type)?.label;
+};
+
+/**
+ * 新增
+ */
+const handleAdd = () => {
+    router.push(`/notice/Config/detail/:id`);
+};
+
+/**
+ * 导入
+ */
+const beforeUpload = () => {};
+
+/**
+ * 导出
+ */
+const handleExport = () => {};
+
+/**
+ * 查看
+ */
+const handleView = (id: string) => {
+    message.warn(id + '暂未开发');
+};
+
+const syncVis = ref(false);
+const debugVis = ref(false);
+const logVis = ref(false);
+const currentConfig = ref<Partial<Record<string, any>>>();
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
+    if (!data) return [];
+    const actions = [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                // visible.value = true;
+                // current.value = data;
+                router.push(`/notice/Config/detail/${data.id}`);
+            },
+        },
+        {
+            key: 'debug',
+            text: '调试',
+            tooltip: {
+                title: '调试',
+            },
+            icon: 'BugOutlined',
+            onClick: () => {
+                debugVis.value = true;
+                currentConfig.value = data;
+            },
+        },
+        {
+            key: 'debug',
+            text: '通知记录',
+            tooltip: {
+                title: '通知记录',
+            },
+            icon: 'BarsOutlined',
+            onClick: () => {
+                logVis.value = true;
+                currentConfig.value = data;
+            },
+        },
+        {
+            key: 'debug',
+            text: '导出',
+            tooltip: {
+                title: '导出',
+            },
+            icon: 'ArrowDownOutlined',
+            onClick: () => {
+                // debugVis.value = true;
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            // disabled: data.state.value !== 'notActive',
+            // tooltip: {
+            //     title:
+            //         data.state.value !== 'notActive'
+            //             ? '已启用的设备不能删除'
+            //             : '删除',
+            // },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp = await configApi.del(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        // instanceRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+    if (type === 'card')
+        return actions.filter((i: ActionsType) => i.key !== 'view');
+    return actions;
+};
+</script>
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+</style>

src/views/notice/Template/Detail/components/Attachments.vue

@@ -1,4 +1,4 @@
-<!-- webhook请求头可编辑表格 -->
+<!-- 附件信息 -->
 <template>
     <div class="attachment-wrapper">
         <div
@@ -15,13 +15,16 @@
                             [TOKEN_KEY]: LocalStore.get(TOKEN_KEY),
                         }"
                         :showUploadList="false"
-                        @change="handleChange"
+                        @change="(e) => handleChange(e, item.id)"
                     >
                         <upload-outlined />
                     </a-upload>
                 </template>
             </a-input>
-            <delete-outlined @click="handleDelete" style="cursor: pointer" />
+            <delete-outlined
+                @click="handleDelete(item.id)"
+                style="cursor: pointer"
+            />
         </div>
 
         <a-button
@@ -62,35 +65,65 @@ const props = defineProps({
     },
 });
 
-const handleChange = (info: UploadChangeParam) => {
+// const fileList = computed({
-    if (info.file.status === 'done') {
+//     get: () => props.attachments.map((m) => ({ id: fileId(), ...m })),
-        const result = info.file.response?.result;
+//     set: (val) =>
-        console.log('result: ', result);
+//         emit(
-    }
+//             'update:attachments',
-};
+//             val.map(({ name, location }) => ({ name, location })),
+//         ),
+// });
 
 const fileList = ref<IAttachments[]>([]);
+
 watch(
     () => props.attachments,
     (val) => {
-        fileList.value = val;
+        fileList.value = val.map((m) => ({
+            id: fileId(),
+            ...m,
+        }));
     },
     { deep: true },
 );
 
-const handleDelete = (id: number) => {
+const handleChange = (info: UploadChangeParam, id: string | undefined) => {
-    const idx = fileList.value.findIndex((f) => f.id === id);
+    if (info.file.status === 'done') {
-    fileList.value.splice(idx, 1);
+        const targetFileIdx = fileList.value.findIndex((f) => f.id === id);
-    emit('update:attachments', fileList.value);
+        fileList.value[targetFileIdx].name = info.file.name;
+        fileList.value[targetFileIdx].location = info.file.response?.result;
+        emit(
+            'update:attachments',
+            fileList.value.map(({ name, location }) => ({ name, location })),
+        );
+    }
 };
+
+/**
+ * 删除附件
+ * @param id
+ */
+const handleDelete = (id: string | undefined) => {
+    const idx = fileList.value.findIndex((f) => f.id === id);
+
+    fileList.value.splice(idx, 1);
+};
+
+/**
+ * 添加附件
+ */
 const handleAdd = () => {
     fileList.value.push({
-        id: fileList.value.length,
+        id: fileId(),
         name: '',
         location: '',
     });
-    emit('update:attachments', fileList.value);
 };
+
+/**
+ * 附件标识
+ */
+const fileId = () => String(new Date().getTime() + Math.random() * 9);
 </script>
 
 <style lang="less" scoped>

src/views/notice/Template/Detail/components/ToOrg.vue

@@ -0,0 +1,46 @@
+<template>
+    <a-select
+        :options="options"
+        @change="change"
+        placeholder="请选择收信部门"
+        style="width: 100%"
+        :allowClear="true"
+    />
+</template>
+
+<script setup lang="ts">
+import templateApi from '@/api/notice/template';
+
+type Emits = {
+    (e: 'update:toParty', data: string): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    type: { type: String, default: '' },
+    configId: { type: String, default: '' },
+});
+
+const options = ref([]);
+const queryData = async () => {
+    const { result } = await templateApi.getDept(props.type, props.configId);
+    options.value = result.map((item: any) => ({
+        label: item.name,
+        value: item.id,
+    }));
+};
+queryData();
+
+const change = (e: any) => {
+    emit('update:toParty', e);
+};
+
+watch(
+    () => props.configId,
+    () => {
+        queryData();
+    },
+);
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/Detail/components/ToTag.vue

@@ -0,0 +1,46 @@
+<template>
+    <a-select
+        :options="options"
+        @change="change"
+        placeholder="请选择标签推送，多个标签用,号分隔"
+        style="width: 100%"
+        :allowClear="true"
+    />
+</template>
+
+<script setup lang="ts">
+import templateApi from '@/api/notice/template';
+
+type Emits = {
+    (e: 'update:toTag', data: string): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    type: { type: String, default: '' },
+    configId: { type: String, default: '' },
+});
+
+const options = ref([]);
+const queryData = async () => {
+    const { result } = await templateApi.getTags(props.configId);
+    options.value = result.map((item: any) => ({
+        label: item.name,
+        value: item.id,
+    }));
+};
+queryData();
+
+const change = (e: any) => {
+    emit('update:toTag', e);
+};
+
+watch(
+    () => props.configId,
+    () => {
+        queryData();
+    },
+);
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/Detail/components/ToUser.vue

@@ -0,0 +1,46 @@
+<template>
+    <a-select
+        :options="options"
+        @change="change"
+        placeholder="请选择收信人"
+        style="width: 100%"
+        :allowClear="true"
+    />
+</template>
+
+<script setup lang="ts">
+import templateApi from '@/api/notice/template';
+
+type Emits = {
+    (e: 'update:toUser', data: string): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    type: { type: String, default: '' },
+    configId: { type: String, default: '' },
+});
+
+const options = ref([]);
+const queryData = async () => {
+    const { result } = await templateApi.getUser(props.type, props.configId);
+    options.value = result.map((item: any) => ({
+        label: item.name,
+        value: item.id,
+    }));
+};
+queryData();
+
+const change = (e: any) => {
+    emit('update:toUser', e);
+};
+
+watch(
+    () => props.configId,
+    () => {
+        queryData();
+    },
+);
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/Detail/components/VariableDefinitions.vue

@@ -0,0 +1,136 @@
+<!-- 模板内容-变量列表 -->
+<template>
+    <div class="table-wrapper">
+        <a-table
+            :columns="columns"
+            :data-source="dataSource"
+            bordered
+            :pagination="false"
+        >
+            <template #bodyCell="{ column, text, record }">
+                <span v-if="column.dataIndex === 'id'">
+                    {{ record[column.dataIndex] }}
+                </span>
+                <a-input
+                    v-if="column.dataIndex === 'name'"
+                    v-model:value="record.name"
+                />
+                <a-select
+                    v-if="column.dataIndex === 'type'"
+                    v-model:value="record.type"
+                    @change="handleTypeChange(record)"
+                >
+                    <a-select-option value="string">字符串</a-select-option>
+                    <a-select-option value="date">时间</a-select-option>
+                    <a-select-option value="double">数字</a-select-option>
+                </a-select>
+                <template v-if="column.dataIndex === 'format'">
+                    <span v-if="record.type === 'string'">
+                        {{ record.format }}
+                    </span>
+                    <a-select
+                        v-if="record.type === 'date'"
+                        v-model:value="record.format"
+                    >
+                        <a-select-option value="timestamp">
+                            timestamp
+                        </a-select-option>
+                        <a-select-option value="yyyy-MM-dd">
+                            yyyy-MM-dd
+                        </a-select-option>
+                        <a-select-option value="yyyy-MM-dd HH:mm:ss">
+                            yyyy-MM-dd HH:mm:ss
+                        </a-select-option>
+                    </a-select>
+                    <a-input
+                        v-if="record.type === 'double'"
+                        v-model:value="record.format"
+                    >
+                        <template #suffix>
+                            <a-tooltip
+                                title="格式为：%.xf x代表数字保留的小数位数。当x=0时,代表格式为整数"
+                            >
+                                <AIcon type="QuestionCircleOutlined" />
+                            </a-tooltip>
+                        </template>
+                    </a-input>
+                </template>
+            </template>
+        </a-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+interface IVariable {
+    id: string;
+    name: string;
+    type: string;
+    format: string;
+}
+
+type Emits = {
+    (e: 'update:variableDefinitions', data: IVariable[]): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    variableDefinitions: {
+        type: Array as PropType<IVariable[]>,
+        default: () => [],
+    },
+});
+
+const columns = [
+    {
+        title: '变量',
+        dataIndex: 'id',
+        width: 80,
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        // width: 160,
+    },
+    {
+        title: '类型',
+        dataIndex: 'type',
+        // width: 160,
+    },
+    {
+        title: '格式',
+        dataIndex: 'format',
+        width: 150,
+    },
+];
+
+const dataSource = computed({
+    get: () => props.variableDefinitions,
+    set: (val) => emit('update:variableDefinitions', val),
+});
+
+watch(
+    () => dataSource.value,
+    (val) => {
+        emit('update:variableDefinitions', val);
+    },
+    { deep: true },
+);
+
+const handleTypeChange = (record: IVariable) => {
+    switch (record.type) {
+        case 'string':
+            record.format = '%s';
+            break;
+        case 'date':
+            record.format = 'timestamp';
+            break;
+        case 'double':
+            record.format = '%.0f';
+            break;
+    }
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/Detail/index.vue

@@ -39,6 +39,7 @@
                             <RadioCard
                                 :options="msgType"
                                 v-model="formData.provider"
+                                @change="getConfigList"
                             />
                         </a-form-item>
                         <a-form-item
@@ -49,13 +50,14 @@
                             <a-select
                                 v-model:value="formData.configId"
                                 placeholder="请选择绑定配置"
+                                @change="handleConfigChange"
                             >
                                 <a-select-option
-                                    v-for="(item, index) in ROBOT_MSG_TYPE"
+                                    v-for="(item, index) in configList"
                                     :key="index"
-                                    :value="item.value"
+                                    :value="item.id"
                                 >
-                                    {{ item.label }}
+                                    {{ item.name }}
                                 </a-select-option>
                             </a-select>
                         </a-form-item>
@@ -120,8 +122,7 @@
                                     >
                                         <!-- <a-input
                                             v-model:value="
-                                                formData.template.markdown
+                                                formData.template.markdown?.title
-                                                    ?.title
                                             "
                                             placeholder="请输入标题"
                                         /> -->
@@ -179,58 +180,33 @@
                             <a-row :gutter="10">
                                 <a-col :span="12">
                                     <a-form-item label="收信人">
-                                        <a-select
+                                        <ToUser
-                                            v-model:value="
+                                            v-model:to-user="
                                                 formData.template.toUser
                                             "
-                                            placeholder="请选择收信人"
+                                            :type="formData.type"
-                                        >
+                                            :config-id="formData.configId"
-                                            <a-select-option
+                                        />
-                                                v-for="(
-                                                    item, index
-                                                ) in ROBOT_MSG_TYPE"
-                                                :key="index"
-                                                :value="item.value"
-                                            >
-                                                {{ item.label }}
-                                            </a-select-option>
-                                        </a-select>
                                     </a-form-item>
                                 </a-col>
                                 <a-col :span="12">
                                     <a-form-item label="收信部门">
-                                        <a-select
+                                        <ToOrg
-                                            v-model:value="
+                                            v-model:to-user="
                                                 formData.template.toParty
                                             "
-                                            placeholder="请选择收信部门"
+                                            :type="formData.type"
-                                        >
+                                            :config-id="formData.configId"
-                                            <a-select-option
+                                        />
-                                                v-for="(
-                                                    item, index
-                                                ) in ROBOT_MSG_TYPE"
-                                                :key="index"
-                                                :value="item.value"
-                                            >
-                                                {{ item.label }}
-                                            </a-select-option>
-                                        </a-select>
                                     </a-form-item>
                                 </a-col>
                             </a-row>
                             <a-form-item label="标签推送">
-                                <a-select
+                                <ToTag
-                                    v-model:value="formData.template.toTag"
+                                    v-model:to-user="formData.template.toTag"
-                                    placeholder="请选择标签推送"
+                                    :type="formData.type"
-                                >
+                                    :config-id="formData.configId"
-                                    <a-select-option
+                                />
-                                        v-for="(item, index) in ROBOT_MSG_TYPE"
-                                        :key="index"
-                                        :value="item.value"
-                                    >
-                                        {{ item.label }}
-                                    </a-select-option>
-                                </a-select>
                             </a-form-item>
                         </template>
                         <!-- 邮件 -->
@@ -246,17 +222,11 @@
                             </a-form-item>
                             <a-form-item label="收件人">
                                 <a-select
+                                    mode="tags"
+                                    :options="[]"
                                     v-model:value="formData.template.sendTo"
                                     placeholder="请选择收件人"
-                                >
+                                />
-                                    <a-select-option
-                                        v-for="(item, index) in ROBOT_MSG_TYPE"
-                                        :key="index"
-                                        :value="item.value"
-                                    >
-                                        {{ item.label }}
-                                    </a-select-option>
-                                </a-select>
                             </a-form-item>
                             <a-form-item label="附件信息">
                                 <Attachments
@@ -331,11 +301,11 @@
                                 />
                             </a-form-item>
                             <a-form-item
-                                label="模板内容"
+                                label="模版内容"
                                 v-if="formData.template.templateType === 'tts'"
                             >
                                 <a-textarea
-                                    v-model:value="formData.template.ttsCode"
+                                    v-model:value="formData.template.message"
                                     show-count
                                     :rows="5"
                                     placeholder="内容中的变量将用于阿里云语音验证码"
@@ -359,11 +329,11 @@
                                             <a-select-option
                                                 v-for="(
                                                     item, index
-                                                ) in ROBOT_MSG_TYPE"
+                                                ) in templateList"
                                                 :key="index"
-                                                :value="item.value"
+                                                :value="item.templateCode"
                                             >
-                                                {{ item.label }}
+                                                {{ item.templateName }}
                                             </a-select-option>
                                         </a-select>
                                     </a-form-item>
@@ -383,10 +353,18 @@
                                 label="签名"
                                 v-bind="validateInfos['template.signName']"
                             >
-                                <a-input
+                                <a-select
                                     v-model:value="formData.template.signName"
-                                    placeholder="请输入签名"
+                                    placeholder="请选择签名"
-                                />
+                                >
+                                    <a-select-option
+                                        v-for="(item, index) in signsList"
+                                        :key="index"
+                                        :value="item.signName"
+                                    >
+                                        {{ item.signName }}
+                                    </a-select-option>
+                                </a-select>
                             </a-form-item>
                         </template>
                         <!-- webhook -->
@@ -418,6 +396,35 @@
                                 </div>
                             </a-form-item>
                         </template>
+                        <a-form-item
+                            label="模版内容"
+                            v-if="
+                                formData.type !== 'sms' &&
+                                formData.type !== 'webhook' &&
+                                formData.type !== 'voice'
+                            "
+                        >
+                            <a-textarea
+                                v-model:value="formData.template.message"
+                                :maxlength="200"
+                                :rows="5"
+                                placeholder="变量格式:${name};
+    示例:尊敬的${name},${time}有设备触发告警,请注意处理"
+                            />
+                        </a-form-item>
+                        <a-form-item
+                            label="变量列表"
+                            v-if="
+                                formData.variableDefinitions &&
+                                formData.variableDefinitions.length
+                            "
+                        >
+                            <VariableDefinitions
+                                v-model:variableDefinitions="
+                                    formData.variableDefinitions
+                                "
+                            />
+                        </a-form-item>
                         <a-form-item label="说明">
                             <a-textarea
                                 v-model:value="formData.description"
@@ -451,7 +458,7 @@
 import { getImage } from '@/utils/comm';
 import { Form } from 'ant-design-vue';
 import { message } from 'ant-design-vue';
-import { TemplateFormData } from '../types';
+import { IVariableDefinitions, TemplateFormData } from '../types';
 import {
     NOTICE_METHOD,
     TEMPLATE_FIELD_MAP,
@@ -462,7 +469,11 @@ import {
 import templateApi from '@/api/notice/template';
 import Doc from './doc/index';
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
-import Attachments from './components/Attachments.vue'
+import Attachments from './components/Attachments.vue';
+import VariableDefinitions from './components/VariableDefinitions.vue';
+import ToUser from './components/ToUser.vue';
+import ToOrg from './components/ToOrg.vue';
+import ToTag from './components/ToTag.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -500,12 +511,14 @@ watch(
         msgType.value = MSG_TYPE[val];
 
         formData.value.provider = msgType.value[0].value;
-        console.log('formData.value.template: ', formData.value.template);
+        // console.log('formData.value.template: ', formData.value.template);
+
+        getConfigList();
     },
 );
 
 computed(() => {
-    console.log('formData.value.type: ', formData.value.type);
+    // console.log('formData.value.type: ', formData.value.type);
     Object.assign(
         formData.value.template,
         TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
@@ -547,11 +560,42 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
 watch(
     () => formData.value.type,
     () => {
+        formData.value.variableDefinitions = [];
         clearValidate();
     },
     { deep: true },
 );
 
+watch(
+    () => formData.value.template.message,
+    (val) => {
+        if (!val) return;
+        // 已经存在的变量
+        const oldKey = formData.value.variableDefinitions?.map((m) => m.id);
+        // 正则提取${}里面的值
+        const pattern = /(?<=\$\{).*?(?=\})/g;
+        const titleList = val.match(pattern)?.filter((f) => f);
+        const newKey = [...new Set(titleList)];
+        const result = newKey?.map((m) =>
+            oldKey.includes(m)
+                ? formData.value.variableDefinitions.find(
+                      (item) => item.id === m,
+                  )
+                : {
+                      id: m,
+                      name: '',
+                      type: 'string',
+                      format: '%s',
+                  },
+        );
+        formData.value.variableDefinitions = result as IVariableDefinitions[];
+    },
+    { deep: true },
+);
+
+/**
+ * 获取详情
+ */
 const getDetail = async () => {
     const res = await templateApi.detail(route.params.id as string);
     // console.log('res: ', res);
@@ -560,6 +604,50 @@ const getDetail = async () => {
 };
 // getDetail();
 
+/**
+ * 获取绑定配置
+ */
+const configList = ref();
+const getConfigList = async () => {
+    const terms = [
+        { column: 'type$IN', value: formData.value.type },
+        { column: 'provider', value: formData.value.provider },
+    ];
+    const { result } = await templateApi.getConfig({ terms });
+    configList.value = result;
+};
+getConfigList();
+
+/**
+ * 配置选择改变
+ */
+const handleConfigChange = () => {
+    getTemplateList();
+    getSignsList();
+};
+
+/**
+ * 获取阿里模板
+ */
+const templateList = ref();
+const getTemplateList = async () => {
+    const { result } = await templateApi.getAliTemplate(
+        formData.value.configId,
+    );
+    templateList.value = result;
+};
+getTemplateList();
+
+/**
+ * 获取签名
+ */
+const signsList = ref();
+const getSignsList = async () => {
+    const { result } = await templateApi.getSigns(formData.value.configId);
+    signsList.value = result;
+};
+getSignsList();
+
 /**
  * 表单提交
  */
@@ -567,25 +655,37 @@ const btnLoading = ref<boolean>(false);
 const handleSubmit = () => {
     validate()
         .then(async () => {
-            console.log('formData.value: ', formData.value);
+            // console.log('formData.value: ', formData.value);
+            formData.value.template.ttsCode =
+                formData.value.template.templateCode;
             btnLoading.value = true;
-            // let res;
+            let res;
-            // if (!formData.value.id) {
+            if (!formData.value.id) {
-            //     res = await templateApi.save(formData.value);
+                res = await templateApi.save(formData.value);
-            // } else {
+            } else {
-            //     res = await templateApi.update(formData.value);
+                res = await templateApi.update(formData.value);
-            // }
+            }
-            // // console.log('res: ', res);
+            // console.log('res: ', res);
-            // if (res?.success) {
+            if (res?.success) {
-            //     message.success('保存成功');
+                message.success('保存成功');
-            //     router.back();
+                router.back();
-            // }
+            }
-            btnLoading.value = false;
         })
         .catch((err) => {
             console.log('err: ', err);
+            btnLoading.value = false;
         });
 };
+
+// test
+watch(
+    () => formData.value,
+    (val) => {
+        console.log('formData.value: ', val);
+    },
+    { deep: true },
+);
+// test
 </script>
 
 <style lang="less" scoped>

src/views/notice/Template/types.d.ts

@@ -7,13 +7,25 @@ export interface IHeaders {
 interface IAttachments {
     location: string;
     name: string;
-    id?: number;
+    id?: string;
 }
 interface IVariableDefinitions {
     id: string;
     name: string;
     type: string;
     format: string;
+    value?: string;
+}
+
+interface IMarkDown {
+    text: string;
+    title: string;
+}
+interface ILink {
+    title: string;
+    picUrl: string;
+    messageUrl: string;
+    text: string;
 }
 
 export type TemplateFormData = {
@@ -23,16 +35,8 @@ export type TemplateFormData = {
         message?: string;
         // 钉钉机器人
         messageType?: string;
-        markdown?: {
+        markdown?: IMarkDown;
-            text: string;
+        link?: ILink;
-            title: string;
-        };
-        link?: {
-            title: string;
-            picUrl: string;
-            messageUrl: string;
-            text: string;
-        };
         // 微信
         // agentId?: string;
         // message?: string;
@@ -71,4 +75,24 @@ export type TemplateFormData = {
     creatorId?: string;
     createTime?: number;
     configId?: string;
-};
+};
+
+// 绑定配置类型
+export type config = {
+    host: string;
+    password: string;
+    port: number;
+    sender: string;
+    ssl: boolean;
+    username: string;
+}
+export type BindConfig = {
+    configuration: config;
+    createTime: number
+    creatorId: string;
+    id: string;
+    maxRetryTimes: number;
+    name: string;
+    provider: string;
+    type: string
+}

src/views/system/Permission/components/EditDialog.vue

@@ -0,0 +1,321 @@
+<template>
+    <a-modal
+        v-model:visible="dialog.visible"
+        :title="dialog.title"
+        width="1000px"
+        @ok="dialog.handleOk"
+        class="edit-dialog-container"
+    >
+        <a-form ref="formRef" :model="form.data" layout="vertical">
+            <a-form-item
+                name="id"
+                :rules="[
+                    { required: true, message: '请输入标识(ID)' },
+                    { validator: form.rules.idCheck, trigger: 'blur' },
+                ]"
+                class="question-item"
+            >
+                <template #label>
+                    <span>标识</span>
+                    <span class="required-icon">*</span>
+                    <a-tooltip placement="top">
+                        <template #title>
+                            <span>标识ID需与代码中的标识ID一致</span>
+                        </template>
+                        <question-circle-outlined style="color: #00000073" />
+                    </a-tooltip>
+                </template>
+                <a-input
+                    v-model:value="form.data.id"
+                    placeholder="请输入标识(ID)"
+                    :maxlength="64"
+                    :disabled="dialog.title === '编辑'"
+                />
+            </a-form-item>
+            <a-form-item
+                name="name"
+                label="名称"
+                :rules="[{ required: true, message: '请输入名称' }]"
+            >
+                <a-input
+                    v-model:value="form.data.name"
+                    placeholder="请输入名称"
+                    :maxlength="64"
+                />
+            </a-form-item>
+        </a-form>
+
+        <a-table
+            :columns="table.columns"
+            :data-source="actionTableData"
+            :pagination="false"
+        >
+            <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key === 'index'">
+                    {{
+                        `#${
+                            (pager.current - 1) * pager.pageSize + (index + 1)
+                        }.`
+                    }}
+                </template>
+                <template
+                    v-else-if="column.key !== 'index' && column.key !== 'act'"
+                >
+                    <a-input v-model:value="record[column.key]" />
+                </template>
+                <template v-else-if="column.key === 'act'">
+                    <a-button
+                        class="delete-btn"
+                        style="padding: 0"
+                        type="link"
+                        @click="table.clickRemove(index)"
+                    >
+                        <delete-outlined />
+                    </a-button>
+                </template>
+            </template>
+        </a-table>
+        <div class="pager" v-show="pager.total > pager.pageSize">
+            <a-select v-model:value="pager.current" style="width: 60px">
+                <a-select-option v-for="(val, i) in pageArr" :value="i + 1">{{
+                    i + 1
+                }}</a-select-option>
+            </a-select>
+            <a-pagination
+                v-model:current="pager.current"
+                :page-size="pager.pageSize"
+                :total="pager.total"
+            />
+        </div>
+
+        <a-button type="dashed" style="width: 100%" @click="table.clickAdd">
+            <plus-outlined /> 添加
+        </a-button>
+
+        <template #footer>
+            <a-button key="back" @click="dialog.visible = false">取消</a-button>
+            <a-button
+                key="submit"
+                type="primary"
+                :loading="form.loading"
+                @click="dialog.handleOk"
+                >确定</a-button
+            >
+        </template>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { FormInstance, message } from 'ant-design-vue';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { Rule } from 'ant-design-vue/es/form';
+
+import {
+    checkId_api,
+    editPermission_api,
+    addPermission_api,
+} from '@/api/system/permission';
+
+const defaultAction = [
+    { action: 'query', name: '查询', describe: '查询' },
+    { action: 'save', name: '保存', describe: '保存' },
+    { action: 'delete', name: '删除', describe: '删除' },
+];
+const emits = defineEmits(['refresh']);
+// 弹窗相关
+const dialog = reactive({
+    title: '',
+    visible: false,
+    handleOk: () => {
+        formRef.value?.validate().then(() => {
+            form.submit();
+        });
+    },
+    // 控制弹窗的打开与关闭
+    changeVisible: (status: boolean, defaultForm: any = {}) => {
+        dialog.title = defaultForm.id ? '编辑' : '新增';
+        form.data = { name: '', ...defaultForm };
+        table.data = defaultForm.id ? defaultForm.actions : [...defaultAction];
+        pager.total = table.data.length;
+        pager.current = 1;
+        dialog.visible = status;
+        nextTick(() => {
+            formRef.value?.clearValidate();
+        });
+    },
+});
+// 表单相关
+const formRef = ref<FormInstance>();
+const form = reactive({
+    loading: false,
+    data: {
+        name: '',
+        id: '',
+    },
+    rules: {
+        // 校验标识是否可用
+        idCheck: (_rule: Rule, id: string, cb: Function) => {
+            if (!id) return cb('请输入标识(ID)');
+            if (dialog.title === '编辑') return cb();
+            checkId_api({ id })
+                .then((resp: any) => {
+                    if (resp.status === 200 && !resp.result.passed)
+                        cb(resp.result.reason);
+                    else cb();
+                })
+                .catch(() => cb('验证失败'));
+
+            // return new Promise((resolve) => {
+            //     checkId_api({ id })
+            //         .then((resp: any) => {
+            //             if (resp.status === 200 && !resp.result.passed)
+            //                 resolve(resp.result.reason);
+            //             else resolve('');
+            //         })
+            //         .catch(() => resolve('验证失败'));
+            // });
+        },
+    },
+    submit: () => {
+        const params = {
+            ...form.data,
+            actions: table.data.filter((item: any) => item.action && item.name),
+        };
+        const api =
+            dialog.title === '编辑' ? editPermission_api : addPermission_api;
+
+        api(params).then((resp) => {
+            if (resp.status === 200) {
+                message.error('操作成功');
+                emits('refresh');
+                dialog.visible = false;
+            }
+        });
+    },
+});
+
+const table = reactive({
+    columns: [
+        {
+            title: '-',
+            dataIndex: 'index',
+            key: 'index',
+            width:80,
+            align:'center'
+        },
+        {
+            title: '操作类型',
+            dataIndex: 'action',
+            key: 'action',
+            width: 220
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            width: 220
+        },
+        {
+            title: '说明',
+            dataIndex: 'describe',
+            key: 'describe',
+            width: 220
+        },
+        {
+            title: '操作',
+            dataIndex: 'act',
+            key: 'act',
+        },
+    ],
+    data: <any>[],
+    clickRemove: (index: number) => {
+        pager.total -= 1;
+        table.data.splice(index, 1);
+
+        // 当删除的刚好为本页的最后一项时，返回到上一页
+        if (pager.current > 1 && pager.total % pager.pageSize === 0)
+            pager.current -= 1;
+    },
+    clickAdd: () => {
+        table.data.push({});
+        pager.total += 1;
+
+        // 当添加的项需要新加一页才能显示时，跳转到最后一页
+        if (pager.total % pager.pageSize === 1) {
+            pager.current = Math.ceil(pager.total / pager.pageSize);
+        }
+    },
+});
+
+const pager = reactive({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+});
+const pageArr = computed(() => {
+    const maxPageNum = Math.ceil(pager.total / pager.pageSize);
+    return new Array(maxPageNum).fill(1);
+});
+const actionTableData = computed(() => {
+    const startIndex = (pager.current - 1) * pager.pageSize;
+    const endIndex = Math.min(
+        pager.current * pager.pageSize,
+        table.data.length,
+    );
+    console.log(startIndex, endIndex);
+
+    return table.data.slice(startIndex, endIndex);
+});
+
+// 将打开弹窗的操作暴露给父组件
+defineExpose({
+    openDialog: dialog.changeVisible,
+});
+</script>
+
+<style lang="less" scoped>
+.edit-dialog-container {
+    .question-item {
+        :deep(.ant-form-item-required) {
+            &::before {
+                display: none;
+            }
+            .required-icon {
+                display: inline-block;
+                margin-right: 4px;
+                margin-left: 2px;
+                color: #ff4d4f;
+                font-size: 14px;
+                font-family: SimSun, sans-serif;
+                line-height: 1;
+            }
+        }
+    }
+
+    .ant-table {
+        color: #ff4d4f;
+
+        .ant-table-tbody {
+            color: #ff4d4f;
+        }
+    }
+    .delete-btn {
+        color: #000000d9;
+        &:hover{
+            color: #415ed1;
+        }
+    }
+    .pager {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 12px;
+        .ant-pagination {
+            margin-left: 8px;
+            :deep(.ant-pagination-item) {
+                display: none;
+            }
+        }
+    }
+}
+</style>

src/views/system/Permission/components/StatusLabel.vue

@@ -0,0 +1,29 @@
+<template>
+    <span class="status-label-container">
+        <i
+            class="circle"
+            :style="{ background: props.statusValue ? '#52c41a' : '#ff4d4f' }"
+        ></i>
+        <span>{{ props.statusValue ? '启用' : '禁用' }}</span>
+    </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    statusValue: number;
+}>();
+</script>
+
+<style lang="less" scoped>
+.status-label-container {
+    display: flex;
+    align-items: center;
+    .circle {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+}
+</style>

src/views/system/Permission/index.vue

@@ -0,0 +1,298 @@
+<template>
+    <div class="permission-container">
+        <Search :columns="query.columns" @search="query.search" />
+
+        <JTable
+            ref="tableRef"
+            :columns="table.columns"
+            :request="getPermission_api"
+            model="TABLE"
+            :params="query.params"
+            :defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
+        >
+            <template #headerTitle>
+                <a-button
+                    type="primary"
+                    @click="table.openDialog(undefined)"
+                    style="margin-right: 10px"
+                    ><plus-outlined />新增</a-button
+                >
+                <a-dropdown trigger="hover">
+                    <a-button>批量操作</a-button>
+                    <template #overlay>
+                        <a-menu>
+                            <a-menu-item>
+                                <a-upload
+                                    name="file"
+                                    action="#"
+                                    accept=".json"
+                                    :showUploadList="false"
+                                    :before-upload="table.clickImport"
+                                >
+                                    <a-button>导入</a-button>
+                                </a-upload>
+                            </a-menu-item>
+                            <a-menu-item>
+                                <a-popconfirm
+                                    title="确认导出？"
+                                    ok-text="确定"
+                                    cancel-text="取消"
+                                    @confirm="table.clickExport"
+                                >
+                                    <a-button>导出</a-button>
+                                </a-popconfirm>
+                            </a-menu-item>
+                        </a-menu>
+                    </template>
+                </a-dropdown>
+            </template>
+            <template #status="slotProps">
+                <StatusLabel :status-value="slotProps.status" />
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip>
+                        <template #title>编辑</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.openDialog(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+
+                    <a-popconfirm
+                        :title="`确定要${
+                            slotProps.status ? '禁用' : '启用'
+                        }吗？`"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.changeStatus(slotProps)"
+                    >
+                        <a-tooltip>
+                            <template #title>{{
+                                slotProps.status ? '禁用' : '启用'
+                            }}</template>
+                            <a-button style="padding: 0" type="link">
+                                <stop-outlined v-if="slotProps.status" />
+                                <play-circle-outlined v-else />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+
+                    <a-popconfirm
+                        title="确认删除"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.clickDel(slotProps)"
+                        :disabled="slotProps.status"
+                    >
+                        <a-tooltip>
+                            <template #title>{{
+                                systemPermission('delete')
+                                    ? slotProps.status
+                                        ? '请先禁用，再删除'
+                                        : '删除'
+                                    : '暂无权限，请联系管理员'
+                            }}</template>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                :disabled="
+                                    !systemPermission('delete') ||
+                                    slotProps.status
+                                "
+                            >
+                                <delete-outlined />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+        </JTable>
+
+        <div class="dialogs">
+            <EditDialog ref="editDialogRef" @refresh="table.refresh" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import EditDialog from './components/EditDialog.vue';
+import StatusLabel from './components/StatusLabel.vue';
+import { message } from 'ant-design-vue';
+import {
+    EditOutlined,
+    DeleteOutlined,
+    PlusOutlined,
+    StopOutlined,
+    PlayCircleOutlined,
+} from '@ant-design/icons-vue';
+import {
+    getPermission_api,
+    editPermission_api,
+    delPermission_api,
+    exportPermission_api,
+} from '@/api/system/permission';
+import { downloadObject } from '@/utils/utils';
+import { usePermissionStore } from '@/store/permission';
+
+const editDialogRef = ref(); // 新增弹窗实例
+const tableRef = ref<Record<string, any>>({}); // 表格实例
+
+// 按钮权限控制
+const hasPermission = usePermissionStore().hasPermission;
+const systemPermission = (code: string) =>
+    hasPermission('system/Permission:${code}');
+// 筛选
+const query = reactive({
+    columns: [
+        {
+            title: '标识',
+            dataIndex: 'id',
+            key: 'id',
+            ellipsis: true,
+            fixed: 'left',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            ellipsis: true,
+            search: {
+                rename: 'status',
+                type: 'select',
+                options: [
+                    {
+                        label: '启用',
+                        value: 1,
+                    },
+                    {
+                        label: '禁用',
+                        value: 0,
+                    },
+                ],
+            },
+        },
+    ],
+    params: {},
+    search: (params: object) => {
+        query.params = params;
+    },
+});
+
+// 表格
+const table = reactive({
+    columns: [
+        {
+            title: '标识',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            scopedSlots: true,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    // 打开编辑弹窗
+    openDialog: (row: object | undefined = {}) => {
+        let permissionCode = '';
+        if (Object.keys(row).length < 1) permissionCode = 'add';
+        else permissionCode = 'update';
+        if (systemPermission(permissionCode))
+            editDialogRef.value.openDialog(true, row);
+        else message.warn('暂无权限，请联系管理员');
+    },
+    // 导入数据
+    clickImport: (file: File) => {
+        if (file.type === 'application/json') {
+            const reader = new FileReader();
+            reader.readAsText(file);
+            reader.onload = (result: any) => {
+                try {
+                    const data = JSON.parse(result.target.result);
+                    editPermission_api(data).then((resp) => {
+                        if (resp.status === 200) {
+                            message.success('导入成功');
+                            table.refresh();
+                        }
+                    });
+                } catch (error) {
+                    message.error('导入失败，请重试！');
+                }
+            };
+        } else message.error('请上传json格式');
+        return false;
+    },
+    // 导出数据
+    clickExport: () => {
+        const params = {
+            paging: false,
+            ...query.params,
+        };
+        exportPermission_api(params).then((resp) => {
+            if (resp.status === 200) {
+                downloadObject(resp.result as any, '权限数据');
+                message.success('导出成功');
+            } else {
+                message.error('导出错误');
+            }
+        });
+    },
+    // 修改状态
+    changeStatus: (row: any) => {
+        if (!systemPermission('action'))
+            return message.warn('暂无权限，请联系管理员');
+        const params = {
+            ...row,
+            status: row.status ? 0 : 1,
+        };
+        editPermission_api(params).then(() => {
+            message.success('操作成功');
+            tableRef.value.reload();
+        });
+    },
+    // 删除
+    clickDel: (row: any) => {
+        delPermission_api(row.id).then((resp: any) => {
+            if (resp.status === 200) {
+                tableRef.value?.reload();
+                message.success('操作成功!');
+            }
+        });
+    },
+    // 刷新列表
+    refresh: () => {
+        tableRef.value.reload();
+    },
+});
+</script>
+
+<style lang="less" scoped></style>

src/views/system/Role/Detail/index.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="details-container">
-        {{ route.params.id }}
         <a-tabs v-model:activeKey="activeKey">
             <a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane>
             <a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane>

src/views/system/Role/components/AddDialog.vue

@@ -44,10 +44,7 @@
 <script setup lang="ts">
 import { FormInstance, message } from 'ant-design-vue';
 import { saveRole_api } from '@/api/system/role';
-const router = useRouter()
+const router = useRouter();
-const props = defineProps({
-    open: Number,
-});
 // 弹窗相关
 const dialog = reactive({
     visible: false,
@@ -59,10 +56,15 @@ const dialog = reactive({
                 if (resp.status === 200) {
                     message.success('操作成功');
                     dialog.visible = false;
-                    router.push(`/system/Role/detail/${resp.result.id}`)
+                    router.push(`/system/Role/detail/${resp.result.id}`);
                 }
             });
     },
+    // 控制弹窗的打开与关闭
+    changeVisible: (status: boolean, defaultForm: object={}) => {
+        dialog.visible = status;
+        form.data = { name: '', description: '', ...defaultForm };
+    },
 });
 // 表单相关
 const formRef = ref<FormInstance>();
@@ -74,18 +76,12 @@ const form = reactive({
     },
 });
 
-watch(
+
-    () => props.open,
+
-    () => {
+// 将打开弹窗的操作暴露给父组件
-        // 重置表单
+defineExpose({
-        form.data = {
+    openDialog: dialog.changeVisible
-            name: '',
+})
-            description: '',
-        };
-        formRef.value?.resetFields();
-        dialog.visible = true;
-    },
-);
 </script>
 
 <style scoped></style>

src/views/system/Role/index.vue

@@ -45,7 +45,7 @@
         </JTable>
 
         <div class="dialogs">
-            <AddDialog :open="dialog.openAdd" />
+            <AddDialog ref="addDialogRef" />
         </div>
     </a-card>
 </template>
@@ -59,8 +59,8 @@ import {
 import AddDialog from './components/AddDialog.vue';
 import { getRoleList_api, delRole_api } from '@/api/system/role';
 import { message } from 'ant-design-vue';
-
+const addDialogRef = ref(); // 新增弹窗实例
-const router = useRouter()
+const router = useRouter();
 // 筛选
 const query = reactive({
     columns: [
@@ -122,24 +122,21 @@ const table = reactive({
     ],
     tableData: [],
     clickAdd: () => {
-        dialog.openAdd += 1;
+        addDialogRef.value.openDialog(true, {})
     },
     clickDel: (row: any) => {
-        delRole_api(row.id).then((resp:any)=>{
+        delRole_api(row.id).then((resp: any) => {
-            if(resp.status === 200){
+            if (resp.status === 200) {
-                tableRef.value?.reload()
+                tableRef.value?.reload();
-                message.success('操作成功!')
+                message.success('操作成功!');
             }
-        })
+        });
     },
     clickEdit: (row: any) => {
-        router.push(`/system/Role/detail/${row.id}`)
+        router.push(`/system/Role/detail/${row.id}`);
     },
 });
-// 弹窗相关
+
-const dialog = reactive({
-    openAdd: 0,
-});
 </script>
 
 <style lang="less" scoped></style>

src/views/user/Login/index.vue

@@ -83,19 +83,20 @@
                                         ]"
                                     >
                                         <a-input
-                                            class="login-code-input"
                                             v-model:value="form.verifyCode"
                                             autocomplete="off"
                                             :maxlength="64"
                                             placeholder="请输入验证码"
-                                        ></a-input>
+                                        >
-                                        <div class="login-code">
+                                            <template #addonAfter>
-                                            <img
+                                                <div>
-                                                :src="codeUrl"
+                                                    <img
-                                                @click="getCode()"
+                                                        :src="codeUrl"
-                                                class="login-code-img"
+                                                        @click="getCode()"
-                                            />
+                                                    />
-                                        </div>
+                                                </div>
+                                            </template>
+                                        </a-input>
                                     </a-form-item>
                                     <a-form-item
                                         name="remember"
@@ -103,7 +104,14 @@
                                     >
                                         <a-checkbox
                                             v-model:checked="form.remember"
-                                            >记住密码</a-checkbox
+                                            @change="
+                                                () =>
+                                                    (form.expires =
+                                                        form.remember
+                                                            ? -1
+                                                            : 3600000)
+                                            "
+                                            >记住我</a-checkbox
                                         >
                                     </a-form-item>
                                     <a-form-item>
@@ -180,7 +188,6 @@ import {
     bindInfo,
     settingDetail,
 } from '@/api/login';
-import Cookies from 'js-cookie';
 import { useUserInfo } from '@/store/userInfo';
 import { LocalStore } from '@/utils/comm';
 import { BASE_API_PATH, TOKEN_KEY, Version_Code } from '@/utils/variable';
@@ -220,34 +227,24 @@ iconMap.set('dingtalk-ent-app', getImage('/bind/dingtalk.png'));
 iconMap.set('wechat-webapp', getImage('/bind/wechat-webapp.png'));
 
 const onFinish = async () => {
-    form.remember
-        ? Cookies.set('user', encodeURIComponent(JSON.stringify(form)), {
-              expires: 7,
-          })
-        : Cookies.remove('user');
-    Cookies.set('username', form.username, { expires: 30 });
     try {
         loading.value = true;
         const res: any = await authLogin(form);
+        loading.value = false;
         if (res.success) {
             store.$patch({
                 ...res.result,
                 username: form.username,
             });
             LocalStore.set(TOKEN_KEY, res?.result.token);
-            // if (res.result.username === 'admin') {
+            if (res.result.username === 'admin') {
-            //     const resp: any = await getInitSet();
+                const resp: any = await getInitSet();
-            //     if (resp.status === 200 && !resp.result.length) {
+                if (resp.status === 200 && !resp.result.length) {
-            //         window.location.href = '/#/init-home';
+                    window.location.href = '/#/init-home';
-            //         return;
+                    return;
-            //     }
+                }
-            // }
-            // window.location.href = '/';
-
-            const resp: any = await getInitSet();
-            if (resp.success) {
-                router.push('/demo');
             }
+            window.location.href = '/';
         }
     } catch (error) {
         form.verifyCode = '';
@@ -269,14 +266,6 @@ const getCode = async () => {
     }
 };
 
-const getCookie = () => {
-    // form.username = Cookies.get('username');
-    if (!Cookies.get('user')) return;
-    const user = JSON.parse(decodeURIComponent(Cookies.get('user')));
-    form.username = user.username;
-    form.password = user.password;
-    form.remember = user.remember || false;
-};
 
 const getOpen = () => {
     LocalStore.removeAll();
@@ -292,7 +281,7 @@ const getOpen = () => {
             }
         }
     });
-    settingDetail('front').then((res) => {
+    settingDetail('front').then((res: any) => {
         if (res.status === 200) {
             const ico: any = document.querySelector('link[rel="icon"]');
             ico.href = res.result.ico;
@@ -337,7 +326,6 @@ watch(
 
 getOpen();
 getCode();
-getCookie();
 screenRotation(screenWidth.value, screenHeight.value);
 </script>
 
@@ -470,23 +458,9 @@ screenRotation(screenWidth.value, screenHeight.value);
                     }
 
                     .verifyCode {
-                        .login-code-input {
+                        img {
-                            width: 70%;
+                            cursor: pointer;
-                            float: left;
+                            // vertical-align: middle;
-                        }
-                        .login-code {
-                            width: 30%;
-                            height: 32px;
-                            float: left;
-                            background-color: #e4e6e7;
-                            img {
-                                cursor: pointer;
-                                vertical-align: middle;
-                            }
-                            .login-code-img {
-                                width: 100%;
-                                height: 100%;
-                            }
                         }
                     }
                 }