diff --git a/src/api/device/category.ts b/src/api/device/category.ts
new file mode 100644
index 00000000..d18e3587
--- /dev/null
+++ b/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}`)
\ No newline at end of file
diff --git a/src/api/home.js b/src/api/home.js
deleted file mode 100644
index ea3aa339..00000000
--- a/src/api/home.js
+++ /dev/null
@@ -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);
diff --git a/src/api/home.ts b/src/api/home.ts
new file mode 100644
index 00000000..2164e2f5
--- /dev/null
+++ b/src/api/home.ts
@@ -0,0 +1,15 @@
+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);
diff --git a/src/api/system/permission.ts b/src/api/system/permission.ts
new file mode 100644
index 00000000..978e4b26
--- /dev/null
+++ b/src/api/system/permission.ts
@@ -0,0 +1,6 @@
+import server from '@/utils/request';
+
+// 获取权限列表
+export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
+// 修改权限信息
+export const editPermission_api = (data:object) => server.patch(`/permission`,data);
\ No newline at end of file
diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index 7d51d1ba..95f18f67 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -27,6 +27,7 @@ const iconKeys = [
     'SyncOutlined',
     'ExclamationCircleOutlined',
     'UploadOutlined',
+    'PlusCircleOutlined',
     'MenuUnfoldOutlined',
     'MenuFoldOutlined',
     'QuestionCircleOutlined'
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 27d4f961..78683b84 100644
--- a/src/router/menu.ts
+++ b/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,13 @@ 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: '/northbound/DuerOS',
@@ -128,4 +136,10 @@ export default [
         path: '/northbound/AliCloud',
         component: () => import('@/views/northbound/AliCloud/index.vue')
     },
+
+    // 产品分类 
+    {
+      path: '/iot/device/Category',
+        component: () => import('@/views/device/Category/index.vue')
+    }
 ]
\ No newline at end of file
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 3e5df69b..30e21216 100644
--- a/src/utils/utils.ts
+++ b/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,6 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
   document.body.appendChild(formElement);
   formElement.submit();
   document.body.removeChild(formElement);
-};
\ No newline at end of file
+};
+// 是否不是community版本
+export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
\ No newline at end of file
diff --git a/src/views/device/Category/components/modifyModal/index.vue b/src/views/device/Category/components/modifyModal/index.vue
new file mode 100644
index 00000000..ea420fa9
--- /dev/null
+++ b/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>
diff --git a/src/views/device/Category/index.vue b/src/views/device/Category/index.vue
new file mode 100644
index 00000000..f97ba614
--- /dev/null
+++ b/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>
diff --git a/src/views/device/Category/typings.d.ts b/src/views/device/Category/typings.d.ts
new file mode 100644
index 00000000..36656078
--- /dev/null
+++ b/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[];
+};
diff --git a/src/views/home/components/InitHome/index.vue b/src/views/home/components/InitHome/index.vue
index 57be6d23..888aae8a 100644
--- a/src/views/home/components/InitHome/index.vue
+++ b/src/views/home/components/InitHome/index.vue
@@ -7,37 +7,47 @@
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '1' }"
-                    @click="selectId = '1'"
+                    :class="{ selected: selectValue === 'device' }"
+                    @click="selectValue = 'device'"
                 >
                     <img src="/images/home/device.png" alt="" />
                 </a-col>
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '2' }"
-                    @click="selectId = '2'"
+                    :class="{ selected: selectValue === 'ops' }"
+                    @click="selectValue = 'ops'"
                 >
                     <img src="/images/home/ops.png" alt="" />
                 </a-col>
                 <a-col
                     :span="8"
                     class="select-item"
-                    :class="{ selected: selectId === '3' }"
-                    @click="selectId = '3'"
+                    :class="{ selected: selectValue === 'comprehensive' }"
+                    @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>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 7129a745..1327a1eb 100644
--- a/src/views/home/index.vue
+++ b/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">
-            <!-- <InitHome /> -->
-            <!-- <DeviceHome /> -->
-            <!-- <DevOpsHome /> -->
-            <ComprehensiveHome />
+        <div class="content iot-home-container" v-loading="loading">
+            <InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
+            <DeviceHome v-else-if="currentView === 'device'" />
+            <DevOpsHome v-else-if="currentView === 'ops'" />
+            <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>
diff --git a/src/views/init-home/index.vue b/src/views/init-home/index.vue
index e0dc84b5..20585ac9 100644
--- a/src/views/init-home/index.vue
+++ b/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) });
 /**
  * 角色勾选数据
diff --git a/src/views/iot-card/Dashboard/index.vue b/src/views/iot-card/Dashboard/index.vue
new file mode 100644
index 00000000..93bc1cfa
--- /dev/null
+++ b/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>
diff --git a/src/views/iot-card/components/LineChart.vue b/src/views/iot-card/components/LineChart.vue
new file mode 100644
index 00000000..9d22543b
--- /dev/null
+++ b/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>
diff --git a/src/views/system/Permission/components/EditDialog.vue b/src/views/system/Permission/components/EditDialog.vue
new file mode 100644
index 00000000..d78ac2bb
--- /dev/null
+++ b/src/views/system/Permission/components/EditDialog.vue
@@ -0,0 +1,234 @@
+<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: '请输入标识' }]"
+                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
+                        style="padding: 0"
+                        type="link"
+                        @click="table.clickRemove(index)"
+                    >
+                        <delete-outlined />
+                    </a-button>
+                </template>
+            </template>
+        </a-table>
+        <div class="pager">
+            <a-pagination
+                v-model:current="pager.current"
+                :page-size="pager.pageSize"
+                :total="pager.total"
+            />
+            <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>
+        </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';
+
+const defaultAction = [
+    { action: 'query', name: '查询', describe: '查询' },
+    { action: 'save', name: '保存', describe: '保存' },
+    { action: 'delete', name: '删除', describe: '删除' },
+];
+// 弹窗相关
+const dialog = reactive({
+    title: '',
+    visible: false,
+    handleOk: () => {
+        formRef.value?.validate().then(() => console.log('success'));
+    },
+    // 控制弹窗的打开与关闭
+    changeVisible: (status: boolean, defaultForm: any = {}) => {
+        form.data = { name: '', description: '', ...defaultForm };
+        dialog.title = defaultForm.id ? '编辑' : '新增';
+        table.data = defaultForm.id ? defaultForm.actions : [...defaultAction];
+        pager.total = table.data.length;
+        pager.current = 1;
+        dialog.visible = status;
+    },
+});
+// 表单相关
+const formRef = ref<FormInstance>();
+const form = reactive({
+    loading: false,
+    data: {
+        name: '',
+        id: '',
+    },
+});
+
+const table = reactive({
+    columns: [
+        {
+            title: '-',
+            dataIndex: 'index',
+            key: 'index',
+        },
+        {
+            title: '操作类型',
+            dataIndex: 'action',
+            key: 'action',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '说明',
+            dataIndex: 'describe',
+            key: 'describe',
+        },
+        {
+            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;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Permission/components/StatusLabel.vue b/src/views/system/Permission/components/StatusLabel.vue
new file mode 100644
index 00000000..7641fea2
--- /dev/null
+++ b/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>
diff --git a/src/views/system/Permission/index.vue b/src/views/system/Permission/index.vue
new file mode 100644
index 00000000..ec763acd
--- /dev/null
+++ b/src/views/system/Permission/index.vue
@@ -0,0 +1,197 @@
+<template>
+    <div class="permission-container">
+        <Search :columns="query.columns" />
+
+        <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)"
+                    ><plus-outlined />新增</a-button
+                >
+            </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>删除</template>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                :disabled="slotProps.status"
+                            >
+                                <delete-outlined />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+        </JTable>
+
+        <div class="dialogs">
+            <EditDialog ref="editDialogRef" />
+        </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 } from '@/api/system/permission';
+
+const editDialogRef = ref(); // 新增弹窗实例
+const tableRef = ref<Record<string, any>>({}); // 表格实例
+
+// 筛选
+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: {},
+});
+
+// 表格
+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 = {}) => {
+        editDialogRef.value.openDialog(true, row);
+    },
+    changeStatus: (row: any) => {
+        const params = {
+            ...row,
+            status: row.status ? 0 : 1,
+        };
+        editPermission_api(params).then(() => {
+            message.success('操作成功');
+            tableRef.value.reload();
+        });
+    },
+    clickDel: (row: any) => {
+        // delRole_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>
diff --git a/src/views/system/Role/Detail/index.vue b/src/views/system/Role/Detail/index.vue
index 1c58b369..8a907baa 100644
--- a/src/views/system/Role/Detail/index.vue
+++ b/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>
diff --git a/src/views/system/Role/components/AddDialog.vue b/src/views/system/Role/components/AddDialog.vue
index 33e817b3..fc8a68d9 100644
--- a/src/views/system/Role/components/AddDialog.vue
+++ b/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 props = defineProps({
-    open: Number,
-});
+const router = useRouter();
 // 弹窗相关
 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,
-    () => {
-        // 重置表单
-        form.data = {
-            name: '',
-            description: '',
-        };
-        formRef.value?.resetFields();
-        dialog.visible = true;
-    },
-);
+
+
+// 将打开弹窗的操作暴露给父组件
+defineExpose({
+    openDialog: dialog.changeVisible
+})
 </script>
 
 <style scoped></style>
diff --git a/src/views/system/Role/index.vue b/src/views/system/Role/index.vue
index 11758cdd..74bff32a 100644
--- a/src/views/system/Role/index.vue
+++ b/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 router = useRouter()
+const addDialogRef = ref(); // 新增弹窗实例
+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)=>{
-            if(resp.status === 200){
-                tableRef.value?.reload()
-                message.success('操作成功!')
+        delRole_api(row.id).then((resp: any) => {
+            if (resp.status === 200) {
+                tableRef.value?.reload();
+                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>