diff --git a/src/api/device/instance.ts b/src/api/device/instance.ts
index 562118ac..a8a7213c 100644
--- a/src/api/device/instance.ts
+++ b/src/api/device/instance.ts
@@ -217,3 +217,28 @@ export const queryMetric = (deviceId: string, propertyId: string) => server.get(
  * @returns 
  */
 export const saveMetric = (deviceId: string, propertyId: string, data: Record<string, any>) => server.patch(`/device-instance/${deviceId}/metric/property/${propertyId}`, data)
+
+/**
+ * 解绑子设备
+ * @param deviceId 设备id
+ * @param childrenId 子设备id
+ * @param data 
+ * @returns 
+ */
+export const unbindDevice = (deviceId: string, childrenId: string, data: Record<string, any>) => server.post(`/device/gateway/${deviceId}/unbind/${childrenId}`, data)
+
+/**
+ * 批量解绑子设备
+ * @param deviceId 设备id
+ * @param data 
+ * @returns 
+ */
+export const unbindBatchDevice = (deviceId: string, data: Record<string, any>) => server.post(`/device/gateway/${deviceId}/unbind`, data)
+
+/**
+ * 子设备绑定
+ * @param deviceId 设备id
+ * @param data 
+ * @returns 
+ */
+export const bindDevice = (deviceId: string, data: Record<string, any>) => server.post(`/device/gateway/${deviceId}/bind`, data)
diff --git a/src/api/system/role.ts b/src/api/system/role.ts
index 06c1e46c..28b6020c 100644
--- a/src/api/system/role.ts
+++ b/src/api/system/role.ts
@@ -6,10 +6,14 @@ export const getRoleList_api = (data: any): Promise<any> => server.post(`/role/_
 export const delRole_api = (id: string): Promise<any> => server.remove(`/role/${id}`);
 // 保存角色
 export const saveRole_api = (data: any): Promise<any> => server.post(`/role`, data);
+// 更新角色信息
+export const updateRole_api = (data: any): Promise<any> => server.patch(`/role`, data);
 // 获取角色详细信息
 export const getRoleDetails_api = (id: string): Promise<any> => server.get(`/role/${id}`);
 // 获取角色对应的权限树
 export const getPrimissTree_api = (id: string): Promise<any> => server.get(`/menu/role/${id}/_grant/tree`);
+// 更新角色对应的权限树
+export const updatePrimissTree_api = (id: string, data:object): Promise<any> => server.put(`/menu/role/${id}/_grant`,data);
 
 
 // 获取用户列表
diff --git a/src/views/device/Instance/Detail/ChildDevice/BindChildDevice/index.vue b/src/views/device/Instance/Detail/ChildDevice/BindChildDevice/index.vue
new file mode 100644
index 00000000..71fe278a
--- /dev/null
+++ b/src/views/device/Instance/Detail/ChildDevice/BindChildDevice/index.vue
@@ -0,0 +1,195 @@
+<!-- 绑定设备 -->
+<template>
+    <a-modal
+        :maskClosable="false"
+        width="1000px"
+        :visible="true"
+        title="绑定子设备"
+        okText="确定"
+        cancelText="取消"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <div style="margin-top: 10px">
+            <Search
+                :columns="columns"
+                target="child-device-bind"
+                @search="handleSearch"
+                type="simple"
+            />
+            <JTable
+                ref="bindDeviceRef"
+                :columns="columns"
+                :request="query"
+                model="TABLE"
+                :defaultParams="{
+                    terms: [
+                        {
+                            terms: [
+                                { column: 'parentId$isnull', value: '1' },
+                                {
+                                    column: 'parentId$not',
+                                    value: detail.id,
+                                    type: 'or',
+                                },
+                            ],
+                        },
+                        {
+                            terms: [
+                                {
+                                    column: 'id$not',
+                                    value: detail.id,
+                                    type: 'and',
+                                },
+                            ],
+                        },
+                        {
+                            terms: [
+                                {
+                                    termType: 'eq',
+                                    column: 'deviceType',
+                                    value: 'childrenDevice',
+                                },
+                            ],
+                            type: 'and',
+                        },
+                    ],
+                }"
+                :rowSelection="{
+                    selectedRowKeys: _selectedRowKeys,
+                    onChange: onSelectChange,
+                }"
+                @cancelSelect="cancelSelect"
+                :params="params"
+            >
+                <template #registryTime="slotProps">
+                    {{
+                        slotProps.registryTime
+                            ? moment(slotProps.registryTime).format(
+                                  'YYYY-MM-DD HH:mm:ss',
+                              )
+                            : ''
+                    }}
+                </template>
+                <template #state="slotProps">
+                    <a-badge
+                        :text="slotProps.state.text"
+                        :status="statusMap.get(slotProps.state.value)"
+                    />
+                </template>
+            </JTable>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { query, bindDevice } from '@/api/device/instance';
+import moment from 'moment';
+import { message } from 'ant-design-vue';
+import { useInstanceStore } from '@/store/instance';
+import { storeToRefs } from 'pinia';
+
+const instanceStore = useInstanceStore();
+const { detail } = storeToRefs(instanceStore);
+
+const emit = defineEmits(['change']);
+
+const bindDeviceRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const btnLoading = ref<boolean>(false);
+
+const statusMap = new Map();
+statusMap.set('online', 'success');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '设备名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '所属产品',
+        dataIndex: 'productName',
+        key: 'productName',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '注册时间',
+        dataIndex: 'registryTime',
+        key: 'registryTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '禁用', value: 'notActive' },
+                { label: '离线', value: 'offline' },
+                { label: '在线', value: 'online' },
+            ],
+        },
+    },
+];
+
+const handleSearch = (e: any) => {
+    params.value = e;
+};
+
+const onSelectChange = (keys: string[], rows: string[]) => {
+    _selectedRowKeys.value = [...keys];
+};
+
+const cancelSelect = () => {
+    _selectedRowKeys.value = [];
+};
+
+const handleOk = () => {
+    if (_selectedRowKeys.value.length === 0) {
+        message.warning('请选择需要绑定的设备');
+        return;
+    }
+    btnLoading.value = true;
+    bindDevice(detail.value.id, _selectedRowKeys.value)
+        .then((resp) => {
+            emit('change', true);
+            cancelSelect();
+            message.success('操作成功');
+        })
+        .finally(() => {
+            btnLoading.value = false;
+        });
+};
+
+const handleCancel = () => {
+    emit('change', false);
+};
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/device/Instance/Detail/ChildDevice/index.vue b/src/views/device/Instance/Detail/ChildDevice/index.vue
new file mode 100644
index 00000000..214a9491
--- /dev/null
+++ b/src/views/device/Instance/Detail/ChildDevice/index.vue
@@ -0,0 +1,265 @@
+<template>
+    <a-card>
+        <Search
+            :columns="columns"
+            target="child-device"
+            @search="handleSearch"
+            class="child-device-search"
+        />
+        <JTable
+            ref="childDeviceRef"
+            :columns="columns"
+            :request="query"
+            :defaultParams="{
+                terms: [
+                    {
+                        column: 'parentId',
+                        value: detail?.id || '',
+                        termType: 'eq',
+                    },
+                ],
+            }"
+            :rowSelection="{
+                selectedRowKeys: _selectedRowKeys,
+                onChange: onSelectChange,
+            }"
+            @cancelSelect="cancelSelect"
+            :params="params"
+            :model="'TABLE'"
+        >
+            <template #headerTitle>
+                <a-space>
+                    <a-button type="primary"> 新增并绑定 </a-button>
+                    <a-button type="primary" @click="visible = true">
+                        绑定
+                    </a-button>
+                    <a-popconfirm title="确认解绑吗？" @confirm="handleUnBind">
+                        <a-button type="primary"> 批量解绑 </a-button>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+            <template #registryTime="slotProps">
+                {{
+                    slotProps.registryTime
+                        ? moment(slotProps.registryTime).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #state="slotProps">
+                <a-badge
+                    :text="slotProps.state.text"
+                    :status="statusMap.get(slotProps.state.value)"
+                />
+            </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>
+        <BindChildDevice v-if="visible" @change="closeBindDevice" />
+    </a-card>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment';
+import type { ActionsType } from '@/components/Table';
+import { query, unbindDevice, unbindBatchDevice } from '@/api/device/instance';
+import { useInstanceStore } from '@/store/instance';
+import { storeToRefs } from 'pinia';
+import { message } from 'ant-design-vue';
+import BindChildDevice from './BindChildDevice/index.vue';
+
+const instanceStore = useInstanceStore();
+const { detail } = storeToRefs(instanceStore);
+const router = useRouter();
+
+const statusMap = new Map();
+statusMap.set('online', 'success');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
+const childDeviceRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const visible = ref<boolean>(false);
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+    },
+    {
+        title: '设备名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '所属产品',
+        dataIndex: 'productName',
+        key: 'productName',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '注册时间',
+        dataIndex: 'registryTime',
+        key: 'registryTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '禁用', value: 'notActive' },
+                { label: '离线', value: 'offline' },
+                { label: '在线', value: 'online' },
+            ],
+        },
+    },
+    {
+        title: '说明',
+        dataIndex: 'describe',
+        key: 'describe',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) return [];
+    return [
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: () => {
+                router.push('/iot/device/instance/detail/' + data.id);
+            },
+        },
+        {
+            key: 'unbind',
+            text: '解绑',
+            tooltip: {
+                title: '解绑',
+            },
+            icon: 'DisconnectOutlined',
+            popConfirm: {
+                title: '确认解绑吗？',
+                okText: '确定',
+                cancelText: '取消',
+                onConfirm: async () => {
+                    const resp = await unbindDevice(
+                        detail.value.id,
+                        data.id,
+                        {},
+                    );
+                    if (resp.status === 200) {
+                        childDeviceRef.value?.reload();
+                        message.success('操作成功！');
+                    }
+                },
+            },
+        },
+    ];
+};
+
+const handleSearch = (e: any) => {
+    params.value = e;
+};
+
+const onSelectChange = (keys: string[]) => {
+    _selectedRowKeys.value = [...keys];
+};
+
+const cancelSelect = () => {
+    _selectedRowKeys.value = [];
+};
+
+const handleUnBind = async () => {
+    if (_selectedRowKeys.value.length) {
+        const resp = await unbindBatchDevice(
+            detail.value.id,
+            _selectedRowKeys.value,
+        );
+        if (resp.status === 200) {
+            message.success('操作成功！');
+            cancelSelect();
+            childDeviceRef.value?.reload();
+        }
+    } else {
+        message.warning('请勾选需要解绑的数据');
+    }
+};
+
+const closeBindDevice = (val: boolean) => {
+    visible.value = false;
+    if (val) {
+        childDeviceRef.value?.reload();
+    }
+};
+</script>
+
+<style scoped lang="less">
+.child-device-search {
+    border-bottom: 1px solid #f0f0f0;
+}
+
+:deep(._jtable-body_1eyxz_1 ._jtable-body-header_1eyxz_6) {
+    justify-content: flex-end;
+}
+</style>
diff --git a/src/views/device/Instance/Detail/index.vue b/src/views/device/Instance/Detail/index.vue
index c42f3520..2e4c2609 100644
--- a/src/views/device/Instance/Detail/index.vue
+++ b/src/views/device/Instance/Detail/index.vue
@@ -43,6 +43,7 @@ import { useInstanceStore } from '@/store/instance';
 import Info from './Info/index.vue';
 import Running from './Running/index.vue'
 import Metadata from '../../components/Metadata/index.vue';
+import ChildDevice from './ChildDevice/index.vue';
 import { _deploy, _disconnect } from '@/api/device/instance'
 import { message } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
@@ -67,13 +68,18 @@ const list = [
     {
         key: 'Metadata',
         tab: '物模型'
+    },
+    {
+        key: 'ChildDevice',
+        tab: '子设备'
     }
 ]
 
 const tabs = {
   Info,
   Metadata,
-  Running
+  Running,
+  ChildDevice,
 }
 
 watch(
diff --git a/src/views/iot-card/CardManagement/index.vue b/src/views/iot-card/CardManagement/index.vue
index 14419388..fd04811a 100644
--- a/src/views/iot-card/CardManagement/index.vue
+++ b/src/views/iot-card/CardManagement/index.vue
@@ -17,6 +17,7 @@
             }"
             @cancelSelect="cancelSelect"
             :params="params"
+            :gridColumn="3"
         >
             <template #headerTitle>
                 <a-space>
diff --git a/src/views/iot-card/Dashboard/index.vue b/src/views/iot-card/Dashboard/index.vue
index 53516ce1..4bc42f09 100644
--- a/src/views/iot-card/Dashboard/index.vue
+++ b/src/views/iot-card/Dashboard/index.vue
@@ -70,6 +70,7 @@
                         <Guide title="流量统计">
                             <template #extra>
                                 <TimeSelect
+                                    key="flow-static"
                                     :type="'week'"
                                     :quickBtnList="quickBtnList"
                                     @change="getEcharts"
@@ -93,6 +94,7 @@
                         <Guide title="流量使用TOP10">
                             <template #extra>
                                 <TimeSelect
+                                    key="flow-top10"
                                     :quickBtn="false"
                                     :type="'week'"
                                     @change="getTopRang"
diff --git a/src/views/iot-card/Home/index.vue b/src/views/iot-card/Home/index.vue
index ee739310..d95e98d3 100644
--- a/src/views/iot-card/Home/index.vue
+++ b/src/views/iot-card/Home/index.vue
@@ -1,85 +1,90 @@
 <!-- 物联卡-首页 -->
 <template>
-  <page-container>
-    <a-row :gutter="24">
-      <a-col :span="14">
-        <div class="home-guide">
-          <Guide title="物联卡引导"></Guide>
-          <div
-            class="home-guide-items"
-            :style="`grid-template-columns: repeat(${
-              guideList ? guideList.length : 1
-            }, 1fr);`"
-          >
-            <div
-              v-for="(item, index) in guideList"
-              :key="index"
-              class="home-guide-item step-bar arrow-2 pointer"
-              @click="jumpPage(item)"
-            >
-              <div class="item-english">{{ item.english }}</div>
-              <div class="item-title">{{ item.name }}</div>
-              <div class="item-index">
-                <img :src="Image[index + 1]" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </a-col>
-      <a-col :span="10">
-        <div class="home-statistics">
-          <Guide title="基础统计">
-            <template #extra>
-              <span class="extra-text">详情</span>
-            </template>
-          </Guide>
-          <div class="home-statistics-body">
-            <div class="home-guide-item">
-              <div class="item-english">昨日流量统计</div>
-              <div class="item-title">{{ currentSource }} M</div>
-              <div
-                class="item-index-echarts"
-                style="height: 75px; width: 110px"
-              >
-                <div class="chart" ref="todayFlowChart"></div>
-              </div>
-            </div>
-            <div class="home-guide-item">
-              <div class="item-english">物联卡</div>
-              <div class="item-content">
-                <div
-                  v-for="iten in pieChartData"
-                  :key="iten.key"
-                  class="item-node"
-                >
-                  <div class="item-node-text">
-                    {{ iten.value }}
-                  </div>
-                  <div :class="`state ${iten.className}`">
-                    {{ iten.name }}
-                  </div>
+    <page-container>
+        <a-row :gutter="24">
+            <a-col :span="14">
+                <div class="home-guide">
+                    <Guide title="物联卡引导"></Guide>
+                    <div
+                        class="home-guide-items"
+                        :style="`grid-template-columns: repeat(${
+                            guideList ? guideList.length : 1
+                        }, 1fr);`"
+                    >
+                        <div
+                            v-for="(item, index) in guideList"
+                            :key="index"
+                            class="home-guide-item step-bar arrow-2 pointer"
+                            @click="jumpPage(item)"
+                        >
+                            <div class="item-english">{{ item.english }}</div>
+                            <div class="item-title">{{ item.name }}</div>
+                            <div class="item-index">
+                                <img :src="Image[index + 1]" />
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-              <div
-                class="item-index-echarts"
-                style="height: 75px; width: 110px"
-              >
-                <div class="chart" ref="iotCardChart"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </a-col>
-      <a-col :span="24" style="min-height: 580px">
-        <div class="home-body">
-          <Guide title="平台架构图" english="PLATFORM ARCHITECTURE DIAGRAM" />
-          <div class="home-body-img">
-            <img :src="getImage('/iot-card/iotcard-home.png')" />
-          </div>
-        </div>
-      </a-col>
-    </a-row>
-  </page-container>
+            </a-col>
+            <a-col :span="10">
+                <div class="home-statistics">
+                    <Guide title="基础统计">
+                        <template #extra>
+                            <span class="extra-text" @click="jumpDashboard"
+                                >详情</span
+                            >
+                        </template>
+                    </Guide>
+                    <div class="home-statistics-body">
+                        <div class="home-guide-item">
+                            <div class="item-english">昨日流量统计</div>
+                            <div class="item-title">{{ currentSource }} M</div>
+                            <div
+                                class="item-index-echarts"
+                                style="height: 75px; width: 110px"
+                            >
+                                <div class="chart" ref="todayFlowChart"></div>
+                            </div>
+                        </div>
+                        <div class="home-guide-item">
+                            <div class="item-english">物联卡</div>
+                            <div class="item-content">
+                                <div
+                                    v-for="iten in pieChartData"
+                                    :key="iten.key"
+                                    class="item-node"
+                                >
+                                    <div class="item-node-text">
+                                        {{ iten.value }}
+                                    </div>
+                                    <div :class="`state ${iten.className}`">
+                                        {{ iten.name }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                class="item-index-echarts"
+                                style="height: 75px; width: 110px"
+                            >
+                                <div class="chart" ref="iotCardChart"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </a-col>
+            <a-col :span="24" style="min-height: 580px">
+                <div class="home-body">
+                    <Guide
+                        title="平台架构图"
+                        english="PLATFORM ARCHITECTURE DIAGRAM"
+                    />
+                    <div class="home-body-img">
+                        <img :src="getImage('/iot-card/iotcard-home.png')" />
+                    </div>
+                </div>
+            </a-col>
+        </a-row>
+    </page-container>
 </template>
 
 <script setup lang="ts">
@@ -89,220 +94,245 @@ import { message } from 'ant-design-vue';
 import moment from 'moment';
 import { queryFlow, list } from '@/api/iot-card/home';
 import * as echarts from 'echarts';
+import { useMenuStore } from '@/store/menu';
+import { usePermissionStore } from '@/store/permission';
 
 const router = useRouter();
 const { proxy } = <any>getCurrentInstance();
 
 interface GuideItemProps {
-  key: string;
-  name: string;
-  english: string;
-  url: string;
-  param?: Record<string, any>;
-  index?: number;
-  auth: boolean;
+    key: string;
+    name: string;
+    english: string;
+    url: string;
+    param?: Record<string, any>;
+    index?: number;
+    auth: boolean;
 }
 
+const menuHasPermission = useMenuStore().hasPermission;
+const btnHasPermission = usePermissionStore().hasPermission;
+
+// 菜单权限
+const dashBoardUrl = menuHasPermission('/iot-card/Dashboard');
+const platformUrl = menuHasPermission('/iot-card/Platform/Detail');
+const recordUrl = menuHasPermission('/iot-card/Record');
+const cardUrl = menuHasPermission('/iot-card/CardManagement');
+
+// 按钮权限
+const paltformPermission = btnHasPermission(`/iot-card/Platform:add`);
+const cardPermission = btnHasPermission(`/iot-card/CardManagement:add`);
+
 const Image = {
-  1: getImage('/home/1.png'),
-  2: getImage('/home/2.png'),
-  3: getImage('/home/3.png'),
+    1: getImage('/home/1.png'),
+    2: getImage('/home/2.png'),
+    3: getImage('/home/3.png'),
 };
 const guideList = [
-  {
-    key: 'EQUIPMENT',
-    name: '平台对接',
-    english: 'STEP1',
-    auth: '',
-    url: '',
-  },
-  {
-    key: 'SCREEN',
-    name: '物联卡管理',
-    english: 'STEP2',
-    auth: '',
-    url: '',
-    param: { save: true },
-  },
-  {
-    key: 'CASCADE',
-    name: '操作记录',
-    english: 'STEP3',
-    auth: '',
-    url: '',
-  },
+    {
+        key: 'EQUIPMENT',
+        name: '平台对接',
+        english: 'STEP1',
+        auth: paltformPermission,
+        url: platformUrl,
+    },
+    {
+        key: 'SCREEN',
+        name: '物联卡管理',
+        english: 'STEP2',
+        auth: !!cardPermission,
+        url: cardUrl,
+        param: { save: true },
+    },
+    {
+        key: 'CASCADE',
+        name: '操作记录',
+        english: 'STEP3',
+        auth: !!recordUrl,
+        url: recordUrl,
+    },
 ];
 
 const currentSource = ref<number>(0);
 const barChartData = ref<any[]>([]);
 const pieChartData = ref<any[]>([
-  {
-    key: 'using',
-    name: '正常',
-    value: 0,
-    className: 'normal',
-  },
-  {
-    key: 'toBeActivated',
-    name: '未激活',
-    value: 0,
-    className: 'notActive',
-  },
-  {
-    key: 'deactivate',
-    name: '停用',
-    value: 0,
-    className: 'stopped',
-  },
+    {
+        key: 'using',
+        name: '正常',
+        value: 0,
+        className: 'normal',
+    },
+    {
+        key: 'toBeActivated',
+        name: '未激活',
+        value: 0,
+        className: 'notActive',
+    },
+    {
+        key: 'deactivate',
+        name: '停用',
+        value: 0,
+        className: 'stopped',
+    },
 ]);
 
 const jumpPage = (data: GuideItemProps) => {
-  if (data.url && data.auth) {
-    router.push(`${data.url}`, data.param);
-  } else {
-    message.warning('暂无权限，请联系管理员');
-  }
+    if (data.url && data.auth) {
+        router.push({ path: `${data.url}`, ...data.param });
+    } else {
+        message.warning('暂无权限，请联系管理员');
+    }
+};
+
+const jumpDashboard = () => {
+    if (dashBoardUrl) {
+        router.push(`${dashBoardUrl}`);
+    } else {
+        message.warning('暂无权限，请联系管理员');
+    }
 };
 
 /**
  * 获取昨日流量消耗
  */
 const getTodayFlow = async () => {
-  const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
-  const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
-  const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
-  resp.result.map((item: any) => {
-    currentSource.value += parseFloat(item.value.toFixed(2));
-  });
+    const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
+    const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
+    const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
+    resp.result.map((item: any) => {
+        currentSource.value += parseFloat(item.value.toFixed(2));
+    });
 };
 
 /**
  * 获取最近15天流量消耗统计图数据
  */
 const get15DaysTrafficConsumption = async () => {
-  const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
-  const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
-  const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
-  barChartData.value = resp.result
-    .map((item: any) => ({
-      ...item,
-    }))
-    .reverse();
-  createBarChart();
+    const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
+    const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
+    const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
+    barChartData.value = resp.result
+        .map((item: any) => ({
+            ...item,
+        }))
+        .reverse();
+    createBarChart();
 };
 
 /**
  * 获取物联卡状态数据
  */
 const getStateCard = async () => {
-  Promise.all(
-    pieChartData.value.map((item) => {
-      const params = {
-        terms: [
-          {
-            terms: [
-              {
-                column: 'cardStateType',
-                termType: 'eq',
-                value: item.key,
-              },
-            ],
-          },
-        ],
-      };
-      return list(params);
-    }),
-  )
-    .then((resp) => {
-      resp.forEach((i: any, index) => {
-        if (i.success) {
-          pieChartData.value[index].value = i.result.total;
-        }
-      });
-      createPieChart();
-    })
-    .catch((err) => {
-      console.log(err);
-    });
+    Promise.all(
+        pieChartData.value.map((item) => {
+            const params = {
+                terms: [
+                    {
+                        terms: [
+                            {
+                                column: 'cardStateType',
+                                termType: 'eq',
+                                value: item.key,
+                            },
+                        ],
+                    },
+                ],
+            };
+            return list(params);
+        }),
+    )
+        .then((resp) => {
+            resp.forEach((i: any, index) => {
+                if (i.success) {
+                    pieChartData.value[index].value = i.result.total;
+                }
+            });
+            createPieChart();
+        })
+        .catch((err) => {
+            console.log(err);
+        });
 };
 
 /**
  * 最近15天流量消耗统计图
  */
 const createBarChart = () => {
-  const myChart = echarts.init(proxy.$refs.todayFlowChart);
+    const myChart = echarts.init(proxy.$refs.todayFlowChart);
 
-  const options = {
-    tooltip: {},
-    xAxis: {
-      show: false,
-      data: barChartData.value.map((m) => m.date),
-    },
-    yAxis: {
-      show: false,
-    },
-    series: [
-      {
-        name: '流量消耗',
-        type: 'bar',
-        color: '#FACD89',
-        // barWidth: '5%', // 设单柱状置宽度
-        showBackground: true, //设置柱状的背景虚拟
-        data: barChartData.value.map((m) => parseFloat(m.value.toFixed(2))),
-      },
-    ],
-  };
-  myChart.setOption(options);
-  window.addEventListener('resize', function () {
-    myChart.resize();
-  });
+    const options = {
+        tooltip: {},
+        xAxis: {
+            show: false,
+            data: barChartData.value.map((m) => m.date),
+        },
+        yAxis: {
+            show: false,
+        },
+        series: [
+            {
+                name: '流量消耗',
+                type: 'bar',
+                color: '#FACD89',
+                // barWidth: '5%', // 设单柱状置宽度
+                showBackground: true, //设置柱状的背景虚拟
+                data: barChartData.value.map((m) =>
+                    parseFloat(m.value.toFixed(2)),
+                ),
+            },
+        ],
+    };
+    myChart.setOption(options);
+    window.addEventListener('resize', function () {
+        myChart.resize();
+    });
 };
 /**
  * 物联卡饼图
  */
 const createPieChart = () => {
-  nextTick(() => {
-    const myChart = echarts.init(proxy.$refs.iotCardChart);
+    nextTick(() => {
+        const myChart = echarts.init(proxy.$refs.iotCardChart);
 
-    const options = {
-      tooltip: {
-        trigger: 'item',
-        formatter: '{b}: {c} ({d}%)',
-      },
-      color: ['#85a5ff', '#f29b55', '#c4c4c4'],
-      series: [
-        {
-          name: '',
-          type: 'pie',
-          avoidLabelOverlap: true, //是否启用防止标签重叠策略
-          radius: ['50%', '90%'],
-          center: ['50%', '50%'],
-          itemStyle: {
-            borderColor: 'rgba(255,255,255,1)',
-            borderWidth: 2,
-          },
-          label: {
-            normal: {
-              show: false,
+        const options = {
+            tooltip: {
+                trigger: 'item',
+                formatter: '{b}: {c} ({d}%)',
             },
-          },
-          data: pieChartData.value,
-        },
-      ],
-    };
-    myChart.setOption(options);
-    window.addEventListener('resize', function () {
-      myChart.resize();
+            color: ['#85a5ff', '#f29b55', '#c4c4c4'],
+            series: [
+                {
+                    name: '',
+                    type: 'pie',
+                    avoidLabelOverlap: true, //是否启用防止标签重叠策略
+                    radius: ['50%', '90%'],
+                    center: ['50%', '50%'],
+                    itemStyle: {
+                        borderColor: 'rgba(255,255,255,1)',
+                        borderWidth: 2,
+                    },
+                    label: {
+                        normal: {
+                            show: false,
+                        },
+                    },
+                    data: pieChartData.value,
+                },
+            ],
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
     });
-  });
 };
 
 watch(
-  barChartData.value,
-  () => {
-    createBarChart();
-  },
-  { deep: true },
+    barChartData.value,
+    () => {
+        createBarChart();
+    },
+    { deep: true },
 );
 
 getTodayFlow();
@@ -312,230 +342,230 @@ getStateCard();
 
 <style scoped lang="less">
 .home-base {
-  position: relative;
-  padding: 24px 16px;
-  background-color: #fff;
+    position: relative;
+    padding: 24px 16px;
+    background-color: #fff;
 }
 
 .home-guide {
-  margin-bottom: 24px;
-  padding: 24px 16px;
-  background-color: #fff;
+    margin-bottom: 24px;
+    padding: 24px 16px;
+    background-color: #fff;
 
-  .home-guide-items {
-    display: grid;
-    grid-column-gap: 56px;
-  }
+    .home-guide-items {
+        display: grid;
+        grid-column-gap: 56px;
+    }
 }
 
 .home-guide-item {
-  position: relative;
-  padding: 16px;
-  background: linear-gradient(
-    135.62deg,
-    #f6f7fd 22.27%,
-    rgba(255, 255, 255, 0.86) 91.82%
-  );
-  border-radius: 2px;
-  box-shadow: 0 4px 18px #efefef;
-  .state {
     position: relative;
-    padding-left: 8px;
-    &::before {
-      position: absolute;
-      top: 7px;
-      left: 0;
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      margin-right: 2px;
-      content: '';
+    padding: 16px;
+    background: linear-gradient(
+        135.62deg,
+        #f6f7fd 22.27%,
+        rgba(255, 255, 255, 0.86) 91.82%
+    );
+    border-radius: 2px;
+    box-shadow: 0 4px 18px #efefef;
+    .state {
+        position: relative;
+        padding-left: 8px;
+        &::before {
+            position: absolute;
+            top: 7px;
+            left: 0;
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            margin-right: 2px;
+            content: '';
+        }
+        &.normal::before {
+            background: #85a5ff;
+        }
+        &.notActive::before {
+            background: #f29b55;
+        }
+        &.stopped::before {
+            background: #c4c4c4;
+        }
     }
-    &.normal::before {
-      background: #85a5ff;
+
+    &.pointer {
+        cursor: pointer;
     }
-    &.notActive::before {
-      background: #f29b55;
+
+    .item-english {
+        color: #4f4f4f;
     }
-    &.stopped::before {
-      background: #c4c4c4;
+
+    .item-content {
+        display: flex;
+        margin-top: 15px;
+        width: 80%;
     }
-  }
 
-  &.pointer {
-    cursor: pointer;
-  }
+    .item-node {
+        min-width: 58px;
+        margin-right: 8px;
+        z-index: 1;
 
-  .item-english {
-    color: #4f4f4f;
-  }
-
-  .item-content {
-    display: flex;
-    margin-top: 15px;
-    width: 80%;
-  }
-
-  .item-node {
-    min-width: 58px;
-    margin-right: 8px;
-    z-index: 1;
-
-    .item-node-text {
-      font-size: 14px;
-      font-weight: bold;
+        .item-node-text {
+            font-size: 14px;
+            font-weight: bold;
+        }
     }
-  }
 
-  .item-title {
-    margin: 20px 0;
-    color: @text-color;
-    font-weight: 700;
-    font-size: 20px;
-  }
-
-  .item-index {
-    position: absolute;
-    right: 10%;
-    bottom: 0;
-  }
-
-  .item-index-echarts {
-    .item-index;
-
-    right: 12px;
-    bottom: 5%;
-    z-index: 0;
-    width: 50%;
-
-    .chart {
-      width: 100%;
-      height: 100%;
+    .item-title {
+        margin: 20px 0;
+        color: @text-color;
+        font-weight: 700;
+        font-size: 20px;
+    }
+
+    .item-index {
+        position: absolute;
+        right: 10%;
+        bottom: 0;
+    }
+
+    .item-index-echarts {
+        .item-index;
+
+        right: 12px;
+        bottom: 5%;
+        z-index: 0;
+        width: 50%;
+
+        .chart {
+            width: 100%;
+            height: 100%;
+        }
     }
-  }
 }
 
 .home-body {
-  .home-base;
+    .home-base;
 
-  min-height: 444px;
-  margin-bottom: 24px;
-  // padding-bottom: 26.5%;
-  padding-bottom: 30%;
-  overflow: hidden;
-  border-bottom: 1px solid #2f54eb;
+    min-height: 444px;
+    margin-bottom: 24px;
+    // padding-bottom: 26.5%;
+    padding-bottom: 30%;
+    overflow: hidden;
+    border-bottom: 1px solid #2f54eb;
 
-  .home-body-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
+    .home-body-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
 
-    > img {
-      width: 100%;
-      height: 100%;
+        > img {
+            width: 100%;
+            height: 100%;
+        }
     }
-  }
 }
 
 .home-statistics {
-  .home-base;
+    .home-base;
 
-  .extra-text {
-    cursor: pointer;
-    color: @primary-color;
-  }
+    .extra-text {
+        cursor: pointer;
+        color: @primary-color;
+    }
 
-  .home-statistics-body {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
-  }
+    .home-statistics-body {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 24px;
+    }
 }
 
 .step-item-after {
-  position: absolute;
-  top: 50%;
-  right: -60px;
-  width: 60px;
-  height: 40px;
-  transform: translateY(-50%);
-  content: ' ';
+    position: absolute;
+    top: 50%;
+    right: -60px;
+    width: 60px;
+    height: 40px;
+    transform: translateY(-50%);
+    content: ' ';
 }
 
 .home-step {
-  .home-base;
+    .home-base;
 
-  .home-step-items {
-    display: grid;
-    grid-column-gap: 66px;
+    .home-step-items {
+        display: grid;
+        grid-column-gap: 66px;
 
-    .step-item {
-      display: flex;
-      flex-direction: column;
+        .step-item {
+            display: flex;
+            flex-direction: column;
 
-      .step-item-title {
-        position: relative;
-        padding: 16px 24px;
-        color: #333;
-        font-weight: bold;
-        font-size: 14px;
-        background-color: #f8f9fd;
-        cursor: pointer;
+            .step-item-title {
+                position: relative;
+                padding: 16px 24px;
+                color: #333;
+                font-weight: bold;
+                font-size: 14px;
+                background-color: #f8f9fd;
+                cursor: pointer;
 
-        .step-item-img {
-          position: absolute;
-          top: 0;
-          right: 0;
-          z-index: 1;
-          height: 100%;
+                .step-item-img {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    z-index: 1;
+                    height: 100%;
 
-          img {
-            height: 100%;
-          }
+                    img {
+                        height: 100%;
+                    }
+                }
+
+                > span {
+                    position: relative;
+                    z-index: 2;
+                }
+            }
+
+            .step-item-content {
+                flex-grow: 1;
+                height: auto;
+                padding: 24px;
+                border-right: 1px solid #e5edf4;
+                border-bottom: 1px solid #e5edf4;
+                border-left: 1px solid #e5edf4;
+            }
         }
-
-        > span {
-          position: relative;
-          z-index: 2;
-        }
-      }
-
-      .step-item-content {
-        flex-grow: 1;
-        height: auto;
-        padding: 24px;
-        border-right: 1px solid #e5edf4;
-        border-bottom: 1px solid #e5edf4;
-        border-left: 1px solid #e5edf4;
-      }
     }
-  }
 }
 
 .step-bar {
-  position: relative;
+    position: relative;
 
-  &.arrow-1 {
-    &:not(:last-child) {
-      &::after {
-        .step-item-after;
+    &.arrow-1 {
+        &:not(:last-child) {
+            &::after {
+                .step-item-after;
 
-        background: url('/images/home/arrow-1.png') no-repeat center;
-      }
+                background: url('/images/home/arrow-1.png') no-repeat center;
+            }
+        }
     }
-  }
 
-  &.arrow-2 {
-    &:not(:last-child) {
-      &::after {
-        .step-item-after;
+    &.arrow-2 {
+        &:not(:last-child) {
+            &::after {
+                .step-item-after;
 
-        background: url('/images/home/arrow-2.png') no-repeat center;
-      }
+                background: url('/images/home/arrow-2.png') no-repeat center;
+            }
+        }
     }
-  }
 }
 </style>
diff --git a/src/views/iot-card/Platform/index.vue b/src/views/iot-card/Platform/index.vue
index 7097b902..a3f57d5a 100644
--- a/src/views/iot-card/Platform/index.vue
+++ b/src/views/iot-card/Platform/index.vue
@@ -12,6 +12,7 @@
             :request="queryList"
             :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
             :params="params"
+            :gridColumn="3"
         >
             <template #headerTitle>
                 <a-space>
diff --git a/src/views/iot-card/Recharge/index.vue b/src/views/iot-card/Recharge/index.vue
index 8506501b..4b2cf272 100644
--- a/src/views/iot-card/Recharge/index.vue
+++ b/src/views/iot-card/Recharge/index.vue
@@ -115,6 +115,7 @@ const columns = [
         title: '支付URL',
         dataIndex: 'url',
         key: 'url',
+        ellipsis: true,
     },
     {
         title: '订单时间',
diff --git a/src/views/system/Role/Detail/Permiss/index.vue b/src/views/system/Role/Detail/Permiss/index.vue
index d1c49d0e..d0f52176 100644
--- a/src/views/system/Role/Detail/Permiss/index.vue
+++ b/src/views/system/Role/Detail/Permiss/index.vue
@@ -26,7 +26,7 @@
 
         <a-card>
             <h5>权限分配</h5>
-            <PermissTree />
+            <PermissTree v-model:select-items="form.menus" />
 
             <a-button
                 type="primary"
@@ -39,12 +39,17 @@
 </template>
 
 <script setup lang="ts" name="RolePermiss">
-import { FormInstance } from 'ant-design-vue';
+import { FormInstance, message } from 'ant-design-vue';
 import PermissTree from '../components/PermissTree.vue';
 
-import { getRoleDetails_api } from '@/api/system/role';
+import {
+    getRoleDetails_api,
+    updateRole_api,
+    updatePrimissTree_api,
+} from '@/api/system/role';
 
 const route = useRoute();
+const router = useRouter();
 const roleId = route.params.id as string;
 
 // 表单相关
@@ -55,6 +60,7 @@ const form = reactive({
         name: '',
         description: '',
     },
+    menus: [],
     getForm: () => {
         getRoleDetails_api(roleId).then((resp) => {
             if (resp.status) {
@@ -62,7 +68,15 @@ const form = reactive({
             }
         });
     },
-    clickSave: () => {},
+    clickSave: () => {
+        const updateRole = updateRole_api(form.data);
+        const updateTree = updatePrimissTree_api(roleId, { menu: form.menus });
+
+        Promise.all([updateRole, updateTree]).then((resp) => {
+            message.success('操作成功');
+            router.push('/system/Role');
+        });
+    },
 });
 
 form.getForm();
diff --git a/src/views/system/Role/Detail/components/PermissTree.vue b/src/views/system/Role/Detail/components/PermissTree.vue
index b47647ad..b7b10bb4 100644
--- a/src/views/system/Role/Detail/components/PermissTree.vue
+++ b/src/views/system/Role/Detail/components/PermissTree.vue
@@ -1,64 +1,343 @@
 <template>
     <div class="permiss-tree-container">
-        <a-table :data-source="dataSource">
-            <a-table-column key="menu" data-index="menu">
-                <template #title><span style="">菜单权限</span></template>
-            </a-table-column>
-            <a-table-column key="action" title="操作权限" data-index="action" />
-            <a-table-column key="data" data-index="data">
-                <template #title>
+        <a-table
+            :columns="columns"
+            :data-source="tableData"
+            :pagination="false"
+            :rowKey="'id'"
+        >
+            <!-- 自定义表头 -->
+            <template #headerCell="{ column }">
+                <div v-if="column.key === 'menu'">
+                    <a-checkbox
+                        v-model:checked="selectedAll"
+                        :indeterminate="indeterminate"
+                        @change="selectAllChange"
+                        >菜单权限</a-checkbox
+                    >
+                </div>
+                <div v-else-if="column.key === 'data'">
                     <span style="">数据权限</span>
-                    <a-checkbox v-model:checked="checked">批量设置</a-checkbox>
+                    <a-checkbox
+                        v-model:checked="bulkShow"
+                        @change="bulkValue = ''"
+                        >批量设置</a-checkbox
+                    >
                     <a-select
-                        v-show="checked"
-                        v-model:value="selectValue"
+                        v-show="bulkShow"
+                        v-model:value="bulkValue"
                         :size="'middle'"
                         style="width: 200px"
-                        :options="options"
+                        :options="bulkOptions"
+                        @change="bulkChange"
                     ></a-select>
-                </template>
-            </a-table-column>
+                </div>
+                <div v-else>
+                    <span>{{ column.title }}</span>
+                </div>
+            </template>
+            <!-- 自定义表格内容 -->
+            <template #bodyCell="{ column, record }">
+                <div v-if="column.key === 'menu'">
+                    <a-checkbox
+                        v-model:checked="record.granted"
+                        :indeterminate="record.indeterminate"
+                        @change="menuChange(record)"
+                        >{{ record.name }}</a-checkbox
+                    >
+                </div>
+
+                <div v-else-if="column.key === 'action'">
+                    <div v-if="record.buttons && record.buttons.length > 0">
+                        <a-checkbox
+                            v-for="button in record.buttons"
+                            v-model:checked="button.granted"
+                            @change="actionChange(record)"
+                            >{{ button.name }}</a-checkbox
+                        >
+                    </div>
+                </div>
+
+                <div v-else-if="column.key === 'data'">
+                    <span v-if="record.accessSupport === undefined">
+                        不支持数据权限配置，默认可查看全部数据
+                    </span>
+                    <div v-else-if="record.accessSupport.value === 'support'">
+                        <a-radio-group v-model:value="record.selectAccesses">
+                            <a-radio
+                                :value="asset.supportId"
+                                v-for="asset in record.assetAccesses"
+                                >{{ asset.name }}</a-radio
+                            >
+                        </a-radio-group>
+                    </div>
+                    <span
+                        v-else-if="
+                            record.accessSupport.value === 'indirect' ||
+                            record.accessSupport.value === 'unsupported'
+                        "
+                        >{{ record.accessDescription }}</span
+                    >
+                </div>
+            </template>
         </a-table>
     </div>
 </template>
 
 <script setup lang="ts">
+import { cloneDeep } from 'lodash-es';
 import { getPrimissTree_api } from '@/api/system/role';
 
+const emits = defineEmits(['update:selectItems']);
 const route = useRoute();
 const props = defineProps({
     selectItems: Array,
 });
-const dataSource = ref([]);
-const checked = ref<boolean>(false);
-const options = [
+
+const columns = [
+    {
+        title: '菜单权限',
+        dataIndex: 'menu',
+        key: 'menu',
+        width: '260px',
+    },
+    {
+        title: '操作权限',
+        dataIndex: 'action',
+        key: 'action',
+        width: '260px',
+    },
+    {
+        title: '数据权限',
+        dataIndex: 'data',
+        key: 'data',
+        width: '50%',
+    },
+];
+const tableData = ref<tableItemType[]>([]);
+
+// 表头-全选
+const selectedAll = ref<boolean>(false);
+const indeterminate = ref<boolean>(false);
+const selectAllChange = () => {
+    flatTableData.forEach((item) => {
+        item.granted = selectedAll.value;
+        item.buttons?.forEach((button) => {
+            button.granted = selectedAll.value;
+        });
+    });
+    indeterminate.value = false;
+};
+// 表头-批量设置
+const bulkShow = ref<boolean>(false);
+const bulkOptions = [
     {
         label: '全部数据',
-        value: '1',
+        value: 'ignore',
     },
     {
         label: '所在组织及下级组织',
-        value: '2',
+        value: 'org-include-children',
     },
     {
         label: '所在组织',
-        value: '3',
+        value: 'org',
     },
     {
         label: '自己创建的',
-        value: '4',
+        value: 'creator',
     },
 ];
-const selectValue = ref<string>('');
-
-const getAllPermiss = () => {
-    const id = route.params.id as string;
-    getPrimissTree_api(id).then((resp) => {
-        console.log(resp);
+const bulkValue = ref<string>('');
+const bulkChange = () => {
+    if (!bulkValue) return;
+    flatTableData.forEach((item) => {
+        if (item.accessSupport && item.accessSupport.value === 'support') {
+            item.selectAccesses = bulkValue.value;
+        }
     });
 };
+// ------------下面为表格内容部分------------------
+const flatTableData: tableItemType[] = []; // 表格数据的扁平化版本--浅克隆   方便进行对表格数据进行操作
 
-getAllPermiss();
+const init = () => {
+    getAllPermiss();
+    watch(tableData, () => {
+        const selected = cloneDeep(flatTableData).filter((item) => (item.granted || item.indeterminate) && !item.parentId);
+        selected.forEach((item) => {
+            if (
+                item.accessSupport &&
+                item.accessSupport.value === 'support' &&
+                item.selectAccesses
+            ) {
+                item.selectAccesses = bulkValue.value;
+                item.assetAccesses?.forEach((asset) => {
+                    if (asset.supportId === item.selectAccesses) {
+                        asset.granted = true;
+                    } else {
+                        asset.granted = false;
+                    }
+                });
+                delete item.selectAccesses;
+            }
+            delete item.indeterminate
+        });
+        emits(
+            'update:selectItems',
+            selected,
+        );
+    });
+};
+init();
+
+function getAllPermiss() {
+    const id = route.params.id as string;
+    getPrimissTree_api(id).then((resp) => {
+        tableData.value = resp.result;
+
+        treeToSimple(resp.result); // 表格数据扁平化
+
+        const selectList = flatTableData.filter((item) => item.granted); // 第一列选中的项
+        emits('update:selectItems', selectList); // 选中的项传回父组件
+        // 判断是全选/半全选
+        if (selectList.length === flatTableData.length) {
+            selectedAll.value = true;
+            indeterminate.value = false;
+        } else if (selectList.length > 0) {
+            indeterminate.value = true;
+            selectedAll.value = false;
+        }
+    });
+}
+/**
+ * 菜单权限改变事件
+ * @param row 触发的项
+ * @param setButtonBool 是否改变对应的操作权限
+ */
+function menuChange(
+    row: tableItemType,
+    setButtonBool: boolean = true,
+): undefined {
+    if (setButtonBool) {
+        if (row.buttons && row.buttons.length > 0)
+            row.buttons.forEach((button) => {
+                button.granted = row.granted;
+            });
+        row.children && setChildrenChecked(row.children, row.granted);
+    }
+
+    // 改变上层节点的状态
+    const selectList = flatTableData.filter((item) => item.granted); // 第一列选中的项
+    if (row.parentId) {
+        // 找到对应的父节点  判断该父节点的选中状态为 全选中/部分选中/未选中
+        const parent = flatTableData.find(
+            (item) => item.id === row.parentId,
+        ) as tableItemType;
+        const selectLen = parent.children?.filter((item) => item.granted)
+            .length as number; // 父节点的已选中子节点的数量
+
+        if (selectLen === parent.children?.length) {
+            parent.granted = true;
+            parent.indeterminate = false;
+        } else if (selectLen > 0) {
+            parent.granted = false;
+            parent.indeterminate = true;
+        } else {
+            parent.granted = false;
+            parent.indeterminate = false;
+        }
+
+        if (parent.parentId) {
+            return menuChange(parent, false);
+        }
+    }
+
+    // 改变头部节点状态
+    if (selectList.length === flatTableData.length) {
+        selectedAll.value = true;
+        indeterminate.value = false;
+    } else if (selectList.length > 0) {
+        indeterminate.value = true;
+        selectedAll.value = false;
+    } else {
+        selectedAll.value = false;
+        indeterminate.value = false;
+    }
+    emits('update:selectItems', selectList); // 选中的项传回父组件
+}
+/**
+ * 操作权限改变事件
+ * @param row 触发的项
+ */
+function actionChange(row: tableItemType) {
+    const selectLen = row.buttons?.filter((item) => item.granted)
+        .length as number;
+
+    if (selectLen === row.buttons?.length) {
+        row.granted = true;
+        row.indeterminate = false;
+    } else if (selectLen > 0) {
+        row.granted = false;
+        row.indeterminate = true;
+    } else {
+        row.granted = false;
+        row.indeterminate = false;
+    }
+
+    menuChange(row, false);
+}
+
+/**
+ * 将树形结构的表格数据拍扁为一个普通数组
+ * @param treeData
+ */
+function treeToSimple(treeData: tableItemType[]) {
+    treeData.forEach((item) => {
+        if (item.accessSupport && item.accessSupport.value === 'support') {
+            const select =
+                item.assetAccesses?.find((assetItem) => assetItem.granted) ||
+                {};
+            item.selectAccesses = select.supportId || '';
+        }
+        flatTableData.push(item);
+        item.children && treeToSimple(item.children);
+    });
+}
+/**
+ * 设置子节点的状态
+ * @param childrens
+ * @param value
+ */
+function setChildrenChecked(childrens: tableItemType[], value: boolean) {
+    if (childrens.length < 1) return;
+    childrens.forEach((item) => {
+        item.granted = value;
+        if (item.buttons && item.buttons.length > 0)
+            item.buttons.forEach((button) => {
+                button.granted = value;
+            });
+        item.children && setChildrenChecked(item.children, value);
+    });
+}
+
+type buttonItemType = {
+    supportId: string;
+    name: string;
+    granted: boolean;
+};
+type tableItemType = {
+    id: string;
+    granted: boolean;
+    name: string;
+    indeterminate?: boolean;
+    parentId?: string;
+    children?: tableItemType[];
+    accessSupport?: any;
+    buttons?: buttonItemType[];
+    accessDescription?: string;
+    selectAccesses?: string;
+    assetAccesses?: any[];
+};
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/system/Role/Detail/index.vue b/src/views/system/Role/Detail/index.vue
index 8a907baa..68bee1f4 100644
--- a/src/views/system/Role/Detail/index.vue
+++ b/src/views/system/Role/Detail/index.vue
@@ -15,4 +15,19 @@ const route = useRoute();
 const activeKey = ref('1');
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.details-container {
+    
+
+
+    :deep(.ant-tabs-nav-wrap) {
+        background-color: #fff;
+        padding: 24px 0 0 24px;
+    }
+
+    .role-permiss-container {
+        padding: 24px;
+    }
+}
+
+</style>